在很多新興的UI設(shè)計(jì)模式中，核心便是高度成熟的手勢(shì)設(shè)定和動(dòng)效，
歷經(jīng)多年發(fā)展，移動(dòng)游戲掀開(kāi)了嶄新的篇章，效果炫目，操作感強(qiáng)。而網(wǎng)站推廣者也發(fā)現(xiàn)，網(wǎng)站若能添加更多的交互元素，推廣效果將更佳——交互性為王！移動(dòng)應(yīng)用設(shè)計(jì)師和開(kāi)發(fā)者開(kāi)始重視交互效果。時(shí)至今日，市面上的大多數(shù)應(yīng)用都開(kāi)始考慮用戶(hù)操作是否方便、導(dǎo)航是否清晰可靠、是否有滿(mǎn)足需求的社交功能。開(kāi)發(fā)者和設(shè)計(jì)者經(jīng)歷了十多年的耕耘，不斷提煉，目的只是為了讓內(nèi)容、讓視覺(jué)元素更契合移動(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)，以及鍵盤(pán)的案件敲擊來(lái)觸發(fā)網(wǎng)絡(luò)交互效果、完成操作。而到了今天，在操作方式上我們的選擇可以有很多，然而，鼠標(biāo)+鍵盤(pán)的操作方式依然支配著互聯(lián)網(wǎng)用戶(hù)體驗(yàn)。
移動(dòng)應(yīng)用設(shè)計(jì)，從某種程度上講，探索出了大量新的設(shè)計(jì)模式和操作方式。移動(dòng)領(lǐng)域的探索，需要基于軟硬件性能，在毫無(wú)此類(lèi)人機(jī)交互先例的情況下，披荊斬棘。在移動(dòng)端，大量的問(wèn)題解決方案都是基于手勢(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ì)是怎樣在用戶(hù)使用日歷、發(fā)送短信、瀏覽圖庫(kù)時(shí)，方便操作的。
而我們?cè)賮?lái)看看蘋(píng)果的多點(diǎn)觸控交互系統(tǒng)，我們可以發(fā)現(xiàn)，里面有暗含著太多的機(jī)會(huì)以及可以解決問(wèn)題的手勢(shì)。下面的圖是2010年的專(zhuān)題，盡管如此，還是有很多手勢(shì)設(shè)定沒(méi)有被采用，而蘋(píng)果的手勢(shì)專(zhuān)利可不止這一張。
Android, iOS, 和其他移動(dòng)平臺(tái)還會(huì)繼續(xù)增加原生手勢(shì)的種類(lèi)，進(jìn)而方便操作和導(dǎo)航。手勢(shì)不但可以提高屏幕空間的利用率，通過(guò)手勢(shì)替代了一些按鈕。同時(shí)還可以構(gòu)成更直觀、更有趣的體驗(yàn)。手勢(shì)結(jié)合動(dòng)效的設(shè)計(jì)模式，將在移動(dòng)應(yīng)用中大展拳腳。
動(dòng)效
手勢(shì)的好處在于直觀、響應(yīng)迅速，感覺(jué)仿佛是在現(xiàn)實(shí)生活中交互。而動(dòng)效，可以讓用戶(hù)更加沉浸、更加身臨其境，進(jìn)而提高他們的忠誠(chéng)度。
動(dòng)效通過(guò)模仿自然界的運(yùn)動(dòng)規(guī)律和視感來(lái)愉悅用戶(hù)。時(shí)間、速率、彈性、圖像和色彩的變換、滾動(dòng)等種種設(shè)置，在設(shè)計(jì)者的精心微調(diào)之下，帶給用戶(hù)無(wú)盡的驚奇和享受。
精良的動(dòng)效結(jié)合手勢(shì)，增添了用戶(hù)體驗(yàn)中得愉悅性，及時(shí)提供視覺(jué)反饋，讓用戶(hù)可以平穩(wěn)接受轉(zhuǎn)換。
Captivate這個(gè)網(wǎng)站收集了很多流行應(yīng)用的動(dòng)畫(huà)效果
如果只想看單純的轉(zhuǎn)場(chǎng)效果，不附帶其他視覺(jué)元素, Dan Silver 可以為你提供靈感
交互性?xún)?yōu)秀的移動(dòng)案例
Pinterest, 以沉浸式體驗(yàn)和良好的交互性而知名，而這里將講講它的“可發(fā)現(xiàn)控件”設(shè)計(jì)模式，我將講述采用這種設(shè)計(jì)模式的目的是為了解決什么問(wèn)題。還講講述Pinterest是如何通過(guò)動(dòng)效和手勢(shì)讓交互變得美麗誘人的。
電商類(lèi)應(yīng)用中，用戶(hù)會(huì)遇到的問(wèn)題
用戶(hù)不想被大量的功能性元素妨礙瀏覽。
Pinterest的解決方案
Pinterest一反電商應(yīng)用臃腫之常態(tài)，在應(yīng)用的主要界面中，移除了操作按鈕和額外信息功能。極簡(jiǎn)式的設(shè)計(jì)讓用戶(hù)清晰的了解到界面中元素哪些是重要的，哪些較為次要——用戶(hù)主要通過(guò)拖動(dòng)、滑動(dòng)、觸摸、按壓來(lái)與內(nèi)容交互，盡量減少界面中除內(nèi)容外的干擾因素。
正如預(yù)期所想那樣，當(dāng)用戶(hù)點(diǎn)擊圖像，圖像會(huì)放大，進(jìn)入細(xì)節(jié)界面，從而了解更多和圖像相關(guān)的信息。在細(xì)節(jié)視圖中，用戶(hù)可以完成主要的操作，例如加入釘板（類(lèi)似收藏），發(fā)送分享，或者編輯圖像。似乎除了這些功能再?zèng)]有別的功能了。然而，如果用戶(hù)按壓圖像，他們會(huì)發(fā)現(xiàn)會(huì)從指尖下方的屏幕彈出3個(gè)原型按鈕，同樣提供了上述三個(gè)功能。當(dāng)用戶(hù)的手指靠近某個(gè)按鈕，按鈕會(huì)變紅，松手后便能完成操作。只需要重復(fù)1-2次這種操作，用戶(hù)便能學(xué)會(huì)。
整個(gè)體驗(yàn)愉悅，因?yàn)閯?dòng)效精心設(shè)計(jì)，平滑而不突兀。而手勢(shì)提高了操作的直觀性。“可發(fā)現(xiàn)控件”這種設(shè)計(jì)模式提升了內(nèi)容的可讀性和操作性——Tinder的那種讓人上癮的、滑動(dòng)顯示資料的操作方式也很類(lèi)似。
駕馭交互浪潮
這是移動(dòng)應(yīng)用設(shè)計(jì)最令人興奮的時(shí)代，還有更多的采用手勢(shì)和動(dòng)效的交互案例有待探索。如果想要了解更多最火熱的設(shè)計(jì)模式，請(qǐng)看UXPin的新書(shū)Mobile UI Design Patterns 2014. （IFEC已經(jīng)開(kāi)始動(dòng)工，各位敬請(qǐng)期待），這本書(shū)能夠滿(mǎn)足你的設(shè)計(jì)參考需求，但在使用設(shè)計(jì)模式時(shí)，請(qǐng)務(wù)必“量體裁衣”針對(duì)問(wèn)題和用戶(hù)而設(shè)計(jì)。