
上QQ阅读APP看书,第一时间看更新
2.5 界面友好性原则
网页设计的友好性原则包括三个方面。
1.对用户友好
能够充分满足用户的需要,以友好的信任感打动人心,从而提高网站的访问量。
2.对网络环境友好
适合搜索引擎进行检索,便于积累网络营销资源。
3.对经营者友好
能够使经营者的网站日常维护和管理更高效、方便、友好。


友好性原则
网页设计的友好性原则通常表现为打开网站后界面美观,便于使用,可用性高,给人以美观、舒适、大方的感觉。

设计理念:该网页采用海报式的布局方式,整体效果舒展大气。在画面中央,利用色相的区别,将版面一分为二,形成了鲜明的对比。
色彩点评:该网页采用类似色的配色方案,以青色与青绿色为主体色,以黄色和绿色为点缀色,整体色调轻松活泼。
前景中的文字位于两个版面的中间,让两个版面产生了紧密的联系。
在背景中以人物剪影效果作为点缀,既丰富了画面的内容,又不会喧宾夺主。
标题文字在字体的选择上非常符合整个画面的气氛,黄色的字体在画面中效果也非常突出。


该网页以黄色作为主色调,绿色作为点缀色。我们可以看到,网站的Logo是一个绿色的仙人掌,而选择黄色作为主色调是为了让访客联想到沙漠。矢量插画的风格设计方式给人一种幽默、有趣的感觉。


这是一个网站的首页设计,画面正中间的欢迎问候非常符合网站的友好性原则。藏蓝色的色调给人一种神秘、悠远的感觉。采用俯拍手法的图像,很好地将访客的视线集中到了画面中心位置的文字上,具有一定的视觉导向作用。

提升网页品质的技巧——导航栏(条)的设计
导航栏最明显的作用就是指引用户快速进入页面。合理的导航条可以使得页面层次清晰,方便用户使用。在导航栏的设计方面,要考虑其摆放位置、风格、所用技术、可用性和网页易读性。

配色方案

双色配色

三色配色

四色配色
网页设计赏析

