首页

面对项目中的不确定性,设计师如何决策?

分享达人

最近看到了一个很有用的知识,它是项目管理中的一个概念,叫做Stacey矩阵模型


这个模型我看完之后,对应到设计行业上,

发现它对于“设计师面对不同类型项目,应该如何做决策”,很有启发和帮助。


而我自己最近也刚好离开了熟悉的环境,要面对一些新的挑战,

这个模型也给我提供了一些可借鉴的思路。


所以决定整理下自己的心得,给大家分享一下。

这个模型将项目分为“技术”和“需求”两个维度,建立了一个坐标系:

横轴是“技术”层面,判断技术的确定性和不确定性,可以理解为技术是否成熟。

纵轴是“需求”层面,判断需求是明确的还是不明确的。


根据这两个维度,可以将项目划分为五种类型:


1. 简单型(Simple):技术确定,需求也明确

2. 烧脑型(Complex):技术确定,但需求不明确

3. 棘手型(Complicated):需求明确,但技术不确定

4. 混乱型(Chaotic):技术不确定,需求也不明确

5. 模糊型(Hazy):并非完全不确定,介于混乱型与其它类型之间


而针对不同区域的项目,这个模型给出了相对应更适合的开发方式、解决方案。

“技术”的确定与否,与“需求”的确定与否,基本上就涵盖了所有的项目情况。

我们可以将目前的项目情况对应到这个模型里,判断它是处于哪个区域的,

再根据它所在区域,选择性使用这个区域所对应的解决方案。

相比没有任何方法原则,仅凭经验做事,

借助一个成熟的方法论模型框架,来辅助自己做决策,

条理会更清晰,做决策的效率也更高,

这就是建立思维模型的好处。

思考一下,你目前的项目是处于什么样的区域呢?

一、不同项目类型的应对思路


在具体介绍不同项目类型对应的解决方案之前,

我们要先从大方向上来看一下这个模型。

从模型整体来看,最理想的项目类型,必然是处于区域1的简单型项目:

技术确定,需求也确定。


所以在大方向上,

我们应先采取一种向下的“简化思路”:

也就是尽可能将项目引导向最简单、最可控、最稳定的“简单型”区域,


需求维度上,引导客户明确需求,达成共识。

技术维度上,尽可能选择更可控、更成熟的技术。



所以项目的前期阶段很重要,这个阶段决定了项目最后的导向。

前期多花点时间沟通讨论,可以为后续执行减轻很多负担,

目的是为了在这个过程中尽量减少不确定性,

让项目类型流向更简单的区域。

接下来介绍下不同项目类型对应的应对方案:

1. 简单型(Simple):预测型,做好计划,按计划执行。

2. 烧脑型(Complex):增量型:逐步构建,每次增量一部分。

3. 棘手型(Complicated):迭代型:先搭建基础框架,再逐渐迭代改进细化。

4. 混乱型(Chaotic):避免掉,很难成功

5. 模糊型(Hazy):敏捷开发(更多是对于产品层面了,对设计领域的借鉴意义可能不大,所以这里不做引申。)


01 预测型:

适合需求明确,技术也成熟的项目。

这种通常是比较简单的项目,或者是已经做过多次的很成熟的项目。

对于这种可控性高的项目,可以提前制定好完善的计划,

之后执行就按之前的计划,按部就班完成即可。



02 迭代型:

适合需求明确,但技术不成熟的项目。

对于处于初期阶段的设计师,通常面对的都是这样的项目,缺少经验,技术还未成熟。

这时候应该先去做一个比较简略的粗稿,明确大方向,再去逐渐细化完善。

而错误的做法是:先去抠细节,在一个局部的小细节上磨半天。

结果就是,细节也不对,大方向更不对,

不仅效率低,做的还全是错的。

我自己以前就犯过这样的错误,非要把东西做的差不多了,调了很多细节,再拿给主管看。

结果整个方向都是错的,而且因为已经做了很多细节,改起来还很麻烦。


实际上我应该在做好大方向的粗稿后,就拿去给主管看,

确定了大方向,再去打磨细节。


因为当你经验成熟后就会发现,只要大方向出来了,之后能细化成什么样,基本可以预见了,剩下的只是时间问题而已。


03增量型

较适合技术成熟,但需求不明确的项目。

这种类型的项目很普遍,比如客户需求不明确,不知道自己具体想要什么。

还有可能是项目体量比较大,要考虑好所有细节,需要很长的时间。



这时候就可以尝试用“增量开发”的模式,

也就是先做好确定的那部分,然后交付给客户,

客户提出了新的需求,再增量进去。

像堆积木一样,想到一点做一点,每次完成一部分,

而不是等全部想好再动手。


这样做的好处是:


1. 可以在执行上先做起来,避免因为需求还未确定,导致执行无法推进。

比如在项目前期,虽然脚本还有很多东西没有完善,但一些已经确定要做的东西,就可以先进执行,或者做技术上的测试等等。


2.交付客户的部分模块,通常是已经比较完善的,客户能尽早看到一个直观的结果,减少理解偏差。

比如有时候明明草图阶段已经确定了,

结果等成品出来,客户又不满意了。

因为每个人想象出来的东西是不一样的。

很多设计师还会遇到这样的问题:难以理解领导者的想法。

无论是自身经验的原因,还是沟通上的问题,

总之,对于需求的理解是模糊的,

不清楚领导想要的到底是什么样的。

这时候其实就可以采用“增量”的设计思路:

先完成自己能理解,能确定的部分,然后拿给领导看,

这时候他可能会提出一些新的反馈,告诉你接下来应该做些什么。

再根据反馈,继续往下做。

这样可以快速产出一个可见的结果,加快沟通频率。

而不太好的做法是:

自己在那死磕,自己在那猜,非要做完再交。

最后,这个过程消耗了很多时间,得到的结果却根本不是对方想要的。

小步快跑,多次更新,这种“增量”的设计思路,

对于需求不清晰的情况,执行效率很高。

 如何运用到其它方面?


除了项目上,Stacey模型对于设计师遇到的一些其它问题,同样有借鉴价值。

接下来我们看看在职业成长和技能学习上,可以如何借鉴:


职业成长上如何借鉴:

根据Stacey矩阵模型图,我们不难推演:

对于处于初期阶段的设计师,由于能力不成熟,技术上是不确定的。

如果再加上客户需求也不确定,

项目类型就会变为“技术不确定,需求也不确定”的混乱和模糊类型,难度很高。

这就像是,刚出新手村,就要去打BOSS一样。


所以在职业生涯的初期,应尽量去一些大公司,或比较成熟的公司。

因为这样的公司,往往需求到你手里时,基本已经是确定的了,

只要专心去打磨你的技术就好。


如果去一些本身不够成熟的公司,需求也不确定,自身的技术也不确定,

无疑进入了困难模式,导致很难提升,一团乱麻,还会打击自己的信心。

技能学习上如何借鉴:


如果我们想要掌握一个新的技能,它是处于什么样的区域呢?

需求是确定的,而技术不成熟,

所以属于“棘手型”项目。


那就可以用“迭代”的方法。


比如你要学动效,那就可以先去找一个简单但完整的动画小案例,

先去把整个流程、一些最基础的知识点弄明白。

学完之后,就已经可以做一点简单的小动画了。

然后再逐渐加大难度,不断完善和迭代你的技能。


这种方法的好处显而易见,在很短的时间,就能把技能运用起来,

而不必等到学的差不多了,才能开始运用。


我最早学软件时,用的就是一种很低效的方法:对着一本工具书,一点一点学软件的每个功能。

结果整本书看完了,都还不知道要怎么用。

这也跟当时的教学资源环境不成熟有关。现在很多教程都是基于具体、完整的案例教学了,学习起来效率很高。

所以在选择教程时,应优先选择案例型的教学,而避免单纯功能模块的讲解。


小结一下:

面对需求的不确定,或技术的不确定性,无论是迭代开发的思路,还是增量开发的思路,方向上其实都是在逐渐减小不确定性。


面对技术的不确定、不成熟,那就先大致完成一个粗略的版本,再去逐渐细化、优化、迭代。


面对需求的不确定,那就先完成确定的部分,做一步看一步,随着想法、需求的逐渐完整,不断填充完善设计。


而对于技术也不确定,需求也不确定的混乱和模糊项目,但又无法避免的,可以尝试多种方法混合使用。

整体来说,这是一种向下简化,减小不确定性的思路。

拓展:逆向应用的“挑战模式”

而根据这个模型推演,逆向思考,

会发现其实还有一种向上复杂化的思路。

我把它称为“挑战模式”。

顾名思义,就是将处于区域1的简单项目,向复杂的方向演变。

一般是在技术的轴向上,将确定性变为不确定。


为什么要把它变复杂?找虐吗?

当然不是。

处于区域1的简单项目,因为它简单可控,容错率高,

所以恰好是用来尝试新技术的最佳实验对象。

在这样一个非常稳妥的环境里,你可以放手大胆去尝试新的技术,新的想法。

失败了也问题不大,大不了还是换回老方法呗。

比如我们有一些日常的EP项目,每个月都有一两条的产出,技术上和需求上都已经很成熟。


这类项目就是我们的快乐实验场,可以大胆尝试一些新的技术,新的想法。


而且,适当给自己加点挑战,也可以消除重复性工作带来的无聊感。

尝试下这种“挑战模式”,非常有利于设计师能力的成长。

在简单的项目里,将新的技术打磨成熟,

之后就可以在复杂的项目中去应用了。

可以不断拓宽自己在技术轴上的确定性范围。

避免陷入技术和需求双双不确定的混乱情况。

结语

最后,出于严谨考虑,要说一下,

我对这个模型的一些理解,不一定绝对准确。

毕竟它是另一个领域的知识。


但我们学习借鉴其它领域的知识,

本来就不是为了照搬过来。

而是为了从中吸取能够借鉴的部分,

最终目的,是要为自己所用。

最后留给大家一个思考题,可以按照步骤依次进行,

1. 你目前的项目是处于什么样的区域?

2. 如果处于较复杂的区域,能否引导向更简单的区域?

3. 根据Stacey模型,使用什么样的方式更合适?预测型、迭代开发、增量开发还是混合使用?

4. 具体可以如何做?

作者:崔小俊

转载请注明:站酷

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


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


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




如何用敏捷思维做好B端中台

分享达人















来源:站酷     作者:Yuki-yee
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 

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

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

B端产品设计01-业务及产品价值分析

分享达人

关于需求


来源


C端产品的需求通常来自用户自身的诉求,没有明显的行业特征和限制,会基于产品核心功能去附加其他的功能,探索更多的可能性。比如在聊天社交应用上,加一些娱乐性的小游戏、直播功能等。
而B端,一般由于外部环境改变,如政策法规、技术改革等引起企业对生产管理、工具的升级需求,或是企业人员、市场规模扩张带来的组织管理、产能提升等需求。
概括的说,就是C端的产品需求倾向于「 无中生有 」的制造需求。而B端,则是基于企业经营过程中「存在的问题」,然后为解决这些问题而促发的需求。


本质


企业经营管理的基本任务是「 合理地组织生产力 」,因此「 B端产品 」可以理解为企业用来提升生产力的「 工具 」,而提升生产力终极目的就是「 更多的盈利 」,而盈利的方式归根结底就是「 降本和增效 」。所以B端产品的作用,就是让企业有效的降低运营成本和增加效益。
在此之前,需要先清楚企业在「 做什么 」「 怎么做的 」以及这么做「 还存在什么问题 」,然后确定我们的产品可以怎样让企业「 更好更快更省钱地解决、改善这些问题 」,最终获得更大的经济效益。




了解业务


刚进入一个新公司、接触一个新行业时,我们通常只是了解到一些零星的信息,比如公司是干嘛的、业务名是什么、属于什么行业等等,对业务的了解只是停留在被动的阶段,想要做好相关的产品设计,需要主动进行更多的信息收集。围绕获取到的关键词,从市场、业务、产业、发展历程和趋势等方面,全面深入了解所要服务的企业状况,建立起对企业业务关系、价值体现的清晰认知。
「 建议 :在信息收集的过程中,可以同步把当前认为有用的信息整理出来,而那些可能有用但暂时还不清楚有什么用的内容,可以把相关链接记录下,并用文字标注自己对这个内容的记忆点和归类,方便后面再次查看。这样随着对业务的了解加深,范围会越来越大,可以减少后期再次查找资料的时间 」


名词定义


信息来源:「 XX 」「 XX是什么 」等关键词汇。
关于一些业务词汇的定义,可以先通过相关的百科词条,来了解它们的客观定义,纠正可能存在的认知偏差。
然后再从这些内容中获取到业务相关的其他信息、关键词汇,扩大信息收集范围。


产业链


信息来源:「 XX产业链 」「 XX行业上中下游」「 XX产业链分析 」等关键词汇。
关于产业链的内容,主要要清楚两方面的信息:

一是清晰企业处于产业链的哪个位置。中游,上游还是下游?

另外是上下游的业务关系,包括产品服务的供需关系和信息、价值的交换关系。




了解产业链的信息,有助于我们更全面的了解业务,在跟相关业务人员沟通时,也可以更好地理解对方所要表达的信息内容。


核心业务和目标


信息来源:「 XX业务流程 」「 XX工作规范」「 XX生产过程 」等关键词汇,根据所属行业的具体性质调整。还有企业方提供的资料。
清晰,以及确定我们产品的核心目标。
通过获取到的信息,梳理清楚业务的流程、逻辑和相关规则。确定业务的核心是什么,以及要达到的目标是什么。然后从业务的流程中,找到达成目标的关键节点,以及可以通过什么方法、技术、工具来实现。





发展历程


信息来源:「 XX发展史 」「 XX现状」等关键词汇。
「 当有事情想不清楚时,尝试回到基础理论、发展源头上 」,这个是我自己想不明白一些东西时会采用的方式,比如看相关的一些概论、发展史的书籍。
对于业务也是,从源头上开始了解,同样有助于我们更深刻和清晰的了解相关业务发展的最初目的。
从时间的维度上,了解业务从以前到现在、从线下到线上、从手工到电子到信息化等,在流程、使用技术、工具、相关政策标准等方面有什么样的发展变化。然后这些变化解决了哪些方面的问题,以及目前仍然存在什么问题。
在这个过程中,我们通常可以发现某些方面的问题,是整个业务发展过程都在关注和寻求改进解决方法的。而相关的需求通常就是整个产业发展的最根本需求点




行业现状和趋势


信息来源:「 XX现状 」「 XX未来发展」等关键词汇。这一部分跟前面的「 发展历程 」在收集信息过程中一般是重叠的。
「 站在巨人的肩膀上 」、「 知己知彼,超越竞品 」。
关于行业现状,一方面通过行业报告、行业概况等信息来源,了解行业发展状况和技术水平。另一方面是了解同行产品、同类型头部产品的水平,清楚目前业务功能的实现情况,以及强调的价值点是什么。站在行业和同行的水平上来进行产品设计,避免局限在自己的主观世界里。
而发展趋势,同样可以反映出行业所关注的产品价值点,清楚行业整体的发展方向,以及期望的发展方向是什么。




标准法规


信息来源:「 XX业务标准 」「 XX操作规范」「 XX质量要求 」等关键词汇,根据所属行业的具体性质调整,还有企业方提供的资料。
这方面对于一些G端、医疗类产品来说比较重要。
主要是通过相关的政策法规、行业标准、共识等,避免产品设计触及一些行业风险点。同时清楚产品相关标准和性能要求。


产品竞争力


通过对业务全方位多角度的了解和梳理,我们可以确定业务的核心需求和产品的价值点。但B端产品本质是商品,在市场上同样存在竞争,所以在清晰了核心业务和价值之后,还需要进一步找到我们产品的竞争力。
即如何让我们的产品在同类产品中占据优势,呈现出更高价值,让客户选择我们,甚至愿意付更高的价格。
在前面的分析中,关于「 现阶段业务流程存在的问题 」、「 同行新产品情况 」以及「 产业的最根本需求 」等信息,这些都是我们要重点关注的。再结合行业共识、发展趋势等关键信息,分析现有产品跟行业需求预期的差距,从中找到我们产品的机会点,发挥产品的价值。



总的来说


通过对业务的分析,需要清楚:

我们处于产业链的什么位置以及上下游的关系

核心业务和目标是什么

业务处理模式的发展过程以及最根本的需求点是什么

行业(业务)目前发展情况如何

我们产品的价值及竞争力在哪


注意点


我自己进行在业务信息收集时,经常会受以往接触到的信息或者自己假设的信息影响,有时候会在结论上混入一些主观想法。这是不太好的,因为对信息进行收集整理,就是要以客观存在的信息为依据,分析真正的产品价值点,而不是人为捏造创造的需求。也就是我们一开始说的,B端需求是基于已有问题来寻求解决方案的。
所以分析过程中要避免受自身的主观影响,而是基于现实的、客观的信息情况来分析得出相应的结论。
另外关于同类型产品价值点分析,如果所在行业业务发展还不是很成熟,需要从另外的角度去了解这些功能点的实际使用情况。比如同行们强调了5个功能价值点,实际客户有3个是基本没有利用到的,类似这样的情况。因为可能同行也还没搞清楚业务方的真正需求,只是在「 创造需求 」或是功能点的性能没有达到客户预期。
这一点也是有次在跟实施人员聊天时发现的,目前所在的行业发展也是比较初期的,所以很多东西并不是特别成熟。有几个我们跟同行都在宣传的价值点,实际在终端并没有怎么用,或者使用这个功能的目的跟我们设定的是不一样的。所以也不能过于相信竞品的,尽可能从另外的角度去对比、验证下。



以上就是关于B端产品设计中的业务和价值分析部分。
感谢阅读,期待交流。


作者:大鱼小鱼虾米
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

阅读可视化——交互设计沉思录-1.2管理复杂性

分享达人

本次图示化的信息来源是:
交互设计沉思录-顶尖设计专家Jon Kolko的经验与心得(第2版)_[美]Jon Kolko著,方舟译

今天带来的是《交互设计沉思录》第一部分的第二章「管理复杂性」。

主要讲述的是交互设计师是如何理解&组织所获取到的数字、文字数据。

通过这些步骤&方法能够帮助交互设计师更加清楚信息间的关系,建立很强的心智图景。

其间也穿插了很多职能相关部分的对比,如「交互设计师与信息架构师」「交互设计师与界面设计师」「交互设计师与电子工程师」。


作者:Viola_1241
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

信息层级,没你想象的那么难

分享达人

01.写在前面

大家有没有遇到这样的问题,当你面对非常复杂的信息时,在进行信息整理设计时,往往会陷入比较纠结的场面,不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问,这篇文章适合你继续阅读。



本篇文章会提供一种解决排列问题的简单底层逻辑,我们可以围绕这个逻辑去排布我们的页面,从而让整体排版变得更加清晰合理。

02.信息层级的作用

信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式,通过信息的放大缩小和对应的位置,能够将复杂的信息分为不同的模块呈现在我们的视野中。



大家先简单看一下图中两个画面,你就能够直观感受到信息层级对于用户认知的作用。



不好的信息层级就像左图一样会让画面比较杂乱,难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确的识别出画面想要传递的信息。

因此信息层级的排列不仅影响视觉上的美观度,更影响人们在检索信息时候的效率。尤其是对于B端复杂场景,我们不仅需要考虑清晰传递业务价值,合理的信息层级划分也是提高产品体验的重要部分,好的信息层级则意味着更好的使用体验。

03.如何做好信息层级

既然信息层级对于使用体验比较关键,那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐,我也曾为此类问题查阅了大量资料,想要找到一个简单高效的答案。



但目前查阅到的资料几乎都在讲排列的四个基本原则:对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛,让人很难在实际中更有效地利用。

即使我对排版四个原则非常熟悉,在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索:



经过线上页面与概念的整体研究发现,他们在遵循排版原则的基础上,本质上都存在一个简单的逻辑:那些优秀的页面设计都把主内容的层级控制在了三层左右,如下图所示。



因为三层左右的层级是最容易被用户感知,且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。

比如我们看下面这两个例子,左边层级因为特别复杂,造成用户获取信息效率变低,而通过层级的转换,我们可以将其变得更简单且易读。



再举一个例子,我们在大部分场景见到的纯文字排版基本都离不开以下几种形式:



因此,我们需要在排版时需要首先思考一个逻辑:那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。



有同学看到这肯定要问了,这个道理我也懂啊,可是在实际业务中大部分时间拿到的信息太多,根本做不到保持在三层以内。别急,这篇文章的重点当然不是告诉你这么简单的道理,而是在面对复杂层级的时候,我们应该怎样去控制它的层级表现,从而让它在最终呈现上保持在三层左右,让用户获取信息的效率更高。



其实我们在实际中的大部分优秀页面,在本身的信息层级上可能都非常复杂,但我们可以通过一系列的方法,去减轻这种多层级的影响,从而让我们的页面即使承载了很多复杂的信息,也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。

04.信息层级前置处理

这可能是被很多人忽略的一点,就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难,但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。



源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景,比如某些时候产品给到了我们很多信息,但我们并不一定会全盘接受,而是通过当前页面的业务场景去进行判断。确定每个信息的合理性,从而可以决定有些元素是否可以删减,提高整体信息设计的一致性。

1. 当前的所有信息真的需要存在于页面中吗,如果去掉某些信息有无影响。

比如当你在进行打车的时候,当你输入目的地之前,一切其他的信息都无需呈现。当你输入目的地后,车辆的相关信息和价格才会进行呈现,当你打车后,司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。



2.当前信息的重要程度是怎样的,对于某些不重要的信息是否可以通过隐藏的方式展现。

当你拿到一堆信息,信息的重要程度就决定了我们需要将哪些信息作为主体,哪些信息作为次要辅助信息,哪些信息甚至可以收起或者省略。比如当你浏览新闻的时候,标题永远是最关注的,而评论,作者,简介等都是可以忽略的信息。



上述两个问题的确认,会影响我们对后面的信息排布。因此我们需要在源头,比如去和产品或者业务沟通,弄清楚该信息呈现的缘由以及必要性,这样能够帮助我们最后理清楚信息层级。

05.信息层级排布处理

信息排布的本质是通过我们对信息进行排列上的调整,来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。



通过目前的实践总结,我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。



5.1 信息分组

信息分组是大家在设计时都能够想到的形式,分组能够将复杂的信息打散,从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式:间距、分割线、卡片。



那么这三种方式有没有区分呢,VIVO设计团队曾经就这个问题展开过用户调研,但结果表示,如果纯粹从用户的角度来讲,对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感,因此我们可以根据当前信息的复杂度作出以下规则:



通过这三种场景的区别,我们可以根据信息复杂度更好地选择分割方式,让界面的表达清晰明确。

5.2 利用组件拆分

组件其实是目前大部分设计师在进行信息排布时必备的部分,因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是,目前这几种组件对于我们信息层级的划分起到了比较重要的作用:树形结构、表格结构、步骤条、选项卡。

树形结构

对于有关联性的多层级非常适合,可以将复杂的层级结构进行收拢,从而能够显著降低信息的复杂度。

表格结构

对于信息多且关联性不大的复杂信息,可以聚合到表格来进行呈现,但表格的呈现方式不宜滥用,需要根据我们场景来进行选择。

步骤条
步骤条则对场景要求非常明确,我们可以将多个场景通过分布的形式进行呈现,从而减少当前页面的复杂度。

选项卡
选项卡更适合与同级的数据,对于同类型的结构可以更好地将页面进行拆分,从而让当前页面更简洁。



由于组件这一块大家的认知已经比较全了,在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。

5.3 更改布局

通过改变布局的方式,我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢,举个简单的例子:



从上图中你可以看出目前的层级较多,尤其是两层tab的叠加,视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局,从上下结构变为左右结构,达到从视觉上简化层级的作用:



当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时,我们可以考虑通过改变结构来减少其复杂度,比如上述的两栏结构,甚至三栏结构,从而让整体变得更加简洁。



5.4 信息融入

我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式,让其融入到同一个层级中。比如我们看下面这一个例子,Coding产品设计中将标题与tab利用分割排列在一起,从而变为同一层级,这个时候就不会出现四层的复杂结构,页面还是保持三层结构,通过这种方式有效降低了页面的复杂度。



信息融入这个方法,当我们在进行B端布局时,用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间,还能够降低信息层级的复杂度。

但在进行信息融入的过程中,我们需要注意的是:如果放在同一层级会造成理解上的误解时,这个时候不要采用该方案。比如搜索框的位置,放在哪个层级决定了对应的搜索范围。

5.5 信息弱化

信息弱化的原则是,将某些超出层级的部分进行弱化。比如有5个层级,但其巧妙地将功能筛选融入到了当前的结构中,使得即使超过3层我们也不会觉得其特别复杂,我们再看一个例子:



可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化,虽然还是有4种层级,但从视觉感知的层面上不会觉得视觉凌乱。

在很多时候,我们觉得信息混乱的原因,就是页面要素太多太花哨。比如工作中的一个小卡片,也就是利用信息弱化去减少画面的复杂度:



因此我们需要学会对信息分级,不重要的信息就进行弱化,这样整体的表述上会好很多。

通过上述5种方案:信息分组、利用组件拆分、更改布局、信息融入、信息弱化,我们可以将大部分层级过多的复杂信息简化在三层以内,从而让我们最终的页面呈现不会太过复杂,更容易被用户理解。但不可否认仍会有更复杂的页面,即使缩减也仍有过多层级,那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

06.信息层级小细节

在研究的过程中,也总结了目前在进行信息层级排布过程中比较纠结的一些细节点,也分享给大家。希望对遇到相同问题的同学一些帮助。

6.1 被忽略的沿着字的轴线对齐

大家对「对齐」并不陌生,它存在于我们的每个页面。但在对齐的过程中,我们可能会忽视一个小细节点,那就是沿着字的轴线对齐。比如下图两个例子:



在看见左图时,总觉得哪里会有点奇怪,但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐,而这就是说的沿着字的轴线对齐。这主要是由于相似原则引起的:那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起,即相似的部分在感知中会形成若干组

而左侧因为标题字和底部字没有形成对齐,因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。

6.2 卡片是用线框还是背景

这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时,你有没有纠结过到底是用线框卡片还是背景色填充呢。



我就曾陷入这种纠结,但在去搜索查阅时,发现目前其实关于这块相关的资料,因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现,这块内容其实也包含着一定的规则:

1.取决于卡片的数量

对于卡片少的其实可以用色块来呈现,对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现,举个简单的例子:



通过coding和飞书的卡片对比,你会发现卡片过多时线性设计会让页面显得更整洁和清新,色块设计就会让页面显得更厚重。右侧整体的呈现行会显得更好一些。

2.取决于页面的视觉重心


这里页面视觉重心的含义是当你整个页面都全是线框时,你可以利用色块的卡片来达到突出页面重心的效果,让整体页面没有那么单调,可以看到下图的例子,右侧的页面会相对更稳重一点。



6.3 底色用灰色块还是彩色块

在进行色块时,时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢,我们应该何时使用这两种色彩呢。



我们先看一下案例:



可以看出目前这两种颜色的运用更多的是功能上的区分:


1.彩色背景更适用于「想要引起用户注意的界面」,比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。


2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。


所以我们可以根据当前的信息场景来选择合适的色彩,后面再面对时就可以不用那么纠结。

07.写在最后

本期的内容到这里就结束了。关于这期的信息层级内容,真正需要深入了解的是控制信息层级背后的方法。很多时候我们看见的优秀页面并不是因为它本身就简单,而是通过我们合理的信息层级控制,让最终呈现上显得不复杂,这其实也是我们在实际工作中需要注意的很重要的一个点。

本文重点内容再回顾,当我们遇见复杂的信息层级时,需要分三步:

1.明确当前所有信息的必要性和重要分级,需要从源头去深入了解;

2.运用五个方法可以有效减低信息层级:信息分组、组件拆分、更改布局、信息融入、信息弱化

3.同时在运用过程中需要注意影响层级的小细节

以上是本文关于信息层级的另一种角度的描绘,虽然没有提及四大基本原则,但在实际运用中也是很重要的。最后,虽然进行了很多资料查询,但在在阐述过程中不可避免会有阐述不到位的地方,欢迎进行反馈。

原文地址:站酷

作者:蒙东东

转载请注明:学UI网》科幻机甲风格海报怎么做?

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


7个实用技巧,教你搞定可视化图表

分享达人

可视化图表是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设计过程有所帮助。


// 为什么要数据可视化


数据可视化就是用图表来表示数据信息,它所传达的信息包括你所拿到的数据源和你分析后的结果,再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息,是我们可视化的最终目的。



举个例子,同样一组数据,用表格的形式呈现是很难有所洞察的;如果将各个地区维度的数据聚合以柱图形式呈现,很容易就能看出各个地区间数据的差异,并从中洞察规律


关于如何设计好数据可视化图表,这边总结了三个步骤:选择适合的图表,强化视觉层次,图表响应式适配。


一、选择适合的图表


数据可视化的图表种类繁多,当我们真的开始作图,往往会遇到一个困境:有这么多类型,要如何选择正确的图表呢?首要依据是考虑所要传达的信息意图,即所要制作的图表它的任务是什么,再通过分析数据关系来选择表达方式;第二层意图是图表传达内容,这时候我们就需要根据数据的特征去突出和强化。


1. 分析数据关系

根据数据分析的方式来看,每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构,再结合数据关系作出选择。了解图表的可能知道,一般图表的数据关系有构成、比较、分布,以商业数据为例,常见的还有流转关系。



构成关系

构成关系的图表表达的是部分和整体的关系,用于分析总体和各部分的占比比例,构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小,也可以使用比较关系的图表。

常用图表:饼/环图、堆叠图、面积图等,如涉及到层级结构,还会用矩形树图或旭日图等特殊结构图表。

关键词:“占比、比例、百分比”



比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内,通过对两个或两个以上的指标分析,可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式,趋势对比用于表示一段时间内数据的变化,分类对比用于比较数据规模。

常用图表:趋势对比常用图表有折线图、散点图等;分类对比常用条形图、柱状图、气泡图等。

关键词:“增减、升降、涨跌、波动”



分布关系

利用空间分区来展示数据之间的分布关系,常用于体现两个或以上数据的相关性。

常用图表:散点图、热力图、雷达图等

关键词:“随着……而变化、A/B之间的相关性、交/并集”等



关联与流转

流转关系是B端数据常用的一种关系,它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等,以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表:关系图、桑基图、漏斗图、进度图等

关键词:“流程步骤、留存、转化、关系”



2. 分析数据特征

按数据关系和分析目的选择好图表类型后,第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有:变量特征、维度特征、层级特征、流程特征。


变量特征

分辨一个指标通常有两类特征,按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势,离散数据通常统计各分类下数量的变化。

  • 连续型数据:指在一定区间内可以任意取值的数据叫连续数据,其数值是连续不断的。如身高、体重等带有时间因素变量的数据等,通常用折线图体现变化趋势。
  • 离散型数据:指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据,用柱图表现更加体现变量的特征。


维度特征

多维度分析需要将多个变量在同一平面上直观的表示,可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据,可使用不同颜色进行分类

  • 根据分析视角选择图表:对于多维度变量的数据我们需要明确分析的视角,去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据,如需要全局视角查看个班的综合素质,推荐使用雷达图;对比单科成绩的变化分布,则推荐使用堆积图。


层级特征

多层级数据由多个部分构成一个整体,又称树形结构数据。除了用结构树图表表现以外,还可以考虑以下两种图表类型:

  • 矩形树图:突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小,它以面积的形式突出展现各个子层级节点的占比,可帮助用户看到数据的层次结构以及各层级之间的关系。


例如:上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额,通过色调来区分不同类型,颜色的深浅代表分类下的子集,面积体现销售占比。对比一般结构树图表,它的优势在于可以有效利用空间。

  • 旭日图:突出细分层级关系。由多个圆环图嵌套而成,也称为径向树图,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。常用于细分分析方法,将事物从大到小进行拆解。每个级别的数据通过1个圆环表示,离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效,而矩形树图适合比较相对大小。


流程特征

流转关系是表达数据转化流程的重要类型,不仅包含统计意义上的数据总和,同时还表达了信息流转的路径;其中桑基图和漏斗图都可以表达路径中流量的变化,不同的是桑基图重点强调流量的强度和走向,漏斗图更加注重突出转化率和效果,根据不同的表达目的选用。



二、强化视觉层次


选择合适的图表后,在信息传达上也需要正确的表达,展示形式美观的同时能够清晰的体现数据特点。


1. 强化数据特性

使用图表正确的表达信息,需要设计师在强化数据特性的同时避免偏差

  • 趋势易感知:折线图数值如过于平均导致趋势平缓,有时候无法体现偏差;在强调数据趋势的场景下,推荐用动态取值范围让波动保持在一定范围内,放大波动占比更突出趋势。


  • 展示更准确:柱状图依靠柱体面积体现最终数值,使用动态范围截断将会导致数据解读不完整;始终将 y 轴从 0 开始,才能更准确的反映柱图中的值。


2. 色彩视觉传达

除了在设计构图上优化以外,颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知,错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板,精确传达信息同时后续的项目在选用时也可以达到用色的统一。



我们在之前的文章里有介绍过图表的取色模型,通过调整颜色HSL值的区间,可以得到以下三种意图色板:

  • 定性型-分类色板:用于区分不同的类型,又称为无序色板。适合区分没有内在顺序的类别
  • 定量分歧型-发散色板:通过两边互补色来体现,具有明亮的中间值,然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值
  • 定量顺序型-顺序色板:从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢?下面几个案例将带你了解其中的差异。


定性型:使用色调来进行分类

数据内在没有顺序差别时,建议使用色调值(H)进行区分;如定义国家、行业等类型。如果希望图表看起来更加专业,以下有几项分类色板的小建议:

  • 选取尽量少的色调:取色时无需使用整个色环,使用邻近色或互补色的取色方式显得更加专业。


  • 色板适度明暗交替:一些视障人士无法区分色相,主要靠颜色的明暗差异来识别,通过饱和度和暗度的调整,创造明暗交替的色板。


定量型:使用深浅色板强调内在顺序

如果在同一个分类下包含子类别,或者数据本身具有排名属性,那么建议使用连续色板来突出他们内在的顺序,使图表更加易读。

  • 顺序色板-选择合适的插值:根据数据的分布情况选择不同的的插值断点,突出数据的差异。如以下案例中,根据统计学概念设定不同的取值区间,左侧示例使用的是平均线性差值,反映的是数据的集中趋势;右侧示例使用的是中位数插值,能更好的体现数据分布的形态。


  • 发散色板-关注对比色的识别性:尽量避免红绿配色,如需使用绿色,偏黄或偏蓝的绿色更易分辨,对视障人士也更加友好。


三、图表中的响应式设计


B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报,在基础设计完成后还需要考虑到图表展示的环境,根据不同端去适配显示效果,以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。


1. 布局框架适配

在网页端显示时,有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态,将非必要的的元素转化或隐藏,保留重要的图形元素去适应当前空间;元素隐藏后使用悬浮交互来保证信息的展示,保持图表的可读性同时也避免产生元素的重叠。



如案例中的图表,在不同尺寸下通过改变和隐藏图表元素,以达到适配当前空间的效果。

2. 图表元素适配

要适配移动端,网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外,还需要考虑手机屏幕的尺寸和图表元素的适配性,去兼容相关的交互操作。

  • 信息浮层:在图表中,信息卡元素是传达信息内容的重要组件,在网页端中悬浮展示,通常会占据很大空间;图表适配移动端后,信息浮层改动到图表上方常驻显示,并跟随手指的滑动变化响应数值,完整展示信息的同时也避免了页面抖动。


  • 坐标轴标签:过长的坐标标签在适配过程中会产生重叠,而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配,避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配,精简空间避免堆叠。


3. 极值适配

因B端平台的特性,我们无法预知客户传入的数据量,可能会遇到因数据量过多,造成图表显示不佳,数据读取困难等问题。这种情况下,提前考虑数据极限场景,通过交互的形式变化的方式让用户获取完整信息,提升理解同时信息展示更灵活。

  • 缩放和平移:在数据范围过多时增加取值范围的缩略轴组件,通过限制展示范围让数据量显示可控。


  • 互动切换视图:如果折线的类别过多且无法省略的,建议分组查看。默认状态仅当前组折线高亮,其他数据以浅色显示,通过切换的方式查看其他组别的信息。


  • 悬浮鼠标高亮:在分类过多不好分辨时,可使用悬浮高亮的交互方式突出相关联的数据组。


还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因,在这篇文章就不做深入讲解了,以后可独立介绍。


// 结语


数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确,才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据,确保用户能够更好的接收信息,才是可视化的关键。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


用「用户体验五要素」整理「Live Activities设计规范」

分享达人

众所周知,「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书:战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为:为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。



「Live Activities设计规范」由苹果出品,原文为英文,上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」,使用比较熟悉的「用户体验五要素」对内容进行整理。

1. 战略层——为什么做

原文提供的Live Activity定义如下:
A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

从原文可以提炼出Live Activity显示特点:

1. 内容是频繁更新的、有进度/状态显示的、用户关心的。

2. 内容的信息量是一眼就能看完的程度。


但上述仍是表象,并非实质,接下来思考这几个问题:

1. 为什么显示的是进度/状态频繁更新的内容?

2. 为什么要强调用户关心的?

3. 为什么信息量是一眼就能看完的程度?

没有Live Activity频繁更新主要靠push推送。但push容易被其他APP的push覆盖,且随着各种APP的频繁使用,用户获取关键信息的效率和通过push打开APP的次数反而在下降。


进度/状态频繁更新的内容,说明每个状态存在的时间短,如果被覆盖/忽略,同一状态就不再复现,用户所关心的,或APP所希望用户关心的,就看不到了。比如:什么时候取外卖、待付款、上传成功等等。


当下我们所处的时代是信息泛滥的时代,需要对信息作精简,但用户的操作是可以多条线进行的,比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。


信息内容和量是官网一直在强调的,需要精简,只展示用户需要的,基本达到一眼看完的程度,目的就是知道变化的是什么,当前状态是什么。

分析了这么多,大胆推测一下Live Activity的设计初衷是:快&准确&轻。而终极目的是打动用户,形成好体验,进而推动口碑和销售;为各APP提供新的通知形式,互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。



2. 范围层——做到什么程度

关于这个层次相当于规定功能范围&信息边界限制,就是什么要,什么不能要。这部分的信息官网给出许多,在此将其分类梳理如下,为避免大家不好查找官网/译文对应出处,在句未已标注。

1)硬性限制

1. 仅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平台注意事项)

2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。(源自:什么是Live Activity-锁屏)

3. 支持用户手动清除锁屏状态下的Live Activity(源自:实际操作)

4. 支持用户直接关闭对应APP的Live Activity(源自:最佳实践方式第3/c条)

5. 支持Live Activity自动开始&结束。(源自:最佳实践方式第6/f条)

6. 限制跟踪活动/状态时长不超过8小时。(源自:最佳实践方式第1/a条)

7. 限制活动/进程结束后展示时长不超过4小时。(源自:最佳实践方式第8/h条)

8. 支持更改背景颜色&不透明度。(源自:设计有用的Live Activity第5/e条)

9. 限制内容布局。(源自:设计有用的Live Activity第5/e条)

10. 限制不同设备的展示尺寸。(源自:规范)

2)非硬性限制

1. 避免在Live Activity中显示敏感信息。(源自:最佳实践方式第4/d条)

2. 避免在Live Activity中显示广告和促销活动。(源自:最佳实践方式第5/e条)

3. 只提供正在进行的任务/事件的关键摘要。(源自:最佳实践方式第2/b条)

4. 在任务/活动结束前,给用户提供关闭Live Activity按钮。(源自:最佳实践方式第6/f条)

5. 点击Live Activity直接定位到对应页面,无需用户二次导航。(源自:最佳实践方式第7/g条)

6. 考虑在活动结束后,锁屏上在合理时段后自动删除Live Activity(源自:最佳实践方式第8/g条)

3. 结构层——这些东西如何组成?

(个人猜测)由于是提供一个展示区域,且展示区域有限,所以对于层级架构,一级展示什么,二级展示什么,各阶段展示什么,这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。

4. 框架层——规划用户操作行为

通过Live Activity的展示形式,可以总结为2点:吸引、查看(摘要&详情)。

1)吸引

1. 一般是在原深感摄像头两侧展示(电话会直接展示扩展型),分为紧凑型和最小化。

2. 紧凑型在仅有一个活动/事件的时候展示,虽被原深感摄像头分割两端,但仅作为一条信息展示,为了视觉上的统一,这里的颜色不支持开发设置,使用的是系统默认色值。

3. 最小化在存在多个活动的时候展现,左侧和原深感摄像头粘连,右侧独立成岛。

4. 不管是紧凑型,还是最小化,都可以通过点击原深感摄像头区域,进入APP内页,或者长按唤出扩展型。



2)查看

1. 进入内页的查看基本就是各家显神通了,这里主要讲扩展型和锁屏。

2. 原则上是不支持在扩展型和锁屏做复杂操作的,基本点击是进入APP。

3. 扩展型是用户长按紧凑型/最小化唤起的展示区域,内容是可以自定义的,当然官方也给了相应的建议,具体如下。内容信息种类多的可以采用这种信息左中右排布,底部预留大按钮。内容信息少的可以采用左内容右操作的方式。



4. 根据一致性原则,锁屏展示的布局框架应该与扩展型差不多,同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行,是会全部展示的,所以要注意品牌的传递,避免用户混淆服务方。



5. 表现层——如何呈现这些东西

对于如何呈现这些东西,苹果还是写了很多建议,确保视觉上的一致性和美观。

1)颜色

1. 紧凑型状态下,为了保证两侧信息的连贯,除了语句阅读连贯,还需要在图形和颜色上具有一致性,视觉上连贯。

2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的,当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。

3. 设计师不仅要考虑最佳状态,还有深色&浅色模式下的,以及不同环境光、设备亮度下的显示。还有一点很容易忽视的,就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取,还需要考虑美感问题。

2)间距布局

1. 紧凑型和扩展型之间的布局要保持一致,两者间的变化过渡效果是可以预测的。

2. 一般来说,扩展型和锁屏状态下的信息间标准间距是20pt。

3. 在某些情况下,例如图形和按钮,您可能需要使用更紧凑的边距,以避免挤满边缘或形成混乱的外观。

3)圆角

1. 内容和Live Activity边缘之间的边距需要保持一致,请遵循SwiftUI规则。

1内容和Live Activity边缘之间的边距需要保持一致,,发现以圆角边界为测距点得到的间距关系较为舒适。即:圆形/大致为圆形的图形保持上下,3. 以及左侧或者右侧间距一致即可;方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一,才能确保间距的一致性。



4)尺寸

需要适应不同机型的尺寸。具体的尺寸规范如下。

a. 灵动岛

动态岛使用44个点的角半径,其圆角形状与原深感摄像头相匹配。



b. Live Activity大小

下表中列出的所有值均以pt为单位。
ps:左侧为宽度,右侧为高度。



以上就是整理分析的全部。

在整理分析过程中加强了对「用户体验5要素」各个层划分的理解,也对Live Activity在各个层次上的要求更加明确。


作者:Viola_1241
链接:https://www.zcool.com.cn/article/ZMTUxMTIzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:Viola_1241     来源:站酷

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

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

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

阅读可视化1:《交互设计沉思录》第一篇

分享达人

不太爱看书,看了老忘,就很容易失去信心,垂头丧气、一蹶不振。

比较喜欢做图,把信息间的逻辑以图示化的方式表现出来,能加强理解,后期回顾也会比较舒心。

所以就有了这个系列——阅读图示化。

可能会出得很慢,画图比较费时间,想着怎么展示信息间的逻辑也很费时间。

基本是按着小节一块内容对应单图/多图。

基本一张图是一个完整的知识点。





























作者:Viola_1241
链接:https://www.zcool.com.cn/article/ZMTUxNDE4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:Viola_1241     来源:站酷

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

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

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

经典案例研究:推动业务发展,利用B端设计挖掘潜在价值

分享达人

当今提到促进业务增长,尤其是有关互联网行业,总是绕不开B端设计。那么今天我们来挖一挖B端设计到底牛在哪里。

1、什么是B端设计

B端设计是指针对企业的终端用户的产品设计,包括适用于消费者、企业、政府、行业等等市场的协同、全方位的客户体验设计,例如产品UI/UX设计、信息可视化设计等等。B端设计是提供终端用户新的解决方案,注重以客户的需求为导向,通过数据分析、可视化、流程优化等手段来进行产品设计。

在一个产品设计中,要考虑到用户的体验,UI/UX有着至关重要的作用,它能够把产品从用户的角度出发,将用户直接引入到设计之中,使用户步入终端,真正成为使用者。

此外,B端设计还要注重对业务流程的优化,例如在订单管理系统的设计中,需要把客户的需求分析清楚,尽可能用最少的步骤帮助客户快速进行订单操作,增加操作效率;同时,也需要考虑到如何将整个管理系统融入到业务流程之中,使其成为一个可持续发展的解决方案。

此外,B端设计还需要考虑系统安全性和可用性。系统安全性指的是在设计过程中重视数据安全,例如考虑不同用户的权限,避免未经授权的访问以及防止误操作等;而系统的可用性则指的是系统操作的一致性,即如何在使用中满足客户的需求,在系统功能上保障系统的完备性和易用性,为用户提供更方便的操作体验。

2、B端设计的组成部分

正确的B端设计应包括:用户界面设计、业务流程的优化、系统安全性以及可用性的考虑等。

用户界面设计的目的在于提供简单易用的用户界面,以满足客户需求,提高用户体验。

业务流程优化则是确保系统能够有效地协调用户间的沟通,使用户流程更加高效、可靠。

系统安全性考虑需要重视数据安全,增加对不同用户权限的考虑,以避免未经授权的访问以及误操作。

而系统可用性方面,则需要系统操作一致性,保障功能的完整性和易用性,使用户操作更加便捷。

用户界面设计还需要考虑跨浏览器的兼容性,以确保用户能够在不同的终端上获得有效的使用体验。此外,对于功能性更强的应用,还需要考虑响应速度、网络请求数和业务性能等方面的优化,以便在处理大量的信息时能够有效地完成任务。

对于不同的用户群体,应当提供相应的交互界面设计,例如考虑弱智使用者和视觉障碍者,以及婴幼儿等特殊群体。此外,可以通过支持多种语言、国家文化差异和地域语言来优化用户体验。

3、如何使用B端设计原则来推动业务发展

B端设计原则可以帮助企业更好的把握商业机遇,推动业务发展。

首先,应当按照核心业务找出客户需求,深入挖掘,从客户视角出发,明确目标。

其次,要强化设计意识,注重交互性,利用技术手段和平台将功能元件组合在一起,以便更好地解决客户面临的问题和满足客户的需求。

最后,对产品的功能、使用效果和用户体验进行定期的测试评估,根据反馈进行变更和优化,以满足客户的需求。

4、如何利用B端设计实现潜在的价值

为实现B端设计的潜在价值,可以采用多重方法,比如从创新的角度增加产品的附加值,加强功能和服务体验,提升网站可用性,优化页面布局,提高页面加载速度等。

另外,还可以改进客户体验,通过可视化或语音技术提升网站和移动应用的交互性,以便让客户更容易获取想要的信息和服务。

此外,可以加强产品的社会化和移动性,以便更好地满足客户的需求,从而获得更多的潜在价值。

对于B端设计来说,还要考虑技术层面的因素。

首先,应根据客户使用情况进行系统优化,以提高系统效率。

其次,要重视人机交互技术,尽可能提供给用户更好的界面体验,并利用智能技术提升用户体验。

此外,应结合实际情况,采用合适的网络技术和安全技术,提升网站的安全性。

最后,还要将设计与市场营销结合起来,通过有效的营销手段,提高客户购买意愿,以获得更多的潜在价值。

B端设计要考虑的技术层面因素有:系统优化、人机交互技术、网络技术和安全技术以及营销手段。这些都是为了能够更好地满足客户的需求,并获得更大的价值。

5、优秀的B端设计案例,以及借鉴价值

首先,淘宝的B端设计把价值的提升放在了首位。它通过实时监测用户行为来分析用户习惯,以实现实时调整,提升客户体验。此外,淘宝的营销手段也让它的业务获得了极大的成功。

另外,微信也是一个优秀的B端设计案例。它引入了更多的人机交互技术,以有效沟通用户,同时也提供更安全、便捷的服务,大大提升了用户体验,获得了广泛的应用。

总之,优秀的B端设计不仅能优化用户体验,还可以带来更多的商业价值。

从用户体验角度来看,优秀的B端设计应包括系统优化、人机交互技术、网络技术和安全技术,这样可以给用户提供更流畅的体验,更快的响应速度和更好的安全保障。

此外,B端设计还应该拥有一套完整和灵活的营销手段,帮助企业获得更多的客户价值,以提升品牌影响力和竞争力。

要做好B端设计,一个重要的方面是把用户群体的心理需求和行为习惯结合起来,设计出更具吸引力的产品界面。例如,可以通过实时调整产品配置、设定营销活动等手段来满足不同用户群体的需求。

另外,为了提升用户体验,应该使用更智能化的人工智能(AI)技术,帮助企业更好地分析用户行为,从而更有针对性地进行产品调整。

总而言之,B端设计的成功关键在于结合用户群体的心理需求和行为习惯,并利用智能化的AI技术对用户行为进行分析,只有这样才能设计出更具吸引力的产品界面,满足不同用户群体的需求,并提升用户体验。

在企业开发B端产品之前,应该先进行大量的市场调研,以便弄清楚用户的心理需求和行为习惯,这也是设计成功的前提。在制定设计思路时,应该结合用户需求和行为习惯,并加入智能化AI技术,以有效调整产品界面,使其更具吸引力。在可行性研究阶段,应该采用多种方法,以测试产品整体性能,包括安全性、可靠性等,确保系统可以正常运行,避免潜在风险的发生,为用户的体验提供完善的保障。市场调研是设计成功的先决条件。除了市场调研,企业还应该采用新颖的营销策略,以拓展客户群,丰富产品服务,提升用户体验,实现B端设计成功。


作者:和阿莫伊
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:和阿莫伊     来源:站酷

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

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

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

浅析:设计趋势之开源设计

分享达人

什么是开源设计(Open Source Design)

在讲开源设计前,我们或许可以先讲讲开源一词是指什么。

开源全称开放源代码,开源软件最大的特点是开放,也就是任何人都可以得到软件的源代码,加以修改学习,甚至重新发放,当然是在版权限制范围之内。虽然开源一词最初是为软件开发而创造的,但现如今开源所涉及的领域也极其广阔,并不只是包括软件领域,如医药领域的药物开发开源、文化领域的书籍到期开源等等所以开源设计已包含了更广泛的含义,它包括了由任何人或者团队自由共享、协作的设计方案、项目、产品。

我们来看几个大型开源的设计了解一下~

开源设计资源举例

Ant Design

阿里的开源系统后台组件库

https://ant.design

ECharts

百度推出的开源图表

https://echarts.apache.org/

Unsplash 

全球知名图片开源平台 

https://unsplash.com

所以我们不难发现开源设计都有以下特点: 

免费(大部分是):开源设计的一个关键要素是它们通常(但不总是!)免费。这是一个重要因素,因为闭源设计通常需要花费不菲的价格或者冒着侵犯版权的风险去使用。 

思想碰撞:更多的设计师或者创意爱好者共同为一个创意提出自己的见解和再设计。


设计开源领域广阔:设计开源领域也几乎涵盖了所有的设计和创意领域如平面设计、三维设计、用户体验设计、环境设计、建筑设计、服装设计、插画、动画设计等等 

但是许多人可能会有一个疑问,开源设计和以往的素材网站或者源文件售卖网站有什么区别呢? 

在我看来,开源网站与传统售卖设计资源的网站最大的区别是开放与共建,以figma的社区为例,作者发布作品后,任何人都可以对其作品进行redesign甚至remix,这极大的提高了设计师的兴趣,每个人都希望自己的作品能被他人看到,也希望自己的创意能与他人的创意进行更好的结合,这是一个多么美好的场景。而传统网站只是冷冰冰的展示文件售卖资源,缺少了设计中的灵魂。 

那说了这么多,开源设计到底有哪些优势呢?

开源设计的优势 

提升设计效率:设计师不应花费时间去解决别人已经解决的问题,比如当我设计一个新项目时,无需从零开始设计系统组件,可以直接使用Ant Design、Ant Mobile Design等现有组件库。


增加学习机会:通过开源社区,设计人员可以从其他人所做的项目中学习,并与专业人员交流经验。 

提高设计质量:设计师自己看本人作品时,往往是身在其中不知如何下手,而将作品发布到更广泛的社区有助于设计师获得有价值的反馈以改进他们的作品。 

提升品牌价值:对设计开源后,公司品牌能在某些领域内获得传播,提升品牌价值。并且在招募人才时也能成为有吸引力的一项条件。 

提升个人价值:一个设计师想要提升个人价值和影响力,可以用开源作品来在行业内获得一定口碑,甚至直接将用户流量转化为订单,或许是更简单且容易的事情。 

从这些优势中不难发现,在开源生态中,我们的作品不再是一座孤岛,通过互联网,我们的作品可以和任何人进行链接并且产生共鸣,提升品牌和个人的价值,所以每个人都值得感受开源的美好。 

但开源的同时不可避免的会带来许多新的问题和挑战,让我们一起来看一下。

开源设计带来了哪些挑战 

知识产权问题:在开源社区中,设计师可能不清楚其创作的知识产权。因此,他们可能会不自知地侵犯其他设计师的知识产权。 

设计门槛问题:设计开源意味着设计师的门槛变低,任何人都可以随意使用开源的设计项目,导致设计师不再愿意花心血创作。 

设计师竞争力下降:开源设计意味着普通的设计内容已不需要单独的设计师来完成,顶尖设计师的机会会更多,而普通设计师的竞争力会明显下降。 

随着这些挑战的来临,如何更好的面对设计领域的开源是值得深思的问题,既要保护设计师的自身利益,也要让设计行业在开放、共享的环境下拥抱变革,所以在未来的道路上,我们每个人都可以尝试用自身的方法去探索未来,让每个人都能成为时代浪潮中的一朵浪花。


作者:芝麻侃设计
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:芝麻侃设计     来源:站酷

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

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档