网站交互设计理论:导致视觉结构混乱的因素

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

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

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

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

再如Blog的视觉结构

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

视觉结构的对比

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

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

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

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

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

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

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

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

时间: 2025-01-30 07:41:42

网站交互设计理论:导致视觉结构混乱的因素的相关文章

交互设计中的视觉结构

网站的交互设计分2种:流程交互和界面交互(即"单页面交互"或"小交互"),而界面交互又包含2类:"视觉结构"和"动态模块". 何谓动态模块?简单的说就是"AJAX",它有几种视觉呈现方式:弹出的浮动层.Tab切换.展开 (侧边展开或下拉展开) 何谓视觉结构? 界面信息按逻辑关系.包含关系和先后顺序,进行排列.组织后形成的模块,即为视觉结构. 这个界面结构可以很大,也可以很小.拿Igoogle的三栏式来举例,

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

设计理论:网站交互设计与购物习惯

先试后买的交互   每个人都应该购买过商品,按照人的购买习惯会先试用或者对比后觉得适合再购买这样一个流程,这是符合人的消费心理.现在互联网出现越来越多的新产品,网民就像选购商品一样,所不同的是网民所付出的是时间和体力,需要付出金钱的也有,但很多产品为了增加注册量,不管三七二十一访问首页第一件事就是让用户去注册,注册完后才能浏览网站和使用网站服务这样一个交互过程,假设注册流程又长又丑的话那对用户来说简直就是一种折磨.   近来比较火的开心网(又拿这个网来做例子呵呵),首页只有一些简单的文字介绍网站

交互设计理论:如何减轻用户的记忆负担

写在前面的话关于<交互设计实用指南>,我们最近收到很多朋友的反馈,有支持的也有批评的,在此一并感谢了,有你们的关注,我们才能走得更远.<交互设计实用指南>其实是收集和总结了交互设计上的一些问题,肯定有很多老生常谈的东西,是不是老生常谈其实不是问题,"问题在于,这些老生常谈的东西有没有被积累,有没有被传承,有没有被体系化."(青云语)<交互设计实用指南>的读者群涵盖了许多行业,而且就算是交互设计专业的读者也存在经验和水平的差异,所以读者们对<交互

12个常见的网站交互设计错误

  好的交互设计可以区分开有质量的网站和其他普通网站.然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感.下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没! 1,缺乏对比 当浏览网站时,我们喜欢看页面设计展示出干净.清爽的对比.对比达到了一个重要的目的--它使内容可读,并毫不费力地在页面上指导用户.这是一个最基本的设计概念,只是很奇怪,有些网站似乎就是不明白. 没有足够的对比度的话,不管是颜色或整体展示,一个网站看起来,在最好的情况下,也会让你

以新浪微博为案例:网站交互设计初体验

9月初,我来到新浪微博UDC部门交互设计岗位实习.在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责.鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计. 个人认为,对于刚步入交互设计行业的设计师而言,在工作和学习过程中行之有效的方法可分为以下四个部分: 第一部分:了解自己

网站交互设计入门—交互设计的职能

交互设计的具体职能: 从上图中可以看出,交互设计主要干三件事: ①定义部分需求 ②定义信息架构和操作流程 ③ 组织页面元素,制作原型demo ①定义部分需求 以前的惯性思维是需求应该由产品人员负责,设计人员只是实现和改善界面体验.而产品的真正需求不仅仅来源于业务,还包括使用者的情感需求.在情感分析方面,交互专业是具有优势的,举个例子: 一个增值服务的宣传模块,业务模型可能是这样子: 考虑到情感因素后,需求模型会不断完善: 上图仅仅是举个例子,真正的产品人员不会将业务模型想的如此简单.举这个例子就

网站交互设计初体验

摘要: 9月初,我来到新浪微博UDC部门交互设计岗位实习.在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责.鉴于之前接受的知识大多来 9月初,我来到新浪微博UDC部门交互设计岗位实习.在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责.鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚