关于Material Design,做到这四点便足以让用户惊喜.pdf

关于Mat erial Design ，做到这四点便足以让用户惊喜 导语 Mat erial Design 主张将现实世界中的交互体验 ，应用到界面 计中来 ，以求用户的经验能够迁移 ， 并更快习惯新系统。Teambit io n 已经根据 Mat erial Design 重新 计了旗下所有的 A ndro id 客户端 产品。在实践过程中 ， 计和产品团队总结了一些值得分析的要点 ，与大家分享。 正确用好新元素 迎接新“抽屉导航”的到来。 是的 ，就像“抽屉导航”那样 ，最早被零散使用的交互要素 ，进入A ndro id的 计规范后 ，会在接下来 的时间中被广泛使用 ，乃至扩散到iO S和桌面端。这次同样最具代表性和潜力的两个元素 ，应该是 炙手可热的浮动按钮 （FA B ，Float ing A ct io n But t o n ）和卡片。 浮动按钮 目前 Google 伴随 Lo lipo p 发布的全线产品都带上了全局浮动的按钮 ，视觉配色上高调突出 ，图案 简明 ，主要作用是给最重要的动作加上醒目的入口 （比如Google Calendar中添加日程 ，Gmail中写 新邮件 ，等等 ）。 “浮动”之说是因为 ，Mat erial Design的 计指导这次着重关注了z轴 （垂直于我们手机平面的那根轴 ）的存在。按钮按照z轴位置划分 ，有三种类型 ，扁平 （Flat ），抬升 （ aised ），浮 动 （Float ing ）。 前两种按钮与界面内容一起运动 ，一般的按钮用扁平的 ，需要突出的用抬升样式。浮动按钮在z轴上 是最高的 ，加入下方阴影等元素 ，悬浮于界面上 ，不随内容移动。 根据Teambit io n后台使用情况的统计 ，Teambit io n移动端最常见的用途主要有这么几项 ： 1. 响应收件箱中事项进展 2. 添加任务并分配 3. 查看对应事项安排 ，当t odo list 。 Teambit io n各产品线原来版本中 ，只有收件箱得到了首页级的入口 ，各种内容的添加需要手动点入 各个项目的对应层级中去 ，再从导航条中点击新建 ，极端案例下需要4 、5次点击才能完成任务。 自然 ，Teambit io n在移动版上 ，把这个新增的入口分配给了“添加”功能。我们还额外关注了两处 细节 ： 1. 与环境相容 （co nt ext aware ）的全局添加按钮 ，比如除了任务、分享、文件、日程四大固定项目 之外 ，在不同的界面下 ，还会有额外的选项 ，比如在项目列表界面下会新增“新项目”选项 ，在具体的 任务中 ，可以选择添加备注 ，执行人、截止日期等等…… 2. 浮动按钮因为相对位置固定 ，要考虑避免遮挡相关的内容 ，最下一屏的拉到底时 ，按钮应该自动 隐藏。 卡片 面 卡片呈现信息的实践其实一直都有 ，得到Mat erial Design 强调后应该很快会迎来一波爆发。从社区 讨论看来 ，直接使用卡片的欲望也是相当强烈的 ，但根据Mat erial Design的官方指导的建议 ，卡片 的应用场景和与列表应该要有明确的区分 ，而不是盲目替换 ，该用列表视图的场景 ，还是应该坚持 使用列表 ，以免割裂浏览体验。 节选一些官方指导中比较重要的用卡片的场景 ： 1. 大量不同数据 （文字、图片 ）的集合 ，或呈现非常长 （超过三行 ）的文字 2. 有大量交互 （比如+ 1、评论、分享等按钮 ），比如三个或以上 3. 不同卡片间的内容不需要被对照比较 4 . 通常作为一个整体可以像在Google Now 中那样被滑动移除 反之 ，单一的 （比如图片库 ），主要供浏览的 ，没有太多对应动作的内容的罗列 ，并且 计上不能 被滑动移除的信息流 ，做成列表会更合适 ，卡片会打断阅读 ，造成困惑 ，损害体验。 综上 ，我们这次还是把项目和任务的罗列用列表视图来呈现。 卡片是一种好的呈现方式 ，但与其说被鼓励的是卡片 ，不如说 ，被鼓励的是卡片所能承载的那种多 类型丰富信息的聚合。 最后 ，一个有意思的例子 ：微博新改版的过程中使用卡片收到了很多吐槽 ，其实也是一件很无奈的 事情 ，理论上来说每条微博有转赞评等行为 ，但如果大部分人的使用行为都只是浏览 ，则着重动作 的卡片就会造成打扰。 相比较而言 ，Tw it t er对动作按钮的处理要相对克制一些。 让材质、层叠与动画效果体现信息逻辑 借鉴现实中纸张层叠排列的光影效果 ，和海报中常见的强烈的颜色反差 ，新的 Mat erial Design 计 指导想尝试