熱門趨勢！從iOS 10 的交互設(shè)計(jì)中學(xué)到的3個(gè)設(shè)計(jì)啟示

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

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

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

背景

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

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

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

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

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

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

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

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

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

二、交互體驗(yàn)更扁平

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

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

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

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

以Apple Music為例：

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

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

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

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

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

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

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

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

3）手勢操作更便捷

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

iOS9中：

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

有touch ID識(shí)別指紋：按下Home鍵

無touch ID識(shí)別指紋：右滑屏幕

插件中心：從頂上往下滑

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

相機(jī)：從右上角往上滑

iOS10：

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

有touch ID識(shí)別指紋：按下Home鍵

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

插件中心：右滑

消息中心：從頂上往下滑

相機(jī)：右滑

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

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

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

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

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

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

所有的操作都集中到了“舒適區(qū)域”內(nèi)，讓用戶能更方便地使用體驗(yàn)，不用因?yàn)槭种覆粔蜷L也切換成雙手操作而苦惱了。

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

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

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

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

頂部的信息條：

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

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

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

結(jié)語

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

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

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

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

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

自學(xué)姿勢：《別著急學(xué)軟件！先掌握科學(xué)有效的UI設(shè)計(jì)自學(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è)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com