如何搞定搜索框的視覺設(shè)計？

搜索框是我們經(jīng)常使用的組件，但是我們在設(shè)計時通常只是粗略地參考別家的搜索框并沒有仔細去思考搜索框樣式之間的差異性，本篇整理和分析了在默認狀態(tài)下的搜索框該如何選擇外觀樣式，希望對大家有所幫助。

目錄

外框展示樣式
外框圓角大小
默認內(nèi)容的對齊方式

一、外框展示樣式

這里一共整理搜集了5種，分別為：

填充色
線框
投影
透明度
無外框
1. 填充色

最常用的外框使用方案，通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找與識別。（例如：彩色頁面背景下使用白色為填充色，白色頁面背景使用淺灰色作為搜索框填充色。）

2. 線框

多用于干凈簡潔的背景頁面，例如：搜索引擎或瀏覽器頁面等頁面。另一種情況則是與產(chǎn)品整體設(shè)計風格相關(guān)，例如：網(wǎng)易考拉的搜索框選擇使用線條目的是與頁面的圖標風格保持一致。

3. 投影

常用于風格簡潔輕量的風格頁面，同時搜索功能級別較高的場景。使用投影的主要目的是把搜索框與其他信息在高度上做了區(qū)分，更易被用戶發(fā)覺，促使高頻使用。

4. 透明度

常用于背景色復雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。

5. 無外框

用于風格簡潔的大留白的頁面。下圖騰訊視頻的搜索功能去除了外框，這樣設(shè)計會比有外框的搜索框在搜索面積上顯得更大，彩色的放大鏡圖標把沒有外框的搜索框的優(yōu)先級提升到僅次于「精選」的級別。

二、如何設(shè)定圓角大小

目前整理的搜索框圓角大小共包含四種類型：

直角
圓角矩形
膠囊
異形
這四種類型的圓角大小在選擇時需要考慮品牌定位和頁面的整體風格。

1. 直角

天貓本身的定位就比較品牌化，所以首頁的底部圖標采用了直角，并且我們還可以從天貓的品牌 Logo 中觀察到貓頭其實是一個矩形變形而來，線條較為筆直。所以，他的搜索框選擇了直角與整體的品牌風格一致。以此類推，后面的圓角矩形，膠囊，異形都是同樣的道理。

2. 圓角矩形

通常以4~8px最為常用，此方案適用于多數(shù)產(chǎn)品風格，不會出錯。

3. 膠囊

適用于活潑，年輕，具有親和力的品牌風格。

4. 異形

顯而易見，飛豬的異形搜索框與品牌 logo 風格保持了一致。拉開了與其他搜索框的差異。

三、默認內(nèi)容的對齊方式

共兩種對齊方式：

居左
居中
1. 居左

符合視覺閱讀順序。左下方 App Store 搜索框內(nèi)的圖標和文字采用左對齊的方式是為了方便用戶垂直閱讀信息，一旦改為居中擺放閱讀的視覺路線被打亂。

另外必須要考慮的一個因素就是視覺上的左右平衡。

2. 居中

搜索框的內(nèi)容居中展示類似標題的效果，更易被發(fā)現(xiàn)和閱讀。

居中展示是為了搜索框外的圖標在視覺上左右平衡。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標題：如何搞定搜索框的視覺設(shè)計？
本文網(wǎng)址：http://www.muchs.cn/news16/314416.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、自適應網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、App開發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)