主页 > 建站知识 > 建站指南 > 策划方案 >

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

作者/整理:07fly 来源:优设网 2018-09-10 Tag:


11.png

图片版权所属:站长之家

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

目录

一、外框展示样式

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

1. 填充色

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

2. 线框

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

3. 投影

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


上一篇:基础向:电商平台的订单设计流程

下一篇:如何搞定页面视觉风格统一性?看这篇文章就够了!

相关新闻

2008-2020 © 成都零起飞科技有限公司 网站建设 开源CRM 建站系统 旅行社ERP系统 虚拟主机