参照物——固定与变化
本文节选自――《Web Designer Idea ――设计师谈网页设计思维》一书，未经许可，请勿转载！
作者：梁景红(Relen)
电子邮件：Relenliang#126.com (#换成@)
网址：www.relen.com
在格局版式一节中，Relen介绍了大量可参考的样式，也分析了基础结构及融合创新。在本节中，我们还会继续学习一些较为实用的思考问题的方法和创作手法。
参照物——固定与变化
我们常会遇到一些拥有特定要求的设计单。
例如，必须在页面的某个固定位置保留某种信息。又或者是需要继承由上一版延续下来的，如导航设计、版式设计的某些创作特征等。若是一些具有美感的特征需要保留或继承，这会让接下来的工作好做的多。若不是，那将给你的再一次创作带来不小的障碍，甚至让那些颇有经验的设计师们都会为此头疼不已。试想，谁愿意为那些有缺陷的思路圈圈转呢？
看一个实例：下图是热电公司的内部用软件界面，我们可以看到页面的设计是参考了网页界面的形式。由于公司的机器大多从小屏幕换成了大屏幕的，所以需要把原本800像素的界面改为1024像素的。
改版前：
点击放大
由于此次不更改软件程序，再和软件师沟通后得知，页面可以分成五块区域，只要每块区域的内容不变，就不影响到程序连接。也就是说，重新设计的前提是：所有页面元素的位置不能更改。
先来分析一下这个页面。画面十分枯燥、用色不讲究。格局设计不合理，页面信息零散分布，画面没有统一的视觉外观，也缺乏情感表达，更谈不上营造气氛和突出气质了。
既然如此，我们恐怕要解决一些列的问题：
1， 让画面上的元素有机的统一起来，减少空白的区域。
解决方法：最为零散的莫属区域5的那些图标。除了放大区域5的图标外，则是为它们增加一个统一的背景色。为什么？从视觉心理上讲，不论在同一个色块上放置多少个零散的物体，由背景色块的边界所形成的区域都会被认为是同一物体。由此以来，区域5的图标被整合。
1.2 字体
1.2.1 字体样式过多
问题
页面中的字体样式过多
分析
显示太多的属性会让用户难以找到感兴趣的对象，增加了用户的记忆负担。
案例
我们政府的网站，文字样式有十几种。让用户抓不住重点。
同为门户，网易首页的文字样式就规划得很清晰，重点突出。
1.2.2 相同样式的文字功能不同
问题
外观相同的文字，功能不同，违背一致性原则，让用户在交互过程中有挫败感。
分析
外观相同的文字在用户看来会具有类似的功能，如：是不是链接，是不是在新窗口打开链接。如果相同样式的文字在页面中，既有链接文字，也有非链接文字，就会让用户在浏览页面时不断去试探文字的功能。很可能用户试图点击文字的时候却发现文字不是链接，心中默认即将在原窗口打开的链接却在新窗口打开了，这样就会给用户带来挫败感。
案例
“中华人民共和国中央人民政府”网站。“应急管理”和“主题服务”文字样式相同，却前者是链接而后者不是。
CCTV首页，顶部导航：“繁体”链接的目标是原窗口，而后面文字样式相同的英文版、西班牙文版、法文版链接的目标是新窗口。
某学校网站的导航栏。前面的链接都是打开一个页面，最后一个“联系我们”却是发送邮件的链接。用户以为点击它会和前面一样打开一个页面，但点击后却启动了Outlook。
1.2.3 字号太小
问题
页面文字字号太小，而且使用了固定大小的字号样式，使视力不好的用户无法阅读。
分析
老年、视弱的用户也许很难看清网页上的12像素文字。他们往往会使用类似IE中的“查看->字体大小->最大”菜单来放大文字阅读。但如果使用像素作单位来定义文字大小的样式，对IE来说，这个菜单就失效了。大部分网页应尽量采用百分比为单为来定义文字大小的样式，主要面对视力不好用户的网站更应该这样。
案例
中国老年网，网站主要用户是中老年人。大部分文字都是12像素，在IE下无法放大观看，让老头老太太们拿着放大镜去瞅吧。
2，从色彩上改变画面的气氛。
解决方法：一方面尽可能准确的表达企业的内涵，另一个方面，体会每天都会看到这个页面的人的心情，尽量提供一些开阔的，饱满而富有变化的色彩。
Relen选择了暖红为主色，蓝色为补色。注意，补色不是辅色，而是作为均衡力量的第二种颜色。为什么？暖红热情有干劲，不仅符合这个行业的特征，也给每天阅览这个页面的员工一些朝气。红色很容易注入记忆，给人们留下深刻印象，但仅有红色是不够的，因为红色容易浮躁，用多了会让人厌烦，便会适得其反。这时蓝色就有了平衡力量，蓝色是代表科技和现代化的，从这个角度符合了“领导”的喜好。其次蓝色是一种继承，并让人们保持冷静，从这个角度上非常适合长期做在办公室的人。重点是，Relen选择的蓝色并非是前版中僵硬的紫蓝，而是一种天空的蓝。
有人问，那灰色的作用呢？灰色甚至比红色和蓝色的面积都大阿？灰色才是辅助色，它的作用是增加节奏感、文化厚度，以及品质。过淡的灰色本身没有具体的色彩情感，可当它作为辅助色时，往往能够提高画面的精致度、品位，使作品看起来更加别致而有思想。而灰色也不是随便铺的，Relen用斜线铺色，这会添加一些细节的魅力。
最后，为了让画面增加少许变化和活泼的气氛，在区域4的信箱栏跳换几个淡雅的颜色。从整体角度看，它们起不了什么大作用，细致看时，却可感受到一些微妙的情感变化。每天收信的员工们会体会到的。
3，从插图上提供知性、感性的各种情感。
解决方法：提供开阔的插图，提供抽象的插图，提供具象的插图。
要知道，格局是死的，你不能夸过界限。既然如此，那把区域1切割为两块，把区域4也切割成2块。Relen选择了一张云彩很多的天空的插图放置在右上角。它可以使人的心情变得开阔，这个设计的确赢得了客户的好评。其次在标志处的背景图要使用具有抽象色彩的插图，尽量处理得让人看不清楚是什么，它的作用只是提供富有饱满色彩的插图特征，给人带来无限的想像力。其次保留一些看得清楚的现代感、高科技感的插图，也要进行一定的加工，增加造型感，并满足客户方对次的需求。
最后，向客户索取企业精神的两句话，写在页面右下角处，填补页面信息少的缺点。这个角度的策划，也迎合了客户方领导的喜好。
4，看看是否还能增加造型的美感呢？
直线太多，过于死板。增加一条曲线，由于不能跨越设计，所以弧度不会太大，起到一些作用即可。不太满意导航，尝试多次发现越花哨越不好，最后选择了简洁大方的设计。
给图标加上了小阴影；为广告条修改成圆角的；调试文字的大小；并为色彩做最后的统一调整……注意一切细小的环节，最终确定定稿。
改版后：
点击放大
经过以上分析中，你是否能够体会到创作的“障碍感”和“跨越感”呢？虽然关于固定和变化的课题涉及到的实际情况各有不同，但基本思考方法都是一样的。有参照物的设计并不一定都是不好的，如何变劣势为优势是一个很有趣的思考变化的过程，在实际创作中慢慢体会吧。
更多信息，参见《Web Designer Idea ――设计师谈网页设计思维》
