被 「阉割」 的分享与应用间的墙

经常使用国内应用的读者应该不会对这个题目感到陌生 —— 很多国内大公司的应用都自己 「实现」 了一套 「独特」 的分享方式, 里面只有自己家的应用, 想分享给其他应用要么得费点儿心思找入口,  要么根本就不允许.

在我看来引起这种行为有四个原因: 流量内引构建闭环, 第三方玩家破坏规则, 国内用户习惯, 继承自 iOS 上的恶习.

首先是构建闭环. 这点很好理解, 假设我是腾讯新闻的 PM, 我当然希望用户在我的客户端看完新闻之后, 分享给朋友圈, 腾讯微博, QQ… 这样, 用户的分享行为就会带来其他腾讯应用的流量. 同理网易新闻等一些大厂旗下的应用也很容易朝着这条路走去, build walls not bridges. 题主例子中网易新闻客户端就把自家的易信放在了分享的最前面, 很明显是有引导流量的用意.

其次是第三方玩家破坏规则. 因为开放的分享接口, 所以你可以经常看到很多应用的分享按钮会带出长长的一串应用列表, 很多用户不一定会用到的应用也会出现, 这对用户会产生一定的心理压力. 更糟糕的是, 由于列表是默认按照拼音顺序排列的, 所以某些没节操没下限的国内应用在命名的时候玩往名字前面加空格或者奇怪的符号, 在后面加 “(推荐设为默认)” 这样的小手段来”引导”用户, 这不是什么好现象.

第三点和第二点比较难以分开, 国内的社交网络基本由几大巨头垄断, 而国内用户一般使用的社交网络也就被限制在比较大的那几个上, 像微博微信人人, 只要把这些覆盖到, 基本上就可以满足绝大多数用户的分享需求了, 同时也省得用户每次面对一大串应用名字不知所措, 何乐而不为?

最后是继承自 iOS 的恶习. 我们知道 iOS 一直没有一个完善的应用间通讯机制, 跨应用分享内容需要靠开发者自己搭建通道来实现 (说实话当我第一次看到 Reeder 的分享列表的时候还是震惊了), 所以 iOS 上往往只有几个分享选项. 而有些厂家则直接在 Android 上全盘照搬了这一点, 让 Android 应用也显示和 iOS 版本一样的分享选项, 理由五花八门, 常见的有”提供一致的跨平台体验”云云, 这里就不赘述了.

就我看来, 我最推荐的分享方式是像 Pocket 和 Timely 一样的:

3b0726be4bf7b45b8376c9d16ffc0568_r

希望国内这些公司还是早日抛弃成见, 不要再往 Android 里添加高墙了.

 

「数据? 那是什么? 能吃么? 好吃么?」

在近一年前, 腾讯终于扭扭捏捏地把微信改成了靠近 Android Design 的样子. 虽然外表有那么点儿 Android Design 的味道, 但设计却十分糟烂, 被无数用户吐槽. 结果到了八月, 微信又把 UI 改回了 iOS 风格.

我 100% 不认为腾讯因为 5.2 被用户唾骂而放弃 Android Design 是什么明智的决定, 与其因为碰了一次钉子就认为 “Android Design 不符合用户的使用习惯”, 不如好好研究 Android Design, 在遵循规范的前提下把微信做得更好.

很多人拿后台数据说话, 我就解释一下数据好了. 数据不是真理, 数据也可以被轻易的操作. 就拿这次微信来做例子:

对比对象一方是使用了很久 (从 Android 2.X 时代起微信就一直是 iOS 风格 UI), 成熟 (就算是在 iOS 上微信的 UI 也很难说是优秀, 所以这里用成熟) 且用户习惯 (如前述, 微信老用户都习惯了这套) 的 iOS-Like UI;

另一方是新推送的 (新年前才推送更新), 设计糟烂 (和 Android Design 貌合神离, 只是套了个皮, 完全没能体现对 Android Design 理解且存在大量违背 Android Design 设计之处) 且没有任何引导(一个全新设计拿到用户手中居然没有给任何的事先说明和引导教程) 的 Android Deisgn;

对比的结果可以说是显而易见的.

若 Android Design 一方同样是使用了很久, 设计经过深思熟虑且尽可能完全符合 Android Design (在这里姑且不谈超越) 且做出了合适的引导与教程, 你觉得数据会是什么样子的呢?

另外, 关于 “用户不知道也不会在意 Android Design” 这样的论点: 用户完全没必要知道什么规范, 用户当然也喜欢用脚投票, 而这并不妨碍开发方在这个规范的框架中做出优秀趁手的产品. 在微信这个事件上, “用户用脚投票选择 iOS UI” 这个现象只能说明 “微信的 Android Design 做得很烂“, 而不能说明 “Android Design 不适合微信”.

产品经理也当然没必要满嘴 Android Design 或者 Action Overflow, 但是如果他们不知道如何用好 Android Design 或者 Action Overflow, 就是他们的失职.

Overview, Android 中新的 Recents 界面

在 Android 5.0 中, 原先的 「最近任务」(Recents) 界面被 「概览」(Overview) 界面替换了.

2014-12-12 03.33.29_framed

在实际上手 5.0 之前, 我也一度对这个界面的实际效果产生怀疑, 但是实际上手之后发现自己多虑了.

首先, 新的多任务界面在 Nexus 4 上可以最多显示清楚五个应用 (第五个应用的标题会被略遮住一些, 第六个往后会露出一条缝, 只能看出颜色), 在 4.X 上最多能显示四个. 另外, 卡片的 App Bar 可以跟随应用改变颜色 (比如 Gmail 卡就是红色的 Bar, Keep 就是黄色, Messenger 就是蓝色, 等等), 也增加了应用的识别度. 而 4.X Recents 界面里的缩略图识别度其实很低, 的大部分时候还是要靠图标和标题 —— 而实际上在 5.0 中, 标题和图标的大小并没有缩小.

而在 4.X 上, 还有一个很严重的问题就是多任务界面与其他屏幕的转换非常诡异. 如果你仔细观察过 Android 4.X 从某个应用进入 Recents 的动画, 你会发现这个动画是不能接应的 (在屏幕缩小的过程中, 内容会扭曲, 然后变成 Recents 里面的小块, 有兴趣的同学可以自己把动画持续时间调成 X10 看看). 而在 5.0 中, 进出 Overview 界面的动画非常平顺 (不会发生扭曲, 而是直接缩放 + 展开), 同时也符合系统自己的隐喻 (5.0 中, 打开应用的动画不再是放大, 而是一张卡片从屏幕底部飞入, 从主屏进入 Overview 界面也是一堆卡片从屏幕底部飞入), 也就是说, 在 4.X 里, Recents 是一个专门的层级, 位于桌面与应用之间, 而在 5.0 中, 桌面与 Overview 合为一体 (Google 甚至把 Google Search Box 也放进了 Overview 界面), 是系统层级方面的调整. 如果这时再配上 4.X 的 Recents, 就打乱了这层级关系.

而且, 如果你在 5.0 的 Overview 界面稍作停留, 每张卡片的右上角都会出现一个小 X, 这样便可以让那些 (到现在都) 还不知道划去卡片可以关闭应用的用户关闭应用. 这个操作其实和 Chrome 是保持一致的. 同时在 5.0 中, Document UI 允许一个应用同时显示多个界面在 Overview 中 (如 Chrome 的多个标签页), 在卡片下他们会靠得更近以区分于其他应用, 而如果是 4.X 的 Recents 的话则不能体现出这一点.

还有一个很有意思的地方就是, 如果在 4.X 上, 当有超过 3 个应用被打开时, 多任务界面中想点击最上面的那个应用几乎是不可能的, 而在 5.0 中, 卡片的存在使得整个多任务列表可以被拉到屏幕 2/3 高度, 最上面的一张卡片可以触及的范围甚至达到了屏幕的下半部分, 可以直接单手触到, 非常便利. 而楼上其他同学也提到了, 要滑动同样数量应用的距离, 5.0 上是比 4.X 上要短的.

而如果你仔细观察开头给出的图片, 你会发现一些细节. 首先, 新的 Chrome 和 Chrome Beta 都支持通过读取网页的某个 HTML 标签来改变 Overview 界面里 App Bar 的颜色. 这对于增加网页/Web App 的辨识度而言产生了极大的帮助.

其次, 如果你细心的话, 会注意到知乎 Alpha 和 Google Wallet 在 Overview 里显示的图标和他们的应用图标不一样. 这就是 Overview 的一个新特性, 我们可以自定义显示在 Overview 里的图标. 我去掉了此处知乎图标的底座, 这样能够让知乎在 Overview 里看起来更和谐.

第三是没有在上图中体现的一个新特性. 只要我们愿意, 我们可以让知乎在 Overview 中显示不同的 Title —— 比如说, 当你在阅读答案时, 进入 Overview 界面, 知乎显示的标题就是 「回答」, 如果你在某个人的个人主页, 那么在 Overview 里知乎的标题就是这个人的名字. 也就是说, 当 3.0 版 (或者以后其他版本) 里知乎支持多帐号之后, 你就可以在 Overview 里看到你的两个账号分别以两张卡片呈现, 知乎图标变成你的头像, 知乎后面是你的帐号名字~

这些新特性如果好好使用的话, 对于提升一个应用的易用性也好辨识度也好, 都是有极大意义的.

「质感」 的 「厚度」

如果你有看过 Material Design, 那也许会对这个描述有印象:

Material has varying x & y dimensions (measured in dps) and a uniform thickness (1dp). Materialnever has a thickness of 0.

那么, 这个 idp thickness 到底是什么意思呢?

这里的 1dp thick 并不是一个实际的数字, 它有两个含义: Material 有固定的厚度, Material 的厚度是一个网格中允许存在的最小值.

什么意思呢?

在 Holo (或者说 Android Design) 时代, Google 就已经强调了阴影和高光的使用, 但是, Holo 中的阴影和高光并不完全是高度变化的产物, 相当一部分的阴影和高光是由控件本身的厚度产生的 (比如 Action Bar 下方的阴影).

7b2cf10ef15a2ce208c204ad64b0ec3e_r

而 Material Design 里, 厚度这个属性被去除了. 也就是说, 同样是 Action Bar 和 App Bar 产生的投影, 在 Android Design 中, 投影是因为 Action Bar 有厚度 (厚度是多少我们不知道), 而在 Material Design 中, App Bar 的投影却是由于 App Bar 的高度高于下面的内容而产生的. 同样的, 其他的 Material 元素也和 App Bar 一样会产生投影, 而这些投影并不是由厚度产生的, 而是由高度差产生的. Google 规定了 Material 固有的厚度, 也就是问题描述中的 1dp thick.

Material 有固定的厚度, 然后呢? 实际上, Material 的厚度应该是一个虚数. 你可以把它想象成一张无限薄却不透明的材料. 但是 Google 显然不可能用这种暧昧的描述. 而在 Material Design 中, 基本不存在 “0.5dp” 这样的数值, Material Design 的网格也是以 8dp 为单位存在, Google 同样不能采用 “0.1dp thick” 这样的表述. 但是 Material 必须有厚度. 这个时候, 拿一个最小整数单位来提示 “这个东西有厚度”, 就只能选择 1dp 了.

对于 Google 在 iOS 上采用 Material Design 这种事情, 我还是挺欢迎的

自从 Material Design 发布之后, Google 就陆陆续续在 iOS 上把几个重要的自家应用的风格改成了 Material Design. 而在此之前, Google 的几个 iOS 应用基本上都是遵循苹果的 Human Interface Guideline 来制作的.

2014-11-07 18.34.12

完全 Material Design 的 Inbox

Google 当初在订制 Material Design Guideline 的时候, 就已经把跨 iOS 平台纳入目标了. 对比 Android Design 你会发现 Material Design 在很多地方都靠近了 iOS HIG (当然, 「违背」 的地方也非常多). 如果在 iOS 上运行一个 Android Design 风格的应用, 会让用户觉得非常诡异, 就像在 Android 原生系统上运行一个 iOS 风格的应用一样. 而制作精良 (在我看来 Google News & Weather 就是随便应付的感觉) 的 Material Design 应用运行在 iOS 上, 给人造成的不适感却会小很多.

写到上面这句话的时候我不由得想跑个题, 说说 「搬运设计风格」 这事儿. 为什么我对于 Google 把 Material Design 搬运到 iOS 上持宽容态度, 而对国内这些把 iOS 风格搬运到 Android 上的公司就恨不得除之而后快? 从文字描述上看起来很接近的两件事其实在本质上截然相反. 对于在 iOS 上 「不遵循规范」 设计的宽容很大一部分原因是优秀的 iOS 应用即使没有完全遵循 HIG 也不会差得太远, 或者说完全从另一个平台搬运 UI —— 当然也不是完全没有应用搬运其他平台的 UI, 但是即使完全搬运其他平台 UI, 能够被接受的几乎都在 iOS 上做得甚至比被搬运平台的应用更优秀 (之前 @冬虫夏草卡洛斯 说过: 最优秀的 Metro App 都在 iOS 上.说的就是这个事儿, 恐怕不久之后大家会发现, 最优秀的 Material Design 应用都在 iOS 上也说不定呢 XD). 而很多被容忍/接受的 「违规行为」 都是正向的 「超越规范」, 而不是突破下限. 反观 Android 上那些被人嫌弃的应用, 它们最大的问题真的只是 「把 iOS 风格搬运到 Android 上」 么?

话虽如此, 现在这几个 Google 应用大多都没有用上 iOS 系统级滑动返回, 而是用的左上角返回或者上下拉返回这些非标准的操作, 对于 iOS 用户来说其实挺不友好的. 而 News & Weather 给人以很强的粗制滥造感, 以及充满 Google 风格的各式各样的小问题, 那又是另外一说了.

做得好, 自然大家喜欢, 做得不好, 大家自然就骂了.

NovaDNG 2014 年度应用

又到了一年一度写年终总结的时候了… 这一年因为参加了工作的缘故, 锋客这边文章的更新频率大幅下降了, 所以这几天我会搬运一些知乎上的回答过来.

然后就是这篇文章的正题, Best of 2014!按照时间排序~

vivino 2

发布于一月份的 Vivino 是一款酒友应用, 能够识别酒标, 在线评酒和为你发现身边的酒庄/酒吧

2014-12-11 06.04.32_framed

发布于二月份的 Muzei 是一款动态壁纸, 在每天推送一张世界名画做壁纸之余又添加了模糊效果不至影响主屏使用, 藉由开放 API 的便利又有着数百款插件可供选择

2014-02-22 01.09.59_framed

同样发布于二月份的 Type Machine 是一款系统应用, 能够像时光机一般拯救因为意外丢失的文字

2014-03-21 00.37.29_framed

发布于三月份的 Link Bubble 是一款浏览器, 能够最大限度地利用等待载入的时间

(没有图)

同样发布于三月份的 Pixl Preview 是一款设计工具, 它能让设计师直接在 Android 手机上预览 Photoshop 上的设计稿

Mode

发布于四月份的 Google Camera 是一款相机, 能够拍摄球形全景与后期模糊照片, 界面极端简洁

2014-04-28 07.07.34_framed 2014-04-28 07.11.42_framed

同样发布于四月份的 Scene 和 CloudMagic 分别是一款操作新颖的图片浏览器与一款集成了非常多有趣功能的邮件客户端

2014-07-15 13.36.44_framed

发布于七月份的 Journey 是一款设计精良的日记应用, 在遵循了 Material Design 的同时提供了 Markdown 支持, 并且有 Web 端与 Chrome App

2014-12-26 04.55.46_framed

同样发布于七月份的 Unclouded 是一款设计精美的云盘管理器, 可以方便地查看与管理复数账号的 Google Drive, Dropbox, Box 与 OneDrive.

WT 03

发布于八月份的 Weather Timeline 是一款天气应用, 精致的动画与有趣的 「天气时光机」 功能带来了很多惊喜

2014-12-12 05.03.48_framed

发布于十二月的 Action Launcher 3 是一款桌面应用, 接近原生 Google Now Launcher 的外观与趁手的 Cover, Shutter 快捷操作让桌面的效率倍增

以上就是 NovaDNG 的 2014 年 Android App 精选集~

Android UI 设计工具 (Photoshop, Android 5.0, Nexus 4)

Material Design UI Toolkit for Nexus 4 版本 0.1 发布.

大概在十个月前, 我踏着 +Taylor Ling 走过的道路, 将他制作的 Android UI Design Kit 4.4 移植给 Nexus 4 使用. 一晃将近一年过去, Android 5.0 发布, Nexus 6 开始流行. 显然有很多人认为 Nexus 4 已经是落后的, 被遗忘的设备了.

但是 Nexus 4 作为我最喜欢的 Nexus 设备, 我显然希望 Nexus 4 在手中能够继续焕发活力, 更何况 Google 也依然在给 Nexus 4 推送最新的 Android. 于是早些时候我许下了诺言, 答应不论如何一定会把这套工具更新到 Android 5.0.

等到 Material Design 终于发布正式版的时候, 就到了我兑现这个诺言的时候了. 十个月前我还可以直接从 Taylor 的 Nexus 5 Toolkit 里搬运控件到 Nexus 4 上, 但是 Taylor 还没有做 5.0 的 Toolkit. 所以这个版本里所有的控件都是我自己画的.

于是就有了这么一套设计工具, 给和我一样怀旧的人.

Nexus 4 Toolkit Light Notification Center_framed Nexus 4 Toolkit Light Drawer_framed

Nexus 4 Toolkit Light Menu_framed Nexus 4 Toolkit Light Search_framed

Nexus 4 Toolkit Light Picker_framed about_framed

作为 0.1 版本自然是完成度很低, 目前只做了白色主题, 还缺失了很多在 Material Design 文档中尚未明确的控件. 有兴趣的同学就下载来用用吧. 欢迎补全.

下载地址: 度盘, Google Drive

Google 大概是真的打算放弃 Android 平板了

本来这篇文章的目的是打算好好黑一下 Nexus 9 的, 毕竟手上这台 Nexus 9 的黑点实在是太多了. 但是没想到 HTC 大概已经听到了众 Nexus 9 用户的不满, 塌陷的音量键, 松软的后盖这两个制造工艺问题在新出货的 Nexus 9 上已经得到了解决, 可以取暖的功能随着 Android 5.0.1 也已经取消了, 所以黑点的话恐怕真的没多少了.

但是正当我准备和公园的朋友们说 「Nexus 9 貌似没什么东西可写 (hēi) 了」 的时候, 更新版的 Play Store 让我不得不重新考虑这个问题.

多分栏布局哪儿去了?

当年 Android 3.0 发布的时候, Google 就已经为 Android 平板设计了一套非常合理便捷的布局 —— Multi-pane Layouts. 可以看到, 多分栏布局在平板上非常便利, 既能合理利用屏幕空间展示更多内容, 也方便进行操作. 可以说, 多分栏布局显著地提升了 Android 平板的使用效率.

但是, 从 Android 4.1 起, Google 开始逐渐移除 Android 上的多分栏布局. 首先是取消了 Tablet UI, 接着是设置里的多分栏布局消失了. 然后, 就发生在不久之前的是, 在 Hangouts 2.3 版本中, Google 去掉了 Hangouts 的多分栏支持. 这也使得 Hangouts 在平板上几乎失去了可用性, 布局排版就是简单的手机版放大, 一塌糊涂.

2014-12-07 03.38.35

而早期版本的 Hangouts 上, 多分栏布局既能显示出对话列表, 又能让对话双方的文字不至于离得太远以便阅读.

2014-11-06 04.14.44

而就在几天前, Play Store 更新之后, 多分栏布局也被取消了.

再看看不久前更新的 Play Store:

2014-12-05 06.18.22

空荡荡的卡片占满了整个页面. 在更新以前, 这个界面下是采用了多分栏布局的. 左侧栏是应用列表 —— 实话说应用列表使用左边部分面积已经完全足够了. 在右边是应用的大图和快速操作, 可以直接启动, 更新或卸载应用, 甚至还可以取消订阅应用内的内容. 更重要的是, 右边栏的内容几乎是无需加载的, 而点击进入应用详情时难免需要加载一段时间. 无论是操作效率也好, 对空间的利用也好, 多分栏布局都是远远高于传统单栏布局的.

2013-11-14 07.38.12

(这是很早很早之前的 Play 市场)

Google 似乎根本不在意应用在平板上表现如何

除上面所述那些取消了多分栏的应用之外, Play Games, Inbox 等另一批 Google 应用在诞生的第一天起对平板支持就异常糟糕. 在新推出的 Inbox for Android 上, 压根儿看不出一点点为平板优化过的影子, 糟糕的可读性令 Inbox 在平板上几乎不能用. (所幸, Gmail 还保留着多分栏布局).

2014-11-01 05.29.18

你能想象在一块十寸大屏上使用 Play Music 却没法以全屏大小查看一张专辑封面的完整大图么? 是的, Google 就是不让你这么做. 相比之下, 反而是在大改版之前的 Play Music 对平板更友好.

2014-12-11 07.42.11

尽管在 Material Design 里承诺得相当美好, 但是至少目前部分 Material 化的 Play Music 让我觉得非常不尽如人意.

2014-10-24 10.56.01

Walkman 至少允许你查看完整专辑封面, 以不是太小的图. (实际上 Walkman 这样的布局也可以称之为多分栏布局)

还有奇葩的 Google+:

14 - 1

完全不能体现出平板屏幕大的优势, 白白浪费了屏幕空间, 操作也相当不便.

还有很多我没有截图也懒得截图的画面, 从各种各样的角度暴露出十寸平板上 Google 应用设计的不上心. 除了 Nexus 9 之外, 我还同时在使用一台索尼 Xperia Z2 Tablet. 而索尼自己的平板应用却都有不错的平板优化 (至少不会给人以粗制滥造的感觉). 两边一对比, 更是彰显了 Google 对平板的不重视.

内容消费设备? 生产力设备?

除了上面提到的应用之外, 有个很有趣的现象: Play Movies & TV, Play Books 和 Play Newsstand 这三个以内容为主导的 Play 应用却一直保持着优秀的平板适配. Chrome 也还保持着多分栏布局 (在设置页中). Google Drive 以及旗下的三个 Drive 应用也有为平板优化操作. 再加上 Nexus 9 的官方附件里有 Keyboard Folio, 我想 Google 对 Nexus 9 的定位应该就显得很明确了: 内容消费 + 生产力设备. 和内容消费以及生产力无关的应用都玩儿蛋去, 凑合能用就行了; 和内容消费及生产力密切相关的应用就能得到特别优待, 有还算不错的平板布局.

还有个比较搞笑的事情是, 最近微软在测试的 Office for Android Tablet 尚不支持 Android 5.0, 所以 Nexus 9 也只能望洋兴叹.

Google 内部的碎片化

2014-11-28 15.35.26 2014-11-05 02.30.05

在 Nexus 9 上, 我看到了非常优秀的平板布局范例 —— Google Calendar, Maps 及 Gmail; 还算凑合的平板布局 —— News & Weather, Keep 及 YouTube; 还有遭烂得令人无法忍受的平板布局 —— Hangouts, Inbox 及 Google+ Photos. 真的很难相信这些应用都是由同一家公司, 遵循着同一套规范做出来的.

团队越大, 部门越多, 要统一规划就越困难, 这个道理大家都懂. 但是 Nexus 9 上呈现出来的这一派乱象, 很明显地超出了我们理解和容忍的范围 —— 一个新发布的应用做得很烂, 那索性不用, 但是一个原先很棒的老应用更新之后变得乱七八糟, 这就让人完全无法忍受了.

Google 发布 Material Design 也不是一天两天的事情了, 但是现在很多 Google 还没能完全符合这套规范 —— Hangouts 直到这两天的更新才把界面上的一些元素 Material 化, Device Manager, Translate 等一系列应用现在还是 Holo 风格, Google+ Photos, Drive 系列应用的 Material Design 不伦不类… 一切的一切都让我觉得, Material Design 只是一个看起来很美的幻影.

连 Google 都不知道应该如何正确的使用, 如何用好 Material Design, 我们拿什么去要求第三方开发者/设计师遵循着套规范呢? 同样的, 连 Google 第一方应用的平板适配都如此不伦不类, Google 拿什么去要求第三方开发者为 Android 平板进行适配呢?

也许最后, Android 平板会沦为寨版的天下 (更遑论现在很多 Android 寨版性价比还不如 WinTel 寨版), Android 不得不龟缩到手机 + Phablet 阵地固守, 将平板市场拱手让给 iOS (原本就是这个市场绝对的王者) 与新秀 WinTel 平板进行刀刀见血的厮杀.

乌鸦老师问: Android 平板还有未来吗? 这个问题的答案, 我不知道.

导航抽屉到底归属于哪个层级?

这篇文章译自 +Juhani Lehtimäki 的博文 Navigation Drawer – Where Does it Belong in the View Hierarchy? 英文能力过关的同学可以直接去看原文~

事情本来是没那么复杂的…

Screen_Shot_2014-10-10_at_14_44_20

Android Design | Navigation Drawer

但是一切都变了. 我们常说 “先破而后立”, 当导航抽屉成为 Google 设计规范的一部分时, Google 明确告诉我们该这么做, 而且提供了可以让开发者直接调用的工具.

难道说 Google 在一开始的时候犯了个错误? 也许第一眼看上去这样做是对的, 但是从规范上看来确实是有些问题的.

所以现在规范改变了. Google 调整了这些东西. 在新的 Material Design 规范中, Navigation Drawer (现在被叫做 Side Nav, 侧边导航栏) 一跃来到了所有东西的顶端.

Screen Shot 2014-10-10 at 14.53.59

 

Material Design | Layout

我们现在又一次来到了变革的潮流中. Google 正在不断的改变自己与应用的设计, 与此同时很多变数也随着这些改变来到. 虽然我个人是很希望看到 Google 能统一他们使用侧边导航栏的方式并且对开发者们传递一个明确的信息…

Screen Shot 2014-10-10 at 11.46.56

也许你会问, “但是层级又有什么关系呢? 反正他们都 ‘能用’ 不是么?”

我认为这很重要, 事关重大. 这关系到用户是如何认知他们正在操控的物件. 如果抽屉式主要的导航方式, 那么它就是最不能出错的.

层级关系能让用户明白现在他正在操作的东西归属于应用的哪个部分.

2014-10-07_20_08_41_framed_2

上图展现了早先版本中抽屉所处的层级, 而新的 Photos 应用也遵循了这样的层级. 在我看来这么做有两个地方有很大问题:

  1. 首先, 抽屉在这个位置暗示了 Action Bar 在我导航到其他入口的时候不会有变化… 但是它却变了.
  2. 其次, 当抽屉展开时, Action Bar 上的按钮还是有效的, 但是它们的效果对象却是被遮住了一半 (在手机上被遮住更多) 的那些项目.

令人困惑, 不是吗?

 

2014-10-07_20_08_31_framed_2

最新版的 Google Hangouts 则采用了与 Tab 平齐的抽屉. 这给了用户 “当我从抽屉中导航到别处时, Tab 不会受到影响” 的暗示, 问题是, Tab 还是会受到影响的. 这种结构明显是错误的.

 

2014-10-07_20_08_22_framed_2

最新版的 Newsstand 中抽屉的表现是最接近 Material Design 规范中提到的 Google 应用了, 我认为这样的实现是很棒的, 而且是正确的. 当我从抽屉中导航的时候, 所有的内容都会改变, 包括 Action Bar. 这与现实的对应是最紧密的.

2014-10-10_09_08_58_framed

把 Drawer 设置为最高层级也可以很有效地避免发生上图这种视觉错误 (当 Action Bar 在滑动时隐藏了的时候).

好吧, 一切都在不断的变化, 而 Google 看起来也还没拿准主意. 我还是希望 Google 能早日找回一致性, 这样我们开发者和设计师才能跟进. 在那之前, 我们还是谨慎为妙.

当然, 改变熟悉的事物绝不是一件容易的事情. 我在 Google+ 上发起了一个投票希望看看大家的意见. 从结果看来改变是要花些时间的…

Screen Shot 2014-10-10 at 15.22.25

用户体验为王 —— Android 设计师 Taylor Ling 访谈

ling

这篇文章译自 Squirrel Park 的文章 User Experience is King, 作者是 +NINO RAPIN, 由于我已经很久没翻译过文章了, 英文能力过关的同学可以直接去看原文~ 对了, Taylor 也是我的朋友~

Taylor Ling 是一位不懈倡导优质 UI 与 UX 设计的设计师. 在 Android 界他以自己那专注于另应用变得清晰与易用的 “(re)design” 活动而闻名. 同样的, 他也经常被邀请参加世界各地的大会并作出宣讲.

Taylor 的博客 androiduiux.com 可以说是 Android 界最富饶的设计资源聚集地和灵感发源地. 而在 Google+ 上, 他也经常分享一些关于设计的洞见与实战, 以及各种关于 UI, UX 的资源. 当然, 最近他分享得更多的是关于新的 Material Design.

我们与 Taylor 聊了很多, 比如用户体验设计, Android Design 的未来, 如何在你的领域中做到最好以及数字设计师的责任, 以下文段中粗体代表原文作者, 正文是 Taylor 的回复.

 

在几个星期之前您被 Google 正式授予 Google 专业开发者 (GDE) 的称号, 恭喜~ 对于您来说, GDE 的角色和职责是怎样的呢? 

这和我一直以来在做的事情没什么区别: 分享一些小技巧, 与社区里的成员们互动, 帮助大家解决设计上的问题. 我经常与想要接触 Android Design 或想要为 Android 做设计的设计师们交谈, 我努力让大家意识到设计师是如何帮助开发者解决一些超出他们能力范围的设计问题的. 所以称为 GDE 其实没什么差别, 至少是对我来说.

对我来说, 成为 GDE 之后最大的目标便是努力弥合开发者与设计师之间的鸿沟.

填平这道鸿沟是个非常艰巨的任务, 因为大部分时间设计师虽然能做出很漂亮的设计稿, 但是开发者却完全不明白应该如何实现出这些东西. 主要的问题就是开发者们弄不清楚为什么我们设计师要做这样的设计. 故此作为一个 GDE, 我们可以插入到设计师与开发者之间, 对设计师说: “嘿, 除了做出那些花里胡哨的设计之外, 你需要让开发者弄清楚为什么要把东西做成你想象的这样, 为什么这对用户交互来说是非常重要的, 为什么这个图标是有意义的. 你不能随便用另一个图标去表示这个操作, 因为… ” 如此这般, 等等.

我经常看到很多从有着不同设计背景的人转到移动设计这一领域来, 他们有的曾是工业设计师, 平面设计师或者出版设计师. 当然, 我的意思是, 移动设计领域正在不断成长. 但是在很多情况下, 他们之前的经历给他们的移动应用设计带来了一系列问题. 他们并不知道移动设计的基础, 也不清楚开发者们是如何把他们的设计转变成一行行代码的. 而且更致命的是, 他们中的很多人对于移动应用的设计规范没有任何概念. 所以我们一直试图在博客文章中, 在大会宣讲中, 以及其他很多地方传播这样的理念: 请做出些开发者能够理解的并使用的设计来. 我经常听到开发者说: “设计师给我发了一份设计稿, 但是他却从来不会干切图这码子事儿, 所以我不得不亲自动手切不同分辨率下用到的素材.” 所以我们不断努力分享自己的知识, 经验以及遇到的问题, 希望能够帮开发者们分忧.

三年前我们的目标还是创建一个社区. 现在我们已经有了一个, 虽然没大到那种程度, 但是已经初具规模了. 我们可以从社区里学到很多东西. 于是 GDE 就作为了更加正式的信息获取途径, 通过这些信息来缩小开发者与设计师之间的鸿沟.

设计师与开发者不应该处于敌对立场, 而应该是占有 —— 他们密不可分. 只有他们紧密的合作, 才有可能创造出最好的东西.

您一直倾注心血于 UI 与 UX 设计上. 最近, UX 这个词变得愈加火热, 反而迷失了它真正含义, 所有人都想称为 UX 设计师, 仅仅因为它很酷很潮. 于是, 作为一个在 UX 领域浸淫多年的前辈, 您是如何定义 UX 的呢? 

唔, 这个问题真是一如既往的难应付啊. 大家对于这个问题应该都有不同的答案. 很多人都认同用户体验是个很重要的东西, 但是它又是无形的, 难以捕捉. 这不是我们可以看到的东西, 它存在于完成的产品中.

当一个应用的用户体验很糟糕的时候我们会知道这东西的用户体验很糟糕, 但是通常情况下我们很难意识到好的用户体验.

没错. 当我们谈论用户体验的时候, 通常都是拿差劲的用户体验开涮的. 但很少有人会记住好的那些用户体验, 因为在优秀用户体验这样的前提下, 用户们都满意的达成了他们的目的. 如果用户体验很差劲的话, 你会一辈子记恨并且到处宣扬 “妈呀这东西太 <beep ——> 难用了!”

当然, 从定义的角度来说, 用户体验就是用户的体验. 但是如果你要说 UX 设计的精髓到底是什么, 我会说: 它意味着将一种态度贯穿于整个产品甚至公司中. 做到与用户感同身受, 了解用户的体验等于明确了你的产品能达到多高的境界. 虽然这并不意味着你的产品会仅仅因为用户的喜爱而获得成功, 但这至少是成功的第一步.

UX 是一套理念, 一种态度, 而它与产品的每个部分都是相同的: 交互, 界面, 样品. 产品的每一个部分都在优秀的用户体验中扮演着重要的角色.

我有一个朋友是一名 UX 意见领袖, 他走遍了整个国家 (译注: 马来西亚) 来宣传 UX 的重要性. 他甚至去求职网站寻找所有和 UX 设计相关的工作, 然后他接受了各种面试 —— 出于研究的目的. 他想要知道这些公司到底请不清楚他们想要招聘到什么人. 也许在西方国家的情况会好一些, 但是在这个国家 (译注: 马来西亚), 他发现 95% 以上的公司都找错了人. 这些公司在寻找一匹独角兽: 一个既能码代码, 又能做设计, 又能干其他杂七杂八事情的人. 这个有趣的小实验也告诉我们, 推进 UX 这件大业还需要很多的努力. 如果你想让你的产品有良好的用户体验, 可不是随便雇一个人就能自动让你的产品变好并且让用户爱上这么简单的.

您是怎么意识到自己想要从事 UI 与 UX 设计的呢? 您的职业道路是如何诞生的? 

很多人都对我的生物工程学背景感到吃惊. 我很爱生物工程学. 生物工程是个解剖学与工程学交叉的可爱学科, 但是在我们国家却很难找到实验室以外和它相关的工作. 而我又不想一直耗在实验室里. 这太无聊了. 于是我开始寻思自己还能做什么. 我一直以来就对设计很感兴趣, 在上大学之前我就很喜欢画画, 而且还得了一些小奖. 设计和艺术大概是流动于我的血管中的. 我热爱艺术.

我的第一份工作是功能分析师, 这个工作的性质是帮助产品经理将他们的需求翻译成更低级别的需求集合, 以便于开发者们能知道该干什么. 但是, 当然的, 团队里是没有设计师的. 所以我必须自己做设计, 设定布局, 做所有的事情. 当时我还没有意识到有一天我可以靠干这个赚钱.

直到三年前我开始看博客. 我发现了 Juhani Lehtimäki 的博客 (译著: Juhani 的博客已经很久没更新了…), 他在博客里谈了很多和 Android Design 的东西. 我想, “哟, 有好多人都在谈论移动界面设计啊, 有意思~” 那个时候我对于移动界面设计也没什么清晰的概念, 因为 Juhani 也是一个开发者, 而我又没什么技术背景, 所以我也不是很确定这在这方面有没有我可以做的事情.

那个时候我拿到了我的第一台 Android 手机, Sony Ericsson Xperia X8 (NovaDNG: 索尼大法好!) 它的屏幕非常小. 我很认真的研究了它, 并且被这么个小小的东西上能做到那么多我先前想都没想过的事情惊到了. 那时候仍然是 Gingerbread 的时代, 有那么一些应用是经过设计的, 但是应用之间基本没有什么一致性. 在那个时间, 第二代 iPhone 发布了, 我问了自己一个问题: 为什么高质量的应用通常只会在 iPhone 上出现? iPhone 很贵. 我不觉得我必须要花很贵的价格在设备上才能买到高质量的数字体验. 为什么我不能在 Android 上得到优秀的数字体验呢?

于是我花了更多的功夫琢磨 Android, 然后从本地运营商那里买到了一台 Nexus S —— 那个时候已经进入了 Ice Cream Sandwich 的时代了. 为此我万分激动并且做了我人生中的一个 Photoshop Android UI Design Kit. 在那之后, 我便决定开一个关于 Android Design 的博客. 时间是 2012 年六月 —— 我写了一篇关于侧边抽屉和导航的文章. 那就是我写下的第一篇博客. 那是一个新的起点.

一开始的时候, 我只是打算和大家分享一些东西.

您得到了回复么? 

有啊. 大家的回复很积极, 于是我便意识到, “对呀, 这就是我一直以来想要做的事情!” 于是我便买了 androiduiux.com 这个域名, 很 Android 吧哈哈~ 这个域名也无时无刻不在提醒我, 专注于纯粹的 Android 上.

于是不断有反馈出现, 人们积极的讨论, 我很高兴. 对我来说其中有两个人尤其重要: Juhani 和 Roman Nurik. 他们给予我灵感, 让我明白了如果有什么观点或者意见, 不要畏于分享它们. 于是我便开始更深地钻研和设计相关的东西. 在开博一年后, 人们开始找上门问我能不能帮他们做重设计. 我从来没有计划过这些东西, 但是一眨眼的功夫我就变成了一个自由设计师.

但是 Juhani Lehtimäki 和 Roman Nurik 两位都离您千里之遥, 对么? 我的意思是, 你们只在网上有联系, 但是在吉隆坡有一位帮助与引导您的导师存在么? 

是啊, 网络的力量是强大的~ 关于导师 —— 不存在这么个人. 我是自学的. 我的 Photoshop 技能基本是自创的, 通过试错, 和一些简单的教程. 没人教我怎么用 Photoshop. 我一向认为我能一个人做到这些事情, 而我确实能够做到, 尽管可能会花上稍多的时间, 但自己学来的技能确实能起到更长的效果. 你会学到如何习得新技能. 当我还没电脑的时候, 我会从杂志中学习我需要的技能. 我的第一台电脑是一台英特尔 CPU 的 Windows 95 电脑, 从那时起我就明白了电脑的强大.

其实我对自己也是有点儿小骄傲的啦, 因为, 你也知道, 这并不容易呢.

当然, 很多地方都有设计课, 或者关于人机交互的课, 但是他们总是要花上四年 —— 而有时候, 当你和那些授课教师谈话的话死后, 你会想, “开什么玩笑, 我们社区比你厉害多了!” 因为他们的知识都是理论化而成熟的, 而我, 则更多是在实践中学习, 从真实的反馈中学习. 这样一来我能在使用电子产品的时候产生实感. 而你会一辈子记住从实践中学到的东西.

另外一个对我产生绝大影响的就是阅读 The Design of Everyday Things. 这本书彻底改变了我的思考方式. 它让我意识到一件我们很少理解的事: 当我们不能操作一台机器或者设备的时候, 错的是设计师, 而不是我们.

但是我依然坚信如果你有着足够的热情, 并且想要做好一件事情, 就一定能自己做到. 这也是我从开始之初就明白, 而且一直坚持到现在的信念.

谈完了过去, 让我们谈谈现在和将来. Google 刚刚在今年的 I/O 大会上介绍了新的 Material Design 规约. 你觉得这只是个潮流, 还是它就是 Android 的未来? Android Design 将何去何从? 

有一件事情是 Material Design 很明显地改变了的, 那就是平台一致性. 但我确实对此抱有疑问, 毕竟举个例子, iPad 的体验比起 iPhone 而言是很独特的. 所以我的疑问是, 用户真的希望所有设备上的体验都统一呢, 还是体验一些独特之处呢? 不过我还是决定乘风起航, 赶上 Material Design 的浪潮, 因为 Material Design 实在是太棒了, 是经过深思熟虑的.

对我来说, 毫无疑问它就是未来. 但是它给我一种就像两年前 Holo 刚刚被介绍的时候一样的感觉. 在早期, 每个人都只是机械地模仿规约里提到的东西. 这导致了很多应用缺乏变化与创新. 如果你有关心现在圈子里正在发生的事情, 你会看到很多人在依照 Material Deisgn 重设计 Instagram 或者 Facebook. 但是他们中没有一个是独特的, 或者从中展现了变化. 他们仅仅是把颜色和内容换掉, 然后把便称之为重设计. 虽然这并不是什么坏事, 毕竟这样能让更多人意识到 Material Design 的优美指出, 但是我依然觉得几个月后我们恐怕会看到大量长得和 Google 应用一模一样的应用出现. 人们依然在探索中, 他们还没有掌握明确的思路. 我们会看到一大波圆形头像和 Floating Action Button 到处乱飘. 这很正常, 但是我们必须再一次跳出这个框架.

Menu---Back-Arrow

我认为用户依然需要独特的桌面, 平板和手机体验. 我明白 Google 想要达成一致而且我也赞成这个理念 —— 总体而言. 但是我不能赞成必须为此牺牲独特性.

总的来说 Material Design 的出场是惊艳的. 我觉得很开心, 因为你可以感受到这是专为数字世界而创造的.

Material Design 将一些现实生活中的东西带回了数字世界, 这让用户在与数字产品交互时不需要思考太多, 而这通常是长期体验中特别重要的一环.

这也描绘了拟物与拟真的概念区别: 它并不是简单的把现实中的东西挪到数字世界, 而是一种传递与变化. 

我认为纸墨概念的选择对于很多人来说也许会造成困惑. 因为它们在现实世界中都有一些显著的特性: 纸可以折叠, 墨是液体并且可以流动, 等等. 所以开发者们和设计师们开始问这样的问题: “如果它是纸, 那为什么我不能折叠它?” 如果你没有认真读过规范的话确实是会为此感到困惑, 但是他们终将意识到, 数字世界有它独特的约束. Material Design 正是这些将人文带入数字世界中, 故此我喜欢它.

iOS 的界面是冰冷的. Material Design 专注于那些用户真正会察觉到的东西并且以更少的处理让用户们意识到它们.

这些事非常有人情味儿. 我想起了当我在伦敦的时候, 我去了一趟不列颠博物馆, 观赏了一场关于古埃及的展览. 这场展览令我震惊. 4000 年以前, 他们就已经有了详尽的网格系统, 图形设计, 与奇妙的用色, 简直令人疯狂.

作为一个设计师, 您的工作是具有高度创造性的. 您的点子都是从哪儿来的呢? 

哈哈哈, 能召唤点子的仪式是不存在的. 实际上, 我试图从周围的一切获取点子 —— 大自然, 人, 风光. 当然还有人与人之间的交流. 有意思的是, 我喜欢观察窃听 —— 咳咳, 或者说观察人类比较妥当吧. 我不仅经常在人多的地方转悠, 我也喜欢听人们在谈论些什么, 他们被什么打动了, 他们为什么而担忧… 我喜欢聆听这些对话. 似乎这些行为让我将用户牢牢至于设计中心.

我知道您对字体有着很浓厚的兴趣. 您怎么看这次 Roboto 的改版? 

挺好的呀~ 当我看到它的时候就觉得很熟悉, 也许是因为 Roboto 是由结合了一些广为人知的字体而设计的吧. 而且它的跨平台通用性非常高. 我发现一些细微的改变产生了巨大的影响, 改善了易读性. 它看起来焕然一新, 但又仍然是你熟悉的那个 Roboto. 现在它终于给人以家的感觉了.

roboto

 

是呀, 我也很喜欢新的 Roboto. 唯一让我感到有些无奈的是他们在 2.0 版本里去掉了 K 和 R 的原本很有特色的弯曲字臂. 不过也罢. 对了, 您有打算重印那套 T-恤么/? 

没有. 过去的就让它过去吧.

您有买什么可穿戴设备吗? 比如智能手表或者 Google Glass? 您为这些可穿戴设备做设计么? 您怎么看这些东西? 

当然我有的~ 在我拥有一副 Google Glass 以前我就开始为 Google Glass 做设计了, 我遵循着设计规范设计了两个 Glass 应用. 当 Google Glass 发布的时候, 就有客户上门问我能不能把他们的应用为 Glass 做适配, 或者或者说在 Glass 上玩出点儿花样来. 最后我得出的结论就是, 字体排版太重要了, 这些可穿戴设备都充满文字.

我自己有一块从今年 I/O 大会上带回来的 LG G Watch, 不过目前为止我都没有为它设计过任何东西. 显而易见的是, 很多人已经开始跑偏了. 他们想要把一台手机放进智能手表里. 他们把键盘这种及其需要繁琐操作的东西放进了智能手表里, 而这显然 Google 不建议的.

有一件事情倒是很确定, 我认为那些可穿戴式设备有着改变我们对设计看法的潜力.

Taylor Ling 的日常是什么样的? 

(笑) 我就是个普通的正常人啦. 起床以后我先看看新闻以免错过什么在我睡觉时发生的大事. 我用 Feedly 和 Google Newsstand, 当然也会去 Twtter 和 Google+ 这样的社交网络了来获取最新信息. 当我到公司之后我会检查我的任务清单, 然后与团队做交流. 接下来就是每日例行的研究, 各种玩应用, 在 Photoshop 里画设计图, 等等. 就像个普通的应用开发者那样.

等我回家之后, 我就开始做一些自由设计师的活计. 当然这些活儿看起来好像和在公司的时候没什么差别就是了… 我每天都过得相当充实, 我相信有付出就会有收获.

平时您都用什么工具进行工作呢? 

老实说, 只有 Photoshop. Photoshop 对我而言是一个无比强大的工具. 你不仅能轻松的做出小样, 也可以做出完成度更高的设计稿, 甚至还能做简单的动画. 噢对了我也用 Sketch, 不过很少. 目前为止还没什么工具能胜过 Photoshop.

尤其是在 Material Design 时代, 我们更多的关注反馈, 动画以及各种会移动的东西, 藉此增强用户体验, 所以对于设计师来说熟知如何画出能够开发者所期待看到的的图是非常重要的. 有的时候我也会用 PowerPoint 和 Keynote 来做设计.

我喜欢您的 Android Design 挑战. 是什麽促使您举办这样的挑战的? 

这已经是我第二次举办这样的活动了, 不过我的目的是一样的: 传播 Android Design, 给人们带来启发, 向他们展示 “原来应用可以设计成这样啊”. 我博客的副标题就是 “开发者与设计师的灵感源泉”. 这就是我的目标. 很多时候, 如果你给人们一些激励, 他们就会开始做一些他们从未想过的事情.

作为一个设计师, 你会希望因自己的作品而出名. 所以我早就预料到这次活动会引起大家的注意. 我和社区里的朋友们 —— 比如 Juhani 和 Günther Beyer —— 聊了这种活动的可行性. 他们也为这活动出了很多力.

android-design-challenge-2-0

我对今年的参赛作品很满意. 比起第一年的时候, 这轮活动获得了更多的投稿, 当然质量也更高了. 这个活动正在变得越来越成熟, 更多的人开始做令人惊叹的设计, 这是喜闻乐见的.

我为第一轮比赛出了钱, 当然对我来说是值得的, 毕竟设计师们在自己的设计上花了很多心血. 不过在第二轮比赛里我从一些人那里获得了赞助.

而为什么我要这么做呢? 我觉得我是一个喜欢群居的人, 我相信当你付出更多, 别人就会回报更多. 而我也确实从社区里得到了很多, 所以我也尽量为他们做更多的事情.

您的家人和朋友支持您么? 他们理解您么? 

我双亲还不是很清楚我到底在做些什么, 尽管我试过和他们解释… 但尽管他们不知道我在做什么, 他们非常支持我. 有意思的是他们无法相信我去了伦敦和突尼斯做设计宣讲. 当然我也并不指望他们相信就是了~ 🙂

您幸福么? 您对未来有什么打算? 

幸福? 哈哈当然咯. 简直不能更幸福了~ 我的意思是, 我正在做我喜欢的事儿, 而且因此交了很多我觉得不太可能遇到的朋友, 也得到了多得无法想象的东西. 我当然会继续我现在的努力 —— 成为优秀设计的布道者, 推广正确的东西. 我会走得更远, 做得更多.

您有什么忠告能给那些想要追随您的足迹的人呢? 

锻炼你的眼睛. 适当地吹毛求疵, 对自己做的事情抱有热忱. 如果你热衷于生活与工作, 一切都会顺利的.