网页UI设计之道(第二版)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.7 扁平化在网页UI设计中的应用

随着扁平化设计风格的流行,扁平化风格的网页界面越来越多,特别是许多欧美网站的页面都采用扁平化设计风格,页面设计简单、大方,内容表达直观、突出,并且网页界面具有良好的用户体验和交互性。

网页界面中所包含的元素有很多种,这些设计元素也是通过一系列的风格、尺寸和形状等属性体现出来的,这些元素在网页界面设计中都有各自不同的用途,如果设计者使用恰当,且设计新颖,每一种元素都能够以它们独特的展现方式使得网页风格焕然一新。

1.7.1 图标

图标在网页中占据的面积很小,不会阻碍网页信息的宣传。另外,设计精美的图标还可以为网页增添色彩。由于图标本身具备多种优势,几乎每一个网页界面中都会使用图标来为用户指路,从而大大提高了用户浏览网站的速度和效率,也极大地提升了网页界面的美观程度,如图1-47所示。

图1-47

1.7.2 圆角

所谓的圆角设计就是指将要插入到网页中的图片或其他元素以圆角的形式在网页中展现,从而达到一种圆润、平滑的效果,这种方法可以使得浏览者在浏览该网页时在视觉体验上有一种舒适、平静的感觉,而不会产生特别尖锐的视觉效果。

圆角在网页中的使用并不能够随心所欲地大量使用,只有当圆角和网页的整体视觉风格相匹配时,其使用才是合理的。另外,将多个圆角构图联合起来使用还可以在视觉效果上增强设计的总体性,如图1-48所示。

图1-48

1.7.3 折角

折角能够让网页或者网页中的元素以类似纸张边角折起、卷起等效果显示,非常具有文化气息,它将网页与印刷的形式相联系,让浏览者对其有一种信任感,并且更容易接受网页界面上所传达的信息。

折角的网页展现形式大多适用于一些文化艺术类网站,因为这种结构形式的网页界面很容易让人联想到纸张,从而与网站的主题内容遥相呼应,能够丰富网站的内容和整体结构,如图1-49所示。

图1-49

1.7.4 标签

标签元素在网页界面设计中并不会经常用到,但是实质上,标签和折角、图标等设计元素的用途差不多,只不过它不具备其他元素张扬的风格,它只会以一种巧妙且恰到好处的方式在网页中出现并为用户提供网站的相关信息。

在网页界面中吸引浏览者的注意力是标签的本质,并且尤其值得注意的是,当我们需要将某个信息展示给用户时,只需要在标签上放置一个标题,就可以达到突出该部分信息的效果,用户若想浏览该信息也极为方便、快捷,如图1-50所示。

图1-50

1.7.5 徽章

徽章在网页界面设计中是作为装饰品来吸引用户的注意力的,并且给他们传达某些重要的信息,如果使用得当,很有可能会得到意想不到的精彩效果,如图1-51所示。

图1-51

1.7.6 条纹

条纹在网页界面设计元素中是最简单也是相当微小的一部分,但是在对网页界面进行设计时,还是会经常用到条纹这一元素的。

条纹没有徽章的耀眼、图标的深刻意义且大多作为背景来展示,因此其在网页界面上主要是以细致入微并且赏心悦目的方式来提高页面设计水准的,从而在不知不觉中对网页进行由内而外的改变和提升,如图1-52所示。

图1-52

1.7.7 装饰元素

装饰元素在网页界面中是比较重要的,大多数网页都需要通过各种精美的装饰元素来点缀,吸引浏览者驻足观看,从而能够使得网页信息得到充分的宣传,如图1-53所示。

图1-53

1.7.8 装饰背景

背景也属于装饰元素。如今,在网页界面上使用装饰模式已经成为一种流行趋势,如果装饰背景在网页界面中运用得当,则可以让一个设计变得时尚、典雅或者帅气、刚毅,如图1-54所示。

图1-54