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

柴林
0 評論 2204 瀏覽 15 收藏 11 分鐘
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

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

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

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

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

單獨看上面這個搜索框,簡直完美極了。

但當(dāng)我們考慮把它如何放到手機屏幕的哪個位置的時候,問題就來了。我們無論把它放在哪個位置,都不完美。

截止目前,大部分產(chǎn)品的搜索框都是放在屏幕頂部。因為從PC時代到小屏智能手機,大家一直是這么做的。但隨著隨著手機屏幕越變越大,拇指熱區(qū)的問題也越來越明顯。把搜索框放在屏幕頂部,等于把三個重要的輸入操作放到了一個手指難以操作的橙色甚至紅色區(qū)域。

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

01 “激進”的搜索框移動實驗

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

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

在2016年(也就是在亞馬遜這個實驗的7年前),百度也做過類似的實驗。

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

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

另外一個團隊負責(zé)百度最重要的移動端產(chǎn)品,他們在2017年發(fā)布了手機百度App 9.0,最終選擇了將語音輸入從搜索框剝離、單獨放在底tab的方案。

02 iOS 從來不糾結(jié)

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

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

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

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

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

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

之所以會這樣,其主要原因還是因為智能手機的屏幕在變大。下拉搜索解決了搜索功能的快速喚起問題。

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

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

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

03 從 Search 到 Ask ,從搜索框到對話框

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

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

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

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

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

AI化的搜索已經(jīng)不存在 “搜索框——搜索提示詞——搜索結(jié)果列表” 這樣的產(chǎn)品模式,而是“AI對話入口——描述問題——AI回答及推薦問題——繼續(xù)提問”。這樣最直接的好處是對話更接近用戶的心理模型。人們在使用搜索引擎探究一個問題的過程,往往需要多輪次的、不斷的輸入和變更自己的搜索詞,這本質(zhì)上就是一個問答的過程。

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

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

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

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

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

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

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

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