這里是一套不出錯(cuò)的交互設(shè)計(jì)方法

文案策劃能力之后，我們主要探討一下與之緊密綁定的UI策劃能力。

首先UI策劃聽上去是很復(fù)雜的一件工作，實(shí)際上的UI策劃領(lǐng)域也確實(shí)有眾多的專業(yè)方法論以及細(xì)分研究領(lǐng)域，但是UI策劃的研究歸根結(jié)底也是為了配合文案策劃實(shí)現(xiàn)三個(gè)層次的用戶體驗(yàn)效果即：

1.準(zhǔn)確有效傳遞信息

2.影響用戶進(jìn)行某種操作

3.讓用戶產(chǎn)生傳播

 

當(dāng)然這三個(gè)層次的效果還需配合實(shí)際的產(chǎn)品體驗(yàn)和產(chǎn)品價(jià)值才能達(dá)到，但文案和UI的策劃在這三個(gè)效果實(shí)現(xiàn)過(guò)程中起到的作用就像是一棟房子的地基，起到了為實(shí)際內(nèi)容提供轉(zhuǎn)化支撐的堅(jiān)實(shí)作用，文案以及UI策劃越有效，內(nèi)容的體驗(yàn)和價(jià)值就越能放大。

 

理解以上概念之后，回歸到活動(dòng)運(yùn)營(yíng)的范疇。如文案策劃邏輯，我們先從基本的有效傳遞信息著手，了解怎么先做到把產(chǎn)品體驗(yàn)和價(jià)值準(zhǔn)確有效的傳遞出來(lái)，也就是從50%做到100%的過(guò)程，這是最基本和必備的UI策劃能力要求前提。后續(xù)基于這部分的內(nèi)容我們會(huì)從另外的角度來(lái)探討從100%到120%甚至1000%的后兩個(gè)階段。

 

“世界上本來(lái)沒(méi)有UI，人用著用著就有了”——李白

 

UI：user interface(人機(jī)交互界面設(shè)計(jì))。什么是交互界面設(shè)計(jì)，就是怎么與一個(gè)事物產(chǎn)生正確有效互動(dòng)的方式。交互形式本來(lái)是沒(méi)有對(duì)錯(cuò)的，但是有一天第一個(gè)發(fā)明螺絲釘?shù)娜税崖萁z釘設(shè)計(jì)成了順時(shí)針旋轉(zhuǎn)，然后大家用起來(lái)覺得還挺順手久而久之所有的人和所有的螺旋產(chǎn)品都遵循了這套流程，逆時(shí)針旋轉(zhuǎn)的螺旋瓶蓋成為了奇葩的錯(cuò)誤的交互形式。

這個(gè)就是交互產(chǎn)生的本質(zhì)，基本正確和良好的互動(dòng)體驗(yàn)結(jié)合長(zhǎng)久培養(yǎng)形成的習(xí)慣以及廣泛的共識(shí)。

 

所以交互策劃能力就是關(guān)于既有交互原則和經(jīng)驗(yàn)的使用，當(dāng)然也存在對(duì)于原則經(jīng)驗(yàn)不同層次的解讀和理解深度，理解的越深刻你就越能夠游刃有余的利用交互原則創(chuàng)造各式各樣優(yōu)異的體驗(yàn)。

 

\" 當(dāng)然，你也可以創(chuàng)造和培養(yǎng)你的用戶習(xí)慣一種全新的前所未見的交互形式以幫助你形成產(chǎn)品特色或者是用戶轉(zhuǎn)移的使用習(xí)慣成本。但是這樣的高級(jí)騷操作一般只是在產(chǎn)品本身價(jià)值足夠大或者用戶量級(jí)壟斷性優(yōu)勢(shì)的產(chǎn)品才敢輕易嘗試（有些沒(méi)有這兩個(gè)優(yōu)勢(shì)的產(chǎn)品也在嘗試可能是交互師腦子卡了）。例如微信和蘋果的產(chǎn)品上你就可以見到很多獨(dú)特創(chuàng)造的交互體驗(yàn)，競(jìng)品只能模仿，或者接受用戶轉(zhuǎn)移的習(xí)慣成本的代價(jià)。 \"

 

扯遠(yuǎn)了，我們回到活動(dòng)運(yùn)營(yíng)范疇。我們先打基礎(chǔ)，學(xué)會(huì)基本的UI原則已經(jīng)足以你把產(chǎn)品體驗(yàn)和價(jià)值100%的傳遞出來(lái)。以此為基礎(chǔ)，對(duì)這個(gè)領(lǐng)域感興趣的可以繼續(xù)深度研究下去。就像文案策劃一樣，UI專業(yè)領(lǐng)域是非常意思的，頂尖的UI策劃者游刃有余的創(chuàng)造精彩交互體驗(yàn)就像創(chuàng)造藝術(shù)作品一般，也會(huì)在行業(yè)里非常值錢。

 

又扯遠(yuǎn)了，回來(lái)

——

 

結(jié)合近百次的案例實(shí)操和廣泛的交互專業(yè)知識(shí)研究、整合、提煉，給出活動(dòng)運(yùn)營(yíng)最需要掌握的五個(gè)UI基本原則，理解并用這五個(gè)原則實(shí)時(shí)檢查你策劃的頁(yè)面，可以基本實(shí)現(xiàn)有效清晰傳遞信息的第一層級(jí)目的：

 

|3W原則：what/where/how，為什么這三個(gè)W老是出現(xiàn)在各種問(wèn)題分析原則和邏輯組織框架中，因?yàn)槿司褪菬o(wú)時(shí)無(wú)刻不在思考這三個(gè)問(wèn)題，當(dāng)這三個(gè)問(wèn)題的答案明晰的狀態(tài)下，人們就會(huì)舒適且放心，反之就會(huì)不安和想要改變這個(gè)現(xiàn)狀。所以優(yōu)秀的交互設(shè)計(jì)第一個(gè)需要遵循的原則，也是很多交互設(shè)計(jì)會(huì)忽略的部分，就是無(wú)時(shí)無(wú)刻不讓你的用戶明晰所處頁(yè)面的3W：

>我現(xiàn)在所處在的這個(gè)頁(yè)面是做什么的頁(yè)面

>我現(xiàn)在所處的頁(yè)面在整個(gè)瀏覽‘地圖’中處于什么位置

>我應(yīng)該怎么操作才能達(dá)成我的目的

 

去大量的觀察和分析優(yōu)秀產(chǎn)品以及專題策劃是如何在每一個(gè)頁(yè)面分別實(shí)現(xiàn)3W的（例如what-常見的搜索框樣式讓我知道這里可以搜索，where-搜索的路徑表讓我方便的在各級(jí)頁(yè)面來(lái)回檢索，how-直接明確的按鈕形式和引導(dǎo)文案讓我知道點(diǎn)擊就可以達(dá)成目的），收集和記錄最常見而不是最華麗的方式，合理的組合，并用3W原則來(lái)檢驗(yàn)?zāi)愕捻?yè)面是否缺失必要的元素，這個(gè)是讓用戶愿意留下來(lái)完成操作的基本。

 

要注意的是，三個(gè)問(wèn)題并不都是以直白的交互元素或者是文案直接傳遞給用戶的，只要是常見的用戶形成習(xí)慣的形態(tài)都是可以的，例如上下兩個(gè)長(zhǎng)條框，就是沒(méi)有任何文案，大部分用戶也會(huì)知道上面是賬號(hào)輸入框下面是密碼輸入框。

 

靈活運(yùn)用，不要死板硬套

 

——

|預(yù)期一致性原則：引導(dǎo)用戶進(jìn)入下一個(gè)頁(yè)面的操作按鈕，不管在當(dāng)前頁(yè)面優(yōu)先級(jí)多靠后，下一個(gè)頁(yè)面優(yōu)先級(jí)最高的內(nèi)容必須與之呼應(yīng)，這樣用戶才會(huì)有‘我做了正確的操作’的第一印象，否則用戶就會(huì)產(chǎn)生困惑。簡(jiǎn)單來(lái)說(shuō)就是，你點(diǎn)擊了一個(gè)‘查看居家分會(huì)場(chǎng)’的文字鏈，下一個(gè)頁(yè)面的第一優(yōu)先級(jí)內(nèi)容必須讓我知道，我確實(shí)進(jìn)到了居家分會(huì)場(chǎng)的頁(yè)面。

 

聽上去似乎是有點(diǎn)廢話的道理，但是回顧一下文案策劃里舉出的反例，其實(shí)有太多項(xiàng)目忽略了這一點(diǎn)。在策劃過(guò)程中往往只考慮了頁(yè)面之間的跳轉(zhuǎn)邏輯，似乎用戶只要成功點(diǎn)擊了按鈕，就一定會(huì)停留在下一個(gè)頁(yè)面。所以大量的壞案例就是用了欺騙性刺激性的文案引導(dǎo)用戶在上一個(gè)層級(jí)進(jìn)行了點(diǎn)擊，然后下一個(gè)頁(yè)面又用另外的內(nèi)容來(lái)承接。

 

不符合連續(xù)性預(yù)期的瀏覽是非常痛苦的，就像是一次又一次失敗的嘗試，當(dāng)挫敗感達(dá)到忍耐極限的時(shí)候，你的產(chǎn)品有再多價(jià)值用戶都跑了。當(dāng)然會(huì)有一些比較有耐心的用戶會(huì)留下來(lái)，耗費(fèi)極大的成本一次又一次的嘗試，然后這些用戶往往都會(huì)有一個(gè)心態(tài)既然都花了那么多精力了，達(dá)成目的的預(yù)期也就會(huì)更高一些，所以這些留下來(lái)的用戶往往在第一次嘗試呈現(xiàn)出轉(zhuǎn)化率高的數(shù)據(jù)效果，除非你真金白銀的撒錢否則他們也再不會(huì)想嘗試第二次了。

 

這就是為什么很多糟糕的活動(dòng)一開始會(huì)有好的轉(zhuǎn)化數(shù)字效果，但是數(shù)字越做越低的原因，請(qǐng)謹(jǐn)防這個(gè)陷阱。

——

 

|單線程操作原則：活動(dòng)運(yùn)營(yíng)常常需要面對(duì)的任務(wù)是通過(guò)一次專題頁(yè)面讓用戶達(dá)成一個(gè)主要目的（完成購(gòu)買，成為粉絲或是發(fā)起傳播等），最多再附帶1-2個(gè)次要的任務(wù)，如果更多，那么意味著這個(gè)不是一個(gè)專題活動(dòng)可以解決的問(wèn)題，需要依賴更復(fù)雜的欄目形態(tài)來(lái)解決，這個(gè)涉及到更專業(yè)巨細(xì)的交互規(guī)劃，把他交給合作的產(chǎn)品經(jīng)理來(lái)完成這個(gè)任務(wù)。

 

來(lái)到活動(dòng)運(yùn)營(yíng)的專題頁(yè)面領(lǐng)域，問(wèn)題簡(jiǎn)單一些，用戶的最優(yōu)達(dá)成目的路徑去除掉復(fù)雜的導(dǎo)航檢索設(shè)置、不考慮多層級(jí)信息組織，任務(wù)簡(jiǎn)化成一個(gè)最簡(jiǎn)單的問(wèn)題：如何提高用戶逐級(jí)往下走的轉(zhuǎn)化效率。當(dāng)然，你的最終的內(nèi)容對(duì)用戶的吸引程度是本質(zhì)決定用戶耐心的因素（如果是一個(gè)領(lǐng)取100元現(xiàn)金的任務(wù)你可以用世界上最爛的交互完全沒(méi)問(wèn)題），所以在既定內(nèi)容吸引度下如何通過(guò)簡(jiǎn)單的交互原則盡量避免用戶跳失是我們需要探討的話題。

 

首先我們需要面對(duì)一個(gè)現(xiàn)實(shí)，在無(wú)線端時(shí)代，用戶的跳失風(fēng)險(xiǎn)極大提升。PC時(shí)代新開頁(yè)面的邏輯可以讓你肆無(wú)忌憚的讓用戶錯(cuò)誤操作，只要是新開窗口，用戶總能找回標(biāo)注著已操作狀態(tài)的上一層級(jí)頁(yè)面。但是無(wú)線端頁(yè)面逐級(jí)覆蓋，大量的設(shè)備或者瀏覽器并不能處理好右滑和關(guān)閉的關(guān)系（甚至連微信這里的體驗(yàn)都很糟糕）。每一次用戶錯(cuò)誤的跳轉(zhuǎn)都有極大的流失風(fēng)險(xiǎn)，所以一定慎重對(duì)待用戶的每一次關(guān)鍵點(diǎn)擊，當(dāng)作用戶沒(méi)有回來(lái)的可能去對(duì)待。

 

一個(gè)最有效應(yīng)對(duì)的方式就是盡量讓你的任務(wù)完成路徑單線程：一路點(diǎn)到底，一路滑到底的體驗(yàn)是無(wú)線端最舒適的交互體驗(yàn)。

 

盡量避免使用任何打亂用戶單線程操作的交互形態(tài)，常見幾種：

1.多個(gè)用戶需要完成的任務(wù)，盡量串聯(lián)成線性而不是一開始就讓用戶去選擇，比如購(gòu)買操作和關(guān)注店鋪操作，一般在用戶完成購(gòu)買后再做關(guān)注引導(dǎo)而不是一開始給用戶兩個(gè)按鈕。（關(guān)注一下現(xiàn)在很多電商網(wǎng)站的無(wú)線端版本取消了加入購(gòu)物車和立即購(gòu)買的并行設(shè)置，大多是根據(jù)品類屬性或者是促銷狀態(tài)預(yù)留一個(gè)主按鈕）

2.導(dǎo)航切換的點(diǎn)擊折損率是一路下滑依次放置的折損率1.5-2倍，當(dāng)然固化運(yùn)營(yíng)的欄目長(zhǎng)期用戶習(xí)慣形成后這個(gè)差距會(huì)逐步消失，但對(duì)于短期的活動(dòng)頁(yè)面來(lái)說(shuō)，用戶很難在第一時(shí)間就有動(dòng)力去理解太多并行的概念并且正確作出選擇，以上是大量實(shí)際案例測(cè)試的結(jié)果。

3.出現(xiàn)異常流（例如優(yōu)惠券發(fā)放完畢的提示框），不要依賴用戶自己回退，用一個(gè)明顯的按鈕（回去看商品）把用戶的異常流串回單線操作。

 

更多的情況大家可以按照這個(gè)原則舉一反三和驗(yàn)證

 

——

 

|三層優(yōu)先級(jí)原則：總是被diss頁(yè)面內(nèi)容放置太多用戶閱讀很痛苦，如何判斷和合適的組織內(nèi)容量？簡(jiǎn)單來(lái)說(shuō)三層是一個(gè)很好的標(biāo)準(zhǔn)。

 

每個(gè)頁(yè)面放置主要的一個(gè)信息，和一個(gè)次要信息和一個(gè)補(bǔ)充信息（要注意，操作按鈕也是信息）。多余的信息盡量剔除，如果實(shí)在有無(wú)法剔除的主要信息，用單線操作原則串聯(lián)到下一個(gè)環(huán)節(jié)。

 

在專題活動(dòng)中首屏信息三層優(yōu)先級(jí)的常見運(yùn)用就如文案部分介紹的：依次告訴我我在哪里（主標(biāo)題），我為什么留下來(lái)（主要噱頭），我可以做什么（操作引導(dǎo)）。

 

然后接下來(lái)的每一個(gè)層級(jí)信息組織都遵循以上原則：商品模塊三個(gè)元素，名稱，價(jià)格，操作按鈕；商品模塊下的商品賣點(diǎn)三個(gè)元素；

 

很多交互方法論還在教大家一個(gè)記憶大師叫做喬治米勒研究出的人類記憶概念7+-2原則，也就是人可以同時(shí)記住的概念是在5-9這個(gè)范圍內(nèi)。但是記住是一種主動(dòng)行為，不要指望用戶在一個(gè)短期的專題頁(yè)面會(huì)愿意去主動(dòng)記住你的內(nèi)容，所以謹(jǐn)慎對(duì)待和運(yùn)用。

 

但為什么是三，大量的主流的交互界面體驗(yàn)都是三個(gè)主要元素和逐級(jí)展開的三層邏輯。看看appstore的app界面：app名稱，主要賣點(diǎn)，下載按鈕。評(píng)分界面：評(píng)論標(biāo)題，星際，評(píng)論主體。久而久之用戶對(duì)這種三個(gè)元素的閱讀習(xí)慣形成后，就成為了既定的交互原則。

 

但也沒(méi)有那么死板。。。實(shí)在需要補(bǔ)充一個(gè)避免風(fēng)險(xiǎn)的信息（獎(jiǎng)券發(fā)完即止），弱化的微小的字體加一個(gè)備注也不會(huì)完蛋。。。

 

—— 

|習(xí)慣套用原則：根據(jù)交互誕生原理我們知道，交互的本質(zhì)就是用戶形成的既定習(xí)慣。所以最后必須要遵守的一個(gè)交互原則就是，盡量避免創(chuàng)造新的交互體驗(yàn)，盡量運(yùn)用業(yè)內(nèi)最常見的交互形態(tài)而不是最酷炫的交互形態(tài)，除非酷炫是你的目標(biāo)而不是轉(zhuǎn)化。

 

這個(gè)原則還有一個(gè)更高階的運(yùn)用形式，就是把既有交互的參考從線上體驗(yàn)拓展到所有與人產(chǎn)生交互行為的事物上，只要是大眾普遍認(rèn)知和習(xí)慣的交互操作都是你可以借鑒的。

 

舉一個(gè)例子，很多活動(dòng)運(yùn)營(yíng)都會(huì)有策劃互動(dòng)游戲的經(jīng)驗(yàn)，當(dāng)然抄大家熟悉的互動(dòng)游戲模式是最不會(huì)錯(cuò)的方法。但是如果想在互動(dòng)體驗(yàn)里面做一些創(chuàng)新，建議你去借鑒既有的線下游戲體驗(yàn)而不是自己獨(dú)創(chuàng)一個(gè)全新的交互操作。一進(jìn)來(lái)需要用一個(gè)浮層和一大堆箭頭文案指導(dǎo)你如何操作的互動(dòng)游戲是讓人很抗拒的，如果你的互動(dòng)游戲是完全參考了線下的抓娃娃機(jī)，頁(yè)面里面的遙感和抓取按鈕并不需要你做任何解釋，用戶進(jìn)入頁(yè)面第一時(shí)間就知道如何操作。

 

同理，一瓶可樂(lè)我知道可以搖一搖，一個(gè)剪刀我知道要把手柄捏起來(lái)，一個(gè)氣球我知道可以戳爆。

 

舉一反三，你就可以創(chuàng)造有趣但又有效的互動(dòng)形式。

 

——

|一個(gè)有效的技巧：PC時(shí)代傳承了大量的交互經(jīng)驗(yàn)，當(dāng)然大部分都是有效的，畢竟用戶經(jīng)歷了這么多年的培養(yǎng)已經(jīng)形成了習(xí)慣。但是時(shí)刻思考一個(gè)問(wèn)題：用戶現(xiàn)在是在用手指點(diǎn)擊而不是鼠標(biāo)，你就能發(fā)現(xiàn)大量可以優(yōu)化的交互點(diǎn)。

 

例如，圓形的按鈕更符合用戶手指的形狀，方形的按鈕更多是鼠標(biāo)點(diǎn)擊的形態(tài)，在關(guān)鍵的點(diǎn)擊引導(dǎo)環(huán)節(jié)，用一個(gè)大大的立體的充滿點(diǎn)擊感的圓形按鈕帶給用戶的點(diǎn)擊欲望絕對(duì)大過(guò)一個(gè)常規(guī)的方形按鈕。

 

我都不用截圖舉例，自己想象一下是不是

 

當(dāng)然以上的交互原則并不是全部，但是只要能時(shí)時(shí)運(yùn)用檢查，舉一反三，搞定活動(dòng)運(yùn)營(yíng)常見的任務(wù)，達(dá)成準(zhǔn)確傳遞信息的目的，減少跳失已經(jīng)完全足夠。如果還希望往接下來(lái)的兩個(gè)階段走，成為更專業(yè)的UI大師，可以做兩件事情：

1.學(xué)習(xí)更多的專業(yè)交互知識(shí)，同步搜集大量的有效交互案例，配合實(shí)踐沉淀自己的交互方法論和交互原型庫(kù)。

2.通過(guò)用戶洞察能力的提升，培養(yǎng)文案和交互的敏感性，這個(gè)后面會(huì)展開聊。