導航和可查找性是用戶體驗設計的核心方面。如果用戶無法找到他們需要的東西，他們就會感到沮喪并可能決定去別處尋找。在信息架構特別復雜的網站上，多級菜單是提高導航和可查找性的有效方式，從而提供有效的網絡體驗，促進產品信任和促進轉化。

由于產品和使用它們的設備千差萬別，因此沒有一刀切的解決方案。但是，有一些經驗法則可以幫助您構建多級菜單，從而增強在不同屏幕尺寸上的導航和可查找性。

不同尺寸屏幕的設計技巧

一個好的多級菜單應該通過以清晰、直觀的方式呈現信息，讓用戶快速找到他們需要的信息。在我們進入特定于尺寸的指南之前，讓我們看看一些適用于所有菜單的做法。

使用不超過兩級的子菜單。任何多于兩級的子菜單都可能使用戶感到困惑。保持導航相對平坦可以提高用戶的可查找性，并減少記住他們所在位置所需的認知負擔。如果站點的頁面結構很深，請考慮在密切相關的頁面頂部添加本地導航菜單。例如，設計復雜業務支持產品的 Zoho 在每個產品頁面的頂部放置了一個特定于產品的本地菜單，就在主菜單的下方。雖然頂部的主菜單列舉了 Zoho 的核心產品，但本地菜單提供了對包含更詳細信息的頁面的訪問，例如用例和定價。

用圖標標記子菜單。通過始終明確何時有可用的子菜單來管理用戶的期望。熟悉的選項包括一個小的下角圖標或三角形圖標。此外，請考慮在子菜單打開時翻轉指針圖標。

直觀地組織信息。確保信息的層次結構與用戶的心智模型一致。例如，在電子商務網站上，考慮購物者是否更有可能期望按品牌或商品類型組織商品。如果用戶單擊“鞋子”類別，他們是否希望子菜單顯示運動鞋、涼鞋和靴子的選項？或者他們是否希望看到一個子菜單列出商店出售的每個品牌的鞋子？

確保用戶始終知道他們在哪里。始終突出顯示主菜單上與用戶所在頁面相對應的鏈接。如果當前頁面在子菜單中，則在主菜單上也突出顯示子菜單鏈接。

保持簡單。菜單不是進行巧妙文字游戲的地方；確保鏈接標簽具有強烈的信息氣息。這意味著保持標簽名稱簡單明了和描述性，以便用戶在點擊時立即知道他們會找到什么。文案越清晰，用戶就越快找到他們需要的東西。

優先考慮可讀性。使用簡單的無襯線字體并確保項目周圍有足夠的間距以避免混亂。確保背景足夠不透明以遮擋菜單后面的任何內容。但不要忽視網站的整體品牌。雖然可讀性是第一位的，但要確保菜單的樣式與網站的其他外觀和感覺相得益彰。

使點擊變得可訪問。為了讓有精細運動控制障礙的用戶可以訪問菜單，請遵循 Google 的Material Design指南，并將可點擊元素的大小設置為至少 48 x 48 像素。

網站菜單設計技巧

即使移動趨勢日益增長，客戶可能需要功能齊全的網站的原因仍然很多。例如，他們可能需要在網上提供比移動網站可行的更多信息。或者他們的研究可能表明他們的用戶只是更多地依賴臺式機。

網站菜單應該易于瀏覽，提供清晰的交互，當然還有響應性。它還應盡可能與移動網站保持一致，以便為回訪者提供直觀的體驗。

菜單應該在點擊時打開，而不是懸停。您需要做出的最基本的決定之一是用戶將如何訪問站點的菜單。將指針懸停在菜單上是否足以觸發菜單的外觀，還是用戶需要單擊它？

懸停方法很流行，但點擊打開是確保菜單在所有設備上可靠、直觀地工作的最佳方式。單擊方法使網站能夠在傳統的計算機顯示器和類似的觸摸屏上更一致地工作，并避免懸停方法出現的許多問題，包括：

a) 狹窄的懸?？臻g。懸停空間是鼠標在保持菜單打開的同時進行導航的路徑。如果它太窄，菜單可能會在用戶到達他們想要的鏈接之前消失。

b) 意外打開。如果用戶在前往頁面上的另一個位置的途中嘗試瀏覽懸停菜單，則很容易無意中打開懸停菜單。設置一個短暫的延遲可以解決這個問題，但當用戶確實想要打開菜單時可能會導致不適。

c) 觸摸屏上的用戶體驗不一致。懸停菜單在觸摸屏上不起作用。他們需要一個代碼來檢測觸摸屏并切換到點擊打開；隨著筆記本電腦和平板電腦之間的界限越來越模糊，這些變通辦法可能會過時。

d) 關于什么是可點擊的問題。使用懸停菜單，用戶在嘗試單擊之前并不總是知道父鏈接是否可單擊。這與直覺相反。

e) 可訪問性。懸停菜單可能會給使用屏幕閱讀器或通過鍵盤導航的用戶帶來問題。

選擇正確的布局：下拉菜單與超級菜單。如果網站使用傳統的菜單布局（位于頁面頂部的水平菜單欄），您可以考慮兩種類型的子菜單：標準的單欄下拉菜單或多欄超級菜單。

如果父類別包含的鏈接少于八個，請考慮使用下拉菜單。如果下拉菜單足夠長，需要垂直滾動，您應該考慮以不同的方式組織信息——也許作為一個大菜單或通過細化父類別。

超級菜單是一種嵌套菜單，通常使用可以擴展瀏覽器寬度的寬布局。如果子菜單包含許多可以按列分組的不同鏈接，您應該使用這種類型的菜單。通常，您會在大型電子商務網站上看到這樣的菜單。

設計大型菜單時，請考慮以下事項：

a) 添加圖像或圖標，使信息更易于瀏覽。

b) 添加標題以對相關頁面進行分組。

c) 如果類別名稱不言自明，請添加說明。

大型菜單在移動設備上可能難以閱讀和導航，但有時在更大屏幕上用戶體驗的改進使得為移動設備重新配置信息而做額外的工作是值得的。

添加清晰的懸停狀態。使用點擊打開菜單，包括所有可點擊元素的清晰懸停狀態，會使戶確信鏈接處于活動狀態。您可以使可點擊區域的背景稍微變暗以指示懸停狀態。只要確保懸停區域與可點擊區域匹配。如果測試表明用戶需要更多指導或上下文，請考慮添加更多描述性標簽名稱或工具提示，只要它不會阻止任何重要的內容。

單擊以關閉子菜單。當用戶點擊別處或打開另一個子菜單時，通過關閉菜單來保持直觀。這就是下拉輸入字段在表單中的工作方式，因此大多數用戶會覺得這很熟悉。

在桌面上啟用鍵盤導航。并非每個人都使用鼠標進行導航，因此菜單應允許用戶使用鍵盤進行導航。這意味著所有鏈接都應該具有不同的焦點狀態，以便用戶可以一目了然地看到它們的位置。通常，深色框可以很好地指示聚焦狀態。

移動屏幕的設計技巧

如果您尚未設計移動優先，則需要優化手持設備的菜單。傳統的菜單布局在非常小的屏幕上很少能很好地操作——如果你只是縮小桌面菜單欄，沒有人能夠閱讀它。

簡化主菜單。由于智能手機屏幕很小，您在桌面菜單中找到的大部分信息最初都必須隱藏。主菜單欄必須非常簡單，但最好顯示最重要的鏈接以提高可查找性。您可以將菜單欄固定在屏幕底部或頂部。

添加菜單觸發器。由于移動菜單的全部或部分可能被隱藏，用戶需要一種方法來找到它。在菜單欄或易于觸及的浮動按鈕中添加漢堡圖標是一種流行的解決方案，許多用戶都會認可。然而，漢堡菜單并不是唯一的選擇。例如，如果您正在為年長的用戶設計，則最好使用帶有“菜單”一詞的框?；蛘?，如果您想讓網站的功能更加突出，您可能希望將它們顯示在頂部或底部的選項卡式菜單中。

將菜單放在側邊欄中。您可以通過多種不同的方式設計移動菜單。您可以使用全寬布局，適用于任何情況；底部抽屜，最好只有幾個鏈接；或圓形菜單。一個不錯的選擇是使用帶有深色半透明背景的側邊欄來遮擋頁面內容，從而消除干擾，并允許用戶輕松點擊它以將其關閉。還可以考慮使用從左滑動的動畫來避免不和諧的體驗。對于側邊欄和底部抽屜菜單，請確保菜單可垂直滾動，以便在較小的屏幕或橫向模式下不會有任何內容被遮擋。

允許用戶輕松關閉菜單。用戶可以直觀地點擊菜單來關閉它，但也可以考慮添加一個關閉按鈕。您可以將漢堡圖標變成 X 或在菜單的右上角添加一個。

對單個子菜單使用擴展部分。如果菜單只有一級子菜單，請考慮使用擴展部分。您可以將它們展開到父項下方，并使用不同的背景顏色來清晰顯示。您還可以允許用戶同時展開多個子菜單?？紤]使用父項右側的下角或三角形圖標來指示子菜單可用。

用重疊菜單替換大型菜單和多個子菜單。如果您需要展開多個子菜單或重新配置大型菜單，請選擇重疊方法：不要在父菜單下方或旁邊展開子菜單，而是讓子菜單替換父菜單。使用這種方法，您必須在除第一級之外的所有面板上都包含一個“返回”鏈接。對于頂級菜單，請考慮為父項使用直角圖標或右箭頭。

預打開子菜單。在小屏幕上，如果用戶點擊打開主菜單并且他們當前所在的頁面在子菜單中，請考慮自動打開子菜單，以便用戶了解它們相對于其余菜單項的位置。

總結

導航是客戶體驗的重要組成部分。用戶不想進行尋寶游戲，也不想花更多的時間瀏覽菜單。如果他們無法輕松找到他們需要的東西，他們可能會放棄網站或界面，將他們的注意點轉移到其他地方。

精心設計的多級菜單是具有復雜信息架構網站的關鍵組成部分。希望這些方法在各種用例中為您提供良好的幫助。

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

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

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

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

第一步：選擇導航板式

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

頂部導航板式

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

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

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

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

樹狀導航板式

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

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

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

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

第二步：統一模塊規則

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

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

導航模塊：

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

提醒模塊：

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

數據統計模塊：

數據統計通常是作為后臺頁面頭部的存在，用戶一進網站映入眼簾的就是整個產品或者整個項目的數據統計，數據是作為衡量某一件事情好壞的重要標準，數據也通?？梢哉f明一個決策、一項任務的最終結果，在數據統計模塊的設計上應該保持直觀，一針見血的設計方式，比如股票的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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

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

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

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

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

概述

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

場景使用 

會根據業務的需要、場景要求，衍生出其他類多種形態。大多情況下先對彈窗分類，再對應到場景中使用。而實際上產品設計會從實際業務出發，從使用方式考慮，倒推來使用什么樣的彈窗符合要求。 

基本設計原則

層次要分明，突出重點 

遵循基本的界面設計原則，在多種場景下通過信息分層、字體的粗細、大小等方式展現出明顯的視覺層次，結合業務場景需要再按照閱讀順序慣例來布局，標題使用對象的名字。目的是幫助用戶聚焦每一個關鍵信息上。 

悄無聲息的，你在不在乎它，它都會出現的 

全局提示：一般由系統主動發起，不是用戶請求的，大體分為進度提醒、通知提醒、公告提醒 

進度提醒

這個是由系統發起的，表明用戶當前所在的操作的進程中的位置，抑或是卡在進度未操作，無響應狀態，通知用戶。 

位置：1·在頁面的頂部浮層顯示一塊區域，2·統一放置消息分類里 

通知提醒

來自系統一些重要的信息推送給用戶，或者是來自其他用戶的提示信息，抑或是操作反饋。 

位置：將其放在右上側，并自動關閉。 

公告提醒 

依然是由系統發起，提醒用戶需要關注的信息，一般包含系統迭代、系統錯誤、審核通過or不通過、系統維護提醒等以及其他活動信息。 

位置：與進度提醒同一位置，一般情況下并會在3S自動消失。 

強制打斷用戶當前流程的 

部分功能需要用戶打斷去確認操作或是可能會造成比較危險的，不常用的，那么就需要改變用戶操作焦點，將用戶的注意力從原來流程中拎出來，那么這個時候需要一個方式隔離原有流程和需要當前操作的內容，模態框就是比較適用的。 

疊加在系統窗口的彈出式窗口，彈框以對話的方式讓用戶參與進來，以對話的方式與用戶產生交互操作。 

操作反饋提示類

1·成功和失敗 

對于某個模塊的層級過深的功能操作反饋，需要在提交之后的結果反饋中提供輔助導航返回到初始功能頁面。 

2·確認型彈窗 

在簡單的業務場景中，只需要用戶進行確認的“確認”或“取消”等案例。一般情況下應用在對內容的提交、修改，在內容詳情頁里的刪除操作，表格的批量刪除等 

樣式：標題（以所屬對象作為標題）+文案（對對象的解釋說明）+操作按鈕。 

3·操作型彈窗 

在復雜的業務場景中，需要用戶進行數據輸入一系列操作。一般會有新建內容（新建內容很多的就需要用新頁面，彈窗有限空間滿足不了大容量的數據輸入）、查看詳情（內容多需要新頁面展示）、詳情編輯。 

有部分場景下，新建內容和編輯內容是重合的。 

一般樣式：標題+數據輸入組件+操作按鈕 

復雜樣式：標題+數據輸入和數據展示組合控件+操作按鈕 

4·組合型彈窗（堆疊彈窗） 

特殊復雜業務中，單層模態框不能滿足實際業務的需要，考慮彈窗的容量大小以及主次用戶類別使用的情況下，會使用堆疊彈窗，在有限的條件下，能做的就是盡量將彈窗分層次。 

彈窗出現不打斷用戶原有流程的 

在實際操作的過程中，常見的錯誤提示、部分晦澀難懂或專業的術語、對功能組件的描述解釋、小模塊里的操作反饋、全文本展示，只會在用戶不明白用途的情況下，告知用戶，但不能妨礙用戶閱讀或是操作。 

氣泡提示（解釋說明的）

起輔助說明的，輔助用戶決策。 

樣式：深色背景+文字描述；一般由鼠標滑入目標區域，展現氣泡提示框，鼠標滑出即消失。 

氣泡對話框 

一般簡單場景中，對單條信息或者模塊內的某一個內容執行操作確認。 

樣式：背景+（+圖標）文案描述+操作按鈕；一般鼠標點擊，顯示氣泡，點擊其他區域即消失。 

復雜的場景中，氣泡框也承載需要用戶去執行數據輸入的操作，將氣泡內的執行后的結果與原流程同步數據展示結果。 

除此之外，氣泡框承載的內容和模態框操作類型有重合部分，不同的是，氣泡框的數據與主流程的數據需要有對應關系。 

堆疊氣泡框

特殊場景需要，單層氣泡框不能滿足需求，內容需要比較嚴謹的父子級關系，且并不是常用的，在考慮對后續的衍生，也會將不常用的功能隱藏，需要時再點擊彈出。 

方法類似于堆疊模態框 

特殊場景下

在某些復雜業務的場景下，需要模態框和非模態框搭配組合使用，特別是操作彈窗和氣泡框之間。 

一般情況下，是操作彈窗—>氣泡框，（氣泡框—>操作彈窗這個類型不常有，主要是不符合用戶的使用習慣） 

總結 

對于彈窗的使用，應用到各個類型的用戶場景下選擇合適恰當的方式去滿足需求，也許不盡人意，但也是在進步。不僅僅需要了解彈窗的類型，更需要了解業務場景，實際應用過程中需要兩者相互碰撞，打破、重組，尋找到合適的方式。 

思考延伸

上邊有說到堆疊模態框，在實際應用中，層級多達三層彈窗，使用的時候，重復點擊好幾次按鈕才能關閉彈窗，使用起來甚是麻煩，有沒有可以優化的方法呢？

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

文章來源：站酷。 作者： 啊嗚計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

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

一、明確活動業務目標

1.1 活動目標

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

1.2 活動目標分類

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

      

二、參與活動策劃過程

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

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

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

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

三、優化體驗鏈路

除了遵循尼爾森十大交互原則，在《社交紅利》一書中，徐志斌老師總結了活動運營的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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

What 是什么

簡介：「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統捕獲記錄，根據原始執行順序，一步步返回歷史操作。

例子：用 Sketch 畫設計稿時，可以多級撤銷，允許用戶返回上一步或更早的歷史操作

Why 為什么

具備多級撤銷的功能可以讓用戶覺得能夠對界面進行安全探索，不必擔心造成某些不可取消的修改。例如，如果單擊了錯誤的菜單項，不需要進行復雜的恢復，不需要退回到此前保存的文件版本，或者尋求系統管理員的幫助。

多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言，一名 Photoshop 用戶可能會在一個圖片上執行一系列的濾鏡操作，研究那些結果看是不是他喜歡的，然后再逐一撤銷，回到起點。

When 什么時候使用

需要用戶頻繁在單一頁面上交互的用戶界面，相比普通的網站或者移動端 APP，交互操作要復雜得多。例如：文件編輯器、圖形建模工具、郵件閱讀器、數據庫軟件、寫作工具、編程環境等。該功能能使用戶撤銷一系列操作而非單一個操作。

使用條件：該軟件的單一界面交互比較復雜和頻繁

How 如何使用

軟件首先需要一個強大的模型，這個模型是關于動作是什么樣的——動作的名稱、動作所關聯的對象，以及如何返回歷史動作。

決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數據庫——任何將是永久性存在的對象——都應該是可取消的動作。具體而言，在大部分應用里，人們期望能撤銷下面這些改變:

• 文檔或表單的文字輸入

• 數據庫

• 圖片或畫布的修改

• 布局上的變化位置、大小、順序或分組在圖像應用程序中

• 文件操作，例如刪除或修改

• 對象的創建、刪除和重新組織，例如郵件消息或電子表單的列

• 任何剪切、復制、粘貼操作

下面這些修改基本上是不可撤銷的：

• 文本或對象選擇

• 窗口或頁面之間的導航

• 鼠標光標和文本光標的定位

• 滾動條的位置

• 窗口或面板的位置和尺寸

• 在一個未提交的對話框或模態對話框上的改動

展現方式

然后，決定以哪種方式把撤銷操作展現給用戶。大部分桌面應用程序會把“撤銷/重復”的菜單項放在“編輯”菜單下。撤銷通常也關聯到Ctrl+Z 或類似的快捷鍵。

Example 案例

案例一：Microsoft OneNote 筆記編輯器

用戶需求：撤銷文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過程中需要修改可以用快捷鍵 COM + Z 撤銷，或者使用編輯菜單下的按鈕幫助用戶返回上一步。

案例二：Photoshop 多級撤銷

用戶需求：回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作，由于 PS 的操作修改繁瑣且復雜，所以為用戶提供了歷史記錄面板，用戶也可以點擊歷史操作步驟回到想要的歷史操作記錄。

案例三：美圖秀秀圖像處理 App

用戶需求： 撤銷回到上幾步圖像處理結果

使用美圖秀秀等圖片處理 App 對圖像進行美化操作時，常常會返回查看對比不同的效果，或者操作錯誤時返回到前幾步，頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

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

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

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

“Uber是一種非常獨特的模式，沒什么可以參考的產品”

——Travis Kalanick

Uber遍布全球65個國家，超過600個城市，擁有7500萬用戶，為很多人解決了交通不便的問題。

這個規模和增長速度是前所未有的，Uber提到這其中獨特的商業模式和用戶體驗是驅動。

所以哪些是最重要的用戶體驗問題，Uber又是怎么通過科學的方式來解決這些問題的呢？

Uber用戶最大的痛點-等待

-

想象一下你在凌晨2點的冬天，獨自矗立在陌生城市的街頭瑟瑟發抖；或者是你要參加一個重要的會議，如果Uber準時到達的話那就正好趕得上。

在這些非常緊急的情況下，人們對時間的感知是扭曲的，等一秒像是一分鐘，等一分鐘像是一個小時。

不僅如此，人們還會用這種扭曲的等待時間來評價整體用戶體驗，為什么會這樣？這就用到一條心理學原則叫“峰終定律”（peakend rule).

隱藏在“難以忘懷的用戶體驗”背后的科學

-

Image via UI Patterns.com

峰終定律指的是人們基于最高峰體驗和最終體驗來評價整體體驗，而不是在這段體驗中的平均感受，這個定律對好體驗和壞體驗是通用的。

對品牌來說，顧客會深刻記住這兩個點：最壞（或最好）的體驗、最后的體驗。

Photo by why kei on Unsplash

好體驗對“等待時間”的要求是非?？量痰?，這也是用戶給出好評的關鍵點，Uber花了無數時間來解決這個痛點，這就是Uber決定要應用心理學來完善用戶體驗的原因。

在這份調查中，Uber發現了3個關鍵原則，可以解決“等待時間”這個痛點：厭惡無聊，操作透明化，目標趨近效應。

1.厭惡無聊

-

“人們討厭無所事事，他們需要一個原因忙起來”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash

最近對心理學、幸福和用戶體驗的研究，揭示出一個原則，就是“厭惡無聊”，指的是人們在忙碌時感到更快樂，即使他們是被迫忙碌。

如何應用這一原則？

可以讓用戶參與讀取信息、游戲化和增加視覺效果等方式，讓用戶保持忙碌的狀態。

像下面Uber采用的方式，他們利用一個動畫來愉悅用戶，同時實時告訴你等待時間。

Uber Blog Australia

2.操作透明化

-

“當用戶從我們為他們創造價值的過程中分離時，他們會感覺我們沒有全力以赴。

這時候他們較少重視或肯定我們的服務?！?/em>

——Ryan Buell，哈佛商學院

Photo by Sitraka Rakotoarivelo on Unsplash

操作透明化是一種能讓用戶看到公司如何運營操作的直接方式，這樣用戶就能看到我們在整個過程中付出了多少努力。

根據最新的研究發現，操作透明化會讓用戶對產品的價值評價更高，讓人們感覺更好。

如何應用操作透明化？

及時告知用戶，讓關鍵信息可見，還要幫用戶理解信息來源。

在下面Uber Pool的例子中，他們提供了到達時間的計算方法這一信息。通過一種簡便的方式告訴用戶，即使是沒有任何技術基礎的用戶也能看懂。

Engineering at Uber（右圖詳細解釋：我們是如何計算到達時間的）

3.目標趨近效應

-

目標趨近效應表明人們更愿意為即將達成的目標而付出努力，而不是他們已經走了多遠。

Photo by Jonathan Chng on Unsplash

越接近目標，用戶就越愿意采取行動更快的去完成這個目標。

如何應用目標趨近效應？

想象目標趨近效應是一條真實存在的終點線，用戶越接近終點，越能鼓勵他們積極行動。

你也會經?？吹?strong style="outline:0px;margin:0px;padding:0px;">這個原則應用在很多交互元素上，比如進度條，填寫完成度等，用即將完成來鼓勵用戶完成任務。

Uber通過解釋幕后發生了什么來應用這一原則，他們解釋過程中的每一步，讓用戶感覺到為了達到他們的目標正在不斷的努力。

最后

-

毫無疑問，Uber很大部分的收益來自利用科學改善用戶體驗，最先在Uber Pool運行的增加了厭惡無聊、操作透明化、目標趨近效應的實驗版本，效果非常好：

“Express POOL團隊用A/B測試的方式，發現增加這些解決方案后，取消率降低了11%”

——“Uber如何大規模利用行為科學”

如果你想在產品中應用這些原則，必須要結合非常嚴格的測試。一個原則的應用，可能要通過上百種實現方式對比實驗，才能找到最佳解決方案。

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

文章來源：站酷 作者：彩虹BOOK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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