← 返回方法

从技术到应用 · 05

视觉与信息设计

我先确认读者要完成什么任务。当前检查项包括焦点、层级、状态、对比度,以及不同载体的阅读方式。

先看页面要完成什么

页面任务可以是找到一项结论、核对一组数据或提交一次申请。任务所需的信息和动作放在容易找到的位置,补充说明留在读者需要的地方。

可用性检查记录读者先看哪里、点击什么、在哪个词语前停住。没有实际观察记录时,只写设计假设,不把假设当作使用结果。

安排焦点和阅读顺序

标题字号、字体粗细和段落间距共同建立层级。一个区域只保留一个主焦点,次要操作降低颜色和位置权重。

颜色区分含义和状态,留白划分信息组。正文行宽、行距和数字对齐方式按阅读距离调整。

用一套规则减少辨认

标题、正文、注释和关键数字采用明确的字体、字号与间距;主要色、提示色和边框色也要记录用途。

按钮、输入框、表格行和提示消息复用固定组件。同一状态使用相同名称、位置和反馈,设计与开发再按状态清单核对。

不同载体有不同读法

Word 依靠多级标题、页码、图表题注和重复表头帮助查阅;PPT 每页保留一个主要判断,在听众需要时给出证据;数据表格写清字段、单位和缺失值。

网页需要清楚的链接名称与内容层级,软件界面还要处理输入、确认和纠错。移动端按单列安排阅读顺序,小屏先保留关键列;无法压缩的表格允许横向滚动,并在表头说明单位。

检查状态和可访问性

检查项覆盖默认、悬停、键盘焦点、禁用、加载、空数据、错误和成功状态。每个状态都要有文字反馈,不能只靠颜色区分。

主要流程还要检查标题顺序、表单标签、图片说明、正文对比度和放大后的移动端阅读。发现的问题与功能缺陷进入同一份整改清单。

从真实误读中改设计

旧版个人主页把“研究、写作、学习、产品与工程”放在同一层,读者能看见四个入口,却看不出持续学习与两条主线的关系。

这次改版把“持续学习”放在通栏位置,其余六项归入两条主线。桌面端和移动端保持相同的信息顺序,主要链接也保留清晰的键盘焦点。

相关内容