APP界面设计元素与面布局课件.ppt_第1页
APP界面设计元素与面布局课件.ppt_第2页
APP界面设计元素与面布局课件.ppt_第3页
APP界面设计元素与面布局课件.ppt_第4页
APP界面设计元素与面布局课件.ppt_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论