如何搞定搜索框的视觉设计？来看这篇总结！

图片版权所属：站长之家

洋洋Leony：搜索框是我们经常使用的组件，但是我们在设计时通常只是粗略地参考别家的搜索框并没有仔细去思考搜索框样式之间的差异性，本篇整理和分析了在默认状态下的搜索框该如何选择外观样式，希望对大家有所帮助。

目录

• 外框展示样式

• 外框圆角大小

• 默认内容的对齐方式

一、外框展示样式

这里一共整理搜集了 5 种，分别为：

• 填充色

• 线框

• 投影

• 透明度

• 无外框

1. 填充色

最常用的外框使用方案，通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找与识别。（例如：彩色页面背景下使用白色为填充色，白色页面背景使用浅灰色作为搜索框填充色。）

2. 线框

多用于干净简洁的背景页面，例如：搜索引擎或浏览器页面等页面。另一种情况则是与产品整体设计风格相关，例如：网易考拉的搜索框选择使用线条目的是与页面的图标风格保持一致。

3. 投影

常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。使用投影的主要目的是把搜索框与其他信息在高度上做了区分，更易被用户发觉，促使高频使用。