本文用交互設(shè)計的思維對iOS 10的新特性進(jìn)行分析。撇開平時我們考慮的界面排布，頁面元素等問題不談，將視角轉(zhuǎn)移到屏幕外的東西：如時間維度的，空間維度的，手勢操作等等，以提升我們的用戶體驗。

先上iOS 10 官方指南的原地址：https://developer.apple.com/ios/human-interface-guidelines/

本文作者是蘑菇街的設(shè)計團(tuán)隊，歡迎大家關(guān)注他們的追波地址喲：https://dribbble.com/mogu

背景

前段時間被一篇名為《從iOS 10設(shè)計指南變化看設(shè)計的新趨勢》的文章刷屏，文中從UI設(shè)計的角度分析了iOS 10帶給我們的設(shè)計新趨勢：“大而簡，簡而精”。文中指出，未來的設(shè)計將更注重產(chǎn)品的內(nèi)容和操作體驗，降低其他因素對用戶使用上的干擾。設(shè)計師則需要在界面設(shè)計中去把握「大」和「簡」的程度，以及思考如何通過更有限的手段和空間來傳達(dá)更多的信息和指引用戶來達(dá)到「精」的目標(biāo)。

iOS 10于一周前正式推送更新，相較于前幾代的系統(tǒng)，他在交互方式上有了比較多的改變，在很多細(xì)節(jié)設(shè)計上，更是值得我們把玩和品位。正如蘋果官方在他的更新說明里所描述的：“iOS 10是iOS發(fā)布史上的重磅之作”。

所有iOS 10新特性羅列的文章網(wǎng)上已有很多，這里就不贅述了，本文則將從交互設(shè)計的角度出發(fā)，聊聊iOS 10的變化帶給我們設(shè)計上的啟發(fā)和借鑒意義。

一、基于行為的設(shè)計

著名的交互設(shè)計專家Jon Kolko在他的《交互設(shè)計沉思錄》中指出：“行為是發(fā)生在第四個維度（時間維度）上的，而交互設(shè)計的目標(biāo)是試圖隨著時間的推移，逐漸理解并進(jìn)而塑造人的行為”。

舉個例子，iOS 10最明顯的細(xì)節(jié)之一：拿起手機就亮屏。

很多人之前會有這樣的困擾：我只是想看個時間，一按Home鍵，duang！一不小心就進(jìn)入系統(tǒng)界面了。現(xiàn)在有了這個設(shè)計，我們再也不用為了看時間或通知去按電源鍵或Home鍵了。

看圖就懂（此功能目前只適用于iPhone SE,iPhone 6s或更新的機型）

“拿起手機就亮屏”這個看似簡單的功能，用過之后，就會讓人自然而然地成為習(xí)慣。值得我們?nèi)ニ伎迹涸O(shè)計的目的是傳達(dá)信息，除了界面上的交互行為，除了通過好看的UI來吸引用戶的注意，更多地需要我們重新審視利用手機本身的特性以及用戶特定場景下的行為需求，將產(chǎn)品滲透到人的生活中去，以最平易的方式做出更契合行為的交互。

二、交互體驗更扁平

說到扁平，很多人直覺上覺得就是視覺上去掉了光影、特效、簡化了元素，其實遠(yuǎn)不盡然。在移動互聯(lián)已占據(jù)我們生活方方面面的今天，從用戶操作的角度，將信息更加簡單直接且高效地展示出來，提升交互的易用性和操作的便捷性，則更是設(shè)計“扁平化”的體現(xiàn)。

作為交互設(shè)計師，在產(chǎn)品的設(shè)計工作中，遇到最糾結(jié)的問題莫過于：需要在有限的屏幕空間內(nèi)，將產(chǎn)品的信息內(nèi)容盡可能多地展現(xiàn)出來，同時又要兼顧界面的優(yōu)雅美觀。

iOS 10在這次的優(yōu)化中給我們提供了很好的設(shè)計思路。

1）橫向空間的擴(kuò)展

以Apple Music為例：

在新版本中，他用每個單元模塊左右滑動瀏覽更多內(nèi)容的操作，替代了每塊只展示一個內(nèi)容的設(shè)計形式。相比之前的版本，將并列的信息在當(dāng)前界面瀏覽，無形中擴(kuò)展了屏幕的空間，增加了單位面積的使用效率，減少了頁面的跳轉(zhuǎn)。

這種交互形式其實并非Music中首創(chuàng)，早有幾年前就出現(xiàn)的window phone，近有4月更新的Airbnb，以及國內(nèi)以設(shè)計品質(zhì)感而著稱的美食類App－Enjoy中，都采用了這種交互形式。

這種設(shè)計形式使頁面的層級結(jié)構(gòu)變少，用戶不用一次次地在一級和二級頁面之間切換，提高效率的同時也使結(jié)構(gòu)變得清晰了。

相信這種趨勢會越來越多地在各種內(nèi)容類的App中被采用。

2）Z軸空間的擴(kuò)展

在三維空間中，如果說縱向滑動利用的是Y軸空間，橫向滑動利用的是X軸空間，那么iOS 10中對Z軸空間的利用和拓展則給我們的操作著實帶來了不小的快捷和方便。

我最喜歡iOS 10的地方在于它改進(jìn)的通知，可以通過3D touch快速地打開回復(fù)界面進(jìn)行操作，完全不用進(jìn)入app，可以就那樣一直回復(fù)別人，直到離開為止。

對于我們App設(shè)計者來說，無論是針對推送信息，還是app內(nèi)的內(nèi)容，更好地利用好手機的這一特性，在提升操作體驗的同時，還可以更好地去實現(xiàn)我們的業(yè)務(wù)目標(biāo)。

3）手勢操作更便捷

iOS10對于手勢的操作，也有了更便捷的設(shè)計。以鎖屏界面為例：

iOS9中：

進(jìn)入系統(tǒng)界面：

有touch ID識別指紋：按下Home鍵

無touch ID識別指紋：右滑屏幕

插件中心：從頂上往下滑

消息中心：從頂上往下滑，并切換tab

相機：從右上角往上滑

iOS10：

進(jìn)入系統(tǒng)界面：

有touch ID識別指紋：按下Home鍵

無touch ID識別指紋：按下Home鍵，輸入密碼

插件中心：右滑

消息中心：從頂上往下滑

相機：右滑

對比以上的兩個操作，功能還是那些功能，但整體的操作卻更加舒適便捷了，手指的操作變得更靈活直接，不需要上下來回，或者準(zhǔn)確地對著某塊控件才能完成操作。

Josh Clark在《Tapworthy-Designing Great iphone Apps》一書中分析得出，當(dāng)我們單手操作時，雖然拇指能劃到整個屏幕，但只有三分之一的屏幕是真正容易觸及的——也就是拇指正對的區(qū)域。

隨著iPhone手機屏幕越來越大，如何設(shè)計操作體驗，使操作更舒適，也是設(shè)計師們需要好好打磨的一個體驗問題。

隨著iOS 10更新的地圖應(yīng)用中，對于手指操作體驗的優(yōu)化設(shè)計，使整個操作非常舒適，這種設(shè)計思路，也非常值得我們在平時的設(shè)計工作中借鑒。

原來的地圖App中，各個界面中的手指操作區(qū)域是這樣的：

在iOS 10中，他的手指操作變成了這樣：

所有的操作都集中到了“舒適區(qū)域”內(nèi)，讓用戶能更方便地使用體驗，不用因為手指不夠長也切換成雙手操作而苦惱了。

三、細(xì)節(jié)，還是細(xì)節(jié)

用戶體驗的本質(zhì)在于：既要關(guān)注大局，又要關(guān)注細(xì)節(jié)，只有這樣用戶才能獲得最好的體驗。

處女座如蘋果公司，在提升用戶體驗的道路上，對于細(xì)節(jié)的追求，經(jīng)常會到一個讓人驚嘆的地步。

舉兩個小例子，可能平時很多人不太會注意到，但確實給我們帶來了操作使用的便利。

頂部的信息條：

在iOS 10中，回到上一個使用的App的回退操作，不再會遮住手機數(shù)據(jù)或者wifi信息條，可以讓用戶在不打斷視野的情況下，快速回到之前用過的應(yīng)用上。

另外有個很多人可能會注意不到的細(xì)節(jié)是：視頻播放時，鎖定屏幕，再次打開后，它會繼續(xù)播放，不需要再一次點擊播放按鈕，so方便。

交互細(xì)節(jié)不是功能，在追求效率的公司里，往往會被覺得可有可無。但是往往只有對細(xì)節(jié)孜孜不倦追求的產(chǎn)品，才能做到足夠讓人驚艷。

結(jié)語

追求好的體驗一直是我們的設(shè)計目標(biāo)，不管是從視覺上，還是從交互上。

我們必須去思考，如何站在用戶的角度，從問題的根源著手，從產(chǎn)品實際的使用場景出發(fā)，關(guān)注細(xì)節(jié)和情感，結(jié)合新系統(tǒng)，新趨勢，為用戶創(chuàng)造好的用戶體驗，以最終達(dá)到我們設(shè)計的目的。

「超實用的UI設(shè)計自學(xué)指南」

UI配色：《幫你從零開始全面掌握UI設(shè)計的配色方法》

UI版式：《一份詳盡全面的UI設(shè)計字體與排版指南》

自學(xué)姿勢：《別著急學(xué)軟件！先掌握科學(xué)有效的UI設(shè)計自學(xué)姿勢（超全面）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com