画屏 MP3

概要

2017 年 7 月 26 日,魅族 Pro 7 发布。画屏 MP3 是 Pro 7 画屏上的一个小功能。

需求分析

“在画屏上做一个关机后可以用的 MP3 功能。”刚接到这个需求的时候我感到不解:谁会用这样的功能?而当我跟产品经理一起认真去做需求分析的时候,发现确实可以挖掘到一些有意思的点:

  1. 关机后听歌能比开机的时候更加专注,毕竟手机里尽是纷扰的世界,屏幕一旦点亮,你总会难免被各类信息打扰。试想一下,你有多久没有静下心来欣赏音乐,而不同时做其他事情?尤其是对于入睡前的场景,“只想听歌”的需求确实不伪。
  2. 关机后播放音乐,手机的射频功能都已停止工作,理论上在飞机上是安全的。要知道,Pro 7 的目标用户是商务人群。如果在飞机上还能使用 Pro 7 播放音乐,这对于商务人士必然是一个贴心的小功能。
  3. 魅族是做 MP3 起家的企业,而魅族手机的忠实用户(亦称“魅友”)对魅族品牌的热爱往往就源于当年使用魅族 MP3 的体验。因此,MP3 功能在魅族忠实用户的眼里可以说是一种情怀。

“在画屏上做一个关机后可以用的 MP3 功能。”现在回头再看这句话,我仍然相信用这个功能的人很少,但我同时也相信这个功能有它独特的价值。总体而言,画屏 MP3 不是一个“实用主义”的功能,而是在 Pro 7 画屏这一特殊语境下,值得我们去尝试,从而为 Pro 7 的用户体验增添一份韵味的功能。

考虑到画屏尺寸极小,同时当时开发人力有限,我们最终确定功能细节的时候,依据的标准是“最精简且可用的 MP3 播放器”。

设计目标

针对需求分析结论,我为这次设计任务设定了以下目标:

  1. 简洁优雅的。愿意静心欣赏音乐的用户必然也是追求生活品质感的用户,因此一个功能必须是简洁优雅的,才能满足此类用户的情感需求。
  2. 易用的。画屏与正屏在尺寸和比例方面差异极大,我们常规的设计模式一直为了适应更大屏的手机而演化,早已经不适用于小屏幕。
  3. 值得把玩的。它不能是一个枯燥的工具。

复古风?

画屏 MP3 既然是一种情怀,那为何不把这种情怀贯彻到底?

魅族的 MP3 播放器在工业设计上极具标志性,有没有可能将那时候的用户界面(硬件+软件)转换成现在画屏上的用户界面?

而在做方案探索的过程中,我发现虽然画屏的尺寸比例很接近当年的 MP3 播放器屏幕,但它们之间仍然隔着无法逾越的鸿沟:

  • 当年 MP3 播放器的软件界面并非触摸操作界面,移植到画屏上会导致点击区域过小
  • 画屏周围只有电源键和音量键,这意味着,我们需要把播放、暂停、切歌按钮(密集地)放置在屏幕内。虚拟按钮失去了物理按键固有的“安全感”,如果密集排布,将导致所有操作都会显得局促

复古风的设计思路虽然能将情怀贯彻到底,但我们将因此牺牲掉易用和简洁,这显然得不偿失。

我在 Sketch 上新建了一个画板,决定探索下一个方向。

重新出发

画屏是一个新事物,不应该直接套用旧的模式,而应该根据画屏的特点去做针对性的设计。我重新梳理了画屏的独特之处以及相应的设计要点:

  1. 尺寸小,因此按钮要少
  2. 细长的比例,因此适合纵向排列元素
  3. 触摸精度比正屏的要低很多,因此不适合密集的点击操作

看来,在画屏上应当尽可能避免“点击操作”。于是我开始尝试一系列带有划动操作的方案:

然而,方案 A 有热区冲突(跟 iOS 10 的锁屏一样),方案 B 仍然需要点击才能切歌(而我们从后台的数据了解到,在播放器页面,切歌是使用频率仅次于播放、暂停的操作),方案 C 则引入了更多的按钮。

横向评估后发现,方案 A 能最大程度地避免点击操作。我在方案 A 的基础上继续调整,将切歌和查看列表的划动操作布置在不同方向,以避开热区冲突的问题。

最终方案如图。左右划动切歌,向上划动呼出播放列表,点击封面播放或暂停:

细节思考

1. 为什么使用黑色背景?

与画屏周围的黑色区域融为一体,以尽可能减少手机背面的割裂感,同时也能让画屏看起来“更大一些”。

2. 用户会不会不知道怎么切歌?刚才你自己也说切歌是高频操作。

有可能。早期版本我加了左右两侧的封面露出,以暗示可以划动。后来因为这样的元素会导致画屏有更明显的“边界”而去掉了暗示。我认为在这样的场景下,氛围感比可用性更为重要,同时,适当隐晦的操作能激发用户探索的欲望——这也能让画屏 MP3 更加“值得把玩”。

3. 为什么用圆形的进度条?

单看进度条本身,圆形的不见得比常见的直线形更好。但是在狭窄的屏幕空间里,圆形进度条能与封面融为一体,从而减少一个孤立的界面元素。而且,播放、暂停、切歌和进度都是跟播放行为密切相关的操作或信息,它们 4 个在同一个地方聚集,更加符合接近性原则。

4. 为什么我还是觉得这个功能无用?

事实上,我们有收到一些用户的反馈,说到他们喜欢在睡前使用这个功能。但画屏 MP3 终究不是一个实用主义的功能。在我看来,它更像一个彩蛋。你一旦知道了它的存在,它便时刻提醒着你,你跟手机的关系除了开机、关机,还能有另一种诗意的状态。

总结

在一个从来没有出现过的载体上做设计,最大的挑战是如何准确理解用户场景,以及如何确定最适合这个载体的结构框架。

不过,尽管天下的载体千变万化,只要人性不变,一切设计其实都是已有的。