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

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

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

手勢(shì)

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

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

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

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

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

動(dòng)效

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

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

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

Captivate這個(gè)網(wǎng)站收集了很多流行應(yīng)用的動(dòng)畫效果

如果只想看單純的轉(zhuǎn)場(chǎng)效果，不附帶其他視覺元素, Dan Silver 可以為你提供靈感

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

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

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

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

Pinterest的解決方案

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

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

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

駕馭交互浪潮

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