返回首页
当前位置: 主页 > 教学研究 > 图文教程 >

Web 交互设计“灰色”的8类应用

时间:2010-01-03 21:26来源:cdc.tencent.com 作�:T.d 点击:
在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分。我们常会发现许多灰色的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一。本文将从一些实际案例
  

  5. 次要可链接信息

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

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

 

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

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

  又如删除整条标签的icon。

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

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

 

  7. 信息分隔

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

  斑马线

  虚线分隔

  浅色块区分标题与内容区

 

  8. Mr.Gray的相对性

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

顶一�
(1)
100%
踩一�
(0)
0%
------分隔�----------------------------
最新评� 查看所有评�
发表评论 查看所有评�
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论�
评价:
表情:
用户�: 密码: 验证�:
发布者资�
设计个蛋 用户等级:高级会员 最后登�:2012-01-09 10:01
推荐内容

ʹ֢״׷֢״ôʹ綨Ƭʹѷôʹʹѷ֢״ʹ粡˵ʳ׷֢״Լĸ֢״ʹƫʹķţƤѢ֢״ѷ֢״ư취ʪ֢״ư취ʹֲҩʪʲôѷҩƬٷҩʹ֢״ѷư׷ʹ粻ܳʲôʹʲôҩʪķţƤѢܳʲôţƤѢķʹʲôư취ʪôţƤѢĸ֢״ʪҩƷʹʮζʹʹ綨Ƭʹ