当前位置:织梦97 > 建站知识 > 如何搞定搜索框的视觉设计?来看这篇总结!

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

发布人:织梦97 时间:2018-08-27 人气:1151

好消息:现在购买商业模板赠送银牌会员(一元送一天)。同时承接各类网站编辑制作、仿站业务,详情联系右边客服。织梦仿站、织梦安装、修改、安全处理、疑难解决、PHP网站开发、网页设计、改版、点击这里

11.png

图片版权所属:站长之家

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

目录

  • 外框展示样式

  • 外框圆角大小

  • 默认内容的对齐方式

一、外框展示样式

这里一共整理搜集了 5 种,分别为:

  • 填充色

  • 线框

  • 投影

  • 透明度

  • 无外框

1. 填充色

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

2. 线框

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

3. 投影

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


著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:站长之家编辑
链接:https://www.chinaz.com/web/2018/0823/929069.shtml
来源:站长之家
暂无评论!
用户: 密码: 验证: 点击获取 注册
验证: 点击获取