交互设计中的视觉结构
分类 : 用户体验 - 09/03/23网站的交互设计分2种：流程交互和界面交互（即"单页面交互"或“小交互”）,而界面交互又包含2类：“视觉结构”和“动态模块”。
何谓动态模块？简单的说就是“AJAX”，它有几种视觉呈现方式：弹出的浮动层、Tab切换、展开 (侧边展开或下拉展开)
何谓视觉结构？
界面信息按逻辑关系、包含关系和先后顺序，进行排列、组织后形成的模块，即为视觉结构。
这个界面结构可以很大，也可以很小。拿Igoogle的三栏式来举例,其视觉结构是这样的：
再如Blog的视觉结构
这些大的界面视觉结构都是由一个个小的模块结构组成（如下图）：
视觉结构的对比：
以上是2款网页游戏中关于“农田升级”时的不同表现方式，哪一种视觉结构更易让用户接收信息并操作？
导致视觉结构混乱的因素有哪些？
1. 最常见的情况是公司无交互设计师，产品信息未经过梳理就传达给UI设计师了，最后产出了一个可用性比较差的产品。
我们常常看到：PM把设计诉求提供给UI，UI也按部就班的完全执行，可出来的东西就是感觉有问题，但也说不出到底为什么，于是一版接一版不停的改，最后……这个沉重的负担压得UI直不起腰来，这不公平。
此时UI设计师或产品经理要大胆的站出来：“我们需要交互设计师来帮我们梳理信息！”
当然，交互设计师也要积极主动回应一下。
2.还有一种情况：由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲，加入许多不必要的线条和修饰……诸如此类，很多产品上线后的可用性可想而知。
这种情况下，交互设计师（或产品经理）的个人魅力和沟通能力尤为重要，既不能打击UI设计师的积极性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术。
视觉结构对于信息架构的作用：
因为视觉结构中承载着信息，所以在某种程度上它也起到诠释、部分验证信息架构是否合理的作用。
攻守平衡的关隘：
视觉结构，上可攻信息架构，下可守界面设计。一个交互设计师对信息的理解有多深？看看他原型中的视觉结构就知道了。
问题和后果：
信息架构出了问题(譬如一级导航里缺内容，流程走不通等等)，则会导致产品根本不能用。
视觉结构不清晰时，我们接收信息的速度就会变慢，导致产品不易用。
换句话说，信息架构如果考虑不明白，视觉结构做得再好也白搭，而UI设计最终是充当尸体彩绘和替罪羊的角色。
当我们对众多“尸彩产品”愤怒的时候，是否也该反思一下，到底是什么原因造成的？
又是一篇非常好的设计文章
[回复]
还是需要相互协作。视觉设计能使产品更人性化。
[回复]
我在寻思
那些图是用什么工具画出来的
[回复]
周全， 视觉结构这个概念好！ 我上次找不到一个好的词来形容这个结构，因为它！=信息架构。
虽然我很讨厌概念，但是你这么一写，我以后表达更清晰了！
好文！
[回复]
文章写得相当好，梳理视觉结构是交互设计师重要的职责
BTW：那个色块的图是用什么工具画了，有没有什么简单的画法
[回复]
额。。很强大的一帖。。
“…产品信息未经过梳理就传达给UI设计师了…”我做的第一个团队商用项目就是这样，没有任何前期项目分析和流程规范就让我接受画“Icon”了…经过N次修改后，虽然感觉还可以，但其中真的经历了痛苦地修改和替换，可想而知，最后工作量和效率完全成反比了…
坚决不做“尸体彩绘”和“尸彩产品”的背锅背成包公的同学。
[回复]
@枯の灵 , @Angela
我常用的原型创建工具：AI、PS和Axure
如果是单页面原型，我更喜欢AI，强大的快捷键让排版和选色都很快。
流程交互我更喜欢用Axure，到目前为止还没有发现比这款更好的表现流程的原型工具！
[回复]
恩，设计师要学会说“No”，并且要敢于承担责任。
[回复]
关于 农田升级 这个究竟是第一幅好还是第二幅呢？能说下为什么吗？ 我觉得第一幅对升级条件说明分列说明，第二幅要看仔细看才明白，另外第二幅说明升级后的效果，产量提升，这个对用户很有用，纠结。。。。究竟是哪个要好些呢？
[回复]