iOS 7第三方应用重设计的解决方案及案例参考

标签: 产品设计 设计 ios7 | 发表时间:2013-10-09 10:59 | 作者:达令
出处:http://www.woshipm.com

乍看上去,“为iOS7重设计”无非就是新的应用图标、无边框按钮、与导航栏配色相匹配的状态栏等等。不过如果你再深入挖掘一些,便会发现很多耀眼的地方都体现着iOS7的三大设计主题,即“依从、清晰、纵深”。

对于某些应用来说,这些改变带来了设计上的极大改善,而另外一些则甚至比从前还要糟糕,不仅可用性被破坏,而且品牌识别效应也大打折扣。本文会围绕着iOS7 UI过渡指南当中提出的一些关键性的设计解决方案,介绍一些比较有代表性的应用案例。如果你正计划着升级自己的产品,或是以iOS7风格为准绳从零开始设计应用,那么这些例子可能会帮你更好的起步。

1.全屏布局与半透明UI元素

iOS7允许应用界面充分利用“边到边”的全屏空间。举个例子,如果你的应用当中会显示系统状态栏,那么在iOS7下,你也许需要让用户透过状态栏看到它“后面”的模糊化的内容。类似的,如果你的应用会用到其他一些标准控件,例如导航栏、标签栏、工具栏、搜索栏、范围栏(scope bar),那么在iOS7当中,这些控件背后的内容都可以模糊的呈现出来。如果你决定充分利用系统新特性来实现这些效果,那么就要确保内容视图的尺寸可以填满整个屏幕,包括这些控件背后的区域。更多细节可以参考iOS7界面设计规范当中的Bars一节。

案例

大量的iOS7应用都使用了半透明状态栏,能够以模糊效果呈现底部的内容。Twitter的做法则相对保守,他们通过自定义控件的方式制作了状态栏和导航栏,使他们的颜色相配,并能呈现半透明效果。而其他一些应用,例如Instagram、Foodspotting和The New York Times等则打破了状态栏的边界,通过新的布局方式呈现全出血(full-bleed)效果的照片。

 

The New York Times在状态栏和导航栏都使用了毛玻璃效果,并利用全屏空间来展示全出血效果的照片。

Twitter的状态栏与导航栏颜色相配,并且都可以呈现半透明效果。

2.层与动效

iOS7 UI过渡指南推荐通过不同的层面来体现内容的层次,以增强界面对象之间的关联性。当用户在不同的层面之间切换时,要为其提供强化的动画效果来进一步增强内容层次与深度的概念。

案例

在iOS7中,层面在很多时候被用来展示那些位于图片之上的文字,例如Yahoo!新闻中的照片,以及musicXmatch当中专辑的呈现方式。此外,层面还可以用来为用户提供某些快速访问的功能,例如iOS7自身的通知中心和控制中心。

 

另外一个例子,Huffington Post应用通过一个单独的层来呈现“全部分类(All Sections)”界面。虽然交互方式没什么问题,但以模糊效果从该层面底部透出的照片却没有什么实际意义,反而会给用户造成困惑。

 

关于动画过渡效果,你可以在Luvocracy应用当中发现一些很有效的运用方式,例如其左侧导航的模糊放大效果,以及展示产品页照片时的弹跳效果等。另外,Flipboard在其封面上使用的视差动效也是个不错的例子。

 

3.负空间(留白)与配色

iOS7界面设计规范中的“为iOS7设计”一节建议设计师们移除界面中不必要的装饰性元素,并充分利用留白:

“留白可以使重要的内容及功能更加突出。同时,留白还可以传达出一种平静和稳定的感觉,使应用看上去更加专注和高效。”

此外,他们还建议通过配色来简化UI:

“一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同时,它也可以为应用带来具有一致性的视觉主题。”

案例

然而,很多应用要么忽视了这条建议,要么执行的有些过头。无论出于怎样的原因,大量应用当中充斥着过多的留白,而颜色却过于稀疏微弱。这种风格对于苹果来说也许是不错的,因为它们具有明显的iOS7风格,但对于应用本身来说也许会产生负面效应,因为这种平淡的设计风格可能会稀释掉产品的品牌识别效应。在大量浅色风格的应用当中,例如Snapguide这样配色丰富的应用也许能给用户带来更多惊喜,使其更受欢迎。

 

4.动态字体

动态字体可以针对任何字号的文字内容自动调整其字间距和行间距。如果你准备采用动态字体技术,那么应用中的文字内容格式会随着用户在系统“设置”当中对字号的调整而自动响应变化。那些以文字阅读为主的应用将会极大的受益于这项技术,例如新闻、文章、邮件、微博等等。对这类应用来说,采用动态字体技术就意味着用户无需进行很多设置便能得到更具一致性的阅读体验。

案例

当前,采用动态字体技术的应用还不是很多。这里有一个很简单的原因:那些会受益于这项技术的应用当中,多数已经包含了字号调整方面的功能。不过这类订制化的解决方案并不理想,因为这意味着用户需要针对每个不同的应用来单独设置最合适的字号。

采用了动态字体技术的The New York Times应用在大字号下的表现。

5.自动布局

正如iOS7开发文档中所介绍的,充分利用自动布局技术的应用可以更加轻松的从iOS6过渡到iOS7适配,因为这些技术可以帮助应用自动调整UI元素的尺寸。如果同时采用自动布局及动态字体技术,那么应用的界面元素也可以随着字号的变化而响应式的调整,帮你实现诸如用户在调小字号之后界面布局自动从一列变为两列的需求。

案例

当人们采用动态布局技术来解决从iOS6向iOS7过渡的问题时,从表面看来似乎难以发现什么明显的变化。而另一方面,如果同时使用动态字体技术,那么变化会更容易被发现。我的意思是,目前我还没找到这方面的实际案例;如果你发现了一些,不妨分享给大家。

6.应用图标和控件图标

iOS7在应用图标方面有很多变化,详情可以参考iOS7界面设计规范当中的图标与图形尺寸一节。其中,我们可以注意到的变化包括略微增大的图标尺寸、新的黄金分割率网格、新的配色方案、更加扁平的风格、曲线轮廓等等。此外,苹果建议第三方应用的设计师们重新设计控件当中的自定义按钮图标,使它们看上去更轻量,更贴近iOS7原生风格。

案例

几乎所有的iOS7应用都重新设计了它们的应用图标,因为这一点在iOS7 UI过渡规范当中是有明确要求的。然而,只有一部分应用依照iOS7风格重新设计了它们的按钮图标。有些应用只是很勉强的做了些改变,特别是那些曾经为了突出品牌效应而自定义设计过图标的应用。这里也有一个时间的问题,也许所有的应用最终都会在它们看上去开始落伍的时候升级它们的图标设计,否则就可能被用户嘲笑“哦,那个应用看上去太iOS6了!”。

Shazam面向iOS7重新设计了他们的图标。

Ted应用同样重新设计了标签栏上的按钮图标。

7.无边框按钮

苹果建议仅在非常必要的时候为按钮添加边框或背景。这里的基本原理是,用户通常都知道在各种控件栏和动作表单、警告框中的元素是可以交互的,因此边框并不是必需的。而iOS7 UI过渡指南当中也提到一些例外情况,例如内置的“时钟”应用当中用来启动计时的圆形按钮,或是iTunes当中带有边框的“购买”按钮。

案例

无边框按钮已经在iOS7应用当中被广泛使用了,因为这个改变的成本及其造成的影响都不大。当用在导航栏当中时,它们是很明显的可交互元素;然而,当出现在主要文字内容附近时,有些无边框按钮看上去只是样式特殊的文字而已。造成这种情况的原因之一,就是对于无边框按钮来说,每个应用都有自己的“关键色”,例如Foodspotting的绿色,或是Opentable的红色。

Foodspotting里的一些无边框按钮在用户看来并不具备交互性。

Snapguide应用导航栏上的无边框按钮。

8.其它视图和UI控件

iOS7当中包含大量的标准控件升级,例如日期选择器、添加联系人按钮、详情展开按钮、信息按钮、页码控制器、选择器、进度条、刷新控制器、分段控制器、滑块、计步器、切换、文本域等。例如动作表单、警告框、模态视图一类的临时性视图也在视觉呈现方式上发生了变化。对这些控件进行升级不会对应用产生重大的影响,因为它们的基本构成方式和交互方式并没有发生根本性的变化。更多详情可以参考iOS7界面设计规范当中的Controls一节。

案例

大量的应用都开始使用iOS7风格的新标准控件,因为这类升级是完全“免费”的,无需代码方面的变动。这其中有一点值得提及,就是标准的切换控件在激活状态时的颜色是可以自定义的。虽然看上去没太大所谓,但这点细节可以使你的应用界面看上去更具一致性。另外一点受欢迎的变化就是新的列表结构,它可以延伸到界面边缘,给用户带来更多的可点击空间。

Foodspotting当中的切换控件在激活状态时为绿色。

9.手势

在iOS7里,用户可以从界面底部向上滑动,来展开控制中心。类似的,如果用户希望访问通知中心,他们可以从界面顶端向下滑动。那些使用了类似手势命令的应用可能需要重新考虑相关功能的触发方式,以避免和这些系统手势产生冲突。

案例

不幸的是,即使在手势操作上与iOS7没有明显的冲突,应用也有可能受到这些系统级手势的影响。例如在The New York Times当中,用户在向上滚屏浏览内容时有可能不小心触发控制中心的展开。而有些应用改变了它们从前的导航风格,以避免与系统手势产生冲突。举个例子,新版本的Facebook应用在主屏使用标签栏作为导航,很可能是为了避免与系统级的右滑回退手势产生冲突?虽然苹果在手势操作方面的改变是值得赞赏的,但实现方式上也有一定的弊端。

 

Facebook重回标签栏导航的时代。

10.系统改进

除了以上所说的这些在应用内部可能产生的改变以外,系统级的变化也可能影响第三方应用,这当中值得注意的一点就是包含了Airdrop功能的分享表单(Share Sheet),以及多任务机制。如果你的应用已经整合了系统原生的分享表单,那么在iOS7当中它们会自动更新到新的版本。同样,曾经仅限于内置应用的多任务功能现在有了更广泛的运用范围,这也意味着内容的下载和更新可以在后台自动执行了。

案例

我们已经可以在很多应用当中看到包含了Airdrop功能的分享表单了,不过更多的应用仍在使用旧版的动作表单,或是自定义的解决方案。你不能指责他们,毕竟新的分享表单在实现方式上还是有一定复杂度的。

对于多任务来说,当前有很多新闻或照片媒体类的应用都已经开始使用这方面的功能来实现后台的上传或下载。幸运的是,如果相关功能产生了性能方面的问题,用户可以在系统的“设置”当中手动关闭多任务功能,不过我怀疑有多少人有能力准确的发现这方面的问题。

The New York Times使用了新的分享表单,包括Airdrop功能。

来源:CocoaChina


本文链接《 iOS 7第三方应用重设计的解决方案及案例参考
微信号:woshipm,产品干货天天推荐,欢迎订阅

相关 [ios 应用 设计] 推荐:

送给 iOS 应用 UI 设计者:iOS 界面元素 PSD 素材

- 马克叔叔 - 果迷网
早在 8 月份我们曾给大家推荐过 Jonatan Castro 和 Joshua Geiger 的 OS X Lion 下应用程序 UI 素材文件,无论你是专职 UI 设计师,或是开发人员,或只是突发奇想,都可以使用这些制作精美的、专业水准的素材构建自己心目中的软件界面. 今天我们再给你带来 Teehan+Lax 制作的 iOS 系列的界面素材 PSD 文件,前边的是iPhone 4S 以及 iOS 5 的图形界面素材,后边的是旧版本 iOS 以及 iPhone、iPad 的素材.

30个iOS系统的App应用程序Icon设计

- emilo - 创意悠悠花园
今天分享:30个iOS系统的App应用程序Icon设计,希望其中有你喜欢的,或者可以给你带来灵感. Read the rest of 30个iOS系统的App应用程序Icon设计 (47 words). © emilo for 创意悠悠花园, 2011. Post tags: App应用程序, Icon设计, iOS, 系统.

为设计iOS应用寻找灵感的12个去处

- - Kevin Cao's Blog
专注于分享UI界面的细节,按照设计元素进行分类:. 专注iPhone的UI分享:. 这个网站有一个iPad客户端,设计很精美: http://itunes.apple.com/us/app/stylapps/id444930066. 专注于App网站设计的分享:. 最后推荐一个包括了图标、界面、App网站和设计资源的整合型:.

设计 iOS 应用时需要知道的 5 件事

- - 博客 - 伯乐在线
英文原文: 5 Things to Know When Designing for iOS,翻译: oschina. 根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事. 虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台. 这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式.

iOS应用架构谈 网络层设计方案

- - Casa Taloyum
iOS应用架构谈 view层的组织和调用方案. iOS应用架构谈 网络层设计方案. iOS应用架构谈 动态部署方案. iOS应用架构谈 本地持久化方案. 网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大. 另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.

iOS应用架构谈(一):架构设计的方法论

- - 博客园_知识库
  之前安居客iOS app的第二版架构大部分内容是我做的,期间有总结了一些经验. 在将近一年之后,前同事zzz在微信朋友圈上发了一个问题:假如问你一个iOS or Android app的架构,你会从哪些方面来说呢.   当时看到这个问题正好在乘公车回家的路上,闲来无聊就答了一把. 在zzz在微信朋友圈上追问了几个问题之后,我觉得有必要以文章形式专门来讲一些个人见解.

知己知彼——iOS应用“爱玩”的产品设计与用户分析

- - 腾讯CDC
  前段时间完成了我个人的一个iPhone应用“爱玩”,这是一款可以提供音乐演出、讲座沙龙等各种同城活动信息的App,2011年9月底在苹果商店上线.   App下载链接: http://itunes.apple.com/zh/app/id464760869.   意料之外的是“爱玩”在10月28日至11月4日的那周登上了苹果商店的首页,排在新品榜的第三位,在随后的11月5日到11月12日那周登上热门产品榜的第十位.

为何许多 iOS 应用图标采用高光(gloss effect)设计?

- - 知乎每日精选
Gloss effect,这是 2007 年随第一代 iPhone 发布而带来的奇异审美(更多的原因其实是这个效果制作太粗糙). 首先几乎所有的 iPhone 预装应用都有这个效果,然后是 web app,即「add to home screen」添加网址链接到主屏幕的方式,所生成图标也带这个高光效果(HTML 中设置 apple-touch-icon-precomposed 可豁免).

十条帮你塑造更好的iOS应用体验的设计贴士

- - 互联网的那点事
本文来于 Computer Arts(数码艺术),全球领先的数码设计杂志,文章译者 @C7210. 文中的图标出自 Jamie Jones之手,突出人机交互、用户界面以及各类设计规范,配合文章给出的十条设计贴士,可以帮你塑造更好的iOS应用整体体验. 苹果的 人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书.

iOS 7第三方应用重设计的解决方案及案例参考

- - 人人都是产品经理
乍看上去,“为iOS7重设计”无非就是新的应用图标、无边框按钮、与导航栏配色相匹配的状态栏等等. 不过如果你再深入挖掘一些,便会发现很多耀眼的地方都体现着iOS7的三大设计主题,即“依从、清晰、纵深”. 对于某些应用来说,这些改变带来了设计上的极大改善,而另外一些则甚至比从前还要糟糕,不仅可用性被破坏,而且品牌识别效应也大打折扣.