- Photoshop+Dreamweaver+Flash+CSS完美网页设计经典范例
- 尼春雨 尚峰编著
- 1144字
- 2025-02-24 16:03:11
2.3 网页构成元素设计
网站的品质常常体现在网页细节的设计上,而不仅仅是网页页面的布局和配色。网页中的导航菜单、网站标志和Loading画面等各种页面构成元素都参与决定网页的精美程度。所以,网站是否能给人以耳目一新的感觉,页面构成元素的设计很重要。
2.3.1 网站标志的设计
网站标志是网站独有的传媒符号,它的主要作用是传递网站定位,表达网站理念,便于人们识别。网站标志是网站内涵的集中体现,通常出现在页面的上方。
标志设计追求的是以简洁的符号化视觉艺术形象向人们传达网站的主题和理念。网站标识设计的设计手法有很多,常用的有表征性手法、借喻性手法和标识性手法等,其表现形式通常分为图案型、文字型和图文型等。
图案型标志可选择抽象图形或具象图形作为其形式主体,通过隐喻、联想、概括和抽象等表现方法对标识体进行加工,从而设计出独特、醒目的图案。图案型标志属于表象符号,其对理念的表达概括而形象,所以容易区分和记忆。图2-33所示为图案型网站标志。

图2-33 图案型网站标志
文字型标志是指将标识体的名称或其产品名的文字形态进行字体设计,这种表现形式与被标识体的联系密切,易于被受众理解。文字型标志属于表意符号,其含义直接,对所表达的理念具有说明的作用。但是因为文字本身的相似性,在实际沟通与传播活动中,受众对标识本身的记忆容易模糊,从而弱化对被标识体的长久记忆。图2-34和图2-35所示为文字型网站标志。

图2-34 文字型网站标志1

图2-35 文字型网站标志2
图文型标志是指将文字与图案进行结合的设计,是一种表象表意的综合。图文型标志兼具文字与图案的属性,但都容易导致影响力相对弱化,所以出于不同取向的考虑,通常标志会制作成偏图案或偏文字的设计,这会在表达时产生较大的差异。图2-36和图2-37所示为图文型网站标志。

图2-36 图文型网站标志1

图2-37 图文型网站标志2
2.3.2 网站导航的设计
网站的导航栏可以引导浏览者迅速找到想要的信息。目前在网页设计中,导航栏的形式很丰富,常见的是在网页的上方或两侧,以文字列表的形式展示导航栏,如图2-38所示。也有为追求特色的艺术效果,将文字和图形结合设计出的导航栏,如图2-39所示。
在设计过程中,可以根据网站风格和主题合理地设计导航栏的形式。文字列表形式的导航菜单可以用CSS来设置显示样式,如果需要特殊艺术效果的导航形式,可以利用Photoshop进行图片化处理。

图2-38 导航菜单1

图2-39 导航菜单2
2.3.3 其他网页视觉元素的设计
能让网站变得更精彩的还有很多其他细节的设计,比如网站中ICON的设计、网站404错误页面的设计等,还有最经常遇到也是最人性化的设计,即Loading的设计。好的Loading设计可以让消费者耐心地等待网站的下载,帮助他们愉快地度过等待的时间。Loading设计的方式和手段也有很多,例如最常见的百分比提示,还有很多其他饱含设计师的创意和心血的方式,如图2-40~图2-43所示。

图2-40 Loading设计1

图2-41 Loading设计2

图2-42 Loading设计3

图2-43 Loading设计4