赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.1K 0 0

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

目录

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

一、外框展示样式

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

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

1. 填充色

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

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

2. 线框

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

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

3. 投影

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

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

4. 透明度

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

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

5. 无外框

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

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

二、如何设定圆角大小

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

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

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

1. 直角

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

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

2. 圆角矩形

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

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

3. 胶囊

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

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

4. 异形

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

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

三、默认内容的对齐方式

共两齐:

  • 左
  • 居

1. 居左

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

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

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

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

2. 居中

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

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

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

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

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

图片素材作者:Sourabh Barua

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

大家好,我是Clippp。今天为大家带来的文章是「搜索」设计。可能很多人认为搜索设计很简单:在主页顶部设计一个搜索框或者搜...
搜索
随着我们产品承载的内容越来越多,搜索功能在大多产品中都成了一个必不可少的功能。最初我们在看搜索框的时候,都会把它当作...
搜索框设计
小溜Epik:目前搜索功能是每个应用产品不可缺少一部分,同时也是用户经常光顾到的功能。一个好的搜索设计能够提高转化率,提...
搜索方式
对于搜索,百度百科给出的基本解释是: 给予一定的条件后再寻求,搜查。因此, 搜索,可以看做是用户快速获取特定信息的一种方...
搜索框设计
本文作者将从用户诉求、信息层级、界面表现三个层次上,试图对搜索和筛选两者的边界进行理清,并分别给出一些设计切入点。 一...
搜索技巧
“搜索”是产品中一个非常必要的功能模块,搜索就像为用户提供了一条便捷的绿色通道,方便用户快速检索内容。 搜索动作在 App ...
ui设计
在我接触交互设计之前,我一直把搜索功能的设计看作「搜索框+提示词+删除icon+取消button」的设计,但其实看似简单的搜索框背...
搜索
编者按:看似简单的投影,在高手眼里有千万种变化。不信看看今天这篇文章,让资深设计师教你做投影设计! 在今天的 UI设计中...
APP UI