很少有创新的事物能像手机应用一样在改变我们的生活方式,让我们与周围的世界互动。最开始的那500个开发者很幸运的有机会为未来数百万个应用程序提供设计方向和交互方式,为了庆祝App Store成立10周年,让我们来研究一下10个原创的App Store应用程序的界面设计演变。
一、应用程序
关于应用程序这部分,我们关注的10款应用到今天为止都还能下载的,有些近几天都还在更新。虽然很多应用提供了iPad版,但是这次我们主要研究iphone版的界面设计的变化。
1,iTunes Remote
Apple通过在App Store上发布一些自己的软件,为其他开发人员树立了榜样。Apple最初创建的应用有两个:Texas Hold'em(德州扑克游戏)和Remote,Texas Hold'em在2011年下架了。而Remote今天还在,Remote是一个简单实用的应用,通过Wi-Fi控制Mac或Apple TV的iTunes库的播放。
从一开始,Remote的设计就受到iPhone iPod应用程序(今天称为音乐)的界面和感觉的影响很大。事实上,正在播放的视图在界面上基本相同。2.0版带来了由Louie Mantia设计的新图标。这两个应用程序从iOS 6开始,变得不一样,图标再次更新以匹配Mac上iTunes 11的设计风格。
Remote 的一次全新设计发生在iOS 7,与音乐应用程序的鲜明白色主题不同,Remote采用了深色的模糊背景。并与专辑封面的颜色融合。2016年,Apple发布了针对第4代Apple TV 的Apple TV Remote应用程序,这是改变似乎要取代Remote。但不久之后,Remote被重命名为iTunes Remote,该应用程序一直保持原来的界面继续可供下载,直到今年6月,Remote才更新了全新设计并支持iPhone X。
2,Facebook
与iTunes Remote的更新相比,Facebook在过去时间不断改进设计,而且修改的频率越来越高,算上小修小补,Facebook都可以出书了。我们选了其中比较重大的8个变化。
Facebook在2017年10月就开始在iPhone上使用了,那时候是作为网页版应用。如果不显示顶部的蓝色导航,App Store中Facebook 1.0版几乎无法识别。而且图标是用人物头像,而不是标志性的“f”。底部导航为:主页,个人资料,朋友,聊天和收件箱。2.0版基于相同的设计概念,在主标题栏下添加了二级导航。
Facebook 3.0于2009年7月首次亮相,并推出了3×3网格图标,以帮助解决应用程序的气球导航问题。早期的屏幕截图显示了一个完全蓝色的平铺网格,但这个设计从未在应用程序的公共版本中发布。
2011年10月,Facebook 4.0 采用了汉堡包导航。在第4版之后,Facebook的设计更新变得更频繁了。应用程序的界面开始更快地迭代,并且设计的修改通常是逐步推出而不是推倒重来。
2013年4月,Facebook在iOS应用程序中使用“Chat Heads ”,允许用户一边爪机一边聊天。
Facebook的设计挑战主要来自其亿级别的用户基数。与许多小型应用程序不同,Facebook必须在各平台上为大量的用户提供一致的体验,而不仅仅是苹果的设备上。2017年8月的更新尝试统一 iOS,Android和网络上的新闻Feed 设计,其评论样式看起来更像是Messenger对话设计。
3,Things
Things原来上Mac上的任务管理工具,所以有机会率先在iOS上出现。开发人员Cultured Code称,iOS的应用只用了1个月就开发完成,完成了一项不可能的任务。
Things 1.0 不能与Mac同步,而且不能标记。下图是早期的设计草图。
2012年发布的2.0版本是比较大的一次更新。背景变得更干净了。图标也更小巧精致有个性。
2014年的2.5版本,设计变得扁平化,颜色更浅。2017年5月发布的应用是界面上最大的一个变化。布局差不多,但是图标和ui元素都重新设计。设计师Cultured Code特别强调了如何使用动画为应用程序提供全新的感觉。重新设计的应用获得了2017年Apple设计奖。
4,OmniFocus
App Store从一开始就提供了很多任务管理类的应用,来自Omni公司的Things和OmniFocus是两个重量级应用。虽然两个功能类似,但是两个应用的界面设计发展轨迹却各有千秋。
OmniFocus for iPhone最初使用简单的桌面视图和自定义底部导航,赢得了2008年Apple设计奖。Omni Group在2010年6月为iPhone 4 重新设计了高清图标。而2011年6月开始,界面发生了重大变化,头部多了一个日期选择。2013年针对iOS 7的推出,设计的界面变得扁平化。新的设计依赖颜色来提升空间感。
2015年春季的app 图标更新使用了黑色的“☑️”。从2012年开始,每个图标都包含了彩蛋。图标放大,您会注意到碳纤维纹理实际上是由微小的重复Omni徽标组成。
5,Evernote
Evernote的发展代表了很多软件自2008年以来的设计趋势。Evernote原来是在电脑端出现的,App Store推出之后,Evernote更为识别性高的大象图标。
像许多早期的iPhone应用程序一样,Evernote 1.0严重依赖于UIKit,大量使用高光效果。2011年重新设计了标签栏,按时间顺序排列笔记。Evernote在2012年推出了针对iPhone 5的新界面,但是仍然使用默认的iOS UI元素。
2012年11月,Evernote 5推出了全新的界面设计。采用了卡片式的展示方式。浮雕效果,阴影效果的运用看上去更有深度。
2013年开始,Evernote 全面拥抱扁平化设计。每个纹理,阴影和斜角都消失了。一个明亮的从左到右的渐变条纹的导航栏设计,与新的无纹理图标上使用的颜色相匹配。2017年开始,设计又进一步极简化。白色的头部导航,黑色的底部标签栏。
6,eBay
eBay的设计可以说是这篇文章中10个应用程序中最引人注目的转变。在WWDC 2008上,eBay特别的登台展示。但与今天的app相比,最初的版本是相当的简陋。2009年11月,整个界面的背景换成了灰色。
一年后的2.0版本才是真正的设计,也为未来几年的设计奠定了基础。
2013年的设计像是重新披了一件外衣,而用户体验跟以前保持一致。
每个版本的变化都反映了整个时代快速变化的设计趋势,设计品味。
2015年9月,eBay 4.0 打破了常规。大多数应用程序的功能都放在汉堡包菜单下面,只留下顶部的三个标签:“活动,商店,销售。”然后这个设计很快没有继续了,2016年,ebay又重新恢复了原来的布局方式。如今的布局与2010年相比,又更加类似了。
7,Twitterrific
在App Store宣布之前,Craig Hockenberry和The Iconfactory为iPhone 设计了第一个 Twitter客户端。应用是放在越狱市场的。
App Store上的Twitterrific 1.0从越狱版上借鉴了一些设计元素。它获得了2008年的Apple设计奖。Twitterrific也是最早使用如今越来越流行的深色主题的应用程序之一 。但Twitterrific的设计故事更多地讲述了Twitter作为服务的历史,而不是设计趋势。每次更新都反映了Twitter平台的特性和功能的变化。在早期,这些功能通常由第三方自己开创的。
2012年,Twitterrific 5.0将所有导航移动到顶部,并使用完全自定义的UI元素。类似的布局一直持续到今天。就像应用程序的设计一样迷人,Twitterrific的图标使用了现代化的鸟类图像,而且从一开始到现在,基本上没有什么变化。
8,Instapaper
一个专门为阅读而设计的应用应该优先考虑内容而不是浏览器,因此Instapaper的设计从一开始就是非常自然简单的。但是,由于iOS本身的变化,应用也在外观上又一些变化。导航栏和按钮样式在iOS 6和7中都进行了更改。
9,PCalc
PCalc的故事从App Store推出的前10年就开始了,开发人员James Thomson 于1992年为Mac 发布了应用程序,并一直延续至今。PCalc从一开始在iOS运行就是完全自定义的界面,并且有很多自定义的选项。
用于iPhone的PCalc 的第一个版本是从Mac仪表盘小部件移植而来。有光泽的按钮和深蓝色LCD面板与应用程序的图标相匹配。在2008年12月,一个名为Twilight的热门主题添加了更加详细的图形和类似于默认iOS计算器的配色方案。Twilight后来更新了视网膜并支持更大的显示屏。
2013年,PCalc采用了名为“Samurai”的新默认主题和图标,适配iOS 7的扁平设计。PCalc的图标在2016年3月再次更新。自iOS 10.3发布以来,Apple已允许第三方应用程序动态更改其应用程序图标,而无需向商店提交新版本。PCalc于2017年5月开始充分利用该功能,推出了各种各样的备用图标供您选择。
10,Yelp
与Facebook一样,Yelp的iPhone界面多年来发生了重大变化,但由于使用了一致的导航栏颜色,因此品牌识别度非常高。由于与Apple Maps的深度集成,该应用程序越来越受欢迎。
2009年8月,Yelp将一个基本的增强现实界面隐藏在iPhone应用程序中,用于定位您周围的企业。虽然它当时只是一个新奇事物,但鉴于ARKit应用程序的兴起,这一功能在今天仍然具有先见之明。
2010年1月,Yelp主屏幕推出了 3×3网格快捷菜单。界面在风格上不断完善,直到整个应用程序在2013年10月重新设计,界面更加扁平,更加突出“附近”标签。
Yelp的更新通过显示与您相关的附近的内容,展示更多基于地理位置的内容。
二、图标
比较所有上面列举的10个应用的图标迭代。在过去十年中,一些图标保持相当一致,只进行了细微的改进,其他图标每隔几年就重新设计一次。
在App Store推出时,高光的图标设计占统治地位。随着设计师和开发人员逐渐建立了图标设计规范和多年来的实践经验,细节和更多色彩的运用已经悄悄出现在许多图标中。
三、个性
早期的iPhone应用进入的是一个未知的世界,除了苹果公司自己的小型股票应用外,应用的界面和交互方式没有先入为主的观念,设计师和开发人员可以完全自由地进行实验。
尽管如此,许多早期的应用看起来感觉非常相似,因为用户和开发者都在互相测试。早期的反馈和反复试验很快就会影响每个应用的发展方式。然而几年内,大多数应用都找到了自己的方式,并开发出独特的风格和个性。随着硬件功能的改进,设计差异逐渐从静态图形转变为动画和动态界面。
在iOS 7引入的设计规范将设计人员和开发人员又重新拉回来,许多应用开始通过感官体验选择来区分自己,而不仅仅是界面设计的不一样。所以用户体验的重要性导致近年来用户体验(UX)设计的普及。
四、未来10年
2008年,谁也无法准确预测App Store会发展到如今的繁荣。创新源于创新,iPhone用户的品味和习惯塑造了开发人员不断的创新。
可以说,未来是不可预测的,即将推出的iPhone和iOS版本肯定会以不可预见的方式改变应用的格局。一个新的设计趋势明天将席卷全球。即使在10年后,未来也是令人兴奋的。