本文刊于8月~9月《计算机世界》报,专题连载《全局于网站整体的网页设计 二》,一直忘发上来,备份使用,插图欠奉。
网页设计的具体化就是网页界面设计,不具备一个考虑用户的好界面的话,无论这个网站有多么好的内容,也无法向用户很好的进行表达。兼具实用性与便利性的界面当然是重要的,但能够唤起用户的好奇心与乐趣,使用户停留及陷入网站,给人留下深刻的印象的界面也是很重要的。要想实现这样的网页界面,就要明确理解网页的特性,在此基础上网页设计者还要具备创造力和卓越的感觉。
1. 网页设计的规范
理解并遵循网页设计的规范是网页界面设计的基础,在行业中也经常称为设计的“一贯性”。一个优秀的有经验的设计师能把网页设计的基本规范很自然很本能的融入在作品中。在显示器的方寸显示空间里以被限定的分辨率来展示页面、以键盘和鼠标两大件来交互控制界面、继而在有限的网络传输速度下一个个层级的浏览整个站点,可想而知其中有多少要素需要规范化。
形象标志(LOGO)、导航、搜索、内容区块、页面长度、字体字号等元素是这些规范中至关重要的部分。这些元素中大部分都表现在网站的头部或者是第一屏能显示的区域内:在头部显著位置显示网站LOGO、以合理的层级关系及最普通的字体字号来展现导航、设计合理的搜索功能块。注意:除非真有切实需要,网站的LOGO尽量不要以flash动画展示,同时导航也尽量不要以flash动画或图片来表现,因为浏览器有拦截flash的可能,而不同终端设备上的浏览器对flash和图片的不支持也可能造成网站无法继续访问或者根本无法识别。
[i]图1:汽车之家的导航设计,图文结合,非常出色。
图2:贵州省人民政府网站,网站标题和LOGO全部制作到flash动画中,当浏览器屏蔽flash的时候,网站将无法识别。
图3:伊利集团网站,导航flash很漂亮,但是当浏览器屏蔽flash的时候,导航将不可见,网站无法被继续访问。
图4:广东省人民政府网站,非常优秀的设计,导航栏全部以非图片形式制作,既保证了美观,又体验了实用性。[/i]
网站各内容区块应切割明显,让用户能很容易的判断内容块的起始。若非门户类型网站,网站页面长度尽量不要超过三屏(因为不同显示器分辨率参数不同,三屏的说法不一定适用于所有设计),即不要让用户在同一页面上过多滚动鼠标滚轮。中文网站设计时应注意内容区域文字尽量使用12像素、14像素画等偶数字号以准确表达中文字体的整齐切割,正文汉字部分应严格使用宋体,保证用户最好的阅读感受。标题部分可以稍微增大字号,页面上除装饰性图片或广告之外的地方最多使用两种字体。
图5:方正字库网站,左侧列表使用13像素宋体,右侧列表使用12像素宋体,同时除广告外还出现了黑体和行楷等数种字体。
2.简洁为美
网页设计不是简单的在显示器上看到的漂亮的装饰性的画面。所谓的网页设计得比较好的网站,就是考虑了多媒体的特性,色彩设计和信息排列的一定秩序,能更有效的向用户传达内容。比起华丽的画面装饰,网页设计应该在更有效的传达信息方面多下些功夫。这必须有对布局设计和色彩的正确理解和相关知识,要熟知网页物理系统的特性,并具备应对各种情况的能力。在具备人性化界面的网站的设计中,我们不难发现其表现出来的功能性和自然美。
简单就是美,如今的web设计中简约风格意见逐步明朗,在体验了负责繁琐的颜色和图片堆砌之后,主流设计开始返璞归真,毕竟网站是给用户使用的,而不是光用来看的。简约的设计能给人以轻松的视觉体验,更好的突出网站功能主题,更适用于网站文字内容的资料表达。
[i]图6:互联网上最著名的相册Flickr,最简约的设计。
图7:校内网,中国SNS典型代表,色块和线条为构成主体,网站结构上极少使用图片。
图8:安徽省政府网站,首页使用了极少见的纵向4栏分割设计,极其繁琐[/i]
很多设计师认为画出美妙绝伦的页面才是设计,其实不然,要在有限的元素和色彩里表达出风格才是更有难度也更有层次的设计。经过严谨的思考和漫长的推敲,最终只花几分钟为页面画下一个简单的圆角框或者一条两像素的实线,其效果也许比涂满了色彩和组合了数十个分层的画面好上很多。设计最终将上升到思想的层面,而不是仅仅停留在工具和素材的使用。
3.重视交互和用户体验
在界面设计方面,很重要的一点就是要站在用户的立场上去进行设计,既能给用户带来方便,又兼备视觉的冲击力,这样的网页界面设计才是每个网页设计人员应思考并追求的东西。如果网站的画面既不美观大方,使用起来也不方便,那么这个网页界面的设计是有失误的。在网页界面设计方面,尤其应该同时考虑使用的便利性和视觉效果这两方面的问题。在使用方法方面,可能的话应遵循普遍规律,设计得能让用户很容易适应,界面的构成不能太复杂,主要内容应设计在引人注目的地方,所有操作性按钮位置应该科学。同时,要考虑好符合网站主体而使用的色彩系统,去除不必要的内容,把信息块分类设计得成体系,让用户很容易就能找到想要的内容。
如果不是那些追求艺术美感和试验性的网站,无论您想表达的东西是多么新颖多么富有创意,假如您把网站头部设计得很复杂很难以理解,进而影响了用户的操作,那么它就很难成为一个优秀的网站。
[i]图9:湖南省人民政府网站,所有同级内容无区分重复堆砌,容易让人视觉疲劳。
图10:果皮网,知名女性用品网站,右侧列表过于冗长,用户体验极差。
图11:Sandisk中国总代宏衢网站,简单的页面上采用了过多的繁琐的图片设计。[/i]