活在未来

前几天看到朋友发的一个演讲文字稿,来自 Kant,一个曾经在腾讯后来去了拼多多的产品经理。虽然是好几年前的演讲了,但演讲内容挺不错的,有几点让我受到启发或者深有同感。


别从竞争对手的功能出发。从竞争对手那里找需求,容易被他带到坑里。

以前在魅族做交互的时候,发现很多产品经理总是跟着竞品提需求。然后会发现,有些功能在竞品那边做得风生水起,而在我们这边无人问津。为什么呢?因为提需求的人不了解那个功能的本质。

竞争对手为什么做了 A 功能,而不做 B 功能?为什么做了 A 功能又下掉了,然后上了 C 功能?这些问题背后都有他们的考量。要注意,这是“他们”的考量,而这些考量不一定适用于“我们”。魅族作为一家手机厂商,跟常规的互联网厂商有质的不同,所以人家的功能移植过来,很容易会水土不服。

我认为,关注竞争对手的功能很有必要,但是必须要深入分析功能背后的逻辑,比如他们是为了解决什么问题?他们的长期目标是什么?这个功能受用户欢迎吗?……我们有机会嗅到一些对自己有益的信息,然后根据这些信息去衍生我们自己的功能设计。

当你真的想创业的时候,你不应刻意地去寻找一个需求,而是活在未来,发现缺失了什么。

我最近刚好在想,如果自己要做一个独立开发者,我应该做什么样的产品。
“活在未来”这一点着实启发了我。

我总是在思考现在的人需要什么,却没有想过三五年后的人需要什么,或者二十年后,有什么是人们离不开的。


骨架-肌肉-血液-皮毛

骨架是结构框架,肌肉是核心功能,血液是次要功能,皮毛是细节。

这个层级关系说得通,并且可以很好地解释了为什么微信的通讯录一直保留在第二个 Tab。但我还是觉得结构框架不应该先于核心功能,只有先思考了产品定位和产品的核心功能,才能把结构框架给确定下来。

《用户体验要素》这本书虽然我还没读过,但它的五要素理论我很赞同:战略层-范围层-结构层-框架层-表现层。

前轻后重

以前做交互设计的时候,铭记在心的一个原则是,把复杂留给自己、把简单留给用户。
所谓前轻后重,其实是同样的道理。

我之前注意到 iPhone 的抬腕显示很准确,然后尝试反推它的判断逻辑,发现跟初始位置、角度、速度都有关系。心想这个逻辑好复杂。后来偶然发现苹果的做法很有可能是利用机器学习的算法……用户在体验这个功能的时候是完全不用多想的,我抬起来要看手机了,它就亮了,但它的背后是工程师们的绞尽脑汁。


一个界面一个主题

如果说我做这几年交互设计有什么心得的话,我第一个想到的就是这个。

一个界面可能很复杂,但是必须要有它的主题和重点,并且只能有一个。所谓流畅的用户体验就是,在操作的过程中毋需多想,不带脑子也能操作顺利。毕竟确实很多用户是不带脑子玩手机的。

都说 Don’t Make Me Think,而要达到这样的目标,一个界面只能有一个 Primary Button。


Android Design 的问题

我曾经是“设计规范”的拥趸。我认为开发者需要遵循平台的规范,只有大家都这样做,用户才能得到处处一致的体验,否则,不同的应用使用不同的控件,用户很容易就懵逼了:这个 icon 竟然是分享的意思?

所以,在我刚出来工作的时候,我非常反感国内的应用在 Android 端也使用底部导航。“这些人都是果粉吧?”我会这样想。

我有个朋友则跟我很不一样,他坚定地认为底部导航是最佳实践,管什么规范不规范的。

我后来才明白过来,Android 的设计有很多问题,如 Kant 所说的,Android 的很多细节都是工程师思维的体现。而当你尝试遵循 Android 设计的时候,会发现你的业务数据和用户口碑会很差。估计 Google 的人也意识到了,所以这几年他们也在改进,虽然很慢很慢。

我们现在知道了,底部导航已经加入了 Material Design 的规范文档中。

设计规范不应该成为镣铐,它顶多只是个指南。我在魅族的后期工作就是负责公共规范的制定。我很担心任何一个规范会对设计师带来不必要的限制,所以新增一个规范的时候总是会考虑再三。如果有一个应用场景没被考虑到,那么将来某个设计师会很抓狂,如果用了公共控件会影响业务和用户,如果不用的话又过不了稿。

当然,针对这个问题的解决方案不应该只是谨慎地制定规范,而是面对规范时的态度。

Apple Music 刚出来的时候,与系统内的其他 app 都不一样。据说苹果内部,也是很欢迎挑战 Guideline 的。

微信群收款的改版

揣摩别人家的改版思路是一件很容易吃力不讨好的事情,但我发现揣摩得对不对并不重要,揣摩的过程对自己大有裨益。

我从前很少去思考产品设计相关的问题,以后要多一点了。

今天朋友在群里说起微信群收款和支付宝群收款的设计差异。

微信是放在首页的 + 里,路径是 “+” > “收付款” > “群收款” > “选择聊天”。 而支付宝是放在群聊的菜单里,路径是 “进入群聊” > “+” > “AA收款”。

我记得微信以前也是将群收款放在群聊的菜单里的,在某个版本之后,他们把这个入口移到了“收付款”里。

从交互设计的角度而言,这是先选操作还是先选对象的差异,似乎并无明显的高下之分。但具体看群收款这个功能的时候,会发现微信改版之后的操作方式更麻烦了。在旧版微信,你只需要点击 3 次就能开始输入金额,而在新版,你需要点击 5 次,而且还不太容易点击。所以微信应该是有别的考虑才愿意改版。

所以我猜测了一下,想到两个可能的原因:

第一,给“收付款”里面的功能带量,引导群收款发起者去关注二维码收款、面对面红包这些可能用得上的功能。

“收付款”这个页面很有意思,它的 UV/PV 应该都很高,但是来到这个页面的时候,用户大都是赶着付款,而付款成功之后就会跳到提示页了。以至于它无数次露脸,却很少人注意到它上面有什么(除了大大的二维码)。

而群收款发起者,往往是一个群体里面比较特殊的人,可能很有钱,可能很受欢迎,而他们很有可能会需要“收付款”里面的其他功能。

第二,增加“查看我的收款记录”功能,所以需要一个独立的页面来承载。可能是微信团队发现群收款的收齐率很低?总之我看了我的收款记录才发现原来有那么多没收齐的……

还有一点,微信敢于为了某些原因而把一个比较常用的功能改得难用了,一定是觉得即使难用我们还是得用。想想是不是还有点悲哀。

警惕咪蒙,也要警惕骂她的人

每每看到人们在谈论咪蒙,我总会想起那本《独唱团》的作者列表里咪蒙的笑容。那个笑容很有感染力,不然我也不会在这么多年一直印象深刻。而现在的咪蒙,比之前更有感染力了,只不过不再是通过笑容,而是通过她的文字和她的团队。

感染力的一个体现是她在微信公众号上的粉丝数,另一个体现是时不时出现在我 Timeline 上的爆款文章。她大概是深谙感染之道,堪比通过分裂繁殖的病毒。但这个本事最近给她带来了个大麻烦。

最近的事情是这样的,咪蒙旗下一家公司写了一篇叫《一个出身寒门的状元之死》的文章,文章被热传,随即被质疑。N 个小时后大家都在算自己的含咪蒙率(关注了咪蒙的微信好友数/总微信好友数),然后感慨自己的交际圈如何如何。N 个小时后咪蒙宣布停更 2 个月。

为什么很多人讨厌咪蒙?有人说是她创造了太多的毒鸡汤。其实更加准确的说法是,她创造了太多的毒鸡汤并且太受欢迎了。她知道怎么写点击率高的标题,知道什么样的话题有更高的受众,知道要怎么说才能诱导读者转发。

可是真的是这样吗?我很怀疑这一点。因为这个原因太奇怪了——毒鸡汤有多害人?毒鸡汤真的比鸡汤更害人吗?这个原因真的能让人相信关注了咪蒙就是 Low?

我不喜欢咪蒙但我也不讨厌她。我甚至觉得她作为自媒体,某些方面是一个标杆。而《状元之死》一文,对社会的积极意义还很值得认可。利用人性的弱点去达到自己目的的人或公司其实有很多,比如抖音,比如拼多多,但是会有很多人认为用抖音就是 Low 吗?

这里的关键在于,为什么反咪蒙能成为一种“潮流”。因为反咪蒙是很容易理解的事情——她的槽点很多,但大众一起反咪蒙,就不是一件简单的事了。

这不过是又一场乌合之众的盲目跟风罢了。源头是一部分自认为品味高级的人(可能确实品味很高级),他们在社交网络上表露出自己对于咪蒙之流的不齿。这么一想就觉得讽刺,这一群人被牵着鼻子去嘲笑被牵着鼻子的咪蒙粉丝。

毒鸡汤确实需要慎用,但试图把你的鸡汤贬得一文不值的人不一定理解这碗鸡汤。所以不仅要警惕咪蒙,也要警惕那些骂她的人。

文艺文案

概要

2016 年初我为魅族读书撰写了一系列提示文案,文案风格是“文艺”,思路是用文学作品中的金句或者桥段来辅助提示。当时因为没有互联网产品这样做过,我在推动这一套文案的过程中受到过很多质疑,庆幸的是最终项目组同事都认同了这个方式。

设计思路

  1. 大前提是保证关键信息不能丢,用户能快速明白提示内容
  2. 文艺文案需要匹配上提示的场景,避免生搬硬套
  3. 控制文艺文案的字数,简洁是必要的
  4. 页面排版要美观

成果展示

网络相关的提示:

“人生总有许多的意外……”摘自几米的《向左走向右走》;“海明威曾写过一个谎言……”演绎自海明威作品《老人与海》。
 

空状态的提示:

“2300 年前亚里士多德……”演绎自典故;“想要了解一个人……”摘自加·泽文的《岛上书店》;“天下万物的来和去……”摘自三毛《谈心》。

内容下架的提示:

“我不知道该怎么和生活中无法失去的人说再见……”出自王家卫《蓝莓之夜》;“再好的东西都有失去的一天”出自莎士比亚。

上线后

文艺文案上线后几个月,我看到一则很有意思的新闻,讲到 Windows 10 最新的中文版安装程序出现了多句古文和诗词。例如出自李白《蜀道难》的“一夫当关,万夫莫开”:

我觉得微软所在尝试做的,跟我当初的想法是一致的。我们在产品设计中,如果能找到一个合适的切入点,多花一点点力气,让某个细节更加情感化,是非常值得的。

我很久之前在知乎上面偶尔看到一个回答,答主提到她喜欢 Flyme 的细节,我一看,最后一张图竟然就是我们魅族读书的无网络提示。我感到莫大的惊喜和欣慰。昨天去微博搜了一下,发现也有人提到:

这对于一位设计师,就是所谓的小确幸吧:)

火星文小翻译

概要

火星文小翻译是个微信小程序,也是我的一个练手作品。我花了一天时间,独立完成了设计和开发工作。

你可以扫描下方的小程序码来体验:

缘由

小程序很火,我恰好懂一些 Javascript,于是就想做点什么。而之所以要选择火星文翻译工具,是因为:

  1. 我是 90 后,对火星文有一种怀旧的情愫
  2. 现在网络审查这么严,说不定火星文以后会迎来第二春
  3. 最重要的原因:以我的编程水平,也就只能做这种小工具了……

开发路线

  1. 阅读微信小程序开发文档 · 1 小时
  2. 设计 · 1 小时
  3. 开发核心功能 · 3 小时
  4. UI 调试 · 4 小时
  5. 跨平台适配 · 30 分钟
  6. Logo 设计 · 10 分钟

设计细节

  1. 实时翻译,省去“翻译”按钮
  2. 复制按钮只有在有文本的时候才会出现
  3. 输入的文本和翻译结果上下对应,形成强烈的映射关系
  4. 输入文字过多时,文本字号会自动缩小

如果跟友商进行对比,你会发现火星文小翻译无比简洁:

总结

这当然只是一个小玩具一样的程序,但它对我有很重要的意义。

我在整个过程中感受到的是,学习新技能和长时间心流的乐趣。人总是很容易就呆在舒适区,不愿出去,我觉得我可能也会,而这个小程序是我真正迈出去的第一步。

对了,有一段时间,后台看到的日活增长还蛮高的,我一度以为我会火……
 

OK Camera

概要

OK Camera 是我们在 2017 年初做的一次相机重设计的作品。我们一共做了 7 个优化点/新功能,以下仅介绍其中一个由我主导设计的优化点。

前期调研

在前期,我们分析了 10 款同类竞品,对 14 位用户进行深度访谈,回收了 200 余份调查问卷。另外,借助大数据平台,我们得知很多关键的相机使用数据。其中对我接下来的设计影响较大的是这个数据:

从这个数据可以看出,用户在使用系统相机的时候,单次使用时长极短。而在访谈中,也有好几个用户提到,除了自拍,拍照基本都能在 30 秒内完成。

因此,“高效率”必然是系统相机需要追求的目标。但我发现,现如今的相机产品对效率的追求分别朝着两个不同的方向。

系统自带相机,比如 Flyme 相机、Pixel 相机和 iOS 相机,通常是点击快门拍照之后,照片生成,但仍然停留在取景界面,等待用户快速拍摄下一张:

而很多第三方的相机,比如微信、Instagram、黄油相机,则是拍完一张,随即给出拍摄成品给用户预览,以决定是使用照片还是重拍一张:

换句话说,前者认为保证用户可以迅速拍摄下一张更重要,而后者认为让用户迅速预览拍出来的照片更重要。你会发现,它们都不得不牺牲了另一个任务的效率。

系统相机有没有可能兼备两种任务的高效率?

方案探索

查看相册其实是一个临时态,它终将导向下一个任务:要么是编辑、分享,要么是回头重拍一张。对于临时态,在移动终端上有一个手势非常合适,那就是长按:

长按相册入口即呼出临时相册,左右滑动快速浏览,向上滑动则打开该照片,松手则退出临时相册。这个流程看上去一气呵成。

然而,在准备深入完善细节的时候,我发现……iOS 的自带相机已经做了一个几乎一样的方案……区别只在于它用到的手势是 3D Touch 的 Peek 和 Pop:

我感到沮丧,因为我这个方案已经失去创新的价值;也感到高兴,因为发现 Apple 也在尝试解决同一个问题。

继续探索!

在产品设计中,我们常说的“操作成本高”,其实包括两方面,一是触发操作不方便,二是撤销操作不方便。而在我们的相机界面,想要优化查看相册的效率,最好也能兼顾这两方面的操作成本。

除了长按,还有没有办法让进入相册和退出相册都非常便捷?我想到了滑动手势(在达到以下方案之前,其实经历了非常曲折的变更,篇幅所限,不再话下):

  1. 拍摄照片后,屏幕底部会露出照片的一小块,暗示可以点击或上滑查看
  2. 上滑呼出相册,左右滑动浏览,随时下滑收起相册

无论是进入相册,还是退出相册,都只需要一个全屏可以响应的滑动操作。并且,由于整个流程没有跳转新的页面,用户对相册的感知会是非常“轻量”的,因此操作成本也会因此降低。

还不够

在提出上述方案的时候,我意外地发现,相册出现的动画轨迹与手机拍摄后恢复正常姿态的轨迹是恰好相对的。这意味着——我们可以增加一个体感识别,当用户手持相机拍完照,把手机拿下来准备查看照片效果的时候,相册自动弹出。

要知道,当我们使用后置摄像头拍摄的时候,手机与地面的夹角通常接近 90º;而当我们在浏览相册的时候,手机与地面的夹角通常在 30º ~ 60º 范围内。

我为这个想法感到兴奋。我的小伙伴们也都觉得很有意思。我们决定为此做一次用户测试。

原型制作

其实从一开始的方案探索,我就已经开始做原型了。可交互的原型能帮助你深入了解设计方案的优劣,从而更早地发现问题。

我用的原型工具是 Framer,它最大的特点是功能强大,能精确还原设计方案。

整个原型一共包含 600+ 行代码,4 个开源组件和 3 段音频。

(你可以通过这个链接体验原型。但是通过浏览器打开的原型将无法展示取景框和“拍完拿下来”的体感识别功能,如果你想要体验完整功能,需要先在手机上安装 Framer 客户端。)

用户测试

我们前往北师大珠海校区进行用户测试。

测试步骤的是:

  1. 请用户自主使用原型拍摄几张照片(原型只是模拟拍摄效果,并非真实拍摄)
  2. 请用户自主查看刚才拍到的照片
  3. 设法让用户自主发现“拍完照拿下来”的功能

经过 5 轮用户测试,我们得出结论:

  1. 新的相册入口在可用性上完全 OK
  2. 用户在发现体感识别功能之后都很感兴趣(也让我们感到惊喜)
  3. 部分用户习惯横屏拍摄,所以我们需要针对横屏做相应的适配方案

总结

这次概念设计持续一个多月,我们完整地走了一遍通用设计流程。其实一开始我们觉得相机已经没有什么可以做的了,无非就是把现在流行的第三方相机整合到系统相机里(三星相机就是这样做的)。但在第二轮头脑风暴之后我们发现,原来可以探索的方向还有很多。我们最终的方案也是超出了一开始的预期。

备注 1:本次概念设计是合作项目,上述任何工作,如果没有特别注明,有可能不是我独立完成的。

备注 2:上述方案并未上线。

画屏 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 终究不是一个实用主义的功能。在我看来,它更像一个彩蛋。你一旦知道了它的存在,它便时刻提醒着你,你跟手机的关系除了开机、关机,还能有另一种诗意的状态。

总结

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

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

读书阅读器

概要

2016 年冬天,Flyme 6 发布。在此次系统大版本更新中,我为魅族读书做了一系列的体验优化,其中就包括阅读器。

设计目标

  1. 让内容更有品质感
  2. 让体验更有沉浸感

设计难点

当时我们拿到的内容资源质量一般,比如没有高分辨率的封面图片,也没有精排版的图书。在短期内无法更换内容源的前提下,如何让内容更有品质感?

另外,魅族读书尚处于新生阶段,还有很多功能待补充,如何重新设计一个信息架构,使得版面既简洁清新,富有沉浸感,又能兼容以后的功能拓展?

我带着这两个问题开始设计。

向纸质书学习

图书的装帧有着悠久的历史。千百年来,一代又一代的出版人煞费苦心地研究如何提供最有品质感的阅读体验。我想,电子书想要做出品质感,向纸质书学习必然是成本最低的方式。比如很多电子书读者津津乐道的拟真翻页动画,就是在谦卑地复刻纸质书的翻页体验。

我首先学到的是扉页、末页,以及章节首页的版式。
 

我们的电子书文件中没有扉页和末页,以致于从书店中第一次打开一本书,扑面而来的就是第一章的第一页的第一句话;而读完一本书的时候,也是发现翻不了页了才恍然大悟已经读完了。我也是个热爱读书的人,在我看来,读书是灵魂就餐的过程。就餐不能纯粹为了效率,吃得愉快比吃得快更重要。

在我们打开一本纸质书的时候,第一页必然不是正文——通常是书名,然后是目录,甚至还会有一些跟图书内容有关的素材(比如《禅与摩托车维修艺术》前面会先展示主人公的旅行路线图)。而当你看到新的章节时,往往会发现新章节的第一页有很多留白,或者很多修饰。我觉得这就像是中国的屏风,又像是一场演出的暖场表演。

于是,我为所有在线图书新增了扉页和末页。另外,在内页的所有章节的第一页,加大章节名的字号和周围的留白:
 

这几个改动点,开发成本极低,但是能将品质感提升一个档次。

也许你会问为什么不放封面图片呢?封面确实也可以承担“扉页”的功能。但是如前面所述,在短期内我们拿不到高分辨率的封面图片。而且,我们的内容有超过一半是网络小说,网络小说的封面通常缺乏设计感,直接充当扉页,并不能提升品质感。

沉浸的阅读体验

怎样才算是真正的沉浸?我之所以有这样的疑问,是因为我发现了电子书行业里的一个“小现象”。常见竞品的阅读器在沉浸阅读时是这样的:
 

我觉得各家都做得很不错,在沉浸阅读界面尽可能精简信息,把用户的注意力留给图书内容。但是当你呼出工具栏的时候,它们分别是这样的:
 

为了说明问题所在,我拍了两张照片:
 

我的意思是,呼出的工具栏如果挡在内容上方,会把用户的阅读思路完全打断,他不得不离开书中的情节,认真对付弹出来的各种按钮。而实际上用户呼出工具栏,可能并没有明确的目的,可能只是在犹豫是否回到书架,甚至可能只是不小心误触了。

有没有可能在工具栏出现的时候,用户仍然不需要离开当前的阅读内容?——这样只有你真正想要操作的时候,你才会离开沉浸的状态。

这也是我所能想象到的最极致的沉浸阅读体验,它也许只是好了那么一点点,但是从长期上看,它能帮助魅族读书跟竞品形成鲜明的差异,同时也更符合 Flyme 的美学。

经过一系列的尝试,最终得出方案:
 

为达成最终的方案,我做了两个关键的决定。

一是控制顶部和底部的留白。从排版上看,必须要有足够的留白才能让版面有呼吸感,让内容更加易读。虽然有些竞品把边距缩得非常小,以放下更多的文字、减少翻页,但是我们认为,对于大部分用户而言,阅读舒适比翻页次数更为重要。注重阅读品质的微信读书和网易蜗牛读书也确实跟我们一样都保留了足够的留白。


二是将版式和亮度整合在同一个设置面板中。我们当时做过一个很有意思的用户调研,拿着阅读器的界面问若干受访者一个问题:“你觉得调整背景色应该点哪里?”结果是选择“版式”和选择“亮度”的用户各占一半。其实这是因为用户对阅读器的一些设置项有着不一样的心智模式(取决于他的生活经验),一个固定的交互模式无法匹配上各种各样的心智模型。而如果将版式和亮度整合在同一个面板里,不管用户想要“修改”什么,都只需要点击同一个入口。

足够的留白使得工具栏不需要遮挡图书内容,而版式和亮度两个入口整合在一起则节省了空间,让常用的操作可以聚集在底部。

一年后的自我评价

这套阅读器的方案是一年前做的,一年后的今天再看,发现有些细节还可以继续优化。

  1. 扉页上如果能显示全书的预计阅读时长,估计会更有实用价值。
  2. 从用户反馈的数据来看,一部分网络小说读者用户仍然希望页面留白减少。因此,也许可以考虑增加“边距”设置项。当然,喜欢窄边距的用户必须得牺牲沉浸式的工具栏了。
  3. 默认的边距还能更小一些。
  4. 版式和亮度整合后的入口图标是“Aa”样式,如果能换成一个“齿轮”图标,相信用户更容易理解。

这次设计中我最深刻的感悟是,每个产品在不同阶段都会有不一样的短板,好的设计不应该只是锦上添花,还需要能把一手普普通通的牌,打出最漂亮的结果。

十年前我的人生规划

在家里一个旧本子上看到了 2006 年自己写下的“死前要完成的事”,觉得很惊喜,像换季的时候发现去年的衣服兜里竟然藏着 10 块钱。

死前要完成的事

  1. 健健康康地活 90 年(仍在观察)
  2. 考上湛江一中/遂溪一中(还行)
  3. 考上清华大学(惨败)
  4. 在北京生活 3 年(写下这条意味着我当时压根儿就不相信第 3 条能成……)
  5. 精通英语(很欣慰当时就有这个觉悟,很抱歉如今十年后还在挣扎)
  6. 每月至少要有一千块钱赡养家人(显然那时候还不懂通货膨胀……)
  7. 知名度在全县以上(意识到了影响力的重要性,但错误理解了影响力的表现形式)
  8. 出书、发表文章(这个觉悟也是对的)
  9. 竭力要使家人幸福(三观很正,但有喊口号的嫌疑)
  10. 要出一趟国外(哦)
  11. 在城市中买一套房(看来那时候对财富最直接的理解就是城里的房子)
  12. 要看到李阳老师(羞耻ing……不过后来确实见到了)
  13. 大学要拿到奖学金,最好自食其力(抱歉了,并没有做到)
  14. 初中期间能精通英语 3 级(什么鬼)
  15. 有一个幽静的书房(你真是执着于诗和远方)
  16. 见到她(这一条很隐晦,估计是怕我爸看到这个本子,回忆了一下,这里的“她”应该是我那时候暗恋的一个妹子)

总结一下,真正实现了的很少,而有些早已经宣告失败,剩下的还需要努力。不禁感叹,倘若现在的我站在十年前的自己面前,我俩估计会互相取笑吧,我笑他的无知,他笑我的无趣。

是 Geek,也是文艺青年

有一天,开发同学过来问我,读书的分享书摘功能需要在本地缓存一张临时的图片,这张图片应该放哪里?

我说放到一个隐藏的文件夹里吧,这样系统的图库才不会去抓取。路径可以在系统的 Pictures 目录下。

那文件夹怎么命名?

我说我想一下,待会儿给你。最后我给他发的是:.imageEK

因为 imageEK = image + EBOOK,还因为 imageEK 其实就是一句话:I‘m a geek.

我很喜欢自己设计的这个彩蛋,因为我确实自诩为一个 Geek。

在发现自己像个 Geek 之前,我认为自己是文艺青年。那时候喜欢文学,对我之后的生活影响深远。

“是 Geek,也是文艺青年”,其实圈子里这样的设计师有很多很多,多到如果一个设计师用这句话介绍自己,就约等于什么都没说。

但我确实是那样的人。只不过我不只是那样的人。