搜索框设计样式与分析

前言:

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

目录

  • 1、外框展示样式
  • 2、外框圆角大小
  • 3、默认内容的对齐方式

外框展示样式

这里一共整理搜集了5种,分别为:
① 填充色
② 线框
③ 投影
④ 透明度
⑤ 无外框
① 填充色:最常用的外框使用方案,通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色,方便用户查找与识别。(例如:彩色页面背景下使用白色为填充色,白色页面背景使用浅灰色作为搜索框填充色。)

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

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

④ 透明度:常用于背景色复杂的场景,目的是为不破坏背景页面的整体效果,在视觉上更和谐。

⑤ 无外框:用于风格简洁的大留白的页面。下图腾讯视频的搜索功能去除了外框,这样设计会比有外框的搜索框在搜索面积上显得更大,彩色的放大镜图标把没有外框的搜索框的优先级提升到仅次于“精选”的级别。

2、如何设定圆角大小

目前整理的搜索框圆角大小共包含四种类型:
① 直角
② 圆角矩形
③ 胶囊
④ 异形
这四种类型的圆角大小在选择时 需要考虑品牌定位和页面的整体风格。
① 直角:天猫本身的定位就比较品牌化,所以首页的底部图标采用了直角,并且我们还可以从天猫的品牌Logo中观察到猫头其实是一个矩形变形而来,线条较为笔直。所以,他的搜索框选择了直角与整体的品牌风格一致。以此类推,后面的圆角矩形,胶囊,异形都是同样的道理。

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

③ 胶囊:适用于活泼,年轻,具有亲和力的品牌风格。

④ 异形:显而易见,飞猪的异形搜索框与品牌logo风格保持了一致。拉开了与其他搜索框的差异。

3、默认内容的对齐方式

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

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

② 居中:左图QQ音乐搜索框的内容居中展示 类似标题的效果,更易被发现和阅读。右图网易云音乐居中展示是 为了搜索框外的图标在视觉上左右平衡,与上方天猫的例子有共同之处。

海盐社(公众号)

作者: 洋洋Leony
(0)

相关推荐

  • 干货!最全优秀搜索框设计案例

    面对纷繁复杂的网页内容,用户通过查询关键词表达需求,期望在响应的查询结果中快速获取准确的信息和流畅的用户体验.用户与网络世界的万千联系都是从搜索开始的.搜索框之于用户就像是用户与应用或网站之间的对话窗 ...

  • 交互设计之(二)搜索框设计

    在交互设计中,各个不同的场景需要不同的搜索框设计.搜索框是一种常见的交互控件,用于精准提取海量的信息中的准确内容.搜索框几乎存在所有的网站和APP中,尤其是海量内容为导向的产品之中,例如音乐库.电商网 ...

  • 一个优秀的搜索框必须考虑的五个方面

    今天@励定洲 这篇译文开门见山,从搜索框的可见性.范围搜索.局部搜索.高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能,内附大量实例(想知道谷歌搜索有哪个交互不好吗),结合实践,深入浅出, ...

  • 移动搜索体验设计总结

    本文主要针对移动应用中搜索功能的设计进行研究,通过体验几十种不同类型的app,对移动搜索进行多方面的总结与归纳. 01.搜索的目的 用户的目的 搜索功能对用户来说并不陌生.用户使用搜索功能,目的是想在 ...

  • 如何设计出一个完美的搜索框

    小编:UI设计是一个不简单的工作,我们不仅需要把产品设计的好看更要注意它的用户体验.从一个产品的整体感受到一个按钮的展现形式都在我们的考虑范围,所以我们不能忽视每一个细节.今天就带大家来研究一下一个完 ...

  • 2019最佳弹窗/弹出框设计20例【附教程】

    弹窗/弹出框是APP或者网站与用户交互常见的方式之一.不同的网页弹窗和App弹框适用于不用的场景,弹窗的设计直接影响用户体验.不知道如何提高弹出框的用户体验设计? 小编从优质网站精心挑选了20例弹窗/ ...

  • Win10如何禁用Cortana把Cortana搜索框改成搜索图标

    只需在任务栏上的空白处点击右键,在弹出的右键菜单中显示“搜索”下级菜单。如图: 在“搜索”下级菜单中即可看到“已禁用”选项,选择它即可禁用Cortana微软小娜,你会发现任务栏中的Cortana搜索框 ...

  • Win10 Cortana小娜选项没有显示搜索框现象的原因和解决办法

    Cortana小娜选项没有显示搜索框怎么办?Cortana小娜是win10系统推出的一款广受用户喜爱的个人智能助理软件.但是现在却有用户在使用时遇到了win10 Cortana选项中没有"显 ...

  • 小米手机桌面底部有个搜索框,怎么去掉?

    用过或者正在使用小米手机的朋友都知道,小米手机屏幕底部有一个搜索框,这是为了方便用户搜索一些自己需要的东西而设计的,但是有的朋友觉得这个搜索框放在这不太好看,想把它隐藏掉,该怎么操作呢? 操作方法 0 ...