5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì)發(fā)布者:本站 時(shí)間:2021-12-15 11:12:47
一個(gè)好的搜索功能設(shè)計(jì)能夠很好的幫助客戶直達(dá)想要的地方,實(shí)現(xiàn)完美的用戶體驗(yàn),今天分享幾個(gè)搜素框的設(shè)計(jì)技巧,希望可以?大家?guī)韱l(fā)。
你無法去賣一個(gè)用戶找不到的產(chǎn)品。搜索是用戶最基本的行為,也是構(gòu)建一個(gè)可盈利的app或網(wǎng)站的重要元素。用戶在發(fā)現(xiàn)和學(xué)習(xí)產(chǎn)品時(shí)期望在app中有流暢的體驗(yàn),他們會(huì)根據(jù)搜索結(jié)果迅速判斷出一個(gè)app的價(jià)值。
一個(gè)好的搜索控件應(yīng)當(dāng)幫助用戶迅速簡便地找到用戶想要的內(nèi)容。在本文中我們將探討如何將其實(shí)現(xiàn)。
1. 搜索如何放置
用戶在尋找搜索的入口時(shí)通常是迅速且粗暴的。他們通常會(huì)瀏覽一個(gè)頁面然后尋找能輸入文字的框。
目標(biāo):搜索框設(shè)計(jì)得明顯可見且很容易識(shí)別。
搜索區(qū)域放在明顯的位置
搜索是電商類app或網(wǎng)站的基礎(chǔ)功能,需要放在顯眼的位置,讓用戶很容易發(fā)現(xiàn)。搜索如果不放在顯眼的位置,會(huì)給用戶造成困惑,降低用戶的效率。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
△ 左圖中搜索功能隱藏在菜單選項(xiàng)后面
電商類app應(yīng)該將搜索放在主頁的頂部(如果首頁很長,搜索應(yīng)當(dāng)固定在頂部)。如果app的詳細(xì)目錄有很多,搜索區(qū)域應(yīng)當(dāng)放在默認(rèn)位置,確保用戶很容易找到且快速可以用。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
搜索框里帶有放大鏡icon
能夠讓用戶有廣泛共識(shí)的icon確實(shí)不多,放大鏡就是其中的一個(gè)。用戶甚至不需要有預(yù)置文字的提醒就可以知道放大鏡是搜索的意思。
使用最簡單的放大鏡icon圖標(biāo)就可以了,因?yàn)閕con圖片的細(xì)節(jié)并不能加快用戶的識(shí)別:
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
范圍選擇欄(只適用于iOS版本)
在iOS中,搜索有相應(yīng)的范圍選擇欄,用戶可以迅速選擇搜索的范圍,比如明確的標(biāo)準(zhǔn)或分類。
然而,最好是提高搜索結(jié)果的準(zhǔn)確性,否則用戶不需要設(shè)置搜索的范圍。
2. 解析搜索需求
搜索使得用戶做得更多,因?yàn)橛脩舨粌H要提出搜索需求,還要將問題輸入相應(yīng)位置。打字是容易出錯(cuò)并且耗費(fèi)時(shí)間的行為(尤其是在手機(jī)屏幕上)。
目標(biāo):盡量降低用戶輸入成本并迅速提供結(jié)果。
自動(dòng)推薦
普通用戶是不了解查詢公式的:如果他們在前幾個(gè)列表中沒有找到合適的結(jié)果,后來嘗試的成功率就很低。事實(shí)上,他們常常就放棄了。自動(dòng)推薦機(jī)制是基于用戶的現(xiàn)有特征嘗試去預(yù)測結(jié)果,從而幫助用戶尋找到合適的結(jié)果。當(dāng)完全自動(dòng)的推薦結(jié)果奏效時(shí),有助于用戶準(zhǔn)確表達(dá)搜索詞條。
自動(dòng)推薦機(jī)制不在于提升搜索的速度,而在于引導(dǎo)用戶,幫助他們構(gòu)建他們的搜索詞條。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
但是請確保自動(dòng)推薦是對(duì)用戶有所幫助的。如果設(shè)計(jì)得不好,有可能會(huì)使用戶產(chǎn)生疑惑。因此可以通過使用拼寫自動(dòng)矯正,識(shí)別詞根和預(yù)測內(nèi)容等方式來提高工具的可用性。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
最近搜索
app應(yīng)該儲(chǔ)存用戶的交互數(shù)據(jù),包括最近查找和最近購買記錄,為用戶下一次執(zhí)行搜索操作時(shí)提供數(shù)據(jù)支撐。這將有利于節(jié)約用戶查找同一件商品的時(shí)間和精力,同時(shí)提升用戶體驗(yàn)。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
3. 搜索進(jìn)展
理想狀態(tài)下,搜索結(jié)果應(yīng)該實(shí)時(shí)顯示,如果不能做到的話應(yīng)該有一個(gè)適當(dāng)?shù)囊曈X反饋。但是請記得減慢加載時(shí)間會(huì)是用戶產(chǎn)生困惑,甚至是流失。
目標(biāo):努力使用戶感知到的查找時(shí)間比實(shí)際時(shí)間要短。
搜索占位符
通常情況下,延遲0.1-1秒的時(shí)間是不需要給用戶特殊的反饋的。但是如果搜索占用的時(shí)間更長,至少應(yīng)該盡量將用戶的等待做的更令用戶滿意。加載容器就顯得重要了。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
懶加載
懶加載是一種常見的技術(shù),當(dāng)一些結(jié)果已經(jīng)展示出來的同時(shí)另一些內(nèi)容正在加載。這種方式加載很快,因?yàn)椴糠之a(chǎn)品是原先加載好的。
5個(gè)方面解析移動(dòng)端電商的搜索框設(shè)計(jì),PS教程,
對(duì)于懶加載的產(chǎn)品,最好是優(yōu)先展示出產(chǎn)品的文字信息,這樣缺乏耐心的用戶可以通過文字先篩選出目標(biāo)產(chǎn)品,無需等待所有圖片加載完成。
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源,強(qiáng)大的網(wǎng)站優(yōu)化技術(shù),穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話:021-58370032
關(guān)鍵詞標(biāo)簽:上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)