继续UI设计体验的讨论：交互设计中的视觉结构

spy

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

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

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

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



再如Blog的视觉结构



这些大的界面视觉结构都是由一个个小的模块结构组成（如下图）：





视觉结构的对比：





以上是2款网页游戏中关于“农田升级”时的不同表现方式，哪一种视觉结构更易让用户接收信息并操作？

导致视觉结构混乱的因素有哪些？

1. 最常见的情况是公司无交互设计师，产品信息未经过梳理就传达给UI设计师了，最后产出了一个可用性比较差的产品。
我们常常看到：PM把设计诉求提供给UI，UI也按部就班的完全执行，可出来的东西就是感觉有问题，但也说不出到底为什么，于是一版接一版不停的改，最后……这个沉重的负担压得UI直不起腰来，这不公平。
此时UI设计师或产品经理要大胆的站出来：“我们需要交互设计师来帮我们梳理信息！”
当然，交互设计师也要积极主动回应一下。

2.还有一种情况：由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲，加入许多不必要的线条和修饰……诸如此类，很多产品上线后的可用性可想而知。
这种情况下，交互设计师（或产品经理）的个人魅力和沟通能力尤为重要，既不能打击UI设计师的积极性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术。

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

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

问题和后果：
信息架构出了问题(譬如一级导航里缺内容，流程走不通等等)，则会导致产品根本不能用。
视觉结构不清晰时，我们接收信息的速度就会变慢，导致产品不易用。

换句话说，信息架构如果考虑不明白，视觉结构做得再好也白搭，而UI设计最终是充当尸体彩绘和替罪羊的角色。
当我们对众多“尸彩产品”愤怒的时候，是否也该反思一下，到底是什么原因造成的？


之前的讨论帖地址：《《【金点子帖】关于游戏UI布局的分析，来讨论一下》》

AbsX

的确受此困扰久矣

tolive2008

团队内缺少合适的UI设计师，缺少权威的决策者，大部分成员缺乏对UI设计基本的原理的认识，结果导致UI的外形受策划、美工以及程序的共同影响，最终品质向团队短板的能力靠齐。

冰梦星空

那个网页游戏界面我个人觉得第二个更容易接受，什么原因？

spy

因为视觉集中点做的比第一个好

8544013

嗯，我也感觉第二个容易接受一些！
感觉有颜色，结构，内容的鲜明有关吧！

冰梦星空

能否认为是因为人都有一种惰性，第一个比第二个要耗更多的精神去看，去接受，这样就会让用户累计潜在的不满度，单不满度达到一定值的时候，用户就ALT+F4了

80后小小白较受

我怎么感觉还是第一个网页界面更容易接受呢。。。
感觉第一个更明了。。。。= =望眼就穿了，第二个信息太集中不是给人很乱的感觉么？
。。。自我感觉，自我感觉。。

MayMonth

(不做思考,仅从第一印象去看)第一个UI存在的问题是:
1.显示了无需显示的内容;
典型是上部农场图标下"升级建筑"之后的单选框,没有选择的单选框没有存在的必要;
2.内容层次不清(主次不分);
典型如:显示建筑信息和升级条件的两个框,从视觉上来看并无包含关系——他们是平级的...
3.应该说明的内容未做足够说明;
典型是下面两个武将头像让选择的那里,应该是可以根据建设武将的某属性来决定建造时间,但问题在于未给出足够提示,第一次玩的人没几个能理解;
另外一个是对升级结果没给出提示,当然也许会在其他地方给出提示、但个人感觉还是在这个地方给出比较直接;
4.难看...

其实还有一些内容存在问题,不过在不确定具体环境的情况下无法断言是否为错.

star幻翼

不是很懂，菜鸟迷茫中！但还是谢谢SPY大大的分享！