180 1088 2980
QQ咨询
官方微信扫一扫
官方微信二维码

优赞视角

关注互联网,关注技术开发,透析与分享移动互联网行业最新动态

UI设计:如何搞定搜索框的视觉设计?

2018-08-24 11:41:51 分类:UI设计

搜索框是我们经常使用的组件,但是我们在设计时通常只是粗略地参考别家的搜索框并没有仔细去思考搜索框样式之间的差异性,优赞整理和分析了在默认状态下的搜索框该如...

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

一、外框展示样式

1. 填充色

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

2. 线框

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

3. 投影

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

4. 透明度

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

5. 无外框

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

二、如何设定圆角大小

1. 直角

天猫本身的定位就比较品牌化,所以首页的底部图标采用了直角,并且我们还可以从天猫的品牌 Logo 中观察到猫头其实是一个矩形变形而来,线条较为笔直。所以,他的搜索框选择了直角与整体的品牌风格一致。以此类推,后面的圆角矩形,胶囊,异形都是同样的道理。

2. 圆角矩形

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

3. 胶囊

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

4. 异形

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

三、默认内容的对齐

1. 居左

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

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

2. 居中

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

经过上面的介绍,相信大家对搜索栏视觉设计已经有了很清晰的认识了。优赞科技提供各类APP开发服务,有丰富的开发经验。如果您对APP或网站开发感兴趣的话,可以通过下方优赞科技小程序联系我们,或者通过优赞官网提交需求,优赞会为您提供最好的服务!优赞科技,提供网站建设APP开发、微信开发、H5小游戏开发、手机商城开发、管理系统开发等一站式技术解决方案。

本文链接:/show-43-81-1.html,转载请注明出处。

作者:优赞科技,提供APP开发定制、微信定制开发、手机商城开发、管理系统开发等一站式技术解决方案。

相关阅读

  • 设计老龄化产品必须要关注的几个要点
    设计老龄化产品必须要关注的几个要点

    年轻人焦虑时间飞逝,搬不完的砖、加不完的班、学不完的 Knowledge、赶不完的 Deadline。聊微信玩抖音看知乎,在碎片化的时间中刷微博。老年人感叹生活平淡,亲人远隔万里相聚难,网络繁华复杂骗子多,下象棋打麻将看电视广场舞,被边缘化的网络下寻开心。生活太苦太乏味,每个人都要含块糖。本

  • 需要多少钱可以开发一款租房APP
    需要多少钱可以开发一款租房APP

    随着互联网的发展,越来越多的行业选择“拥抱”移动互联网这个平台,让行业信息也越来越透明化,房屋出租行业也不例外。随着市面上越来越多的租房APP“横空出世”,要做到哪些才算是一款合格的、受欢迎的租房APP呢?

  • 2018年最值得关注的7个UI/UX应用工具
    2018年最值得关注的7个UI/UX应用工具

    工具和人之间总归是有一个磨合的过程,在使用和操作的过程中逐步熟悉、磨合,能够让你的工作效率更上一层楼。