iOS10交互設計啟示

分類:設計 時間:2016-10-25

iOS10交互設計啟示

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

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

背景

前段時間被一篇名為《從iOS10設計指南變化看設計的新趨勢》的文章刷屏,文中從UI設計的角度分析了iOS10帶給我們的設計新趨勢:“大而簡,簡而精”。

文中指出,未來的設計將更注重產品的內容和操作體驗,降低其他因素對用戶使用上的干擾。設計師則需要在界面設計中去把握「大」和「簡」的程度,以及思考如何通過更有限的手段和空間來傳達更多的信息和指引用戶來達到「精」的目標。(文章鏈接請戳:https://isux.tencent.com/ios-10-design-trends.html)。

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

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

一、基于行為的設計

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

舉個例子,iOS10最明顯的細節之一:拿起手機就亮屏。

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

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

二、交互體驗更扁平

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

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

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

1)橫向空間的擴展

以Apple Music為例:

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

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

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

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

2)Z軸空間的擴展

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

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

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

3)手勢操作更便捷

iOS10對于手勢的操作,也有了更便捷的設計。以鎖屏界面為例:

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

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

插件中心:從頂上往下滑

消息中心:從頂上往下滑,并切換tab

相機:從右上角往上滑

iOS10進入系統界面:

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

無touch ID識別指紋:按下Home鍵,輸入密碼

插件中心:右滑

消息中心:從頂上往下滑

相機:右滑

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

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

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

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

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

在iOS10中,他的手指操作變成了這樣:

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

三、細節,還是細節

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

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

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

頂部的信息條:

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

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

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

結語

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

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

middot;Endmiddot;


Tags: iOS10 交互設計 移動設計

文章來源:http://www.ui.cn/detail/182131.html


ads
ads

相關文章
ads

相關文章

ad