您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
 
     
   
 订阅
  捐助
关于Material Design,做到这四点便足以让用户惊喜
 
来源:产品中国 发布于: 2015-1-30
   次浏览      
 

编者注:本文来自团队协同工具Teambition 投稿,Teambition 已经根据 Material Design 重新设计了旗下所有的 Android 客户端产品。在实践过程中,设计和产品团队总结了一些值得分析的要点,与大家分享。

正确用好新元素

迎接新“抽屉导航”的到来。

是的,就像“抽屉导航”那样,最早被零散使用的交互要素,进入 Android 的设计规范后,会在接下来的时间中被广泛使用,乃至扩散到 iOS 和桌面端。这次同样最具代表性和潜力的两个元素,应该是炙手可热的浮动按钮(FAB,Floating Action Button)和卡片。

浮动按钮

目前 Google 伴随 Lolipop 发布的全线产品都带上了全局浮动的按钮,视觉配色上高调突出,图案简明,主要作用是给最重要的动作加上醒目的入口(比如 Google Calendar 中添加日程,Gmail 中写新邮件,等等)。

“浮动”之说是因为,Material Design 的设计指导这次着重关注了z轴(垂直于我们手机平面的那根轴)的存在。按钮按照 z 轴位置划分,有三种类型,扁平(Flat),抬升(Raised),浮动(Floating)

前两种按钮与界面内容一起运动,一般的按钮用扁平的,需要突出的用抬升样式。浮动按钮在z轴上是最高的,加入下方阴影等元素,悬浮于界面上,不随内容移动。

根据 Teambition 后台使用情况的统计,Teambition 移动端最常见的用途主要有这么几项:

1.响应收件箱中事项进展

2.添加任务并分配

3.查看对应事项安排,当 todo list

Teambition 各产品线原来版本中,只有收件箱得到了首页级的入口,各种内容的添加需要手动点入各个项目的对应层级中去,再从导航条中点击新建,极端案例下需要 4、5 次点击才能完成任务。

自然,Teambition 在移动版上,把这个新增的入口分配给了“添加”功能。我们还额外关注了两处细节:

与环境相容(context aware)的全局添加按钮,比如除了任务、分享、文件、日程四大固定项目之外,在不同的界面下,还会有额外的选项,比如在项目列表界面下会新增“新项目”选项,在具体的任务中,可以选择添加备注,执行人、截止日期等等……

浮动按钮因为相对位置固定,要考虑避免遮挡相关的内容,最下一屏的拉到底时,按钮应该自动隐藏

卡片界面

卡片呈现信息的实践其实一直都有,得到 Material Design 强调后应该很快会迎来一波爆发。从社区讨论看来,直接使用卡片的欲望也是相当强烈的 ,但根据 Material Design 的官方指导的建议,卡片的应用场景和与列表应该要有明确的区分,而不是盲目替换,该用列表视图的场景,还是应该坚持使用列表,以免割裂浏览体验。

节选一些官方指导中比较重要的用卡片的场景:

大量不同数据(文字、图片)的集合,或呈现非常长(超过三行)的文字

有大量交互(比如+1、评论、分享等按钮),比如三个或以上

不同卡片间的内容不需要被对照比较

通常作为一个整体可以像在 Google Now 中那样被滑动移除

反之,单一的(比如图片库),主要供浏览的,没有太多对应动作的内容的罗列,并且设计上不能被滑动移除的信息流,做成列表会更合适,卡片会打断阅读,造成困惑,损害体验。

综上,我们这次还是把项目和任务的罗列用列表视图来呈现。

卡片是一种好的呈现方式,但与其说被鼓励的是卡片,不如说,被鼓励的是卡片所能承载的那种多类型丰富信息的聚合。

最后,一个有意思的例子:微博新改版的过程中使用卡片收到了很多吐槽,其实也是一件很无奈的事情,理论上来说每条微博有转赞评等行为,但如果大部分人的使用行为都只是浏览,则着重动作的卡片就会造成打扰。

相比较而言,Twitter对动作按钮的处理要相对克制一些。

让材质、层叠与动画效果体现信息逻辑

借鉴现实中纸张层叠排列的光影效果,和海报中常见的强烈的颜色反差,新的 Material Design 设计指导想尝试用能更接近用户生活经验的方式来呈现信息的层级结构。

   
次浏览       
 
相关文章

中台产品面面观
如何在互联网产品中建立中台?
什么是产品生命周期管理?
产品设计之前,如何分析业务需求和用户痛点?
 
相关文档

产品经理是怎样炼成的
APP产品规划方法
产品经理培训文档
产品生命周期管理PLM
 
相关课程

产品经理与产品管理
卓越产品经理训练营
产品需求分析与管理
基于用户体验的产品设计
最新活动计划
Node+Vue3.0前端全栈开发 7-5 [特惠]
Spring Cloud微服务架构 7-5[特惠]
SysML和EA系统设计与建模 7-26[特惠]
Python、数据分析与机器学习 8-23[特惠]
嵌入式软件架构设计 8-22[线上]
Linux内核编程及设备驱动 7-25[北京]

正视研发管理才是高水平竞争
需求是如何变成产品原型的
产品经理能力模型解说—把控
产品经理的正确定位
谁是合格的产品经理?
产品管理与产品营销的区别
更多...   

统一过程及应用
敏捷过程实践
基于XP/RUP的迭代开发
软件开发过程指南
SCRUM过程实践
敏捷测试-简单而可行

某博彩企业 产品经理与产品管理
面向产品的需求分析与管理
中国民航 产品经理关键技能
深圳 产品经理与产品管理
某通信企业 基于互联网的产品创新
某知名互联网企业 产品管理
世纪高通 创新创造突破性产品
更多...