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 里不合逻辑。

临摹 Spotify for PlayStation

Spotify for PS4

昨天尝试了桌面应用的设计,今天更进一步,做一次大屏幕电视的 UI 设计临摹。

电视应用不同于手机、平板和桌面应用,操作媒介为遥控器、手柄等,无法进行精确点击等精细操作。加上电视的观看距离较远等原因,电视应用的设计中必须将控件做的相对大。格局上不能使用复杂的排版方式,控件及文字的布局以格状或列状最佳。并且由于使用相对传统的操作媒介,在选中目标控件或对象时必须有明显的视觉反馈以便反馈给用户目前的焦点位置。

由于以上诸多原因,不管是 Android TV 或是 Apple TV,都在控件上使用了大量的卡片用以承载信息,并且在布局上多使用格状布局进行信息排布,或是以列表形式显示无图像的信息。PlayStaion 4 也放弃了此前使用的树形导航模式,而使用了类似的卡片+格状的展现形式。

今日临摹作品为 graylabel 创作的 Spotify for PlayStation

临摹 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,第一天就应该来一个从未尝试过的平台来坚定决心。