美文网首页UI设计头条
搜索怎样设计采用起来顺手?

搜索怎样设计采用起来顺手?

作者: 王旋子同学 | 来源:发表于2018-07-16 23:21 被阅读440次

    A 要不要设置搜索?

    首先,要明确为什么应用要有搜索?是因为产品提了需求就要加上吗?是便于用户寻找吗?其实关注电商的人都知道,电商的大部分流量及转化都是来自搜索。这也很容易理解,就是需求的不同。如果在沙漠里有一个口渴的人,你给他玲琅满目的物品倒不如直接给一瓶水能满足他的需求。所以如果应用当中要添加搜索,那必定是希望搜索能够快速相应用户需求,从而带来转化。

    B 搜索的分类

    接下来,我们看看目前搜索有哪些分类,大纲如下(为啥直接大纲?因为每篇文章都有大纲,牛奶已经打扰的我写不了文字了,所以直接上图)

    搜索分类

    【入口位置】

    1. 独立的一级tab搜索

    这种样式十分强化搜索,适用于应用主要功能基于搜索操作,常见的有社交、电商。

    2. 顶部搜索框

    这种样式优先级比第一种低,但是因展示在顶部栏,用户在使用的时候可以随时使用。

    3. 顶部搜索icon

    相对于2更弱化,用户可点击icon随时进行搜索操作

    4. 下滑搜索

    这是一种交互样式设计,当用户在下滑页面的时候会显示搜索框。这种样式适用与页面长度不可控(多为页面较长),也可以随时进行搜索。

    5. 页面搜索框

    功能重要度最低,用户需在页面首屏位置才可进行搜索,适用于较短的页面。

    搜索位置

    【形式】

    1. 文字搜索

    (图片来自网络)

    2. 语音搜索

    (图片来自网络)

    3. 图像搜索

    (图片来自网络)

    4. VR/AR搜索

    (躲避牛奶截的图)

    【功能】

    1. 单一搜索功能

    最常见的样式

    2. 搜索推荐

    (图片来自网络)

    3. 搜索前分类

    (图片来自网络)

    4. 搜索后分类

    先搜索后分类

    5. 搜索后筛选

    搜索后筛选

    C 搜索结果

    搜索结果一般有三种样式,未找到匹配结果、文字结果和图文结果。

    D 走心小设计

    最后,来看看在做搜索的时候可以有哪些走心的小设计。

    1. 搜索入口便于发现,使用结果路径短

    2. 搜索框中有提示文字,让用户在不知道搜索什么的时候也可以搜索到推荐的结果(也是一种营销手段)

    3. 搜索框输入文字时有文本删除按钮

    4. 输入时进行搜索词匹配

    5. 历史输入结果,有单个删除按钮和批量删除按钮

    6. 精准推荐适合用户的关键词

    今天先写到这里,明天补充图片说明。

    相关文章

      网友评论

        本文标题:搜索怎样设计采用起来顺手?

        本文链接:https://www.haomeiwen.com/subject/diripftx.html