• 厦门泉州
  • FLASH站
  • 服务热线  0592-5218501
  • 服务热线  0592-5218501
  • FLASH站
  • 厦门泉州
  • 首页
  • 案例
  • 服务
  • 关于
  • 动态
  • 联系
  • 签约动态Signed Dynamic
  • 设计趋势Design Trend
  • 行业快讯Industry News
  • 互动新闻Huudon News
签约动态
设计趋势
行业快讯
互动新闻

如何把握搜索栏的设计要素

2017-05-02 / 浏览:154

众所周知,搜索栏是APP UI 界面设计的高频组件,我们经常用的客户端几乎都能见到,比如上外卖软件想吃份麻辣烫,逛淘宝想买双黑色运动鞋,比如遇到什么问题想谷歌百度一下,这时候都会用到搜索栏,搜索是最快速又最有效的方式,这也渐渐形成了用户习惯。

这时候你可能认为一个小小的搜索栏有什么好设计的?如果你这样想的话,那就大错特错了。

今天互动创想网站公司就如何把握搜索栏的设计要素给大家一些小建议。

1. 让搜索框处于合理的位置

当用户想要搜索内容的时候还需要花费精力来寻找搜索框,这就非常尴尬了。这意味着搜索框本身就不容易被察觉。在理想情况下,搜索框的设计应当和整个网站设计风格保持一致,同时在视觉上要略显突出,应将搜索栏放置在醒目的位置,便于用户发觉它的存在。将搜索栏放在隐蔽位置的app会让用户觉得沮丧,也会让用户的操作流程变慢。

很多电商app都将搜索栏放在首页顶部,对拥有大量商品的app来说,将搜索栏放在这样的位置,能够让它既明显又能够很快被找到。

2、将放大镜图标和搜索栏放一起

只有少数图标具有世界范围内的广泛认知度,放大镜图标恰恰是其中一个。就算你没有使用文字标签说明,用户也能将放大镜图标看作是“搜索”的意思。你应该使用一个粗线条,最简化的放大镜图标。因为图形细节越少,认知速度越快。

搜索框.jpg

3、让搜索栏尽量简单

在你设计搜索框的时候,请尽量让它看起来就是一个搜索栏,并且简单易用。可用性研究表明,默认没有显示高级选项的搜索栏看起来更加友好,所以,通常情况下给用户提供的搜索框最好不要提供进阶的搜索选项。

4、合理的输入框尺寸

输入框太小是最常见的搜索栏目设计错素,虽然用户可以输入比输入框更长的内容,但是可见的部分往往无法完全可见,这种设计的可用性并不强。这样的输入框可能因为可视范围的限制,促使用户使用短的、不精确的查询方式,因为更长的内容并不适合阅读。如果输入框能够符合用户的常见输入内容的尺寸来进行匹配,那么它的可用性会更强。

5、让用户明白哪些可以搜索到

最好是在输入框中包含示例,这样可以向用户给予建议。我们在搜索栏设计的时候就要注意,设计一些利于用户使用的小元素,比如在搜索栏里加入索引“输入关键词”这一类的提示。当我们的用户点击搜索栏进行搜索的时候这些提示就要自动的消失,不然用户还需要手动去删除,然后再进行搜索,这样是很不方便的。在用户搜索完成后,他们需要搜索其他东西时,我们应该在搜索框右边加上一个小小的删除按钮,这样非常方便用户进行多次的搜索。

搜索框1.jpg

在APP开发中,很多细微的设计细节,都是需要我们注意的,小到一个搜索栏,本文只是把常见的搜索栏设计要素提取出来供大家参考,厦门互动创想APP开发团队一直用心专研,致力于为大家带来良好用户体验的设计。


分享提升网站设计用户体验的技巧 返回列表

栏目最新信息

  • 如何把握搜索栏的设计要素
    如何把握搜索栏的设计要素
    2017-05-02
  • 分享提升网站设计用户体验的技巧
    分享提升网站设计用户体验的技巧
    2017-04-25
  • 网页设计赢在细节
    网页设计赢在细节
    2017-04-10
  • 网站设计如何选择配图
    网站设计如何选择配图
    2017-04-05
互动签约-阳光教育集团官网 互动签约-阳光教育集团官网
2018.01.13
互动签约-阳光教育集团官网
互动签约-厦门立达信照明有限公司 互动签约-厦门立达信照明有限公司
2017.08.02
互动签约-厦门立达信照明有限公司
互动签约-厦门吉比特股权投资有限公司 互动签约-厦门吉比特股权投资有限公司
2017.07.25
互动签约-厦门吉比特股权投资有限公司
互动签约-厦门乐麦网络技术股份有限公司 互动签约-厦门乐麦网络技术股份有限公司
2017.06.12
互动签约-厦门乐麦网络技术股份有限公司
互动签约-福建圣莉雅环保壁纸有限公司 互动签约-福建圣莉雅环保壁纸有限公司
2016.12.12
互动签约-福建圣莉雅环保壁纸有限公司
互动签约-金圆集团旗下金融管理学院微信平台项目 互动签约-金圆集团旗下金融管理学院微信平台项目
2016.11.22
互动签约-金圆集团旗下金融管理学院微信平台项目
互动签约-厦门宏发电声股份有限公司 互动签约-厦门宏发电声股份有限公司
2016.10.17
互动签约-厦门宏发电声股份有限公司
 互动签约-豪客来旗下品牌豪爷工坊  互动签约-豪客来旗下品牌豪爷工坊
2016.08.18
互动签约-豪客来旗下品牌豪爷工坊
互动签约-北京触控未来科技有限公司 互动签约-北京触控未来科技有限公司
2016.08.08
互动签约-北京触控未来科技有限公司
互动签约-厦门盛迅信息技术股份有限公司 互动签约-厦门盛迅信息技术股份有限公司
2016.08.02
互动签约-厦门盛迅信息技术股份有限公司
互动签约-新华都地产旗下白塘湾国际旅游度假城 互动签约-新华都地产旗下白塘湾国际旅游度假城
2016.07.07
互动签约-新华都地产旗下白塘湾国际旅游度假城
互动签约-建发集团旗下全资企业建发高科 互动签约-建发集团旗下全资企业建发高科
2016.07.06
互动签约-建发集团旗下全资企业建发高科
互动签约-上市公司火炬电子 互动签约-上市公司火炬电子
2016.07.05
互动签约-上市公司火炬电子
互动签约-上市公司厦门嘉戎技术股份有限公司 互动签约-上市公司厦门嘉戎技术股份有限公司
2016.07.03
互动签约-上市公司厦门嘉戎技术股份有限公司
互动签约-东方高尔夫集团移动端订场项目 互动签约-东方高尔夫集团移动端订场项目
2016.07.01
互动签约-东方高尔夫集团移动端订场项目
互动签约-泰禾集团旗下院子项目官网 互动签约-泰禾集团旗下院子项目官网
2016.06.18
互动签约-泰禾集团旗下院子项目官网
互动签约-转转乐品牌官网 互动签约-转转乐品牌官网
2016.06.02
互动签约-转转乐品牌官网
互动签约-雀氏旗下品牌班乐士品牌官网 互动签约-雀氏旗下品牌班乐士品牌官网
2016.05.20
互动签约-雀氏旗下品牌班乐士品牌官网

联系 · HUUDON

0592-5218501
业务QQ:2262383753 售后/投诉QQ:707926262
厦门市观音山国际商务营运中心6号楼6楼

Copyright ©2008-2017 HUUDON All Rights Reserved
闽ICP备13016694闽公网安备 35020302000947号

0592-5218501

业务QQ:2262383753 售后/投诉QQ:707926262

厦门市观音山国际商务营运中心6号楼6楼

Copyright©2008-2017 HUUDON All Rights Reserved

  • 业务咨询
  • 技术支持
  • 联系电话

    0592-5218501
  • 投诉留言