网络上每年都会有大量设计趋势分析,但是很多时候只是分析了一些表层,并没有深入。趋势,几乎每一年都在变,如何透过现象看本质?我觉得方法之一是可以尝试把时间线拉长,从一个更高的维度来看待趋势演变,并通过对自身产品的品牌定位来分析是否需要跟随趋势去设计。
苹果公司的设计一直是设计领域的风向标,本文是通过回顾 App Store 里最经典的10款应用的设计演变,来横向看待设计趋势变化之路。
一篇简短的博客帖子在 Apple 官网上发布后,标志着近段历史上最重要的设计机会之一来临了。史蒂夫乔布斯在这篇博文中写道,「我想说的是:我们希望在 iPhone 上有原生的第三方应用,并计划在二月份让开发人员拿到 SDK」。短短不到一年,在一个安静的周四上午,App Store 向 iPhone 用户开放了超过500个应用。
几乎没有什么现代创新比 iPhone 应用更能改变我们的生活和与周围世界的互动方式。在发布会上发布的首批500个应用的开发者们有了一个特殊的机会,可以塑造自那以后创建的数百万个应用的设计方向和交互策略。
为了庆祝 App Store 成立10周年,让我们一起来研究下10个原创 App Store 应用的视觉演变。
一、应用
就本文而言,我所聚焦的点是在于应用的显著视觉变化上,这些应用在第一天就可以下载,直到今天仍在保持更新。虽然其中许多应用也有 iPad 版本,但本文主要讲的是 iPhone 版本上的一些变化。
1. iTunes Remote
Apple 通过在 App Store 上发布一些自己的软件,为其他开发人员树立了标杆。最初开发的两个应用是 Texas Hold’em 和 Remote,这是一个简单的应用,用于通过 Wi-Fi 控制 Mac 或 Apple TV 的 iTunes库的播放。2011年,Texas Hold’em 应用下架了,但是 Remote 仍然在保持更新。
从一开始,Remote 的设计就很受 iPhone 版 iPod 应用(现在叫做 Music)的外观和感觉的影响。事实上,和现在的播放图标在外观上本质上是相同的。2.0版带来了由 Louie Mantia 重新设计的图标。这两个应用开始在 iOS 6 上出现了分歧,当时音乐应用完全重新设计并设置了一个音量滑块,可以动态响应你在 iPhone 上的移动操作。Remote 保持了更保守的外观,图标也再次更新以匹配 Mac 上 iTunes 11 的风格。
Remote 的第一次重大改版是在 iOS 7 上完成的。与音乐应用的纯白色主题形成对比的是 Remote 的深色模糊背景,并以专辑作品的颜色来配色。2016年,Apple 发布了针对第4代 Apple TV 的 Apple TV Remote 应用,这是一个合乎逻辑的迭代,似乎取代了 Remote。不久之后,Remote 被重命名为 iTunes Remote。虽然这款应用仍然能下载,但此后很长时间,它几乎都没有更新。直到今年6月,才做了一次全新设计并对 iPhone X 做了适配。
iTunes Remote 的这次更新重新回归到更具保守的视觉外观,让人联想到 iOS 11 音乐应用,但放弃了大标题和卡片的设计,转而支持传统导航。iTunes Remote 使用蓝色来匹配更新的图标,而不再是原来的深色色系。
2. Facebook
与 iTunes Remote 的温和变化形成鲜明对比的是,Facebook 应用在过去十年中不断进行重新设计,而且频率越来越高。如果想要完全展现 Facebook 的视觉更新历史可能会写满一整本书,所以我在这里仅选取了8个最重要的更新。
Facebook 在 iPhone 上的更新实际上在 App Store 存在之前就已经开始了。这款应用最初是作为 iPhone 2007年10月推出的首批网络应用之一。除了标志性的蓝色导航条外,App Store 中的1.0版本现在几乎认不出 Facebook 了。即使是图标也缺少白色标志性签名「f」。应用的消息流本质上是一个带有五个标签栏并装饰好的表格视图:主页,个人资料,朋友,聊天和收件箱。2.0版本也是基于同样的理念,只是在主标题栏下新增了两层导航。
Facebook 在2009年7月的3.0版本中,第一次引入了一个3×3网格图标来帮助解决应用不断膨胀的导航。早期的截图显示了这种图标,但是这个设计从来没有在公开版本中发布过。
2011年10月,Facebook 4.0率先采用了导航「汉堡菜单」。在接下来的几年里,这款应用的普及加速了各种应用和网站在设计元素上的创新。在第4.0版之后,Facebook 的设计时间表变得更加具有挑战性。Facebook 的外观开始迭代得更快,并且经常是逐步推出,而不是一次性在主版本中全面铺开。
2013年4月,Facebook 在 iOS 应用中尝试了「Chat Heads(译者注:浮动聊天头像)」,头像可以单独弹出并能移动,在点击时能直接打开聊天窗口(译者注:youtube上有一段视频是介绍这个功能的,感兴趣的可以看看https://9to5mac.com/2013/04/16/facebook-for-ios-to-gain-chatheads-ipad-app-redesign-today-brichter-working-on-home/)。iOS 7 的新风格要求重新设计导航栏。标签栏图标在更新之间仍有规律地重新定位和设计。
Facebook 的一些设计挑战来自其运营规模。 与许多小应用不同,Facebook 必须在大量平台上为其客户提供一致的体验,而不仅仅是在 iOS 上。 2017年8月的更新,是在尝试统一 iOS,Android 和 Web 上的信息流设计,其评论风格看起来也更像是 Messenger 对话。
3. Things
Things 一开始是作为一个 mac端的任务管理工具开发的,但是最后的1.0版本却是在 iOS 上发布的。开发这款应用的作者 Culture Code 在发布会上指出,最初的版本在一个月时间内完成——是在一个听起来似乎不可能完成的时间内完成的。
1.0版本与 Mac 版本两个关键问题是没有办法同步并且不能使用标签。尽管开始有压力,但这款应用的基本架构一直延续到今天。一款优秀的 Flickr 相册记录了应用的早期设计阶段。第一次主要的更新是在2012年8月2.0版本的发布,有了一个全新的外观和一些个性的图标设计。
2014年9月,Things 2.5 版本再次更新了 UI,使其外观更加扁平,配色更浅。最初计划对 Things 3 版本进行重新设计,但开发花费的时间比预期的要长。2017年5月发布的 Things 3 是这款应用迄今为止最重大的一次改版。几乎每个图标和 UI 元素都被重新设计,仅保留了底层布局。在更新的发布视频中,Cultured Code 特别强调了如何使用动画为应用提供全新的感觉。在2017年,重新设计的 Things 获得了苹果设计大奖。
4. OmniFocus
即使在它的初期,App Store 也已经有非常多的任务管理应用。 来自 The Omni Group 公司的 Things 和 OmniFocus 两款应用从 App Store 上线第一天就有了。 虽然这两款应用提供类似的功能,但在过去的十年中,它们都有各自独特的设计方向。
OmniFocus 的 iPhone 版最初采用简单的表格视图和自定义图标导航,获得了2008年的苹果设计大奖。2010年6月,为了支持 iPhone4 的视网膜屏幕,Omni 集团重新设计了界面和应用图标。这款应用最大的变化之一是在2011年6月增加了预测模式。导航条下方光滑的日期选择器成为了一个定义用户界面的元素,直到2013年为了 iOS7 而重新设计并放弃了光泽质感。新的扁平界面很大程度上依赖于文本颜色来感知层级关系。
2015年春季的更新给 Thines 的 iPhone 版本换上了一个深色的应用图标,图标中的图形拐角也变得更加柔和。自2012年以来,每个图标都包含一个彩蛋,即使是老用户也可能不知道。把图标放大,才会注意到原来图标中的纹理实际上是由微小重复的 Omni 标志组成的。
最近一次重大更新是在5月份发布的 OmniFocus 3.0。虽然许多更改都与功能逻辑相关,但大标题和对 iPhone X 的优化仍然使得 UI 焕然一新。
5. Evernote
Evernote 的风格迭代完美地展现了2008年以来的许多主要软件的设计趋势。在 App Store 推出之前,这款笔记记录和组织工具最初是作为桌面应用开发的,在 iPhone 上发布之前,它已经用上了其标志性的大象 logo。
与许多早期的 iPhone 应用一样,Evernote 1.0 非常依赖于 iPhone 的 UIKit 和写实的图标。2011年的版本重新设计了标签栏,并将按时间顺序对「所有笔记」视图进行了优化。当 Evernote 在2012年增加对 iPhone 5 更大屏幕的支持时,应用仍然使用默认的 iOS UI 元素。导航条和按钮自动读取 iOS 6的 UI 组件。
2012年11月,Evernote