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

《APP界面设计元素与页面布局.ppt》由会员分享，可在线阅读，更多相关《APP界面设计元素与页面布局.ppt（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、界面设计元素常用的界面世界元素有：图像、图标、文本、数字、符号、表格、动画、视频等。常用的界面世界元素有：图像、图标、文本、数字、符号、表格、动画、视频等。页面布局1、视觉层次结构要确定视觉层次结构（即重要程度区分）要确定视觉层次结构（即重要程度区分），首先要明确，首先要明确appapp的用途及主要服务对的用途及主要服务对象。是内容为王还是娱乐为主，或者是象。是内容为王还是娱乐为主，或者是功能为王。功能为王。公交公交appapp设计的初衷是为使设计的初衷是为使用者提供最快或者最便捷的公交讯息，用者提供最快或者最便捷的公交讯息，强调功能的重要性。强调功能的重要性。按操作行为区分按操作行为区分用户

2、使用公交app的目的是获取相关公交班次和位置信息等，同时伴随其他的辅助功能如（拼车、天气、附近设施等）。按操作行为的发生频率可对按操作行为的发生频率可对其操作行为做一个排列。相应的功能其操作行为做一个排列。相应的功能可通过主标题分布、二级标题、二级可通过主标题分布、二级标题、二级内容、注释等形式排布。内容、注释等形式排布。页面布局视觉层次结构按操作行为区分按操作行为区分对现有公交app界面中涉及的所有用户操作行为进行统计和分类，对其进行权重分析。再分析完成每个目标所需要的操作时间和步骤数，评价出最优化的布局方式。页面布局视觉层次结构按信息认知划分按信息认知划分在一个操作界面上，会同时分布很多信

3、息。虽然每个信息的重要程度都不同，但每一个信息又不可缺，这就需要在同一界面上进行重要度区分。在页面布局上，可通过信息在页面布局上，可通过信息模块的位置、大小、色彩或状态等模块的位置、大小、色彩或状态等形式对其重要度进行区分。形式对其重要度进行区分。页面布局视觉层次结构按信息认知划分按信息认知划分页面布局视觉层次结构对现有公交app界面中在一个界面中各类信息的排布和标重方式做一个对比。从用户的认知模型角度分析，确定哪种排布和标重方式最优。视觉层次结构小结视觉层次结构小结在进行页面布局时，要谨记用户的认知心理和阅读习惯（从上到下，从左到右），以及功能权重、信息认知容量。将设计美学中的元素如留白、图

4、底关系、平衡、转换、视觉引导等视觉原理合理地运用起来，平衡用户的平衡用户的认知能力，优化信息组织形式及交互认知能力，优化信息组织形式及交互手段。手段。页面布局视觉层次结构页面布局视觉流2、视觉流如何引导用户的视线，即视觉流。视觉如何引导用户的视线，即视觉流。视觉流的作用是引导用户接下来我要看什么。流的作用是引导用户接下来我要看什么。一般可通过在页面上建立焦点吸引用户一般可通过在页面上建立焦点吸引用户的视线。焦点可通过其本身的大小、高的视线。焦点可通过其本身的大小、高度、位置、字体粗细、色彩、变异、图度、位置、字体粗细、色彩、变异、图形或线条引导、图标状态等形式构建。形或线条引导、图标状态等形式构建。3、分组和对齐分组和对齐的用意在于谁和谁在一起，体分组和对齐的用意在于谁和谁在一起，体现页面之间元素的关联或区别。分组和对现页面之间元素的关联或区别。分组和对齐在一定程度上可以引导视觉流。可运用齐在一定程度上可以引导视觉流。可运用格式塔原理中的相似、同构、接近、连续、格式塔原理中的相似、同构、接近、连续、闭锁原理进行布局，常用的方式有列表、闭锁原理进行布局，常用的方式有列表、九宫格、线框、色块划分等。九宫格、线框、色块划分等。页面布局分组和对齐