根據(jù)遇到的問(wèn)題，總結(jié)的一些小經(jīng)驗(yàn)，個(gè)人的一點(diǎn)薄見(jiàn)，歡迎大家交流。

國(guó)內(nèi)國(guó)外運(yùn)營(yíng) Banner 設(shè)計(jì)

最近有小伙伴接到了國(guó)外的運(yùn)營(yíng)外包項(xiàng)目，發(fā)現(xiàn)國(guó)外和國(guó)內(nèi)對(duì)于運(yùn)營(yíng)的需求是有差別的，這篇文章就談?wù)剣?guó)內(nèi)外：中國(guó)、韓國(guó)、歐美，它們運(yùn)營(yíng)設(shè)計(jì)的各自特點(diǎn)和里面的門道。

主要從以下三方面來(lái)說(shuō)：

1. 風(fēng)格特點(diǎn)

三個(gè)地區(qū)文化差異大不相同。

中國(guó)從古到今講究遵循傳統(tǒng)，過(guò)年過(guò)節(jié)講究氣氛，營(yíng)造一種氛圍。用紅包來(lái)表達(dá)祝福和心意；其次，就是社會(huì)環(huán)境，中國(guó)人喜歡「熱鬧」，逢年過(guò)節(jié)，一幫人聚到一起才熱鬧，別人都買、賣的火的肯定就是好的，所以就「跟風(fēng)效仿」。

韓國(guó)建國(guó)很晚，歷史相對(duì)比較短。所以文化氛圍比較年輕，偶像文化在韓國(guó)盛行，傳統(tǒng)的東西相對(duì)較少，都是比較年輕化的：年輕化的偶像，年輕化的文化，年輕化的價(jià)值觀。

歐美整個(gè)文化環(huán)境受移民的影響，比較開(kāi)放國(guó)際化，體現(xiàn)的文化也是比較多元的，包容性、簡(jiǎn)潔、時(shí)尚是這些它最直接的特點(diǎn)。

接下來(lái)分別談一下三個(gè)地區(qū)運(yùn)營(yíng)推廣的設(shè)計(jì)特點(diǎn)差異化：

中國(guó)

中國(guó)的運(yùn)營(yíng)突出的是優(yōu)惠：送紅包、滿減、優(yōu)惠券等；必須要喜慶，鮮艷的色彩：以紅色、橙色、黃色居多，來(lái)刺激消費(fèi)。就好像進(jìn)了賣場(chǎng)「瞧一瞧看一看，季末打折滿100減99」

韓國(guó)

韓國(guó)的文化里「社交」這一關(guān)鍵詞體現(xiàn)的尤為重要，「Line」這款A(yù)PP對(duì)韓國(guó)影響比較大，里面的矢量涂鴉風(fēng)格的插畫(huà)深入人心，Line 官方設(shè)計(jì)可愛(ài)且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個(gè)形象也很有特點(diǎn)，所以Line的「IP屬性」和「矢量涂鴉」就成為了韓國(guó)主流設(shè)計(jì)風(fēng)格。

2. 整體構(gòu)圖

而韓國(guó)的偶像明星文化也頗具影響力，在推廣時(shí)也會(huì)用到明星來(lái)制造效應(yīng)。

我們從整體構(gòu)圖解析一下三個(gè)地區(qū)的設(shè)計(jì)細(xì)節(jié)。首先把一個(gè)運(yùn)營(yíng) banner 按照組件層級(jí)進(jìn)行拆分，分別來(lái)看一下。

分為：文字層、主體物層、裝飾層、背景層

文字層

從文字層可以看出中國(guó)的文字層級(jí)劃分更加清晰。運(yùn)用「格式塔」原理，主文案和副標(biāo)題的突出，能讓用戶對(duì)信息提取更加準(zhǔn)確直觀。

中文結(jié)構(gòu)的復(fù)雜性，排版上必須嚴(yán)格區(qū)分，所以在層級(jí)劃分上裝飾線的運(yùn)用也是比較常見(jiàn)的。（后面有針對(duì)性字體設(shè)計(jì)形式，詳細(xì)解讀，這里就不細(xì)說(shuō)了）

韓文的本身的圖形特質(zhì)，為保證識(shí)別度，文案提煉精簡(jiǎn)，信息層級(jí)相對(duì)較少。文字層級(jí)一般分為兩層。

有意思的是韓文由于字形結(jié)構(gòu)的單一，排版上很多時(shí)候會(huì)搭配字體形式的變化來(lái)增加排版樣式的變化，裝飾線的運(yùn)用也比較多變。

英文排版上本質(zhì)上和韓文相同——符號(hào)化，通過(guò)字形的特點(diǎn)來(lái)特出主要信息。

排版的優(yōu)勢(shì)性，讓其排版變化上自帶韻律感，加上裝飾線的運(yùn)用，本身字形的符號(hào)特性視覺(jué)呈現(xiàn)很有設(shè)計(jì)感。

主體物層

為了輔助信息傳達(dá)，往往采用圖文結(jié)合，注意主體物的構(gòu)圖布局朝向，主題物對(duì)主要文字起到視覺(jué)引導(dǎo)作用，用戶的聚焦點(diǎn)一定是主文案，而不是主體物。

下圖里「手」作為整個(gè)畫(huà)面的「支點(diǎn)」，把模特的臉部向主要文案指引，最終達(dá)到活動(dòng)的最核心。

下圖里「眼睛」為整個(gè)畫(huà)面的「支點(diǎn)」，利用眼睛視線，把用戶向文案核心指引。

利用周圍的物體形成三個(gè)「支點(diǎn)」，把視覺(jué)中心聚焦到中間主文案。

裝飾層

點(diǎn)線面是運(yùn)用最多的元素，中國(guó)把平面設(shè)計(jì)的三大構(gòu)成運(yùn)用到了。

為了營(yíng)造構(gòu)圖的穩(wěn)定性，在設(shè)計(jì)里加入點(diǎn)和線的元素讓畫(huà)面占比更加平衡，同時(shí)彌補(bǔ)畫(huà)面中空白的地方，減少負(fù)空間，讓構(gòu)圖更加飽滿。

同時(shí)點(diǎn)和線的元素也是為了輔助襯托主體元素，分布要合理，避免過(guò)多，造成使畫(huà)面的擁擠。

面簡(jiǎn)單的理解成形狀，用形狀配合主體物，達(dá)到聚焦視覺(jué)中心，來(lái)突出主題，但是形狀不易過(guò)于復(fù)雜，「格式塔原理」——「簡(jiǎn)單」原則（我們的眼睛在觀看時(shí)，眼腦并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來(lái)，使之成為一個(gè)更易于理解的統(tǒng)一體），用戶更容易理解。

三角形——利用穩(wěn)定的特點(diǎn)來(lái)達(dá)到視覺(jué)的平衡

圓形——最簡(jiǎn)單直接有效的圖形元素，視覺(jué)聚焦更明確

多邊形——豐富畫(huà)面，多邊形的邊角多的特點(diǎn)也多用做突出設(shè)計(jì)的高逼格

形狀流體在營(yíng)銷中突出了活動(dòng)的促銷感和氣氛，在重大活動(dòng)中經(jīng)常看到，色彩上也比較鮮艷。相較歐美、韓國(guó)，中國(guó)電商運(yùn)用比較多，這也側(cè)面反映出出中國(guó)運(yùn)營(yíng)推廣競(jìng)爭(zhēng)的殘酷性映射出來(lái)的「浮夸」。

背景層

中國(guó)設(shè)計(jì)里最多變的就屬背景了?？梢岳枚嗖蕽u變、放射的線、還有圖案疊加，讓畫(huà)面迎合表達(dá)的主體基調(diào)

韓國(guó)的設(shè)計(jì)分為涂鴉放射背景和純色背景簡(jiǎn)單幾何形狀

歐美撞色對(duì)比和性冷淡純色底，也會(huì)運(yùn)用視錯(cuò)覺(jué)，來(lái)吸引用戶眼球

3. 營(yíng)銷推廣層面

文案是營(yíng)銷第一要素，想辦法突出運(yùn)營(yíng)信息，是所有運(yùn)營(yíng)必須要注意的，這就有了根據(jù)活動(dòng)氣氛進(jìn)行字體設(shè)計(jì)。

中國(guó)字體的復(fù)雜和文化的久遠(yuǎn)特殊性，對(duì)于字體我們是有很深的研究和造詣，表現(xiàn)空間也很大。另外由于中文字形的復(fù)雜，導(dǎo)致字庫(kù)設(shè)計(jì)成本比較大，字體種類相對(duì)較少，為了避免字體版權(quán)問(wèn)題，多采用一些設(shè)計(jì)變形來(lái)達(dá)到營(yíng)銷推廣目的。比如針對(duì)字形進(jìn)行改變、針對(duì)筆畫(huà)進(jìn)行加工、針對(duì)體積和質(zhì)感進(jìn)行變化等。

層次疊加——提取等比重的筆畫(huà)，變現(xiàn)字體的體積和空間感

筆畫(huà)鏈接——讓文字直接更緊湊，空間運(yùn)用更整體合理

筆畫(huà)裝飾——增加文字設(shè)計(jì)感，突出表現(xiàn)風(fēng)格

厚度層次——讓字體突出，增加厚重感

字形改變?cè)O(shè)計(jì)——考慮到字體版權(quán)，對(duì)字體進(jìn)行再設(shè)計(jì)，結(jié)合主題進(jìn)行宣傳

字體內(nèi)部裝飾——字體呼應(yīng)主題的一種簡(jiǎn)單方式

韓國(guó)字形相對(duì)簡(jiǎn)單，變化不是很多，運(yùn)用厚度體積和筆畫(huà)裝飾來(lái)表現(xiàn)字體

歐美的西文字體更多的是運(yùn)用和主體物穿插、和字形搭配的變換，和復(fù)古風(fēng)字體厚度設(shè)計(jì)

4. 小結(jié)

可以看到不同的國(guó)家地區(qū)根據(jù)本國(guó)習(xí)慣、審美、風(fēng)格不同，都有各自不同的設(shè)計(jì)。中國(guó)營(yíng)銷快速簡(jiǎn)單直接出效果；韓國(guó)偶像路線，不管是對(duì)于模特的選擇，還是網(wǎng)紅形象的選擇，把粉絲效應(yīng)運(yùn)用到了；而歐美則簡(jiǎn)單兼顧設(shè)計(jì)創(chuàng)意表現(xiàn)。

淺談學(xué)習(xí)Banner

隨著教育在大趨勢(shì)下崛起，很多學(xué)習(xí)類產(chǎn)品開(kāi)始出現(xiàn)。很多在做教育的小伙伴求助，學(xué)習(xí)類的運(yùn)營(yíng) banner 無(wú)從下手，思路不清晰，那么我稍稍的屢了一下思路，淺談一下學(xué)習(xí) banner 的個(gè)人薄見(jiàn)。

在很多設(shè)計(jì)師剛開(kāi)始縷思路的時(shí)候，總因?yàn)闊o(wú)從下手而著急盲目，下意識(shí)的認(rèn)為「我不會(huì)啊」！那復(fù)雜的不會(huì)，就從簡(jiǎn)單的開(kāi)始縷。從設(shè)計(jì)開(kāi)始，我構(gòu)圖都沒(méi)想好，設(shè)計(jì)啥設(shè)計(jì)？那再簡(jiǎn)單點(diǎn)，從構(gòu)圖開(kāi)始吧，我思路都沒(méi)想好，構(gòu)啥圖？繼續(xù)再簡(jiǎn)單點(diǎn)，一步一步往前推，直到推到最簡(jiǎn)單的細(xì)節(jié)，從最初第一步開(kāi)始做。你會(huì)發(fā)現(xiàn)，首先第一步就是先建立一個(gè)符合主題的思路。

談到學(xué)習(xí)類 banner，光聽(tīng)一聽(tīng)就覺(jué)得頭大甚至很討厭的事情。因?yàn)楸緛?lái)學(xué)習(xí)就是讓人很拒絕的，如何引導(dǎo)用戶主動(dòng)做一個(gè)不想做的事，就得用到一些特殊的手段了。

咱們這次主要從以下方面來(lái)多維度探討：

1. 主題定位方向

K12教育

K12 也就是九年義務(wù)教育和三年高中，所以人群定位青少年，年齡 7-18 歲。這個(gè)年齡段非常單純。

大家可以回想一下我們小時(shí)候，在這個(gè)年齡最享受的是什么？那就是「滿足感」和「參與感」，我們小時(shí)候玩積木、做游戲，最重要的不是贏了能得到什么東西，而是參與到其中享受快樂(lè)。所以建立一種參與感，參與進(jìn)來(lái)「一起玩」的感覺(jué)，就會(huì)得到滿足。

我們看到下面這類 APP，為了能夠吸引這一部分用戶，大多都以有趣好玩為主，「游戲性」是最大的特點(diǎn)，所以情感化設(shè)計(jì)是非常好的選擇，通過(guò)豐富的「體積感插畫(huà)」用游戲的思路激發(fā)興趣，讓他們感覺(jué)有參與感，從而吸引他們「想看」并「點(diǎn)擊」。

知識(shí)付費(fèi)

而對(duì)于成年人來(lái)說(shuō)，學(xué)習(xí)需求變成一種「插件思維」，能夠快速學(xué)會(huì)，或者說(shuō)是能夠收獲很多的干貨，突出不枯燥、學(xué)會(huì)、能懂。這類的情感化設(shè)計(jì)相對(duì)于少兒學(xué)習(xí)插畫(huà)，更多的突出主題所以，以更極簡(jiǎn)的設(shè)計(jì)形式。

有時(shí)候文字作為主視覺(jué)中心更加直觀，整體設(shè)計(jì)風(fēng)格可能更加簡(jiǎn)單，對(duì)于成年人來(lái)說(shuō)，這種設(shè)計(jì)更能直達(dá)我們需求本身，更容易理解。

高端知識(shí)分享

對(duì)于這部分人來(lái)說(shuō)，定位跟上面兩類完全不同，從所處層級(jí)來(lái)說(shuō)就不同。首先這類人，學(xué)習(xí)的可能就不只是干貨了，更多的需求是職場(chǎng)環(huán)境帶來(lái)的。比如，我怎么跟同事、朋友、下屬更好的相處，如何具有更好的說(shuō)服力，或者是想進(jìn)修一下，就有了學(xué)習(xí)需求，基于「馬斯洛金字塔」里的，這里學(xué)習(xí)需求可能也是更高層次的，為了體現(xiàn)自己的價(jià)值。

所以更關(guān)心的是，這是誰(shuí)講的課；通過(guò)設(shè)計(jì)情緒版，映射出當(dāng)前課程的專業(yè)、嚴(yán)謹(jǐn)、課程的價(jià)值高，這些關(guān)鍵點(diǎn)。

課程的品質(zhì)感的體現(xiàn)，顏色不能太多，插畫(huà)設(shè)計(jì)元素少，更多的利用文字排版和少量圖形來(lái)突出主題。

總之，根據(jù)所代表的用戶來(lái)針對(duì)性設(shè)計(jì)。就好像剪頭發(fā)，Tony 老師肯定不會(huì)給一個(gè) 20 多歲的年輕人理一個(gè)小平頭；穿衣服也一樣，你上班肯定不會(huì)穿個(gè)背心褲衩就去了，但在海邊放松你也不可能穿個(gè)西裝、牛仔，我相信大家都能明白這個(gè)道理。

2. 構(gòu)圖結(jié)構(gòu)

良好的構(gòu)圖，目的是能夠讓用戶易懂，首先結(jié)構(gòu)要清晰、簡(jiǎn)單，主要構(gòu)圖比如：居中、左右。

居中結(jié)構(gòu)

突出活動(dòng)文案，居中構(gòu)圖是個(gè)很好的選擇，不足就是體現(xiàn)不了有趣好玩的調(diào)性。直白說(shuō)主要就是明確干什么。所以用戶的視覺(jué)焦點(diǎn)會(huì)聚集在重心區(qū)域，忽略掉周圍的東西，在設(shè)計(jì)的時(shí)候，周圍元素主要是襯托，不能搶主視覺(jué)重心。

所以說(shuō)運(yùn)用插畫(huà)風(fēng)格的話，簡(jiǎn)單輪廓插畫(huà)和剪影插畫(huà)是最適合的。

設(shè)計(jì)的時(shí)候注意幾點(diǎn)：一，主體物要突出飽滿，太小容易畫(huà)面太空；二，弱化輔助元素并不是要把它做的粗糙。

左右結(jié)構(gòu)

左右結(jié)構(gòu)分為兩種，一種是左圖右文，左文右圖。兩種構(gòu)圖的秘密在于，用戶的瀏覽順序是「從左至右」，如果圖在左邊，圖在表意性不明顯的情況下，我們需要看一遍文字，再看一遍圖，這樣圖相當(dāng)于重復(fù)瀏覽了兩次；文字在左邊就減少了重復(fù)閱讀，提高了閱讀效率，在運(yùn)營(yíng)推廣「3秒原則」里，是首先要考慮的因素。而插畫(huà)設(shè)計(jì)本身也是為了烘托氣氛，表意性不是很明顯，所以突出文案尤為重要。

所以，市面上大部分的學(xué)習(xí)知識(shí)類左右構(gòu)圖的，更傾向第二種左文右圖。

左右構(gòu)圖受限于屏幕顯示內(nèi)容，所以，有一個(gè)明確的主體物至關(guān)重要。比如：像 VIPKID 和噠噠英語(yǔ)，會(huì)有一個(gè)自己的 IP 主形象，比較生動(dòng)突出了品牌特征，還能讓用戶有代入感；還有像一些知識(shí)分享的，就會(huì)有一個(gè)明確的講師或者人物，體現(xiàn)專業(yè)權(quán)威性，在設(shè)計(jì)上一切都以突出主人物來(lái)展開(kāi)，就不要設(shè)計(jì)太過(guò)于復(fù)雜。

不同于電商的模特，主人物首先穿著上不能太花哨，要正式；周圍裝飾上不要太浮夸，要精簡(jiǎn)，甚至像高端知識(shí)分享的，背景就一個(gè)簡(jiǎn)單顏色來(lái)襯托。

衍生結(jié)構(gòu)

還有以上面構(gòu)圖衍生的構(gòu)圖形式，比如傾斜構(gòu)圖，受限于 banner 尺寸高度，過(guò)大的傾斜角度會(huì)讓畫(huà)面失衡，負(fù)空間留白不均，會(huì)讓畫(huà)面不協(xié)調(diào)。

構(gòu)圖比例合理

注意畫(huà)面整體構(gòu)圖比例，文案占比永遠(yuǎn)都是大的，不要讓主要畫(huà)面輔助元素過(guò)大搶了文案的風(fēng)頭，因?yàn)榧词箞D形輔助再精彩，用戶更關(guān)心的是「你能給他看什么」。

文案和輔助元素大概是六四開(kāi)，黃金分割比例能讓焦點(diǎn)更多的關(guān)注內(nèi)容，有些小伙伴可能在做的時(shí)候過(guò)多的沉浸在放大的畫(huà)布里，由于沒(méi)有直觀感受，錯(cuò)誤的預(yù)估當(dāng)前構(gòu)圖的合理性，所以做圖的時(shí)候多縮小畫(huà)布離遠(yuǎn)看是個(gè)非常不錯(cuò)的方法。還有一個(gè)就是，做完了 banner 導(dǎo)出圖片，雙擊打開(kāi)圖片，把圖拖小到無(wú)法拖動(dòng)為止，再看當(dāng)前實(shí)際尺寸大小，用實(shí)際尺寸來(lái)檢查。

更多構(gòu)圖形式：《文案超多的海報(bào)設(shè)計(jì)該怎么排版？16個(gè)實(shí)用模板送給你！》

3. 文案文字

文案選字

文字的選擇也是衡量當(dāng)前產(chǎn)品用戶定位的標(biāo)準(zhǔn)，首先文字結(jié)構(gòu)不能太過(guò)于復(fù)雜，K12 教育因?yàn)楸旧碛脩裟贻p化的特點(diǎn)，字形簡(jiǎn)單而且飽滿有趣，所以一些藝術(shù)手寫(xiě)可愛(ài)字體比較適合。

免費(fèi)商用可愛(ài)字體推薦：沐瑤軟筆手寫(xiě)體、站酷快樂(lè)體、鄭慶科黃油體、站酷小薇 LOGO 體、銳字真言體。

其他可愛(ài)字體推薦：漢儀唐美人、漢儀糯米團(tuán)、漢儀鑄字童年體、漢儀小麥體、方正胖娃體、方正字跡新手書(shū)、造字工房童心、文悅方糖體。

如果是高端知識(shí)分享和知識(shí)付費(fèi)，體現(xiàn)高端。文字就要簡(jiǎn)單，字形不要那么隨意，一些黑體和簡(jiǎn)單的襯線體就比較合適。

免費(fèi)商用黑體襯線體推薦：思源黑、思源宋、站酷文藝體、方正書(shū)宋簡(jiǎn)體。

其他黑體襯線體推薦：漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時(shí)代體、造字工房尚雅體。

文案排版

當(dāng)用戶人群比較年輕，意味著所有的呈現(xiàn)方式都要直接，文案精簡(jiǎn)并且排版直觀，提煉關(guān)鍵主標(biāo)題，信息層級(jí)要拉開(kāi)明顯，如果信息層級(jí)不清楚，識(shí)別性是很差的，先看下面的案例：

看這兩個(gè)，明顯右邊的對(duì)于我們識(shí)別，和對(duì)當(dāng)前功能的認(rèn)知更清晰，還有一個(gè)明顯的視覺(jué)引導(dǎo)，突出了最主要的交互點(diǎn)；而左邊的由于信息比較密集，導(dǎo)致我們無(wú)法短時(shí)間反應(yīng)出關(guān)鍵信息是什么，這是比較糟糕的，運(yùn)營(yíng)同樣如此，而運(yùn)營(yíng)比較尷尬的一點(diǎn)是，如果用戶看不懂或不感興趣，是根本不會(huì)點(diǎn)擊、不予理睬的。那么流量入口的意義就沒(méi)有了，設(shè)計(jì)的再精美，都是一個(gè)非常差的作品。

提煉文案是很有必要的，下面兩個(gè)同樣的設(shè)計(jì)，右邊對(duì)于文案的認(rèn)知就更明顯。

有的時(shí)候往往文案的關(guān)鍵信息比較多，我們?cè)谂虐娴臅r(shí)候第一個(gè)重要點(diǎn)，就是排版怎么拉開(kāi)信息對(duì)比，同時(shí)又讓排版緊湊？有時(shí)需要增加一些特定圖形，或按鈕。但是又會(huì)考慮，加了這些特殊圖形和文案又顯得相對(duì)獨(dú)立不整體；還有就是關(guān)鍵點(diǎn)該怎么取舍，強(qiáng)化那些文案、弱化哪些，或是主文案是重要的，同時(shí)關(guān)鍵的數(shù)字也要突出怎么辦？

左圖，左邊主文案放大了關(guān)鍵點(diǎn)，由于右邊文案文字比較粗，所以層級(jí)拉開(kāi)還是不夠突出，如果想拉開(kāi)對(duì)比的話那就讓他們截然不同。右圖，字體選擇上拉開(kāi)強(qiáng)弱，讓右邊的文字比劃選擇細(xì)一些；左圖的關(guān)鍵數(shù)字不夠突出，通過(guò)提亮改變顏色，來(lái)強(qiáng)化；按鈕在左邊畫(huà)面顯得太獨(dú)立，和文案沒(méi)有形成統(tǒng)一關(guān)系，反而按鈕看起來(lái)變得要比文案重要，那么把按鈕插到里面。

現(xiàn)在所有的信息，一環(huán)插一環(huán)，并且突出的文案明顯，關(guān)鍵數(shù)字也明顯；最后讓他們整體在畫(huà)面構(gòu)圖中面積比例放大，改版后是不是舒服很多。

還有一些小伙伴可能覺(jué)得親密性原則不就是距離相近么，然后沒(méi)有把控好各個(gè)部分的文字距離，導(dǎo)致反而該拉開(kāi)的沒(méi)有拉開(kāi)，該近的沒(méi)有近。

上圖這個(gè)案例里，主文案分為了兩行，但左邊由于主文案行距比較寬，而跟輔助信息的距離太近，導(dǎo)致親密性不夠，而由于副標(biāo)題文案又比較孤立，上半部的信息和下半部信息太散，整體統(tǒng)一度不夠。

右圖改進(jìn)后，調(diào)整合適行距，并且加裝飾線，協(xié)調(diào)一下輔助信息比較短的問(wèn)題，同時(shí)也起到分割的作用讓上下文案有關(guān)聯(lián)和統(tǒng)一。

文案排版的其他細(xì)節(jié)還有錯(cuò)位排版時(shí)，注意錯(cuò)位的大小，太大會(huì)丟失掉排版的平衡性；注意文案排版對(duì)齊，往往有的時(shí)候不注意，會(huì)讓你的作品看起來(lái)不夠精細(xì)；文案做傾斜處理的時(shí)候，一般情況都是往右邊傾斜，第一，右邊都是我們的主要習(xí)慣方向；第二，往右可以很好的把用戶引導(dǎo)到關(guān)鍵信息上，這些也是做 banner 排版里經(jīng)常犯的錯(cuò)也是要規(guī)避的一些坑。

4. 顏色技巧

顏色傾向

如果是代表年輕化，多用綠色和黃色，綠色代表活力、生機(jī)、積極向上；黃色系代表溫暖、希望、舒服。

這兩個(gè)顏色由于是臨近色的關(guān)系所以也會(huì)搭配出現(xiàn)在畫(huà)面中，色環(huán) 90° 角的顏色搭配所以是最舒服的配色，還有就是顏色對(duì)比非常和諧。

由于藍(lán)色是綠色的鄰近色、是黃色的對(duì)比色，紅色是綠色的互補(bǔ)色、黃色的鄰近色，所以綠、黃、藍(lán)、紅這些會(huì)在畫(huà)面中組成主色、輔色、點(diǎn)綴色。

注意協(xié)調(diào)好每部分顏色之間占比，主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。

如果是代表科技、互聯(lián)網(wǎng)，就會(huì)以藍(lán)色為主，顏色也不會(huì)像上面那樣豐富，顏色體現(xiàn)的設(shè)計(jì)也沒(méi)有那么活潑，代表冷靜、自然、科技。

一般畫(huà)面在2-3種顏色，以藍(lán)色為主，再搭配紫色。因?yàn)樽仙退{(lán)色是鄰近色，不會(huì)像暖色調(diào)一樣太沖撞，所以我們經(jīng)常會(huì)看到藍(lán)紫這種「好基友」的搭配。

知識(shí)分享類，分為普通的講師分享和高端知識(shí)分享。講師分享顏色要亮一些，顏色搭配大概是 1-2 種。

而高端知識(shí)分享，要體現(xiàn)知識(shí)的稀缺性和專屬感，代表尊貴、品質(zhì)、價(jià)值，顏色大多用暗色或消色（消色就是黑白灰），大概也是 1-2 種。

顏色方面我總結(jié)幾點(diǎn)坑需要避開(kāi)的：一，如果用插畫(huà)表現(xiàn)，一定要避免顏色的灰和臟，因?yàn)閷W(xué)習(xí)代表著積極向上的，灰色不適合。顏色選取的時(shí)候大概要避開(kāi)「顏色警示區(qū)」的位置。

二，插畫(huà)風(fēng)格避免選擇紫和一些冷色調(diào)，以暖色調(diào)為主，才能貼合情緒版定位；三，同樣的道理，顏色不要過(guò)于艷麗、過(guò)于刺激，反差明顯了，反而閱讀體驗(yàn)不好，影響觀感；四，所有的顏色最終都要定位到主題上，做完后，反向推倒檢查一下，顏色呈現(xiàn)符合當(dāng)前文案定位嗎？符合面向的用戶人群?jiǎn)?？根?jù)主題當(dāng)前配色合適嗎？

更多電商配色方法：《這是一篇不看會(huì)后悔的配色干貨》

5. 小結(jié)

最后我想說(shuō)的是，所做的東西把自己當(dāng)成模擬用戶自檢一下，自己如果看到這個(gè) banner 會(huì)點(diǎn)擊么？會(huì)吸引到你么？能直觀感受到么？會(huì)讓你舒服么？如果連自己都無(wú)感，那是相當(dāng)失敗的。

如何使Banner中主體物更突出

運(yùn)營(yíng)專題在設(shè)計(jì)的時(shí)候，我們要考慮的是針對(duì)運(yùn)營(yíng)需求，給特定需求的用戶傳達(dá)零成本閱讀體驗(yàn)，很多設(shè)計(jì)師做的 banner 畫(huà)面特別亂，原因是畫(huà)面中沒(méi)有突出主體元素。

所以在 banner 設(shè)計(jì)上要考慮貼合當(dāng)前傳達(dá)的主題，所謂設(shè)計(jì)的「言之有物」。下面來(lái)詳細(xì)的談一下運(yùn)營(yíng)設(shè)計(jì)時(shí)如何突出主體元素，其中的言之有物。

運(yùn)營(yíng)活動(dòng)最終想給用戶快速傳達(dá)文案信息，也就是「三秒閱讀」體驗(yàn)，配合輔助文案的主體圖形更能方便用戶去理解。

可以看到下圖左為了讓畫(huà)面豐富，設(shè)計(jì)師往往會(huì)加一些輔助元素或圖形；而圖右糟糕的元素添加反而會(huì)過(guò)度設(shè)計(jì)，干擾用戶對(duì)于運(yùn)營(yíng)活動(dòng)本身的理解和其表意性。

那么，如何突出視覺(jué)主體物，而達(dá)到最理想的設(shè)計(jì)作品的表意性呢？

我們從以下五方面細(xì)談：

1. 圖形化輔助元素

流暢線條的運(yùn)用

我們?cè)诳匆魳?lè)類運(yùn)營(yíng) banner 的時(shí)候發(fā)現(xiàn)線條運(yùn)用非常普遍，特別是利用 illustrator 里的「混合工具」來(lái)實(shí)現(xiàn)兩條線之間的復(fù)制混合。

人物涂鴉剪影

往往為了表現(xiàn)特定的主題：比如年輕化、個(gè)性化，通過(guò)錯(cuò)位移動(dòng)，添加亮色來(lái)使人物突出，往往更多的表現(xiàn)在：音樂(lè)、設(shè)計(jì)、嘻哈接頭文化的電商運(yùn)營(yíng)宣傳中。

這類設(shè)計(jì)個(gè)性鮮明，所以做之前考慮好，所要傳達(dá)的特定的人群是不是符合當(dāng)前的審美認(rèn)知。

簡(jiǎn)單幾何形狀

有時(shí)候?yàn)榱俗寕鬟_(dá)主題更加明確，簡(jiǎn)潔化設(shè)計(jì)很有必要「少即是多」，所以比如學(xué)習(xí)和知識(shí)付費(fèi)類的設(shè)計(jì)，干脆就用簡(jiǎn)單的圓形、方形、波浪曲線。

下面這個(gè)案例，設(shè)計(jì)者為了使這幾個(gè)人物不會(huì)太散，用圓形包裹，目的也是為了更加整體，試想一下，如果把圓形去掉，人物不僅會(huì)顯多，畫(huà)面也顯得既單調(diào)又亂。

立體幾何載體

讓風(fēng)格調(diào)性顯得品質(zhì)高，同樣讓設(shè)計(jì)少而精。需要注意的是，品質(zhì)感高逼格的設(shè)計(jì)所用的圖形相對(duì)要規(guī)整一些，盡量不要顯得太隨意，多用方塊形狀和立體幾何載體。

比如網(wǎng)易嚴(yán)選，為了突出「所賣東西都是精挑細(xì)選」，會(huì)采用立體幾何載體襯托的方式，所表現(xiàn)的就是「隆重和百里挑一」，我們不一樣~（會(huì)唱的朋友們一起唱）

多邊圖形

運(yùn)用模特表現(xiàn)的時(shí)候，高品質(zhì)感會(huì)用一些規(guī)則多邊形，比如：四邊形、多邊形等。多邊的形狀會(huì)給我們帶來(lái)穩(wěn)重感，「尊貴感與眾不同」往往是這類商品想傳達(dá)給我們的。

不規(guī)則流體

促銷類電商營(yíng)造促銷的氛圍，激發(fā)購(gòu)買欲，會(huì)用到多色彩的不規(guī)則流體，目的為了傳達(dá)「降價(jià)、折扣、滿減、超值、限時(shí)」等 ，往往會(huì)為圍繞主體物四周，突出主體元素。

小結(jié)

圖形化元素是最簡(jiǎn)單也是最實(shí)用的一種突出主體元素的表現(xiàn)方式，不管是用哪種，一定要想明白所表現(xiàn)的主題：符不符合當(dāng)前主題；推廣所屬對(duì)應(yīng)的用戶群體：心理認(rèn)知上能不能贊同；滿足這兩點(diǎn)，所加的圖形才有意義。任何圖形都是為了輔助突出主體元素，記住這一點(diǎn)，你就不會(huì)盲目的進(jìn)行設(shè)計(jì)。

2. 文案裝飾襯托

文字鋪底

直接把相關(guān)文字鋪底是最常見(jiàn)的一種方式，用當(dāng)前所對(duì)應(yīng)主題的人物名字、相關(guān)文案、對(duì)應(yīng)英文等。

文字與主體穿插

利用文字與主體的穿插營(yíng)造出空間感，也是在平面設(shè)計(jì)中經(jīng)常用到的手法，同樣也是在保證文字基本的識(shí)別度前提下。

注意文字顏色與主體顏色之間要拉開(kāi)反差，不要糊成一坨，就適得其反了，適當(dāng)?shù)臅r(shí)候加一點(diǎn)點(diǎn)陰影還是很有必要的。

小結(jié)

不管是什么形式，所加的文字要有意義，跟主題相關(guān)。任何加的文案一定要能襯托主體物，也要有很強(qiáng)的表意性，畢竟文案才是最重要的。

3. 顏色對(duì)比的運(yùn)用

主體物吸色襯托

從主體物上之間選取，作為背景顏色搭配，來(lái)襯托主體物簡(jiǎn)直不要太完美，前提是主體物的顏色相對(duì)夠和諧舒服。需要襯托的背景顏色相對(duì)要弱一點(diǎn)，以突出主體。

顏色對(duì)比

我們一想到顏色對(duì)比，馬上想到「紅配綠賽狗屁」這句話，這句話的意思不是說(shuō)紅配綠不行，而是說(shuō)錯(cuò)誤的紅配綠不行，聽(tīng)不懂??？來(lái)，舉個(gè)栗子…李子…梨子…例子！

左圖的紅綠顏色占比可以看到是比較平均的，大概1：1的比例，但是紅色作為一個(gè)比較刺激的顏色，顏色很鮮艷，如果搭配的綠色也一樣飽和度很高，兩個(gè)撞到一起沒(méi)有一個(gè)突出色，畫(huà)面就不會(huì)那么和諧了。

右圖如果我們把紅色的占比相應(yīng)的減少，飽和度不變，而綠色降低飽和度，從而面積占比增大，起到襯托的作用，畫(huà)面之間是不是舒服很多。

下圖其他的顏色對(duì)比同樣如此。

小結(jié)

顏色對(duì)比的口訣是：主體如果是亮色，背景就用冷色；主體用重色，背景用亮色；主體用純色，背景用灰色；不管哪種對(duì)比，主體物的顏色一定是面積最小的那一個(gè)，無(wú)論如何拉開(kāi)顏色對(duì)比反差是王道。

4. 主體物局部打光

人物面部打光

人物面部是最容易辨識(shí)，也是視覺(jué)焦點(diǎn)部分，所以讓面部從畫(huà)面凸現(xiàn)出來(lái)尤為重要，讓光源聚焦到臉部，主體人物顯得更加有質(zhì)感和飽滿度。

物體亮部打光

物體和人物相比相對(duì)簡(jiǎn)單，亮部高光部分為視覺(jué)焦點(diǎn)，讓物體顯得有質(zhì)感，只需要給亮部特殊光源即可。

小結(jié)

光線能在突出主體物的同時(shí)，讓構(gòu)圖更加豐富和飽滿，切記光線不要過(guò)亮，看起來(lái)會(huì)很不舒服。

5. 主體元素?cái)[放技巧

人物截取范圍

截取擺放人物的時(shí)候注意，為了讓視覺(jué)焦點(diǎn)集中、有辨識(shí)度。具有代表性的人物和明星一般截取一半左右，大約胸部以上部位；而電商模特為了展示所賣衣服，一般露出大約三分之二。

萬(wàn)萬(wàn)不要切頭部

讓人物完美的呈現(xiàn)在畫(huà)面之中，讓畫(huà)面能夠看起來(lái)舒服些，構(gòu)圖也相對(duì)完整，反之把頭部一刀切，會(huì)使畫(huà)面負(fù)空間變小，構(gòu)圖擁擠，而觀看者對(duì)于人物的識(shí)別度也隨之降低，閱讀成本變高。

多人物擺放要求

多人物組合時(shí)，整體人物處理要基本保持一致，特別是眼睛視線要盡量保持統(tǒng)一的視覺(jué)基準(zhǔn)線，不然會(huì)顯得雜亂不堪。

多物體的擺放

表現(xiàn)美食產(chǎn)品的時(shí)候，文字居中構(gòu)圖，物體散點(diǎn)擺放要注意，角度的統(tǒng)一，統(tǒng)一俯視角度，不要有俯視有平視，保證統(tǒng)一度。

6. 案例帶練示例

案例分析

這是一個(gè)小伙伴做的醫(yī)美類的運(yùn)營(yíng) banner，當(dāng)看到這個(gè)設(shè)計(jì)的時(shí)候我的內(nèi)心是崩潰的，我們分析一下問(wèn)題。

問(wèn)題一，首先主體物沒(méi)有突出，主體人物偏灰，背景也灰；問(wèn)題二背景太亂，沒(méi)有視覺(jué)焦點(diǎn)；問(wèn)題三，文案識(shí)別度完全丟失掉了，排版也太亂；好下面我們來(lái)改一下。整體看下來(lái)，并沒(méi)有表現(xiàn)出醫(yī)美要體現(xiàn)的「變美」，用戶完全沒(méi)有視覺(jué)感受。

調(diào)整改動(dòng)

前后對(duì)比

最后我們來(lái)看看對(duì)比效果，是不是好很多。

無(wú)論什么樣的設(shè)計(jì)，加什么樣的元素，目的只有一個(gè)就是要有理有據(jù)、有道理，所有的運(yùn)營(yíng)設(shè)計(jì)都是為了輔助主體文案。不要讓你的設(shè)計(jì)無(wú)用，或者減分，把設(shè)計(jì)元素最大化發(fā)揮它的作用才是設(shè)計(jì)的最終目的，你就說(shuō)是不是吧！

業(yè)內(nèi)有很多人覺(jué)得手勢(shì)交互沒(méi)必要拿出來(lái)深究，覺(jué)得用戶使用產(chǎn)品的過(guò)程中，自然而然就會(huì)去使用拇指，進(jìn)行手勢(shì)操作。但這種說(shuō)法，就跟「用戶心理模型」類似。當(dāng)然，對(duì)于用戶來(lái)說(shuō)沒(méi)必要深究手勢(shì)交互，但作為設(shè)計(jì)師，如果不了解其背后的邏輯，那么就無(wú)法解決產(chǎn)品設(shè)計(jì)背后的一些問(wèn)題。

所以我們今天，好好聊一聊手勢(shì)交互這件事。你會(huì)發(fā)現(xiàn)，原來(lái)你以往觀察或以為的設(shè)計(jì)問(wèn)題，都是手勢(shì)交互在作祟。

手勢(shì)的意義

我們以前經(jīng)常聽(tīng)到「以用戶為中心做產(chǎn)品設(shè)計(jì)」這句話，意思是產(chǎn)品需依附于目標(biāo)用戶的真實(shí)場(chǎng)景來(lái)設(shè)計(jì)。與此同時(shí)，其實(shí)還有一句話在提醒著交互設(shè)計(jì)師如何做產(chǎn)品設(shè)計(jì)，就是「以觸摸屏為中心做產(chǎn)品設(shè)計(jì)」。

為什么呢？因?yàn)橛脩魪氖贾两K都是在跟觸摸屏做接觸，不管換了什么設(shè)備，他們都是要通過(guò)屏幕與產(chǎn)品進(jìn)行交互的。

我們可以在這里思考一下手勢(shì)的意義。

手勢(shì)的出現(xiàn)改變了什么？可以回想一下 iPhone 4 發(fā)布的時(shí)候，當(dāng)看到這樣一臺(tái)屏幕上沒(méi)有任何按鍵的設(shè)備，是不是會(huì)覺(jué)得不可思議？鍵盤，電話接聽(tīng)按鍵等都消失不見(jiàn)了。

人們?cè)谑褂?iPhone 這樣的產(chǎn)品時(shí)，不再需要去強(qiáng)行記憶任何固體按鍵。觸摸屏與手勢(shì)的結(jié)合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內(nèi)容，在有限的物理空間獲得更多的信息。

所以用戶通過(guò)觸摸屏與產(chǎn)品進(jìn)行交互，跟通過(guò)鍵盤按鍵與屏幕進(jìn)行交互是完全不同的。手勢(shì)交互更自然且更。

手勢(shì)操作對(duì)我們來(lái)說(shuō)如此自然和直觀的主要原因是因?yàn)樗鼈冾愃朴谂c真實(shí)對(duì)象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過(guò)上下左右這樣的操作來(lái)定位指示器，而觸摸屏直接就可以通過(guò)手指點(diǎn)擊內(nèi)容進(jìn)行操作。這是完全不同的概念。

綜上所述，我們能知道，手勢(shì)的三個(gè)要素：簡(jiǎn)潔、易用、直觀。

所以我們通過(guò)一些常見(jiàn)的手勢(shì)行為，就可以在產(chǎn)品界面上很輕松的完成任務(wù)。

常見(jiàn)的手勢(shì)行為：

• 點(diǎn)擊：?jiǎn)沃付虝河|摸表面；
• 雙擊：?jiǎn)沃缚焖賰纱斡|摸表面（通常是縮放）；
• 拖動(dòng)：沿表面移動(dòng)而不會(huì)破壞接觸；
• 捏/展開(kāi)：用兩根手指觸摸表面以移入（捏合）或移出（展開(kāi)）；
• 按下：?jiǎn)沃赣|摸表面并按住；
• 滑動(dòng)：快速手勢(shì)，不需要觸摸目標(biāo)。

當(dāng)然，我們經(jīng)常也會(huì)遇到一些背離手勢(shì)交互的產(chǎn)品設(shè)計(jì)，雖然也是點(diǎn)擊、拖動(dòng)等等，但操作起來(lái)總是不那么順心。這里面有一個(gè)關(guān)鍵點(diǎn)就是，手勢(shì)直觀性。

有數(shù)據(jù)表明，蘋(píng)果的 3D Touch 使用率非常低，就是因?yàn)橹庇^性太差，用戶不知道通過(guò)這個(gè)操作能帶來(lái)什么結(jié)果，且使用它需要長(zhǎng)按，經(jīng)常會(huì)同時(shí)呼出「卸載」，那么效率也就會(huì)降低。久而久之，用戶就不去使用了。

正面例子如下圖，滑動(dòng)與文案結(jié)合。

這樣一看，用戶馬上就能知道這個(gè)操作行為如何觸發(fā)，緊接著就產(chǎn)生行動(dòng)，然后會(huì)反饋結(jié)果。

這也是手勢(shì)交互的核心：觸發(fā)，行動(dòng)，反饋。

對(duì)比 3D Touch，觸發(fā)沒(méi)有提示，行動(dòng)后時(shí)常有兩種反饋結(jié)果，相比起來(lái)就不那么友好了。

除了上面聊的這些，手勢(shì)交互還能從另一方面來(lái)提升效率，就是拇指操作區(qū)域。

拇指驅(qū)動(dòng)設(shè)計(jì)

我們都知道，現(xiàn)在手機(jī)屏幕越來(lái)越大，甚至比最早屏幕大了一倍以上。但是很多設(shè)計(jì)師并沒(méi)有轉(zhuǎn)換思維，跟進(jìn)這個(gè)趨勢(shì)的變化。

這里給大家普及一個(gè)知識(shí)：大部分人誤以為，手指在屏幕上的熱區(qū)是永恒不變的，但其實(shí)手指熱區(qū)會(huì)根據(jù)設(shè)備的變大而縮小。因?yàn)槭终浦卧O(shè)備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。

結(jié)果是，手機(jī)屏幕變大，雙手持機(jī)的用戶變多，但依然還有 75％ 的用戶是使用拇指來(lái)觸摸屏幕的。因此，術(shù)語(yǔ)「拇指驅(qū)動(dòng)設(shè)計(jì)」應(yīng)運(yùn)而生。

我們上面說(shuō)到，在使用一些產(chǎn)品的時(shí)候，經(jīng)常會(huì)遇到使用起來(lái)不順心的情況，然后說(shuō)了「手勢(shì)直觀性」的概念。但這里，還有個(gè)更重要的原因，就是「拇指操作區(qū)域」。

拇指操作區(qū)域被分為三塊內(nèi)容，分別是：易于觸達(dá)，難以觸達(dá)，以及介于兩者之間的區(qū)域。

看下圖。

所以在設(shè)計(jì)界面時(shí)，要注意界面的主要操作元素是否處于用戶易于觸達(dá)的范圍之內(nèi)。

如果你仔細(xì)觀察并思考過(guò)，也會(huì)發(fā)現(xiàn)，iOS 的產(chǎn)品界面中，「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當(dāng)前頁(yè)面，想要返回，那就需要付出一點(diǎn)成本，什么成本？操作成本。

有人會(huì)說(shuō)，由于 iOS 可以從手機(jī)的左邊緣向右側(cè)輕掃以獲得返回效果，因此在大多數(shù) iOS 產(chǎn)品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點(diǎn)，也不是所有產(chǎn)品都支持這一特性的。而且手勢(shì)交互的進(jìn)化本來(lái)也就是為了提升用戶操作的效率，所以本質(zhì)上他們并不矛盾，只是相比以前，我們現(xiàn)在的操作更快了。并且「右滑」返回，本身在手勢(shì)操作中相比「點(diǎn)擊」也是更具操作成本的。

當(dāng)了解了手勢(shì)的一些意義，以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計(jì)的重要性之后，我們就可以通過(guò)一些案例來(lái)做一個(gè)全局分析了。

1. 內(nèi)容在上，操作在下

許多人設(shè)計(jì) App，但是沒(méi)人研究過(guò) App 為什么要這么設(shè)計(jì)。

比如，為什么起初要把標(biāo)簽欄放底下呢？關(guān)于這個(gè)問(wèn)題，當(dāng)初我也是問(wèn)了許多人，而基本都只是說(shuō)這是官方設(shè)計(jì)規(guī)范。這相當(dāng)于是一句廢話。

通過(guò)翻閱多方資料，我發(fā)現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域有一條重要的基本設(shè)計(jì)原則：內(nèi)容在上，操作在下。

比如在使用電腦的時(shí)候，操作在下意味著使用者在操作過(guò)程中，手指始終處于界面下方，而內(nèi)容在上面，就不會(huì)出現(xiàn)手指遮擋內(nèi)容的情況。

如下圖的鍵盤操作提示：

基于此，相信你也知道為什么標(biāo)簽欄在下方了吧？

另外，為什么 iOS 設(shè)計(jì)規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢？

界面右/左上角的位置對(duì)拇指來(lái)說(shuō)顯然是不友好的。然而，這樣做的原因也是顯而易見(jiàn)的：編輯功能會(huì)讓數(shù)據(jù)發(fā)生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個(gè)道理），就是一種防御性的設(shè)計(jì)策略，可以在一定程度上避免因?yàn)樘菀桩a(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。

通過(guò)這一小段之前聊過(guò)的內(nèi)容，你們會(huì)發(fā)現(xiàn)，手勢(shì)與拇指操作其實(shí)在驅(qū)動(dòng)著產(chǎn)品設(shè)計(jì)。下面我們來(lái)聊個(gè)大的案例。

漢堡包菜單的消失解析

漢堡包菜單，也就是側(cè)邊欄導(dǎo)航，F(xiàn)acebook 早期測(cè)試顯示側(cè)邊欄導(dǎo)航讓用戶使用率降低了一半。

我們一起來(lái)看看市面上給出的三類說(shuō)法。

1. 可見(jiàn)性太低

默認(rèn)狀態(tài)下，用戶是看不見(jiàn)側(cè)邊欄的，除非點(diǎn)擊了側(cè)邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來(lái)。比如，現(xiàn)在你回想一下知乎底部 5 個(gè)標(biāo)簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會(huì)兒，才能記起來(lái)？甚至還是想不起來(lái)。

之前我在文章里寫(xiě)過(guò)，用戶對(duì)于功能的使用一定是「所見(jiàn)即所得」，而不是「心向往之」。用戶只會(huì)注意自己看到的信息，而不是憑借記憶或想象來(lái)使用產(chǎn)品。

底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見(jiàn)性」問(wèn)題。

2. 效率較低

效率較低主要在于操作頻率，大家看下面兩組圖的對(duì)比。

第一張圖，當(dāng)用戶從首頁(yè)進(jìn)入到個(gè)人信息頁(yè)面，只需要兩步；而第二張圖，則要三步。

這里多一步看起來(lái)似乎影響不大，但如果現(xiàn)在要從個(gè)人信息頁(yè)面到「標(biāo)簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當(dāng)頻繁去使用這樣的產(chǎn)品后，用戶的整體效率就會(huì)下降，體驗(yàn)也會(huì)隨之降低。

3. 與平臺(tái)模式?jīng)_突

大家應(yīng)該知道，在 iOS 的操作頁(yè)面中，通過(guò)手勢(shì)可對(duì) tab 進(jìn)行左右切換，而側(cè)邊欄除了通過(guò)點(diǎn)擊菜單按鈕展開(kāi)之外，也可以通過(guò)右滑彈出。這里面有什么沖突呢？看下圖。

當(dāng)頁(yè)面聚焦在「標(biāo)簽 2」時(shí)，右滑除了能回到「標(biāo)簽 1」，同樣也很可能會(huì)切出側(cè)邊導(dǎo)航欄。

這樣的手勢(shì)沖突，導(dǎo)致頁(yè)面層級(jí)與功能導(dǎo)航的優(yōu)先級(jí)混亂了。

無(wú)論是導(dǎo)航還是控件，當(dāng)它們組成一個(gè)頁(yè)面后，它們的操作就會(huì)有優(yōu)先級(jí)。比如下面這個(gè)例子。

如果你對(duì)標(biāo)紅的分段控件比較熟悉，就知道，它是可通過(guò)屏幕滑動(dòng)進(jìn)行切換的。但是在「短信」里，它是不能通過(guò)滑動(dòng)屏幕進(jìn)行切換的，因?yàn)橛脩艨蓪?duì)單條信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁(yè)面操作模式存在矛盾時(shí)，我們會(huì)將子層級(jí)操作優(yōu)先于父層級(jí)操作。

譬如你進(jìn)入朋友圈，是不能馬上回到首頁(yè)的，這時(shí)候頁(yè)面層級(jí)較深，產(chǎn)品人員要將用戶聚焦于頁(yè)面本身，如果直接能返回到首頁(yè)，頁(yè)面層級(jí)和產(chǎn)品架構(gòu)就會(huì)混亂。

類似的例子還有很多，我這里就不繼續(xù)列舉了。

所以從「短信」的例子可以看出，當(dāng)控件與控件之間的手勢(shì)發(fā)生沖突時(shí)，我們要考慮優(yōu)先級(jí)，將內(nèi)容優(yōu)先于頁(yè)面來(lái)處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢(shì)發(fā)生沖突時(shí)，很明顯我們要優(yōu)先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢(shì)。結(jié)果就是，效率又低了。

4. 小結(jié)

這三類，如果你認(rèn)真思考里面的關(guān)系，其實(shí)就會(huì)發(fā)現(xiàn)，它們的共通點(diǎn)就是與拇指的聯(lián)系過(guò)于被動(dòng)或直接被切斷了。

• 第一個(gè)「可見(jiàn)性太低」的例子，菜單被隱藏，拇指不能直接與菜單產(chǎn)生關(guān)系，并且距離過(guò)遠(yuǎn)，拇指難以觸達(dá)。
• 第二個(gè)「效率太低」的例子，用戶需要通過(guò)拇指來(lái)回操作，導(dǎo)致效率降低，這就跟使用遙控器控制電視機(jī)一樣，用戶無(wú)法直接觸達(dá)內(nèi)容。
• 第三個(gè)「手勢(shì)沖突」的例子，其實(shí)就很清晰了，就是說(shuō)標(biāo)簽欄的優(yōu)先級(jí)可能會(huì)被頁(yè)面的其它控件所取代，那么拇指就無(wú)法直接對(duì)其產(chǎn)生作用，從而禁止當(dāng)前頁(yè)面的手勢(shì)交互行為。

它們的核心點(diǎn)就是拇指與觸摸屏的關(guān)系。

如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢(shì)，那就想一下去看一下現(xiàn)在的產(chǎn)品，其中「我的」、「?jìng)€(gè)人中心」或「更多」其實(shí)都是變相的漢堡包菜單。

在「我」這個(gè)標(biāo)簽頁(yè)里，這一系列功能列表，無(wú)非就是另一種模式的漢堡包菜單，只是這里呈現(xiàn)的都是不重要的功能，并不影響用戶使用這個(gè)產(chǎn)品?；叵胍幌?，你是不是很少，甚至從來(lái)沒(méi)用過(guò)這里的某幾個(gè)功能？再跟手勢(shì)結(jié)合，就會(huì)發(fā)現(xiàn)，「我」所處區(qū)域并不是容易點(diǎn)擊的區(qū)域，這就是它效率低下的原因了。現(xiàn)在能懂了么？

彈框的操作路徑

當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢(shì)操作取代，大家就應(yīng)該察覺(jué)到：以往從電腦遷移到移動(dòng)設(shè)備上的交互行為已逐漸被改善。

我曾經(jīng)寫(xiě)過(guò)一篇文章，叫「取消按鈕的設(shè)計(jì)邏輯」，講了「左取消，右行進(jìn)」這個(gè)原理。意思就是當(dāng)我們?cè)谠O(shè)計(jì)彈框的時(shí)候，用戶已經(jīng)習(xí)慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認(rèn)知。再?gòu)氖謩?shì)的角度來(lái)說(shuō)，就是右邊更容易點(diǎn)擊。

后來(lái)有同學(xué)說(shuō)到，但是有些特殊場(chǎng)景，譬如刪除資料，而產(chǎn)品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點(diǎn)擊，所以位置換了會(huì)比較合理。

這是錯(cuò)的！

我們不能通過(guò)改變用戶使用產(chǎn)品的常識(shí)來(lái)將產(chǎn)品人員的想法置于用戶之上。當(dāng)用戶已經(jīng)形成「左取消，右行進(jìn)」的認(rèn)知之后，違反這樣的一致性，去換位置是很危險(xiǎn)的。所以出現(xiàn)了 action sheet，來(lái)解決一些產(chǎn)品關(guān)于 alert 無(wú)法解決的問(wèn)題。

如圖。

大家要記住的是，當(dāng)頁(yè)面邏輯與手勢(shì)操作產(chǎn)生邏輯沖突時(shí)，我們不是去否定以前已經(jīng)被驗(yàn)證且正確的內(nèi)容，而是通過(guò)創(chuàng)新，來(lái)解決這個(gè)沖突。這就是拇指驅(qū)動(dòng)設(shè)計(jì)的一種方式。

包括我們以前在移動(dòng)設(shè)備上選擇刪除某項(xiàng)數(shù)據(jù)，都會(huì)彈出警告框，詢問(wèn)我們是否確認(rèn)刪除。這種方式會(huì)打斷我們的操作行為，久而久之，用戶已經(jīng)對(duì)此交互方式習(xí)以為常，或者說(shuō)免疫了，但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除，已經(jīng)被更多產(chǎn)品功能用來(lái)取代沒(méi)必要彈框的操作。

也許很多人沒(méi)思考過(guò)底層原因，或者僅僅只是覺(jué)得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢(shì)交互做了相應(yīng)的優(yōu)化，讓用戶操作起來(lái)更加方便。

Banner

到了這里，我再舉個(gè)所有人都熟悉的例子，就是輪播圖了。

輪播圖最早出現(xiàn)于網(wǎng)頁(yè)端，后來(lái)被大量商家模仿，以至于到移動(dòng)端還備受各產(chǎn)品設(shè)計(jì)人員的歡迎。但其實(shí)很多人對(duì)輪播圖的使用方法都是錯(cuò)誤的。

下面來(lái)看輪播圖與手勢(shì)的關(guān)系。

試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無(wú)論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶在界面停留的時(shí)間不會(huì)這么久，更不會(huì)看完你 Banner 的內(nèi)容。以至于有研究表明，大部分產(chǎn)品里，除了第一張 Banner 的點(diǎn)擊率能達(dá)到 83% 之外，其余的點(diǎn)擊率都非常低。

有人說(shuō)可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉(zhuǎn)，這么小的點(diǎn)，你覺(jué)得點(diǎn)擊它現(xiàn)實(shí)么？所以手勢(shì)交互與輪播圖是相互矛盾的一種設(shè)計(jì)方式。

所以當(dāng)運(yùn)營(yíng)策劃了一個(gè)活動(dòng)，而你就往頂部的輪播圖里塞，這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶參與度是很低的了。除了個(gè)別電商產(chǎn)品，他們以賣廣告位給商家作為盈利點(diǎn)，但即便如此，我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外，其他圖片的點(diǎn)擊量相對(duì)于產(chǎn)品本身的用戶體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶進(jìn)入首頁(yè)隨機(jī)展示輪播圖頁(yè)面，而不是強(qiáng)制指定于顯示第一張的原因。

畢竟輪播圖在頂部，用戶需要通過(guò)拇指長(zhǎng)時(shí)間的在「延伸區(qū)域」進(jìn)行操作，那么使用率自然就降低了。

如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的，那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口，如下圖。（當(dāng)然，這要視情況而定，并不是通用的。）

搜索框的變化

我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。

為什么呢？

市面上對(duì)這個(gè)問(wèn)題的解釋是這樣的：用戶已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個(gè)搜索框，設(shè)計(jì)師打破這個(gè)常規(guī)就要承擔(dān)風(fēng)險(xiǎn)。

看完這篇文章，你就已經(jīng)知道，對(duì)于用戶來(lái)說(shuō)，由于屏幕頂部離拇指很遠(yuǎn)，處于難以觸達(dá)的區(qū)域，在體驗(yàn)上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部，但操作體驗(yàn)上又不應(yīng)該在頂部的一個(gè)設(shè)計(jì)。

但是回想一下，會(huì)發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動(dòng)到下面來(lái)之后，就能知道，拇指驅(qū)動(dòng)設(shè)計(jì)的概念被越來(lái)越多的人認(rèn)識(shí)到其重要性。

地圖類產(chǎn)品把搜索框移到下面來(lái)的首創(chuàng)應(yīng)用不是高德，應(yīng)該是 Lyft。

瞧，拇指驅(qū)動(dòng)設(shè)計(jì)，多酷~

總結(jié)

《上癮》里有句話：當(dāng)人們不由自由地做出下一個(gè)舉動(dòng)時(shí)，新的習(xí)慣就會(huì)成為他們?nèi)粘Ｉ畹囊徊糠帧?

當(dāng)手勢(shì)充分地發(fā)揮了作用，輔助用戶操作或?qū)崿F(xiàn)功能，它就成了用戶不可分割的一部分。

今天通過(guò)對(duì)手勢(shì)意義的解讀，以及拇指驅(qū)動(dòng)設(shè)計(jì)的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢(shì)交互這么重要了。

交互設(shè)計(jì)師對(duì)于「觸摸屏」，必須有深刻的認(rèn)識(shí)，才能理解設(shè)計(jì)背后的邏輯。

如果這篇文章對(duì)你有幫助，記得點(diǎn)個(gè)贊，后面我好持續(xù)輸出。

文章來(lái)源：優(yōu)設(shè)

流利說(shuō)®少兒英語(yǔ)是流利說(shuō)®為 3-8 歲兒童定制的一款英語(yǔ)啟蒙類產(chǎn)品，本次邀請(qǐng)到 UI 設(shè)計(jì)師 kelly，從視覺(jué)設(shè)計(jì)與輸出的角度，詳細(xì)地介紹該產(chǎn)品游戲題型的設(shè)計(jì)過(guò)程。

流利說(shuō)®少兒英語(yǔ)，目標(biāo)是幫助該年齡段的用戶建立發(fā)音自信，并且能對(duì)英語(yǔ)學(xué)習(xí)產(chǎn)生持續(xù)的興趣?；趦和澩娴奶煨?，自然而然我們會(huì)想到使用游戲化的設(shè)計(jì)，將枯燥的英語(yǔ)學(xué)習(xí)過(guò)程變得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消滅細(xì)菌

視覺(jué)設(shè)計(jì)

游戲?yàn)檩o，教育為主。

對(duì)于視覺(jué)設(shè)計(jì)而言，游戲題型設(shè)計(jì)的主要有以下 2 個(gè)難點(diǎn)：

• 把握題型趣味性與教學(xué)目標(biāo)之間的平衡；
• 為教學(xué)內(nèi)容找到最適合的游戲展示形式。

接下來(lái)我將從視覺(jué)表達(dá)、視覺(jué)層級(jí)、反饋這三點(diǎn)分享我的一些思考和經(jīng)驗(yàn)。

1. 明確的視覺(jué)表達(dá)

在開(kāi)始設(shè)計(jì)前，我們對(duì) 3-8 歲兒童進(jìn)行了調(diào)研，發(fā)現(xiàn)處于該年齡段的用戶，大多有以下特性：

• 不識(shí)字，且不能進(jìn)行復(fù)雜邏輯操作；
• 易被色彩鮮艷且有動(dòng)效的對(duì)象吸引，并且會(huì)主動(dòng)點(diǎn)擊；
• 僅能理解自己生活中接觸過(guò)的事物（比如玩具，食物，游樂(lè)園等等）；
• 趣味性是調(diào)動(dòng)他們持續(xù)學(xué)習(xí)的重要?jiǎng)恿Α?

基于以上幾點(diǎn)，我們便總結(jié)出以下幾點(diǎn)設(shè)計(jì)方法。

視覺(jué)形式即題型玩法

以拼圖題為例，此題的目標(biāo)是檢測(cè)孩子拼寫(xiě)單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會(huì)覺(jué)得這道題既不會(huì)玩，也不好玩。但如果在視覺(jué)表現(xiàn)上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進(jìn)而引導(dǎo)孩子的操作。

場(chǎng)景故事要有視覺(jué)連貫性

「游戲」（此處的「游戲」代指游戲題型）結(jié)束后有一個(gè)和故事設(shè)定相關(guān)的結(jié)束畫(huà)面，承接前面的操作，讓整個(gè)「游戲」過(guò)程能呈現(xiàn)出相對(duì)比較完整的體驗(yàn)，以增強(qiáng)小朋友在「游戲」過(guò)程中的沉浸感。

△ 游戲操作：切水果

△ 游戲結(jié)尾：切水果榨果汁

2. 清晰的視覺(jué)層級(jí)

由于兒童缺乏成年人所具備的視覺(jué)篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會(huì)習(xí)慣性地去點(diǎn)擊界面上所有吸引他們的東西。因此我們需要為不同層級(jí)的元素設(shè)置強(qiáng)烈的視覺(jué)區(qū)分，明確告訴他們哪些元素是可以點(diǎn)擊的，需要被關(guān)注的，哪些元素是不可互動(dòng)的。

提高教學(xué)內(nèi)容易識(shí)別性

游戲題型的設(shè)計(jì)方法通常是使用游戲的形式去包裝常規(guī)的教學(xué)題型，讓小朋友感覺(jué)是在玩游戲，而不是在做題。因此我們需要設(shè)計(jì)恰到好處的游戲容器去承載教學(xué)內(nèi)容，使其兼具教學(xué)內(nèi)容的識(shí)別性又不會(huì)影響「游戲」體驗(yàn)。此處我們嘗試去拉開(kāi)游戲元素和教學(xué)內(nèi)容的視覺(jué)差距──在畫(huà)面中的視覺(jué)焦點(diǎn)處擺放教學(xué)內(nèi)容，而游戲元素僅作為背景或者容器，用于襯托教學(xué)內(nèi)容，并且盡量選取不易和教學(xué)內(nèi)容發(fā)生沖突的形式。此外，為兼顧游戲畫(huà)面的豐富性和多樣性，容器的設(shè)計(jì)需要有一定的適配性。

△ 適配文字

△ 適配圖片

△ 適配文字和圖片

對(duì)于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標(biāo)。在該場(chǎng)景下，游戲容器的視覺(jué)設(shè)計(jì)重點(diǎn)在于外形的刻畫(huà)，簡(jiǎn)化內(nèi)部細(xì)節(jié)，以此將孩子的視覺(jué)重點(diǎn)聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來(lái)的顯示差異，我們對(duì)文字的大小也進(jìn)行了適配。

△ 1-12 個(gè)字符──文字大小 88

△ 13-25 個(gè)字符──文字大小 76

△ 26-45 個(gè)字符──文字大小 62

背景畫(huà)面的層級(jí)感

在游戲題型中，有不少故事性強(qiáng)，空間延續(xù)性高的設(shè)定。為加強(qiáng)畫(huà)面的運(yùn)動(dòng)感和空間感，視覺(jué)輸出時(shí)，我們額外增加了前景層，利用前景圖片打造視差效果，以增強(qiáng)整個(gè)背景的層次感。

前景圖片的設(shè)置，同時(shí)也能解決適配不同屏幕尺寸時(shí)，背景區(qū)域顯示差異所帶來(lái)的視覺(jué)問(wèn)題。

縱向運(yùn)動(dòng)的情況下，兩側(cè)的圖形如果設(shè)置在背景里，當(dāng)適配到短屏幕的時(shí)候就無(wú)法呈現(xiàn)出來(lái)。

而單獨(dú)設(shè)置成前景圖，則可以靈活地適配不同屏幕比例的機(jī)型。

克制地使用過(guò)于明亮的色彩

用研時(shí)，我們發(fā)現(xiàn)孩子們?nèi)菀妆活伾涯康臇|西所吸引，但如果一個(gè)頁(yè)面上過(guò)度使用明亮的色彩，則會(huì)大大分散孩子們的注意力，顏色過(guò)載所導(dǎo)致的視覺(jué)信息復(fù)雜性會(huì)增加孩子們的使用難度。

3. 合理的反饋

合理的反饋包括符合交互邏輯的及時(shí)反饋和適當(dāng)?shù)恼?fù)反饋。在游戲設(shè)計(jì)中，設(shè)計(jì)師大多會(huì)通過(guò)酷炫的動(dòng)效來(lái)做重要操作的點(diǎn)擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。

及時(shí)反饋制造小驚喜

我們?cè)诋a(chǎn)品的反饋設(shè)計(jì)中適時(shí)地增加一些有趣的微動(dòng)畫(huà)，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時(shí)地拉回小朋友的注意力，給他們帶來(lái)趣味性的同時(shí)，對(duì)他們而言也是一種鼓勵(lì)。

例如：當(dāng)用戶點(diǎn)擊拼圖題選項(xiàng)時(shí)，會(huì)出現(xiàn) IP 相關(guān)的卡通元素，這些元素既能加強(qiáng)趣味性，又能加強(qiáng)用戶對(duì)品牌的認(rèn)知。

適當(dāng)?shù)恼?fù)反饋

大約從 4 歲開(kāi)始，孩子們就會(huì)有輸贏的概念，會(huì)因?yàn)橼A而喜悅，因?yàn)檩敹械浇箲]。──《數(shù)字時(shí)代兒童設(shè)計(jì)》

對(duì)孩子的正向反饋宜歡呼、表?yè)P(yáng)性的動(dòng)畫(huà)為主，整個(gè)畫(huà)面氛圍可處理得熱鬧一點(diǎn)，這對(duì)孩子來(lái)說(shuō)是一個(gè)很好的刺激點(diǎn)，能讓孩子有繼續(xù)玩下去的欲望。

△ 正向反饋1：IP 形象高興地跳出

△ 正向反饋2：IP 形象高興地跳出 + 打分星星

△ 正向反饋3：IP 形象鼓掌

考慮到孩子們會(huì)因?yàn)檩敹械浇箲]，因而在處理負(fù)面反饋的時(shí)候，需要考慮他們此刻的心態(tài)，動(dòng)效設(shè)計(jì)應(yīng)拉開(kāi)與正向反饋的差別且不能過(guò)于消極，消極的反饋容易打擊孩子的積極性，產(chǎn)生挫敗感，鼓勵(lì)性的反饋為宜。

△ 負(fù)面反饋：IP 形象配合鼓勵(lì)性語(yǔ)音做加油的姿勢(shì)

反饋動(dòng)畫(huà)的設(shè)置也需要考慮用戶的可接受程度，慎用具有攻擊性動(dòng)效。如下圖，錯(cuò)誤反饋時(shí) IP 形象會(huì)受到攻擊而感冒，上線后發(fā)現(xiàn)孩子們對(duì)這種反饋表現(xiàn)出了害怕的心理。

以上 IP 動(dòng)畫(huà)由流利說(shuō)®少兒英語(yǔ)設(shè)計(jì)團(tuán)隊(duì)傾情制作。

視覺(jué)輸出

不會(huì)寫(xiě)代碼的設(shè)計(jì)也是好開(kāi)發(fā)。

視覺(jué)稿如果不能被很好的實(shí)現(xiàn)落地，那再好的設(shè)計(jì)稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺(jué)實(shí)現(xiàn)程度這一問(wèn)題上，我們也走過(guò)不少?gòu)澛?，和開(kāi)發(fā)經(jīng)過(guò)幾輪的探索，最終形成了一份適合我們團(tuán)隊(duì)的輸出模式。

在整個(gè)開(kāi)發(fā)環(huán)節(jié)，設(shè)計(jì)師主要承擔(dān)一部分的動(dòng)畫(huà)開(kāi)發(fā)工作。在和開(kāi)發(fā)對(duì)接的過(guò)程中，我們主要使用的軟件是：

• CocosCreator：游戲開(kāi)發(fā)軟件，內(nèi)含動(dòng)畫(huà)編輯器。
• SourceTree：向開(kāi)發(fā)提交動(dòng)畫(huà)代碼。

△ CocosCreator

△ SourceTree

開(kāi)發(fā)搭建完框架后，設(shè)計(jì)在 CocosCreator上，完成部分元素的動(dòng)畫(huà)，再用 SourceTree 向開(kāi)發(fā)提交動(dòng)畫(huà)代碼。開(kāi)發(fā)最后通過(guò)代碼將每個(gè)動(dòng)畫(huà)串聯(lián)起來(lái)形成一個(gè)完整的動(dòng)畫(huà)。

△ CocosCreator 動(dòng)畫(huà)編輯器界面截圖

題型動(dòng)畫(huà)連貫且細(xì)節(jié)多，單靠視頻 demo 是無(wú)法協(xié)助開(kāi)發(fā)精準(zhǔn)實(shí)現(xiàn)設(shè)計(jì)效果的。為了解決這個(gè)問(wèn)題，我們建立了對(duì)設(shè)計(jì)落地具有指導(dǎo)性意義的文檔──適配標(biāo)注文檔和動(dòng)畫(huà)標(biāo)注文檔。

1. 適配標(biāo)注文檔

用戶機(jī)型調(diào)查結(jié)果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據(jù)上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設(shè)計(jì)稿，并規(guī)定以 780×360 為設(shè)計(jì)基準(zhǔn)，對(duì)另外兩個(gè)尺寸進(jìn)行適配。

標(biāo)注內(nèi)容為三個(gè)主屏幕尺寸下的縮放比例、大小位置、特定動(dòng)畫(huà)的起始點(diǎn)或終止點(diǎn)位置等細(xì)節(jié)調(diào)整標(biāo)注，方便開(kāi)發(fā)在做適配的時(shí)候能準(zhǔn)確還原設(shè)計(jì)稿的布局。

2. 動(dòng)畫(huà)標(biāo)注文檔

該文檔主要是對(duì)動(dòng)畫(huà)和音效的詳細(xì)說(shuō)明。每個(gè)題型的動(dòng)畫(huà)會(huì)被拆分，以最小可拆分動(dòng)畫(huà)為一個(gè)標(biāo)注對(duì)象，對(duì)其標(biāo)注時(shí)長(zhǎng)、具體的動(dòng)畫(huà)效果以及運(yùn)動(dòng)曲線數(shù)值等，方便開(kāi)發(fā)地還原 demo 的設(shè)計(jì)效果。詳細(xì)的標(biāo)注文檔不僅方便了開(kāi)發(fā)，更為后續(xù)測(cè)試和視覺(jué)走查降低了不少溝通成本。

總結(jié)

游戲化題型的設(shè)計(jì)，需要更多的從用戶的角度出發(fā)去思考和權(quán)衡游戲與教學(xué)的平衡性。對(duì)于兒童產(chǎn)品而言，設(shè)計(jì)服務(wù)于教育，愉悅和多變的體驗(yàn)是設(shè)計(jì)的方向，教學(xué)才是最根本的設(shè)計(jì)目標(biāo)。

文章來(lái)源：優(yōu)設(shè)

在年復(fù)一年的電商促銷節(jié)的渲染下，如今618、雙11儼然成為全國(guó)最大的線上狂歡節(jié)。而在狂歡節(jié)中擔(dān)任著重要角色的主會(huì)場(chǎng)，承擔(dān)著為各分會(huì)場(chǎng)分發(fā)流量的重要使命。與此同時(shí)，大促的頁(yè)面設(shè)計(jì)也越來(lái)越趨向于同質(zhì)化，大多基于以往的經(jīng)驗(yàn)沉淀，少有突破。在這樣的背景下，設(shè)計(jì)師不僅需要考慮如何滿足商業(yè)需求，更要兼顧用戶的體驗(yàn)感受。本文將通過(guò)多次主會(huì)場(chǎng)設(shè)計(jì)實(shí)戰(zhàn)中沉淀下的經(jīng)驗(yàn)與教訓(xùn)，以京東微信手Q購(gòu)物入口的年貨主會(huì)場(chǎng)為例，深入探討如何在成熟產(chǎn)品中做突破設(shè)計(jì)。

洞察：發(fā)現(xiàn)問(wèn)題（面臨挑戰(zhàn)）

1. 頁(yè)面結(jié)構(gòu)與動(dòng)線逐漸趨于穩(wěn)定

主會(huì)場(chǎng)設(shè)計(jì)不斷進(jìn)化和演變，從以往簡(jiǎn)單的會(huì)場(chǎng)入口展示，到會(huì)場(chǎng)+品牌+單品+關(guān)鍵詞的綜合內(nèi)容展示。雖然視覺(jué)風(fēng)格不同，但無(wú)論從結(jié)構(gòu)上還是體驗(yàn)上來(lái)看，本質(zhì)都相差不大。

2. 需要更豐富的詮釋品牌價(jià)值與用戶感知

在消費(fèi)升級(jí)的大環(huán)境下，消費(fèi)者的消費(fèi)能力/品牌/品質(zhì)在全面升級(jí)，此時(shí)需要更加注重品牌價(jià)值與內(nèi)涵的塑造，精準(zhǔn)化傳遞用戶感知。而主會(huì)場(chǎng)現(xiàn)有模式以大促營(yíng)銷為主，重點(diǎn)突出促銷賣貨氛圍和類目分流，品牌價(jià)值與用戶感知的傳遞較為薄弱。

3. 既要效率分流，也要逛起來(lái)（成交）

分流坑位與效率的提升，在一定程度上會(huì)降低會(huì)場(chǎng)的成交轉(zhuǎn)化，如何平衡二者之間的關(guān)系，在設(shè)計(jì)上需要平衡把握。

聚焦：設(shè)計(jì)目標(biāo)

在電商設(shè)計(jì)中，我們需要把握很重要的一點(diǎn)就是：平衡商業(yè)目標(biāo)與用戶體驗(yàn)之間的關(guān)系。設(shè)計(jì)目標(biāo)的制定，需要我們對(duì)主會(huì)場(chǎng)的商業(yè)訴求與用戶訴求進(jìn)行深入了解，才能制定有理有據(jù)的設(shè)計(jì)目標(biāo)。

1. 商業(yè)訴求

因電商環(huán)境的特點(diǎn)，主會(huì)場(chǎng)設(shè)計(jì)需要以商業(yè)訴求為思考起點(diǎn)，為商業(yè)價(jià)值賦能，輔助其商業(yè)目標(biāo)的達(dá)成。因此，在策劃階段，設(shè)計(jì)師應(yīng)該提前加入討論，和業(yè)務(wù)方一起梳理并明確業(yè)務(wù)訴求。因京東大促節(jié)奏時(shí)間長(zhǎng)的特點(diǎn)，節(jié)奏規(guī)劃上會(huì)分為預(yù)熱、品類、高潮三個(gè)時(shí)間，而針對(duì)不同的時(shí)期，主會(huì)場(chǎng)的業(yè)務(wù)訴求也會(huì)略有變化，但整體差別不大。

會(huì)場(chǎng)分流

大促期間，主會(huì)場(chǎng)作為流量矩陣中心，若只通過(guò)主會(huì)場(chǎng)一個(gè)頁(yè)面來(lái)滿足用戶需求是不太可能的，因此的會(huì)場(chǎng)分流是核心的商業(yè)訴求目標(biāo)。

提升成交轉(zhuǎn)化

雖然主會(huì)場(chǎng)的核心目標(biāo)是分流，但隨著大促策劃的逐漸深化，提升流量成交轉(zhuǎn)化率，賦能主會(huì)場(chǎng)價(jià)值最大化也是需要考慮的重要因素。

會(huì)場(chǎng)預(yù)約

京東大促節(jié)奏具有時(shí)間長(zhǎng)的特點(diǎn)，節(jié)奏規(guī)劃上會(huì)分為預(yù)熱、品類、高潮三個(gè)時(shí)期。如何保障品類日-品類會(huì)場(chǎng)的流量曝光，為會(huì)場(chǎng)預(yù)約也是主會(huì)場(chǎng)設(shè)計(jì)需要考慮的重要因素。

2. 用戶訴求

主會(huì)場(chǎng)最終面對(duì)的還是用戶，服務(wù)好用戶才能使其產(chǎn)生價(jià)值，并最終實(shí)現(xiàn)商業(yè)目標(biāo)。根據(jù)對(duì)以往大促設(shè)計(jì)的用戶及數(shù)據(jù)反饋進(jìn)行深入剖析，可大致分為新用戶及老用戶兩種類型，并進(jìn)一步對(duì)用戶特征/訴求等方面進(jìn)分析整理出用戶角色卡。

通過(guò)以上分析，總結(jié)出以下三大核心用戶訴求。

撿便宜薅羊毛

大促期間，用戶一般通過(guò)購(gòu)物首頁(yè)、社交分享、外部投放等入口進(jìn)入主會(huì)場(chǎng)，無(wú)目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來(lái)尋找折扣，撿便宜薅羊毛心理加重，但也相對(duì)理性。

快速篩選

面對(duì)越來(lái)越復(fù)雜的電商大促內(nèi)容與玩法，用戶需要一個(gè)更簡(jiǎn)單、更的會(huì)場(chǎng)為他們傳達(dá)促銷氛圍與優(yōu)惠。

個(gè)性化推薦

個(gè)性化算法基礎(chǔ)上，用戶對(duì)自己強(qiáng)相關(guān)的內(nèi)容更加感興趣。

3. 核心設(shè)計(jì)目標(biāo)

通過(guò)對(duì)商業(yè)訴求與用戶目標(biāo)的充分解讀，在主會(huì)場(chǎng)設(shè)計(jì)中我們需要在兩者之間找到平衡點(diǎn)，來(lái)更好的兼顧商業(yè)與體驗(yàn)。最終將今年京東微信手Q購(gòu)物入口的年貨主會(huì)場(chǎng)的核心設(shè)計(jì)目標(biāo)設(shè)定為：打造極簡(jiǎn)用戶體驗(yàn)，提升用戶專屬感知。

4. 設(shè)計(jì)策略

設(shè)計(jì)策略的制定能夠有效幫助我們始終貫徹核心設(shè)計(jì)目標(biāo)來(lái)探尋解決方案，根據(jù)前面的設(shè)計(jì)分析，定義出本次年貨節(jié)主會(huì)場(chǎng)的五大設(shè)計(jì)策略：用戶專屬感知、化繁為簡(jiǎn)，整合、多場(chǎng)景可復(fù)用、年味春節(jié)、多緯度多場(chǎng)景。

效率 · 化繁為簡(jiǎn)，整合

1. 頁(yè)面動(dòng)線設(shè)計(jì)

主會(huì)場(chǎng)作為大促版圖中的流量矩陣中心，堪稱絕對(duì) C 位。在向用戶傳遞大促氛圍及專屬感知的同時(shí)，又要滿足效率分流及成交等目標(biāo)，同時(shí)還要引導(dǎo)用戶參與各種互動(dòng)，這需要構(gòu)建合理的頁(yè)面動(dòng)線。本次主會(huì)場(chǎng)頁(yè)面動(dòng)線設(shè)計(jì)劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節(jié)奏引導(dǎo)用戶瀏覽。

• 頭頸部：氛圍與利益點(diǎn)傳達(dá)、高質(zhì)量個(gè)性化推薦傳遞用戶專屬感知；
• 中間：樓層錨點(diǎn)設(shè)計(jì)，便捷篩選，內(nèi)容分流；
• 尾部：長(zhǎng)尾 BI 商品推薦，深化用戶專屬感知。

2. 首屏-頭部設(shè)計(jì)

主會(huì)場(chǎng)頭部作為門面擔(dān)當(dāng)，承載著向用戶傳遞主題訴說(shuō)與促銷氛圍的功能。隨著運(yùn)營(yíng)需求的不斷增加，以及頭部資源利用率等問(wèn)題，頭部設(shè)計(jì)不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會(huì)場(chǎng)推薦、活動(dòng)推薦、預(yù)約時(shí)間軸、互動(dòng)入口、優(yōu)惠券等。在有限的空間里如何進(jìn)行內(nèi)容展現(xiàn)和傳達(dá)，本次年貨節(jié)將通過(guò)內(nèi)容重組和層級(jí)劃分來(lái)進(jìn)行實(shí)現(xiàn)。

體驗(yàn) · 打造專屬感知

1. 首屏-頭部設(shè)計(jì)

精準(zhǔn)化營(yíng)銷下的千人千面，用戶對(duì)自己強(qiáng)相關(guān)的內(nèi)容更加感興趣。大促環(huán)境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗(yàn)？我們根據(jù)用戶屬性進(jìn)行新老用戶切分，結(jié)合日?；顒?dòng)數(shù)據(jù)驗(yàn)證整理出：猜你喜歡商品、購(gòu)物車降價(jià)商品、BI 拼購(gòu)商品、BI 會(huì)場(chǎng)等四類內(nèi)容，打造用戶專屬年貨節(jié)模塊。

2. 中間-樓層設(shè)計(jì)

類型繁雜、內(nèi)容眾多的中部樓層設(shè)計(jì)，承擔(dān)著 50+ 分會(huì)場(chǎng)曝光分流的重要使命。我們把 50+ 分會(huì)場(chǎng)劃分為 9 大品類，每個(gè)品類一個(gè)樓層進(jìn)行內(nèi)容組合設(shè)計(jì)，包括：優(yōu)惠券、品類主會(huì)場(chǎng)、分會(huì)場(chǎng)入口、品牌曝光、單品曝光、熱搜詞等內(nèi)容。樓層順序根據(jù) BI 進(jìn)行展示，讓用戶即使在內(nèi)容繁雜的情況下也能快速定位自己感興趣的內(nèi)容。

3. 尾部-猜你喜歡設(shè)計(jì)

長(zhǎng)尾理論是網(wǎng)絡(luò)時(shí)代興起的一種新理論，當(dāng)商品的銷售成本急劇降低時(shí)，幾乎任何以前看似需求極低的產(chǎn)品，只要有賣，都會(huì)有人買。這些需求和銷量不高的產(chǎn)品所占據(jù)的共同市場(chǎng)份額，可以和主流產(chǎn)品的市場(chǎng)份額相比，甚至更大。簡(jiǎn)單了解長(zhǎng)尾的含義后，可以清晰的知道主會(huì)場(chǎng)頁(yè)面中加入長(zhǎng)尾設(shè)計(jì)的原因：利用互聯(lián)網(wǎng)移動(dòng)端頁(yè)面無(wú)限延長(zhǎng)的框架，進(jìn)行更多貨品的曝光，來(lái)留住剩余未跳轉(zhuǎn)流量，進(jìn)行商品售賣來(lái)實(shí)現(xiàn)價(jià)值最大化。在長(zhǎng)尾內(nèi)容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費(fèi)轉(zhuǎn)化。

規(guī)范 · 多場(chǎng)景可復(fù)用

1. 今日必買模塊設(shè)計(jì)

因京東大促品類日節(jié)奏性曝光的特點(diǎn)，主會(huì)場(chǎng)的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個(gè)體差異化需求的情況下，又能降低設(shè)計(jì)、開(kāi)發(fā)成本？本次年貨節(jié)主會(huì)場(chǎng)對(duì)今日必買模塊進(jìn)行了組件化設(shè)計(jì)。

除了今日必買模塊，品類樓層的設(shè)計(jì)也遵循了這一設(shè)計(jì)原則。

互動(dòng) · 多維度多場(chǎng)景

1. 輕互動(dòng)設(shè)計(jì)

如何讓用戶深度參與會(huì)場(chǎng)并形成記憶點(diǎn)？會(huì)場(chǎng)的互動(dòng)設(shè)計(jì)是很好的方法。通過(guò)輕量的互動(dòng)方式，引導(dǎo)用戶參與并拿到獎(jiǎng)勵(lì)的同時(shí)，滿足商業(yè)價(jià)值的需要。本次年貨節(jié)主會(huì)場(chǎng)從用戶角度出發(fā)，通過(guò)：做任務(wù)贏大獎(jiǎng)、分享贏京豆、新年紅包、明星拜年等四個(gè)互動(dòng)玩法，有節(jié)奏的投放在年貨節(jié)的不同時(shí)期，形成用戶記憶點(diǎn)。

效果反饋

有些地方雖略有遺憾，但整體反饋不錯(cuò)。成交、UV 跳轉(zhuǎn)率、UV 價(jià)值等指標(biāo)顯著提升，其中 UV 跳轉(zhuǎn)率、UV 價(jià)值均為近兩年大促主會(huì)場(chǎng)最高值。因涉及敏感數(shù)據(jù)，這里就不再一一詳述。

總結(jié)

通過(guò)對(duì) 19 年年貨主會(huì)場(chǎng)設(shè)計(jì)的詳細(xì)解讀，相信堅(jiān)持閱讀到這里的小伙伴們對(duì)「如何在成熟產(chǎn)品中做突破設(shè)計(jì)」已經(jīng)有了深入的了解，希望我的這些思考能夠給你在工作中帶來(lái)一些幫助。

在手機(jī)app應(yīng)用中各種格式的彈窗效果相信大家都看過(guò)，也可能反感過(guò)某些彈窗，本文就來(lái)談?wù)勱P(guān)于app彈窗設(shè)計(jì)以及彈窗的適用情景。

一. 彈窗的定義

1. 彈窗作用

彈窗是為了讓用戶回應(yīng)，需要用戶與之交互的窗口。

非模態(tài)彈窗一般被設(shè)計(jì)成用來(lái)告訴用戶信息內(nèi)容，而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。

2. 模態(tài)彈窗

會(huì)打斷用戶的操作行為，強(qiáng)制用戶必須進(jìn)行操作，否則不可以進(jìn)行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模態(tài)彈窗

不會(huì)影響用戶操作，用戶可以不與回應(yīng)，通常有時(shí)間限制，出現(xiàn)一段時(shí)間就會(huì)自動(dòng)消失。

（Toast/HUD，Snackbar）

二. 彈窗分類

以下將以各類彈窗的含義、作用、適用來(lái)進(jìn)行淺析。

1. Alerts/Dialog：警告框與對(duì)話框

含義：英文意為警告、對(duì)話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。

剖析：iOS中警告框稱之為Alerts，作用是用來(lái)傳達(dá)重要信息，并伴隨著需要用戶進(jìn)行操作。

iOS規(guī)范中，警告框包含的元素如下：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。

必須包含標(biāo)題、包含一個(gè)或多個(gè)按鈕。

Android規(guī)范中，彈窗交互按鈕需結(jié)合實(shí)際情況，不用「是/否」原則進(jìn)行設(shè)計(jì)。

作用：告知用戶當(dāng)前發(fā)生的狀況，讓用戶主動(dòng)選擇回應(yīng)。

適用：重要性較高的操作時(shí)，如退出、刪除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動(dòng)視圖

含義：英譯為工具欄、操作欄。

剖析：當(dāng)用戶激發(fā)一個(gè)操作的時(shí)候，出現(xiàn)此窗口。

一般會(huì)給用戶提供更多的功能選擇，一般可采用官方控件。

一般都設(shè)計(jì)有一個(gè)默認(rèn)的「取消」按鈕，點(diǎn)擊取消可以關(guān)閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用戶觸發(fā)、包含兩個(gè)或以上的按鈕。

△ 以上為今日頭條、iOS系統(tǒng)相冊(cè)

作用：操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會(huì)永久占用頁(yè)面UI的空間。

適用：如分享功能。

3. Popover/Popup：浮出框/浮層彈窗

含義：英意為彈出窗口，浮動(dòng)于頂層窗口，氣泡。

△ 以上為微博、qq、微信

剖析：當(dāng)用戶點(diǎn)擊某個(gè)控件或者某個(gè)區(qū)域時(shí)浮出的半透明或者不透明的彈窗窗口。

不會(huì)對(duì)用戶所在位置進(jìn)行跳轉(zhuǎn)。

作用：可以在當(dāng)前頁(yè)面進(jìn)行更多的操作行為，顯示/隱藏頁(yè)面中的折疊信息。

適用：首頁(yè)位置呈現(xiàn)一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS沒(méi)有Toast，只有HUD）

含義：Toast也被稱為吐司提示，Toast是安卓系統(tǒng)的一個(gè)控件名詞，現(xiàn)也應(yīng)用于iOS系統(tǒng)中。

剖析：提示框?qū)儆谝环N輕量級(jí)的彈窗反饋形式，常以小彈框的形式出現(xiàn)，持續(xù)1-2秒自動(dòng)消失，可以出現(xiàn)在屏幕任意位置，但是建議同一款產(chǎn)品盡量使用相同位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知，成為習(xí)慣。

提示信息能給予用戶及時(shí)反饋，確保用戶知曉自己所處的狀態(tài)，并可以做出相應(yīng)的措施。

iOS用戶更習(xí)慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會(huì)遮擋主體內(nèi)容。（如花瓣、有道云筆記）

Android正統(tǒng)的規(guī)范中Toast：

• 出現(xiàn)在屏幕底部。
• 只能放文字不能帶圖標(biāo)，文字要精簡(jiǎn)不宜太長(zhǎng)。
• 不是模態(tài)的，可以通過(guò)Toast對(duì)其他控件進(jìn)行操作。
• 短時(shí)間后會(huì)自動(dòng)消失。
• 不能對(duì)Toast進(jìn)行交互。
• 優(yōu)先適用于系統(tǒng)提示，不能手動(dòng)操作讓Toast主動(dòng)消失。

△ 以上為今日頭條、微博、即刻

HUD與Toast的區(qū)別：

• HUD只出現(xiàn)在屏幕的中央，Toast則在底部。
• HUD可以包含icon，Toast只能純文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中內(nèi)容可以變化（如調(diào)節(jié)音量時(shí)），Toast中內(nèi)容不可變化。

△ iOS音量調(diào)節(jié)

優(yōu)點(diǎn)：

• 占用屏幕空間小。
• 不會(huì)打斷用戶操作。
• 使用簡(jiǎn)單，適用范圍廣。

缺點(diǎn)：

• 出現(xiàn)時(shí)間短，在碎片化時(shí)代注意力不集中容易錯(cuò)過(guò)Toast提示。
• 遮蓋其他控件，但不能對(duì)Toast進(jìn)行交互。

適用：提示不需要的反饋信息，如刷新后的成功狀態(tài)。

5. Snackbar：底部彈窗

Android特有的交互形式，在Google的MD規(guī)范中，將Toast和Snackbars歸為一類。有些時(shí)候也有應(yīng)用在iOS系統(tǒng)中，也可以理解為加強(qiáng)版的Toast。

含義：英譯為快餐、小吃。

剖析：Snackbars與toast一樣是從屏幕底部向上出現(xiàn)，但是Snackbar不同的是可以經(jīng)過(guò)用戶進(jìn)行其他操作而消失。

適用：較多適用于撤銷操作。

三. 總結(jié)

通過(guò)分析和了解彈窗的類別、適用范圍，才能更好的在設(shè)計(jì)中進(jìn)行優(yōu)化與改變。用戶體驗(yàn)設(shè)計(jì)的重點(diǎn)，是一步步了解用戶，然后設(shè)計(jì)出適合用戶體驗(yàn)，滿足用戶心理需求的產(chǎn)品。把握好彈框設(shè)計(jì)規(guī)范，避免彈框設(shè)計(jì)的誤區(qū)，能更好的幫助你完善產(chǎn)品。

但是，沒(méi)有十全十美的產(chǎn)品，所以要根據(jù)設(shè)計(jì)趨勢(shì)與用戶需求不斷地進(jìn)行更新迭代，通過(guò)用戶反饋，不斷地改良產(chǎn)品體驗(yàn)，才是做出優(yōu)秀產(chǎn)品的前提。

從事電商方面的設(shè)計(jì)師，詳情頁(yè)設(shè)計(jì)可以說(shuō)是必修課，好的詳情頁(yè)會(huì)給帶給用戶更流暢的視覺(jué)體驗(yàn)、更直觀的產(chǎn)品信息、亮點(diǎn)等等，也有助于提升交易的達(dá)成率。正是因?yàn)槿绱?，所以很多商家不惜重金?qǐng)?jiān)O(shè)計(jì)師為其打造爆款產(chǎn)品的詳情頁(yè)，由此可見(jiàn)詳情頁(yè)在電商設(shè)計(jì)中的重要程度。本期和大家一起分析總結(jié)：如何把詳情頁(yè)做的足夠出彩，詳情頁(yè)做不好需要從哪些方面進(jìn)行提升？

目前被認(rèn)可的一種詳情頁(yè)設(shè)計(jì)形式是分屏式，就是按照手機(jī)端設(shè)計(jì)思維以一屏為單位制作，最后整合成一個(gè)完整的詳情頁(yè)，這種形式有助于提升視覺(jué)流暢度及內(nèi)容識(shí)別度，所以我們可以將每一屏都當(dāng)作一張海報(bào)來(lái)制作。而說(shuō)到海報(bào)，就離不開(kāi)設(shè)計(jì)構(gòu)圖。

詳情頁(yè)的構(gòu)圖與傳統(tǒng)的PC端海報(bào)有所不同，因?yàn)樵斍轫?yè)設(shè)計(jì)更注重手機(jī)端，所以一屏的內(nèi)容又可以看做是手機(jī)端豎向的海報(bào)。而一副出彩的海報(bào)，必然需要優(yōu)質(zhì)的骨架。那么常見(jiàn)豎向海報(bào)構(gòu)圖形式有哪些？下面為大家總結(jié)了幾種在詳情頁(yè)設(shè)計(jì)中比較實(shí)用的構(gòu)圖形式：

如圖所示，這三種構(gòu)圖形式看似簡(jiǎn)單，實(shí)則兼顧了手機(jī)端的很多必要點(diǎn)，比如：視覺(jué)的流暢度、整潔度、辨識(shí)度、用戶的接受度等等，詳情頁(yè)設(shè)計(jì)在構(gòu)圖及板式方面并不需要很復(fù)雜，反而干凈整齊的畫(huà)面更易于視覺(jué)表達(dá)，也更利于手機(jī)端展示。

這三種構(gòu)圖形式在詳情頁(yè)中使用頻率是非常高的，下面我們看幾組案例：

看似簡(jiǎn)單的構(gòu)圖，反而在詳情頁(yè)設(shè)計(jì)中非常實(shí)用，僅靠這三種構(gòu)圖，完全可以做出很優(yōu)秀的詳情頁(yè)。另外還有一些從這三類衍生的構(gòu)圖形式，也比較常用：

文案在配圖下半部分的這類構(gòu)圖相比而言用的少一些、也難把控一些，當(dāng)然用的好了在版式上會(huì)有打破、眼前一亮的視覺(jué)感受，只是這類構(gòu)圖不宜多用，完整的詳情頁(yè)中出現(xiàn)1-2次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：

詳情頁(yè)的構(gòu)圖不易太復(fù)雜，這六種構(gòu)圖形式完全夠日常工作，只需選取其中1-3中構(gòu)圖形式交替使用即可。以上構(gòu)圖示例中標(biāo)識(shí)的裝飾元素可以是線條、英文、圖標(biāo)、數(shù)字、實(shí)物素材等等，也可以選擇不使用，具體情況根據(jù)配圖的留白以及重心靈活使用即可。

所以，詳情頁(yè)中每一屏的構(gòu)圖并不難，完全可以把這六種構(gòu)圖形式當(dāng)做公式，需要哪種直接套用其結(jié)構(gòu)就可以（結(jié)構(gòu)類似即可，并非要求1:1）。另外：配圖形式可以分為三種：全屏、半屏、透明圖，具體的構(gòu)圖形式需要結(jié)合畫(huà)面整體的重心、留白、美觀度決定。更通俗一些的話，構(gòu)圖就可以理解為填空，內(nèi)容就往空的地方填，注意好適量的留白。

補(bǔ)充：當(dāng)透明圖作為配圖時(shí)，不管哪種構(gòu)圖形式都有可能出現(xiàn)空的現(xiàn)象，這時(shí)我們可以用一些具有裝飾性的數(shù)字、英文、線條、形狀、文字等等進(jìn)行填充，舉例說(shuō)明：

案例中的文字、數(shù)字與產(chǎn)品相互結(jié)合，既解決了空的問(wèn)題、提升了整體的飽滿度，又在形式上做到的新穎、有創(chuàng)意。構(gòu)圖形式與前面所說(shuō)的皆能吻合。

說(shuō)到設(shè)計(jì)素材，浮在腦海中的可能會(huì)很多種，而這次要說(shuō)的主要是三類，即：手勢(shì)、植物、肌理（在花瓣搜索關(guān)鍵詞“手勢(shì)”“植物”“材質(zhì)”“肌理”就能找到對(duì)應(yīng)素材），這三類素材在詳情頁(yè)設(shè)計(jì)中出現(xiàn)的頻率也是很高的，如果運(yùn)用得當(dāng)會(huì)將詳情頁(yè)的出彩度進(jìn)一步提升一個(gè)檔次，而且對(duì)于視覺(jué)表達(dá)也會(huì)更加生動(dòng)、形象、富有說(shuō)服力，下面我們逐一來(lái)說(shuō)：

手勢(shì)素材

顧名思義，就是各種各樣關(guān)于手方面的動(dòng)作，比如：拿、托、指等等，下面舉個(gè)例子來(lái)看：

這些手勢(shì)在很多詳情頁(yè)中都會(huì)出現(xiàn)，接下來(lái)我們不妨思考這么一個(gè)問(wèn)題：為什么要用這些手勢(shì)，只是單純的好看嗎？

其實(shí)不然，在視覺(jué)上，這些手勢(shì)使得畫(huà)面更加生動(dòng)、有立體感、有層次感，讓作品更飽滿、更出彩。而對(duì)于用戶而言，能讓其更加深刻的體會(huì)到產(chǎn)品是有溫度的、可操作的、更真實(shí)、更容易理解，所以對(duì)于交易的達(dá)成以及加深用戶對(duì)產(chǎn)品的了解也更具說(shuō)服力。

影響詳情頁(yè)轉(zhuǎn)化率的因素有很多種，視覺(jué)表達(dá)能否真正抓住用戶心理也是很關(guān)鍵的一點(diǎn)！

植物素材

這類素材相信大家都不陌生，在很多頁(yè)面以及詳情頁(yè)出現(xiàn)的頻率都很高，而且裝飾性很強(qiáng)，寓意也很寬泛，比：自然、清新、貼合現(xiàn)實(shí)、有生機(jī)等等，下面舉個(gè)例子：

如圖所示，這里的植物都能很好的與畫(huà)面主體形成很好的遮擋關(guān)系，在視覺(jué)層面顯得更有層次感、畫(huà)面也更飽滿；而且植物的運(yùn)用并不是隨便使用的，而是與海報(bào)氛圍、文案都緊密相關(guān)，形成了很好的呼應(yīng)、裝飾作用。

我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫(huà)面整體氣質(zhì)相符，可以根據(jù)實(shí)際情況靈活使用。

肌理素材

關(guān)于材質(zhì)、肌理的妙用在前面很多文章中都有提到過(guò)，這里簡(jiǎn)單的說(shuō)一下：肌理素材對(duì)于提升作品細(xì)節(jié)感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問(wèn)題，不妨用肌理素材試試。

單看標(biāo)題可能很多人不太明白，什么叫做抽象名詞具體化？其實(shí)簡(jiǎn)單理解就是：將一些比較抽象的名詞通過(guò)設(shè)計(jì)手法表現(xiàn)出來(lái)，比如：風(fēng)、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗(yàn)、加快用戶理解，而且在視覺(jué)上能生動(dòng)形象的將抽象化名詞表現(xiàn)出來(lái)，對(duì)于視覺(jué)出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺(jué)傳達(dá)的時(shí)效性，下面看個(gè)例子：

通過(guò)案例我們不難發(fā)現(xiàn)：將抽象化的名詞通過(guò)視覺(jué)手法表現(xiàn)出來(lái)，對(duì)于用戶理解的難易程度以及視覺(jué)出彩度而言都有提升。如果一款產(chǎn)品詳情頁(yè)中能出現(xiàn)1-2次這樣的處理手法，會(huì)使得詳情頁(yè)在視覺(jué)上更加生動(dòng)、形象。

補(bǔ)充：在詳情頁(yè)設(shè)計(jì)中，若文案中出現(xiàn)一些LOGO、數(shù)字、英文，注意不要放過(guò)它，因?yàn)樗哂醒b飾性的特點(diǎn)，對(duì)于詳情頁(yè)板式的活躍以及設(shè)計(jì)感提升都有很大的幫助！形式多為：水印、與產(chǎn)品穿插、作為主體信息使用等等！一款詳情頁(yè)這種用法可以出現(xiàn)2-3次！

詳情頁(yè)設(shè)計(jì)不可忽視的兩點(diǎn)：視覺(jué)的流暢度以及文案辨識(shí)度。文章所提到的一些構(gòu)圖方式、元素使用、視覺(jué)表現(xiàn)形式都是為大家提供一個(gè)可供參考的方向，落實(shí)到工作中要靈活運(yùn)用、舉一反三。一般情況下，一款詳情頁(yè)大概有2-4屏比較出彩的即可，能形成一定的對(duì)比，不至于視覺(jué)疲勞、千篇一律！

不妨找一些不錯(cuò)的詳情頁(yè)，按照文章中所寫(xiě)的自己嘗試分析分析，看是否與之吻合。切記詳情頁(yè)設(shè)計(jì)構(gòu)圖及文字排版不易太過(guò)復(fù)雜，切記、切記、切記，重要的事情說(shuō)三遍！

文章來(lái)源：站酷

在做設(shè)計(jì)的過(guò)程中，大部分設(shè)計(jì)師只專注于主操作流程、主頁(yè)面、分支流程、小頁(yè)面和頁(yè)面的不同狀態(tài)。卻容易忽略產(chǎn)品中容易出現(xiàn)的各種異常狀態(tài)。

當(dāng)用戶停留任何一個(gè)界面，進(jìn)行任何一個(gè)操作都可能發(fā)生異常狀態(tài)。

如果接到每個(gè)需求都去制定一次異常狀態(tài)，這樣的后果可能會(huì)使得產(chǎn)品的不同模塊、不同流程，異常狀態(tài)都不一致。全局規(guī)范性被破壞，同時(shí)設(shè)計(jì)師的效率也降低。

因此全局制定異常狀態(tài)規(guī)范很有必要，后續(xù)就不需要再設(shè)計(jì)，開(kāi)發(fā)直接復(fù)用異常狀態(tài)的規(guī)范。省時(shí)省力、提率、設(shè)計(jì)規(guī)范、運(yùn)行更流暢、減少代碼重復(fù)率、安裝包也會(huì)更小。

異常狀態(tài)一共有以下 10 類：

• 網(wǎng)絡(luò)異常
• 消耗大量流量時(shí)
• 空數(shù)據(jù)
• 加載失敗
• 操作失敗
• 服務(wù)器異常
• 搜索無(wú)結(jié)果
• 無(wú)權(quán)限
• 功能建設(shè)中
• 內(nèi)容被刪除

網(wǎng)絡(luò)異常

當(dāng)移動(dòng)設(shè)備網(wǎng)絡(luò)異常時(shí)，導(dǎo)致無(wú)法上傳和下載數(shù)據(jù)，從而無(wú)法正常的使用產(chǎn)品。

網(wǎng)絡(luò)異常存在兩種場(chǎng)景：

• 網(wǎng)絡(luò)異常時(shí)，用戶打開(kāi) App，這種情況 App 會(huì)出現(xiàn)異常狀態(tài)提示給用戶，這是 App 主動(dòng)告知行為；
• 用戶點(diǎn)擊操作時(shí)，由于網(wǎng)絡(luò)異常，這時(shí)候通過(guò)交互反饋給用戶，這是 App 被動(dòng)告知行為。

1. App主動(dòng)行為

當(dāng)無(wú)網(wǎng)絡(luò)時(shí)，用戶打開(kāi) App，通常有三種方式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。

tips 提示，通過(guò) tips 提示用戶當(dāng)前網(wǎng)絡(luò)不可用，tips 使用場(chǎng)景一般為用戶打開(kāi)后，界面停留在首頁(yè)，且首頁(yè)以列表形式展示，這樣的話， tips 才能合理的融入到界面中，常見(jiàn)使用這種布局方式的有微信、qq等。

使用toast提示用戶網(wǎng)絡(luò)異常，同時(shí)提示用戶可以去使用非數(shù)據(jù)影響的操作。例如網(wǎng)易云音樂(lè)，當(dāng)無(wú)網(wǎng)絡(luò)時(shí)候，告知用戶可以去正常聽(tīng)已下載的音樂(lè)。

使用對(duì)話框，引導(dǎo)用戶進(jìn)入設(shè)置頁(yè)面，關(guān)閉飛行模式或者打開(kāi) Wi-Fi，例如美團(tuán)進(jìn)入首頁(yè)后的對(duì)話框提示。

2. App被動(dòng)行為

當(dāng)前無(wú)網(wǎng)絡(luò)時(shí)，用戶點(diǎn)擊操作，無(wú)法正常使用產(chǎn)品，這時(shí)候通常有兩種處理方式。

一種是當(dāng)前界面出現(xiàn) toast 提示。另一種是進(jìn)入下一級(jí)界面，以缺省頁(yè)的形式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。

例如手機(jī)淘寶，沒(méi)有網(wǎng)絡(luò)時(shí)，用戶點(diǎn)擊會(huì)進(jìn)入下一頁(yè)，出現(xiàn)缺省頁(yè)提示，告知用戶網(wǎng)絡(luò)異常，同時(shí)提供刷新按鈕。

美團(tuán)在無(wú)網(wǎng)絡(luò)時(shí)，點(diǎn)擊其他 tab bar，出現(xiàn) toast 提示用戶當(dāng)前網(wǎng)絡(luò)異常，稍后重試。

3. 小結(jié)

• 個(gè)人覺(jué)得，當(dāng) App 打開(kāi)進(jìn)入列表頁(yè)面時(shí)，常見(jiàn)的如 IM，則使用 tips 提示告知用戶，非列表的 IM 工具時(shí)，可使用 toast 告知用戶。
• 當(dāng)用戶進(jìn)行界面交互時(shí)，用戶點(diǎn)擊操作，通過(guò) toast 告知用戶。

消耗大量流量時(shí)

當(dāng)涉及需要消耗大量流量數(shù)據(jù)時(shí)，且非 Wi-Fi 情況下，這時(shí)候需要告知用戶。常見(jiàn)的例如看視頻，聽(tīng)/下載歌曲、視頻通話、下載上傳文件等。

例如B站，當(dāng)使用移動(dòng)數(shù)據(jù)看視頻，則通過(guò)提示語(yǔ)和對(duì)應(yīng)按鈕上的流量值告知用戶。

網(wǎng)易云音樂(lè)在非 Wi-Fi 情況下，下載音樂(lè)時(shí)，通過(guò)對(duì)話框，告知用戶當(dāng)前使用數(shù)據(jù)流量，同時(shí)提供可繼續(xù)下載的功能，也提供通過(guò)辦理新業(yè)務(wù)解決數(shù)據(jù)流量的問(wèn)題。

空數(shù)據(jù)

空數(shù)據(jù)一共分為兩種類型，分別為初始狀態(tài)和清空狀態(tài)。

1. 初始狀態(tài)

用戶首次使用，沒(méi)有任何內(nèi)容數(shù)據(jù)時(shí)，需要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面，這時(shí)候需要提示用戶需要進(jìn)行某種操作。

例如淘寶App，當(dāng)用戶沒(méi)有把商品加入購(gòu)物車時(shí)，進(jìn)入購(gòu)物車界面，會(huì)給出提示購(gòu)物車界面為空。給出用戶提示，給出相對(duì)應(yīng)的入口按鈕，引導(dǎo)用戶操作。

如果初始狀態(tài)，無(wú)任何內(nèi)容直接給出一個(gè)空白界面，用戶可能會(huì)以為該界面出 bug 了。

Gmail 直接用一個(gè)插畫(huà)提示用戶收件箱為空。

一般對(duì)于初始狀態(tài)的設(shè)計(jì)，常規(guī)做法是簡(jiǎn)單的插畫(huà)配合簡(jiǎn)潔的文案，必要的時(shí)候給出引導(dǎo)用戶操作行為的按鈕。

現(xiàn)在流行的設(shè)計(jì)趨勢(shì)是插畫(huà)越輕量越簡(jiǎn)單越好，以免搶奪了文案信息。

2. 清空狀態(tài)

當(dāng)用戶清空當(dāng)前的頁(yè)面內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示告知用戶出現(xiàn)當(dāng)前頁(yè)面的原因，且告知用戶該如何處理。

清空狀態(tài)是對(duì)初始狀態(tài)的進(jìn)一步細(xì)化。清空狀態(tài)的界面和初始狀態(tài)設(shè)計(jì)很相似，唯一不同的是文案的提示。

有的產(chǎn)品直接把清空狀態(tài)的界面按照初始狀態(tài)來(lái)設(shè)計(jì)，這樣也是可以的，缺點(diǎn)就是沒(méi)有告知用戶產(chǎn)生空狀態(tài)原因是初始化還是清空所致。

加載失敗

在加載過(guò)程中，App 向服務(wù)器請(qǐng)求數(shù)據(jù)，如果是網(wǎng)絡(luò)原因?qū)е?，則使用網(wǎng)絡(luò)異常的設(shè)計(jì)規(guī)范。

如果非網(wǎng)絡(luò)異常原因，則可能因?yàn)榉?wù)器異常導(dǎo)致接口請(qǐng)求不到數(shù)據(jù)，從而加載失敗。

第一次請(qǐng)求失敗，有些場(chǎng)景可能重試 2 次，例如微信支付寶，這種情況可使用 toast 告知用戶加載失敗的原因。

操作失敗

任何操作行為的交互界面都伴隨著操作失敗的概率。

當(dāng)用戶操作失敗時(shí)，在當(dāng)前頁(yè)面給予一個(gè)反饋，告知用戶操作失敗，最好告知用戶操作失敗的原因，讓用戶知道接下來(lái)如何避免操作失敗。

服務(wù)器異常

因?yàn)榉?wù)器異常是小概率事件，但是也會(huì)發(fā)生。

當(dāng)服務(wù)器異常時(shí)，且用戶在操作過(guò)程中，出現(xiàn)這種情況，一般可設(shè)計(jì)為對(duì)話框提示，明確告知用戶，服務(wù)器出現(xiàn)問(wèn)題，讓用戶稍后重試。

例如下圖的華為云備份恢復(fù)界面：

搜索無(wú)結(jié)果

用戶在搜索過(guò)程中，除了出現(xiàn)正常的匹配結(jié)果，還存在無(wú)匹配結(jié)果的情況。針對(duì)搜索無(wú)結(jié)果的情況，要給予用戶操作無(wú)結(jié)果的提示。

幾乎搜索無(wú)結(jié)果的狀態(tài)都是在內(nèi)容區(qū)出現(xiàn)對(duì)應(yīng)提示。例如 iOS 相冊(cè)，通過(guò)搜索關(guān)鍵詞，當(dāng)沒(méi)有匹配照片時(shí)，則出現(xiàn)對(duì)應(yīng)的提示，如下圖右側(cè)圖：

下圖淘寶買家版后臺(tái)，當(dāng)用戶搜索關(guān)鍵詞無(wú)結(jié)果時(shí)，出現(xiàn)對(duì)應(yīng)的提示語(yǔ)和插畫(huà)。

無(wú)權(quán)限

無(wú)權(quán)限的場(chǎng)景，通常適用于 b 端產(chǎn)品，對(duì)于不同組織架構(gòu)的企業(yè)員工，會(huì)存在不同的權(quán)限。

例如部分重要的內(nèi)容，非同一組織架構(gòu)的員工無(wú)權(quán)限查看，這種情況，用戶點(diǎn)擊進(jìn)入一般給出對(duì)應(yīng)的提示。

當(dāng)然最好的方案是在 App 上面過(guò)濾掉無(wú)法查看的內(nèi)容，但是存在員工間的轉(zhuǎn)發(fā)行為，這時(shí)候無(wú)權(quán)限的員工，點(diǎn)擊進(jìn)入，則顯示暫無(wú)權(quán)限查看的提示頁(yè)面。

功能建設(shè)中

一般 App 功能正在開(kāi)發(fā)中，這種情況不會(huì)在 App 界面中展示出來(lái)，只有完全開(kāi)發(fā)完畢并上線后才會(huì)出現(xiàn)在 App 上。

但是也有一些產(chǎn)品的特殊業(yè)務(wù)，會(huì)將一些未開(kāi)發(fā)的功能展示出來(lái)，例如微信公眾號(hào)，長(zhǎng)按微信文章，即出現(xiàn)對(duì)應(yīng)的提示。

也有一些新聞?lì)l道還沒(méi)有開(kāi)發(fā)完畢上線，這時(shí)候用戶點(diǎn)擊進(jìn)入下級(jí)界面，則出現(xiàn)對(duì)應(yīng)的提示語(yǔ)/插圖提示，如下圖所示：

內(nèi)容被刪除

有的時(shí)候，文件或者頁(yè)面內(nèi)容被刪除，但由于文件或者頁(yè)面內(nèi)容的上一級(jí)頁(yè)面有緩存，所以當(dāng)用戶點(diǎn)擊進(jìn)入時(shí)，會(huì)出現(xiàn)文章/文件被刪除的情況。

已被刪除的異常狀態(tài)，常見(jiàn)的設(shè)計(jì)是用戶進(jìn)入新頁(yè)面出現(xiàn)對(duì)應(yīng)的插畫(huà)和標(biāo)題提示。

例如下圖微信公眾號(hào)文章內(nèi)容被作者刪除，讀者點(diǎn)擊進(jìn)入，加載后的界面就出現(xiàn)內(nèi)容被刪除的提示。

以上就是常見(jiàn)的 10 種異常狀態(tài)的簡(jiǎn)單介紹和說(shuō)明。在制定異常狀態(tài)的設(shè)計(jì)規(guī)范時(shí)，可以參考本篇文章。

當(dāng)然也有公司特殊的業(yè)務(wù)導(dǎo)致存在很特殊的異常狀態(tài)，針對(duì)這種情況，可以適當(dāng)?shù)脑黾?、刪除或者修改，使其更適用于自己公司的項(xiàng)目。

文章來(lái)源：優(yōu)設(shè)

每一次學(xué)習(xí)改版案例，不僅僅只是去看在視覺(jué)層面的變化，更多的應(yīng)該是要學(xué)習(xí)到作者改版背后的思考。為什么要這么改，原因是什么，目的又是什么，怎么做，有哪些限制等等，有很多東西要去思考。所以，帶著問(wèn)題并結(jié)合自己實(shí)際中所做的項(xiàng)目來(lái)看案例，應(yīng)該會(huì)是一個(gè)很有收獲的過(guò)程。

項(xiàng)目背景

Booking.com繽客 是一家荷蘭初創(chuàng)公司，并已經(jīng)發(fā)展成為全球最大的旅游電子商務(wù)公司之一。
在Booking上，旅客可以選擇世界上任何一處的住宿地點(diǎn)，包括公寓，度假酒店，民宿，五星級(jí)豪華度假村，樹(shù)屋甚至冰屋等等。每天，通過(guò)平臺(tái)預(yù)訂的房間數(shù)超過(guò)155萬(wàn)。無(wú)論是商務(wù)旅行還是休閑旅行，人們都可以快速輕松地預(yù)訂到理想的住處。

競(jìng)品分析

自從Booking發(fā)布以來(lái)，許多競(jìng)爭(zhēng)對(duì)手都采用類似的商業(yè)模式瘋狂跟進(jìn)，搶占市場(chǎng)，并且在某些方面比Booking本身做的還好。

在調(diào)研的前期階段，我去搜集了一些競(jìng)爭(zhēng)對(duì)手和類似的平臺(tái)，分析UI，用戶體驗(yàn)，用戶地圖，信息架構(gòu)和關(guān)鍵功能。但是我并不會(huì)花太多時(shí)間過(guò)于深入的去分析這些產(chǎn)品，因?yàn)槲蚁Ｍ麑⒅攸c(diǎn)放在Booking這個(gè)產(chǎn)品本身的訴求上。

使用場(chǎng)景

在之前的調(diào)研過(guò)程中，我發(fā)現(xiàn)了許多不同的使用場(chǎng)景，經(jīng)過(guò)匯總歸集，我集中關(guān)注以下3個(gè)場(chǎng)景：

• 場(chǎng)景1：用戶知道其行程的日期和目的地（默認(rèn)場(chǎng)景）
• 場(chǎng)景2：用戶明確了日期但對(duì)其旅行的目的地不清楚
• 場(chǎng)景3：用戶知道目的地但不確定其旅行日期

典型用戶

在進(jìn)一步的研究中，我明確了4位具有不同需求和不同目標(biāo)的典型用戶，這些數(shù)據(jù)對(duì)于改善不同用戶的體驗(yàn)非常有用。

這個(gè)分析的目的是通過(guò)梳理最佳的用戶流程并提升產(chǎn)品體驗(yàn)，來(lái)為不同需求的用戶提供最好的用戶體驗(yàn)。

△ 數(shù)據(jù)來(lái)源：在線研究和用戶訪談（30個(gè)用戶樣本）

用戶反饋

收集用戶評(píng)論，從中我收到了很多有價(jià)值的反饋，這些評(píng)論中沒(méi)有特別明確指出是可用性或功能性的問(wèn)題。我將這些反饋分為4類（譯者注：對(duì)反饋的問(wèn)題進(jìn)行提煉整理）：

• 預(yù)訂被取消
• App的Bug
• 投訴的處理效率
• 反饋的進(jìn)度

毫無(wú)疑問(wèn)，最相關(guān)的是預(yù)訂被取消的問(wèn)題。太多用戶會(huì)注意到不合理的費(fèi)用或與房間的主人取得聯(lián)系時(shí)遇到困難。

用戶訪談

基于30個(gè)用戶樣本，我試圖獲得進(jìn)一步的用戶反饋，從中注意到以下的幾點(diǎn)事實(shí)：

• 與其他平臺(tái)相比，booking的平均價(jià)格通常更高
• 產(chǎn)品過(guò)于突出好評(píng)，用戶很難發(fā)現(xiàn)一些真實(shí)的差評(píng)
• 當(dāng)房屋主人接收到用戶的回復(fù)時(shí)聯(lián)系用戶也很困難

我想引用一段話，來(lái)總結(jié)這里面遇到的問(wèn)題，這段話也蠻有意思的，它說(shuō)的是：

「與其他應(yīng)用比較來(lái)看，套路顯得有點(diǎn)多，會(huì)讓你覺(jué)得一切看起來(lái)都蠻劃算，總是想多賣一些東西給你?！?

用戶痛點(diǎn)

總結(jié)之前的分析，我提出了以下幾點(diǎn)觀點(diǎn)：

• 沒(méi)有一個(gè)完美的解決方案能夠滿足所有用戶，用戶需要盡可能多的掌握有用信息。
• 沒(méi)有的功能沒(méi)有太多考慮到個(gè)性化需求。
• 可以改進(jìn)UI并使用戶更加集中于他的目標(biāo)，而不是完全「以推銷為中心」
• 優(yōu)化用戶與房東之間的聯(lián)系問(wèn)題

解決方案

從用戶痛點(diǎn)出發(fā)，嘗試找到合適的解決方案，來(lái)提升產(chǎn)品體驗(yàn)。

1. 主頁(yè)

總的來(lái)說(shuō)，我對(duì)首頁(yè)進(jìn)行了大手術(shù)。主頁(yè)的搜索功能已經(jīng)完全重新設(shè)計(jì)，減少過(guò)多的干擾信息。

導(dǎo)航：我設(shè)計(jì)了一個(gè)新的導(dǎo)航欄，剝離出「已保存」功能，這樣用戶就可以快速找到自己所收藏的商品。此外，我也優(yōu)化了「交易」的模塊，后面我會(huì)詳細(xì)的說(shuō)說(shuō)這塊的改動(dòng)思路。

其它功能 :至于之前的版本，我保留了搜索和相關(guān)推薦的功能，重新設(shè)計(jì)界面以改善UI的可用性。

2. 社交功能

如今，社交網(wǎng)絡(luò)在用戶的生活中扮演重要的角色，那沒(méi)理由在booking中做的這么差。我搞了一個(gè)新功能，允許用戶關(guān)聯(lián)自己的好友并查看他們的選擇，包括他們的評(píng)價(jià)（喜歡/不喜歡）。我已將此功能放置到主頁(yè)的下方，因?yàn)槲蚁Ｍ趯⑵渫茝V到其他模塊之前收集更多有關(guān)它的數(shù)據(jù)。

3. 搜索功能

把這個(gè)功能分解為多個(gè)步驟。在輸入第一個(gè)詞后，即使沒(méi)有指定日期或其他信息，也能顯示相匹配的酒店。此外，我也加入了語(yǔ)音搜索，使搜索更容易。基于之前我對(duì)不同用戶角色的定義，搜索的結(jié)果將根據(jù)最后的信息進(jìn)行推薦：

• 1名成人 ——背包客 ——酒店
• 2名成人——度假夫婦——酒店，賓館或B＆B（某種酒店形式）
• 2名成人+兒童——家庭——民宿公寓或酒店
• 1名成人+商務(wù)選擇——商人——酒店

4. 列表頁(yè)面

列表頁(yè)針對(duì)易用性方面做了整體的優(yōu)化：

• 我將篩選功能從3個(gè)按鈕更改為2個(gè)按鈕以減少用戶的操作步驟——將它放在頁(yè)面底部，方便使用
• 我添加了標(biāo)簽功能來(lái)更好的區(qū)分屬性類型
• 在第一時(shí)間向用戶展示物業(yè)的主要設(shè)施特點(diǎn)。注意：根據(jù)不同的用戶，可以智能突出顯示不同人正在尋找的不同信息。
• 我將報(bào)價(jià)的方式轉(zhuǎn)換為「單晚」而不是「總價(jià)」，以便在不同商品之間進(jìn)行比較

5. 詳情頁(yè)

我列出許多可以在詳情頁(yè)面中加入的修改。將總價(jià)格突出顯示，以免有些隱形消費(fèi)用戶可能會(huì)被忽略。

增強(qiáng)了一個(gè)與評(píng)論相關(guān)的次要功能，允許用戶通過(guò)不同標(biāo)簽篩選它們。

6. 交易功能

在優(yōu)化開(kāi)始時(shí)，我確定了操作場(chǎng)景2—— 「用戶還不知道自己的目的地」作為優(yōu)化方向。為了提供更好的用戶體驗(yàn)，我增加了一個(gè)新的功能，用戶可以在其中找到不同目的地的區(qū)間。利用篩選功能，用戶可以選擇最適合其需求的區(qū)間（區(qū)間 – 大陸 – 國(guó)家等…）

動(dòng)效原型

最后，我還設(shè)計(jì)了一個(gè)整個(gè)項(xiàng)目的動(dòng)效原型，把之前所有重設(shè)計(jì)的頁(yè)面串聯(lián)起來(lái)。

結(jié)語(yǔ)

由于時(shí)間限制，分析和結(jié)果是基于我的個(gè)人經(jīng)驗(yàn)和少量數(shù)據(jù)，需要進(jìn)行深入分析和其他測(cè)試，以便完善和驗(yàn)證解決方案。

文章來(lái)源：優(yōu)設(shè)網(wǎng)