移動端表格常常使用下拉菜單來進行輸入控制。今天給大家介紹幾個在設(shè)計中用來代替下拉菜單的控制器钠导,并簡述其理由震嫉。
預(yù)期會影響用戶轉(zhuǎn)化率
沒有人喜歡填表格,而且一個表格看上去越長越復(fù)雜牡属,用戶就越不愿意點擊進去填空票堵,尤其是在小屏幕上進行不精確輸入。
在上圖的兩種類型的手機頁面中我們會發(fā)現(xiàn)逮栅,兩者最基本的不同在于他們詢問問題的方式悴势。一個是利用下拉菜單幾乎把所有問題問了個遍,而另一個則針對每個問題采用了最合適的輸入控制措伐。
在手機屏幕上或者桌面上與下拉菜單進行交互是一個多步驟的過程特纤,常常比必要的更費力:點擊?滾動(常常不止一次)?搜尋&選擇目標?最后繼續(xù)。其實侥加,我們可以做得更簡潔更好捧存。
步進器
步進器控制以一個常量來增加或減少數(shù)值,這在進行細微的調(diào)整時非常有用担败。在測試手機機票預(yù)訂表格時昔穴,我們發(fā)現(xiàn)用戶更喜歡使用步進器來選擇乘客人數(shù)。這個時候就不需要下拉菜單提前,尤其是當最大可選人數(shù)為8镀虐,而且絕大部分購票者只會選擇1-2名乘客數(shù)的時候模聋。
當使用步進器進行填表時,越簡單越好。對步進器的基本設(shè)計改動越多,其功能就越模糊。對于任何輸入控制都是這樣的,真的。
選項按鈕組
選項按鈕組扇雕,或者也叫分段控制器,是一組密切相關(guān)但又彼此獨立的選項窥摄。在比較手機機票預(yù)訂表格時镶奉,我們發(fā)現(xiàn)選線按鈕組對于選擇機艙類型非常方便。
附加控制器
并不是只有步進器和選線按鈕組可以用來代替下拉菜單崭放。切換按鈕對于兩個截然相對的選項非常適用哨苛。滑塊兒使你能夠選擇值域范圍內(nèi)的精細數(shù)值币砂。當你打算使用下拉菜單來處理繁冗的表格時建峭,請先針對每個問題考慮一下是否以上這些控制器能夠更好地解決這一問題。
按鈕輸入將那些原本會隱藏于下拉菜單之后的選項顯示出來决摧,從而使得用戶只需輕輕一點就可以選擇亿蒸,而不需要多次點擊。
在有些情形下掌桩,下拉菜單可以被精煉為一次輸入控制边锁。例如我在第一張圖片里提到的那個令人頭疼的機票預(yù)訂表格中使用了六個下拉菜單來手機乘客的出行日期。
在手機機票預(yù)訂研究中波岛,我們發(fā)現(xiàn)一個單獨的輸入控制器對于用戶選擇出行日期來說非常適用茅坛。從六個下拉菜單變?yōu)橐粋€單獨日期選擇器,這就是進步则拷。
最后一根稻草
所有這些下拉菜單的替代方式并不意味著我們在UI設(shè)計中不要使用下拉菜單贡蓖。好的設(shè)計表格會采用最合適的輸入控制來處理他們需要詢問的每一個問題。有時需要一個步進器煌茬,有時需要一個選線按鈕組斥铺,而有時則需要一個下拉菜單。但是坛善,由于下拉菜單不便于導(dǎo)航晾蜘,默認情況下隱藏導(dǎo)航,不支持分層浑吟,只使用于不需編輯的選項笙纤,因此下拉菜單不應(yīng)該是你追求的首選UI設(shè)計控制器。然而组力,在今天的軟件設(shè)計中,設(shè)計師們卻恰恰是這樣做的抖拴。
所以呢燎字,先考慮其他的輸入控制方式腥椒,把下拉菜單作為最后一根救命的稻草。
注:本文原作者Luke Wroblewski候衍,2015-7-17發(fā)表于Lukew笼蛛,譯者荷籽記憶