网页中的可用性设计系列之一：网站信息的可用性设计
我们都知道，一个以信息为主要内容的站点，其页面中的信息组织形式、版式、分类等将直接关系到用户在这个页面的浏览体验。
目前网站的信息排列方式主要有以下几种方式：
1．文字列表形式
此种形式在网站中使用率最高，优点是在“寸土寸金”的有限空间内尽可能地放更多的内容。缺点比较明显：单一的文字列表重复使得用户的眼睛找信息找到眼花，浏览体验大大下降，重点不突出。尤其在中文的显示方式下这些缺点则更加突出。
目前设计师的解决办法一般是在每一行文字前加一个修饰点，用以引导用户的浏览；加分割线将每一行都分割开来；控制行间距等等。
当然在某一个区域内进行这样的补偿设计是很有效果的。但是，如果整个页面大量的采用这种方式，则还是会影响用户的阅读。
2．图片形式
以往的用户研究中，网站上的图片被关注程度往往要高于文字信息。图片传达给用户的是具象的信息，用户不需要动脑筋就知道这是什么东西。这些信息会让用户在大脑里迅速地搜索出相关的信息链。
所以，用图片显示的不失为一个好的方式。但是占用空间大，有些图片内容令人费解的问题也还是存在的。
3．图片加文字内容形式
单从用户体验的角度上讲，这种形式算是最佳的浏览方式。图片在用户的脑中形成的是具象的信息，文字、语言在用户的脑中形成的则是抽象的信息。而这种形式对用户在“行”和“意”上都做了考虑。也就是说，用户看图片和文字的时候，大脑的工作区域是不同的，最终会达到一个“图文并茂”效果。
优点是会提供给用户良好的浏览体验，让用户不用抽象的思考，大大减少了用户思考的时间，提高了网站的可读性。
缺点是这种形式需要太大的空间（一般一条文字加图片的信息可以放10条左右的纯文字信息）。导致无法放入更多的信息资源，不能在一个页面大量的使用。
4．迷你块
那说到这里，到底有没有一种两全齐美的方法呢？答案是肯定的，“迷你块”就比较好的解决了这个问题。
迷你块的设计是把一条信息的图片和文字以列表的形式展现出来，每一条信息都由一张很小的图片和一条文字标题组成，达到了图文并茂的效果。接着，利用本身所占区域很小的特性，可以组成一个重复的列表，这样以上所说的问题都迎刃而解了。
不过，作为这种折衷的做法，其效果也是折衷的：单位空间内不会比只有文字列表那么丰富；图片的大小限制，不会特别的清晰明了等等
总之，如何让用户在获取网站信息的时候不用思考，是我们UI设计师的设计宗旨。而方法的选取也视用户群体、网站类型等各方面因素所决定。
11月 10th, 2006 at 17:15
好文章！
我觉得每种排版方式都有用，可以根据页面设计需求来定。
11月 10th, 2006 at 17:22
沙发米有了…
11月 10th, 2006 at 17:23
存在即合理
11月 10th, 2006 at 17:49
不错
11月 10th, 2006 at 18:05
舒服很重要。
眼睛不舒服就乱了。
什么都看不下去了
11月 10th, 2006 at 18:16
第一张图~~ 腾讯首页
第二张图~~腾讯首页
第三张图~~网易首页
第四张图~~淘宝首页，美国雅虎首页
11月 10th, 2006 at 19:15
“迷你块”的这种做法有一个缺点就是如果空间过于狭小，就会造成视觉焦点的来回跳跃。
11月 10th, 2006 at 20:00
楼上说的没错，而且迷你块的“块”背景过于突兀，也会一定程度上影响浏览的。
所以说，“在适当的地方用适当的方法处理”就变的尤为重要了。
11月 11th, 2006 at 0:16
[...] 网页中的可用性设计系列之一：网站信息的可用性设计 [...]
11月 11th, 2006 at 10:34
主推的内容用‘迷你块’的方式不错，但如果过多地使用也会觉得很奇怪。
11月 11th, 2006 at 14:34
好文，收录到20ju.com
11月 14th, 2006 at 12:41
迷你块，如果图片太小也会让人看得很费劲。而且一般图片传递的信息是有限的，就梁朝伟和徐静蕾那张图片，没有文字说明或者文字说明与图片衔接不好的话，无法避免让用户去思考到底网站想要表达什么意思。
迷你块图片的目的似乎只是吸引用户的视觉焦点。
11月 14th, 2006 at 15:29
en.俺比较认同楼上的意见，这种方法吸引视线的作用更大一些。
11月 15th, 2006 at 8:15
分析的很合理～国内的状况还是第一种情况居多，现在也有第三种浏览方式的网站～希望自己的站能做到第四点～
11月 15th, 2006 at 12:09
不错，归纳的很到位。
11月 16th, 2006 at 17:52
有个问题要问。你们UI团队负责的不包括实发内容噢？ 那内容的设计编排又是由哪个部门完成的呢？
11月 16th, 2006 at 18:20
基本上看得到的都是我们搞的,所以有什么不满意的或者好建议,请马上告诉我们,谢谢大家:)
11月 16th, 2006 at 20:54
哦，是这样哦。呵呵。我近期可能到淘宝人事部面试。我刚才看了你们的招聘启示，那几大条里边都符合的，哈哈。就是没有系统学过UI，但系统学过设计和传播学，我总以为两者蛮有联系滴。
11月 17th, 2006 at 13:43
雅虎咨讯中的新闻编排我挺喜欢的,通过字体的大小和颜色区分新闻标题,避免了纯文字列表方式容易导致的视觉疲劳。
11月 20th, 2006 at 14:56
分析的非常有道理，学习
11月 24th, 2006 at 17:51
淘宝首页里迷你块里的图片过小，反而无法发挥图片应有的效果和作用，还是雅虎首页做的不错，
小图片还不如清晰的文字呢：）
11月 24th, 2006 at 18:08
楼上的说得有道理，这个折中的设计也是首页的布局限制造成的。
不过，自从淘宝首页换了迷你块以后，该处的链接的点击（pv）有了不同程度的增长。效果还是比较明显的！所以，但从数据上看，楼上的后面一句说得好像不是太贴切。哈哈
12月 5th, 2006 at 19:49
的确，数据是硬道理，呵呵
只不过我在想:
点击量提升说明用户视线被吸引过来了，但点击量提升一定说明体验提升了吗？
层出不穷的广告方式都可以提升点击量，但体验并不怎么好，
其实小图片更考验ui功底，把小图标做的一幕了然是真功夫，数据，体验一起提升：）
12月 6th, 2006 at 9:15
其实做这种首页也是一种商业的行为，如果挂广告的方式属于体验非常不好的方式，那么为什么现在所有的门户网站却乐此不疲呢？
从公司的角度上来说“商业需求”、“技术约束”、“设计约束”都要考虑进去（呵呵，这样的问题已经被讨论了几百遍，但好像还是目前设计师遇到的最大困难之一）。
另外，我认为数据的提升跟用户的体验没有任何的冲突，而是相辅相成的。针对于浏览性质的首页，赢得用户的点击也就代表了这部分的信息已经清楚的表达给了用户。这样才不会跟其他的普通的形式一样。
我所说的只想证明：此类表示方法确实有助于用户浏览体验的提升。
至于淘宝做的迷你块到底是不是体验不好，我可以这样认为：如果做的更加清晰，明了，那么点击会更多，体验会更加的流畅。
3月 10th, 2007 at 14:41
做体验其实说到底也就是为了获得更多流量
用户体验的东西只能适配大多数人的要求,流量多了 自然也就是体验感成功的一部分 市场才是验证的标准
一直都是看好淘宝用户体验的 呵呵 一些小细节是的确很下功夫的