网站交互设计中的视觉结构
2011-10-09 22:05
441 查看
时间:2011-10-09 01:08来源:周全 作者:周全 围观: 318 次
网站的交互设计分2种:流程交互和界面交互(即”单页面交互”或“小交互”),而界面交互又包含2类:“视觉结构”和“动态模块”。
何谓动态模块?简单的说就是“AJAX”,它有几种视觉呈现方式:弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)
何谓视觉结构?
界面信息按逻辑关系、包含关系和先后顺序,进行排列、组织后形成的模块,即为视觉结构。
这个界面结构可以很大,也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的:
再如Blog的视觉结构
这些大的界面视觉结构都是由一个个小的模块结构组成(如下图):
视觉结构的对比: yixieshi
以上是2款网页游戏中关于“农田升级”时的不同表现方式,哪一种视觉结构更易让用户接收信息并操作?
导致视觉结构混乱的因素有哪些? yixieshi
1. 最常见的情况是公司无交互设计师,产品信息未经过梳理就传达给UI设计师了,最后产出了一个可用性比较差的产品。 互联网的一些事
我们常常看到:PM把设计诉求提供给UI,UI也按部就班的完全执行,可出来的东西就是感觉有问题,但也说不出到底为什么,于是一版接一版不停的改,最后……这个沉重的负担压得UI直不起腰来,这不公平。
此时UI设计师或产品经理要大胆的站出来:“我们需要交互设计师来帮我们梳理信息!”
当然,交互设计师也要积极主动回应一下。
2.还有一种情况:由于视觉设计本身是一种比较主观的创作性工作,那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲,加入许多不必要的线条和修饰……诸如此类,很多产品上线后的可用性可想而知。
这种情况下,交互设计师(或产品经理)的个人魅力和沟通能力尤为重要,既不能打击UI设计师的积极性,又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥,这是一种艺术。
视觉结构对于信息架构的作用:
因为视觉结构中承载着信息,所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。
攻守平衡的关隘: 互联网的一些事
视觉结构,上可攻信息架构,下可守界面设计。一个交互设计师对信息的理解有多深?看看他原型中的视觉结构就知道了。 互联网的一些事
问题和后果:
信息架构出了问题(譬如一级导航里缺内容,流程走不通等等),则会导致产品根本不能用。 yixieshi
视觉结构不清晰时,我们接收信息的速度就会变慢,导致产品不易用。
换句话说,信息架构如果考虑不明白,视觉结构做得再好也白搭,而UI设计最终是充当尸体彩绘和替罪羊的角色。 yixieshi
当我们对众多“尸彩产品”愤怒的时候,是否也该反思一下,到底是什么原因造成的?
本文链接:/article/1238133.html
网站的交互设计分2种:流程交互和界面交互(即”单页面交互”或“小交互”),而界面交互又包含2类:“视觉结构”和“动态模块”。
何谓动态模块?简单的说就是“AJAX”,它有几种视觉呈现方式:弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)
何谓视觉结构?
界面信息按逻辑关系、包含关系和先后顺序,进行排列、组织后形成的模块,即为视觉结构。
这个界面结构可以很大,也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的:
再如Blog的视觉结构
这些大的界面视觉结构都是由一个个小的模块结构组成(如下图):
视觉结构的对比: yixieshi
以上是2款网页游戏中关于“农田升级”时的不同表现方式,哪一种视觉结构更易让用户接收信息并操作?
导致视觉结构混乱的因素有哪些? yixieshi
1. 最常见的情况是公司无交互设计师,产品信息未经过梳理就传达给UI设计师了,最后产出了一个可用性比较差的产品。 互联网的一些事
我们常常看到:PM把设计诉求提供给UI,UI也按部就班的完全执行,可出来的东西就是感觉有问题,但也说不出到底为什么,于是一版接一版不停的改,最后……这个沉重的负担压得UI直不起腰来,这不公平。
此时UI设计师或产品经理要大胆的站出来:“我们需要交互设计师来帮我们梳理信息!”
当然,交互设计师也要积极主动回应一下。
2.还有一种情况:由于视觉设计本身是一种比较主观的创作性工作,那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲,加入许多不必要的线条和修饰……诸如此类,很多产品上线后的可用性可想而知。
这种情况下,交互设计师(或产品经理)的个人魅力和沟通能力尤为重要,既不能打击UI设计师的积极性,又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥,这是一种艺术。
视觉结构对于信息架构的作用:
因为视觉结构中承载着信息,所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。
攻守平衡的关隘: 互联网的一些事
视觉结构,上可攻信息架构,下可守界面设计。一个交互设计师对信息的理解有多深?看看他原型中的视觉结构就知道了。 互联网的一些事
问题和后果:
信息架构出了问题(譬如一级导航里缺内容,流程走不通等等),则会导致产品根本不能用。 yixieshi
视觉结构不清晰时,我们接收信息的速度就会变慢,导致产品不易用。
换句话说,信息架构如果考虑不明白,视觉结构做得再好也白搭,而UI设计最终是充当尸体彩绘和替罪羊的角色。 yixieshi
当我们对众多“尸彩产品”愤怒的时候,是否也该反思一下,到底是什么原因造成的?
本文链接:/article/1238133.html
相关文章推荐
- 网站交互设计中的视觉结构
- 读书笔记-贰-《网站设计结构-有效的交互设计框架和模式》
- 交互:一个很好的视觉交互设计网站--www1.zcool.com.cn
- 网站登录框的交互设计和报错提示
- 网站设计中“线”的视觉构成
- 导航设计中的信息结构【交互设计, 用户研究】
- 网站交互设计:Web网站通知系统设计
- 《程序员》 -- 视觉与交互设计——从iOS 7谈起
- 网站建设的交互设计原则是什么
- 网站设计中“点”的视觉构成
- 百度手机输入法2.0升级交互视觉设计分享
- 网站的视觉设计
- 网站设计和三层结构
- 20多个漂亮的使用jQuery交互的网站设计欣赏
- 网站SEO技巧:搭建一个强壮的内部结构设计
- 20多个漂亮的使用jQuery交互的网站设计欣赏
- 网站设计中“面”的视觉构成
- UI交互设计的网站
- 网站设计-引导用户交互
- OFBIZ 网站或店铺视觉主题(visual Theme)设计