首页 > 建站资源 > 网站运营 > 交互设计分享:APP搜索功能浅析

交互设计分享:APP搜索功能浅析

时间:2018-09-17    来源:人人都是产品经理

文/垚一垚

本文主要从搜索的官方规范和实际用户体验角度进行了总结,希望可以给大家带来一点启发。

一、搜索官方规范

Android(Google Material Design)

搜索操作应该至少包含以下 4 个动作要素:

打开、输入、提交、展示。

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

  1. 语音搜索;
  2. 搜索历史;
  3. 搜索词自动补充,且补充的结果是你的应用的数据库中的已有词汇。

iOS

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

默认提示词、取消按钮、清空按钮。

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

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

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

2. 考虑在搜索栏下方提供快速入口和其他内容,以帮助用户更快找到结果。

例如iOS自带应用Safari,当你点击搜索栏的输入框时,应用就会展示你的书签,或者历史搜索,这样通过点击内容,有时候能免去输入的麻烦。

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

很多电商APP已经做了对搜索列表的筛选操作,如淘宝、天猫。

个人输出交互设计规范——搜索

搜索栏获取用户键入的文本,用以作为搜索的关键字*。

  • A.初始状态时,键盘默认收起,搜索框左侧显示搜索按钮,输入框内可以显示占位符,用来描述控件的作用例如“搜索”)或者提醒用户是在哪里搜索;

  • B.点击搜索框后,文本框内显示光标定位(和引导文字),同时弹出键盘;

  • C.当输入文字后,引导文字消失,右边显示清空按钮;点击清空按钮,可以清除所有搜索栏中的内容。点击清空按钮不会退出搜索模式,只是清空内容;

  • D.完成输入后,光标及删除按钮消失,文本框处于不可输入状态,键盘收起。

相关推荐
网站的分页设计如何做得让用户体验更愉悦?
WEB产品设计须理清脉络 引导用户做正确选择
用户注意力与交互设计的简单分析
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
互联网产品设计之影响用户体验的4个因素
交互设计的细节分析之分页设计
以移动应用设计为例讲解符合用户预期的设计思路
什么是响应式网页设计?
20大UI设计原则 设计师必备宝典
新浪潮下产品交互设计的三个新趋势浅析
如何在6个月内自学成才成为一个互联网设计师?
产品设计中认知心理学分析其交互设计
案例分析情感化设计对用户体验的影响
B2B行业网站导航菜单的易用性设计原则
细说用户体验设计背后的“黑暗模式”
10条有效提高网站可用性的经验技巧分享
互联网产品设计理念:产品即有机生命体
遵循用户需求的设计:最美APP的9条闪光定律
扁平化交互设计让用户体验更棒
如何让网站更“值得点击”?五大用户体验要点可搞定
从电商网站应用设计中学到的九个成功秘诀
作为一个顶尖产品经理必备的6大特征!
60个以小见大的互联网产品设计细节汇总
对话谷歌交互设计师:Google是怎么做设计的
细节决定成败!提高用户登录体验的5个细节
VXPLO:一款快速实现网页交互设计的工具?
网站设计的10大金律:帮你更好的留住用户!
我与交互设计这十年:交互之外的那些事儿
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
访谈:关于锤子科技 你不曾了解的有趣一面
戏说“愉悦”强迫症:真的交互设计满足需求
产品实用技巧:交互说明中容易忽略的几件事
华为总监:18条交互设计和心理学之间的联系
百度官方出品!2015-2016交互体验趋势

精彩推荐

热门教程