Web和移动可用性设计秘笈
2016-07-24 18:18
253 查看
可用性第一定律:别让我思考。
也就是别让用户思考网页设计清晰明了,让人一看就知道怎么做。这里还有一条原则:如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。
我们是如何使用Web的
第一个事实:我们不是阅读,而是扫描。浏览一个网站,大篇幅的文字是不适宜的,我们会花很少的时间去阅读文字,总是匆匆浏览寻找自己所需。
第二个事实:我们不做最佳选择,而是满意即可。浏览网页,绝大多数时间里我们不会选择最好的,而是选择一个过得去的,这就是满意策略。
第三个事实:我们不是追根究底,而是勉强应付。事物背后的运行机制和我们无关,这对我们来说并不重要。如果发现一个东西能用,我们就会一直使用它,并且是按照自己的理解去使用。那么,如果访问者的表现让你觉得你似乎在设计广告牌,那就设计出了不起的广告牌。
广告牌设计101法则(为扫描设计,不为阅读设计)
设计师需要注意的方面:
² 尽量利用习惯用法
² 建立有效的视觉层次
² 把页面划分成明确定义的区域
² 明显标识可以点击的地方
² 最小化干扰
² 为内容创造清楚的格式,方便扫描
有一条要记住的原则:简洁胜过一致。(如果能通过在某种程度上打破一致性,而得到高度简洁清楚的效果,那么果断选择简洁)
用户喜欢无须考虑的选择
点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。——Krug可用性第二定律
必要的帮助和指引
Ø 简短:只需要提供最少的信息来帮助我
Ø 及时:放在我正好需要它的地方
Ø 不会错过:设置合适的格式,保证我一定会注意到它
比如“这是什么?”的小链接,工具提示
省略多余的文字(不要在Web上写作的艺术)
去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。——Krug可用性第三定律
省略多余文字的好处:
u 降低页面噪声
u 突出有用内容
u 页面更简短,用户可以看见更多的内容,不必滚动屏幕
做法:
Ø 欢迎词必须消灭(尽量减少欢迎词,能减多少就减多少)
Ø 指示文字必须消灭(站在用户的角度,留下对用户有用的信息)
设计导航
持久导航(包括四个元素)
Ø 站点ID(像商标标识:一种独特的字体,一个可以识别的图形,大小从按钮到广告牌不等)
Ø 实用工具
Ø 栏目
Ø 搜索(一个输入框,一个按钮,还有搜索两个字)
让导航部分在每一页以一致的外观出现在同样的位置,会让你立即确认自己仍然待在这个网站上,对某些页面来说,只需要站点ID,一个回到主页的链接,站点ID同时作为一个能让他们回到主页的按钮,是一个不错的设计。
页面名称:
Ø 每个页面都需要一个名称
Ø 页面名称需要出现在合适的位置
Ø 名称要引人注目
Ø 名称要和点击的链接一致
标识我在哪里(需要突出显示出来)
Ø 在旁边放置一个指示器
Ø 改变文字的颜色
Ø 使用粗体
Ø 按钮反白
Ø 改变按钮的颜色
没有什么比得上一个好口号,选择口号需要考虑的要素:
Ø 清楚,言之有物
Ø 长度合适,6~8个字
Ø 表述网站的特点和显而易见的好处
Ø 个性、生动、俏皮
大部分关于可用性的争论是浪费时间,因为个人喜好不同,为了避免这种情况,可行办法就是测试。
移动设备同样需要测试。
可用性是基本礼貌,一个网站同样需要获得尊敬,应关注用户体验,使得它的可访问性更强,才能长久发展。
也就是别让用户思考网页设计清晰明了,让人一看就知道怎么做。这里还有一条原则:如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。
我们是如何使用Web的
第一个事实:我们不是阅读,而是扫描。浏览一个网站,大篇幅的文字是不适宜的,我们会花很少的时间去阅读文字,总是匆匆浏览寻找自己所需。
第二个事实:我们不做最佳选择,而是满意即可。浏览网页,绝大多数时间里我们不会选择最好的,而是选择一个过得去的,这就是满意策略。
第三个事实:我们不是追根究底,而是勉强应付。事物背后的运行机制和我们无关,这对我们来说并不重要。如果发现一个东西能用,我们就会一直使用它,并且是按照自己的理解去使用。那么,如果访问者的表现让你觉得你似乎在设计广告牌,那就设计出了不起的广告牌。
广告牌设计101法则(为扫描设计,不为阅读设计)
设计师需要注意的方面:
² 尽量利用习惯用法
² 建立有效的视觉层次
² 把页面划分成明确定义的区域
² 明显标识可以点击的地方
² 最小化干扰
² 为内容创造清楚的格式,方便扫描
有一条要记住的原则:简洁胜过一致。(如果能通过在某种程度上打破一致性,而得到高度简洁清楚的效果,那么果断选择简洁)
用户喜欢无须考虑的选择
点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。——Krug可用性第二定律
必要的帮助和指引
Ø 简短:只需要提供最少的信息来帮助我
Ø 及时:放在我正好需要它的地方
Ø 不会错过:设置合适的格式,保证我一定会注意到它
比如“这是什么?”的小链接,工具提示
省略多余的文字(不要在Web上写作的艺术)
去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。——Krug可用性第三定律
省略多余文字的好处:
u 降低页面噪声
u 突出有用内容
u 页面更简短,用户可以看见更多的内容,不必滚动屏幕
做法:
Ø 欢迎词必须消灭(尽量减少欢迎词,能减多少就减多少)
Ø 指示文字必须消灭(站在用户的角度,留下对用户有用的信息)
设计导航
持久导航(包括四个元素)
Ø 站点ID(像商标标识:一种独特的字体,一个可以识别的图形,大小从按钮到广告牌不等)
Ø 实用工具
Ø 栏目
Ø 搜索(一个输入框,一个按钮,还有搜索两个字)
让导航部分在每一页以一致的外观出现在同样的位置,会让你立即确认自己仍然待在这个网站上,对某些页面来说,只需要站点ID,一个回到主页的链接,站点ID同时作为一个能让他们回到主页的按钮,是一个不错的设计。
页面名称:
Ø 每个页面都需要一个名称
Ø 页面名称需要出现在合适的位置
Ø 名称要引人注目
Ø 名称要和点击的链接一致
标识我在哪里(需要突出显示出来)
Ø 在旁边放置一个指示器
Ø 改变文字的颜色
Ø 使用粗体
Ø 按钮反白
Ø 改变按钮的颜色
没有什么比得上一个好口号,选择口号需要考虑的要素:
Ø 清楚,言之有物
Ø 长度合适,6~8个字
Ø 表述网站的特点和显而易见的好处
Ø 个性、生动、俏皮
大部分关于可用性的争论是浪费时间,因为个人喜好不同,为了避免这种情况,可行办法就是测试。
花在每次测试上的时间 | 每个月一个上午,包括测试本身、总结和决定修复哪些问题 到午后,这个月的测试已经完成了 |
什么时候测试 | 持续进行,贯穿整个开放过程 |
进行多少次测试 | 每个月一次 |
每次测试的参与者数量 | 3个 |
招募方式 | 随便找一些人,如果必要,经常进行测试比测试“真实用户”更重要 |
测试地点 | 在开发现场进行,观察人员使用一间会议室,使用屏幕共享软件观看 |
谁来观看 | 半天的现场测试通常意味着有更多的人可以看到测试“实况” |
汇报总结 | 一份1~2页的邮件,列出团队在总结会上的决定 |
谁来标识问题 | 整个开发团队,加上任何感兴趣的利益相关者,在测试结束之后的午饭时间一起核对笔记,并决定修复哪些问题 |
主要目标 | 找到最严重的那些问题,并承诺在下一次测试之前修复它们 |
现金成本 | 每次几百美元或者更少 |
可用性是基本礼貌,一个网站同样需要获得尊敬,应关注用户体验,使得它的可访问性更强,才能长久发展。
相关文章推荐
- 谈谈网页设计中的字体应用Font Set
- 网页设计中的 serif 和 sans-serif字体应用
- 为你的响应式设计提速
- CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
- css3的@media属性实现页面响应式布局示例代码
- css3与html5实现响应式导航菜单(导航栏)效果分享
- 国外优秀网站标志
- 纯CSS实现的响应式图像显示(无javaScript)
- 网页布局之响应式设计简明指南
- 响应式网页设计的快速教程(适合个人站点)
- 一款纯css3实现的响应式导航
- 支持IE8的纯css3开发的响应式设计动画菜单教程
- 实列教程 一款基于jquery和css3的响应式二级导航菜单
- 使用jquery实现HTML5响应式导航菜单教程
- 浅谈html5 响应式布局
- HTML5响应式可触控的音频播放器
- 设计出色响应式网站的十个技巧
- 16个最佳响应式HTML5框架分享