【转】iOS和Android规范解析——搜索

本文转载地址 http://www.jianshu.com/p/7cf3cd110790
搜索这个功能,在绝大多数应用里都会用到。它的场景也相对单一:用户通过搜索功能,快速找到自己需要的信息/物品等。

照例我们先说Android的规范。

Google Material Design Guideline

MD(Material Design的简称,下同)在关于Search这一章,开篇是一句加粗加字号的句子:“搜索使用户可以迅速得定位应用里的内容”(Search allows users to locate app content quickly)。这句话也是很浅显,不明白谷歌这么强调的原因。。。However ,这跟上面的介绍也是如出一辙。

MD建议,一般的搜索操作应该至少包含以下三个要素:

打开搜索输入框;
输入和提交搜索词的;
展示搜索结果。

下面的元素可以帮助提高搜索的体验:

语音搜索;
搜索历史;
搜索词自动补充,且补充的结果是你的应用的数据库中的已有词汇(这样可以更好地确保结果是有效的,笔者注)。

MD提供了两种搜索的样式:固定式搜索入口和可展开式搜索入口。下图展现的是固定搜索入口:

固定式搜索入口

固定式搜索入口一般用于搜索是你应用的重要功能的情况。当开始输入关键词,最好有关键词自动补充,以及清空按钮,如下图

可展开式入口,其实和固定式入口差不多,区别仅仅是入口形式上的不同:

关于可展开式,还有一点要补充一下(虽然MD没有提),就是由于一般这种形式的入口,都是放大镜这种类型的图标,笔者建议点击后最好有个动效,展示从放大镜展开成为输入框的过程。这样会使你的应用设计感更高,用起来更流畅。这是我的一点经验,供大家参考。

iOS Human Interface Guideline

在苹果的规范中,搜索的部分是以控件“搜索栏”(Search Bar)的形式介绍的,这与MD在逻辑上不同。MD是把搜索当成一个模式(Pattern)来介绍的,所以从入口到输入都有介绍。而iOS中,关于搜索的介绍只有入口:搜索栏。所以在介绍的逻辑上会有不同。

搜索栏也有两种:视觉显著型和视觉隐蔽型。下面展示了两种搜索栏:

左视觉显著型 右视觉隐蔽型

其实两者的差别很小,仅限于它们的背景色:左边的用的是纯色(灰色);右边的用的是毛玻璃效果。其实两种的差别,也就是在视觉上是否引起人的注意,所以当搜索的优先级不同时,可以分情况使用。

苹果建议搜索框可以包含下面的三个元素:

左:默认提示词;中:清空按钮;右:取消按钮

另外,苹果还给出了一些搜索栏在设计上的建议:

  1. 如果有必要,可在搜索栏中提供一些提示和上下文(来帮助用户)。比如输入框中的默认提示词,文案可以为:“搜索衣服 鞋 首饰”或者单纯的“搜索”两个字。在输入框的上面,也可以提供简明的一句话提示,如下图所示:
输入框上方的一句话提示
  1. 考虑在搜索栏下方提供快速入口和其他内容,以帮助用户更快找到结果。例如iOS自带应用Safari,当你点击搜索栏的输入框时,应用就会展示你的书签,这样通过点击书签的内容,有时候能免去输入的麻烦。
  1. 在搜索栏的下面,可加入“分段选择控件”,以帮助用户缩小搜索的范围,如下图:
分段选择控件

分段选择控件里,每一段所定义的范围是否清晰且有用很重要。这里苹果提示我们,最佳的手段,不是使用分段选择控件,而是优化搜索结果的列表,这样用户也不需要为了选择分段而再多点击一下。

补充一句,其实对搜索列表的筛选操作,国内很多电商APP已经做的非常出色了。国内APP的设计,在有些方面其实已经是国际一流。作为一名中国设计师,我也是很自豪的(傲娇脸)。

以上对比了MD规范和iOS规范中,对于“搜索”的介绍。讨论always让我们的认识更深刻。欢迎留言讨论。

企业级独立部署应用:知行办公http://zx.naton.cn
【总监】十二春秋之,3483099@qq.com
【Master】zelo,616701261@qq.com
【运营】运维艄公,897221533@qq.com
【产品设计】流浪猫,364994559@qq.com
【体验设计】兜兜,2435632247@qq.com
【iOS】淘码小工,492395860@qq.com;iMcG33K,imcg33k@gmail.com
【Android】人猿居士,1059604515@qq.com;思路的顿悟,1217022114@qq.com
【java】首席工程师MR_W,feixue300@qq.com
【测试】土镜问道,847071279@qq.com
【数据】喜乐多,42151960@qq.com
【安全】保密,你懂的。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,498评论 25 707
  • 各位亲爱的、新设计青年的、读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非...
    沐风与体验设计阅读 1,224评论 6 33
  • 一月。零下17度的夜里,供暖部门竟然罢工了。可能温度越低,头脑越清醒,想了很多。有亲人从远方过来,我便又成为了京城...
    木棉静听阅读 182评论 0 12
  • 当我工作之余,回想自己走过的这些年,不知道我能创造出什么样的生活,什么样的事业。仿佛自己是一部工作的机器,每天都在...
    叁哥说故事阅读 168评论 0 0
  • 孔子曰:五十知天命。赶到了知天命之年,时间都去哪了?怪不得眼前总是浮眼楞头楞青的小伙姑娘了,客气称我老师长老师短,...
    亁乾阅读 398评论 0 1