自我挑戰的第十八天，今天是教師節～祝各位老師教師節快樂。

Day 18: 下拉式選單(Dropdown)

• Dropdown是大多數使用者很熟悉的元件，通常會有個向下箭頭來表示可以打開選單。
• 利用下拉式選單來展現更複雜或更多值的介面，這種介面除了用在提供值的選擇外，很多時候也會用在Menu上。
• 如果User用直接輸入比較快，不需要用Dropdown。
• 如果User對Dropdown的內容熟悉，也盡量不要用Dropdown，例如:年份的選擇，會造成一個長長的清單，這樣反而讓User填寫的時間加長。
• 要加入品項到購物車時的數量鍵，也盡量不要用Dropdown。(見下方範例)
• Dropdown要可以讓User用鍵盤輸入來快速地跳到需要的選項。
• 當Dropdown打開時，記得Dropdown欄位的標籤請不要移除或被擋住，這樣使用者可能選到一半需要回想他現在正在選的Dropdown是做什麼用的。

Dropdown在我們日常生活中非常常見，處處可以見到他的身影，

像是google雲端硬碟中，我的雲端硬碟Dropdown打開之後可以看到相關的操作動作，並且他為了避免下拉式選單過長，使用了一個“更多”的按鈕來收納其他項目。

另外像google doc中也可以看到下拉式選單的蹤跡，像是選擇字體和調整視窗大小。另外因為調整視窗大小的部分已經先預設了幾個數值，這樣也避免了User可能要選擇每增加或減少1%就多一個選項的窘境。

上面曾經提到的重點，就像下方的範例一樣，請記得數量或是百分比盡量不要使用下拉式選單來呈現。

圖片來源:GoProtoz

最後一個範例是在Airbnb的下拉式選單，在房客的選項點開後，他下方彈出的面板多了四種房客的詳細選擇。再點一次箭頭按鈕或是右下方的關閉按鈕即可關閉這個下拉選單面板，是個令人舒服且一點也不占空間的好設計。

最後一樣是可以直接使用的資源補充：

• Bootstrap的Dropdowns

• Bootstrap(React)版本的Dropdowns

• Material UI(React)的Dropdowns