首页

2021-02篇 | 产品设计细节剖析,让你看看大厂是如何做设计的

前端达人

2021年产品体验日记,小目标365节,第016~030节。

前言


在互联网产品日趋成熟的今天,APP同质化越来越严重,使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节,美观、可用和的界面设计都需要花费大量的时间从细节上去打磨,并从多方面钻研并创造出打动人心的UI/UE设计。





2021 | 第02篇分享目录(016~030


016.「QQ」手势力度决定页面展示范围

017.「高德地图」地点打卡-未来回忆曾经的足迹

018.「优酷」会员转化-击溃用户最后一道心理防线

019.「网易云音乐」播放中的歌曲快速定位

020.「boss直聘」多个入口-简化二次操作流程

021.「菜鸟」备注-快速找到列表中的包裹

022.「虾米音乐」符合产品特性气质的标签栏

023.「QQ音乐」触手可及的选择性MV播放

024.「微信读书」提升操作效率的进度条控制

025.「哔哩哔哩」信条-承包笑点的逆向弹幕

026.「淘宝」应对意外退出的通道

027.「微信」行为预判-提升操作效率

028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂

029.「京东」送礼物-更是一种神秘和惊喜

030.「叮咚买菜」一顿吃光-减少食材的浪费问题





016.「QQ」手势力度决定页面展示范围


产品体验:

QQ聊天的表情列表版块,系统会根据用户上滑的力度来确定表情选择区域的大小,力度越大,列表区域占比就越大,同屏可供选择的表情就越多。

设计思考:

经常使用QQ表情包的用户都知道,其更新频率非常快。比如社会上的最近发生的大事件、互联网当前流行的热词,甚至在疫情期间,凡是跟疫情相关的表情包都在不断变化,从开始的安全防护到后面的线上办公等,以至于深受广大用户的喜爱。

QQ的表情功能其中还有一个细节,用户在选择表情时,系统根据向上滑动的力度来确定表情区域所展示的范围。滑动的力度较大时,考虑到用户可能需要在更多的表情包中选择的情况,固增大显示的区域,便于用户在同一屏界面中可浏览的范围更大,同屏展示更多的表情包让用户在更短的时间内找到自己所需,所见即所得,对用户进行的定性操作十分友好,从细节处理方面提升了用户体验。





017.「高德地图」地点打卡-未来回忆曾经的足迹


产品体验:

在高德地图的足迹功能里,可以对我们所在的地点进行打卡,系统就会以亮光形式显示我们去过的城市,并留下“✔️️”标记,点击可以查看自己的打卡时间和具体位置。

设计思考:

我们在高压的生活下及忙碌的工作中,曾经去过很多地方游玩或者路过,随着时间不断的流逝,这些都成了模糊的记忆。当有一天静下心来细想,好想去过的地方很少,甚至回忆不起来。

高德地图APP的足迹打卡功能可以帮助我们记录所去过的每一个地方,分为自动和手动打卡。在设置中开启自动打卡后,当用户使用导航的目的地属于名胜古迹、美食地标建筑等类型的地点,导航结束后,即可自动完成打卡,如有特别需要,还可以通过手动打卡记录每一个点。打卡功能虽然在表面上并非用户硬性需求,但在未来的某个时间看到自己曾经的足迹时也略表欣慰,还可以满足部分用户的虚荣心,也许在无意间就能抚慰认为自己去过的地方太少、较为伤感的幼小心灵,给与温暖的安抚与力量。





018.「优酷」会员转化-击溃用户最后一道心理防线


产品体验:

优酷普通用户在看影片前面的广告时,倒计时后面会提示xxx元可关闭广告,广告下方通过展示会员特权以鼓励普通用户升级会员,且定时滚动展示刚刚已加入会员的文字提醒。

设计思考:

不管哪个影视平台,无论何种设备,非付费会员用户在看影片前都需要先经过长达几十秒的广告,这是任何人都无法避免的一堵墙,广告除了可盈利之外,还能起到激励普通用户开通付费会员的用处。

优酷视频激励普通用户开通会员的的手段可谓是拍案叫绝。

①、利益引诱:在广告倒计时的后面直接展示开通会员的金额, 通过优惠等利益刺激手段,吸引用户继续完成对产品的消费。较小的金额可以降低用户的经济成本,同时增加用户对会员价格的心理接受程度,减少其防备心理,有很大的几率吸引用户产生开通会员的动机,促使用户行动增强转化(除了首次开通连续付费业务,所付出的金钱成本较低外,其他情况下价格并无优惠,不过一旦让用户产生了付费动机,这些都是后话);

②  、增加说服力:  广告下方罗列了部分比较重要的会员功能,围绕开通会员后的特权并强调效果,以此证明会员内容的质量与真实性,吸引用户去了解,为用户增加开通会员驱动力;

③、羊群效应:提示****刚刚加入了会员,利用从众心理,因为用户的想法和行为容易受到周围人们的影响,往往会胜过自己的理性认知。通过前面的用户已做了前驱和后盾,不断的引导和刺激用户去开通会员(羊群效应在现实生活中遇到的很多。比如:大部分用户出去吃饭,对空无一人的饭店没有动力,往往会选择里面已经坐了一些人的店铺;走在外面,哪里围的人多,就想挤进去看个究竟)。





019.「网易云音乐」播放中的歌曲快速定位


产品体验:

在网易云音乐播放当前列表的歌曲后,当界面存在上下滑动的操作行为时,右下角会出现定位图标,点击可直接定位到正在播放的歌曲位置,如无任何操作,3秒后图标自动消失。

设计思考:

我们在听歌时,如果是无目标的行为,基本都会进入到某一个类型的列表或收藏歌单,进行顺序播放,比如飙升榜、新歌榜等。如果有兴趣,可能会在列表中上下滑动来看看是否有自己熟悉的歌曲,等最后要回到正在播放的歌曲位置时,就尴尬了,需要花费更多的时间来找到,在自己收藏的歌单中就更不用多说了。

网易云音乐在歌曲列表中增加了快速定位按钮,当系统检测到正在播放的歌曲列表中有滑动操作时,图标会自动出现,点击快速定位播放歌曲位置,方便快捷、省时省力。如果你的歌单中添加的歌曲太多,又无法找到播放的歌曲时,不妨试试右下角的定位按钮吧,此功能真的很人性化。





020.「boss直聘」多个入口-简化二次操作流程


产品体验:

在boss直聘求职关键词页面,单点复选框选中/取消,底部同时提供已选中关键词,可进行单个删除或通过左下方的清除按钮一键删除。

设计思考:

在用户的常规认知里,选项条件为数不多的复选框操作都是单点选中/取消,这种操作方式基本也成了用户的惯性思维,若站在用户体验角度深挖细节的话,即使是大众用户都认可,其实也没有最好,都还有上升的空间。

boss直聘的求职关键词选择,在这方面就做的更好,除了常规的单点选中/取消外,其底部还提供了已选中的关键词条,用户可在小范围内清楚的知道已选中的内容,让需求更加集中,便于进行统计、对比或删除等操作,避免在页面多个目标中寻找而增加时间成本。另外左下角还提供了清除按钮,需要重新选择目标的用户,可一键删除,节省了之前多次点击的重复步骤,简化二次操作流程。





021.「菜鸟」备注-快速找到列表中的包裹


产品体验:

菜鸟的包裹列表,左滑其中的一个,可通过包裹备注修改名称,方便用户在包裹较多时有目标的查看。

设计思考:

网购已成为用户的日常习惯,没事的时候淘宝逛一逛、京东走一走、不急用的就在拼多多砍一砍。但网购平台何其之多。我曾经碰到过这种情况,在不同的平台都买了商品,其中有急/不急用的。最为难熬的就是等待物流了,频繁的奔波于各大电商平台个人中心的订单页面查看最近物流状况,步骤繁琐不说,还浪费大量的时间,手机差的还会闪退卡顿,相信这也是很多网购用户的苦恼,直到菜鸟包裹的出现......

菜鸟定向的集合各大物流平台的包裹数据,通过手机号码,将单个用户的包裹归类到一个地方,非常方便。在使用过程中,还有一个很友好的设计细节,包裹名称备注。在包列表中,可选中其中的一个包裹左滑,对名称进行备注,便于用户包裹过多时需要对其中部分包较急的包裹进行频繁的查看,备注之后一目了然,能降低因误点造成重复操作的可能性,快速找到想要的包裹,方便用户有目标的查看。





022.「虾米音乐」符合产品特性气质的标签栏


产品体验:

虾米音乐顶部标签栏的选中状态,文字放大的同时配合一段起伏较大的音频波纹动效,彰显行业产品特性。

设计思考:

标签栏是APP界面中较为常见的控件之一,在视觉表现方面,只有选中、未选中两种状态,其设计也比较简单,通常会在文字颜色/字重大小上进行变化,标签下方加上小长条来区分两者的状态,用户对于这种表现方式也是高度认可的,如果不想被同质化,未在细节上下足功夫,就很难设计出彩。

虾米音乐的标签栏选中状态除了文字大小对比非常明显外,下方是一段音频波线动效,跳脱出较为常见的设计规范限制,从行业属性中获取灵感,把用户在现实世界中物理认知的“声波”形象来源作为产品特性,提取出具有独特气质的视觉音频波纹样式替代选中状态的小长条,这样能建立起视觉上的联系,让用户产生由内而外的一致感受,既有设计感又符合产品特征。





023.「QQ音乐」触手可及的选择性MV播放  


产品体验:

在QQ音乐播放页封面图的右下角,会显示该歌曲相关的视频数量,点击则展开视频列表,通过左右滑动选择想看的视频,可直接进入视频播放。

设计思考:

有人说:听音乐是一种情绪,也是一种心情,能从不同类型的音乐中听出共鸣,去发现一些事物的美好。当我们发现自己喜欢上一首歌曲时,有没有想打开该歌曲MV一睹演唱者的风采,或者边听边看去感受歌曲意境和内容所带来的一些理解上的辅助。

QQ音乐将歌曲的MV展示在播放页封面图片的右下角并提示数量,近在咫尺,便于用户在听歌的过程中对视频选择性的播放。一般音乐类型的应用在都是一首歌对应一个MV入口,需要先通过页面的跳转才能对视频进行选择,QQ音乐的这种交互路径能避免用户在听歌过程中选择视频时造成中断,通过左右滑动选择想看的视频,选中即可直接进入视频播放页,优化了操作路径,减少操作步骤,触手可及且不打断沉浸式的音乐享受。





024.「微信读书」提升操作效率的进度条控制


产品体验:

打开微信读书的进度控制条,点击游标左右滑动,除了页面内容变化外,进度条上方会显示当前页码/总页码,并提示章节及标题;长按游标可单独对书本的页码进行精准化的切换。

设计思考:

读书就是和世界各个行业的人物进行一对一交流的过程,如果想通过读书收获成长,就要靠自己看书、学习、思考,并把知识用到自己的工作和生活中,不断让自己做出改变,因此也诞生了很多读书类型的应用,线上看书不仅能适合多样化的环境,还能节省经济成本。曾经有人感慨,电子书是线性的,而纸质书是立体的,想看前面有联系的内容就可以随时返回去再读,而电子书只能通过目录和书签来解决,要经过多次的操作和页面的跳转,且书本的内容都是通过数据传输、每次都要刷页面才能看到内容,有可能会打扰用户看书的思路,相对纸质书籍,看书效率和吸收程度就低了许多。

其实并非全是如此,微信读书考虑到体验方面,针对用户在读书过程中可能出现的前后频繁翻页的问题,在进度条控制细节上做了很多便捷化的设计。用户可通过点击或长按控制条上游标,根据自己的实际需求进行前后长/短距离的滑动,就能轻松满足自己所需要的页面转,并伴随明显的小窗文字提醒。此功能相对纸质书籍虽然不能堪称完美,但足以解决用户线上读书时最基本的需求,让操作流程变的更加简单,大幅度的提升了操作效率,节约时间成本并提成产品的易用性。





025.「哔哩哔哩」信条-承包笑点的逆向弹幕


产品体验:

在哔哩哔哩看《信条》电影,播放到时间发生逆向片段时,弹幕的文字及方向也发生逆转,即逆向弹幕,两者结合在一起非常应景,网友几乎被“惊掉下巴”。

设计思考:

有很多用户喜欢开着弹幕看视频,弹幕有可能是视频内容的良好补充,大部分视频是不能牢牢抓住观众,也不需要观众死死盯着看的。各种神弹幕、刷屏本身就是内容的重要组成部分,所以看着弹幕可以给我们在看视频的过程中带来更好的氛围及愉悦的体验(部分不爱开弹幕的用户除外)。

最近被一个脑洞的弹幕方式吸引到了-逆向弹幕。B站在《信条》电影里隐藏了一个很有趣的彩蛋,正负时间线穿插(片头也逆向了)的情节发展,设计了让人惊艳的逆向弹幕,跟电影的逆向片段组合在一起时非常应景,神奇且趣味化的弹幕方式让用户几乎“惊掉下巴”,看完电影后仍能记忆犹新。有人直言“当时在电影院看完信条后,是不是倒着走出来,影院就把买票的钱给退了”。





026.「淘宝」应对意外退出的通道


产品体验:

在淘宝的其他功能页面发生闪退或意外结束应该进程时,再次进入首页,会提供“打开上次访问的页面”的快捷入口,如无需要,几秒后入口自动消失。

设计思考:

智能时代,每个人的手机中应该都装有不下几十个APP软件。当我们正沉浸在某个APP当的内容时,因设备或其他原因意外的结束了应用进程,当再次打开时,需要凭借自己的记忆多番操作才能回到原来的内容处,甚至永远无法找到,为此真的是很苦恼。

淘宝针对软件意外退出的情况则留了一手,当用户在使用过程中,APP因意外情况退出时,下次进入,可通过首页提供的“打开上次访问的页面”入口,快速回到原先失踪的页面,再也不用担心内容丢失了,看似一个简单的入口,但通过细微的改进能给用户带来更好的操控感和易用性,便于用户通过短时间记忆还原。





027.「微信」行为预判-提升操作效率


产品体验:

我们在手机的其他界面发生截图行为时,打开微信对话框的工具栏,系统会把刚刚截取的图片以缩略图的方式展示在右侧,暗示询问用户是否有发送此图片的需求,几秒后会自动消失。

设计思考:

我们不管使用何种应用,在交流过程中有发送图片的需求时,除了应用本身提供的图片之外,其他都绕不开系统相册功能。如若深究用户体验,进入相册的操作路径是可以减少的。

从微信对话框页面打开工具栏,如在相近的时间内系统检测到有截屏行为时,会把刚刚截取的图片以缩略图的方式展示在屏幕右侧,点击即可发送,通过行为感知并帮助用户解决可能有发送此图片的需求,提前预判用户的操作,以提升选择效率。若无此需求,几秒后自动消失,丝毫不影响用户的其他操作。





028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂


产品体验:

在抖音搜索较为极端且消极的关键词时,比如:抑郁、服毒、不想活了等,系统会出现较为温馨的爱心画面,并通过情感化的文案鼓励以及提供心理援助渠道,以此来提高用户的积极情绪。

设计思考:

人们通常会借助于欢乐、开心来表达自己的愉悦,同时也会面临悲伤、忧虑的情况,需要表达心中的苦闷。如果没有得到有效的疏解、排遣,使得内心一直处于郁闷状态无疑是很糟糕的。尤其是目前处于高度压力下的年前人群,在环境因素、心理与生理创伤、家庭环境等情况的影响下,导致一些人因为心中的苦闷,得不到很好地宣泄、发泄,走上了极端的想法,其解决问题的方式不管是线下、线上都是从心理上入手。

抖音APP在面对极端且消极的关键词搜索时,并非跟其他应用的搜索结果雷同,而是以情绪激励的统一样式展示结果。首先通过温馨的爱心画面缓解较为消极的用户情绪,并通过积极正向的文案鼓励用户;其次,基于用户在心情低落时要得到安慰或鼓励的需求,平台提供了心理援助热线以及消极心理的疏导建议,帮助用户进行缓解或改善消极行为。作为一个短视频平台,虽然没有明确的义务去抚慰用户,但这种做法可以用温暖的方式传递爱与力量,也抚慰每一个被情绪困扰过的灵魂,让用户感受到亲切放松的氛围,是巩固用户粘性与忠诚度十分巧妙的方式。





029.「京东」送礼物-更是一种神秘和惊喜


产品体验:

在京东商城购物礼物时,可以通过商品详情页的“送礼物给TA”,节省很多中间步骤,直接在线上完成包装、贺卡、寄语和快递等“一条龙”服务,将礼物送到对方手中。

设计思考:

部分用户在特殊情况下,都有送礼物的小习惯,不管是礼尚往来、男女朋友还是送基友,有时甚至不需要理由,只想把最好的东西送给TA们。这时候可能去会店里(线上/线下)买一个对方喜欢的东西,然后经过包装+寄语,再快递给对方,因为整个流程的复杂,有时候不可避免会出现一些突发性的状况,难免造成尴尬。

在京东APP购买礼物则省去了一些列的麻烦,只需要选好礼物,即可完成从包装、贺卡、寄语和快递等“一条龙”服务,免去不必要的麻烦以降低出错的可能性,将操作流程和路径都进行了简化,让整个送礼的过程更。通过选择合适礼物的包装风格,制造出礼物的神秘感,送出的不仅仅是礼物,更是一种浪漫和惊喜。





030.「叮咚买菜」一顿吃光-减少食材的浪费问题


产品体验:

在叮咚买菜分类的“一顿吃光”列表中,菜品会根据专业厨师建议一顿的常规用量进行组合搭配包装,包括分量较小的调味品类也进行了小份装的贴心组合,避免食材偏多造成浪费或损耗。

设计思考:

“一粥一饭,当思来之不易”,勤俭节约,珍惜粮食是我国的传统美德。随着互联网带来的便利,很多人足不出户便可在线上平台完成食材的购买,但买菜也存在的很多困扰,比如买少了不够吃,买多了又浪费,没有一个确切的方案可以让买的一顿食材刚刚好,因此会造成食材的浪费和更多的金钱成本。

叮咚买菜推出的“一顿吃光”栏目,用倡导勤俭节约的用餐理念与生活方式,筛选出用户经常购买的食材搭配,再根据专业厨师对食材配比,进行分量、包装及动态调整,以最大化满足消费者需求,减少食材的损耗,在很大程度上解决了买菜很难确定食材分量的问题,不仅让用户每餐都吃得新鲜健康的同时,尽可能地减少食物浪费。





结语:


设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。


本期产品设计细节分享结束,我们下期再见。




转自:站酷

作者:大漠飞鹰CYSJ


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

2020工作项目-小程序设计

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏



转自:站酷

作者:chuting97


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

mg动效练习

前端达人

mg动效练习

收藏
收藏
收藏



转自:站酷

作者:眼中英雄梦


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

体验度量专题|易用度在企业级中后台产品的探索和实践

分享达人

作为产品设计者,经常遇到一个备受灵魂拷问的问题:怎么衡量我们设计的产品,用户体验是过关的?

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


1. 中后台体验度量现状


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

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

我们做了一个内部调查,发现产品设计者经常容易遇到这些问题: 
  • 体验度量是一个绕不开的话题。天猫、阿里云、华为、京东都有尝试提出解决方案,但没有统一的衡量维度。 
  • 设计方案与产品的市场反馈,需要一个可以解释关联关系的抓手,这对迭代方向的指引至关重要。 
  • 产品团队逐渐重视用户用户,但缺乏有说服力的指标。 

业界在体验度量上的方案,大致分为 3 个派别: 
  • 客观衡量法:通过数据埋点监测用户行为数据。例如经典的 PULSE 模型,还有大家熟悉的运营指标,活跃用户数、留存率、ARPU、LTV等等。这对于还未商业化、用户基数少的产品不适用。 
  • 主观衡量法 收集用户主观打分。经典的满意度、尖叫度、NPS,可用性测试量表(如SUS),美国客户满意度指数ACSI。 
  • 主观+客观衡量法:把用户行为数据和主观打分结合起来,多数用归一化方式得出一个总分,把分数划分成不同档次作参考。Google 经典的 HEART 模型,内部 的 PTECH 模型,阿里云 QoUE 模型 ,华为云的用户体验模型。 

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


2. 易用度指标


易用度,英文 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指标,易用度的优势在于: 
  • 关注用户完成任务过程中的阻碍,重视基础体验; 
  • 适合去度量特定的用户接触点和任务流程,以便了解用户解决问题的难易程度。 
劣势在于: 
  • 对于分数过高或过低的情况,没有通用的基线,需要区分行业、产品类型、产品复杂度来衡量分数是否合格; 
  • 侧重基本体验,无法衡量用户的总体满意度。 



3. 易用度基线


经过半年的实践,我们采集了 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阶段)也会有所差异。 
  • 结合行为数据,易用度可以进行描述、分类。使用现状描述找出低分人群的高频问题,使用对比差异找到多角色的不同诉求,分析影响关系找到影响易用度的主要因素,结合用户行为数据进行聚类找到典型人群。


    文章来源:站酷  作者:Ant_Design

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

如何构建品牌体系?网易智企品牌体系化建设实录

雪涛

导读

品牌体系的长期价值是什么?如何构建完整品牌体系?

本文将以网易智企品牌设计体系的建立过程为案例,与大家分享一下品牌体系化过程中的经验和总结。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智企-品牌设计体系

目录

  • 背景:从产品走向事业部
  • 研究:品牌体系的不同构建方式
  • 策略:选择合适的品牌体系构建策略
  • 设计:从品牌字体到框架规范
  • 标准化:设计文档与流程规范化
  • 推进:发起会议正式确立体系
  • 成长:体系的不断自我成长
  • 传承:网易品牌设计
  • 生态:品牌体系的长期价值
  • 资料获取

背景:从产品走向事业部

网易智企是一站式企业服务提供商,依托 23 年 AI、大数据、通讯音视频技术,以 PaaS、SaaS 为主,提供智能化、数据化、场景化的企业服务解决方案。

网易智企的前身,是网易云信和网易七鱼两个的产品。2019 年初,网易集团决定整合 B 端资源,成立一个新的事业部——网易智企,并在此之后陆续打造了网易定位、网易互客等多个优秀产品。

至此,网易智企的品牌架构由两个独立的产品品牌,逐渐变成了事业部品牌+多个子品牌的品牌架构。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

但是,因为原有的两个品牌(即云信、七鱼)已经运营多年,在设计上并不统一。而事业部品牌为新设计的品牌,再加上其他的子品牌,最终造成了多个品牌在设计上“各自为政”的现状。

并且随着网易智企的快速发展,子品牌不断的变多,我们与市场部同学便逐渐发现了一些问题。下图是市场部同事在 2019 年发表在朋友圈的一张图,便是当时品牌的现状。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智慧企业现状(2019 年初)

虽然产品线愈发丰富,整个事业部也在不断成长中。但是,若是品牌设计体系不够清晰,将会对未来的品牌传播造成非常多的问题,之后的修正成本也会越来越高。

如何改变现状?我们是否能够主动去推动事业部进行整体的品牌升级?能否通过设计去构建一个完整的体系,以满足网易智企未来的发展需要?

因此,在发现这个问题后,我们便马上开始了品牌设计体系的构建工作。结合之前的品牌经验,并在查阅大量资料进行研究后,逐步制定了完整的解决方案。之后与市场部同学一起合作,共同推进了品牌体系的构建与落地工作。

研究:品牌体系的不同构建方式

在企业的成长过程中,随着业务的不断拓展,自然而然地会产生越来越多的子品牌。在这个过程中,许多优秀的企业通过长期的实践,通过不同的方式,逐步构建了属于自己的品牌体系。比如联合利华、大众企业集团、苹果、雀巢、谷歌等等。

品牌体系一共有哪些构建方式?他们分别适用于哪种情况?而我们又应该用何种方式去构建品牌体系呢?

带着这些问题,我开始进行了品牌体系构建的研究。通过大量的案例分析与调研,我总结了以下几种最常用的品牌体系构建方式:

1. Free Standing 自由家庭式

自由家庭式,顾名思义,一切皆为 Free Style。子品牌与母品牌几乎无关联系性,完全自由地进行各自发展,因此品牌在设计上和基本毫无关联性。

这种品牌模式,通常适用于强子品牌战略的集团公司。不同的子品牌之间并无依存关系,也不需依靠其他子品牌、母品牌进行背书。而是各自在领域中独立运营,甚至形成差异化竞争,以扩大在单领域的品牌丰富程度,占据更大的市场份额。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Free Standing 自由家庭式

比如联合利华集团,所有子品牌几乎均采用自由家庭式,在不同的细分领域拥有多个子品牌。比如个人护理用品领域,主要品牌有旁氏、多芬、Iluminage、卡玫尔、清扬、凌仕、中华、力士、夏士莲、舒耐、凡士林等。食品系列品牌有家乐、老蔡、立顿、四季宝、净水宝、可爱多、梦龙、和路雪等品牌。

很多品牌你甚至意想不到这是出自联合利华之手(或者被收购了),但仔细查看产品介绍,均会发现联合利华的身影。而在产品广告的最后 1 秒,也会快速出现联合利华这个“爸爸”的身影 。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 联合利华集团-品牌体系

再比如 VOLKSWAGEN(大众汽车集团),所有子品牌也均采用自由家庭式。旗下有奥迪、斯柯达、宾利、西雅特、布加迪、保时捷、兰博基尼、大众、斯堪尼亚、杜卡迪等众多子品牌。通过差异化竞争,在汽车行业的不同领域(家用车、豪华车、摩托车、重型卡车、巴士等)的不同级别中,均占据了不错的份额。

面对不同的消费群体和阶层,品牌需要承载不同的品牌概念,解决不同的问题。因此,只有采用自由式家庭式的品牌家庭,才能在不同的领域中有针对性地进行品牌的建设。

当然,这种方式也具有一定的负面作用。如果当两个子品牌在同一领域重叠性较大时,容易导致品牌在“内部竞争”中逐渐弱化,比如斯柯达汽车的定位与大众汽车重叠性过大,定位区分不明显,而与大众的三大件又是相同的,因此逐渐在市场中被边缘化。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 大众汽车集团-品牌体系

我们可以总结一下自由家庭式品牌体系的优劣势。

优势:

  • 子品牌更灵活,更有利于差异化竞争。
  • 可以针对同一行业进行不同层次的用户获取,提升单品类占有率。
  • 子品牌危机,对母品牌营销较小。

劣势:

  • 品牌一致性差,用户难以感知整体品牌感,不适合弱子品牌型企业。
  • 用户难以形成整体品牌归属感,无法通过母品牌进行有效地用户迁移。
2. Gene Delivery 基因家庭式

基因家庭式,即母品牌与子品牌拥有部分相同的元素或风格特征,并通常具有延续性,而这种元素被称为品牌基因。

基因家庭式是品牌体系中最为常见的表现方式,它通常适用于强母品牌的集团企业。此类公司通常在母品牌发展成熟后,基于母品牌进行其他领域的拓展,逐渐形成不同的子品牌。因此,子品牌需要延续母品牌的基因作为背书,从而提升子品牌的知名度与信誉。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Gene Delivery 基因家庭式

而基因家庭式这个大的方向中,按照基因传递的方式进行细分,又可以归纳为以下 3 种最典型的形式:

基础版:将母品牌图形直接融入到子品牌中

比如雀巢公司的部分重要子品牌中,都将母品牌的品牌文字融入到品牌图形中,而这也是雀巢母品牌最容易识别的部分。

通过这种方式,子品牌既保持了相当程度的自由度,同时用户也能直观地通过品牌基因识别出子品牌与雀巢母品牌的关联性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 雀巢公司-品牌体系

以及美国联邦快递 FedEx,则是以母品牌为基础,通过改变局部颜色、增加品牌文字等方式来构建其不同的子品牌。保证了一定的差异化的同时,与母品牌形成了强关联,达到了比较强品牌延续性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 美国联邦快递-品牌体系

进阶版:提取母品牌关键特征,融入子品牌中

比如亚马逊公司,将其标志性的“箭头笑脸”提取出来,与各自不同的子品牌字体组成了新的品牌。这种方式相对于基础版又提高了更高的灵活性,但同时也保持了相当程度的品牌延续性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 亚马逊-品牌体系

高阶版:提取母品牌基因,通过重构形成子品牌

比如 google 公司的新品牌与其各子产品的关系。通过提取统一的颜色以及扁平化的纸片效果,经过重组以后得到不同的图形,形成自由度极高,但又拥有高度统一性的品牌体系。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Google-品牌体系

但是,这种方式在设计上的要求较高。如何在差异化的同时,保持一定的品牌关联性,需要非常精准的把控。

我们可以总结一下基因家庭式品牌体系的优劣势。

优势:

  • 整体品牌感强,用户容易进行感知,并进行品牌迁移
  • 灵活性、丰富性较高,可针对不同产品进行差异化设计
  • 扩展性强,后期延续更轻松

劣势:

  • 需要母品牌有较强的影响力
  • 品牌基因的延续上,需要平衡统一性与差异性,需要精准把控
3. Clone Family 克隆家庭式

克隆家庭式,即子品牌直接使用母品牌的品牌图形与品牌字体。子品牌通常与母品牌在品牌上毫无差异,或者保持图形、颜色、字体等特征的高度统一性,只进行文字内容的更换。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Clone Family 克隆家庭式

比如苹果公司与其所有子产品的品牌,直接沿用苹果的主图形,并配合统一的色值、字体、间距等品牌规范,仅在文字进行相应的命名。通过几乎一致的品牌表现,当你识别任何一个子品牌时,便能感受几乎一致的品牌传递,甚至是各种细节,比如包装风格、说明书等等。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ Apple-品牌体系

当然,严格意义上来说,你可以认为他们只是同一个品牌。但当一个单一属性的品牌需要扩张到更多品类时,就必须带上相应的属性。你可以认为“iPhone”、“MacBook”、“TV”只是品牌的附加说明,但当他们组合在一起并出现在新的品类中时,便是一个新品牌的概念了。

这种品牌体系通常适用于企业在同一个的领域中,开拓不同的细分领域。他们传递的品牌概念与价格定位是一致的,比如苹果的所有产品都代表科技感、细节完美、设计精良,在价格上也通常占据比较高的层级。

但是,这种方式也具有一定的局限性。因为你必须保证所有子品牌所传递的上述所有特性,都与母品牌是一致的。如果某一项有差异,则品牌母品牌所蕴含的一切将不能被子品牌的用户群体所接受,这也是当时 iPhone 4C、5C 失败的原因。当你的价格定位与母品牌存在差异时,你的用户便不再认同这个子品牌,以及背后传递的一切。

为什么小米要开拓红米系列、华为要开拓出荣耀系列,为了他们放弃克隆家庭式而转向自由家庭式?就是这个道理——你不可能靠一个品牌传递不同的声音。

我们可以总结一下克隆家庭式品牌体系的优劣势。

优势:

  • 统一感强,用户无需更多的记忆,可直接进行品牌印象迁移
  • 低成本,可以无需更多的设计与推广活动

劣势:

  • 同一种品牌图形,不一定适合不同的产品
  • 缺乏变化,用户难以感知与产品间的关联
  • 容易引起品牌层级的混乱,致使整个品牌家庭崩溃

策略:选择合适的品牌体系策略

1. 确定策略

通过网易智企品牌现状的分析,并结合智企未来的发展需要,我们最终确定——使用基因家庭式-进阶版(即提取母品牌的关键特征,融入到子品牌中)的品牌体系是最为合适的。因为这种方式既能保证品牌设计的整体统一性,又能保持足够的灵活性,以适应不同品牌的需要。

但是,提取什么样的品牌基因是最合适的?

网易七鱼、网易云信原本就拥有多年的产品历史,如果只提取一方的基因,显然不太合适。如果大改品牌图形,则会对原有用户的认知产生较大影响,并不是一个理想选择。

最终,我们决定了一个大胆品牌策略——以品牌字体作为品牌基因的承载物,并通过标准化的框架规范使品牌的整体一致性得到的统一。通过这种方式,也可以将品牌图形的自主设计权留给子品牌。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

这种品牌策略的主要优势有:

整体品牌感强,品牌基因容易延续。

后续可将品牌设计流程标准化,提升设计与一致性。

原有品牌可只升级品牌字体和框架规范,保持原有品牌图形,从而不影响用户认知。

通过这种方式,我们可以对原有的网易七鱼、网易云信,以及网易智企的品牌做一个统一的升级,小幅优化品牌图形、统一品牌结构,并以全新的字体风格重构品牌字体。这样,我们既能够达到设定的目标,又能够最小程度的对品牌认知造成影响。

2. 可行性调研分析

这种构建策略是否可行?想要让相关人员理解这个策略,仅仅依靠设计方案是不够的。因为大家的视角不同,并不一定能够从设计的角度去理解。因此,我们必然要充分地进行论证,并拿出相关的案例去佐证,才能让设计体系的的推进更具实践性。

通过市场调研,我们分析了最近 10 年中优秀的品牌升级案例。在这其中,腾讯的品牌升级案例与我们的策略非常契合。

2017 年 11 月,为庆祝即将到来的 20 周年,腾讯发布了一款新字体——“腾讯字库”,并借此机会对部分品牌进行了升级,以此来加强整体品牌感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通过发布全新的品牌字体,腾讯公司构建了以品牌字体为核心的品牌体系,并取得了良好的效果。而这种品牌体系的构建方式,与我们的设想不谋而合。

因此,我们认为以品牌字体为核心的品牌体系构建策略是完全可行的。但是,这种方式所需要投入的资源是巨大的,且周期通常比较漫长。

我们又如何克服这个问题?

虽然无法得到如此多的资源,但我们可以通过合理的计划与推进策略,逐步去构建整个体系。不断地进行策划、构建、落地、完善,形成一个完整的闭环,通过不断实践去提升、丰富这个体系,最终让这个体系变得越来越完整。

确定策略之后,我们开始着手进行品牌体系的构建工作。

构建:从品牌字体到框架规范

1.  品牌字体设计

品牌设计体系的构想虽始于 2019 年初,但真正的准备工作则始于两年前。在我刚接触网易七鱼和网易云信时,便发现了品牌中存在的一些问题。虽然没有合适的时机进行品牌升级,但研究和尝试则不断地进行中。

在此期间,我开始着手设计一款全新的专属字体,也就是之后的网易 B 端产品的统一品牌字体。

通过对于网易智企品牌调性的分析,以及未来发展的需要,我确定了品牌字体的基本调性:现代、简约、刚正、大气、品牌基因的融入。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

作为科技类企业品牌的字体,它应该是有现代感和设计感。其次,为了适应不同的产品调性,同时传递出信任感,我希望它是刚正、大气的。最后,作为品牌体系的载体,它必须具备专属的品牌特征,才能以此为基础形成统一的品牌体系。

因此,在字形的结构上采用了较为刚正的框架,干脆利落的同时,在转角带有一定的弧度。方中带圆,刚中带柔,形成美学上的互补。而在遵从中文字体结构的同时,也对笔画本身进行了适当的简化(比如勾,用切割式的笔画代替上勾,但感知上仍然是勾),让字体更具现代感与简洁感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

而整个字体的灵魂,则是将网易的特征以笔画特征的形势融入字体中。贯穿始终、恰到好处,使其作为统一的品牌基因延续在品牌家庭中。

网易的建筑风格在所有公司的大楼中,都是属于非常有识别性的。除了深邃而低调的色彩外,整个建筑从外形到地板、再到每个细节中,都将拥有独特切角的菱形融入其中。因此,我将这独有的菱形的四个边单独拆分,作为字体的基本笔画。通过简单的移动,四个边正好形成了网易的首字母“W”。继续移动,将其从两边的翅膀往中间压,则形成了一个网状的 XX 形状——这不正是网字中间的图形吗?

网易建筑风格——网易的“W”——网易的“网”,网易的基因就这样融入到字体中。而另一个更重要的特征,则是这四个笔画与水平线相交,所呈现的统一倾斜角度——80度切角。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

2. 初步制定框架规范,预先进行品牌升级

完成字体风格的定义后,下一步就是以品牌字体为核心,进行原有 2 个品牌升级的方案设计。

首先进行的是网易云信的品牌预升级。将网易云信的品牌字体以全新的字体风格进行重新绘制,并结合品牌图形制定了全新的品牌框架。比如品牌图形与品牌字体的间距,确定为字体高度的 1/2,而安全距离则定义为与字体高度相等间距等一系列规范。

通过初步的框架制定,一套围绕着品牌字体的初步规范便制定完成了。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

完成云信的品牌预升级后,又进行了网易七鱼的品牌预升级。因为原有的品牌图形存在一定的优化空间,除了品牌字体重新绘制与标准规范外,还对品牌图形和品牌色做了升级,让品牌图形保持原有识别性的基础上,更加圆润、灵动,颜色也更具科技感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通过两个品牌的预升级,除了初步对整体框架规范进行了制定,也对品牌字体的品质和实用性也得到了良好的验证,为接下来品牌升级工作的推进奠定了一个比较好的基础。

标准化:设计文档与流程规范化

1. VI 设计文档

品牌设计不仅仅是完成图形的设计,更重要的是使品牌在后续使用中更加规范,而品牌 VI 识别系统是其中最重要的工具。文档的初衷并非约束设计,而是使品牌设计的流程更加标准化,提升非关键环节的工作效率,让设计师将时间真正聚焦于的品牌创意阶段。

因此,我们制定了适用于不同场景的 VI 设计标准文档。整个文档的设计准则:一致性(整体框架、页面结构高度一致)、专业性(文字表述、规范演示高度专业)、灵活性(允许在框架中的寻求灵活创新)。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

封面样式:推荐的默认为标准品牌色+Logo 图形样式,除此之外还提供了背景图,在保持框架一致的基础上,也具备了一定的灵活性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 封面样式

目录样式:提供基础版的 2 个模块版式和 3 个模块的版式

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 目录样式

内容框架:文字说明的区域与版式,内容区域的不同分割模式,尽可能地适应不同的内容需求。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 内容框架

2. 品牌展示规范

在品牌的传播和使用中,VI 识别手册相对专业性会更强一些,而在平时的展示中,更多的会进行单独的品牌展示。因此,我们也为此制定了不同场景下品牌的单独展示规范,以及在标准尺寸(1920×1080)下的页面布局、图形显示比例等规范。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 品牌图形单独展示

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 横式标准组合

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 竖式标准组合

3. 为新品牌制定 VI 系统

完成标准化的 VI 设计文档后,下一步便开始着手进行新品牌的 VI 识别手册的设计工作。按照我们已经制定完成的设计文档,品牌 VI 识别规范的输出效率得到了较大的提升。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易云信-VI 视觉识别系统

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易七鱼-VI 视觉识别系统

最终,我们完成了两个品牌的 VI 视觉识别系统,为后续的体系化推进做好充分的准备。

推进:发起会议正式确立体系

通过全新品牌字体与品牌规范的确立,并完成了 2 个品牌升级、1 个新品牌设计以后,我们将完整所有的准备工作整理成一个完整的提案。

下一步,就可以发起正式的品牌升级研讨会了。会议目的是通过整体的背景分析与方案呈现,让各相关方都能够达成一致意见,最终完成正式的品牌体系落地。

1. 提前与关键相关方沟通,对齐目标

在准备好充足的方案后,如何推进并最终落地?

这是非常关键的一步,也是许多设计师比较不擅长的领域。想要顺利的推进项目,光靠一个好的解决方案是不够的,还需要在正确的时间点,寻求各相关方的支持。

因此,首先就需要了解各相关方对于品牌现状的看法,并通过现状的分析,初步对齐我们的“项目目标”——即解决长期的品牌混乱问题,而这也是我解决问题的初衷。只有对齐了目标,我们才能站在共同的出发点,并在合适的事件抛出解决方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

下图是当时与其中一个市场侧关键相关方沟通的过程。当我们分析完目前的现状后,相关方对目前的现状表示认可,并期待解决方案。这个时候,我们再将已经成熟的方案展示出来,才能让相关方站在同一角度去思考问题,并最终认可解决方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

之后,我以相同的方式询问起产品侧和其他侧的相关方。大家在对齐目标以后,都有一个比较清晰的认知,也对我提出的解决方案非常认可。这时候,我们的项目便有了进一步推进的基础。

2. 发起会议,正式推出方案

通过提前的沟通,确定了各相关方的态度,同时了收集了一些小小的意见,并对方案进行了微调。之后便与各相关方正式地发起了品牌升级会议。下面是这次会议的简要过程:

会议开始后,我们首先进行背景分析。

为什么需要进行品牌升级?简要分析 2019 年初智慧企业的品牌现状,以及智慧企业未来的品牌发展方向:整体品牌感弱,品牌一致性过差,无法满足智慧企业长期的发展需要。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

同时,我们也对目前现有的品牌设计进行分析,发现了较多的问题。比如品牌字体的风格不统一、比例不一致、色值不统一等问题。而这些问题可以也可以通过品牌升级进行解决。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最后,随着网易智企的快速发展,智慧企业的子品牌会越来越多,而品牌联合推广的频次将会越来越高。这意味着品牌 Logo 设计混乱的现状将会产生越来越大的影响力,而我们的修正成本将会越来越高。

为了解决这几个方面的问题,我们推出了最终解决方案——进行品牌升级,并建立网易智企品牌设计体系。

如何建立品牌体系?

通过策略分析与市场调研,以及未来网易智企发展的前瞻性思考,我们最终确定使用基因家庭式-进阶版的品牌体系是最为合适的,即提取母品牌的关键特征,融入到子品牌中。通过这种方式,我们对网易七鱼与网易云信进行了整体的品牌升级,并为所有新品牌制定了详细的 VI 识别系统。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 品牌升级会议 PPT

如何构建品牌体系?来看网易智企品牌体系化建设实录!

经过这套完整的方案阐述,大家在会议中一致通过了网易七鱼和网易云信品牌升级的方案,并对以品牌字体+品牌规范为核心的品牌设计体系表达了正式认可。

3. 以规范对事业部 Logo 进行升级

品牌设计体系经过各方认可以后,推进主品牌的升级就轻松多了。由于原有事业部的品牌字体和品牌色存在一定的设计问题,在确定了品牌体系的标准字体与规范后,我们便顺势对事业部的品牌进行升级。

当一个体系被认可后,遵循这个体系就变成了理所应当。因此,网易智企主品牌升级的工作也得到大家的认同,并顺利推进下去。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

之后,我们同样为网易智慧企业主品牌制定了详细的 VI 识别系统。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

△ 网易智慧企业-VI 视觉识别系统

至此,我们已经完成了现有的主品牌进行了整体的升级,网易智企的品牌矩阵已经初步形成。对比原有的品牌矩阵,整体品牌感得到了极大地提升。同时,也将会对之后的新品牌形成良好的规范,并促使这个体系不断地成长。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

4. 发送邮件,全员通知并规范使用

通过会议并得到各相关方确认后,最后一步便是发送正式的品牌升级邮件了。

通过发送邮件,正式宣布品牌升级,并通知每一个关键相关方。这就相当于合同的最后一步,整体体系便正式地得到了确认、生效。同时也将 VI 手册和设计文档同步给大家,引导各方正确地进行品牌使用。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

成长:体系的不断自我生长

1. 不断丰富的品牌矩阵

随着网易智企的快速发展,我们的品牌也逐渐增多。从 2019 年初进行品牌预升级,到 2019 年底,我们一共推动了 4 个产品进行品牌升级,并以新的规范进行了 4 个新品牌的设计。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

有了品牌设计体系后,大家对品牌设计的态度也发生了明显的改变。

每当有新的产品需要进行品牌设计时,大家便会自觉地去遵循这个体系——“按照品牌体系的标准设计即可”。“我们只需要按照体系来就行了,剩下的图形创意工作就交给你们了”。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

在此之后的每个新品牌设计,我们都按照标准化的设计流程进行,将重点的工作投入在图形的创意上,而不是反复地去尝试各种风格。我们的品牌设计效率得到了极大的提升,而各方对于品牌方案的确定也变得顺利多了,因为大家只需要判断图形是否符合产品特点即可,无需反复对比各种品牌风格。

2. 英文品牌规范的加入

随着品牌设计体系的不断发展,我们的品牌将不仅仅局限于中文,也会涉及到单独的英文品牌。经过我们的长期实践,英文品牌规范应运而生。

MCtalk 是网易发起,由网易智慧企业部主导的科技活动品牌:通过汇聚深度思维(Mind) 和顶尖创意(Creativity)来打造价值集合与传递的平台。包含 MCtalk Forum 论坛、MCtalk Conference 峰会、MCtalk Live 分享、MCtalk Park 开放日和 MCtalk Academy 私享会等系列活动。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

3. 周年数字品牌规范

随着不同产品线周年庆,许多品牌会设计专属的周年组合样式。为了因为不同周年 Logo 而影响产品统一性,同时减少了不必要的工作,我们设计了品牌+数字周年的品牌规范。

每个品牌都可以应用统一的周年组合形式。让不同品牌在周年组合中,也能拥有统一的品牌感。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

但是,周年品牌规范的统一,并不意味着每个活动独特性的缺失。我们仍旧可以围绕数字+主题发挥出强有力的创意,为每次活动创造丰富的主视觉。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

传承:网易云商品牌设计

随着品牌设计体系的设计规范与标准化文档已经逐步成型,这份文档可能会发送给许多设计师进行使用。但是,具体设计时,许多设计师可能会产生一些疑问,导致字体设计、图形设计上面会出现问题。

那么,如何使用这份框架规范,正确地进行品牌设计呢?下面,我将以网易云商的品牌设计过程为例,大致演示一下这个流程。

1. 品牌字体设计

品牌字体的设计,我们在文档中给出了统一的字体风格,以及目前已经设计完成的品牌字体。如果字体已经存在,则可以直接获取,无需重复设计。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

比如网易云商的品牌字体中,“网“”易”“云”三个字已经出现过,则直接取用,根据规范进行“商”字的设计即可。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

字体的设计,大概有三个步骤:

确定字体的骨架:字体设计,首先要保证字形的结构准确,遵循汉字的书写规律。否则,将会影响字体的易读性,让字体看起来不够自然。这一步,推荐多去借鉴已有的一些优秀字体,网易正体的字形结构,参照了“方正正中黑简体”和“黑体”这两个字体,在设计时可以先研究相同字形的笔画结构。

融入品牌基因:品牌基因,包含了横线末端 80 度切角,折角处的圆角,勾、点的简化处理等统一风格。同时,笔画带有细微的圆角,使字体本身刚而不锐。

整体调整,细节优化:最后一步,则需要凭借字体设计经验,对笔画进行优化,使其遵循字形结构的前提下,更严谨、更具设计感。这一步,若没有相关经验,建议与我或者有字体经验的设计师进行探讨。每个字体力求严谨、优美、更有设计感,以便未来其他设计师使用。

2. 品牌图形设计

品牌图形的设计,是品牌设计中最为关键的一个部分。设计师需要在契合品牌理念的基础上,设计出最符合需求的品牌图形。也需要让品牌图形在风格上保持相对一致。

在网易智企品牌体系中,推荐以平面化的图形进行品牌设计。这样能够保证图形足够简洁,并适应不同的场景使用。同时,品牌图形应尽可能地与母品牌保证一定传承、关联性。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

通常情况下,设计师需要在充分理解概念的基础上,进行多个方向的尝试。最终逐渐缩小范围,直至最终方案的确定。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

网易云商的核心概念是,成为企业的商业增长服务平台。因此,“增长”这个概念应该贯穿于品牌图形中。而云商的产品皆为 SaaS 产品,而“商”的首字母是“S”,因此,S 也成为云商的一个标志之一。云商的目标,希望打通企业营销全链路,因此,全链路也成为附属的概念之一。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

因此,整个品牌图形呈现的是一个向上增长的字母“S”,它像火箭一样向上发射。而整个图形,则由三段线条构成流畅的“S”线条,寓意三个品牌所形成“营销全链路”的概念。

为了让整个图形更严谨、细节更完善,在大致确定品牌图形后,设计师还需要巧妙地通过辅助线,去完善和优化整个品牌图形。为了避免切角过于尖锐,也同样在转角处加入了细微的圆角,使其优雅而柔和,并且更好地与品牌字体相契合。

3. 品牌基因的延续

网易云商是网易智企旗下的商业增长服务平台, 旗下包含网易七鱼、网易定位、网易互客三大产品。因此,品牌的传承性显得尤为重要,如何巧妙地表现出其中的关联性,是品牌图形能否承载更多含义的关键。

在品牌图形的风格中,网易云商的图形使用了与网易智企相同的线形风格。同时,线条的倾斜角度,也延续了网易智企品牌图形的 25 度倾斜。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

在品牌图形本身,则巧妙地融入原有的 3 个子品牌特征。比如线条末端传承了七鱼的鱼形尾部,上下两个线条传承了互客的“互手相连”图形,而线条前部的尖角则传承了定位“精准尖头”的图形。

虽然这三个原有的品牌,之后将逐渐融合成新的品牌。但是,它们并没有消失,而是以另一种方式进行了延续。有延续、有情感、有温度,才能让用户更有记忆度,也更能让陪伴了这么多年的图形有一个精神的传承。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

同时,整个图形又像一个 DNA 双螺旋基因,互相环绕增长。寓意网易云商,将成为企业的增长基因这一概念。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最后,通过统一的品牌框架规范,将品牌图形与品牌字体进行结合,形成了最终的完整方案。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

4. 制作完整品牌 VI 识别系统

最后一步,便是按照 VI 标准文档,快速进行品牌 VI 识别手册的设计。标准文档中已经覆盖了基础的品牌使用规范,如果需要增加规范,可以按照相同的版式进行手册内容的新增。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

生态:品牌体系的长期价值

随着更多品牌的加入,品牌设计体系的大家族也变得愈发丰富了。我们不仅获得了一个高度体系化的品牌矩阵,同时也形成了一套更、更规范的企业品牌设计流程。并且,随着我们的影响力不断扩大,逐渐也吸引了更多品牌加入到这个体系中…

1. 自我成长的字体库——网易正体

在每次新品牌设计的过程中,都会遵循统一的字体风格进行新字体的绘制,品牌字库也因此不断丰富。我们希望它最终将成长为一款完整的品牌字体,并对其进行了正式的命名——网易正体。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

我们并不刻意去“生产”字体,而是让其自然地随着新品牌的加入不断的成长。

需要说明的是,虽然我们将字体的设计权交给设计师,但我们仍旧会对每个字体进行评审。除了字体风格的统一之外,我们对字体本身的基本要求也同样严格,比如字形结构的正确性、字体美感是否达到标准等。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

随着品牌体系的影响力越来越广泛,我相信我们的品牌字库也会越来越丰富、完善。我们也欢迎更多的内部品牌遵守这套规范,一起加入网易 B 端品牌设计体系、网易正体的“共创计划”中。

2. 标准化的设计流程,更高的设计效率

通过对于整个设计流程的优化,我们将品牌的框架规范设计、品牌字体设计、品牌 VI 规范这几个流程进行了标准化,以此来提升整体的设计效率。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

设计师可以将更多的精力专注于前期的品牌图形与概念的创意上,而之后的工作可以用这个标准化的流程来完成。更重要的是,这并不是单纯设计层面的流程,二是经过整个团队确认的流程。 因此,只要图形创意获得通过,那么后续的流程便可以快速完成可出产出,无需再次与各方确认。

通过实际的测算,对于传统的设计流程,我们可以将品牌字体的设计时间提升越 60%(如果字库足够丰富,那就是 100%了),整体规范输出效率提升 80%。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

最终,我们通过这套标准化的规范节约了大量的时间,同时逐步构成了非常完整的品牌体系。我们也希望这套标准化流程能够帮助更多的品牌。

3. 围绕品牌体系的内部生态

我们通过不断的品牌设计与升级工作,通过不断成长的品牌、不断完善的标准化流程,最终完整了网易智企的品牌设计体系的建设工作。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

基于所有的 VI 规范都是同一标准的,所有场景的规范可以任意组合、替换,这使得我们可以以统一标准输出给市场、产品人员,并逐步去建立后续的统一规范。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

随着品牌体系的完善,我们的推设计广体系、产品设计体系才有了建设的基础。围绕市场侧,我们建立了统一的推广体系,用以规范线上线下的推广输出规范,产品官网的规范以及活动页等规范。而围绕产品侧,随着品牌体系的认同,FishDesign 的统一使用得以有了“群众基础”,并基于样式组件化+规范体系化建立了产品设计体系。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

总而言之,品牌体系是所有体系化的基础,也是智慧企业设计体系的核心。只有顶层品牌的统一,才能在顶层认知上影响每个产品线,并逐步去引导中层、底层规范的统一。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

2020 年下半年,网易智慧企业的中文名已经正式升级为网易智企,欢迎关注我们的产品~

4. 更大的影响力,“B 端品牌体系”共创计划

我们为什么要建立品牌体系?

回到最初的原点,除了帮助网易智企解决当前阶段的品牌问题外,还有另一个原因——在网易内部建立一套指导性品牌设计规范与流程。

设计不仅仅是纯粹的创意性,也不是片面的规范性。

体系的目的并非强制性的规范(我个人并不推崇毫无意义的统一)。体系的目的在于引导性、在于选择性。我们希望提供的是一个基础标准和流程。也许某个产品的设计师并不擅长品牌设计,也许大家有这套体系需求,那么大家可以有一套高品质、的品牌设计与落地流程。

也许某个产品线觉得这套体系不够满足目前的现状,但对于品牌的基本标准不清楚,对于品牌设计流程不够清晰。那也可以这套体系的基础上进行创新,借鉴这套设计流程。

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

如何构建品牌体系?来看网易智企品牌体系化建设实录!

基于这个目标,我们已经将品牌规范与标准文档进行了小范围的开放试验。截止到 2020 年的上半年,已经有多个品牌开始使用这套标准化流程进行品牌升级与规范输出,比如网易易盾、网易轻舟、网易疾风等。

品牌设计体系更大的价值在于——帮助品牌快速建立秩序,将时间留给创意。而体系本身,也会因为每次的创意,变得更丰富、更完善。通过不断地正向循环、自我迭代,最终成为一个更大生态。

在无序中寻找秩序,在秩序中寻找创意,让世界变得更有序、更有趣、更美好。

文章来源:优设  作者:Jady13_剑杰

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

移动端选择器正确使用指南

雪涛

什么是选择器

选择器是一个输入字段, 用户必须在其中选择一个(或多个)选项,这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单,复选框,切换按钮,滑块等都是不同类型的选择器,但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量:一个或多个。

选择器的类别

  • 单选选择器
  • 多选选择器
1. 单选选择器

单选选择器按效果又可以分为:点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。

特点:同一时间只能选择一个选项,当你已经选择完一项后,准备选取另一项,那么后选的一项会立刻使先选的一项被取消选择。

点击选择器

点击选择器可分为两种状态,状态一为立即触发,当你点击后会立即跳到下一步操作;状态二为再次确认触发,当选中某项时,不会立即触发操作,而是需要再点击别的触发类组件(如保存按钮)后,再执行操作。

  • 立即触发式:

特点:直接进入,并没有再次确认的按钮,可以让你快速到达想要的目的。

建议:虽然目的能快速达到,不过也很可能会造成误操作,所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离,同时正因为是直接跳转,所以应当加入一些操作提示。

举例:汽车之家在用户选择二手车时就会出现此选择器,当我在汽车之家想要选择二手车时,它会弹出立即触发式选择器控件,我们在控件上可以看到有7个圆形选项,分别为:汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车,当我点击“奥迪”选项时就会立即跳转选择后的页面,为了让用户知道自己选择后的状态,在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。

6000字超长干货!移动端选择器正确使用指南

  • 再次确认触发式:

特点:这是最为常见的选择器类型,当所在选项选上,除了选择另一个选项之外,便没法取消选中状态。(选且只能选择一个选项)

建议:在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项,甚至是否考虑给出一个重置按钮。

举例:我刚注册小红书时,在小红书填写信息页面中,它的默认选项是“男”,我点击“女”,则会自动取消掉“男”,它们两者并不能同时存在,并且只有我点击下一步按钮时才会正式确认我选择完成。

6000字超长干货!移动端选择器正确使用指南

滑动选择器

特点:滑动选择器是将需要选中的内容滑动至中部,然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。

建议:滑动选择器的展示区域有限,部分选项会被隐藏,最好是当用户对所有选项都比较熟悉、有预期的时候,才使用它。为了保证手机屏幕触控精度,以免发生误触,滚轮选择器建议控制在5列以内。

举例:在小红书填写年龄信息时,我们只需用手指在区域内滑动即可选择想要的选项。

6000字超长干货!移动端选择器正确使用指南

多联动选择器

特点:多联动选择器是由两个或两个以上的中继器制作而成,第一个中继器选择后,一般会对第二个中继器进行筛选,不过因为显示的区域有限,所以当你要切换时,还只能挨个切换,效率低下。

建议:可以通过数据以及功能来减少选择时间,例如在选择地区时,根据当前GPS定位地理位置,定位相关省级信息及名称,减少滑动操作。

举例:如下,当我选择了内蒙古自治区,那么2级内容就应该筛选掉内蒙古以外的城市,比较适用于省份-城市或者品牌-产品这种类似的选择,当然下面第一张多联动选择器也结合了滑动选择器。

6000字超长干货!移动端选择器正确使用指南

△ 选择城市时,我们必须要先选择省份,再选择城市,最后才能选择县;

多联动选择器展示的方式非常多,不仅可以用滑动形式展示,还可以用点击、平铺列表等形式展示。

6000字超长干货!移动端选择器正确使用指南

上图则没有先后顺序,不过当你首先选择颜色时,如果没有相同尺码的衣服,缺货的尺码则不会被选中,先选择尺码也是相同道理。

切换开关选择器

特点:切换开关选择器有且只有两种选项,用来在开和关两种状态之间切换。开关属于触发类组件,拨动开关时,它所指挥的某个操作会立即生效,常见的使用就是授权。开关的默认状态并不都是关闭的,还要从产品本身的设定上来决策。

建议:如果某开关的功能是用户经常使用的状态,那么可以在默认状态下打开开关,不过需要注意的是在某些特殊的开关按钮需要打开时,必须要提前告知用户。

举例:当我打开UC浏览器的设置时,它的辅助功能就使用了切换开关选择器,切换的开关只需要点击即可。

6000字超长干货!移动端选择器正确使用指南

可搜索选择器

特点:可搜索选择器一般用于选择项较多时,特别是对于电商购物类的APP搜索选择器是必不可少的,搜索选择器会根据用户输入的内容,对中继器进行模糊的搜索,让用户快速找到并选择内容。

建议:在搜索区域输入文字时,可给予用户更多的文字提示以及以及引导类信息。

举例:小红书在搜索时就会出现数字化的信息提示,这样能够很好的引导用户进入到想要的搜索结果:笔记或者商品页面。

6000字超长干货!移动端选择器正确使用指南

地图选择器

特点:作为最特别的选择器,它的功能是复杂的,它的操作方式也是多样化的,地图选择器的操作可点击、可拖拽、可放大缩小等等,它多用于生活类APP。

建议:可以在选择器中加入更多趣味、互动、可感知的设计,如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。

举例:打车类APP必用的地图选择器,滴滴出行的用户可以实时看到车辆信息,可以采用点击、拖拽、放大等操作来选取上车地点,选取后还有文字信息提示,让用户确认操作是否正确。

6000字超长干货!移动端选择器正确使用指南

贝壳APP则用地图选择器来让用户选择二手房,同时也采用了联动式的效果,第一步是查看区域,可以明确看到区域的售房套数,点击选择区域后我们可以看到每个路段的房子套数,点击路段后就可以看到每个楼盘的套数以及均价,直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况,有更好的对比性与选择性。

6000字超长干货!移动端选择器正确使用指南

2. 多选选择器

当单选选择器不能满足用户需要时,这时我们就可以采用多选选择器,一般常用的多选选择器都是采用点击的方式,当然也有滑动类型的多选选择器。

点击多选选择器

特点:当用户想要选择多个类别的情况下,我们就可以用点击多选选择器来展示提供给用户选择,通过屏幕点击选中或取消选中该选项,它不会立即触发操作,需要再点击别的触发类组件(如保存按钮)后,再执行操作。

建议:从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量;多选项时触碰区域不能太小,以免造成误操作。

举例:小红书在选择感兴趣的内容时就采用了点击多选选择器,不过在选择兴趣时它就强制用户至少关注4个兴趣,而对于单兴趣或者少兴趣的用户来讲,这无疑会造成用户体验的不佳,被逼再次从中选择次要的兴趣。

6000字超长干货!移动端选择器正确使用指南

滑动多选选择器

特别注明:从用户的角度来看,它可以选择多个区域段的内容,所以我把它分为多选选择器中。

特点:当系统给出的选项不在自己的选择区间时,可以很好的自定义选择区间,把定义权限交在用户手里。同样,它需要再点击别的触发类组件(如保存按钮)后,再执行操作。

建议:在用户滑动操作期间要有明确的操作提示,让用户时刻感知目前处于的状态;滑动区域尽量不要超过100刻度,如果刻度距离太小,用户在滑动时也很难精准的选择范围。

举例:在汽车之家APP中,当我要选择汽车价格范围时就会出现此选择器,我们可以用手指滑动来选取它的价格区间,相对于上半部分的单选价格拓展性更强,用户可以自行选择上半部分的单选选择器,也可以选择滑动多选选择器,给予用户更多的选择。

6000字超长干货!移动端选择器正确使用指南

选择器的十大应用要点

1. 简单易懂

标题易懂:

在选择器中标题一定要简单明了,很快的让用户知道他在为什么做选择(如:当你关注某烹饪的APP后,它会让你勾选喜欢的菜谱,你的标题就可以用“选择菜谱”四个字,简单明了)

文字标签易懂:

一般使用短语而不是句子,也并不需要用标点符号来结尾。(如:当选择想要的菜谱时,菜谱后的文字不需要加入标点符号)

选取状态易懂:

用户能够明确感知什么是选中状态,什么是未选中状态,什么是禁用状态。(如:选中状态为高亮显示,未选中为普通显示,禁用状态为灰度显示)

反馈提示易懂:

当你在选择中遇到选项限制或是否需要确认操作时,反馈提示一定要一目了然。(如:当你选择某衣服时,S码不能选择,则会用灰度显示的文字代替,甚至可以用中横线划过文字,明确告诉用户不能选择)

6000字超长干货!移动端选择器正确使用指南

2. 基本排序

从逻辑顺序:

逻辑排序能让用户很快很准的找到自己需要的选项,特别是对于选择地址/时间/个数等常规的选项时,可以按照字母/远近/大小来进行排序。例如下面在选择地址时,就是按照A-Z字母排序,这样可以大大节省用户选择的时间。

6000字超长干货!移动端选择器正确使用指南

从产品利益角度排列顺序:

当然为了产品自身的利益也可以自己优化排序方式,选项的顺序可以说服用户进行选择,用户可能因为第一个选项在列表中的位置而选择了第一个选项;可以辅助用户,也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时,产品为了让用户选择更加优质的菜谱,就会把用户评价高的菜谱放在前列;当然商家也会这么做,例如你要去买某款商品,商家会在选项中把热门、优质的产品放在最上方,让你优先选择。

6000字超长干货!移动端选择器正确使用指南

从用户体验排列顺序:

从用户角度来说哪些对用户体验好,那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位,而把用户量最少的轻客放在了最后一位;同样它在汽车品牌选择中,单独列出了热门品牌把它放在前列,让用户进行快速选择。

6000字超长干货!移动端选择器正确使用指南

3. 一致性

视觉布局一致:

每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐,这样有利于快速读取选择内容,可以提高用户的浏览效率并减少错误。

6000字超长干货!移动端选择器正确使用指南

图片/插画风格统一:

在图文结合的选择器中,我们一定要保证图片(插画)的优质以及风格的统一。

6000字超长干货!移动端选择器正确使用指南

4. 合理运用默认选项

默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。

默认未选中:

这是最常见的一种状态,特别是对于选择年龄、生日这些个人隐私信息,系统也没有办法进行默认选择。

6000字超长干货!移动端选择器正确使用指南

默认选中其中一个选项:

要想默认其中一项,必须考虑两点因素,因素一:你想要潜意识的像用户传达信息,在单选选择器中默认选择一项后,就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向,例如此产品的性别9成都是女性,那么建议默认选项为女性。

6000字超长干货!移动端选择器正确使用指南

默认选中全部:

其实默认选中全部在用户体验上来讲真的不是那么的友好,例如微博这个选择器界面,刚进这个界面时已经全部勾选中,并且当你没注意习惯性的点击下面的按钮时会生立即生效,没有返回的余地。(吐槽:有些APP甚至没有一键取消功能,要一个个的点击取消…)这也是为了产品牺牲掉了部分用户体验吧!

6000字超长干货!移动端选择器正确使用指南

5. 给用户更多选择

单选选择器的更多选择:

如果用户不想做出选择,那么应该提供一个中立选项,为用户提供一个明确的方向,中立选项比勉强选择要好。例如在选择行业领域时,以上并没有你所处的领域或你不确定你的领域,你就可以选择“不限”或“其他”。

6000字超长干货!移动端选择器正确使用指南

多选选择器的更多选择:

在多选选择器中,如果不能把控到用户的准确选项区间,那么可以考虑滑动多选选择器,让用户有更多的选择区间,不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。

6000字超长干货!移动端选择器正确使用指南

6. 控件状态

选择控件在操作过程中必须更改其状态/外观,要明确让用户知道是否能选中,是否被选中。控件状态一般分为三种:未选中、选中、禁用。

未选中

选择器的开始状态,向用户表明,可对该选择控件进行操作。

选中

用户操作选取状态,选择控件处于被选中的状态。

禁用

一般情况会为灰色显示,用户将无法与选项进行交互。

6000字超长干货!移动端选择器正确使用指南

7. 操作提示

指的是用户在操作中让用户得到相应的反馈,用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中,操作提示一般用辅助文案提示及非模态弹窗提示。

辅助文案提示(选择前与选择中):

辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明,例如下面是地区选择,我在选择不同层级的区域时,它的上方会出现辅助提示文案,让你明确的知道你上一层级选择的是什么。

6000字超长干货!移动端选择器正确使用指南

同样,当我在选择价格区间时,滑动选择器的左上方一样有文字类的提示:

6000字超长干货!移动端选择器正确使用指南

非模态弹窗提示(选择后):

非模态弹窗一般出现在用户操作完的跳转页面中,为了让用户感知所选的选项在页面的状态,如下,非模态弹窗告知用户一共有7辆车符合标准。

6000字超长干货!移动端选择器正确使用指南

当然除了非模态弹窗外,还有模态弹窗,但是用户体验极差,目前很少使用,所以就不列出来了。

8. 合理使用操作区域

扩大点击区域:

在选取按钮类的操作时,容易出现点击不到或误操作的现象,我们可以通过扩大点击区的交互区域来提高易用性,例如下图,虽然按钮在左边,但是可以把横向区域都列为可点击区域。

6000字超长干货!移动端选择器正确使用指南

当然我们也可以从设计的角度来扩大视觉范围,从而也提高了点击范围,这样的处理不仅提升了视觉层面,还提升了交互体验。(图文结合方式)

6000字超长干货!移动端选择器正确使用指南

注意交互间距:

在元素与元素之间一定要有合理的交互间距,不然很容易出现误选的情况。

6000字超长干货!移动端选择器正确使用指南

合理利用有效区域:

在选项较多的选择器中,我们可以利用好选择主体控件之外的区域,例如在选择城市/品牌时,我们可以做A-Z index式字母交互区,帮助用户快速找到想要的选项。

6000字超长干货!移动端选择器正确使用指南

9. 趣味性

让用户选择本来就是一件枯燥乏味的事情,如果让这件事变得有趣那么会极大的提升用户体验。

从文本层面:

例如当用户填写性别信息时,你给予用户的文字信息并不是“男”/“女”,而是“帅气的boy”与“酷酷的girl”,这样会让用户觉得这是一件比较有趣的事情,而不是被动选择。(注:这样的取名一定要符合产品的特性)

从视觉层面:

加入可玩儿性的选项,例如汽车之家的头像切换,可以选择自己喜欢的头像。(头像并不是强制选择的,如果不进行操作则是默认选项)

6000字超长干货!移动端选择器正确使用指南

从交互层面:

让用户去享受选择。例如Soul的星球首页就做的非常棒,在未选择状态他的人物会360度围绕着转动,当然你也可以快速拖拽,或者放大缩小,可玩儿性十足,并且在内部设定了最匹配/新人的高亮显示,协助用户去选择。

6000字超长干货!移动端选择器正确使用指南

10. 合理使用选择器

不同的产品在使用选择器时都各有不同,因为每个选择器都有它的利弊,而真正要怎么去选择还要根据产品本身来定。

那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊:

多联动选择器(平铺式)

6000字超长干货!移动端选择器正确使用指南

货车帮采用的是多联动平铺式选择器,它最大的特点就是能够一眼就看清楚所有地址,不过地址多时需要花时间去找,只是当你经常使用此功能时便会形成记忆,再此搜索的时候就能形成记忆点击,效率很高,并且在操作外还有路径提示,不仅可以帮助你记住层级选项,还可以实时返回路径进行重新选择。

手势操作:点-点-点

多联动选择器(列表跳转式)

6000字超长干货!移动端选择器正确使用指南

闲鱼采用的是多联动列表跳转式选择器,这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容,那么就又要切换到上一级,闲鱼采用它的原因是因为它只有二级联动,不存在遗忘现象,不过这样列表式的选择效率并没有平铺的效率高,人眼习惯扫视横向内容,所以横向的内容获取往往要比纵向的多,在地址选择器上我个人是不太建议采用多联动列表跳转式,因为并不也不直观。

手势操作:滑-点-点

多联动选择器(列表式)

6000字超长干货!移动端选择器正确使用指南

转转采用的是多联动列表式选择器,它的优点是可以根据右侧字母来找城市,数据偏大也能够很快的查找。不过如果在层级的选项中出现错误,同样就要切换到上一级,并且在操作中没有辅助信息提示。

手势操作:滑/点-滑/点

多联动选择器(下滑式)

6000字超长干货!移动端选择器正确使用指南

安居客采用的是多联动下滑式选择器,这种形式的选择器不会遮挡后面的主要内容信息,在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址,并且层级分明,扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。

手势操作:点-滑/点-点

地图选择器

6000字超长干货!移动端选择器正确使用指南

美团外卖采用的是地图选择器,这个选择器一般用在需要精准定位的生活类APP中,它的优点就是能够快速精准定位,并且自动录取定位信息,它的缺点也显而易见,不能含带层级并且对范围也有约束。

文章来源:优设  作者:黑狮力

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

互联网企业管理会计(决策)平台的产品设计

雪涛

在BAT、TMDJ等一线互联网企业,决策平台又称决策支持平台、管理会计平台。但实质都是实现业财一体化后,提取业务、财务数据,自动生成各种管理报表、财务报表,智能预警风险、预报业务前景,通过Dashboard或驾驶舱的形式展现给管理层、决策层,本文作者暂以管理会计平台展开讨论。

一、定义与范围

1. 何谓“管理会计”

管理会计,从定义来看有狭义与广义之分。狭义的“管理会计”通常是指财务会计概念,包含“成本管理”和“管理控制系统”两部分。

而广义的“管理会计”则是指运用一系列的分析手段,通过挖掘财务数据、业务报告等中潜在信息,对企业财务状况、经营成果、现金流量和产品竞争力进行分析,辅助经营者进行决策,指出业务、财务风险隐患,预测未来趋势,赋能业务,以数据驱动企业发展。本次讨论的后者,即广义的管理会计。

管理会计目标的实现,不是简单的某一个系统或产品能承载的,需要设计一系列的产品矩阵,包括基础的核算系统如ERP、成本结算系统、预算系统、报表系统,这个矩阵就是管理会计平台(以下简称管会平台)。

管会平台的主体或用户的不同使得所产出的管理报表(以下简称管报)指标也有所不同。用户一般分为外部和内部2个大维度。

1)外部用户

投资人偏向于分析企业的盈利能力和资本保值增值能力,如净利润率、资本保值增值率等指标;债权人则侧重分析资产负债水平和偿债能力,如资产负债率、利息保障倍数、权益乘数等指标。

2)内部用户

应收会计岗则侧重应收账款的质量、收入的趋势,如应收账款周转率、收入环比或同比、速动比率等指标;资产会计岗偏向于分析资产的利用率、所带来的价值,如资产周转率等指标;而企业管理层或决策层会关注企业经营活动和财务活动的一切方面。

管会平台在设计时应考虑满足这些不同用户的需求,并通过权限、角色实现千人千面的效果,不同用户展示不同指标集和报表。

2. 意义

管理会计不仅属财务一个分支,更是财务在企业管理中应用的升华,财务的4个功能层次形象筑起管理会计的坚实基础:

  • 【看得见】:是指基础核算功能,经济业务活动应及时反映在财务数据中;
  • 【说得清】:强调数据的可靠性,财务是业务的反映,业务与财务是一个闭循环,不是凭空而来。结合业务,分析业务问题所在;
  • 【管得住】:则是预算系统在财务流程中的具现,并实现费用控制;
  • 【指得准】:是指趋势预测,通过管理会计平台指明业务发展方向,实现赋能业务、数据驱动的最高境界。

互联网企业管理会计(决策)平台的产品设计

做好管理会计,核算是基础,分析是关键,管控是抓手,赋能是核心。

分析不仅仅是传统的报表分析,而是基于大数据、机器学习、AI等高科技手段,自动化、准确、智能的实现风险预警、趋势预测,引领、驱动企业发展。

互联网企业管理会计(决策)平台的产品设计

举个栗子:每月关账后财务都要做财务分析,收集各种业务、财务数据,结合相关指标,以发现业务中的问题。如做杜邦分析法,分析净资产收益率。

继而计算总资产净利率,权益乘数,销售净利率、总资产周转率……通过实际与预测的横向对比、基期与历史的纵向对比,找出各种指标异动原因,实质是分析企业的赢利能力、营运能力、偿债能力。

但这些通用的指标需结合企业实际情况、历史数据,并体系化形成产品,才能分析出症结点所在,这也是管理会计平台建设的意义与努力的方向。

二、产品架构

如何搭建管理会计平台(以下简称管会平台)呢?互联网管理会计平台,其实并不是一个单一的平台,而是由众多关联子系统构成,通过多个子系统间协同合作完成管理会计目标的系统集。

从前端用户的视角来看,获取管理报表是一个很简单的动作:查询相关主体公司管理报表或分析结果即可,但从系统角度来说,管理会计的建设过程实际涉及了众多财务子系统的协同、及复杂的系统逻辑。

一个典型的财务产品架构如下图,涉及多个子系统。典型管理会计产品分为生产端与消费端,架构图如下:

互联网企业管理会计(决策)平台的产品设计

在简要介绍各子系统功能前,可以先看以下简化版的管会平台产品架构图,典型的管会平台产品架构可以划分为四层结构:支撑层、数据层、核心层、应用层:

1. 支撑层

用来支持管会平台的基础服务和基础设施,包括容器云、安全服务、存储服务、消息引擎、任务高度、短信服务、证书服务等。

2. 数据层

汇集业务、财务数据,以大数据或数据湖的形式承载基础数据,包括ETL、BI、大数据等。

3. 核心层

管会平台的核心模块,分为清结算、财务中台、ERP、预算、管报中心五大块;

1)清结算

主要由计价、清分、结算、对账组成,是业务活动在财务的2个反映之一,解决互联网业态中的成本费用结算,与传统企业的成本计量方法不同的是,一般是按个别计价法对不同时间段可以阶段性、阶梯性等复杂业态成本计量。

互联网企业管理会计(决策)平台的产品设计

2)财务中台

主要针对业务中非审批类的收入、资产折旧、摊销,自动对账、生成分录,并传递至ERP,主要包括:入账规则、数据校验、分录生成、主数据等。

3)预算模块

预算功能,包含预算编制、执行等,结合BPM审批流,实现费用控制。

4)ERP

财务核心入账平台,包括总账、应收、应付、资产、财报等。

5)管报中心

管会平台核心输出层,包括生产端和消费端2部分,生产端分为指标集、规则引擎、模板、预处理、智能诊断等模块。消费端主要是管报产出结果的展示即驾驶舱、手工确认或修正。

管报中心是核心中的核心,后面第三章会详细展开。

互联网企业管理会计(决策)平台的产品设计

4. 应用层

通过支撑层、数据层、核心层提供的服务组合起来,对最终用户、运营管理人员提供的系统。在产品架构层面体现为前端展示层、业务域和过程域。前端展示层主要是结果展示的形式,如PC端的web页面、移动端的APP或H5、小程序等。

业务域是上游的各业务系统,而过程域是管会平台所依赖的流程工具、特征数据,如供应商、ORG、BPM等。

互联网企业管理会计(决策)平台的产品设计

三、管报中心

管报中心由生产端和消费端组成:

  • 生产端:诸如“成本费用率”、“速动比率”等指标集实现可视化、配置式的增加、禁用,再关联规则引擎的会计科目、计算规则,提供给预处理模块消费,并通过智能诊断产出相关指标的因果解析或预警信息;
  • 消费端:以驾驶舱的形式将相关结果展示给用户。如对结果疑义时,还可手工修正。

1. 生产端

生产端流程图如下:

互联网企业管理会计(决策)平台的产品设计

【指标集】:配置各种指标,如“速动比率”、“产品成本费用率”等。一旦配置不得删除,只可修改或禁用。上游是科目与计算规则,但校验关系不在此模块。

【模板】:指标、预警或诊断信息的集合,可导入或手工增加。在预处理和结果展示时,将会调用此模板。

【规则引擎】:由“科目规则”、“计算规则”、“指标规则”、“预警规则”四部分组成。

  • 科目规则,依赖主数据的会计科目,在此设置科目间依赖关系、重分类关系、借贷方向。如应收账款与,余额应在借方;如果出现贷方,则可能是预付账款,重分类时应放在预付账款。如流动资产由货币资金、银行存款、短期投资、应收票据、应收账款和存货构成。
  • 计算规则,简单的如加减乘除、取模、求余等,复杂的如贝叶斯推理。后台预设,前端界面可自定义设置各种指标的计算规则。
  • 指标规则,指标与指标之间的逻辑关系,如“总资产净利率 = 销售净利率 * 总资产周转率”、“ 销售净利率 = 净利润/主营业务收入净额”等等。
  • 预警规则,包括触发开关、预警信息模板,预警条件、主因判定等。如下图杜邦分析法对A公司进行分析预警:

互联网企业管理会计(决策)平台的产品设计

在每一层指标中,有实际值、预测值,二者之间的偏离度,就是预警条件;“好”、“差”就是简单的信息模板,可把具体原因也纳入进来。

主因判定实质是一个由上到下的递归过程,如此例中,A公司获利能力(即资本报酬率)相对较差(3.08%<7.41%),这是第1层判断。

再往第2层,经过分析可知这不是因为总资产净利润差(2.55%>2.37%),而是财务融资能力差(1.21<3.21)。如此类推,直至分析至底层科目级指标。

【预处理】分为“重分类”、“平衡试算”、“定时任务”、“结果存储”四部分,是报表产出的运算过程。其中“平衡试算”属前置数据校验,检查数据是否达到报表可用程度。“定时任务”与“结果存储”属技术性过程,“重分类”根据会计要求设置,具体由财务确定。

【智能诊断】是对具体的报表进行分析,由“诊断开始(数据准备)”、“规则判断”、“预警判断”、“结果确认”四部分。其中结果确认包含结果展示、消息分发、手工修正等。“规则判断”与“预警判断”是对【规则引擎】中的“指标规则”、“预警规则”的具象应用,实际应用中可引入AI、TensorFlow(机器学习)等技术手段提升诊断的准确度。

2. 消费端

在生产端准确、及时生产出数据后,消费端就不愁无米下锅了。一般通过Dashboard或驾驶舱展示,这一块通常需要BI或数仓部门的协助,效果图如下:

互联网企业管理会计(决策)平台的产品设计

四、总结

综合以上,管会平台的每个子系统并非孤立的,通过产品架构相互关联。产品架构与技术架构相辅相成,产品架构决定需求和设计,技术架构决定技术框架和性能。包括AI在智能诊断上的应用、数据域的实现等。

好的产品架构将这些不同用途的功能进行聚类整合,因此,【才听途说】建议将管会平台拆分成多个子系统,明确业务边界,减少系统间的耦合,提供优质、的管理决策支持服务。

并根据前端业务场景的需求随时进行调整变化以适应业务的发展,如规则引擎部分基本可由前端配置即可,减少后端开发与产品上线时间。

不同互联网公司,业务体量甚至有成千上万倍的差距,如京东集团内不同BU的体量及发展速度造就其系统复杂度也差异巨大,高度复杂的管会平台甚至需要数百人的技术团队来设计、开发、维护。

不过,对于体量较小的互联网公司来说,几人的团队即可搭建一套系统并维护日常运营。

互联网企业作为金融科技业界引领者,建议在系统开发前期(从0到1),以MVP形式,小步快跑,快速迭代,尽快上线、降低开发成本,优先开发主要需求、及较重要的子系统,或并行实施几个子系统,如ERP的实施、清结算的开发、管报中心的开发可以并行。再做次优级子系统,逐步迭代。

随着订单量的提升及业务复杂度的增加,不同BU甚至不同BGBU的接入,管会平台复杂度将指数及上升,系统处理起来会越来越吃力,若无良好的规划,各子系统耦合度越来越高,杂糅在一起,系统灵活性越来越差,无法跟上业务的发展。

因此,管会平台的中长期发展(从1到100、到∞),极其考验我们的业务梳理能力,及对业务进行拆分、产品架构的能力。

特别是目前行业内还没有体系化的管会平台建设经验可参考时,更考验我们的综合能力,包括财务专业知识、业务理解力、产品规划能力。

但万事不要怕,只要抓住产品设计精髓,即设计的产品应满足逻辑完整、业务功能明确、可扩展(发展方向明确但业务边界清晰)、灵活(非耦合)等特点,一切将会迎刃而解。

文章来源:人人都是产品经理  作者:B端老头

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



越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

雪涛

过去一年 COVID-19 肆虐全球,封锁与隔离使我们与数字世界的互动方式发生了巨变,这使得我们在数字世界的时间变得更长了,我们思考与互动的方式也产生了变化,新冠病毒的爆发也为 2021 年的设计趋势带来了新的思考。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

本文主要整理了 2021 年的设计趋势与思考,主要为 ToB 方向。随着产业互联网行业的发展和数字化的进程,设计工具以及生产方式也在不断进化发展。在 5G、人工智能、大数据、云计算、物联网的技术浪潮下,对设计团队也提出了更高的要求。

行业趋势

1. SaaS 趋势:一线工作者将成为决策的中心,“职业前线”是常态。

工作一直在我们的社会生活中发挥着重要作用,但从未像在疫情期间那样重要。在疫情期间,数月的封锁给人们的情感健康带来了损失。当然这有助于远程感知的技术和工具的发展和进步,但是还有很长的路要走。

对于一线员工来说尤其如此,不幸的是,一线员工通常与公司的联系最少,但最容易感染该病毒。诸如教师,医生,零售人员和制造工人之类的基本工人通常无法获得与同事相同的公司范围内的技术。许多人甚至没有公司电子邮件,甚至没有办公桌。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Farhan Fauzan

但是,公司开始意识到这些一线职工(他们通常是客户的第一个接触点)可以为组织带回宝贵而独特的见解。企业现在正试图通过集中工具来完成这些任务,例如轮班制或与他们的手机即时共享重要的健康和安全信息,从而使这些员工的工作更轻松。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Barly Vallendito

普华永道美国副主席、风险投资与创新全球领导者 Vicki Huff 指出,数字化解决方案在这里发挥着重要作用。”为了在 2021 年茁壮成长,企业需要将员工置于工作空间理念的中心。通过对员工体验的磨练,雇主可以提高生产力,增加参与度,并创造出更多连接和的劳动力。实现这一目标的核心将是与公司现有的技术堆栈相整合,并为员工个人提供个性化服务的数字化解决方案。”

2. 数字健康与员工健康趋势

我们对 COVID-19 的了解还不够,但这将会是可穿戴设备,远程医疗和人工智能等新数字健康发展机会。到 2021 年,我们可以预料这些技术将继续发展。

我们还看到了一些出色的自监控应用程序应用于可穿戴设备,可提供有关步数,睡眠,心率或血压的即时可视化数据。这些复杂的功能使用户能够掌控自己的健康,并告知他们如何改变生活方式。

医疗保健人工智能软件,硬件和服务市场,预计到 2025 年全球将超过$ 340 亿@Businesswire

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ Pillo Home Healthcare Robot @415Agency

Oracle-Workplace Intelligence 最近对 12,000 名员工(包括 3,100 名 C 级高管)进行的一项调查显示,企业领导者与任何人一样容易受到职业压力的影响。71%的高管表示 2020 年是他们有史以来最紧张的工作年,而 53%的高管表示在工作中遇到精神健康问题。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @ILLO

专注于改善员工的福祉不仅是正确的事情,而且公司也意识到这可以提高业务绩效。这就是为什么他们正在寻找技术和其他工具来提高工作满意度,工人健康,可持续性,工作与生活的平衡以及灵活的工作安排。

或许人工智能之类的技术能对于这一追求提供重要帮助。Oracle-Workplace Intelligence 研究发现,75%的员工认为 AI 可以帮助提供对其工作至关重要的信息,自动化任务并减轻压力。报告还显示,68%的员工宁愿使用机器人而不是经理来讨论工作场所的压力。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Shahin Srowar

3. 人工智能工程化(AI Engineering)

多年来,人们一直担心自动化技术在企业中的迅速普及会导致工作岗位减少。现实要乐观得多:自动化不是要替换工作,而是要增强工作。

公司知道,员工在重复性的工作上花费了太多时间。因此,越来越多地使用机器人来执行这些任务,例如归档工单,发送和签名文档以及与同事交换每小时的班次等。由于自动化,企业将更多的精力投入到改善工作文化和确保员工对工作满意的工作上。

人工智能工程化立足于三大核心支柱:数据运维、模型运维和开发运维。强大的人工智能工程化策略将促进人工智能模型的性能、可扩展性、可解释性和可靠性,完全实现人工智能投资的价值。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Craftwork Studio

4. 企业数字孪生

数字孪生是真实世界环境、产品或资产的虚拟表示,用于多种目的。制造商使用数字双胞胎来管理机器和工厂的性能和效率,而城市规划者则使用它们来模拟新开发项目的潜在影响。2021 年数字孪生将会在物联网(IoT)平台中有更广泛的应用。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @azure.microsoft.com

5. 全面体验(Total Experience)

Gartner 将多重体验定义为一种重要的战略科技趋势。而在今年,这一趋势又进一步发展成为全面体验(TX),将多重体验与客户、员工和用户体验相联系。Gartner 预计在未来三年中,提供 TX 的企业机构在关键满意度指标方面的表现将超越竞争对手。”由于疫情,移动、虚拟和分布式互动日益盛行,因此企业机构需要有 TX 策略。TX 将改善体验的各个组成部分,实现业务成果的转型。这些相互交织的体验是企业运用创新革命性体验实现差异化,从而从疫情中恢复的关键驱动力。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Hamza Abdelhak

6. 行为互联网(Internet of Behaviors)

行为互联网(IoB)不断涌现,许多技术都在捕获并使用人们日常生活中的“数字尘埃”。IoB 汇集了面部识别、位置跟踪和大数据等当前直接关注个人的技术,并将结果数据与现金购买或设备使用等相关的行为事件相关联。

企业机构使用该数据来影响人的行为。例如为了在疫情期间监控对健康规定的遵守情况,企业机构可以通过使用 IoB 计算机视觉来查看员工是否戴着口罩或通过热成像来识别发热者。

Gartner 预测,到 2025 年末,全球一半以上的人口将至少参加一项商业或政府的 IoB 计划。虽然 IoB 在技术上可成为可能,但社会各界将对各种影响行为的方法展开广泛的伦理和社会学讨论。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ BayouFord Driver App@hamam zai

7. 网络安全网格(Cybersecurity Mesh)

网络安全网格使任何人都可以安全地访问任何数字资产,无论资产或人员位于何处。它通过云交付模型解除策略执行与策略决策之间的关联,并使身份验证成为新的安全边界。到 2025 年,网络安全网格将支持超过一半的数字访问控制请求。

Gartner 研究副总裁 Brian Burke 先生认为:“新冠疫情加快了耗时数十年的数字化企业变革过程。我们已经越过了一个转折点,大多数企业机构的网络资产现在都已超出传统的物理和逻辑安全边界。随着随处运营的不断发展,网络安全网状组网将成为从非受控设备安全访问和使用云端应用与分布式数据的最实用方法。”

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ Digital security@Stephane Vasadze

体验趋势

1. 虚拟现实&增强现实(VR&AR)

虚拟现实(VR)再次兴起

VR 一直以来是“未来派”技术的代表之一,在相当一段时间却很难成为主流,当然这与 Facebook 的 Oculus Rift、HTC Vive 和 PS VR 之类头戴相关设备高昂的价格标签也有一定的关系。

不过由于最近 VR 游戏的发行成功,包括“半条命”(Half-Life Alyx),VR 热度再次上升。新兴厂商为动态和创造性的混合现实构建新的解决方案;此外,医疗健康,在线展览和娱乐艺术的需求也在增加。

虚拟现实游戏行业内的全球收入预计从$ 4 亿在 2017 年到 2024 年增长到$ 24 亿。@Statista

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ 微软 HoloLens 展示了“计算的新现实”。@microsoft.com

那么除了游戏行业该如何进军 VR 市场?在疫情期间,GDC 在 2020 年使用 VR 中主持了他们的演讲,使远程参会者能够 360 度观看展台,通过网络研讨会和聊天室进行互动。在 2021 年,我们可以看到更多的企业会利用这项技术来触及全球更多的用户。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Mikhail Gorbunov

同时我们还可以预见在数字医疗中使用大量 VR 可以改善对慢性疼痛,焦虑症和创伤后应激障碍的治疗。我们甚至可能会看到剧院和博物馆采用了这项技术,以保持对公众的虚拟开放。

设计增强现实(AR)

AR 同样是是“未来派”技术的代表之一,已经获得越来越多普及。你可以在花园里偶遇一头真人大小的长颈鹿,也可以想象宜家家具设计是否符合家里的风格,不少厂商已经透露不少新颖的 AR 应用场景。

通过对于 AR 产品的全球市场可能骤增至 85%,在未来四年将有$ 1650 亿市场@Statista

根据《行业周刊》的报道,苹果等公司已经在重建和重组日常用户更容易使用的产品。这家科技巨头正在研发多种 AR 产品,包括可以无线连接至 iPhone 并向佩戴者发出光束的内容(如电影,地图等)的数字眼镜,这听起来似乎有点酷?

2020 年 9 月,马克·扎克伯格(Mark Zuckerberg)宣布 Facebook 将于明年启动“迈向增强现实眼镜之路的下一步”。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @sparkar.facebook.com

2. 非接触式互动

语音用户界面(VUI)

在疫情期间,当我们思考如何在不接触的情况下与设备进行交互时,语音和手势交互似乎成为了另一种 UI&UX 的趋势。

其实早在疫情爆发之前,这种趋势就已经很明显,语音交互是未来几年主要的 UI&UX 趋势之一,在设计中可添加语音用户界面的场景越来越多。例如,您可以使用语音聊天机器人使访客使用语音命令进行通信。虚拟助手也是如此。在未来几年中,许多公司将创建完整的语音用户界面。

学习语音交互设计 → https://www.uisdc.com/zt/vui

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @ Denislav Jeliazkov

语音交互基于 AI 人工智能,我们希望最终能通过语音助手来解决复杂的问题并且易于使用。下一代 AI 助手将具备:高级个性化,个性化主要的目标是使用户感知内容是专属的。基于语音的助手将通过分析语音和面部表情来了解确认交互者的身份。非接触式交互,语音优先界面帮助设计师减少用户达到期望结果所必须采取的步骤。

手势控制

手势控制是一种随着触控屏出现而引入的各种手势控制机制的一种新技术拓展。现在悬空手势已经实现在设备上正常工作。例如,最近欧洲豪华车品牌 DS Automobiles 通过空中触觉反馈和手势展示了其新的非接触式控件,声称该系统提供的精度比触摸屏高三倍。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ Haptics and Gesture Control in Automotive @ Ultraleap

视觉趋势

1. 3D 设计

3D 同样是 2021 年的设计趋势,3D 设计目前更容易应用在企业的品牌或产品应用中。

审美是一种循环,在长达 12 年的扁平化设计之后,Mac 新操作系统 Apple Big Sur 也让 3D 在 UI 设计中得到更频繁的使用

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Eric Hoffman

实际上早在 2017 年的 Build 大会上微软宣布采用全新的 Microsoft Fluent Design System 就包含 3D 设计的五大核心元素:Light(光感)、Depth(深度)、Motion(动画)、Material(材质)和 Scale(缩放)。其中就包含微软最早在 Win7 时代就应用了亚克力(毛玻璃)效果,而苹果则将这一特性发挥得淋漓尽致。从 z 轴维度出发的设计,用它来制造出覆盖内容之上的感觉,令界面元素更有层级,更有趣。或许是因为微软并没有很好的将 Fluent 应用在实际产品中,一直处于概念优于实际。

3D 设计的流行离不开行业的布道者们的引领,2021 年 3D 设计将进入一个新的开始。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Ryan.Jyu

2021 年,设计师(艺术家)们将彻底打开对 3D 的探索之门,这种趋势将会大量呈现设计师们在各种材质、光效、物理模拟等深入研究的效果。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @mav.farm

基于 Web GL 的 three.js 正流行;通过 Web 可以随时随地访问 3D 的故事场景,相比过去,现在的前端框架和库能够显著提升页面加载时效,使得能够支持更大更为精细的 3D 场景。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @adidaschile20.com

在 2021 年,3D 只会变得越来越流行,尤其是看到日益普及的 VR 和 AR 技术。很酷的抽象感,不寻常的角度,您可以在 3D 中完成所有操作而无需使用真实实体对象,例如,当您需要展示昂贵的汽车或不寻常的房子时,这通常可以节省更多成本。3D 吸引了人们的注意力,并使网站更具吸引力,使用户在页面上停留的时间更长,转化率也提升了。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @experience.soletanche-bachy.com

当然技术虽不断发展,但 3D 的主要缺陷任然存在。3D 对象结构越复杂,在用户设备上执行的负载也就越大。需要确保网站已经优化完全,以保证可以显示完整的动态效果。否则用户遇到加载过慢或失败的情况下会适得其反,用户会产生严重流失。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Gleb Kuznetsov

2. 动态化设计

我们相信所有年龄阶段的用户都喜欢观看引人入胜的动画故事或者可交互动画动作。尝试使用简约的界面与大胆有趣的元素结合在一起,既可吸引用户,也能保证信息清晰明了。

2021 年,动画设计案例将越来越多。无论是界面 UI 动画,还是大型营销动画(包含 3D),技术的发展将带来全新的体验。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @richardmattka.com

3. SVG(可伸缩矢量图像)的广泛应用

过去在企业应用设计中,由于浏览器兼容问题导致没有办法完全覆盖 SVG,现在除了可以应用全局 SVG Icon 以外还可以通过 SVG 来绘制矢量插图,插图使用 XML 定义基本属性,例如路径、形状、字体和颜色以及更高级的功能。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Huseyin

当提高显示分辨率时,PNG、GIF 和 JPEG 会丢失质量。而 SVG 可以任意放大或缩小矢量格式而不会降低质量。相比位图,SVG 具有更轻量的体积,更快的访问速度。

4. UI&UX 轻量化设计

UI&UX 持续精简优化已然是趋势,更少的字段显示与更少的字段填写。即使用户达到所需结果所必须采取的步骤也是如此。

注册与登录步骤就是案例,2021,请勿强迫用户记住密码。例如,在在线商城中,用户的个人标识符可以是他们的电话号码或生物特征数据。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @developer.apple.com

苹果公司推出了“超级按钮”,它替代了随机数据进行网络注册。在许多应用程序中,您现在只需一个按钮即可注册,而无需社交网络的参与。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Heavyweight

冗余的 UI 资产会给设计系统的维护和迭代带来沉重的负担,保留核心组件并提升组件利用率,去繁化简似乎是未来的趋势。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @bn digital

随着 iOS 和 Android 陆续支持了深色模式,深色模式也成为大众应用设计的标配。企业级应用的深色模式也将成为 2021 的趋势之一。

生产力趋势

疫情带来的封锁与隔离给我们的工作方式带来极大的挑战,远程办公与在线协作将会成为常态化,如何有效的让设计师们在线协作一直是一个巨大难题。

1. 基于 Web 的在线协作工具,多人实时在线协同

Figma

Figma 是一款免费的在线 UI 设计工具,可用于创建、协作、原型设计与设计对接。通过实时在线的设计协作能够打破设计师之间的视图壁垒,能够实时进行设计共享、修改以及反馈。你无需担心是否保存,你的设计稿永远保持版本。全平台兼容,只需打开浏览器就可以随时随地进行设计。除此之外 Figma 与 Sketch 一样通过轻量化主体+开放的 API 接口和插件生态系统,丰富的第三方插件市场能够为设计生产带来更多的可能性。

截至 2020 年 4 月,Figma 的估值超过 20 亿美元。@福布斯

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ Figma@Remilla Ty

Miro

团队线上协作的设计思维导图工具,核心功能是支持团队在线协作白板服务,无论是思维导图、各式图表、概念图、还是资讯分析用的鱼骨图、价值链分析、PEST 分析,Miro 提供了丰富的免费模板。不仅如此 Miro 还提供了更为丰富的内容格式,包括视频、图片、文档、标签等。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @miro.com

Pitch

在线演示文稿工具,支持多人实时在线或离线以及跨设备构建。这是一种针对现代团队需求而构建的演示软件。Pitch 可帮助团队更好地协作,、精美地制作演示文稿。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @pitch.com

2. 基于 Web 的轻量化工具

在线工具已然成为一种趋势,从格式转换、图片处理到 3D 建模我们逐渐可以通过一个浏览器来使用这些轻量化工具来解决我们实际的设计问题,Figma 已经满足 UI 设计师的生产力工具所有需求,未来或许有更多基于 Web 的生产力工具出现。

Spline

Spline 是一款 3D 设计工具,你可以无需下载客户端在浏览器中创建 3D 项目。Spline 最大的特点是轻量,其操作界面跟 Sketch、Figma 结构一致,能够以 2D 的方式进行 3D 设计;无需 3D 设计基础。Spline 具备基础的 3D 模型编辑功能,同时提供丰富的在线 3D 模型库使用,模型支持添加事件,通过设置不同模型状态进行交互切换。文件可以导出静态图片也可以免费导出离线网页。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @spline.design

Vectary 3.0

Vectary 一款在线 3D 建模设计工具,提供免费场景、模型和材质库,无需从头开始或花费很长时间建造模型,提升 3D 设计效率。素材库包含上千个免费的可自定义 3D 模型,以及数百种高质量纹理化的材质可供使用。VECTARY 现已在 Iphone 和 Android 中全面开通支持 AR 界面,通过在您的网站上使用 Vectary 3D / AR Viewer,每种类型的访客都可以获得交互式 3D 或 AR 体验。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @vectary.com

3. 工具平台化

用未来设计工具将不仅仅聚焦设计产出本身,而是不断向设计的上下游延伸,打通工作的流程中的各个节点,连接和传递每个节点产出物、打通信息流,从设计研究→设计创作→代码实现→项目&资产管理,做到全流程全角色全场景覆盖,形成一个更低成本、更便捷的团队协作模式。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @invisionapp.com/studio

4. 自动化&智能化

用户界面设计工具的趋势之一:借助现代工具和技术简化设计师的工作流程。例如,Adobe 在 10 月宣布了他们对 Photoshop 22.0 版的更新,其中包括 Nvidia 的许多令人敬畏的 AI 驱动的功能,这是一组图像编辑工具,Adobe 称其为“神经过滤器”。Sketch App 最近更新了颜色变量和组件视图功能,方便更有效的管理颜色一致性。Figma 也迅速更新了为分布式团队添加新功能,包括模板和虚拟会议功能,这些新功能使远程协作更加轻松。Pixelmator 的图形编辑器的最近更新具有增强的机器学习功能和 GPU 驱动的图像编辑功能。

生成设计(Generative design)是另一个潜在的 UX / UI 趋势。这是可以分析大量相似数据,找到其定义特征和特征,然后根据所提供的数据创建新特征的数据。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @helpx.adobe.com

5. 结构化设计系统

代码结构化思维应用设计工具将是 2021 年的趋势之一,助力设计师构建结构化组件。Figma 更新的组件变体功能将设计系统的组织形式结构化,统一管理组件的多种类型、尺寸、以及不同状态;优化设计层级,从而简化了资产面板并更紧密地将组件映射到代码。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Mohamad Rasouli

6. 设计开发态

设计开发态能够极大提升设计与开发的对接效率,也能减少设计师与开发者直接的隔阂。

例如:你可以创建响应设计内容的动态框架。过去搭建或修改一个组件需要不断的调整设计尺寸及间距,现在通过自动布局设定参数即可自动适应。Figma 中的自动布局(Auto Layout)功能其实是引入了接近 CSS Box 模型和 Flexbox 在 Web 上的工作方式。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @AsiaInfo Design

New Invision DSM 在 Web 端更新了开发组件管理方式,通过将“组件代码”与“设计稿件”绑定,将设计系统进行统一管理;Zeplin 同样也更新了设计组件(UI components)绑定代码(React components)的功能,让开发同学查看设计稿切图标注时,可直接访问已经代码化的组件详情,提升前端开发效率。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @Wojciech Zieliński

7. 设计稿即代码(Design to Code)

我们常见的 D2C 主要出现在设计交付前端工具中,如 Sketch Mesure、Zeplin,主要功能是导出静态页面代码(HTML+CSS)其问题是:代码机构不合理,可维护性差。目前业内讨论较多的是图片生成代码的能力:通过 AI 人工智能将草稿/视觉稿一键生成可维护的前端代码,提高前端开发效率。

微软的 Micosoft AI 的 Sketch2Code 即通过 AI 训练的 Custom Vision Model 可以针对 HTML 手绘模式执行对象识别,用于将有意义的设计元素检测到图像中,每个检测到的元素通过文本识别服务提取手写内容,被检测对象的信息及其在图像中的位置被同步到底层算法结构中,最后对应包含检测到的设计元素的布局生成有效的 HTML。

除了基本的静态设计能力外,动态交互、动画展示等等在新一代的设计产品里面都可以结构化描述的,未来的 D2C 可以运用这部分数据来生成交互逻辑、动画代码等。

越来越火的To B行业,在 2021 年有哪些值得关注的设计趋势?

△ @No-Code web builder@Mohan

结语

设计趋势是周期性的,UI&UX 设计的新趋势每年都在变化,这是一种审美循环。趋势是必然的,趋势背后是技术发展的浪潮。可见的是设计创造的可视语言,这是一种手段,而我们更应该关注背后所传达价值。

文章来源:优设  作者:AsiaInfo Design

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


B端C化也许是产品设计的新风向

分享达人

最近好多朋友加我微信,向我“咨询”一二(咨询真是不敢当,充其量就是一起探讨),基本上集中在 B 端的产品设计上,略加整理,大概如下几个问题出现的频率比较高:

前两个问题百度一下就可以知道,我就不多说了,重点说说最后一个:B 端如今还有什么机会留给设计师们发挥的空间么?

当我在思考这个问题而不得结果的时候,偶然间发现今日头条上线了“我和我的家乡”,可以免费观看,我就利用坐马桶的时间断断续续看完了。说来也挺有意思,感觉恰巧因为这部电影找到了答案:主旋律电影想要被大众接受顺势而为是必然;

从当年火爆到的“建国大业”到去年的“我和我的家乡”都是典型的主旋律电影娱乐化;这个事情让我明白,歌颂祖国未必要手撕鬼子,葛优大爷和沈腾叔叔的段子也可以让我明事理… 所以说不要一味的固守,破局或者顺势有可能是未来的路。我用这个思路套了下刚刚的问题,嗯~也许B端C化是未来 toB 产品的新方向;


NO.1

从设计风格上来讲 B 端产品走 C 端老路的趋势已经越来越明显;从我的角度来看原因主要是(都是在下的猜测),身份模糊(公民和员工之间来回切换)但承载设备不变(都是手机或电脑)的情况下打开的 app 也顺势越来越趋同,依据场景变来变去的诉求大幅降低;再聚焦回来,C端产品从最开始的提倡“花里胡哨”到如今的“高级感”演变过程走了很长,接下来B端也跟随着从“克制/简约”进化到了“高级感”,具体体现在 2 个点上:信息层次和色彩体系;

1.信息层次:封装度高,密度低

不知道大家有没有察觉,在过往使用toB的经验里,会有特别累的感觉?我一直坚持一个观点,不管是UI还是交互做设计的本质同样是对信息的重新编排和处理;通过设计用的舒服才是王道;

C化最核心的一点就是对信息的处理,以往toB产品的信息密度高和模块化封装度低的特质,随着新方向的到来也势必会退出历史的舞台;(PS.这些短语都是知识点哈,赶紧记下来,省的汇报的时候只知道说大白话,不知道怎么用理论支持)。

另外随着MacOS和windows的设计语言升级(一定意义上操作系统也是B端工具),越来越多的产品跟随着走上了“材质区分层级”的路线,这也不失是一种好的做法,阿里云就是个典型:


2.色彩体系:

如果你是我的老读者,应该还记得我之前写过的一篇跟颜色相关的文章,里面有相对还算全面的定义色彩体系的理论和实操,感兴趣的话可以翻看一下,另外给大家准备了色彩样板,有需要的铁子可以可以试试(文末有领取方式)。

这里再啰嗦一句,作为B端来说,万绿丛中一点红是形成“高级感”的最好办法,其他的就先不展开。之前坊间传言B端不需要视觉设计?我是真真的不认同啊,不好看也是烂体验的一种,毕竟颜值即正义,好看并不可耻,中看不中用才是忌讳,别给B端产品瞎定义,做一个既好看又好用的产品ta不香么...


NO.2

从我的认知上讲,用户体验不再区分B/C两端很多年了,但截止到目前为止B端产品的体验远不如C端产品做得;其中的原因无非这 2 点:

专业性上好理解,就是用户基本会被冠以「专业」之名,所以会出现很多「我以为你懂的」的设计理念;对于信息量的庞大与否,坦诚的讲,造成的原因很有可能是交互上对信息的处理处理不到位,反反复复进行单一流程的多次复用,导致看起来很庞大的假象,就这个问题我们展开来说说:

1. “单线程”变“多线程”

B端产品永远的主旋律都是“效率”,简化复杂流程,专注当前任务,是体验的“标准方法”;对于效率的追求我从不否认,但对方法的执行我还是持怀疑态度,打个比方QQ作为C端巨无霸级的产品一早就出现拖拽 tab 上的红点消除所有信息:

如上图所示,这个交互设计解决了把单线程的操作整合成了单个行为控制多线程操作,减少了很多劳动力的重复浪费;这么说有点绕不好理解,用图来表示估计会好理解一些:

类似的产品还有12306的抢票,思路也大致相同,假如你是过年回家需要购票,当你盘算出车次和时间之后,是不得逐条线路抢票?抢票是帮助你规划线路,你只需要设置终点,ta自动分流到,匹配到合适的车次,这就是单操作变多线程的处理办法;

距离QQ的那个交互6年过去了,依旧没有B端产品可以借鉴这个思路(企业im的一键已读不能算哈,这个借鉴不高级),其实很多工作场景下对多线程自动化的工作需求比比皆是,比如很多企业内部上传文件的时候,上传一个等一会,且不说有多么低效,更重要的是工作的节奏遭到了破坏...

概括起来说,在某些场景下(可能是大部分)并不需要专注过程,关注结果的意义也许更大;

虽说打工人天下无敌,但也扛不住面面俱到,设置好工作起点和终点,分配好精力也是B端产品设计义不容辞的责任,其他无关紧要的过程,只要不出大的差错,就随ta去吧~


2. 新手引导和用户反馈要做巧

不管是 B 还是 C 在新手引导的主流方法,基本上是上来一股脑的/倾其所有的给我展示所有功能,每次都是无奈的狂点下一步下一步;但当用了一段时间,发现功能没认全的时候...我再也找不回来新手引导了,哈,没法复现了,这尼玛应该是最糟糕的体验了吧!基于此我建议新手引导要与内容场景相结合,通过场景牵引的方式达到学习操作的目的;举个用户评分的例子:

总之减少用户试错,也必定可以极大优化用户体验。


总结一下

特殊情况影响让今年是企业产品高速发展的一年,各种各样的企业赛道号角都已经吹响,拼功能的年代已经过去,体验有可能是决定购买决策的关键点;所以在不改变功能和底层技术的情况下找到体验突破口是对业务最大的贡献;另外希望别过度迷恋所谓的行业标准方法,试着打破壁垒,站在“产品体验架构师”的角度上才能一览众山小,加油~

文章来源:UI中国  作者:负能量补给站

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

UI设计-个人集锦

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏



转自:站酷

作者:Lyxi106


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档