因為后臺是一個非常廣泛的且深奧的東西，里面包含了太多的業務邏輯，而且每個產品面向的用戶群體又不同，因此不可能說的面面俱到，但是我提煉的這七個步驟適用于大部分后臺的一個宏觀方向，對于一個沒有后臺項目經驗的人去從頭制作一款后臺產品應該是非常有幫助的。

第一步：選擇導航板式

導航是后臺的主軀干，一切操作都需要在導航的指引下進行切換，目前常用的有兩種導航，頂部導航與樹狀導航。

頂部導航板式

頂部導航是大多數Web端網站使用的導航模式，因為人的閱讀視覺是從上往下，從左往右，因此，頂部是視角最先達到的地方，頂部導航可以讓用戶快速了解整個網站的主要內容結構，通常在營銷級官網，內容瀏覽平臺被廣泛應用（例如京東，阿里云，站酷...）。

但是其弊端也是很顯而易見的，因為屏幕寬度的限制，在小屏下，頂部顯示文本內容有限，通常只有幾個字符的內容，更多內容或二級標題則需要進行隱藏顯示。其次因為人類身體結構，成年人的頭顱約為4.5～5.5公斤，占據身體7.7%左右的重量，我們的頸椎承受了太多，因此人在左右扭頭時要比上下點頭更舒服。再者人類的眼睛是左右排布的，與生俱來兩邊的視線就優于上下的視線，頂部導航如果需要高頻次使用的話會讓用戶非常的勞累。

優點：節約空間、可以快速吸睛

缺點：顯示文本內容有限，不符合人體工程學，不方便查找

樹狀導航板式

在很多生產力工具上，后臺網站上，B端產品上，閱讀軟件上，樹狀導航被廣泛運用。樹狀導航是以父子層次結構來組織對象的，其優點非常顯著：兼容性強，結構清晰，拓展性強等等。

先說兼容性，因為每條導航標題呈上下排布，因此一排只需顯示一條標題，對于長標題與外文適配顯得格外的友好。樹狀導航具有良好的層次關系，每一層內容都可以固定性的展示出來，不會像頂部導航必須鼠標懸浮才會顯示子層級，不論是從便于梳理層次關系的角度來講，還是頻繁操作的簡單化來說是都是完勝于頂部導航的。因為網頁默認是上下滑動來查閱更多內容的，因此樹狀導航的拓展性方面碾壓頂部導航，樹狀導航可以無限的向下拓展，就像書籍的目錄一樣，而頂部導航則只能顯示寥寥無幾的幾個單詞。

優點：可以展示更多的標題內容、可以不限制標題條數無限拓展、結構清晰易懂

缺點：占據空間較大，對于小屏可能需要頻繁展開、收起導航

第二步：統一模塊規則

后臺的主要功能是支撐前臺產品，管理資源，因此在邏輯與結構的梳理上應當與前臺產品保持一致性，在布局的制定上應當遵循模塊化、響應式、高效化的布局，以便于清晰地傳達信息。

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

導航模塊：

后臺的布局中，常用的模塊就是導航模塊（整個后臺功能的結構提綱），總導航就是我在上文提到的兩種，頂部導航和樹樁導航，其他還有二級導航，面包屑導航等等，但是需要注意的是，導航就像路標，起到指引用戶的作用，因此在全局的樣式與位置應保持統一。

提醒模塊：

顧名思義就是提示用戶有新的消息，新的功能等等，提醒模塊十分重要，因為它是實時性的，在設計提醒模塊時應當遵循全局化、機動化，高亮化，動態化的規則，在常規狀態下，提醒模塊應該隱藏展示，不過多的打擾用戶，但是如果在需要出現時，不論用戶處于什么樣的場景，提醒模塊都應該在第一時間出現，并以醒目的方式告知用戶。

數據統計模塊：

數據統計通常是作為后臺頁面頭部的存在，用戶一進網站映入眼簾的就是整個產品或者整個項目的數據統計，數據是作為衡量某一件事情好壞的重要標準，數據也通常可以說明一個決策、一項任務的最終結果，在數據統計模塊的設計上應該保持直觀，一針見血的設計方式，比如股票的K線圖，紅漲綠跌，一目了然。

快捷操作模塊：

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

內容展示模塊：

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

操作模塊：

操作模塊通常是與內容展示模塊共同存在的，兩者互相配合使用，凡是在頁面中涉及到可以點擊交互的區域統稱為操作模塊，操作模塊應該全局統一視覺語言以及操作語言，比如，按鈕樣式及大小，開關樣式，分頁器擺放位置及樣式等等。所有的操作模塊表意性要強，讓用戶可以快速明白點擊后的結果，如果遇到難以理解的操作功能，應該配合圖標使用并給予操作引導。

編輯模塊：

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

第三步：統一操作/交互方式

電腦端常見的操作方式：

1.左鍵單擊

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

2.鼠標懸浮

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

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

3.右鍵單擊

自從計算機操作系統誕生后就為右鍵賦予了「系統菜單」的交互意義，在不同的場景下點擊右鍵所出現的內容是不一樣的，這取決與網頁與應用的開發者，在網頁的設計中，將常用的快捷操作寫入右鍵菜單，會極大的提升工作效率，因為右鍵的菜單彈窗始終在鼠標指針附近觸發，因此對于用戶尋找功能是非常友善的，但是需要注意的是右鍵的操作應該全局統一，在同一套產品中，右鍵的內容不應該出現過多的功能，否則會對使用者造成困擾。

4.拖拽

拖拽，顧名思義就是鼠標單擊某一文件不放進行拖拽，拖拽操作相對與其他交互更具有操作感，因此在設計拖拽時，動畫是一個必要的選擇，動畫是表現交互給予反饋最直觀最有趣的選擇，拖拽的動畫最基礎的表現為被拖拽對象跟隨鼠標進行位移，而且松開鼠標后，文件的最終歸屬位置。拖拽常用與復制、移動順序、上傳、下載文件的場景，相對與普通的多步驟點擊操作，拖拽所反饋的定位更加明確，可以大大縮短尋找目錄、尋找文件的時間。

第四步：制定布局體系

布局框架是一套產品的骨架和基礎。只有在框架確定之后，設計師才可進行下一步的構建統一的視覺元素，清晰的功能操作，具體的交互流程等等。后臺產品是一個龐大的體系，除了對應前臺產品的功能之外，還包括對產品部門的管理，產品相關的功能管理，不同身份對應的權限管理等等，因此太過單一的布局形式并不能適用，因此我們在設計后臺布局時應該遵循簡約化、統一化、規范化、拓展性強的原則。

對于擁有著眾多功能的后臺，我們應該做到化繁為簡，多而不亂，如果想做到這一點我們就應該參考《簡約至上》一書中所說的簡約四要素：刪除、組織、隱藏、轉移。

刪除

在iPhone的外觀設計上，喬幫主一直信仰「少即是多」，就是我們通常說的做減法，這一偉大信仰在蘋果公司的產品上完美的體現了出來了，蘋果不論是線下門店還是官網、硬件、系統等等都將一切簡約到了極致。用在我們的產品布局上，刪除就是將無用、重復的功能刪除，保留必要的功能，不要將和業務與用戶使用功能完全不相干的東西放在頁面上。

組織

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

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

隱藏

隱藏是一種并不快捷的簡約化的方案，隱藏通常是將使用頻次低的功能藏起來，等需要時再手動調出使用，這些功能不常用但也并不代表沒用，比如設置頭像、名稱等等，隱藏可以讓頁面在視覺上更加輕量化，畢竟有限的空間還是要留給更重要的功能。

轉移

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

動靜態化布局

在制作后臺時，我們應該遵循模塊化布局，并提前規劃好靜態模塊與動態模塊。比如導航模塊、面包屑、按鈕等這些組件，在全局的位置應該保持一致，這些就是靜態模塊，全局樣式與位置上不會出現過多變化。而動態模塊一般就是內容區域，因為業務與功能的不同，內容模塊所展示的內容是一定不同的，這一塊的內容則是需要變化的。提前規劃靜態與動態的布局在開發方面可以節省代碼量與開發成本，開發只需要將靜態模塊寫成固定的組件就可以達到全局復用，快速修改的效果，在用戶方面也可以大大的節省用戶的學習成本，因為用戶在學習了靜態模塊之后，之后則只需要再去學習動態模塊就可以，而不需要每個頁面、每個組件都要去進行學習。

響應式布局

因為后臺大多數情況都是在Pc端與Pad端使用，這兩個終端的屏幕沒有固定的尺寸，可能有4k屏，可能有1k屏，當然還有可能是筆記本電腦所使用的更小尺寸，因此在設計時不能使用固定的設計稿尺寸，而應該使用較小的橫屏設計尺寸進行設計，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作為設計稿尺寸，但是隨著科技的發展，目前市面上的屏幕最低都是1080p的屏幕了，因此在設計時可以使用橫向「1200px」與「1440px」的尺寸作為設計稿尺寸，最大不應該超過1600px的尺寸。

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

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

懂得了水槽的原理，那么我們設計的時候就算不用固定的柵格方式去制作，頁面也不會出現太大的錯誤。

看懂了柵格之后總結一下，這不就是說一個模塊一個模塊的去設計么。沒錯，在設計時我們就是將元素按模塊進行設計，這里說的模塊不單單是指灰背景與白色塊這樣的組合，元素之間使用排版四要素中的親密也可以哦，只要是視覺上看起來是一塊一塊的，就算沒有分割線、分割塊它依然算是一個模塊。

回到了響應式布局，當我們按模塊進行設計后，那么響應式布局就是毛毛雨了，開發只需要在屏幕尺寸變寬的時候將模塊之間的距離拉大就可以了，這時就不是設計該去管的事情了。

總而言之就是，遵循響應式布局的目的就是為了屏幕尺寸在不斷變化的同時，不會去影響改變內容的整體觀感與體驗，不會出現圖片拉伸，字體忽大忽小的情況。

間距

間距這個東西真是老生常談的事了，其實也沒什么太多說的，但是這里還是去大致說下，什么樣的間距比較合理，視覺上看起來比較舒服。

屏幕的分辨率都是以偶數為主，1600*900、1920*1080、2560*1440等等，因此我們在使用間距的時候最好使用偶數作為最小基數，然后其他間距以最小基數的倍數去制定，比如你最初制定的最小基數為2px，那么整套頁面的最小間距就使用2px，接著隨著間距的增大，就以2的偶數倍作為其他間距，比如2*2=4px、2*4=8px、2*8=16px等等，這樣做頁面不僅看起來比較規范，而且易于開發，易于記憶，不容易出現鋸齒。

因為我們的后臺產品通常是在電腦屏幕上使用的，電腦屏幕距離人眼的距離相對于手機較遠，而且后臺產品業務種類繁多，功能錯綜復雜，因此元素之間并不太適合過度擁擠，否則閱讀起來就像報紙一樣，難以辨認，效率低下。而過大的留白又會導致展示的信息量少，出現信息密度不足的情況，同樣會導致閱讀效率下降，因此在間距上我們應該取中度，這個中度的標準就是將一個24寸的顯示器放在距離眼睛50cm的地方，然后去看這個頁面的間距，兩個元素看起來剛好不會很擁擠的時候，差不多就是剛剛好的，為什么使用24寸的顯示器呢，因為24寸的顯示器市場占有率較高，也是在日常環境中眼睛視線范圍內看起來比較舒服的尺寸，比24存再小的顯示器大多數就是筆記本屏幕了。

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

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

場景驅動間距

場景驅動間距，聽起來有點不易理解，其實是so easy的，舉個例子，當你要去一個陌生的停車場找自己的車，你又不知道你車放哪的時候，這時，你最希望的就是來一架無人機，從航拍的角度去看所有車輛，然后看哪個像自己的車，在做決定。當你找到你的車了，你要看看你車有沒有被剮蹭，油還多不多了，你就需要放下無人機，走到車前仔細觀看，而這時，整個停車場的布局什么的對你就沒什么太大意義了。

這回應該很好理解了吧，找車就是信息檢索，找到車了進去看車里有木有油就是內容閱讀。信息檢索，通常在后臺以列表的形式存在，且常常配合檢索功能（搜索、篩選、排序）等，這時檢索出的信息密度一定要大，因為用戶需要在大密度信息中快速瀏覽，找到符合自己的東西，假如你要是在淘寶搜索一個襪子，結果一屏就顯示一條，你要瀏覽時，你還要來回翻頁，你是否會很崩潰呢？

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

說了這么多就是，用戶在進行信息檢索時需要將間距適當調小，在保證有效閱讀的條件下，盡量在一屏內顯示更多的內容，當用戶篩選完成準備閱讀內容時，我們就要放大間距，最大的保證閱讀的舒適性。這只是其中的一條小例子，場景可能千千萬，這就需要設計師自己動腦去思考，去模擬了。

第五步：制定色彩體系

上帝說：要有光??！而顏色就是我們對光產生的視覺效應，目前我們肉眼可見的顏色大約是100多萬種，那么這么多種顏色，選什么色作為主要的色彩使用在頁面上呢，其實很簡單，這么多顏色，我們只需要把色彩大致的分成：赤橙黃綠青藍紫這7個顏色就可以了，畢竟人類更注重的是全局觀，一個顏色，你稍微深一點，稍微淺一點，99%人都分辨不出來，畢竟大多數男性連口紅色都分辨不出來呢。

在色彩中，色彩有三個屬性：色相、明度、飽和度，這三個屬性只要我們了解了原理就可以手動調色了，有人說，手調的不準確，不科學，那么如果你會寫色彩的算法，請略過此處，普通人還是手動調調比較好，因為，只要是掌握了色彩心理學，色感別太差，全局色彩統一，對于中小公司完全可用。

調色怎么調呢，第一看色相，色相決定的色彩的大方向，那么色相條中這么多顏色，用那個色相范圍好呢，這個就要看色彩心里學了，通常我們看到紅色想起什么？五星紅旗、黨、激情、慷慨激昂、股票大漲，那老外看到紅色呢，血腥、暴力、鬧鬼了，同樣一個紅色，咋國內外差距這么大呢，這要說的就多了，畢竟是歷史遺留問題，政治問題，生活傳統問題等等，具體請參考度娘。。。除了紅色，還有橙黃綠青藍紫六種顏色呢，當你看到其他的顏色你想到什么，那這就是色彩心理，因為你什么都沒干，就看個顏色就能腦補各種東西，有了各種感覺，色彩是不很神奇，沒錯就是很神奇，不同的色彩對于不同的地域的人群，不同職業的人群，不同年齡的人群都會有不同的色彩心里，這個具體就不細說了，知乎，百度一大堆相關研究。而我們要做的就是根據你的業務屬性和面對的相關人群，使用他們的色彩心里去制定你的色相，要是面對醫療行業，可能綠色是個不錯的選擇，如果要是面對政府行業，或許紅色更討領導們喜歡。

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

至于明度，就是顏色的亮度了，當你調完色相和飽和度時，發現這個顏色貌似有點刺眼，那么你就把亮度調低點，如果發現有點看不清，那么你就把明度調高點，明度就是這樣子使用的吧~~~~

在使用顏色的同時還需要注意可視度，過淺顏色的按鈕放上白色的字，眼神不好是看不清的，具體對比度什么樣才算合理，請參考WCAG標準，能通過這個標準的，在可訪問性上就沒問題。

顏色舒適性

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

最終總結一下，不管是選擇什么顏色作為主題色，一定要保證不能刺眼，否則對于長時間使用的操作者來說會是一個災難性的問題，可能輕者視疲勞，重者干眼癥青光眼。。。再者飽和度盡量不要過高，飽和度為：100是絕對不可以的，因為過于炫目的顏色會激起使用者的負面情緒，引起焦躁和不安的情緒，因此過高的飽和不可取。

第五步：制定文字體系

文字，是我們記錄信息的主要工具，在后臺頁面的設計中，我們不需要對字形進行設計，只需要使用Web端常用的標準字體就可以。

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

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

字體顏色也是一個需要注意的地方，通常我們為了便于記憶，使用灰度色就可以，一般色值為#222222、#333333、#666666、#999999、#CCCCCC這些，在一個頁面中，正文文字的顏色不應該超過3種色值，通常為一個標題色，一個文本色，一個輔助色，高亮色另說。顏色的使用主要目的是為了凸顯信息，過多的使用顏色會給用戶造成有很多層級的錯覺，導致層級混淆，頁面混亂。

第六步：提升趣味度

當后臺產品的結構與信息元素全部排版完成后，這時我們會發現，整個頁面除了文字和按鈕貌似沒有什么其他的東西了，確實，我們作為一個開發人員看起來都倍覺單調，更不用說每天使用我們產品的用戶了，更是枯燥的要死。有人說，B端產品以效率為主，本身不就是枯燥的文字嘛，道理是這么個道理，但是作為開發人員，讓用戶使用的開心也是我們的一個任務，俗言道：一圖勝千言，假如我們要學習一段歷史，我相信比起來看書本上的文字，看電視劇的方式應該更受人青睞吧，誰都不喜歡全是文字的東西，客戶也是一樣的，因此我們應該對頁面進行適當修飾，不應該把頁面做成一個txt的文本文件。那么怎么去合理的修飾頁面呢，很簡單，圖表化、圖形化。

什么是圖表化，簡單解釋來說就是將有規律的數據進行分類總結，用適合此類數據的圖表進行展示，舉個簡單的例子，狗蛋想要去買股票，但是不知道買哪一只，于是想上網查一查最近5年每個公司的股票走勢，結果找到了兩份文件，一個是滿是文字的數據列表文檔，另一個是精美直觀的K線圖，那么你是狗蛋你會閱讀哪個呢，當然去看k線圖了，畢竟3秒鐘就能知道個大概，如果看數據報表，眼花不說，一上午都不見得能閱讀完。這時你就會發現圖表的魅力。

那么圖形化又是什么呢，依然很簡單，就是將固定不變得字段圖標化，將難以理解的字段插畫化。人天生對于圖形的識別能力就優于文字，對那些靜態的字段給與圖標的展示會大大提高用戶的識別效率，什么是靜態的字段呢？比如固定的按鈕、導航、目錄、設置等等，全局都長那樣，不會因為切換場景而改變文字，這些就非常適合使用文字與圖標相互配合來提升趣味度與辨識度了。

那么插畫化又是什么呢？說白了就是將用戶懶得看的那些字配張圖，讀書時我們的課本都是圖文并茂的，那教育部就是怕學生光看文字產生厭倦導致不好好學習。同樣的道理，有很多情況下，用戶也懶的看文字，比如升級頁，升級功能信息那么多字，不如多放幾張圖來的實在，這也就是那些APP產品為什么都有引導頁的原因。

第七步：合理引導

當你看到這一步的時候，說明你的后臺已經完成的差不多了，后臺是個極其復雜的系統，一個新手去學習使用一套后臺就像一個菜鳥去學習玩一款新游戲一樣，只不過游戲有我們的興趣驅動，興趣是最好的老師，而后臺則不同了，學習使用后臺的那都是為了工作，興趣可就沒那么強了，如果恰恰碰到了做的很復雜的后臺，那客戶可能當場崩潰，古有唐雎之怒，流血五步，今有員工之怒，當場跑路，沒準產品學不會，人家就辭職了。想想都覺得很嚴重，這時就體現出了合理引導的重要性，那么什么叫做合理引導呢？引導分為很多種，有新手引導、新功能引導、版本變更引導，操作流程引導等等，但是最終的目的是為了讓用戶快速學會使用你的產品。

新手引導：

可以使用視頻教學，文字教學，體驗教學等等，具體怎么使用應該根據自身的業務進行分析，看看適合用哪種的方法。

新功能引導：

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

版本變更引導：

每個版本交互設計師，產品經理，體驗設計團隊等等一大堆人去探討，將舊版本不合理的功能升級，去除，換位置，合并等等，每動一點，用戶都需要從新學習，因此當版本變更導致操作習慣和之前不同時就要提示用戶最新的版本內容，最重要的是要對比引導，舊版本怎么回事，新版本怎么回事，在這一塊可供參考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戲的大版本更新等等，他們甚至還會出一個專門的文檔來描述新舊版本更新對比。

操作流程引導：

顧名思義就是引導用戶完成某一套操作流程，就像LOL里，剛注冊游戲時，系統會引導你完成一局游戲，告訴你該點擊哪里進行匹配，點擊哪里選英雄等等，這種引導通常是讓用戶在真實場景下邊操作邊引導，紙上得來終覺淺，須知此事要躬行嘛，身臨其境的體驗才是快速學習的王道，這種的引導非常適用于操作步驟繁瑣的產品。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

概念簡述 

視覺品牌這一概念，既陌生又熟悉。大部分ui設計師都或多或少做過視覺改版或者風格升級，先來看兩個概念：視覺風格&視覺品牌。

▲視覺風格&視覺品牌重點偏向

風格是藝術概念，是在整體上呈現的有代表性的一種面貌。風格能反映時代、思想、審美等特性。也是設計師對審美獨特鮮明的理解。那么視覺品牌呢？它除了要體現產品本身特性，融入產品希望傳達的感受，也要思考什么對用戶有意義。研究視覺品牌，就是探索如何通過設計維護用戶對于產品的好感度 ，通過有共鳴的設計傳遞正能量，讓產品獲得最大的認同。簡單來說：視覺風格重點是設計師對審美的傳達；視覺品牌則是通過挖掘產品有價值的特點，創造有共鳴的視覺去打動用戶，助力產品。

▲視覺品牌作用

了解完視覺品牌的概念，我們簡單聊下它的作用。視覺品牌最大作用是建立用戶和產品的關系。vivo互聯網單個產品的視覺品牌也受vivo母品牌影響，不同業務被滲透的程度不同。比如vivo品牌對vivo官網，vivo商城影響比較大，但是對瀏覽器，i視頻，短視頻的影響就比較小。

流程

那么，如何定義好產品的視覺品牌？借企業文化里的一句話：做正確的事，并把事情做正確。在設計工作中，這句話也有一定的指導意義，我們先要確定是否要做視覺品牌，再用合理的流程規劃好每一步。

結合過往的業務經驗來看，對于已有視覺風格的產品來說，需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候：1、產品轉型、重大業務調整（包括用戶人群、需求變化等）；2、與相關行業設計語言水準差距巨大。另外需要考慮的還有時間安排，由于整個流程耗時需要大約12周（3個月），所以設計師前期就要做好時間規劃。

確定要做視覺品牌工作后，需要準備哪些資料？項目環節和流程如何？讓我們來看下這12周需要做的事情和基本順序：

▲視覺品牌的流程

我們接下來會重點介紹流程中關鍵的8個步驟（圖標標藍色的step1～8）：1、品牌定位資料熟悉 2、明確視覺品牌關鍵詞 3、關鍵詞發散和可視化 4、提取元素建立視覺符號 5、完善主要頁面 6、驗證視覺風格喜好 7、完成所有頁面的視覺效果 8、整理成視覺品牌規范手冊。

1 、品牌定位資料熟悉

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

▲案例：vivo瀏覽器品牌屋

圖中為瀏覽器品牌屋資料案例，經過項目成員討論，瀏覽器產品最終關鍵詞：智慧、有趣、默契、可靠、年輕。

2、 明確視覺品牌關鍵詞

然后，從產品關鍵詞里，我們需要選出符合產品定位又能達到受眾心理預期的視覺品牌關鍵詞，聚焦產品的視覺調性。視覺關鍵詞一般有2～5個，需要視覺專業團隊、項目相關人員、核心用戶一起來挑選，用戶的選擇可以放在問卷里進行，通過快速測試了解用戶對產品的視覺感受和期待。如果確定的視覺品牌關鍵詞比較多，可以適當確立1～2個核心視覺詞匯，便于聚焦后期的風格指導。

▲明確視覺品牌關鍵詞

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

3、 關鍵詞發散和可視化

發散

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

▲三層映射案例：詞語友好

在大量衍生詞里，我們還要經過一輪討論篩選，去掉不合適的詞語。主要看衍生詞和我們的視覺關鍵詞的關聯度是否足夠高，以及是否適合用視覺語言表達等。

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

▲Design OtoO方法 

這套工具方法的核心步驟分別是：收集，組織，反應，評估。每一步都有一些工具模型可以套用，能夠較準的幫助大家達到目標，找出合適的關鍵詞。

可視化

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

▲情緒板拼貼常用方法

4、 提取元素建立視覺符號

每個情緒版帶來的設計靈感都不相同，所以最終會有多個視覺符號方案。第四個step就是來解說如何從單個的情緒版里提取視覺符號的特征。

▲組成視覺語言最基本的五個維度

“形色字構質”是組成視覺語言最基本的五個維度，當你描繪一個東西的樣子時，你通常會從這五個維度去闡述。所以，我們也從5個維度來提取視覺符號的特征。需要注意：五個維度不一定需要全部進行提煉，有時候遇到前期已經確定的就可以直接拿來用，也有的不涉及的，比如字體可能在部分圖標里沒有出現也就不需要提煉。讓我們來對色彩、圖形、字體、質感、構成這5個維度來細細展開：

(1) 色彩

▲快捷工具Dopelycolor對圖片進行色彩分析

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

▲提煉色彩需要重要關注4點

需要注意的有以下幾點：1、已有的品牌色是否要延續使用 2、選中顏色需要后期調整三元素，達到最好的視覺效果  3、如果有輔色，主輔色多結合色環考慮合理性 4、你選的顏色是不是和市面競品太過雷同，是否要做點差異化？

(2) 圖形

對于我們大多數產品目前現狀，符號基礎圖形是不宜變動的。大環境也是如此，例如很大一部分視頻類應用圖標都圍繞播放三角展開。因為變化會引起用戶新的理解，可能會帶來識別和理解的成本，所以項目設計師在方案的設計階段，會多做幾個保守的常用圖形相關方案。

另外，在沒有基礎圖形的產品品牌中，通常需要通過腦暴會去討論出適合產品的符號基礎形態。例如vivo積分商城在視覺品牌探索階段，組織腦暴會議，邀請項目中各個關鍵角色一起來發散討論適合積分產品的貨幣符號圖形（這也是積分定義的視覺品牌符號）

▲vivo積分商城貨幣符號發散腦暴會現場

基礎圖形獲取方法介紹完了后，圖形的藝術表達，也就是圖形設計是需要我們通過情緒版或者常用創意手法來捕捉的。通過情緒版，我們可以提取出零碎的一些特征，這些通過觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有：描邊圖形、線面結合等。另一張能看出的有：大圓角、簡單幾何、Q型。

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

特征好提取，但是如何去用于輸出我們的視覺品牌符號，這塊就依賴各位設計師的設計表達了。到這一步，建議參與的設計師們進行視覺比稿。比稿的設計師們可以看一看常用的6種創意設計手法，這些創意手法都是較常見的，在設計中協助我們創意的迸發。

▲6種常見圖形創意手法

(3) 文字

嚴格意義上，符號里的文字也是圖形的一種。不過，針對用文字來做的符號，可以參考字體創意設計的10個方法。這里不一一闡釋含義了，大家可以在網上找到更多每一類圖形的案例和應用解說。

▲10種常見字體創意設計方法

(4) 質感

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

▲質感素材專題

(5) 構成

構成通常會用在版式，招貼之類的平面設計中。很多產品標志在構成上都很講究，圖標的內容和留白比例搭配合理，具備設計舒適感。我們在做符號設計時候，同樣要非常關注構成，好的構成會讓我們的符號更具魅力。常用的圖形構成有9種，我們在做圖形時候可以多去嘗試，也可以疊加嘗試，找到適合的構成樣式。

▲9大圖形構成

案例

回到視覺符號提煉的5大維度方法，我們來看下vivo瀏覽器是如何提煉視覺品牌符號的。由于不同設計師整理的情緒版，方案都不一樣，接下來來看瀏覽器視覺品牌探索眾多方案其中的一個例子。

▲視覺符號提煉的5大維度

首先來看下瀏覽器目前一些背景設定，去除既定的情況，我們需要在這幾個方面找尋特征（輔色、圖形藝術、質感、構成），來完成我們的視覺符號。

▲vivo瀏覽器背景設定

在這個方案中，設計師從情緒版提取了想要的特征（圖片中藍色文字）：

顏色：從情緒版提出占比較高的顏色，歸納成色組，在色環中逐一討論去留，去除對比強烈的黃色（因為瀏覽器作為工具類產品并不想傳達出刺激，沖突，過于活力的感受，故去除。）在鄰近色（青色、皮粉色）里考慮避開性別因素，青色更加適合。然后調整一下rgb，飽和度提高一些。

圖形藝術：延續地球元素，情緒版提煉的：大圓角、簡單幾何、Q型，描邊圖形，線面結合。

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

構成：結合情緒版和圖形構成9個方法，提取并運用的主要特征是動勢，也是想賦予符號活力感受。

最后，經過草稿比稿，評審通過的方案和確定的符號5個特征如下：

▲vivo瀏覽器符號的5個特征

5、 完善主要頁面

視覺品牌符號完成以后，接下來需要繼續繪制與符號強關聯的頁面。這些模塊有：loading、缺省、核心頁面、插畫插圖場景。不是把視覺品牌符號簡單的原封不動放在各個頁面里，而是通過一些設計手法將它更好的融入在頁面中。

通常，核心頁面模塊的視覺呈現，都是基于已定的視覺品牌符號特征去發散。目前我們團隊有兩種不同的思路：一個是從先前符號里提取主要某個特征并結合場景做出版式布局的延展。類似我們做vi時候常用取logo的一部分進行圖形組合再創意。另一個是將已定符號的不同特征進行多個組合，創作出符合這些特征的衍生的新視覺。

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

下面是vivo瀏覽器視覺品牌符號延展的圖形或頁面樣式：

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

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

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

▲視頻操作引導樣式（4/8特征）

▲應用在整體頁面效果

看完瀏覽器的符號延展方法，再來感受下另一個方法：通過符號，延展多個版式視覺的案例——短視頻視覺品牌探索。項目設計師主要對視覺品牌符號圖形特征做了延展，局部提煉并創新版式。

下圖是短視頻視覺品牌符號，基于此為基礎型，設計師根據總結的6種手法，用對稱、平移 等方式進行拓展，結合頁面實際情況完成。

▲短視頻品牌符號以及圖形應用解說

▲短視頻品牌符號頁面背景應用

▲ 物料拓展概念

6、驗證視覺風格喜好

完成主要頁面后，我們會進行風格測試，用來驗證不同的設計方案在用戶眼里的喜好程度，從而修正設計師的認知偏差。我們建議至少完成3個視覺品牌符號方案和對應3套頁面來供用戶測試。

關于風格測試，是將已有的方案通過問卷和簡單的線下訪談，得出用戶的喜好結論。因為是敏捷測試，只需要一周就可以出結論。在這一步，有5條測試重點和對應解讀需要設計師關注，具體內容參考下圖：

▲5條測試重點與解讀

目前vivo瀏覽器和i視頻都在視覺品牌升級時候，運用了這個較為敏捷的測試方法。

▲i視頻視覺品牌3套方案風格測試復盤

▲vivo瀏覽器視覺品牌升級核心頁面風格測試

7、完成所有頁面的視覺效果

經過用戶的驗證和后期修改，我們確定好了唯一的一套最合適的視覺品牌。在設計組內部評審+項目組核心成員評審效果通過后，接下來工作就是按部就班的去完成后續頁面的規劃和落地。這一環節的工作體量較大，需要花時間去梳理替換所有頁面。整體t替換預計耗時需要2周左右，建議多些成員參與完成。

8、 整理成視覺品牌規范手冊

最后一步也是最重要的一步，需要把視覺品牌的設計指導和規范進行沉淀。視覺品牌規范手冊是需要項目組設計師一起維護的。好的設計語言是第一步，維護和讓其發揮最大價值（原則、一致性、效率）是視覺品牌規范手冊的意義。

▲視覺品牌規范手冊4大模塊

目前我們已經梳理出vivo瀏覽器、短視頻的視覺品牌規范手冊。內容包括4個部分：品牌概述、品牌符號、視覺語言、物料規范。對產品的視覺品牌理解和如何應用會完整的體現在手冊里，建議每一個參與項目設計師都應該在設計前先整體看一遍。

結語

視覺品牌的定義流程以及方法，是我們團隊資深ui設計師第三季度重點研究和探索的產物。希望能給正在做視覺品牌相關工作的設計師帶來一些幫助和啟發，如果有建議或者疑問，歡迎通過VMIC UED公眾號和我們交流，讓我們一起優化好這個視覺品牌定義體系，為用戶創造更好的視覺體驗。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 動態在 UI/UX 扮演的角色

動態能激發用戶的情緒，為靜態的視覺設計注入活力與生命力。有趣、奇妙、吸引人的動態，能讓你的產品展現與眾不同的魅力。另一方面，動態有助于支持可用性，通過自然流暢的物理運動，突顯元素在過渡時的關聯性與狀態變化，增強用戶對產品功能的感知。

因此，動態設計必須是有意義的，同時兼具可用性與美感，UX 行業也將動態設計視為多學科的交集，細分成一個專業的設計門類。作為 UI 和 UX 設計中重要的組成部分，動態設計從三個層面發揮影響力：

提高連貫性（Increase Continuity）

讓界面元素在用戶流程中順暢地轉變與過渡，將用戶操作導向期望的任務結果。

連接場景（Connect Scenes）

在轉換場景的過程中扮演潤滑劑的角色，闡明場景之間的位置、層級與空間的關系。

視覺吸引（Visually Appealing）

聚焦用戶視線，將其注意力放在重要的事情上，從而起到信息傳達、提升識別度的作用。

2. 動態設計趨勢

植基于 UI 和 UX 設計而發展的第三維度，動態設計的趨勢自然與兩者密不可分。綜觀近年，多數作品巧妙地運用絢麗的動態圖像（Motion Graphics）與動效設計，讓新的視覺手法得以表現更為出彩。再者，隨著移動端芯片性能提升，跳脫二維平面的表現形式不再難以實現，讓設計師能夠解開束縛，發揮無限的想像空間。2021 年的動態設計可歸納為三個趨勢：

增強表達（Enhance Expression）

運用引人注目的表現手法將信息傳遞給用戶，包括變形、動態文字和背景動畫。

創造層次（Create Hierarchy）

在視覺平面中創建空間層次結構，遮罩與視差是常用的表現手法。

擴展維度（Expand Dimensions）

突破二維限制，將界面元素多維化營造空間感，例如 3D 動態圖形和攝像機運動。

增強表達

1. 變形 Morphing

變形創造了一種連續的敘事狀態，告知用戶元素的狀態或作用發生變化，是一種最引人注目的表現手法，能將形狀、圖像、色彩無縫地融合與過渡。

動畫插圖 Animated Illustrations

2021 年看到許多有趣、吸引人的插圖，而更多的設計師開始為靜態圖像添加動態，也讓 GIF 和動畫插圖越來越受歡迎。

動畫插圖看起來更生動，并帶有敘事性質。在示例中，運用動畫插圖來呈現這杯果汁是由哪些水果打成，比起文字描述更能吸引觀眾的注意力。

by Lobster

通過動畫插圖來呈現同一系列的轉變，有利于延續外形上的特征，讓不同的物體具有連結性。比如從桌子、衣柜到燈具的連續變化，同樣風格的系列家具利用動畫來體現一致性。

by Graceful illustrations ?

流體動態 Liquid Motion

動態的有機形狀，包括流體、煙霧和火焰等粒子效果，能夠極大地增強視覺效果。流體動態并非明確的過渡與場景轉換，而是顏色在流動的液體中擴散，進而創造出抽象或真實的視覺形狀。這種風格能實現無縫過渡，并為設計增添有機感，也是 2021 年最引人注目的動畫趨勢之一。

運用流體動態來展現抽象的有機體，除了輕易地攫取受眾目光，還讓人不自覺地佇足在畫面上，感受流體變化的韻律與美感。這類動態設計可作為烘托主題的背景動畫，或是吸引目光焦點的主角。

by ?anton mishin?

流體動態運用到網站設計所營造的視覺沖擊力更為驚艷，能為用戶帶來獨特、新鮮的視覺感受， 使得流體動態深受風格前衛的設計師喜愛。網站還能利用鼠標懸停與流體進行互動，因此會在許多特效網站見到流體動態的蹤跡。

by Gilles Tossoukpé

動態漸變 Dynamic Gradients

扁平化設計缺少現實質感的元素，搭配漸變色能有效緩解不足，為設計創造深度與層次。變化中的漸變色同時帶有動感與舒緩，充滿活力卻又平靜。使用動態漸變能讓設計師展示一系列不斷變化的情緒，許多內容創作者和品牌已經注意到這一點，開始在廣告活動、識別設計和數字內容使用動態漸變。

by Pixelz Studio

微交互 Micro Interactions

在用戶體驗設計中微交互變得日益重要，而動態設計正是微交互的靈魂所在，即使只是微小的視覺提示或反饋，都是人機交互易于使用的關鍵。從經典案例來看，微交互的動畫細節必須帶有明確的目的性，讓用戶獲得實時反饋，指導用戶進行下一步。從近幾年的設計趨勢來看，微交互已成為不可或缺的存在。

by Илья Бабушкин

by Google

動畫商標 Animated Logos

過去幾年動畫商標是最流行的動畫趨勢之一，通過各種視覺效果，設計師能創造出不同類型的動畫商標，許多企業開始采用動畫商標作為吸引注意力的手段。多數情況下，商標是進入網站時最先看到的東西，因此商標應該令人難忘、引人入勝，并使用符號或排版來揭示品牌個性。結合動畫的優勢，設計師可以運用一些動態或效果來講述簡短的故事以強調品牌特征，并為靜態排版和商標注入一股活力。

by Yulia K.

by Meta

2. 動態文字 Kinetic Typography

動態文字是使用移動文本來吸引注意力的動畫技術，許多卓越的品牌在網頁設計中使用動態文字，為網站外觀增添動感和視覺沖擊力，是近年 UI 動畫的趨勢之一。

設計師使用動態文字為單詞或句子添加生動的元素，借此定下情緒氛圍與設計基調，吸引用戶的注意力。幾種常見的表現手法，擠壓和拉伸一個詞能會喚起一種俏皮感，而連續重復這個詞則具有催眠感和前衛感。另外，使用大號和粗體字體來增強份量以強調某些信息，也是動態文字的特征之一。

無論在電商網站、電視廣告或音樂視頻，動態文字都占有舉足輕重的地位，有利于加深用戶對品牌的關注與印象。

by HOLOGRAPHIK®

by Hrvoje Grubisic

3. 背景動畫 Background Animation

通過背景動畫來強化敘事，成為許多行業常用的品牌傳播手段。你可以創建動態的品牌故事，展示有趣的制造過程、產品的使用場景。背景動畫深獲大眾喜愛，它能讓用戶在進入登錄頁或網站首頁時，輕易地了解更多有關公司或產品的信息。調研顯示，從銀行、醫療保健公司、電商零售商、餐館到 B2B 供應商，這些跨越不同細分市場和行業的網站都開始使用背景動畫。

by Carlo Soleri

by Kirill Zhukovsky

創造層次

1. 遮罩 Masking

遮罩過渡是將幾何或有機形狀作為銜接下個場景的遮擋物，等同于舞臺幕布設計，能在界面元素進場或退場時創造連續性效果。這種表現手法簡潔高效，是最常見的過渡動畫之一。

切換場景 Scene-Switching

其中一種遮罩過渡，是將當前場景完全置換，如同揭開蒙在上層的布，逐漸展露疊在下方的景，并利用景物相似性和動作延續性，讓兩個場景能夠順暢地銜接，不致于差異過大，造成用戶心理負擔。

by intent

by Minh Pham ?

狀態變換 State Transformation

另一種遮罩的表現形式，較無明顯的場景過渡，而是利用遮罩來表現景物的狀態變化，界面元素和布局基本保持一致，以此塑造無縫過渡的視覺效果，這種手法被廣泛地使用，例如氣候變化、人物換裝、產品組合等。

by Daniel Tan

by Outcrowd

2. 視差 Parallax

視差是利用不同的界面元素以不同的速率移動，創造前后景深的分離效果，借此在平面中塑造空間層次，已成為網站首頁最為普遍的表現形式。

視差之所以能形成一股風潮，廣為各個行業所接受，一方面是信息層級更加清晰，明確定義各種元素的關系，讓用戶專注于主要操作和內容，將背景或非交互元素往后退，同時保持設計的完整性。另一方面是豐富的層次變化，當用戶滾動或滑動時，能在扁平化界面拉開空間關系，利用不同的速率和縱深，塑造多層次的感官體驗。

by Studio V?R

by Studio V?R

擴展維度

1. 3D 動態圖形 3D Motion Graphics

近年來，結合 3D 動態圖形的界面設計呈現爆炸式增長，雖然創建 3D 動畫需要更多的時間、技巧與協作，但不可否認的，3D 動畫比 2D 圖形更加逼真，從而提供更具吸引力和互動性的用戶體驗，并有效地展示品牌的活力。

更生動的表情 Lively Emoji

動畫的吸引力在于能夠創建各種角色，并為無生命物體注入生命力，表情符號就是一個很好的例子。作為獨特的網絡語言，表情符號生動地描摹日常面對面交流的非言語信息，隨著圖形界面的設計趨勢逐漸結合 2D 與 3D，運用 3D 動態圖形來創造更加動感、擬人化的表情，能讓這些非言語信息更加豐富，有機會引領下一波風潮。

by Outcrowd

營造空間感 Spatial Awareness

3D 動態圖形為平面設計建構了空間敘事框架，在扁平化界面中展現立體感，從而表達空間中元素的位置與層級關系。多維化的發展趨勢，推動了視覺表達形式的演變，空間感讓界面設計更符合人類的認知邏輯，運用各種 3D 運動特效，包括旋轉、翻轉、折疊、透視、Z 軸位移等，打造令人難忘的感官沖擊。

by UI8

by Bruno Ortolland

擬人動畫 Anthropomorphic Animations

擬人化能讓物體、植物、動物等非人類事物，表現出人類屬性的行為與狀態。動畫片運用擬人的手法是最普遍的，1927 年迪士尼第一部系列動畫《幸運兔子奧斯華》的主角便是擬人的兔子形象。由于人們容易被以人類行事的事物所吸引，越來越多設計師在界面中添加擬人元素，利用這種效果讓畫面更加生動有趣，增強用戶體驗的愉悅感。

by Gregory Riaguzov

2. 攝像機運動 Camera Movements

在動態設計中，攝像機運動是最自由、靈活的一種表現形式，能讓畫面過渡更有張力，突破 2D 平面在視角上的限制，創造一個無界線的立體空間。常見于影視、動畫和廣告的攝像機運動，包括推近、拉出、平移、跟拍等方式，備受動態設計師青睞，讓用戶以多變的視野探索數字產品。

推近/拉出 Dolly In/Dolly Out

推鏡頭是指被拍攝的對象不動，攝像機由遠而近，朝著對象不斷推進， 用來突出人或物的主體。鏡頭推近的運動方式，用來呈現從整體到局部、由分散到集中的變化，引領用戶進入故事情景，給人一種身臨其境的感受。

相反地，拉鏡頭則是將攝像機后退，使畫面逐漸遠離被攝主體，側重的是從局部到整體、由點到面的轉變，強調主體所處的空間環境。隨鏡拉出的景象，能激起人們無限的想像。

by Michael Crawford

by Ali Zafar Iqbal

水平/垂直移動 Truck/Pedestal

水平向左或向右，垂直向上或向下移動攝像機，使畫面不斷變化，讓用戶跟隨鏡頭視角一起移動，產生一種置身其中的感覺。這種運鏡方式，通常用于具體的場景，利用角色或景物的延續性來消除場景過渡時的邊界，表現出一種流動感，無論是手勢滑動或鼠標滾動都能有順暢的操作體驗。

by Netguru

by Minh Pham

結合多種運鏡 Multiple Camera Movements

運用多種攝像機運動相當普遍，既能擴大視野，又有很強的空間感，可以更加自由與多樣地展示不同視角和情景。比方說結合橫搖（Pan）、直搖（Tilt）和跟隨（Tracking）鏡頭，連續而詳盡地展示一個產品，由于畫面始終跟隨一個主體，有利于突出產品特征，并讓用戶從不同的角度和距離觀看產品，是一種增強臨場感和參與感的有效方法。

by Sang Nguyen

by Paul Ilnitski

一鏡到底 One Shot

在電影中為了不將觀眾的情感和注意力割裂，使用一個鏡頭來完成全片的場景刻畫和敘事，這種拍攝手法被稱作一鏡到底或長鏡頭。連續鏡頭逐漸被運用到界面過渡，以此增強操作過程的流暢性，例如一氣呵成的購物體驗，或是貫穿全場的人物角色，其特點是給用戶最沉浸的感官體驗，無間斷地體驗整個流程。

by Orizon: UI/UX Design Agency

by Minh Pham ?

結語

動態設計作為近年熱門的創作形式，廣泛應用到各個領域，逐漸成為設計的主流趨勢。受益于技術演進與發展，從創意生產到落地實現，動態設計的門檻不再遙不可及。設計師得以將想法轉化為生動、有趣的作品，并有機會創造新的表現手法，玩出許多新花樣，成為 2021 年動態設計的特色。

本文歸納的設計趨勢，有助于啟發設計師對動態設計的想像，激發更多創作靈感，為靜態界面賦予靈魂，打造令人難忘的視覺體驗和品牌形象。

文章來源：優設 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

導航欄（Navigation Bar）作為一個基礎控件，極高的復用率和看似單調的設計樣式，往往會讓人習慣性忽略其中隱藏的諸多細節，以及背后的設計原因。本篇文章主要探討導航欄視覺和交互上的各種組合可能性和相關設計細節點，希望能提煉出一般性的設計規律。觀點僅是個人粗淺的分析，如果有哪里說得不對的地方，希望大家多多指點。

理解導航欄的作用

導航欄是用來幫助用戶定位、導航、操作的基礎組件。既負責告知用戶當前所在位置，防止迷失，又負責連通頁面跳轉路徑，允許用戶在不同層級的界面之間來去自如。同時還承載了針對當前頁面全局性的操作。

簡要概述導航欄的作用，有以下 6 個：

1. 定位：告知用戶當前所在位置
2. 導航：提供離開當前頁面的出口，即返回上級（適用于非一級頁面）
3. 提供全局操作：一般是以圖標、文字、按鈕或組合的形式存在
4. 扁平層級：以分類 tab 為代表，本質是將多個相關的同級頁面聚合在一起
5. 增加品牌曝光：一般放置在首頁左上角
6. 解釋頁面當前狀態：屬于瞬時狀態，動態變化

梳理導航欄常見的布局方式

實際上，導航欄的布局方式非常豐富，除了上文提到的幾種基礎布局之外，還有許多復雜的布局方式。

不同的布局方式體現了不同頁面的信息架構。

為了方便描述，我將導航欄可以放置信息的部分劃分為左、中、右三個區域。

接下來，我將從「結構簡單」到「結構復雜」的順序來討論導航欄的各種布局方式。

突出視覺重點的 4 種設計策略

視覺服務于功能，不同視覺權重背后對應的是不同功能權重。以搜索功能為例，不同產品、不同場景下，搜索功能的權重都是不同的。對于電商產品來說，首頁搜索是非常關鍵的流量入口，必須足夠突出，減少用戶的認知和操作負擔，使用戶更加順暢高效地使用產品。而對于不同產品或不同場景來說，搜索的優先級就未必有這么高。

提升視覺權重的本質是將重要信息和次要信息「區分」開來，而建立區分的本質則是「建立對比」。

我們以“搜索”功能為例。

拆解視覺細節

我們從以下幾個方面來拆解導航欄：

1. 標題樣式
2. tab 樣式
3. 控件樣式
4. 背景樣式

整理交互細節

首先，我們要了解，頁面固有的層級結構決定了某些信息是常駐于屏幕的，另外的信息是隨著用戶豎直方向滑動手勢而滾動的。而導航欄絕大多數情況下是常駐于頁面頂部的。

盡管導航欄一般都是常駐于頁面頂部，但仍有不同的情況要分類討論：

1. 常駐區域無變化：導航欄不會隨著用戶手勢的滑動而發生變化。
2. 常駐區域有變化：導航欄會隨著用戶手勢的滑動而發生變化。

首先要明確，哪些內容屬于常駐內容。

上方這種情況比較明顯，頭部區域是常駐區域，但要注意并不包括四個主圖標。

我們再來看下面的案例。

上述變化的本質是從「狀態 a」過渡到「狀態 b」。

狀態 b 決定了常駐于屏幕的元素數量，這和內容層顯示效率息息相關，需要在頁面設計之初就考慮好。

確定好了「常駐區域」和「被折疊區域」之后的交互就比較簡單，直接折疊相應內容即可。

使用這種「狀態過渡」的思路，相當于明確了變化的起點和終點，之后就可以將精力投入在如何使兩種狀態之間的過渡更加自然。

當我們確定了「過渡變量」之后，我們只需要考慮如何安排變量如何入場（進入狀態 b）。變量的出場（撤出狀態 a）并不需要考慮，因為變量是跟隨內容層一齊滾動的，自然會被上層的導航欄遮擋。

上方微信讀書的案例用了硬切的方式，過渡變量直接出現在狀態 b 中。通過觀察 iOS14 的信息，我們不難發現，iOS 系統采用的標題欄過渡方式是漸現。本質上沒有區別，細節上，漸現相對于硬切更加柔和絲滑。

結語

以上是我個人對導航欄相關的一些整理和總結。

分別從功能作用、布局樣式、如何突出重點、視覺細節、交互細節幾個層面梳理了導航欄設計策略和設計思考?；A且復用率極高的控件蘊含了許多細節和門道，通過大量細致觀察總結出一般性的規律，希望我的文章能幫助大家看到一些平時可能會忽略的細節。

文章來源：優設 作者：設計師doo
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

最近在整理系統的組件規范，收集各個場景下的組件應用，在搜集應用控件時，彈窗的套用、混用、亂用情況挺多的。

主要是模態框和非模態框的使用。

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

非模態框：一般沒有那一層蒙板，不會影響所屬的主流程，也不用擔心原有進度會停止，仍然可以持續操作。即打開非模態也能看見底層的主流程。

概述

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

      你是不是經常感覺自己在項目組里沒有發言權，發了言也不被重視，想做的設計也落地不了。尤其是做到運營相關的設計時，感覺設計價值微弱。那么我今天來說一下如何通過設計驅動運營價值最大化。作為UED我們并不是單純的只負責活動的美化，而是作為全鏈路的體驗設計師，把活動運營當做一個產品項目對待。從業務開始跟蹤，明確目標、建議方案、優化體驗鏈路、優化數據策略等不同階段做出設計價值。我們的投入初見成效，以下是我這段時間的總結，分享給大家，希望能給大家帶來新的思路。

一、明確活動業務目標

1.1 活動目標

運營活動（Operating activities）是指針對不同性質的活動進行運營，包含活動策劃、活動實施、營銷推廣、品牌傳播，達成提升相關運營指標的有目的的運營行為。為了更好的達成既定目標，項目立項后我們需要了解此次運營活動的目標，以目標展開設計策略和設計實施。常見的運營活動目標主要是拉新、促活、回流、營收，本質上就是利用增長模型AARRR來達成運營目標，助力產品用戶增長。

1.2 活動目標分類

目標的細分拆解后，基本都是圍繞“用戶、營收、品牌”這三個維度來進行活動策劃設計。一般來說目標越單一活動復雜度越低，目標綜合性越高，越需要調動不同類型用戶參與，活動的復雜度就越高。對于綜合性目標的活動，不能以單一數據來判定活動效果，需要進行綜合分析。定量的我們可以埋點分析數據，定性我們可以通過問卷來調研用戶對活動附加效應的感知，比如對品牌的識別和記憶以及NPS（凈推薦值）。

二、參與活動策劃過程

活動策劃過程就是對整個活動方案設計的過程，運營人員和產品經理落地初步方案后，設計師就可以參與進來。這一部分需要看設計師的自主積極性，和團隊流程的開放度。總體來說設計師積極參與策劃過程也能很好的助力活動實施。

其一、設計師平時關注活動較多，可以在腦暴的時候提出一些相對專業與互補的建議；

其二、參與策劃過程或者參與方案評審過程中能幫助設計師更好的理解這個活動的底層邏輯和核心價值；

其三、前期項目組的方案想法達成一致可以減少對后期的修改。

三、優化體驗鏈路

除了遵循尼爾森十大交互原則，在《社交紅利》一書中，徐志斌老師總結了活動運營的6特點：免費、簡單、有趣、透明、可積累、可兌換。在優化鏈路時，我們可以從這幾個方面考慮：

3.1 本著簡單、有趣、易傳播的設計原則。

簡單：是指用戶易理解，教育成本低，操作簡單。在運營設計中一般我們會與游戲結合，在此我稱為游戲運營。在游戲運營的設計中，如果不是一個約定俗成用戶都熟悉的游戲任務，教育用戶如何操作的成本是相對較高的，需要有詳細的操作引導。一般引導的步驟注意不要超過四步，或者在用戶使用的場景恰當的分步展示。比如鯉魚跳龍門游戲操作就比較簡單，引導只需要一個簡單的提示；而京東全民運動會作為大型活動比較復雜，引導步驟較多，對一步分用戶來說認知成本高就不會參與活動。

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

易傳播：是指低理解成本傳播與裂變。一是觸發按鈕突出可識別；二是操作任務明確無歧義；三是傳播交互易操作。通常我們設計的時候會理所當然感覺用戶是很明確他們的操作行為的，但是基于某證券一期的活動用研反饋，用戶對活動的邀請機制，甚至是步驟都是迷惑的，不知道自己是否已經成功分享，導致失去再分享的動力，為此我們在邀請模塊下設計了簡易的步驟去引導客戶。

3.2 考慮活動規則的底層邏輯與開發算法能否實現。

設計方案時，需要考慮到開發實現的可行性。比如活動的任務得分和游戲得分規則機制，開發算法能否實現，如果開發算法難以實現就會導致大返工。所以需要及早跟開發做好評審工作，并且是很細致的評審，只是粗略評審后續還會出現問題。

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

交互狀態都要考慮全面，如登錄前后狀態，空狀態，各個等級的狀態，任務前后的狀態，不同類別用戶的狀態等。

四、設計策略

運營設計策略可從策略層、風格層、基礎層三大層面展開。整個過程可以使用雙鉆模型，通過發散和聚焦來打開思路，聚焦落地目標，以下是我總結的設計策略畫布。

策略層：1、確定增長動力；2、鎖定活動類型；3、故事場景化；4、IP角色品牌化；5、游戲化設計

風格層：插畫風格、平面風格、立體維度、復古與趨勢

基礎層：配色、字體、圖形、動效、聲音

4.1 策略層

策略層是通過前期基于產品定位、品牌定位了解后，針對運營目標分析用戶畫像用的一系列的設計策略。為實現最優的業務轉化，需要在設計之初明確活動覆蓋的用戶人群。同時在各個環節都能考慮到特定用戶群體的不同需求，尤其是在業務轉化的過程中，考慮用戶體驗地圖，就能更好的到達運營效果。以下是我總結的策略畫布：

常用的運營策層包括以下幾個步驟：1、確定增長動力；2、鎖定活動類型；3、故事場景化；4、IP角色品牌化；5、游戲化設計。

1、確定增長動力

增長動力是指用戶產生行動共鳴的心理機制，是刺激用戶增長的裂變的核心。

利益刺激：使用金錢、虛擬貨幣、實物大獎等，引起用戶內心的金錢欲和貪小便宜的心理到達動力。比如抽獎、紅包、返利、電子貨幣等。

共情刺激：激發用戶的使命感、炫耀、好奇、從眾、互惠等心理，使活動場景與用戶心智產生共情的動力。比如賬單、戰績、評價、祝福等。

藝術刺激：通過美圖、插畫、藝術圖等，與用戶達成審美和情懷共情的動力。比如年畫、主題卡牌、美圖美照等。

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

2、鎖定活動類型

確定增長動力后，需要鎖定活動的類型。如果我們簡單、易傳播的原則，可以選用市面上常規用到的活動類型降低用戶認知成本，對于一些比較有名的活動，像支付寶集五福，其本質就是通過完成運營任務來收集某種虛擬物品，再由集齊的虛擬物品變現紅包完成用戶利益激勵。設計時不能完全照搬，既要根據活動目標結合產品自身邏輯層級優化鏈路，也要在表現層做好風格形式的區分，已達成有新的識別度的活動。

常見活動運營的類型：

收集類（集福、集卡）；養成類（螞蟻莊園、擼貓）；操作類（鯉魚跳龍門、金哥接金幣）；棋牌類（大富翁）；抽獎類（大轉盤、抽簽）；測試類（心理測試、智力問答）等。

3、故事場景化

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

4、IP角色品牌化

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

5、游戲化設計

由于游戲本身對用戶就有一種天然的吸引力，加上可以很好的與運營活動結合打造沉浸式體驗，越來越多活動都是與游戲結合來達到活動目標，也叫運營的游戲化。核心宗旨是“以人為本”的設計理念，并不是以功能為中心，在設計時可以使用游戲化設計八角模型。

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

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

成就——進步與成就感

指參與過程中取得進步、獲得技能、獲得榮譽，從而獲得成就感，去克服困難達成目標。一般我們會通過證書，勛章，排行榜等去給與用戶成就獎勵。挑戰和技能是促使用戶不斷升級的主要因素，為了讓用戶沉浸其中護住心流，適當的挑戰難度和技能解鎖就顯得尤為重要。挑戰難度高了容易引起用戶的焦慮，難度低了又會讓用戶感覺無聊。比如集卡行動，在考慮總預算不變的情況下，如何設置稀有卡的比例，集卡的難度就尤為重要。支付寶集五福在初期，敬業福的比例比較低，所以用戶抽到敬業福的體驗就很開心，但隨著支付寶后面為了擴大社交屬性，提高了集齊率，集五到五福的興奮感就弱了，導致部分用戶失去動力，因為集到的人越多后續瓜分的錢就越少。

稀缺——稀缺性與渴望

當想要某樣東西獲得率很低的時候就有了稀缺性，能激發起用戶更大的渴望。就像支付寶的敬業福，其他幾個福集齊較快，獲得后就沒有很大的驚喜感，而獲得敬業福就會非常激動，甚至一度風靡在微信朋友圈曬敬業福，因為集到敬業福相當于集齊了五福。這種稀缺也成為了氪金最好的辦法，比如稀缺的裝備，高于其他人的權限等。

創造——創意與及時反饋

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

擁有——所有權與擁有感

使用戶擁有或控制某樣東西，獲得激勵，持續升級。結合挑戰設置，當用戶通過一定努力而擁有的東西會倍感珍惜，也能激發其收集欲望和挑戰欲。最常用的就是收集類的游戲，比如各種收集類的活動中，先會獲得一個物品激發你對該系列的占有欲，不斷收集其他款。還有一種常用的是勛章的激勵，勛章本身是對行為的階段性的獎勵，好的策略和勛章樣式同樣能激發用戶的收集欲。

社交——社交影響與關聯性

社交影響指的是別人的狀態、想法、行動、言語等對外展示能驅動到他人，也就是我們的行為通常會收到其他人的影響，比如羊群效應。就像看抖音，點贊量多的，沒準我們會跟有耐心看到最后，因為有個潛意識心理就是大家都覺得好，總之差不到哪里去。在游戲和運營活動中，營造有很多人玩的氛圍，鼓勵用戶炫耀自己的成果都是非常見效的方式。關聯性我理解為我們會選擇盡可能與我們有關聯的事物。比如拼多多推薦你去分享，都是優先推薦與你互動最為頻繁的，這樣去拼單和拼單成功的幾率更高。

未知——未知性與好奇

不知道接下來會發生什么，勾起用戶的對未知的好奇心。比如闖關，玩家不斷闖關就是這種未知帶來的牽引。在活動運營中最常見的就是大轉盤抽獎，現在比較流行結合盲盒的活動，就是滿足獵奇心理，讓用戶欲罷不能.

虧損——虧損與逃避心

利用用戶害怕損失屬于自己的東西來讓他們參與進來?？梢越Y合損失厭惡來理解。損失厭惡是指人們面對同樣數量的收益和損失時，認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍，可見損失對我們的心理影響更大。比如商家發給你的免費優惠券，其實你本身不需要購買什么，但是商家偏偏在優惠券上加上時效性，超過活動日期就置灰了，即使你原本沒有購買需求，但是感覺沒用掉優惠券就像損失了優惠券的錢一樣，就會去購買，甚至為了湊單購買更多東西。

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

4.2 風格層：

風格層主要從這幾個面入手：插畫風格，平面風格，立體維度，復古與趨勢。運營的設計風格主要是從插畫風格和平面風格衍生和組合使用。

插畫風格：在ui界分為有扁平插畫、肌理插畫、手繪插畫、MBE插畫、漸變插畫、2.5D插畫、描邊插畫等。

立體維度：按照立體維度可分為扁平風格、立體風格（3D風格）、寫實風格（真實質感，照片合成），在確定立體維度的時候一般會確定整體風格的質感。

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

結合實際風格還有一個維度可以對風格進去區分就是時間維度。首先設計師應該把握最新的設計趨勢。比如在扁平風格流行了很長一段時間，現在慢慢又開始進入立體的風格，尤其是C4D的使用，使得3d風格又風靡設計界。把握潮流趨勢的一般都是當下流程的設計風格，在特定主體下我還是可以追溯時間線，做一些復古風的設計。復古風分中西方，也分具體的歷史時間節點，可以根據主題選擇。

風格選用原則：

一、符合產品調性

二、順應設計趨勢

三、具有鮮明特色

4.3 基礎層：

確定好活動風格后就是打造活動的基礎層，活動最基礎的就是配色、字體、圖形定下了整個活動的基調，而動效聲音則拉開了活動運營的體感緯度。

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

字體：字體的使用一是需要體現活動特色，二是注意字體的版權。好的字體設計可以提升整個活動的畫面質量，尤其是標題可以結合主題重點設計，體現活動特色，吸引用戶注意。主體內容可以用一些免費商用的字體。整體字體的使用不要超過3種，過多的字體會使畫面感受不高級。

圖形：圖形分為大塊面圖形和點綴性圖形，大塊面的圖形使用可以很好的起到第一眼營銷的作用，比較適合創意圖形；點綴性圖形比較適合提升活動的氛圍，提升局部的質感，還可以給人一種潤物細無聲的精細感。

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

a、風格角度入手：使用具有風格特色的點線面的幾何圖形，如孟菲斯風格。

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

c、選用主題活動的關聯圖形：從主題的聯想衍生去創造符合活動的圖形，將衍生圖形重新結構化成為活動的主題標示性圖形。

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

五、數據與策略思維

5.1、不同時效性的運營優化方案不同

運營類活動中數據跟蹤與策略思維是保證活動效果最大化的有效手段。根據運營目標，提取關鍵的轉化點進行埋點，獲取CTR（轉化率)。運營活動從時效性來分可以分為：常駐性運營活動和時效性運營活動。常駐性運營活動我們可以使用abtest去選著更優的設計方案，甚至是隔段時間替換方案，對比分析數據進行方案選擇和優化，這個跟產品優化邏輯類似。時效性運營活動使用abtset的成本太高，所以一般是在上線后根據埋點數據監測來調整相關設計元素、局部交互、文案等來提升CTR（轉化率)。

目標——策略——埋點——跟蹤數據——修改

1、常駐性運營活動：使用ABTest選擇更優方案

2、時效性運營活動：根據埋點數據監測調整相關設計

5.2、上線后運營優化

1、提升曝光率

內循環中多渠道觸達提升曝光率：app、pc端、微信公眾號、短信召喚、線下海報、應用市場等；外部渠道投放：針對不同用戶細分在用戶感興趣的外部熱門渠道投放活動，吸引用戶參與活動。

2、提升鏈路轉化

1）、關鍵節點文案優化

比如在某證券活動中，我們針對線上數據結果做了以下優化（僅部分）：

a、跑馬燈文案激勵，時時播放中獎名單營造活動熱度，提高活動可信度，激發用戶從眾心理。

b、完善邀請引導，對于新手用戶以及沒有邀請好友在頂部進行二次提醒，以大獎刺激用戶參與邀請。

c、用戶進階游戲文案提示完善，對不同等級用戶給于不一樣的紅包激勵。

d、排行榜展示策略調整，前幾百名瓜分大獎的文案優化與曝光。

2）、發放策略調整

根據活動領獎數據分析，通過管控臺靈活配置各個階段紅包金額與數量，提高不同階段的用戶轉化。

3）、斷點用戶召回

通過push、短信的形式對活動用戶分層分類在合適的時機觸達，吸引用戶再次參與。

4）、裂變路徑優化

a、展示榜單（可刮分大獎）最后一名數據,展示邀請人數，激勵榜外用戶沖刺榜單

b、已接受好友再次填手機號驗證,引導至換起app頁面

c、綁定邀請關系后,增加彈窗引導用戶

3、優化效果對比與總結

根據優化前后的數據進行對比分析，把有效提高數據的策略點總結出來，可復用在其他項目。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

由于產品性質和業務階段，身為B端設計師更加需要貼近一線場景，深入了解業務邏輯和用戶使用場景，在不斷深入的用戶調研中，也收獲了一些心得和經驗，所以和大家分享一下我常見的三種用研方式，相關物料可以通過文章底部的原文鏈接得到獲取方式

一、認識用研

1.1設計師為什么需要了解用研

我們對產品進行設計探索的本質是利用已知信息去挖掘未知信息，最終利用獲得的信息進行決策的過程，信息的完整、準確程度與判斷力、等共同決定了決策過程中錯誤決策的概率高低

用研的過程就是一個信息的收集與處理的過程，在信息不足時我們可以通過同理心來“側寫”用戶心智推測信息，這一點從事C端設計的小伙伴應該感同身受，但由于B端用戶畫像與設計師自身往往偏差較遠，單純的通過同理心來感知用戶心智的門檻和難度較大

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

接下來是我對于可用性測試、用戶訪談、問卷調研的學習總結，簡單與大家分享，大家有什么見解也可以互相交流

1.2用研的緯度

這是《贏在用戶》書中經常被人用到的用戶研究二維分布圖，這幅圖很好的展示了用戶研究的緯度，橫軸是研究用戶的結果；縱軸是理解用戶的方式，行為、態度，即觀察用戶做什么、聽用戶說什么，因此，用研主要通過定性調研和定量調研分別關注用戶的行為或者態度

那么什么是定量，什么是定性，行為和態度之間又有什么樣的關系，在正式進入用研工作之前，有必要對這四個方向進行一個簡單的了解

定性與定量

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

• 定性研究主要回答“是什么”和“為什么”的問題，是對種類或者質的差異的分析，說白了就是通過經驗、邏輯、同理心等非量化的方式去分析【主觀】的信息

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

通過上述示意可以發現，定量更加在意得出的數據，至于為什么會得出這個結果，就需要通過定性數據去驗證，因此定性分析在一定程度上會更偏向于闡述某件事物的意義

二者是站在不同的角度看待問題——定量關注數，定性關注人，在實際工作中定性與定量往往相互配合，例如通過定量挖掘關鍵數據，再用定性剖析原因，最后定量進行驗證，兩者結合以求得研究效果的最大化

行為和態度

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

態度則是用戶的主觀想法或者情緒，情緒會誘發用戶產生一系列行為，例如操作遇阻時的焦慮，對產品體驗不滿的憤慨或者Aha moment時的驚喜這些都反映出了用戶對于產品當下體驗的一個態度，關注這樣用戶態度就能收集到產品體驗的信息，所以，用戶行為導致了某種結果，態度則揭示了影響行為的根本原因

在了解了定量與定性，行為與態度之后，我根據目前工作中常用到的可用性測試、用戶訪談、問卷調研，并對每個方法的適用場景和進入調研的關鍵動作進行詳細分析

二、如何選擇用研

在開始進行用戶調研之前，我們需要根據具體情況確定調研形式，以便實施后續的展開工作，根據用研目的、產品設計階段、頻次、所需樣本量和成本等多方面因素進行考慮，選定適合當下情況的調研方式

三、用研執行關鍵動作

A. 可用性測試

1.準備階段

1.1明確測試目的

首先應該以目標為導向，確定需要測試的產品是什么，想要驗證什么樣的結論或者達到怎樣的預期，是為了發現產品或原型中可用性的問題，還是借此與競品進行有效性、效率、滿意度的比較，或是對某些功能點進行測試

1.2設計測試任務

在明確測試目的后開始設計測試任務，測試任務是可用性測試的核心內容，需要根據已經確定的測試目的結合用戶在實際使用過程中可能存在的場景和需求，將任務場景化，然后對復雜任務的整體流程進行拆解，列出任務列表，以此來編寫任務提綱

任務包括場景，操作和具體目標，設計的任務要有代表性，對應的功能或模塊必須是功能使用的典型場景、盡量模擬用戶真實的使用場景；在任務描述時做到語言簡潔，避免指定的操作或引導用戶，若任務流程較長，可以進行拆解形成多個用戶觸點，但觸點操作不需要告知用戶，僅在用戶操作時進行觀察即可

1.3 設定衡量指標

在設計好測試任務后，我們需要為任務匹配對應的可用性指標，目的是為了通過指標反應測試內容的可用性問題，幫助實施者有重點的進行觀察和記錄，還可以結合ASQ量表幫助測試者對每個測試任務的完成情況和滿意度進行反饋

可用性指標主要包括有效性、效率性、滿意度；這三者構成了衡量指標的一級指標，而每個一級指標下還包括更加細分的二級指標及衡量方式和標準，這就構成了可用性指標對照表；我們依照可用性指標對照表對每個任務的重點有了基本的概念，并且可以根據具體任務描述和衡量指標得到測試記錄表

現在我們對每個任務的可用性指標有了基本的概念，但是可用性問題除了從實施者角度去觀察用戶行為和結果，還需要幫助測試者結合任務進行自評和反饋

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

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

效率性則是針對特定任務，觀察其完成時間是否在正常范圍內，其任務完成路徑是否符合標準路徑，是否存在偏離和猶豫的地方，在進行定量研究時常用指標有任務完成效率、理想路徑偏移率等

滿意度則是用戶自我報告數據，包括任務完成難易度評價、任務完成滿意度評價、及評價原因

根據場景描述、測試任務、節點反饋和ASQ評估量表，我們可以得到“任務卡片”，“任務卡片”可以幫助用戶快速進入角色，明確內容，量化反饋，在每次任務完成后，將測試者所勾選的ASQ選項對應的分值相加，便可以得到任務評估分值

1.4準備測試腳本

可用性測試一般情況下需要兩人協同配合進行，通常一人安排任務鼓勵用戶發聲，一人觀察記錄，由于涉及內容較多，成本高樣本含量低，對被試用戶進行的活動任務也比較復雜且環環相扣，所以為了保障測試任務更好的實施，一般情況下會準備一份較為完整的測試腳本以供團隊更好的配合

一般測試腳本包括自我介紹、訪談預熱、測試規劃、測試任務、量表問卷（可選）、結束語、記錄文檔、相關文檔

1.5準備測試原型

1.6招募用戶

用戶可以大概分為新手用戶和專家用戶兩種類型，當然也可以進行更精細的劃分，例如（萌新、高淺、活躍、專業）在招募時為了結果可靠，應避免產品設計相關人員的參與，選擇有代表性的用戶，其中真實的產品目標用戶為最佳，測試者不宜過多，一般5名左右就夠了

例如調研XX產品的直播教室的可用性問題，就需要招募已在平臺入駐且售賣直播課的老師，在招募時還需要進一步的篩選，如果招募的5名老師都是長期使用平臺產品進行直播上課，用戶對于產品功能足夠了解，關注點會與新手用戶會產生較大的差異

1.7準備場地

包括預約測試場地、記錄設備、分配主測員和觀察記錄員、準備相關話術及活動禮物

• 測試場地：一般選擇安靜明亮的房間/會議室進行，訪談者和用戶最好呈90度的座位

• 記錄設備：安裝測試產品的電腦、手機；記錄設備可以使用錄音筆、相機或DV。設備要穩定，電量充足

2.測試中

2.1暖場

在了解用戶情況和布置任務前，不要太直接的進入測試氛圍，營造一個相對輕松的交流環境。先聊點輕松的話題，“您從哪里過來的呀”“平常工作忙不忙”等問題，緩解氣氛，把用戶帶入測試場景?？珊陀脩袅牧谋粶y產品相關的小問題，平時怎么用的？一般什么時候用？感受怎么樣等等

2.2布置任務

向測試者發放任務卡，結合任務卡中的角色和使用環境對任務進行簡單的介紹，如果是專家用戶任務就不用過多描繪場景，可以具象更具體的任務——“上傳一門新的課程、將課程分成基礎班和進階版分別售賣”等等

2.3觀察并記錄用戶使用過程

這個過程觀察記錄和引動測試者隨時的發聲很重要，與其他用研方式不同的地方在于可用性測試可以了解到用戶在操作時的想法和行為，用戶的發聲思考可直接影響可用性測試的效果和結論

我們可以適當引導用戶進行思考發聲，甚至可以為用戶做一些簡單的示范，例如 在新建時，可以說“我準備新建一門課程”，“我正在尋找建班功能，我現在遇到一些問題”等等，將自己操作時的想法表達出來，不需要刻意去思考，這有助于主測員去了解測試者的想法和感受

每個任務完成后，通過“任務卡片”重點回答測試者任務的完成情況，遇到的問題，詢問測試者的態度和感受，還需記錄任務完成的時間；與任務不相關的反饋可以記錄在備注中，而在記錄時盡量采用詞組、短句的快速記錄方式記錄核心內容，整理后作為優化任務幫助產品進一步提升可用性和易用性

2.4進行量表問卷

ASQ量表

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

SUS量表（可選）

SUS量表一般在相對完整產品整體的大型可用性測試后才會使用，因為一般的中小型測試任務比較集中和針對，用戶無法感知整個系統，量表針對測試設置10個問題（有效性、效率、滿意度），包含5個選項：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）

在布置問題時，奇數問題采用正面闡述，偶數問題采用反面闡述，以此來確保用戶評價的可靠性

單個測試者提交量表后，我們需要計算量表分值，奇數項計分采用“用戶打分”-1，偶數項計分采用“5-用戶打分”，由于是5點量表，每個題目的得分范圍為0-4，共10題，所以最大值為40，而SUS的范圍在0-100，所以需要將所有轉換分相加后乘以2.5，即可獲得SUS分數

3.測試后

3.1問題歸類分析

簡單測試直接根據發現的問題優化設計即可；如果目的是用于討論和匯報，需要對記錄內容進行整理和輸出，這時需關注問題的出現頻次、優先級和用戶反饋，按照問題維度分類，將不同用戶暴露的相應問題進行合并，羅列問題所對應的功能點、可用性指標、用戶比例、用戶反饋及相關現場記錄文件，之后基于問題對業務和體驗的影響劃分優先級并且標出對應的PM同學，最后針對這些問題給出優化建議

問題優先級的劃分方式

通過前期記錄觀察以及錄音錄屏我們可以發現用戶在任務測試中遇到的問題，根據問題對任務完成度的影響，我們可以劃分為P0（緊急問題）、P1（重要問題）、P2（次要問題）的方式對問題進行優化和排期

• P0：用戶遇到阻力且無法解決，未能完成任務的問題

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

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

3.2輸出測試報告

較大的可用性測試在得出結果后需要向團隊內的成員分享，所以需要進行一次報告輸出做到內容對齊，一般包含整體概括、重點發現、項目背景、測試過程、測試結論、優化方案幾個模塊，具體匯報形式是不受限制的，一般文檔形式輸出較為高效，keynote匯報從內容和形式上會更加豐富

• 整體概括可以將測試背景及測試結論簡單的闡述，其中測試背景包括（項目背景、測試內容、施測情況），測試結論包括（測試結論、優化建議）

• 項目背景就不必多說了，將業務背景和測試目的進行簡單概括即可

• 測試過程包括準備階段（如何招募用戶、招募了多少名、用戶的基本信息和類型；有哪些測試任務、如何進行測試和記錄形式）及測試階段（本次測試安排的任務、設計的量表問卷、現場的錄像照片）兩個環節進行展示

• 測試結論需要將暴露的問題進行問題描述，結合整理的文檔表格詳述問題未讀和用戶反饋

• 最后，結合問題提出完整深入的優化建議和解決方案

3.3后續跟進方案

• 探討解決方案：協調產品、設計等多個角色來探討合適的解決方案，要注意，設計時要思考新方案是否會帶來新問題，并再次通過可用性測試來驗證新的方案。

• 持續跟進：了解項目結果的落地情況；已改進的問題或遺留的問題可在下個版本的測試中繼續跟進

B. 問卷調研

在進行問卷調研之前，我們需要認識到問卷調研包括兩種調研類型，定量調研與定型調研，實際上大部分的問卷都是定量調研，需要大量的用戶樣本，在收集問卷后需要分析數據占比來驗證用戶想法，另外小部分就是定型研究，一般原因是因為用戶樣本量較小，通過小樣本量來研究產品的可用性問題

1.問卷前的準備

1.1明確調研目的

問卷調研中設計者并不直接接觸用戶，所以在問題的深度和廣度上是有限的，一份問卷不能解決多個問題，通常會圍繞解決1-2個核心問題去研究，在設計問題之前需要明確此次問卷調研的目的，然后圍繞這個目的去思考各種問題，通過怎樣的問題達到怎怎樣的結果

例如通過思考和確認，針對我們這款由0到1的知識教育平臺型產品，其調研的目的主要在于

• 需求驗證，包含對用戶進行市場分析、了解現狀、發現問題，從而提供解決方案，再到兩端用戶是否滿意現在的解決案

• 用戶接受并付費的意愿如何。收集用戶信息、挖掘分析用戶的付費意愿以及付費習慣

問卷的目的一般可以分為六個方面：

1.2目標用戶分析

對調研用戶進行分類是較為重要的環節，用戶類型不同，問題內容也不同，只有在不同角度不同用戶下設計的不同問題才會獲得有價值的結果

這種情況在問卷中還是比較常見的，例如我們填完問題一后，根據選擇的不同，可能會跳轉到問題三或者問題五，這就是問卷設計者根據不同用戶分類進行的多種問題設計

例如在收集知識平臺滿意度和相關競品使用習慣時，個人機構和組織機構的視角是不一樣的，B端客戶和C端消費者的視角也是不一樣的，所以在問題設計時需要分開對待

問題根據用戶分類設計的好處在于問卷后期可以快速驗證產品的用戶類型和比例，提高調研質量和數據可信度，便于后期對用戶進行更加深入的調研

舉例

結合上面調研的目的及用戶分類，以此我們思考在問卷的設置方面：

對于B端（老師）來說，首先要了解的是客戶目前是否有在使用我們提供的服務、什么時候會使用、使用的頻率是多少、目前使用的體驗如何、有沒有遇到什么問題、有什么建議、對我們提供的解決方案是否愿意接受

對于C端（學生）來說，首先需要了解的是用戶基本信息，是否使用過課程相關的服務，用過哪些競品、吸引用戶的點在哪等等

1.3內部需求對齊

當需要有問卷調研的需要時，首先應該與團隊內部各合作方對齊調研意向，一方面是為了避免過量的問卷投放打擾到用戶，另一方面問卷調研屬于團隊項目，在團隊內部充分討論調研目的后或許你會了解到各業務方當下最關心的用戶問題從而調整調研問卷的內容甚至得到更好的解決辦法，這樣一來才能將問卷調研的價值最大化

例如教育平臺側在新版本上線前為了調研售課老（機構）師對平臺使用的滿意度和深層次的需求問題，那么在發起調研之前，需要跟產品、教研、客服等業務合作伙伴對齊需求

2.設計問卷

2.1劃分問卷模塊

設計具體問題之前，我們需要預設幾個問卷的模塊，通常圍繞幾個類型：用戶類、行為類、產品類、態度等，在得出完整的問卷之前，我們不需要考慮問題的先后邏輯是否合理，先根據調研目的和模塊類型進行問題窮舉，當用戶模塊相關問題寫完后再繼續寫下一個模塊的問題，直到所有模塊的問題都已經設想完畢，在對問題進行重組

用戶類：收集用戶基本情況，方便我們了解用戶群體，比如：職業、學歷、團隊構成

行為類：了解用戶的行為或者與圍繞產品相關但不涉及產品本身的問題。比如：有沒有在其他平臺入駐、售課時視頻課比較多還是直播課比較多

產品類：了解用戶直接與產品相關的體驗問題。比如：對產品印象如何、一般使用某產品的哪些功能、頻率怎樣、還用過哪些競品、喜歡哪些功能

態度類：用戶對產品的看法。比如:評價、好感、想要的功能；盡量避免提一些無法判斷、沒頭沒尾的問題，一方面對產品優化沒有幫助，另一方面會降低用戶的的期望

2.2衡量問題類型

問卷的問題形式是多樣的，題目類型主要有封閉/半封閉問題、量表式問題、開放式問題組成，需要根據具體目的來選擇相對應的問題

封閉/半封閉題型的選擇在于能否將答案窮舉，避免出現用戶因為沒有合適的選項而隨便勾選答案的情況

量表題型在答案上有明顯的程度高低區分，設計者對該問題有進行統計的需求

在問卷中應盡量避免較多的開放問題，一般在針對某種方向/某個定性的問題做預探索時使用

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

2.3問題重組

在得到具體的問題后，我們需要對問題進行重新編排，通過改變問題的前后順序來保證用戶在可控的情況下進行真實的問卷回答，除了按照問題的難易度之外，還需要根據問題的屬性由淺入深的重組問題

例如問卷開始先安排過濾題用于過濾用戶，識別用戶是否符合問卷的目的來保證問卷數據的質量，然后按照暖場型問題、漸入型問題、高難度問題、敏感問題來對問題進行重組，當然這些順序并不是固定的，需要依據具體的問卷內容進行調整

關于過濾問題：

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

比如在對于關于產品改版的滿意度調研中，向用戶詢問有關產品功能的問題

如果用戶回答“某某功能”，但在是否知道時選擇了否，或者使用時長很久，但卻不知道某某功能時，在后期數據中，可以將這部分無效問卷去除

• 問題注意事項

3.問卷投放

3.1問卷評審

一切準備就緒，是不是準備投放問卷了？別急，許多問卷在投向用戶之前，往往會忽視通過內部手段進行問卷自評，通過問卷自評可以發現這份問卷有沒有偏離最初的調研目的，你所設想的問題用戶是否可以正確理解、問卷是否有可優化的空間等

一般自評包括3個環節：問卷自審、問卷內審、問卷內測

• 問卷自審

問卷設計完畢之后，需要根據最初確定的調研目的對問卷進行自審，可以站在用戶的視角對問卷進行第一次填寫，確定問題是正確有價值的，是有其他選項，也可以估算回答問卷所用時間，問題中的詞語是否能被用戶理解且沒有歧義等

• 問卷內審（可選）

不少公司內部有設立專門的用研團隊，在確立調研需求初期就應該與需求方深度綁定，有明確的需求認知，有句話叫當局者迷，邀請用研團隊參與審查可以從專業角度把控用研目標，評估問題是否能被用戶接受等，他們可以從一些不同的角度發現問題

• 問卷內測（可選）

內審之后，可以借助產品的代表性用戶（一般3-5人）進行問卷內測，通過觀察填寫情況來檢驗問卷設計的合理性，例如觀察答題時間、用戶類型與題目是否關聯等等，確保證問卷上沒有其他問題

3.2預計采集樣本量

內測完畢之后，就可以向用戶投放問卷了，為了避免給過多的用戶造成打擾，我們需要根據產品的用戶數量判斷問卷的投放數量

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

3.3選擇投放渠道

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

問卷調研基本分為線上調研，線下調研兩種方法，線上通常是問卷投放或者電話詢問的形式，線下一般與用戶訪談相結合，做到定性定量相結合；選擇投放渠道時，一般根據調研目的、投放預算、預計采集樣本量、統計分析成本來進行判斷

4.數據清洗產出報告

一般用研團隊會使用專業的解決方案快速作出數據分析，比如SPSS，而設計師在實際工作中很少會接觸到此類工具，因為此類視角下探索的方向和內容更加具體，變量在可控范圍之內，不太需要復雜的分析模型，較為常見的更偏向Excel或者問卷平臺自帶的分析功能，所以我們可以對分析思路做一個簡單的了解

4.1數據清洗

前面在問題設計時我們有講到篩選題相關的內容，加入篩選題的目的就是在數據分析前便于我們將異常問卷剔除出去，保證最終結果的準確性，除了觀察篩選題的選項之外，我們還可以根據問卷填寫時長、量表打分規律、問卷填寫完整度等幾點進行問卷篩選

4.2問卷分析

• 看整體

還記得我們設計問題的第一步劃分問卷模塊嗎？模塊通常圍繞幾個類型：用戶類、行為類、產品類、態度等，在分析問卷時可以基于這些結構得出一個較為整體的情況分析，例如用戶群體結構（用戶類）、存在的問題和新的訴求（用戶建議）等，通過對比相同角色的回答，找出共性的問題和信息

• 看差異

在得出整體結論之后，我們可以通過差異分析深入挖掘更多信息，例如觀察不同用戶角色對于產品的建議或者評分，會發現用戶角色對于產品的建議和需求是不同的，這種分析方法重點在于找到兩個可能存在關系的因素，通過對比不同角色的回答，找出差異和影響因素，根據上述舉例就是將（是什么）（怎么樣）進行差異對比

• 問題歸類

根據反映問題的模塊對用戶問題進行歸類分析，寫明用戶的問題描述和具體模塊，并且對后續優化提供解決方案

4.3產出報告

問卷報告一般包含調研背景、問卷回收情況、調研結論（功能優先級、用戶反饋、數據展示等）、整體評價（功能評價、體驗評價）、等，分析時從數據出發找出差異，分析原因，給出結論，在具體匯報時可以按照先結論后具體問題的方式呈現報告，同時可以結合數據提供相對應的解決方案

C.用戶訪談

1.訪談前

1.1明確訪談目標

明確訪談目標，可以保證訪談內容在大方向上是一致的，例如調研班主任實際外呼的場景及外呼時關注的信息，在訪談時就不會去問關于主講排課的問題，也可以防止訪談過程中遇到富有表達欲的用戶偏離主題，在訪談過程中難免有用戶興致勃勃的談論自己對產品的看法，在這種情況下，擁有明確的訪談目標可以保證深陷用戶的情境中不迷失訪談方向，保證訪談的最終結果是有價值的 

1.2確定訪談類型

根據不同的訪談目標，可以分為三種訪談類型：

• 開放式訪談

在圍繞的主題和問題上都是開放的，沒有固定的問題也沒有固定的答案，采訪者可以根據受訪者的表現進行相應的問題補充，受訪者可以充分表達自己的觀點和意見，氛圍最為輕松，接近人們日常的對話，適合進行定性研究。但即使是選擇了開放式訪談也需要事先準備訪談提綱來確保此次訪談是有效的

• 結構式訪談

有嚴格的問題順序，采訪者必須按照順序和題目提問，受訪者回答的答案都是固定的A、B、C、D，這就需要采訪者必須有一個很清晰的目標，在問題的設計上要仔細推敲和打磨受訪者可能回答的形式，當然，再縝密的設想在實際訪談中也會有意外，所以也會設置一些開放性的問題讓受訪者可以自由的進行表述，并給出更加開放和深入的回答，適用于定量數據的研究

• 半結構式訪談

是實際工作中運用的最多的一種形式，在形式上是結構式與開放式的結合，包含了固定的的問題之外，也設置了開放式的問題，根據訪談時的受訪者的實際情況進行問題的增減，適合定性+定量研究

按照訪談的途徑來劃分，又可以分為線上和線下兩種，在受訪者不方便的情況下可以進行電話訪談的方式來進行，但是如果訪談包含較為復雜的經歷和過程的詢問，線上訪談比線下訪談要遜色不少

1.3設計訪談提綱

明確訪談目的與訪談類型后，就要基于訪談目的，擬定訪談提綱，訪談提綱是方便與用戶交談過程中抓住核心，保證訪談高效有序進行的關鍵，就類似一個標準流程，保證需要研究的問題都可以包含在內，訪談提綱一般包含五個部分，分別是訪談目的、開場白、提問訪談、用戶演示、結束語（基本信息、過往經歷、產品感受、流程體驗、競品體驗），其中提問訪談可以根據具體的訪談內容展深挖細節或者發散問題

提問訪談是提綱中較為重要的一環，問題設計要由易到難，由淺入深，由邊緣到核心，在開始階段設計一些簡單的開放式問題來營造訪談的氛圍，這個過程中可以了解用戶的基本情況或者對產品的使用情況，等訪談向一個方向聚焦時，再逐漸收縮問題范圍，逐步追問核心問題

設計好的問題還需要整理成訪談記錄表，在進行訪談、時，一方面按照訪談清單大綱盡可能的進行脫稿提問，另一方面則需要記錄用戶對于問題反饋，記錄問題時記錄員最好記錄用戶的逐字稿，以便于后期進行記錄整理時不與用戶表達產生偏差

1.4招募用戶：

用戶招募是較為重要的一環，承接訪談前后兩個階段的關鍵節點，用戶招募準確，后面的訪談才有實際意義，招募哪些用戶是由訪談目的所決定的，一般招募環節分為三部分

• 1.41.明確目標用戶

招募用戶的選擇是由訪談目的決定的，不同的訪談目的所招募的用戶是不一樣的，一般按照使用產品深度的緯度來劃分用戶

• 核心用戶：產品中較為活躍的用戶

• 邊緣用戶：產品中即將流失或者已經流失的用戶

• 潛在用戶：當前并不是產品用戶，但在產品定位的用戶群體中

而訪談目的一般有兩種情況

• 研究產品所存在的問題，例如研究一下最近用戶活躍度為什么下降

• 研究產品目標用戶所存在的需求，例如研究用戶對新功能的滿意度

所以如果訪談目的是發現產品現存的問題，那么應該去尋找核心用戶，他們那對于產品有著明確的認知；但如果為了增長，則應該尋找邊緣用戶和潛在用戶，他們會告訴你他們需要什么，你需要做什么

• 1.4.2多渠道招募

面向內部用戶的產品進行用戶訪談時，一般直接找對應訪談者的leader或者pm溝通即可，而在對外產品時則需要根據確定的篩選條件進行用戶招募工作

核心用戶的招募相對邊緣用戶較為簡單，一般可以通過行為日志數據、登錄時留下的聯系方式、產品用戶群或產品內運營推送推送來招募核心用戶

潛在用戶由于對產品接觸較少，一般通過問卷、外包招募、熟人推薦的形式進行招募

• 1.4.3驗證目標用戶并邀約

在得知用戶是否愿意接受訪談后，需要再次驗證這些用戶是否真的符合樣本特征，要注意的是，篩選訪談對象要注意平衡，避免同一類型的對象占了過多比例，導致訪談結果不全面

例如做一次關于學習平臺APP的功能優化訪談，就要避免對象大部分是管理者、80后的情況，因為用戶不是目標用戶、80后用戶的需求頻率不大

很顯然，90后/95后/00后、大學生/剛進入職場的職場新人才是我們的目標用戶，那就根據這類人群的角色模型來篩選邀約對象

1.5準備場地和物料

• 場地選擇

用戶訪談的可選場地有很多，大部分是請用戶到公司來使用公司的會議室，或者有的公司擁有休息區或者共享空間，環境較為舒適和溫馨，也是可以的

需要注意的是，場所的選擇也會對訪談有些影響。應該盡量選擇溫馨舒適的環境來打消用戶的緊張感

• 物料

采訪者需要提前準備好物料，包括訪談記錄表、訪談提綱、錄音設備；訪談時可以一人負責提問，另一人負責記錄，在使用錄音設備對受訪者進行錄音時，需要提前告知并取得同意

2.訪談中

2.1開場白

在一切準備工作ready之后，可以進行訪談了，訪談中難免遇到一些不善表達的用戶，如果一開始就切入正題進行訪談，訪談者可能在緊張的狀態下無法與采訪者達成信任關系，氣氛就會有些尷尬

所以需要先進行簡單的寒暄和自我介紹讓氣氛輕松起來，還可以簡單介紹訪談的背景、流程、內容、時間，告知受訪者今天只是探討問題，沒有對錯之分，所以希望暢所欲言，不要掩飾真實想法

2.2訪談并記錄

還記得咱們前面準備的訪談提綱嗎？在進行簡單的暖場之后，我們可以先對用戶的基本情況和使用經歷進行詢問，從職業、流程、愛好等基礎信息作為切入點，為用戶營造特定的使用場景，然后再進入訪談環節

訪談時，拋出問題的目的不僅僅是得到用戶的一個結論，而是希望用戶借此將自己的體驗和前因后果告訴采訪者，然而很多時候，用戶告訴我們的信息都比較淺顯，比如“我想要個xxx功能”“我覺得xxx挺好的”，這時我們需要對用戶想法刨根問底，從而證實用戶說的“想要xxx功能”是否合理，或者看能否想到其他解決方案

• 如何刨根問底？

1、結合梯子理論，通過問用戶以下4個層層遞進的問題，來了解用戶需求和用戶心理

• 屬性：對于這個產品，你最在乎什么功能？

• 利益：你為什么在乎這個功能，它可以解決你什么問題？

• 心理：解決這個問題，可以達成你什么目標？

• 價值觀：你為什么在乎這個目標？

2、情景再現

回答提問時，用戶很少會去主動聯想具體使用場景下的體驗問題，比如當你問“上次旅行去哪玩了？”用戶大概率會回答“去環球影城玩，人特多排隊兩小時，玩了個什么叫鷹馬過山車，20秒，下次去絕對買優速通...”并不會告訴你怎么去的、以什么標準定的酒店、為什么選擇這個項目/地點，等等這些更想要了解的問題告訴你

我們需要幫助用戶在基本體驗之上還原體驗的動機，引導用戶對使用場景進行還原，了解用戶當時場景下的行為，再針對場景和行為去挖掘用戶產生這種體驗感受的動機

3、鸚鵡學舌

復述的時候，有時用戶還會根據你的復述追加一些他當時沒有想到的關聯信息，比如“你的意思是。。。我的理解是。。。對不對？”這樣可以避免雙方理解的偏差，還可以總結提煉用戶的觀點。這樣又可以挖掘到更多內容

2.3結束語

在訪問結束后，我們可以與用戶一起快速回顧訪談的內容，如果用戶有提出一些意見或者建議我們可以再復述一遍進行查缺補漏，并將事先準備好的禮物或者酬勞送給用戶表示感謝，向參與度高，善于溝通的優質用戶表示保持聯系，留下聯系方式方便后續進行可用性測試或者再次訪談

3.訪談后

3.1整理訪談內容

一般是在兩個用戶訪談之間的間隙進行筆記的整理， 將用戶的口頭語言轉換為書面語言，這樣一方面減少后續因訪談內容大量堆積而形成的整理壓力，另一方面可以根據上一場訪談進行復盤，從而對下一場即將開始的訪談進行內容調整，在整理時我們需要將重點放在用戶的提出的問題和負向反饋上

3.2問題歸類分析

整場訪談結束之后，我們會發現用戶會提出各種各樣的問題，我們需要依據問題的緯度進行分類，將不同用戶遇到的相同問題進行歸納

問題歸納主要包含兩個部分，主要問題和具體問題，主要問題就是訪談中出現的較為明顯的反饋問題，例如“超7成用戶對首頁推薦的內容并不感興趣”，而具體問題則需要明確用戶反饋原因、對應的功能模塊和問題類型

3.3產出報告

訪談報告是至關重要的，一方面可以和大家共同討論發現用戶真實想法，另一方面也方便產研團隊根據問題關鍵點投入人力作出進一步優化，一般在訪談當天完成結論報告，時間有限是以關鍵結論為主，具體問題可以后續補充。訪談報告一般包含訪談背景、參與人員、用戶信息、主要問題、具體問題、用戶建議、優化建議

總結

本篇文章是我學習到的用戶調研的三種方式，調研方式不重要，重要的在于如何理解用戶需求，真正了解用戶想要的是什么，無論B端還是C端，產品最終還是要服務于用戶，作為設計師同樣需要了解用戶研究，只有對用戶足夠了解才能作出高體驗質量的產品。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務