访客至上的网页设计秘笈 转载

现在网页设计师除了把页面做的漂亮以外,越来越注重“用户体验”,就是要做“别让用户思考”的网页,使网站真正做到“可用性”。望望结合几年的工作经验,粗谈这方面的一些问题,和大家共勉!

一、人们如何浏览网页
首先本书说明了上网的人是如何浏览网页的,这似乎跟我们想象有很大的差距,因为我们觉得“用户会盯着每个网页,仔细阅读我们精心制作的文字,领会我们页面的组织方式”,事实上大部分时间用户看网页就象“高速公路看广告牌一样”,没时间仔细阅读,当然也不会用心思考。因而,我们必须为“扫描”而设计。做到这点须注意以下几点:
1、尽量符合用户习惯的设计,让人接受陌生的东西需要代价,除非我们觉得这个代价是必须的。
2、在页面把越重要的东西越突出,建立清楚的视觉层次。
3、可以点击的地方必须突出,让人明显知道可以点击。
4、把页面划分成明确定义的区域
5、省略多余的文字

二、关于导航的设计
导航显然是网站最重要的部分,“如果在网站上找不到方向,人们就不会使用你的网站”。现在WEB导航的习惯用法基本形成了,虽然还会继续演化下去,但基本元素以产生:网站LOGO、网站栏目、返回主页、搜索、实用工具或帮助。

网站LOGO,通常是页面左上角,出现在页面可视层级的首要位置,可以采取两种方式:让它成为本页最显眼的内容,或者让它涵盖页面所有其他元素,当然网站LOGO设计的好坏对人产生心理影响就不用说了。

网站栏目,也称导航条,站点层级结构的最顶层。导航条很多时候可以包容二级导航(下拉菜单的方式)。很多时候标签的设计是导航采用的很好表现方式,Amazon.com几乎把它发展到完美的状态。用标签的方式设计导航时要注意几点:
1、进入网站时,有一个标签已经选中;
2、正确绘制,激活的标签页要位于其他标签页之前;
3、颜色区分,可以让每个栏目使用一种不用的标签颜色,并把这种颜色用在页面其他导航元素上,让它们浑然一体;

搜索功能,如果有提供搜索功能的网站,要记住一个简单的公式:一个输入框、一个按钮、还有“Search”(搜索)两个字,不要弄的太复杂。比如把“搜索”换成“查找”、“快速查找”、“快速搜索”、“关键字搜索”都会让用户产生思考。如果必须为搜索框提供选项(缩小搜索范围)一定要三思,谨慎提供选项,以便以何种方式提供最为合理,还有就是要保证这些选项的确有用,否则会挫伤用户心理。

值得注意的是,很多网站到了二级页面以下,导航便会变了支离破碎,随意发挥。这个问题非常普遍,以至于很难找到良好的三级导航的例子。事实上,用户在底层页面上花的时间通常和花在顶层页面上的时间相同。除非我们一开始就自顶向下进行导航设计,否则以后很难添加,也很难保持一致性。这就意味着我们在讨论主页的颜色方案之前,拥有显示网站所有潜在级别的导航的DEMO设计非常重要。要做到这点,必须设计师和相关策划人员紧密结合,设计师必须提前知道整个站的概貌和细节内容。

有一点,设计师常常忽略,就是记得为每个页面加个名称。好像每个拐角处有一个路牌一样,随时让驾驶者知道在哪里,无需思考。页面的名称应该出现在涵盖该页内容的位置,要引人注目,在大多数情况下,它应该是该页面最大的文字。

总之,一个拥有良好导航系统的网站,一眼就能告诉用户这些信息:
这是什么网站?(网站LOGO)
我在哪个网页上?(网页名称)
这个站主要栏目有哪些?(导航栏目清单)
在这个层次上我有哪些选择?(页面导航)
我在导航系统的什么位置?(页面里的“你在这里”的指示符号)
我怎么搜索?

三、关于主页设计
首先要承认,主页不由我们控制。因为每个人都有个一个看法,如果要使每个人都满意,那么就算最优秀的主页设计也无法达到。因此设计主页时不可避免地要做一些折衷。但有一件事情不要忘记——传达整体形象,即一眼可以让人感受到这个站是干什么的。越快越好,越清楚越好。所以当浏览者进入主页时,我们好不费力(几秒钟让人了解)地告诉他四个问题:
这是什么网站?
网站上有些什么?
你能在这里做什么?
为什么你在这里,而不是在其别地方?

那么如何传达这些信息呢:
1、口号,即靠近网站LOGO的地方。一条精炼、个性、生动的口号可以让人立即联想网站的内容。但也有例外,如果某个公司的品牌已达到家喻户晓的地步,可以省略口号。
2、欢迎广告,即对网站的简要描述,在主页首要的位置显示,不需要滚动屏幕就能看到。
3、应从哪里开始?当进入一个新站后,浏览者快速扫描主页之后,应该明白无误地知道:
如果想搜索,可以从这里开始。
如果想扫描,可以从这里开始。
如果想扫描本站最精彩的内容,可以从这里开始。

在设计主页时,注意几个问题:
主页的导航可以与下级的导航有点不同,但必须要有内容和视觉上的一致。
可以不用下拉框就不用,因为那是隐藏的信息。

四、如何解决对设计争论不休——可用性测试——绝大部分公司没做的 
 对设计争论不休,似乎是个永久而又十分令人痛苦的事情。解决这个问题,很多时候,是上司或者老板说了算,“老板说咋样就咋样”。

其实可以对网站进行“可用性测试”,除此之外,没有更好的办法。争辩只会浪费时间和团队的精力,而通过测试将讨论对错转移到什么有效、什么无效上,更容易缓和争论,打破僵局。而且测试会让我们看到用户的动力、理解、反映的不同,从而让我们不会再坚持认为用户的想法和我们的想法一样。
    如果想建立一个优秀的网站,一定要测试,测试一个用户比不做测试好一倍,早点测试一位用户好过最后测试50位用户!这点我们做的不多,国内也似乎不重视这点。网络公司一般对程序流程的测试要比对界面体验的测试看的重要的多。

那么如何测试?
1、在项目的每个进程中都可以测试,不必要等项目结束。项目最初的时候,必须有人(项目负责人或设计师,或多人讨论,设计师表现出来)使用团队的集体技巧、经验、创造力和判断力来创建一些版本(哪怕是一个很粗糙的版本),然后仔细观察人门对它的看法和使用方法。
2、每轮测试的理想用户数量是三个,最多四个。前三个用户可能会遇到几乎所有最明显的问题,而且更重要的是要多做几轮测试,及时修正问题。这里说明的是,测试用户几乎是任何懂得上网的人都可以,并不一定要与网站的目标人群想符合。
3、测试设备,只需要一间办公室会会议室、两把椅子、一台电脑、一台摄像机(可以屏幕录制软件代替)就可以了。我们可以把摄像机的信号传到附近的一个办公室(甚至一个小地方)里,以便开发团对的每个人都能进行观察而不会干扰测试用户。
4、任何人都可以发起测试。任何人都可以观察测试。
5、测试的项目:
“理解”测试。就是让测试用户看到网站,然后看他们是否理解这个网站,理解网站的目标、价值主张、组织方式、运行方式等。
关键任务测试。让用户完成一些任务,然后观察他们是怎么做的。

还有种最为简洁的“测试”方式,就是做好了一个页面,就立即给别人看,看他们是否理解,当然这种我们都做到了,呵呵!

如何处理测试出现的问题?
1、给问题分类。回顾大家看到的问题,决定那些需要修正。
测试中可能出现的几个问题:
用户不清楚概念。他们看着网站和页面,要么不知道网站说什么,要么理解有误。
他们找不到自己要的字眼。这就意味我们组织的内容和分类不符合用户的习惯,或者没有他们期望的名字出现。
内容太多了。有时候,他们要找的内容就在上面,但是他们找不到。这就需要减少页面干扰,把他们需要看到的内容设置醒目,让它们从可视层级中突出。
2、解决问题。通过测试,站在用户角度看自己的作品,这样的体验常常能为问题提供全新解决方案,或者可以让我们有一种新的眼光看原来的问题。团队不必对完美的解决方案达成一致,只要确认下一步做什么就可以了。

值得申明的是,成功的网页需要巧妙的平衡,一个微小的变化都可能带来不小的影响。有时候,真正的挑战不是我们如何修改我们发现的问题,而是修改这些问题后,同时不破坏已经正常运行的部分。特别是,当把某部分调整得突出的时候,是不是把其他内容重要性降低了。

总之,我们要做一个“好”网页:
——让用户在我们网站是做什么的,最大限度明白简易
——告诉用户想要知道的
——尽量减少步骤
——花些心思
——知道用户有哪些问题,并给予解答
——为用户提供协助
——容易从错误中恢复
——如有不确定,要记得向用户道歉

作者网站:www.shareyou.net

(0)

相关推荐

  • 访客至上的网页设计秘笈 转载

    现在网页设计师除了把页面做的漂亮以外,越来越注重"用户体验",就是要做"别让用户思考"的网页,使网站真正做到"可用性".望望结合几年的工作经验,粗谈这方面的一些问题,和大家共勉! 一.人们如何浏览网页首先本书说明了上网的人是如何浏览网页的,这似乎跟我们想象有很大的差距,因为我们觉得"用户会盯着每个网页,仔细阅读我们精心制作的文字,领会我们页面的组织方式",事实上大部分时间用户看网页就象"高速公路看广告牌一样"

  • Dreamweaver网页设计制作技巧与提高 好东西

    1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style. 2.活用Format Tab

  • 四步完成asp网页设计流量统计

    按照以下步骤,逐步操作,你很快就会拥有精美的图形化计数器.  步骤1:在网站的某个目录如count下建立文本文件,如counter.dat    ,用于存放访问量.文件内容仅有一行数字,表示网站初始访问量,一般为0. 步骤2:在相同目录下建立计数器的ASP程序,可命名为mycount.asp,内容如下: <% '自编ASP图形化计数器 V1.1 '用于网页浏览统计,免费使用,自由拷贝! dim vistors '获取计数文件counter.dat的地址 countfile=server.mapp

  • 基于Bootstrap的网页设计实例

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content=&qu

  • Win Server 2003秘笈放送

    1.我的时代 玩转Win 2003 秘笈.宝典之类的DD通常只在武侠小说里露面,故事里的主角往往无意间练得绝世武功从此扬名立万.如今,想熟练使用软.硬件产品,多看大家整理出的使用技巧绝对是一条有效的捷径.在这之中,尤其又以Windows操作系统的技巧类文章出现次数最为频繁. 去年5月22日,微软发布最新的Windows Server 2003(以下简称Windows 2003)操作系统.不少玩家朋友已经体验到了它无穷魅力,作为Windows XP的服务器版本,Windows 2003以其.NET

  • 什么叫标准网页设计?

    我们必须知道的! 每个网页都是由'内容'与'表现'组织起来的. 内容:就是我要显示什么.(使用HTML) 表现:怎么显示的更好.(使用CSS,学习CSS教程) 作为一个负责的网页设计者,你要牢记,标准网页设计中,HTML只是负责显示内容的,具体怎么显示,怎么排版是CSS的事.

  • 手机怎么访问电脑服务器上的网页

    首先开启PHP服务器. 然后,几个概念: localhost是本地地址. http://127.0.0.1/ 也是本地地址. 需要在网络中修改为局域网地址: 打开网络共享中心. 本地连接: 属性. IPv4 双击: 设置为 如下配置属性, 其中 192.168.1.168 中的168就是局域网192.168.1.1的分IP .大家可以任意设置,具体是路由器的设置. 局域网地址就是IP地址. 在浏览器地址中输入:http://192.168.1.168/index.html 用手机可以访问了.注意

  • 用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)

    环境及模块: Win7 64位 Python 3.6.4 WordCloud 1.5.0 Pillow 5.0.0 Jieba 0.39 目标: 绘制安徽省2018年某些科技项目的词云,直观展示热点. 思路: 先提取项目的名称,再用Jieba分词后提取词汇:过滤掉"研发"."系列"等无意义的词:最后用WordCloud 绘制词云. 扩展: 词云默认是矩形的,本代码采用图片作为蒙版,产生异形词云图.这里用的图片是安徽省地图. 秘笈: 用网上的常规方法绘制的词云,字体有

  • 网页设计中的 serif 和 sans-serif字体应用

    Howdy, 大家好,又是我~ 上一次我们简单的谈了一下font set和一些要注意的基本问题.今天我们继续字体这一话题,深入讲讲上次提到的"通用字体族".首先是最常用的 serif 和 sans-serif 这两个通用字体族. - serif Serif 在印刷学上指衬线字体.为了理解衬线字体的概念,大家先看几个典型的衬线字体的例子: My Georgia字体 King Times New Roman 字体 汉字 宋体 单词 My 中的字母 "M"上下方突出的短横

  • 网页设计布局基础第1/4页

    正如你现在所看到的一样,网页的布局设计变得越来越重要.访问者不愿意再看到只注重内容的站点.虽然内容很重要,但只有当网页布局和网页内容成功接合时,这种网页或者说站点才是受人喜欢的.取任何一面你都无法留住太过"挑剔"的访问者.  一.网页布局的基本概念 当前1/4页 1234下一页阅读全文

随机推荐