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

洋洋Leony：搜索框是我们经常使用组件，是我们在设计时常是粗略地参考家搜索框并没有仔细去思考搜索框样式之间的差异性，本篇整和分析了在默认状态的搜索框该如何择外观样式，希望对大有帮助。

目录

• 外框展示样式
• 外框圆角大
• 默认容的对齐方式

一、外框展示样式

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

• 填充
• 线框
• 投
• 透明
• 框

1. 填充色

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

2. 线框

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

3. 投影

常用风简洁轻量的风页面，同时搜索功能级别高的场。使用投影的主要目的是把搜索框与其他信息在高度上做区分，更易被用户，促使高频使用。

4. 透明度

常用于背景色复杂场景，目是为不破坏背景页体效，在视觉上更和谐。

5. 无外框

于格简洁的大留白的页面。图腾讯视频的搜索功除了外框，这样设计会有外框的搜索框在搜索面积上显得更大，彩色的放大镜图标把没有外框的搜索框的优先级升到仅次于「精」的级别。

二、如何设定圆角大小

目前整理的搜索框圆角大共包含四种类型：

• 直角
• 圆角矩形
• 胶囊
• 异形

这种类的圆角大小在择时需要考虑牌定位和页面的整体格。

1. 直角

天猫本身的定位就较牌，首页的图标采了直角，并且我们还可从天猫的牌 Logo 中观察到猫头实是一个矩形变形而来，线条较为笔直。，他的搜索框择了直角与整体的牌格一致。此类推，后面的圆角矩形，胶囊，异形都是同样的道。

2. 圆角矩形

通常以4~8px最为常用，此方案适用于多数产品风格，不会出错。

3. 胶囊

用于活泼，轻，具亲力的品牌风格。

4. 异形

显而易见，飞猪的异形搜索框与品牌 logo 风持一致。拉开与其他搜索框的差异。

三、默认内容的对齐方式

共两齐：

• 左
• 居

1. 居左

符视觉阅读顺序。左下方 App Store 搜索框内的图标和文字采用左对齐的方式是为了方便用户垂直阅读息，一旦改为居中摆放阅读的视觉路线被乱。

另外必须要考虑的一个因素就是视觉上的左右衡。下图猫的搜索框内容居左右侧的相机图标于一个左右衡的视觉状。一旦改为居中整个搜索框的内容就会失衡。

2. 居中

左图 QQ音乐搜索框的内居中展示类似标题的效果，易被发阅读。

右图网易云音居中展示是为了搜索框外的图标在视觉上左右衡。上方猫的例有共同之。

欢迎关注作者的公众号：「海盐社」

图片素材作者：Sourabh Barua