Muzei —— 意外之念

这篇文章译自 Muzei 开发者, 我们的老朋友 Roman Nurik 在 Medium 上发布的一篇博客, 讲述了 Muzei 诞生的经历.

智能手机是非常能展现人们个性的私人物品. 所以我丝毫不为看到一大堆优秀的 Android 应用在 Play Store 的”个性化”分类下出没现而感到奇怪. 那些能够让你定制到牙齿的壁纸, 小部件, 第三方启动器和其他应用确实没有理由不流行.

1-KvVhFr5yEVQGHBmcbnpDMw让时间回到 2012 年下半年, 当我第一次在内部邮件 (嗯, 我在 Google 的 Android 部门工作) 中看到关于新的锁屏小部件这个概念时, 我第一时间就开始在自己的锁屏上玩起了时钟小部件. 除了一些基本的字体调整之外, 我还自己画了一个类比时钟. 当我意识到”这里有足够的空间可以让我放下天气图标和数字”时, 正是我叫出”啊哈~”的瞬间 —— 这个想法对我而言有着重大意义, 毕竟我并不太经常仅仅是为了看看我出门要不要带伞而特地打开 Google Now.

与此同时, 我的同 (ji) 事 (you) Adam 经常在吃饭的时候和我讨论这些玩意儿. 我们最后决定做一个”可接入”的锁屏插件, 一个我们能轻松的增删功能来满足自己需求的”仪表盘”.

于是, DashClock 就这么诞生了.

DashClock 与白色

在一两个星期的公司内部消化之后, 大家都觉得 DashClock 不仅仅适合锁屏, 放在主屏上也挺好使的. 这很简单, 只需要再添加一行代码就成了. 但是问题就这么来了: 就像其他的锁屏应用一样, DashClock 上所有的信息都是白色的. 在原生 Android 中, 锁屏背景会自动降低亮度以保证这些白色元素的可读性, 但是主屏幕是没有这样的保护的. 很多小伙伴都在用高对比度的风景图/独特的抽象画/他们最爱的家庭照做壁纸, 虽然这些图片很漂亮也很有意义, 但是他们并不能让你放在主屏幕上的东西更具有可读性. 更悲剧的是, 这种可读性不佳在 DashClock 这样的白色小部件上显得尤其严重.

于是我选择了在文字下方添加一个半透明黑色方块这样一个简单粗暴的方式来解决这个问题. 问题解决了不是吗? 呃, 我并不这么觉得… 实际上, 我并不认为这样能算是解决了, 连接近都不算.

这可是 Android 啊老兄! 人们需要更多的选项, 需要让所有的东西都尽在掌握! 就在加入了黑色方块背景之后, 一个同在 Google 工作的弟兄给我发了一封申请:

功能申请: 把前景色从白色换成 Holo 蓝色, Holo 红色等等, 或者黑色.

我接受了这个申请, 但是当我在 2012 年二月启动 DashClock 并且这个申请收到了 80 个以上的投票时, 我才加入了改变前景色为黑色这么个选项. 在缓和了最要紧的问题同时, 我也一直对这个解决方案感到不满. 这个鲠一直在我的喉咙里卡了非常久 —— 足足九个月啊我的老天 —— 而我每天下班回家的路上都会思考这个问题.

回家的路

灵感来临是一件很有趣的事儿. 它们完全有可能不请自来, 在最出人意料的时间现身. 我个人倾向于认为坐在电脑前面盯着显示器等待好主意送上门来实在是无用功. 通常情况下, 这些东西只会在你出门跑步之类的时候不期而至.

不管怎么说, 我当时正快速行走在初冬的曼哈顿, 林肯中心区那寒风凛冽的路上, 双手绝望地在我的口外套口袋深处寻找温暖的庇护所, 目光飘忽地看着前方的路面, 脑海里充斥着关于如何对付高对比度壁纸和一些相关的破事儿. 是的, 埋头走路会让你错过很多东西 —— 别急, 往下读~

我想要用更优雅的方法来解决 DashClock 前景颜色这个令人讨厌的问题; 我坚持认为问题出在壁纸上, 而不是我这儿. 那么, 我该怎么处理好壁纸呢? —— 我应该如何改善 DashClock, 甚至是其他小部件和所有桌面元素的可读性?

就在那次散步中, 我回忆起了某日我在 Medium 上看到的一幅由精挑细选出来颜色渐变组成的抽象作品 (Design/UX 收藏的背景图). 这幅图对于主屏元素可读性来说是非常理想的, 但是并不是非常私人, 而且这会花上我巨量的时间精力来为每种情绪设计合适的调色组合. 我同样也想起了 Timely, 我最爱的应用之一, 有着一个非常棒的主题设计工具, 这个工具带来了非常好用的背景. 它没有边缘, 你也可以选择比较深的颜色来保证白色元素的可读性.

1-8YgFLavgs3wtDJD6EgHf7Q 我一回到家就立刻打开 Photoshop 画样图. 这些由径向和线性元素渐变组成的壁纸在主屏幕上看起来会怎么样呢? 我很快就意识到他们虽然看起来还不错, 但是有两个问题. 首先, 就像前面说的, 设计调色组合和渐变斜率实在是太花时间了. 其次, 更重要的是, 那些用家庭照和风光照做桌面的人该怎么办? 别忘了, 手机是非常私人的设备. 一堆颜色甩在主屏幕上并不是什么有趣的墙纸. 这很不魔法. 于是我放弃了.

 

回家的路, 终极版

第二天, 就在同一条回家的路上, 我打算四周看看, 试图捕捉到周围的环境中任何可能引来灵感的东西. 然后, 灵感便送上门了. 他就在那里 —— 问题的答案, 开心地在我每天回家的路上等着我.

(GIF 版本)

在百老汇和阿姆斯特丹之间的 65 号大街上, 有 20 个左右的这样的巨大的 LED 广告牌. 他们不断地循环播放各种林肯中心演出或事件的图片广告. 图片之间的切换效果非常丰富, 包括滑入滑出, 渐变淡入… 以及从模糊到清晰的渐变. Bazinga! 照片始于一片神秘的模糊, 而后渐渐伴随着文字信息而进入焦点. “就是我的主屏应该有的样子,” 我想. 模糊的壁纸依然能够在一定程度上传达原图的含义, 同时也消去了锐利而引人注目的边缘.

在你主屏上的模糊照片

我以百米赛跑的速度疾驰回家, 开始探索如何将这么个简单的技法应用到解决主屏壁纸问题上. 我可以直截了当的让你选一张图片, 然后让它模糊, 然后把输出的图片作为你的壁纸 (然后我就发现已经有不错的应用能做到这一点了). 我依然觉得有些不满意, 毕竟有些时候你还是希望能够清晰地看到你的孩子, 或者优美的自然风光.

何不试试动态壁纸? 自 Android 2.1 起, 应用就能够设置动态壁纸, 而这些动态壁纸甚至能响应触摸事件, 这样的话让照片暂时变清晰就不再是个问题了, 用个简单的双击手势就能轻松解决. 从技术层面上看, 这简直是完美的解决方案.

于是在 2013 年十一月的那个晚上, 我开始制作这款动态壁纸的概念原型图, 并且命名为”模糊测试”. 我很快就意识到了仅仅是模糊还远远不够, 于是便决定加入变暗的滤镜作为背景保护. 大概在 Android Studio 里码了几百行代码并且运行之后, 我的壁纸脱胎换骨.

博物馆与灵感

在我制作”模糊测试”的同时, 我也在想很多其他的东西: 我的灵感来自何方? 纽约市是一个巨大的灵感来源 —— 65 大道的街区和林肯中心堪称现代科技与建筑的集大成者. 纽约市同样以它传奇般的博物馆而闻名, 博物馆如 MoMA, 充满想象力的展品和精美的艺术品汗牛充栋. 不仅仅是这些作品本身充满了感染力, 艺术家和她的环境, 甚至是人类历史, 时间的流逝, 宇宙万物这样的更深层的概念, 带来了强烈的视觉与精神冲击. 

我意识到, 我真正想利用这个动态壁纸项目做到的, 并不仅仅是让用户的主屏幕变得好看一点儿, 而是给他们带去灵感. 就像去 MoMA 走一遭能带给我数不清的问题和想法, 这些在我们口袋中的科技产物是可以努力成就一个更崇高的目标的.

旅途之始

接下来就是长达四个月的制造 Muzei 的旅程, 而这段旅程则在 2014 年二月的紧张而令人满足的发布时达到高潮.

在这段四个月的开发中, 我了解到了牛逼的 WikiPaintings 计划, 泡到了我那完美的美术老师未婚妻 (顺便从海量的艺术品里挑选出了现在用着的这些画), 学到了更多我早就想学的关于 OpenGL ES 2.0 的知识, 加入了外部艺术品接口 (就像我在 DashClock 里做的一样), 在 Google 云平台上建立了一个小型的服务器端艺术品管理界面和图像伺服系统, 从 Google 的同事们那儿受到了巨量的反馈, 当然, 也经历了很多在排除问题和捉虫中度过的不眠之夜.

这段旅程和它的结果都让我受益匪浅. Kenton, 在伦敦的一位友人, 最近在 Google+ 上和我分享了这么一个帖子:

1-Br5oAdWXwMlAl3I8A71qoQ

“Muzei” 是俄语单词”музей“音译, 意味着”博物馆”, 而这正是 Muzei 最大的一个目标: 一个为你的 Android 主屏准备的, 活的博物馆. 它的另一个目标是希望能够在你的潜意识里植入一个”去访问一下离你最近的博物馆”的想法, 博物馆是一个你能继续受到来自世界和无数奇迹的启发的地方. Roman 桑大胜利~

回首

于是, 耶, 这毫无疑问是件关于想法是如何形成的, 有趣的事儿.  DashClock 是从一个将他引向美观的锁屏应用的新 API 中诞生的. 而 Muzei 则是从一个为了解决 DashClock 那苦逼的可见性产生的问题中成型的, 但是它却达到了一个全新的高度. 它变成了一个通过开源与扩展性刺激开发者的途径. 它酿就了一件我用来纪念我在 Android 中喜爱的事物与我有幸居住的这个旖旎城市的纪念品. 但最重要的是, 它化作了一条通过我们人类在这个星球上留下的优美的艺术品给人们带去灵感的路. 

Advertisements

7 thoughts on “Muzei —— 意外之念

  1. 可读性,纯白的字,没错,就是这个原因让我怒删了DashClock,重新用起了Store里的移植版Xperia Digital Clock(SONY居然没在自家WALKMAN上配备任何Xperia软件资源简直不可理喻)。

    添加背景色不算解决问题,让用户装另外一个墙纸软件就算是解决问题了?我不敢想象DashClock这样一个举世闻名的软件连一个“show drop shadow”复选框都没有。

    Reply
    • 你根本没有认真看文章. Roman 思考问题的方向和其他人不同. 文章里已经清楚的说明了, Roman 不仅仅是要解决 DashClock 的问题, 而是要解决所有白色元素在浅色壁纸上可见性不良的问题. 加入阴影就是一行代码的事儿, 你觉得 Roman 会满意吗?

      Reply
      • 我当然看了文章,我也发现了他有“解决所有白色元素在浅色壁纸上可见性不良的问题”的宽广胸怀,不过这和我说的话矛盾吗?

        他首先想到的方法居然是加黑底?他能想到加黑底却想不到加阴影?然后转念一想又觉得错的不是他是世界?所以大家都应该换墙纸?这是什么思考的逻辑?

        还是怎么的?大神高高在上喷不得?

      • 可以用的办法很多, 加黑底只是其中一种最容易实现的而已. 你的逻辑很有趣. 如果你不能理解他的逻辑, 那就不要瞎逼逼.

      • 哎哟w

        全世界都在用阴影,在这儿就成瞎逼逼了w

        可以用的办法很多,但能像这位作者这么极端的却是不多w

        我的确不能理解他的逻辑;不过从另一方面讲,能产生做一个所有元素都是FFFFFF的软件+一个模糊滤镜软件来互补这个想法,并且付诸行动,这一点确实很了不起w

        另外你知道DashClock放在桌面上让我觉得最别扭的是什么吗?便是光秃秃的它和有阴影的其他UI文字(比如图标标签)的强烈对比啊w(为了防止乌龙,我还特意去搜了搜原生安卓4.X的UI图,的确是有阴影没错w)

        我逼逼完了。

  2. Pingback: » 团队成员的 Android 实用美观小工具推荐(不定期更新) 锋客网

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s