5個(gè)方面解析移動(dòng)端電商的搜索框設計發(fā)布者：本站     時(shí)間：2021-12-15 11:12:47

一個(gè)好的搜索功能設計能夠很好的幫助客戶(hù)直達想要的地方，實(shí)現完美的用戶(hù)體驗，今天分享幾個(gè)搜素框的設計技巧，希望可以?大家帶來(lái)啟發(fā)。

你無(wú)法去賣(mài)一個(gè)用戶(hù)找不到的產(chǎn)品。搜索是用戶(hù)最基本的行為，也是構建一個(gè)可盈利的app或網(wǎng)站的重要元素。用戶(hù)在發(fā)現和學(xué)習產(chǎn)品時(shí)期望在app中有流暢的體驗，他們會(huì )根據搜索結果迅速判斷出一個(gè)app的價(jià)值。

一個(gè)好的搜索控件應當幫助用戶(hù)迅速簡(jiǎn)便地找到用戶(hù)想要的內容。在本文中我們將探討如何將其實(shí)現。

1. 搜索如何放置

用戶(hù)在尋找搜索的入口時(shí)通常是迅速且粗暴的。他們通常會(huì )瀏覽一個(gè)頁(yè)面然后尋找能輸入文字的框。

目標：搜索框設計得明顯可見(jiàn)且很容易識別。

搜索區域放在明顯的位置

搜索是電商類(lèi)app或網(wǎng)站的基礎功能，需要放在顯眼的位置，讓用戶(hù)很容易發(fā)現。搜索如果不放在顯眼的位置，會(huì )給用戶(hù)造成困惑,降低用戶(hù)的效率。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

△ 左圖中搜索功能隱藏在菜單選項后面

電商類(lèi)app應該將搜索放在主頁(yè)的頂部(如果首頁(yè)很長(cháng)，搜索應當固定在頂部)。如果app的詳細目錄有很多，搜索區域應當放在默認位置，確保用戶(hù)很容易找到且快速可以用。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

搜索框里帶有放大鏡icon

能夠讓用戶(hù)有廣泛共識的icon確實(shí)不多，放大鏡就是其中的一個(gè)。用戶(hù)甚至不需要有預置文字的提醒就可以知道放大鏡是搜索的意思。

使用最簡(jiǎn)單的放大鏡icon圖標就可以了，因為icon圖片的細節并不能加快用戶(hù)的識別：

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

范圍選擇欄（只適用于iOS版本）

在iOS中，搜索有相應的范圍選擇欄，用戶(hù)可以迅速選擇搜索的范圍，比如明確的標準或分類(lèi)。

然而，最好是提高搜索結果的準確性，否則用戶(hù)不需要設置搜索的范圍。

2. 解析搜索需求

搜索使得用戶(hù)做得更多，因為用戶(hù)不僅要提出搜索需求，還要將問(wèn)題輸入相應位置。打字是容易出錯并且耗費時(shí)間的行為(尤其是在手機屏幕上)。

目標：盡量降低用戶(hù)輸入成本并迅速提供結果。

自動(dòng)推薦

普通用戶(hù)是不了解查詢(xún)公式的：如果他們在前幾個(gè)列表中沒(méi)有找到合適的結果，后來(lái)嘗試的成功率就很低。事實(shí)上，他們常常就放棄了。自動(dòng)推薦機制是基于用戶(hù)的現有特征嘗試去預測結果，從而幫助用戶(hù)尋找到合適的結果。當完全自動(dòng)的推薦結果奏效時(shí)，有助于用戶(hù)準確表達搜索詞條。

自動(dòng)推薦機制不在于提升搜索的速度，而在于引導用戶(hù)，幫助他們構建他們的搜索詞條。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

但是請確保自動(dòng)推薦是對用戶(hù)有所幫助的。如果設計得不好，有可能會(huì )使用戶(hù)產(chǎn)生疑惑。因此可以通過(guò)使用拼寫(xiě)自動(dòng)矯正，識別詞根和預測內容等方式來(lái)提高工具的可用性。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

最近搜索

app應該儲存用戶(hù)的交互數據，包括最近查找和最近購買(mǎi)記錄，為用戶(hù)下一次執行搜索操作時(shí)提供數據支撐。這將有利于節約用戶(hù)查找同一件商品的時(shí)間和精力，同時(shí)提升用戶(hù)體驗。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

3. 搜索進(jìn)展

理想狀態(tài)下，搜索結果應該實(shí)時(shí)顯示，如果不能做到的話(huà)應該有一個(gè)適當的視覺(jué)反饋。但是請記得減慢加載時(shí)間會(huì )是用戶(hù)產(chǎn)生困惑，甚至是流失。

目標：努力使用戶(hù)感知到的查找時(shí)間比實(shí)際時(shí)間要短。

搜索占位符

通常情況下，延遲0.1-1秒的時(shí)間是不需要給用戶(hù)特殊的反饋的。但是如果搜索占用的時(shí)間更長(cháng)，至少應該盡量將用戶(hù)的等待做的更令用戶(hù)滿(mǎn)意。加載容器就顯得重要了。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

懶加載

懶加載是一種常見(jiàn)的技術(shù)，當一些結果已經(jīng)展示出來(lái)的同時(shí)另一些內容正在加載。這種方式加載很快，因為部分產(chǎn)品是原先加載好的。

5個(gè)方面解析移動(dòng)端電商的搜索框設計,PS教程,

對于懶加載的產(chǎn)品，最好是優(yōu)先展示出產(chǎn)品的文字信息，這樣缺乏耐心的用戶(hù)可以通過(guò)文字先篩選出目標產(chǎn)品，無(wú)需等待所有圖片加載完成。