尤其是一些體驗細節，比我平時用的騰訊收集表做得更到位些。感覺 Google 的設計師，確實是沒少下功夫的。

什么是 Google Form

國內通常網盤和在線文檔是分開的兩款產品，例如騰訊的微云和騰訊文檔，就是不同的兩個產品。

Google Drive 這個東西，相當于把在線文檔和網盤整合到一起了，這就和國內的產品很不一樣了。

而 Google Form 就是 Google Drive 里面的問卷功能。

這次我拿騰訊收集表和 Google Form 這兩款產品對比，就是因為它們定位比較相似：

都不是專業的問卷工具，而是在線文檔工具中的問卷功能

相比之下，我覺得 Google Form 的體驗細節做得更加到位，很多地方值得學習，尤其是這五點：

選項粘貼

一般做問卷，我們都會先弄一個文檔，把內容確定了再往問卷工具里填。所以填寫問卷內容時，通常不是通過輸入，而是通過粘貼。往騰訊收集表里粘貼選擇題內容，必須一條一條來，有多少個選項就貼多少次，選項多了會感覺自己在工廠做流水線工作。

而 Google Form 可以把所有選項都一起粘貼，識別到換行就會自動貼到下一個選項中，方便多了。

我覺得還可以優化一下的點是，希望能夠讓我把問題和選項都一起貼，這個目前 Google Form 還做不到。

切換問題類型

Google Form 創建一個問題之后，可以很方便地切換問題類型。

這樣樣式挺好的，有時可以減少一些操作步驟。

快速創建問題

就是因為 Google Form 的問題類型可以快速切換，所以創建問題就很快速了。只有一個插入按鈕，點擊后立即插入一個跟上次所選類型相同的問題。如果想要換個問題類型，再點下拉框切換就行，交互很流暢。

一般創建問卷就是要盡量使用連續的同類問題，所以這種方式挺好的。

而騰訊收集表因為不能切換問題類型，所以創建起來就比較麻煩了，還分了兩個入口。

第一個是左側的工具欄，剛開始用還真不知道是用來創建問題的，可能因為標題上的「添加問題」太不起眼了吧。第二個入口是，當前編輯的問題下，會出現一個「插入問題」的按鈕。但是點擊之后需要在菜單選擇一下，這就沒那么方便了誒。

問題順序拖動

Google Form 和騰訊收集表在創建了問題之后，都能拖動順序，但是可拖區域不同。Google Form 的可拖區域在頂部一條，而騰訊收集表的可拖區域在側邊一條。

按下拖動時，為了避免太長不方便，都會收縮變短，于是問題就來了！

騰訊收集表因為可拖區域在左側，所以我點擊左側偏下的位置也能拖，但這次問題收縮，我點的地方就跑出問題區域了，于是拖動就出問題了。

Google Form 因為可拖區域在頂部，所以不會出現這個 bug。

但是，Google Form 往問題里插入圖片后，問題長度就收縮不起來了，上下拖動可不就不方便了？

好在，這個問題并沒有影響拖動。

Tab 鍵

對于很多 PC 老手來說，Tab 鍵是個很方便的工具。

有了它，填寫再多表單都不需要拿鼠標了，點一下就能自動把焦點從一個輸入框移動到下一個。

而 Google Form 把 Tab 鍵運用到位，基本上界面上的交互功能都能切換到。

騰訊收集表里也能用 Tab 鍵，不過覆蓋范圍就少了一些，不能刪除、添加選項或者添加“其它”。

總結

其實要比視覺風格，騰訊文檔可能更加符合國內審美。如果要比功能，Google Form……也還是比騰訊收集表強大，可以：生成圖表、給問題和選項插入配圖、插入視頻、區分問題模塊……

文章來源：優設   作者：ZoeYZ


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

今天我們來聊聊，交互設計師在做這種轉化頁面出發點是什么？可以采取什么手段去承載流量，提高轉化。

從上圖可以看出在未增加新功能、新頁面的情況下，設計師對頁面信息、結構進行了重整，你會發現更注重用戶價值的傳遞，整個頁面更加高效，用戶關注的信息點都很突出，并且有這么多優惠，讓用戶心理感覺更省錢了。以上這些都是為了去傳遞用戶價值，不斷的刺撓用戶心防，讓用戶破防！今天從交互設計師的角度闡述下如何去做轉化頁。

凸顯價值

在這個信息爆炸的時代，人都不愿意在無意義的事情上浪費一秒鐘，而面對產品界面也是一樣，看一眼沒有看到自己從中能得到什么可能就劃走了。所以在轉化頁這種承流量的頁面，凸顯用戶價值非常重要。

我們首先應該明確你目標用戶想要的到底是什么？是優惠？是承諾？還是被認可？如：購物類產品，用戶在平臺上可以獲得什么價值？除了可以不用去實體店在家就可以下單（滿足惰性）外，在使用 APP 過程中還能獲得什么價值？購物的爽感、有優惠便宜感覺自己賺到了？所以具體設計轉化頁的時候就是要抓住這些最關鍵點，然后進行放大，不斷刺撓用戶心防。

1. 讓用戶感覺省錢

其實絕大多數用戶都不是理性消費者，因為人性原因，我們的思考方式大多都是被系統 （無意識且快速，不費腦力）占據的，讓消費者失去了理性的誘因有很多，比如：占便宜、錯過、恐懼、好奇、虧欠、虛榮、逆反等等。其中便宜和錯過是最常用于設計中的。

直接 | 通過優惠標簽、對比、簡單粗暴告知省了多少錢

便宜并不是真的便宜，而是讓消費者感覺到占了小便宜。相比較拼團特惠標簽，直接將用戶可以省多少錢展示出來，對用戶的沖擊會更強。

間接 | 營造一種錯過就虧了、就沒有了的感覺

這在心理學叫：損失厭惡，它指的是人們對已經擁有的事物會習慣性地視若無睹，只有在失去或即將失去的時候才會產生加倍的珍惜感。對應到收益與損失上在人們心理敏感程度上來看，比起收益，人們對于損失更加敏感，這就是為什么在雙十一期間，各大商家都打著：“全年最低價，再不買就漲價、不買你就虧了、搶光了…”的標語，但是這種只是感覺上給人們造成好像真的“虧大了”，但是就算買到其實也未必賺到。所以，我們在具體界面上也可以適當采用這個原理技巧，增加緊迫感和稀缺性元素，營造一種錯過就虧了的感覺，讓用戶在猶豫時，能夠斬釘截鐵的按下 “轉化按鈕”！

上圖 VUE、脈脈都是采用“限時”的這個手法來因遭稀缺性與緊迫感，從而增加用戶購買欲望，而京東則采用“僅剩 1 件”“一年歷史最低價”的方式來營造緊迫感。

2. 強化產品賣點打消用戶疑慮

你可以看到現在各大電商上的物品的展示圖都從原來的靜態圖向動態圖及視頻化方向演變，這這種手段就是為了更加高效，直觀的展示產品本身的特質，讓用戶看了一目了然。在通過分析得出產品最終賣點后，在呈現形式上交互設計師也需要多多考慮。以下重點在展示產品賣點方式上進行闡述。

動態化展示

淘寶上的商品動圖，非常直觀的展示產品核心特性，幫助消除用戶疑慮。

對比型展示

通過列表直接展示普通用戶和會員用戶間的差異，這樣的方式直觀，代入感強，能夠很好體現產品本身的服務價值，更容易打消用戶購買疑慮。

平鋪直述

直接將用戶可以獲得特權展示，告知用戶可獲得哪些權益與服務，一般通過 icon+文案的方式直接呈現給用戶。

這樣的方式雖然沒什么大問題，但是在權限比較多的時候，細看其實會不知所云，不知道具體是干嘛用的，所以如果要采用這樣的方式建議搭配輔助說明。

亮數據（權威性）

將產品的數據直接展示出來，通過多維度數據權威展示產品亮點。

所以在凸顯價值感知上我們可以怎么做：

• 建立標簽體系，通過標簽優惠讓用戶感覺省錢
• 營造稀缺與緊迫感，讓用戶感覺再不行動就虧了
• 強調產品核心賣點且直觀展示
• 數據化闡述可信度更高，更有權威性

提供清晰交互動線

交互本身是一個動態的過程，轉化頁有時需要承載比較多的關鍵信息，而如何讓這些信息清晰，有序的展示在用戶面前并引發用戶互動是交互設計師需要思考的?？梢詮捻撁婵蚣?、操作引導上去思考與用戶的關系。

1. 頁面框架

轉化頁面上的信息需要非常高效的傳達給用戶，應采用最高效的方式展示給用戶。因為不同于購物類、視頻類 APP 用戶以“逛一逛、刷一刷”看看有啥好看的心態，漫無目的的瀏覽，而是會集中精力尋找價值從而說服自己去買，所以我們框架盡量線性，符合自上而下，自左往右的閱讀習慣，所以放到頁面上建議直接大模塊化從上至下排布，這樣能讓頁面更加規整，也符合與用戶的視線。

以上是我在各大應用會員轉化頁的框架，可以發現，拋開內容信息，整體框架前兩個會讓人感覺更舒服，這樣的搭配更加流暢性，比例更好，不會太分割，其實在設計模塊化卡片大小時也可以考慮下黃金比例。

2. 操作引導

說到引導我們可以來看一看下方案例，僅僅增加了很小的一個細節就達到質的效果。

所以在做轉化頁面時，對關鍵按鈕我們也需要采取一些方式讓用戶注意到，并吸引用戶點擊。主要可以從按鈕的位置、大小顏色，動效、文案 4 個方面來思考。

位置

由于轉化頁需要展示較多信息給到用戶充分思考，所以一般根據用戶的瀏覽習慣，按鈕一般放下右下角視覺落點處，這樣能比較好的組織頁面內容，突出又不搶頁面主要視線。

大小和顏色

重要的轉化按鈕大小絕對不能太小，但也不宜過大。記得 UI 中有關于按鈕大小的計算公式，可以在這個公式基礎上進行靈活調整。有些寬度很寬是為了加大用戶點擊熱區，讓用戶更容易點到。

顏色一般使用應用主題色，如果有多個按鈕，主按鈕顏色盡量有一定對比，這樣才能將我們想要讓用戶點擊的那個跳出來。

動效

動效一般在按鈕上增加一些掃光、光效、按鈕本身輕微動效即可，只要很微小的效果就可以，因為人眼在一堆靜態內容中很容易注意到動的東西，如果做的很強烈就本末倒置了。

文案

按鈕上的文案一定程度上也能夠促進轉化，所以在文案上表意的基礎上可結合我上面講述的第一部分進行文案的設定，加強用戶感知！

寫在最后

以上講述了交互設計師在面對重要的轉化頁時應該要著重將價值簡單高效的傳達給用戶，加強用戶的感知，可以通過貼標簽、緊迫感文案、動態化、對比化、平鋪直述、亮數據內容展示，更好的將產品價值傳達給到用戶，在具體內容布局上建議準尋線性的框架搭配顏色、動效、引導性文案的方式引導用戶操作。以上是我個人的思考與總結，有問題可以共同探討~ 感恩

文章來源：優設   作者：小發的設計筆記


分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

在《騰訊文檔-構建科學有效的色彩系統》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。

在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。

Chapter 1

——————————

如何建設？

HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。

在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。

Chapter 2

——————————

為調色板的基礎色值命名

調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調色板命名圖表

Chapter 3

——————————

定義顏色使用規則

1、 從調色板中選擇合適的顏色并測試

從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。

例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。

同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。

2 、根據任務定義顏色的使用規則

經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。

首先定義在界面中占主導地位的灰色、藍色的使用規則。

藍灰色_Grayblue：

在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。

品牌藍色_Primayblue：

品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。

其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。

紅色_Red：

紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標基準色：

在騰訊文檔中，不同的品類有不同的基準色。

Chapter 4

——————————

顏色變量的語義化命名

定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發來說也是巨大的災難。

根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統一的設計語言。

在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。

Chapter 5

——————————

建設團隊協同工作流

以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

1、 設計內協同：在Figma中生成顏色變量

在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。

2、 設計組件與開發代碼聯動：利用顏色變量表進行信息同步

我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）

最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。

結束語

上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。

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

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

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

案例1.用戶操作時的困惑

相信大家在做設計的時候都遇到過這種情況，一個產品內有多個入口指向同一個界面，這是產品的投機取巧還是另有深意，很多人都對這樣的設計有不同的看法。

這樣的設計就好像是狡兔三窟，在產品中流量可以從不同的入口進來，到多個不同的出口，也可以從不同的入口進入同一個地方。

有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題：

1.違反了效率、用戶預期的原則，會認為頁面空間有限，在同一個界面中有多個入口指向一個界面效率變低，而且用戶知道后往往就會只從一個入口進入。

2.多個選擇會讓用戶拉高轉化的成本，用戶在選擇的時候會花更多的時間思考有什么區別。

我們來看一個例子，下面德邦app之前的一個版本，目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了，并且我的快件也直接可以展示在首頁的下方，我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。

通過這個案例我們發現確實這些板塊和功能重復度太高，并且沒有區分出場景，這樣的設計證實了以上的兩個說法，降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。

但是我們分析問題也要多角度去觀察，多個入口進入同一個界面只有缺點沒有優點嗎？

顯然不是，我們再來看幾個案例

下方是一個商品評價的卡片，經過我小手的實際測試，發現無論點擊這個卡片任何有內容的區域，都會跳轉到全部評價的界面，那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢？答案是，不會。

這里的設計邏輯并不是和沙面那里的場景那么單一，而是用戶在面臨不同需求場景的時候可以有選擇。

不知道大家有沒有發現一個問題，在上面德邦案例的時候，你會對兩個入口有疑問，但是在評價卡片的時候并沒有，這個卡片包含了4種不同的場景：

1.我想看看有哪些好評、哪些差評 

2.幾個不同標簽的用戶都是怎么說 

3.下面用戶的實拍到底是不是真實的 

4.還有沒有更多類似真實用戶的使用評價。

所以即便最終到了一個界面，對于用戶來說也是從獨立的出發點開始的，而再回過頭看上面案例，你會發現，我就是要寄東西，這里有兩個入口，怎么選。

而且，考拉這里其實還做了從不同內容點進去的一個區分。

再來看個案例，貝殼的地圖找房，在首頁中有兩個入口，導航欄一個，分類中一個，這里出現重復會造成一開始說的問題嗎？首先我們看到貝殼的業務很多，以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容，大家也可以思考一下，在這個界面中，會不會出現兩個地圖找房不同的場景出發點呢？我個人覺得其實是可以商榷的，首先地圖找房在房產app中是很核心高頻的一個功能，他的屬性是“工具”。

所以我覺得他之所以在卡片中再放一個地圖找房是3個原因

第一個是導航欄的找房肯定不能動，他是一個全局的入口，即使頁面滾動也可以隨時點擊到，即便要撤一個，也肯定要撤下方卡片分類中的。

第二個是卡片分類中的圖標入口是都具備工具屬性的，那首頁上面部分就分為了：搜索、業務分類、工具這三塊。所以用戶看到這些工具屬性也會聯想到通過地圖去找房。而且這些多色彩的圖標對于新進入的用戶是比較吸引注意力的，所以很有可能用戶看不到右上角的地圖找房（可以參考古騰堡圖表的原則）。

第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能，所以將“地圖找房”四個字顯示全。

但這些都有一些主觀因素在里面，如果真的去掉卡片中的，我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流，但是分流的目前主要是讓流量流到他應該去的地方產生實際價值，除了以上的3個原因，好像確實有點重復了。

再來看一個例子，小鹿茶app。

首頁的現在下單和底部菜單標簽都是到同一個界面，那為什么要重復呢？這里其實考慮更多的他并不想讓用戶進來就直接去購買，為什么不直接購買呢？應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務，比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。

如果只有菜單，產品也會顯得更工具化，很難突出自己的品牌，對業務增長沒有太大的幫助。有同學要說，那這個界面只是產品的“一廂情愿”，我就只要點奶茶就可以了，多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單，而不是首頁。

所以，到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐，又沒有用戶場景的變化，那么這個重復的入口就是雞肋的。

最后留一個小思考題：網易云音樂的“歌單”在首頁上也重復了，大家知道這里為什么他要做成重復入口嗎？ 

案例2.用戶使用中的不滿

一個優秀的產品或者說一個合格的產品，能給用戶帶來愉悅的體驗。何為體驗，用大白話來說就是用的舒服、自然、高效率。

再有一個底線就是不要讓用戶產生由產品帶來的負面情緒，例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等，根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。

很不幸的是我就遇到了這樣的體驗，當時正在給同學們布置一些作業練習，體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App，體驗了極速撿漏這個功能模塊。

撿漏：在文玩圈的一句行話，意思就是用很便宜的價格買到很值錢的古玩，而賣家卻不知情，是一種可遇不可求的行為，所以寓意就是比較難得、走好運了。

進入直播間，商家在賣力吆喝，頁面底部有加一手的按鈕，就是類似于拍賣，價高者得。于是我就抱著試一試的心態點了加一手按鈕，因為我預期是產品會再次向我確認是否要加價，結果是居然加價成功了，發生了什么？最后競拍結束也沒有人繼續加價了。

實際場景中用戶可能誤操作不小心點了按鈕，這樣的場景和情況是非常多的，即便不是誤操作，給一個二次確認的對話框也可以避免這樣的尷尬狀況，因為用戶就喜歡在產品中點來點去，然而你在這里就像埋了一顆地雷。

如果到這里就結束了，那其實我也感覺沒必要去吐槽，問題在于當我拍下還沒付款，直播間的商家就開始喊我的名字：xx大哥恭喜你拍到了我們的產品，可以去付款了。連續播報了幾十遍，我尷尬的直接退出了后臺，這種感覺就像是一群觀眾看著一個被騙的小白一樣，當我過10分鐘后打開系統提示商品流拍了，并且累積了違約積分。

？？？

到這里，可能會有人說，你自己拍了的又不付款，當然要懲罰你了。

于是我還是認真的去研究了一下，發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊，在競拍板塊都會有需要用戶確認的操作，并在操作下方給出拍賣規則，顯示出價即表示同意拍賣規則。

但是該產品極速撿漏的板塊并沒有這樣的說明，既然沒有提前展示這樣的說明和約定，用戶就不知道有這樣的規則，我拿了競品一對比，其實在直播帶貨的場景下，這個出價流程還是不同的，雙方其實都沒有給規則說明，但競品還是給了一個出價選擇后再出價的步驟。

最后我甚至被商家拉黑了，不過還給我一個投訴商家的入口

我當時的想法：

1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意？

2.請先告知我約定與協議的內容，單方面在我不知情的情況下對產品進行操作后，通知扣我違約積分，這樣就有點“霸道”了。

3.平臺對商家和消費者的權益是如何平衡的，文玩行業和互聯網結合的難點在哪里。

3.線下文玩圈的一些不成文行規，導致新人入圈后產生的沖突。

于是我就想對此說說我的看法

1.交易是產品平臺其中的一個功能屬性

交易是產品平臺其中的一個功能屬性，需要優先滿足產品對用戶價值，其次再談交易的合理性。在這個流程中，面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本，我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了，如果用戶不小心操作失誤，那么我們盡可能減少這些因為用戶犯錯帶來的成本，同時在用戶犯錯之前就要明顯告知用戶，將風險控制、前置。

所以，你在注冊的時候、登錄的時候，產品一定會讓你同意一份用戶協議，告知你我們要保存你的數據和一些跟你相關的信息，如果你不同意，那就無法繼續體驗產品。

這是一種契約。

同理，如果你想讓用戶在這個產品中去參與拍賣，在進入這個板塊之前或者用戶點擊按鈕之后，也需要讓用戶明確這個操作帶來的風險是什么，取得用戶的同意。而不是直接讓用戶加價成功，導致用戶不明所以的被扣違約積分、被商家拉黑，這就和你去泰國，在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片，結果別人來問你收錢是一個道理。

對于正常線下拍賣的流程，舉辦方也會對參與拍賣的人員進行相關規則、流程的告知，并且將風險、問題都提前讓客戶進行協議確認。

所以，在產品中的交易，必須先滿足用戶與產品信息之間的對稱關系，保持信息的透明和契約公正，規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。

2.對于商家和產品的價值

商家希望有更多的流量來曝光商品，撿漏商品的低價可以快速吸引一大批用戶，比如8塊錢的一個木頭核桃的雕刻掛件等，產品通過營造搶購、限時的氛圍，吸引用戶下單，并且降低用戶參與的門檻。

那么，直接加價成功是一個好的降低門檻的策略嗎？我覺得并不是，降低門檻并不意味著就是直接拍到，而是需要提高用戶對產品的信任度，這個極速撿漏的模塊的目標用戶幾乎都是小白用戶，因為資深的玩家看不上、更不會買，有一定經驗的玩家也看的出好壞，明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說，內心是謹慎的。

可能有人會想，這幾塊錢、十幾塊錢的東西還需要考慮嗎？當然在這個場景中，從眾心理是很明顯的，大家都覺得很便宜，但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要，大部分人都覺得這么便宜東西肯定不咋樣，運費是不是貴的離譜、有沒有托在背后跟你抬價呢？大家都不拍我也觀望。越多人圍觀，越難促成交易。

還有一種可能就是我賣不賣的出去東西，并不重要，重要的是有人來看了，這些邊角料都是用來回饋直播間粉絲的，就是一個窗口，真正有利潤的東西在櫥窗里。所以這里的撿漏只是一個引流的噱頭。

人總是對太輕易得到的東西不珍惜，更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互，個人認為是不妥的，無論是上面任何一種情況，都沒有辦法讓降低門檻，甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。

不信任產品是大。尤其是作為一家平臺來說，虛假交易、以次充好、濫竽充數等等行為是致命的。

3.文玩的價值

我其實有玩過一段時間文玩，受我老丈人的影響，有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻，很有意思。

文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品，同樣一塊玉，他的種水一般，但是花紋很獨特，買賣雙方其實心理的價值預期會相差非常多，它就不像買電子產品一樣價格那么透明容易計算。

有的人玩這些就是覺得命里該有它，它能給我帶來財、運，幫我辟邪，看的是眼緣。而不是路邊上一塊無用的石頭，可以隨意拾取丟棄。那么換句話說，如果在用戶下單的時候，我們利用一些情感化的文案，讓用戶喜歡上這款文玩，是不是也可以大概率的促進交易呢？

4.文玩圈的行規

我相信很多玩文玩的小伙伴都知道，在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。

1.還價意味著出價，出價意味著買下

在文玩圈，你不想買就不要還價。如果賣家同意了你的還價，那你就必須買。這代表著你個人的信譽和道德品質。

所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁，不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶，這需要大家一起努力和營造起一個良好的文玩圈的文化和規則，而不是直接生搬硬套，提高這個門檻。

2.不要打聽別人的成本

文玩沒有實際的成本，可能別人花10塊錢淘到的價值1萬塊的東西，也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處，別人也不會告訴你。

3.別人在交易的時候保持沉默

文玩在每個人心中的價值不同，所以貨幣價值也不同，當別人在詢價還價的時候，不管怎樣我們都不要去表明自己的看法和想法。

當然還有其他的規則就不一一敘述了，針對這3條，其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩，你一拍下，別人就說這個根本不值這個價錢。還有你出價了但是又不想買了，這些原本在文玩圈子中不允許的規則，在互聯網上去要求用戶著實有點困難，因為互聯網上的交易并不一定所見即所得，可能展示的是這樣，收到貨又是另一個東西。

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

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

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

念起

作為一名UI設計師，不免每天都會和色彩打交道，但有時總會苦惱于色感把握不準，讓我們配的色彩，總是“不對味兒”。我結合在近期的一些項目中對于HSB色彩模式的應用，與大家分享一些結合HSB（HSV）色彩模式幫助我們進行配色的理論和技巧。也歡迎大家一起討論，共同進步。

色彩模式有哪些？

我們生活中借助觀看而感覺到的“色彩”，可分為光加上顏色之后所透出的“透出色”，以及光照射到物體上反射出的“反射色”。

透過色是以“加色混合”的方式，由紅、綠、藍，共三色混合，表現出各種的顏色，我們的計算機屏幕就使用這種方式表現顏色。這種色彩表現方式，稱為RGB色彩。

▲圖1 《設計入門教室-色彩設計的原理》

物體色彩的反射色，是用畫具或染料、油墨等“色材”來表現顏色，印刷品基本是由青、洋紅、黃、黑四種油墨相互組合而成，所有的顏色皆以“減色混合”的方式表現，這種方式稱為CMYK色彩。

RGB和CMYK兩大色彩模式是最重要和最基礎的。RGB更是與我們的工作密不可分?？墒?，在實際工作中我們往往很少直接通過RGB模式進行調色。

簡單聊聊HSB色彩模式

1.HSB是什么？

「這是什么顏色？鮮不鮮艷？很亮還是很暗？」當我們看到一個顏色時，往往心中都會閃現這三個問題。

事實上，人類對于色彩的第一個感知往往是從色相（Hue）開始，即紅色橙黃色綠色青色藍色紫中的一個，然后是它的深淺度。

HSB模式對應的媒介是人眼，在選擇色彩這件事上，HSB使用了更貼近人類感官直覺的方式來描述色彩，它把顏色分為色相、飽和度、明度三個因素（將我們人腦的“深淺”概念擴展為飽和度和明度）。

H—色相/色調：顏色的相貌，顏色的調性，在標準色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無色相）。

▲圖2 網絡圖片-圓形色相環

S—表示飽和度/純度：顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色。

B—表示明度/亮度：顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。

工作中，我們常用的設計軟件ps、 Sketch都是通過拾色器幫助我們選擇需要的顏色。

▲圖3 軟件拾色器截圖

HSB模式，可以完美固定HSB中的某一個參數，只對其他兩個參數做改變或者只改動其中的一個參數，這一點，完全符合人的色彩直覺，也只有HSB能做到，而RGB、CMYK都是牽一發動全身的節奏。

通過HSB模式，我們可以在已有顏色的基礎上，進行飽和度、明度的微調。以及選定主體色之后，根據需要，通過數值的加減改變色相，選取合適的顏色（互補色為180°、對比色為120°到150°、類似色為90°、鄰近色為60°、同位色為15°。）

2.在設計中如何運用HSB色彩模式

通過上述對HSB的原理、特點簡單介紹后，相信大家對其都有了基本的了解。以下我結合在工作中的幾個案例來說明HSB在設計中是如何實際應用。

舉個例子：如果我們在設計一個頁面時，除主色之外我們需要一個近似色，就可以運用HSB色彩模式。

通過圖片我們可以看出右側的顏色整體視覺效果感覺更加和諧、舒適。在界面設計中我們常會遇到以顏色對同一種類型的不同狀態進行區分，比如背景，按鈕等。

結合上述的例子，以及飽和度與明度的變化規律：

（在不改變色相的情況下）

HSB色彩模式在項目中的實際應用

1.爆款、預約詳情頁色卡庫

在去年的vivo游戲中心爆款、預約詳情頁的改版優化中，都運用了HSB色彩模式。使不同游戲可以根據頭部氛圍圖配置出3個相同色相值的近似色并運用到頁面中。保證色彩搭配有規律可行，并且展示效果在基準線之上。

系統統一從頭部氛圍圖吸取、確定顏色后，通過調整飽和度和明度值（色值不變），即可得到一套色卡。

▲圖4 vivo游戲中心預約詳情頁設計規范

2.聯運深色模式中的應用

在雙系統的深色模式適配要點中有提到“高飽和的顏色在深色的背景下容易產生視覺抖動，從而導致人眼疲勞”，在深色模式下我們應當選擇更淺的顏色以達到更好的可讀性。

我通過結合Material Design以及Developer深色模式適配規范中的色彩示例來簡單說明，怎樣借助HSB，來達到深色模式色彩科學合理的適配。

▲圖5 Material Design深色模式適配規范

▲圖6 Developer深色模式適配規范

通過對兩種規范的學習以及對比，可以看出Material Design的規范相對而言更加直觀和系統（手把手教你），Developer的適配則比較微妙（只可意會），沒有明確的說明方法或者規律。但Developer示例中的適配則更加注重視覺表達以及色彩的一致性，帶給人的視覺感受更加的舒適和諧。       

重點分析Developer深色適配中的配色示例中，通過將Developer給出的深色模式適配示例的色值轉換為HSB之后，發現其HSB的數值變化是有一定規律的，規律基本符合：

BUT：

在根據Developer的深色模式顏色適配的示例總結其規律的過程中，對于數值的變化，產生了一些疑惑：

直到了解到：「每個顏色都有其專屬的“感知明度”，也就是亮度」

將色相環“去色”后，可以明顯看出：

每一種顏色（色相），都有著獨特的“感知明度”，在S、B相同的情況下，黃，青，洋紅的顏色會讓人感覺比較亮，結合這點再結合Developer深色模式的適配示例以及得到的基礎規律后。可以得出：

將上述我們所得的“HSB配色一般規律”運用在vivo游戲中心聯運深色模式主色的推導，以及vivo游戲中心爆款詳情頁自動吸色系統優化中，使得頁面的閱讀體驗更加良好，整體配色和諧舒適。

▲圖7 vivo游戲中心、聯運游戲爆款詳情頁

寫在最后的話

HSB在設計工作中的應用當然不止上面講的這些，比如我們經常碰到的頁面中為了區分不同層級的文字，會給予文字不同灰度的顏色（最常見的#000000、#333333、#666666、#999999）也是應用了HSB模式，當我們所要區分的層級多于四種時，就不需要在色板里糾結了，只要按照上述的規律，以不同明度的變化就可以了。

在我尋找資料的過程中，也看到很多通過色相，飽和度，明度的一致或者對比等方式得到協調優秀配色的方法。這些都可以通過方法和HSB模式的結合，快速方便準確幫我們找到合適的顏色。

▲圖8 網絡圖片-色相環配色圖

在日常設計中，可以通過個人對色彩的感知與把握選取一個顏色，再通過HSB快速的選擇相應的色板，運用在頁面配色中。到這里關于HSB色彩模式在設計中的應用就全部介紹完成了，如果你閱讀完也有所收獲，不要忘了點贊喲~

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

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

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

文章來源：站酷 作者：SPECHEN 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

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

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

不同尺寸屏幕的設計技巧

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

使用不超過兩級的子菜單。任何多于兩級的子菜單都可能使用戶感到困惑。保持導航相對平坦可以提高用戶的可查找性，并減少記住他們所在位置所需的認知負擔。如果站點的頁面結構很深，請考慮在密切相關的頁面頂部添加本地導航菜單。例如，設計復雜業務支持產品的 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務