APP界面设计元素与页面布局剖析.ppt

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