搜索框的视觉设计
作者/整理：admin 来源：互联网 2018-08-26
搜索框是我们经常使用的组件，但是我们在设计时通常只是粗略地参考别家的搜索框并没有仔细去思考搜索框样式之间的差异性，本篇整理和分析了在默认状态下的搜索框该如何选择外观样式，希望对大家有所帮助，上海网站建设。
目录
外框展示样式
外框圆角大小
默认内容的对齐方式
一、外框展示样式
这里一共整理搜集了5种，分别为：
填充色
线框
投影
透明度
无外框
1. 填充色
最常用的外框使用方案，通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找与识别。（例如：彩色页面背景下使用白色为填充色，白色页面背景使用浅灰色作为搜索框填充色。）
2. 线框
多用于干净简洁的背景页面，例如：搜索引擎或浏览器页面等页面。另一种情况则是与产品整体设计风格相关，例如：网易考拉的搜索框选择使用线条目的是与页面的图标风格保持一致。
3. 投影
常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。使用投影的主要目的是把搜索框与其他信息在高度上做了区分，更易被用户发觉，促使高频使用。
4. 透明度
常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。
5. 无外框
用于风格简洁的大留白的页面。下图腾讯视频的搜索功能去除了外框，这样设计会比有外框的搜索框在搜索面积上显得更大，彩色的放大镜图标把没有外框的搜索框的优先级提升到仅次于「精选」的级别。
建站咨询
021-61842014
