ToDo 应用 Everything Done UI/UX 设计

作为 GTD 的信仰者,缺少一个看得顺眼又顺手的 Android GTD 应用简直让人如鲠在喉。也罢,不如自己亲自设计一套看得顺眼的 GTD 应用,就算不能成为产品使用,起码自己看得舒服嘛。

GTD 的核心在于记录每日所需做完的事情列表,并可以快速清除事件列表。因此我将每日任务以卡片列表排列,卡片以显示任务简介,包含任务名、任务内容的首行内容以及任务分类,卡片右下角显示任务到期时间(如果有设置的话)。

卡片可以通过左右滑动进行快速操作:右滑清除卡片标记完成,卡片从列表中消失,内容收入 App Bar 左上角的 Archive 按钮中;左滑清除卡片将任务推迟至明日(因以右手操作为默认,左滑操作在屏幕中相对更难,也间接增加了用户推迟任务的难度)。完成所有任务时主界面显示为如图四的 Placeholder。或许用户完成了当日所有任务后还可以插入一段可爱的动画以资鼓励。

点击卡片可以展开内容显示任务的所有内容。

与列表相似,卡片展开后亦可通过手势进行操作,与卡片列表相同,左滑右滑依然是 Snooze 和 Done 的功能。新增下拉手势折叠卡片收回列表,以及上拉手势对任务进行编辑。

Google Photos 导航模式重设计

前阵子刚刚更新的 Google Photos 加入了 Bottom Tab Navigation,激起了用户大量反馈,或积极认为这样做相比之前的 non-indication 的 ViewPager 滑动切换更加直观并且方便单手操作,或消极认为此举是把用户当弱智并且占用了15%左右的有效显示高度。

显然两种观点都有一定的道理。对于用数据说话的商业产品,商业公司显然希望应用主打的功能更易发现、更易进入、更多点击率。而对于用户而言,一方面如果应用的操作不便于日常使用是完全不合理的,另一方面为了方便使用而占据大量的屏幕控件也是令人反感的。

平衡用户与开发商之间的利益是困难的。尤其在目前应用内导航模式缺乏的时候,做好易用性与高效性之间的取舍是一个应用交互好坏的重中之重。就我个人而言,我很反感为了 Bottom Tab Navigation 的形式,认为这样的设计有碍屏幕内真正对用户有用的显示空间,使得内容的呈现不足。

因此我自己对 Google Photos 的导航模式进行了一定的重设计。我将 Tab 栏与 App Bar 合并,将展示及切换 Tab 的任务放置在了应用的顶部,同时保留旧版中的滑动切换手势。

将 Tab 栏放置于顶部的原因主要有三:1. Google Photos 对品牌展示的需求很小,因此 App Bar 不需要展示应用的名称或 Logo;2. 使用两条固定栏占用的屏幕空间过大,压缩在一条内可以明显增加屏幕实际显示高度,这对于以展示图片为主要功能的 Google Photos 是必要的;3. Google Photos 应用内的三个 Tab 栏内除 Assistant 栏存在右滑去除卡片的滑动操作(与该栏左滑切换至其他 Tab 的滑动操作不冲突)之外没有其他的横向操作手势,因此保留滑动操作亦可提高应用的单手操作效率,同时由于存在 Tab 栏的 Indication,用户可以方便的查看当前所在 Tab 以及附近的其他 Tab。初次使用的用户亦可通过点击顶部 Tab 实现切换操作,并可以在左右滑的动画的引导下学习滑动手势。

除了导航模式之外,我还将 Assistant 页的添加操作全部置于页面上,原因是该页在大多数情况下内容较空,并且所有可以添加的内容种类并不多。原版已经在页面上显示创建四种内容而将另两种放置于需要点击“添加”按钮弹出的 Bottom Sheet 里不合逻辑。

临摹 Android Transfer for OS X

Android Transfer

从一开始由于兴趣开始接触 UI 到现在真正做 UI 已经两年多了。明显感觉得到现在正处于一个瓶颈状态。一方面已经可以熟练的使用 Sketch 等工具完成一部分设计并且完全掌握了 iOS 和 Android 平台的设计规范;但另一方面,由于缺少专业的学习导致的基础薄弱和 UI 设计平台的局限性(大多集中于 Android 平台 UI 设计,几乎没接触过大屏幕如桌面应用或电视应用的 UI 设计)成为了目前最主要的短板。

为了提高姿势水平,从今天起争取每天完成一张 UI 临摹作品(自知无法每天完成一张原创作品且听从 Anyway.FM 的建议,练习从临摹开始)。临摹目标为 Dribbble 上优秀的 UI 作品,不限平台、不限内容,一切以夯实基础为主,接触多种平台 UI 设计为辅进行临摹。临摹过程中对原作品中有改进想法的地方实施改进,对其他地方进行尽可能 100% 的重现。

今日临摹作品为 Nikolai Prettner 制作的 Android File Transfer for OS X Redesign Concept,第一天就应该来一个从未尝试过的平台来坚定决心。

从规范到模范,从优秀到优雅

Google I/O 2014 的 keynote 上干货众多,Material Design 可以说是整场 keynote 的重中之重也是贯穿整场发布会的连接桥梁。

Kitkat 及之前的 Android 版本,更多的重视的是性能提升、新特性,UI/UX 的提升只在 Ice Cream Sandwich 发布时进行过一次,即便是那一次,更多的也是 UI 方面的更新,确定了此后三年内 Android 系统统一的设计语言。这一次,更新的不仅仅是 UI,更多的是 UX 方面。4.x 版本的 Android Design 更多的体现的是科技感和极简风格,只能吸引一部分用户(多以 Geek 为主,对妹子完全没有杀伤力),而 Material Design 则是让设计更友好,更符合各种用户群体的审美,也更容易被用户理解和接受。

Android Design 中的输入框等体现出强烈的科技感
Material Design 中的卡片

Material Design 旨在将界面元素模拟成一种类似纸张的虚拟神奇材质(magic material),它跟纸片一样,很薄,很干净,接近纯白,光照下会产生阴影,但与纸片不同,他可以随意变大变小,可以像物块一样随意拖动。另外整体界面更大胆的采用鲜艳的配色,让整个界面更小清新,更时尚,更优雅。

另外,界面里添加一个新元素,Floating Action Button,简称 FAB,这个控件长期驻留在界面上,用以使用户快速进入应用最常用的功能,比如邮件的新邮件,拨号应用的拨号盘,为更大的控件实现功能,比如音乐应用的控制盘。

Floating Action Button

虽然卡片和 Floating Action Button 占据了用户大部分的视野,但他们都并不是 Material Design 的重头戏。从形态和功能上说,这两样东西其实只是非常普通的控件和元素,而让这样平凡的元素变得不平凡的,才是 Material Design 真正的主角——过渡动画

流畅连贯的过渡动画

Keynote 上绚丽的动画效果演示引来台下一阵阵欢呼。的确,从最初的 Android 直到现在,应用中场景切换、按钮效果等等都几乎没有动画,点一下立刻切换,虽然高效,但毕竟简陋。无论是 Windows Phone 还是 iOS,从诞生之日起就都是注重过渡动画的系统,其中 WP 更甚。过渡动画是让用户感到愉悦的重要元素。过渡应用的好坏在打开应用的那一刻就给了用户最直接最深刻的印象——动画生硬的就是简陋的应用,动画流畅丰富有创意的就是牛逼的应用。Timely 正是这么成功的。作为一款可以说功能很普通的时钟应用,Timely 凭借连贯流畅的过渡动画和出色的 UI 设计登顶 Google Play,也正是这一直后来被 Google 收购的团队 BitSpin,实现了 Android 的华丽转身。如果说 Matias Duarte 的设计理念拥有 Material Design 的一半功劳的话,BitSpin 理应拥有另一半。

但是,Google 这次貌似步子跨的有点大,从缺乏动画一下子转变为滥用动画,很多动画显得无用冗余,尤其是按钮按下后出现的水波效果很有种为了动画而动画的意味,还有一些过渡动画速度略慢,引起用户无端等待,这并不是一件好事。不过好在开发人员也已经意识到这样的问题并承诺将根据用户反馈进行进一步的改进和完善,相比在正式发布时会将各种动画的质和量平衡的更加合适。

既然是 Google Design 而不只是 Android Design 了,那 Material Design 必然要考虑到除了手机外更多的屏幕尺寸——手表、平板、笔记本电脑、还有电视。

从演示中不难看出,Material Design 在各种屏幕尺寸上显示效果均属一流。Materia Design 跳出了移动设备 UI 的框架,实现了各种尺寸屏幕设计风格的大融合。这样的设计风格让应用/网站在不同的显示器、设备和系统上均可以获得几乎同样的视觉效果和用户体验。这才是真正能够降低用户学习成本的做法。

看到今天的 Material Design,我想起了当年看的第一篇 NovaDNG 的文章——为什么比起 Metro 我更喜欢 Holo。如今的 Material Design 从某种角度上更加接近 Metro——大色块、某些应用的格状布局等,甚至很多过渡动画也有明显的 WP 风格,比如通话界面进入和退出的动画。但是,两者之间的差别还是在于那“一个”像素的厚度上。Material Design 不是扁平化设计,甚至于,这一种设计语言天生就是与 iOS 那样的纯粹扁平化相对立的。纵观 Material Design 设计指南,大量的篇幅都强调一个中心——高度。高度是这种 Magic Material 的一大特征,它是有高度的,距离屏幕的高度不同,阴影的大小也不同。

阴影是 Material Design 中重要的一部分

另一方面,我个人认为这样的设计也有助于遏制 Android 手机厂商肆意修改 Android 系统的用户体验。使用了各种过渡动画、反馈动画后,修改系统不再是重绘几个图标那么容易,想把原生 Android 系统改的面目全非不再是一件易事。加上 Material Design 本身对用户友好并且美观,更容易被普通消费者接受,这样一来更多的厂商就会使用(或者仅做少量修改)原生 Android 系统作为出厂系统,统一的 Android 系统将可能得以实现。