交互学堂
专注分享专业知识

交互设计之搜索框设计

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 Younger Now Miley Cyrus – Younger Now

– 期待你的关注和收藏 –

耳朵们要好好收藏

原文:Behance作者OTT UI  |  编辑:程琳琳


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

常见的搜索框细分场景


一、隐藏式搜索框


由于占据空间较小,出现的位置没有严格限制;尽管icon样式的入口能够有效地出发搜索功能,但是形式上的显著程度不高,因此放置位置较为灵活,可以出现在页面角落或者收起在更多入口当中,避免与其它同等权重或权重需求争夺显著性。


二、普通搜索框


一来,功能没有明确的/主要的销售倾向,完全注重用户的自身意愿,只是作为功能性的存在,方便用户查找相关功能/内容。没有强烈的营销味道。再来,搜索使用者通常由较为明确的目标。


三、有提示搜索框


电商平台使用较为常见。原因有
(1)用户有明确搜索的目标时,自动会忽略提示内容
(2)用户没有明确目标时,会根据推荐进行搜索,引导用户进行消费 
(3)市场运营可以通过该位置的人工增改提示语,获得盈利。

四、含图片搜索框


通过扫描/上传图片进行识别,减少用户输入的动作,减少操作繁琐程度与输入的不确定性。

五、带语音搜索框

优势:
(1)便捷性:不需要双手操作,直接说话即可完成输入。
(2)输入跨越性:语言交互可以跨越不同App,跨App内部的层次,直接提出需求。 
(3)输入的多样性:直接通过对话完成输入,没有图形界面的限制,输入会更加无序。


劣势:
(1)输出信息量更少:语言交互输出在很多场景下无法展现这些信息,输出的信息量更少。
(2)私密性差:语言对话交互需要一定音量输说出需求,这样会将需求暴露在大庭广众之下。

六、精准分类搜索

需要根据地理位置的不同,推荐处于该位置相关的服务类产品需要。往往使用在区域服务型app上。


样式

(1)使用约定俗成的样式(🔍+线框),不要增加额外的“搜索”按钮,巧妙利用手机提供的键盘的自带“搜索”按钮。
(2)搜索框的位置都是位于产品顶端,增加曝光率,符合用户自上而下的浏览习惯。


使用规则


体验优化


关注“设计师的那些事”——回复“挥霍”查看文章“所有你乐于挥霍的时间都不能算浪费

商务合作

点进来都是赏饭的


打赏项目包括


政府/机关单位微信公众号建设

APP/Web界面设计


表白求婚 or 制造惊喜

独立设计师品牌推广

设计师 | 摄影师 | 画家作品推广


其他有意思的项目


基本要求


有节操 有信用


继续商务洽谈

|

ivry_cheng@126.com


打赏路径


支付宝:happylife20082009@live.cn


THANKS

            

【免费福利领取】

  公众号

  回复“视觉系列”领取《30天学会绘画》、《配色设计原理》、《没创意,还敢玩涂鸦》、《简笔画技法与运用》、《建筑师与设计师视觉笔记》、《设计中的设计》、《设计的觉醒》、《设计几何学》

回复”交互系列“领取《瞬间之美》、《ABOUT FACE 3交互设计精髓》、《用户体验的要素》、《Web信息架构设计大型网站》、《简约至上》、《锦绣蓝图:怎样规划令人流连忘返的网站》、《设计心理学》、《点石成金》、《认知与设计:理解UI设计准则》

回复”扫盲系列“领取《异类》、《学会提问》、《新定位》、《引爆点》、《Android-Design-4.0设计规范》、《尽管去做——无压工作的艺术》

回复”思维系列“领取《你的灯亮着吗》、《学会提问》、《IDEO 设计改变一切》

关键词回复

回复“网站”查看“推荐|找图网站” 

咨询微信:v-vavrillavigne       微博@设计师的那些破事儿

公众号:po_shier              

转载声明:如转载本文,请附带以下二维码并注明出处    

原创文章投稿

 

设计师的那些事

投稿邮箱:ivry_cheng@126.com

喜欢请点赞  分享朋友圈也是一种赞赏


未经允许不得转载:IAMUE » 交互设计之搜索框设计