這里是一套不出錯(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)過程中起到的作用就像是一棟房子的地基，起到了為實(shí)際內(nèi)容提供轉(zhuǎn)化支撐的堅(jiān)實(shí)作用，文案以及UI策劃越有效，內(nèi)容的體驗(yàn)和價(jià)值就越能放大。

 

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

 

“世界上本來沒有UI，人用著用著就有了”——李白

 

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

這個(gè)就是交互產(chǎn)生的本質(zhì)，基本正確和良好的互動(dòng)體驗(yàn)結(jié)合長久培養(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)品才敢輕易嘗試（有些沒有這兩個(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)營范疇。我們先打基礎(chǔ)，學(xué)會(huì)基本的UI原則已經(jīng)足以你把產(chǎn)品體驗(yàn)和價(jià)值100%的傳遞出來。以此為基礎(chǔ)，對(duì)這個(gè)領(lǐng)域感興趣的可以繼續(xù)深度研究下去。就像文案策劃一樣，UI專業(yè)領(lǐng)域是非常意思的，頂尖的UI策劃者游刃有余的創(chuàng)造精彩交互體驗(yàn)就像創(chuàng)造藝術(shù)作品一般，也會(huì)在行業(yè)里非常值錢。

 

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

——

 

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

 

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

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

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

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

 

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

 

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

 

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

 

——

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

 

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

 

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

 

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

——

 

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

 

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

 

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

 

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

 

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

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

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

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

 

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

 

——

 

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

 

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

 

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

 

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

 

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

 

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

 

但也沒有那么死板。。。實(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)營都會(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)來需要用一個(gè)浮層和一大堆箭頭文案指導(dǎo)你如何操作的互動(dòng)游戲是讓人很抗拒的，如果你的互動(dòng)游戲是完全參考了線下的抓娃娃機(jī)，頁面里面的遙感和抓取按鈕并不需要你做任何解釋，用戶進(jìn)入頁面第一時(shí)間就知道如何操作。

 

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

 

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

 

——

|一個(gè)有效的技巧：PC時(shí)代傳承了大量的交互經(jīng)驗(yàn)，當(dāng)然大部分都是有效的，畢竟用戶經(jīng)歷了這么多年的培養(yǎng)已經(jīng)形成了習(xí)慣。但是時(shí)刻思考一個(gè)問題：用戶現(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ì)大過一個(gè)常規(guī)的方形按鈕。

 

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

 

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

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

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