你懂的網站推薦（一看就懂）

編輯導語：下拉菜單的模式在設計中最為常見瞭，那你有沒有依賴下拉菜單呢？本文作者從四個角度進行瞭全面的梳理與分析，幫助你詳細瞭解下拉菜單的設計，做設計的同學感興趣就來看看吧。下拉菜單是在界面設計中很常用的組件，它以下拉的方式同時展示多個標簽並幫助用戶縮小選擇范圍，快速滿足用戶的選擇需求，尤其是一些導航，設計師會很依賴下拉菜單的使用。在UI設計中，雖然經常會使用到下拉菜單，但很多設計師對它並不是很瞭解，如果過度使用或濫用，也會對用戶體驗產生負面影響，所以，如何正確的使用下拉菜單就顯得非常重要，設計師需要對它有一個更為全面的瞭解。那麼，如何區分下拉菜單設計的是否合理？到底有哪些利弊？什麼場景下需要使用下拉菜單，筆者將從什麼是下拉菜單開始，對下拉菜單的構成、類型、使用場景及註意事項進行一步步梳理總結，希望本篇文章對大傢有一定的幫助。一、基本介紹及結構梳理1. 什麼是下拉菜單？下拉菜單是選項的一種呈現方式，當用戶點擊某個觸發圖標/箭頭時，會彈出一個項目列表，用戶需從中選擇一項或多項來滿足自己的選擇需求。下拉菜單經常用在表單選項、篩選條件、導航等界面模塊中，被觸發後彈出的內容包括但不僅限於單選列表、多選列表、子選項、搜索等，內容較多時可能需要上下滾動，真實情況視選項的實際數量而定。2. 下拉菜單的構成下拉菜單看起來跟表單中的選項框幾乎一致，但在真實的表單頁面中，觸發表單項後可能是下拉菜單，也可能是彈窗或頁面跳轉。同理，下拉菜單也會經常用在除表單之外的其他界面模塊中，從表面上看跟表單一樣，而實際的元素及交互效果則有很大的區別，但本文主要針對表單中的下拉菜單（非導航）作出介紹，有以下十個部分構成：標簽：告知用戶該下拉菜單項需要選擇什麼內容；容器：用於承載選擇前的信息提示（占位符）及選擇後的內容；下拉箭頭：提醒用戶有可點擊的延展項，點擊後彈出下拉框，箭頭垂直翻轉，再次點擊箭頭或選擇內容後復原。另外，部分產品使用到倒三角代替下拉箭頭，其作用相同；占位符：對標簽進行描述或補充，減少用戶出錯的可能，選擇內容後會直接替換占位符；下拉框（容器）：用於承載下拉選項的容器，點擊下拉箭頭後會彈出下拉框；選項列表：供用戶選擇的內容；分隔線：當列表中選項較多時，添加分隔線能更好的區分每個單獨的選項（視情況而定）；已選中：彈出下拉菜單後，通常會用單選/復選框、主體色、加粗等樣式提示用戶默認選項或已選中的內容；滾動條：下拉框的高度會有一個最大值，當選項列表高度超過下拉框的高度時，就會出現滾動條；系統反饋：用戶未操作必填內容就提交任務時，系統會給予提示。3. 下拉菜單的幾種狀態不管是出於系統問題還是用戶的原因，下拉菜單能否操作或有什麼限制，都應該給予用戶及時的反饋。雖然存在多種交互狀態且在視覺上都比較相似，但在設計時需要明顯的區分開來，常見的狀態有默認、懸停、聚焦、完成、禁用和錯誤提示，下面一起來看看設計師如何通過不同的視覺樣式反饋給用戶。1）默認狀態即初始化狀態，操作之前的樣式，用戶可從標簽內容中獲取該下拉菜單的主題內容，通過下拉箭頭預示該內容的可操作性。對於部分選項較少下拉項，系統會默認選擇一個與該用戶最匹配的、或在目標用戶群體中選擇率最高的一項作為默認選項，以此減少用戶的操作次數，降低任務流程的操作成本。2）懸停狀態當鼠標經過或停留在一個下拉菜單項時，容器會通過改變填充色、描邊色或其他不同於初始化的樣式提醒用戶該內容的可操作性。懸停狀態隻出現在電腦端，因觸屏設備直接與之產生交互，會直接越過該狀態。3）聚焦狀態聚焦狀態是指用戶正在與之發生交互，點擊後，展開選項列表的同時，容器通過投影、邊框加粗或主色調來提醒用戶當前正處在操作中，下拉箭頭會進行垂直翻轉（向上）。在很多其他模塊組件中，展開/收起也是源於箭頭上下方向的提示。4）完成狀態用戶完成選擇後，容器中填充被選中的選項並替換占位符，對於非必填的下拉菜單項，後面出現一鍵清除圖標“⨂”，其他元素與初始化狀態相同。5）禁用狀態對系統禁用或當前未滿足操作條件的下拉菜單項，為保持內容的可見性，對部分元素置灰以提醒用戶。6）錯誤反饋相比輸入框，下拉菜單項出錯的情況較少，用戶出現漏選、或任務流程存在兩個互斥的選項時，系統會通過強提醒警示用戶，例如將提示文本、容器描邊及填充使用紅色。二、使用下拉菜單需滿足的條件1. 由選項數量決定（移動端）首先，選項數量不能太少也不能太多。說人話，就是選項數量為5~9條是使用下拉菜單的最佳選擇。因下拉區域的空間有限，考慮到用戶操作的難易程度，大多數情況下，低於5條選項使用單選按鈕即可滿足，超過9條就需要更多的展示空間，使用操作欄彈窗或頁面跳轉則體驗更好。當然這並非絕對，隻是作為一個參考值而已，使用下拉菜單以5~9條為例，可滿足工作中的大部設計需求。其次，在選項數量滿足的條件下，選項文本的字數也需越短越好，如果文本過長導致折行或省略，用戶體驗也會大打折扣，還不如棄用下拉菜單、換種方式呈現。2. 由便捷性決定能讓用戶選擇的就不要讓用戶去輸入。比如用戶在選擇退款原因時，常見的原因就那麼幾種，使用下拉菜單的樣式呈現，比碼字的操作效率會高出很多，即便用戶有自定義需求，增加一個「其他」選項完全可以滿足。另外，需要說明的是，這種方案隻能滿足大部分設計需求及使用場景，沒有絕對好的設計。當輸入有可能比選擇更快時，那就果斷讓用戶輸入，這種情況一般出現在日歷控件中，如果用戶年齡跨度較大，想象一下，需要在幾十甚至上百組數據中找到自己的出生年份也是件很痛苦的事情，還不如輸入4個數字來的快。3. 後期延展決定如果當前選項較少（低於5項），由於內容是管理後臺配置、且根據產品需求短時間內有陸續增加的規劃，但最終數量可控，這時，即便是隻有一兩條選項也可選擇使用下拉菜單。三、下拉菜單類型根據用戶需求、內容性質的不同、處理各種信息時更加方便，其下拉菜單的視覺樣式、交互方式也會有所不同。例如：在導航中使用下拉菜單、表單中使用下拉框，甚至某些特殊場景中，下拉框和下來菜單還能互換，但為瞭兼顧不同類型、提升可用性，仍需特別留意這幾種類型及變化。1. 導航類型幾乎所有的網站都離不開導航類型菜單，分為水平導航和垂直導航兩種。水平導航一般出現在網站頂部，例如官網頂部的功能分類、電商網站的商品分類等；而垂直導航絕大多數出現在後臺管理系統的左側，不管是哪種類型，主要目的是通過所提供的導航鏈接將用戶帶到新的位置。2. 命令菜單類型命令菜單主要用於計算機桌面軟件及應用程序的頂部，點擊後會展開很多選項按鈕以供用戶進行下一步操作，部分較為復雜的功能選項會伴隨著二級（子菜單）選項列表，方便用戶對軟件、應用更好的控制。3. 表單類型眾所周知，在條件允許的情況下，用戶選擇的速度要遠遠大於碼字的速度，且更有利於系統進行數據統計，所以在很多表單中，都會設計一個選項字段，讓用戶通過下拉菜單選項便捷式選擇。表單類型的下拉菜單也有多種類型樣式，下面將一一進行介紹：1）標準樣式標準下拉菜單是最原始、操作最簡單的類型，沒有任何的彎彎繞繞，觸發彈出下拉選項後，選中任一內容即完成與當前表單項的交互。2）關鍵詞匹配這種類型常出現在選項較多的場景中，為瞭方便用戶更快完成選擇任務，在標準樣式的基礎上增加瞭輸入功能。輸入的過程中，系統根據輸入的關鍵詞在已有的選項中進行匹配、篩選，用戶可在篩選結果中快速找出自己需要的選項，無需輸入所有文字、也不用在內容超多的列表中來回尋找即可完成任務。3）搜索框這是一種比較老派的做法，觸發下拉菜單後，通常會在選項列表上方增設一個搜索框，用戶輸入關鍵詞後進行搜索，相比上面提到的關鍵詞匹配就有些落後瞭，不僅視覺樣式變得復雜、也增加瞭用戶的操作成本。部分PC端網站的選擇地址控件中還有使用，但更多產品直接使用瞭城市拼音首字母進行分類篩選，顯然比這種搜索方式的效率更高。4）多選/復選即用戶在同一表單項中選擇多個選項，雖然這種設計方式操作起來比較復雜，但在內容較多、空間資源不是很充足的管理系統、B端設計中還是很實用的。例如用戶權限配置、帶有二級/三級聯動的機構或地址選擇，多選相比平鋪更節省空間，且這類用戶很多都是經過培訓、相對專業的群體。四、常見問題及避坑指南1. 延展不要超過兩級菜單的子層級越多、操作越復雜、用戶體驗就越差，盡量不要超過兩級，如果超過兩級，在條件允許的情況下進行二次分析增刪、合並分類，以此來減少用戶操作負擔。當然這並非絕對，隻能在相對情況下盡量避免，例如選擇地址（省、市、區/縣）時就無法刪減。2. 默認值的使用默認值主要針對表單類型的下拉菜單，在可預知的場景中、通過行為預判提前為用戶選中某個最常用、選擇頻率最高或當前用戶最有可能選擇的內容，方便被精準匹配到的用戶不用做任何操作即可完成任務，同時也提高效率。但根據筆者在體驗的多個產品中、以及看過相關方面的各種資料說明，是否需要提供默認選項則各自參半，成瞭兩相對立的局面，暫且不論默認選項是否合理，但如果出現以下情況請慎用。1）選填項為選填表單項提供默認值，用戶極有可能直接略過該項，最終默認值並非用戶的真實需求，這也將變得毫無意義，甚至在後續的數據分析中產生誤導，影響產品的走向。另外，即便用戶註意到瞭，不想選擇任何內容，還得手動清除，這就需要用戶付出更多的時間成本和操作成本，與用戶體驗相悖。2）均衡度適中當多個選項的使用率較為均衡，提供默認選項確實會減少這一小部分用戶的操作成本，但在大部分的用戶群體中，隻要不影響其利益或用戶認為無關緊要就會默認該選項的可用性，同樣會出現上述問題。3）用戶屬性模糊這種主要針對千人千面的推薦設定，在一些新註冊或行為飄忽不定的用戶群體中，推薦默認選項也會將出錯的概率大幅度提升。3. 避免滾動失誤對於選項較多的下拉菜單，滾動不可避免，但有沒有一種可能，我們在明明需要滾動下拉列表、可滾動的卻是整個網頁，而鼠標離開下拉區域去滾動頁面、真正發生滾動交互的則是下拉列表，苦不堪言。解決這個問題需要程序員對滾動交互時的光標位置作出界定，當下拉菜單僅處於聚焦（高亮/主體色/陰影）狀態時滾動選項列表，除此之外滾動頁面即可。這裡需要說明的是，光標離開下拉菜單就可取消聚焦狀態，不用非得等用戶完成選擇任務後再取消，目的是為讓下拉菜單與頁面的滾動互不幹擾且能隨時切換。4. 選項數量1）選項太少表單選項太少能使用下拉菜單嗎？答案是“當然能”。但這又是何苦呢，如果隻有兩個選項，用單選按鈕它不香嗎，用戶隻喜歡用最少的操作在最短的時間內完成自身所需，每多操作一次都可能會離開。2）選項太多下拉選項過多可能會對用戶產生負面影響，但有些時候是無法避免的，例如選擇國傢、地址、區號等，不管怎麼做都沒法簡化。這時，增加前面所講到的關鍵詞匹配、搜索框功能，就能提高用戶的完成效率，也讓產品變得更容易使用。5. 如果輸入比選擇更快在部分特殊場景中，輸入明顯比選擇更快。試想一下，自己的出生年份僅僅四個數字，但卻要在幾十個選項中滾動查找，真的很費時間，選擇信用卡的有效期也是如此，要解決這個問題隻需一個數字鍵盤，讓用戶自己輸入會容易許多。6. 減少操作這裡有一個很經典的例子就是日期組件，對於年、月、日的選擇，分別使用3個下拉菜單看似也能接受，但真的很復雜，且每次前面內容的變化都對後面的數值起著決定性的作用。將三組內容進行合並且讓用戶自定義，就方便很多，能減少部分多餘的操作。7. 精簡的選項描述一句話能說清楚的就不要用兩句話，文字越多、理解成本就越高。在空間有限的下拉區域，選項要盡可能簡短，直擊核心內容。8. 選項的優先級下拉菜單中的選項並非隨意擺放，要想迎合用戶、使其有更好的使用體驗，就需要符合一定的規律。將最常用的選項靠前、相關聯的組合、時間按照先後、地區按首字母等優先級排序，讓用戶操作前就能一目瞭然。9. 不可用選項置灰當某個選項被系統禁用或用戶未達到選擇條件時，盡量不要將這些選項隱藏，避免用戶從一開始就誤認為是內容的殘缺或系統本身就不具備某些選項，為後續埋下弊端。將已存在但不可選擇的內容置灰顯示，不僅能保持內容的完整性、提醒用戶後續可選，還能在某些特殊場景讓用戶主動激活可選條件，提升用戶對產品的使用深度。另外，如果空間資源足夠，在附近提示不可選的原因能確保用戶使用更順暢（鼠標懸停在不可選內容，臨時提示就是一種不錯的方式）。五、總結正確的使用下拉菜單既可以保持界面的美觀度，還能通過合理的利用空間資源、提高用戶選擇效率，但切勿濫用、亂用。關於下拉菜單的使用方法及技巧遠不止於此，隻要我們在設計前考慮清楚何時用、怎麼用、如何更好的使用，再加上後續持續不斷的優化、查漏補缺，才能發揮下拉菜單的最大價值。#專欄作傢#大漠飛鷹；公眾號：能量眼球，人人都是產品經理專欄作傢。致力於產品需求的驅動、產品體驗的挖掘，利用設計的手段為受眾用戶帶來更好的體驗，即好看、好用。本文原創發佈於人人都是產品經理，未經許可，禁止轉載。題圖來自Unsplash，基於 CC0 協議。