灰色在Web交互设计中的应用(2)

4. 表示未被激活的“隐藏”状态

在Web设计当中，常需要考虑当前态、未被激活态等样式。常见方式是灰色化处理未被激活态，在对比中使用鲜明的色彩告诉用户当前所处的位置或状态。

下图为igoogle联系人当前不在线时场景，使用了灰色icon来进行区分，这类设计在即时通信产品中较为普遍。

5. 次要可链接信息

深色下划线会给清爽的页面带来些许不和谐，“灰色”处理可以调和这种矛盾，既能准确传达所需表达的信息，又能使得页面整体和谐统一。

Apple在此的Web设计秉承了一贯的简洁风格，使用简单的一小段下划线，却传达出了丰富的信息。

6. 不鼓励用户进行的消极或危险操作

下图中Flickr的“封锁”操作点击后，会阻止该好友与你进行一切信息交换与互动，该操作的“灰色”处理恰好可以辅助表达出这层隐含的意思。

又如删除整条标签的icon。

存储与取消的操作，一个为亮色另一个进行“灰色”处理，这类应用在Web交互设计中应用十分普遍。

这类应用与禁用使用场景的一些区别，在于鼠标mouseover时，会有响应，如鼠标变手型，对象变色等。

7. 信息分隔

常见的有下图中的斑马线，虚线，色块等来区分不同信息区域。

斑马线 #FormatImgID_18#

虚线分隔

浅色块区分标题与内容区

8. Mr.Gray的相对性

因为色彩具有明显的相对性，而某些Web设计为保持整体风格的一致，甚至会将主要导航“灰色”处理，然而，这些处理都是相对的，也同样可以做到主次分明。如下图中wordpress的主导航。虽然导航当前态文字为灰色，但依靠浅色背景，相对而言还是更为突出的。只要把握住Mr.Gray的相对性，对其使用便能更加自如了。

以上内容均为个人观点与总结，有疑问欢迎共同讨论和交流，若有不足之处还请不吝赐教。

讨论：http://www.missyuan.com/viewthread.php?tid=437961