注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

网页中的交互设计  

2012-05-23 12:02:52|  分类: 交互设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:互联网

 

网站的交互设计分2种:流程交互和界面交互(即"单页面交互"或“小交互”),而界面交互又包含2类:“视觉结构”和“动态模块”。

 

何谓视觉结构?

界面信息按逻辑关系、包含关系和先后顺序,进行排列、组织后形成的模块,即为视觉结构。

 

何谓动态模块?简单的说就是“AJAX”,它有几种视觉呈现方式:弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)

 

这个界面结构可以很大,也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的:

网页中的交互设计 - 听歌 - 学会珍惜
 

这些大的界面视觉结构都是由一个个小的模块结构组成(如下图):

网页中的交互设计 - 听歌 - 学会珍惜
 

我们不是阅读而是扫描

网页中的交互设计 - 听歌 - 学会珍惜
 

我们总是处于忙碌之中

我们知道自己不必阅读所有内容

我们善于扫描

 

建立清楚地视觉层次

  • 越重要的部分越突出

网页中的交互设计 - 听歌 - 学会珍惜

  • 逻辑上相关的视觉上也相关

网页中的交互设计 - 听歌 - 学会珍惜

 

 

降低视觉噪音

 

眼花缭乱、背景噪音

网页中的交互设计 - 听歌 - 学会珍惜
 

视觉结构对于信息架构的作用:

因为视觉结构中承载着信息,所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。

攻守平衡的关隘:

视觉结构,上可攻信息架构,下可守界面设计。一个交互设计师对信息的理解有多深?看看他原型中的视觉结构就知道了。

问题和后果:

信息架构出了问题(譬如一级导航里缺内容,流程走不通等等),则会导致产品根本不能用。

视觉结构不清晰时,我们接收信息的速度就会变慢,导致产品不易用。

换句话说,信息架构如果考虑不明白,视觉结构做得再好也白搭,而UI设计最终是充当尸体彩绘和替罪羊的角色。

当我们对众多“尸彩产品”愤怒的时候,是否也该反思一下,到底是什么原因造成的?

 

 

 

 

  评论这张
 
阅读(164)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018