• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!

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

作者:彩云译设计 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App Store,界面设计趋势,移动设计趋势,设计趋势等相关知识,彩云译设计希望在学习及工作中可以帮助到您

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

苹果公司的设计一直是设计领域的风向标,本文是通过回顾 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

您可能想查找下面的文章:

  • 我回顾了App Store 十年来的视觉变化,告诉你设计趋势是如何演变的!
  • 我花了五个小时,完成了iOS 11新版App Store的交互探索

相关文章

  • 2018-08-23这样使用Sketch的Symbol功能,能极大提高你的工作效率!
  • 2018-08-23手机端表格设计:我整理了一套循序渐进的处理方法
  • 2018-08-232018年,网页和APP中背景的8个主要设计趋势
  • 2018-08-23把玩近1000个App 后,我总结了这份超全面的「用户卸载原因指南」
  • 2018-08-23靠着吉祥物,这款闹钟APP成功俘获了用户的心
  • 2017-08-06响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
  • 2018-08-23更好的表单设计,从这6个设计策略开始
  • 2018-08-23产品需求一直不能落地,还好前辈教我这个流程
  • 2018-08-23实战案例!京东商城iPad 4.0 商品详情页改版设计总结
  • 2018-08-23新产品即将上线,那么预告页面要怎么设计?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 解决stackoverflow打开慢的方法
    • 常用的几个单页应用程序网站分享
    • 超多版式运用手法!128张让你灵感爆发的海报设计
    • 8年资深设计师:间距不会调?掌握这一个点,从此不再迷茫!
    • 高手课堂!「按钮系列」之按钮位置与用户体验的关系
    • 在成熟的UI设计流程中,视觉稿是绕不开的环节
    • 40个知名网站Logo使用的字体推荐
    • 关于app端rem适应不同手机屏幕计算方法
    • 交互基础小课堂!如何利用 “峰终定律” 改善用户体验?
    • 如何获取设计灵感?你没理解它真正的含义!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有