[Material Playground] Flamingo

不知道你是否还记得第一届 Material Design Awards 的各位获奖者们? 这些应用在今天看来依然是非常优秀的应用, 如果还没用过的话请尽量试用一番. 今天要介绍的这款应用, 就是来自于第一届 Material Design Award 得主, Weather Timeline 的开发者 Sam Ruston 的一款新应用 —— Flamingo.

Material Playground

Flamingo 是一款第三方 Twitter 客户端. 市面上已经有一些不错的 Twitter 客户端了, 比如 Twidere, Falcon Pro, Carbon 等等, 而在这里特别推荐 Flamingo 的理由是什么呢?

Flamingo 1

Flamingo 的一大特色就是提供了多而不杂, 基于 Material Design 的主题定制功能. 这个主题定制可不是那种换个颜色意思意思的主题定制, 而是如上图一般, 可以改变整个应用的导航布局的主题定制. 用户可以自行选择顶级导航的数量, 位置, 是否固定, 图标 / 文字的呈现与否, 等等. 当然, 颜色的定制也是无比详尽, 让人不由得想起了另一款 Twitter 客户端 Tweedle.

Flamingo 2

作为一款 Twitter 客户端, Flamingo 提供了基本所有的基础功能, 还做了一些好玩的附加功能, 比如说在发推的时候可以直接从 Giphy 搜索 GIF 图片. 另外, Flamingo 还提供了长按预览图片和用户的操作. 实际使用时非常便利.

Screenshot_20160606-122447_framed

很多人都非常喜欢 Twitter 客户端在点下桃心时的动画, Sam 把这个动画也搬上了 Flamingo. 不仅桃心有动画, 转推时也有相同的动画, 让使用时的愉悦感再次增加不少.

Flamingo 3

查看用户个人资料时的详情页, 会根据用户的头像颜色改变主色调, 算是 palette library 比较常见的运用了. 设置里的选项在丰富的同时不杂乱, 大部分都可以让人一眼就明白是干什么用的. 比较可惜的是用户不能在更改配色 / 样式时实时预览, 这对于那些对部件名称不甚熟悉的用户而言并不友好. 不过考虑到会用到高级的定制功能的用户想必都不是对这些名词一无所知的人, 而真对此一无所知的用户也可以愉快地在默认主题里找到自己心仪的一款, 这个瑕疵就显得不是那么严重了.

Screenshot_20160606-153806

Flamingo 提供了十二款不同的默认配色, 可以满足绝大多数用户的需求. 而如果你在 Flamingo 登录了多个 Twitter 账户, 你还可以选择为他们单独设置不同的主题.

Flamingo 当然也提供了更详尽的更改配色功能, 不过 Sam 在这方面做了一个明智的选择: 他将可供选择的颜色限定在了比较小的范围内, 而不是像很多其他提供主题定制的应用一样, 干脆丢一个 RGB/HSV 选择器给用户. 这么一来, 用户既不会在面对大量颜色选择时不知所措, 也免去了对由于用户审美不过关造成的可怕结果带来的担忧. 不过话虽如此, 用户还是可以在如此限定的选择范围内制造出一些瞎眼的组合. 不过至于这个话题, 那就不是本篇文章该讨论的范围了.

bluetooth-keyboard-BKB50-black-Flamingo

虽然如果你在平板上访问 Play Store 里 Flamingo 的介绍页, 会看到上面写着 Designed for Phones, 但是 —— 嘿, 这可是一款出自 Sam Ruston 之手的应用! 从 Hue 开始, 他就一直很注重平板适配, 所以你看, Flamingo 有着出色的平板适配.

Beta 版

Flamingo 尚在 Beta 开发中, 但是 Sam 并没有采用 Google Play 的 Beta 发布, 而是直接将其公开. 他承诺了会及时更新, 而且在 Twitter 上也非常积极地听取着大家的反馈. 但是由于这款应用尚在开发中, 所以运行起来并不是那么稳定. 大多数用户都或多或少地遇到了一些崩溃. 所以在 Sam 决定摘下 Flamingo 的 beta 帽子前, 并不建议将其作为唯一的 Twitter 客户端使用. 不过, 如果你是一个对设计精良的应用感兴趣的用户, 或是想要学习优秀 Material Design 设计的设计师, 那么这 $0.99 绝对会让你觉得物有所值.

Play Store 连接: Flamingo for Twitter ($0.99)

Material Design 更新: 动效, 增长与用户教育

今天, Material Design 迎来了毫无预兆的一个大更新, 突然地完善了 (本应在两年前就有的) 动效设计讲解与加入了面向中小团队与个人开发者的初体验设计指导.

Motion

Material Motion – Google Design

Screenshot (339)

 

动效设计这个部分经过了一番彻底的改头换面, 增加了不少详细的说明 (看到上面这张图相信不少已经试过制作 Material Design 风格动效的设计师们应该会露出会心的苦笑吧, 现在终于可以不用自己去费精力摸索其中的规律了), 包括动效持续的长度, 加速度的使用, material 的移动, 创建与消除, 等等, 几乎涵盖了 Material Design 动效的全部细节, 还指出了一些常见的错误 (这点非常重要, 有很多设计师 / 开发者凭着来源不明的经验模仿 Material Design 动效, 做出来的东西千奇百怪, 令人不悦, 完全丧失了 Material Design 动效的初衷), 值得对动效感兴趣的开发者和设计师仔细阅读.

Screenshot (343)

 

更新里还包含了对于图标动效和载入动画的一些有趣的建议, 千万不要错过.

Growth & communications

Introduction – Growth & Communication – Google Design

Screenshot (342)

用户教育的部分, 一直以来都为 Android Design/Material Design 所忽视 (虽然 ADiA 有一期专门的节目介绍), 但这次是 Google 第一次为用户教育模块写下详细的介绍. 对于中小团队和个人开发者而言, 初体验设计对于应用的生死存亡而言至关重要, 这次 Google 终于给出了一份指导文档, 还是很有意义的.

Screenshot (340)

初体验设计的模块中, 包括了非常常用而至关重要的空界面设计, 内容定制模块, 功能介绍等等, 都附有详细的设计图.

useredu_er_feasturedisc_design_phone_centered useredu_er_feasturedisc_design_offset

当然, 你也可以按照自己的思考来进行定制, 不过至少 Google 终于给出了一个参考标准.

另外, 这个模块强烈建议配合 Google Primer 服用, 效果倍增.

初体验设计的模块中, 包括了非常常用而至关重要的空界面设计, 内容定制模块, 功能介绍等等, 都附有详细的设计图.

Bottom Navigation —— 如果要用, 请认真用

在 π 日, Google 对 Material Design 进行了大家期盼已久 (说句实话, 这里的 「期盼已久」 换作 「又惧又期待」 会比较合适吧) 的更新, 加入了对 bottom navigation 的明确规范.

 

如果你的应用:

  • 有 3-5 个顶级导航;
  • 需要频繁在顶级导航项之间切换;
  • 希望顶级导航项能够吸引用户的注意力;
  • 只针对手机;

那么, 便可以考虑使用 bottom navigation.

Material Design 的 bottom navigation 与 iOS HIG 规范的 tab bar 理所当然地有共同之处:

  • 就算进入子级界面, bottom navigation 依然显现;
  • 在顶级界面中, 点击 bottom navigation 当前激活的项目会回到当前列表的顶端.

但是在使用时, 不要直接照搬 iOS tab bar, 毕竟两者还有很多区别:

  • 往上卷动时隐藏, 往下卷动时显现;
  • 当前激活的项目文字会变大 (未激活 12sp, 激活 14sp);
  • 触摸会产生 ripple 反馈;
  • Bottom navigation 可以有不同的颜色;
  • 可以选用只有激活项带有文字标签, 未激活项仅显示图标的样式;
  • 避免在平板以及大屏设备上使用, 建议转换为 drawer;
  • 切换不同顶级导航项时, 内容区采用淡入淡出的动画;
  • 切换顶级导航项的时候, 重置当前导航项的状态 (不保留状态 / 历史);
  • 避免与顶部 tabs (对应 iOS 上的 segmented control) 同时出现.

不管你是不是打算在应用里采用 bottom navigation, 都应该看一看这些规范. 同时, 强烈建议在考虑采用 bottom navigation 之前, 先想想你的应用到底适不适合 bottom navigation.

最后是个人感想: 虽然 Google 不断强调 Material Design 是 「一套活的规范, 不是板上钉钉」, 但是就这样推翻坚持多年的传统多少令人无法接受 — 当然, 实际上令人无法接受的是 Google 先违反, 然后再修改规范的这种行为.

有句话我想大家都很熟悉: 「存在即合理.」 这里姑且不讨论这句话的对错, 在 UI/UX 的讨论上, 某种范式的出现必然是为了解决某种具体的问题.

故, 放下心中的成见, 有的时候, 做有些事情, bottom navigation 是更为合适的解决方案. 当然, 如果它对你而言并不是更为合适的解决方案, 那就更无需为此操心了.

同样的, bottom navigation 也不是万灵药, 它有很多不擅长或者不如 tabs/drawer 的地方, 具体可以参看: 如何看待新版 Google Photos 的 bottom tab bar? – NovaDNG 的回答.