《移动应用UI设计模式》之搜索、分类和过滤

一、搜索

移动应用常见搜索模式

1.显性搜索

▪  “显性搜索要求用户执行明显的搜索操作并浏览搜索结果。”

▪  这是应该是最初始也是最基本的搜索模式,能够满足用户搜索的基本功能,但显然不够智能。

▪  “建议为显性搜索搭配自动补全模式。” 

思考:

优点--开发成本低。

缺点--相对来说,不够智能、体贴。

Artsy

2.自动补全搜索

▪  “用户输入内容时程序会立刻显示出一系列可能的输入结果,只要通过点击来选择某一项,程序就会执行搜索操作。另外一种情况是,用户持续输入内容,然后点击搜索按钮。” 

▪  或许是“网络应用和移动应用使用最广泛的搜索模式”。

▪  最好使用活动指示器(例如:菊花转)作为反馈表明当前搜索活动正在进行,因为有时搜索结果的显示会延迟。

思考:

优点--减少用户输入成本;提高搜索效率;

缺点--网络状况不好的情况下可能无法达到理想状态,因此需要提供一定的反馈给用户(如:活动指示器)。

自动补全的内容--可以是与已输入内容相关的用户曾经搜索过的内容、相关的热门搜索内容、相关的系统推荐用户搜索的内容等,最好根据应用特性进行一定的优化。

自动补全内容的呈现位置--搜索框下拉列表中显示;直接在页面中显示。

Target&Etsy

3.动态搜索(动态过滤)

“用户输入搜索内容,程序将动态地过滤屏幕上的数据。”

思考:

适用于搜索有限的、已存储的数据,如联系人信息、聊天记录等,这时可以提供十分快速、流畅的搜索体验。“但它不太适合用来搜索海量数据”,因为数据量过大而难以快速执行搜索结果的响应。

印象笔记&QQ

4.范围搜索

在执行搜索前对搜索结果进行范围界定

根据数据集提供合理的搜索范围选项(最好限定在3~6个)

思考:

用户限定一个范围意味着提前剔除掉不必要的其他搜索范围,可以帮助用户在海量数据中更加快速的找到目标信息。但是,范围选项不宜过多,否则最好考虑“用搜索表单实现高级搜索功能”。

微博&QQ


5.保存搜索记录并显示最近搜索内容

“遵循基本的可用性原则:尊重用户的劳动成果”

“其他尊重用户劳动成果的做法包括基于地理位置的搜索或基于条形码的搜索。”

思考:

搜索记录最多保存多少条比较合适?

最近搜索记录的时间范围如何界定?

文本输入搜索之外的其他搜索方式包括:语音搜索、图片搜索、条形码搜索、二维码搜索等,这些搜索与传统的文本输入搜索进行搭配可以大大提高搜索效率。

eBay&Foursquare

6.搜索表单

“这种搜索模式的特征是,在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。”

思考:

适用于具有多种属性的目标信息,如:订房(时间、类型、价格……)、订票(时间、地点、价格……)。

搜索条件不宜设置过多、繁杂。

对于不同搜索条件匹配不同输入方式,如:对于时间一般使用时间选择器。

最好允许目标不明确的用户进行模糊搜索,如:允许搜索宾馆时只限定时间这一条件进行搜索


网易火车票&同程

7.搜索结果

展示方式:表单、缩略图、地图……

当搜索范围较广且该应用没有提供范围搜索或者用户在全部范围下进行搜索时,搜索结果的展示通常是分组表单。为了让用户的信息浏览更有效率,每组列表通常只显示部分结果,其余结果被隐藏起来且只在用户主动点击时显示。

搜索结果较多时通常使用“延迟加载”,即“在加载其他搜索结果的同时显示当前已找到的结果”。

不论是表单还是缩略图,搜索结果的展示都是尽可能地提供给用户简洁且有效的信息,目的都是帮助用户快速甄别信息、找到目标信息并且执行目标操作。

可以考虑在结果列表里提供给用户一些可能的、常用的操作以帮助用户迅速完成任务,简化操作流程。

Starbucks&Tumblr
HBO NOW&NYT  Cooking

总结

为了提供更好的搜索效果,上述搜索模式最好在考虑到应用类型、用户需求、使用场景的前提下选择适合的多个搭配使用。

考虑到移动设备的特性,搜索内容的录入除了文本输入外,应尽可能提供其他简化输入的方式(如:语音输入、图片搜索……),用选择代替输入(如:选择自动补全的内容、历史内容、推荐的内容)。

考虑到中文拼音和英文字母在输入时外观的相似性,当用户输入字母时,应当将该内容同时作为拼音考虑(如:输入“an”时,搜索结果最好也包括读音为“an”的汉字“安”、“暗”等)。因为用户很有可能没有意识到自己输入法处在英文还是中文界面,而这样做则可以让用户不需要再重新输入汉字便有可能找到想要的信息)

二、分类和过滤

在这个信息爆炸的时代,尽管我们有了范围搜索帮助我们在搜索前剔除了部分内容,但这并不够。我们还需要其他方式来帮助我们快速筛选想要的信息,因此我们需要--分类和过滤。

分类和过滤共同帮助用户对信息进行筛选,从而找到目标信息,这一功能的执行主要有以下几种方式:

▪  屏内分类/过滤

在屏幕底部或顶部直接显示分类/过滤的选项,执行的功能与结果在同一页面显示。

适用于简单的分类/过滤。

Krush Mobile&Product Hunt

▪  分类排序选择器/过滤容器/过滤对话框

当需要执行的分类/过滤条件较为复杂时,可以将其整合并隐藏起来,在需要时调用。

网易火车票&同程

▪  分类表单/过滤表单

对于目标明确的用户或者高级用户,当他们需要执行一些高级、复杂的信息提炼时,可以通过使用表单的形式将条件整合起来,来帮助他们快速找到目标信息。但需要尽量选择简化的方式,否则很容易让用户失去耐心。

Airbnb
Foursquare&OpenTable

注意事项:

无论使用何种方式,都要确保“以明确的方式告知用户当前采用(生效)的分类选项。”

不要在过滤器的设计上花费太多心思,简单的屏内过滤器或过滤容器通常就够用了。

“根据操作系统的设计惯例选择控制搜索结果分类的方法,或使用不受操作系统影响的界面方案。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容