圖片版權所屬：站長之家

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

目錄

• 外框展示樣式

• 外框圓角大小

• 默認內容的對齊方式

一、外框展示樣式

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

• 填充色

• 線框

• 投影

• 透明度

• 無外框

1. 填充色

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

2. 線框

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

3. 投影

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

4. 透明度

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

5. 無外框

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

二、如何設定圓角大小

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

• 直角

• 圓角矩形

• 膠囊

• 異形

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

1. 直角

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

2. 圓角矩形

通常以4~8px最為常用，此方案適用于多數產品風格，不會出錯。

3. 膠囊

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

4. 異形

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

三、默認內容的對齊方式

共兩種對齊方式：

• 居左

• 居中

1. 居左

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

另外必須要考慮的一個因素就是視覺上的左右平衡。下圖天貓的搜索框內容居左與右側的相機圖標處于一個左右平衡的視覺狀態。一旦改為居中整個搜索框的內容就會失衡。

2. 居中

左圖 QQ音樂搜索框的內容居中展示類似標題的效果，更易被發現和閱讀。

右圖網易云音樂居中展示是為了搜索框外的圖標在視覺上左右平衡。與上方天貓的例子有共同之處。