APP界面设计元素与页面布局

手段。
页面布局——视觉流
2、视觉流
如何引导用户的视线，即视觉流。视觉 流的作用是引导用户接下来我要看什么。 一般可通过在页面上建立焦点吸引用户 的视线。焦点可通过其本身的大小、高 度、位置、字体粗细、色彩、变异、图 形或线条引导、图标状态等形式构建。
页面布局——分组和对齐
3、分组和对齐
分组和对齐的用意在于谁和谁在一起，体 现页面之间元素的关联或区别。分组和对 齐在一定程度上可以引导视觉流。可运用 格式塔原理中的相似、同构、接近、连续、 闭锁原理进行布局，常用的方式有列表、 九宫格、线框、色块划分等。
对现有公交app界面中涉及的所有用户操作
行为进行统计和分类，对其进行权重分析。
再分析完成每个目标所需要的操作时间和 步骤数，评价出最优化的布局方式。
页面布局——视觉层次结构
按信息认知划分
在一个操作界面上，会同时分布很 多信息。虽然每个信息的重要程度
都不同，但每一个信息又不可缺，
这就需要在同一界面上进行重要度 区分。在页面布局上，可通过信息 模块的位置、大小、色彩或状态等
界面设计元素＆页面布局
界面设计元素
常用的界面世界元素有：图像、图标、文本、数字、符号、表格、动画、视频等。
页面布局
1、视觉层次结构
要确定视觉层次结构（即重要程度区 分），首先要明确app的用途及主要服
务对象。是内容为王还是娱乐为主，或
者是功能为王。公交app设计的初衷是 为使用者提供最快或者最便捷的公交讯 息，强调功能的重要性。
页面布局——视觉层次结构
Байду номын сангаас
按操作行为区分
用户使用公交app的目的是获取相关公 交班次和位置信息等，同时伴随其他
的辅助功能如（拼车、天气、附近设
施等）。按操作行为的发生频率可对 其操作行为做一个排列。相应的功能 可通过主标题分布、二级标题、二级 内容、注释等形式排布。
页面布局——视觉层次结构
按操作行为区分
形式对其重要度进行区分。
页面布局——视觉层次结构
按信息认知划分
对现有公交app界面中在一个界面中各类信
息的排布和标重方式做一个对比。从用户
的认知模型角度分析，确定哪种排布和标 重方式最优。
页面布局——视觉层次结构
视觉层次结构小结
在进行页面布局时，要谨记用户的认 知心理和阅读习惯（从上到下，从左 到右），以及功能权重、信息认知容 量。将设计美学中的元素如留白、图 底关系、平衡、转换、视觉引导等视 觉原理合理地运用起来，平衡用户的 认知能力，优化信息组织形式及交互