UI界面设计指南课件.pptx

前期 壹 熟悉 业务 需求 理解 风格 定位 用户 消费者？ 业务员？ 管理者？ 特性 表单多？ 图片多？ 基调 严肃？活泼？ 商务？简约？ 贰 优化信息层级 简化交互步骤，使用户以尽量 少的步骤完成任务。 交互 借鉴 根据产品特性，参考已有 的优秀交互方式。 用一个树形结构来理解什 么是信息层级： 链接的层数被称为深度（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模式： 除了顶部展示区外，其他的内 容会显得更平淡。如果增加平 淡区的吸引，可以加入一些大 图标、卡片式的内容组件等， 让内容更有趣。 （人眼焦点捕捉） 1 2 3 5 6 7 1/2 - 导航 3 - LOGO 4 – 重要内容 （产品、办理） 4 5/6 – 次重内容 （推广、收藏） 7 – 登录、 账户操作等 Z模式： 常见于网页内容主要不是文字 的页面。用户首先关注的页头 水平方向上的内容，然后视线 跳到下面，遵循从左到右的浏 览习惯，重复水平扫视页尾的 最底部的内容。 优点：简单 不适合：内容过多的页面 手机布局 垂直节奏 九宫格 放射状 三角形 导航 伍 常见的移动应用导航 选项 卡式 陈列 菜单式 列表式 跳板式 抽屉式 馆式