常見的交互式控件（如日期選擇器）通常很容易被我們忽視。正是這些共同元素的設(shè)計(jì)能夠反映產(chǎn)品關(guān)注和關(guān)注的水平。
日期選擇控件（選擇器）是一種控件，允許用戶選擇（填寫）應(yīng)用程序中的日期或時(shí)間，尤其是在B端產(chǎn)品中。這種控制看起來很簡(jiǎn)單，但它的易用性也很容易被忽視。當(dāng)談到對(duì)此功能的需求時(shí)，許多開發(fā)人員（當(dāng)然還有設(shè)計(jì)人員）會(huì)立即說：“互聯(lián)網(wǎng)上有很多很酷的選擇器，它們都是開源的。我們可以找到一個(gè)合適的選擇。我們不會(huì)對(duì)于這個(gè)浪費(fèi)時(shí)間……”但一切都不是那么簡(jiǎn)單。大多數(shù)開源選擇器要么丑陋（主要來自幾年前的xp時(shí)代設(shè)計(jì)風(fēng)格），要么極其難以使用（很多都來自后端實(shí)用工具，通用但遠(yuǎn)不易使用）;當(dāng)然，也有一些選擇器看起來很酷且充滿個(gè)性，但往往不符合我們產(chǎn)品的規(guī)范。/p>
我并沒有強(qiáng)調(diào)每次我們必須重新創(chuàng)建輪子時(shí)，我們只想說日期選擇器的設(shè)計(jì)也應(yīng)該考慮很多可用性問題。無論是選擇現(xiàn)有的開源控制還是改進(jìn)它，還是完全重新設(shè)計(jì)出酷炫的個(gè)性化風(fēng)格，都有一些易于使用的原則和建議可以幫助我們創(chuàng)造更好的產(chǎn)品體驗(yàn)。 。
1、默認(rèn)選中項(xiàng)：應(yīng)該有一個(gè)合適的默認(rèn)值
并非所有控件都具有當(dāng)前或當(dāng)前時(shí)間的默認(rèn)值。應(yīng)根據(jù)字段類型確定合理的默認(rèn)時(shí)間，以便用戶輕松快速輸入或減少點(diǎn)擊次數(shù)。例如，toB協(xié)作工具的待辦事項(xiàng)功能，根據(jù)我們的場(chǎng)景，創(chuàng)建這些項(xiàng)目通常需要在工作日的最后一天完成，然后我們可以將默認(rèn)值設(shè)置為當(dāng)前周的星期五;和一個(gè)入口用戶對(duì)生日的控制，默認(rèn)字段需要根據(jù)用戶組的年齡給出合理的中間值。例如，如果您的產(chǎn)品核心用戶組是20-30歲，那么默認(rèn)時(shí)間最好設(shè)置為1990-01-01……想象一下，如果此處的默認(rèn)時(shí)間是當(dāng)前日期（許多不良設(shè)計(jì)都這樣做），那么幾乎所有用戶都必須多次點(diǎn)擊才能找到他們想要的選項(xiàng)。這個(gè)原則很簡(jiǎn)單，但很容易被忽略。
2、控制可選/錄入的字段范圍
為了減少用戶錯(cuò)誤并確保正常顯示產(chǎn)品數(shù)據(jù)，日期/時(shí)間控件應(yīng)控制可選范圍。有兩種常見的控制方法。一種是在選擇時(shí)使不可選日期變灰。第二是選擇后進(jìn)行檢查。如果不符合要求，則無法輸入和通知（通常是吐司提示）。第一種方法是在用戶選擇之前進(jìn)行驗(yàn)證，以防止用戶輸入錯(cuò)誤的數(shù)據(jù)，而不考慮錯(cuò)誤交互設(shè)計(jì);第二個(gè)也可以達(dá)到限制輸入的目的，但需要額外的校驗(yàn)和設(shè)計(jì)。 （吐司提示或彈出窗口），但我認(rèn)為這種提示是必要的，因?yàn)楦嬖V用戶為什么有選項(xiàng)無法選擇，可以減少用戶的疑慮。
3、清晰明確的提交或確定按鈕
我見過很多非常糟糕的日期控件。選擇或切換選項(xiàng)后，還需要單擊輸入框或空白區(qū)域以填寫/顯示所選項(xiàng)目。特別是結(jié)合日期和設(shè)定時(shí)間的控制。如果沒有明確的提交和確定按鈕，用戶將非常緊張和不堪重負(fù)：“我已經(jīng)選擇了，我該如何提交？”當(dāng)然你會(huì)說點(diǎn)擊選擇器以外的空白區(qū)域退出（實(shí)際上很多人這樣做），但是這并沒有給用戶提供直觀的提示并且需要一定的認(rèn)知成本。對(duì)于您只需要選擇日期的情況，自動(dòng)編寫所選項(xiàng)目并在單擊時(shí)自動(dòng)關(guān)閉控件是合理的。
最好有一個(gè)明顯的“OK”。按鈕
如果沒有明確的“OK”，用戶將會(huì)感到困惑。按鈕
4、減少點(diǎn)擊次數(shù)
要輸入日期范圍，用戶必須輸入兩個(gè)日期。許多設(shè)計(jì)師會(huì)下意識(shí)地使用兩個(gè)日期選擇器，這是完全沒必要的。首先，日期選擇器可以完成日期范圍的輸入，而額外的日期選擇器將增加用戶的點(diǎn)擊次數(shù)。
結(jié)合兩個(gè)價(jià)格控制是一個(gè)更明智的選擇
當(dāng)然，如果您使用統(tǒng)一控件并且不想設(shè)計(jì)新控件，則可以選擇：在第一個(gè)控件中選擇日期時(shí)，它會(huì)自動(dòng)聚焦到第二個(gè)輸入框并彈出選擇器。這也可以減少點(diǎn)擊次數(shù);但如果用戶只想修改其中一次，那么自動(dòng)彈出另一次會(huì)使用戶感到困惑和多余。
5、標(biāo)識(shí)出特定日期
用戶并不總是“記憶”來在選擇器中顯示或標(biāo)記特殊日期，例如日期，選定的默認(rèn)值，周末，假日等，以幫助用戶做出更好，更快的選擇。例如，當(dāng)您選擇購買火車票日期時(shí)，確定春節(jié)的七天可以幫助許多用戶快速選擇出發(fā)日期并返回城市。畢竟，不是每個(gè)人都能迅速做出反應(yīng)。新年前夜是幾個(gè)月，第七天是什么數(shù)字？這可以減少用戶的記憶和判斷成本，幫助用戶快速做出選擇，并避免用戶犯錯(cuò)誤。
6、特殊的操作按鈕
對(duì)于通過填寫日期或時(shí)間來過濾數(shù)據(jù)的某些選擇器，需要向選擇器添加諸如“空”的按鈕以允許用戶快速清除所選項(xiàng)并返回到數(shù)據(jù)的初始狀態(tài)。一些入門型選擇器還添加一個(gè)類似于“清除”按鈕的按鈕。允許用戶快速清除填寫的選項(xiàng)或重新選擇。還有一些選擇器會(huì)添加“今天” 提高運(yùn)營(yíng)效率。
寫在最后
常見的交互式控件（如日期選擇器）通常很容易被我們忽視。正是這些共同元素的設(shè)計(jì)能夠反映產(chǎn)品關(guān)注和關(guān)注的水平。微妙的適當(dāng)設(shè)計(jì)往往可以帶給我們實(shí)用性和情感愉悅。我認(rèn)為這是設(shè)計(jì)的重要目標(biāo)之一。
每日設(shè)計(jì)總結(jié)，歡迎拍磚。
本文最初由@RindyChen出版。未經(jīng)許可，禁止復(fù)制。
地圖來自網(wǎng)絡(luò)