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

界面设计元素&页面布局
界面设计元素
常用的界面世界元素有:图像、图标、文本、数字、符号、表格、动画、视频等。
页面布局
1、视觉层次结构
要确定视觉层次结构(即重要程度区分),首先要明确app的用途及主要服务对象。是内容为王还是娱乐为主,或者是功能为王。公交app设计的初衷是为使用者提供最快或者最便捷的公交讯息,强调功能的重要性。
按操作行为区分
用户使用公交app的目的是获取相关公交班次和位置信息等,同时伴随其他的辅助功能如(拼车、天气、附近设施等)。按操作行为的发生频率可对其操作行为做一个排列。相应的功能可通过主标题分布、二级标题、二级内容、注释等形式排布。
页面布局——视觉层次结构
按操作行为区分
对现有公交app界面中涉及的所有用户操作行为进行统计和分类,对其进行权重分析。再分析完成每个目标所需要的操作时间和步骤数,评价出最优化的布局方式。
页面布局——视觉层次结构
按信息认知划分
在一个操作界面上,会同时分布很多信息。虽然每个信息的重要程度都不同,但每一个信息又不可缺,这就需要在同一界面上进行重要度区分。在页面布局上,可通过信息模块的位置、大小、色彩或状态等形式对其重要度进行区分。
页面布局——视觉层次结构
按信息认知划分
页面布局——视觉层次结构
对现有公交app界面中在一个界面中各类信息的排布和标重方式做一个对比。从用户的认知模型角度分析,确定哪种排布和标重方式最优。
视觉层次结构小结
在进行页面布局时,要谨记用户的认知心理和阅读****惯(从上到下,从左到右),以及功能权重、信息认知容量。将设计美学中的元素如留白、图底关系、平衡、转换、视觉引