[ 平面理論教程 ] 從iOS10的交互設計中學到的3個設計啟示- 設計教程 - 骨子愛創意

教學主題: 從iOS10的交互設計中學到的3個設計啟示

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 從iOS10的交互設計中學到的3個設計啟示

這教學的重點為這幾點 [ 設計,啟示,中學,交互,操作,我們,iOS,用戶,體驗,細節 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

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

本文作者是蘑菇街的設計團隊，歡迎大家關注他們的追波地址喲：https://dribbble.com/mogu

背景

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

iOS 10於一周前正式推送更新，相較於前幾代的系統，他在交互方式上有了比較多的改變，在很多細節設計上，更是值得我們把玩和品位。正如蘋果官方在他的更新說明裡所描述的：“iOS 10是iOS發布史上的重磅之作”。

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

一、基於行為的設計

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

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

很多人之前會有這樣的困擾：我只是想看個時間，一按Home鍵，duang!一不小心就進入系統界面了。現在有了這個設計，我們再也不用為了看時間或通知去按電源鍵或Home鍵了。

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

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

二、交互體驗更扁平

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

作為交互設計師，在產品的設計工作中，遇到最糾結的問題莫過於：需要在有限的屏幕空間內，將產品的信息內容儘可能多地展現出來，同時又要兼顧界面的優雅美觀。

iOS 10在這次的優化中給我們提供了很好的設計思路。

1）橫向空間的擴展

以Apple Music為例：

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

這種交互形式其實並非Music中首創，早有幾年前就出現的window phone，近有4月更新的Airbnb，以及國內以設計品質感而著稱的美食類App-Enjoy中，都採用了這種交互形式。

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

相信這種趨勢會越來越多地在各種內容類的App中被採用。

2）Z軸空間的擴展

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

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

對於我們App設計者來說，無論是針對推送信息，還是app內的內容，更好地利用好手機的這一特性，在提升操作體驗的同時，還可以更好地去實現我們的業務目標。

3）手勢操作更便捷

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

iOS9中：

進入系統界面：

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

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

插件中心：從頂上往下滑

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

相機：從右上角往上滑

iOS10：

進入系統界面：

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

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

插件中心：右滑

消息中心：從頂上往下滑

相機：右滑

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

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

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

隨着iOS 10更新的地圖應用中，對於手指操作體驗的優化設計，使整個操作非常舒適，這種設計思路，也非常值得我們在平時的設計工作中借鑒。

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

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

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

三、細節，還是細節

用戶體驗的本質在於：既要關注大局，又要關注細節，只有這樣用戶才能獲得最好的體驗。

處女座如蘋果公司，在提升用戶體驗的道路上，對於細節的追求，經常會到一個讓人驚嘆的地步。

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

頂部的信息條：

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

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

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

結語

追求好的體驗一直是我們的設計目標，不管是從視覺上，還是從交互上。

我們必須去思考，如何站在用戶的角度，從問題的根源着手，從產品實際的使用場景出發，關注細節和情感，結合新系統，新趨勢，為用戶創造好的用戶體驗，以最終達到我們設計的目的。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 從iOS10的交互設計中學到的3個設計啟示 這教學會喜歡

文章標題: 骨子愛創意- 從iOS10的交互設計中學到的3個設計啟示–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 設計,啟示,中學,交互,操作,我們,iOS,用戶,體驗,細節

本文永久連結 :從iOS10的交互設計中學到的3個設計啟示

本文轉載自 :VIA