移動設計,交互性為王

0 評論 9196 瀏覽 2 收藏 9 分鐘

論“手勢和動效,是如何改變移動應用設計格局的”

 

在很多新興的UI設計模式中,核心便是高度成熟的手勢設定和動效,

歷經多年發展,移動游戲掀開了嶄新的篇章,效果炫目,操作感強。而網站推廣者也發現,網站若能添加更多的交互元素,推廣效果將更佳——交互性為王!移動應用設計師和開發者開始重視交互效果。時至今日,市面上的大多數應用都開始考慮用戶操作是否方便、導航是否清晰可靠、是否有滿足需求的社交功能。開發者和設計者經歷了十多年的耕耘,不斷提煉,目的只是為了讓內容、讓視覺元素更契合移動設備的特質,打造出獨一無二的場景體驗。而他們的設計對象,卻是“無形”的。

Mobile Design Patterns: A Practical Look這篇文章中,我陳述了應該如何思考、運用移動設計模式。而現在,我想要鉆研的更深一點,我想要了解手勢和動效是怎樣徹底改變長期存在的移動設計模式的。為了清晰描述我的觀點,我解構了大量應用中的移動設計模式和元素——Uber,Pinterest,Tinder,Okcupid,Spotify,Instagram,Dropbox,Secret,Flipboard,Snapchat,Mailbox等等。

手勢

憶往昔,我們僅能依靠鼠標的點擊、懸停、滾動,以及鍵盤的案件敲擊來觸發網絡交互效果、完成操作。而到了今天,在操作方式上我們的選擇可以有很多,然而,鼠標+鍵盤的操作方式依然支配著互聯網用戶體驗。

移動應用設計,從某種程度上講,探索出了大量新的設計模式和操作方式。移動領域的探索,需要基于軟硬件性能,在毫無此類人機交互先例的情況下,披荊斬棘。在移動端,大量的問題解決方案都是基于手勢操作。同時,在響應式設計的幫助下,應用設計終于可以擺脫設備尺寸的限制,在移動端和桌面端運行,進而打通了移動互聯網和桌面互聯網在形式上的壁壘。

如果仔細研究安卓當前的手勢設定,你會發現,這些手勢是怎樣在用戶使用日歷、發送短信、瀏覽圖庫時,方便操作的。

Mobile Gesture

Gesture

 

而我們再來看看蘋果的多點觸控交互系統,我們可以發現,里面有暗含著太多的機會以及可以解決問題的手勢。下面的圖是2010年的專題,盡管如此,還是有很多手勢設定沒有被采用,而蘋果的手勢專利可不止這一張。

Apple Gesture

Android, iOS, 和其他移動平臺還會繼續增加原生手勢的種類,進而方便操作和導航。手勢不但可以提高屏幕空間的利用率,通過手勢替代了一些按鈕。同時還可以構成更直觀、更有趣的體驗。手勢結合動效的設計模式,將在移動應用中大展拳腳。

動效

手勢的好處在于直觀、響應迅速,感覺仿佛是在現實生活中交互。而動效,可以讓用戶更加沉浸、更加身臨其境,進而提高他們的忠誠度。

動效通過模仿自然界的運動規律和視感來愉悅用戶。時間、速率、彈性、圖像和色彩的變換、滾動等種種設置,在設計者的精心微調之下,帶給用戶無盡的驚奇和享受。

精良的動效結合手勢,增添了用戶體驗中得愉悅性,及時提供視覺反饋,讓用戶可以平穩接受轉換。

Apps Animation

Captivate這個網站收集了很多流行應用的動畫效果

Colors

如果只想看單純的轉場效果,不附帶其他視覺元素,?Dan Silver?可以為你提供靈感

交互性優秀的移動案例

Pinterest, 以沉浸式體驗和良好的交互性而知名,而這里將講講它的“可發現控件”設計模式,我將講述采用這種設計模式的目的是為了解決什么問題。還講講述Pinterest是如何通過動效和手勢讓交互變得美麗誘人的。

Apps gesture

電商類應用中,用戶會遇到的問題

用戶不想被大量的功能性元素妨礙瀏覽。

Pinterest的解決方案

Pinterest一反電商應用臃腫之常態,在應用的主要界面中,移除了操作按鈕和額外信息功能。極簡式的設計讓用戶清晰的了解到界面中元素哪些是重要的,哪些較為次要——用戶主要通過拖動、滑動、觸摸、按壓來與內容交互,盡量減少界面中除內容外的干擾因素。

正如預期所想那樣,當用戶點擊圖像,圖像會放大,進入細節界面,從而了解更多和圖像相關的信息。在細節視圖中,用戶可以完成主要的操作,例如加入釘板(類似收藏),發送分享,或者編輯圖像。似乎除了這些功能再沒有別的功能了。然而,如果用戶按壓圖像,他們會發現會從指尖下方的屏幕彈出3個原型按鈕,同樣提供了上述三個功能。當用戶的手指靠近某個按鈕,按鈕會變紅,松手后便能完成操作。只需要重復1-2次這種操作,用戶便能學會。

整個體驗愉悅,因為動效精心設計,平滑而不突兀。而手勢提高了操作的直觀性。“可發現控件”這種設計模式提升了內容的可讀性和操作性——Tinder的那種讓人上癮的、滑動顯示資料的操作方式也很類似。

駕馭交互浪潮

這是移動應用設計最令人興奮的時代,還有更多的采用手勢和動效的交互案例有待探索。如果想要了解更多最火熱的設計模式,請看UXPin的新書Mobile UI Design Patterns 2014. (IFEC已經開始動工,各位敬請期待),這本書能夠滿足你的設計參考需求,但在使用設計模式時,請務必“量體裁衣”針對問題和用戶而設計。

source:ui.cn

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!