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

近些天，各大互聯(lián)網(wǎng)公司的春招和暑期實(shí)習(xí)的網(wǎng)申陸續(xù)啟動(dòng)。

網(wǎng)申的基本信息填寫，看起來(lái)似乎沒(méi)有什么惹人注目的交互，但只要稍微用心，就能體會(huì)到各大公司在頁(yè)面交互細(xì)節(jié)處理上的不同，即使是最簡(jiǎn)單的時(shí)間信息的輸入，也能體現(xiàn)出公司的專業(yè)度，微小的差別給求職者的感受可能完全不同。

下面就騰訊、網(wǎng)易、京東、美團(tuán)四家的時(shí)間信息輸入的交互方式來(lái)談一談自己對(duì)交互細(xì)節(jié)的見(jiàn)解。

京東、美團(tuán)使用的時(shí)間錄入控件是Calender；騰訊、網(wǎng)易使用的時(shí)間錄入控件是下拉框。接下來(lái)的分析由Calender和下拉框的對(duì)比展開(kāi)，而僅僅是選擇什么控件其實(shí)并不能決定一個(gè)交互，好的交互不論再微小，也會(huì)綜合考慮使用情境、用戶心理和巧妙的反饋細(xì)節(jié)等。

1.Calender比下拉框更高級(jí)？

比較而言，Calender是比下拉列表框更新奇的控件，我想，采用Calender代替下拉框的基本考慮應(yīng)該是：

• Calender只用直觀選中一個(gè)點(diǎn)，一步到位；而下拉表要進(jìn)行年/月/日三次選擇。
• Calender在“日”選擇時(shí)更有優(yōu)勢(shì)（30左右的選項(xiàng)，下拉框承載量確實(shí)過(guò)長(zhǎng)。）

先來(lái)看第一點(diǎn)，Calender中所謂的選中一個(gè)點(diǎn)，在選中這個(gè)點(diǎn)之前，還是得對(duì)年、月、日三個(gè)要素進(jìn)行定位，實(shí)際的思考和選擇步驟數(shù)量是一樣的。

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

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

理性地去考慮，確實(shí)，可以使用比“點(diǎn)十幾次”更高效的方法。然而，我們考慮的是用戶的實(shí)際使用場(chǎng)景和心理特征。

在使用計(jì)算機(jī)時(shí)，用戶傾向性是：如果已經(jīng)啟動(dòng)了一個(gè)操作，更多關(guān)注的是如何用這種方法把事情完成，而不會(huì)轉(zhuǎn)而思考另一種思路，更換輸入方式會(huì)消耗心理成本，增加挫敗感，少了那種“自然而然”的體驗(yàn)。如果目前的方法可以解決問(wèn)題，是很難放棄已有的思路的，在心情不太放松的時(shí)候尤其如此。（開(kāi)始網(wǎng)申時(shí)候，很多同學(xué)（不是所有人）其實(shí)也會(huì)在心理評(píng)估自己，多少會(huì)有些小小的不安。）

所以的確會(huì)有人點(diǎn)十幾次來(lái)選擇年份。

至于第二點(diǎn)，Calender相比下拉框在選擇“日”時(shí)的優(yōu)勢(shì)，我們?cè)诘诙糠钟懻?。這里繼續(xù)來(lái)探討一下京東的Calender控件的設(shè)計(jì)，這個(gè)控件的設(shè)計(jì)初衷是為不同的需求提供不同的時(shí)間輸入方法，在默認(rèn)值為2017年的基礎(chǔ)上，至少有以下三種方式：

1. 左右箭頭選擇——選擇離今年不遠(yuǎn)的年份（比如畢業(yè)時(shí)間）
2. 點(diǎn)擊輸入框，鼠標(biāo)在內(nèi)嵌下拉框中選擇——離今年較遠(yuǎn)的年份
3. 點(diǎn)擊輸入框，鍵盤輸入選擇——離今年很遠(yuǎn)的年份

這時(shí)間從近到遠(yuǎn)，一一對(duì)應(yīng)，都有“方便”的輸入方法，多方便。但這只是設(shè)計(jì)者的初衷。作為一個(gè)只有一般經(jīng)驗(yàn)的用戶，實(shí)際遇到的問(wèn)題有：

1. 直接下意識(shí)的直接點(diǎn)左右箭頭很多次，不想嘗試別的辦法。
2. 年份可點(diǎn)擊是通過(guò)懸停手型進(jìn)行提示的，也就是說(shuō)，如果不把鼠標(biāo)移到年份數(shù)字上，從外觀上是看不出可點(diǎn)擊的特征（如圖）的，是不知道那是個(gè)可輸入框的：有潛在的學(xué)習(xí)成本。
3. 即使弄清楚了有不同的方法，還會(huì)本能地想一下用哪個(gè)（不過(guò)這個(gè)因人而異，有的人就是喜歡用鍵盤，看著能輸入就直接輸入想都不想。），可能存在輕微的選擇困難。

但如果說(shuō)，但這個(gè)Calender還算常規(guī)，下圖美團(tuán)家的這個(gè)簡(jiǎn)直了：

中間兩個(gè)向下的箭頭是內(nèi)嵌的下拉框，但這種左右箭頭、上下箭頭的混合實(shí)在讓人有一種凌亂的感覺(jué)，而且在選擇過(guò)程中也缺乏一致性：①選年份上下選。②選月份可以左右也可以上下選。為什么？？因?yàn)閼械米瞿攴莸淖笥壹^了還是位置不夠了，讓人有一種半成品的感覺(jué)。

2.同樣的下拉框，不同的交互體驗(yàn)

相比于日歷表，純粹的下拉框的優(yōu)勢(shì)是唯一性，即只有“點(diǎn)擊——選擇”一種輸入方法，在使用方式上沒(méi)有困惑。

那么這種方法是否高效？我們從年/月/日三項(xiàng)的輸入體驗(yàn)分別來(lái)看：

1. 日：30個(gè)選項(xiàng)，使用calender確實(shí)更直觀好選，但下拉框配上鼠標(biāo)滾輪的體驗(yàn)其實(shí)也不差。
2. 月：12個(gè)選項(xiàng)，用下拉框承載剛剛好。
3. 年：很多選項(xiàng)，下拉框是無(wú)法承載無(wú)限的年份，但也沒(méi)必要做。（騰訊的“畢業(yè)時(shí)間”下拉選項(xiàng)只有2017/2018/2019三個(gè)選擇，結(jié)合了具體場(chǎng)景解決問(wèn)題，實(shí)現(xiàn)起來(lái)也更簡(jiǎn)單）

對(duì)傳統(tǒng)下拉框進(jìn)行巧妙的優(yōu)化，可以實(shí)現(xiàn)簡(jiǎn)潔、高效的使用。騰訊可以根據(jù)填寫的身份證信息，自動(dòng)反饋出默認(rèn)的性別和出生日期：

我們看到的只是各個(gè)網(wǎng)申頁(yè)面身份證號(hào)、性別、出生日期的內(nèi)容在填寫時(shí)的順序位置不同，而交互設(shè)計(jì)師所考慮的是順序背后的數(shù)據(jù)的獲取和過(guò)程的優(yōu)化。

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

網(wǎng)易呈現(xiàn)的感覺(jué)是“因?yàn)橥祽胁幌敫伦鋈諝v表，所以用以前一直在用的下拉框?！保ㄏ聢D）

而騰訊呈現(xiàn)的感覺(jué)是“因?yàn)榭紤]過(guò)下拉框和日歷表的不同，認(rèn)為下拉框更易用，并根據(jù)具體場(chǎng)景精心設(shè)計(jì)了下拉框的外觀和功能?！?/b>