怎么做一個(gè)ui搜索界面設(shè)計(jì)

怎么做一個(gè)ui搜索界面設(shè)計(jì)

怎么做一個(gè)ui搜索界面設(shè)計(jì)？搜索是我們經(jīng)常使用的功能，當(dāng)我們面對(duì)復(fù)雜的信息時(shí)，想找到目標(biāo)信息，就會(huì)尋找搜索功能的位置，今天小編主要給大家分享怎么做一個(gè)ui搜索界面設(shè)計(jì)，希望對(duì)你們有幫助!

1.搜索功能的視覺提升

(1)搜索框設(shè)計(jì)

統(tǒng)一設(shè)計(jì)語言:根據(jù)app的整體設(shè)計(jì)語言，如果頁(yè)面是親和力強(qiáng)的圓形按鈕、大圓角的卡片樣式，那么搜索框的設(shè)計(jì)語言也應(yīng)該是一致的。如飛天豬搜索框的右上角對(duì)應(yīng)品牌形象，實(shí)現(xiàn)了設(shè)計(jì)語言的統(tǒng)一。

搜索框比例:搜索框的長(zhǎng)度應(yīng)保證可輸入字符的極限長(zhǎng)度、推薦詞的字符數(shù)，輸入框的高度應(yīng)符合移動(dòng)端手指的觸摸區(qū)域。

搜索框視覺層次突出:搜索框的線條與面在視覺層次上應(yīng)更突出。

(2)搜索icon設(shè)計(jì)

圖標(biāo)符合用戶的心意:在用戶的心目中，放大鏡圖標(biāo)就是“搜索”，如果圖標(biāo)很明顯，那么就沒有必要顯示“搜索”這個(gè)詞。

搜索icon形體:在設(shè)計(jì)中，我們發(fā)現(xiàn)icon的設(shè)計(jì)尺寸與屏幕有很大關(guān)系。在移動(dòng)端中，屏幕較小，可以放置的圖標(biāo)和文本按鈕更少。在較小的范圍內(nèi)，icon形體需要高度細(xì)化，太復(fù)雜和太細(xì)的線條會(huì)導(dǎo)致微弱的視覺對(duì)比度。

(3)位置設(shè)計(jì)

用戶對(duì)某些用戶界面元素和模式的位置有一定的期望和習(xí)慣性認(rèn)知。搜索是其中一種模式，大多數(shù)用戶希望在界面的頂部或右上角找到它。

2.搜索中加入微交互提升情感體驗(yàn)

隨著技術(shù)的發(fā)展和經(jīng)驗(yàn)的提高，越來越多的app增加了微交互動(dòng)效。例如，在搜索頁(yè)面中添加了過渡動(dòng)畫，以及語音搜索中的引導(dǎo)動(dòng)效。

(1)提供即時(shí)反饋:在搜索過程中，視覺反饋的微交互讓用戶明白操作已經(jīng)被系統(tǒng)接受，給用戶一種控制感。

(2)促進(jìn)互動(dòng):搜索中的微交互鼓勵(lì)用戶進(jìn)行更多互動(dòng)，它可以指導(dǎo)用戶，教育用戶，降低學(xué)習(xí)成本，讓用戶了解如何使用它。

(3)帶來愉悅感:搜索過程中的微交互給用戶帶來流暢愉悅的體驗(yàn)。

例如，語音搜索的功能與品牌吉祥物相結(jié)合，創(chuàng)造出未來的智能感，在等待搜索的同時(shí)增加品牌吉祥物的加載效果，或者對(duì)于無法搜索的內(nèi)容，搜索結(jié)果頁(yè)面可以添加一些可愛的小效果來引導(dǎo)用戶進(jìn)行下一步操作，從而避免用戶無法搜索的負(fù)面情緒，影響產(chǎn)品的使用。