表單輸入詞條 2-07
下拉選單Select
也常叫做:下拉式選單、下拉清單(口語)、Dropdown(技術圈常直接用英文)
你可能會這樣說
縣市不要讓人家打字,用選的——那個展開來挑一個的東西叫什麼?
白話解釋
下拉選單是收起來只佔一行、點開才展開清單的選擇元件:縣市、付款方式、生日年份。它的存在理由:答案可以被列完,就別讓使用者打字。打字會打錯,「台北市」和「臺北市」對程式來說是兩個不同的答案。
好用的下拉選單有幾個眉角:選項要照邏輯排(縣市照地理、年份照大小);預設值放最常見的選項;選過之後,框裡要看得出選了什麼。選項一多(例如 200 個國家),要能在裡面打字搜尋。
跟 AI 協作時,常見的坑是它做出「長得像下拉、其實只是排版」的東西——點了不會開、選了沒反應。驗收標準很簡單:鍵盤也要能用(Tab 聚焦、Enter 展開、上下鍵移動)。
親手試試
選好之後,這裡會出現寄送資訊。
試試:用 Tab 聚焦到選單、按 Enter 展開、上下鍵移動、Enter 確認、Esc 關閉——鍵盤能用才是真的下拉選單。
別搞混
會「展開」的元件有好幾種,用途完全不同,選錯 UX 會很卡。
下拉選單 Select
選一個預先列好的答案。選項多、畫面空間少時最好用。只能單選,這是它跟核取方塊最大的差別。
核取方塊 Checkbox
勾多個獨立的選項:興趣、同意條款。每個選項都是是非題,互不影響。可以全勾也可以全不勾。
選單 Menu(導覽選單)
名字裡也有「選單」,但那是導覽用的:帶使用者去別頁。下拉選單是填資料,導覽選單是帶路,兩回事。
這樣對 AI 說
中文就可以
請做一個「寄送地址」的下拉選單: 1. 選項是台灣 22 個縣市,請依北到南排列,預設選「請選擇縣市」而且不能送出。 2. 點開時展開清單,可以用鍵盤上下鍵選、Enter 確認、Esc 關閉。 3. 選好後,下面顯示「將寄送到:○○市」。 4. 手機上要好按,選項列高度至少 44px。 樣式不用花俏,乾淨好用就好。
把鍵盤操作明確寫出來——這是分辨「真元件」和「假排版」最快的方法。