app的搜索欄要如何設(shè)計(jì)呢?

在大多數(shù)應(yīng)用中,頁(yè)面頂部會(huì)放置一個(gè)搜索欄,比如社交類的應(yīng)用Facebook,Instagram,LinkedIn甚至Snapchat,還有國(guó)內(nèi)的微信,QQ,搜索欄都是頂部。地圖類的應(yīng)用,百度地圖,高德地圖也都是如此。

為什么要這樣設(shè)計(jì)呢?Apple并沒(méi)有建議將搜索欄放在應(yīng)用的頂部,界面交互設(shè)計(jì)規(guī)范也沒(méi)有建議。

如果您去谷歌搜索這個(gè)問(wèn)題,Quora上有這么一個(gè)回答比較準(zhǔn)確:

“用戶已經(jīng)被訓(xùn)練成在頂部搜索的習(xí)慣,設(shè)計(jì)師不敢冒險(xiǎn)去打破這個(gè)慣例?!?/p>

 

不過(guò),Lyft的設(shè)計(jì)師冒險(xiǎn)打破了這一慣例。

Lyft采用了與約定俗成的搜索欄不同的設(shè)計(jì)。他們不是將搜索欄浮動(dòng)在頂部,而是將搜索放在屏幕的中下部分。這樣的設(shè)計(jì)可以讓用戶更容易訪問(wèn)。

雖然我們不是經(jīng)常能意識(shí)到,但是現(xiàn)在的屏幕越來(lái)越大,特別是對(duì)于手比較小的,或者不夠靈活的用戶而言,頂部的搜索欄在使用上是有難度的。

如果您去觀察大多數(shù)的應(yīng)用,主要的都位于中間或這中下的區(qū)域。所有的導(dǎo)航標(biāo)簽,消息,鍵盤都為了更好的用戶體驗(yàn)而放在用戶易于觸及到的地方。

Lyft的搜索欄不在頂部,但它不是在底部,它在拇指的最佳位置。

從上面的圖表中可以看出,大約一半的手機(jī)用戶進(jìn)行單手操作。而Lyft不會(huì)讓你伸出一點(diǎn)拇指; 搜索欄位于最佳位置。

我們從上圖中看到,所有的搜索欄有一半位于“Out of Reach”區(qū)域。而Lyft's位于綠色區(qū)域中的拇指下方。

設(shè)計(jì)師如何從中學(xué)到什么?

檢查您的ui分析,使用用戶訪談,查看用戶最常使用的交互界面元素。

在打車,地圖類應(yīng)用中這個(gè)元素是搜索欄。

在社交類中,它可能是照片或類似按鈕,在購(gòu)物應(yīng)用中,它可能是產(chǎn)品。

確保最常用的交互元素是界面中最容易訪問(wèn)的元素。

不要害怕打破常規(guī),過(guò)去的東西總要被打破。雖然您希望讓用戶熟悉您的用戶界面,但首先要保證良好的用戶體驗(yàn)。

您要考慮用戶手的大小和用戶的年齡。問(wèn)問(wèn)自己,“我的過(guò)往經(jīng)驗(yàn)是否適用于我要服務(wù)的用戶?“”。

適應(yīng)并了解我的用戶的不同能力?”

最后,不要太過(guò)依戀過(guò)往的東西。風(fēng)格在變化,新設(shè)計(jì)師可能加入貴公司。還記得iOS 6中的3D-ish元素嗎?

請(qǐng)歡迎改變,不要把它推開(kāi)。


每天更新,
全站高品質(zhì)素材免費(fèi)下載!