交互设计中的视觉结构 - UCD大社区

获得焦点再显示

xw — 2009-04-21 03:58:55

在facebook最近一次改版中，明显的增加了在feed本身上的交互操作，而最值得借鉴的就是feed上回复框的处理方式。

默认只有一条回复框，回复框中用灰色字体显示”留下评论….”,当单击以后，回复获得焦点的同时整个区域变大，显示出完整的回复框。

之所以说这个设计非常赞就是因为解决了两个问题：
1、降低了输入框对feed的干扰：如果要在feed中增加一个完整的输入框，因为feed的特殊性，这个输入框+评论按钮会重复很多次，势必会干扰到用户正常的阅读feed信息。而facebook的现在处理可以在放下输入框的同时把对feed的数据的干扰减小到最小。
2、巧妙的隐喻：其实从表面的上看是一个小输入框点击以后变大，实际上这里用到的是一个隐喻手法，就是默认用一个输入框代替原有的内容告诉用户这里是可以评论的，用户要评论的话本能反应就是点击输入框，这个时候一个包含真正输入框的评论区域就显示出来了。

用途以及问题：
这种设计方式可见可以用于很多输入的地方。虽然这样的设计方式可以在页面上有效的减小默认输入区域的显示。但是也不是什么场合都适合的。譬如搜索引擎的输入框就很不适合。

上图是百度的首页，我们看看在输入框里面的是什么，没错是焦点，搜索引擎的输入框默认是有焦点的。而我们看到上面的设计方式只有点击以后，真实的输入框才获得了焦点。
那么到底有什么区别应该是什么时候用呢？关键点就是在于用户的目的性，譬如用户在登录facebook的后目的性很复杂，可能去上传照片，也可能只浏览feed，而至于评论，一般是要先浏览内容以后才能评论的。所以可以看出这个时候对于输入框的操作应该是一些动作之后的操作。而登录baidu的用户目的性相对单一很多，就是搜索，打开页面以后大多数的操作就是要输入内容搜索，可见这个时候让用户点击一次就很不合适了。

信息整理后的火车票视觉结构

Raymond — 2009-03-24 19:22:06

每当返青时，我总听能到火车站播音室传出："旅客们注意了，乘坐xxx次从北京开往青岛的列车，开始检票进站……请旅客们有序进站上车"
我就会不自主的看一眼手中的车票。

（由于找不到北京-青岛的样票，隧用北京-天津的代替）

端详车票, 信息有许多：

火车站代码
车票，
地点，
发车时间，
车厢，
座位，
车型，
座型，
起始地点
车次
价格
友情提醒
票种
售票地点
底部编码

这些信息零散的排列在票面上，好像并未有效组织起来，视觉结构松散，看起来有点累。

怎么办？我想尝试改变一下。

先从火车票的设计目的入手。

火车票的设计目的：

对乘客：
1.明确始发地点和目的地.
2.让乘客准时上车
3.帮其找到座位
4.进站途径
5.价格越高，座位（享受服务）越好

对检票员：
1.易识别真伪
2.防止顾客上错车或坐错座位

OK，那让我们来把信息和目的一一对应起来

先将信息按关注度和逻辑顺序分为3类：上车前、上车后和不关注，并根据内容的相关度加以合并。

- 上车前乘客所关注的:

起始地点 ：乘客要达到的目的地

发车时间 ：准备什么时间走，查看确切发车时间

车次：通过“字母+数字”一起传达当天发车时间、起始地点、车型 3个信息的含义，哪个候车室进站

座位类型/价格 ：乘坐的舒适度、消费成本

- 上车后需关注的

车厢/座位 ：确定乘坐位置。

- 旅客不关注（这部分是检票人员关注的）

售票地点/火车站代码，底部编码(防伪) ：辨别假票用的。

友情提醒 ：提示顾客车票只能当日使用。

再看一下这些信息之间的关系：

从上述信息看来，，车次的信息维度最大，包含3个重要信息：当天发车时间，起始地点，车型。
但有2个问题：
1.普通人是无法从“数字+字母”中直接感知到什么具体内容。
2.用户会基于“起始地点”来对车票进行判断，车次只是N多辆从A地发往B地的其中一辆车的代号而已。
3.它所表现的乘车时间只能到分钟，并不包含年/月/日的维度。

基于上述3点，所以设计时还是应该以目的地为重点，“车次”则成了以“起始地点”为维度的辅助信息，加以年月日和确切时间说明。

再加上开头的那段火车票语音提示：“乘坐xxx次从北京开往青岛的列车……”,这是一个很重要的场景，因为它传达的信息顺序是“先车次，后地点”

那么，个人认为火车票设计应该是这样的：

另外，也许还应该加上“退票的流程和退票价格”。

如此重要的信息是被火车站忽略了。
我的一个老乡头一次来北京找工作，本想1天就走，他就买了次日回青岛的车票，但我想留他多玩几天，随让其速速退票，结果他很惊讶：“票还可以退么？到哪而退？怎么退？能退多少钱？（值不值得退）”
我们设想他有退票动机时已经离火车站很远，翻出这张票来，却不知该怎样操作，的确是很不方便的事。

感觉前一篇《交互设计中的视觉结构》中有关信息间的逻辑关系和先后顺序，说的不是很充分。

其实我是想说交互设计并不是随手画画线框图就OK了，通过信息的组织和整理，编排其视觉结构，以达到信息交互（传达）的目的，这才是视觉结构的真正意义。

交互设计中的视觉结构

Raymond — 2009-03-22 16:22:06

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

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

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

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

再如Blog的视觉结构

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

视觉结构的对比：

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

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

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

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

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

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

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

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