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

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

目錄

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

一、外框展示樣式

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

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

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

2. 線框

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

3. 投影

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

4. 透明度

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

5. 無外框

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

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

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

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

1. 直角

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

2. 圓角矩形

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

3. 膠囊

適用于活潑，年輕，具有親和力的品牌風(fēng)格。

4. 異形

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

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

共兩種對齊方式：

居左
居中
1. 居左

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

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

2. 居中

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

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

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

新聞標(biāo)題：如何搞定搜索框的視覺設(shè)計(jì)？
本文網(wǎng)址：http://m.kartarina.com/news16/314416.html

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

廣告

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