首页

QQ群 | 社交体验设计思路

seo达人


 QQ作为国内最早期的一款Internet即时通信网络工具软件相信很多人都不陌生,甚至在29年后的今天仍然活跃,那么今时今日它是如何吸引用户使用的呢,一起来看看本期文章QQ群 | 社交体验设计思路

 

It is ultra experience

“群体是社会生活的核心,它决定我们是谁。”—-《走进社会学》

 

导语

人是群居动物,我们的生活被各样的群体包围着,他们给予我们所需的亲密关系和归属感。随着互联网发展,我们的群体逐渐往线上迁移,同时我们也在线上找到新的群体,但无论是线上群体还是线下群体,其持续存在都离不开互动、文化和规范。QQ群作为许多线上群体的汇聚点,近期也一直在不断的优化和丰富互动、文化和规范三方面的能力,以服务好更多的群体。

 

设计目标

群体从汇聚到后期不断成长,不同时期对应着不同的设计目标。

 

 

Part1 发现群体

帮助同好群体相聚

在现实社会中,人们因为有共同的目的而聚集在一起,形成群体。当互联网让群体能突破空间束缚时,人们会在网络上寻找自己线下较难发现的同好群体。

在早期互联网,群是QQ太阳等级用户的特权,当时QQ群的稀缺性,使得用户更谨慎的思考自己想要创建什么样的群。在创建者有意识的创建、用户有目的加入的背景下,QQ很早就提供不同的群分类,以供用户进行选择。

 

随着互联网普及率提高,网络社交成为人们日常。日益丰富的娱乐生活,不断激发人们多元化的交流诉求,建立群聊已不再是门槛,社交平台上不断涌现新的群聊。

此时群主们都希望在茫茫的群海中,自己的群能被用户发现并加入。另一方面,同样面对海量群聊的加入者,迫切希望能快速找到自己所感兴趣的群。

QQ在创建群与查找群都做了优化,以帮助群聊和加入者能更好的遇见彼此。

 

▎灵活的群体标签设置

QQ的群分类界限是清晰并互斥的,当群主在创建群时选择了影视分类,用户在搜寻时没有选择该分类,该群在本次筛选中就会被过滤掉。

而现实中的内容,是没有明确边界的,是存在关联与交叉的。

例如一个因热播电视剧而建立的影视群,可同时引发剧情讨论、追星、CP、音乐、美妆、摄影等不同的社交话题诉求。

 

QQ使用标签来丰富QQ群的个性设置,因为标签可以叠加,平台能以更多维度评估群聊,向用户进行更精准的推荐。标签还可自定义,用户可将新的热刺随时补充到标签,保持平台标签的新鲜度。

QQ在创建群聊时新增添加标签的步骤,给新创建的分类群更明确的指引,创建后也可以在群资料编辑里随时进行修改。

 

在查找群时,也不再使用分类过滤的方式,通过二级快捷筛选标签,增强用户对页面的查找指引,同时扩大内容区域,向用户展示更多群推荐结果。

 

在用户筛选出特定类型的群聊后,面临大量的推荐结果,如何选择加入,是用户决策的一个难点。

 

▎直观易懂的群活力

在群数量不多的早期互联网,群成员的规模是用户加入群聊的重要因素,而如今的用户对群聊社交的诉求更多元,会根据自身的咨询需求选择相应规模的群。

QQ将群聊的活跃元素进行拆解,用小火苗表示群聊消息的热闹程度,同时新增文件、相册、管理员活跃等标识,帮助用户更立体的了解群聊,并选择加入。

 

PART2 互动

激发聊天动力

当成员的归属感越强时,其参与聊天的积极性也会越高。通过对群用户的调研和分析,我们发现成员的归属感体现在以下三个纬度:

 

如果以上三方面能得到有效的提升,则可提高用户的归属感,激发其聊天动力。

 

▎更具成就感的群聊等级

现实生活中的职业、职级这类社会地位,可以引导我们的行为规范,让大家对各角色行为有预期以及新入群成员更快的融入群体,从而提升交流感。同时社会地位也给群体提供了一个目标,让各角色可根据自己的意愿,去赢得或取得更高的地位,提升个人成就感,进而增强归属感。

QQ群中的头衔体系模拟了现实生活中的社会地位概念,每个等级对应不同的头衔。头衔让线上组建的彼此陌生的群体成员之互动有一定无预期,能帮助用户融入群体以及获得成就感。但其也有明显的不足:

 

宽泛的等级导致较大群中同一层级内人数众多,角色行为预期不清,责任分散,交流感削弱,同时地位跨越时间变长,地位获取过程中激励不够。同时层级不清晰的等级名称认知感不强,削弱了成员成就感。为提高成员其成就感,我们希望等级层级关系更加清晰且获得过程更具有成就感。所以我们将更具有认知度的数字等级外显,同时从原来的6个等级细分到100个等级,让高等级用户成就感更强,获取等级过程中激励更频繁。同时因头衔名称能体现群特性,增加话题性,所以也保留其内容和展示。

 

▎体现独特性的互动标识

《群体性孤独》中也说到,用户喜欢网络社交,因为网络社交支持他们重立人设。每个个体都是独一无二的,都希望自己好的特质能被发现。我们希望群内用户在线上也能发觉自己的独特性,建立好的人设,以提升个人识别度和交流参与度,从而在群内有更强的归属感。

用户的真实特质无法捕捉,所以我们只能更具用户在群内的行为来推测其个人特质。同时特质是用来增加交流中的用户识别度,所以将会在聊天面板中展示。那如何展现这些体现个人特质的成就呢?这里我们借鉴了现实生活中的地位象征:当人们对自己的社会地位感认可且希望其他人认可时,会配相应的象征物,例如对已婚状态满意的会佩戴戒指、获得成就的将领佩戴勋章等。当你在群内拥有某项特质时,你将获得对应的象征物——一个荣誉图标。

 

为体现独特性,所有的标示度只有一个人少部分人可获得。因用户群内行为是一个动态变化的过程,可能昨天某个人话很多,但是这几天却又突然不说话了。所有特质都只是临时拥有,不满足条件时将被取代或消失。

 

PART3 文化

沉淀群特色内容

在群的成长过程中,会逐渐沉淀属于该群体的文化。文化是一个复杂的概念,它有群体创造形成,可以有不一样的形态,它可以是内容沉淀、价值观念、行为规范、科学技术等等。好的文化可以提高群体的创造力和凝聚力,成为群体价值的体现,对群的发展有积极作用。

 

QQ中已有被动的和主动的内容沉淀方式,成员在群内分享的文件会自动沉淀在群文件,也可以有意识的在群相册中上传照片。在此QQ新推出群精华和一起写,丰富群内容的沉淀类型,和鼓励群成员积极的共创属于自己的群内容。

 

▎日常互动可设为群精华

文化源于日常生活,特定同好的群内聊天,本身就会自带文化语言,曾经90后的火星文到现在00后的黑话,饭圈、二次元、古风等等都有自己的网络用语。群聊中的互动通过文字、语音、图片等形式记录着,这些内容就是该群的文化载体。

那么让如何让这其中的精彩内容被提取为文化,以被更多成员认可?

 

借鉴线下对有价值文化的传播的做法,我们将这项权利交给群内的权威:群主和管理员。为了群的长久健康发展,群主和管理员更积极的去鉴别对群有价值的内容,将内容设为精华。

标记过的精华内容都有金灿灿的标识,对发送者是一种肯定。点击后快速进入精华列表页面,查看更多被群认可的内容,鼓励群成员在群内积极互动。

 

▎主动共创新内容

文化创造的形式可以无数个人创作无数个作品,如唐诗;也无数人共同创作的一个作品,如汉字。QQ群内相册、文件、精华属于前者,我们也希望能够提供后面这种创作形式,因为针对线上群体而言,它不仅丰富了文化的创作类型,也增加了一种新的成员互动形式,兼具趣味性和情感连接。

有了共同创作的形式,我们还需要明确具体的创作内容,其应该具有以下特点:

 

通过观察用户的行为以及线下场景,我们发现共同创作文字作品具有以上特点。如现实生活中的留言板,共同编辑剧本,线上的接龙、问题探讨等,他们都体现了以上3点。所以我们提出一起写的概念,大家可以共同编写同一个内容。

这设计目标上我们也同样需要满足:

 

针对高效,在发起路径上可根据场景快速发起一起写:

 

发起后,在一起写过程一起群聊中,我们都会通过实时展示大家编辑的内容以及参与人员;在成员编辑结束后,我们会引导其发送到AIO,让更多人的知道大家正在共同编辑内容以及编辑人数,从而体现群体参与感的同时引导更多人参与。后期我们也将增加一起写的所有内容的沉淀入口,帮助大家进行文化沉淀。

 

PART4 规范

提升群管理效率

一个群体在扩展过程中,可能会产生一些群内纠纷,群主需通过建立规范来约束群成员的行为,以维持群聊的健康和长久运行。

 

随着群的规模或数量的增加,会给群主和管理员带来管理压力,QQ提供更多制定规范的新功能,协助群主和管理员更高效的管理群,维持群聊的健康运行。

 

▎高效规范群昵称

在不同的场合,人们会穿不同的服装装扮自己,以融入到该场合的情景与氛围中,一些不同的活动会议,也有特定的服装要求。

群昵称就像群聊中的一件专属衣服,使群成员区别于个体及其它群聊中的角色。

 

群主通过要求群成员修改群昵称,为群成员提供最简单的融入群体仪式感,同时形成群内的集体风貌。

不过这个仪式感体验并不顺畅,群昵称修改规则通常写在群公告中,与修改群昵称分别在不同的页面,尤其在手机端,增加了群成员编辑昵称时对照规则的难度。

为此QQ在群昵称修改页,新增管理员填写群昵称规则的功能,并支持添加预设词,管理员可根据群内规则,将固定前缀设为预设词模板。

 

群成员修改群昵称时可直接看到群昵称的命名规则,当有预设词时,可通过直接点击预设词自动输入,免除特殊字符难输入的情况。

 

▎公告支持已读回执

公告是管理员向群成员传达群聊规章制度、活动通知、重要消息等的主要方式。

QQ群公告一直跟随着线上群聊的发展,持续丰富群公告的功能:以特殊的消息样式向成员呈现、可填写多条公告、支持置顶公告等。

观察发现,管理员有时会直接在群聊里发通知,为的是能获得群成员的答复以便统计,因此支持管理员收集群成员已读回执的公告需求应然而生。

 

群成员在接收公告时,有前往确认的查看流程和确认操作,增强群成员对公告的阅读意识。该公告实际时管理员在编辑时,开启了需群成员确认收到的开关,QQ将帮助管理员统计公告的阅读名单,对于为确认的成员,管理员可一键通知他们再次查看。

 

▎机器人新增消息管理

群聊中的发言质量直接影响群成员的气氛体验,是衡量群聊发展健康程度的一个重要指标。管理员需对群内的发言和成员进行监督和管控,当群聊规模变大时,管理员的管理成本也随之增加。

Q群管家是一款辅助管理员的群机器人,此前已有的入群欢迎、定时消息、自助问答这些智能管理能力。在现有能力上,Q群管家新增一项发言管理能力。

管理员开启该功能,当群内出现非白名单的链接消息,可由Q群管家进行撤回,并对发送者发出警告。发言管理功能后续可扩充设置禁发关键词、敏感词推荐、根据触发次数踢人、管理日志等能力,敬请期待。

 

▎小程序提供多群管理

健康的群离不开群主和管理员的努力经营,传统的群聊管理路径,分散在每个群的群聊设置中。当用户管理多个群聊时,每次群的查找群、进入管理页面的路径都很长。

 

群管理小程序将用户所创建的、拥有管理权限的群集合起来,降低管理员的查找成本。每个群直接进入管理页面,大大缩短管理群的操作路径。每个群管理主页展示群数据,直观向群主呈现群聊最近的数据概况。

 

QQ持续挖掘管理需求,不断完善管理工具,提升群管机器人的智能能力,尝试多群批量管理功能,助力群主和管理员维持群聊的健康发展。

 

展望

“世界是一个舞台,所有的男人和女人只是演员。”——威廉.莎士比亚

所有的舞台都类似,但每个舞台又有其独特性。互动、规范、文化是所有群体持存的需要,QQ群现在更多的是在这些方面为群体提供通用的能力。但是每个群体又都有其独特性,例如粉丝群、游戏群、家校群等等,后续也将为各类群聊搭建符合其独有特性的舞台,以让所有角色更好更快的融入角色,感受到其加入的舞台的特色。

 

原文地址:ISUX

作者:腾讯ISUX

 

转载请注明:学UI网»QQ群 | 社交体验设计思路



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

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



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

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


从八个方向多维度分析服务设计

ui设计分享达人

服务设计大家也不陌生了吧,关注我们的同学也看过我们写过很多关于服务设计的文章这其中也有一些枯燥的科普文还有理性讨论的文章,当然也有很多不了解服务设计的小伙伴,所以这篇文章就来帮大家介绍一下:服务设计。

从用户体验到服务设计:没有人会告诉你这赤裸裸的真相
如果你想学服务设计,有哪些可选专业?[备查]
为什么要应用服务设计?
服务设计和用户体验设计:有什么区别?


吸引客户并与公司建立联系


服务设计方法帮助公司更有效地执行新思想、满足客户期望、打破藩篱并创造商业价值。通过可视化新的想法和客户旅程,并从第一天就与客户和员工进行测试,这种方法突出了潜在的挑战,并产生想法来缓解它们,从而增强了对想法的信心和对行动的更高承诺。


结论

  • 服务设计关注客户需求,执行想法并创造商业价值。

  • 从最开始,服务设计就通过与客户和员工进行测试来降低商业风险。

  • 在整个公司中共享客户洞见,可以打破藩篱,并使工作一致。


没有良好执行的聪明策略很少能实现卓越的服务。需要工艺、正确的方法和技能,才能以具体的方式将客户与企业联系起来。服务设计是帮助公司实现新的客户体验、满足客户期望、处理内部挑战和创造商业价值的强大工具。


顾客的视角


服务设计方法将人的关注点引入到服务的开发中。它帮助公司以客户的眼光来看待全局,并提供工具来设计客户与整个公司之间的每一个小小的互动。


客户洞见是有价值的


市场调查告诉你客户喜欢什么,但可能无法告诉你为什么。


服务设计者使企业能够更深层次地了解客户。从深度访谈和观察到创意客户研讨会,这些方法帮助公司理解为什么人们经常言行不一,以及寻找下一个大创意。


在整个公司中分享客户洞见也可以有效地打破藩篱并协调工作,这样公司就能够交付通过多种渠道与客户互动的体验。

观察顾客去了哪里,他们看到了什么,听他们说了什么。获得深刻的客户洞见,推动新想法。


眼见为实


让想法看得见摸得着是在组织内部澄清和获得新概念认同的有力方式。这种方法也突出了可能出现的潜在挑战,并有助于产生缓解这些挑战的想法,从而增强对这些想法的信心,提高对行动的承诺。


这就是为什么服务设计者总是在想法和解决方案出现时就将其可视化的原因。一种策略可以以可视的格式更有效地进行沟通,客户和员工之间的交流配上一段动画就会更容易理解,一个提议可以通过web界面的设计细节得到强化。

服务场景可以让企业立即了解新服务对客户和员工意味着什么。


服务蓝图


客户互动或接触点的关键时刻,越来越多地蔓延到公司的不同部分。


服务蓝图是一个可视化的工具,帮助公司协调不同的部门作为一个整体一起工作,以创建一个好的、一致的客户体验。蓝图是一幅地图,描述了客户通过新服务的旅程,以及公司如何通过各种渠道与他们接触。新客户体验的愿景共享有助于部门之间的协调,并使他们更致力于项目。

服务蓝图使公司能够看到各个渠道必须如何协同工作才能提供良好的服务体验。


测试体验


尽管在研发方面投入了大量资金,但仍有很多产品和服务在客户或交付成本方面失败的例子。


服务设计者通过让客户和员工从第一天就参与到测试中来降低这些风险。因此,在大量资金投入技术或公司变革之前,公司就可以学习、改变和完善理念。


可以快速而廉价地构建服务原型。设计师使用简单的模型和场景对少量客户和员工进行测试。在后期阶段,客户和部门数量有限的试点也可以产生更多的证据,证明服务可以在更大的范围内发挥作用。

一项针对英国无工作人群的为期9个月的试验证明了不同的人群是如何成功进入职场的。


它很有趣!


服务设计师被训练成以高度协作的方式工作,并拥有广泛的创造性方法来将这种思维模式带到公司中。


系统的、创造性的解决问题的方法的结合产生了大量的解决方案,并激励着团队不断创新。让我们玩得开心!服务设计方法放大了你克服障碍的潜力,使雄心勃勃的想法成为成功的现实。

我认为服务设计是当今商业世界中最重要的设计分支。-Kerry Bodine, Forrester Research副总裁兼客户体验部首席分析师

持久的客户关系


服务设计提供了创造性的、以人为中心的方法、工具和技能来执行策略。用这种方法来弥补公司所能做的和人们需要和想要的之间的差距。其结果将是创造更好的体验,建立持久的客户关系。

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

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



文章来源:站酷   作者:马克笔设计留学

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

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


UX映射方法对比:同理心地图、客户旅程图、体验地图和服务蓝图

ui设计分享达人

在工作中,由于每个人对用户目标、用户需求的理解点不同,而且每个人多多少少从自身体验出发,设计师、产品、技术人员很难对产品达成一致,导致产品需求评审、设计评审过程中发生很多争论、分歧,而且很难说服彼此。大家可以回想一下,是不是也经历过这些?


设计师和开发、产品经历,通常来自不同背景和经验的团队,他们必须就项目目标、用户需求和行为,甚至所涉及的组件流程达成共识。这种共同理解通常是通过可视化(通常称为映射)构建的。映射理解并描述了与产品相关的各个方面和过程。

四种类型的映射

本文概述了四种常用映射、它们的定义特征以及何时使用:

  • 同理心地图

  • 客户旅程地图

  • 体验地图

  • 服务蓝图

外,本文将概述在创建这些映射之前必须做出的准备。


同理心地图

同理心地图帮助团队成员了解用户的心态。


定义: 同理心地图是用来表述我们所知道的一个特定类型的用户的工具。它将用户知识外化,以便 1) 建立共同的理解,以及 2) 辅助决策。

特征:

  • 地图分为 4 个象限:所说、所想、所做、感觉。

  • 它显示了用户对与产品相关任务的看法。

  • 它不是按时间顺序或任务顺序排列的。

  • 每个角色或用户类型都有一个移情图(1:1 映射)。

为什么使用它:

  • 与用户建立同理心

  • 强制团队内部人员对齐和理解用户类型

何时使用:

  • 任何设计过程的开始

  • 在对用户访谈中的研究笔记进行分类时

客户旅程图

客户旅程地图侧重于特定客户与产品或服务的互动。

定义: 客户的旅程地图是过程的可视化:一个人为了实现特定的业务或产品目标的过程。它用于理解和解决客户的需求和痛点。

在最基本的形式中,旅程地图首先将一系列用户目标和操作编译到时间线框架中。接下来,用用户的想法和情感充实骨架以创建叙事。最后,该叙述被浓缩为一个可视化、用于传达将为设计过程提供信息的工具。

特征:

  • 该地图与特定产品或服务相关联。

  • 它分为 4 个泳道:阶段、行动、思想、心态/情绪。

  • 它反映了用户的观点:

    • 包括她的心态、想法和情感

    • 省略大部分流程细节

  • 它是按时间顺序的。

  • 每个角色/用户类型有一张地图(1:1 映射)。

为什么使用它:

  • 确定导致痛苦或愉悦的特定客户旅程接触点

  • 打破孤岛,对客户旅程建立一种共享的、组织范围内的理解

  • 将旅程中关键接触点的所有权分配给内部部门

何时使用:

  • 在设计过程的任何时候,作为整个产品设计周期中团队之间的参考点

体验地图

体验地图概括了跨用户类型和产品的客户旅程地图的概念。

定义: 体验地图是“一般”人为实现目标而经历的整个端到端体验的可视化。这种体验与特定业务或产品无关。它用于理解一般的人类行为(与客户旅程地图相反,后者更具体并专注于与特定业务相关)。

特征:

  • 它与特定的产品或服务无关。

  • 它分为 4 个泳道:阶段、行动、思想、心态/情绪。

  • 它提供了一个普遍的人类视角;它不是特定于特定用户类型或产品/服务的。

  • 它按时间顺序描述事件。

为什么使用它:

  • 了解一般人类行为

  • 创建对产品/服务不可知的体验的基线理解

何时使用:

  • 在客户旅程地图之前,以获得对一般人类行为的理解

  • 将多种体验(工具和特定用户不可知)融合到一个可视化中时

服务蓝图

服务蓝图是客户旅程地图的对应物,专注于员工。

 

定义: 服务蓝图可视化不同的业务组件之间的关系-人、道具(物理或数字证据)和流程-这是直接与接触点在特定客户的旅程。

将服务蓝图视为客户旅程地图的第二部分。与客户旅程地图类似,蓝图在涉及许多服务相关产品的复杂场景中发挥着重要作用。蓝图是实现全渠道、涉及多个接触点或需要跨职能工作(即多个部门的协调)的体验的理想方法。

特征:

  • 它与特定服务相关联。

  • 它分为 4 个泳道:客户行动、前台行动、后台行动和支持流程。

  • 它反映了组织的观点:

    • 专注于服务提供商和员工

    • 遗漏了大多数客户详细信息

  • 它是按时间顺序和等级划分的。

为什么使用它:

  • 发现组织中的弱点

  • 确定优化机会

  • 弥合跨部门的努力

  • 打破孤岛并创建一种对如何提供服务的组织范围内的共享理解

何时使用:

  • 客户旅程映射之后

  • 在进行组织或流程变更之前

  • 在内部查明漏斗或断点时

三步决策框架 

在开始任何映射工作(无论类型如何)之前,必须做出 3 个决定:

1. 当前与未来

这个决定涉及可视化中描述的动作和状态:它们反映了当前状态还是理想状态?

  • 当前映射基于您正在映射的实际“今天”状态。当映射目标是识别和记录现有问题和痛点时,这种方法是理想的。使用当前状态图帮助分析研究或围绕数据验证问题调整团队。

  •  未来的映射基于用户类型、体验或未来服务结构的“理想”状态。未来状态图有助于重塑和构思用户或体验在未来的感受。使用未来状态图为您的产品或服务的理想形式设置基准或目标。

2. 假设与研究

此决定取决于您将用于构建映射的输入类型。 

  • 假设映射基于团队或组织内现有理解的积累。这种方法是合并多个现有团队视图、创建研究计划(基于假设图中出现的差距)以及迈向更高保真度、基于研究的地图的第一步的好方法。 

  • 研究制图基于专门为构建地图而收集的数据。当有时间和资源专门用于制定研究计划时,这种方法是最好的。虽然这种方法可以创建最好的地图,但它需要时间和大量的支持。无论您从哪里开始,您的地图都应该是迭代的,并随着新发现不断更新。 

3. 低保真与高保真

该决定与最终地图可视化的质量有关。

  • 低保真地图未经打磨,通常以灵活、未经修饰的方式使用便签创建。这些地图在过程的早期阶段是最好的。低保真度意味着人们能够根据需要进行协作、修改和更新。使用便利贴(物理贴在墙上或使用 Mural.co 等工具以数字方式进行)或协作 Excel 表格。

  • 高保真地图经过打磨、数字化创建,看起来很完美。高保真地图最适合创建将在许多人之间共享的工件。高保真可以更容易阅读,但由于产品的“完成”性质,灵活性较差。这些地图通常以数字方式创建,然后分散。

结论

所有 UX 映射都有两个好处。首先,创建地图的过程会迫使对话和一致的心理模型。其次,映射产生的共享工件可在团队、组织或合作伙伴之间使用,以传达对用户或服务的理解。随着团队的前进,这个工件也可以成为决策的基础。

在一种映射方法上使用另一种映射方法不会对项目造成破坏,理想情况下,可以根据需要在产品设计流程的不同节点使用所有四项的组合,以深入了解用户需求。

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

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



文章来源:站酷   作者:ZZiUP

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

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


Vue2.0 阻止事件冒泡

前端达人


问题

描述:点击 save-btn 元素会同时触发 wrap 绑定的 click 事件。

<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result')"></div> </div> 

解决方案:阻止事件冒泡

  • 方案一:把特殊变量 $event 传入内联语句中,访问原始的 DOM 事件。

    <div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result',$event)"></div> </div> 
    // ... methods: { save(msg, event){ // 现在可以访问原生事件对象 if(event) event.preventDefault(); alert(msg); } } 
  • 方案二:利用 Vue.js 提供的事件修饰符解决。在 save-btn 元素上使用 @click.stop="save('save result')" 即可。

事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

.stop .prevent .capture .self .once .passive 
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 2.1.4 新增 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 2.3.0 新增 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成  --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <!-- 该修饰符尤其能够提升移动端的性能 --> <!-- 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。 --> <div v-on:scroll.passive="onScroll">...</div> 

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。



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

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


转自:脚本之家

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


作者:一通

来源:简书


什么是面向对象(OOP)

前端达人

入门便是不识

从我们开始接触Java这门语言后,就有人告诉我们这是一个面向对象的语言。说的最多的是new个对象,其实并不知道什么是对象。以为对象就是一个class(类),并不觉得有什么特殊。直到很久之后,面试官问到什么是OOP,嘴巴都是一个大O,OOP?WTF?那人厌恶的说到就是面向对象编程。我说:Java就是面向对象,就是一切以对象为载体,去编程,去面对。面试官: go out ! now!


滚回来的我赶紧看看什么是OOP,Object Oriented Programming,原来就是面向对象的编程啊,还有OOD(面向对象的设计),OOA(面向对象的分析)。那什么是面向对象呢?要想了解这个问题我们要先了解面向过程,这样对比我们就好理解了。

很早很早以前的编程是面向过程的,比如实现一个算术运算1+1 = 2,通过这个简单的算法就可以解决问题。但是随着时代的进步,人们不满足现有的算法了,因为问题越来越复杂,不是1+1那么单纯了,比如一个班级的学生的数据分析,这样就有了对象这个概念,一切事物皆对象。将现实的事物抽象出来,注意抽象这个词是重点啊,把现实生活的事物以及关系,抽象成类,通过继承,实现,组合的方式把万事万物都给容纳了。实现了对现实世界的抽象和数学建模。这是一次飞跃性的进步。

image.png

举个最简单点的例子来区分 面向过程和面向对象

有一天你想吃鱼香肉丝了,怎么办呢?你有两个选择

1、自己买材料,肉,鱼香肉丝调料,蒜苔,胡萝卜等等然后切菜切肉,开炒,盛到盘子里。

2、去饭店,张开嘴:老板!来一份鱼香肉丝!

看出来区别了吗?这就是1是面向过程,2是面向对象。

面向对象有什么优势呢?首先你不需要知道鱼香肉丝是怎么做的,降低了耦合性。如果你突然不想吃鱼香肉丝了,想吃洛阳白菜,对于1你可能不太容易了,还需要重新买菜,买调料什么的。对于2,太容易了,大喊:老板!那个鱼香肉丝换成洛阳白菜吧,提高了可维护性。总的来说就是降低耦合,提高维护性!

面向过程是具体化的,流程化的,解决一个问题,你需要一步一步的分析,一步一步的实现。

面向对象是模型化的,你只需抽象出一个类,这是一个封闭的盒子,在这里你拥有数据也拥有解决问题的方法。需要什么功能直接使用就可以了,不必去一步一步的实现,至于这个功能是如何实现的,管我们什么事?我们会用就可以了。

面向对象的底层其实还是面向过程,把面向过程抽象成类,然后封装,方便我们我们使用的就是面向对象了。

面向过程:

优点:性能比面向对象好,因为类调用时需要实例化,开销比较大,比较消耗资源。
缺点:不易维护、不易复用、不易扩展.

优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护 .
缺点:性能比面向过程差


原来君如此

image.png

面向对象的三大特性:

1、封装
隐藏对象的属性和实现细节,仅对外提供公共访问方式,将变化隔离,便于使用,提高复用性和安全性。
2、继承
提高代码复用性;继承是多态的前提。
3、多态
父类或接口定义的引用变量可以指向子类或具体实现类的实例对象。提高了程序的拓展性。

五大基本原则:

1、单一职责原则SRP(Single Responsibility Principle)
类的功能要单一,不能包罗万象,跟杂货铺似的。
2、开放封闭原则OCP(Open-Close Principle)
一个模块对于拓展是开放的,对于修改是封闭的,想要增加功能热烈欢迎,想要修改,哼,一万个不乐意。
3、里式替换原则LSP(the Liskov Substitution Principle LSP)
子类可以替换父类出现在父类能够出现的任何地方。比如你能代表你爸去你姥姥家干活。哈哈~~
4、依赖倒置原则DIP(the Dependency Inversion Principle DIP)
高层次的模块不应该依赖于低层次的模块,他们都应该依赖于抽象。抽象不应该依赖于具体实现,具体实现应该依赖于抽象。就是你出国要说你是中国人,而不能说你是哪个村子的。比如说中国人是抽象的,下面有具体的xx省,xx市,xx县。你要依赖的是抽象的中国人,而不是你是xx村的。
5、接口分离原则ISP(the Interface Segregation Principle ISP)
设计时采用多个与特定客户类有关的接口比采用一个通用的接口要好。就比如一个手机拥有打电话,看视频,玩游戏等功能,把这几个功能拆分成不同的接口,比在一个接口里要好的多。


最后

1、抽象会使复杂的问题更加简单化。
2、从以前面向过程的执行者,变成了张张嘴的指挥者。
3、面向对象更符合人类的思维,面向过程则是机器的思想



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

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


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

作者:猪_队友

链接:https://www.jianshu.com/p/7a5b0043b035

来源:简书

「 复杂系统如何设计」论B端产品的体系化构建(上)

seo达人



为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系?本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。

 

图片

目录

一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」

二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」

三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」

四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞

NEXT、「 下期预告 」设计体系的构建法则

 

前言

随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。

确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。

假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。

建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…

图片

“你是否有信心建造一个宏伟的高楼大厦?” 

这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。

当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。

图片

产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。

这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。

 

一、「 困局 」容易“失控”的B端产品

作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:

1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。

等等…

图片

很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。

随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。

这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。

那么,为什么B端产品特别容易出现这种问题呢?

 

A .「 关注重点的差异性 」

首先,产品的本质决定了其关注重点的差异性。

与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。

图片

因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。

 

B .「 微小差异的不断叠加 」

任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。

为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。

图片

但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。

就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。

图片

这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。

 

C .「 产品发展进入恶性循环 」

令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。

随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。

在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”

图片

  • 产品快速发展,功能不断叠加;
  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;
  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;
  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。
  • ……

 

D .「 进入效率拐点,产品失控 」

产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。

随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。

当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。

图片

就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。

最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。

那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱?

 

二、「 启发 」从复杂科学的角度思考设计

如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 

但是,在大自然面前,B端产品这种复杂程度显然不值得一提。

像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?

 

A.「 自然算法 」

道生一、一生二、二生三、三生万物…无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:

任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。

图片

就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”

在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。

科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。

它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。

图片

科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。

可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。

 

B.「 物质的构成原理 」

宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。

图片

不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单

在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。

混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。

图片

也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性

那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。

因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。

 

三、「 探究 」什么是产品设计体系?

产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?

A.「 定义 」

一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。

我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。

图片

但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。

 

B .「 组成部分 」

如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:

  • 控制产品外观——感知性模型(视觉风格/规范)
  • 制造基础构件——功能性模型(基础/复合组件)
  • 模块的构建规则——模式语言(产品框架规范)
  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)

图片

它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。

图片

从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。

 

C .「团队能力要求 」

设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度

同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。

图片

当然,这就要求设计师拥有更丰富的横向能力。

一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。

图片

另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。

 

D .「 构建方向 」

设计体系并非超脱于产品之上,而是根植于产品的成长过程中。

想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。

因此,在下一章,我们首先来了解一下B端产品的生命周期。

 

四、「 剖析 」B端产品的生命周期

对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。

本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。

 

「 产品生命周期概述 」

类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。

B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。

B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。

图片

而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。

图片

那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?

 

A .「 初创期 」解决核心问题,产生价值

初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行

从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。

在这个时期,产品需要解决以下几个问题:

图片

 

1)用户是谁?

B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。

站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。

想想看,最初一千名喜欢你产品的种子用户可能是哪些人?

 

2)产品能够解决什么问题?

我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?

这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性

我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。

 

3)这个问题是否普遍?是否具备标准化的可能?

不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。

这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。

 

4)是否能够形成完整的商业闭环?

用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?

B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。

不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。

解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。

 

B .「 成长期 」能力完善,产品扩张

成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。

与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的

图片

 

1)更多用户,更多真实需求

产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。

 

2)解决更多问题,业务范围扩张

经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”

 

3)功能完善,产品体量快速增加

伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。

 

4)组织逐渐完善,人员专业化

随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。

 

C .「 成熟期 」效率提升,快速增长

成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。

进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场

图片

 

1)产品效率、组织效能提升

经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率

 

2)产品设计-研发标准化,构建完整链路

通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力

产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率

 

3)提供高质量的用户体验

产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。

由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。

 

4)教育市场,卖给更多的人

当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要

 

D .「 暮年期 」商业价值降低,发展逐渐停滞

暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。

B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。

很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。

需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。

因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。

 

NEXT「 下期预告 」设计体系的构建法则你的B端产品处于什么生命周期?在这个阶段产品要解决的问题是什么?而在这些过程中设计体系又应该如何构建?

设计体系的建设并非一蹴而就,通常是伴随着产品的而发展逐步建立的。在下一篇文章中,我们将基于B端产品的发展阶段,带你详细了解设计体系的正确构建方式

图片

感谢大家的阅读,我们下期再见~

 

推荐阅读书籍/文章:

《智能商业》—— 曾鸣;《设计体系》—— [英] 阿拉·霍尔马托娃;《深奥的简洁》—— [英] 约翰·格里宾;《机械宇宙》—— [美] 爱德华·多尼克;《万物皆数》—— 米尔埃卡·洛奈;《产品从0到1的4个发展阶段》;《B端产品生命周期》;《复杂》——梅拉尼·米歇尔

 

原文地址:设计剑道(公众号)

作者:徐剑杰


转载请注明:学UI网》「 复杂系统如何设计」论B端产品的体系化构建(上)


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

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



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

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

S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴

seo达人




关于走进政企数字化转型下催生的设计新领域——客户体验设计质询;比起熟悉的事情,很多时候我们也愿意走进一些无人之地。

图片

图片

客户体验设计咨询是什么?

图片

图片
客户体验设计咨询服务分层 _

图片

 

客户体验设计咨询解决什么问题?

人,是商业变革的源头。我们通过帮助客户,从为用户提供美好的体验入手,从目标到结果提供设计咨询服务,为传统企业和政府客户,重塑其发展的可持续增长。

图片
用户体验优化体系 _

 

客户体验设计咨询和其他设计有什么不同?

体验思维定义了设计师新的增长边界,我们希望借助专业能力探索体验之于企业的价值边界。相较于「传统」设计,我们为客户提供的体验设计咨询是融合商业、项目管理、服务设计、交互设计和视觉传达设计等多元领域的交叉性设计类型。

图片
客户体验设计咨询孵化过程 _

 

设计师在其中扮演的角色是?

① 商业设计师 /  提供专业深入的设计咨询服务,担任客户数字化转型的设计顾问;

② 综合设计师 /  输出综合设计解决方案,担任项目里的设计交付负责人;

③ 专业设计师 /  承担某一设计领域的专家角色。

图片
客户体验设计咨询能力模型 _

 

如何提升效率与标准化程度?

客户体验设计咨询 — 产品化探索:

① 服务型设计产品,提供客户定制化设计服务;

② 基于系统平台的设计产品,提供固定的设计资产和软件能力,可配套少量人力服务。

图片
DPM 客户体验设计咨询平台产品 _

图片

图片

图片

客户体验设计咨询的行业化实践?

GTS (Global Technology Services) 品牌设计 _

图片

 

如何进行品牌建设?

我们将品牌与传播建设聚焦四大板块:品牌公关、市场活动、产品服务、品牌周边,建立规范化的品牌体系。

图片                    
图片                    
图片                                                      
                  
图片  
图片                    
GTS (Global Technology Services) 品牌心智建设 _

 

社会效率

一个项目的售前签单包含了设计能力宣讲,客户需求挖掘,市场竞品分析和服务体系介绍,除此外,还有产品 DEMO 设计和 POC 打单,这些都是设计助力售前的重要服务内容。

图片                    
图片                    
1. 某城市规划项目系统设计 _ 
2. 某新区门户设计 _

 

疫情项目

从爆发期各地政府紧急开发疫情大屏做人员治安管控和疾病防控,到后期复苏后人群限制性流动使用的移动端二维码管控,都是我们的设计对象。

图片                    
图片                    
某城市疫情监控大屏设计 _ 
某城市疫情码系统设计 _ 

 

行业探索

各行业中的数字化转型诉求,更多的是把线上线下的用户全流程体验进行闭环,从消费者,到合作商,再到公司内部运营,库存整合等等,都有多方产品的设计和输出。

图片
某金融行业数字大屏设计 _

图片

图片

未来

图片

图片

图片

原文地址:阿里设计中心(公众号)
作者:阿里设计中心

转载请注明:学UI网》S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴

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

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



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

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

让设计更有价值——设计流程指南

ui设计分享达人

一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。

所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值:



从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。


1.需求分析


我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。



背景分析


目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。



用户分析


目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。



竞品分析


目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。



需求评估


目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

           对不同类型的需求,我们都可以用5个问题去评估:

           1.是否可被证伪?

           2.目标是否明确?

           3.投产比如何?

           4.是否有更优解法?

           5.是否有可预见风险?

           基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。



目标对齐


目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、创新项目型。

           针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。



2.交互设计


在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。




设计原则


目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。



流程梳理


目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

           1.功能是否完整?

           2.链路是否流畅?

           3.步骤是否冗余?

           4.是否易于理解?

           基于以上问题,我们可以用自身的专业储备去推动流程的优化。



原型优化


目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

           1.架构是否符合目标

           2.层级是否足够精简

           3.信息是否传达准确

           4.状态是否有所缺失

       在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。



3.视觉设计


视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出准确且高质量的视觉页面。




设计情绪板


目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。



设计语言


目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。



典型页面


目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。



4.设计系统


在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。




基础规范


目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。



图标库


目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。



组件库


目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。



5.落地跟踪


在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。




设计评审


目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。



设计验收


目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。



数据验证


目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。



设计复盘


目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。


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

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


文章来源:站酷   作者:酷家乐UED

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

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

《产品设计中的容错性思考》

ui设计分享达人

使用互联网产品过程中,会有很多因素造成操作错误或失误,导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。


用户在实际使用互联网产品的过程中,会有很多因素造成操作错误或者失误,而导致无法顺利完成任务,或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖,可以提升产品纠错效率、降低用户操作出错概率,因此产品的容错性设计是交互设计中的重要内容,也是提升用户体验不可忽视的一个环节。



1、容错性是什么


容错性概念源于计算机领域,容错性是指计算机系统在发生故障的情况下,依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。

本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域,容错性的范畴更为宽泛,涉及产品对错误操作承载能力的多个方面,包括:如何降低用户操作的出错率,如何及时提供纠错帮助,以及如何给用户提供解决方案等内容。


2、为什么需要容错性设计

「 即便你的产品90%的时间都运行良好,但是如果在用户需要帮助时置之不理,他们是不会忘记这一点的。——《Getting Real》」

一个产品设计的无论多么简单,用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化,教育背景的不同,行为习惯的差异,复杂的使用场景,都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外,一些产品本身存在的因素,例如产品路径复杂,逻辑不畅等,也有可能造成用户无法顺利完成任务,亦或是完成任务的效率低,出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失,会给用户带来不好的用户体验,也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维,尽量避免用户错误操作的出现,当用户出现错误操作时,帮助用户识别、诊断,及时反馈问题所在,并提出有效的解决方案,帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的,给用户带来更优的用户体验,使用户与产品的交流更加顺畅。


3、容错性的设计方法

互联网产品的容错设计可从用户使用产品的三个阶段来考虑,即操作前、操作中、操作后。可大致归纳为以下几方面内容:首先在用户操作前给予正确有效的引导;其次在重要的操作步骤给予用户及时有效的提示;当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案;最后帮助用户在错误发生后迅速回到正确状态。


3.1给予用户正确有效的引导

在用户开始任务操作前给出用户正确有效的提示,可减少错误操作的发生。需要注意的是,引导应尽量醒目且简单易理解,确保能引起用户注意,并且在用户注意到后快速获取信息,到有效的防错帮助。

产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍,不同于曾使用过产品的用户或者高级用户,新用户首次使用产品的过程其实是一个学习的过程,此时需要让用户快速了解产品核心功能及主要的操作,帮助他们更快地上手。

例如下图导航APP新版本的新手引导【如图1】,在用户首次启动产品时,产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍,能够让新用户快速熟悉核心功能,并在正式使用产品的过程中提升效率,降低出错率。


undefined

图1-导航APP新手引导



第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导,产品的功能改动可能会是用户产生不同程度的陌生感,适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种,包括:遮罩式引导、弹窗式引导、气泡、浮层式引导等等。

例如版本升级后的音乐APP【如图2】,首页使用情感化图文设计加遮罩式的引导,可以有效将注意力集中到特定功能上,用户进入页面第一时间就注意到,确保了信息传达的有效性。

图2-新版首页的遮罩引导


以上列举的内容属于狭义层面的引导,用户尚处在被动接受引导的学习阶段,在此阶段引导的目的是提醒和防错。从广义的层面来讲,我们可将对用户的引导理解为”消减信息的不对称性“,当用户面对可影响其决策的因素时,给予用户关键性的信息提示和说明,可以促使用户做出正确的决策。

针对需要加工时间的特殊品类,如烘焙蛋糕,京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】,避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望,会给用户带来极为不好的购物体验。


图3-京东到家页面中的时效提醒



3.2 给予用户及时有效的提示

当用户进行一些如修改、删除、覆盖等不可逆操作时,系统需要在用户做出这类操作指令后告知其产生的后果,让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑:一是提示的方式,二是提示的时机。


3.2.1提示的方式

在用户完成任务的操作路径中,大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】,主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示,要依据提示信息的优先级和视觉权重的大小,同时要清楚不同类型的弹框适合的场景。


图4-弹框分类


模态弹窗是较重的提示方式,在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点,缺点是会打断用户当前的操作流程,用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。

而非模态弹框属于轻量级的提示方式,其优点是不强制用户进行交互操作,或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失,所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小,但也因此容易被用户忽视。


3.2.2 提示的时机

给用户的信息提示还有一点不可忽视的是反馈时机,应确保用户在关键的操作步骤得到及时的反馈,因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程,或者要修改关的一系列信息。

【如图5】中的登录页面,用户登录需要依次输入手机号、密码、图片验证码,但如果用户输错了密码并不能马上得到反馈,依然可以继续填写验证码,只有在全部信息填写完之后点击登录,系统才会校验密码,并提示用户密码错误重新确认,用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前,在用户在得到密码填写错误提示后则可以停止操作后面的步骤,马上修改密码。


图5-登录页面中的提示滞后



3.3 为用户提供纠错帮助以及解决方案

一旦用户出现错误或失误操作的情况,系统需要为用户及时提供纠错帮助及有效的解决方案,以提高用户操作的成功率。 
关于纠错文案的表达应注意尽量简洁清晰、精炼准确,避免使用难懂的术语,不要在出错信息中使用威胁或者责备的语气。应主动识别用户的情感状况,语气友好,让用户感受到“情感支持”,尽量为用户缓解因操作失误产生的挫败、焦虑等负面情绪。 
此外,纠错信息内容不可仅描述场景,还需要向用户反馈出错原因,并且有明确的指向性,为用户指出错误出在什么地方。例如在填写部分内容较多的表单时【如图6】,当证件号填写出错时,系统及时为用户纠错并用一条红色的下划线明确指出了信息填写错误的位置,用户可以立即定位并修改错误信息。 


同时,尽量为用户提供相应的解决方案,这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错,并且会告知用户如何去管理储存空间,以解决此问题【如图7】。


图6-多行表单报错页面



图7-存储空间不足报错提醒 


在产品设计中,为降低操作的出错率,限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作,增加不可逆操作的难度,可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计,可以有效避免用户的误操作。

此外通过让控件、动作、选项等变得可见,尽可能减少用户记忆负担,把需要记忆的内容作为辅助信息提供给用户,或帮助用户自动完成信息填写也可以帮助用户快捷高效地完成既定任务,降低出错率。例如【如图8】在信息填写的步骤,可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容,并在用户确认后自动帮用户填写对应信息,为用户大大节省时间和记忆成本,快捷高效地完成既定任务,降低出错率。


图8-系统自动识别用户复制文本中的姓名、电话、地址 


3.4 帮助用户在错误发生后迅速回到正确状态

在用户执行操作后,应尽可能的为用户保留已操作的信息,以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务,记录用户在每一步骤的操作信息,让用户可以从出错的步骤上及时恢复到正确的流程上,或恢复到距离错误操作最近的步骤,可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作,在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮,可让用户有机会恢复到上一步操作结果上。


图9-图片编辑页面顶部切换上一步和下一步的操作按钮


总结

以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中,可以模拟使用场景,对目标用户使用产品的真实操作进行行为观察,分析对比产品设计的操作路径与用户真实操作的差别,发现并收集用户可能发生错误或失误操作的关键步骤,验证产品的容错能力是否能达到有效覆盖。同时,也要通过产品数据的对比分析得出用户操作错误及失误的真实原因,指导并提升产品容错能力的设计优化,进而不断提升产品的可用性和易用性。


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

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


文章来源:站酷   作者:DXC设计体验中心

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

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





浅谈VUE防抖与节流的最佳解决方案(函数式组件)

前端达人

这篇文章主要介绍了浅谈VUE防抖与节流的最佳解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了“12”就会请求两次接口参数分别是“1”和“12”,比浪费网络资源更要命的是如果参数为“1”的请求返回数据的时间晚于参数为“12”的接口,那么我们得到的数据是和期望不符的。当然基于axios可以做很多封装可以取消上一个请求或者通过拦截做处理,但还是从防抖入手比较简单。

防抖和节流到底是啥

函数防抖(debounce)

解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。

案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数。

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, wait) {
 let timeout = null
 return function() {
  if(timeout !== null) clearTimeout(timeout)  
  timeout = setTimeout(fn, wait);
 }
}
function handle() { 
 console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

addEventListener的第二个参数实际上是debounce函数里return回的方法,let timeout = null 这行代码只在addEventListener的时候执行了一次 触发事件的时候不会执行,那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时器,当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行,这是debounce函数的原理

函数节流(throttle)

解释:当持续触发事件时,有规律的每隔一个时间间隔执行一次事件处理函数。

案例:持续触发scroll事件时,并不立即执行handle函数,每隔1000毫秒才会执行一次handle函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function throttle(fn, delay) {
 var prev = Date.now()    
 return function() {       
  var now = Date.now()       
  if (now - prev > delay) {         
   fn()       
   prev = Date.now()      
  }    
 }   
}   
function handle() {     
 console.log(Math.random())  
}
window.addEventListener('scroll', throttle(handle, 1000))

原理和防抖类似,每次执行fn函数都会更新prev用来记录本次执行的时间,下一次事件触发时判断时间间隔是否到达预先的设定,重复上述操作。

防抖和节流都可以用于 mousemove、scroll、resize、input等事件,他们的区别在于防抖只会在连续的事件周期结束时执行一次,而节流会在事件周期内按间隔时间有规律的执行多次。

在vue中的实践

在vue中实现防抖无非下面这两种方法

  • 封装utils工具
  • 封装组件

封装utils工具

把上面的案例改造一下就能封装一个简单的utils工具

utils.js

1
2
3
4
5
6
let timeout = null
function debounce(fn, wait) {
 if(timeout !== null) clearTimeout(timeout)
 timeout = setTimeout(fn, wait)
}
export default debounce

app.js

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" @input="debounceInput($event)">
 
import debounce from './utils'
export default {
 methods: {
  debounceInput(E){
   debounce(() => {
    console.log(E.target.value)
   }, 1000)
  }
 }
}

封装组件

至于组件的封装我们要用到$listeners、$attrs这两个属性,他俩都是vue2.4新增的内容,官网的介绍比较晦涩,我们来看他俩到底是干啥的:

$listeners: 父组件在绑定子组件的时候会在子组件上绑定很多属性,然后在子组件里通过props注册使用,那么没有被props注册的就会放在$listeners里,当然不包括class和style,并且可以通过 v-bind="$attrs" 传入子组件的内部组件。

$listeners: 父组件在子组件上绑定的不含.native修饰器的事件会放在$listeners里,它可以通过 v-on="$listeners" 传入内部组件。

简单来说$listeners、$attrs他俩是做属性和事件的承接,这在对组件做二次封装的时候非常有用。

我们以element-ui的el-input组件为例封装一个带防抖的debounce-input组件

debounce-input.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
 <el-input v-bind="$attrs" @input="debounceInput"/>
</template>
<script>
export default {
 data() {
  return {
   timeout: null
  }
 },
 methods: {
  debounceInput(value){
   if(this.timeout !== null) clearTimeout(this.timeout)  
   this.timeout = setTimeout(() => {
    this.$emit('input', value)
   }, 1000)
  }
 }
}
</script>

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
 <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input>
</template>
<script>
import debounceInput from './debounce-input'
export default {
 methods: {
  inputEve(value){
   console.log(value)
  }
 },
 components: {
  debounceInput
 }
}
</script>

上面组件的封装用了$attrs,虽然不需要开发者关注属性的传递,但是在使用上还是不方便的,因为把el-input封装在了内部这样对样式的限定也比较局限。有接触过react高阶组件的同学可能有了解,react高阶组件本质上是一个函数通过包裹被传入的React组件,经过一系列处理,最终返回一个相对增强的React组件。那么在vue中可以借鉴这种思路吗,我们来了解一下vue的函数式组件。

关于vue函数式组件

什么是函数式组件?

函数式组件是指用一个Function来渲染一个vue组件,这个组件只接受一些 prop,我们可以将这类组件标记为 functional,这意味着它无状态 (没有响应式数据),也没有实例 (没有this上下文)。

一个函数式组件大概向下面这样:

1
2
3
4
5
6
7
8
9
10
export default () => {
 functional: true,
 props: {
  // Props 是可选的
 },
 // 为了弥补缺少的实例, 提供第二个参数作为上下文
 render: function (createElement, context) {
  return vNode
 }
}

注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的特性都会被自动隐式解析为 prop。但是你一旦注册了 prop 那么只有被注册的 prop 会出现在 context.prop 里。

render函数的第二个参数context用来代替上下文this他是一个包含如下字段的对象:

  • props:提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 一个函数,返回了包含所有插槽的对象
  • scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  • parent:对父组件的引用
  • listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  • injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。

vm.$slots API 里面是什么

slots用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。

slots() 和 children 对比

你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗?在一些场景中,是这样——但如果是如下的带有子节点的函数式组件呢?

1
2
3
4
5
6
<my-functional-component>
 <p v-slot:foo>
  first
 </p>
 <p>second</p>
</my-functional-component>

对于这个组件,children 会给你两个段落标签,而 slots().default 只会传递第二个匿名段落标签,slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots(),因此你可以选择让组件感知某个插槽机制,还是简单地通过传递 children,移交给其它组件去处理。

一个函数式组件的使用场景

假设有一个a组件,引入了 a1,a2,a3 三个组件,a组件的父组件给a组件传入了一个type属性根据type的值a组件来决定显示 a1,a2,a3 中的那个组件。这样的场景a组件用函数式组件是非常方便的。那么为什么要用函数式组件呢?一句话:渲染开销低,因为函数式组件只是函数。

用函数式组件的方式来实现防抖

因为业务关系该防抖组件的封装同时支持 input、button、el-input、el-button 的使用,如果是input类组件对input事件做防抖处理,如果是button类组件对click事件做防抖处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const debounce = (fun, delay = 500, before) => {
 let timer = null
 return (params) => {
  timer && window.clearTimeout(timer)
  before && before(params)
  timer = window.setTimeout(() => {
    // click事件fun是Function input事件fun是Array
   if (!Array.isArray(fun)) {
    fun = [fun]
   }
   for (let i in fun) {
    fun[i](params)
   }
   timer = null
  }, parseInt(delay))
 }
}
export default {
 name: 'Debounce',
 functional: true, // 静态组件 当不声明functional时该组件同样拥有上下文以及生命周期函数
 render(createElement, context) {
  const before = context.props.before
  const time = context.props.time
  const vnodeList = context.slots().default
  if (vnodeList === undefined){
   console.warn('<debounce> 组件必须要有子元素')
   return null
  }
  const vnode = vnodeList[0] || null // 获取子元素虚拟dom
  if (vnode.tag === 'input') {
   const defaultFun = vnode.data.on.input
   const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
   vnode.data.on.input = debounceFun
  } else if (vnode.tag === 'button') {
   const defaultFun = vnode.data.on.click
   const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
   vnode.data.on.click = debounceFun
  } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') {
   const defaultFun = vnode.componentOptions.listeners.input
   const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
   vnode.componentOptions.listeners.input = debounceFun
  } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') {
   const defaultFun = vnode.componentOptions.listeners.click
   const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
   vnode.componentOptions.listeners.click = debounceFun
  } else {
   console.warn('<debounce> 组件内只能出现下面组件的任意一个且唯一 el-button、el-input、button、input')
   return vnode
  }
  return vnode
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
 <debounce time="300" :before="beforeFun">
  <input type="text" v-model="inpModel" @input="inputChange"/>
 </debounce>
</template>
 
<script>
import debounce from './debounce'
export default {
 data() {
  return {
   inpModel: 1
  }
 },
 methods: {
  inputChange(e){
   console.log(e.target.value, '防抖')
  },
  beforeFun(e){
   console.log(e.target.value, '不防抖')
  }
 },
 components: {
  debounce
 }
}
</script>

原理也很简单就是在vNode中拦截on下面的click、input事件做防抖处理,这样在使用上就非常简单了。

自定义指令 directive

我们来思考一个问题,函数式组件封装防抖的关节是获取vNode,那么我们通过自定义指令同样可以拿到vNode,甚至还可以得到原生的Dom,这样用自定义指令来处理会更加方便。。。。。。


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

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


转自:脚本之家

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

个人资料

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

存档