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

相关推荐

  • 体验方法论:以目标为导向的设计

    产品名称:金融圈APP 设计团队:金融圈UED设计中心 项目介绍:本项目为首页改版方案,与产品经理,交互,运营,视觉四方共同讨论得出的一期改版方向 设计目的:以体验设计方法论体系结合商业目标对APP首屏进行改版 …

    2016-08-31
  • 设计师们,停止不必要的UI动效设计吧!

    这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。我们将在下文中,简单探讨如何改善下面的这个交互。

    2017-05-14
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • 未来的汽车用户界面将会让人惊叹

    如果有一天让你来设计汽车?未来的汽车会是什么样的呢?

    2017-05-12
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 干货!O2O用户体验设计怎么做?

    导读: 阿里巴巴283亿入股苏宁云商,强强联手要打造O2O领域标杆企业,而O2O又关注用户体验,那设计应该怎么做?应基于其基本概念,从垂直落地原则开始,严格把控信息,差异,选择,整合,便利,闭环六个因素进行用…

    2015-11-19
  • 色彩和体验的平衡:为色盲用户设计网站

    如何为色盲用户设计网站?本文作者与大家分享了5点小技巧。WCAG 2.0级AA要求正常文本的对比度为4.5:1,大文本的对比度为3:1(14点和大于或大于18点或更大)。——WebAim颜色对比检查器

    2017-08-02
  • 【用户体验】和路通X1真实详细评测——智能车时代的钥匙

    点击蓝字关注这个神奇的公众号~中国移动和路通智能后视镜的项目已经开展了一段时间,这期间收到了多位客户的体验反馈,今天,小编整理了一些产品体验测评分享给大家,从使用者的角度,让大家对中移动智能后视镜有更加深刻的了解!用户体验和路通X1真实详细评测——智能车时代的钥匙很荣幸从天津蜂享信息技术有限公司,购买了一台和路通X1智能后视镜,并进行装车体验。感谢中国移动对智能出行的重视与执着。目前智能后视镜的市场方兴未艾,市场上智能后视镜产品如雨后春...

    2018-02-05
  • 别整标题党! 这是一份阿里的设计师分享的编写交互设计师的启迪思路的文章

    鸿影:一份设计文档的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe…

    交互设计 2015-08-26
  • 设计规范 | 详解组件控件结构体系:引导类

    本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~

    2017-08-04