23、视觉设计中保持一致性与逻辑性的关键要点

视觉设计中保持一致性与逻辑性的关键要点

1. 使用简洁且独特的标题层级

为确保模板在视觉上具有逻辑性和一致性，需密切关注标题层级的视觉呈现。标题能将信息组织成不同的板块，标题在大小、粗细和位置上的差异，能为用户提供其在组织层级中相对位置的视觉线索。这些视觉差异应明显但不过于极端。

若标题有编号，其在层级中的位置一目了然；若没有编号，可采用以下方法区分：
- 字体
- 字号
- 粗细（加粗、常规、细体）
- 样式（正常、斜体、下划线、上划线）
- 大小写（全大写、标题样式、句子样式）
- 缩进

不过，使用超过三种方法来区分标题层级，可能会让用户感到困惑和分心，而非帮助他们理解组织层级。

以下是一个五级标题的示例：

原始示例

标题级别	格式
一级标题	16 磅加粗，标题样式
二级标题	14 磅加粗斜体，缩进 (1)，句子样式
三级标题	12 磅常规，下划线，缩进 (2)，句子样式
四级标题	11 磅常规，缩进 (2)，全大写
五级标题	10 磅加粗，缩进 (3)，句子样式

原始示例中使用的区分方法之间似乎关联性不大，用户可能难以记住单个标题在层级中的位置。而修订后的示例采用更有序的变化，更易于遵循：

修订示例

标题级别	格式
一级标题	16 磅加粗
二级标题	13 磅加粗
三级标题	13 磅加粗，缩进 (1)
四级标题	11 磅加粗，缩进 (1)
五级标题	10 磅加粗斜体，缩进 (1)

修订后的标题层级清晰易见且易于记忆。使用两到三种方法区分标题层级时，用户能更轻松地看出标题之间的关系，并识别特定的标题级别。

2. 保持文档元素的一致布局

细心的用户会注意到视觉系统中哪怕最细微的变化，并认为其具有重要意义。若变化无意义或未作解释，用户会感到分心和困惑。例如代码示例的缩进问题：

原始示例

1. Decide which module to place in maintenance mode.
2. Stop all modules by entering the following command for 
each module in the group:
 -IN1G STOP INFOB MODE(QUIESCE)
3. Start the surviving member in maintenance mode by using 
the following command:
 -IN1G START INFOB ACCESS(MAINT)
4. Stop the surviving member by using the following 
command:
 -IN1G STOP INFOB MODE(QUIESCE)
5. Stop any IQMs that have not stopped, using the following 
command:
 STOP iqmproc

修订示例

1. Decide which module to place in maintenance mode.
2. Stop all modules by entering the following command for 
each module in the group:
 -IN1G STOP INFOB MODE(QUIESCE)
3. Start the surviving member in maintenance mode by using 
the following command:
 -IN1G START INFOB ACCESS(MAINT)
4. Stop the surviving member by using the following 
command:
 -IN1G STOP INFOB MODE(QUIESCE)
5. Stop any IQMs that have not stopped, using the following 
command:
 STOP iqmproc

在原始示例中，部分代码示例缩进，部分不缩进，或缩进空格数不同，用户可能会认为间距有重要意义，从而错误地编写应用程序。修订后，所有代码示例都与列表文本的左边缘对齐，用户可确信类似示例的代码无需缩进也能正常工作。

表格格式的一致性同样重要。以下是两个不同格式的表格示例：

原始表格示例

表 1. Values inserted in the INFODA

Value	Field	Description
INFODA	INFODAID	An “eye-catcher”
8816	INFODABC	The size of the INFODA in bytes (16 + 44 × 200)
200	INFON	The number of occurrences of INFOVAR, set by the program
200	INFOD	The number of occurrences of INFOVAR actually used by the DESCRIBE statement
452	INFOTYPE	The value of INFOTYPE in the first occurrence of INFOVAR. It indicates that the first column contains fixed-length character strings and does not allow null values.

表 2. INFO data types mapped to typical InfoDBasic declarations

INFO data type	InfoDBasic equivalent	Examples
SMALLINT	INTEGER*2
INTEGER	INTEGER*4
DECIMAL(p,s) or NUMERIC(p,s)	no exact equivalent; use REAL*8
FLOAT(n) single precision	REAL*4	1 < n < 21
FLOAT(n) double precision	REAL*8	22 < n < 53
CHAR(n)	CHARACTER*n	1 < n < 254

第一个表格标题在顶部，无垂直分隔线，列标题为斜体；第二个表格标题在底部，有垂直分隔线，列标题加粗。用户在提取第二个表格的重要信息前，需先识别其与前一个表格的差异，并判断这些差异是否有意义，这种不一致的表格格式会不必要地减慢用户的进度和理解速度。

修订表格示例

表 1. Values inserted in the INFODA

Value	Field	Description
INFODA	INFODAID	An “eye-catcher”
8816	INFODABC	The size of the INFODA in bytes (16 + 44 × 200)
200	INFON	The number of occurrences of INFOVAR, set by the program
200	INFOD	The number of occurrences of INFOVAR actually used by the DESCRIBE statement
452	INFOTYPE	The value of INFOTYPE in the first occurrence of INFOVAR. It indicates that the first column contains fixed-length character strings and does not allow null values.

表 2. INFO data types mapped to typical InfoDBasic declarations

INFO Data Type	InfoDBasic Equivalent	Examples
SMALLINT	INTEGER*2
INTEGER	INTEGER*4
DECIMAL(p,s) or NUMERIC(p,s)	no exact equivalent; use REAL*8
FLOAT(n) single precision	REAL*4	1 < n < 21
FLOAT(n) double precision	REAL*8	22 < n < 53
CHAR(n)	CHARACTER*n	1 < n < 254

当表格结构一致时，用户能快速学会将结构仅作为指南，专注于表格包含的信息。保持文档元素和结构的一致布局，能帮助用户快速了解信息的呈现方式，让他们专注于信息本身。

3. 确保多媒体演示的外观和感觉一致

多媒体演示、示范和教程的设计也应遵循类似的一致性准则。大多数多媒体开发软件提供了几乎无限的窗口背景、过渡效果以及集成音频和视频剪辑的选项。但应避免使用所有可用的图形技巧，为帮助用户专注于信息而非演示技术，可遵循以下准则：
- 选择与演示相匹配但不喧宾夺主的屏幕背景，并在整个演示过程中使用相同的背景。
- 若演示使用动态过渡效果（如“淡入淡出”），选择一两种类型并谨慎且一致地使用。
- 在整个演示过程中保持一致的导航和按钮位置。

以下是同一演示中两个窗口的示例：

原始示例

在第一个窗口中，目录按钮在左侧，导航按钮在窗口底部；在“导航”窗口中，目录按钮出现在右上角，所有导航按钮在右下角。用户使用这样的窗口可能会遇到困难，他们需先确定每个窗口中哪些部分包含重要信息，然后找到并理解如何从一个窗口切换到另一个窗口。

修订示例

当演示方法一致时，用户能快速了解窗口中视觉元素的位置，将这些元素视为信息的增强部分，在切换到下一个窗口时，能专注于信息而非重新学习演示和导航方法。

4. 一致使用图标和符号

即使是最小的不一致也可能让用户感到困惑。例如，同一 Web 应用中的两个按钮：

原始示例

两个按钮外观相似，但鼠标悬停在“订阅”按钮上时，光标变为手形，而悬停在“搜索”按钮上时，光标不变。这可能会让用户怀疑搜索功能是否可用，尽管大多数用户仍会点击，但可能会感到困惑或沮丧。

修订示例

修订后的示例中，鼠标悬停在两个按钮上时，光标都变为手形。这种一致的使用方式强化了用户的理解，即包含文本的圆角矩形是按钮，且光标变化表示可点击的控件。

逻辑且一致地使用视觉元素能让用户在使用信息时感到舒适和自信。使用一致的视觉系统，用户能快速学习并将注意力集中在信息上。

5. 平衡视觉元素的数量和位置

窗口或页面上用户能看到的一切，都会对信息的视觉效果产生影响，包括：
- 布局
- 背景、文本和图形的颜色与阴影
- 背景与文本的对比度
- 字体和字号
- 插图、图标和动画
- 表格、图表和代码示例
- 导航提示
- 行和段落的长度
- 高亮显示
- 标题
- 列表样式和长度
- 整体信息密度和空白空间

技术信息中大块的文本容易让用户感到不知所措和沮丧。通过使用各种视觉元素，可帮助用户轻松自信地找到信息。当段落被其他视觉元素分隔时，用户能暂停、评估和吸收信息。空白空间能让眼睛得到休息，使窗口、页面或跨页看起来不那么密集和令人生畏，但要确保额外的空白空间不会中断信息的流畅性。

原始页面示例

原始页面视觉上过于密集且缺乏变化，用户无法识别哪些段落包含参考信息，哪些包含解决问题的任务步骤，页面没有吸引用户阅读的动力，也没有提供关于其组织或段落相对重要性的线索。

修订页面示例

修订后的页面具有结构和组织，用户只需粗略一瞥，就能清楚如何处理信息。标题、表格标题、表格线、列间距和列表编号等都有助于引导用户获取和理解信息，空白空间为用户提供了暂停的地方，暂停后用户能更轻松地找到继续阅读的位置。

6. 使用视觉线索帮助用户找到所需信息

系统且一致地使用视觉元素，能帮助用户快速找到信息。在线界面常使用图标代表程序和数据对象，设计良好的图标比其代表的名称更容易找到，还能提供有关对象特征及其与其他对象关系的大量信息。在印刷信息中，标签或彩条（页面边缘的彩色条带）能帮助用户找到章节或部分的开头，包含图形的页眉也有助于用户快速轻松地找到信息。

为帮助用户快速找到所需信息，可遵循以下准则：

6.1 视觉识别重复的选项或上下文

可在在线和印刷信息中使用图标，向用户展示信息的位置。当大部分信息适用于多个环境、场景或用户子组，但部分信息仅适用于其中一个子集时，此技术特别有用。可使用一套小图形或图标，每个独特情况对应一个，放置在子集信息开头，帮助用户找到相关信息。

以下是在多个操作系统上从 CD-ROM 安装软件的说明示例：

原始示例

To install InfoManager:
1.  Insert the CD in your computer's CD-ROM drive.
2.  Follow the instructions for your operating system:
a. To install on the Macintosh operating system:
i. Open the CD-ROM drive.
ii. Double-click Install InfoManager now.
b. To install on the UNIX operating system:
i. Log in as root user.
ii. Mount the CD-ROM drive.
iii. Change the directory to the mount point of 
your CD-ROM drive.
iv. Type SETUPUNIX.
c. To install on the Windows 2000 operating system:
i. Click Start.
ii. Select Run.
iii. Type d:\SETUPWIN where d is the drive letter 
of your CD-ROM drive.
iv. Click OK.
3.  Follow the instructions in the setup program for your 
operating system.

在原始示例中，用户可能需要阅读所有文本才能找到适用于自己操作系统的信息。

修订示例

To install InfoManager:
1.  Insert the CD in your computer's CD-ROM drive.
2.  Follow the instructions for your operating system:
a.  To install on the Macintosh operating system:
i. Open the CD-ROM drive.
ii. Double-click Install InfoManager now.
b.  To install on the UNIX operating system:
i. Log in as root user.
ii. Mount the CD-ROM drive.
iii. Change the directory to the mount point of 
your CD-ROM drive.
iv. Type SETUPUNIX.
c.  To install on the Windows 2000 operating 
system:
i. Click Start.
ii. Select Run.
iii. Type d:\SETUPWIN where d is the drive letter 
of your CD-ROM drive.
iv. Click OK.
3.  Follow the instructions in the setup program for your 
operating system.

修订后的示例在文本左侧添加了特定操作系统的图标，用户能快速找到相关信息，跳过不适用的部分，提高信息获取效率。

通常情况下，希望用户先阅读文本或说明，再查看插图以帮助解释；但在以下情况下，可将小图形或插图放在文本前面：
- 图形帮助用户决定阅读哪部分文本，如上述修订示例。
- 用户需要了解即将描述的对象或控件所在的物理上下文。

此外，要让用户清楚下一步的操作路径，可通过为步骤编号或在在线信息中清晰明确地突出显示链接等方式提供视觉引导。

6.2 确保视觉线索在所有环境中都可用

用户可能在未预料的环境中查看信息，因此添加的视觉线索和检索辅助工具应使信息尽可能被更多用户访问。例如，一个帮助主题中的链接仅用颜色编码而无下划线：

原始示例

Basic settings
You can customize the way that your text formatter behaves by 
changing the basic settings:
z Change the color scheme.
z Change the size of the Bookmark icon.
z Change the default fonts.
z Add words to your dictionary.

在黑白显示或用户为色盲的情况下，链接可能会消失。

修订示例

Basic settings
You can customize the way that your text formatter behaves by 
changing the basic settings:
z Change the color scheme.
z Change the size of the Bookmark icon.
z Change the default fonts.
z Add words to your dictionary.

修订后的示例中，链接的颜色高亮通过下划线得到强化，使色盲用户和使用单色显示器的用户能够区分链接与普通文本。

若需要将信息集成到使用不同视觉系统的环境中，应选择最普遍或最明显、可用的视觉系统。例如，网页上链接的主要高亮方式是下划线蓝色文本，这是一个明显的选择。

总之，在视觉设计中，保持一致性和逻辑性至关重要。通过合理运用标题层级、文档元素布局、多媒体演示、图标符号以及视觉线索等方面的技巧，能提升用户体验，帮助用户更轻松地获取和理解信息。

7. 视觉设计一致性的工作流程

为了更好地在实际工作中实现视觉设计的一致性，我们可以遵循以下工作流程：

graph LR
    A[确定设计目标] --> B[规划视觉元素]
    B --> C[创建设计规范]
    C --> D[执行设计]
    D --> E[审核与调整]
    E --> F[发布与维护]

7.1 确定设计目标

明确设计的目的和受众，例如是为了提高用户对信息的获取效率，还是为了增强品牌形象等。这一步是整个设计过程的基础，决定了后续的设计方向。

7.2 规划视觉元素

根据设计目标，规划需要使用的视觉元素，如标题层级、颜色、字体、图标等。可以列出一个清单，确保涵盖所有可能用到的元素。
| 视觉元素 | 规划要点 |
| ---- | ---- |
| 标题层级 | 确定使用的区分方法和各级标题的具体样式 |
| 颜色 | 选择主色调和辅助色调，并确定其在不同元素中的使用规则 |
| 字体 | 选定主要字体和备用字体，规定字号、粗细等样式 |
| 图标 | 设计或选择统一风格的图标，并确定其使用场景 |

7.3 创建设计规范

将规划好的视觉元素整理成详细的设计规范，包括每个元素的具体参数和使用说明。设计规范可以以文档的形式呈现，方便团队成员参考和遵循。

7.4 执行设计

按照设计规范进行具体的设计工作，确保所有视觉元素的使用都符合规范。在设计过程中，可以使用设计工具来提高效率和准确性。

7.5 审核与调整

完成设计后，进行审核，检查是否存在不一致或不符合设计目标的地方。根据审核结果进行调整，确保设计的质量。

7.6 发布与维护

将设计好的内容发布到相应的平台，并定期进行维护，确保视觉元素的一致性始终得到保持。如果有新的需求或变化，及时更新设计规范和设计内容。

8. 视觉设计一致性的案例分析

8.1 某在线教育平台的设计优化

某在线教育平台在进行改版前，存在标题层级不清晰、页面布局混乱、多媒体演示不一致等问题，导致用户体验不佳。通过以下优化措施，取得了良好的效果：
- 标题层级优化 ：采用简洁的标题层级区分方法，使用字号和缩进两种方式，使标题之间的关系一目了然。
| 标题级别 | 格式 |
| ---- | ---- |
| 一级标题 | 20 磅加粗 |
| 二级标题 | 16 磅加粗，缩进 1 个字符 |
| 三级标题 | 14 磅常规，缩进 2 个字符 |

• 页面布局统一 ：规范了页面元素的位置和间距，确保所有课程页面的布局一致，提高了用户的浏览效率。
• 多媒体演示一致 ：选择了统一的屏幕背景和过渡效果，在整个课程视频和演示中保持一致，让用户更加专注于学习内容。
• 图标和符号一致 ：对所有图标和按钮的样式进行了统一，鼠标悬停时的效果也保持一致，增强了用户的操作体验。

改版后，平台的用户满意度显著提高，用户流失率降低，课程的学习完成率也有所提升。

8.2 某电商网站的视觉设计改进

某电商网站在视觉设计上存在图标使用不一致、颜色搭配混乱等问题，影响了用户的购物体验。通过以下改进措施，提升了网站的视觉效果：
- 图标统一 ：重新设计了所有图标，使其风格一致，并确保鼠标悬停时的效果相同，让用户更容易识别和操作。
- 颜色规范 ：确定了网站的主色调和辅助色调，规定了不同颜色在商品展示、导航栏、按钮等元素中的使用规则，使网站的整体颜色更加协调。
- 视觉线索优化 ：在商品搜索结果页面，使用图标和颜色来区分不同类型的商品和促销活动，让用户能够快速找到自己需要的商品。

改进后，网站的转化率有所提高，用户在网站上的停留时间也增加了。

9. 总结

在视觉设计中，保持一致性和逻辑性是提升用户体验的关键。通过使用简洁且独特的标题层级、保持文档元素和多媒体演示的一致布局、一致使用图标和符号、平衡视觉元素的数量和位置以及合理使用视觉线索等方法，可以让用户更加轻松地获取和理解信息。同时，遵循一定的工作流程和借鉴成功的案例，能够帮助我们更好地实现视觉设计的一致性目标。在未来的设计工作中，我们应不断关注用户的需求和反馈，持续优化视觉设计，为用户提供更加优质的体验。