在很多新興的UI設(shè)計(jì)模式中，核心便是高度成熟的手勢設(shè)定和動效。

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

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

手勢

憶往昔，我們僅能依靠鼠標(biāo)的點(diǎn)擊、懸停、滾動，以及鍵盤的案件敲擊來觸發(fā)網(wǎng)絡(luò)交互效果、完成操作。而到了今天，在操作方式上我們的選擇可以有很多，然而，鼠標(biāo)+鍵盤的操作方式依然支配著互聯(lián)網(wǎng)用戶體驗(yàn)。

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

如果仔細(xì)研究安卓當(dāng)前的手勢設(shè)定，你會發(fā)現(xiàn)，這些手勢是怎樣在用戶使用日歷、發(fā)送短信、瀏覽圖庫時，方便操作的。

而我們再來看看蘋果的多點(diǎn)觸控交互系統(tǒng)，我們可以發(fā)現(xiàn)，里面有暗含著太多的機(jī)會以及可以解決問題的手勢。下面的圖是2010年的專題，盡管如此，還是有很多手勢設(shè)定沒有被采用，而蘋果的手勢專利可不止這一張。

Android, iOS, 和其他移動平臺還會繼續(xù)增加原生手勢的種類，進(jìn)而方便操作和導(dǎo)航。手勢不但可以提高屏幕空間的利用率，通過手勢替代了一些按鈕。同時還可以構(gòu)成更直觀、更有趣的體驗(yàn)。手勢結(jié)合動效的設(shè)計(jì)模式，將在移動應(yīng)用中大展拳腳。

動效

手勢的好處在于直觀、響應(yīng)迅速，感覺仿佛是在現(xiàn)實(shí)生活中交互。而動效，可以讓用戶更加沉浸、更加身臨其境，進(jìn)而提高他們的忠誠度。

動效通過模仿自然界的運(yùn)動規(guī)律和視感來愉悅用戶。時間、速率、彈性、圖像和色彩的變換、滾動等種種設(shè)置，在設(shè)計(jì)者的精心微調(diào)之下，帶給用戶無盡的驚奇和享受。

精良的動效結(jié)合手勢，增添了用戶體驗(yàn)中得愉悅性，及時提供視覺反饋，讓用戶可以平穩(wěn)接受轉(zhuǎn)換。

交互性優(yōu)秀的移動案例

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

電商類應(yīng)用中，用戶會遇到的問題

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

Pinterest的解決方案

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

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

整個體驗(yàn)愉悅，因?yàn)閯有Ь�心設(shè)計(jì)，平滑而不突兀。而手勢提高了操作的直觀性�！翱砂l(fā)現(xiàn)控件”這種設(shè)計(jì)模式提升了內(nèi)容的可讀性和操作性——Tinder的那種讓人上癮的、滑動顯示資料的操作方式也很類似。