如何設計移動端搜尋?來看我總結的這四個部分!

2022-09-21 19:24:08 字數 2313 閱讀 1302

小溜epik:目前搜尋功能是每個應用產品不可缺少一部分,同時也是使用者經常光顧到的功能。乙個好的搜尋設計能夠提高轉化率,提公升使用者體驗。下面我們來看看搜尋設計的一些套路。

目錄:一、搜尋入口的設計樣式搜尋入口的設計需要根據搜尋功能在產品中的位置,不同的應用場景所使用的搜尋入口樣式也是不同的,接下來分別和大家介紹一下四種搜尋入口的常用樣式。

1. 底部標籤欄入口(tab bar)

把搜尋功能作為底部標籤欄中的乙個功能模組入口,適合將搜尋作為重要流量入口的

app,同時也可以同其他的 tab

bar入口相結合,如「布卡漫畫」就是把搜尋和類似發現功能的入口相結合。但是底部標籤欄的搜尋入口本身並不帶搜尋功能,所以通常與搜尋框樣式相結合使用。(例如:app

store、布卡漫畫)

如圖:2. 搜尋框導航入口

常見的展示形式之一,將搜尋入口以輸入框的形式放置在導航欄中或者導航欄下方,有些應用即便介面向上滑動時,搜尋欄會吸頂顯示,方便使用者隨時操作(是否吸頂顯示要根據搜尋功能在應用中的權重)。

搜尋框導航入口除了必須要有的輸入框外,還需要乙個搜尋圖示給予使用者提示。目前很多應用也會利用搜尋框內的區域進行預設文案,可作為提示使用者關鍵詞,也可以作為運營的入口來展示。(例如:花瓣、即刻)

如圖:3. 搜尋圖示入口

同樣也是常用搜尋方式,常見形式是將乙個放大鏡的圖示放在導航欄的右側。相對上面提到的搜尋框在視覺引導上略遜一籌,但節省了導航欄的空間,這樣導航欄中可以提供使用者更多的功能,適用於對搜尋權重不高的應用。

當然也有特別的搜尋圖示方式,例如:自如客,同樣是搜尋圖示的樣式由於不同的位置和層級變化,變得更加突出。(例如:自如客、tim)

如圖:4. 隱藏的搜尋入口

為了讓使用者更多的使用桌面提供的快速入口,初始介面時將搜尋功能隱藏,當進行滑動介面時才會出現搜尋功能,例如:iphone手機解鎖後是各個應用入口,當向右滑動時,隱藏的搜尋入口就會出現。

如圖:二、搜尋方式搜尋方式也就是我們通常會用哪些方法去搜尋我們要找的東西,下面介紹三種我們常用的搜尋方式。

1. 輸文字搜尋

主要且常用的搜尋方法,通過在輸入框中輸入想要搜尋的文字進行精www.cppcns.com準搜尋。同時當點選輸入框時,啟用輸入鍵盤。

如圖:2. 語音搜尋

語音搜尋不僅提公升了搜尋的便利性,同時也解決了老人對鍵盤輸入困擾和不會拼音的人群的問題。另外在**類app

中語音功能得到了更好運用,無論是在街邊商場,酒吧等,當聽見我們愛不忍釋的歌曲時,可以用語音功能進行歌曲識別,隨時找到我們喜歡歌曲的名字。還有在駕車時可以利用語音搜尋功能查詢路線。(例如:qq**,高德地圖)

如圖:3. 影象搜尋

借助影象識別技術,影象搜尋也得到了廣泛的應用。例如:我們可以通過對進行拍照搜尋到有關的資訊或者是和它相似的,還有電商應用中常用到的,對於無法準確描述的商品,可以通過影象搜尋找到該物品。如:蘑菇街中可以通過對現實物體拍照來找到想要的物品。(例如:蘑菇街、百度)

如圖:三、搜尋的輔助功能基於使用者不同的搜尋場景,需要給出不同的搜尋輔助,乙個好的搜尋輔助,會讓使用者愛上你的應用,下面就來介紹五種常用的搜尋輔助功能。

1. 熱門搜尋

目前搜尋量比較大或者運營想讓我們搜到的東西,同時給那些無目的的使用者更多的選擇。

如圖:2. 搜尋歷史

使用者可以看到自己每次查詢的記錄,方便使用者再次檢視。

如圖:3. 猜你喜歡

根據收集使用者的記錄為使用者提供相關的內容,減少使用者的思考時間,同時也會給你使用者貼心的感覺。(例如:天貓,今日頭條)

如圖:4. 遞進式搜尋

通過點選系統提供的輔www.cppcns.com助欄位,逐漸縮小搜尋範圍,對於搜尋模糊的使用者也提供了很好sbdovbhde的提示,可以更快的找到查詢目標。(例如:**)

如圖:5. 類別搜尋

當應用中涉及到的搜尋內容類似較多時,可以新增類別搜尋功能,先選擇類別後在進行搜尋,可以更快更精準的搜尋到相關內容。(例如: 36 氪、豆瓣)

如圖:四、搜尋結果展示形式從搜尋結果來看,依然有很多種展示形式,文字、、分類、**類等,我們了解不同樣式後可以根據不同的應用型別來選擇合適的搜尋結構的展示形式。

1. 文字類

主要以文字描述展示搜尋結果,多用在**類應用上,因為我搜尋的是歌曲本身的名字,對我們來說意義並不大。(如 36 氪,qq**)

如圖:2. 類

主要以展示為主,使用者會因為看到感興趣的點選檢視,所以多用在購物、資訊、電影等(如:每日優鮮、小紅書)

如圖:3. 模組類

主要用於包含多類別的應用,比如:我們在得到上進行搜尋時,輸入乙個「人類簡史」會發程式設計客棧現有兩個類別,乙個是電子書,乙個是音訊,所以對於多類別的應用我們應該擴大搜尋範圍並分類別展示,讓使用者可以通過分類更準確的查詢想要的資訊。(如得到、貓眼)

如圖:4. **類

移動端BI的設計

在移動化 大資料浪潮的今天,基於資料做決策應該是每一家公司的標配 每家公司都有專門負責資料的人,也都應該有乙個bi部門。而移動bi,基於手機端隨時隨地進行資料查詢和分析 更是bi中不可或缺的一部分。從五個層次來說 一 戰略層 使用者想要從這個產品中得到什麼東西?尤其是對於管理層,他們想從手機看資料,...

針對app移動端的測試總結

1 產品需求文件 產品原型圖 介面說明文件以及設計說明文件等應齊全 2 測試用例的設計與評審 1 根據產品需求文件 產品原型圖等文件,設計客戶端的一般功能測試用例 2 測試用例評審 修改與完善,評審通過後著手進入正式測試階段。3 ui測試 1 確保手頭的原型圖與效果圖為當前最新版本,符合產品經理及使...

如何進行移動端的頁面開發?

應該說,移動端的開發是伴隨著html5的興起而出現的,2007年第一款iphone誕生,2009年html5這個名詞第一次登上 舞台 當時的移動網際網路開始逐漸興起,發展到今,移動網際網路已經和人們的日常生活密切相關。作為開發者,對於乙個嶄新的事物,一直在嘗試的 路上 到底最好的開發方式是什麼?本文...