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

编者按:资深设计师经常强调的「场景」是什么?今天@拉瓦像阿拉蕾 通过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

相关推荐

  • 帮你梳理微交互的五个基本要素

    微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的微妙的交互和效果。小贴士:奖励机制是驱动用户的核心,奖励越强,产生的习惯效果也就越明显。小贴士:动效应当具有足够持久的生命力,所以设计的时候,应当思考它是否会在看过100次之后让人觉得厌烦?它是否清晰可见,或者完全无法引人注意?小贴士:用充满情感和人的姿态来同用户交流,这是让你的UI和交互变得更加温暖的最快的方式。小贴士:应当在你的设计中保持KISS原则(KISS 原则是用户体验的高层境界,简单地理解这句话,就是要把一个产品做得连白痴都会用,因而也被称为“懒人原则”),不要让那个你的微交互成为一个宏交互。

    2017-05-14
  • 可视、清晰和简单:APP底部导航设计三原则

    作者:Nick Babich(译者:Darin) 设计师们都知道设计的目的不只是为了让产品看起来好看。无论是网站还是app,如何黏住用户,同样是设计所需要考虑的方面。设计就像是一次对话,导航也是一次对话。因为如果你的用…

    2017-08-04
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • H5可能会死,但总有人用它带来惊喜

    天猫这个双11邀请函能够让圈内人产生好感,是不是也从侧面印证了这个H5的体内是具有爆发能量的?

    2017-05-16
  • 屏幕尺寸越来越多,“首屏为王”还有效么?

    作者:Amy Schade@nngroup,翻译:小球娘   几句话概述:把什么内容放在页面顶部(第一屏的位置)以及把什么内容藏在第一屏位置之后将始终影响用户体验——无论屏幕大小。有平均84%的用户会区别对待页面第一屏内容和…

    交互专题 2017-08-07
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 掌握这10招,再也不愁公众号涨粉了!

    都说现在运营公众号非常难涨粉非常难别担心今天介绍10种强大的运营工具/技巧给你帮你解决下面这些问题帐号涨粉、爆文技巧、文章排版图片设计、数据监测、海报营销1运营公举小磊磊免费学习新媒体运营知识年收入上百万的全栈新媒体运营,全平台有10万新媒体运营关注,成百上千个自媒体大佬都是他的粉丝。公众号上有180万字的原创运营知识,教你写文章、涨粉、赚钱、提升运营能力。并且把新媒体知识梳理成了标准化的知识体系,让所有人都能免费学会公众号运营。长按识...

    2018-04-03
  • 面对大型项目的设计需求,设计师的定位与协作方式应该是这样的……

    工作需求每天都有,但总有一些冥冥之中会被更多人关注,如实事热点、周年庆典、大版本发布、热门合作等,那这些被更多关注的项目是否就是传说中的大型项目呢?视觉设计师在这样的项目中,又该如何发挥自己最大的作用,找到自己的最佳定位,保证高质量高效率的完成项目呢?Ps:养成良好的分类习惯,在需要时它也可以是你的加速度。ps:作为视觉设计师,要不忘设计的态度,时刻提醒自己,除了眼前的这个方案一定还存在一个更好的方案,时间允许的前提下不妨再对自己狠一点,过程虽然痛苦,但结果往往会带来惊喜!

    2017-05-10
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30