首页

UI中国App UI设计大赛

seo达人




UI中国App UI设计大赛

 

  • 千呼万唤,UI中国App终于要来了!
  • 你想象中,TA应该什么样?
  • 无需辞藻华丽,你的创意就是利器。
  • 你想要什么样,就让TA什么样,
  • 这一次,做一回自己的甲方爸爸!
  • 一切准备就绪,U你来!

 

大赛时间

作品征集:2019.3.5-2019.4.7

作品评审:2019.4.8-2019.4.10

初赛公布:2019.4.11

决赛评选:2019.4.12-2019.4.17

最终公布:2019.4.18

 

  • 本次赛事分为2个阶段,4月11日初赛公布16个获奖选手,并公布优秀奖和三等奖,其余3人进入决赛,并在决赛评选阶段补充最后2个页面设计,4月18日公布最终一、二等奖结果。

 

奖项设置

一等奖(1名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

二等奖(2名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

三等奖(3名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

优秀奖(10名)

千呼万唤,U你来!| UI中国App UI设计大赛

 

参与本次大赛的设计师均可以获得:

  • ProtoPie 2周使用码
  • 2个月墨刀2人版VIP会员
  • 摹客iDoc高级版本3个月使用授权
  • “字加”内字体参赛免费使用权限(仅限本赛)

 

 

大赛评委

千呼万唤,U你来!| UI中国App UI设计大赛

 

 

要求

  • 1.设计规范:参赛设计师需整理设计规范;
  • 2.尺寸:1125X2436px;
  • 3.元素尺寸: App设计中所用封面图、banner等尺寸比例须和web端保持一致,下文有标注说明,如有遗漏可在大赛指定交流群反馈,亦可通过浏览器的「检查」功能查看;
  • 4.字体要求:字体使用安卓或iPhone适配字体;
  • 5.页面数量要求:小红点标记的关键页面必须设计,完成剩余会加分;
  • 6.交互原则:参赛设计师可以在保证功能和主要元素不变的情况下对交互、动效细节自由发挥,但大的交互改变有影响评奖的风险,需和主办方产品负责人商讨。大赛交流QQ群:700240526
  • 7.待定功能:第三个导航栏菜单——「灵感」由于时间关系原型待定,将于决赛阶段公布,但导航菜单设计需按5个菜单设计。参赛设计师亦可自由发挥,为自己设计喜欢的功能
  • 8.注意事项:注意不要遗漏空页面,网络异常,加载动画等设计;
  • 9.设计工具:工具不限(建议使用Sketch)。
  • 10.交互原型链接https://free.modao.cc/app/2a1595bec25f6300202d33f20da42291bdb1edbd

活动规则

  • 1.作品截稿时间为2019 年4月7日23:59:59,请参赛者及时上传参赛作品,逾期则不能参加评选。
  • 2.本次赛事分为2个阶段,4月11日初赛公布16个获奖选手,并公布优秀奖和三等奖,其余3人进入决赛,并在决赛评选阶段补充最后2个页面设计,4月18日公布最终一、二等奖结果。
  • 3.参赛者在提交作品前请确保已经阅读并且愿意遵守相关比赛规则,参赛者提交的参赛作品均须未被商用且未授权他人使用,必须为参赛者为本次大赛单独原创且未经发表的作品,参赛者须保证未自行使用或许可任何第三方使用参赛作品,未转让参赛作品的任何权益或在其上设置任何权利负担或限制,否则主办方及承办方有权取消参赛者的参赛资格,并要求要求参赛者返还所获奖金以及赔偿主办方和承办方由此遭受的所有损失。
  • 4.如多人合作,需征得所有合作者同意并标明所有合作者姓名;同一用户名可上传多组不同参赛作品,评选结果以作品为单位,即同一用户名可获得多个奖项;同一作品提交多次的,以最晚提交作品为准。
  • 5.一等奖和二等奖获得者,需配合主办方签署作品著作权转让协议,主办方无须就该作品另行向参赛者或任何第三方支付任何费用、报酬或款项,且参赛者保证不再自行使用或提供或转让给任何其他第三方使用。
  • 6.三等奖及优秀奖获得者需配合主办方签署作品著作权共享协议,主办方无须就该作品另行向参赛者或任何第三方支付任何费用。
  • 7.其他参赛作品的版权仍归参赛者所有。主办方拥有对所有参赛作品进行展示、报道、宣传及用于市场活动的权利,且无需向作者支付任何费用。
  • 8.获奖通知将在最终结果公布后5个工作日内通过邮件方式发送至获奖选手的UI中国注册邮箱,手机号码注册的选手请在个人资料页绑定邮箱。
  • 9.获奖选手请在3个工作日内回复获奖通知,并根据邮件内容,配合主办方完成获奖作品源文件收集、作品作品知识产权共享协议签署、奖金奖品发放等工作。若获奖选手在限定时间内对获奖通知未做回应或提供相关源文件,则视为放弃奖项,根据排名依次递补。

参赛网址:https://activity.ui.cn/uiapp


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

                                                            微信图片_20210513163802.png

 

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

 

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





贝佐斯的“70%法则”,帮你更快做出决策

雪涛

导语:尽管杰夫·贝佐斯身上的黑料可不少,但是实事求是地说,亚马逊在他的手上发扬光大,说明他还是有两把刷子的。起码在如何快速决策这一领域,他提出的“70%法则”还是很管用的。这一法则的意思是当你掌握了70%的信息后就应该立刻做出决定了。考虑到不少人总是在犹豫不决,这一法则其实可以算作是过度思考者的福音了。无论如何,要记住一个错误的决定总比没有决定好,以及从来就没有所谓的最终决定。


尽管发型相同,但我不是杰夫·贝佐斯(Jeff Bezos)的粉丝。这家伙是个混蛋,他对雇员非常严苛,逃税,试图通过金钱干预选举,欺骗他的妻子,还有干了很多其他的坏事。

但这个混蛋很聪明。他的一个个决策使亚马逊(Amazon)从一家在线书店成长为一个富有的(甚至有点可怕的)商业帝国。考虑到商业中最重要的能力就是做出正确的决定,我认为我们应该偷师“暗黑贝佐斯”,从他身上学到点什么。“70%法则”就是其中之一。

一、什么是“70%法则”?

很简单,就是你应该在掌握了70%的信息后就做出决定。

我知道你有很多问题,让我们一个一个来分析。

二、为什么要提出这一法则?

来,为了把问题捋清楚,我们把做出一个好的决策所需要的所有信息称为“必要信息”。

贝佐斯解释说,高质量的决策需要90%的必要信息。明白了吗?获得这高质量的“90%”需要很多时间,而速度在我们这个快节奏的世界至关重要。无论是在工作中还是在家里,如果你不赶快做出决定,你就会错过很多机会。

如果你和我一样犹豫不决的话,在你决定如何使用那些在线优惠券获取最大优惠之前,它们就已经过期了。你还因为忙着选剧而不是看剧,硬生生地把睡前一小时的放松时间给弄没了。不过你也不要担心,就算是商业精英,同样也会有举棋不定的时候。

当Twitter提出40亿美元的收购要约时,Clubhouse的创始人犹豫了。不久之后,Twitter成立了Spaces——和Clubhouse功能差不多。突然之间,Clubhouse不再像以前那么热门了。20世纪90年代至21世纪初,诺基亚(Nokia)一直是移动行业的领导者。当时关注的重点是硬件,但当新的挑战者出现时,关注的重点已经转向了用户体验。诺基亚又足足过了7年才开始认真对待用户体验,只不过为时已晚,苹果公司(Apple)早就主导了这个市场。

以上所有例子都传达了同样的信息:“等待太久才做出决定很是糟糕。”

这就是贝佐斯提出“70%法则”的原因。他说:“在做出大多数决定时,你应该掌握你希望掌握的70%的信息。如果你想要掌握90%的信息,在大多数情况下,你可能会很花太多时间。”

三、犯错总比行动迟缓要好

在商业上,没有所谓的最终决定。你可以随时改变方向、停止行动或返回起点。

“如果你擅长修正方向,那么犯错的代价可能比你想象的要低,”贝索斯说。“然而,慢下来肯定会代价高昂。”这就是发生在诺基亚身上的事情,以及Clubhouse正在遭遇的事情。

所以,亲爱的读者们,当涉及到决策时,请记住,犯错总比行动缓慢要好。

四、过度思考者的灵丹妙药

这是一个那些过度思考者非常熟悉而且特别容易陷入的情况:你掌握的信息越多,你就变得越犹豫不决。这就是所谓的“决策瘫痪症”,但“70%法则”可以帮助你打破这个困境。

当你掌握了70%的信息时,你就和自己签下了一个精神契约,这个契约会让你避免陷入沉思模式。这就像把你的饼干盒搬到地下室,从而让自己搞砸自己的健康的成本变高了,毕竟如果这下你想吃饼干的话,就没那么方便了。

五、最后,你怎么知道你掌握了70%的必要信息?

你当然不可能准确知道自己是不是掌握了70%的必要信息,但你可以尝试着估计一下。

如下三种方法可以帮助你估计自己是否已经掌握了70%的必要信息。

  • 测量时间而不是信息。如果你有十天的时间做决定,那么到了第七天,就不要再考虑你的选择了,顺其自然吧。这一招对文书工作、旅行计划和创造性工作最有效。
  • 使用清单来量化信息。列出一份可以帮助你做出决定的需求清单。当你在列表中划掉70%的时候,就该做出决定了。这一招在购物、求职和合作方面最管用。
  • 向外界寻求帮助。这就像是作弊行为,但很管用。可以问问进度稍微比你靠前的人。“你认为我需要了解多少信息才能做出这个决定?”这一招几乎适用于任何决定,但是难就难在不太容易找到一个可靠的人来帮助你。

在这篇文章的结尾,我想强调一下关于商业决策的两件事:

  • 一个错误的决定总比没有决定好;
  • 根本就没有所谓的最终决定。



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

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



文章来源:人人都是产品经理   作者:纸皮小火车

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

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



如何通过设计驱动产品的增长设计

雪涛

在《增长黑客》中有这样一句话“If you are not growing,then you are dying!”(如果企业不在增长,那么就在衰亡!),这话也适用于个人。人生毕竟不像企业,是非成败,似乎都无可厚非,所以我们常常放飞自我偏离轨道,以至于有时候不得不提醒自己“不在成长,就在消亡”。我们来人间一趟,有没有全力以赴想要成全的事?可以反复尝试、不断接近吗?所以,我认为,增长它是一个永恒的话题,我们在学生时代读书的时候希望自己的分数与排名能增长,在企业上班工作的时候,我们希望我们的收入能增长,当我们创业的时候,我们希望自己企业的业绩能增长,增长是长期伴随着我们生活的一个指数。

《在大数据时代》一书中提出了“量化一切”的概念,即一切都可以用数据来衡量。其实,在“数字敏感”的互联网时代,电商平台“销量”、电影票房、百大up主、文章阅读10w+等等,我们其实早已在不知不觉中用数据丈量着一切。

增长设计这个概念好像是最近几年才广为互联网从业人员才熟知,成为每个互联网er所讨论的热门话题,因为在过去的十多年,是中国经济数字化腾飞发展的十年,我们90后更是亲身见证着互联网企业的成长,“眼见他起高楼,眼见他宴宾客,眼见他楼塌了”。

我们关于用户增长也是在不断的迭代的,从最早期的雏形AIDA法则,由路易斯提出推销模式,西方推销学中一个重要的公式,AIDA法则也称“爱达”公式,然后到2007年的facebook,提出这个概念,即,我们知道我们的广告费是浪费掉了,但是我不知道是哪一半,于是,精于广告投放的facebook便通过科学的,可复制性,可以被检测的广告投放可以帮助于其他企业做好用户增长,然后便是我们知道后期比较流行的AARRR海盗模型这样更加精细的用户增长策略.


2.1 关于增长设计


在近几年我们经历了从互联网市场在基本火热到冷静,尤其是随着移动互联网的流量红利开始消失,“增长黑客”与“用户增长”这两个概念开始慢慢火爆开来,我们国内互联网企业互联网从业人员也开始重视用户增长。

企业的增长,也可以理解为企业的成长,所以企业能否保持增长,是老板和员工都比较关心的一件事,因为企业只有保持一定幅度的增长,才能保证大家在未来继续过上好日子。以前传统企业做增长可能就是通过赞助冠名一个很火的电视栏目,或者请个明星作为企业产品代言人,都可以在一定时期内来吸引消费者的关注,实现快速增长。但是这几年我们可能也发现了,传统意义上的营销手段似乎不太管用了。因为以前我们从在电视和传统纸媒上获取信息的用户都慢慢转移到朋友圈、B站、抖音等互联网头部平台,过去的传统营销三板斧来拉动企业业绩的增长,已经变得越来越难。

所以我们发现,在2017 年可口可乐宣布取消 CMO(首席营销官),由 CGO(首席增长官)替代,以增长为中心的各个职位在招聘网站上也如雨后春笋一般涌出。

看到这里,这些好像和我们从事Ui视觉工作的好像关系并不是很大,而恰恰相反,我认为用户增加设计并不是一套虚无缥缈的说辞,而是一种能够与团队协助的工作形式,在一个产品团队中,我们每一个人都应该了解一些关于用户增加设计方面的知识。

我们所知道的产品是为用户在服务,是为了满足用户的实际的需求,所以我们所理解的增长设计便是产品创造了价值,而增长设计是将产品的价值放大传递,让更多的人去发现。


2.20 关于以用户为中心的增长设计


而我们体验设计师更多关注在做产品增长设计的时候尽可能的不去伤害到用户,以同理心去思考做增长设计的策略。这个我们会称为用户增长设计(User Growth Design),即简称UGD,简单的理解为用户增长设计要以用户为中心,以用户的角度和思维方式去想问题,去做用户的增长。

让产品简单到“傻瓜”也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,产品经理要有傻瓜心态。“我要经过5~10分钟的酝酿才能达到傻瓜状态,马化腾需要1分钟,功力最深的是乔布斯,传说他能在专家和傻瓜之间随意切换,来去自如,即所谓的Stayfoolish。”

当然,此傻瓜不是彼傻瓜,而是一种跳出当下局限的外行心态,是站在普通用户的角度是操作、带有同理心去思考产品,这样才会更容易发现产品本质上的问题和抓住真痛点,找到影响用户增长的关键因素。

2.30 设计师该如何去做设计增长


我们设计师要想所做的用户增长肯定不是去街上发个小广告,去地铁上拿着产品的下载二维码让用户去下载我们的产品,我们设计师着手的设计增长范围还是从用户体验去入手的,所以我们在考虑提升产品数据的时候也需要考虑用户的使用体验,例如,公司现在想要提升产品的成交额,我们设计师肯定不会提出的方案肯定不会是让公司去请个明星代言来吸引用户下单之类的,我们设计事所要思考的是如何提升用户在下单过程中的流畅感,如何缩短路径,让用户能方便成交,所以我们设计师的增长观一定是在产品现有的基础上,提升用户的体验,尽量让用户有良好的体验下来提升用户的数据增长。


2.40 什么样的产品适合做增长设计


那我们产品都是来自五花八门的类目,那什么样的产品适合做增长或者以什么样的形式做增长合适呢?在增长设计概念最火热的几年,我听过这样的一个有趣的故事,一个做服务于医疗聚合类的产品的CEO去给投资人讲他们这个产品的前景,其中讲到他们通过如何通过增长策略去拉动用户增长,如何留住用户,投资人听完,反问了一句,那们这个增长设计的策略是通过给城市投病毒导致那么多人生病的吗?

所以,世间万物的增长都需要条件,用户的增长需要内在的动力,不能浮于表面,需要认清内在动力这样才能有助我们找到增长的关键因素,从而合理有针对性的部署资源和策略。


(1)C端产品如何做增长设计


C 端的产品,一般是个人消费场景,单一决策购买,所以我们需要给用户持续使用产品的动力,即产品可以持续给用户提供其他产品无法提供的价值。用户在使用产品获得价值提升,例如获得友情、愉快、知识、优惠、收入等等,用户才会继续使用,甚至会给身边的好友去推荐。

例如我们的国民软件微信,拉进了人与人之间的距离,带来了免费通话和朋友圈和这个门槛最低的社交网络,我们可以通过朋友圈去展示和表达,我们微信上的各种”相亲相爱的一家人“”多少级的同学“群成为我们去维系友情亲情的宝地,现在我们通过扫一扫便可以完成生活中很多事情,都为用户提供了极大的便利,微信独有的社交属性促成了巨大的网状人机关系,让用户自发的去加入,并难以离开。在2020年3月底QuestMobile提供的数据来看,微信活跃用户180日留存率为95.5%,位于常用APP用户留存率排行的首位,拥有如此高的用户长期留存,可见微信为用户提供的价值之大。

所以C端的产品只有能为用户提供价值,用户才会选择留下,甚至会主动传播为产品带来更多有价值的用户,这才是最理想的、良性的用户增长。


(2)B端产品如何做增长设计


B端的产品和C端的产品不同,B端的产品往往是群体决策,往往能决定购买的人并不是产品的使用者,他们只是负责采购的,所以他的决策链路会比较复杂,有的采购量比较大的企业往往和销售的人脉关系挂钩,

但是阿里的团队通过不断的深耕B端的市场发现,虽然 To B 增长很难,但在 SMB(中小企业)的增长很有机会。SMB 中小企业,有可能是 2-3 人组成的小团队,这类企业的客户和用户通常是同一类人,我们理解这也具有 To C 属性。并且中小企业数量多,实验数据也有保障。

一句话总结:To SMB 中小企业客群的产品可以做增长。

2.50 什么是用户的增长设计


用户增长设计设计其实就是从吸引新用户的注意力到产品能给用户一些价值最后用户认可我们产品的过程,这是一个从短期流量到长效流量转化的过程,


(1)用户的吸引力(获客)


我们一般获取用户的方式最直接便是去投放广或者软文推广,用户通过点击下载APP来访问我们的产品界面,在我们的产品中寻找自己想要的信息,一直周而复始,直到找到自己想要的信息,反正,产品的内容没能吸引用户,这时候,用户便会退出产品,也就是用户的流失。


在这个过程中,一直围绕着三个比较关键的因素“使用者(人)”、“使用场景”、“用户行为”,我们需要明确用户的使用路径中,产生行为的原因和流失的因素。


(2)用户的注意力(激活)


我们在设计中怎么通过设计策略去避免用户的流失呢?我们需要去引导用户的注意力,让用户在使用过程中对我们产品有认可,都可以有效的去避免用户的流失,


·如何引导用户的注意力


我们怎么去衡量我们的产品是否吸引了用户的注意力呢?根据Alibaba Design Ucan 2020所提出的一个公式。用户的注意力=心理需求*视线所及,用户的注意力是用户的心里所想和目标所看到的交汇,当产品给用户看到的信息是用户想要的东西的时候,这时候,用户便会点击进入,所以通常曝光率则可以验证用户在产品使用中的注意力。


例如,我们在浏览商品的时候,我们的目标首先关注的商品的品牌然后是名称和价格,我们用户心里想的可能是哪个品牌会比较可靠,哪个的价值比较低,有没有我常用的品牌,视线所及便是我们展现给用户的列表,当用户看到某品牌有我喜欢的明星的代言或者喜欢明星的同款,这便是用户所想的。当满足这些前置条件,用户便会产生点击行为。


·如何引导用户认同我们的产品


我们想要用户去认可我们产品的价值,我们需要了解用户,了解用户可以从三个关键因素去入手,1.用户群体,2.认同目标,3.说服用户



例如当新用户进去拼多多后,界面会弹出新人的专享红包,引导新人用户的点击,下一个页面便是弹出手气最佳的红包,最后展示页面出现现在限时下单全额度返利的banner,每一个页面的场景关联度极强。一步一步的去说服用户去下单、有效的提升用户点击率。从而提升新用户的首次下单的增长。


(3)用户的安全感(留存)


张小龙曾提出一个产品观叫“用完即走”,与我们常常提到的“留存”“粘性”的原则是背道而驰的,其实我理解的用完即走便是产品其实不想让用户离开,我们的产品能给用户一个确定性的答案,无论是在产品的易用性还是在产品体验层面,都可以保持高效,让用户在使用过程中有愉悦感,让用户迁移成本提升,便是用完即走后的恋恋不忘、

例如早期的打车软件和团购软件,那时候用户在网上打车和线上支付习惯还没养成,对产品的模式的认同度还不够,所以,那时候打车软件和团购软件给予人的确定的心理印象便是,你在我这里支付购买会便宜。培养用户的使用习惯,给用户一个用了该软件确实会便宜的心理安全感,从而实现了用户的留存。

我们平时准备出门或者去一些陌生的地方,我们都会使用高德地图或者百度地图看下路上是否堵车,我们这次出行走哪条路需用用时多久,以方便我们去选择合适自己的出行方式。

我们设计师在做设计的时候也是一样的,我们通过之前的数据,也可以分析出产品一些不一样的改版点,我们能把一些抽象的问题具体化,能更好的去度量我们的设计,所以设计师在学习如何增长设计前,我们需要了解一些关于产品的数据知识,我们分析一款产品的时候,通过比较关注的点是用户、需求和数据。

当我们的产品上线或者上新某一个功能的时候,往往用户的意见反馈代表的是个体的声音,而数据是用户对于产品的客观反馈,数据的变化能代表用户对产品的态度,所以,设计师要是能读一些数据报表,那么我们可以从我们的角度去给产品迭代的时候能提出不一样的观点,辅助我们企业的app的成长。


3.10 数据是如何产生的


数据如如何产生的,比较深的知识是不需要我们去深挖的,我们日常接触到数据反馈都是来自产品的“埋点”,埋点需要提供两个关键的信息:一是需要埋点的内容,二是埋点的名称,这可以方便我们以后快速的找到相关的数据,当埋点完成后,产品上线就会检测用户的行为动作,当用户进入我们的“埋点"界面或者功能的时候,后台系统就会上报数据,我们就会收到数据反馈,但是在现实工作的场景可能比这个要复杂的多,我们可以根据具体的场景在灵活应变。


3.20 设计师为什么要了解数据


我们对一款的产品的优化可能有很多层面的思考,但是我们去对用户数据的分析则是对当前产品最有价值的参考点,数据的采集与分析无论是对产品的规划还是对设计师下一步的工作开展都是比较重要的指标,因为用户可能会因为一些客观的原因可能不会说出自己内心的真心话。

例如我们去面试的时候,在一番精心的准备和问答之后,我们在面试结束之后,如果去问面试官“您觉得我这样面试表现怎样”,有的面试官可能会就你这次的变现去做出比较切合实际的点评或者建议,但是有可能你那场面试因为外部的原因会失常发挥,但有的面试官可能会照顾你的面子,可能会说表现的还可以之类的话来安慰你,但是面试官最后会不会录用你这点他肯定不会作假,所以有时候我们在分析用户行为及操作路径的时候,一些用户的数据表现便是我们对产品优化的关键因素。

我们通常将数据的指标分为三大类:1.用户相关指标、2.用户行为指标、3.业务数据指标



3.30 用户相关指标


我们常见的与用户相关的指数有像DAU、MAU、新增人数等,我们需要了解的数据为1.用户的活跃指数,2.用户的留存率,3.人均使用时长。

3.31 用户的活跃指数


在互联网行业里,通常我们会通过拉新把客户引过来,但是经过一段时间可能就会有一部分客户逐渐流失了。那些留下来的人或者是经常回访我们公司网站 / App 的人就称为留存。

在一段时间内,对某个网站 / App 等有过任意行为的用户,称之为这个网站 / App 这段时间的活跃用户,这个任意行为可以是访问网站、打开 App 等等。

我们常见的用户指标有「日活」 即日活跃用户量,缩写为DAU,,缩「周活」 即周活跃用户量,缩写为WAU,「月活」 即月活跃用户量,缩写为MAU。


3.32 用户的留存率


留存率是最能反映一个产品是否对用户有吸引力的指标,一般的留存率是基于某个时间段而得出的结论,例如我们常常听说的次日留存和七日留存率。

次日的留存率计算公式为:当天拉新的用户中,次日留存率=在注册的第二天继续登录/第一天拉新用户的总数量

七日留存率的计算公式为:在第一天拉进的用户中,七日留存率=在注册七天后还有登录的用户数/第一天拉新的用户总数。




3.33 人均使用时长


人均使用时长通常是对内容和游戏类的参考价值的很大,它可衡量我们产品是否做的比较优秀,能不能留住用户的注意力。如果我们做的是工具类的产品,例如计算机之类的,这个时候的人均使用比较长,说明我们的产品可能出现了问题,无法让用户在短时间内得到他想要结果。

人均使用时长的计算公式为:人均使用时长= 总活跃时长 /总活跃用户数。


3.40 用户行为指标


用户行为相关常见的指数有用户的页面访问量率、转化率等指标。



3.41 页面访问量率


我们对页面的访问流量的定义分为两种,一种是PV(page View)即页面浏览量,另外一UV(UniqueVisitor):独立访客数。

PV(page View)也就是页面浏览量,即你每观看一次就会涨一个PV,类似于B站的播放量,我们每个账户只要点开观看一次视频,播放量就会增长一次,关闭在打开,也会在增长一次,所以我们每播放一次,便会涨一个PV值。

UV(UniqueVisitor):也就是独立访客数,类似于腾讯视频和优酷的播放量,每个账户点进去播放只会增长一个播放量,你再关闭再点进去也只涨一个VU值。在正常情况下是依靠浏览器的cookies来确定访客是否为独立访客之前是否访问过该页面。


(1) UV的类别


在统计数据的过程中, 我们会将不同的点击率来划分,从而更好的可以来统计数据来分析。我们将UV分为:1.

曝光UV ,2.点击UV , 3.意向UV。



·曝光UV


曝光UV即曝光在视野内的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,当我在当前的列表停留2-3秒的时候,都可以算一次曝光UV。


·点击UV


点击UV即有点击行为的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,我点击某个商品进去了详情页,那么就可以算一个有效的点击UV。


·意向UV


意向UV即进入意向页面的用户数,例如我现在想去买一个Macbookpro, 我在B站看完关于Macbookpro,的评测视频,在百度看完Macbookpro的参数后,我在去天猫和京东去搜索进行比价的时候这个时候我就属于意向UV,在举个我们比价常见的例子,当我们在百度搜索宝马的时候,排在前面的经常是各种五花八门的关于车的广告,在百度看来,我们便是想去买车的意向UV,是有机会促成交易的。

所以我们看用户对我们的产品或者活动是否感兴趣,便可以看看PV和VU的数据如何。

3.42 页面的转化率


页面的转化率是任何一个企业都比较关心的数据为,我们的任何运营活动和产品的推广都是为了转化用户的时间或者金钱,我们费尽心思的用户点击进来,也都是为了转化用户的购买。

用户的注册、下单、登录和复购都可以用转化率来进行量化,我们根据产品不同的情况来制定转化率的指标。通常我们计算转化率:产生购买行为的户人数/总的用户访客* 100%。例如我们这个页面访问人数是1000,接下来有100人进行了购买的行动,那么我们页面转化率为:100/1000*100%=10%的转化率。


(1)意向用户转化率


意向用户转化率,即意向Intention Click Value Rate,简称意向UV CVR,是通过直观科学的角度去评判需求是否达到了预期的效果,意向用户转化率一般用来衡量用户访购行为,是可以通过该指数去发现问题中隐藏的核心问题的依据,非意向UV的转化流失有很多不确定因素,而意向UV的流失往往跟产品体验有更大关联性,通常计算的方法为:产生购买行为的客户人数/所有到达店铺的意向访人数* 100%。

例如像民宿和酒店类的APP的核心转化率是客房的预定量,像B站和西瓜的核心转换率则是用户评论和点赞。


3.43  页面的点击率与意向率


通常我们在曝光UV和点击UV直接会有一个点击率的关系,Click-thougphRate,简写为CTR,即点击数占展示次数的百分比,通常的计算形式为,点击率=点击次数/页面访问次数,

在曝光UV与意向UV之前也有一个比例关系,叫意向率,即意向UV占曝光UV的比例关系,通常用以衡量运营活动或者功能的导流能力,主要用来看用户的质量,通常的计算方式是意向率=意向UV/占曝光UV。

3.43 跳出率


跳出率是在设计用的比较少的一个数据,一般是运营人员会关心的数据指标。指的是用户通过搜索点击进入该商品的详情页,只是简单的浏览一遍就关掉了页面,在该页面没有任何的活动行为我们称之为一次跳出行为。

跳出率的计算公式为:页面的跳出率=一个页面离开的次数/总的访问次数*100%


3.50 业务数据指标


我们对业务的数据指标可以将他们分为两类:一是免费供用户使用的产品,例如微信、B站等产品,我们更多的关注用户的使用时长和停留时长。二是需要用户有购买行为产品,例如淘宝、拼多多和京东之类的,这里的产品我们更多关注的是产品的GMV和ARPU等指数。



3.51 GMV


Gross merchandise Volume,简称为GMV,指标通常称为网站成交金额,属于电商平台企业成交类指标,主要指拍下订单的总金额,包含付款和未付款两部分。

GMV反映的是电商平台直观的成绩,但在电商行业,GMV包括拍下未支付的订单金额,GMV=销售额+取消订单金额+拒收订单金额+退货订单金额,

3.52 ARPU


ARPU是 “The average revenue per user” 的缩写,译为每用户平均收入或平均每用户收入。也可以理解为单个用户的价值。

通常的ARPU用来反映这个产品在这段时间内从单个用户获得的利润和收益,通常用来计算用户生命周期价值的作用:它是 App 成功的指标,是用户忠诚度的反应,是预测用户增长的工具。简单来说,用户生命周期价值是驱动移动市场预算的动力。它会告诉你每个用户值多少钱;你应该花多少成本去获取一个用户。

ARPU的计算公式为:ARPU=在指定时期总收入/指定时期的付费用户的总数*100%。

3.53 付费率


付费率是用来衡量用户转化行为的指标,通常所有用户和付费用户之间的一个转化比率。我们前面说到的ARPU值是付费用户的人数来计算的,我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高,这说明用户对该产品的认可度越高。

我们的产品每个阶段的增长指标在不同阶段会有不同的定义。每个时期所需要注意的事项也是不一样的,我们对基础的数据有了认识和了解之后,我们更重要的事情就是怎么去实践在我们自己的产品中。


4.10 提升列表CTR的设计策略


我们产品中很多时候,我们的设计做的是否合理,我们的商品类别该怎么去排序,都和CTR的数据去挂钩,产品中的很多核心的数据也需要CTR等基础数据去做支撑,那么我们一起来复盘下提升列表的CTR策略点:1.增加影响用户决策的信息,2.梳理列表的信息层级,3.新增适当的交互,4.标题优化(非设计角度)

4.11 增加影响用户决策的信息


平时我们在逛街的时候一定会发现这样的场景,当一条街上开了很多店的时候,每个店铺一定会派出自己店铺长相比较甜美的店员或者比较擅长口播的店员在自己店前面进行“吆喝”,比较小的店铺就算人手不足也会用音箱去反复播放店内的促销信息,这些策略都是为了在众多的店铺中去吸引过往行人的注意力。

那么我们做设计也是一样的原理,我们在在做列表时候,想要提升用户击我们的列表进入详情页的意愿,首先我们需要了解我们的用户对什么样的信息比较感兴趣,我们将它整理并放出来,从而达到吸引用户来点击。


4.12 梳理列表的信息层级


我们平时去逛超市的时候,我们发现每个类目的货架前都会摆放特价或者促销力度比较的商品的合集,理货员会将他们放在一起,这样,对于价格敏感的会直接过去挑选。

我们在梳理列表的信息也是一样的,我们需要将用户比较关注的信息或者产品的卖点信息层级抬高,减少用户在挑选时候的跳出率。


4.13 新增适当的交互


我们想提升列表的点击率也可以从另外一个角度是入口,就是想办法让用户在最短时间内可以看到更多的信息列表,让质变产生量变,这一点我们可以从改进交互的操作入手,让让用户看的比较多的列表交互。


(1)十字交互


因为这种形式的设计他占用的位置比较少,且只需用用户通过手指左右去滑动,便可以查看更多的信息列表或者产品列表。

(2)随机的列表


在交互层面另外一个可以让用户看的更多的设计形式便是点击就换一批,这样可以让用户感受到我每次点击过后的详情列表和产品列表都是不一样的,这样每一次点击都会有新的“多巴胺”去刺激用户再次去点击“换一批”按钮,从而达到让用户看到更多的列表,已质变产生量变。

4.14 标题优化(非设计角度)


(1)美化标题


我们经常上网经常浏览新闻的朋友一定知道有个词叫做“标题党”,简单的来说就是标题经常以夸张、“故弄玄虚”的方式出现,UC是众多平台中运用标题“最好的楷模”,所以网民也会亲切的称之“UC震惊部”,所以一个列表流的标题对点击量的影响也是比较大的。


(2)字符限制


另外一个角度就是当标题显示不全的时候,用户对信息传递无法感知的时候, 我们取再好的标题也是没用的,也许关键信息会被省略掉,所以我们在设计标题的时候,也可以限制标题可输入的字数,避免文字的缩略显示,让用户可以完全看清标题的意思,提升用户的点击欲望。


4.20 上新功能如何提升CTR


我们产品在上新一个新功能的时候,我i们如何布局能去让用户从熟悉到使用我们的新功能都是需要一个过程的,我们需要慢慢的去引导用户,我们可以从一下策略去去入手:1.替换用户习惯的功能,2.把控出现时间,3.用动态吸引注意力,4.合理划分功能层级.、

4.21 替换用户习惯点击的功能(按钮)


我们每个都会有自己的习惯性的动作,例如我们习惯左手写字,右手拿筷子吃饭,我们每天回家习惯性的走同一条路,这些都是我们下意识的动作,是不需要经过思考的意识,那我们在软件的使用中,也会有这样的习惯,例如,通常底Tap栏的图标第一个通常是首页或者软件的主要功能,而最后一个通常会放个人中心,这也是我们在软件使用的中的共识,所以我们可以利用人下意识的习惯将常用的功能与新功能去替换,用户便会在下意识的惯性中去点错,例如网易云音乐为了推广“云村”功能,便会将以前在最后一个的“我的”给替换成“云村,会导致很多用户的下意识的动作点错而提升新上的功能”云村“的点击率。

4.22 把控出现时间


我们在下班回家的路上,当我路过一些小吃摊的时候会觉得街边的小吃特别想吃,也特别有购买的欲望,这是为什么呢?因为我们在劳累的工作了,下班的时间也正是需要吃饭的时候,所以这个时候我们会看到街边摊的小吃特别想吃,也特别想买,因为他摆摊的时间点和位置都恰好满足了我们的需求,所以我们转换到界面里也是一样的,我们想要用户去分享一篇文章的时候,一定要等看用户在读的时候,然后在出现分享功能,这个时候如果用户读到比较精彩的内容,便会和朋友分享这篇文章,例如用户在进入商品也可以浏览的时候,我们这个时候可以出现满减的红包,这都是在适当的时候给与用户想要的,把控好了出现的时间。


4.23 用动态吸引注意力


在一些静态的元素中,突然有一个元素动起来,那么,那个动起来肯定是更吸引人的眼球的,所以我们在电商的页面页面中,会经常看到一些会动的icon和一些会动的胶囊导航,我能在付款页面也可以看到一些立即付款的按钮会忽大忽小的动起来,这都是为了吸引我们的注意力,引起我们去关注它的存在。


4.24 合理划分功能层级


我们做设计排版的时候一定都听说过这样的一句话,就是你什么都想突出,结果你却什么都没有突出,这句话的意思是我们在做设计的时候一定要注意运用对比,将次要元素与主要功能的要做好主次的对比,这样的层次对比才有利于用户的阅读,可以分清主次。

我们在ui设计中也是一样的,要想用户快速的找到想要的功能,高频使用的功能和不常用的功能要做好强弱的设计区分,这样才能让用户一眼能看到自己想找的功能,例如美团和支付宝,都是将用户高频的操作放大并放置于顶部比较显眼的位置,方便用户去操作。


4.25 合理使用弹窗功能


我们都知道,弹窗在软件中属于级别最高的通知,就相当于学校里面的校园广告,只要打开软件的人,基本都可以看到,所以我们想推广一个新功能的时候,使用弹窗是流量比较大的,但是也是比较打扰用户的,我们需要看情况而定。

4.30 提升人均使用时长的策略


软件的人均使用时长代表用户对我们人均软件关注度和我们给予用户的价值,当人均使用时长在增长的时候,说明我们的产品正在良性的增长,在提升人均使用时长我们可以从以下几个策略入手:1.让用户忘记时间,2.弱化用户的负面情绪,3.多变的板式消除疲劳,4.激发用户的好奇心



4.31 让用户忘记时间


我们放假在家打游戏的时候,总有这样的感觉,就是打着打着不知不知的天就黑了,或者打着打着天就亮了,感觉时间过的非常快,但是我们需要注意一个细节就是一般打游戏的时候,游戏是会将顶部的时间状态给隐去的,是为了给用户更好的沉浸式的体验,正因为我们看不到时间,所以便会忘记这件事情,一局一局的打着游戏。例如早期的抖音,在进去界面后变会隐藏时间条,让用户在刷抖音的过程中忽略时间,所以 ,我们想要提升人均使用时长,在一些娱乐性的产品或者模式下,可以尝试着隐藏时间条,给予用户更沉浸式的体验,这样用户便会忽略时间这件事情。

4.32 弱化用户的负面情绪


我们在饭店高峰期去餐厅吃饭的时候,一般会遇到餐厅客满需要排队拿号的情况,海底捞的做法是给排队的客户免费的小零食,外界对海底捞的服务评价可以用16个字来概括:有求必应,无微不至,嘘寒问暖,小恩小惠,中国有古话是这样说的“伸手不打笑脸人”,也许我们在就餐中会有各种不满,但是海底捞都可以用他的服务去抵消客户的负面情绪。所以,我们一般在餐厅催菜是时候,不管菜做没有,服务员都会对我们说菜正在做,都是抵消我们等待中的负面情绪,让客户不会在等待的过程中离开或者退菜。

我们在做界面中也是一样的道理,我们的APP在实际运行过程中肯定也会遇到各式各样异常问题,我们做设计的时候要为用户提前给考虑进去,为用户提供贴心、无微不至的服务。例如我们用户可能在使用过程中可能手机信号不好,有的页面加载不出来,我们需要设计有趣的加载动画和页面加载不出来的时候的占位符,告诉用户我们的APP还是在正常的运行中,不是宕机了。


4.33 多变的板式消除疲劳


我们都开车或者坐车经过高速公路,我们会发现高速公路在一条直道后马上会迎来一个弯道,我们小学的时候都学过,两点之间直线最短,那么高速公路为了节省司机开车的时候,能否直接全部设计成直线的呢?答案是不可以,除了有些地方路线的规划外,其次安全因素也很重要,经科学家研究表明在笔直的公路长期行驶很容易导致驾驶员发生事故,这是因为在笔直的高速上行驶,驾驶员的神经长时间处于放松状态,容易麻痹大意,如果适当的时候来个转弯会提醒驾驶员注意力集中,减速行驶,从而减少事故发生率。其次从心理学角度来说,驾驶员一旦在笔直的高速上行驶,容易产生飙车行为,谁都会想猛踩油门来追逐刺激,如果适当时候来个弯路,能够抑制飙车行为的发生,从而减少故事发生率。

所以我们在设计板式布局的时候,让用户盯着单一的布局形式,用户很容易感觉到疲劳,从而会在页面跳出。我们为了避免这样的情况发生,让用户在浏览过程中能感受到板式的变化,而不是滑到底都是一样,单一且无趣,很容易疲劳,我们设计者需要在单一的板式寻求不一样的解决方案。


4.34 激发用户的好奇心


我们都比较喜欢看悬疑剧的一个重要的因素是因为情节一环扣一环,线索和剧情结合的比较紧密,剧情比较扣人心弦,能激发我们对真相的探索欲,这才是我们喜欢追悬疑剧的原因之一。

所有,我们做设计时候也需要给予线索让用户去探索,让用户感受到内容源的充沛,用户才会兴趣去向下探索,从而提升用户的使用时长,所以,大部分的APP在最后一个板式都会做成瀑布流的形式,因为他在滑动的时候会不断给予用户新的提示,告诉用户你不断往下滑,都会有新的内容。

4.40 提升留存率的策略


留存率是用于反映产品的的运营情况的统计指标,我们产品的留存越高,说明我们产品很活跃,真正稳步的向前迈进,那我们在优化留存的策略可以从以下几个入手:1.优化初次上手体验,2. 减轻用户的使用负担,用内容留住用户,3.完善奖励机制,4.增加沉没成本

4.41 优化初次上手体验


我们现在年轻人由于生活的节奏越来越快,在使用APP的时间往往都是碎片化的,用户的持续注意力会越来越短,一个产品在初次上手的难度越高,能劝退的用户就越多,用户在上手一款产品的时候,首先会关注界面是否易于上手,能不能快速找到自己想要的功能,例如在登录的时候设计验证码登录或者第三方的快捷登录,在新用户初次进去的时候,对新功能有使用说明,用户在初次体验是很重要,有了第一次的良好体验印象,用户才会有第二次第三次的回访率,这也是提升留存的第一步。



4.42 减轻用户的使用负担,用内容留住用户


减轻用户的使用负担是指在核心功能尽量能让用户能用最短的时间去完成,让用户感受到产品对用户是有价值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在简单,它的核心聊天功能做的不好,用户发一条要等很久, 我相信也不会有人去选择用它去聊天,早期的米聊,其他的功能和想法都是比较超前的,微信也是根据米聊的模式改进,但是早期米聊在即时通信领域不是很擅长,在发送消息的即时性上欠缺,导致失了先手,在手机聊天领域输了给微信。

在产品做好了核心功能,能够吸引一批忠实的种子用户,这样我们在一些附加功能,才是锦上添花,例如现在无论什么产品都喜欢做社区功能,就是希望用内容去留住用户的注意力,附加功能一般都是利用人性的七宗罪去设计布局的(傲慢、嫉妒、愤怒、懒惰、贪婪、淫欲和暴食。)例如微信的摇一摇是利用人想认识新的异性,扩大好友圈,汽车APP的社区功能会经常发一些车站的车模,来吸引精准用户的注意力,这些都可以提升用户再次来使用我们的产品。


4.43 完善奖励机制


我们在工作中,一定遇到这样的情况,就是公司会设置奖励机制,当员工的绩效达到一定的程度的时候,公司会给予员工一定的奖励,反正则会触发惩罚机制,这会使得员工为了完成目标而努力工作,从而达到目标得到的奖励会触发员工的“爽点”。

这是因为这样,所以越来越多的产品开始做自己的会员体系,在加入积分商城,最后在来个签到奖励,简单来讲,就是通过给予用户一些“爽”的东西,来让用户帮我们的产品达成一些我们需要的商业目标,其中最主要的目的就是用户的留存率.

4.44  增加沉没成本


我们在去理发店去理发或者在去网吧上网的时候,他们都会希望我们去办理一张会员卡,在往里面存在钱,有的是存多少送多少,当我们一但存钱办理会员后,我们会惦记着我们有类似的消费的时候,都会想起我在那家店里会员还有余额,会员里的余额就是们迁移的成本。

所以共享单车会推出月卡服务,视频会员会有连续包月或者年卡套餐,甚至我们点外卖开通会员也能享受大额的折扣,让用户感觉占便宜的感觉,这些都是为了锁定用户,增加用户的迁移成本,来达到让用户再次来我们产品来消费,从而提升用户的留存率。

4.50 提升产品活跃度发力点


产品的活跃度也可以称为产品的粘性,产品的留存率是计算单次打开产品的次数。而多次打开我们的产品也可以称为产品的活跃度,或者用户对我们产品的粘性,我们去优化产品的活跃的可以从以下几个策略入手:1.让产品看起来生机勃勃,2.主动与用户沟通,3.让用户有自己的社交圈,

4.51 让产品看起来生机勃勃


我们都会有凑热闹的习惯,看到街边有人排长队我们会不自觉的看过去,所以我们在新闻看到了网红店会请人来排队,都是为了营造该店看起来很有生机,人很多,很热闹。

我们在做产品设计的时候也是一样的,需要在设计层面让用户看我们的产品也是很有热闹,很有生机,例如我们产品的运营区的图片会经常更换,让人感觉有人在运营,每天都是不一样的,当我们的用户关注的人比较少或者没关注的时候, 我们需要给用户去推荐质量比较高KOL去让用户去关注,有什么活动我也可以主动推送给用户,这都是可以让我们产品看起来有活力,从而让用户可以多次打开,提升活跃度。

4.52 主动与用户沟通


我们小时候通常会被家长教导,遇到熟人和长辈要主动打招呼,这样会让我们看起来比较有礼貌,我们生活中也乐于和有礼貌的人去交往,因为对方会看起来比较有亲和力,比较好沟通。

我们做设计的时候也是一样,我们的产品也需要主动与产品去沟通,让用户去了解我们,例如,我们评论去外露,是在告诉用户我们这个商品已经得到了大多数的肯定,也可以让用户感受到我们这个产品其实用的人还是不少的,比较有生命力。

4.53 让用户有自己的社交圈


不知道从什么时候起,无论是什么类目都有了自己的社区,淘宝有自己微淘,咸鱼有自己的鱼塘,求职找工作的APP也开放了求职讨论专区,连墨迹天气都开放了社区功能,让大家可以拍自己的当地的风景来讨论。

为什么大量的产品开始做社区功能呢?因为他们希望自己的用户能在自己的产品有自己的社交圈,只有用户有自己固定的圈子,才会有用户粘性,把路人用户转化为死忠粉,大家一起来讨论,从而达到提升产品的活跃度。

4.60 提升产品核心转化率发力点


核心转换率一般我们的用户需要走的流程比较多,我们需要按照实际情况去删减合并流程,来保障用户无障碍的可以付款下单,我总结一下几个优化策略:1.优化核心流程,2.丰富决策信息,降低转化顾虑


4.61 优化核心流程


我们以前在放学的路上一定熟知自己家到学校的各种小道,在巷子的玩玩转转,比走大路要节省很多时间,节省了很多时间。


(1)合并优化流程


我们在做电商APP的时候,想要让用户快速下单购买也是需要提升用户的下单效率,例如我们以前输入完密码还需要点确认才能付款,现在我们在输入完第6位数密码的时候就直接付款了,现在手机的升级了指纹和面容识别后都不需要输入,就可以直接付款了,点外卖的时候,会有一键搭配购买,这都把以前复杂的步骤给整合优化,提升用户的下单效率。


(2)复杂流程分开显示,提升放弃成本


已经简化到最简单的流程仍然步骤还是很多的时候,我们可以将流程分开展示给用户,例如我们的流程一共有12项,已经是优化的最精简了,这个时候,我们每个页面显示4个给用户去填写,如果用户在第二个或者第三个想放弃的时候我们这个时候提示他,马上就要完成了,用户想着我之前已经填写一页了,反正也没多少了,我就在坚持写一页把,例如我们常见的电商产品,现在都是支持先选购商品加入购物车,在需要购买的时候在提升用户登录并付款,避免用户还没选商品就被登录界面给阻拦了。这都是可以提升核心转化率的策略。

4.62 丰富决策信息,降低转化顾虑


我们在超市购物时候,一般会先看看产品信息和生产品日期,然后在看看品牌,最后看看产品的价格,觉得合适就拿走付钱了,就算我们有挑选的空间,也会在这这家超市买,因为往往两家超市隔的都是比较远的,跑来跑去比较费力,但是我们在网上购物或者选东西的,换平台成本比较低,也不怎么费力,所以我们需要将我们的能有的优势都展示出来,降低用户的下单顾虑。

例如自如租房的优势就是有管家服务,服务比较全,这是它的优势,也是我们租房的时候比较担心的,有时候房间洗衣机或者热水器坏了找人也找不到,另外就是我们商品的销量好也需要展示出来,那么多人都买了都没问题,我也肯定可以放心的下单购买,我们产品或者平台有什么优势都可以展示全,去尽力打消用户最后的心理防线,从而提升下单转化率。

5.10 确定增长指标


当我们想做增长的时候,会遇到各种各样的指标,经常我们会觉得提升哪个指标都会比较重要,然后我们在把各个指标一把抓的时候却发现与目标却是南辕北辙的背道而驰,最终是研究了很多数据指标,却仍然没做好增长设计。

其中最关键的因素是我们每找到唯一的关键性指标,即OMTM,,全称是 One Metric That Matters,最早提出这一概念的是《精益数据分析》这本书中提出的,后来肖恩·艾利斯在《增长黑客》一书将其称为“北极星指标(North Star Metric)”,现在“北极星指标”已经称为行业的通用词汇。

北极星指标即在纷繁的产品世界中照耀着我们去走向终点的指标,它是产品走向成功的关键且唯一的指标,我们整个组织的增长目标都应该统一指向北极星指标。那么北极星指标有什么作用?

(1)明确目标:让我们避免南辕北辙,,帮助我们确定现阶段的产品最需要解决的问题,帮助我们找到清晰的目标,来促进用户的增长。

(2)集中资源:有助于减少内部的沟通成本,整合企业的人力、技术、资金等资源,明确方向,力往一处使,利出一孔。


5.11 怎么确定北极星指标


我们在前面说到北极星指标的重要性,我们前面也讲到关于很多数据指标,我们怎么可以确定符合企业定位的北极星指标呢?

北极星指标确立和我们自身的产品的属性、行业是密不可分的,不同的产品和行业也对应着不同的用户和盈利模式,用户价值的不同和商业模式不同,所对应的关键指标也会不同,因此,我们要确定北极星指标首先要了解产品的受众和我们的产品可以给受众提供什么样的价值来盈利、

在过去互联网高速的发展的过程中,也衍生出了不同品类的产品。但是总体来说,我们大致可以把互联网产品给归类为内容产品、社交产品、电商产品、工具产品、游戏等几大类目。我们可以看看不同的产品所对应的北极星指标。


5.20 怎么拆解增长指标


如果我们确定了产品的北极星指标,那么接下来我们需要做的就是任务的分配工作以及各部门的协作与协调,让每位成员能够能明确各自的职责,这样我们设立的北极星指标才可能完成,这里我推荐一种在各大企业都开始推行的一种工作方式OKR((Objectives and Key Results)工作法。全称为目标和关键成果,是一套明确和跟踪目标及其完成情况的管理工具和方法。

OKR 这套系统最初由英特尔公司制定,在谷歌成立不久,被风投家约翰·都尔(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,现如今有很多公司在使用,国外Facebook,Twitter,Linkedin,国内我知道知乎,字节跳动,明道等在使用。

通过这么多公司的使用充分说明了OKR方式的可行性,OKR在执行过程主

要以季度为周期来进行管理。

整个OKR制定是从上到下,逐级进行拆分的类似金字塔式结构,最终拆分到团队或者个人OKR。


OKR中的“O”代表我们这次工作的目标,例如:年度目标、季度目标、阶段目标,“KR”是关键成果,就是这些目标可以通过哪些关键成功可以完成,然后还有一个Action(行动方案),这些关键成功需要通过哪些方案去达成。



我们以一款内容社区类的产品为例子,我们这个产品的季度的北极星指标为提升用户的粘性,那么可能分配到我们设计负责人手上的目标为提升用户的留存率和简化产品的操作留程,那我们设计师需要做的可能是新增一个签到功能,让用户每天都记得签到来领奖励,或者简化直达看帖区的交互步骤,让内容能留住用户

所以我们北极星指标结合OKR工作法,如何在合适的阶段做合适的事,如下图所示


5.30 GSM数据驱动


GSM模型是Google的用户体验团队提出的一种指标体系,与OKR工作法不同,OKR主要适用于整个企业的任务的排兵布阵,而GSN体系主要是用来量化用户体验的,GSM分别为目标(Goal)→信号(Signal)→指标(Metric),所以也简称GSM模型。

但是由于我们国内的互联网情况和国外的环境也是不一样的,经过本土化的改良,我们国内的GSM被精细化为6步。

我们来结合实际的案例来看下吧!

例如我们我们公司的一款民宿的产品,我们的产品团队接到的需求是提升我们产品的活跃度。


(1)数据目标


那我们的数据目标便是提升产品的活跃度,我们接下来的工作便是对产品的现状进行分析,以方便我们开展接下来的设计工作。


(2)用户分析


用户分析主要是对我们现在的用户进行一个比较全面的分析,了解我们用户群体的使用习惯,发现用户主要的查看内容和用户的痛点,以方便我们做针对性的设计策略

(3)发现问题

我们对用户问题的采集主要是通过软件自带的用户意见反馈和APP store 的用户评价,从这里去获取的用户对产品的评价都会是比较客观的。

我们通过评价可以发现,用户对产品存在的一些隐形的坑的体验不好,例如附近有装修会影响人睡觉的之类的,那我们怎么去帮助用户去避免这些问题呢?我们可以让一些经常住民宿的人去写一些住店的体验日记,方便我们用户去查看。


(4)用户表现


有了住店日记,我们的用户表现是什么样的呢?我们的用户在决定入驻一些民宿的时候,可以去多方位的去查看其他人发入住日记。可以做多方面的对比,这样用户不仅可以减少踩到坑,在对比的过程中,在使用我们软件的时间也会更长了。


(5)设计策略


那我们怎么可以让一些入住过用户去写一些入住日记呢?我们可以针对愿意写的用户写的好的用户的日记进行曝光,他可以获得自己的粉丝群里,然后,你发一篇日记,我们会奖励给你相应的金币,这些金币在积累后可以获得优惠券,在下次入住后可以减免相应的入住费用,然后我们的产品可以发现写的比较好的日记推送给没有住过的新用户,或者有意向、搜索过的用户,方便用户横向对比,从而提升用户的活跃度

(6)衡量指标

因为活跃度它是比较抽象的一个概念。我们怎么去验证我们的设计策略呢?我们可以通过一些用户的金币的积累去验证我们数据,这样就会比较直观。只有当有有用户去发表住店日记,他才能获得金币的奖励。


增长设计需要精准的界定用户的痛点,这是用户增长的重要基础,然后在聚焦核心的业务,不断的强化痛点来驱动用户的增长。

随着行业的发展,现在行业对Ui设计的要求也是水涨船高,我们每一次改动需要给企业去提供一个能说得通的理由,我们也需要不断的去学习行业里的新的知识,来丰富我们的思维,这样我们才能在寒冬中走自己的坦途,一起加油!



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

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



文章来源:站酷   作者:Endings

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

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


B端设计师不可忽视的【产品】和【用户】

分享达人


我们公司是做停车场产品的,阿里作为我们公司的大股东,在合作过程中很荣幸学到了很多阿里的流程规范和设计体系,以及最重要的复盘的好习惯。



一,背景介绍

B端产品是指为企业(business)提供服务的产品。近年来,C端市场红利削减,传统行业的市场逐步凸显,再加上新冠疫情的“催化”,众多企业纷纷转向B端服务。由于B端业务的复杂性,所以设计师在分析需求前,一定要清晰的知道公司的“产品定位”和“用户画像”。


二,B端的产品定位


1. 区分定义

1.1 市场定位

所谓市场定位就是在我们确定下来为之服务的客户群体上进行的定位,此时我们要考虑的不是为哪些人服务的问题,而是为已经确定的人群提供什么服务的内容,包括产品定位、品牌定位、功能定位、形象定位、价格定位、渠道定位等等一系列的定位,不同的行业关注的定位方向会有不同。

因此,市场定位是一个包罗诸定位的概念。必须是先有市场才有定位,市场都没有,你都不知道给谁用,何谈定位?定位的目的就是为了差异化区分竞争对手,为客户提供更好的产品和服务,如果整个市场上就你一家说了算,你就没必要定位,因为客户没得选择,就这东西你爱要不要。实际上这种情况很少存在,我们绝大多数企业都处在激烈的竞争环境中,要比对手更好地满足客户的需求,要让客户认为你比谁都更适合他,要做到这一点就必须把定位工作转移到顾客的心智中去。


1.2 品牌定位

定位是这样一种逻辑关系:接受是因为喜欢,喜欢是因为留下了好印象,留下好印象是因为心智定位的成功。事实上,这种逻辑关系正是品牌定位考虑的内容。品牌的使命就是让客户记住你,忠诚于你。定位大师特劳特的定位就是站在品牌的角度来说的。强调在客户心智阶梯上定位就是要攻心为上,而攻心是所有品牌定位的关键。


1.3 产品定位

很多企业把品牌定位想得过于简单,用一些精神感召激情四射的词藻堆砌品牌个性与品牌精神,然后展开猛烈的宣传攻势,以为这样就行了。这是远远不够的,在精神与个性、信念与态度的背后是老老实实的支持类工作,即品牌质量的打造。没有足够优质的产品,再煽情的品牌价值主张也是苍白无力的。客户是在认可了你的硬指标之后,才会接受你的软指标。要做出优质的产品,必须要进行有效的产品定位,有效的产品定位是有效的品牌定位的基础。围绕客户关心的产品的功能属性、产品提供的利益价值等等变量进行的与竞争对手相区隔的定位工作就是产品定位。


总之,不论是什么定位,其主要目的都是区隔同类竞品。而最为大家熟知的市场定位就涵盖了很多内容,其中就包含了了品牌定位和产品定位。


1.4 总结


市场定位:

目的:解决“给谁用”,“用什么”,“怎么用”的问题。


产品定位:

目的:确定产品的核心功能,就是用户可以用这款产品做什么的。

如“钉钉”:中小微企业管理者提供全方位的数字管理服务。


品牌定位:

目的:如何让用户记住你,忠诚于你。

如“钉钉”:酷公司,用钉钉。


客户选择产品有两层需求

1.功能实用性层面需求,由产品定位解决。

2.精神情感层面需求,由品牌定位解决。


了解了三者的区别后,我们就着重介绍一下产品定位。上文已经简单的介绍了产品定位的概念,接下来大家首先回忆一下是否遇到过这样的场景。一群人脸红脖子粗地讨论一个很简单的界面问题:



A说:某模块重要,应该在视觉上强化

B说:老板说要这么改的

c说:竞品也是这么做的

D说:应该直接照着某网站抄啊

E说:只要做的好看就行,能用就行

……

大家各抒己见、七嘴八舌的乱成一团,最后完全忘记了我们要讨论的内容,整个会开完也没有任何结果。


2. 产品定位的意义

2.1 定位对公司的重要性

如果定位的实质是与同类竞品的区分,那么定位的意义也就是与同类竞品区分的意义。


2.11 用户多元

用户是多种多样的,产品需求也自然各不相同,我们没有办法用同一款产品去满足不同用户多元的需求。当产品处于0~1的阶段时,就应该做产品定位,选定部分用户的需求去满足。


2.12 竞争激烈

各行各业都会有很多的竞品,产品公司的竞争是非常激烈的,用户的选择非常的多,一不小心就会死在沙滩上。想要在竞争中脱颖而出,就必须得让我们产品有“特别的印象”。


2.13 资源有限

任何一家公司的财力,物力,人力,人脉都是有限的,只有深耕于所定位的细分市场,才能让自己的产品做得更专业,让目标用户无法摒弃我们的产品,从而使有限的资源积淀为公司的资产。清晰的定位能为我们运营团队的小伙伴提供一个精准投放的方向。没有任何一家公司有无限的财力,再加上互联网时代,各种广告植入,用户的注意力是非常稀缺的,明确一个产品的定位,一方面可以将有限的运营资源精准的投入到目标客户群体中,另一方面,也能够用最有效的语言快速打动用户。


2.2 定位对设计师的重要性

产品定位的意义其实是贯穿整个产品研发过程的,需求调研、产品立项、产品设计、交互设计、UI设计、研发、测试......


2.21 设计前

在产品立项阶段,公司领导,产品团队,运营团队,用研团队等会提出各式各样的需求,只有明确一个产品的定位,在产品评审阶段,我们就可以更好的理解需求,甚至反驳掉一些我们认为不合理,违反产品定位的一些伪需求。


2.22 设计中

如果缺产品定位,设计师不仅难以决策需求的优先级,还会浪费大量时间在不必要的纠结上。因为我们没有明确的产品定位,就没有了明确的设计目标,只能自己猜想设计方案,这就是为什么很多设计师的过稿率很低,因为你完全没有理由说服自己的领导或者客户。众所周知,我们需要依据来支撑设计方案,在下文中会提到用户画像就是方向盘,让我们能一步一步的朝着目标前行,而产品定位就是汽车导航,指引我们设计的方向。


2.23 设计后

而在设计评审环节,不同岗位之间经常会出现对功能设计、视觉设计、交互设计不同的意见,甚至会产生很大的争议,在面对这样的争议很多时候其实设计师在产品经理、运营的面前是没有什么话语权的,这主要是因为大部分设计师不熟悉业务的熟悉,产品思维较弱,而别的岗位也会经常把设计当作美工,导致了现在很多设计师的设计稿通过率很低。

如果此时我们的脑海里有一个清晰的产品定位,很大程度上能够对这个弱项进行弥补。所以我们需要解决的一切问题都是要围绕产品定位来展开,只有严格遵循产品定位来设计的方案才是有理有据,不仅能够在设计目标上与同事达成共识,解决沟通过程中的各种争议问题,还能让你的设计真正做到言之有物,经得起推敲从而大大提升你的话语权。


因此,在确定具体需求之前,一定要首先考虑产品定位是什么,如果没有产品定位,产品就如同失去了方向盘的汽车,横冲直撞;项目团队也会成为一盘散沙。


3. 产品定位的内容

产品定位包括两方面的内容:【产品定义】和【用户需求】。

产品定义主要从产品角度考虑;用户需求主要从用户角度考虑。最终的产品定位应该是综合考虑两者关系的结果。“产品定义”中的【主要功能】、【产品特色】和“用户需求”中的【目标用户】形成了产品定位中核心的内容,是产品设计的最主要方向和依据。



对于B端的产品而言,目标用户是在客户群体细分的基础上得到的,它也在一定程度上影响了使用场景和用户目标。


3.1 产品定义

产品定义包含:客户群体、主要功能、产品特色。

产品定义可以用一句话来表述,如钉钉:中小微企业管理者提供全方位的数字管理服务。这里的客户群体是“中小微企业”,主要功能是“管理”,产品特色是“全方位的”。如果你的产品很难用一句话描述清楚,那么很可能是因为你的产品定位不够清晰,方向不够明确。



“客户群体”帮助你明确产品主要为谁服务,所有的功能、内容、设计风格的设定都围绕这类群体来进行;“主要功能”为你划定了功能的范围和限制;“产品特色”使你的产品区别于同类竞争对手,让你的产品在同类产品中“脱颖而出”,更具竞争力。


举个例子(案例中的敏感数据已做处理):

当我们团队在设计一套停车场管理系统时, 产品经理需要事先考虑什么方面?大家知道B端系统主要针对企业或组织,他们所处的行业,市场规模,公司组织架构关系都不相同,具体的需求也不一样,满足所有客户的需求是不可能的,这样只能制造出一个“功能堆砌,无法标准化”的产品。因此需要知道运营停车场的企业大概有哪些(如写字楼、商场,物业小区、政府单位、旅游景点等等集团单位),他们各自有什么特征,哪类企业更适合重点关注,如何更好地满足他们的需求;如何突出特色功能,与竞争对手拉开差距。


当然客户群体、主要功能、产品特色一般是产品经理基于市场调查、用户研究,以及对自身资源的综合分析得出的初步结论,不是拍脑袋就能想出来的。


例如市场调研给出的停车场企业占比结果是:国有企业占45%、政府机关占25%、上市公司占10%、民营企业占5%、其它占5%。而公司目前主要以国有企业居多,且这部分企业群体的资金雄厚,盈利较高,对我们公司更有商业价值,因此选择国有企业作为该产品主要的客户群体。而根据竞品分析和用户调研,可能会发现市面上同类的停车产品存在各种各样的问题,其中比较突出有集团无法统一化管理子停车场,欠缺多元化支付方式,子车场财务信息对不上。而公司恰好有这些方面的资源可以很好地改善这些问题,那么就可以把连接集团统一化管理,多元化支付方式,财务信息透明化管理等作为产品的特色和卖点最后得出的简单产品定义如下:


客户群体:国有企业。

主要功能:停车场经营管理。

产品特色:支付方式多元化,财务信息透明化,集团管理统一化。


有了产品定义还不够,它只是给了方向和范围,还需要在此基础上深入挖掘用户需求,提升用户体验,这样才能使产品进一步走向成功。


3.2 用户需求

用户需求包含:目标用户、使用场景、用户目标。

在这里大家要知道目标用户并不是一类人群。因为我们的客户群体是一个企业或组织,所以目标用户就是要具体到该企业某角色的人群。首先我们需要把客户群体的组织架构关系理清楚。


还是停车场的例子:

决策层:CEO、董事长

管理层:区域负责人、财务人员...

基层:岗亭职守人员、物业人员...


一个用户需求可看作是“目标用户”在“使用场景”下的“用户目标”,其实就是“谁who”在“什么环境下where/when”想要“解决什么问题what”。用户需求其实就是一个个生动的故事,告诉设计师用户的真实境况。设计师需要了解这些故事,帮助用户解决问题,并在这个过程中让他们感到愉快,回到上述停车场产品的例子上, 作为一个设计师, 应该考虑哪些内容呢?设计师可以通过头脑风暴的方式,邀请产品人员一起在产品定义的基础上畅所欲言,列出所有想到的内容。


在这个过程中,大家头脑中会浮现出一连串的故事,帮助设计师确定用户需求。


A:“年终总结,公司领导想知道集团运营的车场中,哪个盈利最多……

B:“财务人员想要一键导出车场营收账单……”

C:“区域经理需要为商场的商家分发消费者停车优惠券…… ”


当然这些内容一定不要脱离前面产品定义的范围。最后整理出的用户需求如下。


目标用户:董事长

使用场景:接待合作商时,做经营车场的决策时

用户目标:清晰展示车场实时数据,展示集团所有车场营收状况排名。


目标用户:区域经理

使用场景:周汇报,月汇报,车场设备异常时……

用户目标:一键导出车场相关数据,车场异常设备告警。


目标用户:岗亭职守人员

使用场景:交接班时

用户目标:快速准确的结算前一值班人员的现金收入。



根据上述内容,设计师可进一步发散,考虑如何更好地解决用户的问题,考虑的范围包含功能、内容、特色等。


目标用户:董事长  区域经理,岗亭职守人员

关键词:数据全面,配置权限,设置公司组织架构,底下停车场光线昏暗,露天停车场光线过曝……


使用场景:汇报,工作中,车场设备异常时

关键词:下载数据表,可视化大屏,异常设备实时上报,收藏常用表格……


用户目标:管理停车场,管理下属,增加车场收入,提好工作效率,监控设备……

关键词:车场数据实时反馈,车场断网实时警报,分析车场车位利用率,子公司营收数据对比,一键导入本地表格自动分析数据,自定义表头……



选择不同类型的目标用户、使用场景、用户目标,都会得出不同的产品需求。由此可见事先确定范围的重要性。需要说明的是,CEO、区域经理、岗亭职守人员虽然有区别,但他们之间并不是绝对独立和互斥的关系,他们的一些使用场景和用户目标甚至是重合的。例如,CEO和区域经理可能都有查看车场季度营收情况的需求。如何将这些角色的需求融到同一产品当中,但对他们个人无关痛痒的或者保密类的内容信息屏蔽掉,就就涉及到权限配置的问题,这里就不过多赘述。因此在发散使用场景和用户目标时,不需要太受群体类型的限制。“放”得越宽,“收”的时候才越有选择余地,越不会遗漏重要内容。


选择目标用户前面己经列出了长长的清单,里面有不同的目标用户、使用场景和用户目标,这是一个“放”的过程。接下来应该从想象回到现实了,从中筛选需要的内容,这是一个“收”的过程。

在目标用户、使用场景、用户目标3个因素中,目标用户是最关键的。一方面,明确目标用户可以使你更专注于服务某类特定群体,这样更容易提升这类群体的满意度,你的产品也更容易获得成功;另一方面,目标用户的特征对使用场景和用户目标有较大的影响。因此目标用户的选择是非常关键的。


前面按照对停车场的需求将目标用户分成3类:CEO(决策层)、区域经理(管理层)和岗亭值守人员(基层)。CEO:主要为了查看集团各个停车场的运营数据,根据数据提供经营决策,从而增加集团车场收入,减少车场投入的人力成本;区域负责人:负责管理车场基层员工工作状况以及运营管辖区域停车场,目的是提高自己以及下属工作效率,增加停车场收入;岗亭职守人员:负责监控停车场设备是否正常运行,办理停车会员业务目的是为了提高工作效率。


该选择哪类群体作为产品的目标用户,需要综合权衡用户对公司的价值以及潜在需求量。


确定产品定位并据此筛选需求

目标用户确定后,产品定位也相应产生。这样就可以根据产品定位筛选匹配的使用场景和用户目标了,从而得出相匹配的关键词(产品需求)。



使用客户:中大型国营企业。

目标用户:ceo  区域经理,岗亭职守人员

主要功能:停车场经营管理

产品特色:支付方式多元化,财务信息透明化,集团管理统一化。

使用场景:汇报,工作中,车场设备异常时

用户目标:管理停车场,管理下属,增加车场收入,提好工作效率……

关键词:数据全面,配置权限,设置公司组织架构,底下停车场光线昏暗,露天停车场光线过曝,下载数据表,可视化大屏,异常设备实时上报,收藏常用表格,车场数据实时反馈,车场断网实时警报,分析车场车位利用率,子公司营收数据对比,一键导入本地表格自动分析数据,自定义表头……


使用场景、用户目标、关键词的结果依赖于不同的思考、调研方式。例如这里使用的是头脑风暴的方式,如果使用其他的方式可能会得到其他的结果。

它们虽不属于产品定位中最核心的部分,但同样对后续的需求文档撰写、设计方向起到非常关键的作用。从关键词中,已经可以看到产品需求的雏形了。在整个过程中可以看到,产品经理的决策是至关重要的。在和设计师一起确定产品定位前,产品经理需要事先做很多准备工作,如了解市场调研结果、了解市场上同类产品的情况、了解潜在用户的基本情况、了解自身优势与劣势……如果缺乏了这些必要步骤,设计师再怎么努力也无济于事。所以设计师不要盲目地等待需求文档,定要帮助产品经理明确、落实这些内容,配合产品经理一起明确产品定位,再进行详细的需求定义、文档撰写、设计工作等。当然,每个产品的情况不一样,各公司的环境也大相径庭。这里仅抛砖引玉,介绍一种产品定位的思路,在实际工作中还需要具体问题具体分析。


三,B端的用户画像


这里并非否认用户画像对C端的重要性,而是C端用户价值很难量化,而B端用户的价值往往更理性,可衡量。


1. 什么是用户画像

1.1 用户画像的定义(persona)

用户画像这个理念是交互设计之艾伦·库柏(Alan Cooper) 提出来的。

在设计网站上可以看到很多案例都模板式的使用了用户画像,但却没有然后了,只字不提是怎么推导出设计方案的……

设计师需要站在用户的角度考虑问题,因此在需求分析、设计阶段,都要尽量去倾听用户的声音,这样才有可能设计出受用户欢迎的产品。

把自己当作目标用户,去揣摩用户的心思是远运不够的,设计师还应该真正走到用户当中去,了解用户的情况,目标用户的文化程度是什么样的?他们对产品的期望是什么?他们的工作环境是怎样的?他们要完成什么任务?他们对竞品是怎么看的,在这个过程中,经常会有出乎意料的结果,如:我们在设计按钮时已经做的很明显了,但是用户就是找不到;原来用户是这么理解这个功能的,这和跟我当初的设想完全不一样……

产品不可能满足所有用户的需要,因此在大家决定走到用户中去时首先要明确谁才是目标用户,而用户画像,就是对目标用户的具象化表达。交互设计之父艾伦·库柏(Alan Cooper) 认为, 用户画像是真实用户的虚拟代表.是建立在一系列真实数据之上的目标用户模型。需要从大量用户数据中提炼出共性特征,井具象成一个真实的用户形象,让公司内产品、设计、运营等角色都可以直观地感受到,他们服务的是一群怎样的人,让他们建立起对目标用户的同理心。


有的产品经理和设计师还会把用户画像虚拟成具体的人物,井将其制作成卡片贴在自己的办公桌上,时刻提醒自己:“这才是我的目标用户,我做需求、设计决策时要围绕他来考虑:他的使用场景、使用目标是什么?我们希望他如何使用我们的产品,以实现产品的商业价值?

因此,用户画像虽然是虚构的形象,但每个用户画像所体现出来的细节特征描述应该是真实的,是建立在用户调研收集的真实用户数据之上的。

而有些设计师们认为既然是虚构的形象,做做头脑风暴、开个会讨论一下,就能高效的做出一个用户画像,这种做法反而是浪费了原本应该去真实用户那里收集信息的时间。


1.2 C端用户和B端用户区别



C端,强调用户体验。由于C端市场已经饱和,很多产品已经非常成熟了,大家只能拼用户体验了。

B,强调客户价值。ToB 也强调用户体验,但是用户体验不是致胜的关键。国内外有很多 ToB 的产品其实体验非常糟的,视觉上也是千篇一律根本谈不上美观度,但是它们却在市场上生存了下来,因为这些产品准确地满足了客户的需求,为客户带来价值。要知道在B端产品设计过程中:可用性(功能)大于易用性(体验)。


C端,个人决策链路短。是否使用这款产品就在用户的一个念头瞬间。因为拍板的人、使用的人、标准把关的人是同一个角色,所以C端产品个人决策链路非常短。

B,企业决策链路长。产品路径因角色不同发生变化。比如上面说的三个不同角色, CEO、区域经理和使用的基层员工,他们的使用权限其实不一样。包括他们有管理者视角,有使用者视角,还有使用之后产生数据给管理者看的这样一个流程。整个产品路径会因为决策链路长,而发生较大的改变。


C端,易被用户摒弃。这一点很容易理解,你自己就能决定用不用,一旦用户遇到了更好的产品,分分钟就可以摒弃你。但是 ToB 不一样。

B,难被用户摒弃。一家公司上上下下几十到上万人不等,要想员工换一个工作软件,这中间要付出的成本是至少发一个文通知大家,然后所有人去下载新软件,然后激活,然后再上手使用。整个迁移成本太高。所以一般的企业不会轻易换掉已经使用的B端产品。


C端,最终目的是让用户爽。根据马斯洛需求金字塔可以知道,人的需求分为五级,从层次结构的底部向上,需求分别为:生理(食物和衣服),安全(工作保障),社交需要(友谊),尊重和自我实现。

B,最终目的是为了让客户赚钱。钉钉一直提“我们的使命是让企业降本提效”,降低成本、提高效率,其实就是为了让它能够更好的活下去。作为一个企业,商业诉求是最根本的;它很少是纯公益的。纯公益的叫公益组织,不叫企业。


总的来说相较于C端用户,B端用户更不容易获得,个人的体验并不能完全决定产品使用意愿。但对于我们企业一旦获得了一个B端客户,那就意味着短时间内他们是很难被挖走的。


2. B端用户画像构成

2.1 客户画像

在上文“产品定位”中的“客户群体”就是介绍客户画像的,作为设计师如果能清晰了解以下表格内容,那对我们理解业务是非常有个帮助,当然这一切都是更好的做设计,具体内容如下:


2.2 角色画像

2.21 三种关键角色

我们可以根据客户画像中的“组织结构”选出3种关键的角色:



1.EB经济购买影响力(拍板的人)

2.UB用户购买影响力(使用的人)

3.TB技术购买影响力(标准把关的人)


2.22 角色画像内容

我们根据不同的角色对其做分析,从而获得用户画像的内容:


3. 如何做B端用户画像

上面我们说到了用户画像的构成(客户画像以及用户角色),接下来我们需要通过用户调研来完成具体的用户画像内容的填充。当然上面内容表格只是我们做的一份调研前的计划,待用户调研完成后,我们是需要对画像模型进行维护和补充,这个过程其实就像设计一个产品一样,用户画像也是需要不断迭代的。

用户调研开始前,首先需要明确用户研究目的,这往往与产品所处的阶段以及用户研究需求的层次相挂钩;接下来根据研究目的来选用适合的研究方法以达到事半功倍的效果;然后在用研执行层面充分挖掘核心用户的实际需求;最终输出具有指导价值的用户画像。


3.1 明确用户研究的目的


根据产品发展阶段结合业务研究层次明确用户研究目的,带来好的开始。

产品开发阶段:在互联网领域的产品开发阶段,不同的周期和设计阶段,研究目的不尽相同。用户研究主要应用于三个阶段:

3.11 产品计划阶段

对于新产品来说,用户研究一般用来明确用户需求点,帮助设计师选定产品的设计方向。深入用户获取可能性与机会点,探索新的方向。

3.12 产品发布后

对于已经发布的产品来说,用户研究一般用于获取反馈,发现产品问题,倾听用户的声音,帮助设计师优化产品设计和体验,快速迭代。

3.13产品评估阶段

用户研究用于辅助产品的性能测试,为产品做可用性评估、与竞品的对比等,及时评估和调整产品设计策略,提升产品核心竞争力。


因此在产品设计的不同阶段,需要首先明确希望解决的问题是什么?在当前设计过程中哪些信息是需要获取的?哪些知识缺口是需要填补的?明确研究目标是制定调研方案选择调研方法的前提。


3.2 选择研究方法

搞清楚目的以后需要了解使用何种途径和方法能够帮助我们快速填补知识的空白,解答我们的需求。在时间及测试者有限的情况下,应该选择哪些研究方法达成目标呢?



解答这个问题就需要对用户研究的方法有所了解,通过选定的研究方法来收集信息并将其整理成具体的调研方案。用户研究有很多种方法,一般从两个维度来区分:一个是定性(直接)到定量(间接),比如用户访谈就属于定性研究,而问卷调查就属于定量研究。前者重视探究用户行为背后的原因并发现潜在需求和可能性,后者通过足量数据证明用户的倾向或是验证先前的假设是否成立。



另外一个维度是态度到行为,比如用户访谈就属于态度,而现场观察就属于行为。从字面上理解,就是用户访谈是问用户觉得怎么样,现场观察是看用户实际怎么操作。“定性”和“态度”偏主观感性,需要调研者保持中立客观的态度,适合了解调研对象对于产品最直接的反馈。而“定量”和“行为”偏客观理性,需要数据抓取和行为记录,后期分析过程中调研者若能在严谨的数据分析中迸发感性的灵感就能提炼出更多有价值的猜想。然而很多情况下定性和定量两个维度的研究是相辅相成的。因此选择合理的方法,执行调研计划,对可能出现的意外灵活应变,才能更好地获取有价值的调研数据。



评估阶段:在做产品大市场分析评估时,需要用户研究来衡量产品表现,与历版本或者竞品做一些比较,这时候就应该以定量研究为主,推荐使用的方法有A/B测试、问卷调查、可用性测试等;

探索阶段:在产品开发的策划需求期,可以采用定性研究和定量研究相结合的方法,如问卷调查、焦点小组等;

在产品设计及产品测试阶段:更推荐使用用户访谈、问卷调查、数据分析等用户研究方法。


3.3 进行用户研究

不同的用户研究方法在具体实践过程中流程不尽相同,需要具体问题具体分析。但是在用户研究过程中有两个共性的关键因素可直接决定研究的价值。

3.31 找对用户,找到最佳的被访者

用户研究,顾名思义最关键的就是找到最佳的被访者。用户找不对,研究结论或有偏颇或没有目标性,可用性很低。

3.32 深入挖掘用户真实需求

不仅要找对用户还要通过适用的用户研究方法捕捉用户的真实需求。访谈不够深入,容易获取万人皆知的表象信息,无法获取潜在和深层次的本质需求,研究结论意义不大。


3.4 三种创建用户角色的方法对比

在《读书笔记——赢在用户:如何创建人物角色》中,作者提到了创建用户角色的三种方法,主要是从研究步骤、优点、缺点、适用性四个纬度进行对比的,各位设计师可以根据公司产品的发展阶段,需求目标等等来决定使用哪种方法。


3.41 定性人物角色

研究步骤

1.定性研究:访谈、现场观察、可用性测试

2.细分用户群:根据用户的目标、观点和行为找出一些模式

3.为每一个细分群体创建一个人物角色

优点

1.成本低:与15个用户访谈,细分用户群和创建人物角色

2.简单:增进理解和接受程度

3.需要的专业人员较少

缺点

1.没有量化证据:必须是适用于所有用户的模式

2.已有假设不会受到质疑

适用性

1.条件和成本所限

2.管理层认同,不需要量化证明

3.使用任务角色风险小

4.在小项目上进行的实验


3.42 经定量验证的定性人物角色

研究步骤

1.定性研究

2.细分用户群

3.通过定量研究来验证用户细分:用大样本来验证细分用户模型

4.为每一个细分群体创建一个人物角色

优点

1.量化的证据可以保护人物角色

2.简单:增进理解和接受程度

3.需要的专业人员较少,可以自己进行简单的交叉分析

缺点

1.工作量较大

2.已有假设不会受到质疑

3.定量数据不支持假设,需要重做

适用性

1.能投入较多的时间和金钱

2.管理层需要量化的数据支撑

3.非常确定定性细分模型是正确的


3.43 定量人物角色

研究步骤

1.定性研究

2.形成关于细分选项的假说:一个用户定量分析、拥有多个候选细分选项的列表

3.通过定量研究收集细分选项的数据

4.基于统计聚类分析来细分用户:寻找一个在数学意义上可描述的共性和差异性的细分模型

5.为每一个细分群体创建一个人物角色

优点

1.定量技术与定性分析相结合:模型第一时间得到验证

2.迭代的方式能发现最好的方案

3.聚类分析可以坚持更多的变量

缺点

1.工作量大,需要7~10周

2.需要更多专业人员

3.分析结果可能与现有假设和商业方向相悖

适用性

1.能投入时间和金钱

2.管理层需要量化的数据支撑

3.希望通过研究多个细分模型来找到最适合的那个

4.最终的人物角色由多个变量确定,但不确定哪个是最重要的


3.5 产出研究结论

分析调研数据后产出具有指导性的结论与报告。同样一份报告,通过不同的分析方法可以得到很多不同的信息,解答我们要研究的问题,证实或证伪我们的假设,整合分析我们搜集到的数据,发现其中隐含的机遇和启示。研究报告的呈现方式多样,一般情况下会包含结论汇总,人物角色和用户形象如用户画像等,典型用户场景如故事板等,基础完整版数据分析,得到的分析结论点以文字结合数据可视化图表的形式展现出来。研究报告要注重结构的清晰,需要有明确的结论,往往总分总的结构能够更好地把思路捋顺。这里有几点注意事项:

3.51 充分了解产品

熟悉产品才能深挖背后的原因,调研结果才能落到地上,清晰认识它的市场定位、用户定位、已有用户特征等,才能给设计、决策提供参考和依据。

3.52 保持中立的态度

在用户调研过程中,做到态度中立,围绕主题逐层拆解问题,不要带有目的性地引导用户。


用户研究的价值就体现在以用户体验的思路挖掘用户需求,结合依据提出关于产品的核心发现及洞察,推导产品定位,从而指导产品设计。


3.6 注意事项



  • 要明确了解人物角色既不是用户细分也不是平均用户,更不是真实用户。人物角色描述的结果是一个勾勒的原型,对象是产品目标群体,内容是目标群体的真实特征。

  • 人物角色能够被创建的重要前提是认同以用户为中心的设计理念。前期一定需要团队全员参与,统一目标和诉求。

  • 最后将完整的人物角色模型和故事板印制出来挂在团队成员能够看到的地方,为产品设计带来潜移默化的影响。在产品的不同发展阶段,有影响性变化的情况下定期更新人物角色。


4. 用户画像的对设计的意义

我曾经在知乎上看到一个大牛这么形容用户画像的:


BAT 最核心的能力,就是大数据的用户画像能力。再跟大家说个段子,大家都知道腾讯,腾讯做产品很强,如果你做了一个产品被腾讯盯上了,腾讯也做个产品,腾讯能很快超越你,为什么呢?因为腾讯有一个非常强大的用户的挖掘能力。举个例子,腾讯的技术分为T1、T2、T3、T4、T5。T5 相当于首席科学家,基本上就- -两个人,T4在腾讯有不少人,几十个人,什么叫T4?腾讯叫T4专家组,就是能在腾讯进入T4的,一般都是经过上亿次用户运营的这种技术高手。腾讯公司遇到问题,就上T4专家组,就让这帮擅长用户画像的T4专家组来解决问题,几乎没有他们解决不了的问题。来源:《小米爆品课:持续打造现象级产品的方法论》


由此可见,用户画像,是互联网公司核武器。同样用户画像对设计师的意义也是不容小觑的。


4.1 帮助设计师快速理解业务

设计师很容易进入魔障,做自嗨的设计,要想我们的能力更上一层楼理解业务是前提。特别是做B端的设计师在做设计之前更是需要透彻理解业务。在刚接触到公司产品的时候我们可以先通过用户画像快速了解到目标用户的信息,并且帮助我们理清楚信息架构的逻辑。


4.11 理解产品定位

在刚接触到公司产品的时候,设计师们可以通过用户画像迅速清晰产品定位模糊这个问题,帮助我们精确地知道公司在为一群什么样的人服务,这样就把准了产品的相对较为准确的定位,规避了后面我们在出设计方案时出现偏差的风险。


4.12 理解信息架构

设计师明确用户画像可以在一开始就理清我们产品的功能架构的逻辑,因为用户画像可以明确的知道用户的具体目标,用户的行为习惯,用户的操作环境等等,从而理解信息分类的依据。刘津在《破茧成蝶—用户体验设计师的成长之路》中说“好的导航是成功的一半。”这句话让我印象深刻,确实在我的实际工作当中,要想快速理解业务我必须明确用户是用什么习惯进行信息分类的,而不是通过产品逻辑去分类。


4.13 理解需求优先级

设计师在日常工作当中会同时接到几个需求,我们如何对这些需求进行轻重缓急的分类,就需要我们依据用户对这些功能的紧急程度。此时每一个功能都可以归类到相应的模块,功能所处的位置可以按照需求的重要程度进行优先级的位置放置,同时交互更加符合实际使用场景,确保产品在投入使用后能快速上手,快速解决用户的问题。


4.2 防止设计进入误区

4.21 避免为自己设计

设计不等于艺术。简单地说,艺术是感性的,而设计是相对理性的。艺术为表达创作者的个人意识,而设计是为了解决用户具体的问题。很多不了解设计的人会以为设计是充满想象力、天马行空的,而非理性的。实际上设计并不是搞艺术:设计师既需要灵感和天分,也需要后天努力学习,掌握技巧和方法,更重要的是严谨、细致的心思。我见过很多设计师进行界面设计时,没有任何章法,完全凭想象和喜好绘制,这就变成了没有实用价值的“艺术创作”了。而糟糕的设计也多半来源于此。

作为B端产品的设计师,我们很小概率能成为自己产品的目标用户,所以一位合格的设计师是不可以单凭主观判断设计的合理性,因此参照用户画像是非常有必要的。


4.22 避免弹性用户

不知道大家有没有发现很多产品做着做着就跑偏了,因为B端产品的特殊性,我们很容易被客户牵着鼻子走,那作为设计师我们如何通过用户画像坚持设计立场呢?

我们经常在做设计时,为了说服自己,就强行安给用户一个需求,认为这个肯定也是用户需要的,结果"用户"变成了一个弹性概念,为了适应我们的观点和假设,不断地变化。最终把很多精力和时间浪费在了并不重要的功能方面,产品成功的关键是目标而非特性,通过用户画像,可以帮助我们时刻聚焦在帮助企业完成目标上,而非做功能堆砌。用户画像给了我们一个强有力的工具,让我们辨识出伪需求。


4.3 提高设计团队的话语权

相比流程图和功能列表由于用户画像是以叙述方式描述产品的目标用户,这使得它非常易于理解,可以让团队中的所有人迅速理解到用户,保证产品设计过程中都时刻记着设计目标。相信大家遇到过这种情况,根据需求文档设计出来的功能,被开发砍掉,在有了用户画像之后,为讨论哪些功能是否该砍掉提供了更有力的依据。

B端设计师经常在团队里会出现话语权不足的情况,这是由B端以业务的中心的特征决定的,越理解业务话语权自然也越高,在做用户画像的过程中,设计师对业务的理解也会更深入一步。用户画像使得自己的设计有理有据,提升设计提案被通过的可能性,提高设计团队在公司的话语权。


四,结语

表面看起来,设计和商业似乎是相悖的:设计充满情怀,商业唯利是图。其实不然,设计优雅地解决人们的问题,商业利益则是对此的一份奖赏及回报;以商业利益为前提的设计更容易把握用户的“痛点”及诉求,毕竟有用户量、有用户的认可,企业才有可能盈利。所以两者并不冲突,且互相成就。

理顺了这层关系,大家就会明白好的设计师一定是懂产品、懂行业、懂商业的,这样才能做到有的放矢,和企业共同成长,最终实现双赢。当然这需要多年的积累,设计师们不妨把它当作未来努力的长远方向。

我为什么特意强调说“产品定位”“用户画像”,那是因为这是我们设计师最容易忽略的问题,理论的缺失往往使我们设计晋升路上的绊脚石。

上述的观点站在的巨人的肩膀上,也结合了我工作中的实战经验,抛砖引玉。每家公司的工作流程都不一样,所以各位设计师要根据实际情况来做具体分析,本文所抛出来的观点仅供参考。



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

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



文章来源:站酷   作者:菜菜不甜

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

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


AntV 图可视分析解决方案(设计篇)

分享达人

1. 到底什么是图?



「图」对于很多人来说是一个熟悉又陌生的东西,那么到底什么是图?以上图的小游戏为例,为了演示方便,我们抽取其中10个人关于键盘和音乐类型的喜好的信息,如果以键盘和音乐喜好为关系,把这10个人联系起来的话,会得到下方这样能一张关系图。



基于这张图能大致了解这10个人中对于音乐和键盘喜好是什么情况,比如:没有人喜欢流行乐和红轴键盘,甚至可以进行一些简单的推理:喜欢古典乐的人大概率会喜欢黑轴和青轴。



本质上来说,通过前面的小游戏收集到的数据是一张表格数据,当把这些静态的数据以某个维度的信息关联起来,就能构建成一张图,基于这张图我们能进行各种各样的解读和分析。这其实就构成了在我们图这个领域中的 DIKW 模型。把静态的数据,逐步转化成信息,再到分析出有意义的「知识」,在实际的业务场景中,借助算法或者更复杂的分析手段,甚至能从图中分析出价值更高的「智慧」。




随着一张图中的节点数量越多,节点之间能互相产生的关系会指数型的增长,对于这个关系网来说,它能产生的经济效益也是指数型的增长,在经济学领域把这一效应称之为「梅特卡夫效应」。其实在日常生活中,最常见的图,就是一张由人际关系构成的社交关系网络,我们每天都在用的各种社交平台都符合这一效应。



在实际的 B 端业务场景中,图在图数据库、网络安全、企业风控、知识图谱等场景下有非常广泛的应用。

 


2. 设计挑战



分享一个在知识图谱这个业务场景下的真实故事,某天 PD 发过来如上图的钉钉消息,希望帮他设计一个图的需求,然后隔一段时间发来不同的希望在图上面表达的语义诉求。随着要表达的信息越来越多,后面再去设计图的样式时,就陷入了不知道该怎么办的境地…



 

2.1 视觉通道有限

在可视化设计中,常见的视觉通道就那么几种:形状、方向、纹理、尺寸、值、颜色,随着产品功能的拓展,需要在图上表达的信息维度越来越多,且根本没有停下来的趋势。这时我们会面临图这类产品设计时的第一个挑战:视觉通道有限,无法满足日益增长的语义表达的需求。



 

2.2 数据量超预期

下图左侧是一张交付给前端同学的设计稿,基本上满足 PD 提到的各类语义表达的诉求。然而实际验收的时候,带进实际数据的时候效果是右图这样的。这是面临的第二个挑战,在设计一张图的时候,设计师往往是按照非常理想的情况去设计的,但当实际的数据灌入进去,再加上还原度的问题,布局的问题,会导致实际一张图渲染出来的效果是非常「惊人」的,可读性几乎为0。



 

2.3 连续分析效果不可控

下图的 GIF 是最基础的一种图分析的操作:从一个节点出发,逐步的选择感兴趣的节点展开,以随着关系的逐步扩散发掘出更多有价值的信息。GIF 中所看到的从起始的蓝色节点扩散到青色节点,再到红色、绿色节点,这样逐步扩展,分层展示,是一个设计师的理想情况。但实际的情况往往是下图这样的,每次扩展开的节点都会在原来的基础上覆盖,连续扩散几次之后,节点和边密密麻麻的重叠在一起。连续分析的情况下,效果再一次超出我们的预期。



 

回顾一下为何会出现上面的几个问题:在面对图这样一个陌生的设计对象时,在对其有更深入的了解之前,我们往往只能看到表面的静态的视觉的设计,单点的交互设计,看不到也没法控制的是藏在图这座冰山之下的数据量、布局效果、加载速度和用户连续分析的路径。



 

为了解决上面提到的几个挑战,以及便于更多设计师更快速的上手图产品的设计,避免一些我们此前踩过的坑,同时为了规范图产品的设计,我们基于在不同业务线的图产品的实践和思考,产出了「AntV 图可视分析设计指引」



       更好的阅读体验,推荐访问语雀版 



3. 设计指引

设计指引从全局样式(Global Style)、交互规范(Guide)、组件(Conponents)、功能模板(Templates)、综合案例(Examples)几个视角出发组织相关的内容。由于大部分设计师对「图」是不太了解的,所以增加了一篇「总则」来介绍「图」是什么,在做相关产品的设计时,面临的设计对象是什么,以及几条最通用的设计指引内容。同时也提供了 Sketch 组件库模板资产,内置了优雅好看的图的样式和常用图的模板。


  


3.1 全局样式



回顾前面提到的知识图谱里的这个图设计的需求,我们踩过那么多坑之后,再回头去看,该如何设计这一一张图呢?其实把上面这张 DEMO 图拆解来看,再复杂的图,本质上无外乎就是「两点一线」,以及在节点和边上的文字标签。


undefined



再抽象一层看,会发现组成图的最基础的元素有:点、边、箭头、标签、布局这么5种元素。以其中的点为例,再去拆解看一下,设计这个图里面最基础的元素的时候,适用于表达点的视觉样式的有大小、颜色、描边、形状、图标、角标 这么几个视觉参数。其中,「描边」还能细分为单层描边或多层描边,「图标」还能区分为线型还是面型,各自再对应不同的视觉参数。



有了最适合点的视觉通道和对应的参数之后,回顾一下我们此前需求中我们需要在节点上表达的各类语义,可以归纳3大类:

  • 数据特性:数据中固有的一些特性,比如类型、规模、权限等,这些特性不会随着呈现的平台的不同而变化,而是属于数据本身的一些特性;

  • 功能属性:在具体的产品中,随着产品功能的不断丰富,赋予给节点的属性,比如一个产品有了预测或推理的能力,就需要在图中表达出节点是否是「预测的」或者是「疑似」的;

  • 鼠标状态:鼠标 Hover 、Focus、Disable 等常见鼠标交互事件

这3类语义,共同决定了一个节点应该表达什么维度的信息,样式应该是什么样子的。这时再去设计一个节点的样式时,其实就是一个把语义类型和适用的视觉通道和参数连线的过程。无论需要表达的语义如何新增,节点样式的表达都有一定的内在逻辑可循。



 

图的基础元素中,除了点之外,其他的基础元素也按照类似的思路梳理出需要表达的语义和使用的视觉通道,这样我们就完整的,成体系地归纳出了所有影响一张图「长什么样」的基础元素、视觉通道和参数。有了这样一张「参数表」,再去设计一张图时,就明确的知道有哪些要素可以考虑。



 

当然,能做的不止于此。结合我们前端同学的能力,我们把上述「参数表」工程化了,做成了一个在线工具 — GraphMaker 。在这个工具里可以根据实际的数据量,调整节点、边、布局的所有视觉通道参数,以调整到一个合适的视觉效果。最终导出成代码,用到实际的项目中。及时完全不懂图,也能在这个工具上,调试出理想的视觉效果,再将对应的代码导出给到开发同学使用。

 

 

3.2 交互规范



在图产品中,常见的操作对象有:画布、节点、边、Combo 和其他这五种类型。为了捋清楚图产品中常见的交互事件,以交互事件三要素的形式,将所有的交互事件全部梳理和枚举出来,并以操作对象为分类维度,归纳整理出一份完整的「交互时事件库」,提供给设计师使用。



 

3.3 组件 & 分析模式



前面介绍了「交互事件」,很多时候,一个复杂的交互事件需要有一个独立的组件来承载。比如:关联节点的搜索查询、代码输入框、算法模板选择器等都有一个共性:都是属于「输入某中查询条件」的组件,这类组件则统一归纳为「条件输入组件」,主要由「条件输入」和「确认执行」两部分内容组成。相同的逻辑,我们将各类业务场景下常见的组件归纳为基础组件、条件输入、信息输出、高级功能四种类型。定义好每种类型组件的基本特性,确保产品在不断迭代新增新功能的过程中,新增的功能组件都能保持基本一致的体验。



以最常见的一个「算法模板」查询的场景为例,在左侧的条件输入面板选择一个合适的算法模板,画布上会渲染出对应的结果内容,然后用户会选择其中感兴趣的节点查看详情。这三个组件共同组成了一个完成的图分析操作,这类有固定条件输入的分析模式被定义为「有明确目的分析」。图分析产品中,常见的分析模式有3类:

  • 有明确目的:这类分析模式是有明确的分析或查询条件,这个条件的呈现形式可能是一个规则表达式,一段 Gremlin 或 GQL 的查询语句,或明确的起点和终点,甚至是直接查看某个节点或某条边的具体信息。常见的模式有:规则查询、Gremlin 查询、关联分析、筛选/搜索画布、查看详情等;

  • 无明确目的:无明确目的地探索是指基于已有数据内容,进行关系的 N 度扩展、下钻分析、子图探索、撤销回退等操作,来挖掘数据中的特性,发现价值或机会点的分析过程;

  • 特殊场景:

    • 内置了 AI 算法能力的分析场景:这类分析场景通常需要借助内置的算法或规则推理能力来实现,从海量数据中快捷的挖掘出符合特定规则的目标节点和关系,常见的有:担保圈、实控人、最短路径等;

    • 结合时间或地理信息的分析场景:在源数据中含有时间和地理维度的内容时,会出现结合时间或地理信息的分析场景。



 

回顾一下前面介绍的内容,从「全局样式」到「分析模板」其实都是在做同一件事情:在面对一个「图」这样一个陌生的设计对象时,梳理其内在的逻辑,并在这个陌生的领域,定义清楚其运行和存在的逻辑。从最原子级的样式和交互、组件再到一个完整的分析模式,从不同维度去定义图产品的「规则」,以确保不论多复杂的场景,图分析产品的体验是可控且有序的。类似于积木一样,有了统一的接口规范,无论积木的形状如何变化,都能完美的拼装出玩家想要的形状。



从 ETCGG 的角度出发,介绍了「AntV 图可视分析解决方案」设计相关的内容,解决方案还有非常重要一部分的内容就是「技术方案」,稍后会由我的搭档 @山果 给大家带来更详细的介绍内容。

 

总结

在整个分享中,我们介绍了图分析产品的4个不同的业务应用领域、3种图分析模式,定义出了4种图分析产品的组件类型,同时以交互事件3要素的形式梳理出所有的图交互事件,以及找到了所有影响「图」样式的基础元素和参数。理想情况下,有了这些信息之后,我们再去设计一个图分析产品时,可能就是一个从左到右的连线过程。为此我们也正在努力将这一理念转化为现实,开源工具 Graphin 2.0 正在设计&开发中,也尽情期待。



 

「系统看上去混乱无序,但在其背后却隐藏着一种非常微妙的秩序」 - 诺贝尔奖得主、物理学家 Murray Gell-Mann 曾经说过这样一句话来描述自然界中那些看上去混乱无序,实则内含秩序的系统现象。这句话用来描述「图」这类产品也非常贴切,当前图分析产品处于发展期,相关的设计领域更是一片不毛之地。AntV 图方向的同学们此前的一些探索,以及沉淀下来的「设计指引」和「解决方案」就是在图这类产品的混乱和无序的复杂中,找到其内在的秩序。


undefined



图可视分析领域是一个小众而又专业度很高的领域,希望以上的分享的实践和思考能给在这个领域相关的同学一些启发。目前设计在这一领域刚刚开始迈出一小步,还有巨大的未知和机会等着我们去探索,欢迎通过各种渠道随时交流。


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

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



文章来源:站酷   作者:Ant_Design

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

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


易用度在企业级中后台产品的探索和实践

雪涛




引言

今年,我们在内部中后台产品进行尝试,发现「易用度」可以作为合适的度量指标,并成功推广到 35 个产品,帮助PD、设计师、工程师等产品设计者去衡量产品体验现状,发现改进机会点。实践证明,易用度,相比满意度、尖叫度、NPS,更适合技术类产品的体验度量。结合用户行为数据,可以为用户画像、改进方向、运营策略提供更准确的决策依据。


一、中后台体验度量现状

在公司内部,技术类产品种类繁多,有很大一部分是开发、运维人员使用的中后台产品,且以从 0-1 阶段为主。由于这部分同学本身工作复杂度高,又必须依赖内部产品来完成,所以长期以来“简单易用”成为大家追求的产品体验标准,他们也把“如丝般顺滑”作为终极目标。但现实情况是,上手门槛高是使用技术类产品最大的痛点。


对于前台业务的设计者,经常会使用「人+钱」,也就是「流量+付费」来衡量产品效果。通过成功率、转化率等指标,可以快速看到用户行为上的反馈,来指引后续优化。但对于技术类产品,尤其是强流程、工具型产品,很难找到一套契合业务特点的度量方式。理论上,使用「成本+效率」是比较合适的衡量维度,实际操作下来,找到设计和产品效果之间的因果关系,并非易事。


我们做了一个内部调查,发现产品设计者经常容易遇到这些问题:

  • 体验度量是一个绕不开的话题。天猫、阿里云、华为、京东都有尝试提出解决方案,但没有统一的衡量维度。

  • 设计方案与产品的市场反馈,需要一个可以解释关联关系的抓手,这对迭代方向的指引至关重要。

  • 产品团队逐渐重视用户用户,但缺乏有说服力的指标。


业界在体验度量上的方案,大致分为 3 个派别:

  • 客观衡量法:通过数据埋点监测用户行为数据。例如经典的 PULSE 模型,还有大家熟悉的运营指标,活跃用户数、留存率、ARPU、LTV等等。这对于还未商业化、用户基数少的产品不适用。

  • 主观衡量法:收集用户主观打分。经典的满意度、尖叫度、NPS,可用性测试量表(如SUS),美国客户满意度指数ACSI。

  • 主观+客观衡量法:把用户行为数据和主观打分结合起来,多数用归一化方式得出一个总分,把分数划分成不同档次作参考。Google 经典的 HEART 模型,内部 的 PTECH 模型,阿里云 QoUE 模型 ,华为云的用户体验模型。


在掌握了这些信息之后,我们在内部的技术类产品上,进行了一轮新的探索。经过半年时间的试点,结合业界的解决方案、内部产品的业务特性,我们最终选择主观衡量法,并使用「易用度」这个衡量指标。



二、易用度指标

易用度,英文 Customer Effort Score ,简称「易用度」,也有译成「费力度」,指的是用户使用某个产品/服务来解决问题的难易程度。目的是消除或减少用户使用产品过程中的障碍。


该定义来自 2010年 《哈佛商业评论》发表的文章——《Stop Trying to Delight Your Customers》。2013年,Gartner 子公司 CEB 发布 易用度2.0版本 的测量方法,定义为“解决问题的难易程度”(make it easy to handle my issue)。


它的源头可以追溯到美国用户研究专家 Jeff Sauro(2009)提出的单项难易度问卷(Single Ease Question,SEQ),在可用性测试之后,用户需要对一个问题进行打分,问法是“整体上,这个任务是非常困难-非常容易(7分制)”。


为什么说「易用度」更适合技术类的产品?主要基于技术类产品的三大特点。





衡量维度

总体指标

易用度:使用**产品完成**工作的容易程度。


影响因素

  • 主要因素:产品及设计给用户操作带来的复杂度,我们称之为「基础体验」,包括帮助引导、功能入口、概念术语、任务流程、操作反馈。

  • 次要因素:用户特征对使用易用度的调节作用,也称之为「调节因素」。不同特点的用户,会影响易用度分数,包括操作熟练度、先验知识、行为习惯。





量表开发

大家肯定要问,这些影响因素是怎么确定的,如何证明它们的合理性?这就要提到量表开发方法,基本上可以分为几个步骤:


step1.理论借鉴

从相关领域查找经典量表,站在巨人的肩膀上,经过实践检验的量表更可靠。我们首先从15种国际可用性测试量表中借鉴,抽出了一些关键的衡量维度。另外,易用度创始人Matt Dixon(2014)在《the effortless effort》书中,总结了在客户服务场景,费力的关键因素:

    1. 信息分类不恰当,反复描述问题(82%)

    2. 需要多次求助(62%)

    3. 帮助指引不清晰(59%)

    4. 找不到相关入口,频繁切换沟通渠道(59%)



step2.实践总结

我们盘点发现,技术类产品,绝大部分属于工具型产品,强调任务流程,也是用户痛点集中的地方。汇总多条业务线近1年的调研结果。除了功能、性能问题外,根据对完成任务的阻碍程度,无论是0-1阶段,还是1-N阶段,高频体验问题分布都集中在5个维度:

  • 帮助引导

  • 操作反馈

  • 任务流程

  • 概念术语

  • 功能入口



step3.数据分析

通过整理归纳的影响因素,需要经过信效度验证,才能有说服力。简单来说,信度就是“可信与否”,指的是结果的一致性、稳定性及可靠性;效度就是“命中与否”,指的是结果反映所想要考察内容的程度。通过统计学的探索性因子分析,验证性因子分析,我们确定 5 个维度可以有效测量易用度分数的变化。详细可查阅如何找到影响用户体验的关键因素?



与满意度、尖叫度、NPS的区别

从易用度-满意度-尖叫度-NPS,是一个用户预期的渐进变化。从中可以看出,易用度更关注的是基础体验,也就是“简单好用”。





为什么易用度相比其他指标更适合技术类产品呢?主要有 3 个原因:

1.内部试点发现,满意度无法准确衡量技术类产品体验

  • 满意度不能很好衡量真实体验,分数虚高。我们在一些产品上,同时使用「易用度」和「满意度」作为总体指标,发现 43% 的用户满意度评分,高于易用度评分,可以理解为“产品我满意但不好用”。此外,易用度分数与满意度分数相关性高达0.77,具备很高的可替代性。

  • 易用度更接近用户真实体验。对任务难易程度作出评价,用户在判断时会更直接,考虑使用过程中付出的脑力、时间等成本。对满意度作出评价,除了考虑产品本身的易用性,内部用户还会考虑其他主观因素,例如:

  1. 合作关系:你是研发,我是用户,担心给你满意度打低分了,之后就不满足我的需求了。

  2. 中庸倾向:满意度调查,已经是人尽皆知的评分,国人都倾向于打中上。

  3. 评价范围:易用度问的是完成工作的容易程度,范围更小,用户评价的时候更聚焦。满意度问的是整体是否满意,范围更大,用户会综合考虑很多因素,例如上面提到的服务支持、上下游协作、需求响应等等。


2.行业实践表明,易用度比 NPS 更能预测用户留存和成本变化

  • 易用度更能预测用户留存。《哈佛商业评论》(2010年)发表易用度时,调研7500多名用户,数据显示易用度低的客户,94%的有复购意愿,88%表示会增加支出,仅1%表示会对公司持负面态度。Garter(2013)发布报告,基于49000多名用户数据发现,易用度分值从1分提升到5分,可以使用户忠诚度提高22%。Oracle(2015)发布服务云易用度白皮书发现,当用户表示使用产品付出了更少的努力,忠诚度提高18%。相反,从满足用户预期到超出用户预期,用户忠诚度的变化并不明显。

  • 易用度更能预测成本变化。 Gartner(2019)对100+公司、12.5w用户的调研发现,易用度从高分到低分,可以降低37%的成本。


3.行业实践表明,尖叫度更适合成熟度较高的产品类型

  • 目前在市场上,至少在国内,ToB 产品没有达到饱和,定位也各有不同。在企业用户心中,并没有足够清晰的心智和经验去判断。例如企业微信和钉钉,基本上很少有用户会同时使用这两个产品,那用户就无法准确评价二者的好坏。

  • 更关键的是,很多 ToB 产品,用户多数是被动接受使用的,极少有选择余地。普遍的高技术门槛,也把他们尝试的意愿和可能性大打折扣。


优劣对比

对比满意度、尖叫度、NPS指标,易用度的优势在于:

  • 关注用户完成任务过程中的阻碍,重视基础体验;

  • 适合去度量特定的用户接触点和任务流程,以便了解用户解决问题的难易程度。

劣势在于:

  • 对于分数过高或过低的情况,没有通用的基线,需要区分行业、产品类型、产品复杂度来衡量分数是否合格;

  • 侧重基本体验,无法衡量用户的总体满意度。





三、易用度基线

经过半年的实践,我们采集了 35 个技术类产品的易用度,根据产品类型、产品阶段来区分。结合内部试点和行业调研,我们把技术类产品的易用基线,设定为 5.5 分。主要发现:

  • 产品类型越复杂,易用度越低。试点产品中,ToC 产品易用度均值 5.46,ToB 产品易用度均值 5.32,ToD 产品易用度均值 5.07。

  • 产品阶段越早期,易用度越低。试点产品中,0-1 阶段的产品易用度均值 5.09,1-N 阶段的产品易用度均值 5.28。


内部实践

如图所示,易用度有很好的区分度,不同产品类型的不同产品阶段分数呈现出差异性,我们可以根据这个数据,去评估自己的产品所在位置。





为什么总体上选择 5.5 分作为“易用”标准?


我们在这 35 个产品上进行易用度的尝试,最终收集了 4000+ 问卷数据,得出了技术类产品的体验基线:

  • 总体均值 5.07 分,中位数 5 分。具体分布如图所示,认为“比较容易”(5-7分)的用户占 69%。

  • 但由于内部的技术类产品,大多处于 0-1阶段,以现在的状态作为“易用”基线,显然不合理。





业界标准

因此,我们需要结合业界的实践作为参考。我们收集到 2 家用户研究领域的老牌公司 Nicereply 和 HotJar 的数据。Nicereply 是一家咨询公司,它服务的对象既包括 C 端用户,也包括 B 端用户。HotJar 是一家专做用户行为监控的公司,它服务的对象主要是 C 端用户。因此,我们倾向于采纳 Nicereply 发布的基线 5.5 分,作为参考。

  • Nicereply 公司在2018 年发布的易用度 benchmark,基线为 5.5 分。

  • HotJar 公司在 2019 年发布的易用度 benchmark,基线为 6.09 分。





分析思路

很多设计者会想,不就是一个问卷嘛,能发挥多大的作用?实际上,当问卷数据+用户行为数据,它将发挥更大的价值。

  • 现状描述:对产品当前的功能、体验、性能的在用户心中的水位进行摸底,通过数据和主观反馈找到原因。

  • 对比差异:技术型产品往往有多个角色共同使用,并且有上下游协作关系,可以通过问卷和数据发现不同角色的偏好,找出差异化的改进方向。

  • 影响关系:当发现某些模块用户评价低时,需要下钻找到最相关的影响因素,这时需要用到相关分析,找到此消彼长或相辅相成的变化关系,以及用到回归分析,找到可能的因果关系。

  • 聚类分析:结合问卷数据和用户行为数据,我们可以对典型用户进行分层,也就是我们通常说的“用户画像”,可以结合经典的 RFM 模型,找到高频、忠诚、高付费且评价好的用户。





现状描述

以某个技术类产品 A 为例,通过现状描述,可以发现低分人群抱怨的问题集中在哪里,提出问题优先级排序。




对比差异

通过对比差异,把用户根据人口学、行为特征进行单维分类,与易用度分数做交叉分析,找出人群之间的差异,有针对性改进。





影响关系

通过影响关系分析,可以找到影响产品 A 易用度分数的主要原因,也就是用户为什么觉得好用/不好用。





聚类分析

通过聚类分析,结合问卷数据和用户行为数据,可以发现典型人群,制定差异化的运营策略。





现象与洞察

在 35 个技术类产品上的实践,我们发现了一些常见现象和经验性的洞察,它并非都是普适的,却有很高的参考价值。





结论

基于内部技术类产品的体验度量实践,我们得出以下结论:

  • 实践证明,易用度指标衡量技术类产品更有效。技术类产品降本增效的商业目的、降低技术门槛的用户诉求、流程复杂上手难的痛点,决定了体验度量要关注基础体验。满意度、尖叫度、NPS去衡量都不太准确。

  • 易用度的衡量维度,包括 5 个部分的基础体验。即帮助引导、功能入口、概念术语、任务流程、操作反馈。

  • 结合内部试点和行业调研,我们把技术类产品的易用基线,设定为 5.5 分。当前内部技术类产品的易用度基线是 5.07分,行业技术类产品的易用度基线是 5.5 分,产品类型(ToC/ToB/ToD)、产品阶段(0-1阶段,1-N阶段)也会有所差异。

  • 结合行为数据,易用度可以进行描述、分类。使用现状描述找出低分人群的高频问题,使用对比差异找到多角色的不同诉求,分析影响关系找到影响易用度的主要因素,结合用户行为数据进行聚类找到典型人群。


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

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



文章来源:站酷   作者:Ant_Design

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

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






服务蓝图的背后到底是什么,该怎么用?

雪涛

前言

用户体验地图与服务蓝图常常会一起出现。因为,用户体验地图更聚焦于用户在前台端到端的体验,而服务蓝图更聚焦于由表面到核心后台业务及如何交付和幕后的操作,并且能与用户体验强关联起来。

什么是服务蓝图?

服务蓝图是以公司角度展示的可视化界面工具。在每个阶段为用户提供的服务,且在服务过程中会涉及到的不同人员和不同的条件。并且在公司内,所有的人员都可以客观的理解并使用(所需各方的服务和支持)。

1. 主要构成

服务蓝图直观上同时从 4 个主要方面展示:

服务蓝图的背后到底是什么,该怎么用?

用户行为

用户在所有阶段中的体验节点。这里需要注意的是:一定要清晰的罗列出,用户在什么触点下做的什么行为。这样才能更好的进行技术(方案)评估及更好的服务用户。

服务蓝图的背后到底是什么,该怎么用?

前台

前台是围绕着与用户产生交互行为关系所展开的具体内容,内容可包含员工、数字设备、技术方案,也就是用户能看见的服务和能接触到的服务。

服务蓝图的背后到底是什么,该怎么用?

后台

后台是给前台提供技术方案支持的存在。

服务蓝图的背后到底是什么,该怎么用?

支持

支持过程包含内部人员和外部人员履行的服务步骤和互动行为。

服务蓝图的背后到底是什么,该怎么用?

如何用服务蓝图优化产品/业务?

优化产品/业务主要从 4 个关键点出发:

1. 找出服务流程的崩溃点或断点

对于线下智能服务,我们应该遵守一个基本原则:在一个完整的流程中,不应该出现「用户不知道要做什么和需要未知等待的事情」。

怎么找到崩溃点和断点?

主要从「田野调查」和「深度访谈」获得。可根据实际的项目展开定性研究。

2. 新服务、新体验该怎么执行

在更新体验流程的时候,一定要基于全新的角度出发。把自己想象成:我是一名刁钻的用户,你需要喂我吃饭的境界,最好还要帮我把饭粒粒分离。

还是以无人零售商店举例:前期准备节点

如(新服务):在购物流程说明的物料中,把关键字圈出并划重点,在前期推广的时候安排店员进行随时讲解。

如(新体验):把之前的定制便宜的物料,换成高逼格的、贴纸换成超大号的。

该怎么执行:根据蓝图规划设计“高峰值”的体验点,对购物流程说明的物料进行资源倾斜。

3. 衡量服务过程的每一步是否达标

衡量的标准:数据角度出发/用户购物速度/体验流程的衔接度等等

如(漏斗数据):开业前期宣传来了 100 人,100 人阅读了购物流程,留下了多少人,在留下人中,多少人是在 10 秒内完成阅读进店体验(X 人….X 秒/分钟…)

4. 定义服务的“高峰值”

在不同的阶段设计用户的心理峰值曲线。

峰值和终值,是由 2002 诺贝尔奖得主、心理学家丹尼尔·卡尼曼提出的。他发现大家对体验的记忆由两个核心因素决定: 第一个是体验最高峰的时候,无论是正向的最高峰还是负向的最高峰,一定是能记得住的。第二个是结束时的感觉。这就是峰终定律(Peak-End Rule)

举个栗子:宜家购物

服务蓝图的背后到底是什么,该怎么用?

宜家会在每个阶段给与用户不同的情感体验(我特别喜欢那个冰淇淋,如果你也是的话文章末尾点个赞呗)。

服务蓝图的增值体现

那么如何在蓝图上体现增值的点?主要从以下 4 个方面:

1. 时间:服务质量再高也会随着时间的消耗而消耗。

服务蓝图中的一步可能需要 5 秒,也可能需要 5 分钟,所以在顶部增加的时间能帮助大家更好的理解这个服务。

2. 衡量标准:服务的成功或价值需要一些体验因素来衡量。

这些因素是用户在心里判断服务是成功还是失败的关键时刻。比如,等待时间。

3. 情绪表达:对某些服务来说,理解用户的情绪状态是非常必要的。

比如,用户注册时,突然手机断网了也需要纳入考量因素。

注释说明:在内部讨论时,将说明的重点用 icon 的形式标记出来

#完整的服务蓝图

服务蓝图的背后到底是什么,该怎么用?

总结

企业的资源是有限的,你不可能在所有点都达到用户的预期或者给用户全程的超高体验 。所以,需要做的是,在服务蓝图上配置资源来制造用户体验,使用户拥有一个美好的峰值和令人回味的终值,并且全程不突破用户的底线。

服务蓝图的结构要素,实际上定义了服务传递系统的整体规划,包括服务的设置、服务能力的规划。服务蓝图不是一个人的事情,在服务环节中的每个人都必须把“用户满意”作为自己的服务标准。服务蓝图提供了一个全局观点。服务蓝图也可以平衡业务需求和用户需求。


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

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



文章来源:优设   作者:七月Xavier

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

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



网页UI设计如何体现视觉层次感

seo达人




但是,究竟如何才能结合网页/产品特色和用户的真实需求, 将页面视觉内容层级化, 从而提供更加优质的用户体验,实现与用户的互动, 最终促成产品购买呢?下面小编就结合最新且具有极佳视觉层次感的网页设计实例分析和介绍视觉内容组织技巧,以及在原型化这些网页设计的过程中(结合小编最爱的一款又快又简单的原型工具Mockplus)需要注意的原型设计技巧:


1.利用界面元素尺寸大小建立层级结构

界面元素(例如文字,图片或形状等)尺寸越大,越突出,越容易吸引用户的注意。所以,在具体的网页界面设计中,设计师可以通过有梯度的尺寸变化,创建页面信息的层级关系。当然内容重要性上,也应该是与尺寸大小成正比的(即越大越重要)。

大图模式

如图,利用文字的尺寸大小,体现网页信息的层级。

注意:尺寸大小也要控制在用户能够接受的范围内

太大,能够展示的内容有限。太小,易读性差,也会比较繁杂。


原型设计技巧:

在利用Mockplus (一款具有丰富组件库和图标库的原型工具)创建网页原型时,绝大部分的组件都是可以简单通过宽高属性或拖拉边框两种方式调整其尺寸,轻松创建直观的层次结构。

大图模式

如图,Mockplus允许用户简单通过宽高属性或拖拉边框的方式调整组件尺寸大小。


2.利用界面元素明暗,阴影以及透明度的不同,体现简单层级

如白底黑字般,同类元素,同一色彩,不同的明暗,阴影以及透明度,也可体现简单的层级关系。当然,在没有过多颜色的参与下,不同文字,图片等多种的页面元素结合透明度,阴影以及明暗,也可使整款设计极具简约风和层次感。(点击链接更多的简约风网页设计技巧)

大图模式

如图,文字明暗,结合尺寸变化,让页面层级更加清晰简约:


原型设计技巧:

而在这一方面,小编发现Mockplus提供了专门透明度属性,可以根据层级设计需求,修改属性数值进行设置。


如若,需要添加元素阴影,也可轻松通过组件的重叠实现。

大图模式

如图,“图片”与“形状”组件的组合,实现阴影的添加。


3.利用色彩,划分页面层级

色彩,作为设计师最常使用的视觉层次工具,也为他们创建极富层级感的网页设计发挥着举足轻重的作用。而具体的设计技巧,大家可以参考以下几点:


首先,色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。如图:

大图模式

如图,明亮的红色和黄色更易从相对较柔和的粉色背景中脱颖而出。


而且,某些色彩,尤其是某些主题配色方案的选择,对于确定网页的整体基调,吸引用户注意,作用也非常明显。例如,蓝色,一般代表平静祥和,适合一些日常事物管理类软件选择。而红色,则代表热情喜气,适合一些节日相关购物促销类软件选择。


大图模式

如图,利用红色突出网页促销信息。

其次,色彩饱和度的梯度变化,也可体现直观而丰富的层次结构。

同一色彩,饱和度的梯度变化,也可帮助展现网站元素的层次结构。如图:

大图模式

最后,色彩模块,对于体现界面元素的逻辑关系,作用也是显而易见

存在同一逻辑关系的各个页面元素就近放置在同一色彩模块,可以让页面组织结构更加清晰,易于用户快速查看相关内容。


大图模式

如图,利用色彩模块,更直观地划分功能区。

原型设计技巧:

而这一方面,Mockplus提供了非常强大的色彩选择器,设计师们可以简单点击实现色彩的选择和添加。其色彩收藏功能,也为以后复用和保持整款设计配色的一致性提供了可能。


当然,结合“形状”组件,为页面添加丰富的功能色块,以及添加“鼠标悬停时”或“点击时”的简单色彩交互状态,也不是难事。

大图模式

如图,添加色块划分界面功能结构。

4.利用页面布局,展现网页层级结构

页面布局也是设计师们常用的视觉工具之一。一方面,同一网站,内部各个页面可以根据软件或产品展示内容需求,采用多样的布局模式,增加页面的多变性和可读性。另一方面,也可直接在不同页面采用重复的页面布局,方便帮助用户形成一定的阅读习惯,快速有效的查询需要的信息。

而具体单个页面的布局模式,大家可以尝试以下的方式实现:


*利用网格划分不同页面模块

网格是公认的划分页面功能模块的工具之一。而它在组织界面视觉内容方面,作用也不可小视。加之,结合各个网格的色彩变化,也能使整个页面更加炫酷直观。如下图:

大图模式

*利用位置不同体现逻辑关系

同一逻辑关系(比如同类,从属,因果等)或相近/相关的元素放在同一或并列的网页位置或模块内,更易于用户浏览所需页面信息。


当然,每个逻辑关系内,结合大小标题和列表进行展示,层级关系会更加深入清晰。


*利用点线

网页设计中,设计师不仅可以直接使用点线标出需要强调的内容,还可以利用点线划分页面板块和布局。

大图模式

如图,通过位置的不同体现内容之间的逻辑关系。同时,利用线条划分页面结构和布局。


*利用对齐方式的不同

文字,图片以及相关元素的对齐方式,也是体验不同层级结构的重要工具。

总之,页面布局也可帮助设计师们创建更具美感和层次感的网页设计。


原型设计技巧:

在使用Mockplus时,设计师可简单使用“快速格子+自动填充”的功能组合,实现界面网格的轻松添加。而且,在具体的设计过程中,对齐方式,标尺以及参考线等工具的使用,也可使网页布局设计更加简便快捷。


大图模式

如图,利用Mockplus的快速格子和自动填充功能制作网页网格,划分界面功能结构。


5.利用留白和间距,突出界面视觉内容

留白的巧妙运用,能够非常有效地突出页面信息。而页面内部元素之间,保持适当的间距,让彼此之间的相互联系而不“拥挤杂乱”,也是吸引用户注意的不错策略。如图:


大图模式

6.利用对比,凸显网页层级结构关系

以上所提及的各种视觉组织工具,例如尺寸,色彩,明暗,间距等等,同类或不同类之间的鲜明对比,也可以让页面视觉上更加美观而丰富,同时体现元素之间的结构层次关系。


大图模式

如图,利用色彩的强烈对比,突出页面层级。

此外,页面元素的相互叠加,清晰度,以及细节展示程度的对比,也能有效地凸显网页内容的重要性层级。


大图模式

如图,靠前的图片和文字应该更加重要,清晰,细节也应更丰富,从而方便用户识别读取,避免层次混乱。


7.采用不同的界面风格,打造独特的网页视觉层级

当然,并不是说设计师就必须通过以上的设计工具展示网页重要性层级结构。实际上,结合设计师特有创意,独特纹理(texture),图形或图像元素等,打造出具有设计师独特风格的视觉层级,也会是不错的尝试。如下图:


大图模式

总之,不管是否使用以上的设计工具,结合设计师创意,打造独具一格的视觉层级风格,都是不错的设计理念。


原型设计技巧:

而在这一点上,Mockplus提供了很多优质功能,帮助设计师随心设计,并简单快捷的原型化,测试和迭代这些天马行空的创意。


比如,其团队协作和团队管理功能,方便设计师更加高效地完成设计。其8种演示和分享方式,例如导出图片,HTML以及演示包等等,为设计师根据切实需要,选择适当的方式测试和分享相关设计提供了便利。


此外,其组件样式库,也为保存和分享需要的组件样式并随时复用提供了可能。


8.分析用户需求和网页浏览模式,优化页面内容和位置

在进行网页界面层级结构化的过程中,并不是毫无章法,盲目的随意添加或突出某个部分,而是需要分析用户行为,根据用户需求等级进行相应结构层次的划分。否则,再怎么赋有层次感,用户也会因为找不到需要的东西,莞尔离开。


此外,除了根据用需求决定哪些内容需要放在最紧要,最突出的位置,以吸引用户。同时还需要根据用户浏览网页时的阅读模式,分析重要内容的页面位置。


根据美国著名网站设计工程师Nielsen Norman Group研究表示,用户总是在网页浏览中惯用“F”或“Z”型阅读模式,即用户常常是从左到右,开头结尾详细阅读,而中间部分则根据网页或文章大小标题结构,选择性阅读的模式。如下图:

大图模式

那么,网页设计中,设计师就需要注意页面首尾内容的趣味性和实用性,以及中间主体部分注意大小标题简洁明了,建立清晰的框架层次结构。

总之,无论是用户行为画像,还是用户浏览模式分析,最终都是希望能够根据用户需求,更加合理的安排和分布页面内容,直观清晰,易识别。


9.其他设计工具

而其它视觉设计工具,例如界面文本方面,文本字体,排版,对齐方式等等,也可突出页面的层级关系。


原型设计技巧:

如若设计师希望通过网页文本的尺寸,字体,颜色,排版以及对齐方式等实现框架结构的构建时,Mockplus的“单行文字”和“多行文字”组件就可以轻松帮助实现。而且,适当的结合一定的交互设计,也可使整款设计更具吸引力。


结语

当然,层次结构化不仅能让网页更加直观清晰,赏心悦目。而且,具有一定局限性的Android 或iOS app,例如页面尺寸的限制,设备屏幕的限制,响应与否的限制等等,更需要清晰的层次结构,让页面摆脱混乱繁杂,吸引更多用户点击使用。而这方面,也同样适用以上所有设计技巧。


总之, 无论如何, 及时地将各种设计想法,通过一款实用且强大的原型工具(比如以上介绍到的Mockplus), 转化成直观可视的原型,更进一步的测试和迭代,才是创建真正美观实用,深受用户喜爱的web/app的必经之道。


总之,希望以上介绍的相关层次结构设计技巧和原型设计技巧能对你有所启发。



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

                                                            微信图片_20210513163802.png

 

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

 

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



UI设计师定制的UI设计配色技巧

seo达人


每当我看到一个漂亮,优雅并且简洁美观的界面,就会忍不住保存下来。现在,我已经收集了100多个美不胜收的UI 界面。在一次次观摩,欣赏和学习后,我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢?现在我找到了答案,是色彩。

本文中,结合自身经历,我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师,但是我保证,这些为你量身打造的UI 设计配色技巧,定会让你受益匪浅。

1. 色彩的魔力

色彩是会说话的,甚至可以像语言一样强大。回想以下,每当你初见一个网站或产品,给你留下第一印象的是什么呢?是视觉外观,而视觉外观很大程度上是取决于色彩运用。

那么,在UI设计中,色彩究竟可以做些什么?

1)反映品牌的内涵和品质

颜色可以为品牌设定基调。 CCICOLOR的一项研究表明,用户在评估一款在线商品时,只需花费短短90秒,而判断的依据高达62%至90%将取决于配色方案。

2)实现更佳的用户体验

色彩的有效运用能提升整体美感,提供更优的阅读体验,创造清晰和谐的风格。

3)影响购买决策

根据Kissmetrics的说法,产品的视觉外观是影响消费者购买决策的首要因素。此外,QuickSprout的研究也表明,90%的产品评估都与颜色有关。Neil Patel曾写到,“颜色在你购买特定产品的原因中占据85%的分量”。正因如此,颜色已成为当今重要的营销手段之一。

2. 色彩的基本概念

色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言,请看下表:


大图模式
点击此处添加图片说明文字

3. UI 设计配色技巧

1) 色彩使用也讲究“天时地利人和”

存在即合理,没有哪一个色彩本身就是丑陋和不具备美感的,只能说,如果我们错误的使用了色彩,那么它的美一旦被破坏,就只剩下丑陋和别扭了。

想象一下,如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色,你还对他们的炸鸡充满饥肠辘辘的感觉吗?女人喜欢穿着黑色礼服搭配鲜艳口红参加派对,为什么?因为这样会让她们看起来性感迷人。

不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢?这里请注意5点:选取合适的颜色,运用于合适的设计场景,注意时间变化,关注目标用户,明确想要达到的目的。

这里请认真查看上图,明确颜色的意义。但如果你非要冒险追求独一无二的设计,那么祝您好运。


大图模式
点击此处添加图片说明文字

2)留心蓝色

为什么专门谈蓝色?蓝色不是海洋天空的专属色,蓝色也是UI 设计的青睐色。


看看你常用的一些比较有名的APP或者网站,比如Facebook,Safari以及办公软件等等。有什么发现呢?是的,它们的界面都是蓝色,各种层次的蓝色。

有研究表明,蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在,大自然中,各网站的UI界面,服饰衣物等,蓝色随处可见。包括我此刻写入文章的Microsoft Word,界面也是蓝色的。

蓝色无疑是一种安全的颜色,它能最大程度上获得用户的信任并被广泛接受,蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择,请用蓝色。


大图模式
点击此处添加图片说明文字

3)背景色和元素之间的色彩变化技巧

看看以下的界面:


大图模式

(来源)

这里暂且不谈这又是关于蓝色的UI界面,让我们专注于它的色彩变化。主题颜色是蓝色,其他元素是较暗的蓝色和更明亮的蓝色。整体看上去,各层次的颜色平衡和谐且又脉络清晰。

怎么做到自然而又极具美感的色彩变化?

只是一个简单的黄金法则:通过降低亮度和增加饱和度可以使色彩变得更深;通过增加亮度和降低饱和度来使色彩变得更浅。

4)色彩组合的黄金比例——(6:3:1)规则

在设计时,色彩组合必不可免。组合颜色很容易,但组合后如何避免色彩混乱和累赘?如何既能够不显得单调又展示设计感?

记住二个原则:

第一个:6:3:1规则

60%+ 30%+ 10%的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉,并能提供更佳的用户体验,可以让用户的实现从一个点舒缓的移动到另一个点。

第二个:最多3个原色

这个规则与黄金(6:3:1)规则相匹配。这是避免混乱并保持平衡的最佳办法。


大图模式

5)颜色组合和互补

提供和谐的配色方案时,需要注意些什么?在这个过程中需要考虑以下方面:

第一, 色调

您可以在色环上生成单个“色度”的许多变体。通过添加白色,黑色和灰色来生成不同的色调。

实现平衡色调,最简单的方案是单色(单色)方案。

第二, 对比

颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度,比如黑色和白色。强烈的对比度可以让人集中精力,并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。


大图模式

注意:对比的使用不要过火,这样容易使用户产生困扰。

6)黑白色搭配不过时

黑色是所有中性色中最强的,而白色是最常用的背景颜色。黑色是一个很好的选择,有种高端和永恒的感觉,而白色可以带给用户自由,宽敞和透气的感觉。如上所述,黑色和白色也是最大的对比色,如果合理的使用黑色配合白色,会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。


大图模式

7)从自然和艺术中获得灵感

自然与艺术是灵感的主要源泉。抬头看看天空,你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美,非常自然,不带刻意的痕迹。而艺术是对自然的直接反映,是非常宝贵的资源,值得好好利用。


大图模式

8)颜色心理学 – 避免性别误区

或许天生如此,女人不喜欢灰色,橙色和棕色。她们钟爱蓝色,紫色和绿色。而男人不喜欢紫色,橙色和棕色。男人喜欢蓝色,绿色和黑色。只要记住,当你的产品目标用户群是男性时,选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩,结果可想而知。

还有一个误区,人们以为粉色是女性的喜爱,但结果也许会让你大跌眼镜。


大图模式

4. 工具和模板

这里我总结了一些有助于UI配色的工具和模板,希望对您有所帮助:

1)Coolors.co

Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板,还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。

2)Mockplus

Mockplus是一款非常方便的UI / UX设计工具,其启动页面加入了配色精美的示例项目和模板,可直接导入桌面客户端。其编辑器中,可对组件进行多样的色彩设置和编辑,内部也包含完整的颜色选择器,支持导入图片和GIF,如果您是要在原型设计过程中产出精美的UI 界面,Mockplus能满足您的需求。


大图模式

3)Paletton

Paletton有点类似于Kuler,但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时,Paletton将会是您很好的选择,它可以创建协同色彩组合工作,是强大的UI调色板。

4)Check my Color

Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具,也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。

5)Chinaz

该网站提供了丰富的配色资源,包括在线调色板,网页常用色彩,web安全色以及网页颜色选择器,会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。


注意:可用性是关键

创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验,为用户的生活增添快乐和幸福才是我们设计的目的。因此,在UI 设计配色上,每位UI设计师应该记住,界面应该是符合高度实用和并且清晰明了的。

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

                                                            微信图片_20210513163802.png

 

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

 

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

react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

前端达人

react全家桶从0到1(最新)

本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况。

代码库:https://github.com/teapot-py/react-demo

首先关于主要的npm包版本列一下:

  1. react@16.7.0
  2. webpack@4.28.4
  3. babel@7+
  4. react-router@4.3.1
  5. redux@4+

从webpack开始

思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的类型的目标文件。

这个过程就像是在一个迷宫里寻宝,我们从入口进入,同时我们也会不断的接收到下一处宝藏的提示信息,我们对信息进行解码,而解码的时候可能需要一些工具,比如说钥匙,而loader就像是这样的钥匙,然后得到我们可以识别的内容。

回到我们的项目,首先进行项目的初始化,分别执行如下命令

mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化 
  • 1
  • 2
  • 3

引入webpack

npm i webpack --save
touch webpack.config.js 
  • 1
  • 2

对webpack进行简单配置,更新webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定义输出目录
    filename: 'my-first-webpack.bundle.js'  // 定义输出文件名称
  }
}; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

更新package.json文件,在scripts中添加webpack执行命令

"scripts": {
  "dev": "./node_modules/.bin/webpack --config webpack.config.js"
} 
  • 1
  • 2
  • 3

如果有报错请按提示安装webpack-cli

npm i webpack-cli 
  • 1

执行webpack

npm run dev 
  • 1

如果在项目文件夹下生成了dist文件,说明我们的配置是没有问题的。

接入react

安装react相关包

npm install react react-dom --save 
  • 1

更新app.js入口文件

import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';

ReactDom.render(<App />, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5

创建目录 src/views/App,在App目录下,新建index.js文件作为App组件,index.js文件内容如下:

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div>App Container</div>);
    }
}
export default App; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在根目录下创建模板文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="root"></div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

到了这一步其实关于react的引入就OK了,不过目前还有很多问题没有解决

  1. 如何解析JS文件的代码?
  2. 如何将js文件加入模板文件中?

Babel解析js文件

Babel是一个工具链,主要用于在旧的浏览器或环境中将ECMAScript2015+的代码转换为向后兼容版本的JavaScript代码。

安装babel-loader,@babel/core,@babel/preset-env,@babel/preset-react

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D 
  • 1
  1. babel-loader:使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来讲就是webpack和babel中间层,允许webpack在遇到js文件时用bable来解析
  2. @babel/core:即babel-core,将ES6代码转换为ES5。7.0之后,包名升级为@babel/core。@babel相当于一种官方标记,和以前大家随便起名形成区别。
  3. @babel/preset-env:即babel-preset-env,根据您要支持的浏览器,决定使用哪些transformations / plugins 和 polyfills,例如为旧浏览器提供现代浏览器的新特性。
  4. @babel/preset-react:即 babel-preset-react,针对所有React插件的Babel预设,例如将JSX转换为函数.

更新webpack.config.js

 module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

根目录下创建并配置.babelrc文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
} 
  • 1
  • 2
  • 3

配置HtmlWebPackPlugin

这个插件最主要的作用是将js代码通过

npm i html-webpack-plugin -D 
  • 1

webpack新增HtmlWebPackPlugin配置

至此,我们看一下webpack.config.js文件的完整结构

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    })
  ]
}; 
  • 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

执行 npm run start,生成 dist文件夹

当前目录结构如下
目录结构

可以看到在dist文件加下生成了index.html文件,我们在浏览器中打开文件即可看到App组件内容。

配置 webpack-dev-server

webpack-dev-server可以极大的提高我们的开发效率,通过监听文件变化,自动更新页面

安装 webpack-dev-server 作为 dev 依赖项

npm i webpack-dev-server -D 
  • 1

更新package.json的启动脚本

“dev": "webpack-dev-server --config webpack.config.js --open" 
  • 1

webpack.config.js新增devServer配置

devServer: {
  hot: true, // 热替换
  contentBase: path.join(__dirname, 'dist'), // server文件的根目录
  compress: true, // 开启gzip
  port: 8080, // 端口
},
plugins: [
  new webpack.HotModuleReplacementPlugin(), // HMR允许在运行时更新各种模块,而无需进行完全刷新
  new HtmlWebPackPlugin({
    template: './index.html',
    filename: path.resolve(__dirname, 'dist/index.html')
  })
] 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

引入redux

redux是用于前端数据管理的包,避免因项目过大前端数据无法管理的问题,同时通过单项数据流管理前端的数据状态。

创建多个目录

  1. 新建src/actions目录,用于创建action函数
  2. 新建src/reducers目录,用于创建reducers
  3. 新建src/store目录,用于创建store

下面我们来通过redux实现一个计数器的功能

安装依赖

npm i redux react-redux -D 
  • 1

在actions文件夹下创建index.js文件

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
}; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在reducers文件夹下创建index.js文件

const initialState = {
  number: 0
};

const incrementReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT': {
      state.number += 1
      return { ...state }
      break
    };
    default: return state;
  }
};
export default incrementReducer; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

更新store.js

import { createStore } from 'redux';
import incrementReducer from './reducers/index';

const store = createStore(incrementReducer);

export default store; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

更新入口文件app.js

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

更新App组件

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    render() {
        return (
            <div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>

            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 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

点击旁边的数字会不断地+1

引入redux-saga

redux-saga通过监听action来执行有副作用的task,以保持action的简洁性。引入了sagas的机制和generator的特性,让redux-saga非常方便地处理复杂异步问题。
redux-saga的原理其实说起来也很简单,通过劫持异步action,在redux-saga中进行异步操作,异步结束后将结果传给另外的action。

下面就接着我们计数器的例子,来实现一个异步的+1操作。

安装依赖包

npm i redux-saga -D 
  • 1

新建src/sagas/index.js文件

import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(2000)
  yield put({ type: 'INCREMENT' })
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

解释下所做的事情,将watchIncrementAsync理解为一个saga,在这个saga中监听了名为INCREMENT_ASYNC的action,当INCREMENT_ASYNC被dispatch时,会调用incrementAsync方法,在该方法中做了异步操作,然后将结果传给名为INCREMENT的action进而更新store。

更新store.js

在store中加入redux-saga中间件

import { createStore, applyMiddleware } from 'redux';
import incrementReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga'
import { watchIncrementAsync } from './sagas/index'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchIncrementAsync)
export default store; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

更新App组件

在页面中新增异步提交按钮,观察异步结果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 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

观察结果我们会发现如下报错:

这是因为在redux-saga中用到了Generator函数,以我们目前的babel配置来说并不支持解析generator,需要安装@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime 
  • 1

这里关于babel-polyfill、和transfor-runtime做进一步解释

babel-polyfill

Babel默认只转换新的JavaScript语法,而不转换新的API。例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转译。如果想使用这些新的对象和方法,必须使用 babel-polyfill,为当前环境提供一个垫片。

babel-runtime

Babel转译后的代码要实现源代码同样的功能需要借助一些帮助函数,而这些帮助函数可能会重复出现在一些模块里,导致编译后的代码体积变大。
Babel 为了解决这个问题,提供了单独的包babel-runtime供编译模块复用工具函数。
在没有使用babel-runtime之前,库和工具包一般不会直接引入 polyfill。否则像Promise这样的全局对象会污染全局命名空间,这就要求库的使用者自己提供 polyfill。这些 polyfill一般在库和工具的使用说明中会提到,比如很多库都会有要求提供 es5的polyfill。
在使用babel-runtime后,库和工具只要在 package.json中增加依赖babel-runtime,交给babel-runtime去引入 polyfill 就行了;
详细解释可以参考

babel presets 和 plugins的区别

Babel插件一般尽可能拆成小的力度,开发者可以按需引进。比如对ES6转ES5的功能,Babel官方拆成了20+个插件。
这样的好处显而易见,既提高了性能,也提高了扩展性。比如开发者想要体验ES6的箭头函数特性,那他只需要引入transform-es2015-arrow-functions插件就可以,而不是加载ES6全家桶。
但很多时候,逐个插件引入的效率比较低下。比如在项目开发中,开发者想要将所有ES6的代码转成ES5,插件逐个引入的方式令人抓狂,不单费力,而且容易出错。
这个时候,可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。

更新.babelrc文件配置,支持genrator

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14


点击按钮会在2秒后执行+1操作。

引入react-router

在web应用开发中,路由系统是不可或缺的一部分。在浏览器当前的URL发生变化时,路由系统会做出一些响应,用来保证用户界面与URL的同步。随着单页应用时代的到来,为之服务的前端路由系统也相继出现了。而react-route则是与react相匹配的前端路由。

引入react-router-dom

npm install --save react-router-dom -D 
  • 1

更新app.js入口文件增加路由匹配规则

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const About = () => <h2>页面一</h2>;
const Users = () => <h2>页面二</h2>;

ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about/" component={About} />
                <Route path="/users/" component={Users} />
            </Switch>
        </Router>
    </Provider>
, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

更新App组件,展示路由效果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
import { Link } from "react-router-dom";

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>react-router 测试</div>
                <nav>
                    <ul>
                    <li>
                        <Link to="/about/">页面一</Link>
                    </li>
                    <li>
                        <Link to="/users/">页面二</Link>
                    </li>
                    </ul>
                </nav>

                <br/>
                <div>redux & redux-saga测试</div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 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


点击列表可以跳转相关路由

总结

至此,我们已经一步步的,完成了一个简单但是功能齐全的react项目的搭建,下面回顾一下我们做的工作

  1. 引入webpack
  2. 引入react
  3. 引入babel解析react
  4. 接入webpack-dev-server提高前端开发效率
  5. 引入redux实现一个increment功能
  6. 引入redux-saga实现异步处理
  7. 引入react-router实现前端路由

麻雀虽小,五脏俱全,希望通过最简单的代码快速的理解react工具链。其实这个小项目中还是很多不完善的地方,比如说样式的解析、Eslint检查、生产环境配置,虽然这几项是一个完整项目不可缺少的部分,但是就demo项目来说,对我们理解react工具链可能会有些干扰,所以就不在项目中加了。

后面会新建一个分支,把这些完整的功能都加上,同时也会对当前的目录结构进行优化。



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

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


部分借鉴自:csdn  作者:郑清

原文链接:

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档