之前在做在線問診的時(shí)候，有些患者明明有追問的需求，但是卻不敢點(diǎn)擊追問按鈕。我們分析下來(lái)，猜測(cè)可能是因?yàn)樽穯栠@個(gè)按鈕特別像是一個(gè)表單的提交動(dòng)作，用戶不知道點(diǎn)完之后會(huì)發(fā)生什么，有些害怕，不敢點(diǎn)擊。

　　于是我們把按鈕改成輸入框的樣式，雖然本質(zhì)上仍然是一個(gè)按鈕點(diǎn)擊后喚起真正的輸入框，但用戶會(huì)認(rèn)為這是輸入框不是按鈕，點(diǎn)擊率確實(shí)提高了不少。

　　事實(shí)上很多社交 App 的評(píng)論都是這么設(shè)計(jì)的，雖然在邏輯上并沒有減少點(diǎn)擊次數(shù)和頁(yè)面跳轉(zhuǎn)次數(shù)，但用戶的心理會(huì)認(rèn)為輸入框比按鈕更輕量，負(fù)擔(dān)更小，更愿意去點(diǎn)擊。

　　最近發(fā)現(xiàn)阿里系所有 App 在首頁(yè)搜索框右邊特地再加了一個(gè)搜索按鈕。首先這個(gè)設(shè)計(jì)邏輯不對(duì)，輸入框中占位符有預(yù)置的搜索詞。從用戶預(yù)期上來(lái)說(shuō)，點(diǎn)擊之后應(yīng)該把這個(gè)預(yù)置的搜索詞的搜索結(jié)果給我，但實(shí)際上只是打開搜索的界面而已。

　　為什么搜索框這么明顯還多此一舉加個(gè)邏輯不對(duì)的按鈕?有次我無(wú)意中觀察一位老人使用豐巢快遞柜時(shí)找到了思路。

　　老人家先是點(diǎn)擊了“取件碼取快遞”文案，發(fā)現(xiàn)無(wú)效果后再點(diǎn)擊“確認(rèn)”按鈕，最后才點(diǎn)擊了輸入框。我猜測(cè)老人是抱著“用取件碼就能取到快遞”這個(gè)想法，視力不佳又沒有對(duì)輸入框形成認(rèn)知，忽略了輸入框的占位符文案“請(qǐng)輸入取件碼”，因此先點(diǎn)擊上方的文案，在沒有奏效后嘗試點(diǎn)擊視覺上最好點(diǎn)擊的按鈕。

　　之所以阿里特地在搜索框上加按鈕是因?yàn)椋?/p>

　　1. 首頁(yè)下半部分內(nèi)容太多視覺樣式復(fù)雜，加按鈕使得搜索入口更突出更具有指示性，可以第一時(shí)間就被用戶發(fā)現(xiàn)。

　　2. 由于阿里的產(chǎn)品用戶體量太廣，老年人并不知道輸入框和放大鏡圖標(biāo)代表搜索，因此特地加上醒目的按鈕告知。

　　3. 在避免老年用戶點(diǎn)擊搜索按鈕后直接進(jìn)入預(yù)置詞搜索結(jié)果頁(yè)面，使他們更加困惑：“我只是想要搜索，這些都是什么?”，就沒有直接跳轉(zhuǎn)到搜索結(jié)果頁(yè)，而只是打開搜索頁(yè)面。

　　我?guī)е@個(gè)猜想去請(qǐng)教在阿里工作的朋友，得到的答復(fù)非常簡(jiǎn)單干脆——加了按鈕點(diǎn)擊率更高。

　　無(wú)獨(dú)有偶，前段時(shí)間滴滴 App 大改版，出發(fā)地”由輸入框改為右箭頭，“目的地”的輸入框占位符由傳統(tǒng)淺灰色變成加黑加粗的特大字體。

　　這是非常好的改版，因?yàn)?ldquo;出發(fā)地”和“目的地”本質(zhì)上都不是輸入框。由于滴滴地圖定位技術(shù)能力趨近成熟，很多情況不需要手動(dòng)輸入，“出發(fā)地”由輸入框弱化成右箭頭能給真正要用戶輸入的“目的地”留給更大的空間。“目的地”占位符加黑加粗能提升用戶的操作效率。

　　以上這些案例可能預(yù)示著新的設(shè)計(jì)趨勢(shì)，這讓我也陷入沉思，輸入框和按鈕的邊界到底是什么?

　　我們是要教育用戶這個(gè)輸入框那個(gè)是按鈕，還是按著他們的天性不斷模糊兩者的界限，說(shuō)不定哪天會(huì)因此產(chǎn)生一個(gè)新的控件來(lái)專門代指這種模糊邊界呢。更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問，獲取試聽資格來(lái)試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。