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