从同质化到个性化:苹果 App Store 的十年设计发展之路

频道:社交专题 日期: 浏览:2

Things iOS app development history_OmniFocus design evolution_instapaper chrome

Things

最初把Things设计成Mac平台的任务管理软件,后来却在iOS设备上率先发布了1.0版本。制作这款软件的Cultured Code团队在发布信息里提到,基础版本仅用了一个月就完成了开发,这个时间表当时看起来几乎难以实现。

该软件版本缺少与苹果电脑系统同步的途径,也无法运用标注特性,这两项都是非常重要的功能。虽然上线过程十分紧迫,但软件的核心框架目前依然保持原样。一个出色的Flickr图片平台上的相册记录了软件早期的设计情况Things初次进行重要的界面调整是在2012年8月推出的版本,采用了明快的色彩方案,从而摆脱了iOS系统原有的过时感,同时精致的图标设计为其增添了别具一格的韵味。

Things iOS app development history_instapaper chrome_OmniFocus design evolution

2014年9月,Things 2.5对应用界面进行了升级,软件的视觉呈现更加简洁,色彩方案也变得更为柔和。这个全新的设计原本是打算用在Things 3上的,不过制作过程比预想的要耗费更多时间,最终直到2017年5月,Things 3才问世,这次更新在应用外观上带来了极为显著的转变。可以说,几乎所有的图标和界面组件都经过了重新设计,而底层的结构则得以保留。在更新的发布影片里,Cultured Code着重说明了怎样运用动画为软件带来崭新体验,该软件的全新设计曾在2017年荣获Cultured Code的Apple设计奖。

Things iOS app development history_OmniFocus design evolution_instapaper chrome

OmniFocus

初始阶段,App Store里就堆满了任务管理软件,Omni开发小组的OmniFocus就是其中一款,它和Things一样,从一开始就能被下载,两个软件都提供了类似的工具,不过,过去十年里,它们各自走出了不同的设计道路。

OmniFocus的iPhone版本最初采用含个性化图标的朴素表格界面来引导用户,该设计在2008年赢得了苹果公司的设计荣誉。OMNI团队在2010年6月针对iPhone 4的高分辨率屏幕,全面更新了所有软件的视觉元素及图标。该应用经历的重大调整之一,体现在2011年6月新增的智能预测功能上。导航条下方那款带有亮度的日期选取装置,构成了界面设计的一个标志,即便是在2013年iOS 7的改版工作中,其光泽感出现了减弱,而全新的扁平化设计风格,在很大程度上取决于文字色调的分布特征。

instapaper chrome_Things iOS app development history_OmniFocus design evolution

2015年春季的iPhone版本升级后,图标整体色调变深,选中状态下的边框处理得更加圆润。从2012年开始,所有图标都暗藏了复活节的特别设计,即便是长期使用的用户也很难察觉。如果将图标放大观察,可以看到碳纤维纹理其实是无数个微小的Omni标志重复排列而成。

OmniFocus最近的核心升级是今年5月推出的OmniFocus 3.0版本,尽管其中大部分改动都与技术层面有关,不过新版增加了主要视觉元素,并对iPhone X设备进行了特别适配开元棋官方正版下载,从而改善了整体界面观感。

OmniFocus design evolution_Things iOS app development history_instapaper chrome

Evernote

Evernote的形态演变充分展现了2008年后众多软件的流行风格,这款应用最初并非在应用商店推出,而是以桌面程序的面貌出现,并且在面向iPhone的版本问世前,还对其标志性的大象图案进行了更新。

Evernote 1.0与众多初代iPhone软件类似,大量运用了UIKit组件库,并且采用了醒目且光亮的视觉设计元素。2011年的版本升级对标签栏布局进行了调整,同时将“全部记录”界面按照时间序列重新排序。Evernote在2012年针对iPhone 5的宽大屏幕进行了适配,但软件界面依然沿用iOS的标准组件,其导航条和触控键会自动采用iOS 6的哑光质感设计。

Things iOS app development history_OmniFocus design evolution_instapaper chrome

Evernote 5于 2012年11月发布,这款软件进行了彻底的重新构思,是那个时期具有丰富肌理、强烈风格化设计的典范之作。其浮雕式标志、仿古纸张质感和深邃的暗影效果赋予了应用立体感,软件的图标摒弃了陈旧的光泽感,却依然保留了磨砂金属质感。

Evernote在公告博客中说明,他们一般不进行彻底的更新换代,实际上,这种大动作间隔好几年才会出现一次。尽管他们当时并不清楚,但在2013年WWDC大会上宣布推出iOS 7的消息,与Evernote的改版时间相隔不到一年,而且Evernote 5也获得了Apple Design奖。

Evernote运用了iOS 7的极简设计理念,摒弃了所有纹理元素,取消了阴影和斜角效果,在应用导航栏采用了从左至右的明亮渐变条纹,这些条纹的颜色与全新的无图案图标上的色彩保持一致。2017年春季的调整让外观更显圆润,比如运用了更圆润的图形元素,设置成了浅色条形导航界面,记事本式界面加入了淡雅的暗影效果,标签式界面也采用了深色底纹,后来又对文字布局和标签图标做了些微调。

OmniFocus design evolution_Things iOS app development history_instapaper chrome

eBay

eBay的界面可以说在这篇文章提到的10个软件里实现了最突出的变化。虽然苹果公司在2008年WWDC大会上重点介绍了这款应用,但跟如今的完美体验相比,最初iPhone版的eBay显得非常简陋。到了2009年11月,整个应用已经全面更新,采用了更加统一的灰色界面设计。

一年之后,eBay 2.0为接下来几年的软件架构提供了框架,先前独立的销售功能现在整合到了核心服务里,应用的主界面也经过重新设计,最终呈现出符合原生iOS风格的视觉效果。

OmniFocus design evolution_Things iOS app development history_instapaper chrome

2013年的一些版本为eBay带来了新的色彩方案,却依旧维持了原有的核心使用感受。每一次调整都体现了那个时期软件设计快速变化的潮流,这种持续的更新过程让eBay在改版为iOS 7后,整体视觉显得相当顺畅。沿用惯用的色彩搭配和路径安排,能够有效保留用户的操作习惯。

2015年9月,eBay推出了4.0版本,改变了原有布局方式。当时,多数应用将功能收纳在菜单栏中,仅在顶部设置三个标签,分别是动态、商城、促销。新版采用醒目的文字界面和全新图标进行设计,不过这种风格并未保持太久。到2016年5月,eBay已基本复原了应用软件的架构,如今的整体排布,跟2010年发布时的样式更为接近。

Things iOS app development history_OmniFocus design evolution_instapaper chrome

Twitterrific

在App Store推出之前,Craig Hockenberry同The Iconfactory为iPhone打造了首个Twitter程序。在Apple公布正式授权方案之前,爱好者群体制作的越狱系统,让程序员们提前数月就开始了软件编写工作。

Twitterrific 1.0从越狱时期吸收了部分设计构思,从非专业角度审视显得相当出色。这款应用在2008年获得了Apple设计奖项,Twitterrific还是首批采用深色界面的软件之一,如今这种设计风格正日益流行。Twitterrific的构思历程更侧重于展现Twitter平台的演变历程,而非设计潮流。这款应用的各个版本都映射出Twitter平台特性与功能的演进。在初期阶段,这些功能多由其他开发者独立首创。

instapaper chrome_OmniFocus design evolution_Things iOS app development history

二零一二年,Twitterrific 5.0把所有导航都挪到了界面最上方,并且运用了全部定制的界面组件。这种布局方式一直沿用至今。同样吸引人的还有这款软件的设计,尤其是它的图标。Twitterrific是首个运用飞鸟图案的Twitter客户端,同时也是少数依旧维持时尚界面的iOS软件之一,其标志形象Ollie在iOS 7升级过程中几乎未作调整,如今观感依然如同2012年般充满活力。

Things iOS app development history_OmniFocus design evolution_instapaper chrome

Instapaper

Instapaper是一款以阅读为核心的应用软件,它将内容置于Chrome之上的地位,所以该应用在开发时就迎合了用户的使用习惯。实际上,软件里部分最为显著的界面调整,是受到iOS系统自身更新所影响的结果。iOS第六版和第七版里,导航条和按钮的外观都做了调整,这让应用能获得两个额外的公开升级机会。

然而,认为这个软件停滞不前是一种错误看法。这款应用最初在应用商店提供免费获取,随后很快便推出了名为高级版Instapaper的收费版本。2011年秋季,Dribbble的联合创始人Dan Cedarholm设计的新标志投入使用,软件同时完成了对数据读取感受及更底层界面组件的显著改进,这个标志后来在WWDC会议的演示文稿中被用来呈现优秀标志的相关内容。

OmniFocus design evolution_Things iOS app development history_instapaper chrome

二零一三年四月,Betaworks从创始人马可·阿蒙特手中购得了Instapaper,并着手以别样的路径推进这款软件的演进。在Betaworks的引领下,首个重大迭代于二零一三年九月问世kaiyun全站网页版登录,那是一个针对iOS 7系统的升级版本。Pinterest在2016年8月购置了Instapaper,当时该公司保证该软件会继续运作。在现在的管理之下,即便该软件完成了对iPhone X的Super Retina显示屏的升级,其界面风格依然维持着比较稳定的状态。

instapaper chrome_Things iOS app development history_OmniFocus design evolution

PCalc

PCalc的起源可追溯至App Store问世前十余年。1992年,开发者詹姆斯·汤姆森为Mac平台创建了首个版本,此后其演进从未停止。这款计算器应用在iOS系统上最初就配备了专属打造的操作界面,并且逐步增添了丰富的主题方案及个性化设置。这里有太多要点,所以我选择了几个里程碑式发展进行说明。

PCalc在iPhone上的初始版本源自Mac仪表板小工具,能够与经典iPhone界面完美融合,采用了有光泽的按键和深蓝色LCD面板设计,与应用图标风格协调,2008年12月,推出名为Twilight的流行主题,该主题增加了更丰富的图形元素,并采用了类似iOS默认计算器应用的色彩搭配方案。Twilight后续升级了其视网膜图形功能,能够适配更宽阔的屏幕,它至今仍是应用程序里的一项可用配置。

Things iOS app development history_OmniFocus design evolution_instapaper chrome

为了配合iOS 7的扁平化设计风格,PCalc更换了新主题方案,定名为“Samurai”,并配备了相应的图标,在应用配置界面里,依然可以选用先前的主题样式,PCalc的图标在2016年3月又进行了修改,自从iOS 10.3版本推出之后,苹果公司允许第三方软件动态调整应用图标,无需经过商店的新版本审核流程PCalc从2017年5月起开始广泛运用这一特性,提供了多种多样的替代图标供用户挑选,其后又陆续增加了其他元素。

PCalc历经十年演变,已突破iPhone自带计算工具的功能瓶颈,近期版本增添诸多新颖设计,诸如AR运算界面,同时iPhone X的屏幕特性为武士风格界面融入了弧形元素

instapaper chrome_OmniFocus design evolution_Things iOS app development history

Yelp

Yelp的iPhone版本和Facebook类似,其界面在多年里经历了显著调整,不过始终维持着统一的导航条配色方案,以此确保品牌形象的鲜明辨识度,该应用得益于与Apple Maps的紧密配合,正逐步赢得更多用户青睐

Things iOS app development history_OmniFocus design evolution_instapaper chrome

二零零九年八月,Yelp在iPhone版本软件里藏了一个基础的增强现实界面,主要用来找到周边商家。那个时期,这还只是个稀罕玩意儿,但现在ARKit软件流行起来,大家才觉得这项功能当初真是高瞻远瞩。

二零一零年一月,Yelp推出了一款具备九宫格滑动功能的新版首页界面,紧接着该平台持续优化着类似布局的核心视觉,直至二零一三年十月进行了一次整体改版,新版显著提升了界面的简洁度kaiyun官方网站登录入口,并且强化了“周边”这一功能入口的视觉地位。

Yelp近期版本升级,将搜索范围从单纯的位置信息扩大到更个性化的内容呈现。这种整合多种数据来源的发掘方式,已成为优化用户感受的流行做法。iOS 11对应用商店的全新设计,正是凭借这一思路获得了显著成效。

Things iOS app development history_instapaper chrome_OmniFocus design evolution

图标发展

将十款重点软件的标志演变一一并列对照,可以清晰看到它们各自探索的与众不同的发展路径。过去十年间,部分标志维持了较高稳定性,仅进行了少量调整,另有一些则每数年就会进行一次全新构思。依照时间顺序梳理,整个领域的设计动向一目了然。

App Store刚上线时,闪亮的标志主导着整个界面,系统会自动添加这种光亮效果,设计师们必须在开发工具里特别关闭才能去掉,后来随着应用越来越完善,大部分软件都去掉了这种默认效果,转而使用更为精细的个性化设计

人们普遍认识到,iOS 7对优质图标的评判方式进行了全新定义。那些带有密集纹理和立体渲染效果的设计,往往与苹果推出的新式图标风格不太协调,并且部分设计还与更新后的圆角尺寸产生了矛盾。随着设计师和开发人员逐步建立新的图标设计规范和优选方案,精细化的处理手法以及更为内敛的色彩搭配,已经逐渐融入众多图标的设计实践中。

instapaper chrome_OmniFocus design evolution_Things iOS app development history

个性化

初期的苹果手机软件一头扎进一个全然陌生的大千世界,除了苹果公司自家的老式应用外,软件的界面和运作模式没有既定的范式,设计师和程序员得以毫无拘束地大胆探索。

即便如此,众多早期软件彼此间高度雷同,这是因为使用者与制作者共同探索出最优解法,初期意见与持续测试迅速左右了每款软件的演进路径,数年间,多数软件寻得专属路径,并营造出独树一帜的格调与特质,伴随设备性能的增强,设计上的分歧慢慢从固定画面演变为动态效果和可变界面。

iOS 7推出的界面设计规范让设计和编程人员重新拿起画笔,很多软件开始依靠用户感受到的体验来标新立异,而不是单纯追求视觉效果。它们常常运用周密的全面分析和未来趋势的预判,确保新颖有趣的内容不会被埋没。智能化的工作流程简化了日常操作步骤,有效缩短了用户完成任务的周期。优秀设计超越像素细节的意义,促使近年来用户界面体验(UI)设计变得广泛。

下一个10年

2008年,当时没有人能够精确预见到App Store将如何演变。创新往往由创新所驱动,iPhone用户的偏好和用法决定了开发者会开发哪些类型的应用,这一点在未来同样适用。即将面世的iPhone和iOS版本,必将以出人意料的方式重塑应用领域。未来某天,一种全新的设计风格可能会风靡全球,即便到了十年之后,前景依然充满期待。

网友留言(0)

评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。