网页设计经验之杜绝设计中的视觉噪音(图文)

2020-05-03 11:03:33易采站长站整理

  (色彩在区分信息模块时的运用;)
  2.布局
  界面中的信息能否被有效的传达,离不开良好的组织和布局;这需要考虑以下这几个要素:
  a.层次(层级关系,段落关系)
  在信息的视觉展现中,信息之间层级关系的表达非常重要,如一个界面中导航区域与内容区域的关系、一篇帖子下的所有评论之间的关系、一篇文章中的段落关系等等……恰当的视觉设计,能够通过对视觉元素的展现来暗喻信息之间的层级关系;如果视觉层级关系展示不当,会使用户产生困惑,造成理解障碍;
  (左:信息的层次划分;右:信息的段落划分)
  b.对齐
  在内容排版的设计中,把内容对齐,会形成一种良好自然的边界;该边界沿着这一组对象延伸(利用了格式塔原则——连续性原则),这样带来的好处是加强了边界引导读者的眼光平滑延伸,有助于形成良好的视觉流。
  (在表单设计中,也是如此。操作区域对齐,将大大提升用户的完成任务的效率。表单元素居中对齐后,用户的视线沿着中线下移,能够快速阅读标签并找到相对应的输入框。)
  c.分组
  将原本零散无序的信息分组展示,是揭示信息之间的内在联系、帮助用户理解和记忆的有效手段;在视觉的表现上,分组就是让每组信息在视觉表现上具有相关联或相似的地方;
  (如;区域划分、间隔划分、色彩划分、形/符号的划分、层级划分tab)
  (元素的区域划分)
  (元素的间隔划分)
  (元素的色彩划分)
  (元素的形/符号划分)
  d.间距
  关于信息展现中的间距设计,视觉上较常使用栅格化的设计思想;关于栅格化设计,可以在网上找到很多相关的文章案例,这里不做重点介绍;
  (网页的栅格化设计实例)