移動設計中不可或缺的交互
小編推薦:在這篇文章中,來自UXPin(一款在線界面設計應用)的克里斯·班克(Chris Bank)介紹了移動應用交互的重要性,以及它在設計模式上的影響力。更多的細節可以閱讀UXPin的免費電子書《Mobile UI Design Patterns 2014》,書中有超過50個熱門移動應用的案例。
手勢
還記得瀏覽網頁時,只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎?雖然如今它們不再是唯一的交互方式,但它們的確主宰了瀏覽網頁時的用戶體驗。
從另一方面來看,移動領域已經隨著新設計模式的實現迅速擴大。也因為硬件和軟件的持續發展,移動應用設計也隨著史無前例的人機交互模式逐步發展成為現實。新的手勢為解決方案提供了可能性,也因為響應式設計的進步,網頁和移動端設計同步化加劇,使得應用程序能夠適用于各種形狀和尺寸的設備。同時,這也對網頁體驗的設計產生了重大的影響。
我們來看看安卓現有的手勢,你的直覺認為像日歷,信息或者相冊這樣的模型會有多少種交互方式?
再來看一看蘋果珍藏的多點觸控專利手勢,相信你的腦袋里一定會充斥著各種能夠設計的解決方法。下面給出的示例來自2010年的專利備案,已經有很多都被實現了,蘋果公司的專利手勢文檔中一定遠超這些示例。你可以把它當作是“少數派報告”未來的一種預見吧。
安卓系統,蘋果系統和其他移動平臺還會繼續增加各種各樣的手勢,自然地實現應用中特殊的行為和導航。這不僅僅是去除屏幕上的按鈕來保持屏幕的真實形態,更重要的是讓體驗變得直觀有趣。再將這些手勢和多樣的動畫結合起來,總有一天你就能夠把用戶界面設計模式應用到你的移動應用中。
動畫
在移動終端使用手勢讓用戶覺得使用很自然,響應也很真實。而動畫扮演很重要的角色,放飛用戶的幻想卻又把他們限制在用戶界面內。
除了有形的動畫,他們還經常使用自然的法則和規律。定時,速率,彈力,圖像和顏色過渡,滾動,以及各種設定。這些法則讓用戶覺得設計師的手段無窮無盡,充滿了驚喜。
多種動畫和手勢的結合不僅增加了體驗的樂趣性,也為用戶提供了寶貴的視覺反饋。這里只做簡要說明,之后我們會在博客和設計庫上做深入探討。
Captivate上可以看到有名的移動應用動畫。
如果你想看許多沒有裝飾的過渡,Dan?Silver或許能給你靈感。
交互基礎示例
Pinterest,當今時代最具有成效的擬真交互電子商務公司之一,其移動應用中的“可被發現的控制”模式令其大放異彩。下面,我要詳細地說明這種模式要解決的問題,以及如何完美地運用動畫和手勢。
用戶的問題
用戶想要在不中斷體驗的前提下和內容交互。
Pinterest的解決方案
Pinterest通過移除主要顯示區域中幾乎所有多余的信息和操作按鈕來避免典型的電子商務或者信息網站的那種復雜體驗。這種接近極簡的主義讓用戶通過觀察,拖動,滑動,觸摸等方式去做最緊要的事,沒有干擾,也不會分散注意力。
如期望的一樣,當用戶點擊圖片時,可以詳細了解吸引他們的圖片的更多信息。不僅如此,還可以進行其他的一些操作,如鎖定,發送,或者是隨心所欲的編輯圖片。沒有特殊聲明的話圖片可以隨意使用。可是,如果長按圖片,他們會發現從手指觸摸的地方冒出了具有同樣功能的3個氣泡。當用戶想去點擊氣泡時,手指離開屏幕它們又會消失。多次嘗試這個過程后,用戶很快學會需要將手指一直放在屏幕上,通過拖動手指到某個氣泡按鈕上來操作。這樣做了過后,手指懸停的氣泡會快速漸變成紅色,告知用戶這個按鈕被選擇了。一旦用戶手指離開屏幕,這個動作就生效了。
可見的控制按鈕配上娛樂性十足的動畫,再加上符合直覺的手勢控制,整個體驗過程都會輕松愉快。類似Pinterest或者其他站點的功能,“可被發現的控制”設計模式,讓內容更加切實,讓人著迷。
乘上交互的浪潮
現在是移動設計令人振奮的時刻,移動應用中運用手勢和動畫已成爆炸之勢發展。想要了解更多關于著名公司是怎樣將手勢和動畫融入已經存在和新的設計模式中,請閱讀UXPin的免費電子書《Mobile?UI?Design?Patterns?2014》。使用你需要的模式,剩下就不用理會了,但一定要保證將他們調整到適合于你自己的問題,最重要的是適合你的用戶。
來源:ui中國
- 目前還沒評論,等你發揮!