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

0 評論 2148 瀏覽 15 收藏 11 分鐘

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

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

產品設計者自然會想:既然都是輸入,那么這三種輸入方式應該被匯總到一起,匯總到一個輸入框里。

數字產品世界中,我們最常見的“需求輸入框”,便是搜索框。

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

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

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

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

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

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

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

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

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

筆者當時在糯米產品中負責了這個實驗項目,當時的設計方案比亞馬遜這個多做了一步。我們為了把新的搜索框放到最底部,不得不把底tab變成了頂tab。糯米的這個激進的實驗項目最終以失敗告終。

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

02 iOS 從來不糾結

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

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

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

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

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

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

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

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

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

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

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

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

同樣作為搜索產品,沒有人質疑Perplexity的“搜索框”在底部是有問題的。這是因為AI產品的核心交互是對話式交互,對話框的消息輸入區自然應該在頁面底部。

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

可想而知,搜索框與對話框輸入框整合的結果是:傳統的搜索框消失,AI產品中不會再有舊時的“搜索”感受。

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

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

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

04 用戶心智與技術發展的矛盾

無論是語音輸入還是鍵盤輸入,手機的下半部分才是理想的用戶需求輸入區,隨著AIGC技術帶來的CUI逐漸發展,很多我們已經習慣的數字產品在UI層面將會發生很大的改變。

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

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

本文由人人都是產品經理作者【柴林】,微信公眾號:【柴林的設計筆記】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!