125个提升网页可用性的优化小技巧(四)

2016/05/30 14:55:07    文章来源:互联网    浏览:1952

尽可能提高界面的可浏览性

多数用户采用浏览扫读的方式处理内容,我们需要接受这种行为。

设计界面时尽量适应这种泛读浏览方式。

△ 保持段落简短,高亮关键词组

△ 把重要信息放在列表的开头

△ 给表格添加交替的行条纹背景

△ 编写独立副标题(不要一篇文章就一个大标题)

△ 用视觉变化拆分文本

尽可能提高文本的可读性

很明显,文本需要让人易懂,有些技巧能让文本更具可读性。

让文本和背景具有鲜明对比

背景上显示文本需要注意,可能需要做一些叠加或模糊处理。(以作者照片为例

正文的主要部分采用左对齐

界面设计风格保持一致

风格不统一的话用户需要花更多时间学习界面。保持统一的布局和外观可以简化学习过程。

制定一份前端风格指引

制定一份稳定,总结界面各元素的设计规格说明

其他元素包括:

颜色

网格和布局

位置和定位

大小和形状

标签和语言

导航

表格

列表

链接

声音和腔调

需要灵感参考?看看Mailchimp的风格指引(http://ux.mailchimp.com/patterns

△ 导航菜单保持在相同位置

通过视觉平衡实现设计美感

美观的设计更加好用 即美即好用效应原则(Kurosu & Kashimura, 1995.

△ 使用数学原理构造设计

使用对比性字体

挑选搭配字体时,有人喜欢使用相似的字体,但这种方式是错的,很多时候相似的看上去并不对。

相反,应该精心挑选对比鲜明的字体,新手设计师可以选择serif vs sans-serif(英文字体),如上图


尽可能兼顾不同用户的知识和技能水平

用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。

使用适当的新人引导(四种主要的新人引导策略)

这四种用法刚好可以用一个2*2的矩阵来表示。根据下方图示选择最适合你界面的方式:


△ 为新手用户添加提示而不干扰专家用户

使用卡片分类构建信息架构

若你想了解用户如何确定或概念化菜单分类,使用开放式卡片分类;

若你想了解用户如何将现有元素归类到预制分类,使用封闭式卡片分类;

尽可能适应用户的操作流程

用户会有不同的需求,根据不同操作流程调整界面设计。

△ 让用户控制数据的呈现方式

让用户控制数据的排序方式

其他排序标准包括:

按字母顺序

按可用性

按分类

按日期

按距离

按热门程度

按价格

按相关性

按大小

△ 让用户控制数据显示的数量

△ 构建用户画像以区分具体操作流程

让用户通过新标签页打开页面

很多用户习惯先打开页面,后续再去浏览。

尽可能提高网页的可及性

让残疾人群也可以访问使用你的界面。这不仅是好的做法,还可以避免法律后果(看你做的是什么产品)

△ 在HTML5中使用语义标签

使用多种提示来沟通反馈信息

8%的男性是色盲(Chan, Goh, & Tan, 2014)。不要单独通过颜色来传达信息,提供多种提示。

尽可能兼容各种输入和极端个例

应该允许用户输入各种信息而无后顾之忧。

解决自动生成信息带来的不好结果

(译者注:上图客户旅游目的地是奥斯威辛,通过模板消息“<目的地名称>玩得开心,会生成奥斯威辛玩得开心的提示,但奥斯威辛集中营是个负面的联想,奥斯威辛集中营玩得开心,会让用户不爽。保险起见,改成提示旅途愉快”)


△ 使用支持多种输入格式的表单元素

△ 显示能解决搜索者需求的结果

使用能处理错别字、同义词或变体词的搜索

尽可能兼容所有媒介

界面需要在各种环境都能运作(如不同设备、浏览器等)

△ 根据用户浏览器定制不同的操作指引

△ 在小型设备上使用单窗口深入的方式


联系 · 华中科技

4008-930 523

售前QQ : 826999831 售后QQ : 61430188

地址:深圳市宝安区西乡街道宝安智谷科技创新园 A座816

网站定制开发需求表

X
建站类型:
开发类型:
项目预算:
功能模块:
 
阁下尊称:
联系电话:
所在城市: