中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導(dǎo)讀：下拉菜單是UI設(shè)計，網(wǎng)頁設(shè)計中的基礎(chǔ)控件，也是平時大家做設(shè)計時會用到的常用組件，所以有必要對它進(jìn)行全面深入的了解。本文非常全面的介紹了下拉菜單的設(shè)計法則，相信讀完會對下拉菜單設(shè)計有一個全新的認(rèn)識，一起來學(xué)習(xí)吧。

下拉菜單在UI設(shè)計領(lǐng)域經(jīng)常飽受批評，但這也不是沒有理由的。設(shè)計得不好，它們變成了繁瑣和Low的代名詞。不過這不是這篇文章要討論的，我們將要討論的是，在必要時應(yīng)該如何正確的使用它們。

同時我需要申明的是，下拉菜單有兩種主要類型：一種用于導(dǎo)航菜單，另一種用于表單。在這篇文章中，我們只聊表單中的下拉菜單設(shè)計。

文章將會聊到如下內(nèi)容：

1. 設(shè)計全面圖解
2. 下拉菜單的類型及變化
3. 下拉菜單風(fēng)格
4. 下拉菜單狀態(tài)
5. 提示語句
6. 何時使用下拉菜單
7. 原生下拉菜單
8. 可用性檢查
9. 結(jié)語

01 設(shè)計全面圖解

下拉菜單的設(shè)計圖解和文本輸入框很接近，只是內(nèi)容多一些。（1.欄目內(nèi)容 2.容器 3.下拉箭頭 4.占位符或提示文本 5.滾動條 6.下拉菜單 7.菜單項 8.分割線 9.選中項 10.提示）

下拉菜單設(shè)計圖解

02 下拉菜單的類型及變化

人們對標(biāo)準(zhǔn)下拉菜單已經(jīng)有了普遍的了解，但你仍需要在工作中留意幾個特別的類型和變化。這里包含的下拉菜單是針對表單的情況，并不是導(dǎo)航欄里使用的下拉菜單。

標(biāo)準(zhǔn)下拉菜單

標(biāo)準(zhǔn)下拉菜單是針對我們所理解的“下拉”這個動詞。在激活狀態(tài)，當(dāng)你點擊貌似文本輸入欄的地方時，它會打開一個菜單。

標(biāo)準(zhǔn)下拉菜單

下拉菜單配自動提示

我超喜歡這個功能。當(dāng)我第一次注意到自動提示是在谷歌的搜索欄上，可我不記得第一個實現(xiàn)這個功能的是什么網(wǎng)站了。當(dāng)你在一長串列表中選擇需要的選項時（比如國家名），這個功能變得格外實用。

下拉菜單配自動提示

下拉菜單配自動完成和自動提示功能

自動提示和自動完成功能被放在一起并不驚訝。自動提示是在輸入欄里顯示選項讓用戶從中選擇。自動完成是提前顯示一個完整的單詞或短語。

下拉菜單配自動完成和自動提示功能

如果你沒有在文本輸入欄開始打字的話，自動完成區(qū)域通常被隱藏起來。

下拉菜單配多選

大多數(shù)情況下，下拉菜單是單選按鈕的延伸。這里的下拉菜單配多選則是復(fù)選框的延伸：用戶可以在同一個輸入?yún)^(qū)域選擇多個列表選項。（彩云注：前段時間正好有朋友問我，在設(shè)計B端后臺時，是否可以這樣設(shè)計，其實是可以的。）

下拉菜單配多選

如果可以的話，盡量避開這種類型。我曾在一個無比冗長的類別列表上不得已使用了它。講真，下拉菜單配自動完成和自動提示的組合才是最理想的。

下拉菜單配分組

當(dāng)長型下拉菜單的設(shè)計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。

下拉菜單配分門別類

固定滑動菜單

雖然不是嚴(yán)格意義上的下拉菜單，但是也可以考慮把多選菜單納入選擇范圍中。和下拉菜單不同的是，固定滑動菜單展開后會有一個可以滑動的小窗口。

固定滑動菜單

它們在電腦頁面上尚可使用，但在手機(jī)屏幕上就有點別扭了。到時候會成為一個“在滑動欄里的滑動菜單”

個人來說，我只使用過一次，也很少看到這個類型被廣泛使用過。

日期選擇器

日期選擇器的類型最好只用在安排會議和活動日程上。當(dāng)人們需要安排吃休息餐的時候，能一眼看出星期幾的日歷是最好不過的了?？赏瑯拥脑O(shè)計被用在填寫護(hù)照截止日期時就會相當(dāng)煩人。我比較偏向于那種既能輸入數(shù)字又能選擇日期的設(shè)計 – 最好確認(rèn)一下輸入欄里的年月日之間加上了斜線，不然會讓人很糾結(jié)。

日期選擇

我的“拉仇恨秘訣”：

讓用戶填寫信用卡或護(hù)照截止日期時用下拉菜單，他們會“特別”關(guān)注那天是星期幾。詢問用戶生日日期時使用下拉菜單。為了讓你被“恨得”更深一點，確定他們只能通過調(diào)整月份來更換每年的時間?！昂拗牍恰奔墸哼@種設(shè)計在填寫?zhàn)B老院申請時最有效。（譯者注：在這一段中，希望大家能體會到作者對那些設(shè)計的深深諷刺）

03 下拉菜單風(fēng)格

不同于下拉菜單的類型（ types），下拉菜單的風(fēng)格（styles）涉及的是它實際上長什么樣而不是它如何工作的。我把幾個常見的風(fēng)格列舉如下。

標(biāo)準(zhǔn)風(fēng)格（附屬）

之所以稱之為“標(biāo)準(zhǔn)”是因為這是最長見的。

標(biāo)準(zhǔn)風(fēng)格（附屬）

標(biāo)準(zhǔn)風(fēng)格（非附屬）

我越來越多地見到這種分離菜單的風(fēng)格。其實很容易理解 – 這樣菜單可以根據(jù)屏幕尺寸的變化來決定是處于輸入欄的上方還是下方。

標(biāo)準(zhǔn)風(fēng)格（非附屬）

圓形邊框

圓形邊框更適合游戲型的頁面設(shè)定。

圓形邊框

搭配圖標(biāo)

在輸入欄的開頭放一個圖標(biāo)會更有“設(shè)計感”。當(dāng)有人抱怨表格看起來很單調(diào)的時候（好吧，老大。。。這個表格有20個輸入欄，你還能讓人家怎么樣？）我就加了個圖標(biāo)。老大然后，就沒有然后了。

搭配圖標(biāo)

偷懶小竅門：如果有人抱怨長型表格看起來很單調(diào)，那你就加個圖標(biāo)。這個久經(jīng)考驗的真實辦法不用費吹灰之力，而你的上司或甲方爸爸還一定會覺得自己撿到寶了。

搭配圖片

我通常會避免在下拉菜單里加圖片 – 僅僅是因為后期更新和維護(hù)會非常痛苦。尤其是如果列表經(jīng)常變換的話，后果苦不堪言。不過當(dāng)你需要展示各個列表的不同之處時，這個風(fēng)格會很實用。

搭配圖片

而且我認(rèn)為在一個有限的下拉列表空間里很難看清楚圖片（參照上圖），所以這種設(shè)計有點吃力不討好。除非你把圖片設(shè)計得非常大。

Material Design的填充下拉菜單

我表白一下自己是谷歌材料設(shè)計語言的粉絲，包括他們的下拉菜單。

“單線區(qū)（ ‘line only’ field）”已不再在谷歌的材料設(shè)計語言里使用了,但你仍能看見它潛伏在網(wǎng)絡(luò)上。。

Material Design的線性下拉菜單（line dropdown）

“單線區(qū)“被填充下拉菜單（filled dropdown）所替代，據(jù)說是因為用戶測試反映更好些。雖然沒之前的那個好看，但確實使用起來更方便 – 這才是最關(guān)鍵，各位！

Material design的填充下拉菜單（filled dropdown）

Material Design的描邊框下拉菜單

和他們的描邊框文本輸入欄一樣，材料設(shè)計語言的描邊框下拉菜單（outlined dropdowns）也非常炫酷。他們的菜單欄和下面的實際選擇欄分離，這解決了很多可用性的問題。

標(biāo)簽文本被激活后變小移至上方的。我還想指出的是（這個經(jīng)常被我忽略掉）：你有沒有發(fā)現(xiàn)下拉菜單的第一行列表是空白的。這樣的設(shè)計可以讓用戶重新設(shè)置下拉菜單，比如說他們想之后返回這項或留白列表。

Material design的描邊框下拉菜單

04 下拉菜單狀態(tài)

不管用戶用什么樣的輸入方式操作，輸入欄應(yīng)給予及時的反饋。這里我們來看看不同反饋狀態(tài)下的下拉菜單。

默認(rèn)狀態(tài)

默認(rèn)狀態(tài)是用戶在操作前下拉菜單的樣子。

禁用狀態(tài)

禁用狀態(tài)下的區(qū)域?qū)τ脩艨梢?，但不能使用?/p>

懸停狀態(tài)

如果用戶的鼠標(biāo)在一個下拉菜單上懸停，這個下拉菜單應(yīng)該暗示它的可點擊性。

敲黑板：手觸屏幕上不能有懸停狀態(tài)，如果你設(shè)計的是手機(jī)或平板軟件就可以省省了。

強(qiáng)調(diào)狀態(tài)

強(qiáng)調(diào)狀態(tài)是指當(dāng)用戶在使用“制表鍵”（這里指用戶使用鍵盤“tab/制表鍵”操縱頁面然后按“enter/回車鍵”輸入信息的情況），指定了下拉菜單之后，但在選中特定列表選項之前。我們一般會看到選中的區(qū)域帶有“藍(lán)色光環(huán)”。

不過有些網(wǎng)站把強(qiáng)調(diào)狀態(tài)和焦點狀態(tài)合并在一起，即使用戶沒有按回車鍵，下拉列表也會直接打開。我有點糾結(jié)哪個方式更好。理論上合并狀態(tài)能夠理解，可是在我沒有明確指示的情況下，下拉列表就自動打開的這點讓我很困惑。不知各位怎么看？

焦點狀態(tài)

焦點狀態(tài)指的是項目的互動狀態(tài)。當(dāng)你點擊了下拉菜單的話，列表就會隨之打來并展示選項。

我看到過的很多下拉菜單都會把箭頭指向同一方向，無論是活躍狀態(tài)還是焦點狀態(tài)，我比較傾向于調(diào)換箭頭的方向。我把它們看成是折疊面板（accordion）。你還可以用動圖展示箭頭轉(zhuǎn)換的方向。

當(dāng)用戶的鼠標(biāo)在打開的下拉列表選項時，最好顯示每個具體的懸停選項。

完成輸入

如果用戶已經(jīng)完成了選擇，輸入欄應(yīng)該彈回活躍狀態(tài)。并且顯示已選擇的內(nèi)容。

失敗反饋

自由文本輸入很容易出錯。不過下拉菜單的選項很容易預(yù)測，針對它的失敗反饋應(yīng)該只有一種：沒有完成選項 – 當(dāng)用戶點擊“提交”鍵時會收到失敗反饋。

05 占位符語言

按常理，我會把占位符的語言和自由文本區(qū)域的保持一致。不能確定？下面是幾個可以參考的選擇：

把占位符留空

當(dāng)其他文本區(qū)域沒有占位符時，一般把占位符留空是最容易的選擇。

在占位符中使用通用提示

經(jīng)典提示像“請選擇”等等。

在占位符中使用推薦性措辭

在通用提示“請選擇”后面加上你想讓他們進(jìn)行操作的推薦性措辭，這樣會讓你的下拉菜單看起來整體上更統(tǒng)一。

占位符上搭配選項

當(dāng)你在下拉菜單中放上一個預(yù)備選項時，應(yīng)確保用戶已經(jīng)留意到它了 – 不然他們會提交一些并不符合原意的選項。

那么到底該選哪一個呢？如果有懷疑，就保持整體上的統(tǒng)一。比如你的文本區(qū)域都有占位符，那就統(tǒng)一使用占位符。

06 何時使用下拉菜單

這里特別想讓我用下拉菜單選擇出生年份的所有網(wǎng)站問一句：你們的良心不會痛嗎？不需要提醒我那快速增長的歲數(shù)，尤其是看到不斷往下滑動的年月日列表。

如果你的選項少于5個

如果你的選項少于5個，可以單選按鈕。這樣就不用多余地點擊列表上所有選項了。超過5項選擇則會很費空間。

提醒：有人說規(guī)則上應(yīng)該是6個，而不是5個，我讓你自己決定吧。

如果打字輸入比選擇更容易的話

如果你打字輸入花的時間比從下拉列表中選擇花的少的話，那結(jié)果還用問嗎？拿出生年月來說，直接打字輸入日期比使用三個下拉菜單來得容易多了。

有時程序員會不同意，這是因為編寫一個下拉菜單比自由文本區(qū)域來得容易。后者需要設(shè)置各種可輸入和不可輸入的規(guī)則。我也輸了很多場和他們的較量，不過我會繼續(xù)堅持到底的。

如果你的兩個選項是“開”和“關(guān)”（又或者“是”和“否”）

只有兩個選項的下拉菜單其實很煩人,特別是只需要回答“是”和“否”的情況。這時候切換按鈕（toggle）可以非常漂亮地解決這些問題。

如果選項是數(shù)字

如果你的選項是數(shù)字，那么你有幾種選擇。

首先，再一次，讓他們打字輸入。步驟條（steppers）也同樣有效，可是我只建議在預(yù)期步驟不會多于5步的情況下使用。不然，用戶會可憐巴巴地坐在那兒點到100。

第二種是使用滑塊（slider）選擇數(shù)值?；瑝K在選擇大數(shù)值的數(shù)字或估測數(shù)值時相當(dāng)有幫助。

如果選項很多

如果在下拉菜單中有很多選項（其實你應(yīng)該盡量避免），讓用戶’搜索‘他們的選項。最常見的情況是關(guān)于國家選項的下拉菜單, 他們涉及廣但也容易回答。之前也提過，這種設(shè)計和自動完成功能是完美搭配。

那么什么情況下應(yīng)該用下拉菜單呢？

個人來說，一個輸入欄如果達(dá)到如下兩個條件就可以考慮使用下拉菜單：

1. 多于6個選項
2. 當(dāng)用戶不能馬上知曉選項答案的情況。比如，你的用戶上傳了一個視頻，主辦方需要知道附加到視頻的許可證類型。一般用戶可能并不清楚平臺上可用的所有選項，這時下拉菜單就變得很有必要了。

07 原生下拉菜單

我們在時間和預(yù)算緊張的時候，又或者我們設(shè)計的是最簡可行產(chǎn)品的時候，我們會試圖使用原生或默認(rèn)的選擇。其實設(shè)計定制的輸入欄就像蛋糕上裝飾用的糖霜，我們有時候沒法選擇制作那份甜甜的糖衣點綴。那樣的情況，你需要清楚面對的是什么。

當(dāng)需要衡量在不同設(shè)備上的可用性時，原生下拉菜單也會更保險一些。

我們大規(guī)模的可行性檢測和基準(zhǔn)測試顯示：有82%的電子商務(wù)網(wǎng)站在他們的結(jié)賬流程上使用了定制設(shè)計的下拉菜單，這其中31%定制設(shè)計的下拉菜單有嚴(yán)重的可用性問題。（來自Christian Holst的敘述）

默認(rèn)設(shè)計

網(wǎng)上有一個關(guān)于原生下拉菜單的例子，你可以去這里看看。

原生手機(jī)下拉菜單 https://html.com/attributes/option-selected/

原生PC端下拉菜單 https://html.com/attributes/option-selected/

就像你從這些例子中看到的，在不同的平臺或瀏覽器上他們都有些細(xì)微差別。他們并不好看，但他們非常實用。

套用外殼

我曾經(jīng)把這個稱為“半定制”，不過最近讀到的一篇文章稱這個模式為外殼 – 聽起來更加正式。于是從今以后我公開宣布稱它為外殼。

‘但是是什么外殼’ – 你會問。外殼就是一塊看起來像定制設(shè)計的組件，但當(dāng)你點擊進(jìn)去后發(fā)現(xiàn)它使用的是原生下拉菜單的式樣。為了縮減開發(fā)成本，又想設(shè)計和品牌看起來統(tǒng)一，這是最簡單的辦法。這種辦法也同時可以避免定制設(shè)計的區(qū)域所帶來的用戶體驗問題。

08 可用性檢查

1）下拉菜單（包括標(biāo)簽）的點擊范圍是否超過44像素？（我們把標(biāo)簽包含在內(nèi)是因為當(dāng)你點擊標(biāo)簽時，下拉列表應(yīng)該打開）。

2）所有的色彩是否符合AAA標(biāo)準(zhǔn)？

3）下拉菜單是否有強(qiáng)調(diào)狀態(tài)？

4）確保下拉菜單在列表項目上有效。

5）如果你使用的是定制下拉菜單，確保它能在瀏覽器視口過低的情況下能打開或關(guān)閉。

原文：https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432

作者：Tess Gadd

譯者：吳曲；公眾號：彩云譯設(shè)計

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議