UI界面设计指南ppt课件.ppt

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