WEB交互设计中的视觉结构如何设计

本篇交互设计教程探讨了WEB交互设计中的视觉结构如何设计，希望阅读本篇文章以后大家有所收获，帮助大家对交互设计的理解更加深入。

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

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

何谓视觉结构?

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

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

再如Blog的视觉结构

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

视觉结构的对比：

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

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

1. 最常见的情况是公司无交互设计师，产品信息未经过梳理就传达给UI设计师了，最后产出了一个可用性比较差的产品。 互联网的一些事

我们常常看到：PM把设计诉求提供给UI，UI也按部就班的完全执行，可出来的东西就是感觉有问题，但也说不出到底为什么，于是一版接一版不停的改，最后……这个沉重的负担压得UI直不起腰来，这不公平。

此时UI设计师或产品经理要大胆的站出来：“我们需要交互设计师来帮我们梳理信息!”

当然，交互设计师也要积极主动回应一下。

2.还有一种情况：由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离、切割。UI设计师也常常为满足个人表现欲，加入许多不必要的线条和修饰……诸如此类，很多产品上线后的可用性可想而知。

这种情况下，交互设计师(或产品经理)的个人魅力和沟通能力尤为重要，既不能打击UI设计师的积极性，又要确保UI设计师利用其专业知识在视觉结构内进行充分发挥，这是一种艺术。

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

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

攻守平衡的关隘： 互联网的一些事

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

当前标题：WEB交互设计中的视觉结构如何设计
URL分享：/news34/317134.html

成都网站建设公司_创新互联，为您提供手机网站建设、虚拟主机、品牌网站建设、网站策划、软件开发、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联