网站信息的可用性设计


Posted on March 28, 2007


我们都知道,一个以信息为主要内容的站点,其页面中的信息组织形式、版式、分类等将直接关系到用户在这个页面的浏览体验。

目前网站的信息排列方式主要有以下几种方式:

1.文字列表形式

按此在新窗口浏览图片

此种形式在网站中使用率最高,优点是在“寸土寸金”的有限空间内尽可能地放更多的内容。缺点比较明显:单一的文字列表重复使得用户的眼睛找信息找到眼花,浏览体验大大下降,重点不突出。尤其在中文的显示方式下这些缺点则更加突出。

目前设计师的解决办法一般是在每一行文字前加一个修饰点,用以引导用户的浏览;加分割线将每一行都分割开来;控制行间距等等。

当然在某一个区域内进行这样的补偿设计是很有效果的。但是,如果整个页面大量的采用这种方式,则还是会影响用户的阅读。

2.图片形式

按此在新窗口浏览图片

以往的用户研究中,网站上的图片被关注程度往往要高于文字信息。图片传达给用户的是具象的信息,用户不需要动脑筋就知道这是什么东西。这些信息会让用户在大脑里迅速地搜索出相关的信息链。

所以,用图片显示的不失为一个好的方式。但是占用空间大,有些图片内容令人费解的问题也还是存在的。

3.图片加文字内容形式

按此在新窗口浏览图片

单从用户体验的角度上讲,这种形式算是最佳的浏览方式。图片在用户的脑中形成的是具象的信息,文字、语言在用户的脑中形成的则是抽象的信息。而这种形式对用户在“行”和“意”上都做了考虑。也就是说,用户看图片和文字的时候,大脑的工作区域是不同的,最终会达到一个“图文并茂”效果。

优点是会提供给用户良好的浏览体验,让用户不用抽象的思考,大大减少了用户思考的时间,提高了网站的可读性。

缺点是这种形式需要太大的空间(一般一条文字加图片的信息可以放10条左右的纯文字信息)。导致无法放入更多的信息资源,不能在一个页面大量的使用。

4.迷你块

按此在新窗口浏览图片

按此在新窗口浏览图片

那说到这里,到底有没有一种两全齐美的方法呢?答案是肯定的,“迷你块”就比较好的解决了这个问题。

迷你块的设计是把一条信息的图片和文字以列表的形式展现出来,每一条信息都由一张很小的图片和一条文字标题组成,达到了图文并茂的效果。接着,利用本身所占区域很小的特性,可以组成一个重复的列表,这样以上所说的问题都迎刃而解了。

不过,作为这种折衷的做法,其效果也是折衷的:单位空间内不会比只有文字列表那么丰富;图片的大小限制,不会特别的清晰明了等等

总之,如何让用户在获取网站信息的时候不用思考,是我们UI设计师的设计宗旨。而方法的选取也视用户群体、网站类型等各方面因素所决定。


标签:N/A

其它推荐日志:

什么是AJAX?

php文件上传方法和处理过程

mscorsvw.exe

介绍一个web2.0站点模板

Activex 部件不能创建对象故障解决

ASP.NET图片防盗链的方法

IIS装framework 2.0

无法定位程序输入点LdrSetSessionName于动态链接库mfc40u.dll上

关于asp button响应回车键的问题

PHP字符串截取函数(解决中文乱码问题!支持UTF-8和GB2312)

以太网的最小帧长为什么是64字节

Sun:Java+Vista没问题

java读取xml文件的四种方法

利用Mircosoft的URLRewriter.dll实现页面伪静态

ASP.NET 2.0中CSS失效解决方案

在sql里设定默认时间

到底什么是OOXML。。。

Flash实现无刷新上传的方法

System.NullReferenceException: 未将对象引用设置到对象的实例。

无法启动World Wide Web Publishing服务的解决方法

巧用HyperLink绑定显示图片并设置图片大小

Silverlight开发工作开始环境

推荐三个有用的web开发工具

在ASP.NET中发邮件!

Word中的字体大小(几号-几磅)

HTTP 错误 404 - 文件或目录未找到。的最终解决方法。

windows也能拥有Vista 侧边栏效果

去除桌面图标下的阴影

PHP下载DOC文件出错乱码的解决方案

ASP文件操作大全

能上QQ但不能上网页是为什么

DW做ASP程序时关于数据库的几个常见问题

点击复制网址的代码

C#获取程序当前路径的方法

vs2005调试端口怎样样修改的方法

fatal error C1853

无法将类型“ASP.Image_aspx”转换为“System.Web.UI.WebControls.Image”

在Eclipse中加入API帮助文档

使用命令行启动VirtualBox虚拟机

Understanding Page Inheritance in ASP.NET 2.0


Search
最新评论
推荐日志
微信扫一扫