UI界面设计指南PPT学习课件_第1页
UI界面设计指南PPT学习课件_第2页
UI界面设计指南PPT学习课件_第3页
UI界面设计指南PPT学习课件_第4页
UI界面设计指南PPT学习课件_第5页
已阅读5页,还剩57页未读 继续免费阅读

下载本文档

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

文档简介

,1,前期,壹,熟悉业务,需求理解,风格定位,2,用户消费者?业务员?管理者?,特性表单多?图片多?,基调严肃?活泼?商务?简约?,3,贰优化信息层级简化交互步骤,使用户以尽量少的步骤完成任务。,交互借鉴根据产品特性,参考已有的优秀交互方式。,4,用一个树形结构来理解什么是信息层级:,链接的层数被称为深度(z轴),最底层页面包含的页面总数被称为链接的广度(x轴)。纵向(y轴)很多情况下都只有一层,放的多都是一些消息提醒和快捷方式。,5,广度:,以淘宝为例,最底层页面就是他的首页,包含的页面综述非常丰富,可以看到从广度来讲覆盖面是非常大的。,6,深度:,从鞋包配饰,到女鞋,到单鞋,到单鞋的各种类型。,7,区别,叁,PCWeb端VS.移动/手机端,信息层级结构,操作方式,交互方式,8,信息层级结构,PCWeb端:,更注重深广度的平衡。,手机端:,由于设备限制,广度减弱,信息深度更为明显。但这将成为过去时,随着垂直滚动在移动端的推广,某些APP广度大大提升,深度相对减弱。,9,PC上我们可以用面包屑路径或者各种导航清晰的表现出层级结构,让用户不在复杂的层级机构中迷路。,10,11,而在移动设备上显示区域有限,没有足够的地方用来放这样的路径,更多时候只能用back。,12,减少结构层级、精简交互步骤的方法(移动端),并列,快捷方式,显示关键信息,减少点按,13,并列,将并列的信息显示在同一个界面中,减少页面的跳转。,最典型的例子就是,Win8,在同一个界面中就能展示出天气邮件等应用的信息。,14,Nextday:,Calendar里面分别为按年,月,周,日的展示方式,点击下面的时间线,内容直接在当前页面切换,没有转跳。,15,快捷方式,以ios7为例,在任意界面只要向上滑动都能从底部呼出一个快捷菜单。,在任意界面只要向上滑动都能从底部呼出一个快捷菜单,可以设置wifi和手电筒等。,16,淘宝手机:,不管你在哪家店铺在看什么宝贝,只要点右下角的“淘”就能出现和主页导航一样的快捷菜单,不用backback一层一层的回去。,17,显示关键信息,以豆瓣电影的购票流程为例,在“选择影院”这个界面中除了显示出影院名称,还显示出了“最低价”xx元起,以及余下场次,还有是否可以购票这些关键信息。这使用户在选择影院的同时也能看到最低价,不用挨个影院点进去看,加快购买效率。,18,减少点按,ios7关闭后台程序,只需要用手指轻轻往上一滑走就关闭了。,19,操作方式PCWeb端:靠鼠标指点,可进行精确、复杂的操作。,手机端:,尺寸,靠手指触屏,精确度较差的手势操作。善用区域,20,若点击目标尺寸过小,要达到精确触控,用户需要从指心操作变为指尖操作。使用指心操作通常会整个覆盖操作目标,让用户难以接收视觉反馈,无法知晓操作是否有效。而不得不用指尖进行操作时,又出现了一个新问题:这种操作方式非常慢,且吃力。,尺寸小,内容常挤在一起,用户容易触碰附近目标,导致误操作。手指太大,目标尺寸太小,一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置,就会导致错误的操作。食指容易出错,常用的拇指就更容易出错。,小的点击目标会导致大问题,21,因此必须将点击目标的尺寸做大一点,利于用户点击。究竟需要多,“大”才合适呢?通过UI设计规范来制约。,22,Hard区:,常用,但不希望太容易触到(误触会带来麻烦)的目标,一般把编辑按钮放在右上角,即明显,又能避免因为误碰而导致界面突然改变。,23,交互方式,(例:选择日期),PCWeb端:鼠标指点,可在视觉不适的情况下,操作仍然相对合适。手机端:手指触屏,当视觉不适时,操作基本也不适了。,24,(选项少的情况),25,(选项多的情况),26,(确认删除),27,(勾选),28,布局排版,肆,我们的眼睛怎么看,决定了如何规划屏幕空间,29,两种最常见的网页布局模式,F模式:,除了顶部展示区外,其他的内容会显得更平淡。如果增加平淡区的吸引,可以加入一些大图标、卡片式的内容组件等,让内容更有趣。,(人眼焦点捕捉),30,1,2,3,5,6,7,1/2-导航3-LOGO,4重要内容(产品、办理),45/6次重内容(推广、收藏),7登录、账户操作等,31,Z模式:,常见于网页内容主要不是文字的页面。用户首先关注的页头水平方向上的内容,然后视线跳到下面,遵循从左到右的浏览习惯,重复水平扫视页尾的最底部的内容。,优点:简单,不适合:内容过多的页面,32,33,34,手机布局,垂直节奏,35,九宫格,36,放射状,37,三角形,38,导航,伍,常见的移动应用导航,选项卡式,陈列菜单式列表式跳板式抽屉式馆式,39,选项卡式,40,菜单式,41,列表式,42,跳板式(快速启动板-Launchpad),43,抽屉式,44,陈列馆式,通过在平面上显示各个内容项来实现导航,主要用来显,示一些文章、菜谱、照片、产品等,可以布局成轮盘、网,格或用幻灯片演示。,45,视觉,陆几条实用的配色原则,聊聊图标,46,配色原则(一),你的配色方案永远不应该比它呈现的内容的更加“响亮”。,47,配色原则(二),尽量选择简单的灰色作为你网站/APP的基调。,文字最好避免使用墨黑色,深灰色一般更容易阅读。参考颜色范围:333333到666666。,对于背景色,全白色(#FFFFFFF)是可以搭配任何文本的最安全的颜色。如果你想选用其他的背景颜色,建议采用#FFFFFF到#CCCCCC,48,配色原则(三),只选择一种颜色突出显示。,49,配色原则(四),使用安全色降低色彩纯度。,50,配色原则(五),如果产品特性需要鲜艳的配色,一定不要出现超过三种以上的大色块,并保持他们基调一致、和谐。,51,52,图标用于导航的图标有两种状态:轮廓及填充。使用轮廓的好处是不分散注意力。如果对图标进行填充,就会转移人的注意力。填充图标常表示,为当前页

温馨提示

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

评论

0/150

提交评论