交互设计中的扁平化

Transcript

1. 交互设计中的扁平化 CRM杭州解决方案中心UED设计部 王佳玉 UX > 滑 动 来 解 锁
2. 人人都在说扁平化，视觉上的扁平化已然随处可见， 科幻电影中随处可见的扁平化UI，是未来界面的发展趋势…… 为什么需要扁平化？ 需求环境正在变化，以前没有iPad，没有智能手机，只有PC，如果只是电脑环 境需求，扁平化似乎没那么重要。但现在我们有多种智能设备，需要在各个设 备上随时切换。 随着各种智能设备的多样性和普及，交互界面需要变得更适应其变化，显然扁 平的交互界面比其他样式更容易处理。移动互联网向着需要低配置、高效能， 个性化以及优质用户体验的方向发展。我们必需快速响应这个趋势。 然而扁平化不仅仅是界面视觉扁平无立体感，更应该是交互体验的扁平化，信 息架构的扁平化。 接下来，我们来看看能有哪些方法可以做到交互扁平化…… 序 进入交互扁平化
3. 序 结构层次扁平化 平台功能扁平化 表现方式扁平化 用户引导扁平化 交互设计中的扁平化 先从字面意思来理解交互的“扁平化”，与之相对应的应该是“结构层级”，在这里 我理解为交互步骤，以前也一直在强调精简交互步骤，想要用户用最少的步骤就完成 任务，显然这里是要求层级结构的扁平，所以交互步骤和层级结构是相互关联的。 结构层级扁平化 前言 从图中可以看出来，这个是一个树形结构，在树形结构中链接的层数被称为深度（z 轴），最底层页面包含的页面总数被称为链接的广度（x轴）。纵向（y轴）很多情况 下都只有一层，放的多都是一些消息提醒和快捷方式。 结构层次扁平化
4. 结构层级扁平化 前言 来看看PC端的WEB界面（以淘宝为例） 最底层页面就是他的首页，包含的页面综述非常丰富，可以看到从广度来讲覆盖面是非常大的 来看深度，从服饰内衣－到女装－到裙子－到裙子的各种类型 可以看出，web网页更注重深广度的平衡。 • 而移动设备的限制： 屏幕界面小，广度势必已大大减弱，没有足够的空间来展示路径，如果没有清晰的层级关系，这可能就意味着用户很有 可能迷失方向，甚至要进入深层次的信息才能找到他们想要的，这时更应该做的是减少信息的深度 广 度 深 度
5. 结构层级扁平化 并列 这里有最典型的例子就 是 Windows 8，在这之前什 么天气／邮件啊，都得点到 具体的应用里面才能看到， 而windows8在同一个界面中 就能展示出这些信息。 • 将并列的信息显示在同 一个界面中，减少页面 的跳转。
6. 快捷方式 对比步骤： iOS7：底部上滑＝＝＝＝打开WIFI iOS6：点击设置＝＝＝＝选择WIFI＝＝＝＝开启WIFI • 快捷方式使得层级结构减少，让用户不用在一层一层的点到里面去按，提高效率的同时也使结构变的清晰。 结构层级扁平化 在iOS6里面，如果需要设置WIFI，要先 到设置，在到WIFI在选择网络 以iOS7为例，在任意界面只要向上滑动都能从底部呼出一 个快捷菜单 设置WIFI和手电筒等均可以直接从这个菜单里面操作
7. 快捷方式 结构层级扁平化 再以淘宝手机导航为例： 不管你在哪家店铺在看什么宝贝，只要点右上角的“淘”就能出现和主页导航一样的快捷菜单，不用再点 “返回”一层一层的回去看主菜单，保证了随时可以进入主菜单，收缩菜单也解决了手机屏幕区域小的问题
8. 显示关键信息 结构层级扁平化 以格瓦拉买电影票为例，步骤是：选择影片＝＝＝选座购票＝＝＝选择影院 “选择影院”时，除了影院名称，还显示出了影院离你附近的距离，剩余场次，以及票价幅度。这里结合了用户买电影票的场 景考虑，用户既然点了“选座购票”，说明购买欲是很强的，这样直接在页面中显示出关键信息，使得用户不用点到每个影院 去看最关心的信息，也就是剩余场次和价格，能加快购买效率。 • 显示关键信息，减少结构层级，提升用户使用效率和营销成功率
9. 用滑动手势减少点按 结构层级扁平化 来对比下步骤： iOS7：双击home＝＝＝＝滑动删除 iOS6：双击home＝＝＝＝长按应用icon＝＝＝＝＝点击删除 • 用滑动手势，减少用户点按次数，提升用户使用效率 ios7关闭后 台程序，只 需要用手指 轻轻往上一 滑走就关闭 了 再对比ios6， 是长按出现 删除按钮后 再挨个关闭 以iOS关闭后台应用为例，
10. 用滑动手势减少点按 结构层级扁平化 再以删除这个操作为例， iOS应用中，用户已习惯针对某行，向左滑动，即为“删除”操作，则可以省去删除按钮占的空间，并无需删 除-选择-确定等繁琐操作，减少点按次数 • 当然这里要引起注意的是，滑动手势，显然没有点按的提示来的明显，所以滑动手势这类型的操作一定要 设计的自然，否则用户找不到点哪里不知道怎么操作就会产生挫败感而放弃使用。
11. 序 结构层次扁平化 平台功能扁平化 表现方式扁平化 用户引导扁平化 交互设计中的扁平化 • 多平台之间的运用：现在的用户已经习惯了在多场景下运用多平台设备，一 旦用户学会了界面中某个部分的操作，他们很快就能知道如何在其他地方或 其他性能上进行操作。需要保持多平台间的一致性。 多平台间扁平化 前言 & 多设备信息同步 以QQ为例， QQ支持多设备登录后， QQ消息升级为云消息， 与本地消息合并; 支持各个终端，各个版 本QQ的消息记录储存到 云端; 平台功能扁平化
12. Mac QQ在选择发送图片时，可以从iPhone相册中 选择。 再也不需要先将手机中的照片导入电脑追踪再发 送了，直接电脑中可选择iPhone相册中的内容。 QQ多设备上登陆，表现多设备之间交叉交融一致性的功能最有代表 性的是，同一个QQ即可互传文件。 手机QQ可以传文件到我的电脑，电脑QQ可以传文件到我的手机。 再也不需要登陆两个QQ在不同设备上传文件了，多设备上登陆同一 个QQ，即可搞定。 • 所以保证一致性也是扁平化很重要的一点，减少学习成本，提高使用效率。 多平台间扁平化 多设备文件共享
13. 序 结构层次扁平化 平台功能扁平化 表现方式扁平化 用户引导扁平化 交互设计中的扁平化 表现方式扁平化 表现方式扁平化就是让小白用户上手使用无压力，记得某产品经理说过“如 果你的功能不能让用户一眼就看明白，还需要解释的话，那么你这个功能就 做失败了⋯⋯” 做法可以是减少按钮和选项，让使用更简洁。 • 更加直观的表达方式，让用户能更准确的使用和体验，不用再去为“这里 该怎么操作”而苦恼了。 以微信的“摇一摇”为例，功 能名称和图标的直白，催发用 户的本能反映，不需要任何解 释，连小孩都知道，只要拿着 手机晃动就能实现这个功能。 前言 & 表现直白 表现方式扁平化
14. 表现方式扁平化 信息图表化 例如Skyline Weather的设计师在设计这款天气应用时， 希望让天气信息通过高度可视化的方式呈现给用户，信息看上去更像是便于识别的图片，而不是人们必须投入 注意力去阅读的文本。 最终，APP解决了一些市面上天气APP存 在的问题：  聚焦在随时间变化的天气趋势上  每个时间点上都有图标符号来表示时 间天气状态  天气符号在纵向上的位置变化代表温 度的升降，天气变化趋势一目了然  点击任何一个时间段都可以查看更多 详情 • 文本 VS 图片：阅读文本时，头脑还需要将文字的含义拼合起来从而消化信息，速率略慢，但能够帮助用户了解较 为复杂的信息；而图形元素则可以让用户立刻对其大致概念有所了解，在最短时间内获取最有效的信息，但对信息 取舍要求比较高。
15. 表现方式扁平化 信息图表化 当然，如果你需要，仍可以挖掘出更多的天气信息，只需点击一下屏幕便可以。为了达到“快速”的设计目标， 我们必须隐藏或是舍弃一些数据，以降低信息的密集度。 • 信息图表化的要求是聚焦目标，取舍有道。要记住：你没法取悦所有人！ 设计在于权衡——本质上讲，设计在于识别你的目标用户是谁，他们遇到了哪些问题，他们需要怎样的解决方案。 目标用户群体越小，设计的针对性就越强，但这通常也意味着某些用户的排斥。 世上没有完美的设计，因为你最终能做的就是在各种关系之间取得平衡。在适当的秩序下，增加任何一个元素都 会打破平衡。 – 保罗·兰德
16. 序 结构层次扁平化 平台功能扁平化 表现方式扁平化 用户引导扁平化 交互设计中的扁平化 用户引导扁平化 表达直观 用户引导扁平化 为了激励人们更多地发表评论， 我们可以放弃原有的形式，只 显示最重要的元素：发表评论 的区域。 当用户单击这个区域时，可以 展开相对应的形式。 你可以看到，这不仅减少了杂 乱，还使得评论的形式更加吸 引人。 • 逐步引导用户了解，以减少 直接显示UI组件的内容。当 用户需要时，这些组件才显 示其特性。
17. 用户引导扁平化 自Google Chrome在iOS系统上发布以来，就运用了有关联的隐藏 方法。如作左图所示： 有一个潜在的假设，就是用户会追踪他们强烈关心的内容。一旦 他们停止追踪，说明可能需要改变上下的屏幕，因此，导航控件 这时候出现了。这种技术可以在你关注内容的时候节省屏幕空间。 基本实现的是一旦用户向下拖动屏幕，浏览器chrome和导航控件 就自动地隐藏。当用户再次向上拖动屏幕，控件再次出现。这种 方法既提高了屏幕上下关联的体验（关注重点内容本身），并且 增加了屏幕空间。当然，后者在移动设备上尤其重要。 iOS将这个方式进一步设计。当你到达一个页面的底部时，控件再 次放大。这是一个很好的例子，在界面中动态地将用户的需求结 合起来。 • 使用上下界面的隐藏来增强用户的关注度和节省屏幕的空间。 动态效果
18. 用户引导扁平化 可视性（affordance）源于认知心理学的概念，指的是这个对象的特定特征可以引导浏览者。 在用户界面设计（UI）的来历中，欧盟的网站的可用性术语表(PDF)对“可视性（affordance）”的定义如下： • “可视性（affordance）是用户界面中一个令人满意的属性。使用这样的软件，人们可以采取正确的步骤来完成他们 的目标。” 以iOS6系统锁定为例，解锁滑动键的按钮的凸起，吸 引用户注意，表明用户可以进行操作。而iOS7中删除 了它，显然是因为用户已经习惯了这个功能。 以iOS7中相机为例，在拍摄照片时，白色按钮作为重 要元素清晰展示，最为显眼，使用户能迅速识别出来 哪个是拍照键。 高可视性
19. 感谢聆听