因?yàn)楹笈_(tái)是一個(gè)非常廣泛的且深?yuàn)W的東西，里面包含了太多的業(yè)務(wù)邏輯，而且每個(gè)產(chǎn)品面向的用戶群體又不同，因此不可能說(shuō)的面面俱到，但是我提煉的這七個(gè)步驟適用于大部分后臺(tái)的一個(gè)宏觀方向，對(duì)于一個(gè)沒(méi)有后臺(tái)項(xiàng)目經(jīng)驗(yàn)的人去從頭制作一款后臺(tái)產(chǎn)品應(yīng)該是非常有幫助的。

第一步：選擇導(dǎo)航板式

導(dǎo)航是后臺(tái)的主軀干，一切操作都需要在導(dǎo)航的指引下進(jìn)行切換，目前常用的有兩種導(dǎo)航，頂部導(dǎo)航與樹(shù)狀導(dǎo)航。

頂部導(dǎo)航板式

頂部導(dǎo)航是大多數(shù)Web端網(wǎng)站使用的導(dǎo)航模式，因?yàn)槿说拈喿x視覺(jué)是從上往下，從左往右，因此，頂部是視角最先達(dá)到的地方，頂部導(dǎo)航可以讓用戶快速了解整個(gè)網(wǎng)站的主要內(nèi)容結(jié)構(gòu)，通常在營(yíng)銷級(jí)官網(wǎng)，內(nèi)容瀏覽平臺(tái)被廣泛應(yīng)用（例如京東，阿里云，站酷...）。

但是其弊端也是很顯而易見(jiàn)的，因?yàn)槠聊粚挾鹊南拗?，在小屏下，頂部顯示文本內(nèi)容有限，通常只有幾個(gè)字符的內(nèi)容，更多內(nèi)容或二級(jí)標(biāo)題則需要進(jìn)行隱藏顯示。其次因?yàn)槿祟惿眢w結(jié)構(gòu)，成年人的頭顱約為4.5～5.5公斤，占據(jù)身體7.7%左右的重量，我們的頸椎承受了太多，因此人在左右扭頭時(shí)要比上下點(diǎn)頭更舒服。再者人類的眼睛是左右排布的，與生俱來(lái)兩邊的視線就優(yōu)于上下的視線，頂部導(dǎo)航如果需要高頻次使用的話會(huì)讓用戶非常的勞累。

優(yōu)點(diǎn)：節(jié)約空間、可以快速吸睛

缺點(diǎn)：顯示文本內(nèi)容有限，不符合人體工程學(xué)，不方便查找

樹(shù)狀導(dǎo)航板式

在很多生產(chǎn)力工具上，后臺(tái)網(wǎng)站上，B端產(chǎn)品上，閱讀軟件上，樹(shù)狀導(dǎo)航被廣泛運(yùn)用。樹(shù)狀導(dǎo)航是以父子層次結(jié)構(gòu)來(lái)組織對(duì)象的，其優(yōu)點(diǎn)非常顯著：兼容性強(qiáng)，結(jié)構(gòu)清晰，拓展性強(qiáng)等等。

先說(shuō)兼容性，因?yàn)槊織l導(dǎo)航標(biāo)題呈上下排布，因此一排只需顯示一條標(biāo)題，對(duì)于長(zhǎng)標(biāo)題與外文適配顯得格外的友好。樹(shù)狀導(dǎo)航具有良好的層次關(guān)系，每一層內(nèi)容都可以固定性的展示出來(lái)，不會(huì)像頂部導(dǎo)航必須鼠標(biāo)懸浮才會(huì)顯示子層級(jí)，不論是從便于梳理層次關(guān)系的角度來(lái)講，還是頻繁操作的簡(jiǎn)單化來(lái)說(shuō)是都是完勝于頂部導(dǎo)航的。因?yàn)榫W(wǎng)頁(yè)默認(rèn)是上下滑動(dòng)來(lái)查閱更多內(nèi)容的，因此樹(shù)狀導(dǎo)航的拓展性方面碾壓頂部導(dǎo)航，樹(shù)狀導(dǎo)航可以無(wú)限的向下拓展，就像書(shū)籍的目錄一樣，而頂部導(dǎo)航則只能顯示寥寥無(wú)幾的幾個(gè)單詞。

優(yōu)點(diǎn)：可以展示更多的標(biāo)題內(nèi)容、可以不限制標(biāo)題條數(shù)無(wú)限拓展、結(jié)構(gòu)清晰易懂

缺點(diǎn)：占據(jù)空間較大，對(duì)于小屏可能需要頻繁展開(kāi)、收起導(dǎo)航

第二步：統(tǒng)一模塊規(guī)則

后臺(tái)的主要功能是支撐前臺(tái)產(chǎn)品，管理資源，因此在邏輯與結(jié)構(gòu)的梳理上應(yīng)當(dāng)與前臺(tái)產(chǎn)品保持一致性，在布局的制定上應(yīng)當(dāng)遵循模塊化、響應(yīng)式、高效化的布局，以便于清晰地傳達(dá)信息。

在后臺(tái)的布局中，通常需要將數(shù)據(jù)統(tǒng)計(jì)、展示與列表、操作區(qū)分開(kāi)來(lái)，達(dá)到看歸看，做歸做的原則，如果混淆到一起就會(huì)大大的提升認(rèn)知難度和操作難度， 就像老款的汽車的儀表盤與中控操作區(qū)分開(kāi)來(lái)，用戶就會(huì)很快的上手，但是像特斯拉都集成在一塊屏幕上就會(huì)讓用戶傻傻分不清楚，一時(shí)間難以找到相應(yīng)的操作區(qū)域。因此模塊化在后臺(tái)則顯得格外重要，每個(gè)模塊、每個(gè)區(qū)域都應(yīng)當(dāng)賦予它獨(dú)特且自始至終不變的屬性，比如頂部的導(dǎo)航條，全局都在頂部區(qū)域展示，而不是這個(gè)頁(yè)面在頂部，下個(gè)頁(yè)面在底部。

導(dǎo)航模塊：

后臺(tái)的布局中，常用的模塊就是導(dǎo)航模塊（整個(gè)后臺(tái)功能的結(jié)構(gòu)提綱），總導(dǎo)航就是我在上文提到的兩種，頂部導(dǎo)航和樹(shù)樁導(dǎo)航，其他還有二級(jí)導(dǎo)航，面包屑導(dǎo)航等等，但是需要注意的是，導(dǎo)航就像路標(biāo)，起到指引用戶的作用，因此在全局的樣式與位置應(yīng)保持統(tǒng)一。

提醒模塊：

顧名思義就是提示用戶有新的消息，新的功能等等，提醒模塊十分重要，因?yàn)樗菍?shí)時(shí)性的，在設(shè)計(jì)提醒模塊時(shí)應(yīng)當(dāng)遵循全局化、機(jī)動(dòng)化，高亮化，動(dòng)態(tài)化的規(guī)則，在常規(guī)狀態(tài)下，提醒模塊應(yīng)該隱藏展示，不過(guò)多的打擾用戶，但是如果在需要出現(xiàn)時(shí)，不論用戶處于什么樣的場(chǎng)景，提醒模塊都應(yīng)該在第一時(shí)間出現(xiàn)，并以醒目的方式告知用戶。

數(shù)據(jù)統(tǒng)計(jì)模塊：

數(shù)據(jù)統(tǒng)計(jì)通常是作為后臺(tái)頁(yè)面頭部的存在，用戶一進(jìn)網(wǎng)站映入眼簾的就是整個(gè)產(chǎn)品或者整個(gè)項(xiàng)目的數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)是作為衡量某一件事情好壞的重要標(biāo)準(zhǔn)，數(shù)據(jù)也通?？梢哉f(shuō)明一個(gè)決策、一項(xiàng)任務(wù)的最終結(jié)果，在數(shù)據(jù)統(tǒng)計(jì)模塊的設(shè)計(jì)上應(yīng)該保持直觀，一針見(jiàn)血的設(shè)計(jì)方式，比如股票的K線圖，紅漲綠跌，一目了然。

快捷操作模塊：

有許多使用頻次非常高的功能可能會(huì)貫穿全局，比如谷歌Email，不論在哪個(gè)頁(yè)面，日期、Task功能都會(huì)在右側(cè)進(jìn)行顯示，方便用戶隨時(shí)添加待辦，記筆記等等。在后臺(tái)中，有很多時(shí)候一個(gè)小工具就可以提升很大的效率，不必在來(lái)回切換軟件、頁(yè)面，有很多情況下，我們看到了一個(gè)東西，聯(lián)想起了某一件事情，打算記錄下來(lái)，但是退出這個(gè)頁(yè)面再去打開(kāi)記事本的時(shí)候發(fā)現(xiàn)已經(jīng)忘記了（這該死的7秒記憶）。因此在有些情況下，縮短操作路徑是一個(gè)不錯(cuò)的選擇，而快捷操作模塊也同樣要遵循全局固定位置，不可隨意變動(dòng)的原則，如果違背，效果往往會(huì)適得其反。

內(nèi)容展示模塊：

信息展示，這個(gè)模塊應(yīng)該是最難搞定的了，不管是什么頁(yè)面，信息都是重中之重，沒(méi)有信息的頁(yè)面那和沒(méi)有肉的肉夾饃一樣。內(nèi)容展示模塊不同于以上的模塊是全局靜止的，內(nèi)容展示模塊承載了后臺(tái)95%以上的頁(yè)面量，每一個(gè)頁(yè)面都不同。因?yàn)楹笈_(tái)頁(yè)面大部分時(shí)間都是以電腦端網(wǎng)頁(yè)的形式呈現(xiàn)，人在看電腦時(shí)通常會(huì)和顯示器之間有30-50cm的距離，甚至可能更遠(yuǎn)，因此在內(nèi)容的展示模塊上應(yīng)當(dāng)給予友善的設(shè)計(jì)，比如加大文字之間的字間距，行間距，突出重要信息，以圖文并茂的形式將枯燥的信息情趣化，沒(méi)有內(nèi)容的模塊放置缺省提示圖。

操作模塊：

操作模塊通常是與內(nèi)容展示模塊共同存在的，兩者互相配合使用，凡是在頁(yè)面中涉及到可以點(diǎn)擊交互的區(qū)域統(tǒng)稱為操作模塊，操作模塊應(yīng)該全局統(tǒng)一視覺(jué)語(yǔ)言以及操作語(yǔ)言，比如，按鈕樣式及大小，開(kāi)關(guān)樣式，分頁(yè)器擺放位置及樣式等等。所有的操作模塊表意性要強(qiáng)，讓用戶可以快速明白點(diǎn)擊后的結(jié)果，如果遇到難以理解的操作功能，應(yīng)該配合圖標(biāo)使用并給予操作引導(dǎo)。

編輯模塊：

編輯模塊就是通常說(shuō)的表單填寫頁(yè)，編輯模塊擁有新建，上傳，輸入，選擇一系列的交互方式，其目的是為了讓用戶錄入信息內(nèi)容，因此在編輯模塊的設(shè)計(jì)中應(yīng)該按照相對(duì)應(yīng)的前臺(tái)項(xiàng)目理清順序，從頭至尾合理引導(dǎo)，引導(dǎo)語(yǔ)盡量簡(jiǎn)短并闡明要義。在操作的過(guò)程中，應(yīng)當(dāng)給予用戶清晰、及時(shí)的反饋，并給予用戶返回、撤銷、清空、保存等操作。在表單的設(shè)計(jì)中，盡量將信息進(jìn)行單行縱向排列，每一條信息各占一行，并保持信息對(duì)齊方式一致，保證用戶視線流暢舒適。

第三步：統(tǒng)一操作/交互方式

電腦端常見(jiàn)的操作方式：

1.左鍵單擊

鼠標(biāo)單擊是指鼠標(biāo)點(diǎn)擊UI控件后釋放點(diǎn)擊的一種交互行為，在整個(gè)過(guò)程中，用戶點(diǎn)擊和釋放的坐標(biāo)點(diǎn)是一致的，不可有移動(dòng)的行為，點(diǎn)擊是建立在懸浮動(dòng)作之后的。左鍵單擊是最常用的PC端交互方式，其作用是觸發(fā)某一操作，整個(gè)頁(yè)面由很多鏈接、控件組成，而鼠標(biāo)單擊則是觸發(fā)這些可被操作的控件。

2.鼠標(biāo)懸浮

Hover就是我們通常說(shuō)的鼠標(biāo)懸浮，當(dāng)用戶用鼠標(biāo)指針移過(guò)UI控件時(shí)，UI控件給予的反饋效果就是懸浮交互方式。懸浮的主要功能是「拓展」與「指示」。在很多情況下，我們的屏幕無(wú)法將更多的信息進(jìn)行展示時(shí)，通常會(huì)將眾多功能收納至一個(gè)控件當(dāng)中，而鼠標(biāo)懸浮則會(huì)觸發(fā)控件將其隱藏的功能進(jìn)行顯示。鼠標(biāo)懸浮的指示意義是為了讓我們更好的理解控件的屬性并提供及時(shí)反饋，比如將鼠標(biāo)懸浮在文字上，鼠標(biāo)會(huì)變成工字梁，將鼠標(biāo)懸浮在可點(diǎn)擊的控件上會(huì)變成小手表示可操作，懸浮至不可點(diǎn)擊控件上會(huì)變成問(wèn)號(hào)等等。

在實(shí)際的設(shè)計(jì)當(dāng)中，我們可以為鼠標(biāo)懸浮賦予更多的可能性，鼠標(biāo)懸浮可以將未完全展示的文字進(jìn)行展示，也可以對(duì)收納起的功能進(jìn)行展示，還可以進(jìn)行許多快捷預(yù)覽等等，但是鼠標(biāo)懸浮最重要的功能則是為用戶提供交互行為時(shí)的「及時(shí)反饋」。

3.右鍵單擊

自從計(jì)算機(jī)操作系統(tǒng)誕生后就為右鍵賦予了「系統(tǒng)菜單」的交互意義，在不同的場(chǎng)景下點(diǎn)擊右鍵所出現(xiàn)的內(nèi)容是不一樣的，這取決與網(wǎng)頁(yè)與應(yīng)用的開(kāi)發(fā)者，在網(wǎng)頁(yè)的設(shè)計(jì)中，將常用的快捷操作寫入右鍵菜單，會(huì)極大的提升工作效率，因?yàn)橛益I的菜單彈窗始終在鼠標(biāo)指針附近觸發(fā)，因此對(duì)于用戶尋找功能是非常友善的，但是需要注意的是右鍵的操作應(yīng)該全局統(tǒng)一，在同一套產(chǎn)品中，右鍵的內(nèi)容不應(yīng)該出現(xiàn)過(guò)多的功能，否則會(huì)對(duì)使用者造成困擾。

4.拖拽

拖拽，顧名思義就是鼠標(biāo)單擊某一文件不放進(jìn)行拖拽，拖拽操作相對(duì)與其他交互更具有操作感，因此在設(shè)計(jì)拖拽時(shí)，動(dòng)畫(huà)是一個(gè)必要的選擇，動(dòng)畫(huà)是表現(xiàn)交互給予反饋?zhàn)钪庇^最有趣的選擇，拖拽的動(dòng)畫(huà)最基礎(chǔ)的表現(xiàn)為被拖拽對(duì)象跟隨鼠標(biāo)進(jìn)行位移，而且松開(kāi)鼠標(biāo)后，文件的最終歸屬位置。拖拽常用與復(fù)制、移動(dòng)順序、上傳、下載文件的場(chǎng)景，相對(duì)與普通的多步驟點(diǎn)擊操作，拖拽所反饋的定位更加明確，可以大大縮短尋找目錄、尋找文件的時(shí)間。

第四步：制定布局體系

布局框架是一套產(chǎn)品的骨架和基礎(chǔ)。只有在框架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的構(gòu)建統(tǒng)一的視覺(jué)元素，清晰的功能操作，具體的交互流程等等。后臺(tái)產(chǎn)品是一個(gè)龐大的體系，除了對(duì)應(yīng)前臺(tái)產(chǎn)品的功能之外，還包括對(duì)產(chǎn)品部門的管理，產(chǎn)品相關(guān)的功能管理，不同身份對(duì)應(yīng)的權(quán)限管理等等，因此太過(guò)單一的布局形式并不能適用，因此我們?cè)谠O(shè)計(jì)后臺(tái)布局時(shí)應(yīng)該遵循簡(jiǎn)約化、統(tǒng)一化、規(guī)范化、拓展性強(qiáng)的原則。

對(duì)于擁有著眾多功能的后臺(tái)，我們應(yīng)該做到化繁為簡(jiǎn)，多而不亂，如果想做到這一點(diǎn)我們就應(yīng)該參考《簡(jiǎn)約至上》一書(shū)中所說(shuō)的簡(jiǎn)約四要素：刪除、組織、隱藏、轉(zhuǎn)移。

刪除

在iPhone的外觀設(shè)計(jì)上，喬幫主一直信仰「少即是多」，就是我們通常說(shuō)的做減法，這一偉大信仰在蘋果公司的產(chǎn)品上完美的體現(xiàn)了出來(lái)了，蘋果不論是線下門店還是官網(wǎng)、硬件、系統(tǒng)等等都將一切簡(jiǎn)約到了極致。用在我們的產(chǎn)品布局上，刪除就是將無(wú)用、重復(fù)的功能刪除，保留必要的功能，不要將和業(yè)務(wù)與用戶使用功能完全不相干的東西放在頁(yè)面上。

組織

組織的作用就是把業(yè)務(wù)相關(guān)的元素放一起，分個(gè)類，讓用戶可以更容易理解，比如有眾多的水果蔬菜，將水果放在一個(gè)籃子，將蔬菜放置在另一個(gè)籃子要比它們都混合放在一起更容易辨認(rèn)、查找。

人類喜歡規(guī)劃一切，喜歡井井有條的秩序，組織就是規(guī)劃，將整個(gè)頁(yè)面眾多的元素進(jìn)行規(guī)劃分類，把相關(guān)聯(lián)的元素模塊化，每個(gè)模塊之間應(yīng)該做好分割，分割包括：留白分割，分割線分割，模塊分割，Tab點(diǎn)擊分割，分割強(qiáng)度級(jí)從左至右越來(lái)越高。要注意的一點(diǎn)是組織存在爭(zhēng)議性，有的人他認(rèn)為番茄歸類為水果，而有的人認(rèn)為番茄應(yīng)該歸類為蔬菜，這辯論起來(lái)雙方似乎都有道理，所以在設(shè)計(jì)中，組織元素時(shí)應(yīng)該細(xì)細(xì)斟酌，對(duì)于這種墻頭草類型的功能，應(yīng)該謹(jǐn)慎處理，在了解用戶心智之后再做定義。

隱藏

隱藏是一種并不快捷的簡(jiǎn)約化的方案，隱藏通常是將使用頻次低的功能藏起來(lái)，等需要時(shí)再手動(dòng)調(diào)出使用，這些功能不常用但也并不代表沒(méi)用，比如設(shè)置頭像、名稱等等，隱藏可以讓頁(yè)面在視覺(jué)上更加輕量化，畢竟有限的空間還是要留給更重要的功能。

轉(zhuǎn)移

我們上學(xué)時(shí)做題，當(dāng)看到一道應(yīng)用題有足足幾百字，那我們下意識(shí)的想法就是，這題?的太難了，雖然還沒(méi)有開(kāi)始思考。但是人們的潛意識(shí)就是對(duì)看似復(fù)雜的東西排斥。在諾基亞還處在全鍵盤的時(shí)候，Android機(jī)還有三大金剛鍵的時(shí)候，iPhone就已經(jīng)簡(jiǎn)約到了只保留home鍵、音量鍵和開(kāi)機(jī)鍵，那么iPhone把其他所有的功能鍵都移除了，真的操作起來(lái)就簡(jiǎn)約了嗎，按照復(fù)雜度守恒定律來(lái)說(shuō)并沒(méi)沒(méi)有，復(fù)雜依舊存在，只不過(guò)是將原本學(xué)習(xí)按鈕的過(guò)程轉(zhuǎn)移到了去屏幕里交互的過(guò)程，但是這樣子更容易被人所接受，因?yàn)槭菍?duì)復(fù)雜進(jìn)行了分步引導(dǎo)操作，就像跑馬拉松，如果你目標(biāo)想著跑完全程，那么你多半半路就廢了，但是如果你把目標(biāo)變成每5公里為一段，分為八個(gè)小目標(biāo)那么你可以很輕松堅(jiān)持到終點(diǎn)，這就是一種魔力，因?yàn)槊總€(gè)人都不喜歡把自己搞得很累?；貧w至設(shè)計(jì)當(dāng)中，后臺(tái)是一個(gè)復(fù)雜的系統(tǒng)，功能可能多到眼花繚亂，但是如果將很多的步驟的一個(gè)流程分為眾多小步驟去合理引導(dǎo)，那么是否會(huì)更加的易于理解、便于操作呢，這就是轉(zhuǎn)移的用法。

動(dòng)靜態(tài)化布局

在制作后臺(tái)時(shí)，我們應(yīng)該遵循模塊化布局，并提前規(guī)劃好靜態(tài)模塊與動(dòng)態(tài)模塊。比如導(dǎo)航模塊、面包屑、按鈕等這些組件，在全局的位置應(yīng)該保持一致，這些就是靜態(tài)模塊，全局樣式與位置上不會(huì)出現(xiàn)過(guò)多變化。而動(dòng)態(tài)模塊一般就是內(nèi)容區(qū)域，因?yàn)闃I(yè)務(wù)與功能的不同，內(nèi)容模塊所展示的內(nèi)容是一定不同的，這一塊的內(nèi)容則是需要變化的。提前規(guī)劃靜態(tài)與動(dòng)態(tài)的布局在開(kāi)發(fā)方面可以節(jié)省代碼量與開(kāi)發(fā)成本，開(kāi)發(fā)只需要將靜態(tài)模塊寫成固定的組件就可以達(dá)到全局復(fù)用，快速修改的效果，在用戶方面也可以大大的節(jié)省用戶的學(xué)習(xí)成本，因?yàn)橛脩粼趯W(xué)習(xí)了靜態(tài)模塊之后，之后則只需要再去學(xué)習(xí)動(dòng)態(tài)模塊就可以，而不需要每個(gè)頁(yè)面、每個(gè)組件都要去進(jìn)行學(xué)習(xí)。

響應(yīng)式布局

因?yàn)楹笈_(tái)大多數(shù)情況都是在Pc端與Pad端使用，這兩個(gè)終端的屏幕沒(méi)有固定的尺寸，可能有4k屏，可能有1k屏，當(dāng)然還有可能是筆記本電腦所使用的更小尺寸，因此在設(shè)計(jì)時(shí)不能使用固定的設(shè)計(jì)稿尺寸，而應(yīng)該使用較小的橫屏設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作為設(shè)計(jì)稿尺寸，但是隨著科技的發(fā)展，目前市面上的屏幕最低都是1080p的屏幕了，因此在設(shè)計(jì)時(shí)可以使用橫向「1200px」與「1440px」的尺寸作為設(shè)計(jì)稿尺寸，最大不應(yīng)該超過(guò)1600px的尺寸。

定好尺寸之后，在設(shè)計(jì)時(shí)我們應(yīng)該以響應(yīng)式布局的思維去設(shè)計(jì)，什么是響應(yīng)式布局，通俗說(shuō)就是在屏幕變大的同時(shí)，頁(yè)面內(nèi)容會(huì)跟隨屏幕的變大而展示更多的內(nèi)容，需要注意的是：在屏幕變大的過(guò)程中，頁(yè)面的內(nèi)容應(yīng)該只會(huì)出現(xiàn)信息數(shù)量的變化與信息之間距離的變化，不應(yīng)該出現(xiàn)元素尺寸放大。在目前的設(shè)計(jì)中很多設(shè)計(jì)師喜歡使用柵格的設(shè)計(jì)方法，柵格布局具有易響應(yīng)、設(shè)計(jì)規(guī)范化等優(yōu)點(diǎn)，缺點(diǎn)就是可能會(huì)束縛設(shè)計(jì)師的發(fā)揮，在制作頁(yè)面時(shí)完全按照制定的柵格走，缺少了靈動(dòng)的感覺(jué)。雖然不見(jiàn)得要使用柵格布局法進(jìn)行設(shè)計(jì)，但是我們要了解柵格的原理，要使用柵格的思維去制作。

柵格就是將頁(yè)面劃分為不等的幾個(gè)模塊，可以是12個(gè)模塊，也可以是24個(gè)等等，每個(gè)模塊之間的間距使用固定的距離，叫做水槽，可以將這些模塊看做是參考線，水槽內(nèi)就是禁止區(qū)，我們?cè)谠O(shè)計(jì)時(shí)，將內(nèi)容設(shè)計(jì)在模塊內(nèi)，用水槽作為模塊之間的間距與留白使用，水槽只作為留白區(qū)域，不可以放置任何元素，最終開(kāi)發(fā)時(shí)，響應(yīng)式布局就是將模尺寸塊隨著屏幕寬度的變化而變化，而水槽則不動(dòng)，如果屏幕變窄，不足以放下一個(gè)模塊時(shí)，這是則將模塊下移至第二行，水槽依然是不變的。

懂得了水槽的原理，那么我們?cè)O(shè)計(jì)的時(shí)候就算不用固定的柵格方式去制作，頁(yè)面也不會(huì)出現(xiàn)太大的錯(cuò)誤。

看懂了柵格之后總結(jié)一下，這不就是說(shuō)一個(gè)模塊一個(gè)模塊的去設(shè)計(jì)么。沒(méi)錯(cuò)，在設(shè)計(jì)時(shí)我們就是將元素按模塊進(jìn)行設(shè)計(jì)，這里說(shuō)的模塊不單單是指灰背景與白色塊這樣的組合，元素之間使用排版四要素中的親密也可以哦，只要是視覺(jué)上看起來(lái)是一塊一塊的，就算沒(méi)有分割線、分割塊它依然算是一個(gè)模塊。

回到了響應(yīng)式布局，當(dāng)我們按模塊進(jìn)行設(shè)計(jì)后，那么響應(yīng)式布局就是毛毛雨了，開(kāi)發(fā)只需要在屏幕尺寸變寬的時(shí)候?qū)⒛K之間的距離拉大就可以了，這時(shí)就不是設(shè)計(jì)該去管的事情了。

總而言之就是，遵循響應(yīng)式布局的目的就是為了屏幕尺寸在不斷變化的同時(shí)，不會(huì)去影響改變內(nèi)容的整體觀感與體驗(yàn)，不會(huì)出現(xiàn)圖片拉伸，字體忽大忽小的情況。

間距

間距這個(gè)東西真是老生常談的事了，其實(shí)也沒(méi)什么太多說(shuō)的，但是這里還是去大致說(shuō)下，什么樣的間距比較合理，視覺(jué)上看起來(lái)比較舒服。

屏幕的分辨率都是以偶數(shù)為主，1600*900、1920*1080、2560*1440等等，因此我們?cè)谑褂瞄g距的時(shí)候最好使用偶數(shù)作為最小基數(shù)，然后其他間距以最小基數(shù)的倍數(shù)去制定，比如你最初制定的最小基數(shù)為2px，那么整套頁(yè)面的最小間距就使用2px，接著隨著間距的增大，就以2的偶數(shù)倍作為其他間距，比如2*2=4px、2*4=8px、2*8=16px等等，這樣做頁(yè)面不僅看起來(lái)比較規(guī)范，而且易于開(kāi)發(fā)，易于記憶，不容易出現(xiàn)鋸齒。

因?yàn)槲覀兊暮笈_(tái)產(chǎn)品通常是在電腦屏幕上使用的，電腦屏幕距離人眼的距離相對(duì)于手機(jī)較遠(yuǎn)，而且后臺(tái)產(chǎn)品業(yè)務(wù)種類繁多，功能錯(cuò)綜復(fù)雜，因此元素之間并不太適合過(guò)度擁擠，否則閱讀起來(lái)就像報(bào)紙一樣，難以辨認(rèn)，效率低下。而過(guò)大的留白又會(huì)導(dǎo)致展示的信息量少，出現(xiàn)信息密度不足的情況，同樣會(huì)導(dǎo)致閱讀效率下降，因此在間距上我們應(yīng)該取中度，這個(gè)中度的標(biāo)準(zhǔn)就是將一個(gè)24寸的顯示器放在距離眼睛50cm的地方，然后去看這個(gè)頁(yè)面的間距，兩個(gè)元素看起來(lái)剛好不會(huì)很擁擠的時(shí)候，差不多就是剛剛好的，為什么使用24寸的顯示器呢，因?yàn)?4寸的顯示器市場(chǎng)占有率較高，也是在日常環(huán)境中眼睛視線范圍內(nèi)看起來(lái)比較舒服的尺寸，比24存再小的顯示器大多數(shù)就是筆記本屏幕了。

元素之間的科學(xué)距離通常使用等分原則與五分原則，就是同一模塊的元素距離使用a，不同模塊之間的距離則使用2a。

總結(jié)一下就是層級(jí)相同的模塊之間保持相同的間距（等分原則），層級(jí)不同的模塊保持不同的間距（五分原則）。

場(chǎng)景驅(qū)動(dòng)間距

場(chǎng)景驅(qū)動(dòng)間距，聽(tīng)起來(lái)有點(diǎn)不易理解，其實(shí)是so easy的，舉個(gè)例子，當(dāng)你要去一個(gè)陌生的停車場(chǎng)找自己的車，你又不知道你車放哪的時(shí)候，這時(shí)，你最希望的就是來(lái)一架無(wú)人機(jī)，從航拍的角度去看所有車輛，然后看哪個(gè)像自己的車，在做決定。當(dāng)你找到你的車了，你要看看你車有沒(méi)有被剮蹭，油還多不多了，你就需要放下無(wú)人機(jī)，走到車前仔細(xì)觀看，而這時(shí)，整個(gè)停車場(chǎng)的布局什么的對(duì)你就沒(méi)什么太大意義了。

這回應(yīng)該很好理解了吧，找車就是信息檢索，找到車了進(jìn)去看車?yán)镉心居杏途褪莾?nèi)容閱讀。信息檢索，通常在后臺(tái)以列表的形式存在，且常常配合檢索功能（搜索、篩選、排序）等，這時(shí)檢索出的信息密度一定要大，因?yàn)橛脩粜枰诖竺芏刃畔⒅锌焖贋g覽，找到符合自己的東西，假如你要是在淘寶搜索一個(gè)襪子，結(jié)果一屏就顯示一條，你要瀏覽時(shí)，你還要來(lái)回翻頁(yè)，你是否會(huì)很崩潰呢？

而篩選出的內(nèi)容，這條內(nèi)容就是用戶千挑萬(wàn)選出來(lái)屬于他的精華，他會(huì)仔細(xì)查看這個(gè)信息的詳情，這時(shí)，我們要做的就是將留白加大，字間距加大，字號(hào)加大，讓他很舒服的把這個(gè)信息閱讀完成。還是上個(gè)例子，你淘寶搜索到了襪子，你要看看它的顏色，布料材質(zhì)，穿上臭不臭等，這時(shí)襪子的的詳情頁(yè)信息比報(bào)紙還要擁擠，還需要你用放大鏡才能看清，這時(shí)，你是否再次奔潰了呢。然后就直接關(guān)閉淘寶，前往京東查看了。。。

說(shuō)了這么多就是，用戶在進(jìn)行信息檢索時(shí)需要將間距適當(dāng)調(diào)小，在保證有效閱讀的條件下，盡量在一屏內(nèi)顯示更多的內(nèi)容，當(dāng)用戶篩選完成準(zhǔn)備閱讀內(nèi)容時(shí)，我們就要放大間距，最大的保證閱讀的舒適性。這只是其中的一條小例子，場(chǎng)景可能千千萬(wàn)，這就需要設(shè)計(jì)師自己動(dòng)腦去思考，去模擬了。

第五步：制定色彩體系

上帝說(shuō)：要有光??！而顏色就是我們對(duì)光產(chǎn)生的視覺(jué)效應(yīng)，目前我們?nèi)庋劭梢?jiàn)的顏色大約是100多萬(wàn)種，那么這么多種顏色，選什么色作為主要的色彩使用在頁(yè)面上呢，其實(shí)很簡(jiǎn)單，這么多顏色，我們只需要把色彩大致的分成：赤橙黃綠青藍(lán)紫這7個(gè)顏色就可以了，畢竟人類更注重的是全局觀，一個(gè)顏色，你稍微深一點(diǎn)，稍微淺一點(diǎn)，99%人都分辨不出來(lái)，畢竟大多數(shù)男性連口紅色都分辨不出來(lái)呢。

在色彩中，色彩有三個(gè)屬性：色相、明度、飽和度，這三個(gè)屬性只要我們了解了原理就可以手動(dòng)調(diào)色了，有人說(shuō)，手調(diào)的不準(zhǔn)確，不科學(xué)，那么如果你會(huì)寫色彩的算法，請(qǐng)略過(guò)此處，普通人還是手動(dòng)調(diào)調(diào)比較好，因?yàn)?，只要是掌握了色彩心理學(xué)，色感別太差，全局色彩統(tǒng)一，對(duì)于中小公司完全可用。

調(diào)色怎么調(diào)呢，第一看色相，色相決定的色彩的大方向，那么色相條中這么多顏色，用那個(gè)色相范圍好呢，這個(gè)就要看色彩心里學(xué)了，通常我們看到紅色想起什么？五星紅旗、黨、激情、慷慨激昂、股票大漲，那老外看到紅色呢，血腥、暴力、鬧鬼了，同樣一個(gè)紅色，咋國(guó)內(nèi)外差距這么大呢，這要說(shuō)的就多了，畢竟是歷史遺留問(wèn)題，政治問(wèn)題，生活傳統(tǒng)問(wèn)題等等，具體請(qǐng)參考度娘。。。除了紅色，還有橙黃綠青藍(lán)紫六種顏色呢，當(dāng)你看到其他的顏色你想到什么，那這就是色彩心理，因?yàn)槟闶裁炊紱](méi)干，就看個(gè)顏色就能腦補(bǔ)各種東西，有了各種感覺(jué)，色彩是不很神奇，沒(méi)錯(cuò)就是很神奇，不同的色彩對(duì)于不同的地域的人群，不同職業(yè)的人群，不同年齡的人群都會(huì)有不同的色彩心里，這個(gè)具體就不細(xì)說(shuō)了，知乎，百度一大堆相關(guān)研究。而我們要做的就是根據(jù)你的業(yè)務(wù)屬性和面對(duì)的相關(guān)人群，使用他們的色彩心里去制定你的色相，要是面對(duì)醫(yī)療行業(yè)，可能綠色是個(gè)不錯(cuò)的選擇，如果要是面對(duì)政府行業(yè)，或許紅色更討領(lǐng)導(dǎo)們喜歡。

確定好色相范圍了，那么接下來(lái)我們就需要再考慮考慮飽和度問(wèn)題了，飽和度是什么，愛(ài)修圖的女性朋友一定知道，色彩的飽和度越高，那顏色越鮮艷，飽和度越低，色彩越枯燥，飽和度為0，嗯沒(méi)錯(cuò)，50年前的電視機(jī)就沒(méi)有飽和度。在制定顏色的時(shí)候，飽和度往往決定了年齡屬性，一般年齡偏大的人不喜歡那花里胡哨的鮮艷，更喜歡柔和中性的顏色，年輕人更喜歡炫酷潮流的高飽和顏色，這么一說(shuō)你們應(yīng)該就恍然大悟了吧，年齡高的人群用低保和，年齡低的人用高飽和，對(duì)，也不全對(duì)，飽和度不只是和年齡掛鉤，也和產(chǎn)品的屬性掛鉤，就像蘭州拉面的門頭看上去貌似有點(diǎn)low，但是看蘋果的門頭，覺(jué)得好像挺高端，為什么呢，因?yàn)檫^(guò)重的飽和度給人親近感，但是相對(duì)來(lái)說(shuō)就少了高級(jí)感，低保和俗稱性冷淡風(fēng)，給你一種高級(jí)感，比如莫蘭迪色，飽和度較低的顏色會(huì)給人高級(jí)感，但會(huì)顯得不近人情，飽和度較高給人廉價(jià)感，但是更親民一些。

至于明度，就是顏色的亮度了，當(dāng)你調(diào)完色相和飽和度時(shí)，發(fā)現(xiàn)這個(gè)顏色貌似有點(diǎn)刺眼，那么你就把亮度調(diào)低點(diǎn)，如果發(fā)現(xiàn)有點(diǎn)看不清，那么你就把明度調(diào)高點(diǎn)，明度就是這樣子使用的吧~~~~

在使用顏色的同時(shí)還需要注意可視度，過(guò)淺顏色的按鈕放上白色的字，眼神不好是看不清的，具體對(duì)比度什么樣才算合理，請(qǐng)參考WCAG標(biāo)準(zhǔn)，能通過(guò)這個(gè)標(biāo)準(zhǔn)的，在可訪問(wèn)性上就沒(méi)問(wèn)題。

顏色舒適性

后臺(tái)，大部分情況是企業(yè)自己用，或者給客戶的幕后人員使用，相對(duì)于品牌色來(lái)說(shuō)或許更在乎顏色的舒適性，紅色波長(zhǎng)，通常用作警示，所以看起來(lái)就比較刺眼，藍(lán)色紫色波短，看起來(lái)就相對(duì)柔和，后臺(tái)也許是很多人日常高頻使用的工具，因此在舒適度上盡量要完美，舒適度包括較大的交互區(qū)域，合理的間距，基于人類視線的合理排版等等，這里我們只說(shuō)顏色，不同人對(duì)于顏色的感知是不同的，但是基于色彩心理來(lái)講，藍(lán)色給人冷靜理智安逸的感覺(jué)，因此，在大多數(shù)的后臺(tái)產(chǎn)品當(dāng)中，藍(lán)色作為主題色的居多。

最終總結(jié)一下，不管是選擇什么顏色作為主題色，一定要保證不能刺眼，否則對(duì)于長(zhǎng)時(shí)間使用的操作者來(lái)說(shuō)會(huì)是一個(gè)災(zāi)難性的問(wèn)題，可能輕者視疲勞，重者干眼癥青光眼。。。再者飽和度盡量不要過(guò)高，飽和度為：100是絕對(duì)不可以的，因?yàn)檫^(guò)于炫目的顏色會(huì)激起使用者的負(fù)面情緒，引起焦躁和不安的情緒，因此過(guò)高的飽和不可取。

第五步：制定文字體系

文字，是我們記錄信息的主要工具，在后臺(tái)頁(yè)面的設(shè)計(jì)中，我們不需要對(duì)字形進(jìn)行設(shè)計(jì)，只需要使用Web端常用的標(biāo)準(zhǔn)字體就可以。

文字還有許多其他的屬性，合理運(yùn)用屬性可以大幅的提高文字的閱讀效率。后臺(tái)的元素較為簡(jiǎn)約樸素，以文字為主，較少的圖形作為輔助元素，在整屏頁(yè)面的元素中，文字占據(jù)了大多數(shù)，那么如何體現(xiàn)出哪些信息重要，哪些信息次要，這時(shí)文字的字重屬性與字體尺寸屬性就可以完美的幫我們解決這個(gè)問(wèn)題。字重越重的字越有力量感，辨認(rèn)度越高，視覺(jué)重點(diǎn)越高，字重越輕的字體，給人文藝典雅高端的感覺(jué)，后臺(tái)算是B端產(chǎn)品，應(yīng)該是不大需要高端文藝的感覺(jué)的，引導(dǎo)視覺(jué)與可讀性更重要一些，因此我們常規(guī)下就使用標(biāo)準(zhǔn)Regular字重就可以，再輕的字體閱讀起來(lái)比較費(fèi)勁就沒(méi)必要再去使用了，而像標(biāo)題、主文案、按鈕這些文字，我們可以使用更重的字體與更大的尺寸來(lái)突出，將重點(diǎn)信息的層級(jí)拉開(kāi)，引起用戶的視覺(jué)注意。

當(dāng)整頁(yè)的閱讀信息較多時(shí)，我們需注意將文字適當(dāng)放大，正常情況下網(wǎng)頁(yè)的文字為14px，但是在大篇幅的連貫性文字出現(xiàn)時(shí)，我們應(yīng)該將文字的尺寸合理升至16px或者18px的大小，在行間距與字間距上也應(yīng)該適當(dāng)加大，那么行間距（行高）為多少比較適合呢，正常情況下我們使用sketch自帶的行高就可以，對(duì)于文字信息較多的情況下，我們使用1.2-1.8倍的行高就比較容易閱讀，在以閱讀為主的頁(yè)面中，比如文章閱讀頁(yè)、文檔頁(yè)這些情景下，使用1.5-2.5倍的行距更好，有人會(huì)說(shuō)1.5倍間距就已經(jīng)很大了，其實(shí)不然，當(dāng)你在長(zhǎng)時(shí)間閱讀信息的時(shí)候，越到后面閱讀效率越低，那么超大的行距可以有效緩解閱讀疲勞感，在長(zhǎng)時(shí)間閱讀的情況下也可以避免串行的問(wèn)題發(fā)生。

字體顏色也是一個(gè)需要注意的地方，通常我們?yōu)榱吮阌谟洃?，使用灰度色就可以，一般色值?222222、#333333、#666666、#999999、#CCCCCC這些，在一個(gè)頁(yè)面中，正文文字的顏色不應(yīng)該超過(guò)3種色值，通常為一個(gè)標(biāo)題色，一個(gè)文本色，一個(gè)輔助色，高亮色另說(shuō)。顏色的使用主要目的是為了凸顯信息，過(guò)多的使用顏色會(huì)給用戶造成有很多層級(jí)的錯(cuò)覺(jué)，導(dǎo)致層級(jí)混淆，頁(yè)面混亂。

第六步：提升趣味度

當(dāng)后臺(tái)產(chǎn)品的結(jié)構(gòu)與信息元素全部排版完成后，這時(shí)我們會(huì)發(fā)現(xiàn)，整個(gè)頁(yè)面除了文字和按鈕貌似沒(méi)有什么其他的東西了，確實(shí)，我們作為一個(gè)開(kāi)發(fā)人員看起來(lái)都倍覺(jué)單調(diào)，更不用說(shuō)每天使用我們產(chǎn)品的用戶了，更是枯燥的要死。有人說(shuō)，B端產(chǎn)品以效率為主，本身不就是枯燥的文字嘛，道理是這么個(gè)道理，但是作為開(kāi)發(fā)人員，讓用戶使用的開(kāi)心也是我們的一個(gè)任務(wù)，俗言道：一圖勝千言，假如我們要學(xué)習(xí)一段歷史，我相信比起來(lái)看書(shū)本上的文字，看電視劇的方式應(yīng)該更受人青睞吧，誰(shuí)都不喜歡全是文字的東西，客戶也是一樣的，因此我們應(yīng)該對(duì)頁(yè)面進(jìn)行適當(dāng)修飾，不應(yīng)該把頁(yè)面做成一個(gè)txt的文本文件。那么怎么去合理的修飾頁(yè)面呢，很簡(jiǎn)單，圖表化、圖形化。

什么是圖表化，簡(jiǎn)單解釋來(lái)說(shuō)就是將有規(guī)律的數(shù)據(jù)進(jìn)行分類總結(jié)，用適合此類數(shù)據(jù)的圖表進(jìn)行展示，舉個(gè)簡(jiǎn)單的例子，狗蛋想要去買股票，但是不知道買哪一只，于是想上網(wǎng)查一查最近5年每個(gè)公司的股票走勢(shì)，結(jié)果找到了兩份文件，一個(gè)是滿是文字的數(shù)據(jù)列表文檔，另一個(gè)是精美直觀的K線圖，那么你是狗蛋你會(huì)閱讀哪個(gè)呢，當(dāng)然去看k線圖了，畢竟3秒鐘就能知道個(gè)大概，如果看數(shù)據(jù)報(bào)表，眼花不說(shuō)，一上午都不見(jiàn)得能閱讀完。這時(shí)你就會(huì)發(fā)現(xiàn)圖表的魅力。

那么圖形化又是什么呢，依然很簡(jiǎn)單，就是將固定不變得字段圖標(biāo)化，將難以理解的字段插畫(huà)化。人天生對(duì)于圖形的識(shí)別能力就優(yōu)于文字，對(duì)那些靜態(tài)的字段給與圖標(biāo)的展示會(huì)大大提高用戶的識(shí)別效率，什么是靜態(tài)的字段呢？比如固定的按鈕、導(dǎo)航、目錄、設(shè)置等等，全局都長(zhǎng)那樣，不會(huì)因?yàn)榍袚Q場(chǎng)景而改變文字，這些就非常適合使用文字與圖標(biāo)相互配合來(lái)提升趣味度與辨識(shí)度了。

那么插畫(huà)化又是什么呢？說(shuō)白了就是將用戶懶得看的那些字配張圖，讀書(shū)時(shí)我們的課本都是圖文并茂的，那教育部就是怕學(xué)生光看文字產(chǎn)生厭倦導(dǎo)致不好好學(xué)習(xí)。同樣的道理，有很多情況下，用戶也懶的看文字，比如升級(jí)頁(yè)，升級(jí)功能信息那么多字，不如多放幾張圖來(lái)的實(shí)在，這也就是那些APP產(chǎn)品為什么都有引導(dǎo)頁(yè)的原因。

第七步：合理引導(dǎo)

當(dāng)你看到這一步的時(shí)候，說(shuō)明你的后臺(tái)已經(jīng)完成的差不多了，后臺(tái)是個(gè)極其復(fù)雜的系統(tǒng)，一個(gè)新手去學(xué)習(xí)使用一套后臺(tái)就像一個(gè)菜鳥(niǎo)去學(xué)習(xí)玩一款新游戲一樣，只不過(guò)游戲有我們的興趣驅(qū)動(dòng)，興趣是最好的老師，而后臺(tái)則不同了，學(xué)習(xí)使用后臺(tái)的那都是為了工作，興趣可就沒(méi)那么強(qiáng)了，如果恰恰碰到了做的很復(fù)雜的后臺(tái)，那客戶可能當(dāng)場(chǎng)崩潰，古有唐雎之怒，流血五步，今有員工之怒，當(dāng)場(chǎng)跑路，沒(méi)準(zhǔn)產(chǎn)品學(xué)不會(huì)，人家就辭職了。想想都覺(jué)得很嚴(yán)重，這時(shí)就體現(xiàn)出了合理引導(dǎo)的重要性，那么什么叫做合理引導(dǎo)呢？引導(dǎo)分為很多種，有新手引導(dǎo)、新功能引導(dǎo)、版本變更引導(dǎo)，操作流程引導(dǎo)等等，但是最終的目的是為了讓用戶快速學(xué)會(huì)使用你的產(chǎn)品。

新手引導(dǎo)：

可以使用視頻教學(xué)，文字教學(xué)，體驗(yàn)教學(xué)等等，具體怎么使用應(yīng)該根據(jù)自身的業(yè)務(wù)進(jìn)行分析，看看適合用哪種的方法。

新功能引導(dǎo)：

要多提示，可以是紅點(diǎn)提示，高亮提示，彈窗提示等，這塊的主要目的就是：要將新功能在什么位置、有什么功能告知用戶，別你功能去年就更新了，用戶今年還不知道呢~，這就尷尬了。

版本變更引導(dǎo)：

每個(gè)版本交互設(shè)計(jì)師，產(chǎn)品經(jīng)理，體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)等等一大堆人去探討，將舊版本不合理的功能升級(jí)，去除，換位置，合并等等，每動(dòng)一點(diǎn)，用戶都需要從新學(xué)習(xí)，因此當(dāng)版本變更導(dǎo)致操作習(xí)慣和之前不同時(shí)就要提示用戶最新的版本內(nèi)容，最重要的是要對(duì)比引導(dǎo)，舊版本怎么回事，新版本怎么回事，在這一塊可供參考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戲的大版本更新等等，他們甚至還會(huì)出一個(gè)專門的文檔來(lái)描述新舊版本更新對(duì)比。

操作流程引導(dǎo)：

顧名思義就是引導(dǎo)用戶完成某一套操作流程，就像LOL里，剛注冊(cè)游戲時(shí)，系統(tǒng)會(huì)引導(dǎo)你完成一局游戲，告訴你該點(diǎn)擊哪里進(jìn)行匹配，點(diǎn)擊哪里選英雄等等，這種引導(dǎo)通常是讓用戶在真實(shí)場(chǎng)景下邊操作邊引導(dǎo)，紙上得來(lái)終覺(jué)淺，須知此事要躬行嘛，身臨其境的體驗(yàn)才是快速學(xué)習(xí)的王道，這種的引導(dǎo)非常適用于操作步驟繁瑣的產(chǎn)品。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

概念簡(jiǎn)述 

視覺(jué)品牌這一概念，既陌生又熟悉。大部分ui設(shè)計(jì)師都或多或少做過(guò)視覺(jué)改版或者風(fēng)格升級(jí)，先來(lái)看兩個(gè)概念：視覺(jué)風(fēng)格&視覺(jué)品牌。

▲視覺(jué)風(fēng)格&視覺(jué)品牌重點(diǎn)偏向

風(fēng)格是藝術(shù)概念，是在整體上呈現(xiàn)的有代表性的一種面貌。風(fēng)格能反映時(shí)代、思想、審美等特性。也是設(shè)計(jì)師對(duì)審美獨(dú)特鮮明的理解。那么視覺(jué)品牌呢？它除了要體現(xiàn)產(chǎn)品本身特性，融入產(chǎn)品希望傳達(dá)的感受，也要思考什么對(duì)用戶有意義。研究視覺(jué)品牌，就是探索如何通過(guò)設(shè)計(jì)維護(hù)用戶對(duì)于產(chǎn)品的好感度 ，通過(guò)有共鳴的設(shè)計(jì)傳遞正能量，讓產(chǎn)品獲得最大的認(rèn)同。簡(jiǎn)單來(lái)說(shuō)：視覺(jué)風(fēng)格重點(diǎn)是設(shè)計(jì)師對(duì)審美的傳達(dá)；視覺(jué)品牌則是通過(guò)挖掘產(chǎn)品有價(jià)值的特點(diǎn)，創(chuàng)造有共鳴的視覺(jué)去打動(dòng)用戶，助力產(chǎn)品。

▲視覺(jué)品牌作用

了解完視覺(jué)品牌的概念，我們簡(jiǎn)單聊下它的作用。視覺(jué)品牌最大作用是建立用戶和產(chǎn)品的關(guān)系。vivo互聯(lián)網(wǎng)單個(gè)產(chǎn)品的視覺(jué)品牌也受vivo母品牌影響，不同業(yè)務(wù)被滲透的程度不同。比如vivo品牌對(duì)vivo官網(wǎng)，vivo商城影響比較大，但是對(duì)瀏覽器，i視頻，短視頻的影響就比較小。

流程

那么，如何定義好產(chǎn)品的視覺(jué)品牌？借企業(yè)文化里的一句話：做正確的事，并把事情做正確。在設(shè)計(jì)工作中，這句話也有一定的指導(dǎo)意義，我們先要確定是否要做視覺(jué)品牌，再用合理的流程規(guī)劃好每一步。

結(jié)合過(guò)往的業(yè)務(wù)經(jīng)驗(yàn)來(lái)看，對(duì)于已有視覺(jué)風(fēng)格的產(chǎn)品來(lái)說(shuō)，需要滿足以下兩個(gè)情況之一才是最適合做視覺(jué)品牌工作的時(shí)候：1、產(chǎn)品轉(zhuǎn)型、重大業(yè)務(wù)調(diào)整（包括用戶人群、需求變化等）；2、與相關(guān)行業(yè)設(shè)計(jì)語(yǔ)言水準(zhǔn)差距巨大。另外需要考慮的還有時(shí)間安排，由于整個(gè)流程耗時(shí)需要大約12周（3個(gè)月），所以設(shè)計(jì)師前期就要做好時(shí)間規(guī)劃。

確定要做視覺(jué)品牌工作后，需要準(zhǔn)備哪些資料？項(xiàng)目環(huán)節(jié)和流程如何？讓我們來(lái)看下這12周需要做的事情和基本順序：

▲視覺(jué)品牌的流程

我們接下來(lái)會(huì)重點(diǎn)介紹流程中關(guān)鍵的8個(gè)步驟（圖標(biāo)標(biāo)藍(lán)色的step1～8）：1、品牌定位資料熟悉 2、明確視覺(jué)品牌關(guān)鍵詞 3、關(guān)鍵詞發(fā)散和可視化 4、提取元素建立視覺(jué)符號(hào) 5、完善主要頁(yè)面 6、驗(yàn)證視覺(jué)風(fēng)格喜好 7、完成所有頁(yè)面的視覺(jué)效果 8、整理成視覺(jué)品牌規(guī)范手冊(cè)。

1 、品牌定位資料熟悉

大部分項(xiàng)目的產(chǎn)品，運(yùn)營(yíng)和用研角色會(huì)提前做一些品牌定位的工作（品牌屋），品牌屋有助于我們對(duì)產(chǎn)品各方面進(jìn)行解讀。這類資料一般我們都可以獲得，設(shè)計(jì)師可以從中了解到目前我們產(chǎn)品全面信息，包括：產(chǎn)品形象、調(diào)性、核心價(jià)值觀等。我們需要的關(guān)鍵信息：產(chǎn)品關(guān)鍵詞就可以從中找到。如果品牌屋資料不夠明確或者設(shè)計(jì)師對(duì)確定的詞匯抱有疑問(wèn)，我們還可以通過(guò)工作坊形式，邀請(qǐng)項(xiàng)目核心成員進(jìn)行腦暴會(huì)議，討論出合適的詞語(yǔ)。

▲案例：vivo瀏覽器品牌屋

圖中為瀏覽器品牌屋資料案例，經(jīng)過(guò)項(xiàng)目成員討論，瀏覽器產(chǎn)品最終關(guān)鍵詞：智慧、有趣、默契、可靠、年輕。

2、 明確視覺(jué)品牌關(guān)鍵詞

然后，從產(chǎn)品關(guān)鍵詞里，我們需要選出符合產(chǎn)品定位又能達(dá)到受眾心理預(yù)期的視覺(jué)品牌關(guān)鍵詞，聚焦產(chǎn)品的視覺(jué)調(diào)性。視覺(jué)關(guān)鍵詞一般有2～5個(gè)，需要視覺(jué)專業(yè)團(tuán)隊(duì)、項(xiàng)目相關(guān)人員、核心用戶一起來(lái)挑選，用戶的選擇可以放在問(wèn)卷里進(jìn)行，通過(guò)快速測(cè)試了解用戶對(duì)產(chǎn)品的視覺(jué)感受和期待。如果確定的視覺(jué)品牌關(guān)鍵詞比較多，可以適當(dāng)確立1～2個(gè)核心視覺(jué)詞匯，便于聚焦后期的風(fēng)格指導(dǎo)。

▲明確視覺(jué)品牌關(guān)鍵詞

選擇標(biāo)準(zhǔn)有兩條：1、延展性高，有一定視覺(jué)可視化潛力：詞匯要抽象化，不能過(guò)于具體，一般都是描述情緒，氣氛，氛圍或者感受之類的。2、貼合公司品牌文化：追求樂(lè)趣、充滿活力、專業(yè)音質(zhì)、極致影像、愉悅體驗(yàn)、敢于追求極致、持續(xù)創(chuàng)造驚喜。

3、 關(guān)鍵詞發(fā)散和可視化

發(fā)散

視覺(jué)品牌關(guān)鍵詞選定后，在繪制可視化的情緒版之前，還差一步，就是針對(duì)選出來(lái)的詞進(jìn)行發(fā)散。做這一步的目的是希望設(shè)計(jì)師的思維能夠盡可能打開(kāi)，收獲更大范圍的靈感和思考。我們通過(guò)三層映射方式，分別對(duì)2~5個(gè)視覺(jué)品牌關(guān)鍵詞進(jìn)行發(fā)散收獲大量衍生詞。（圖中以詞語(yǔ)“友好”為案例，分別進(jìn)行物化、心境、視覺(jué)映射出大量衍生詞語(yǔ)。）

▲三層映射案例：詞語(yǔ)友好

在大量衍生詞里，我們還要經(jīng)過(guò)一輪討論篩選，去掉不合適的詞語(yǔ)。主要看衍生詞和我們的視覺(jué)關(guān)鍵詞的關(guān)聯(lián)度是否足夠高，以及是否適合用視覺(jué)語(yǔ)言表達(dá)等。

如果項(xiàng)目沒(méi)有做品牌相關(guān)的工作，沒(méi)有產(chǎn)品關(guān)鍵詞，那我們前3步驟怎么辦？遇到這種情況，我們要怎么深入下去？當(dāng)然，你可以嘗試推進(jìn)項(xiàng)目去做一下品牌屋，這對(duì)各個(gè)角色在產(chǎn)品認(rèn)知上有很大的幫助。其實(shí)還有一個(gè)工具方法能夠幫助我們較好的完成各類關(guān)鍵詞提取。(Design O to O 主要是察覺(jué)用戶情感化的一個(gè)工具，工具里得出該類別情感相關(guān)詞匯和我們想要得出的視覺(jué)品牌關(guān)鍵詞概念非常接近，所以推薦作為遇到這類情況的解決方法。)

▲Design OtoO方法 

這套工具方法的核心步驟分別是：收集，組織，反應(yīng)，評(píng)估。每一步都有一些工具模型可以套用，能夠較準(zhǔn)的幫助大家達(dá)到目標(biāo)，找出合適的關(guān)鍵詞。

可視化

前面我們得出篩選后的衍生詞，是為了之后可以做出更全面、精準(zhǔn)的可視化情緒版。很多設(shè)計(jì)師在情緒版制作上比較隨意，這里也給大家一些我們團(tuán)隊(duì)常用來(lái)搭建情緒版的方式。一般我們將收集的圖片依照3個(gè)維度（人物、場(chǎng)景、物體）進(jìn)行歸納整理，這樣共性的東西更容易被發(fā)現(xiàn)。當(dāng)然，拼貼整理的方式很多種，也包括常見(jiàn)的任意拼貼、參考式拼貼和精致化拼貼。大家可以多試一些平時(shí)不怎么用的維度進(jìn)行拼接，也許會(huì)帶來(lái)不一樣的靈感。

▲情緒板拼貼常用方法

4、 提取元素建立視覺(jué)符號(hào)

每個(gè)情緒版帶來(lái)的設(shè)計(jì)靈感都不相同，所以最終會(huì)有多個(gè)視覺(jué)符號(hào)方案。第四個(gè)step就是來(lái)解說(shuō)如何從單個(gè)的情緒版里提取視覺(jué)符號(hào)的特征。

▲組成視覺(jué)語(yǔ)言最基本的五個(gè)維度

“形色字構(gòu)質(zhì)”是組成視覺(jué)語(yǔ)言最基本的五個(gè)維度，當(dāng)你描繪一個(gè)東西的樣子時(shí)，你通常會(huì)從這五個(gè)維度去闡述。所以，我們也從5個(gè)維度來(lái)提取視覺(jué)符號(hào)的特征。需要注意：五個(gè)維度不一定需要全部進(jìn)行提煉，有時(shí)候遇到前期已經(jīng)確定的就可以直接拿來(lái)用，也有的不涉及的，比如字體可能在部分圖標(biāo)里沒(méi)有出現(xiàn)也就不需要提煉。讓我們來(lái)對(duì)色彩、圖形、字體、質(zhì)感、構(gòu)成這5個(gè)維度來(lái)細(xì)細(xì)展開(kāi)：

(1) 色彩

▲快捷工具Dopelycolor對(duì)圖片進(jìn)行色彩分析

色彩提取常規(guī)是可以從情緒版里找出的，最簡(jiǎn)單的辦法就是找出占比高的色彩并判斷選擇。這里分享一個(gè)快捷工具Dopelycolor ，能快速讓你提取圖片中顏色，以及占比，讓你清晰的了解圖片用色情況。

▲提煉色彩需要重要關(guān)注4點(diǎn)

需要注意的有以下幾點(diǎn)：1、已有的品牌色是否要延續(xù)使用 2、選中顏色需要后期調(diào)整三元素，達(dá)到最好的視覺(jué)效果  3、如果有輔色，主輔色多結(jié)合色環(huán)考慮合理性 4、你選的顏色是不是和市面競(jìng)品太過(guò)雷同，是否要做點(diǎn)差異化？

(2) 圖形

對(duì)于我們大多數(shù)產(chǎn)品目前現(xiàn)狀，符號(hào)基礎(chǔ)圖形是不宜變動(dòng)的。大環(huán)境也是如此，例如很大一部分視頻類應(yīng)用圖標(biāo)都圍繞播放三角展開(kāi)。因?yàn)樽兓瘯?huì)引起用戶新的理解，可能會(huì)帶來(lái)識(shí)別和理解的成本，所以項(xiàng)目設(shè)計(jì)師在方案的設(shè)計(jì)階段，會(huì)多做幾個(gè)保守的常用圖形相關(guān)方案。

另外，在沒(méi)有基礎(chǔ)圖形的產(chǎn)品品牌中，通常需要通過(guò)腦暴會(huì)去討論出適合產(chǎn)品的符號(hào)基礎(chǔ)形態(tài)。例如vivo積分商城在視覺(jué)品牌探索階段，組織腦暴會(huì)議，邀請(qǐng)項(xiàng)目中各個(gè)關(guān)鍵角色一起來(lái)發(fā)散討論適合積分產(chǎn)品的貨幣符號(hào)圖形（這也是積分定義的視覺(jué)品牌符號(hào)）

▲vivo積分商城貨幣符號(hào)發(fā)散腦暴會(huì)現(xiàn)場(chǎng)

基礎(chǔ)圖形獲取方法介紹完了后，圖形的藝術(shù)表達(dá)，也就是圖形設(shè)計(jì)是需要我們通過(guò)情緒版或者常用創(chuàng)意手法來(lái)捕捉的。通過(guò)情緒版，我們可以提取出零碎的一些特征，這些通過(guò)觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有：描邊圖形、線面結(jié)合等。另一張能看出的有：大圓角、簡(jiǎn)單幾何、Q型。

▲情緒板圖片提取共性特征

特征好提取，但是如何去用于輸出我們的視覺(jué)品牌符號(hào)，這塊就依賴各位設(shè)計(jì)師的設(shè)計(jì)表達(dá)了。到這一步，建議參與的設(shè)計(jì)師們進(jìn)行視覺(jué)比稿。比稿的設(shè)計(jì)師們可以看一看常用的6種創(chuàng)意設(shè)計(jì)手法，這些創(chuàng)意手法都是較常見(jiàn)的，在設(shè)計(jì)中協(xié)助我們創(chuàng)意的迸發(fā)。

▲6種常見(jiàn)圖形創(chuàng)意手法

(3) 文字

嚴(yán)格意義上，符號(hào)里的文字也是圖形的一種。不過(guò)，針對(duì)用文字來(lái)做的符號(hào)，可以參考字體創(chuàng)意設(shè)計(jì)的10個(gè)方法。這里不一一闡釋含義了，大家可以在網(wǎng)上找到更多每一類圖形的案例和應(yīng)用解說(shuō)。

▲10種常見(jiàn)字體創(chuàng)意設(shè)計(jì)方法

(4) 質(zhì)感

如果要進(jìn)行質(zhì)感的提煉和確定，除了從情緒版里能夠找到一些共性的東西以外，也可以多在流行趨勢(shì)、設(shè)計(jì)網(wǎng)站材質(zhì)圖形相關(guān)專題里，去嘗試獲取思路。在設(shè)計(jì)方案階段，可以多去嘗試不同的設(shè)計(jì)質(zhì)感。

▲質(zhì)感素材專題

(5) 構(gòu)成

構(gòu)成通常會(huì)用在版式，招貼之類的平面設(shè)計(jì)中。很多產(chǎn)品標(biāo)志在構(gòu)成上都很講究，圖標(biāo)的內(nèi)容和留白比例搭配合理，具備設(shè)計(jì)舒適感。我們?cè)谧龇?hào)設(shè)計(jì)時(shí)候，同樣要非常關(guān)注構(gòu)成，好的構(gòu)成會(huì)讓我們的符號(hào)更具魅力。常用的圖形構(gòu)成有9種，我們?cè)谧鰣D形時(shí)候可以多去嘗試，也可以疊加嘗試，找到適合的構(gòu)成樣式。

▲9大圖形構(gòu)成

案例

回到視覺(jué)符號(hào)提煉的5大維度方法，我們來(lái)看下vivo瀏覽器是如何提煉視覺(jué)品牌符號(hào)的。由于不同設(shè)計(jì)師整理的情緒版，方案都不一樣，接下來(lái)來(lái)看瀏覽器視覺(jué)品牌探索眾多方案其中的一個(gè)例子。

▲視覺(jué)符號(hào)提煉的5大維度

首先來(lái)看下瀏覽器目前一些背景設(shè)定，去除既定的情況，我們需要在這幾個(gè)方面找尋特征（輔色、圖形藝術(shù)、質(zhì)感、構(gòu)成），來(lái)完成我們的視覺(jué)符號(hào)。

▲vivo瀏覽器背景設(shè)定

在這個(gè)方案中，設(shè)計(jì)師從情緒版提取了想要的特征（圖片中藍(lán)色文字）：

顏色：從情緒版提出占比較高的顏色，歸納成色組，在色環(huán)中逐一討論去留，去除對(duì)比強(qiáng)烈的黃色（因?yàn)闉g覽器作為工具類產(chǎn)品并不想傳達(dá)出刺激，沖突，過(guò)于活力的感受，故去除。）在鄰近色（青色、皮粉色）里考慮避開(kāi)性別因素，青色更加適合。然后調(diào)整一下rgb，飽和度提高一些。

圖形藝術(shù)：延續(xù)地球元素，情緒版提煉的：大圓角、簡(jiǎn)單幾何、Q型，描邊圖形，線面結(jié)合。

質(zhì)感：瀏覽器在先前資料收集的時(shí)候就有傾向，考慮近兩年手機(jī)背面AG磨砂玻璃廣泛使用，界面上蘋果和微軟也整體設(shè)計(jì)轉(zhuǎn)向毛玻璃風(fēng)格，關(guān)于這類品質(zhì)感和空間感明顯的處理方式，瀏覽器設(shè)計(jì)師也想進(jìn)行嘗試。

構(gòu)成：結(jié)合情緒版和圖形構(gòu)成9個(gè)方法，提取并運(yùn)用的主要特征是動(dòng)勢(shì)，也是想賦予符號(hào)活力感受。

最后，經(jīng)過(guò)草稿比稿，評(píng)審?fù)ㄟ^(guò)的方案和確定的符號(hào)5個(gè)特征如下：

▲vivo瀏覽器符號(hào)的5個(gè)特征

5、 完善主要頁(yè)面

視覺(jué)品牌符號(hào)完成以后，接下來(lái)需要繼續(xù)繪制與符號(hào)強(qiáng)關(guān)聯(lián)的頁(yè)面。這些模塊有：loading、缺省、核心頁(yè)面、插畫(huà)插圖場(chǎng)景。不是把視覺(jué)品牌符號(hào)簡(jiǎn)單的原封不動(dòng)放在各個(gè)頁(yè)面里，而是通過(guò)一些設(shè)計(jì)手法將它更好的融入在頁(yè)面中。

通常，核心頁(yè)面模塊的視覺(jué)呈現(xiàn)，都是基于已定的視覺(jué)品牌符號(hào)特征去發(fā)散。目前我們團(tuán)隊(duì)有兩種不同的思路：一個(gè)是從先前符號(hào)里提取主要某個(gè)特征并結(jié)合場(chǎng)景做出版式布局的延展。類似我們做vi時(shí)候常用取logo的一部分進(jìn)行圖形組合再創(chuàng)意。另一個(gè)是將已定符號(hào)的不同特征進(jìn)行多個(gè)組合，創(chuàng)作出符合這些特征的衍生的新視覺(jué)。

瀏覽器用的第二種方法，提取出的符號(hào)特征和定好繪制要求，其中為了保持整體風(fēng)格的一致性，需要繪制的模塊特征應(yīng)不少于一半目前特征（滿足1/2)，如果有新增的特征需要保持和諧，不應(yīng)該有其它明顯的風(fēng)格傾向。這個(gè)也是用來(lái)檢查你做的系列衍生效果是否整體的標(biāo)準(zhǔn)。經(jīng)常有同學(xué)做了一個(gè)很好看的缺省圖，但是風(fēng)格特征與已定視覺(jué)符號(hào)風(fēng)格相差甚遠(yuǎn)，最后導(dǎo)致不能使用。

下面是vivo瀏覽器視覺(jué)品牌符號(hào)延展的圖形或頁(yè)面樣式：

▲缺省圖樣式（6/8特征）

▲裝飾icon圖樣式（4/8特征）

▲特殊彈出層樣式（4/8特征）

▲視頻操作引導(dǎo)樣式（4/8特征）

▲應(yīng)用在整體頁(yè)面效果

看完瀏覽器的符號(hào)延展方法，再來(lái)感受下另一個(gè)方法：通過(guò)符號(hào)，延展多個(gè)版式視覺(jué)的案例——短視頻視覺(jué)品牌探索。項(xiàng)目設(shè)計(jì)師主要對(duì)視覺(jué)品牌符號(hào)圖形特征做了延展，局部提煉并創(chuàng)新版式。

下圖是短視頻視覺(jué)品牌符號(hào)，基于此為基礎(chǔ)型，設(shè)計(jì)師根據(jù)總結(jié)的6種手法，用對(duì)稱、平移 等方式進(jìn)行拓展，結(jié)合頁(yè)面實(shí)際情況完成。

▲短視頻品牌符號(hào)以及圖形應(yīng)用解說(shuō)

▲短視頻品牌符號(hào)頁(yè)面背景應(yīng)用

▲ 物料拓展概念

6、驗(yàn)證視覺(jué)風(fēng)格喜好

完成主要頁(yè)面后，我們會(huì)進(jìn)行風(fēng)格測(cè)試，用來(lái)驗(yàn)證不同的設(shè)計(jì)方案在用戶眼里的喜好程度，從而修正設(shè)計(jì)師的認(rèn)知偏差。我們建議至少完成3個(gè)視覺(jué)品牌符號(hào)方案和對(duì)應(yīng)3套頁(yè)面來(lái)供用戶測(cè)試。

關(guān)于風(fēng)格測(cè)試，是將已有的方案通過(guò)問(wèn)卷和簡(jiǎn)單的線下訪談，得出用戶的喜好結(jié)論。因?yàn)槭敲艚轀y(cè)試，只需要一周就可以出結(jié)論。在這一步，有5條測(cè)試重點(diǎn)和對(duì)應(yīng)解讀需要設(shè)計(jì)師關(guān)注，具體內(nèi)容參考下圖：

▲5條測(cè)試重點(diǎn)與解讀

目前vivo瀏覽器和i視頻都在視覺(jué)品牌升級(jí)時(shí)候，運(yùn)用了這個(gè)較為敏捷的測(cè)試方法。

▲i視頻視覺(jué)品牌3套方案風(fēng)格測(cè)試復(fù)盤

▲vivo瀏覽器視覺(jué)品牌升級(jí)核心頁(yè)面風(fēng)格測(cè)試

7、完成所有頁(yè)面的視覺(jué)效果

經(jīng)過(guò)用戶的驗(yàn)證和后期修改，我們確定好了唯一的一套最合適的視覺(jué)品牌。在設(shè)計(jì)組內(nèi)部評(píng)審+項(xiàng)目組核心成員評(píng)審效果通過(guò)后，接下來(lái)工作就是按部就班的去完成后續(xù)頁(yè)面的規(guī)劃和落地。這一環(huán)節(jié)的工作體量較大，需要花時(shí)間去梳理替換所有頁(yè)面。整體t替換預(yù)計(jì)耗時(shí)需要2周左右，建議多些成員參與完成。

8、 整理成視覺(jué)品牌規(guī)范手冊(cè)

最后一步也是最重要的一步，需要把視覺(jué)品牌的設(shè)計(jì)指導(dǎo)和規(guī)范進(jìn)行沉淀。視覺(jué)品牌規(guī)范手冊(cè)是需要項(xiàng)目組設(shè)計(jì)師一起維護(hù)的。好的設(shè)計(jì)語(yǔ)言是第一步，維護(hù)和讓其發(fā)揮最大價(jià)值（原則、一致性、效率）是視覺(jué)品牌規(guī)范手冊(cè)的意義。

▲視覺(jué)品牌規(guī)范手冊(cè)4大模塊

目前我們已經(jīng)梳理出vivo瀏覽器、短視頻的視覺(jué)品牌規(guī)范手冊(cè)。內(nèi)容包括4個(gè)部分：品牌概述、品牌符號(hào)、視覺(jué)語(yǔ)言、物料規(guī)范。對(duì)產(chǎn)品的視覺(jué)品牌理解和如何應(yīng)用會(huì)完整的體現(xiàn)在手冊(cè)里，建議每一個(gè)參與項(xiàng)目設(shè)計(jì)師都應(yīng)該在設(shè)計(jì)前先整體看一遍。

結(jié)語(yǔ)

視覺(jué)品牌的定義流程以及方法，是我們團(tuán)隊(duì)資深ui設(shè)計(jì)師第三季度重點(diǎn)研究和探索的產(chǎn)物。希望能給正在做視覺(jué)品牌相關(guān)工作的設(shè)計(jì)師帶來(lái)一些幫助和啟發(fā)，如果有建議或者疑問(wèn)，歡迎通過(guò)VMIC UED公眾號(hào)和我們交流，讓我們一起優(yōu)化好這個(gè)視覺(jué)品牌定義體系，為用戶創(chuàng)造更好的視覺(jué)體驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

最近在整理系統(tǒng)的組件規(guī)范，收集各個(gè)場(chǎng)景下的組件應(yīng)用，在搜集應(yīng)用控件時(shí)，彈窗的套用、混用、亂用情況挺多的。

主要是模態(tài)框和非模態(tài)框的使用。

模態(tài)框：一般會(huì)有一層黑色透明的蒙板，它打斷用戶所屬的主流程，不能進(jìn)行下去，只能到完成模態(tài)框的操作，才能返回到主流程中去，這個(gè)操作很明確，不會(huì)被誤解；

非模態(tài)框：一般沒(méi)有那一層蒙板，不會(huì)影響所屬的主流程，也不用擔(dān)心原有進(jìn)度會(huì)停止，仍然可以持續(xù)操作。即打開(kāi)非模態(tài)也能看見(jiàn)底層的主流程。

概述

模態(tài)or 非模態(tài)，統(tǒng)稱為彈窗。樣式上可以理解為類似卡片，能夠幫助用戶快速定位獲取關(guān)鍵信息和進(jìn)行操作，它的內(nèi)容是靈活的，一般情況下包含文字、圖標(biāo)、按鈕。彈窗的設(shè)計(jì)是給用戶傳遞與當(dāng)前場(chǎng)景需要的操作相關(guān)的內(nèi)容。

      你是不是經(jīng)常感覺(jué)自己在項(xiàng)目組里沒(méi)有發(fā)言權(quán)，發(fā)了言也不被重視，想做的設(shè)計(jì)也落地不了。尤其是做到運(yùn)營(yíng)相關(guān)的設(shè)計(jì)時(shí)，感覺(jué)設(shè)計(jì)價(jià)值微弱。那么我今天來(lái)說(shuō)一下如何通過(guò)設(shè)計(jì)驅(qū)動(dòng)運(yùn)營(yíng)價(jià)值最大化。作為UED我們并不是單純的只負(fù)責(zé)活動(dòng)的美化，而是作為全鏈路的體驗(yàn)設(shè)計(jì)師，把活動(dòng)運(yùn)營(yíng)當(dāng)做一個(gè)產(chǎn)品項(xiàng)目對(duì)待。從業(yè)務(wù)開(kāi)始跟蹤，明確目標(biāo)、建議方案、優(yōu)化體驗(yàn)鏈路、優(yōu)化數(shù)據(jù)策略等不同階段做出設(shè)計(jì)價(jià)值。我們的投入初見(jiàn)成效，以下是我這段時(shí)間的總結(jié)，分享給大家，希望能給大家?guī)?lái)新的思路。

一、明確活動(dòng)業(yè)務(wù)目標(biāo)

1.1 活動(dòng)目標(biāo)

運(yùn)營(yíng)活動(dòng)（Operating activities）是指針對(duì)不同性質(zhì)的活動(dòng)進(jìn)行運(yùn)營(yíng)，包含活動(dòng)策劃、活動(dòng)實(shí)施、營(yíng)銷推廣、品牌傳播，達(dá)成提升相關(guān)運(yùn)營(yíng)指標(biāo)的有目的的運(yùn)營(yíng)行為。為了更好的達(dá)成既定目標(biāo)，項(xiàng)目立項(xiàng)后我們需要了解此次運(yùn)營(yíng)活動(dòng)的目標(biāo)，以目標(biāo)展開(kāi)設(shè)計(jì)策略和設(shè)計(jì)實(shí)施。常見(jiàn)的運(yùn)營(yíng)活動(dòng)目標(biāo)主要是拉新、促活、回流、營(yíng)收，本質(zhì)上就是利用增長(zhǎng)模型AARRR來(lái)達(dá)成運(yùn)營(yíng)目標(biāo)，助力產(chǎn)品用戶增長(zhǎng)。

1.2 活動(dòng)目標(biāo)分類

目標(biāo)的細(xì)分拆解后，基本都是圍繞“用戶、營(yíng)收、品牌”這三個(gè)維度來(lái)進(jìn)行活動(dòng)策劃設(shè)計(jì)。一般來(lái)說(shuō)目標(biāo)越單一活動(dòng)復(fù)雜度越低，目標(biāo)綜合性越高，越需要調(diào)動(dòng)不同類型用戶參與，活動(dòng)的復(fù)雜度就越高。對(duì)于綜合性目標(biāo)的活動(dòng)，不能以單一數(shù)據(jù)來(lái)判定活動(dòng)效果，需要進(jìn)行綜合分析。定量的我們可以埋點(diǎn)分析數(shù)據(jù)，定性我們可以通過(guò)問(wèn)卷來(lái)調(diào)研用戶對(duì)活動(dòng)附加效應(yīng)的感知，比如對(duì)品牌的識(shí)別和記憶以及NPS（凈推薦值）。

二、參與活動(dòng)策劃過(guò)程

活動(dòng)策劃過(guò)程就是對(duì)整個(gè)活動(dòng)方案設(shè)計(jì)的過(guò)程，運(yùn)營(yíng)人員和產(chǎn)品經(jīng)理落地初步方案后，設(shè)計(jì)師就可以參與進(jìn)來(lái)。這一部分需要看設(shè)計(jì)師的自主積極性，和團(tuán)隊(duì)流程的開(kāi)放度?？傮w來(lái)說(shuō)設(shè)計(jì)師積極參與策劃過(guò)程也能很好的助力活動(dòng)實(shí)施。

其一、設(shè)計(jì)師平時(shí)關(guān)注活動(dòng)較多，可以在腦暴的時(shí)候提出一些相對(duì)專業(yè)與互補(bǔ)的建議；

其二、參與策劃過(guò)程或者參與方案評(píng)審過(guò)程中能幫助設(shè)計(jì)師更好的理解這個(gè)活動(dòng)的底層邏輯和核心價(jià)值；

其三、前期項(xiàng)目組的方案想法達(dá)成一致可以減少對(duì)后期的修改。

三、優(yōu)化體驗(yàn)鏈路

除了遵循尼爾森十大交互原則，在《社交紅利》一書(shū)中，徐志斌老師總結(jié)了活動(dòng)運(yùn)營(yíng)的6特點(diǎn)：免費(fèi)、簡(jiǎn)單、有趣、透明、可積累、可兌換。在優(yōu)化鏈路時(shí)，我們可以從這幾個(gè)方面考慮：

3.1 本著簡(jiǎn)單、有趣、易傳播的設(shè)計(jì)原則。

簡(jiǎn)單：是指用戶易理解，教育成本低，操作簡(jiǎn)單。在運(yùn)營(yíng)設(shè)計(jì)中一般我們會(huì)與游戲結(jié)合，在此我稱為游戲運(yùn)營(yíng)。在游戲運(yùn)營(yíng)的設(shè)計(jì)中，如果不是一個(gè)約定俗成用戶都熟悉的游戲任務(wù)，教育用戶如何操作的成本是相對(duì)較高的，需要有詳細(xì)的操作引導(dǎo)。一般引導(dǎo)的步驟注意不要超過(guò)四步，或者在用戶使用的場(chǎng)景恰當(dāng)?shù)姆植秸故尽１热珲庺~(yú)跳龍門游戲操作就比較簡(jiǎn)單，引導(dǎo)只需要一個(gè)簡(jiǎn)單的提示；而京東全民運(yùn)動(dòng)會(huì)作為大型活動(dòng)比較復(fù)雜，引導(dǎo)步驟較多，對(duì)一步分用戶來(lái)說(shuō)認(rèn)知成本高就不會(huì)參與活動(dòng)。

有趣：是指具備一定的趣味性和創(chuàng)新性，可達(dá)成KANO模型的興奮型需求。在設(shè)計(jì)過(guò)程中，簡(jiǎn)單和有趣這兩個(gè)維度考慮不能單一靠假想的用戶體驗(yàn)來(lái)判定活動(dòng)是否好玩。比如在金哥接金幣游戲設(shè)計(jì)中，有一個(gè)交互手勢(shì)是金哥如何接金幣。手勢(shì)鎖定在底部點(diǎn)擊，全局點(diǎn)擊，左右滑動(dòng)。其實(shí)按照ui慣性的思維，底部點(diǎn)擊成本低于全部點(diǎn)擊低于左右滑動(dòng)，所以一開(kāi)始是建議使用的是底部點(diǎn)擊。但是后面進(jìn)行測(cè)試發(fā)現(xiàn)，左右滑動(dòng)的趣味性遠(yuǎn)大于點(diǎn)擊，且執(zhí)行成本也比較低。主要是在游戲過(guò)程中點(diǎn)擊是精確的操作，由于金幣的數(shù)量多，且面積小，分散點(diǎn)擊友好度不高（拼多多的紅包點(diǎn)擊區(qū)域更大），而滑動(dòng)則是在一定范圍內(nèi)，金哥用平底鍋區(qū)域可以接到金幣難度系數(shù)更低，得分率高。從沉浸感上來(lái)說(shuō)，點(diǎn)擊更像你點(diǎn)哪個(gè)金哥到哪里，按住金哥移動(dòng)會(huì)有中你就是金哥的體驗(yàn)，對(duì)金哥的掌控感更強(qiáng)，自然沉浸感也更好。

易傳播：是指低理解成本傳播與裂變。一是觸發(fā)按鈕突出可識(shí)別；二是操作任務(wù)明確無(wú)歧義；三是傳播交互易操作。通常我們?cè)O(shè)計(jì)的時(shí)候會(huì)理所當(dāng)然感覺(jué)用戶是很明確他們的操作行為的，但是基于某證券一期的活動(dòng)用研反饋，用戶對(duì)活動(dòng)的邀請(qǐng)機(jī)制，甚至是步驟都是迷惑的，不知道自己是否已經(jīng)成功分享，導(dǎo)致失去再分享的動(dòng)力，為此我們?cè)谘?qǐng)模塊下設(shè)計(jì)了簡(jiǎn)易的步驟去引導(dǎo)客戶。

3.2 考慮活動(dòng)規(guī)則的底層邏輯與開(kāi)發(fā)算法能否實(shí)現(xiàn)。

設(shè)計(jì)方案時(shí)，需要考慮到開(kāi)發(fā)實(shí)現(xiàn)的可行性。比如活動(dòng)的任務(wù)得分和游戲得分規(guī)則機(jī)制，開(kāi)發(fā)算法能否實(shí)現(xiàn)，如果開(kāi)發(fā)算法難以實(shí)現(xiàn)就會(huì)導(dǎo)致大返工。所以需要及早跟開(kāi)發(fā)做好評(píng)審工作，并且是很細(xì)致的評(píng)審，只是粗略評(píng)審后續(xù)還會(huì)出現(xiàn)問(wèn)題。

3.3 梳理交互流程，保證整體鏈路的完整性。

交互狀態(tài)都要考慮全面，如登錄前后狀態(tài)，空狀態(tài)，各個(gè)等級(jí)的狀態(tài)，任務(wù)前后的狀態(tài)，不同類別用戶的狀態(tài)等。

四、設(shè)計(jì)策略

運(yùn)營(yíng)設(shè)計(jì)策略可從策略層、風(fēng)格層、基礎(chǔ)層三大層面展開(kāi)。整個(gè)過(guò)程可以使用雙鉆模型，通過(guò)發(fā)散和聚焦來(lái)打開(kāi)思路，聚焦落地目標(biāo)，以下是我總結(jié)的設(shè)計(jì)策略畫(huà)布。

策略層：1、確定增長(zhǎng)動(dòng)力；2、鎖定活動(dòng)類型；3、故事場(chǎng)景化；4、IP角色品牌化；5、游戲化設(shè)計(jì)

風(fēng)格層：插畫(huà)風(fēng)格、平面風(fēng)格、立體維度、復(fù)古與趨勢(shì)

基礎(chǔ)層：配色、字體、圖形、動(dòng)效、聲音

4.1 策略層

策略層是通過(guò)前期基于產(chǎn)品定位、品牌定位了解后，針對(duì)運(yùn)營(yíng)目標(biāo)分析用戶畫(huà)像用的一系列的設(shè)計(jì)策略。為實(shí)現(xiàn)最優(yōu)的業(yè)務(wù)轉(zhuǎn)化，需要在設(shè)計(jì)之初明確活動(dòng)覆蓋的用戶人群。同時(shí)在各個(gè)環(huán)節(jié)都能考慮到特定用戶群體的不同需求，尤其是在業(yè)務(wù)轉(zhuǎn)化的過(guò)程中，考慮用戶體驗(yàn)地圖，就能更好的到達(dá)運(yùn)營(yíng)效果。以下是我總結(jié)的策略畫(huà)布：

常用的運(yùn)營(yíng)策層包括以下幾個(gè)步驟：1、確定增長(zhǎng)動(dòng)力；2、鎖定活動(dòng)類型；3、故事場(chǎng)景化；4、IP角色品牌化；5、游戲化設(shè)計(jì)。

1、確定增長(zhǎng)動(dòng)力

增長(zhǎng)動(dòng)力是指用戶產(chǎn)生行動(dòng)共鳴的心理機(jī)制，是刺激用戶增長(zhǎng)的裂變的核心。

利益刺激：使用金錢、虛擬貨幣、實(shí)物大獎(jiǎng)等，引起用戶內(nèi)心的金錢欲和貪小便宜的心理到達(dá)動(dòng)力。比如抽獎(jiǎng)、紅包、返利、電子貨幣等。

共情刺激：激發(fā)用戶的使命感、炫耀、好奇、從眾、互惠等心理，使活動(dòng)場(chǎng)景與用戶心智產(chǎn)生共情的動(dòng)力。比如賬單、戰(zhàn)績(jī)、評(píng)價(jià)、祝福等。

藝術(shù)刺激：通過(guò)美圖、插畫(huà)、藝術(shù)圖等，與用戶達(dá)成審美和情懷共情的動(dòng)力。比如年畫(huà)、主題卡牌、美圖美照等。

正所謂“無(wú)利不起早”，利益刺激是最直接有效的，屬于馬斯洛人類需求層次理論的生理需求。以下沉的拼多多為例，紅包提現(xiàn)是不敗的運(yùn)營(yíng)策略，以微信為分享載體的裂變是指數(shù)型的。共情刺激、藝術(shù)刺激則在更高的層次上，想要戳中用戶心智就比較難。對(duì)于運(yùn)營(yíng)活動(dòng)利益刺激是基礎(chǔ)，同時(shí)如果能使用共情刺激、和藝術(shù)刺激可達(dá)到更高期望的需求。比如我在玩今日頭條的集卡活動(dòng)的時(shí)候，還能意外收獲到十分精美的插畫(huà)，風(fēng)格正好又是我非常喜歡的，所以我就有了集卡的動(dòng)力，就算沒(méi)有得到卡，我還能分享我精美的插畫(huà)何樂(lè)而不為。

2、鎖定活動(dòng)類型

確定增長(zhǎng)動(dòng)力后，需要鎖定活動(dòng)的類型。如果我們簡(jiǎn)單、易傳播的原則，可以選用市面上常規(guī)用到的活動(dòng)類型降低用戶認(rèn)知成本，對(duì)于一些比較有名的活動(dòng)，像支付寶集五福，其本質(zhì)就是通過(guò)完成運(yùn)營(yíng)任務(wù)來(lái)收集某種虛擬物品，再由集齊的虛擬物品變現(xiàn)紅包完成用戶利益激勵(lì)。設(shè)計(jì)時(shí)不能完全照搬，既要根據(jù)活動(dòng)目標(biāo)結(jié)合產(chǎn)品自身邏輯層級(jí)優(yōu)化鏈路，也要在表現(xiàn)層做好風(fēng)格形式的區(qū)分，已達(dá)成有新的識(shí)別度的活動(dòng)。

常見(jiàn)活動(dòng)運(yùn)營(yíng)的類型：

收集類（集福、集卡）；養(yǎng)成類（螞蟻莊園、擼貓）；操作類（鯉魚(yú)跳龍門、金哥接金幣）；棋牌類（大富翁）；抽獎(jiǎng)?lì)悾ù筠D(zhuǎn)盤、抽簽）；測(cè)試類（心理測(cè)試、智力問(wèn)答）等。

3、故事場(chǎng)景化

故事場(chǎng)景化，是在鎖定活動(dòng)類型后，把活動(dòng)主題化，圍繞主題打造故事，引人入勝。良好的場(chǎng)景設(shè)計(jì)、氛圍營(yíng)造可以帶來(lái)沉浸式的用戶體驗(yàn)，也可以與用戶建立情感共鳴。比如在金哥接金幣的運(yùn)營(yíng)活動(dòng)中，我們選用操作類的運(yùn)營(yíng)游戲類型。故事主線就是圍繞IP金哥接金幣得金幣展開(kāi)的。有了基礎(chǔ)的故事背景，需要建立一個(gè)實(shí)際展示的場(chǎng)景。利用聯(lián)想思維，天上掉金幣，那么應(yīng)該是在戶外 ，金幣掉到了金哥的哪里，是手上還是哪里，金哥還是在地面還是在樹(shù)上。經(jīng)過(guò)腦暴后選用了超乎常規(guī)的島嶼群場(chǎng)景設(shè)計(jì)，層次分明的場(chǎng)景，使得整個(gè)場(chǎng)景廣闊，極富空間感。

4、IP角色品牌化

現(xiàn)在幾乎每個(gè)產(chǎn)品都有自己的ip，一方面是連接品牌更容易使用戶記憶，另一方面ip的擴(kuò)展也為運(yùn)營(yíng)帶來(lái)了趣味和無(wú)限的可能性。ip的使用一是要保證ip的識(shí)別性，另一方便是需要很好的融入我們的故事場(chǎng)景。比如金哥他出現(xiàn)在我們接金幣的場(chǎng)景需要什么樣的裝束，使用什么動(dòng)作更好的連接到這個(gè)接金幣的故事場(chǎng)景中。一開(kāi)始想著用籮筐去接金幣，但是籮筐體積大而高，會(huì)擋住ip，降低了ip的識(shí)別度。在設(shè)計(jì)的過(guò)程中突然靈光一閃，為了什么不用平底鍋呢，它除了打人，接金幣也不錯(cuò)。通過(guò)金哥頭頂平底鍋的接金幣方式，增添了整個(gè)游戲的創(chuàng)新性和趣味性，至于籮筐可以收納平底鍋接到的金幣，整個(gè)場(chǎng)景就很有邏輯性和畫(huà)面感了。同時(shí)為了凸顯游戲的氛圍，還給ip設(shè)計(jì)了頭帶必勝的綁帶的小細(xì)節(jié)，和有沖擊力的動(dòng)作，增添了ip的生命力。

5、游戲化設(shè)計(jì)

由于游戲本身對(duì)用戶就有一種天然的吸引力，加上可以很好的與運(yùn)營(yíng)活動(dòng)結(jié)合打造沉浸式體驗(yàn)，越來(lái)越多活動(dòng)都是與游戲結(jié)合來(lái)達(dá)到活動(dòng)目標(biāo)，也叫運(yùn)營(yíng)的游戲化。核心宗旨是“以人為本”的設(shè)計(jì)理念，并不是以功能為中心，在設(shè)計(jì)時(shí)可以使用游戲化設(shè)計(jì)八角模型。

使命——重大意義與使命感

讓用戶認(rèn)為自己正在做的事情，其意義比事情本身更重要，從而達(dá)到激勵(lì)用戶的作用。譬如支付寶里面的螞蟻森林，種的不是樹(shù)，而是地球的一點(diǎn)綠，這個(gè)使命感瞬間油然而生，在玩的過(guò)程中還能幫助地球綠化，激發(fā)了用戶環(huán)保使命感。再比如在奧運(yùn)期間的微博的金牌大滿慣的活動(dòng)，以圍觀奧運(yùn)會(huì)之名，集奧運(yùn)金牌卡喊你助威中國(guó)，利用了用戶對(duì)時(shí)時(shí)熱點(diǎn)的從眾心理，又聯(lián)系到了愛(ài)國(guó)上升了到了愛(ài)國(guó)使命感。

成就——進(jìn)步與成就感

指參與過(guò)程中取得進(jìn)步、獲得技能、獲得榮譽(yù)，從而獲得成就感，去克服困難達(dá)成目標(biāo)。一般我們會(huì)通過(guò)證書(shū)，勛章，排行榜等去給與用戶成就獎(jiǎng)勵(lì)。挑戰(zhàn)和技能是促使用戶不斷升級(jí)的主要因素，為了讓用戶沉浸其中護(hù)住心流，適當(dāng)?shù)奶魬?zhàn)難度和技能解鎖就顯得尤為重要。挑戰(zhàn)難度高了容易引起用戶的焦慮，難度低了又會(huì)讓用戶感覺(jué)無(wú)聊。比如集卡行動(dòng)，在考慮總預(yù)算不變的情況下，如何設(shè)置稀有卡的比例，集卡的難度就尤為重要。支付寶集五福在初期，敬業(yè)福的比例比較低，所以用戶抽到敬業(yè)福的體驗(yàn)就很開(kāi)心，但隨著支付寶后面為了擴(kuò)大社交屬性，提高了集齊率，集五到五福的興奮感就弱了，導(dǎo)致部分用戶失去動(dòng)力，因?yàn)榧降娜嗽蕉嗪罄m(xù)瓜分的錢就越少。

稀缺——稀缺性與渴望

當(dāng)想要某樣?xùn)|西獲得率很低的時(shí)候就有了稀缺性，能激發(fā)起用戶更大的渴望。就像支付寶的敬業(yè)福，其他幾個(gè)福集齊較快，獲得后就沒(méi)有很大的驚喜感，而獲得敬業(yè)福就會(huì)非常激動(dòng)，甚至一度風(fēng)靡在微信朋友圈曬敬業(yè)福，因?yàn)榧骄礃I(yè)福相當(dāng)于集齊了五福。這種稀缺也成為了氪金最好的辦法，比如稀缺的裝備，高于其他人的權(quán)限等。

創(chuàng)造——?jiǎng)?chuàng)意與及時(shí)反饋

制定基本元素、和規(guī)則，把玩法策略交給用戶，給用戶足夠高的自由度，驅(qū)使全身心投入到創(chuàng)造性的過(guò)程。通過(guò)不斷體驗(yàn)創(chuàng)造的過(guò)程，同時(shí)注重創(chuàng)造的結(jié)果，并及時(shí)的反饋。比如淘寶人生，可以打造自己的形實(shí)質(zhì)上就是裝扮類的游戲，這種常駐型的游戲，不僅可以提高用戶使用產(chǎn)品的時(shí)長(zhǎng)，還可以聯(lián)動(dòng)品牌做營(yíng)銷提高下單率。其生命力的不竭動(dòng)力就源于，對(duì)用戶不斷提供創(chuàng)新的服裝、妝容、飾品、場(chǎng)景，讓用戶自由創(chuàng)造新角。

擁有——所有權(quán)與擁有感

使用戶擁有或控制某樣?xùn)|西，獲得激勵(lì)，持續(xù)升級(jí)。結(jié)合挑戰(zhàn)設(shè)置，當(dāng)用戶通過(guò)一定努力而擁有的東西會(huì)倍感珍惜，也能激發(fā)其收集欲望和挑戰(zhàn)欲。最常用的就是收集類的游戲，比如各種收集類的活動(dòng)中，先會(huì)獲得一個(gè)物品激發(fā)你對(duì)該系列的占有欲，不斷收集其他款。還有一種常用的是勛章的激勵(lì)，勛章本身是對(duì)行為的階段性的獎(jiǎng)勵(lì)，好的策略和勛章樣式同樣能激發(fā)用戶的收集欲。

社交——社交影響與關(guān)聯(lián)性

社交影響指的是別人的狀態(tài)、想法、行動(dòng)、言語(yǔ)等對(duì)外展示能驅(qū)動(dòng)到他人，也就是我們的行為通常會(huì)收到其他人的影響，比如羊群效應(yīng)。就像看抖音，點(diǎn)贊量多的，沒(méi)準(zhǔn)我們會(huì)跟有耐心看到最后，因?yàn)橛袀€(gè)潛意識(shí)心理就是大家都覺(jué)得好，總之差不到哪里去。在游戲和運(yùn)營(yíng)活動(dòng)中，營(yíng)造有很多人玩的氛圍，鼓勵(lì)用戶炫耀自己的成果都是非常見(jiàn)效的方式。關(guān)聯(lián)性我理解為我們會(huì)選擇盡可能與我們有關(guān)聯(lián)的事物。比如拼多多推薦你去分享，都是優(yōu)先推薦與你互動(dòng)最為頻繁的，這樣去拼單和拼單成功的幾率更高。

未知——未知性與好奇

不知道接下來(lái)會(huì)發(fā)生什么，勾起用戶的對(duì)未知的好奇心。比如闖關(guān)，玩家不斷闖關(guān)就是這種未知帶來(lái)的牽引。在活動(dòng)運(yùn)營(yíng)中最常見(jiàn)的就是大轉(zhuǎn)盤抽獎(jiǎng)，現(xiàn)在比較流行結(jié)合盲盒的活動(dòng)，就是滿足獵奇心理，讓用戶欲罷不能.

虧損——虧損與逃避心

利用用戶害怕?lián)p失屬于自己的東西來(lái)讓他們參與進(jìn)來(lái)?？梢越Y(jié)合損失厭惡來(lái)理解。損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí)，認(rèn)為損失更加令他們難以忍受。同量的損失帶來(lái)的負(fù)效用為同量收益的正效用的2.5倍，可見(jiàn)損失對(duì)我們的心理影響更大。比如商家發(fā)給你的免費(fèi)優(yōu)惠券，其實(shí)你本身不需要購(gòu)買什么，但是商家偏偏在優(yōu)惠券上加上時(shí)效性，超過(guò)活動(dòng)日期就置灰了，即使你原本沒(méi)有購(gòu)買需求，但是感覺(jué)沒(méi)用掉優(yōu)惠券就像損失了優(yōu)惠券的錢一樣，就會(huì)去購(gòu)買，甚至為了湊單購(gòu)買更多東西。

結(jié)合游戲的運(yùn)營(yíng)中，八角模型的原則不一定都需要用到，但是優(yōu)秀的基本都會(huì)使用到所有原則。而最基礎(chǔ)的使用到的原則就是“成就”，“擁有”和“社交”，就是利用金錢刺激，促使用戶分享。成就、擁有、稀缺都屬于外在動(dòng)機(jī)，創(chuàng)造、社交、未知屬于內(nèi)在動(dòng)機(jī)。短期的活動(dòng)中一般為了快速引流會(huì)主要使用外在動(dòng)機(jī)的抓手，如紅包、優(yōu)惠券，這種效果顯著，但是一旦失去供給紅利，就會(huì)面臨用戶流失。所以做一個(gè)長(zhǎng)期或者大型活動(dòng)，需要盡可能的提升內(nèi)在動(dòng)機(jī)，使用戶真正對(duì)游戲上癮，才有可能獲得更多的活躍的用戶。

4.2 風(fēng)格層：

風(fēng)格層主要從這幾個(gè)面入手：插畫(huà)風(fēng)格，平面風(fēng)格，立體維度，復(fù)古與趨勢(shì)。運(yùn)營(yíng)的設(shè)計(jì)風(fēng)格主要是從插畫(huà)風(fēng)格和平面風(fēng)格衍生和組合使用。

插畫(huà)風(fēng)格：在ui界分為有扁平插畫(huà)、肌理插畫(huà)、手繪插畫(huà)、MBE插畫(huà)、漸變插畫(huà)、2.5D插畫(huà)、描邊插畫(huà)等。

立體維度：按照立體維度可分為扁平風(fēng)格、立體風(fēng)格（3D風(fēng)格）、寫實(shí)風(fēng)格（真實(shí)質(zhì)感，照片合成），在確定立體維度的時(shí)候一般會(huì)確定整體風(fēng)格的質(zhì)感。

平面風(fēng)格：賽博朋克、波普風(fēng)格、孟菲斯風(fēng)格、“FUI”未來(lái)風(fēng)格、蒸汽波風(fēng)格、以及前幾年流行的“故障風(fēng)格”和現(xiàn)在非常流行的彌散流體酸性風(fēng)等。

結(jié)合實(shí)際風(fēng)格還有一個(gè)維度可以對(duì)風(fēng)格進(jìn)去區(qū)分就是時(shí)間維度。首先設(shè)計(jì)師應(yīng)該把握最新的設(shè)計(jì)趨勢(shì)。比如在扁平風(fēng)格流行了很長(zhǎng)一段時(shí)間，現(xiàn)在慢慢又開(kāi)始進(jìn)入立體的風(fēng)格，尤其是C4D的使用，使得3d風(fēng)格又風(fēng)靡設(shè)計(jì)界。把握潮流趨勢(shì)的一般都是當(dāng)下流程的設(shè)計(jì)風(fēng)格，在特定主體下我還是可以追溯時(shí)間線，做一些復(fù)古風(fēng)的設(shè)計(jì)。復(fù)古風(fēng)分中西方，也分具體的歷史時(shí)間節(jié)點(diǎn)，可以根據(jù)主題選擇。

風(fēng)格選用原則：

一、符合產(chǎn)品調(diào)性

二、順應(yīng)設(shè)計(jì)趨勢(shì)

三、具有鮮明特色

4.3 基礎(chǔ)層：

確定好活動(dòng)風(fēng)格后就是打造活動(dòng)的基礎(chǔ)層，活動(dòng)最基礎(chǔ)的就是配色、字體、圖形定下了整個(gè)活動(dòng)的基調(diào)，而動(dòng)效聲音則拉開(kāi)了活動(dòng)運(yùn)營(yíng)的體感緯度。

配色：不同的主題色和配色對(duì)整個(gè)活動(dòng)的氛圍和用戶的心理感知是不同的。除了常規(guī)的《色彩心理學(xué)》知識(shí)（這里不做展開(kāi)），由于人們慶祝節(jié)氣的習(xí)俗，衍生到活動(dòng)運(yùn)營(yíng)還跟時(shí)令節(jié)氣、季節(jié)、傳統(tǒng)節(jié)日、新興現(xiàn)象級(jí)節(jié)日（如雙十一、618等）有關(guān)；值得注意的是運(yùn)營(yíng)活動(dòng)雖然相對(duì)有獨(dú)立的閉環(huán)，卻是產(chǎn)品不可獲取的組成部分，因此活動(dòng)運(yùn)營(yíng)的風(fēng)格需要與產(chǎn)品氣質(zhì)、核心品牌理念一致。比如工具類APP，基于色彩感受，將主要顏色進(jìn)行延展并融入整個(gè)活動(dòng)中，突出活動(dòng)科技、智能的視覺(jué)感受；電商APP通常比較注重買賣氛圍，喜歡大紅大紫來(lái)塑造商場(chǎng)大賣場(chǎng)的感覺(jué)，刺激用戶的購(gòu)買欲，而金融APP更偏于冷靜克制，留白較多，顏色使用也不會(huì)過(guò)于花哨，有些還比較忌諱使用綠色（這個(gè)跟用戶喜歡漲的心理有關(guān)）。

字體：字體的使用一是需要體現(xiàn)活動(dòng)特色，二是注意字體的版權(quán)。好的字體設(shè)計(jì)可以提升整個(gè)活動(dòng)的畫(huà)面質(zhì)量，尤其是標(biāo)題可以結(jié)合主題重點(diǎn)設(shè)計(jì)，體現(xiàn)活動(dòng)特色，吸引用戶注意。主體內(nèi)容可以用一些免費(fèi)商用的字體。整體字體的使用不要超過(guò)3種，過(guò)多的字體會(huì)使畫(huà)面感受不高級(jí)。

圖形：圖形分為大塊面圖形和點(diǎn)綴性圖形，大塊面的圖形使用可以很好的起到第一眼營(yíng)銷的作用，比較適合創(chuàng)意圖形；點(diǎn)綴性圖形比較適合提升活動(dòng)的氛圍，提升局部的質(zhì)感，還可以給人一種潤(rùn)物細(xì)無(wú)聲的精細(xì)感。

圖形的選擇可以從這幾個(gè)方向入手：

a、風(fēng)格角度入手：使用具有風(fēng)格特色的點(diǎn)線面的幾何圖形，如孟菲斯風(fēng)格。

b、品牌、ip、logo基因圖形：品牌圖形、ip、logo是最具有產(chǎn)品視覺(jué)識(shí)別性的，從中提取品牌基因圖形，即簡(jiǎn)單，又可以有效的與產(chǎn)品品牌掛鉤，抓住用戶心智塑造品牌認(rèn)知。

c、選用主題活動(dòng)的關(guān)聯(lián)圖形：從主題的聯(lián)想衍生去創(chuàng)造符合活動(dòng)的圖形，將衍生圖形重新結(jié)構(gòu)化成為活動(dòng)的主題標(biāo)示性圖形。

動(dòng)效聲音：常規(guī)活動(dòng)運(yùn)營(yíng)的動(dòng)效主要是用在關(guān)鍵按鈕、操作引導(dǎo)、頁(yè)面轉(zhuǎn)場(chǎng)、獲得榮譽(yù)、點(diǎn)睛小元素上，主要是為了吸引用戶關(guān)注提升轉(zhuǎn)化率，同時(shí)提升用戶的愉悅度和體驗(yàn)感。與游戲結(jié)合的運(yùn)營(yíng)活動(dòng)動(dòng)效發(fā)揮的空間就更大了，但是不能單純的理解為動(dòng)效，游戲更是一個(gè)動(dòng)態(tài)交互的過(guò)程。游戲中動(dòng)效和聲音的使用，能拉開(kāi)了活動(dòng)運(yùn)營(yíng)的體感緯度，比如鯉魚(yú)跳龍門就是利用了游戲、動(dòng)效、聲音、點(diǎn)擊形成視聽(tīng)觸的三維立體感受，鯉魚(yú)吃金幣的游戲過(guò)程惟妙惟肖，又簡(jiǎn)單易操作，成為金融游戲的典范。

五、數(shù)據(jù)與策略思維

5.1、不同時(shí)效性的運(yùn)營(yíng)優(yōu)化方案不同

運(yùn)營(yíng)類活動(dòng)中數(shù)據(jù)跟蹤與策略思維是保證活動(dòng)效果最大化的有效手段。根據(jù)運(yùn)營(yíng)目標(biāo)，提取關(guān)鍵的轉(zhuǎn)化點(diǎn)進(jìn)行埋點(diǎn)，獲取CTR（轉(zhuǎn)化率)。運(yùn)營(yíng)活動(dòng)從時(shí)效性來(lái)分可以分為：常駐性運(yùn)營(yíng)活動(dòng)和時(shí)效性運(yùn)營(yíng)活動(dòng)。常駐性運(yùn)營(yíng)活動(dòng)我們可以使用abtest去選著更優(yōu)的設(shè)計(jì)方案，甚至是隔段時(shí)間替換方案，對(duì)比分析數(shù)據(jù)進(jìn)行方案選擇和優(yōu)化，這個(gè)跟產(chǎn)品優(yōu)化邏輯類似。時(shí)效性運(yùn)營(yíng)活動(dòng)使用abtset的成本太高，所以一般是在上線后根據(jù)埋點(diǎn)數(shù)據(jù)監(jiān)測(cè)來(lái)調(diào)整相關(guān)設(shè)計(jì)元素、局部交互、文案等來(lái)提升CTR（轉(zhuǎn)化率)。

目標(biāo)——策略——埋點(diǎn)——跟蹤數(shù)據(jù)——修改

1、常駐性運(yùn)營(yíng)活動(dòng)：使用ABTest選擇更優(yōu)方案

2、時(shí)效性運(yùn)營(yíng)活動(dòng)：根據(jù)埋點(diǎn)數(shù)據(jù)監(jiān)測(cè)調(diào)整相關(guān)設(shè)計(jì)

5.2、上線后運(yùn)營(yíng)優(yōu)化

1、提升曝光率

內(nèi)循環(huán)中多渠道觸達(dá)提升曝光率：app、pc端、微信公眾號(hào)、短信召喚、線下海報(bào)、應(yīng)用市場(chǎng)等；外部渠道投放：針對(duì)不同用戶細(xì)分在用戶感興趣的外部熱門渠道投放活動(dòng)，吸引用戶參與活動(dòng)。

2、提升鏈路轉(zhuǎn)化

1）、關(guān)鍵節(jié)點(diǎn)文案優(yōu)化

比如在某證券活動(dòng)中，我們針對(duì)線上數(shù)據(jù)結(jié)果做了以下優(yōu)化（僅部分）：

a、跑馬燈文案激勵(lì)，時(shí)時(shí)播放中獎(jiǎng)名單營(yíng)造活動(dòng)熱度，提高活動(dòng)可信度，激發(fā)用戶從眾心理。

b、完善邀請(qǐng)引導(dǎo)，對(duì)于新手用戶以及沒(méi)有邀請(qǐng)好友在頂部進(jìn)行二次提醒，以大獎(jiǎng)刺激用戶參與邀請(qǐng)。

c、用戶進(jìn)階游戲文案提示完善，對(duì)不同等級(jí)用戶給于不一樣的紅包激勵(lì)。

d、排行榜展示策略調(diào)整，前幾百名瓜分大獎(jiǎng)的文案優(yōu)化與曝光。

2）、發(fā)放策略調(diào)整

根據(jù)活動(dòng)領(lǐng)獎(jiǎng)數(shù)據(jù)分析，通過(guò)管控臺(tái)靈活配置各個(gè)階段紅包金額與數(shù)量，提高不同階段的用戶轉(zhuǎn)化。

3）、斷點(diǎn)用戶召回

通過(guò)push、短信的形式對(duì)活動(dòng)用戶分層分類在合適的時(shí)機(jī)觸達(dá)，吸引用戶再次參與。

4）、裂變路徑優(yōu)化

a、展示榜單（可刮分大獎(jiǎng)）最后一名數(shù)據(jù),展示邀請(qǐng)人數(shù)，激勵(lì)榜外用戶沖刺榜單

b、已接受好友再次填手機(jī)號(hào)驗(yàn)證,引導(dǎo)至換起app頁(yè)面

c、綁定邀請(qǐng)關(guān)系后,增加彈窗引導(dǎo)用戶

3、優(yōu)化效果對(duì)比與總結(jié)

根據(jù)優(yōu)化前后的數(shù)據(jù)進(jìn)行對(duì)比分析，把有效提高數(shù)據(jù)的策略點(diǎn)總結(jié)出來(lái)，可復(fù)用在其他項(xiàng)目。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

由于產(chǎn)品性質(zhì)和業(yè)務(wù)階段，身為B端設(shè)計(jì)師更加需要貼近一線場(chǎng)景，深入了解業(yè)務(wù)邏輯和用戶使用場(chǎng)景，在不斷深入的用戶調(diào)研中，也收獲了一些心得和經(jīng)驗(yàn)，所以和大家分享一下我常見(jiàn)的三種用研方式，相關(guān)物料可以通過(guò)文章底部的原文鏈接得到獲取方式

一、認(rèn)識(shí)用研

1.1設(shè)計(jì)師為什么需要了解用研

我們對(duì)產(chǎn)品進(jìn)行設(shè)計(jì)探索的本質(zhì)是利用已知信息去挖掘未知信息，最終利用獲得的信息進(jìn)行決策的過(guò)程，信息的完整、準(zhǔn)確程度與判斷力、等共同決定了決策過(guò)程中錯(cuò)誤決策的概率高低

用研的過(guò)程就是一個(gè)信息的收集與處理的過(guò)程，在信息不足時(shí)我們可以通過(guò)同理心來(lái)“側(cè)寫”用戶心智推測(cè)信息，這一點(diǎn)從事C端設(shè)計(jì)的小伙伴應(yīng)該感同身受，但由于B端用戶畫(huà)像與設(shè)計(jì)師自身往往偏差較遠(yuǎn)，單純的通過(guò)同理心來(lái)感知用戶心智的門檻和難度較大

此時(shí)我們就需要通過(guò)用戶研究的手段獲取更準(zhǔn)確更完善的信息，通過(guò)用戶研究，設(shè)計(jì)師可以貼近一線場(chǎng)景，了解用戶的真實(shí)場(chǎng)景和工作訴求，切身感受到產(chǎn)品的業(yè)務(wù)邏輯和使用鏈路，以便我們進(jìn)行更準(zhǔn)確的設(shè)計(jì)決策，同樣的，這樣也可以讓我們的設(shè)計(jì)方案在講述時(shí)有理可依，有據(jù)可靠，更容易獲得上下游的信任

接下來(lái)是我對(duì)于可用性測(cè)試、用戶訪談、問(wèn)卷調(diào)研的學(xué)習(xí)總結(jié)，簡(jiǎn)單與大家分享，大家有什么見(jiàn)解也可以互相交流

1.2用研的緯度

這是《贏在用戶》書(shū)中經(jīng)常被人用到的用戶研究二維分布圖，這幅圖很好的展示了用戶研究的緯度，橫軸是研究用戶的結(jié)果；縱軸是理解用戶的方式，行為、態(tài)度，即觀察用戶做什么、聽(tīng)用戶說(shuō)什么，因此，用研主要通過(guò)定性調(diào)研和定量調(diào)研分別關(guān)注用戶的行為或者態(tài)度

那么什么是定量，什么是定性，行為和態(tài)度之間又有什么樣的關(guān)系，在正式進(jìn)入用研工作之前，有必要對(duì)這四個(gè)方向進(jìn)行一個(gè)簡(jiǎn)單的了解

定性與定量

定性與定量是用戶研究中常用的兩種方法，兩者之間性質(zhì)和分析方法有一定的差異

• 定性研究主要回答“是什么”和“為什么”的問(wèn)題，是對(duì)種類或者質(zhì)的差異的分析，說(shuō)白了就是通過(guò)經(jīng)驗(yàn)、邏輯、同理心等非量化的方式去分析【主觀】的信息

• 定量研究，除了能告訴我們是什么以外，還能告訴我們“是多少”，一般指具體【客觀】的數(shù)據(jù)信息

通過(guò)上述示意可以發(fā)現(xiàn)，定量更加在意得出的數(shù)據(jù)，至于為什么會(huì)得出這個(gè)結(jié)果，就需要通過(guò)定性數(shù)據(jù)去驗(yàn)證，因此定性分析在一定程度上會(huì)更偏向于闡述某件事物的意義

二者是站在不同的角度看待問(wèn)題——定量關(guān)注數(shù)，定性關(guān)注人，在實(shí)際工作中定性與定量往往相互配合，例如通過(guò)定量挖掘關(guān)鍵數(shù)據(jù)，再用定性剖析原因，最后定量進(jìn)行驗(yàn)證，兩者結(jié)合以求得研究效果的最大化

行為和態(tài)度

行為主要是指用戶的某種動(dòng)作，比如操作時(shí)的點(diǎn)擊、滑動(dòng)，以及視覺(jué)的關(guān)注點(diǎn)、肢體語(yǔ)言等，這些都是下意識(shí)，無(wú)需思考的行為數(shù)據(jù)，這些數(shù)據(jù)可能與信息層級(jí)、傳遞效率、操作時(shí)長(zhǎng)、交互鏈路等息息相關(guān)，觀察收集這些行為數(shù)據(jù)的最終目的是了解用戶為何按照自己的方式進(jìn)行操作，與我們預(yù)期設(shè)想的路徑有什么不同之處，進(jìn)而探究是什么促使用戶做出的行動(dòng)

態(tài)度則是用戶的主觀想法或者情緒，情緒會(huì)誘發(fā)用戶產(chǎn)生一系列行為，例如操作遇阻時(shí)的焦慮，對(duì)產(chǎn)品體驗(yàn)不滿的憤慨或者Aha moment時(shí)的驚喜這些都反映出了用戶對(duì)于產(chǎn)品當(dāng)下體驗(yàn)的一個(gè)態(tài)度，關(guān)注這樣用戶態(tài)度就能收集到產(chǎn)品體驗(yàn)的信息，所以，用戶行為導(dǎo)致了某種結(jié)果，態(tài)度則揭示了影響行為的根本原因

在了解了定量與定性，行為與態(tài)度之后，我根據(jù)目前工作中常用到的可用性測(cè)試、用戶訪談、問(wèn)卷調(diào)研，并對(duì)每個(gè)方法的適用場(chǎng)景和進(jìn)入調(diào)研的關(guān)鍵動(dòng)作進(jìn)行詳細(xì)分析

二、如何選擇用研

在開(kāi)始進(jìn)行用戶調(diào)研之前，我們需要根據(jù)具體情況確定調(diào)研形式，以便實(shí)施后續(xù)的展開(kāi)工作，根據(jù)用研目的、產(chǎn)品設(shè)計(jì)階段、頻次、所需樣本量和成本等多方面因素進(jìn)行考慮，選定適合當(dāng)下情況的調(diào)研方式

三、用研執(zhí)行關(guān)鍵動(dòng)作

A. 可用性測(cè)試

1.準(zhǔn)備階段

1.1明確測(cè)試目的

首先應(yīng)該以目標(biāo)為導(dǎo)向，確定需要測(cè)試的產(chǎn)品是什么，想要驗(yàn)證什么樣的結(jié)論或者達(dá)到怎樣的預(yù)期，是為了發(fā)現(xiàn)產(chǎn)品或原型中可用性的問(wèn)題，還是借此與競(jìng)品進(jìn)行有效性、效率、滿意度的比較，或是對(duì)某些功能點(diǎn)進(jìn)行測(cè)試

1.2設(shè)計(jì)測(cè)試任務(wù)

在明確測(cè)試目的后開(kāi)始設(shè)計(jì)測(cè)試任務(wù)，測(cè)試任務(wù)是可用性測(cè)試的核心內(nèi)容，需要根據(jù)已經(jīng)確定的測(cè)試目的結(jié)合用戶在實(shí)際使用過(guò)程中可能存在的場(chǎng)景和需求，將任務(wù)場(chǎng)景化，然后對(duì)復(fù)雜任務(wù)的整體流程進(jìn)行拆解，列出任務(wù)列表，以此來(lái)編寫任務(wù)提綱

任務(wù)包括場(chǎng)景，操作和具體目標(biāo)，設(shè)計(jì)的任務(wù)要有代表性，對(duì)應(yīng)的功能或模塊必須是功能使用的典型場(chǎng)景、盡量模擬用戶真實(shí)的使用場(chǎng)景；在任務(wù)描述時(shí)做到語(yǔ)言簡(jiǎn)潔，避免指定的操作或引導(dǎo)用戶，若任務(wù)流程較長(zhǎng)，可以進(jìn)行拆解形成多個(gè)用戶觸點(diǎn)，但觸點(diǎn)操作不需要告知用戶，僅在用戶操作時(shí)進(jìn)行觀察即可

1.3 設(shè)定衡量指標(biāo)

在設(shè)計(jì)好測(cè)試任務(wù)后，我們需要為任務(wù)匹配對(duì)應(yīng)的可用性指標(biāo)，目的是為了通過(guò)指標(biāo)反應(yīng)測(cè)試內(nèi)容的可用性問(wèn)題，幫助實(shí)施者有重點(diǎn)的進(jìn)行觀察和記錄，還可以結(jié)合ASQ量表幫助測(cè)試者對(duì)每個(gè)測(cè)試任務(wù)的完成情況和滿意度進(jìn)行反饋

可用性指標(biāo)主要包括有效性、效率性、滿意度；這三者構(gòu)成了衡量指標(biāo)的一級(jí)指標(biāo)，而每個(gè)一級(jí)指標(biāo)下還包括更加細(xì)分的二級(jí)指標(biāo)及衡量方式和標(biāo)準(zhǔn)，這就構(gòu)成了可用性指標(biāo)對(duì)照表；我們依照可用性指標(biāo)對(duì)照表對(duì)每個(gè)任務(wù)的重點(diǎn)有了基本的概念，并且可以根據(jù)具體任務(wù)描述和衡量指標(biāo)得到測(cè)試記錄表

現(xiàn)在我們對(duì)每個(gè)任務(wù)的可用性指標(biāo)有了基本的概念，但是可用性問(wèn)題除了從實(shí)施者角度去觀察用戶行為和結(jié)果，還需要幫助測(cè)試者結(jié)合任務(wù)進(jìn)行自評(píng)和反饋

而在幫助測(cè)試者進(jìn)行任務(wù)反饋時(shí)，需要將有效性、效率性、滿意度站在測(cè)試者的角度進(jìn)行更加通俗易懂的拆分和信息傳遞，并且能夠做到量化分析，這也就是ASQ評(píng)估量表的作用和目的

有效性可以理解為任務(wù)的完成情況，即成功完成、求助后完成，未能完成

效率性則是針對(duì)特定任務(wù)，觀察其完成時(shí)間是否在正常范圍內(nèi)，其任務(wù)完成路徑是否符合標(biāo)準(zhǔn)路徑，是否存在偏離和猶豫的地方，在進(jìn)行定量研究時(shí)常用指標(biāo)有任務(wù)完成效率、理想路徑偏移率等

滿意度則是用戶自我報(bào)告數(shù)據(jù)，包括任務(wù)完成難易度評(píng)價(jià)、任務(wù)完成滿意度評(píng)價(jià)、及評(píng)價(jià)原因

根據(jù)場(chǎng)景描述、測(cè)試任務(wù)、節(jié)點(diǎn)反饋和ASQ評(píng)估量表，我們可以得到“任務(wù)卡片”，“任務(wù)卡片”可以幫助用戶快速進(jìn)入角色，明確內(nèi)容，量化反饋，在每次任務(wù)完成后，將測(cè)試者所勾選的ASQ選項(xiàng)對(duì)應(yīng)的分值相加，便可以得到任務(wù)評(píng)估分值

1.4準(zhǔn)備測(cè)試腳本

可用性測(cè)試一般情況下需要兩人協(xié)同配合進(jìn)行，通常一人安排任務(wù)鼓勵(lì)用戶發(fā)聲，一人觀察記錄，由于涉及內(nèi)容較多，成本高樣本含量低，對(duì)被試用戶進(jìn)行的活動(dòng)任務(wù)也比較復(fù)雜且環(huán)環(huán)相扣，所以為了保障測(cè)試任務(wù)更好的實(shí)施，一般情況下會(huì)準(zhǔn)備一份較為完整的測(cè)試腳本以供團(tuán)隊(duì)更好的配合

一般測(cè)試腳本包括自我介紹、訪談?lì)A(yù)熱、測(cè)試規(guī)劃、測(cè)試任務(wù)、量表問(wèn)卷（可選）、結(jié)束語(yǔ)、記錄文檔、相關(guān)文檔

1.5準(zhǔn)備測(cè)試原型

1.6招募用戶

用戶可以大概分為新手用戶和專家用戶兩種類型，當(dāng)然也可以進(jìn)行更精細(xì)的劃分，例如（萌新、高淺、活躍、專業(yè)）在招募時(shí)為了結(jié)果可靠，應(yīng)避免產(chǎn)品設(shè)計(jì)相關(guān)人員的參與，選擇有代表性的用戶，其中真實(shí)的產(chǎn)品目標(biāo)用戶為最佳，測(cè)試者不宜過(guò)多，一般5名左右就夠了

例如調(diào)研XX產(chǎn)品的直播教室的可用性問(wèn)題，就需要招募已在平臺(tái)入駐且售賣直播課的老師，在招募時(shí)還需要進(jìn)一步的篩選，如果招募的5名老師都是長(zhǎng)期使用平臺(tái)產(chǎn)品進(jìn)行直播上課，用戶對(duì)于產(chǎn)品功能足夠了解，關(guān)注點(diǎn)會(huì)與新手用戶會(huì)產(chǎn)生較大的差異

1.7準(zhǔn)備場(chǎng)地

包括預(yù)約測(cè)試場(chǎng)地、記錄設(shè)備、分配主測(cè)員和觀察記錄員、準(zhǔn)備相關(guān)話術(shù)及活動(dòng)禮物

• 測(cè)試場(chǎng)地：一般選擇安靜明亮的房間/會(huì)議室進(jìn)行，訪談?wù)吆陀脩糇詈贸?0度的座位

• 記錄設(shè)備：安裝測(cè)試產(chǎn)品的電腦、手機(jī)；記錄設(shè)備可以使用錄音筆、相機(jī)或DV。設(shè)備要穩(wěn)定，電量充足

2.測(cè)試中

2.1暖場(chǎng)

在了解用戶情況和布置任務(wù)前，不要太直接的進(jìn)入測(cè)試氛圍，營(yíng)造一個(gè)相對(duì)輕松的交流環(huán)境。先聊點(diǎn)輕松的話題，“您從哪里過(guò)來(lái)的呀”“平常工作忙不忙”等問(wèn)題，緩解氣氛，把用戶帶入測(cè)試場(chǎng)景?？珊陀脩袅牧谋粶y(cè)產(chǎn)品相關(guān)的小問(wèn)題，平時(shí)怎么用的？一般什么時(shí)候用？感受怎么樣等等

2.2布置任務(wù)

向測(cè)試者發(fā)放任務(wù)卡，結(jié)合任務(wù)卡中的角色和使用環(huán)境對(duì)任務(wù)進(jìn)行簡(jiǎn)單的介紹，如果是專家用戶任務(wù)就不用過(guò)多描繪場(chǎng)景，可以具象更具體的任務(wù)——“上傳一門新的課程、將課程分成基礎(chǔ)班和進(jìn)階版分別售賣”等等

2.3觀察并記錄用戶使用過(guò)程

這個(gè)過(guò)程觀察記錄和引動(dòng)測(cè)試者隨時(shí)的發(fā)聲很重要，與其他用研方式不同的地方在于可用性測(cè)試可以了解到用戶在操作時(shí)的想法和行為，用戶的發(fā)聲思考可直接影響可用性測(cè)試的效果和結(jié)論

我們可以適當(dāng)引導(dǎo)用戶進(jìn)行思考發(fā)聲，甚至可以為用戶做一些簡(jiǎn)單的示范，例如 在新建時(shí)，可以說(shuō)“我準(zhǔn)備新建一門課程”，“我正在尋找建班功能，我現(xiàn)在遇到一些問(wèn)題”等等，將自己操作時(shí)的想法表達(dá)出來(lái)，不需要刻意去思考，這有助于主測(cè)員去了解測(cè)試者的想法和感受

每個(gè)任務(wù)完成后，通過(guò)“任務(wù)卡片”重點(diǎn)回答測(cè)試者任務(wù)的完成情況，遇到的問(wèn)題，詢問(wèn)測(cè)試者的態(tài)度和感受，還需記錄任務(wù)完成的時(shí)間；與任務(wù)不相關(guān)的反饋可以記錄在備注中，而在記錄時(shí)盡量采用詞組、短句的快速記錄方式記錄核心內(nèi)容，整理后作為優(yōu)化任務(wù)幫助產(chǎn)品進(jìn)一步提升可用性和易用性

2.4進(jìn)行量表問(wèn)卷

ASQ量表

上面在介紹可用性指標(biāo)及任務(wù)卡片時(shí)我們有提到ASQ量表，其主要涉及有效性、效率性、滿意度3個(gè)方面，安排在用戶完成單個(gè)情景任務(wù)之后，這時(shí)用戶對(duì)于任務(wù)流程的操作感受是最明確和清晰的

SUS量表（可選）

SUS量表一般在相對(duì)完整產(chǎn)品整體的大型可用性測(cè)試后才會(huì)使用，因?yàn)橐话愕闹行⌒蜏y(cè)試任務(wù)比較集中和針對(duì)，用戶無(wú)法感知整個(gè)系統(tǒng)，量表針對(duì)測(cè)試設(shè)置10個(gè)問(wèn)題（有效性、效率、滿意度），包含5個(gè)選項(xiàng)：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）

在布置問(wèn)題時(shí)，奇數(shù)問(wèn)題采用正面闡述，偶數(shù)問(wèn)題采用反面闡述，以此來(lái)確保用戶評(píng)價(jià)的可靠性

單個(gè)測(cè)試者提交量表后，我們需要計(jì)算量表分值，奇數(shù)項(xiàng)計(jì)分采用“用戶打分”-1，偶數(shù)項(xiàng)計(jì)分采用“5-用戶打分”，由于是5點(diǎn)量表，每個(gè)題目的得分范圍為0-4，共10題，所以最大值為40，而SUS的范圍在0-100，所以需要將所有轉(zhuǎn)換分相加后乘以2.5，即可獲得SUS分?jǐn)?shù)

3.測(cè)試后

3.1問(wèn)題歸類分析

簡(jiǎn)單測(cè)試直接根據(jù)發(fā)現(xiàn)的問(wèn)題優(yōu)化設(shè)計(jì)即可；如果目的是用于討論和匯報(bào)，需要對(duì)記錄內(nèi)容進(jìn)行整理和輸出，這時(shí)需關(guān)注問(wèn)題的出現(xiàn)頻次、優(yōu)先級(jí)和用戶反饋，按照問(wèn)題維度分類，將不同用戶暴露的相應(yīng)問(wèn)題進(jìn)行合并，羅列問(wèn)題所對(duì)應(yīng)的功能點(diǎn)、可用性指標(biāo)、用戶比例、用戶反饋及相關(guān)現(xiàn)場(chǎng)記錄文件，之后基于問(wèn)題對(duì)業(yè)務(wù)和體驗(yàn)的影響劃分優(yōu)先級(jí)并且標(biāo)出對(duì)應(yīng)的PM同學(xué)，最后針對(duì)這些問(wèn)題給出優(yōu)化建議

問(wèn)題優(yōu)先級(jí)的劃分方式

通過(guò)前期記錄觀察以及錄音錄屏我們可以發(fā)現(xiàn)用戶在任務(wù)測(cè)試中遇到的問(wèn)題，根據(jù)問(wèn)題對(duì)任務(wù)完成度的影響，我們可以劃分為P0（緊急問(wèn)題）、P1（重要問(wèn)題）、P2（次要問(wèn)題）的方式對(duì)問(wèn)題進(jìn)行優(yōu)化和排期

• P0：用戶遇到阻力且無(wú)法解決，未能完成任務(wù)的問(wèn)題

• P1：用戶遇到阻力且反饋頻次較高，在求助后完成任務(wù)的問(wèn)題

• P2：用戶遇到阻力但可以自行解決，完成任務(wù)但感到不順利的問(wèn)題

3.2輸出測(cè)試報(bào)告

較大的可用性測(cè)試在得出結(jié)果后需要向團(tuán)隊(duì)內(nèi)的成員分享，所以需要進(jìn)行一次報(bào)告輸出做到內(nèi)容對(duì)齊，一般包含整體概括、重點(diǎn)發(fā)現(xiàn)、項(xiàng)目背景、測(cè)試過(guò)程、測(cè)試結(jié)論、優(yōu)化方案幾個(gè)模塊，具體匯報(bào)形式是不受限制的，一般文檔形式輸出較為高效，keynote匯報(bào)從內(nèi)容和形式上會(huì)更加豐富

• 整體概括可以將測(cè)試背景及測(cè)試結(jié)論簡(jiǎn)單的闡述，其中測(cè)試背景包括（項(xiàng)目背景、測(cè)試內(nèi)容、施測(cè)情況），測(cè)試結(jié)論包括（測(cè)試結(jié)論、優(yōu)化建議）

• 項(xiàng)目背景就不必多說(shuō)了，將業(yè)務(wù)背景和測(cè)試目的進(jìn)行簡(jiǎn)單概括即可

• 測(cè)試過(guò)程包括準(zhǔn)備階段（如何招募用戶、招募了多少名、用戶的基本信息和類型；有哪些測(cè)試任務(wù)、如何進(jìn)行測(cè)試和記錄形式）及測(cè)試階段（本次測(cè)試安排的任務(wù)、設(shè)計(jì)的量表問(wèn)卷、現(xiàn)場(chǎng)的錄像照片）兩個(gè)環(huán)節(jié)進(jìn)行展示

• 測(cè)試結(jié)論需要將暴露的問(wèn)題進(jìn)行問(wèn)題描述，結(jié)合整理的文檔表格詳述問(wèn)題未讀和用戶反饋

• 最后，結(jié)合問(wèn)題提出完整深入的優(yōu)化建議和解決方案

3.3后續(xù)跟進(jìn)方案

• 探討解決方案：協(xié)調(diào)產(chǎn)品、設(shè)計(jì)等多個(gè)角色來(lái)探討合適的解決方案，要注意，設(shè)計(jì)時(shí)要思考新方案是否會(huì)帶來(lái)新問(wèn)題，并再次通過(guò)可用性測(cè)試來(lái)驗(yàn)證新的方案。

• 持續(xù)跟進(jìn)：了解項(xiàng)目結(jié)果的落地情況；已改進(jìn)的問(wèn)題或遺留的問(wèn)題可在下個(gè)版本的測(cè)試中繼續(xù)跟進(jìn)

B. 問(wèn)卷調(diào)研

在進(jìn)行問(wèn)卷調(diào)研之前，我們需要認(rèn)識(shí)到問(wèn)卷調(diào)研包括兩種調(diào)研類型，定量調(diào)研與定型調(diào)研，實(shí)際上大部分的問(wèn)卷都是定量調(diào)研，需要大量的用戶樣本，在收集問(wèn)卷后需要分析數(shù)據(jù)占比來(lái)驗(yàn)證用戶想法，另外小部分就是定型研究，一般原因是因?yàn)橛脩魳颖玖枯^小，通過(guò)小樣本量來(lái)研究產(chǎn)品的可用性問(wèn)題

1.問(wèn)卷前的準(zhǔn)備

1.1明確調(diào)研目的

問(wèn)卷調(diào)研中設(shè)計(jì)者并不直接接觸用戶，所以在問(wèn)題的深度和廣度上是有限的，一份問(wèn)卷不能解決多個(gè)問(wèn)題，通常會(huì)圍繞解決1-2個(gè)核心問(wèn)題去研究，在設(shè)計(jì)問(wèn)題之前需要明確此次問(wèn)卷調(diào)研的目的，然后圍繞這個(gè)目的去思考各種問(wèn)題，通過(guò)怎樣的問(wèn)題達(dá)到怎怎樣的結(jié)果

例如通過(guò)思考和確認(rèn)，針對(duì)我們這款由0到1的知識(shí)教育平臺(tái)型產(chǎn)品，其調(diào)研的目的主要在于

• 需求驗(yàn)證，包含對(duì)用戶進(jìn)行市場(chǎng)分析、了解現(xiàn)狀、發(fā)現(xiàn)問(wèn)題，從而提供解決方案，再到兩端用戶是否滿意現(xiàn)在的解決案

• 用戶接受并付費(fèi)的意愿如何。收集用戶信息、挖掘分析用戶的付費(fèi)意愿以及付費(fèi)習(xí)慣

問(wèn)卷的目的一般可以分為六個(gè)方面：

1.2目標(biāo)用戶分析

對(duì)調(diào)研用戶進(jìn)行分類是較為重要的環(huán)節(jié)，用戶類型不同，問(wèn)題內(nèi)容也不同，只有在不同角度不同用戶下設(shè)計(jì)的不同問(wèn)題才會(huì)獲得有價(jià)值的結(jié)果

這種情況在問(wèn)卷中還是比較常見(jiàn)的，例如我們填完問(wèn)題一后，根據(jù)選擇的不同，可能會(huì)跳轉(zhuǎn)到問(wèn)題三或者問(wèn)題五，這就是問(wèn)卷設(shè)計(jì)者根據(jù)不同用戶分類進(jìn)行的多種問(wèn)題設(shè)計(jì)

例如在收集知識(shí)平臺(tái)滿意度和相關(guān)競(jìng)品使用習(xí)慣時(shí)，個(gè)人機(jī)構(gòu)和組織機(jī)構(gòu)的視角是不一樣的，B端客戶和C端消費(fèi)者的視角也是不一樣的，所以在問(wèn)題設(shè)計(jì)時(shí)需要分開(kāi)對(duì)待

問(wèn)題根據(jù)用戶分類設(shè)計(jì)的好處在于問(wèn)卷后期可以快速驗(yàn)證產(chǎn)品的用戶類型和比例，提高調(diào)研質(zhì)量和數(shù)據(jù)可信度，便于后期對(duì)用戶進(jìn)行更加深入的調(diào)研

舉例

結(jié)合上面調(diào)研的目的及用戶分類，以此我們思考在問(wèn)卷的設(shè)置方面：

對(duì)于B端（老師）來(lái)說(shuō)，首先要了解的是客戶目前是否有在使用我們提供的服務(wù)、什么時(shí)候會(huì)使用、使用的頻率是多少、目前使用的體驗(yàn)如何、有沒(méi)有遇到什么問(wèn)題、有什么建議、對(duì)我們提供的解決方案是否愿意接受

對(duì)于C端（學(xué)生）來(lái)說(shuō)，首先需要了解的是用戶基本信息，是否使用過(guò)課程相關(guān)的服務(wù)，用過(guò)哪些競(jìng)品、吸引用戶的點(diǎn)在哪等等

1.3內(nèi)部需求對(duì)齊

當(dāng)需要有問(wèn)卷調(diào)研的需要時(shí)，首先應(yīng)該與團(tuán)隊(duì)內(nèi)部各合作方對(duì)齊調(diào)研意向，一方面是為了避免過(guò)量的問(wèn)卷投放打擾到用戶，另一方面問(wèn)卷調(diào)研屬于團(tuán)隊(duì)項(xiàng)目，在團(tuán)隊(duì)內(nèi)部充分討論調(diào)研目的后或許你會(huì)了解到各業(yè)務(wù)方當(dāng)下最關(guān)心的用戶問(wèn)題從而調(diào)整調(diào)研問(wèn)卷的內(nèi)容甚至得到更好的解決辦法，這樣一來(lái)才能將問(wèn)卷調(diào)研的價(jià)值最大化

例如教育平臺(tái)側(cè)在新版本上線前為了調(diào)研售課老（機(jī)構(gòu)）師對(duì)平臺(tái)使用的滿意度和深層次的需求問(wèn)題，那么在發(fā)起調(diào)研之前，需要跟產(chǎn)品、教研、客服等業(yè)務(wù)合作伙伴對(duì)齊需求

2.設(shè)計(jì)問(wèn)卷

2.1劃分問(wèn)卷模塊

設(shè)計(jì)具體問(wèn)題之前，我們需要預(yù)設(shè)幾個(gè)問(wèn)卷的模塊，通常圍繞幾個(gè)類型：用戶類、行為類、產(chǎn)品類、態(tài)度等，在得出完整的問(wèn)卷之前，我們不需要考慮問(wèn)題的先后邏輯是否合理，先根據(jù)調(diào)研目的和模塊類型進(jìn)行問(wèn)題窮舉，當(dāng)用戶模塊相關(guān)問(wèn)題寫完后再繼續(xù)寫下一個(gè)模塊的問(wèn)題，直到所有模塊的問(wèn)題都已經(jīng)設(shè)想完畢，在對(duì)問(wèn)題進(jìn)行重組

用戶類：收集用戶基本情況，方便我們了解用戶群體，比如：職業(yè)、學(xué)歷、團(tuán)隊(duì)構(gòu)成

行為類：了解用戶的行為或者與圍繞產(chǎn)品相關(guān)但不涉及產(chǎn)品本身的問(wèn)題。比如：有沒(méi)有在其他平臺(tái)入駐、售課時(shí)視頻課比較多還是直播課比較多

產(chǎn)品類：了解用戶直接與產(chǎn)品相關(guān)的體驗(yàn)問(wèn)題。比如：對(duì)產(chǎn)品印象如何、一般使用某產(chǎn)品的哪些功能、頻率怎樣、還用過(guò)哪些競(jìng)品、喜歡哪些功能

態(tài)度類：用戶對(duì)產(chǎn)品的看法。比如:評(píng)價(jià)、好感、想要的功能；盡量避免提一些無(wú)法判斷、沒(méi)頭沒(méi)尾的問(wèn)題，一方面對(duì)產(chǎn)品優(yōu)化沒(méi)有幫助，另一方面會(huì)降低用戶的的期望

2.2衡量問(wèn)題類型

問(wèn)卷的問(wèn)題形式是多樣的，題目類型主要有封閉/半封閉問(wèn)題、量表式問(wèn)題、開(kāi)放式問(wèn)題組成，需要根據(jù)具體目的來(lái)選擇相對(duì)應(yīng)的問(wèn)題

封閉/半封閉題型的選擇在于能否將答案窮舉，避免出現(xiàn)用戶因?yàn)闆](méi)有合適的選項(xiàng)而隨便勾選答案的情況

量表題型在答案上有明顯的程度高低區(qū)分，設(shè)計(jì)者對(duì)該問(wèn)題有進(jìn)行統(tǒng)計(jì)的需求

在問(wèn)卷中應(yīng)盡量避免較多的開(kāi)放問(wèn)題，一般在針對(duì)某種方向/某個(gè)定性的問(wèn)題做預(yù)探索時(shí)使用

這里只對(duì)問(wèn)題的類型做簡(jiǎn)單的概述，具體的形式是多樣的，例如選擇題可以有單選、多選、圖片選擇；量表題除了打分之外，還有排序和點(diǎn)數(shù)分配等其他形式

2.3問(wèn)題重組

在得到具體的問(wèn)題后，我們需要對(duì)問(wèn)題進(jìn)行重新編排，通過(guò)改變問(wèn)題的前后順序來(lái)保證用戶在可控的情況下進(jìn)行真實(shí)的問(wèn)卷回答，除了按照問(wèn)題的難易度之外，還需要根據(jù)問(wèn)題的屬性由淺入深的重組問(wèn)題

例如問(wèn)卷開(kāi)始先安排過(guò)濾題用于過(guò)濾用戶，識(shí)別用戶是否符合問(wèn)卷的目的來(lái)保證問(wèn)卷數(shù)據(jù)的質(zhì)量，然后按照暖場(chǎng)型問(wèn)題、漸入型問(wèn)題、高難度問(wèn)題、敏感問(wèn)題來(lái)對(duì)問(wèn)題進(jìn)行重組，當(dāng)然這些順序并不是固定的，需要依據(jù)具體的問(wèn)卷內(nèi)容進(jìn)行調(diào)整

關(guān)于過(guò)濾問(wèn)題：

用戶在實(shí)際問(wèn)卷回答中，受到各方面因素的影響有很多，例如有時(shí)用戶出于自我暗示、自尊心或者時(shí)間緊張狀態(tài)下，很難根據(jù)自身實(shí)際情況完成問(wèn)卷調(diào)研，而是隨機(jī)挑選或者作出相反的選擇，這種問(wèn)卷在回收后會(huì)對(duì)定量分析造成干擾，所以我們需要依據(jù)問(wèn)卷重要程度，安排適量的過(guò)濾題來(lái)避免此類情況的發(fā)生

比如在對(duì)于關(guān)于產(chǎn)品改版的滿意度調(diào)研中，向用戶詢問(wèn)有關(guān)產(chǎn)品功能的問(wèn)題

如果用戶回答“某某功能”，但在是否知道時(shí)選擇了否，或者使用時(shí)長(zhǎng)很久，但卻不知道某某功能時(shí)，在后期數(shù)據(jù)中，可以將這部分無(wú)效問(wèn)卷去除

• 問(wèn)題注意事項(xiàng)

3.問(wèn)卷投放

3.1問(wèn)卷評(píng)審

一切準(zhǔn)備就緒，是不是準(zhǔn)備投放問(wèn)卷了？別急，許多問(wèn)卷在投向用戶之前，往往會(huì)忽視通過(guò)內(nèi)部手段進(jìn)行問(wèn)卷自評(píng)，通過(guò)問(wèn)卷自評(píng)可以發(fā)現(xiàn)這份問(wèn)卷有沒(méi)有偏離最初的調(diào)研目的，你所設(shè)想的問(wèn)題用戶是否可以正確理解、問(wèn)卷是否有可優(yōu)化的空間等

一般自評(píng)包括3個(gè)環(huán)節(jié)：?jiǎn)柧碜詫?、?wèn)卷內(nèi)審、問(wèn)卷內(nèi)測(cè)

• 問(wèn)卷自審

問(wèn)卷設(shè)計(jì)完畢之后，需要根據(jù)最初確定的調(diào)研目的對(duì)問(wèn)卷進(jìn)行自審，可以站在用戶的視角對(duì)問(wèn)卷進(jìn)行第一次填寫，確定問(wèn)題是正確有價(jià)值的，是有其他選項(xiàng)，也可以估算回答問(wèn)卷所用時(shí)間，問(wèn)題中的詞語(yǔ)是否能被用戶理解且沒(méi)有歧義等

• 問(wèn)卷內(nèi)審（可選）

不少公司內(nèi)部有設(shè)立專門的用研團(tuán)隊(duì)，在確立調(diào)研需求初期就應(yīng)該與需求方深度綁定，有明確的需求認(rèn)知，有句話叫當(dāng)局者迷，邀請(qǐng)用研團(tuán)隊(duì)參與審查可以從專業(yè)角度把控用研目標(biāo)，評(píng)估問(wèn)題是否能被用戶接受等，他們可以從一些不同的角度發(fā)現(xiàn)問(wèn)題

• 問(wèn)卷內(nèi)測(cè)（可選）

內(nèi)審之后，可以借助產(chǎn)品的代表性用戶（一般3-5人）進(jìn)行問(wèn)卷內(nèi)測(cè)，通過(guò)觀察填寫情況來(lái)檢驗(yàn)問(wèn)卷設(shè)計(jì)的合理性，例如觀察答題時(shí)間、用戶類型與題目是否關(guān)聯(lián)等等，確保證問(wèn)卷上沒(méi)有其他問(wèn)題

3.2預(yù)計(jì)采集樣本量

內(nèi)測(cè)完畢之后，就可以向用戶投放問(wèn)卷了，為了避免給過(guò)多的用戶造成打擾，我們需要根據(jù)產(chǎn)品的用戶數(shù)量判斷問(wèn)卷的投放數(shù)量

一般沒(méi)有明確規(guī)范多少用戶投放多少問(wèn)卷，基本都是自己判斷，一般如果總用戶量不足30，需要至少覆蓋50%（15個(gè)）；如果總用戶量30-100，30人以上就可以；如果是總用戶量100-1000，覆蓋20%-50%就可以。

3.3選擇投放渠道

我一般常用投放渠道有：1）飛書(shū)推送；2）站內(nèi)公告；3）其他內(nèi)部資源

問(wèn)卷調(diào)研基本分為線上調(diào)研，線下調(diào)研兩種方法，線上通常是問(wèn)卷投放或者電話詢問(wèn)的形式，線下一般與用戶訪談相結(jié)合，做到定性定量相結(jié)合；選擇投放渠道時(shí)，一般根據(jù)調(diào)研目的、投放預(yù)算、預(yù)計(jì)采集樣本量、統(tǒng)計(jì)分析成本來(lái)進(jìn)行判斷

4.數(shù)據(jù)清洗產(chǎn)出報(bào)告

一般用研團(tuán)隊(duì)會(huì)使用專業(yè)的解決方案快速作出數(shù)據(jù)分析，比如SPSS，而設(shè)計(jì)師在實(shí)際工作中很少會(huì)接觸到此類工具，因?yàn)榇祟愐暯窍绿剿鞯姆较蚝蛢?nèi)容更加具體，變量在可控范圍之內(nèi)，不太需要復(fù)雜的分析模型，較為常見(jiàn)的更偏向Excel或者問(wèn)卷平臺(tái)自帶的分析功能，所以我們可以對(duì)分析思路做一個(gè)簡(jiǎn)單的了解

4.1數(shù)據(jù)清洗

前面在問(wèn)題設(shè)計(jì)時(shí)我們有講到篩選題相關(guān)的內(nèi)容，加入篩選題的目的就是在數(shù)據(jù)分析前便于我們將異常問(wèn)卷剔除出去，保證最終結(jié)果的準(zhǔn)確性，除了觀察篩選題的選項(xiàng)之外，我們還可以根據(jù)問(wèn)卷填寫時(shí)長(zhǎng)、量表打分規(guī)律、問(wèn)卷填寫完整度等幾點(diǎn)進(jìn)行問(wèn)卷篩選

4.2問(wèn)卷分析

• 看整體

還記得我們?cè)O(shè)計(jì)問(wèn)題的第一步劃分問(wèn)卷模塊嗎？模塊通常圍繞幾個(gè)類型：用戶類、行為類、產(chǎn)品類、態(tài)度等，在分析問(wèn)卷時(shí)可以基于這些結(jié)構(gòu)得出一個(gè)較為整體的情況分析，例如用戶群體結(jié)構(gòu)（用戶類）、存在的問(wèn)題和新的訴求（用戶建議）等，通過(guò)對(duì)比相同角色的回答，找出共性的問(wèn)題和信息

• 看差異

在得出整體結(jié)論之后，我們可以通過(guò)差異分析深入挖掘更多信息，例如觀察不同用戶角色對(duì)于產(chǎn)品的建議或者評(píng)分，會(huì)發(fā)現(xiàn)用戶角色對(duì)于產(chǎn)品的建議和需求是不同的，這種分析方法重點(diǎn)在于找到兩個(gè)可能存在關(guān)系的因素，通過(guò)對(duì)比不同角色的回答，找出差異和影響因素，根據(jù)上述舉例就是將（是什么）（怎么樣）進(jìn)行差異對(duì)比

• 問(wèn)題歸類

根據(jù)反映問(wèn)題的模塊對(duì)用戶問(wèn)題進(jìn)行歸類分析，寫明用戶的問(wèn)題描述和具體模塊，并且對(duì)后續(xù)優(yōu)化提供解決方案

4.3產(chǎn)出報(bào)告

問(wèn)卷報(bào)告一般包含調(diào)研背景、問(wèn)卷回收情況、調(diào)研結(jié)論（功能優(yōu)先級(jí)、用戶反饋、數(shù)據(jù)展示等）、整體評(píng)價(jià)（功能評(píng)價(jià)、體驗(yàn)評(píng)價(jià)）、等，分析時(shí)從數(shù)據(jù)出發(fā)找出差異，分析原因，給出結(jié)論，在具體匯報(bào)時(shí)可以按照先結(jié)論后具體問(wèn)題的方式呈現(xiàn)報(bào)告，同時(shí)可以結(jié)合數(shù)據(jù)提供相對(duì)應(yīng)的解決方案

C.用戶訪談

1.訪談前

1.1明確訪談目標(biāo)

明確訪談目標(biāo)，可以保證訪談內(nèi)容在大方向上是一致的，例如調(diào)研班主任實(shí)際外呼的場(chǎng)景及外呼時(shí)關(guān)注的信息，在訪談時(shí)就不會(huì)去問(wèn)關(guān)于主講排課的問(wèn)題，也可以防止訪談過(guò)程中遇到富有表達(dá)欲的用戶偏離主題，在訪談過(guò)程中難免有用戶興致勃勃的談?wù)撟约簩?duì)產(chǎn)品的看法，在這種情況下，擁有明確的訪談目標(biāo)可以保證深陷用戶的情境中不迷失訪談方向，保證訪談的最終結(jié)果是有價(jià)值的 

1.2確定訪談?lì)愋?/strong>