19BUS_博客

文章列表

信噪比

2009-05-18 22:24

"信息的成本显而易见,它消耗了信息接收者的注意力...信息的富有带来了注意力的稀缺"（西蒙1971 年）

互联网产生很多重复的、无用的信息，重要的信息往往有时被淹没在大量的雷同信息和视觉“噪声”中。

噪声可以理解为“ 妨碍人们感觉器官对所接收的信源信息理解的因素”。同时会干扰、淹没、阻挡、歪曲视觉符号中信息原来目的，并对知识（信息）的吸收起负作用。

对用户来说，信息可以分为“有用的信息”和“无用的信息”。

同时“有用的信息”可以再分成“重要的信息“和”次要的信息“。

如何为用户提供有用且重要的信息？

1建立清晰地信息架构以及有效地内容，提供给用户有用的信息！（重点强调下“数据挖掘”：了解用户的行为和需求，从用户的行为轨迹中发现用户的动机和目的，用户在一个网站上注册或者进行浏览操作的时候，留下了很多信息，如何对这些信息进行再构建，从中挖掘出有用的信息是未来的一种趋势！）

·建立清晰地视觉层次，强调重要的信息

有使用粗而大的字体、使用图标或者符号（图标的最佳实践页面设计）、留白（分隔线）、排版和布局（对齐）、栅格化布局等

类别：Design Thinking | 评论(0) | 浏览()

Motorala AURA

2008-10-22 21:14

Motorola 推出了一款豪华手机——Motorola AURA.“艺术品质、永恒的经典设计”伴随着V70的影子再生。

moto手机设计一直在追寻着与众不同，个性创新，曾几何时，V70手机360度旋转惊艳一时，但又在锋、薄上停止不前，创新具有时代性，同时也有一个词—classic。

类别：默认分类 | 评论(0) | 浏览()

新一代视觉社会化网络

2008-10-21 22:26

六度空间理论，即你和任何一个陌生人之间所间隔的人不会超过六个，也就是说，最多通过六个人你就能够认识任何一个陌生人。详细的见百度百科的名词解释：http://baike.baidu.com/view/200573.htm

Webbr是刚刚上线的社会化网络服务（网址：http://www.webbr.com/），有些类似圈子的功能，可将有相同兴趣的朋友紧密联系在一起。采用这种连线式的关系模式，可以使你更清晰的了解关系的层次，可以更快捷地找到自己感兴趣的内容。

还是就是豆瓣人及关系网络图，www.6dtop.com

上面提到的两个网站，不仅具有良好的信息展现方式，清晰明了，但同时可能会受到网速等因素的印象，同时需要庆幸的是网络技术的蓬勃发展，带宽越来越快，相信未来会看到更多的视觉盛宴以及良好的体验方式（许多RIA技术的应用也可以证实这点）。

类别：Ui Design | 评论(0) | 浏览()

表单布局注册表单的布局和视觉表现形式整理

2008-10-20 22:44

输入区域的对齐方式，各自的标签（label），操作方式，以及周围的视觉元素都会或多或少影响用户的行为。

一、 表单布局

使用对齐的字段、等长的输入框以及一致的视觉样式能减少视觉干扰。在标签的对齐的方式上，美国yahoo的lukew对表单注册的通用注册原则做了很详细的解释。

1、左对齐

优点：左对齐的标签可以很容易的通览表单的信息。

缺点：标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

2、右对齐

优点：标签右对齐，使得标签与输入框之间的联系更加精密。

缺点：左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。

3、上下垂直对齐

优点：用户能快速的阅读。

缺点：所占的垂直的空间比较大。

二、 表单的视觉元素

1、填项和非必填项的区分

2、帮助提示信息

出错信息的提示：

a、在提交表单前还是表单后，出错信息显示的位置等，使用ajax即使判断，给用户及时的反馈；在视觉上高光“不正确”的输入框。第一种错误情况通常会作为一条信息在页面的顶部（表单之前）显示出来。第二种情况通常是把错误的输入框的边框色彩和输入的标签进行高光（大部分情况是红色的字体以及红色的背景色）。

b、用户信息填写出错的时候，是否可以考虑不用红色的x来表示~（考虑用橙色的“!”表示）；以及使用图标时的视觉风格的一致性。表单完成时，Tickspot, Mixx.com和 Furl使用黄色来表示遇到的问题。

3、同时一些网站，对用户当前正在填写的输入区域行，进行视觉处理对用户做引导

Ebay的注册表单使用“斑马线”的视觉设计，对其视觉区分~·

高亮显示用户正在操作额度输入区域行

4、在注册的过程中，由于填写注册的字段很多，需要对其进行分类排列。有时一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。如图所示，通过颜色的标题和虚线对表单的信息内容进行组织和分类。（同时可以根据格式塔原则中的相近性，在两个区域之间留白，也能达到同样的效果~）

5、 “提交”按钮的位置分布

右对齐的提交按钮依然比较流行（17%），但是一般都是起到需要进行下一步操作时的指示作用。在这些情况中提交按钮经常是以“继续”或者“下一步”为标题的。理由是：通常桌面软件中的“下一步”按钮就是放在右侧的。

4、次要操作

一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

三、 注册步骤

使用进度标尺告诉用户当前的位置和整个步骤，强调几个步骤之间的逻辑关系，比如表明：第一步、第二步二等；用有意义的图排尿或者icon甚至标题来解释各个步骤。

需要给用户提示一共几步，现在处于第几步主要的目的是让用户更加能理解流程，并且更有耐心。注册步骤越简单越好，最多不能超过四步。（同时根据需要在注册流程一般有“下一步”和“返回”键，在用户通过多个步骤提交信息的过程中，一般以刷屏的方式进入下一步，如果用户点击“返回”，原有用户填入的内容需要保留，而且“下一步”和“返回”键的位置需要固定，以利于用户。）

类别：默认分类 | 评论(0) | 浏览()

春天花会开~

2008-03-23 00:56