首页

聚焦B端产品价值——B端产品的落地实践指南

资深UI设计者

2021年6月5日~6日,人人都是产品经理举办的【2021中国B端产品经理大会·上海站】完美落幕。携程旅游搜索产品负责人@毛新年 进行了精彩的内容分享,他分享的主题是《聚焦B端产品价值——B端产品的落地实践指南》。

一、B端产品核心价值解析

他首先将B端产品主要分为企业自身业务对应的B端产品和互联网业务对应的B端产品。

企业自身业务对应的B端产品服务于企业自己,产品形态多为ERP、CRM等,产品提供者是IBM、用友或者企业自研等;

互联网业务对应的B端产品服务对象是B端商家形成的商家生态,产品形态如阿里/美团商家系统等,产品提供者则是阿里/美团等互联网平台。

企业是市场竞争的主体,B端产品核心目标是为企业降本增效。

二、从企业管理到业务执行,B端产品的价值体现

那么B端产品如何实现助力企业成本降低呢?

针对B端企业工作的重复、繁杂、专业特点,B端产品在产品设计上遵循以下四个逻辑可为降低企业成本发挥自己的价值:

  • 人机替代:需要人做的工作尽量少,对应产品功能就要求工作尽量能够自动化,实现人机替代;
  • 智能化:如果工作确实不能系统替代,那么应该使系统尽量降低对人专业知识的依赖,对应产品功能要求系统高度智能化,小白也能做;
  • 自主学习:对于小白不会的工作,系统应提供在线指导和交互学习,对应的产品功能要求系统提供便捷自助学习的能力,小白非常方便自我学习来完成工作;
  • 无障碍:当有疑似错误操作时,系统能智能提示并容错,对应的产品功能为自检&容错

除了降低成本之外,B端产品还能在提升企业效益方面做出自己的贡献,针对B端业务管理对象多,业务蕴含的价值大的特点,在产品设计遵循如下这三个逻辑,可以充分挖掘大数据价值,提升效益:

  • 规范化:将语义相同的各种说法规范为统一说法,有助于大数据的统计、归一、计算的一致性,有助于挖掘出业务内涵价值,这要求建立业务规范知识库;
  • 标准化:B端企业在标准化业务上往往得心应手,将非标业务标准化,给平台和商家提供增量业务空间,这就要求B端产品提供业务标准化能力,这要求建立业务标准知识库;
  • 平台化:将工作成果平台化共享,平台化一方面减少商家工作量,另一方面提升了数据准确性,提升平台和商家经营绩效,这就要求建立业务规格知识库。

接下来用典型案例来展示上述产品逻辑如何在实践中落地。

以电商平台商品发布业务为例,店小二发布一款商品要经历以下步骤,每个步骤的难度不一样。

首先要选择商品所属目录,接着要填写商品属性规格,这是工作难度最大的,也是工作量最大的。还有填写物流信息、填写服务信息、上传商品主图、上传商品详情图等一系列操作。

这是前端的业务流程,而从产品的角度,可以分成六大模块。

  • 目录选择步骤对应的产品后台能力为目录智能预测。
  • 属性填写需要产品后台规范知识库、标准知识库、产品信息库,实现各类属性的填写。
  • 物流填写对应的是地址智能提示,毕竟人不能记住国家地理区划,这就需要物流地址的智能提示功能。
  • 服务填写对应的是标准服务项目库。以前服务不是标准化的,但是作为平台来说需要将服务项目标准化。
  • 主图和详情的上传对应的是图片智能检测,看看图片是否符合国家的合规规范和电商平台的管理规范。
  • 后端大数据智能化和各类知识库支撑商品发布业务的准确、快速、低成本的B端商家诉求。

从商品发布来看如何实现降本增效?

1)重复繁杂工作自动化

每天的商品上新,营销活动都需要大量修图抠图工作,电商平台和商家每年耗费大量美工投入到图片制作。

2017年阿里双11多达4亿张图片,如果靠设计师人工去设计制作,即使是业务熟练的设计师,也需要100位设计师不眠不休工作300年。所以要用人机替代的方式,利用系统来完成上述重复繁杂的工作。这种通过深度学习海量素材,自动生成各种图片,不仅大大减少了人的工作量,而且系统设计的图片点击率增长一倍多,除了电商平台自己使用外,还直接提供给商家使用,这样大大降低了商家小二的工作量,为商家节约了大量人工成本。另外,平台每天需要审核的图片也有很多,通过系统自动检测图片是否涉黄涉敏、图文不符、违反广告法,违反电商平台的运营规范等,大大减少人审核工作量,也为商家降低了大量用人需求,节约了不少成本。

2)专业工作智能化和便捷自主学习

B端产品对商家小二专业知识要求高,商家的用人成本高。

比如在类目选择环节,需要小二熟悉平台类目体系。

在属性填写环节,需要小二熟悉商品知识。

在图片制作环节,需要小二熟悉国家电商法律法规以及平台运营规范。

所以,就需要将专业知识内嵌的产品系统,减少对商家小二知识的依赖,这些要求在产品能力上通过智能化技术进行支撑。

有了智能化支持,在发布商品的时候,小二只需要填写商品标题或者几个关键词,系统就会提醒你它可能属于什么类目,让你去做选择。

属性的填写也是如此,系统将可能的属性值罗列出来,让你做选择就行。

这样即使不是一个资深的采购也能明白,将难度降低到中级甚至初级。

如果有些小二对于平台规则不熟悉,系统会在页面给出指引或者视频图文在线交互学习,引导小二正确操作。

比如小二不知道生产许可证编号是什么,系统会给出相关提示和案例,小二看到案例就会一目了然。为什么电商平台要做到如此细致,因为商家太多了,比如阿里、拼多多、美团等平台的商家数量高达千万,不可能商家有疑问就找平台客服。通过便捷式学习自助式解决,只要中初级人员就可以完成工作,降低了商家的用人成本,同时也减少了平台客服的用工人数,降低了电商平台企业的成本。

3)系统自检和容错

在智能化或在线学习前提下,小二仍旧可能发生错误操作,或者利益驱使下故意犯错,或者系统知识不完备,有时候商家是正确操作,但是系统认为是错误的。在这样的情况下,系统要具备实时自检能力,根据事先内嵌的专业知识,实时校验并提示商家实时纠错。如果商家坚持,系统具备容错能力,业务依旧可以进入后续环节,而不是在线等待。

比如在填写冰箱的体积时,系统会内设一个最大最小的体积范围,但是商家的冰箱超出了最大体积,在商家小二进行属性填写的时候,系统会根据内嵌的物流体积范围,校验小二填写的体积,超过范围实时提示商家纠正,如果商家坚持,还可以继续填写,但是系统会记录这个异常数据,平台客服会与商家小二进行确认,最后更新内嵌知识。

小结:

人口红利消失,增量业务拓展难度加大的时代背景下,降成本也是提升企业竞争力的有效手段。针对B端业务的重复、繁杂、专业的业务特点,我们B端产品经理应该将B端系统设计成足够自动化、智能化实现人机替代,并设计友好无缝的交互学习素材实现低专业知识依赖,帮助企业实现降成本的目标。

4)规范化

每个商家对商品的理解可能不同的,所以说法可能就不一样。比如同一罐奶粉,它适用于一到三岁的孩子,也可以写作12到36个月。相同含义项目多且杂,商家不知道该选谁、用哪种说法,因此大数据也无法归一统计,精准分析。这就要求知识尽量规范化,将含义相同表述不同的业务知识规范化,形成业务规范知识库。

规范化提炼后,尽量让商家小二选择属性值,减少自由填写错误。大数据根据规范之后的知识进行统计分析,提供给商家的数据更精准,这样对于商家决策来说帮助更大。

而这些知识是从哪里来的呢?从商品说明书,客服、评价、调研中采集而来,属性值通过历史数据和商家小二的在线提报补充到知识库,内嵌于系统中。

5)标准化

随着电商发展,各种非标商品急需在线上获得商业机会,同时消费者对服务的要求越来越高,所以,将非标商品或服务标准化,扩大商家的商业机会,同时有助于提供统一的交互语言和商品定价。其中包括服务的标准化,比如保险、物流、售后等,能够提供这些服务的商家会获得更多的流量和更高的转化,也会倒逼其他商家进行服务升级。

将非标商品标准化,例如生鲜水果,通过建立标准,提供统一定价依据,有助于优质商品实现优质优价,同时避免商家描述不一致带来的客诉。

6)平台化

平台上有大量商家做完全相同的工作,那么能否在商家间共享工作结果,节约社会资源,例如有上百个商家卖同样的苹果手机,这些商家发布商品都需要填写商品的参数信息(多达上百项),将这些相同的工作进行平台化后能让所有商家共享。

将商品的描述分为产品信息和销售信息,其中产品信息是相同的,所有商家共享;销售信息每个商家都不一样,自己做维护。

建立这样一个产品信息库之后,商家只要在发布商品时检索产品信息,其他信息全部由产品信息库提供,无需商家输入,数据一致性有了保障。

例如手机只需要填写品牌、系列、颜色、内存,其他公共信息可被自动调出来供所有商家使用。

包括快消品,以湿纸巾为例,只要检索品牌、序列、规格,就能其他信息调出来。非标品的服饰也可以这么做,提供品牌和货号就可以调出其他信息。

小结:

马老师曾经说过:“数据就是互联网时代的石油”,挖掘业务蕴含的数据价值,可以为企业提升经营效益,在B端产品系统中,通过规范化、标准化和平台化可以提升数据的准确性和一致性,有利于发挥大数据价值。

三、B端产品实施落地的难点剖析

B端产品在实施落地中主要存在两大难点。

1. 企业内组织问题

很多时候,老板说要做一项工作,产品经理可以给出方案,推动研发并实施上线,但是产品上线后缺乏运营,最终导致产品难以达到预期成效。这主要企业内分工不清晰,有产品无运营,有系统无人背负运营或者经营指标考核,要求产品经理推动无运营无考核不立项进行产品设计,规划,更别说研发了。

B端产品想要降本增效,但是很多人担心会因此丢了工作。所以,他们有所顾虑让降本增效难以推进。因此,在存量业务中找增量业务,把部分员工分流到新业务中去。例如,针对电商业务,我们可以不仅仅只做零售,还可以做批发;不单单做线上,还可以做线下,这样对员工的技能也是很大的提升。

2. 企业间协作问题

现在企业合并或并购已经非常常见了,弱势企业B端系统往往被要求对齐到强势企业,改造过程困难也比较大。

尤其是文化习惯制度方面的差异,这些差异往往也体现在B端产品上。

所以,在企业文化融合方面要建立沟通共识。文化习惯制度灵活把握尺度,非原则问题的差异,可以求同存异,逐步对齐,原则问题需要一步对齐。

除了文化方面,在业务方面,不同公司也不一样,有成熟的业务也有新业务。这种情形最好是互补,而不是一味用强势企业取代被并购/合并方,否则不仅可能造成人员的大幅动荡,而且可能将被收购企业的成熟业务破坏掉。例如某线上的电商平台,并购了线下的企业,在进行商品融合的时候,给原来线下的企业新增一个线上的渠道。

以卖葡萄酒为例,线下门店是按照国家产区进行分类,比如法国、意大利、澳大利亚;而线上是按葡萄酒类型分类的,比如起泡酒、干红等。

为什么会出现这样的差异呢?因为电商起初的进口酒业务是商家C模式,佣金扣点都是相同的,但是线下门店是自营模式经营,来自不同国家进口葡萄酒关税不同,因此分类体系也不同。

在融合方案的时候,不能只是简单将线下知识废弃掉,而是合理地吸收。

因此融合之后,线上的商品主数据多了类别和产地,线下的商品也可以在线上进行销售。

小结:

B端产品核心价值为企业降本增效。B产品经理是企业降本增效的“引擎”,主导系统架构设计,能否按照降本增效背后本质的产品逻辑,设计出具备人机替代、智能化、规范化、标准化和平台化系统功能决定降本增效能否实现。同时在业务流程中,我们需要设计好交互学习环节来降低工作人员的专业知识的学习成本,同时建立纠错容错能力确保业务顺利快速展开。

针对B端产品落地实施难点,产品经理除了需要提升自身专业能力外,也需要关注企业内的组织问题和企业间的协作问题,前者主要通过明确职责分工和寻找增量业务来化解,后者需要掌握融合的原则和抓住业务差异背后的本质原因,对症下药。这背后需要我们产品经理具有深刻的业务洞察力,可以说思考力深度决定了产品经理职业天花板的高度。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理  作者:
人人都是产品经理


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


颜色的性格

资深UI设计者

颜色的探索及应用场景


今天呢想和大家分享我积累的一些关于色彩这一方面的知识。

提高自身和大伙对色彩层次上的认识,更好的融入到自身的产品当中去和实际生活中去。


1.白色

1.白色象征着纯洁、纯净、善良、朴素、正直、信任的颜色。
2.在西方特别是欧美,白色是结婚礼服的主要色彩,表示爱情的纯洁与坚贞(也有说是上帝最喜欢的颜色)
3.白色显得非常的自然和谐,不会显得突兀,所以白色一般在app中用的非常的广泛。



“ONE一个”一款文艺生活类App,主色调为白色,整个产品的气质很纯净、朴素,整个产品诠释出一种文艺的气息。


2.红色

1.红色表示喜庆、爱、勇气、热情、热血、危险、男子气概的颜色。
2.红色在可见光谱中光波频率最低,波长最长,衍射能力最强,所以也最为醒目,给人视觉上一种迫近感和扩张感。红色也同时代表着危险与警示。

3.在中国红色传统上表示喜庆,比如在婚礼上和春节都喜欢用红色来装饰。

1.红板报的主色调为红色,硬朗的设计风格配上黑色,整体给人传达科技、严肃、引人注目的感觉。
2.值得一提的是红板报的交互体验是类似于纸质书翻页效果,结合了红板报本身的产品特性。


3.黄色

1.黄色是个暖色调,充满希望、信心、温暖的颜色。黄色的明度极高,非常的引人注目。同时黄色有大自然、阳光、秋天的涵义。
2.黄色代表着性格上的欢快,愉悦,也是富有正能量的颜色。
3.中国封建朝代从宋朝以后,明黄是皇帝专用颜色,如“以黄为贵”。代表着尊贵,例如很多产品的VIP都以黄色为主,象征尊贵。


Nike Run Club主色调以黄色为主,选用了明度和纯度很高的黄色,页面充满活力的颜色,结合粗壮、倾斜的数字字体,很适合该产品运动的调性。


4.橙色

1.橙色是欢快、活泼、热情、阳光、健康的色彩。同时橙色是红色与黄色的混合颜色,也象征着温暖与活力。
2.在电商领域有很多地方用到橙色,为了激发用户的购物欲望。例如我们常见的淘宝就是用的橙色。
3.橙色在西方传统中,万圣节的颜色,南瓜灯就是利用橙色来制作的。


小米商城主色为橙色,也是小米的品牌色,给人感觉到温暖、活泼的颜色,同时橙色也可以激发用户的购物欲望。


5.绿色

1.绿色代表意义为清新、希望、安全、平静、舒适、生命、和平、宁静、自然。在绿色环境中锻炼能提高情绪、活力和愉悦感。
2.同时红绿灯,绿色代表着通过,所以应用在APP中,绿色也代表着成功通过。
3.在西方国家绿色代表着股价上升和经济增长的意思,在东亚部分国家股票市场则相反。


京东到家的主色以绿色为主,向用户传递新鲜、健康、绿色的生活理念,同时绿色给人舒适安全的感受,非常符合京东到家的产品气质。

6.

1.
蓝色通常让人联想到海洋、天空、湖水、宇宙,所以蓝色一般代表着冷静、科技、未来、纯净。

2.蓝色非常的通用,兼容性很强,像许多科技公司都运用了蓝色,例如腾讯、Facebook、Twitter等。

1.36氪是提供科技、创业、投资头条新闻类的app,在它的app当中会发现蓝色作为主色,非常适合他们的产品调性。

2.选择的蓝色整体显得年轻、鲜明、具有科技感,同时每一个图标、背景都具有蓝色的色相在里面,非常的精致与独特。

7.

1.
紫色代表着富贵、华贵、优雅、柔美、浪漫、梦幻、魔法。

2.紫色是由温暖的红色和冷静的蓝色化合而成,是极佳的刺激色。在一些游戏中紫色也会利用在魔法中,代表魔力值和魔攻等属性。

紫色的梦充满了浪漫和梦幻也是符合豆蔻年华的少女的颜色,代表着魅力。例如一些相机软件也运用了紫色在里面。

3.例如今年出了iPhone12「香芋紫」成功吸引不少女孩子的目光。



劲舞团整体的风格以紫色、酷炫、光效的形式展示,展示出劲舞团的梦幻、魔法、少女般的气质在里面。


8.粉色

1.粉色代表着可爱甜美、温柔、纯真、娇嫩、青春、明快、恋爱。在性别角色里粉红色通常与女性气质相联系,正如蓝色通常与男性气质相联系一样。

2.例如美柚app,是关于记录女性相关的App,里面就用了大量的粉红色,给人一种温暖、舒适、关心的感觉,衬托出了粉红色在里面的魅力。

美颜相机的主色以粉色为主,同时有些地方加入了一点紫,显得页面更加通透整体给人一种女生、甜美、粉嫩的感觉。


9.黑色

1.黑色具有高贵、稳重、科技、神秘、酷炫、稳定、庄重的意象。

2.许多科技产品的用色,如电视,跑车,摄影机,音响,仪器的色彩,大多采用黑色,生活中,我们有时形容很神奇的科技产品为"黑科技"。

3.生活用品和服饰设计大多利用黑色来塑造高贵的形象,也是一种永远流行的主要颜色。

4.京剧脸谱中,黑色一般代表正直、无私、刚直不阿的人物形象,如包拯。


1.TED是一款教育类的app,分享他们关于技术、社会、人的思考和探索。品牌色为红色,不过整个app以黑色为主,整体给人很强的沉浸式体验。
2.整个app没有任何的广告,整体体现出TED产品的权威、严谨的气质。


10.灰色

1.灰色具有简朴、朴素、柔和、高雅、平凡、温和、谦让、中立等意象中性色的灰色在店面的设计中给人的感觉是沉稳。

2.它好像可以和任何色彩搭配。由于它的中立性,它常常被用作背景颜色。它可以让其它色彩突出。

"一言"整个App以灰色调为主,内嵌了一款宋体。
整体的排版非常的独特、细腻、极简,结合灰色的调性展现了一言app的简朴、高雅、东方美学的气质。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:黄小伟

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



福格模型的实际应用

资深UI设计者

超级秒杀日是秒杀频道衍生出来的大促营销活动,在大促期间扮演着重要的角色。虽然秒杀的商品及价格由业务侧主导,但设计师仍可以通过方法论的应用去提升会场的转化效果。本篇将会介绍如何将 fogg(福格) 模型运用到秒杀会场的设计中。

什么是秒杀?

1. 秒杀的特点

秒杀就是在限定时间内,通过发布一些超低价格的商品,吸引买家抢购的一种销售方式。因此秒杀具有两个核心特点,一个是限时降价,一个是限量抢购。

现阶段,秒杀作为一种营销工具,已被各大电商平台广泛使用。利用秒杀的特点,平台可实现用户活跃、粘性提升、销售增长等目标。

2. 超级秒杀日的定位

超级秒杀日是京东秒杀频道推出的营销活动,旨在辅助平台销售的增长,同时提升频道的知名度,带来日常流量的增长。在促销期间,会场承担着流量分发、单品销售、商业合作的作用。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG(福格) 模型简介

Fogg 模型的核心理论比较好理解——想要用户完成转化,需要满足三个条件:

  • 用户有足够的动机
  • 用户有能力完成转化
  • 有触发用户转化的因素

如下图所示,当用户有高动机,并且有较强的能力完成某件事时,很容易成功触发转化行为,反之则容易触发失败。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG (福格)模型在秒杀会场中的应用

在实际项目中,需要结合具体的场景,综合考虑三个要素的对应关系,进行针对性的设计。

1. 动机层

动机分层

根据大促的用研报告,将会场用户的动机分为 3 层:强目的性,弱目的性和无目的性。其中,弱目的性的用户占大多数,表明用户的转化还有很大的提升空间。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

因此在会场的整体动线设计上,会对不同动机的用户进行针对性的内容设置,着重提高会场的可逛性,通过多维度营销矩阵刺激这部分用户的消费需求。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

动机增强

除了依靠动线去匹配不同的用户,实现用户动机的增强外,还可以采用氛围营造的方法,快速感染用户的心智,激发用户的潜在需求。这部分通常通过视觉设计进行表现,例如秒杀会场,会通过闹钟元素及鲜亮的颜色,去提示用户商品是限时的,需要马上抢购。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

2. 能力层

降低价格门槛

降低价格门槛的目的是为了匹配用户的购买能力。限时降价是秒杀业务的核心特点,在会场中不仅要明确告知用户商品的价格,还应突出价格优惠的力度,在强调秒杀属性的同时实现用户的快速转化。价格优惠可通过多种形式表现。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

减少决策成本

会场中存在过多冗杂的信息会干扰用户的判断,导致用户流失。因此,要减少用户的决策成本,让用户不经过大脑思考便下了决定。例如,可在会场中增加推荐模块,根据用户的行为进行实时推荐,实现商品的精准打击。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

3. 触发器

触发即是在恰当的时间告知用户,现在可以去做了。因此触发器的本质是将目标用户与目标行为进行连接。在秒杀会场中,触发通常以消息推送,文案提醒,利益刺激等形式呈现。

在预热期设置提醒功能,并将优惠券或券包的使用时间定在高潮期,能有效地提升用户回访,完成购买。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

在楼层和弹窗内设置互动任务,完成后给予奖励,可以提高楼层的点击率,而获得的红包将进一步刺激转化。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

小结

秒杀会场并不仅仅承载着销售转化的功能,因此会场的内容及设计,需要综合考虑业务目标及业务规划。FOGG 模型虽然从理论上来看比较容易理解,但实际的应用情况也是灵活多变的。运用 FOGG 模型,可以让你的设计思路更加清晰,在一些细节上也能更加出彩,只需要加深对它的理解,就能在各种变动中抓住用户转化的关键点,确保会场的转化效果不受影响。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:优设  作者:
JellyDesign

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何做好用户体验度量?

资深UI设计者

体验度量是什么?

简单来说,用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析,但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话:If you can’t measure it, you can’t improve it(如果你无法度量它,你就无法改进它)。我们相信更好地衡量体验设计的价值,可以帮助我们更好地实现产品价值、用户价值、商业价值,甚至是社会价值。

为什么要做体验度量?

下面我们再来分析一下做好体验度量能帮我们解决哪些难题,首先从我们遇到的几个问题出发。

概念过于抽象主观:设计师们提出的体验优化方案被认为过于主观,难以得到直接证据支持,各部门很难达成共识,方案难以推进落地。怎么办?

影响因素复杂多元:现有的 NPS 满意度调研反映了每个季度的商家整体满意度,但是团队面对 NPS 结果无法直接定位问题,难以进行有效的诊断和提升。怎么办?

问题难以闭环管理:现有的 VoB 系统能够收集到一定数量的商家反馈问题,但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办?

如何做好用户体验度量?京东设计师总结了五个步骤!

相信大家或多或少遇到过类似的问题,虽然大家有着“以用户为中心”提升“用户满意度”的共同目标,但在过程中具体该怎么做,仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略,我们希望通过体验度量帮助京麦达成以下目标做出更好的设计,创造更大的价值。

目标一:让商家体验从“抽象”到“具象”,从“玄学”到“科学”,定义一套被各部门认可的衡量标准;

目标二:与商家建立更加直接的联系,从商家角度直接洞察需求,更有针对性地定位优化问题;

目标三:更好地实现体验设计价值及体验设计体系化,与各部门建立合作关系,长期监测跟进优化。

怎么做体验度量?

体验度量一般可以分为五个步骤:拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中,我们主要完成了前三个步骤,后期我们会尝试推进后两个步骤,同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成,就比如评价一个人的英语水平如何,我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型,我们发现各个模型有不同的切入点,比如 PULSE 模型以网页产品商业化为导向,HEART 模型以用户为核心,PTECH 模型更适合企业级产品,UES 模型更适合技术产品等。涵盖的维度多种多样,有的维度是产品相关指标,比如留存率、日活用户数、转化率,有的维度是用户侧反馈,如 NPS 净推荐值、满意度。

如何做好用户体验度量?京东设计师总结了五个步骤!

深入分析这些维度,我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

如何做好用户体验度量?京东设计师总结了五个步骤!

有了前面提到的三大目标和参考指标,我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态,市场上也有了同类型的产品。因此,我们首先把完整性作为反映产品系统表现的重要维度,也就是商家需要的、别人家都有的,京麦“有没有”?

第二项维度是参与度,店长是否会通过移动端来经营管理店铺呢?客服是否会通过移动端来答复客户呢?也就是各类角色“用不用”。

而作为一款 B 端产品,它的使用效率和易用性是至关重要的,我们要关注用户的行为,也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度,它代表了用户的主观整体感受,这也是所有指标中涵盖面最广的一项。总的来说,商家们是否认为这个产品“令人满意”?

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:体验度量具有非常强的业务属性,不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式,适合自己的指标才是好指标。

2. 采数据

有了度量指标之后,我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例,我们该如何去给听、说、读、写这四部分打分呢?可以通过听力、口语、阅读、写作的统一考试打分,可以让老师根据平时上课的表现打分,也可以让同学互相评价打分。

那么度量的数据也可以有多种来源,比如通过用户访谈得到用户主观使用感受(定性数据),通过问卷调研得到满意度或是易用性评分(定量数据),通过后台数据得到用户的行为数据(定量数据)。

如何做好用户体验度量?京东设计师总结了五个步骤!

基于移动端京麦现在所处的发展阶段阶段,我们重新明确了我们的调研目标:

  • 清晰与竞品差距与机会点;
  • 关注核心模块的使用体验;
  • 了解用户的主观感受。

因此,我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动,收集了大量的定性数据及定量数据。

如何做好用户体验度量?京东设计师总结了五个步骤!

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能,计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象,测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后,通过使用各家产品的具体功能,拆分一级、二级、三级或更细节的功能,填写完整性分析表;

计算完整性得分(京麦具体计算以二级功能为标准,分为六个不同等级,分别对应六个分数)。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:可以通过与产品同学的沟通,共同完成各级功能模块及相应支持程度的定义;后期可以纳入客观数据指标,结合用户的参与情况、平台满意度计算权重,重新定义重要程度、支持程度;以一个季度为统计周期,及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话,较为直接、细致地了解不同角色用户如何使用各功能,以及在使用过程中经常遇到的问题,了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募:提前 1 周设计招募问卷,并在 QQ 商家群投放、回收,筛选目标用户,提前打电话确认访谈意向;

前期沟通:添加商家的微信,了解商家的基本信息,预约商家参与时间,并要求商家提前在手机/电脑上安装腾讯会议;

访谈大纲:根据具体想要了解的功能模块、用户群体等,撰写访谈大纲,包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等;

实施访谈:提前预约会议室,打印访谈记录表。需要至少一位主持人、一位观察记录员,访谈时长控制在 30-45 分钟左右;

访谈结果梳理:每场访谈结束,参与者进行快速回顾总结,截取录屏中关键段落,提炼对应的用户行为、态度、问题、需求等信息,逐步建立猜想,并在后续的访谈中进行验证、修改;每轮访谈结束,对共性问题进行分类归纳,梳理电子化在线表格;撰写访谈报告(可能包括用户体验地图、用户画像等);

后续跟进:邮寄周边礼物,并建立商家体验群,维护长期合作关系。

如何做好用户体验度量?京东设计师总结了五个步骤!

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:提前争取更多利益点吸引商家参与;提前明确目标用户类型,与产品侧配合利用线上使用数据定位筛选访谈用户(如使用经验、使用频率、经营类目等);提前与受访者沟通,可以让商家准备反馈问题列表,与商家反复确认时间;确认用户接受上访谈使用的设备及场景,对可能出现的意外情况做预案;访谈后,在企业版微信建立相对稳定的商家关系,以便回访;访谈信息整理需要更多人同时参与,尽量在访谈当天或次日完成转录、问题分类,及时补充假设,在后续访谈中验证/推翻;及时从录屏中截取关键段落、截图,便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论,同时通过对大量用户的主观打分、行为习惯的分析,得到对产品整体的使用评价,直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计:提前 1 周开始设计问卷,根据前期访谈结果,有针对性地设计各模块、各角色对应问题;

问卷投放:针对不同端的问题,分为 2 个问卷,分别投放;(如果需要长期追踪,建议以季度为单位,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放);提前与产品、运营侧进行沟通,确认上线、下线时间,以及所需物料,如文案iconbanner 等;

问卷结果梳理:数据清洗、分析;梳理关键信息,制作图表;输出报告结论。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:1. 尽量咨询用户研究团队专业人员,听取他们对问卷题目设置的建议,留出组内讨论、线上测试时间,进行 1-2 轮调整;

2. 如果需要长期追踪,建议以季度为单位投放问卷,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放;

3. 提前与产品、运营同学进行沟通,确认上线、下线时间,以及所需物料,如文案、icon、banner 图等。


3. 做诊断

收集了大量数据信息之后,我们需要设定不同维度的权重,并通过一定的规则计算出各指标的最终得分。比如工具类产品,可能更强调用户达成任务的效率,因此易用性和任务效率权重较高,而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式,每项指标的数据颗粒度也不同,有的可能只针对一个模块,有的可能涵盖整个使用过程。因此,我们在设定计算规则的时候,要尽可能的全面客观。

最后,将度量体系的各个维度进行加权计算,基于数据表现,可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析(客观)

目前,京麦在整个商家后台行业中已经处在功能相对较为完善的阶段,因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比,可以看出各端功能的覆盖完整度,这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度(主观)

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准,是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后,我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式,以李科特五度度量(强烈反对=20 分,反对=40 分,中立=60 分,赞同=80 分,强烈赞同=100 分)换算获得了易用性的分数。

如何做好用户体验度量?京东设计师总结了五个步骤!

参与度 | 各角色用户常用功能模块的使用率(主观)

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型,通过对各类人群常用功能模块的使用率的加权平均值,计算整体的参与度。

如何做好用户体验度量?京东设计师总结了五个步骤!

任务效率 | 各角色用户完成特定任务的投入产出比(主观&客观)

任务效率是用户通过使用京麦完成某一特定工作任务(发布新商品、填报活动等)的投入产出比,通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划:与各条业务线沟通,以他们的业务指标来定义更具体的任务效率指标,通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受(主观)

使用季度性《平台商家满意度调研报告》统计得分,也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分,产品已经有了较为宏观的改造方向,我们可以再结合前期调研收集的用户反馈问题,重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法,对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程,首先提升完整性,然后分批次地针对核心模块优化易用性、任务效率,并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续,我们也希望引入更多用户的行为数据指标,如用户活跃度、用户增长率、功能插件使用率、页面点击率等,从业务指标中获得更全面的数据信息。

同时引入监测工具,对产品重塑后的关键指标进行持续追踪,周期性监测指标的改善情况,让各部门同时参与体验度量的工作,提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化,再到最后的优化落地,让体验度量的闭环全程可管理。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:优设  作者:京东设计中心JDC

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计体系的响应式设计

资深UI设计者

随着产品生态的多端化进程,越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露,例如:

XX 能力要在手机上使用,不得不单独为移动端开发几个页面甚至一个产品(反之亦然);产品数据量很大,Ant Design 默认字体 / 间距太大了,不够紧凑;版式不够优化,造成空间浪费;

Ant Design 基于如何在小屏幕中解决信息展示问题这样的出发点也在很多组件中提供了响应式设计,但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一,因此在全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究。

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分,从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息,旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念,关于响应式设计通常会有两个普遍认识,即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念,它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸,而 RWD 是同一套代码做弹性的适应,本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。


移动优先设计策略

提响应式设计不得不提「移动优先」设计策略,移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略,基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略,它认为在响应式设计中优先为屏幕限制更大的移动设备设计,再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法,Fiori 尤其指出「移动优先」专注核心功能,专注增强而非降级,提前考虑移动端更多的独特特性以及异常情况,能提供更好的体验。Material Design 可能算是移动优先的最佳实践,它本身就诞生于 Android 平台,而后再通过大量响应式规则扩展到桌面及 Web 端,使得 Material 在多端都拥有一致贯穿的良好体验。

(Material Design 的响应式设计)


「移动优先」本质上是基于一种「增强」的设计思想,一个产品如果要同时适应于不同的设备,一直以来有两种策略:优雅降级 vs. 渐进增强,后者认为先从最小和最受限制的低级设备(移动设备)入手,再为更高级的设备(桌面设备)增强信息和交互,这意味着在更多限制下,迫使设计考虑如何减少、汇总,分组信息,有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」,Fiori 尽管强调「专注增强而非降级」,但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖,让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里,移动端仅展示汇总的报告图表信息,但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表,而在桌面端同时包含了明细数据与图表两部分信息,这看上去并不像是一个「增强」的设计思路,更像是在全量需求下基于设备限制所采用的「降级」策略。

(Fiori 报告界面的 Adaptive Design)


因此「移动优先」并不一定是形式上优先设计移动端,它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强的设计思想应该体现在更细分的场景中,例如在布局、信息排版以及交互反馈中,我们应该优先考虑限制更大的移动端;在一些交互方式上,优先考虑限制更大的鼠标操作。甚至在复杂业务场景里,优先满足核心业务流程顺畅也属于渐进增强的策略范畴。


设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸而变化也是一个常见的应用方式。

(Resize)


Reposition – 重新定位

改变 UI 元素的相对位置,以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上,或是在组件里对一些特定元素的处理,例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。


(Reposition)


Reflow – 重新排列

改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon 的 Fluid Grid。



(Reflow)

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。



(Show / Hide)

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件,通常应用在对具体的组件做针对性响应式设计中,但需要注意用户面对变化时的认知成本。



(Replace)

Re-architect – 重新构建

折叠或拆分信息架构,这种模式在 Web 端较难实现,通常出现在一些 Native App 的场景。



(Re-architect)

Density – 内容密度

除了上述 6 种模式以外,我把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度,而针对大屏幕的 Web 端则提供紧凑密度的方案,他们认为移动端手指交互所需的空间要求更高;Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

(Material Design 的内容密度示例)


值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计,越紧凑的布局栅格间距越小,这看上去很合理,却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义,但在内容密度的处理上和 Atlassian 恰恰相反,它认为高密度内容适用更宽松的栅格空间,相对是一个更合理的设计。在信息密度的问题上,我们的核心目的其实是提升信息效率而非单纯提高视觉密度,因此解法上需要更完善的考虑。

(Atlassian 与 Material 的栅格密度对比)


实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段,经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位,Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸,即 1rem = 16px,Alta 默认采用是 14px 的规格,并允许基于不同应用选择 12px 或 16px 的规格,默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现,这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的,它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容,这使得设计能更方便地调整内容密度,或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题,且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端,主要为了两个目的:方便计算尺寸、在不同宽度的设备上等比缩放内容,这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段,在使用上本身也存在一定争议,而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用,甚至很多设计师还并不了解相对尺寸单位的使用方法,广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的,包括考虑了移动设备的横评竖屏情况,关于详细的规格设置其实并没有太大参考价值,设计体系都是根据自身定位以及设备覆盖的情况来制订的,例如 Material 的断点在低分辨率范围分得非常细,是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下,屏幕端点不需要太多,无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。


(屏幕断点分布)

Fiori 的断点设计比较有意思,在设计文档中仅有基本的布局规则,没有明确的 Breakpoints 规则,Fiori 对于不同的组件会设计不同的 Breakpoints,例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格,而在 Form 的组件中,Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞,从这点上看出 Fiori 认为不同的组件有不同的表达模式,因此应该针对性对组件进行优化。

(Fiori 的 Table 组件适配情况)

(Fiori 的 Form 组件适配情况)


Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力,从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局,Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中,Flex 布局通常结合 Breakpoints 使用,在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力,例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力,响应式设计要解决布局的问题将会深度依赖这些基础技术手段,本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的,我们通常将页面横向分为 N 列,定义每一列的尺寸与间距,这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的,通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列,同时一些设计体系还提供了可见性相关的 token,来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统,因为 12 的因数够多,能满足足够多的布局细分同时又不至于太复杂,Carbon 的做法更加 geek 一些,他们的「2x grid」采用了 16 栅格系统,布局粒度更细但放弃了 3,6 这样的因数。 Ant Design 为了满足复杂的业务情况,采用了 24 栅格系统,24 栅格提供了更高的灵活性的同时,也大大增加了复杂度,面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念,核心思想是在较小的屏幕上降低栅格数量,将多余的栅格自动折行弹性布局。


(Carbon 的栅格定义)

在屏幕尺寸变化时,栅格主要有两种响应模式:Fluid、Fixed


(Fluid)


(Fixed)


这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置,在不需要特定响应式的场景中不再需要指定繁琐的 token,且能满足大部分高频且通用的情况,在一定程度上降低了成本。


组件应用

除了通用的响应式规则以外,设计体系在具体组件中的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况:

框架

(Carbon 的框架设计)


框架算是一个特殊的组件,在不同的设备中界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为:

  • Header – 通常情况下常驻

  • Sidenav – 分为左侧右侧两种情况,一般用于放置导航,在不同设备会有展开,收缩,隐藏三种状态

  • Content – 内容区,通常由 Grid 控制布局

  • Footer – 如有,固定在页面底部

  • Float – 浮动框架,用于临时状态,通知或弹窗等

设计体系通过对框架的定义,以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。


(Material 的响应式框架)


组件

Fluent 或 Material 在设计文档中更多基于基础的网格,布局,设计模式来阐述通用性的响应式规则,因此他们的响应式设计有非常好的延续性,组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面,他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里,在桌面端与移动端分别是 table 和 list 的模式,这个方案并不是通过全局抽象规则得出来的,而是基于对组件的针对性设计,正如他们为不同的组件设计了不同的 Breakpoints,这种针对性也适用于特定的 UI 解决方案。

(Fiori 针对 Table 的响应式设计)

在一定程度上抽象规则的同时,如果我们能够为每一个组件都考虑到不同场景的响应式,当然就会提供更精细化的体验。在一个完备的设计体系里,在设计每一个组件资产时都以渐进增强的设计策略,考虑到不同的设备及屏幕适配是非常有必要的。

响应式设计的世界烟波浩渺,书不尽言,言不尽意。Ant Design 目前计划从布局基础规则以及内容密度的解决方案切入,逐步完善响应式设计的体系,这是一个重要且漫长的过程,至于文中挖下的坑还需要深入研究逐一补充,本篇初探先到这里,欢迎大家留言指出问题也很希望大家能留下想法共同探讨。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





设计师如何在设计中讲好故事?

资深UI设计者

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何为券商类产品设计流畅、高效的自选股功能?

资深UI设计者

导语:“自选”作为金融类产品的基础功能,迭代至今已经非常成熟了。放眼望去,市面上主流金融产品的自选功能似乎都大同小异,但是体验下来会发现,细分领域下的设计侧重点却有所不同。


一、把握需求

如果我们将“自选”转化为熟悉的C端功能,它类似于“收藏夹”、“关注列表”的概念,是用户管理交易对象的重要阵地。除了常见的管理对象(交易概念中称作“标的”)、管理分组外,“自选”还会存在对数据和使用习惯的管理需求。

  • 站在业务视角:券商的核心优势在于“交易”,所以业务目标自然为“交易”服务。“自选”相当于一张快捷交易导航,我们提供的诸多功能都是在帮助用户快速、便捷的调整这张表,直到它达到“为我所用”的程度。
  • 站在用户视角:不同交易习惯的用户,对自选的操作频率有高有低,在保证效率的同时,还需要让每一类用户都能用的顺手。

二、竞品调研

1. A梯队:美港股券商,富途、长桥

  • 共同的设计侧重点:功能的组织符合用户心理模型,任务专一,功能精炼,不追求全面、追求使用效率。
  • 共同的弊端:“管理分组”的交互设计不够流畅。

富途“管理分组”采用的交互方案,初期学习成本是很高的,它虽然充分考虑了效率问题,却低估了用户理解上的困难。(截止本文发布前,富途最新版对现方案做了视觉样式上的更新,看来设计师也意识到了该方案目前存在着一些不够清晰的地方,期待后续交互上的迭代。)

长桥将分组的“新建、排序、删除、重命名”拆的很散,理解上不困难,操作起来较为繁琐。

2. B梯队:平台类产品,腾讯自选、东方财富

  • 共同的设计侧重点:相关功能尽可能的聚合在一起
  • 共同的弊端:当用户目前仅想完成一项任务时,产品每次都会同时提供多项任务,操作通常很难专注。用户不可避免的会多花些时间和好奇,来理解与本次操作任务无关的信息

3. C梯队:社区类产品,雪球

设计侧重点:管理标的、分组与数据、使用习惯的设置完全分开

一些细节问题:比如“管理本页股票”,在批量操作的场景下,底部栏却存在不能批量操作的选项

小结:对三类产品的竞品调研也验证了我们最初对需求目标的把握,为券商类产品设计“自选功能”,效率和流畅度是最关键的。设计目标明确了,接下来我们看看目前都存在哪些问题,以及对应的解法。

三、问题与解法

1. 当用户精准搜索一个标的,并将其添加至自选后,并不能在当前完成该标的的分组

如图所示,现在如果想完成上述任务,需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成,且每次可以将标的同时添加至多个组。

(注:Snackbar虽然源于安卓原生的MD设计系统,在IOS并无此原生控件。但是随着二者在设计上日渐趋同,且控件的应用上也早已互通有无,所以Snackbar在IOS的使用,合理即可,不必纠结于平台差异。)

交互关键点:

  • 想提升操作效率,不仅局限于步数、路径的缩短,它还可能是场景的正确连结、重复操作的合并;
  • 使用Snackbar,本质上是给用户选择的余地。在操作a完成后的2-3秒决定是继续进行操作b,还是离开当前场景。

2. A功能和B功能在自选场景分别有两条触达路径,不过多路径的存在不但没有提升功能的使用体验,反而带来了不小的认知负担

关于“冗余路径”应该保留还是去除,一直以来都存在争议。讨论这个争议的前提是:冗余路径虽然不是最优路径,但是满足了特定场景下用户的特定操作习惯。

当“冗余”只是冗余、没有任何增益时,也要敢于做减法;因为同时还需要考虑一点:出发前的选择越多,用户的决策时间越长。

交互关键点:

在业务方提出为同一个功能再添加一条新的路径时,我们必须要弄清楚,这条新路径是为解决什么问题存在的。不解决问题的需求,大部分是对产品的无效堆砌。做好产品的“守门员”,给出专业的判断,是交互设计师的重要职责之一。

3. 关于“自选”的设置功能,这里会讨论到几个典型的“欲速则不达”的交互问题

1)对功能的整理和归类,是我们为用户留下的使用线索。如果推理时间过长,说明线索的指向性出了问题。

  • 问题:将“管理分组”归至“设置”,分类不清晰;“数据项”Tab中的设置项没有根据相关性进行分组;
  • 解法:在“设置”中去掉“分组” ;数据设置项根据相关性进行分组 (指标→显示→排序)。

2)如果层级 1 包含层级 1.x,那么层级 1.x 的操作不应放置在层级 1 的认知区域。

  • 问题:数据项Tab的“默认数据”放在顶部导航栏,功能层级不匹配;
  • 解法:功能层级调整至匹配。

3)如果用户设置了一些项目,无法在预期场景看到对应的效果,应提前给与说明。

  • 问题:完成数据项设置后,无法在竖屏看到全部生成效果;
  • 解法:在数据项设置页顶部进行生成效果的说明提示。

交互关键点:

注重“效率”是没错的,比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白,也就谈不上“效率”的提升。

4. 最后一个case我们看下互联网产品中最常被忽视的细节-文案

场景1:批量管理标的。

文案问题:按钮表意都是“删除”,带来的实际结果是不同的,存在歧义。

场景2:数据项设置。

文案问题:没有进行规范化处理,增加了选项的理解难度。

交互关键点:

很多时候,一套语义清晰、逻辑顺滑的文案,可以等价于某个功能优化的迭代周期。实际功能点不变,只是替换文案,就能让用户用的清爽明白。这样的“好买卖”,却一直被严重低估。

四、总结思考

遇到同质化较高的需求重构时,初期应扔掉“套路”思维,从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品,推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从,要经过思考和反复论证,推导出最适合自己所负责产品的交互方案。

当设计深入到细节,出现了可A可B的选择时,回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案,从我们的选择中,也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。

每一份交互输出都应该是有观点的输出,即使最终我们的观点被业务方、协作方的诸多因素所淹没,仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品,都是由一个个鲜明观点铸造而成的。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理  作者:cony的小书包

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何建立一套设计系统

资深UI设计者

一、项目背景

1. 业务背景

  • 3名设计师协同负责APP的设计工作,设计侧介入时间晚,周期短,由于是v1.0版本,没有可以复用的设计组件,从0-1探索设计风格,定义视觉语言。

  • 前期每天依赖钉钉传输本地设计文件,设计语言不统一,效率低。协作工具不是很理想,后期待优化。


2. 设计背景

  • 当我们开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。

  • 直接复用其他产品的现有组件库并不能完美套用在自己的产品上,不能形成自己的产品调性,甚至有些组件不符合自身产品的使用场景。



二、设计规范的价值

1. 设计层面

  • 随着项目开始成熟,设计也需要一套统一的标准,提升设计质量以及设计的一致性。有了规范及标准,输出才能趋向于稳定,迭代才能有序的进行。

  • 沉淀设计资产,使得设计更加持续地输出价值,减少一次性设计,使设计师不要每天局限在元素样式设计中,而是可以站在更高的层面上来思考业务与体验。


2. 开发、测试层面

  • 与设计规范同步形成研发资产,避免重复造轮子,保证代码质量,降低维护和拓展的成本。

  • 测试避免重复的无意义走查。


3. 产品体验层面

  • 统一产品体验,映射品牌心智。

  • 规范的制定,能有序统一不同页面层级的信息架构,视觉表达。用户在产品终端内,各链路、各阵地的体验是一致的,看到的信息元素,也会有共性的传达。这些共性的元素,组成了品牌的内核,能够帮助用户建立心智。


4. 协作层面

  • 降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

  • 设计师无需再花精力思考定义新的元素样式,既能保证统一性,同时通过复用体系,设计师也可以更高的提升效率,释放一定执行的工作量,可以把更多的精力放在前置思考决策环节,帮助业务、用户提升价值。



三、设计规范的目标

1. 设计风格一致

不同设计师有不同的设计风格、设计手法,项目有多个设计师协作时会出现不同的设计语言,需要统一产出的设计样式。

用户在使用产品时可以感受到统一的设计语言,从而降低用户的理解成本。


2. 提高设计效率

通过组件库高效协同工作


3. 建立稳定迭代机制,完善设计流程

版本迭代时,按照设计规范统一设计语言,有不完善之处,和项目设计师讨论确定方案,补充规范文档。



四、如何搭建设计系统

1. 设计原则

对于设计系统而言,在开始的第一步首先要确定一个标准,一个指导原则,在遇到不确定的设计过程中,依靠设计原则来引导方向。   


  • 其他产品设计原则

  • 有赞:产品原则:产品定义、产品设计、产品研发、产品运营。设计原则:高效、友好、安全

  • TED:追求永恒,而不是追求潮流

  • Pinterest:清晰易懂、充满活力、牢不可破

  • Airbnb:统一、通用、风格化的、对话式的

  • 我们的APP:扁平、亲和、简约


2. 色彩规范

主色

  • 采用品牌色红色,色相根据产品调性有所调整

  • 主色色阶使用扩展色生成器生成,在开源网站上根据自己的需求调整参数,创建色彩体系。  

  • 在制作组件时,将颜色添加 主色、辅助色、中性色为一级分类,例如:01_主色;再添加二级分类,例如:01_主色/red ;三级分类根据颜色饱和度,用x%命名,例如01_主色/red/100%。

  • 命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。



辅助色

  • 我们不仅需要品牌色来传递品牌价值,我们还需要辅助色来组成我们产品体系的颜色搭配,实现不同功能点的视觉呈现。目前编程猫APP辅助色暂定为黑色。

  • 对于辅助色的选择,可以选取了同类色、互补色、对比色三种辅助色系。


  • 同类色:

  • 色环上相差15-30度的色彩,非常舒适,色彩过渡自然,温和,给予用户安心,信任的心理预期。并且于品牌色的色相冷暖性质一致,和谐统一。(将品牌色设置为最中间的点,就可以得到两个辅助色)如下图



  • 互补色:

  • 指在色相环上角度为180°的色彩,比如我们最常说到的3组互补色:红和绿、蓝和橙、黄和紫。如下图:



  • 对比色:

  • 没有互补色那么严格,指的是在色相环上角度在120° - 180°之间的色彩,并且理论上来说,互补色应该也是包含于对比色之内的。比如:粉色和绿色就是对比色。如下图:



  • 校正辅助色

  • 校正的原则一:色相差值不能超过15近似色的选取,保证色相不超过15,保持统一的视觉体验。

  • 校正的原则二:尽量保持感官明度一致

中性色

  • 中性色作为辅助色,也是调和颜色视觉的一种。它本身不带情感色彩,可中和其他任何颜色,自然界中没有纯黑或者纯白的颜色,所以将纯黑色降了纯度,使之符合感觉舒适程度。中性色也常用于字体的使用,并且以不透明度的形式落地。

  • 在中性色组件里,由于文字、背景色都属于中性色,分别定义了三大类的二级分类,分别BG、Black、Text


功能色

B端产品多用,此处不过多赘述。


3. 字体规范

字体的命名方式为序号_标题类型/字重/对齐方式/字号的层级结构,例如「01_主文字_标题_按钮文字_正文/加粗/Center/28px」;一级分类定义了五个大类:

  • 主要的文字:主文字、标题、按钮问题、正文;

  • 次要文字:副标题、辅助文字、弱标签字;

  • 禁用文字;

  • 标签文字:文本链接、功能文字;

  • 特殊字体。


4. 栅格系统

我们都知道多数栅格里的间距都采用8/6的倍数,有了8这个基数后其他都很容易定义,但是前期我们2位设计师在设计初期页面时,1个采用6倍栅格,1个采用了8倍栅格,导致设计稿不统一,浪费了时间修改调整

      

那具体应该是用6还是8呢?

  • Web端常见框架Bootstrap用8为基数,响应式布局更灵活

  • 减少出现奇像素偏移造成模糊

  • 开发更容易理解的数字8

  • 能被最多的屏幕尺寸整除适配



5. 图标设计

一级分类分为导航类、功能类、系统类三大类,二级分类根据场景和名称进行细分。前期二级分类用尺寸来进行分类,但是后期讨论用尺寸定义寻找某个图标不够便捷,如果找「返回」,设计师并不知道这个返回是多大尺寸的,寻找起来就比较费力,所以改成了按照场景分类。

 

根据图标形状,按照方形、圆形、横向、纵向输出图标绘制模版,便于用户感知到统一的图标风格,也便于设计师对图标进行绘制和调整。


6. 通用控件

根据原子理论的定义和命名方式,依次完成对其他通用控件的原子、分子和组织的定义,例如:按钮、列表、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。


Diolog 弹窗

  • 满足基本组件需求,跟随文案内容自动适配弹窗高度,按钮颜色可更换,文案字符样式可更换

  • 使用包含具体动作的动词,即使不看上下文也可以通过按钮判断,而不是使用【确定】、【取消】等宽泛的词汇。



Default 缺省页

给用户提供解决方案,而不是让用户自己寻找问题原因

List 列表

  • 符合前端-盒子模型

  • 盒模型是一种描述对象尺寸和间距的方法。它由 4 个组件组成:边框、边距、内边距和元素本身的尺寸。

  • 边框:围绕元素边缘的描边粗细。大多数设计工具不允许这影响整体间距和尺寸。

  • Padding:元素边界与其子元素边界之间的空间

  • 边距:元素边界与相邻对象之间的空间


在做每个模块时,不仅仅只是把默认的文本/元素制作出来,它的热区也要让开发可以理解,按照盒子模型的原理,比如在做List,「单项输入」文本的行高,整个单元格的高度需要用白底画出来,明确padding值;与其他元素/设备之间的边距(Margin)要也表示出来。



五、维护与管理

1. 存储地址

  • sketch cloud云端同步

  • 云端管理会有一些较大的优势。比如更新通知更方便、每次大家访问,都能下载到最新的规范,维护管理起来也会省事一些。


2. 更新同步

规范的改动性不要过于频繁,通常半年及1年左右的时间以上,进行一次较大迭代是比较合适的。每次更新以后,需要邮件或者其它形式,周知所有跟规范可能相关的人员。同步的信息主要有  :

规范本次修改范围及修改原因;

  1. 修改点罗列

  2. 优化后的版本号

  1. 最新的文件同步

  2. 推进变更计划




    蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

    截屏2021-05-13 上午11.41.03.png


    文章来源:站酷  作者:AmberU

    分享此文一切功德,皆悉回向给文章原作者及众读者.
    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

    蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何让用户更好的理解新产品

资深UI设计者

在做出一个新产品时,如果不能够有效地让用户感知到该产品所提供的价值,那么可能会让自己的判断有所偏颇。本文作者分享了如何让用户更好地理解新产品,我们一起来看看吧。


在做新产品过程中,我们会通过用户调研、市场研究等一系列的方法来维护自己产品的可行性。想要通过自己的努力证明产品是可以经受磨炼的,这都没错,但是我们会发现产品一面市,就会出现各种各样的问题。

这个时候你会怀疑自我的判断到底是否正确,还是决策上的失误,当然我们也可以把问题推到用户身上或者是市场的抛点行为。那么这些问题到底如何存在的?能否避免?

当构建新产品时,你需要帮助客户快速了解你的产品提供的价值。围绕客户的心智模型进行设计是关键。

但是你的产品是什么,它的作用是什么、针对的人群有哪些。对不同的人来说可能意味着非常不同的事情。

我们以modao为例。试想当我们听到它名称时候会感觉是一个什么样的产品?能帮助我们工作中的哪些问题呢?会不会有我想要的功能模块?

这些都是针对不同客户的。随着时间的推移,你的产品可以做什么,这些不同假设和观察会形成不同的心理模型。这些是客户看到新产品的镜头。

我今天要和你谈谈我经常思考的事情,任何正在构建产品的人都应该考虑的事情。

那就是用户如何理解新产品?当您构建新产品时,人们将如何理解它是什么、它做什么以及它将提供什么价值?

不久前,我遇到了一个案例,它非常清楚地说明了不同的人如何以截然不同的方式思考同一件事。那东西就是面包。该活动的工作原理是让人们拿一张纸和一支笔,画出制作面过的过程。

这看起来很简单,现在每个人都在构思面包的制作过程以及想要画出的东西:和面——揉面团——摆弄形状——添加食材——放入烤箱——成品(心里活动)。

如何让用户更好的理解新产品

但这只是一个人对如何制作面包的心理过程。事实上,如果你要求很多人这样做,你会得到人们如何制作面包的多种版本。

对于某些人来说,这完全取决于个人的心里活动。有的人会更多地考虑烤面包机的机械原理。所有的部分是什么?其他人会考虑整个供应链,从进入面包的谷物开始。

如何让用户更好的理解新产品

如何让用户更好的理解新产品

一、不同的思维方式决定着不同的面包模型

这些是不同人的心理模型的插图,一个人如何相信某事是有效的。由于人们有不同的经历,做出不同的假设和观察,他们可以形成不同的心理模型。

现在,如果我们看看面包的实际制作方法,有六个主要部分。有两个主要对象,面和烤箱。然后你就有了热量和时间应用于它们。

当你将这些组合在一起时,你将获得使用烤箱制作面包的系统模型。你只需将弄好的面包模型放入烤箱,打开它,加热面包,等待一段时间,面包就可以吃了。这就是我们所说的系统模型。这就是实际工作的方式。

当你构建软件时,这通常会向人们展示并通过界面交付给他们。当你拥有人们相信某事如何运作的心智模型,以及它实际运作的系统模型时,当这两者相交时就会变得有趣。

当他们见面并有意义时,人们会发现界面很直观。当事情不匹配并且存在断开连接时,人们会发现它很难使用。

如果人们用许多不同的方式来解释如何做面包,那么解释一些新的东西可能真的很难。

人们通过将它们映射到现有类别来理解他们所看到的事物。当他们无法将某些东西映射到他们已经知道的东西时,他们会发现它很混乱。

以醒图为例,人们以非常不同的方式看待它。有些人认为它是一个摄影应用程序,其他人认为它是关于增强现实和应用滤镜的。

有些人将其视为一种游戏,而另一些人则认为它只是社交分享。

但是,如果您以前没有使用过醒图,那么您可能会对它有一个非常不同的心智模型。你实际上可能会感到困惑。也许这只是美少女使用的东西。

这就是为什么第一次使用新的东西,当它没有映射到你已经知道的东西时,会真的很混乱。

既然你了解了它们是什么,那么你如何真正开始了解客户的心智模型?

这真的很难。你如何提取他们对某事如何运作的信念并使其对自己有用?你需要做的第一件事是与您的用户交谈。就像面包的例子,你想让人们画出使用你的产品的系统。

他们怎么相信它有效?当他们没有列出您构建的所有功能并专注于对他们真正重要的事情时,你可能会感到惊讶。

就像制作面包一样,你将获得大量不同的图纸,然后你需要将它们综合起来并找出共性。

让人们向你解释这些图纸,告诉你他们认为它是如何工作的。听听他们使用的词语。如果我们考虑面包的例子,你可能会得出两种不同的心理模型,人们看待制作面包的两种基本方式。

一方面,有些人会用烤面包机来做,而另一些人会用烤架来做。它们只是两种不同的方法。

如果你是一家生产烤面包机的公司,并且拥有一台具有许多不同功能的全新烤面包机,想象一下你试图将其出售给考虑在烤架上烤面包的人;这没有意义。

它不会真正引起他们的共鸣。那是因为在他们使用某物的方式,他们相信它如何工作以及您的产品如何工作之间的心理模型之间存在差距。

你需要通过两种主要方式弥合这一差距。首先,您可以尝试让您的产品反映他们对产品运作方式的看法。

您可以做的另一件事是教育您的客户,向他们传授新知识并帮助他们创建新的心智模型。

二、如何教育用户使用你的产品

让我们谈谈如何教育你的客户。当出现人们不知道且无法解释的新事物时,你需要告诉他们它是什么,并且需要有人向他们展示和解释。

简单的东西可能真的很好,如果你能马上理解一些东西,那真的很强大。

但是很多事情并不是这样运作的,他们也没有必要这样做。你有一些例子,比如非常简单的超级马里奥,一直到最后迎接公主。这并不意味着上下左右的操作和游戏模式一样简单。也不应该。

但是让它易于学习,这样你就可以教人们如何使用它在软件中真的很强大。那你怎么能做到呢?

最简单的方法是使用教程和指南。就像在电子游戏中一样,当你开始并通过第一级工作时,你就开始探索和学习世界。

你想对你的客户做同样的事情,并教他们什么是东西。解释什么是新概念,新术语。进行演练并与你的客户交谈。

你可以做的另一件事是帮助你的产品与他们的心智模型紧密贴合。有几种方法可以做到这一点。

1. 内容层面

在界面层面,你可以一直使用标准模式。Web 或 iOS 或 Android 的模式已经过尝试和测试,人们已经通过使用其他地方的接口来学习这些。

如果某物看起来像一个按钮,它应该像一个按钮。如果它看起来像一个文本框,它应该像一个文本框。花时间在这些界面上虽然新颖而有创意但实际上会使客户感到困惑。

他们花时间学习如何使用模式或界面,而他们应该花时间了解你的产品是什么及其提供的价值。

2. 内容级别

接下来真正强大的是内容级别。大多数时候,人们不会花很多时间考虑他们在产品中使用的内容和语言。但它可以非常强大。

当人们解释他们认为您的产品如何工作时,您想听听他们使用的名词和动词。名词是他们认为在您的系统中的对象。这是他们为他们使用的语言。

动词是他们认为连接在一起的方式。因此,如果他们说,“发送消息”,那么这就是你想要与他们产生共鸣的语言。所有这些都意味着当你第一次打开它们时,你知道会发生什么。

你可以使用的最后一件事是隐喻。这些对于连接人们现有的心智模型非常有效,因为你正在捎带他们已经学到的东西。通过这样做,你可以帮助他们快速理解某些内容。他们越早了解某物是什么,他们就能越早从中获得价值。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:人人都是产品经理  作者:秀琴

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


用困难分解法解决特殊场景的交互难题

资深UI设计者

在B端产品中,经常会出现层级深或者数据量过大而导致正常控件出现体验问题,那在这方面的交互时,可以引入什么样的新思路呢?

量变引起质变的交互难题


作为唯物辩证法的基本规律之一,“量变引起质变”适用于很多事物的发展规律,而我最近在交互设计中,也发现了很多类似的问题。例如一些常见的控件或者交互方式,在数据量庞大或者层级过多的特殊场景下,就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中,当“Corner Case”变成一种常态,常见的控件就会开始因为“量变”而引发“质变”,一下子成为用户的困扰。













看了以上两个案例,我们会发现,常规的控件和常用的交互方式在这些“难搞”的场景下,都不再好用了。那我们是否能另辟蹊径,利用一些其它的交互思维,来解决这些棘手的交互难题呢?


困难拆解法


其实一提到“棘手”,“困难”,大家可能多多少少,在网上听过这样的“鸡汤”:“别畏惧困难,困难是可以拆解的,当把一个困难拆解成一个一个小目标去完成时,我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法,无论是网上火爆的各类成功学,还是一些成熟的项目管理理论(例如经典的Work Breakdown Structure)都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去,但是我今天想做一个大胆的实验,把困难拆解法应用到交互设计中来,看看利用困难拆解法,能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。



既然要做困难拆解,我们总不能随意去拆解,总得有一些拆解的原则和方法论,以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论,那就参考一下Work Breakdown Structure中的拆解原则,来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则:

  1. 将主体目标逐步细化分解,最底层的日常活动可直接分派到个人完成;

  2. 每个任务原则上要求分解到不能再细分为止;

  3. 日常活动要对应到人、时间和资金投入;

  4. 整体拆解的任务,最终可以支撑总任务的完成。

如果我们从中提取一下关键意义,就是:

  1. 大目标拆解成小目标;

  2. 拆分到最小颗粒度;

  3. 每个小目标需要有对应成本的衡量;

  4. 最终完成总目标。


最后,可以将原则的关键意义与交互设计做一个对应:

  1. 将一个场景内的大的任务目标,逐步分解成一个个小的交互行为

  2. 每个交互行为要尽可能的简单直接,只针对一个交互目的的达成;

  3. 拆解的每一个小目标都要有对应的交互成本的计算;

  4. 整体拆解出的小的交互行为,最终可以支撑总任务目标的完成。


分析到这里,我们大概总结出了一些拆解的原则,但是仔细看这四条原则,大家会发现,目前还少了一个概念的输入:那就是交互成本。如果没有交互成本的计量,那就没办法真正衡量出我们最后通过拆解制定出的方案,是否真正节省了用户的交互成本,提升了任务效率。

所以,在开始拆解之前,还需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼尔森·诺曼(Nielsen Norman)将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和大多数初级设计人员都有这样的误解,即交互成本等于用户完成任务所需的点击次数。但是,它远不止于此。《Interaction design is more than just user flows and clicks》(作者Richard Yang)一文中讲到:交互成本可以分为物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的两个最重要的组成部分是注意力记忆力。当一项任务需要过多的注意力或记忆才能完成时,它将具有较高的心理交互成本(MIC),从而降低了可用性。

  • 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆,通常在任务过程中仅持续几秒钟。换句话说,当我们参与其他认知过程时,我们的工作记忆负责我们可以掌握的信息。米勒定律指出,普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。所以,任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下,如若必须要求用户在其记忆中保存11个以上的项目,请使用“区块”减轻其精神负担。“区块”指将信息分组。

  • 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出,“做出决定所需的时间会随着选择的数量和复杂性而增加”。




2. 物理交互成本(PIC)

  • 常见的物理交互成本(PIC)因素包括到达距离和目标宽度,用户输入的数量以及完成任务所需的操作等。

  • 费茨定律指出,点击目标的时间(例如,单击按钮)是距输入设备的距离和目标的击中框宽度的函数。例如,如果鼠标光标很远且按钮很小,则单击桌面上的按钮将花费更长的时间。

  • 评估物理交互成本(PIC)的最佳方法是“任务分析”和检查可用性指标,例如“任务时间”。





3. 交互路径和动机
在某些情况下,用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

  • 用户权衡每个操作的收益和成本,然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)较高,他们最终也会选择他们更熟悉的路径。

  • 具有较高动力(例如,由于品牌运营)的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉,那即使这个网站的交互成本很高,那么用户可能仍有足够的动力去完成他们的任务。然而,如果用户购买常规产品时付款流程的交互成本很高的话,那么他们很可能去其它网站购买。


从以上具体理论的阐述中我们可以看出,在评估交互成本的时候,步骤数,点击次数以及操作路径长短这些我们日常最关注的几个维度,并不能完全评判交互行为的好坏。而注意力成本和记忆力成本,以及预期效用,往往也会成为决定一种交互行为成败的关键而对于上面提到的“困难场景”,也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加,从而导致常规组件体验感崩塌。
下图中,我具体整理了各个交互成本组成的因素,以及会导致的结果。

如何拆解?案例一


我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题,我们通过困难拆解法和交互成本计算的逻辑,来解决上面提到的两个案例的问题。

首先,我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标,所以我们需要先确定这个案例的核心困难点。
第一步,分析问题:
这个方案的优点就在于:在物理交互成本上,省了一步点击,将信息直接po到定位的周围,根据格式塔的接近原则,用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少,展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下,就会产生大量的信息杂揉。定位与详情相互交织、覆盖,非常混乱。如果用户想在这种界面去寻找信息的话,将需要付出非常大的注意力成本,大大加长了用户选择信息的时间。心理交互成本的增加,对于用户的使用情绪,也会产生消极的影响。
所以,此案例的核心问题就是:移动端屏幕很小,在有限的展示范围内,无法容纳大量的数据,所以导致信息杂糅在一起,对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢?让我们开始进行第二步:拆解方案的主体。
通过分析可知,这个案例最小颗粒度的两个交互主体为:

  1. 在地图上找到关注区域的定位标记;

  2. 查看定位标记相对应的详情数据。

那么现在,根据上面提到的拆解原则,我们要将本来一步到位的交互行为,拆分成两个最小颗粒度的交互行为,然后分成两步来达成同样的任务目标。
第一步,在地图上只留下定位标记的显示,这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后,页面就一下会清爽许多;



而第二步就是将查看详细数据拆分成一个操作,即点击某一个定位标记时,详情数据通过弹出卡片,或者弹出弹窗的形式,去陈列详细数据。(如果详情数据少,就可以使用卡片的形式,这样不会打断当前操作;如果详情数据量很大,并且需要足够的拓展性以便后期增加详情,则可以使用弹窗的形式。)这么做则是为了让用户更专注于查看他所关注的详情信息。



阐述完解决方案,根据原则的3,4条,我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案:

1.物理交互成本:

  • 多增加了一个点击步骤。

2.心理交互成本:

  • 去除了界面中大量杂糅的信息,让用户可以清晰、迅速地查看地图位置,并高效的寻找用户所关注的区域定位;

  • 让用户只专注于查看他所关注的定位信息,避免了其它大量信息的干扰。即使通过粗略的估算,也可以算出来,这多点击一下的交互时间,要比在大量信息中去检索信息的时间要小得多。


其次从任务目标角度来衡量方案:
1.达成了与原方案相同的目的,即可以寻找某个区域内的定位标记,并可以查看对应的详情。
2.解决了信息杂糅在一起,对用户使用造成极大干扰的交互难题。
所以,综合成本和目标来看结果,这“多一步”的代价,实际大大提高了用户的检索效率。


如何拆解?案例二


当然,上面这个例子过于简单,第一交互路径短,第二也属于比较常规的交互解决方案。那接下来,我们一起来分析一个稍微复杂点的案例,看一看,当“海量数据”再加上“深层级”时,我们用这种方式是否还能解决。

首先呢,还是老套路,先一起来确定一下我们要核心解决的问题:


首先总结这个案例的优点:可以将操作在一个页面内全部铺开,并且通过点击快速打开下级页面,然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里,是没有问题的。
但是,在移动端场景中,因为屏幕大小有限,一直存在着数据展示条目十分局限的问题,而当层级过深甚至数据条目过多时,这种问题就会愈加愈烈。所以,如果生产环境中长期处于数据量非常庞大的状态,就会引出以下问题:


  1. 在一条完整的下拉控件中,只有第一层级的数量是恒定为1的,而二三四层的数据量都有可能为多个,尤其第四层的详情部分,数据条目会更多。所以在一个下拉控件中,假设每一层级都有数据的话,用户至少会看到4条信息。而如果二级信息大于两条的话,在全展开的情况下,就已经占据了一整屏的位置(场景三),从而导致用户在一屏下,至少要去看10-12行(数量随着层级4数据条目的变化有所增减)的信息。假设我们再划一屏,用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到,普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。用户在这个过程中面对海量数据,以及繁复的层级,会付出大量的注意力和记忆力成本,导致用户在使用产品的过程中,心理交互成本呈阶梯式增长。

  2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三),除了会增加用户的注意力和记忆力成本,还会增加反复操作的频次以及用户的错误成本,一旦操作错误或者看错数据,重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1,那么在多次滑动的情况下,我们滑动的成本就会变为1*X,这个X变量会随着数据量的增大而成正比的不断增加。


根据希克定律我们可知:决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是:减少页面内的层级和数据量,降低用户选择的复杂性。
但是从业务上来说,肯定不能直接去减少数据的总量,所以我们必须从交互的角度,去制定出可以减少用户选择的方案。找到了要核心解决的问题,接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢?目前的状态是:随着每个层级的不断铺开,用户查看的数据就会不断增加。那既然数据总量上我们无法动刀,那我们就从层级入手,把每个层级单独拆出来,根据拆分原则的最小颗粒度原则,给用户每一屏提供最少层级的选项,让用户专注于最少数据的筛选。具体怎么做呢?一起来看看下面的解决方案。


首先,我们先来拆分第一层级。第一层级是展开后面层级的前提,所以我将第一层级,设计成了一个顶部切换。点开切换后,会跳出弹窗,这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换,我们会立马回到列表页面,而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量,相比其它层级,在常规情况下是最少的,所以面对更少的选择,用户便可更专注、更迅速、更便捷的锁定任务目标。



其次,我们将二层与三层,作为展开式的卡片,形成一个卡片式列表。(这里将二三层放在一个页面内,没有拆到最小颗粒度让其形成两个页面,主要是为了控制跳转次数。)列表中的数据只包含对应的第一层级内的数据,所以这个页面中展示的数据比起之前场景中的“大而全”,已经得到一个非常明显的过滤。下拉层级,也减少为两层,层级复杂度相比之前简单了许多。另一方面,每条二层的数据都形成了一个独立的卡片,这样在视觉上,会有一个明显的区分。无论是数据量上的选择复杂度,还是视觉上对于层级的区分度,都大幅度缩小了用户的辨别成本。


最后,因为第四层经常会囊括大量数据,我们将第四层单独提出来作为一个独立页面(或弹窗),通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性,第二有利于数据的拓展性,即使再多的信息列入,也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话,我们甚至还可以加入TAB筛选,这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。



老规矩,在阐述完方案后,我们依旧根据原则的3,4条,对方案进行各角度的衡量。


成本角度:

  • 物理交互成本:点击数有小幅度增加,而因为屏幕内数据量减少,下划数得到了锐减,另外跳转步骤增多。页面的数据量越大,增幅的物理交互成本越少。

  • 心理交互成本:用户在每一个页面所需要做出的信息筛选得到了大幅的减少,每一步足够直观。因为层级页面拆分,而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本,大大高于因点击而增加的时间成本。低量心理成本的付出,也会提升用户的预期效用,从而使用户忽略一定程度的物理交互成本。

任务目标角度:
这个方案,把选择和查看多层数据条目,拆解成了多步操作,让用户在完成每一个层级内的查看和筛选中,去逐步完成对所有层级的查看和筛选。


拆解之后,每个层级页面中为用户减少了大量的选择和干扰,降低了用户选择的复杂性,帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看,通过拆解,既完成了场景下的任务目标、解决了之前存在的交互难题,也节省了大量的心理交互成本,提高了用户的预期效用。


困难拆解等于绕圈子?




看到这里,也许有人会说,感觉所谓的“拆解”,都是在“绕圈子”。其实没错,我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案,只有最适合场景的方案。如果可以解决核心的场景问题,对于低幅度的交互成本的增加是可以接受的。
另外,我们有时候在设计交互方案时,经常会过于计较物理交互成本,将“省一步”封为了交互设计的“金科玉律”,从而忽略心理交互成本和预期效用对用户体验的影响,结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时,不妨付出一些“提升物理交互成本”的代价,也许这多绕的一圈,或者多走的一步,反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:回去干活

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


在B端产品中,经常会出现层级深或者数据量过大而导致正常控件出现体验问题,那在这方面的交互时,可以引入什么样的新思路呢?

量变引起质变的交互难题


作为唯物辩证法的基本规律之一,“量变引起质变”适用于很多事物的发展规律,而我最近在交互设计中,也发现了很多类似的问题。例如一些常见的控件或者交互方式,在数据量庞大或者层级过多的特殊场景下,就变成了一种“蹂躏用户”的存在。所以在一些特殊业务场景的B端产品中,当“Corner Case”变成一种常态,常见的控件就会开始因为“量变”而引发“质变”,一下子成为用户的困扰。













看了以上两个案例,我们会发现,常规的控件和常用的交互方式在这些“难搞”的场景下,都不再好用了。那我们是否能另辟蹊径,利用一些其它的交互思维,来解决这些棘手的交互难题呢?


困难拆解法


其实一提到“棘手”,“困难”,大家可能多多少少,在网上听过这样的“鸡汤”:“别畏惧困难,困难是可以拆解的,当把一个困难拆解成一个一个小目标去完成时,我们离总目标就会越来越近了。”

这就是我今天想聊的——“困难拆解法”。说到困难拆解法,无论是网上火爆的各类成功学,还是一些成熟的项目管理理论(例如经典的Work Breakdown Structure)都对此有详细的、深层次的研究和实践。我们通常会把这个思维应用到复杂工作和项目的管理中去,但是我今天想做一个大胆的实验,把困难拆解法应用到交互设计中来,看看利用困难拆解法,能否解决我们上面提到的因为特殊业务场景而严重影响交互体验的问题。



既然要做困难拆解,我们总不能随意去拆解,总得有一些拆解的原则和方法论,以支撑行为的正确性。“成功学”中肯定很难找到详细的方法论,那就参考一下Work Breakdown Structure中的拆解原则,来看一看是否可以应用于交互设计的场景。

先一起来看下WBS中定义的分解原则:

  1. 将主体目标逐步细化分解,最底层的日常活动可直接分派到个人完成;

  2. 每个任务原则上要求分解到不能再细分为止;

  3. 日常活动要对应到人、时间和资金投入;

  4. 整体拆解的任务,最终可以支撑总任务的完成。

如果我们从中提取一下关键意义,就是:

  1. 大目标拆解成小目标;

  2. 拆分到最小颗粒度;

  3. 每个小目标需要有对应成本的衡量;

  4. 最终完成总目标。


最后,可以将原则的关键意义与交互设计做一个对应:

  1. 将一个场景内的大的任务目标,逐步分解成一个个小的交互行为

  2. 每个交互行为要尽可能的简单直接,只针对一个交互目的的达成;

  3. 拆解的每一个小目标都要有对应的交互成本的计算;

  4. 整体拆解出的小的交互行为,最终可以支撑总任务目标的完成。


分析到这里,我们大概总结出了一些拆解的原则,但是仔细看这四条原则,大家会发现,目前还少了一个概念的输入:那就是交互成本。如果没有交互成本的计量,那就没办法真正衡量出我们最后通过拆解制定出的方案,是否真正节省了用户的交互成本,提升了任务效率。

所以,在开始拆解之前,还需要先一起了解下交互成本。


交互成本


什么是交互成本呢?尼尔森·诺曼(Nielsen Norman)将“交互成本”定义为用户为实现其目标而必须付出的身心努力的总和大多数初级设计人员都有这样的误解,即交互成本等于用户完成任务所需的点击次数。但是,它远不止于此。《Interaction design is more than just user flows and clicks》(作者Richard Yang)一文中讲到:交互成本可以分为物理交互成本(PIC)和心理交互成本(MIC)。


1. 心理交互成本(MIC)

  • 心理交互成本(MIC)的两个最重要的组成部分是注意力记忆力。当一项任务需要过多的注意力或记忆才能完成时,它将具有较高的心理交互成本(MIC),从而降低了可用性。

  • 对于不同类型的记忆都有广泛的分类。最短的记忆类型称为工作记忆,通常在任务过程中仅持续几秒钟。换句话说,当我们参与其他认知过程时,我们的工作记忆负责我们可以掌握的信息。米勒定律指出,普通人一次只能在他们的工作记忆中保留5-11件物品。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。所以,任务不应要求用户随时在其工作记忆中保留七个以上的项目。在极少数情况下,如若必须要求用户在其记忆中保存11个以上的项目,请使用“区块”减轻其精神负担。“区块”指将信息分组。

  • 与注意力和记忆有关的另一个考虑因素是“希克定律”。此条定律指出,“做出决定所需的时间会随着选择的数量和复杂性而增加”。




2. 物理交互成本(PIC)

  • 常见的物理交互成本(PIC)因素包括到达距离和目标宽度,用户输入的数量以及完成任务所需的操作等。

  • 费茨定律指出,点击目标的时间(例如,单击按钮)是距输入设备的距离和目标的击中框宽度的函数。例如,如果鼠标光标很远且按钮很小,则单击桌面上的按钮将花费更长的时间。

  • 评估物理交互成本(PIC)的最佳方法是“任务分析”和检查可用性指标,例如“任务时间”。





3. 交互路径和动机
在某些情况下,用户可能采取多种路径来实现其目标。用户根据“预期效用”的概念来决定采用哪种路径。

  • 用户权衡每个操作的收益和成本,然后选择收益与成本之间最佳平衡的路径。用户趋向于选择自己预期中交互成本更低的那条路径。如果操作路径不直观或不熟悉,即使物理操作成本很低,但由于心理交互成本(MIC)较高,他们最终也会选择他们更熟悉的路径。

  • 具有较高动力(例如,由于品牌运营)的用户更有可能承担较高的互动成本以实现其目标。假如消费者是某品牌的忠粉,那即使这个网站的交互成本很高,那么用户可能仍有足够的动力去完成他们的任务。然而,如果用户购买常规产品时付款流程的交互成本很高的话,那么他们很可能去其它网站购买。


从以上具体理论的阐述中我们可以看出,在评估交互成本的时候,步骤数,点击次数以及操作路径长短这些我们日常最关注的几个维度,并不能完全评判交互行为的好坏。而注意力成本和记忆力成本,以及预期效用,往往也会成为决定一种交互行为成败的关键而对于上面提到的“困难场景”,也正是因为数据量过大和层级过深致使用户的注意力和记忆力成本阶梯式增加,从而导致常规组件体验感崩塌。
下图中,我具体整理了各个交互成本组成的因素,以及会导致的结果。

如何拆解?案例一


我们详细聊了困难拆解法的基本原则和交互成本的主要概念之后。接下来开始进入正题,我们通过困难拆解法和交互成本计算的逻辑,来解决上面提到的两个案例的问题。

首先,我们先拆解一个简单的案例。

拆解困难法的核心是将一个大的难以达成的目标拆成各个小目标,所以我们需要先确定这个案例的核心困难点。
第一步,分析问题:
这个方案的优点就在于:在物理交互成本上,省了一步点击,将信息直接po到定位的周围,根据格式塔的接近原则,用户可以很容易的寻找和查看相应定位对象的详情。但是这些优点只限于在定位对象少,展示的详情信息数据量小的场景内。一旦处于数据量庞大的场景下,就会产生大量的信息杂揉。定位与详情相互交织、覆盖,非常混乱。如果用户想在这种界面去寻找信息的话,将需要付出非常大的注意力成本,大大加长了用户选择信息的时间。心理交互成本的增加,对于用户的使用情绪,也会产生消极的影响。
所以,此案例的核心问题就是:移动端屏幕很小,在有限的展示范围内,无法容纳大量的数据,所以导致信息杂糅在一起,对用户使用造成了极大的干扰。

那怎么去解决这个核心问题呢?让我们开始进行第二步:拆解方案的主体。
通过分析可知,这个案例最小颗粒度的两个交互主体为:

  1. 在地图上找到关注区域的定位标记;

  2. 查看定位标记相对应的详情数据。

那么现在,根据上面提到的拆解原则,我们要将本来一步到位的交互行为,拆分成两个最小颗粒度的交互行为,然后分成两步来达成同样的任务目标。
第一步,在地图上只留下定位标记的显示,这样的目的主要在于让用户只专注于寻找相应区域的定位标记。在去掉了了大量数据信息之后,页面就一下会清爽许多;



而第二步就是将查看详细数据拆分成一个操作,即点击某一个定位标记时,详情数据通过弹出卡片,或者弹出弹窗的形式,去陈列详细数据。(如果详情数据少,就可以使用卡片的形式,这样不会打断当前操作;如果详情数据量很大,并且需要足够的拓展性以便后期增加详情,则可以使用弹窗的形式。)这么做则是为了让用户更专注于查看他所关注的详情信息。



阐述完解决方案,根据原则的3,4条,我们一起衡量下方案对交互体验和任务效率是否有提升。
首先从成本角度来衡量方案:

1.物理交互成本:

  • 多增加了一个点击步骤。

2.心理交互成本:

  • 去除了界面中大量杂糅的信息,让用户可以清晰、迅速地查看地图位置,并高效的寻找用户所关注的区域定位;

  • 让用户只专注于查看他所关注的定位信息,避免了其它大量信息的干扰。即使通过粗略的估算,也可以算出来,这多点击一下的交互时间,要比在大量信息中去检索信息的时间要小得多。


其次从任务目标角度来衡量方案:
1.达成了与原方案相同的目的,即可以寻找某个区域内的定位标记,并可以查看对应的详情。
2.解决了信息杂糅在一起,对用户使用造成极大干扰的交互难题。
所以,综合成本和目标来看结果,这“多一步”的代价,实际大大提高了用户的检索效率。


如何拆解?案例二


当然,上面这个例子过于简单,第一交互路径短,第二也属于比较常规的交互解决方案。那接下来,我们一起来分析一个稍微复杂点的案例,看一看,当“海量数据”再加上“深层级”时,我们用这种方式是否还能解决。

首先呢,还是老套路,先一起来确定一下我们要核心解决的问题:


首先总结这个案例的优点:可以将操作在一个页面内全部铺开,并且通过点击快速打开下级页面,然后在一个页面里对多层数据进行查看和操作。这种交互在数据较少的场景里,是没有问题的。
但是,在移动端场景中,因为屏幕大小有限,一直存在着数据展示条目十分局限的问题,而当层级过深甚至数据条目过多时,这种问题就会愈加愈烈。所以,如果生产环境中长期处于数据量非常庞大的状态,就会引出以下问题:


  1. 在一条完整的下拉控件中,只有第一层级的数量是恒定为1的,而二三四层的数据量都有可能为多个,尤其第四层的详情部分,数据条目会更多。所以在一个下拉控件中,假设每一层级都有数据的话,用户至少会看到4条信息。而如果二级信息大于两条的话,在全展开的情况下,就已经占据了一整屏的位置(场景三),从而导致用户在一屏下,至少要去看10-12行(数量随着层级4数据条目的变化有所增减)的信息。假设我们再划一屏,用户就至少需要阅读和记忆20-24行信息。前面的米勒定律也提到,普通人一次只能在他们的工作记忆中保留5-11条信息。完成产品中的任务所需的工作记忆与强加给用户的心理互动成本(MIC)负担成正比。用户在这个过程中面对海量数据,以及繁复的层级,会付出大量的注意力和记忆力成本,导致用户在使用产品的过程中,心理交互成本呈阶梯式增长。

  2. 当一个下拉控件二三四层的数据量过大时(图示场景二、三),除了会增加用户的注意力和记忆力成本,还会增加反复操作的频次以及用户的错误成本,一旦操作错误或者看错数据,重新找到这条数据的成本会变的很高。如果滑动一下的物理交互成本为1,那么在多次滑动的情况下,我们滑动的成本就会变为1*X,这个X变量会随着数据量的增大而成正比的不断增加。


根据希克定律我们可知:决策所需要花费的时间随着选择的数量和复杂性增加而增加。
所以改进方案的核心点就是:减少页面内的层级和数据量,降低用户选择的复杂性。
但是从业务上来说,肯定不能直接去减少数据的总量,所以我们必须从交互的角度,去制定出可以减少用户选择的方案。找到了要核心解决的问题,接下来我们就开始“拆解”。
那么从哪个角度开始拆解呢?目前的状态是:随着每个层级的不断铺开,用户查看的数据就会不断增加。那既然数据总量上我们无法动刀,那我们就从层级入手,把每个层级单独拆出来,根据拆分原则的最小颗粒度原则,给用户每一屏提供最少层级的选项,让用户专注于最少数据的筛选。具体怎么做呢?一起来看看下面的解决方案。


首先,我们先来拆分第一层级。第一层级是展开后面层级的前提,所以我将第一层级,设计成了一个顶部切换。点开切换后,会跳出弹窗,这个弹窗中会包含所有的第一层级的选项。随着弹窗中不同选项的切换,我们会立马回到列表页面,而页面下方的数据也会刷新为此一级选项下的所有数据。因为第一层级的数据量,相比其它层级,在常规情况下是最少的,所以面对更少的选择,用户便可更专注、更迅速、更便捷的锁定任务目标。



其次,我们将二层与三层,作为展开式的卡片,形成一个卡片式列表。(这里将二三层放在一个页面内,没有拆到最小颗粒度让其形成两个页面,主要是为了控制跳转次数。)列表中的数据只包含对应的第一层级内的数据,所以这个页面中展示的数据比起之前场景中的“大而全”,已经得到一个非常明显的过滤。下拉层级,也减少为两层,层级复杂度相比之前简单了许多。另一方面,每条二层的数据都形成了一个独立的卡片,这样在视觉上,会有一个明显的区分。无论是数据量上的选择复杂度,还是视觉上对于层级的区分度,都大幅度缩小了用户的辨别成本。


最后,因为第四层经常会囊括大量数据,我们将第四层单独提出来作为一个独立页面(或弹窗),通过点击第三层的条目进入。独立的页面第一可以大大提升用户对于场景的专注性,第二有利于数据的拓展性,即使再多的信息列入,也不会影响其它层级的展示效果。而如果这些详情信息还分为不同类别的话,我们甚至还可以加入TAB筛选,这样就可以更加快速的通过类别筛选过滤出用户想查看的信息。



老规矩,在阐述完方案后,我们依旧根据原则的3,4条,对方案进行各角度的衡量。


成本角度:

  • 物理交互成本:点击数有小幅度增加,而因为屏幕内数据量减少,下划数得到了锐减,另外跳转步骤增多。页面的数据量越大,增幅的物理交互成本越少。

  • 心理交互成本:用户在每一个页面所需要做出的信息筛选得到了大幅的减少,每一步足够直观。因为层级页面拆分,而导致的数据大量过滤可以帮助用户完成快速决策。而信息筛选节省出来的时间成本,大大高于因点击而增加的时间成本。低量心理成本的付出,也会提升用户的预期效用,从而使用户忽略一定程度的物理交互成本。

任务目标角度:
这个方案,把选择和查看多层数据条目,拆解成了多步操作,让用户在完成每一个层级内的查看和筛选中,去逐步完成对所有层级的查看和筛选。


拆解之后,每个层级页面中为用户减少了大量的选择和干扰,降低了用户选择的复杂性,帮助用户节省更多的选择任务时间。解决了用户在大量信息中去海选的痛点。
所以从结果来看,通过拆解,既完成了场景下的任务目标、解决了之前存在的交互难题,也节省了大量的心理交互成本,提高了用户的预期效用。


困难拆解等于绕圈子?




看到这里,也许有人会说,感觉所谓的“拆解”,都是在“绕圈子”。其实没错,我们以上的两个方案都多绕了一步。但是交互中本就没有最完美的方案,只有最适合场景的方案。如果可以解决核心的场景问题,对于低幅度的交互成本的增加是可以接受的。
另外,我们有时候在设计交互方案时,经常会过于计较物理交互成本,将“省一步”封为了交互设计的“金科玉律”,从而忽略心理交互成本和预期效用对用户体验的影响,结果导致用户对于产品的选择性和体验感一起降低。
所以当用户面对高额心理交互成本的困境时,不妨付出一些“提升物理交互成本”的代价,也许这多绕的一圈,或者多走的一步,反而会让用户更快的通往“罗马”。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:回去干活

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档