777qg钱柜游戏平台官网网址欢迎你! 思缘旧版

详细解析UI设计中搜索栏设计的技巧

文章来源于 优设,感谢作者 晓吾设计 给我们带来经精彩的文章!
思缘教程/前端设计/前端设计2019-03-31
在一个内容型的APP中,搜索功能可以说是标配。它是巨大的流量入口,同时又承载着产品运营的能力。碰巧最近在做JOOX搜索页面的优化,借机整理了一下关于搜索设计的几个要点。

在一个内容型的APP中,搜索功能可以说是标配。它是巨大的流量入口,同时又承载着产品运营的能力。碰巧最近在做JOOX搜索页面的优化,借机整理了一下关于搜索设计的几个要点。

根据用户的实际使用行为,我们可以把搜索这个操作按照用户行为路径节点分为发现 – 进入 – 使用 – 得到4个部分。

发现搜索入口

进入搜索界面

使用搜索功能

得到搜索结果

详细解析UI设计中搜索栏设计的技巧,777qg钱柜游戏平台官网网址,777qg钱柜游戏平台官网网址

发现入口

搜索框的入口一般有几种:一级tab、搜索框、搜索icon、隐藏式搜索框。不论何种样式,遵循的最基本的原则都是两个点:快速发现和容易识别。

详细解析UI设计中搜索栏设计的技巧,777qg钱柜游戏平台官网网址,777qg钱柜游戏平台官网网址

1. 快速发现

用户的搜索需求会出现在两个时间点,一是搜索目的明确,打开App就需要使用,另一个时间点是在使用App的过程中产生搜索需求,这个需求我们很难确定用户在执行什么操作,所以需要根据页面及产品类型进行设计。

可以确定的是,两种需求时刻都要求我们的产品可以快速让用户找到搜索功能并使用,所以搜索功能的位置非常重要。当前绝大部分App的搜索功能都放置在页面顶部,以搜索框或者「放大镜」的样式存在,用户已经养成了习惯,当需要使用搜索功能时首先会寻找页面的顶部位置。

大多数内容型的产品会常驻搜索框,便于用户在浏览内容的过程中随时查找内容。也有产品设计收成为一个 icon 后固定在某一位置,为其他内容的展示节省出空间,例如得到APP就是这样做的。

百度一下,搜索功能的视图会发生对应的变化。

MOO音乐发现页的搜索功能在初始位置时是置顶的,但是当用户上滑页面时,会发生顶部搜索框隐藏被替换为分类,下滑页面恢复搜索框的交互效果。

因为该页面主要以推荐为主,当用户上滑页面时,搜索功能的需求被弱化,隐藏可以增加页面显示的内容,而为了可以让用户快速地进入搜索功能,只要执行下滑页面,就会恢复搜索功能。

详细解析UI设计中搜索栏设计的技巧,777qg钱柜游戏平台官网网址,777qg钱柜游戏平台官网网址

你可能感兴趣的教程
版权所有777qg钱柜游戏平台官网网址公安备案:工信部备案:
aaa