#UI簡(jiǎn)史:搜索框如何從頂部到底部,并逐步消失

0 評(píng)論 2297 瀏覽 16 收藏 11 分鐘

在數(shù)字產(chǎn)品的設(shè)計(jì)世界里,搜索框一直是用戶與信息之間交互的核心。但隨著技術(shù)的發(fā)展和用戶習(xí)慣的變化,這個(gè)看似簡(jiǎn)單的設(shè)計(jì)元素正面臨著前所未有的挑戰(zhàn)。

用戶在一個(gè)數(shù)字產(chǎn)品中“輸入”自己的需求有三種方式:鍵盤(pán)打字、語(yǔ)音輸入、拍照或掃描輸入。

產(chǎn)品設(shè)計(jì)者自然會(huì)想:既然都是輸入,那么這三種輸入方式應(yīng)該被匯總到一起,匯總到一個(gè)輸入框里。

數(shù)字產(chǎn)品世界中,我們最常見(jiàn)的“需求輸入框”,便是搜索框。

單獨(dú)看上面這個(gè)搜索框,簡(jiǎn)直完美極了。

但當(dāng)我們考慮把它如何放到手機(jī)屏幕的哪個(gè)位置的時(shí)候,問(wèn)題就來(lái)了。我們無(wú)論把它放在哪個(gè)位置,都不完美。

截止目前,大部分產(chǎn)品的搜索框都是放在屏幕頂部。因?yàn)閺腜C時(shí)代到小屏智能手機(jī),大家一直是這么做的。但隨著隨著手機(jī)屏幕越變?cè)酱?,拇指熱區(qū)的問(wèn)題也越來(lái)越明顯。把搜索框放在屏幕頂部,等于把三個(gè)重要的輸入操作放到了一個(gè)手指難以操作的橙色甚至紅色區(qū)域。

這么看放在屏幕底部似乎是更合理的。但是這會(huì)非常挑戰(zhàn)用戶的使用習(xí)慣,挑戰(zhàn)過(guò)去20多年來(lái)建立起來(lái)的用戶心智。

01 “激進(jìn)”的搜索框移動(dòng)實(shí)驗(yàn)

2023年6月,亞馬遜嘗試將頂部的搜索框放在屏幕底部。結(jié)果在灰度測(cè)試階段,失望和反對(duì)的聲音便不絕于耳。后來(lái)僅僅經(jīng)過(guò)約三周的等待,亞馬遜將搜索欄恢復(fù)到原來(lái)的位置。

仔細(xì)看一下這個(gè)實(shí)驗(yàn)方案,便不難理解為什么用戶會(huì)提出強(qiáng)烈的反對(duì)意見(jiàn)。這個(gè)設(shè)計(jì)方案非常粗暴地把搜索框移動(dòng)到了頁(yè)面底部Tab欄的上面,不僅挑戰(zhàn)用戶的使用習(xí)慣,還把產(chǎn)品的底部變得凌亂而臃腫。

在2016年(也就是在亞馬遜這個(gè)實(shí)驗(yàn)的7年前),百度也做過(guò)類似的實(shí)驗(yàn)。

那時(shí)百度擁有自己在語(yǔ)音識(shí)別和自然語(yǔ)言處理(NLP)兩項(xiàng)技術(shù)的足夠自信,并認(rèn)為用戶已經(jīng)通過(guò)微信等產(chǎn)品養(yǎng)成了語(yǔ)音輸入的習(xí)慣。所以想要在自己的一系列產(chǎn)品中強(qiáng)化語(yǔ)音輸入的能力。

筆者當(dāng)時(shí)在糯米產(chǎn)品中負(fù)責(zé)了這個(gè)實(shí)驗(yàn)項(xiàng)目,當(dāng)時(shí)的設(shè)計(jì)方案比亞馬遜這個(gè)多做了一步。我們?yōu)榱税研碌乃阉骺蚍诺阶畹撞?,不得不把底tab變成了頂tab。糯米的這個(gè)激進(jìn)的實(shí)驗(yàn)項(xiàng)目最終以失敗告終。

另外一個(gè)團(tuán)隊(duì)負(fù)責(zé)百度最重要的移動(dòng)端產(chǎn)品,他們?cè)?017年發(fā)布了手機(jī)百度App 9.0,最終選擇了將語(yǔ)音輸入從搜索框剝離、單獨(dú)放在底tab的方案。

02 iOS 從來(lái)不糾結(jié)

相對(duì)于上面兩個(gè)案例,safari 的地址欄下移計(jì)劃顯得既有決心,又有耐心。對(duì)于一款瀏覽器產(chǎn)品而言,地址欄與搜索框已經(jīng)合二為一。把地址欄和搜索欄忽然移動(dòng)到底部,是非常大膽的一次改動(dòng)。

在2021年從iOS 15開(kāi)始,Apple對(duì)Safari瀏覽器進(jìn)行了重新設(shè)計(jì),將搜索框(同時(shí)也是地址欄)移動(dòng)到了屏幕底部。這一設(shè)計(jì)旨在提升單手操作的便利性,讓用戶便捷地在頁(yè)面之間切換。同時(shí)增加可視內(nèi)容空間,用戶在滾動(dòng)網(wǎng)頁(yè)時(shí),地址欄會(huì)自動(dòng)隱藏,以提供更大的閱讀區(qū)域。

不用說(shuō),像亞馬遜面對(duì)的問(wèn)題一樣,很多用戶對(duì)這個(gè)變化表示不滿。但面對(duì)反對(duì)的聲音,Apple并沒(méi)有妥協(xié),他們只是增加了一個(gè)自定義選項(xiàng),讓用戶可以根據(jù)自己的偏好進(jìn)行設(shè)置。用戶不喜歡可以改回去,但他們的默認(rèn)設(shè)置仍然在底部。

至于Apple為什么這么有決心,這么穩(wěn)準(zhǔn)狠的去做一個(gè)用戶并不喜歡的改動(dòng)。我想可能是因?yàn)锳pple是一家做硬件的公司。相比只做應(yīng)用產(chǎn)品的公司,他們更理解硬件設(shè)備的演化方向,同時(shí)也更有自信可以引領(lǐng)新的設(shè)計(jì)方向。

繼iOS15把safari搜索框移到底部之后,2022年 iOS 16 又把系統(tǒng)級(jí)全局搜索 Spotlight Search(聚焦搜索)的搜索框轉(zhuǎn)移到了底部。

從2009年發(fā)布的 iOS 9 開(kāi)始,用戶可以通過(guò)下拉手勢(shì)快速訪問(wèn)Spotlight。這個(gè)交互設(shè)計(jì)隨后被其他移動(dòng)平臺(tái)和應(yīng)用廣泛模仿,成為移動(dòng)端搜索功能的標(biāo)準(zhǔn)之一。

之所以會(huì)這樣,其主要原因還是因?yàn)橹悄苁謾C(jī)的屏幕在變大。下拉搜索解決了搜索功能的快速喚起問(wèn)題。

到這里,或許也有人會(huì)想,把一個(gè)搜索框從頂部拿到底部真就那么難嗎?

倒也未必。成熟的有大量用戶基礎(chǔ)的產(chǎn)品,做這樣的改動(dòng)肯定很難。但是對(duì)于創(chuàng)新產(chǎn)品來(lái)講,不僅不難,還可以把這個(gè)事兒做出彩。

脫身于UC,有著阿里背景的夸克瀏覽器,一直以來(lái)在設(shè)計(jì)上非常出眾。2016年的夸克瀏覽器就把搜索框和地址欄放到了頁(yè)面底部,并主打輕快簡(jiǎn)潔,受到很多年輕用戶的喜愛(ài)。

03 從 Search 到 Ask ,從搜索框到對(duì)話框

perplexity被評(píng)價(jià)為新一代的搜索產(chǎn)品,他的默認(rèn)“搜索框”要比傳統(tǒng)的搜索框高三倍,看上去更像個(gè)長(zhǎng)文本輸入框。同時(shí)搜索結(jié)果頁(yè)的布局也與傳統(tǒng)搜索有著巨大差異。google 的搜索結(jié)果頁(yè)搜索框在頂部,而perplexity的搜索框(AI對(duì)話輸入框)卻在頁(yè)面底部。

同樣作為搜索產(chǎn)品,沒(méi)有人質(zhì)疑Perplexity的“搜索框”在底部是有問(wèn)題的。這是因?yàn)锳I產(chǎn)品的核心交互是對(duì)話式交互,對(duì)話框的消息輸入?yún)^(qū)自然應(yīng)該在頁(yè)面底部。

在瀏覽器產(chǎn)品中,搜索框和地址欄是復(fù)合在一起的。在AI產(chǎn)品中,搜索框與對(duì)話輸入框也是復(fù)合在一起的。

可想而知,搜索框與對(duì)話框輸入框整合的結(jié)果是:傳統(tǒng)的搜索框消失,AI產(chǎn)品中不會(huì)再有舊時(shí)的“搜索”感受。

在Perplexity之后,ChatGPT在2024年11月發(fā)布的搜索引擎 SearchGPT 也采用了同樣的對(duì)話式界面交互。

AI化的搜索已經(jīng)不存在 “搜索框——搜索提示詞——搜索結(jié)果列表” 這樣的產(chǎn)品模式,而是“AI對(duì)話入口——描述問(wèn)題——AI回答及推薦問(wèn)題——繼續(xù)提問(wèn)”。這樣最直接的好處是對(duì)話更接近用戶的心理模型。人們?cè)谑褂盟阉饕嫣骄恳粋€(gè)問(wèn)題的過(guò)程,往往需要多輪次的、不斷的輸入和變更自己的搜索詞,這本質(zhì)上就是一個(gè)問(wèn)答的過(guò)程。

雖然現(xiàn)在仍然存在很多應(yīng)用層面的問(wèn)題,但是充分運(yùn)用LLM(大語(yǔ)言模型)技術(shù)的最佳方式就是CUI,而CUI不再需要只能輸入關(guān)鍵詞的“搜索框”。

04 用戶心智與技術(shù)發(fā)展的矛盾

無(wú)論是語(yǔ)音輸入還是鍵盤(pán)輸入,手機(jī)的下半部分才是理想的用戶需求輸入?yún)^(qū),隨著AIGC技術(shù)帶來(lái)的CUI逐漸發(fā)展,很多我們已經(jīng)習(xí)慣的數(shù)字產(chǎn)品在UI層面將會(huì)發(fā)生很大的改變。

在這個(gè)過(guò)程中,用戶的習(xí)慣與固有心智不應(yīng)該成為科技發(fā)展的制約。固然迎合用戶的聲音是容易的,創(chuàng)造全新的產(chǎn)品體驗(yàn)重新塑造用戶心智是困難的,但用戶習(xí)慣與用戶心智是可以重新塑造的,只是需要一些創(chuàng)造更佳體驗(yàn)的信心、一點(diǎn)耐心和一點(diǎn)時(shí)機(jī)。

在成熟產(chǎn)品的改造上,如果像亞馬遜那個(gè)激進(jìn)而又粗暴的實(shí)驗(yàn)一樣,在這個(gè)問(wèn)題上得到的答案肯定是NO。但作為產(chǎn)品的設(shè)計(jì)者,我們不能否認(rèn)、無(wú)視技術(shù)發(fā)展帶來(lái)的直接影響,不能回避AIGC技術(shù)帶來(lái)的必然。

本文由人人都是產(chǎn)品經(jīng)理作者【柴林】,微信公眾號(hào):【柴林的設(shè)計(jì)筆記】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!