iOS和Android规范解析——搜索

各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。


各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。

iOS和Android规范解析——搜索

搜索这个功能,在绝大多数应用里都会用到。它的场景也相对单一:用户通过搜索功能,快速找到自己需要的信息/物品等。

照例我们先说Android的规范。

Google Material Design Guideline

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

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

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

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

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

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

iOS和Android规范解析——搜索 固定式搜索入口

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

iOS和Android规范解析——搜索

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

iOS和Android规范解析——搜索

可展开式搜索

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

iOS Human Interface Guideline

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

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

iOS和Android规范解析——搜索

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

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

iOS和Android规范解析——搜索

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

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

1. 如果有必要,可在搜索栏中提供一些提示和上下文(来帮助用户)。

比如输入框中的默认提示词,文案可以为:“搜索衣服 鞋 首饰”或者单纯的“搜索”两个字。在输入框的上面,也可以提供简明的一句话提示,如下图所示:

iOS和Android规范解析——搜索

输入框上方的一句话提示

2. 考虑在搜索栏下方提供快速入口和其他内容,以帮助用户更快找到结果。例如iOS自带应用Safari,当你点击搜索栏的输入框时,应用就会展示你的书签,这样通过点击书签的内容,有时候能免去输入的麻烦。

iOS和Android规范解析——搜索

另一个例子是iOS自带的股票应用,搜索栏下面的列表会根据用户输入的内容不断刷新,方便用户的选择。

3. 在搜索栏的下面,可加入“分段选择控件”,以帮助用户缩小搜索的范围,如下图:

iOS和Android规范解析——搜索 分段选择控件

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

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

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

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21738/

(0)
CatherineCatherine
上一篇 2017-04-29 04:45
下一篇 2017-04-29 06:32

相关推荐

  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21
  • Axure神器:用母版打造模块化设计【UXRen原创】

    作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师) Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大…

    2017-08-04
  • 2018年交互设计趋势

    想必你还在对昨天HJUX视觉伙伴们给出的视觉设计趋势啧啧称赞,那么赞别停!今天团队的交互伙伴们将带来2018年交互设计趋势。选择在农历新年来临之际奉上这道历时一个月烹制的“交互趋势年夜饭”,只愿给力求打造极致用户体验的你以启发和帮助。干货阅读时间预计5分钟设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官...

    2018-02-02
  • 为长文进行排版设计,有哪些讲究?

    长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。

    2017-05-14
  • 【曝光台】用户体验不佳 “海带宝”屡遭投诉

    导读凭借业内领先的电子物流平台和遍布全球的优质物流资源,海带宝为全球跨境电商、代购平台提供一站式综合进口物流解决方案。然而,据“电子商务消费纠纷调解平台”(微信ID:DSWQ315)接到的用户投诉维权案例统计,“海带宝”存在提现等待队伍长、转运速度慢、用户体验不佳等问题。电子商务研究中心(100EC.CN)了解到,深圳海带宝网络科技股份有限公司成立于2013年8月,是一家基于互联网智能化物流解决方案的高新技术企业,国内现有员工300余名...

    2018-04-26
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 我总结的一套表单设计指南

    作者:jakd007(UXRen会员)   表单在移动端设计中最常见的界面,每个手机系统及应用对表单都有不同的设计,本文目标是总结出一套表单设计指南,以提高日后工作效率。 表单在移动端设计中最常见的界面,每个手机系…

    交互专题 2017-08-07
  • 交互设计 | 2个概念,梳理成熟的交互设计作品思路

    直接上干货,给大家介绍作品设计中至关重要的两个概念——storytelling 和 process。这两词不是我拍脑袋想的,是我和很多hr(包括一些美国的agency,知名大公司如amazon)聊天的时候直接问的。不仅如此,我…

    2017-08-01
  • 给小白看的交互设计启蒙帖(一)

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-03-14