赞助商
立即赞助

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

UI设计3年前 (2021)更新 流光
1.9K 0 0

网络每都会设计趋势分析,但是很多时候只是分析了一些表层,并没有深入。趋势,几乎每一年都在变,如何透过现象看本质?我觉得方法之一是可尝试把时间线拉长,从一个更的维来看待趋势演变,并通过对自身产的牌定位来分析是否需要跟随趋势设计。

苹果公司的设一直设领域的风向标,本文通过回顾 App Store 里最经典的10款应的设计演变,来横向看待设计趋势变之路。

一篇简短的博客帖子 Apple 官网发布后,标志近段历史重的设机会之一临了。史蒂夫乔布斯这篇博文中写道,「我的:我们希望 iPhone 原的第三方应用,并划二月份让发人员拿到 SDK」。短短不到一,一安静的周四午,App Store 向 iPhone 用户了超过500应用。

几乎没有什么现代创新比 iPhone 应用更能改变我们生活和与围世界互动。在发布会上发布首批500个应用开发者们有了个特殊会,可以塑造自那以后创数百个应用设计和交互策略。

为了庆祝 App Store 成立10周年,让一起来研究下10个创 App Store 应用的视觉演变。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

一、应用

本文而言,我所聚焦是在于应用显著视觉变化上,这些应用在第天可以下载,到今天仍在保持更新。虽然其许多应用也有 iPad 版本,本文主要讲是 iPhone 版本上些变化。

1. iTunes Remote

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

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 风格。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

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

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

与 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网图标来帮助决应用不断膨胀的导航。早期的截图显示种图标,但是个设计从来没有在开版中。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

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

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

Things 一开始是作为一个 mac端的任务管工具开发的,但是最后的1.0版本却是在 iOS 上发布的。开发这款应的作者 Culture Code 在发布会上指,最初的版本在一个月时间成——是在一个听起来似乎可成的时间成的。

1.0版本与 Mac 版本两关键问题办法同并且不能使用标签。尽始压力,但这款应用的基本架构一直延续到今天。一款优秀的 Flickr 相册记录了应用的早设阶段。第一次主的新20128月2.0版本的发布,了一全新的外观一些性的图标设。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

20149月,Things 2.5 版本再次新了 UI,使其外观加扁平,配色浅。初划对 Things 3 版本行重新设,但发花费的时间比预的。20175月发布的 Things 3 这款应用迄今止重的一次改版。几乎每图标 UI 元素都被重新设,仅保留了底层布局。新的发布视频中,Cultured Code 特别强调了如何使用动画应用提供全新的感觉。2017,重新设的 Things 获得了苹果设奖。

4. OmniFocus

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

即使在它的初期,App Store 已经有非多的任务管应。 来自 The Omni Group 公司的 Things 和 OmniFocus 两款应从 App Store 上线第一天就有了。 虽然这两款应供类似的功,但在过的十年中,它们都有各自独特的设计方向。

OmniFocus 的 iPhone 版初采用简单的表格视图自义图标导航,获得了2008的苹果设奖。20106月,了支持 iPhone4 的视网膜屏幕,Omni 集团重新设了界面应用图标。这款应用的变化之一20116月增加了预测模式。导航条下方光滑的日选择器了一义用户界面的元素,直到2013了 iOS7 重新设并弃了光泽质感。新的扁平界面很程度依赖于文本颜色感知层级关系。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

2015春季的新给 Thines 的 iPhone 版本换了一深色的应用图标,图标中的图形拐角也变得加柔。自2012以,每图标都包含一彩蛋,即使老用户也可能不知道。把图标,会注意到原图标中的纹理实际由微小重复的 Omni 标志组的。

最近大更新是在5月份发布 OmniFocus 3.0。虽然许多更改都与功能逻辑相关,大标题和 iPhone X 优化仍然使 UI 焕然新。

5. Evernote

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

Evernote 的风格迭完展了2008以的许多主软件的设趋势。 App Store 推出之,这款笔记记录组织具初作桌面应用发的, iPhone 发布之,它已用了其标志性的象 logo。

与许多早期 iPhone 应用样,Evernote 1.0 常依赖于 iPhone  UIKit 和写实图标。2011年版本新设计了标签栏,并将按时序「所有笔记」视图进了优化。 Evernote 在2012年增加 iPhone 5 更大屏幕支持时,应用仍然使用默认 iOS UI 元素。导航条和按钮自动读取 iOS 6 UI 组件。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

2012年11月,Evernote 5发布。这款应用从头开始新设计,是那个时代典型纹理丰富、主题鲜明设计范例。浮雕图标,纸张纹理和阴影赋予了应用空感。应用图标去掉了过时泽质感,保留了属泽。

在一篇博文中,Evernote 说:「通常不会进行全盘的重新计。事实上,至少每隔年才会发生一次。」虽然当并不知道,仅在一年后的2013年 WWDC 上发布了 iOS7 ,Evernote 就在重新计了。之后的 Evernote 5 也获得了苹果计大奖。

Evernote 完拥抱 iOS 7 的设计趋势。每个纹理、阴影和斜角被替换。一个亮的从左到右的渐变条在应用在导航条上,与新的文图标上使用的颜相匹。2017年早时的一次更新使设计更加柔和,有一个更柔和的图标、浅导航条、带有微妙阴影的便签卡和一个黑的标签条。字和标签栏图标也同步进行更新。

6. eBay

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

eBay 的计可以说是这篇文章10个应用中最引人注目的一个。 尽管苹果公在 WWDC 2008大会上调了它,但今的致体验相比,始版本的 eBay for iPhone 是做的非常粗糙的。 2009年11月,整个应用已经重新考虑了更加一致的灰色用户界面。

一年的 eBay 2.0 为未来几年何设计款应用奠定基础。尽管 eBay 此前曾推出一款独立的销售应用,但现在一功能已经融主流验。款应用的主界面也得到更新,最终让人得它是一个正的 iOS 设计。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

在2013年的几次更新中,eBay 在持基用户验的同时,也创造新的用户验。每一个变化反映个时代快速展的软件设计品味。一持续不断的迭代意味着,在为 iOS 7 重新设计该应用时,eBay 的面貌生相当平稳的转变。使用熟悉的和导航次结构有助存用户的忆。

2015年9月,eBay 4.0 打破了固有设计模式。应的大分功都放在汉堡菜单里,在最上面只剩个标签:「、购物、销售」,但这个设计没有持续太长时间。到2016年5月,eBay 几乎全恢复了应的组织结构,如今的布与2010年推的设计更接了。

7. Twitterrific

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

在 App Store 之前,Craig Hockenberry 和 The Iconfactory 就已经为 iPhone 构建一个 Twitter 客户端。 得益苹果烧区开的越狱软件,开者们在苹果提供官方工具的时就已经有几个月的应用编写经验。

Twitterrific 1.0 从越狱版本借鉴了设计元素,从普通户看来,它非光彩照人。它在2008年获得了苹果设计奖,Twitterrific 是首使深色题的应之一,这种格在今天看来很受。但 Twitterrific 的设计迭代更多地反映了 Twitter 作为一种务的历史,而并非设计趋势,每次更都反映了 Twitter 平台的特性和功的变。在早期,这些特征通是需要第方自己创的。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

2012年,Twitterrific 5.0 将有导航都移到界面顶,并使全定制的 UI元素,类似的布一直延续到今天。就像这款应的设计一样吸引人的是它的图标。除了是第一个使鸟类图标的 Twitter 应之外,Twitterrific 是为数多的几个 iOS 应之一,这些应在保留了丰富细节图标的同时看起来更现代。这款应的吉物奥利(Ollie)在升级到 iOS 7 的过程中几乎没怎么变过,现在看起来还是和2012年一样。

8. Instapaper

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

一款为阅读而设计的应用将内容置 chrome 之上,因此 Instapaper 的设计从一开始就很自地受到。上,一最明显的视变化来自 iOS 身的改变。iOS 6 和7改变导航条和按钮样式,给应用两个「免费」的视更新。

当然,要说这款应没有进,是大准确的。Instapaper 最初是在应商店作为免载开始的。久之后,一个名为 Instapaper Pro 的付版本发布了。2011年秋季推了由 Dribbble 联合创始人 Dan Cedarholm 设计的一个图标,大大改善了阅读体验和更深层次的 UI元素。这个图标后来现在 WWDC 的一个于伟大图片的 PPT 上。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

2013年4月,Betaworks 从创始人 Marco Arment 手中收购 Instapaper,这款应走上了一条同的道路。 Betaworks 指导的第一次重大更于2013年9月发布,恰逢 iOS 7 更。 Pinterest 于2016年8月收购了 Instapaper,当时该公司承诺这款应将继续更。 在目前的有权,即使在支持 iPhone X 的超级视膜屏的更后,Instapaper 保持了相当一致的视觉效果。

9. PCalc

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

PCalc 的故开始应用店推出前的年。开者 James Thomson 在1992年 Mac 的初始版,它的展一直延续到今天。PCalc 从一开始就在 iOS 上推出一个完定的界面,提供越来越的主题选择和定选项。里有太能强的地方,所以我打只选择几个里程碑来说明。

iPhone 的第一个 PCalc 版本是从 Mac dashboard 的一个小件移植过来的,但是与经典的 iPhone UI 很好地结合在了一起。带光的按钮和深蓝色的 LCD 面与应的图标相匹配。2008年12月,一个名为 Twilight 的热门题被添进了 PCalc 中,有点类似于 iOS 默认的计算器应。直到现在,它仍然是应程序中的一个项。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

PCalc 采了名为「Samurai」的默认题和匹配图标,适应了 iOS 7 的扁平格。 应程序设置中仍然供一些较经典的题。 PCalc 的图标在2016年3月再次更。自 iOS 10.3 发布来,Apple 已允许第方应程序态更改应程序图标,而无需向商店交版本。 PCalc 于2017年5月开始充分利该功,推了各种各样的备图标供您择, 在后续更中添了更多容。

过10的发展,PCalc 已突破了 iPhone 算器应用的实际限制,近的新已享受到了一些具创新性的自由,比如 AR 算器模式。支持 iPhone X 的展示给 Samurai 主题增添了圆角。

10. Yelp

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

和 Facebook 一样,Yelp 的 iPhone 版本界面多年来发生了很大的变,但由于使了一致的导航栏颜色,它的牌标识仍然可辨认。由于与苹果地图的深融合,这款应越来越受。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

2009年8月,Yelp 将一个基本的增强现实界面应在 iPhone 版本中,于定位周围的企。 虽然它当时只是一个奇的东西,但鉴于 ARKit 应程序的兴起,这一功在今天看来是具有先见之明的。

20101月,新的 Yelp 主页推出了9宫格形式的捷图标。同样的基本界面风格得到了完善,直到整应用201310月行了重新设,使得外观扁平,也突出「近」标签。

Yelp 最新更新过显示与你相关内容,丰富了简单基于位结。 这过综合处理信息发现法是用户体验设计趋势,在 iOS 11 新设计 App Store 取了巨大成功。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

二、图标

对比所10重点提到的应用图标迭,揭示了各自选择的独特的化径。过去的十里,一些图标保持了相当的一致性,只微小的改变,另一些则每隔几重新设一次。从时间线看,全行业都紧设趋势变得愈发明显。

在 App Store 刚出时,有泽质感图标统治着这片土地。图标在默认情况下应用了泽,开发员必须在 Xcode 专禁用该效才能将其删除。 随着 iOS 应用成熟,大多数应用最终去掉了泽并采用了常明确个性化设计。

众所周知,iOS 7 重新定义了一个好图标的标准。苹果的新图标集一起,高质和 3D渲染的作品通常起来不适,有些更新后的圆角半径发生了冲突。随着计和开发人员逐渐为图标计制定新的规范,细节和更加克制的颜色慢慢地回了许多图标中。

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

三、个性

早期 iPhone 应用头扎进个未知世界。 除了苹公司自己内应用,应用观和工作没有既定规范,设计师和开发员可以完全自由地进实验。

尽管如此,当用户和开发人员把地学习最佳实践,许多早期的应用上去和觉上都非常相似。早期的反馈、尝和错误迅速塑造了每个应用的发展过程。年之内,大多数应用程序都找了的定位,并发展出了独的风格和个性。随着硬件性能的提高,计差异化逐渐从静图形转向动图形和动界面。

在 iOS 7 引的同质化界面指导原则让设计师和开人从头开始设计,许应用开始重视用户验,而不仅是视。周到的信息综合处理和预测信息设计通常被用来帮助展示新的和有趣的内容,否则内容能被忽视。智能工流简化常见的操,帮助减少完成任务的时间。优设计的重要超越视面,导致近年来用户验设计的盛行。

四、下一个10年

在2008年,时还无法准确预测 App Store 的展方式。改革源创新,iPhone 用户的品味和习惯塑造开者选择开的应用类型。同样的道理也适用未来,即将的 iphone 和 iOS 新版肯定以不预见的方式改变应用的局。一种新的设计趋势明天能席卷球。即使是在10年,未来仍是令人兴奋的。

原链接:《10 years of the App Store: The design evolution of the earliest apps》  Michael Steeber

欢迎关注译者的微信公众:「 彩云译设」

我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

图片素作者:Al Shostko

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在过去两个月,从国外的 Google I/O、Apple WWDC、Facebook 开发者大会,到国内的飞聊、QQ改版、豆瓣FM 6.0,可以看到很多关...
界面设计趋势
为了和大家分享关于设计趋势的见解,ISUX 研究了 2019 年至 2020 年的设计趋势。没有必要去遵循年度设计趋势报告,但是否意识...
品牌设计
我在上期文章《从超多大厂案例中,我总结了 2020 年值得关注的 9 个交互设计趋势》中,分享了科技发展对交互设计产生的影响和...
2020设计趋势
LOGO 设计毫无疑问是一个重要的设计领域。相比于平面和视觉设计领域,LOGO 设计的趋势会显得更加稳定。这很大程度是因为 LOGO...
2020设计趋势
对于许多老派的设计而言,字体应该保持字体设计师最初设计出来的样子,觉得不合适的时候选择其他的就好了。不过对更多的设计...
2018设计趋势
2018年时间过半,通过过去的6个月的观察,其实我们已经可以对于2018年的整个 UI 领域的设计趋势有了一个更为清晰的判断,也是...
2018设计趋势
编者按:这篇分析报告来自国外著名的LOGO设计社区 Logo Lounge,作者 BILL GARDNER 根据社区内来自全球各地的 LOGO 设计师的...
2019设计趋势
想必你还在对HJUX视觉伙伴们给出的《2018年值得设计师学习的六大视觉设计趋势》连连称赞,那么赞别停!今天团队的交互伙伴们...
2018设计趋势