移动网站搜索框怎么设计？

移动互联网时代，企业怎么少的了移动端网站呢?设计移动端网站，就包括了移动端搜索页。那么移动端搜索页怎么设计，我来告诉你!不同类型的网站，人们对搜索的需求也不一样，这里将分为三类为大家详细介绍。

重庆网站设计

写在搜索前-搜索怎么放

1、搜索图标

在导航栏一侧或其他位置放置，根据用户场景和重要级需求决定。一般搜索图标放在右侧，当右侧有两个及以上按钮时，考虑平铺或折叠。

2、搜索栏

以搜索栏的形式直接放在导航栏或放在导航栏下方等其他位置，此时搜索栏可结合语音、拍照、删除(在输入后显示)等功能按钮。

3、搜索作为标签栏中的某一个功能：根据内容重要性决定排在第几个标签中。

4、搜索以单独页面或主页 P0 功能展现：直接作为主页面或主页以较大篇幅显示搜索栏，内容及形式根据用户场景定义。

一、内容类网站

创新互联认为阅读、漫画、视频、厨房类的app都可以归为内容类。用户在内容类的产品中搜索时，很容易对关联的其他内容感兴趣，当产品做出适当的引导时，用户可能就会去关注，并未其带去流量。

比如【得到】搜索页显示“搜索记录”与“热门搜索”。搜索记录最多展示两行，以便节省页面空间，也可以展开显示所有搜索记录。搜索记录可以直接逐条删除，用户操作起来相对便捷。“热门搜索”的行数固定，这样即便是弹出输入框时也不会遮挡内容。且为了提高某些条目的UV，对其做图标凸显。同时搜索框内，灰度展示推荐搜索内容，一方面替代搜索说明文字，一方面引导用户搜索推荐内容。

【站酷】的搜索页。除了有“最近搜索“和”热门搜索“之外，还增加了分类搜索功能。加上分类功能之后，产品给用户做了进一步筛选，就更加缩短了用户的搜索路径。不过搜索记录不能删除，每次展示一行，新的记录会挤掉旧的记录。

【豆瓣阅读】的搜索页。热门搜索以图文的形式展示，书籍封面、名称以及作者这些读者比较关注的内容，甚至还有评分。这样就大大增加了推荐的说服力，为成功推荐推波助澜。这里的搜索记录删除，一键删除所有，且没有确认提示，哈哈，就是这么猝不及防。

看到【咚漫】的搜索页，还是挺特别的。只有“热门搜索”与“分类”，没有搜索记录。点击分类中的类别直接跳转到相应类别页面。看来它的搜索页是以推广、引导为主了。

【好好住】的搜索页，除了“搜索记录”、“大家都在搜“之外，直接多图推广。这么直接、有视觉冲击的推广方式，效果应该很不错。

二、电商类网站

电商类的，搜索记录还是挺重要的，毕竟很多时候用户是有目的的购物的，且会反复搜索对比。

【淘宝】的搜索页，有分类、历史搜索、搜索发现。且支持图片、语音搜索，满足用户的多种需求。历史搜索显示有限数量，也是一键删除，不过有提示。搜索发现是可以隐藏，让用户自主选择是否需要接收推荐，也是很人性了。

【京东】的搜索页基本上和淘宝的类似，支持语音、图片搜索，可以隐藏推荐搜索，避免干扰用户。它的亮点是页面底部显示常购清单。一方面方便用户直接点击购买;另一方面提醒用户，避免必备品断档。

三、工具类网站

工具类的产品一般是为用户解决问题为主，相对来说运营类的推送就会少一些。因此搜索页面的结构会相对简单。

【花瓣】的搜索页面，只有简单的搜索历史，没有任何的推广，也是很刚了。

【夸克】浏览器的搜索页，也是只有搜索结果页。相对简单粗暴。

企业在设计移动端搜索框的时候，需根据具体业务需求，才能设计出符合用户体验的设计。需要注意，由于内容类、电商类网站对运营推广有目的，所以在搜索框中会增加图片形式、图标凸显等以增加推荐的吸引力。而工具类APP网站是为了帮助用户完成任务，所以需要将搜索框设计的尽可能简单，以减少对用户的干扰。

当前名称：移动网站搜索框怎么设计？
文章地址：https://www.cdcxhl.com/news34/224034.html

成都网站建设公司_创新互联，为您提供网站改版、动态网站、用户体验、静态网站、网站设计公司、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联