资深交互设计师经常强调的「场景」到底是什么?

编者按:资深设计师经常强调的「场景」是什么?今天@拉瓦像阿拉蕾 通过5个搜索的案例,带你认识场景的魅力。

文章目录[隐藏]

资深交互设计师经常强调的「场景」到底是什么?

编者按:资深设计师经常强调的「场景」是什么?今天@拉瓦像阿拉蕾 通过5个搜索的案例,带你认识场景的魅力。

在toB类的系统设计中,表格页面应该是比较常用的用于展示数据信息的方式之一了。大多数场景下,承载了大数据量的表格用户需要通过「搜索」的场景来快速找到需要的信息。下面是在数据表格中,几乎可以涵盖到所有搜索需求的交互模式。

一. 单搜索框

资深交互设计师经常强调的「场景」到底是什么?

顾名思义就是搜索框只有一个,这种场景比较常见的是「单属性搜索」,当用户可以简单地通过一个属性就能快速定位到目标,比如搜索「产品ID」这种具有唯一识别性的属性。

另外,这种场景也同样适用于「模糊搜索」的场景,也就是用户在一个「万能」输入框中,输入关键字,进行多属性的关键字匹配,从而帮助用户找到相关信息。

二. 多条件组合搜索

资深交互设计师经常强调的「场景」到底是什么?

这种搜索框是基于表格数据维度很多的情况下,用户需要通过多个属性组合,更加精确和快速地找到相关的条目。在这种情况下,我们不建议「大而全」地把表格所有的属性都列出来让作为搜索条件,产品往往需要去了解清楚哪些属性对于用户来说是高识别度的、高使用频次的,进而决策几个对用户帮助最大的属性作为组合搜索的条件。根据「7±2法则」,组合搜索的条件最好不要超过5个,否则再增加一个,对用户就多一份负担。

三. 多条件折叠搜索

资深交互设计师经常强调的「场景」到底是什么?

△  收起状态

资深交互设计师经常强调的「场景」到底是什么?

△  展开更多

在复杂业务的系统中,我们常常会发现当数据量特别多,维度特别复杂的情况下,用户在不同业务场景中需要用到不同的搜索条件来帮助定位信息,这些搜索条件可能使用频率不高,但是却是必要存在的,因此这时候搜索条件常常会有7-8个,甚至10个以上都有可能。那么在这个情况下,把所有搜索条件一次过暴露给用户不是一个好的做法。

我们常见的做法是,把搜索频次最高的属性和数据覆盖面最广的2-3个属性暴露给所有用户,其他必要的但是使用频次比较低的属性通过折叠的方式隐藏,用户需要时点击展开更多搜索条件。

四. 模糊搜索+精确筛选

资深交互设计师经常强调的「场景」到底是什么?

△  高级筛选收起

资深交互设计师经常强调的「场景」到底是什么?

△  高级筛选展开

这种模式其实严格意义来讲也是属于「多条件组合搜索」的一种,至于它跟上面提到的不同点在于用户的任务流顺序不同。这个的用户任务流是「输入关键字 – 搜索结果 – 筛选条件 – 找到目标」,而上述的多条件搜索的用户任务流是「 筛选条件 – 输入关键字 – 搜索结果 – 找到目标」

那么在使用场景上跟上述的多条件组合搜索的区别在于:

  • 多条件组合搜索:

表格信息是内容与属性一一对应的比较多的情况下。比如,一个花名对应的就是「创建人」,一个日期在表格中就对应的是「创建日期」。这就要求用户对于要找的信息有明确的定位,知道可以通过哪些维度可以找到自己想要的,更有目的性,更精确。

  • 模糊搜索+筛选:

模糊搜索的字段会对应到多个属性的,比如一个花名会分别对应「创建人」、「处理人」、「审批人」,那么这时候通过一个模糊搜索框,「捞」出一堆已经分类号的信息,直接通过这些类别进行筛选,从而快速找到目标。

五. 表头搜索

资深交互设计师经常强调的「场景」到底是什么?

△  每列的表头增加一个筛选的图标按钮

最后这种就是在表格中定制化的表头搜索的功能。这种搜索方式,用户直接在表格的表头中找到对应的属性,在该属性下对关键字进行搜索。这种使用场景常常是因为用户对表格的每一列,每一个属性都有搜索的需求,这种情况比较少。还有一种使用场景是:在产品规划的前期不清楚哪些条件对用户有更大的帮助,使用这种模式,在每个表头的搜索按钮进行埋点,后期收集数据,从而知道哪些属性使用频次高的,可以被单独拎出来作为表格之外的搜索条件,帮助用户更快速更有效地找到目标。

最后

有了交互模式,更需要对用户有更多的了解,以及对业务和需求的深刻把握,才能把交互模式「用好」,设计出能真正帮助用户提高效率的产品。

交互设计的案例实战」

  1. 阿里设计专家的经验:《为什么设计师也要学会判断优先级?》
  2. 交互设计中的按钮:《三个按钮背后由小见大的交互思考》
  3. 什么是正确的需求:《聊聊设计中「需求」的正确打开方式》

资深交互设计师经常强调的「场景」到底是什么?

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34191/

(0)
震天下震天下
上一篇 2017-08-28 13:20
下一篇 2017-08-29 14:08

相关推荐

  • UED 戊戌狗年第一波招聘已送达!

    14载,我们初心不变,依然要做行业最有力的的发声者。从一张纸到一串电波,媒介在变,我们的眼光始终如一大家都在说AI是未来,然而在这里,我们依然需要你无可代替的头脑。WE ARE HIRING这次招聘我们为什么要做这次公开招聘?信息爆炸,百家争鸣,越是瞬息万变,媒体的价值愈发凸显。我们不会随便说满意,而是希望在诸多嘈杂的背景声中,发出属于新时代建筑媒体人独到的观点,让关于建筑的解读,走进公众的视野;我们希望以全新的面貌去呈现UED对于中国...

    2018-02-28
  • 交互的未来标配!5个方法帮你设计好用的触控手势

    我们生活在一个人机互动频繁,由设备驱动的世界中。随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模拟真实世界…

    2016-03-04
  • 交互设计中,如何增加趣味性,提升操作愉悦度?

    功能、实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐、愉悦、悲伤、美... 花、大海、春天、小屋... 这些都…

    交互设计 2015-04-04
  • 超实用的响应式排版快速指南

    译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

    2017-06-02
  • 用户研究:中国人网购的7个真相-信息图

    在需求和消费之间,永远存在着不对称性。 电商已经改变了中国人生活的方面,而且还将继续扩大自己的影响力。 中国已连续三年成为全球规模最大的电商消费市场。国家统计局公布数据显示,2015年中国人在消费品零售中…

    2016-05-26
  • 交互设计,应该从哪学起?

    交互设计行业感觉很火嘛,我也很有兴趣,甚至想转型做交互设计,需要具备什么条件吗?什么职业都可以转型做交互设计吗?网络上很多培训内容都太宽泛,我到底该学什么呢?想职业转型,想拿到高薪,想提升生活品质,如果只是停留在“想”,永远都不会获得成功。不如从今天、从此刻开始,开启你的交互设计之路,从职业规划到求职面试,本课程带你走上职场进阶的坦途。课程139课时,超过1500分钟,800MB课程资料,全面讲解交互设计知识!商业实战案例,1年私人顾问...

    2018-01-30
  • Axure教程-蜻蜓FM收音机iPhone端高保真原型案例下载

    本文是原型库网站金乌投稿——蜻蜓FM收音机iPhone端高保真原型。使用AxureRP7.0制作蜻蜓.FM网络收音机产品原型分享

    IxD案例 2015-01-04
  • 设计方法论:一种统一图标大小的方法

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下。需要注意的是,方法有很多,这只是提供一种可行的方法,可供参考,有什么问题可以留言讨论。

    2017-05-18
  • 四个步骤,完成一个APP的LOGO设计需求

    希望这篇文章,能够在你做LOGO设计时,提供一些方向和思路。

    2017-05-01
  • 一个应届的交互设计毕业生应该具备哪些能力?

    作者:马力 @ 可能性与大设计   ( 上图来自Elizabeth Bacon ) 首先说,很多专业的同学都可以做交互设计(还有视觉设计,产品设计等等),既包括设计相关专业,如工业设计、建筑设计、园林设计等,也包括完全和设…

    交互专题 2017-08-07