用户体验至上的网页设计秘笈
作者:wangfangjin 来源:shareyou.net 发布时间:2007-09-07 10:16:00
现在网页设计师除了把页面做的漂亮以外,越来越注重“用户体验”,就是要做“别让用户思考”的网页,使网站真正做到“可用性”。望望结合几年的工作经验,粗谈这方面的一些问题,和大家共勉!
一、人们如何浏览网页
首先本书说明了上网的人是如何浏览网页的,这似乎跟我们想象有很大的差距,因为我们觉得“用户会盯着每个网页,仔细阅读我们精心制作的文字,领会我们页面的组织方式”,事实上大部分时间用户看网页就象“高速公路看广告牌一样”,没时间仔细阅读,当然也不会用心思考。因而,我们必须为“扫描”而设计。做到这点须注意以下几点:
1、尽量符合用户习惯的设计,让人接受陌生的东西需要代价,除非我们觉得这个代价是必须的。
2、在页面把越重要的东西越突出,建立清楚的视觉层次。
3、可以点击的地方必须突出,让人明显知道可以点击。
4、把页面划分成明确定义的区域
5、省略多余的文字
二、关于导航的设计
导航显然是网站最重要的部分,“如果在网站上找不到方向,人们就不会使用你的网站”。现在WEB导航的习惯用法基本形成了,虽然还会继续演化下去,但基本元素以产生:网站LOGO、网站栏目、返回主页、搜索、实用工具或帮助。
网站LOGO,通常是页面左上角,出现在页面可视层级的首要位置,可以采取两种方式:让它成为本页最显眼的内容,或者让它涵盖页面所有其他元素,当然网站LOGO设计的好坏对人产生心理影响就不用说了。
网站栏目,也称导航条,站点层级结构的最顶层。导航条很多时候可以包容二级导航(下拉菜单的方式)。很多时候标签的设计是导航采用的很好表现方式,Amazon.com几乎把它发展到完美的状态。用标签的方式设计导航时要注意几点:
1、进入网站时,有一个标签已经选中;
2、正确绘制,激活的标签页要位于其他标签页之前;
3、颜色区分,可以让每个栏目使用一种不用的标签颜色,并把这种颜色用在页面其他导航元素上,让它们浑然一体;
搜索功能,如果有提供搜索功能的网站,要记住一个简单的公式:一个输入框、一个按钮、还有“Search”(搜索)两个字,不要弄的太复杂。比如把“搜索”换成“查找”、“快速查找”、“快速搜索”、“关键字搜索”都会让用户产生思考。如果必须为搜索框提供选项(缩小搜索范围)一定要三思,谨慎提供选项,以便以何种方式提供最为合理,还有就是要保证这些选项的确有用,否则会挫伤用户心理。
值得注意的是,很多网站到了二级页面以下,导航便会变了支离破碎,随意发挥。这个问题非常普遍,以至于很难找到良好的 * 导航的例子。事实上,用户在底层页面上花的时间通常和花在顶层页面上的时间相同。除非我们一开始就自顶向下进行导航设计,否则以后很难添加,也很难保持一致性。这就意味着我们在讨论主页的颜色方案之前,拥有显示网站所有潜在级别的导航的DEMO设计非常重要。要做到这点,必须设计师和相关策划人员紧密结合,设计师必须提前知道整个站的概貌和细节内容。
有一点,设计师常常忽略,就是记得为每个页面加个名称。好像每个拐角处有一个路牌一样,随时让驾驶者知道在哪里,无需思考。页面的名称应该出现在涵盖该页内容的位置,要引人注目,在大多数情况下,它应该是该页面最大的文字。
总之,一个拥有良好导航系统的网站,一眼就能告诉用户这些信息:
这是什么网站?(网站LOGO)
我在哪个网页上?(网页名称)
这个站主要栏目有哪些?(导航栏目清单)
在这个层次上我有哪些选择?(页面导航)
我在导航系统的什么位置?(页面里的“你在这里”的指示符号)
我怎么搜索?
猜你喜欢
- 在备份数据库的时候,数据表中可能存在这样的值array('a'='b','c'='d
- 语法结构: 1. Cast 语法结构:CAST ( expression AS data_type [ ( length ) ] ) 2.
- 从小的方面讲,帮助一般是指:手册、说明书、文档、FAQ 等等。从大的方面讲,可以是交互过程中的提示、指引、演示等信息,帮助无处不在!这一切,
- CSS styles和HTML styles有什么区别?HTM style是指自定义HTML标识中一些标签,例如说在HTML中〈B〉〈/B〉
- 1,SELECT 语句 在SQL的世界里,最最基础的操作就是SELECT 语句了。在数据库工具下直接采用SQL
- 如果您是HTML的初学者,请您先自学HTML。因为DHTML是现有的HTML技术的一个综合,所以HTML语言对学习动态HTML是
- SQL Server对上亿的表进行排序或者上亿的表之间进行join,会导致系统失去响应。◆1.我确实做了一个很大的查询,涉及的数据表有两亿条
- 比如可以定义开学时间为2009年2月8日,然后程序可以算出,今天距开学那天已经是第几周,非常急需这个程序,忘高手们能提供一个,先谢谢了!自己
- 我把数据库操作类整理了一下,它包含了常用的数据库操作,由三种方式:简单的SQL拼接字符串的形式,SQL语句使用参数的形式和存储过程的形式,每
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 众所周知,IE 6只支持单通道的PNG图片(即只有透明/不透明2种状态,gif图片的透明单通道透明),因此如果需要使用alpha透明的png
- 块级元素块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们
- 安装时建议你为MySQL管理创建一个用户和组。由该组用户运行mysql服务器并执行管理任务。(也可以以root身份运行服务器,但是不推荐)第
- 导读:这篇论坛文章主要介绍了使用SQL Server升级顾问的具体步骤,详细内容请参考下文。微软提供了SQL Server 2008升级顾问
- 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项
- 原文:10 Principles Of Effective Web Design翻译:熊猫2008-02-03本文由熊猫同学授权翻译首发。并
- 如何做一个检索结果带链接的检索?具体代码和说明如下:<% data=request.form("search_da
- 很开心可以和导师阿坚在08gui大赛中一起去完成《fight》的图标设计,在这个过程中真的是受益匪浅!这里我谈一下在这个过程的一些小小心得。
- 如何在服务器端调用winzip命令行对上传的多个文件打包压缩?要解决这个问题,首先要了解一下Windows Scripting Host,简
- 首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化