和IBM.com一样,Microsoft.com这个以蓝色为主色调而驰名的IT技术类网站,一直创造着“经典”一词。几年来它的每次改版所形成的简洁大方的界面设计,清爽整洁的色彩设计,亲和力强的引导设计,功能性强的信息格局,阅读舒适的文字设计等,都是企业网站和设计者创作时的参考和借鉴的典范。
Microsoft网站特色指数如下
视觉美观度:★★★☆
文化与情感表达度:★★★☆
功能使用便捷度:★★★★☆
为什么要强调“专业化”一词呢?肯定不少读者会提出疑问,如何从网页视觉设计上表现专业化?为了解答这一问题,我们先细致研究一下Microsoft.com的页面设计吧,从中一定可以得到很多启发。
采用直线划分页面
信息尽量填满,并且做到井然有序。要知道,直线可以给人一种严谨、精专的感受;相反,曲线给人的是一种飘扬、自由的感觉(图1)。所以在女性用品类的网站、饮品类网站、海产品类网站、为小孩子设计的网站以及为了表现柔软感觉的纺织品类网站……多采用曲线划分页面的曲线格局。而如同Microsoft.com这样采用直线、直角来划分的框架结构,就表现出了经过缜密思考的感觉、规划过的感觉、专业化的感觉。不可否认,直线框架非常适合IT类网站、电子产品类网站、法律以及政府类网站、男性用品类网站等。
用色单一
在Microsoft.com页面中,我们只能感受到一种色相——蓝色。为了给单色相增加变化,设计师运用了两到三种不同的渐变手法,一是铺垫到信息格局的背景里,二是在页面顶部增加层次感。
如果用多种色相调配着一起使用,这种方法多半出现在娱乐为主的网站上,有蓝的、绿的或黄的等等。对于那些健康类、儿童类、游戏类等网站也适合多色相的组合配色方式,可表现出嘈杂的多种情感的综合特征。但对于Microsoft.com这样的想要表达出“一种声音”的网站来说,单一色相可以给人一种清晰悦目的感觉,整洁、统一反而会加深印象,给人留下深刻的感受。即便在Microsoft.com的不同栏目中,还选择了一些淡淡的红、绿、紫色作为空白背景的背景色,但蓝色为主色调的观感并不能动摇,这些颜色和渐变效果一样,增加了画面的精致度,并为页面带来了起伏感和修饰感。
如果想要表现整洁与高效性,不妨学习一下Microsoft.com的用色方式,你一定会受益匪浅。
清新悦目的标语设计
文字不能直接堆砌在页面上,一些重点内容必须要用广告条才能吸引浏览者的注意力。那么对于一个信息资源丰富的企业网站来说,引导式的标语非常重要。
国内不少网站是把文字完全叠加在图片上,文字看不清楚,图片选择不恰当,广告面积太大,这些都将影响整个页面的视觉效果和妨碍有效传递信息(图2)。
让文字看得清楚是关键。即便文字不叠加在图片上,而图片占用了主要空间,文字仅在缝隙里得到了一点空间,这样对信息的传播会造成障碍。做标语广告时,多一分注意力放在文字设计上,让图片为文字开道,这是很核心的创作思路。虽然最有效的方式是去掉图片,只用文字设计广告,可这种情况又不美观。此时可以学学Microsoft.com,在广告条上增加背景图案,在增加变化的同时,却不会削弱文字的有效作用(图3)。
除此以外,Microsoft.com在标语广告的设计手法上都采用了简单明了的方式,选择的图片都比较明亮、清晰,这些点点滴滴的环节都突出了大气、明亮的视觉观感。把这些点滴综合起来就是形成专业与经典的Microsoft.com的基础要素。
作者简介:梁景红,网页视觉设计专家,长期研究网页视觉设计。曾出版畅销书籍《网站设计与网页配色实例精讲》、《个性化网页设计与鉴赏》等,其作品曾收录于《设想》一书,天极设计在线的优秀作者之一。