你需要知道的18个Web可用性原则

所属分类: 网页制作 / 应用技巧 阅读数: 1549
收藏 0 赞 0 分享

你可以有世界上最好的视觉设计能力,但如果你建立一个不允许访问者舒适地一页一页或一项一项访问的网站,那你就理解错了好的网站的核心点了。因此,在今天的文章我会将告诉你需要知道的18件可做不可做Web可用性事情

使用网格线来做网站页面结构

Do utilize a grid for your website structure

在你为一个有创意的网格页面框布局兴奋并尖叫的时候,你要保证你的整个网站的页面布局都在框子(Box)里边。网格结构能让访问者视线流固定在本页面,这是很关键的。一旦你将页面拉下来,页面也是很清晰简洁的 - 创造有趣的东西你需要放进优秀的设计放到网格里边。

不要忘记搜索表单

Do Not forget your search form

在你为一个有创意的网格页面框布局兴奋并尖叫的时候,你要保证你的整个网站的页面布局都在框子(Box)里边。网格结构能让访问者视线流固定在本页面,这是很关键的。一旦你将页面拉下来,页面也是很清晰简洁的 - 创造有趣的东西你需要放进优秀的设计放到网格里边。

让导航保持可寻性与可读性

Do make your navigation easy to find and readable

如果你正在设计一个网站,你的导航若是要引导用户从点A到点B,你会使用什么方式来做呢,你是否会利用一些比较怪异文字或者图片而不是一般传统连接(例如:一座房子标识主页,但是一个圆圈里边放一条闪电就不是什么好主意)。尽量保持导航容易阅读的,使访问者可以轻松浏览你的网站。

 

不要把联系信息链接使用“Mail to”链接

Do Not make your contact link in your navigation bar a mailto link

 

在点击一个链接之前,很多人(包括我自己在内)会在一个链接上悬停,然后看一下我们的浏览器状态栏,特别是联系信息链接,有些人认为联系信息链接直接向电子邮件地址来打开一个邮件程序是一个好主意。但我要告诉你这不是一个好UX的做法。创建一个联系信息页面,它把你的电子邮件地址,并添加一个联系表格 - 您的用户会感谢你 - 而且实际上会更经常地向您发送电子邮件。

 

尽可能使用UX的应用程序为Web测试

Do utilize UX Apps as much as possible for web tests

如果你对内容还没有把握,记录各种各样形式数据是个不错的主意。Google Analytics是一个完美的能看到你的网站访客都来自什么网页,他们在你的网站那上呆多久。你同样可以使用一个网站像Feedback Army去测试用户怎么浏览和使用你的网站。了解这些网站记录能让你尽量利用你的站点展示好的内容给有需要的人。

 

不要在网站的侧边栏上滥用小工具

Do Not flood your websites sidebar with tons of widgets

假如你正在使用一个博客,里边有1widgets,你可能会使用其中的一些widgets,但不是全部。你可以把博客想象成一间卧室,若里边有很多杂物,很乱没有条理,可能你的客人就不喜欢逗留。所以需要保持整洁,且有条理。博客访问者不(在大多数情况下)需要看到你的Google的好友,mybloglog 的好友,FriendFeed的好友和其他各种社交情况,因此这些都不用关心,重要的是你的站点的用户体验,而不是其他网站的东西。

你要确保在各种浏览器显示您的网站

Do make sure that your website displays well on various browsers

我们都知道的IE6已经举行过了葬礼,没有人抱怨,但是不要忘记,还有很多用户在IE7IE8的,OperaSafariFF等浏览器。仅仅因为你的网站有一两个亮点看起来不错,但这并不意味着访问者能容忍使用其他浏览器时展示出来的乱七八糟的界面。花一两个小时,分析代码并确保它在各种浏览器都正常显示。

 

不要幻想用户会为你表单赴汤蹈火

Do Not make your visitor jump through hoops to fill out a form

站点的联系方式表单不应该过长,注册表单也一样。把事情尽量简化。把表单简化到只剩三个问题(名字,Email,内容)很可能可以把以前丢失的用户拉回来。

要确保各个页面在结构一致

Do ensure your various pages are consistent in structure

除非你是一个博客,你的结构是为很多人设计,支持多用户的,要不你就得要记住,访问者希望看到熟悉一致的结构。如果他们觉得自己不同的地方时,它们加载了新的一页了,他们就会很快速的点击后退按钮。

 

不要忘了打印内容用的样式表

Do Not forget a print stylesheet for those who want to print your content

 

这一点是针对博客/内容等网站而言的。如果你的访问者要打印内容(相信我,许多人仍然这样做,尤其是年龄较大的旅客),你不应该要求他们打印整个页面,上边包含了评论和所有广告。这是很乱的,没必要。如果看了《better blogging equals better business for freelancers》这篇文章,你会知道打印出来的文正,很干净,很清晰,没有黑色和白色,没有图像,没有评论,没有工具栏。内容是印刷的问题,所以确保它突出。

 

 

要保证你的内容布局适合扫描并符合视角路线

Do make sure your content is easy to scan and follow along with

一般来说,人的注意力维持不久。因此,利用章节标题(h2H3的或H4的标记)分隔你的文章,让访问者快速扫描的文章,找到他所关心的内容。当你写你的内容,你也应该注意,用户可能看到20+行的一个段落后,视力可能就疲劳了,一般5-10行比较合适。

 

 

不要把东西塞得满满的Do Not cram more into a space than what can fit comfortably

 

简化。拥挤的一个小空间,并不能让用户眼睛集中于重要的东西反而适得其反。是的,你有大量的信息,但并不是说要把这些信息对折?尽量让你的设计和内容能保持呼吸。你的用户会感谢你的。

 

一定要使用面包屑导航Do make sure to include breadcrumbs in your design

面包屑是对于用户来说,能告诉他们在哪,下一步可以去哪。如果他们访问的是网站子页,你的面包屑导航可能如此(首页>子页面标题>)。这告诉用户他们正是页面上,以及如何各级回去,如果他们想。

 

 

不要忘了利用颜色对比度,转移焦点

Do Not forget to utilize color and contrast to shift focus

 

如果您使用的大标题,和一个栏目标题,可以尝试各种颜色的深浅,让访问者知道第一重要的东西(即:为标题和副标题为#c1c1c1464646)。这些变化的颜色和对比度将决定你的用户知道下一步去哪。

 

 

确保站点没有无效链接和图像

Do check for broken links and images

在你的旧文章图片检查无效的链接和图片是一件很重要的事情,因为可能有访问者从搜索引擎来到你的网站,如果有断开的链接,他们将要承担一两件事情:1,你是一个老网站,再不会被更新;2,你没有尽力去保障你的网站内容价值,所以他们将去其他地方。如果你是一个WordPress的用户,有一个插件:Broken Link Checker。您还可以到iwebtool and use their free broken link checker使用其免费损坏的链接检查器(每小时最多5个请求)。

 

 

不要忽视你的页脚和作用

Do Not neglect your footer and the power it has

 

所当用户拉动滚动跳到页面底部,看到的是一个平淡,单行文本的网站版权说明是一件很无聊的事情。为什么不点缀一下你的页脚,把它添加一些额外的内容,如受欢迎的文章,一个搜索框,电子邮件订阅,等。如果您想了解如何设计一个网站杀手页脚一些想法,你应该看看Footer Fetish,不要与其他的混为一谈。

 

 

设计过程中尽量使用线框图

Do use wireframing in your design process

 

在纸上使用线框图能让你可视化的看出最重要的内容,并怎么将他们展示出来。通过这样做,你也可以随意的试验各种布局,而不必担心破坏设计。对于线框灵感,我看了《I love Wireframes - 线框图是很惊人的。

 

 

为你的读者写内容而不是搜索引擎

Do Not write for search engines - write for your readers

你应该为你的读者用户而写,而不是搜索引擎。关键字可能在过去(而且可能还是今天)有用,但如果一个真实访问者访问了你的一面,发现3个段落就有100次“设计师”的时候,你觉得他们的点击后退按钮,还是继续看?无疑,点击后退的可能性非常高。

你可以在写内容的时候前大声读,如果你觉得不够自然流畅,那就推倒重写,直到流畅为止。当人们会阅读你的内容,是期望它像一个真的人在和他们交谈,所以确保确实如此。

更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多