首页  ·  知识 ·  交互设计
网页设计中的——“灰色”
小彬      编辑:dezai   图片来源:网络
灰,比白色深些,比黑色浅些,穿插于黑白两色之间,有些暗抑的美,幽幽的,淡淡的,不比黑和白的纯粹,却也不似黑和白的单一。
 灰,比白色深些,比黑色浅些,穿插于黑白两色之间,有些暗抑的美,幽幽的,淡淡的,不比黑和白的纯粹,却也不似黑和白的单一。灰色给人的感觉:
 
 
 

在我们平时的网页设计中,经常会用到灰色,总结了一下,灰色经常在如下场景中被使用:

 

●  表示在当前页面中不可操作,未被激活的“隐藏”状态

这样处理的好处是用颜色告诉用户,这里不能操作,鼠标移上也没有没有点亮效果。可以避免用户进行无效的操作,提高使用效率,并且从颜色上给予一定的暗示。

 

 

 
●  提示完整操作步骤流程

可以让用户对操作步骤一目了然,精简而清晰的步骤不会给用户带来心理压力,反而会促进用户完成该任务。

 

●  弱提示,辅助信息

这一类应用比较广泛,如大段辅助文字,一些提示信息,次要信息,不常用功能操作等,“灰色”处理会让页面和谐统一,并突出最主要的想要用户主要注目的区域。如输入框中的辅助文字,文章大标题等。

 

 
 
 
●  次要可链接信息

在搜索页面每条搜索结果都有下划线,再出现其他的蓝色下划线会让本来就已经很紧凑的页面显得更加局促,“灰色”处理可以调和这种矛盾,既能准确传达信息,又能使得页面整体和谐统一。

在轻博客中灰色连接也被广泛运用。

 

 
●  不鼓励用户进行的消极操作

不鼓励用户操作的按钮被设计成灰色,可以从视觉上给人不想点击的暗示。

 

 
●  用于信息分隔

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

 

 
●  用不同的灰色表示层级关系

在APP的设计中,会用不同的灰色,表示层级关系,让界面非常雅致的同时,层级关系分明。

 

 
以上总结是在平时的工作中和自己看网页的时候想到的,并不是很全面,如果有灰色的更多用处,大家可以提出哦^^
本文作者:小彬 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读