• 利用用户的心智和习惯，以及我们掌握的视觉手段，更好 的完成界面设计。
分享结束，感谢大家支持！
设计中我们遇到的问题
视线首先落在什么地方？
• 那个设计元素在第一时间吸引了用户的注意力？
• 它对于战略目标上来讲是很重要的东西吗？
• 用户第一时间注意到的东西与它们的（或你的）目标是背 盗而驰？
好的视觉引导
是一条流畅的路径，设计能顺利地引导用户在页面上移动
• 能“干扰”用户的视线，为用户提供有效选择的、某种可 能的“引导”，支持用户试图去完成它们的目标和任务。
• 作用：通过分组和对齐把用户的视线从一组元素引到另外 一组，从而来完成引导，帮助形成视觉流。
• 牵制因素：
•
１.视觉习惯，放在一起的东西，我们就会觉得有关联。
２.空白，足够的空间距离，让元素在逻辑上不相关。
• 如何建立：轮廓和• 分组和对齐描述的是布局属性；
• 我们需要。。。
视觉流：接下来我该看什么
解释：在读者扫描页面的时候跟踪读者的视线。 • 建立流：在页面上通过焦点引导用户。
• 焦点： 眼睛不能地址的地方。
• 视觉流的牵制因素：１. 阅读习惯。
•
２. 用户的页面目的。
案例：焦点和视觉流
案例：焦点和视觉流
如何建立焦点
• 对比：颜色、高度、字体的粗细等。
案例：没有视觉层次
案例：带空白的文本
案例：排版和对齐方式
关于视觉结构层次的小结
左上角优先 我们的语言习惯是，从左到右，从上到下。
：
• 空白： 条理清晰，组的形式来呈现内容。 • 字体对比： 大小粗细颜色等的对比，表达信息的重要程度。 • 前景色和背景色的对比： 颜色对比可以进一步的突出内容。 • 位置、对齐、缩进： 从属关系更清晰，结构明白。 • 图形轮廓： 整体感增强。 • 其他（标题、列表、导航条、动作按钮等）
整合起来：1.视觉层次机构
整合起来：2.视觉流
• 强烈的焦点会首先吸引眼球，然后才是那些次之的。 • 对页面内容的理解会随着用户选择看哪一部分而改变。
整合起来：3.分组合对齐
总结
• 视觉层次结构、视觉流、焦点、分组合对齐，这些都是页 面布局的基本手段。
• 设计师可以通过这些有效的视觉手段，来吸引或分散用户 的注意力，形成视觉引导，支持用户试图去完成它们的目 标和任务。
• 相邻性: 摆在一起的东西，用户就会把他们联系起来。
• 相似性: 两个元素属性向同，比如颜色大小形状方向等。
• 连续性: 有规律的重复，对齐或者小的元素组。 • 封闭性: 闭合的区域，大块的留白。 • 小贴士：层级变多之后，分组的难度会加大，单纯依靠分
住是不能满足需求，分组和对齐同时使用便于表达复杂的 层级关系。
界面设计中的页面元素的布局
博客设计组：非非
界面设计中页面元素的布局
视觉层次 重要程度区分
：
• 视觉流： 接下来做什么？
• 分组和对齐： 谁和谁在一起
视觉层次:重要程度区分
解释：重要程度区分，用户能从页面的布局推导出它的信 息结构。
• 重要的内容应该最突出,不重要的次之。
• 标题、二级内容、注释等看起来就是他们本身，不 为用户带来任何疑问。
如何建立焦点
• 带有指示性的图片：箭头、清晰的轮廓、 表情和动作、汇聚的线条等。
视觉层次结构和视觉流
关于视觉流的小结
• 从上到下，从左到右是默认的视觉流方向。 • 强烈的焦点会首先吸引眼球，然后才是那些次之的。
• 对页面内容的理解会随着用户选择看哪一部分而改变。
分组和对齐：谁和谁一起
• 解释：对于形成清晰的视觉层次结构是很必要的，分组和 对齐意味着页面元素之间互相关联。