APP设计模式之——搜索功能

湖蓝色边框是最简洁/必要的搜索流程节点,考虑到各种各样的场景,整个搜索流程就变得“冗长”了,但是用户体验却上去了。下面我们就逐一介绍搜索流程中的各个动作和关键节点,以及典型实例。

搜索功能入口即用户进入搜索流程的起点,这个起点通常都以静态形式展现在页面上,比如页面左上角或右上角的搜索图标,或页面上的搜索文本框(以圆角矩形为主)。如格志和Reddit:

用户点击这个图标或者文本框后,才算触发了搜索流程的第一步:内容录入。

相对来说,搜索图标适合低频搜索应用,而搜索文本栏更适合高频搜索应用。查询类应用/场景显然非常适合搜索文本框,而且用户使用频度越高,搜索文本框自身面积就越大,所占页面位置也更加明显,比如网易云音乐和金山词霸:

个人来讲,不知为何,当我看到搜索文本框的时候,就有一种马上就要看到期待的内容的感觉,而单纯的搜索图标是没办法给这种感觉的。毕竟搜索图标和搜索结果中间,总会隔着一个搜索文本框。

可能有人会说了,输入搜索条件还有什么好说的?直接敲键盘不就完事儿了吗?

对于绝大部分用户来说,这确实没有问题,但是……俗话说得好,魔鬼都在细节里。越是这种不起眼的地方,我们越能做出一些能让小众用户觉得很好用/好玩的设计,在体现APP自身特色的同时,还能帮应用留住那些“长尾用户”。

一键删除已输入内容:通常是在搜索框右侧放置灰底白色“×”图标,也有些应用出于用户输入出错率高的情况,将这个元素放置到用户更容易“够得到”的位置,这个设计在大屏手机时代还是非常有必要的。

下面的良仓和金山词霸分别代表了这两种类型,且后者采用了“清空”文字’代替“×”图标,居于屏幕中央略靠下的位置,可以说非常醒目了:

触发搜索动作执行的按钮:PC端产品很多还保留着有实际作用的“搜索”按钮,如百度首页的“百度一下”按钮:

谷歌的“Google搜索”:

以及相当多应用的搜索框内置的或者右侧的搜索图标,PC端的“搜索”触发是通过“Enter”回车键或鼠标单击完成,同理APP上的搜索触发,要么是通过点击页面上的“搜索”图标,要么是通过小键盘上的确认键来完成,而小键盘确认键往往有多种表现形式,如“搜索”、“确定”、“换行”等。

小键盘:小键盘需要注意的就是根据输入框和表单的内容,来设置默认的小键盘样式,比如中文键盘、英文键盘、数字键盘等,为用户带来更顺畅的操作体验。

小键盘增强设计:增强设计指的是在小键盘上方,再增加一行命令项,在视觉设计上表现为做到和小键盘融为一体,在功能上表现为根据用户使用场景,尤其是高频操作,来设计对应的功能。

比如UC浏览器的小键盘增强设计,除了给出常见的网址前缀后缀,还在中间放置了一个光标精准定位滚轴,极具匠心:

还有一些带有应用自身特色的小键盘增强设计,如金山词霸和Quora。

词霸有三个按钮:“返回”(退出搜索界面)、“清空”(一键清除已输入内容)、“翻译”(触发搜索动作),我相信只要用户几次词霸,便会对这个界面赞赏有加,高频操作按钮居中布局,非常方便用户单手操作,且搜索框显得非常简洁美观:

而Quora的增强设计更是独具匠心,将问答社区高频操作“搜索-提问-阅读-回答-”中的提问入口直接放到了小键盘上方,当用户在动态搜索结果中找不到自己想要的内容后,可以直接将想找的回答变为问题,惊不惊喜?意不意外?

再放两个特殊增强设计,Termius(移动端主机管理工具)和Navicat(移动端数据库管理工具)。

辅助输入,指的是在用户输入前,APP提供给用户一些内容或者选项,以便用户更快更省力地输入搜索条件。如UC浏览器和知乎就提供了历史搜索记录,来辅助:

UC是给出了历史搜索记录,而知乎则更进一步,对历史搜索记录进行了分类,使用“内容”和“用户”两个标签让用户进行切换,而且还增加了“最近浏览”入口,方便用户回溯自己近期的浏览列表,更胜一筹。

“尊重用户的劳动”是成功手机界面设计的最基本原则。“保存的搜索”和“最近搜索”使得搜索条件容易从以前的搜索历史中选择,而不用再次输入相同的关键词。

选项辅助输入,是指在用户输入搜索条件之前,提供一些基本的搜索范围(如内容分类等),让用户更快地获得期望的结果。参见全民K歌和Pinterest:

这种搜索方式也可以称为“前置搜索类别”。这种搜索方式适用于分类较简单的内容,便于精确地定位搜索内容。

与“前置搜索类别”相对应的,是“后置搜索类别”,我们放到后面去讲。

此外还有包括基于地理位置搜索的辅助输入方式,这在基于LBS的APP中非常常见,如猫眼电影和高德地图:

最佳实践:保存搜索需要额外的步骤去命名搜索参考值,尊重用户的劳动成果,让用户减少操作。

在移动端,最广泛的搜索模式是:用户输入搜索内容后,APP自动执行搜索动作,同时将搜索结果以列表的形式展示在搜索文本框下方,用户继续输入搜索内容,搜索结果也会相应自动变化,当全部条件输入完毕时,点击搜索按钮,显示最终结果。

这种搜索模式,我称之为动态搜索,这也是目前最符合“懒设计”理念的搜索方式。同时,还有一种较为“古老”的搜索模式,即静态搜索,即用户输入完全部的搜索条件,再一键执行搜索命令。

动态搜索,指输入搜索条件时的实时搜索+实时展示。这种设计也被称为动态过滤,即输入文本数据,对应搜索结果将会动态过滤显示在屏幕上。同时,这也是一种特殊形式的辅助输入(见4.1.3)。我们以豆瓣为例:

在输入“梦”和“梦的”两个搜索条件时,结果展现的完全不一样,这是因为动态搜索时,是根据已输入内容的词频热度进行搜索和排序的。这又涉及到搜索算法,对于这部分内容,我们放到后面去详细介绍。

目前使用静态搜索设计的APP已经越来越少,因此不做赘述。

通常情况下,无论是动态搜索还是静态搜索,在搜索结果呈现之前,都会有进度条或者加载交互动作的指示器,用以告知用户:“正在搜索中,请耐心等待”。当搜索动作执行完毕后,再展示最终的搜索结果:

到了3G/4G,甚至未来几年就能够在国内应用的5G时代,搜索结果几乎瞬时呈现,这时系统反馈动作是否必要呢?答案是肯定的,因为哪怕是在一线城市市中心,也会存在网络环境差的场景,应用仍需要给用户提供等待提示。

搜索结果的展示,涉及到展示方式、展示层级等。

搜索完毕,结果会显示在原有页面下方,或在新页面中显示(相对较少)。展示方式也纷繁多样。比如最简单的文字列表视图(墨墨单词和TripAdvisor):

图文并茂式列表视图(网易云课堂和在行):

还有一些简约化,内容设计感极强的列表(Kickstarter和Town):

Kickstarter是横向左右滑动卡片式列表,每个卡片代表一个众筹项目;Town是纵向滑动大图列表,每个条目代表一处人文景观。

增强列表视图(豆瓣和携程):

增强列表视图,是普通列表视图的变体,指在列表视图的基础上,糅合其他设计要素,而呈现出更加多样的视图方式。

比如豆瓣的多重列表视图就是增强列表视图的一种,它采用了基于搜索结果类别进行分列表展示的视图方式。简单来讲就是展示页面有多个列表,如“图书”列表、“电影/电视”列表等。

携程搜索展示页面是增强型列表视图的典型,在整体是列表视图的整体视觉效果上,有的列表项本身就是一项内容集合,如“张家界的旅游度假”;有的列表项本身是一个具体条目(张家界碧桂园凤凰酒店);有的列表项增加了内容详情介绍(旅游产品介绍),不同列表项代表不同类别(飞机、酒店、旅游产品等),这种视图方式适合搜索结果门类及其复杂,不同结果展示权重不同的应用。

表格视图(小红书和ASOS):

当搜索结果需要图文并茂地进行展示,且需要支持用户快速浏览较多条目的时候,表格视图再适合不过了,而上述两个前提,缺了任何一个,都会影响用户体验。这种视图方式经常应用在购物类的应用中,且最多两列排列,再多的话,信息就太过密集。

如果需要图文显示,且用户浏览速度更快,条目更多的时候,就由表格视图变为了图文并茂的列表视图,如淘宝和美团,只保留一列内容,是为了不打断用户的视觉流。设想一下从上到下,和从左到右+从上到下,哪种方案更好?

缩略图(Eventbrite):

缩略图视图模式,指的是搜索结果的内容条目,是将详情页的图文内容进行选取、缩小或模糊处理后,以N个缩略图的方式,展示在搜索结果展示页,因此该模式通常和其他模式混合使用。

甚至地图卫星图(摩拜和ofo):

地图/卫星图的视图方式,适合于提供基于LBS(基于地理位置信息服务)的应用,可以为用户提供空间和位置的宏观视角。当然,还有个默认前提就是:搜索结果信息类别单一,比如摩拜和ofo搜索结果都是标准化、同质化的单车,用户不需要关心这辆车有什么特质,只需要关心能不能用即可。

有时根据搜索结果的复杂程度和用户使用首选项的不同,也会使用多种视图显示,如高德地图和Eventbrite,就结合了地图和列表两种视图方式:

在搜索时,通常使用延迟加载技术,使部分结果可以被优先、快速地展示出来,而更多数据则会被延迟加载,这种设计有助于提高用户体验,如Foursquare:

许多应用通过““查看更多”按钮,或拖动屏幕(上拉刷新)时自动加载更多结果。如LOFTER和ABCNews:

也有应用把延迟加载做得更平滑,拖动屏幕(上拉刷新)时自动完成更新,如开眼,只有在关闭网络的情况下,我们才能看出它的加载交互,是由logo动效完成的:

结果筛选,指在搜索结果的基础上,通过筛选条件,对内容进行过滤,得到更加精确的搜索结果。通常分为前置筛选、后置筛选和全局筛选。

前置筛选是在用户触发搜索动作之前进行的筛选,如豆瓣:

在动态搜索执行完,点击“全部”菜单,在下拉列表中选择“图书”,得到筛选后的结果,再次点击“搜索”按钮,进入展示搜索结果的全屏页:

后置筛选,也称结果筛选。指的是当搜索动作执行完毕后,基于搜索结果,所进行的二次筛选,通常是以“搜索表单”的方式呈现,特点是一个单独的表单输入多个条件和一个明显的搜索按钮。

这种搜索模式常用于内容分类较复杂的应用中,如美团和淘宝使用搜索表单来搜索服务和商品:

全部表单展开后,是这个样子的:

最佳实践:

有些应用的筛选逻辑只有一层,所有内容都在至少一个分类目录下被收录,各分类目录之间互斥,这样可以保证无论是在搜索动作执行的前面还是后面,都可以设定筛选条件,既可以前置,又可以后置。比如知乎:

用户既可以在输入搜索条件前在“内容”和“用户”两个标签之间切换,也可以在得到搜索结果后再进行标签切换。

THE END
1.关于APP界面布局设计的八种优缺点51CTO博客关于APP界面布局设计的八种优缺点 学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评。然而万变不离其宗,移动端页面常用的布局,不外乎以下8种。 1.列表式布局https://blog.51cto.com/u_15894905/5892376
2.手机app界面案例缺点分析报告,app缺点是什么通过对该健康管理App界面的缺点进行分析,并提出相应的改进建议,我们可以看出,一个好的手机App界面应该是简洁、直观、内容结构清晰和交互合理的。只有这样,才能为用户提供良好的用户体验,提高用户的满意度和忠诚度。对于App开发者而言,在设计界面时应该更加注重用户的需求和习惯,并不断优化和改进,以满足用户的期望。https://www.szappgs.cn/newsinfo.php?id=1691
3.日历记账软件苹果手机下载日历记账软件app功能丰富度的提升,也符合了现代人对于工作效率和生活质量的追求,因此选择功能丰富的日常记账软件App是非常重要的。 二、用户体验度 用户体验度直接关系到记账软件的使用体验,一个好的记账软件应该具有良好的用户界面设计、操作流畅度和个性化设置等特点。 在苹果手机上,“MoneyWiz”、“iCompta”等记账软件因其简洁的https://www.chanjet.com/lker/65542a29e4b08c89f72d9d74.html?a=sub
4.课程首先说明了冯·诺伊曼结构的起源和主要解决的问题,其次重点分析了该结构的优缺点,最后介绍了非冯·诺依曼体系结构的表现方面和发展趋势。 ●3.5知识扩展——ARM处理器 本节主要介绍ARM处理器。包括ARM处理器的主要特点、工作模式和常用ARM处理器系列等。首先介绍了ARM处理器的功耗小、低成本、功能强;支持 16位/32位https://higher.smartedu.cn/course/62354cb19906eace048d2945
5.10大APP界面框架设计模式详解尽管优缺点,但列表导航和标签导航被誉为现在APP里面的主流导航设计,如果说实在没有别的导航创意的话,这两种导航模式是最大程度上避免产品经理犯错的一种设计方式。 7.tab导航 Tab导航和标签导航本质上大同小异,但它运用的情况不太一样,它是运用在二三级的页面里面而不是主页面,主页面一般只会有这种一级导航,一https://www.douban.com/note/580250431/
6.App前端开发跨平台框架比较:ReactNativeFlutterXamarin等移动应用开发领域的跨平台框架正在不断演进,为开发者提供更多选择。在本文中,我们将比较几个流行的跨平台框架:React Native、Flutter 和 Xamarin 等。讨论它们的优缺点、适用场景以及开发体验。 第一部分 React Native: 优缺点、适用场景和开发体验 React Native 是一款由 Facebook 开发的跨平台移动应用框架,允许开发https://xie.infoq.cn/article/4f2ab8e393f3e55618207526a
7.app的界面风格设计(app界面设计分析六个方面)杂七乱八app的界面风格设计(app界面设计分析六个方面) 1、视觉设计视觉设计包括了几大步骤,分别是风格图的确认设计规范的撰写以及最后高保真图的输出及切图确定风格图对于界面尺寸和图标尺寸,新手莫过于纠结建议选择自己的手机尺寸来设计,方便预览效果或者选择中间尺寸,方便。https://www.yuanmacun.com/post/105686.html
8.APP界面设计案例分析,掏空了给你,文末附模板!1.app界面设计流程 设计安卓app界面时,需要考虑的因素颇多。接下来,本文将通过分布指南简化流程,帮助你循序渐进的了解如何设计一个安卓app界面。 1.1开始 在设计新app界面之前,一些初始步骤是必不可少的,以此确保设计师或团队能够目标一致的为最终产品工作。 https://pixso.cn/designskills/the-app-interface-design/
9.案例讲解移动端的长表单应该如何设计?主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。 主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。 2.主方案1的设计讨论 主方案1的设计优缺点 优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案2和3,减少了页面跳转操作和查看https://www.niaogebiji.com/article-66548-1.html
10.UI设计师就业前景分析互联网行业。互联网公司不断推出新的产品和服务,对UI设计师的需求持续旺盛。无论是电商平台、社交软件还是在线教育等领域,都需要专业的UI设计师来打造出色的用户界面。随着移动互联网的发展,移动端UI设计的需求更是与日俱增。APP的界面设计、交互流程设计等都离不开UI设计师的精心打造。 https://www.bwie.com/jsgh/772.html
11.ui设计论文(精选5篇)设计优秀老年用户网站界面的先决条件是与老年用户进行有效的交流,充分理解老年用户的需求,重视老年用户的生理和心理特征。 1.1 老年网民用户人数众多 据调查显示,近些年来,我国老年网民的比例一直在攀升,增长率已经超过了网民总体的增长速度,对于互联网的应用日益广泛。根据相关统计报告显示,2008年年底,51~60岁的网民从19https://www.1mishu.com/haowen/91231.html
12.音乐播放软件UI设计案例分析随着移动互联网的快速发展,音乐APP已经成为每个年轻人手机里必备的应用之一。那么音乐播放器软件UI该如何设计?本文将以QQ音乐APP为例,给大家分享音乐软件UI界面设计分析。 QQ音乐播放器介绍 QQ音乐播放器是一款带有精彩音乐推荐功能的播放器。同时支持在线音乐和本地音乐的播放,是国内内容更丰富的音乐平台。其独特的音乐http://adt.adinnet.cn/bloginfo/2018_02/blog_3426.html
13.交互设计岗位职责负责web端、移动端产品的界面设计和交互设计; 深入分析现有产品的.界面交互优缺点,提出有效解决方案并优化; 负责相关产品的前期产品概念规划、低高保真原型设计以及已有产品的优化; 与整个研发团队紧密配合,协助达成最终产品目标; 分析、监控竞品变化,定期输出高质量竞品分析; https://www.unjs.com/fanwenku/465271.html
14.交互设计师岗位职责(精选32篇)3.能够深入分析评估一套产品的界面设计优缺点,为产品界面开发提供参考或优化方向; 4.深入理解交互思想和基本原则,掌握交互设计必要技能; 5.与上下游职位良好配合,把握策划需求,向视觉设计师和程序沟通传递设计思。 任职资格 优秀的设计表达能力,热爱做设计 https://www.diyifanwen.com/fanwen/gangweizhize/15018634.html
15.生鲜水果APP开发解决方案分析随着人们对健康和优质食品的追求,生鲜水果市场持续增长。为了满足用户的需求和提供更便捷的购物体验,许多企业和创业者开始考虑开发生鲜水果APP。本文将分析生鲜水果APP开发的解决方案,以帮助企业和开发者实现成功的应用程序。 1.用户界面和体验设计: 生鲜水果APP的用户界面设计应简洁、直观且易于导航。用户应能轻松搜索和http://www.apppark.cn/t-46225.html
16.APP导航设计模式与信息布局设计模式人人都是产品经理因为最近接触到APP设计类似的工作,所以我来梳理一下如今市面上流行的APP导航设计模式以及信息布局设计模式。因为还没有深刻体会到每一种设计的优缺点以及适用场景,所以这里主要的任务是梳理APP的布局设计有哪些。 下图为本文的结构图: 导航设计 标签导航(选项卡导航) https://www.woshipm.com/pd/753879.html