交互細節思考： Calender VS 下拉框

微小的差別給用戶的感受可能完全不同。

近些天，各大互聯網公司的春招和暑期實習的網申陸續啟動。

網申的基本信息填寫，看起來似乎沒有什麼惹人注目的交互，但只要稍微用心，就能體會到各大公司在頁面交互細節處理上的不同，即使是最簡單的時間信息的輸入，也能體現出公司的專業度，微小的差別給求職者的感受可能完全不同。

下面就騰訊、網易、京東、美團四家的時間信息輸入的交互方式來談一談自己對交互細節的見解。

京東、美團使用的時間錄入控制項是Calender；騰訊、網易使用的時間錄入控制項是下拉框。接下來的分析由Calender和下拉框的對比展開，而僅僅是選擇什麼控制項其實並不能決定一個交互，好的交互不論再微小，也會綜合考慮使用情境、用戶心理和巧妙的反饋細節等。

比較而言，Calender是比下拉列表框更新奇的控制項，我想，採用Calender代替下拉框的基本考慮應該是：

• Calender只用直觀選中一個點，一步到位；而下拉表要進行年/月/日三次選擇。
• Calender在「日」選擇時更有優勢（30左右的選項，下拉框承載量確實過長。）

先來看第一點，Calender中所謂的選中一個點，在選中這個點之前，還是得對年、月、日三個要素進行定位，實際的思考和選擇步驟數量是一樣的。

而且，實際的操作過程中，個人認為日曆表更麻煩，選擇年、月時，下意識地操作是點擊左右的箭頭，而像下圖中京東的Calender，默認日期是今天（年是2017），所以出生日期一般要點十幾次。

當然，京東的Calender選擇年份信息不止是點擊左右箭頭這一種選擇方法，可以直接輸入或者內置下拉框：

理性地去考慮，確實，可以使用比「點十幾次」更高效的方法。然而，我們考慮的是用戶的實際使用場景和心理特徵。

在使用計算機時，用戶傾向性是：如果已經啟動了一個操作，更多關注的是如何用這種方法把事情完成，而不會轉而思考另一種思路，更換輸入方式會消耗心理成本，增加挫敗感，少了那種「自然而然」的體驗。如果目前的方法可以解決問題，是很難放棄已有的思路的，在心情不太放鬆的時候尤其如此。（開始網申時候，很多同學（不是所有人）其實也會在心理評估自己，多少會有些小小的不安。）

所以的確會有人點十幾次來選擇年份。

至於第二點，Calender相比下拉框在選擇「日」時的優勢，我們在第二部分討論。這裡繼續來探討一下京東的Calender控制項的設計，這個控制項的設計初衷是為不同的需求提供不同的時間輸入方法，在默認值為2017年的基礎上，至少有以下三種方式：

• 左右箭頭選擇——選擇離今年不遠的年份（比如畢業時間）
• 點擊輸入框，滑鼠在內嵌下拉框中選擇——離今年較遠的年份
• 點擊輸入框，鍵盤輸入選擇——離今年很遠的年份

這時間從近到遠，一一對應，都有「方便」的輸入方法，多方便。但這只是設計者的初衷。作為一個只有一般經驗的用戶，實際遇到的問題有：

• 直接下意識的直接點左右箭頭很多次，不想嘗試別的辦法。
• 年份可點擊是通過懸停手型進行提示的，也就是說，如果不把滑鼠移到年份數字上，從外觀上是看不出可點擊的特徵（如圖）的，是不知道那是個可輸入框的：有潛在的學習成本。
• 即使弄清楚了有不同的方法，還會本能地想一下用哪個（不過這個因人而異，有的人就是喜歡用鍵盤，看著能輸入就直接輸入想都不想。），可能存在輕微的選擇困難。

但如果說，但這個Calender還算常規，下圖美團家的這個簡直了：

中間兩個向下的箭頭是內嵌的下拉框，但這種左右箭頭、上下箭頭的混合實在讓人有一種凌亂的感覺，而且在選擇過程中也缺乏一致性：①選年份上下選。②選月份可以左右也可以上下選。為什麼？？因為懶得做年份的左右箭頭了還是位置不夠了，讓人有一種半成品的感覺。

2.同樣的下拉框，不同的交互體驗

相比於日曆表，純粹的下拉框的優勢是唯一性，即只有「點擊——選擇」一種輸入方法，在使用方式上沒有困惑。

那麼這種方法是否高效？我們從年/月/日三項的輸入體驗分別來看：

• 日：30個選項，使用calender確實更直觀好選，但下拉框配上滑鼠滾輪的體驗其實也不差。
• 月：12個選項，用下拉框承載剛剛好。
• 年：很多選項，下拉框是無法承載無限的年份，但也沒必要做。（騰訊的「畢業時間」下拉選項只有2017/2018/2019三個選擇，結合了具體場景解決問題，實現起來也更簡單）

對傳統下拉框進行巧妙的優化，可以實現簡潔、高效的使用。騰訊可以根據填寫的身份證信息，自動反饋出默認的性別和出生日期：

我們看到的只是各個網申頁面身份證號、性別、出生日期的內容在填寫時的順序位置不同，而交互設計師所考慮的是順序背後的數據的獲取和過程的優化。

有的人會提到下拉框相比Calender外觀較差這個問題，這並不能一概而論，外觀是看整體效果的，設計下拉框時稍微用點心思（邊緣圓滑點，內部四周合適留白等），並且搭配好整個頁面的設計，即使是使用下拉框，仍然可以獲得較為良好的視覺效果，在我實際體驗中，騰訊和網易都使用了下拉框，但騰訊的設計看上去比網易舒服多了，同樣的是使用下拉框，

網易呈現的感覺是「因為偷懶不想更新做日曆表，所以用以前一直在用的下拉框。」（下圖）

而騰訊呈現的感覺是「因為考慮過下拉框和日曆表的不同，認為下拉框更易用，並根據具體場景精心設計了下拉框的外觀和功能。」

3.用什麼控制項不是重點，用心才是

上面所談到的所有內容，似乎是想證明「別看Calender新，其實下拉框更好用。」其實不是。

之所以探討這兩種控制項的區別，以及帶有一點對下拉框的傾向性，是因為本人最近網申的是上面四家公司，在這四家的界面中，對個人而言，騰訊的下拉框的使用體驗最好。

根據身份證號自動反饋出生日期的功能，並不限於下拉框，也可以用於Calender，同樣的，不論是使用哪種控制項，如果提供更符合使用情境的默認值和選項等（類似畢業年份只提供2017/2018/2019三個選項，或者京東Calender出生日期的默認年份在95年左右），使用體驗也會提升。

所以用什麼控制項不是重點，用心才是。

當然，任何脫離特定的用戶、具體使用場景、資源協調、統計數據等因素的綜合考慮所進行的分析，都是耍流氓。

以上對「時間輸入框」的分析，對①網申用戶群體（20左右年輕人，可能就是認為下拉框low，偏愛Calender）、②具體使用場景（只是站在私人的角度來談可用性，沒有去調研）、③資源協調情況（工程師們天天忙著很多事，校招這界面稍微舊點差點，你喜歡公司你還是會投，不投說明你忠誠度並不高，所以按照工作的性價比，代碼就不改了。）的考慮並不周到，有個人的局限性。

本文由 @小C 原創發佈於人人都是產品經理。未經許可，禁止轉載。