首页

界面如何搭配高质量图片

资深UI设计者

使用图片作为背景

这里的图片选择要突出核心内容且一定要高质量,不要选择杂乱无章或与主题无关的低质量图片

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片于背景进行融合

结合页面表达需要,选择合适的配图并做融合或出界的设计,会让画面极具吸引力和强烈的设计感。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将高质量的图片紧密的放在一起,不留任何间距

当画面主要以高质量图片吸引用户注意时,尽可能的利用更大展示面积,这样会显得更加高级和有视觉冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方添加色块

这里的色块要注意跟图片的主色调保持相近,可以直接吸图片上的颜色然后找找邻近色就好了,色环上 30°区间内的颜色就比较和谐。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方/上方增加图案或形状

这里的形状建议不要太过于复杂,用一些基本图形就可以,比如圆点、方块矩形之类的,增强画面的形式感

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方或上方增加文字、图案或不规则形状

这里的文字、图案或不规则形状跟上面的技巧类似,都是起到装饰的作用,但文字的话有时候还要注意识别性,比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切到文字或形状中

这个很好理解,就是以文字或形状作为遮罩,增加画面的设计感,文字尽量选择粗体

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片周围增加一个非常窄的边距

这个技巧可能跟第 3 条有些冲突,其实这 2 个方法都是可以的,要根据页面具体的排版情况灵活使用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片上增加颜色层

这个技巧也比较容易理解,一般会选择饱和度较高的颜色应用在充满活力的页面上,增加画面的冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在彩色叠加到图片中的一部分上

这个技巧跟上面的有些类似,只不过是以小面积叠加的形式,颜色一般选择品牌色或主题色,与背景尽量有较大反差会更加容易出彩。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切成其他形状

这个方法有一点需要注意的就是剪切的形状不要过于复杂,一般用基础图形就好

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

以上,就是我总结的一些可以用来操作 UI 图片的实用方法,这些方法可以使得作品变得更加有视觉感也更加专业。

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

文章来源:优设  作者:彩云Sky

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

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

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



B端图标如何设计和应用

资深UI设计者


1.1 图标的主要类型


理解图标,首先关注的是图标本身的类型,在整个 UI 体系中,图标基本就分成3个大类:



工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解

装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于节日活动中

启动图标:产品的启动图标,即用来在系统中打开该产品的图形按钮,基本以自身 LOGO 为主


在 B 端项目中,应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。但出现的少,不代表没有,解释工具图标前,我们先优先讲解下装饰和启动图标在什么情况下会出现。


其中,SAAS 类服务就有很多会重点强调品牌、情感化设计的案例,例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。



启动图标则会应用在一些比较大型的项目里,当项目出现了很多下级功能模块或类似插件的体系时,就会采取使用应用图标的方式作为入口。


比如 Figma 也是一个 B 端工具,它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品,一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求,就自然而然会用到启动图标了。



最后,就是我们熟知的工具图标了,前两种图标,在前期画不好不要紧,毕竟这类规格的产品会有经验更丰富的设计或总监坐镇,新手当个切图仔即可……


但是工具图标,重要性就不言而喻了,B 端项目对工具图标的需求非常大,几乎每个组件中都会包含图标。



虽然今天网上有非常丰富的图标素材库,但在形式各异的 B 端项目里依旧是供不应求的,各种行业特有的功能、实物、隐喻,只能设计师自己完成。


B 端设计师在图标设计领域的主要工作,就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。


1.2 B端工具图标的风格


工具图标的应用主要包含两个部分,线性图标和面性图标。



这里再提图标风格,不是把以前的知识点重新讲一遍,而是要强调 B 端图标的特殊性。和 C 端相比,B 端图标的实用属性更高,并不需要过多凸显本身的视觉风格。


所以,工具图标中,使用大量渐变、插画、投影的类型都要排除掉,它们对 99.9% 的项目都只会造成体验的负影响,不要被网上的追波风飞机稿给带偏。



适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。



很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢?答案是没有差异。


线性和面形的使用,纯粹看设计师在当前场景判断哪个合适用哪个,只要保证对应图标风格统一即可。


不过如果遇到一些比较特殊的情况,比如要表现各类设备的复杂图标,那用线性的做法还是相对合适和简单一点。



1.3 图标的统一性规范


对 B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。


我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。



这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,这些特征包含了:

  • 粗细一致:首先使用统一的描边、线段粗细参数

  • 圆角一致:使用一致的圆角数值,不要一下尖角一下圆角

  • 透视一致:使用接近的透视角度,不要有的侧视有的正视图

  • 大小一致:视觉的大小保持一致,有均衡的大小感受


如果不能保证统一性的基本要求,那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标,它们的细节完全不一样,统一性当然无从谈起。


而让整套图标保持统一性,是相当有难度的,其中最难的一点,就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸,但不代表图标实际图形的长宽数值是完全一致的。


几何图形对视觉有一定的欺骗性,有不同的大小体验,比如下方案例(鱿鱼游戏乱入?):



所以,基于这样的特性,每个图标本身都包含了两层属性,图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小,是透明白的,排版的时候以这个尺寸作为实际的边缘来测量。



而视觉尺寸,则是在占位尺寸下图标图形的实际大小,这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的,我们用占位尺寸包裹它们来方便我们进行统一的应用。



所以,使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然,不同的素材,这个留白也是有区别的,下一个小节就会解释。


最后要声明一点,一套项目中可以包含多个规格(2-5个)的工具图标,比如导航用的图标比普通工具图标更复杂一点,设计师只要保证每种规格保持的统一性即可。


1.4 图标的栅格系统


图标越多,大小的控制越困难,所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。


在 Ant 的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。



背景层,即图标展位尺寸,需要先确定出这个元素的大小,然后才是里面的绘制区域。通常,栅格系统会为边缘预留 1-4 像素的内边距(出血位),正所谓四周留一线,日后好相见。


格线层,则是使用的栅格线段,也是最重要的部分。格线层通常由 4 个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。


这四个图形的长宽大小不一,原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列,就可以发现它们的视觉大小非常接近。



这些格线的作用,就是提前帮我们确定好视觉比例,帮助我们快速绘制相同图形类型的图标。



但是,不是完美符合这四个图形要求的图标该怎么办,总不能格线把所有轮廓都给你实现出来吧?


格线的另一层作用,也就是最重要的作用,其实是一个用来做测量的工具,而不是轮廓依据。在几何视觉差中,最基础的大小原理是占用面积越大的图形,尺寸感受越大。所以,长宽一致的正方形大于圆形,圆大于三角形。


所以当我们绘制的非常规图形,和类似格线进行对比时,长宽缺少的一侧,就要由另一侧增加数值来填补它的面积。


比如下图 Ant 官方的电脑图标,它的宽是横向矩形,但是中间区域面积较小,所以增加了高度进行平衡。



再看一些其它的案例



这一步没有固定的参数使用技巧,设计师需要将完成的图标置入到其它图标旁边进行调试,确保尺寸是合适的。

格线只是一个图标大小设置的参考工具,一切以最终效果为标准。





理解完图标的基本规范,就到图标的使用逻辑了,解决一些常见的设置误区。


2.1 图标应该做多大

图标该做多大的,这是目前被问到最多的问题。本来应该是非常简单的一件事,但很多工作多年的设计师也搞不清楚。


仔细捋了捋,罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。



要重点强调,Ant 设计图标的意图,和一般项目的是完全不同的。Ant 作为一套庞大的开源项目,它的图标核心特征之一就是 —— 适应性


这些图标要被应用到各种不同的设备、显示器、系统中,图标尺寸会用多大,在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成,后续实际应用中的缩放、匹配也就越容易,适应性越高。


但是,在我们自己的项目中,这种做法是完全没有必要的,1024 图标的负面影响包含:

  • 像素数过多使得数值的制定难度大大提升,不管是元素尺寸还是描边粗细

  • 矢量图形源文件进行缩放很容易发生错位,提前轮廓化会破坏源文件

  • 缩放图标后描边的数值往往会出现非整数和 0.5 的状态,虚边问题严重


在常规项目里,一套项目是可以包含不同尺寸和规格的图标的,而不是我们做一套相同风格的图标在整个应用中无差别使用。


这也意味着,每个图标在产品中的使用场景通常只有一个尺寸,不需要去面临缩放的情况。即使需要缩放,也只是这套图标中的少数几个需要,或者相对特殊的项目。


所以,图标尺寸设定,就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可(尽量以4的倍数为标准)。



2.2 素材的正确使用方法


我们知道图标的素材非常丰富,不管是 Iconfont、IconPark 还是 Iconsearch 等网站,都提供了海量的素材。但是只要稍微专业点的项目,往往素材库都满足不了,部分规格的图标还是需要我们自己重新绘制。


所以说图标素材就完全没用了吗?当然不是。


图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现:

  • 参考图标的具体尺寸在哪个数值最合理

  • 参考当前场景使用面性还是线性的风格更合理

  • 参考图标的设计风格是圆还是尖锐更合理

  • 参考相关隐喻的图形样式哪种更合理


在项目的界面设计阶段,我们一向建议优先使用外部的素材,尤其是 IconPark 这种比较统一,还可以快速调节图标样式的工具网站。



这个过程即使素材找不到和寓意一致的也没关系,用相近的图标替代就可以。等到页面布局基本完成以后,最后再集中精力对需要绘制的图标重画一遍(甚至是在开发阶段绘制)。


通过别人的图标来快速匹配尺寸、风格、样式,会帮助我们节省非常多的时间,也有助于我们设计出更专业、美观的图标。


另外,就是针对项目一些偏小尺寸的通用图标,就可以比较放心的应用素材,例如翻页的左右、更多、下拉、搜索等等。



2.3 图标的色彩和状态


图标的尺寸、样式都确定了,最后就是关于图标的色彩和不同状态的制定了。


前面讲过,B 端项目对图标的装饰属性没有那么迫切,所以正常情况下,太花哨的图标是要尽量避免的。彩色、渐变色、投影,都不应该在这个情况下胡乱使用。


常规的图标只要使用中性色即可,而需要特别对待的图标,色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。


当然,如果项目涉及到一些特殊的工具图标,类似工厂、工业领域表达实体设备的拟物图标,可以打破这个原则。但是,同样避免这套拟物图标的每个图标用色不同,尽量只使用 3 种以内的颜色完成拟物的填色。



同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现,部分图标会承担按钮的功能,包含默认、选中两个基本状态。


普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。



高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。





完成所有图标的设计以后,最后一步就是切图和导出了,这决定你的图标能不能被正确运用到线上项目中。


3.1 图标的收纳和命名


在一套专业的 B 端项目中,已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里,而是在规范页面中有统一的整理和收纳。



这种做法的流程是,先在软件的规范库中创建对应的图标组件( Symbol / Compoent ),然后再在具体页面中应用,方便后续的统一管理和修改。


而在这个过程中,我们也需要对图标有正确的命名方法,来确保团队调用、检索图标的效率。通常,我的图标命名规范如下:

尺寸 / 类型 / 图标名-状态


示例:

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认


“/” 号的引用主要是方便软件中对组件层级进行划分,而我调用图标的规则势必是先从尺寸开始,再选择对应规格,最后类型和状态。


提前命名也是方便后续我们切图和导出,但要提及一点,图标的命名不要追求英文化,因为我们的词汇量不可能实现正式的英文命名规则,只会写一堆大家都看不懂的单词。


而开发在使用我们的图标切图时,也不会用我们之前取的命名,会根据自己的命名习惯重新命一遍,写个让他能看懂的名字远比用乱七八糟的英文强


3.2 图标的切图格式


接下来,就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片,然后上传蓝湖发给开发自生自灭了,这是一个非常不合理的操作。


再或者,强行使用 Fonticon 格式,而不管实际情况如何,造成最后实现效果完全不同步或实现不了。


切图是通过前端调用并在浏览器中进行显示的图形,而要被浏览器正常显示,就有必要了解适合使用的切图格式。


图片的格式包含位图和矢量两种,位图是通过记录像素色值的图形格式,假设一张图是 100*100 像素,那么记录 1W 个像素点的色彩,所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式,可以支持自由缩放。


理论上,矢量格式是最佳的图标切图格式,但是它的限制同样有很多,例如:

  • 无法记录渐变色

  • 导出轮廓容易有错误

  • 无法记录拟物图形

  • 无法记录投影元素


前面说过,普通项目中同一图标是很少出现一会儿大一会儿小的需求,所以矢量最大的特征无损缩放,往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题,而不是网页端的基本使用。



当一套项目中出现了矢量格式无法覆盖的图标时,那么即用矢量切图,又用位图,就会显得非常的混乱。只有类似 LOGO 等图形元素,才需要考虑 SVG 格式,而不是一看到图标就上。


所以,最适合切图的格式就是位图的 PNG 格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合,而这是其它大多数位图格式不具备的特征。


当每次项目完成以后,并不需要通过蓝湖来实现切图的导出,如果切图文件分散在各个项目页面里,那么一定会有很多图标被遗漏,尤其是图标的不同状态切图。


所以,最理想的切图形式,就是将所有图标完成整理和命名以后,一起框选,然后导出成 PNG 格式,再同步给程序员即可。






以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆,更新到原子核系列课程中去,会有更细节的案例说明。

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

文章来源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端产品之权限设计(RBAC权限模型)

资深UI设计者


一、前言


随着互联网的快速发展,B端行业也逐渐崛起,很多企业管理中使用的软件我们通常称其为B端管理系统,而在B端系统中“权限管理”是必不可少的功能,不同的系统中权限的应用复杂程度不一样,都是根据实际产品以及需求情况而设置合理的权限。而我们现在对于权限的设置基本上都是建立在RBAC权限模型上的、扩展的,下面我会通过介绍RBAC权限模型的概念以及结合实际业务情况列举权限设置的应用。






二、什么是RBAC权限模型?


RBAC是Role-BasedAccess Control的英文缩写,意思是基于角色的访问控制。RBAC认为权限授权实际上是Who、What、How的问题。在RBAC模型中,who、what、how构成了访问权限三元组,也就是“Who对What进行How的操作,也就是“主体”对“客体”的操作。其中who是权限的拥有者或主体(例如:User、Role),what是资源或对象(Resource、Class)。


简单的理解其理念就是将“角色”这个概念赋予用户,在系统中用户与权限之间通过角色进行关联,以这样的方法来实现灵活配置。


RBAC其实是一种分析模型,主要分为:基本模型RBAC0、角色分层模型RBAC1、角色限制模型RBAC2和统一模型RBAC3。


RBAC权限模型是基于角色的权限控制。模型中有几个关键的术语:

  • 用户:系统接口及访问的操作者

  • 权限:能够访问某接口或者做某操作的授权资格

  • 角色:具有一类相同操作权限的用户的总称





1)RBAC0

RBAC0是RBAC权限模型的核心思想,RBAC1、RBAC2、RBAC3都是在RBAC0上进行扩展的。RBAC0是由四部分构成:用户、角色、会话、许可。用户和角色的含义很简单,通过字面意思即可明白,会话:指用户被赋予角色的过程,称之为会话或者是说激活角色;许可: 就是角色拥有的权限(操作和和被控制的对象),简单的说就是用户可使用的功能或者可查看的数据。


用户与角色是多对多的关系,用户与会话是一对一的关系,会话与角色是一对多的关系,角色与许可是多对多的关系。






   

2)RBAC1

RBAC1是在RBAC0权限模型的基础上,在角色中加入了继承的概念,添加了继承发的概念后,角色就有了上下级或者等级关系。



举例:集团权责清单下包含的角色有:系统管理员、总部权责管理员、区域权责管理员、普通用户,当管理方式向下兼容时,就可以采用RBAC1的继承关系来实现权限的设置。上层角色拥有下层的所有角色的权限,且上层角色可拥有额外的权限






3)RBAC2

RBAC2是在RBAC0权限模型的基础上,在用户和角色以及会话和角色之间分别加入了约束的概念(职责分离),职责分离指的是同一个人不能拥有两种特定的权限(例如财务部的纳入和支出,或者运动员和裁判员等等)。

用户和角色的约束有以下几种形式:

  • 互斥角色:同一个用户在两个互斥角色中只能选择一个(也会存在一个用户拥有多个角色情况,但是需要通过切换用户角色来实现对不同业务操作)

  • 基数约束:一个用户拥有的角色是有限的,一个角色拥有的许可也是有限的

  • 先决条件约束:用户想要获得高级角色,首先必须拥有低级角色


会话和角色之间的约束,可以动态的约束用户拥有的角色,例如一个用户可以拥有两个角色,但是运行时只能激活一个角色。




例如:iconfont和蓝湖的用户与角色就采用了约束的概念,超级管理员只允许只有一个







4)RBAC3

RBAC3是RBAC1与RBAC2的合集,所以RBAC3包含继承和约束。








二、为什么要引用RBAC权限模型?


RBAC中具有角色的概念,如果没有角色这个概念,那么在系统中,每个用户都需要单独设置权限,而系统中所涉及到的功能权限和数据权限都非常多,每个用户都单独设置权限对于维护权限的管理员来说无疑是一件繁琐且工作量巨大的任务。


而引入角色这个概念后,我们只需要给系统设置不同的角色,给角色赋予权限,再将用户与角色关联,这样用户所关联的角色就直接拥有了该角色下的所有权限。



例如:用户1~用户8分别拥有以下权限,,不同用户具有相同权限的我用不同的颜色做了区分,如下图:




在没有引入RBAC权限模型的情况下,用户与权限的关系图可采用下图的杨叔叔展示,每个用户分别设置对应的权限,即便是具有相同权限的用户也需要多次设置权限。





引入RBAC权限模型及引入了角色的概念,根据上面表格的统计,用户1、用户3、用户5、用户8拥有的权限相同,用户2、用户6、用户7拥有相同的权限,用户4是独立的权限,所以我们这里可以根据数据统计,以及实际的需求情况,可以建立三个不同的角色,角色A、角色B、角色C,三个角色分别对应三组用户不同的权限,如下图所示:




对应的上面的案例表格我们就可以调整为含有角色列的数据表,这样便可以清楚的知道每个用户所对应的角色及权限。




通过引用RBAC权限模型后,对于系统中大量的用户的权限设置可以更好的建立管理,角色的引入让具有相同权限的用户可以统一关联到相同的的角色中,这样只需要在系统中设置一次角色的权限,后续的用户便可以直接关联这些角色,这样就省去了重复设置权限的过程,对于大型平台的应用上,用户的数量成千上万,这样就可避免在设置权限这项工作上浪费大量的时间。







三、引入用户组的概念


我们依旧拿上面表格案例举例,虽然前面我们应用的RBAC权限模型的概念,但是对于大量用户拥有相同权限的用户,我们同样的也需要对每个用户设置对应的角色,如果一个部门上万人,那么我们就需要给这个部门上万人分别设置角色,而这上万其实是具有相同的权限的,如果直接采用基础的RBAC权限模型的话,那么面对这样的情况,无疑也是具有一个庞大的重复的工作量,并且也不利于后期用户变更的维护管理,那么针对相同用户具有相同的权限的情况,我们便可以引入用户组的概念。


什么是用户组呢?用户组:把具有相同角色的用户进行分类。


上面我们的数据表格案例中的用户1、用户3、用户5、用户8具有相同的角色A,用户2、用户6、用户7也拥有相同的角色B,那么我们就可以将这些具有相同角色的用户建立用户组的关系,拿上面的案例,我们分别对相同角色的用户建立组关系,如下:

用户1、用户3、用户5、用户8→建立用户组1

用户2、用户6、用户7→建立用户组2


因为用户4只有一个用户,所以直接还是单独建立用户与角色的关系,不需要建立用户组,当然尽管只有一个用户也是可以建立用户组的关系,这样有利于后期其他用户与用于4具有相同的角色时,就可以直接将其他用户添加到这个用户组下即可,根据业务的实际情况而选择适合的方案即可。




通过案例表格的变化我们就可以直观的看出权限设置变得清晰简洁了,通过第用户组赋予角色,可以减少大量的重复的工作,我们常见的企业组织、部门下经常会出现不同用户具有相同角色的情况,所以采用用户组的方式,便可以很好的解决这个问题,给具有相同权限的用户建立用户组,将用户组关联到对应的角色下,此用户组就拥有了此角色下的所有权限,而用户是属于用户组的,所以用户组下的所有用户也就同样的拥有了此角色下的所有权限。一个用户可以属于多个用户组,一个用户组也可以包括多个用户,所以用户与用户组是多对多的关系。






四、引入权限组的概念


权限组与用户组的原理差不多,是将一些相对固定的功能或者权限建立组的关系,然后再给此权限组赋予角色,目前我所接触的B端项目中使用权限组的概念的比较少,可简单的看一下关系图










四、功能权限和数据权限


B端系统中一般产品的权限由页面、操作和数据构成。页面与操作相互关联,必须拥有页面权限,才能分配该页面下对应的操作权限,数据可被增删改查。所以将权限管理分为功能权限管理和数据权限管理。


功能权限管理:指的是用户可看到那些模块,能操作那些按钮,因为企业中的用户拥有不同的角色,拥有的职责也是不同的。

数据权限管理:指的是用户可看到哪些模块的哪些数据。


例如:一个系统中包含多个权责清单(清单1、清单2、清单3),系统管理员能对整个系统操作维护,也就可以对系统中的所有清单都能操作(增、删、改、查);假如分配给总部权责管理员的是清单1,那么他将只能对清单1进行操作(增、改、查);普通用户也许只有查看数据的权限,没有数据维操作的权限(查),这里的操作是系统中所有可点击的按钮权限操作,列举的增删改查只是最常见的几种操作而已。









五、实战案例总结


我目前所做的项目是一个关于权责管理平台的B端系统,关于系统中的权限需求我这里简单的介绍一下,并采用上面所总结的RBAC权限模型对实际业务需求进行设计分析:

01:不同的区域管理员的权限各不相同(说明会存在不同的用户具有不同的权限,那么我们就可以采用角色对其进行规范)

02:有大量的用户具有相同的权限(例如组织、部门等)(说明存在相同权限的用户,那么我们就可以采用用户组的概念)

03:上级管理员拥有下级人员的所有权限(说明存在继承关系)

04:不同用户所看到的数据和能编辑的数据不同,一些机密性的数据只允许部分人员看或者编辑(说明存在约束)


05:会存在临时性的用户(说明需要支持新建新角色)

06:同一用户会存在多个角色(多角色求合集或者切换用户角色)



简单说明一下,我所做这个项目的人员管理是在另外一个系统中管理的,权责平台只是调用另外一个平台的组织结构树即可,所以权限设置模块没有做人员管理的模块


根据上面对需求的分析,整个权限管理模块中我们需要建立用户组管理模块、功能角色管理模块、业务(数据)管理模块、权限设置模块,下面就对每个模块做更细致的页面展示设计分析



1)用户组管理模块

用户组管理主要是对具有相同权限的用户分类建组,所以页面中我们需要有新建用户组的功能,每个用户组下我们需要关联对应的组织、部门、岗位、人员,让这些具有相同权限的用户在同一个用户组下,如下图:





2)功能角色管理模块

B端项目中一般会建立几个默认的角色是不支持用户修改、删除的,例如最常见的系统管理员,而也会需要有其它角色的需求,所以此模块需要支持用户新建角色,功能角色是对大模块的页面和操作的权限设置,操作权限的颗粒度可以细分到每个页面的每一个按钮的操作,如下图:






3)业务(数据)角色管理模块

业务角色是对页面中的数据饿查看的权限设置,而对于系统中的普通用户查看系统的权限是常用不变的,所以我们考虑默认有一个普通用户的角色,其它业务角色用户根据实际需求情况自行建立即可,由于我们权责系统的特殊性,我们需要满足用户对部分数据可编辑且对部分数据的字段可编辑,按照常理来说,编辑的操作行为是属于功能权限的设置,但是这里的操作行为是建立在数据的基础之上的,所以如果把这里对数据的操作权限在功能角色模块中设置,就会显得混乱,所以我们直接在业务角色模块中加入对数据的可编辑权限,这里在设置的时候更方便灵活





4)权限设置模块

权限设置模块只需要设置权限分配的对象,选择对应的用户或者用户组,关联对应的功能角色和业务(数据)角色即可,这样就形成了一条完整的闭环的权限设置






对于06同一用户会存在多个角色,我们系统是采用切换角色的模式来实现的,因为不同角色中存在互斥的情况,以及所涉及的领域不同,操作权限差距较大,求合集不利于控制权限,所以只能采用切换的模式实现

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

文章来源:站酷  作者:设计小余
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


竞品分析:抖音VS快手

资深UI设计者

随着用户体量的变化和短视频平台的规范化,抖音的产品定位也相应的变成了“抖音,记录美好生活”。在往后用户量不会再有大规模变化的增长,而外部竞争例如快手等依然不断增长的情况下,抖音是如何发展稳固自己的短视频“一哥”地位呢?

一、短视频行业发展现状

短视频行业在2016年之后呈井喷式增长,移动端时代加速了短视频行业的发展,近年短视频平台不断在商业模式上进行探索,一方面成为创新性新媒体营销平台,另一方面也结合直播带货迎来新的增长点,短视频营销的市场模式逐渐受到认可,也成为短视频媒体平台的主要收入来源。

数据显示,2020年中国短视频市场规模已达到1408.3亿元。

抖音、快手是目前短视频行业头部平台,但抖音在社交和移动端支付等业务发展加持下,规模优势逐渐抛开快手。关于短视频用户最常使用的产品调查结果显示,抖音以70.9%的占比排名第一,快手占比52.3%。

面对竞争,快手积极寻求资本化,但其营收快速增长的同时伴随着亏损持续扩大,高收入由高成本带来,商业转化能力并没有较大提升,长期来看发展模式存在风险。

抖音及快手在短视频领域头部优势明显,快手发展起步早,用户基础深厚,且积极发展电商和游戏直播等业务,成为头部典型代表;抖音虽然发展时间较短,但追赶势头明显,入驻KOL数量多,带货推广情况良好,也成为用户最多的短视频平台。

数据显示,受访用户最常使用短视频平台排名中,抖音以45.2%的占比排名第一,快手和哔哩哔哩分别占比17.9%及13.0%,排名第二及第三。

其他字节系短视频产品如西瓜视频、抖音火山版等占比也达到4.3%和1.6%。抖音凭借其内容分发机制优势成功俘获用户的青睐,成为用户最常使用的短视频应用;同时,快手用户黏度较低,逐渐被抖音拉开差距,并且受到其他平台追赶。

1. 政治因素

2014年8月,中央安排部署新措施,宣布大力实施创新驱动发展战略, 积极推动传统媒体数字化、网络化、智能化发展。2016年,为贯彻中央部署,各种创新型短视频app的上线了,短视频形式受到越来越多媒体和创作者的关注。这对于短视频app市场无疑提供了一个巨大的市场开发空间。

2. 经济环境

短视频的快速传播使其市场规模也实现了高速扩容,各大短视频在创造巨大流量的同时,其市场规模也在飞速增长。根据中国网络视听节目服务协会数据,2018年我国短视频行业市场规模达到467.1亿元,较2017年的55.3亿元增长744.7%。

数据显示,2020年中国短视频市场规模达到1408.3亿元,继续保持高增长态势,2021年预计接近2000亿元。近年短视频平台不断在商业模式上进行探索,一方面成为创新性新媒体营销平台,另一方面也结合直播带货迎来新的增长点,市场仍将进一步发展。

3. 文化环境

截至2018年12月底,我国短视频用户规模达6.48亿,同比增长58.05%,高出长视频用户0.36亿,网民使用比例达78.2%;2019年6月,中国短视频行业的用户规模达8.57亿人。

同时,短视频用户使用时长占总上网时长的11.4%,超过综合视频(8.3%),成为仅次于即时通讯的第二大应用类型。

2020年,短视频月总使用时长同比上涨1.7倍,全面超越在线视频,成为仅次于即时通讯的第二大行业。在移动互联网总使用时长增量中,短视频占了33.1%,即时通讯占了18.6%,综合资讯占了9.7%。2020年已超7亿人,预计2021年增至8.09亿人。

4. 科技支撑

  • 智能手机普及和网络环境的优化,提高了短视频用户的流畅体验,成为短视频用户规模增长的直接动力。
  • 基于人脸识别和AR等技术在短视频上的应用,提高了短视频用户体验的丰富性和趣味性,进而增加用户使用时长,强化用户粘性。
  • 大数据,图像识别等技术推动内容数据和用户数据更加精细化,进而试下内容和用户的精准匹配,极爱去哪个用户短视频内容获取的个性化体验,增加用户忠诚度。

二、竞品分析

1. 基础信息

2. 产品迭代

通过以上两个产品历史迭代情况可以看出来,双方在功能上都越来越相同,这也是基于用户体验改进和市场变化而衍生出来的:

抖音:可以明显的看到抖音的更新重点放在了用户体验和更新社交属性上,除了优化产品,修复问题,多次大量上架新增各种特效、道具、滤镜和活动,提供了工具辅助内容制作,大大提高了其创造性、便利性、娱乐性和用户生产内容的动力。

另外,抖音的“朋友”板块新增了产品的社交属性,让其定位多元化,不局限于单一的短视频功能,也提高了用户使用产品的可能性。基于互联网+的大数据时代,抖音也不断更新算法,根据用户日常体验,推出了智能搜索和发现优化。

快手:由于产品定位不同,所以快手并没有跟抖音一样更新丰富的滤镜、道具等功能,产品更新日志绝大多数都是“问题修复以及性能提升”和“优化用户体验”两条。

在8.0.0的版本是快手产品更新最为关键的一次,新增“多入口内容”、“沉浸式上下滑体验”、“瀑布流”,此次更新之后快手用户的日均使用app时间提高了30%。而在之后的更新中,上下滑体验也被应用于发现页和同城页,旨在留住用户,获取用户使用时间,开发新用户。

3. 产品用户

1)用户地域分布

抖音:

source:百度指数

快手:

source:百度指数

数据显示,两个产品的用户地域主要都是分布在华东、华南地区,呈现由东到西、由南到北、由沿海到内陆扩散的局势。

这很大一部分程度上是因为沿海地区的经济发展迅速、生活节奏快、工作压力大导致其居民易产生焦虑、焦躁、空虚等现象,表达轻松、搞笑、美好形象的短视频的出现可以让他们有短暂的放松时间和对自己的精神压力的部分释放,这极大地促使他们对短视频App有了更高频率的使用。

虽然两款产品的用户地域分布大相径庭,但是还是有一定的区别:快手相对于抖音其用户比例中北方用户占很大一部分,比如山东、河北等地。

而抖音则更偏向南方用户,这主要是因为用户性格跟产品定位的契合度的关系。北方人性格豪爽,重情重义,更多的偏爱生活化的东西,喜欢真情实感接地气的表达真善美;南方人追求精致、美好的生活的状态。差异化决定了两款产品有不同的适用人群。

2)年龄和性别分布

抖音:

source:百度指数

快手:

source:百度指数

数据显示,两款产品都具有明显的年轻化特点,用户人群年龄段主要分布在20~39岁之间,这一部分群体主要是90后、00后,新社会下成长起来的具有新思想的自由个体,接受新事物的能力强,富有创造性,他们可以快速获取并进行信息更替和传播。

就成长层面来看,这部分人群也处在人生拼搏的阶段,压力相对较大,更容易产生焦虑的心理状态,短视频可以暂时性在一定程度上减轻他们的焦虑感,也可以丰富他们的生活,满足他们足不出户在家里就可以了解热点资讯的需求。而该部分人群也逐渐走向社会经济舞台中央,客观上也有利于抖音带货等商业模式的开展。

3)用户兴趣

抖音:

source:百度指数

快手:

source:百度指数

可以看出来两款产品用户在兴趣爱好上基本一致,影视音乐、软件应用、资讯类的视频播放量较高,其他各分类项目的占比也比较稳定,影视音乐一直处于领先地位。

其中医疗健康的占比增速最大,这跟近几年的新冠疫情有直接的关系,也由于生活水平的提高和理念的进步,人们更加关心自己的身心健康。

总的来说,两款产品的用户差距在逐渐缩小。

抖音:最初的目标用户是潮流酷炫的年轻群体,平台最初的内容运营是往偏时尚方向布局,吸引高校年轻人进行创作,最早赞助的综艺是“中国有嘻哈”这类以“潮为特征的节目。年轻的一二线地区的时尚人群是抖音的种子用户。之后随着用户数的增长,平台内容逐渐丰富,用户群体(覆盖区域、年龄分布)等分布更加均匀。

快手:快手最初没有刻意进行内容引导,但是其普惠的流量分发方式对当时缺乏针对性的社交、娱乐产品的下沉市场用户有极大吸引力,因此快手的种子用户是由下沉市场(尤其是北方地区)的用户构成。但是由于快手之后在垂直领域的突破,目前快手的用户结构也比之前更为均衡。

4. 产品主要功能对比

左:抖音 右:快手

在快手8.0.0版本之后,首页视频也采用了沉浸式上下滑的模式,这一点也是借鉴了抖音的首页,可以更快速直接的提供给用户短视频体验,也更容易留住用户。

点赞方式都采取了双击点赞或图标点赞。

抖音的主页面除了推荐列表,还有“朋友”和“附近”,而快手却把“附近”这一模块放在了底部的标题栏里面。

抖音左上角有专属直播通道;快手放置了个人中心的入口,直播入口则放到了新建页面里。

抖音评论展开视频播放界面维持原状,一部分视频会被评论遮挡;而快手打开评论后,播放界面则会整体缩小至评论上方,虽然不会挡住视频,但是由于太小可能会导致观看效果不理想。

抖音在播放界面左滑会直接进入作者主页查看详细信息,而快手则会拉出作者其他的作品列表,如果要进入作者主页需要点击头像才能进入。

关注图标在弹出页面也会显示,但是抖音的更醒目。

抖音搜索界面有榜单排名可以直接查看热点,方便接触时尚资讯;而快手则放置了各项的分类条目,比较生活化。

抖音搜索栏有扫一扫功能,思维逻辑适合市面上很多app,用户容易适应。

抖音在最新版本里“附近”栏目里新增了“学习”栏目,两者可以切换;附近同城也新增了数据检测和类似“朋友圈”的功能;快手在同城新增了“校友”这一玩法,社交属性大大增加。

抖音在“消息”界面归类了粉丝新增、互动消息、系统消息和私信四种基本通知,“可能认识的人“被归类到了”粉丝‘中;快手直接在“消息”界面推荐了可能认识的人。

抖音群聊归类在“消息”;快手把群聊放在了个人主页。

抖音的辅助拍摄工具库(滤镜、特效等)相比于快手来说大很多,玩法也多样。

总的来说,在浏览方式上,快手已经借鉴了抖音的“沉浸式”上下滑动的模式,但仍然保留了一些自己的东西,但是就作者体验来看,产品形象为简洁、方便的快手,反而越来越有一些画蛇添足的味道:

  • 在体验过程中,左滑的新作品小界面和评论播放界面缩小都由于尺寸太小而造成观看效果不佳
  • 直播入口不能直接进入而需要多次点击不太方便
  • 消息界面太过冗杂

三、盈利情况

消费者提出需求,生产者根据需求研发产品、完善产品、更新产品,而产品必须要在满足消费者需求的同时给创作者带来利润,才能形成一个完整的闭环。其中产品质量决定了它所能带来的利润,而利润又反过来直接决定了产品的走向。

下载量对比:

source:七麦数据

数据显示,在去年11月到今年10月的时间里,抖音的下载量虽然处于波动状态但是一直领先于快手的下载量,平均保持在180000左右,而快手一直保持在100000左右起伏不大。

收入量对比:

source:七麦数据

可以很明显的看到,抖音的收入几乎是快手的3~4倍,而短视频平台的收入主要来自于广告收入、直播打赏收入和电商分成收入三个方面,而在其中,广告和直播打赏的收入占总体收入的89%,盈利模式和收入结构不同:抖音重仓广告VS快手重仓直播,这也反应了其商业变现成熟,但是多元化程度不够的弊端。

1. 广告变现

抖音广告收入占比80%:抖音中心化的分发机制,导致特别容易打造爆款,特别容易聚集流量打造名声,因此广告占有很大的优势,而广告的盈利模式有很大的利润率,所以抖音的80%的收入都来自广告。

抖音收入来源分配比重

2. 直播打赏

快手直播收入占比60%:快手倡导粉丝经济和社区文化,使得KOL与粉丝之间的粘性很大,因此做直播的利润空间就显得非常大,虽然没有广告收入的利润多,但是收益平稳,也是快手的主要盈利方式。

快手收入来源分配比重

3. 电商分成

短视频电商行业主要有三种运营模式:

  1. 电商平台向短视频平台荐物,商品短视频栏目等内容生产者开始发力。
  2. 电商平台和短视频平台合作,为电商平台引流。
  3. 综合垂直类短视频平台,实现内容分发和购买一体化。

1)产品电商发展历程

抖音:

快手:

可以看出抖音相比于快手更先于铺垫电商业务,而且在之后的产品上线、功能完善更替、迭代升级和营销上面更频繁也更为完善,这也是抖音充分发挥了大数据、大流量的作用。

在2020年10月抖音实现了电商业务的彻底闭环,也奠定了抖音在电商业务上超过快手的基础。

2)服务定位

3)具体分析

生产群体:

快手:头号主播、精通电商的主播达人、公会和线下个体卖家等。

快手的这些电商达人大多有一个共同的特点:粉丝数量在几十到百万不等,有一部分具有一定的带货经验,甚至很多人本身就是淘宝中小店家入驻快手。比起头部网红,她们在直播展示、销售技巧、促进成交等方面有着显著的专业性。

抖音:以网红达人为主.线下商家为辅。

目前在抖音上卖货的主要仍是以网红达人为主。据相关数据显示,抖音达人、网红主播带货的方式以拍摄短视频为主,在视频中放上同款衣服的链接,实现边看边买,但是这也对视频的内容质量有很高的要求。

商品类型:

快手:商品类型多样,涵盖日用品、化妆品、衣服、食品等。

快手主播、用户甚至商家卖的商品五花八门,其上架商品的属性实在跟快手的产品定位及其用户属性不谋而合。

抖音:注重“调性”,商品最多的类型为衣服,而且是潮流穿搭。

抖音仍是很讲究“调性”。相关报告显示,抖音目前卖得最多的商品是衣服。而且是潮流穿搭,配上长得好看的帅哥美女的视频带货,用户很容易被种草安利然后拔草,同时通过补贴和发放优惠券的形式,刺激用户下单。

大局来看两款产品的销售模式是基于其市场定位的:快手用户购买商品,可能更多地是出于对主播的爱和信任,也就是信任电商;而抖音用户购买商品,往往是由于视频的内容足够优质,也就是兴趣电商。

四、总结与建议

总的来看,抖音重分析,内容分发去中心化。抖音在生产内容签约了一批网红、达人,通过MCN机构,持续稳定的输出高质量内容,PGC覆盖范围广,但是如何保证普通用户不丢失掉自主生产内容的积极性,打造PGC+UGC完美结合的体系。

快手内容分发去中心化,重视普通用户的UGC生产力,轻运营。快手得益于三五线城市的下沉用户,而这部分用户在生活中缺少表达的机会,但是具有表达欲望,所以造就了快手的内容生产主力军。

由于当前的网络用户主力军仍是90后、00后,年轻张扬、个性活泼的调性符合抖音的产品定位,再加之其运营的力度、体系的成熟和产业链的完整,所以抖音在大数据、大流量基盘的加持下,牢牢站稳了短视频“一哥”的位置。

建议

  1. 注重内容属性,不论是抖音还是快手不论是视频内容本身的质量还是商品的质量,虽然在大IP的加持下行业异常火爆,但是从长远来看,只有产品本身具有高质量属性,才能获得用户认可;
  2. 未来在电商业务方面必定还会有新的发展,抖音已经有了更为完整的产业链闭环,快手应该加快建设完整体系;
  3. 短视频行业竞争强烈,在不断的迭代出现了很多增值服务,但是应该化繁为简,从用户的实用性和便捷性考虑,这样产品跟用户之间才能保持持续稳定的联系;
  4. 抖音应该促进普通用户的生产创造性,支持UGC内容的生产,避免同质化内容严重。

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

文章来源:人人都是产品经理  作者:Ryan_
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




全面总结图表设计的思路和方法

资深UI设计者

数据成为了日常工作的一大重要角色,越来越多的公司以数据驱动产品进行迭代。但令人困惑的是可视化图表无处不矮,但却给大家带来了误导。作者分享了一些简单的思路与方法,以此来改善这些问题,希望对你有所帮助。


越来越多的公司以数据驱动产品进行迭代,从中我们能看出数据的重要性。

日常工作中,无论是汇报还是设计,都离不开图表的使用。但令人困惑的可视化图表无处不在,往往给人带来误导性,通过遵循下面这些简单的思路和方法可以有效改善这些问题。

一、选择正确的图表类型

选择错误的图表类型,或默认使用最常见的类型,可能会混淆用户对数据产生误解。

一组数据可以有多种表示方式,具体类型取决于用户希望看到的内容。

二、根据正负值确定方向

当数据中出现正负值时,要先确定基线的位置,再确定数据位置,将正值分布在基线上侧(X轴)或右侧(Y轴),负值分布在下侧(X轴)或左侧(Y轴)。

避免在基线的同一侧同时添加正值和负值,造成用户对图表信息理解错误。

三、始终从零开始绘制条形图

单看左侧的条形图,能发现B的值比D的值要多3倍以上,但在右侧从零开始的条形图中,实际差异要小得多。从零开始可确保用户获得更准确的数据展示。

四、折线图使用自适应Y轴

对折线图来说,如果始终将Y轴的比例限制为从零开始,一旦数据波动幅度很小,那整个折线图会看起来很平坦,效果不明显。

折线图主要用来表现趋势,根据给定时间的数据调整比例,并保持折线区域能占到Y轴范围的三分之二。

五、使用折线图时考虑时间间隔

折线图是由一条条小线段连接组成,这些线段展示了在短时间内数据是如何变化的。当时间间隔很大或数据更新不频繁时,就要慎重考虑是否使用折线图。

例如想表示年收入,左侧的两个折线图样式都不太合适,每个月的收入是固定的数字,而折线图展现的数据更像是收入的变化,相反右侧的条形图更适合来展示每月具体的收入。

六、不要使用平滑的折线

平滑的折线图可能看着很舒服,但它们歪曲了背后的实际数据,而且过粗的线条掩盖了真正的节点。

七、谨慎使用双轴折线图

当两组数据出现X轴代表的信息相同但Y轴不同时,为节省空间我们可能会考虑用双轴图。

但大部分双轴图难以阅读,只是感觉图表上有很多数据,但远远没有单个图表展示的清晰。

八、限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时,首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片,可以将这些全部归到“其他”切片中。

九、直接在图表上标注

如果没有正确的标注,无论图表设计的多好看都没有意义。

直接在图表上标注数据或信息对使用者来说更直观,更节省时间和精力。

十、不要在切片上标注

将数值放在切片上虽然很直观,但可能会导致很多问题,例如左侧饼图数值的可读性问题、切片太薄无法添加数值等,对比来看,右侧饼图添加标注的方式更合适。

十一、饼图切片的排序

饼图切片的排序是一个很容易忽略的问题,将饼图切片只是一个开始,通过合理的排序保证用户清晰观看图表才是关键。

常见的排序方法是将面积最大的切片放在12点钟位置,然后按顺时针降序放置第二大的切片,以此类推。

十二、避免随机性

同样的建议适用于其他类型的图表。尽量不要默认按字母顺序排序,将最大值放在顶部(水平条形图)或左侧(对于垂直条形图),以确保最重要的值占据最突出的空间,减少视线运动和阅读图表所需的时间。

十三、避免极端的环形图

环形图,又称为甜甜圈图,是饼图的一种变体,本质是饼图将中间区域挖空,用在多样品间的多种数据的比较中。

虽然环形图腾出中间区域来显示额外的信息,但牺牲清晰度走极端会让图表变得毫无用处。

十四、让数据自己说话

不必要的设计样式不仅会分散注意力,还可能导致用户对数据误解并产生错误印象,图表在设计上应避免:

  • 3D元素、阴影、渐变;
  • 斑马纹、过多的网格线;
  • 装饰性过强的斜体、粗体或衬线字体。

十五、选择与数据性质匹配的调色板

颜色是保持数据可视化有效的组成部分,在设计时考虑3种调色板类型:

  • 分类色板(左)适合显示分类数据,当你想区别不连续且内在没有顺序关系的数据时可以使用这种类型;
  • 连续色板(中)适用于需要按特定顺序放置的变量中,使用色调/亮度或两者组合创建色板。
  • 离散色板(右)是两个连续色板的组合,中间有一个中心值(通常为零)。不同的调色板会传达正值和负值。

十六、无障碍设计

根据眼科研究中心的数据,大约每12个人中就有1个色盲,图表只有在广泛受众可以访问的情况下才是成功的:

  • 在调色板中使用不同的饱和度、亮度;
  • 黑白打印可视化图表,检查对比度和可读性。

十七、注重易读性

确保图表排版在传达信息并帮助用户专注于数据,而不是分散注意力:

  • 选择字迹清晰的字体,避免使用衬线和装饰性很强的字体;
  • 避免使用斜体、粗体和全部大写;
  • 确保文本与背景形成高对比度;
  • 不要旋转文本。

十八、使用水平条形图代替旋转标注

这个简单的技巧可以确保用户能够更有效地浏览图表,而不会使他们感到紧张。

十九、建立图表库

如果你的任务是将交互式图表添加到Web和移动项目中,那么首要考虑问题是将使用什么样的图表?

基于定义的库(Highcharts)进行设计将确保易于实现,并为我们提供大量的交互想法。

二十、超越静态报告

通过更改参数、可视化类型、时间线帮助用户进行探索,得出最大价值化的结论。例如IOS Health结合使用了各种数据表示来发挥优势。



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

文章来源:人人都是产品经理  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



如何提升用户体验

资深UI设计者

现代人的生活离不开应用程序,我们的手机中有着各种各样的app帮我们处理各种琐事。各大互联网公司开发多种应用商店,努力使我们的生活变得有趣,但要想提高整体的用户体验,还需要注意五点,不然再好的app也会让用户放弃使用。


1.禁止使用大段的功能介绍

我们必须要提示一下:如果一个应用程序要在手机屏幕上发挥作用——必须简单。这个应用需要使用冗长的功能介绍,才能让用户熟悉使用起来,那很可能是开发人员在这个版本中设置太多功能。用户并不介意多次更新程序,适应新版本,但他们也不可能为了使用程序而阅读长如圣经般的介绍。


2.牢记用户需求


如果想要急于求成,跳过用户调研,上线新的应用,那么失败的概率会大大增加。大多数应用开发团队都容易犯这样的错误,只拿到了用户发送给支持团队的数据。通过分析数据,就能迅速确定用户所需的功能,使用缺陷等,但是,总的来说,联系支持团队的用户是那些产生挫败感的人;那么99%(或更多)的用户从来没有和支持部门谈过?难道你不愿意让他们一直满意,而是花费时间,只让使用支持功能的1%用户满意?


即使你认为自己了解用户需求,也需要与他们进行沟通。


3.使用屏幕技术


当人们花费了近万元买了一部智能手机时,他们希望能使用手机上的所有功能。所以制作这款手机时没有任何借口在视觉内容上偷工减料(或忽视任何技术能力)。这就是用户花钱的原因,要想提高用户体验,就需要满足用户期望。


4.停用费时的设置向导


设置向导的本意是为用户提供更好的内容,更能让用户获取自己想要的。为了优化用户体验可以让用户填写一些内容,但并不意味着暴露全部隐私。最好在需要时索取,而非提前取得全部数据。


5.减少通知次


每个软件都想要发送通知,但是每一个通知都是必要的吗?每隔两秒钟就有一些应用告知用户一些无用消息,比如谁谁谁又发了微博,谁谁谁上线了,又或者谁谁谁开始直播了,可以根据用户的兴趣选取推送而不是一股脑全部告知用户,所以请尽量减少的通知消息吧!

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

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

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

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

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


B端产品设计规范之数据展示

资深UI设计者


数据展示有哪些?



01.徽标

是收纳消息数量的样式,一般出现在图标或者头像右上角。



02.标签

数据展示里面抽取出来的共性特征,将它们转化为标签。标签样式有线框、带不透明底或者面性。



03.走马灯

相当于c端的轮播图




04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明,也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。



05.气泡卡片

比起文字提示可以承载更多内容,相对弹窗,气泡卡片操作更轻盈。




06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容,提升单个页面整体的扩展性。标签本质上就是内容区的导航。



07.折叠面板

折叠面板可以更好的收纳内容区域,提高页面利用率。可以和表格结合使用,折叠表格部分详情内容,使得纵向空间更节约。




08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。


当笔记本过小,表格展示不全时候,可以固定首尾重要信息进行滚动。


带排序的表头,可对数量或者金额进行排序。


带分组的表格,建议带边框并且用色块区分表头和内容。


单元格可编辑


批量选中时只会选中当前页,因为分页还没加载出来,为了给用户正确的引导,可以给上提示性文案,例如“已选中XX项内容”。


如果当前页批量选中的数据量不满足要求,可以改变分页器,增加当前页数据量,从而增加选项。


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

文章来源:站酷  作者:最多三分糖

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

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

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



如何做好直播设计的体系化复盘?

资深UI设计者

前言

“直播”作为一个大热领域,用户规模早在 2020 年就突破了 5 亿大关,在“直播+”的模式下,电商、教育甚至是医美,都能在直播领域下找到新赛道,并产生持续性获客。但就是这样一个核心领域,具体要怎么分析复盘,却鲜少看到系统化的文章。本文主要是结合我近期参与产品直播项目的思考,总结了自己的一套直播复盘方法论和大家分享。

为什么要做直播复盘?

虽然“直播+”模式已成为行业趋势,但在产品接入直播模块而产生的付费效益又不明显时,其存在的意义和价值仍时常被挑战,因此首要的就是验证其价值;

同时,新领域缺乏可复用的方法论,只有不断探索、优化、沉淀才能促进其健康化生长;

最后,在产品范围下的直播领域,定向吸引的还是产品用户为主,持续挖掘探索直播能为产品开辟的新赛道,为产品带来拉新,是“直播+”模式对于产品的直接价值体现。

如何做好直播设计的体系化复盘?

直播复盘怎么做?

直播具备快节奏性和强竞争性,在兼顾快速复盘的同时,还需要考虑阶段性的整体化的对直播数据进行监控,因此需要将直播复盘分为快速复盘和阶段复盘 2 个大方向。

1. 快速复盘

在直播结束当天或隔天对昨日数据进行快速复盘,此时重点关注单期直播下的直观数据表现和用户反馈。目的是获得沉淀当天直播的经验并快速应用至后续直播中,是一个不断 PDCA 的过程。

在复盘维度上,可以分为数据侧和用户侧:

数据侧中我们重点聚焦本期的数据表现,同时横向对比其他直播期,去明确本期的数据表现

1)横向对比时,需要将直播关注的 3 大核心数据(总人数、最高在线人数、评论人数、在线时长均值)与其他期对比,明确该期直播的“优劣”。

如何做好直播设计的体系化复盘?

当期直播核心数据

2)聚焦本期时,重点关注直播数据的整体在线人数变化趋势,定位到最高在线点,和直播内容拟合,能够帮助我们定位直播的“高光点”。

用户侧中则更关注主播在播、用户在听和答的过程,包含:

  • 直播过程中,用户情绪、反馈异常的节点(如消极发言等),定位用户可能存在的痛点。
  • 固定同学作为“直播观众”时,察觉到的异常问题(如信息衔接不自然等),及时复盘。
  • 在直播间的互动评论中,呼声最高的内容,可以作为后续直播可以“返场”的内容,纳入直播内容需求池中。

2. 阶段复盘

在累计多场直播后,此时最需要的就是阶段性的复盘,从宏观角度对多期直播进行收敛分析,能够帮助我们明确直播对于产品的核心价值,并定位核心用户圈层、吸引点及直播应该要有的“节奏”。

在阶段复盘中,除了数据侧、用户侧外,我们还需要关注市场侧:

数据侧—不同于快速复盘,数据侧我们关注整体宏观角度上直播对产品的价值,以及直播整体的数据表现,热点分布等

1)从直播对产品价值定位来说,在未探索付费的情况下,直播能为产品做的就是吸引新用户,增加用户活跃、延长用户在产品内停留的时长上。

如何做好直播设计的体系化复盘?

价值定位时关注的数据范围

在明确价值后,就应该明确后续要如何把直播做的更好,这里数据上可以分为 2 个大的方向,一是热点分析,二是直播节奏分析。

2)热点分析上,需要从单期、分类、词项拆解上看。首先,单期直播就是简单地对单期直播数据进行排序,找到“好”的直播提炼其特征性;其次,分类分析上关注各类直播数据间的横向对比,能从分类数据对比上,看出哪一类直播更吸引用户;最后,通过对每期直播的标题进行词项拆解,筛除掉无意义的词项,再乘以对应期直播的人数,对每个出现 2 次及以上的词项数据取出其对应的单期直播人数均值,即可定位到用户最关注、最能吸引用户的核心关键词。

如何做好直播设计的体系化复盘?

热点分析

3)直播节奏分析上,得益于阶段性复盘的庞大数据量,我们可以聚类出多期直播聚类下的直播趋势线,在趋势线上,亦关注 3 大核心点 “拉新、增长、流失”。

a. 用户进入直播的高峰期(即新增高峰),可用于定位直播亮点,并对应布局以留住用户

如何做好直播设计的体系化复盘?

用户进入直播节奏分析

b. 通过直播数据排序后的高于中位数直播、低于中位数直播的 2 种直播数据走势的对比,我们能够看出好的直播应有的数据走势应该是什么样的。以我这次分析的直播为例,能够直观看出,“差”的直播在增长黄金期都“爬”的很慢,而在黄金期后直播数据逐渐平缓,“差”的直播数据就成了定局。因此要做的就是在增长黄金期,去尽量促进增长。

如何做好直播设计的体系化复盘?

用户流入流出关系分析

c. 那么在增长黄金期,从产品策略来看,要做的是留住用户?还是尽量去拉新?从数据上,我们有 2 种方式判别,分别是相关性分析和假设分析。在相关性分析中,将新增人数/流失率对标最高在线人数,以数据模型分析其相关性,从相关系数来看哪个指标与最高在线人数相关性最高,即影响最大;在假设分析中,我们可以将“低于中位数”的直播数据中的新增人数/流失率分别对标“高于中位数”直播的数据,其他保持不变,看哪种情况下,最高在线人数是更高,数据是更好的,就可以定位出更应该在哪块发力。

用户侧—要明确直播受众及用户圈层,并针对这部分受众的观看体验,进行服务体验走查,更能够帮我们明确后续业务重心、范围及宣传模式。

在用户圈层上,我们对观众数据清洗,从年龄、性别、地域、渠道等各项维度去定位观众的特征。同时,考虑到直播本身是以产品为载体,其用户圈层基本上与产品本身重合,但会存在一定差异性。因此,此处可以结合 TGI 分析,可以定位到直播用户圈层相较于产品来说的差异点,从而更针对受众进行直播内容调整。

如何做好直播设计的体系化复盘?

用户圈层分析

同时,直播本身因其特殊性质,也可类比至服务体验设计的思维,因此在用户侧分析时,从直播前-中-后 3 个大环节上分析用户行为、需求、痛点、快点,从而定位到各个环节直播优化的机会点,推进优化。

如何做好直播设计的体系化复盘?

直播-体验地图

市场侧—在市场分析时,我们不仅需要关注那些在直播领域做的好的同类竞品,同时也要去多分析在受众群体中,最近的热门话题是什么,有助于后续在宣发时引出直播核心话题,也能够带领我们思考直播的新赛道,以协助产品拓宽其用户圈层。

小结

直播作为互联网新赛道,直播+的模式可用于产品宣发、获客、促活等各个方面,挑战与机遇并存。但正因为是新赛道,也相对缺乏体系化的方法论。本文主要是分享我在工作中沉淀下来的直播复盘方法论,也欢迎大家有什么见解或者想法也可以与我分享。

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

文章来源:优设  作者:番茄

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

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

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




产品数据规划指南

资深UI设计者

数据指标基础概念

1. 数据指标是什么

定义:对于一个数据的量化,一般通过对字段进行某种计算得到(比如求和、平均)在原始数据的 基础上,通过统计汇总,加工处理形成的用于表征业务活动好坏优劣的数据。

数据指标通常由三部分组成:

  • 维度,指评估产品的视角,从不同的维度评估产品的方式是不同的。
  • 计算方式,指统计的方法,举一些生活的例子,我们常听到或调侃朋友的话语,例如有人问你有没有对象,有些人是直接没有,有些同学可能是生态园没有,又或者是今天没有的,这些都是统计方式的不同。
  • 数据,即数据+加上计算单位,顺着刚才的例子就是,我们一般在新同学介绍会问过有没有对象之后,会跟着问有几个的,说明数值也是很重要的维度。

设计师进阶必读!产品数据规划指南

好的数据指标特点:

  • 可比较性:能比较不同的时间段,用户群体、竞争产品之间的表现。
  • 简单易懂:容易被记住和讨论
  • 比率优先:产品看的数据最好是比率,而不是绝对值
  • 改变策略:最重要的评判标准,随着指标的变化采取相应的举措。

稍微解释一下可比较性、比率优先两个特点,比率是天然有可比较性的,而跟一般数值对比的区别在于,比率比率会更加注重过程、质量等。然后这些特点里面最重要的是,好的指标发生变化时,产品是可以采取相应措施去改善的。

2. 指标体系是什么

定义:一系列指标的有序结合,数据指标通常较为零散,指标体系可以全面、简洁明了地反应业务状况。

比较常见指标体系会把指标分为三个层级,一级指标是产品目标层面指标,二级指标主要是产品策略相关指标,可理解为一级指标的实现路径,三级指标是业务执行层面指标,跟二级指标的区别在于三级指标对二级指标进行了拆解,并且会可执行落地动作。

设计师进阶必读!产品数据规划指南

常见的指标类型

指标类型的划分,有一定的主观成分,这里介绍三种常见的指标划分方式。

第一种,是按照用途划分,可以划分为运营效果类、用户体验类、产品特性类、推广渠道类、性能指标类。

  • 运营效果类,价值产出、产品规模、用户活跃层面的指标。例如:收入、活跃用户数、使用频率。
  • 用户体验类,从产品各入口,各设置方式,各排列方式等体验,交互的角度来观察产品设计。例如,各种环节转化率。
  • 产品特性类,统计和产品功能特性相关数据,促进产品改善。例如,腾讯问卷的创建量、答题量;QQ 音乐的切歌率。
  • 推广渠道类,主要是衡量渠道效果,渠道转化率、贡献占比等。
  • 性能指标类,这个会比较偏向技术侧,常见到有并发数、接口耗时等。

第二种,是按环节划分,可以分为过程指标、结果指标。如果要看产品、运营活动的好坏,一般会直接看结果指标,但需要改进它们就会用到过程指标。类似活跃用户数等,部分指标即可以是过程指标,也可以是结果指标,具体是看你以什么为目标进行体系建设的。然后还有像总用户数、GMV 这种累计指标,通常是公司用于对外宣传和公关使用的。

设计师进阶必读!产品数据规划指南

第三种,按属性划分,可以氛围用户数据类、用户行为类、产品数据类。

  • 用户数据是用户的基本情况,如不同颗粒度的新增用户、活跃用户、留存情况等。
  • 用户行为是记录用户的行为,访问相关的 PV、UV,传播相关的转发率,其中这里主要讲一下 K 因子这个指标,又称为病毒系数,用来衡量推荐效果,每个发起推荐的用户带来的新用户数。
  • 产品数据类则包括了通用的营收相关,以及自身业务相关。

设计师进阶必读!产品数据规划指南

如何指导业务迭代

1. 了解北极星指标

北极星指标应该是大家比较常听到的指标,寓意是像北极星一样指导公司、产品前进的方向,制定的时候最好符合 smart 原则。 通过关注北极星指标以及有限的周边指标,可以有效的帮助业务迭代规划。

好的北极星指标特点:

  • 传递价值,能反映产品的用户价值、商业价值;
  • 易于理解,不太需要过多解释,就能相互交流和使用;
  • 用户活跃,与用户行为相关,能够反应产品的用户活跃度;
  • 非滞后性,具有先导性,非滞后指标,反映产品经营现状;
  • 可操作性,能够被拆解成更细的指标,来指导产品规划、执行。

Ps:指标好并不完全代表产品发展的很好,更多是监测作用,不应该盲目围绕其开展工作。实际开展业务的时候,也需要常常思考业务会遇到什么问题,能不能通过指标进行预警。

2. 围绕生命周期选择北极星

这里推荐一种围绕产品生命周期选择北极星指标的方法,产品生命周期可以分为启动、成长、成熟、衰落四个循环,产品通常要先确认自身产品处于生命周期的哪个阶段,通过了解对应阶段产品的关注点、常见操作策略,从而进一步选择合适的北极星指标。

启动阶段的产品通常是源于发起人的业务洞察,可能是一个伟大的想法,但这个需求是不是真的呢?我们需要通过一个 MVP 版本的去验证猜想,关注产品是否能够满足用户的需求,这个阶段北极星指标通常会选择能够表征目标用户的留存。

设计师进阶必读!产品数据规划指南

具体选择的时候考虑对用户群体进行细分,选择发力点最大的地方作为阶段北极星指标,一个简易公式可以是,整体用户留存等于新增用户留存+老用户留存,这三者的区别在于整体用户留存是最终的结果,新增用户会更具有对比性,体现在可以通过不同时间周期内的新用户留存去衡量近期产品的迭代是否产生了好的影响。老用户可能会由于已经习惯了,从而表现出相对稳定性,一般来说,新增用户、整体用户留存会更合适作为北极星指标。另一个需要考虑点是业务形态对指标颗粒度的影响,一般会取决用户习惯,高频业务可能会优先日粒度的留存,低频的则会选择周留存或者月留存。

成长阶段,产品的重点是拉新,寻求体量上的成长,以及探索商业化变现,关注产品流量的增长,这个阶段通常会选择产品的活跃度指标作为北极星指标。

设计师进阶必读!产品数据规划指南

常见有 DAU\MAU、活跃率、在线时长三种活跃度指标。其中,活跃率和 DAU、MAU 的区别在于,产品活跃数评估的是产品的市场体量,活跃率评估产品的健康度,一款产品用户数绝对值可能很高,但活跃率由于整体注册用户的体量更大,而不够健康。选择标准在于产品的市场增长空间,增长空间大的通常会用 DAU、MAU 等指标。在线时长则会更适合 killtime 产品,例如抖音、腾讯视频等等。这个阶段需要注意的是,活跃度作为北极星指标监控,不是为了逼用户天天来戳一下,而是为付费、转介绍等提供稳定的支持。

成熟阶段,产品的市场价值、用户规模均已过了增长期,进入稳定的发展阶段,产品在这个阶段通常会关注提高用户活跃度,保证产品留存的情况下,确保产品付费转化稳定增长,所以北极星的指标会优先选择付费相关指标。

设计师进阶必读!产品数据规划指南

营收有一条基础的公式,营收等于流量乘以转化率乘以客单价 Arpu 值,基于这个基础公式可以做很多变形,选择北极星的时候会从公式找到变动、提升空间大的点。举一些例子,某音乐产品的商业化,是选择新会员数作为北极星指标,原因在于国内音乐市场付费渗透率只有 5%,而对比美国音乐市场 50%付费率,有近 10 倍的提升空间。

衰退阶段,产品特征是用户需求逐渐减退,市场竞争趋于缓和,产品会更多考虑退出新的产品、服务,让老的产品为新产品引流,常见行为是减缓衰退,开展新的用户场景验证,重点在于新的增量市场,北极星指标会优先考虑新场景相关的指标。相当于是开启了一个新的循环,去验证新产品、新场景能否满足用户需求。

设计师进阶必读!产品数据规划指南

3. 拆解指标的方法

主要介绍一下三种拆解指标的方式,分别是按业务策略 OSM、增长模型或者是业务主要参与者关系进行拆解。

业务策略 OSM 模式,主要是根据业务目标、业务策略、和业务度量进行拆解,整体逻辑是,目标是 What,是什么,业务策略是 how,具体怎么做,业务度量是 which,具体是哪些指标。

举个例子,我们对某产品的北极星指标进行了拆解。某产品的北极星指标周活跃产品数,等于新接入产品加上活跃产品留存加上沉默用户激活。我们对沉默用户目前是处于接受现状,没有采取促活措施,所以大目标拆成了两个小目标,提升新接入产品以及提升老活跃产品留存。策略上,针对目标 1 是通过影响力提升自然流量以及渠道拓展,重点进行衡量是,官网流量的转化评估,从访问、创建、接入,以及渠道质量的评估,包括流量分布、转化率。而在老活跃产品留存上,主要是改善产品体验来提升用户留存,主要看的指标是活跃用户数的持续跟踪,以及细分用户维度留存情况。

设计师进阶必读!产品数据规划指南

第二种方法是按照增长模型进行拆解,AARRR 海盗模型大家应该比较常听到,主要是获客、激活、留存、收入、推荐这些,这个模型是 07 年提出,这么多年随着环境的变化,逐步演化出了 RARRA 模型,造成这种变化的主要原因是以前处于互联网流量红利时代,获客成本相对较低,所以会选择让用户进来再转化,而现在随着获客成本的升高,倾向于先做好用户留存运营,避免拉新成本的浪费,再拓展用户盘子。具体模型选择上,更多是合适的问题,选择跟自己业务相对契合的模型开展工作。

举个例子,网课平台收入可以拆解为付费用户数乘以客单价,付费用户可以进一步拆解为新用户加老用户,新老用户分别拆为流量乘以转化率,老用户数乘以续费率,老用户又可以向其他人推荐形成闭环。最下方的四个指标,分别对应着拉新、激活、留存、收入。实际的网课业务可能更加复杂,每一个维度可能对着好几个指标,需要在业务上灵活应用。

设计师进阶必读!产品数据规划指南

第三种方式按照业务主要参与者关系进行拆解,这种方法通常适用于平台型产品,产品的用户既有供给方,也有 C 端用户。拆解指标的时候围绕双方关系的边或点,按照 OSM、或者增长模式做进一步拆解。

例如,打车软件可能是大家接触较多的双边市场案例,乘客打车,需要完成下订单、付款、评价司机等,司机提供接送服务给乘客,期间需要接送乘客、收款、评价乘客,体现供需双方关系的指标是客单量,而司机侧影响这个指标可能是服务时长,乘客侧则是打车体验,可以分别再做进一步拆解。外卖类业务,则是典型的三边市场,涉及商家、骑手、用户,围绕成交订单/GMV 等建立关系。

设计师进阶必读!产品数据规划指南

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

文章来源:优设  作者:腾讯CDC体验设计

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

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

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


如何从零到一创建可协作组件库

资深UI设计者

第 1 步:基于实际情况,明确创建组件的价值

以设计师的角度,基于覆盖面的广度,组件库可以从小到大分为三个层次:

  • 为单个项目的设计复用创建的组件库
  • 为多个项目之间的设计复用创建的组件库
  • 为多个项目之间,跨职能复用创建的组件库,通过少量定制即可以形成最终产品的组件库。

第一个层次的组件库要解决的是单个项目内的复用,同时也能保证整个项目的设计统一性。如果同一个项目下如果有多个设计师,为了保证各个页面的交互和视觉一致性,一个统一的标准就更有必要了,而组件库可以说是这个标准的具化,不同的设计师使用同一个组件,可以有效保证页面的一致性,同时也提高了工作的效率。

那,这个时候就一定必要创建组件库吗?恐怕也不尽然,如果这个项目需要快速开发上线进行验证,后续发展路线也很模糊,那牺牲部分一致性,容忍不同页面的相对差异,或者用类似复制粘贴这种粗暴方式等等来达到目的,也许性价比更高。

第二个层次的组件库,其价值在于多个项目间保持统一性,解放设计师重复性的工作。这个价值有一个前提,就是这些项目之间是需要保持一致性的。

第三个层次的组件库,则是为了更广泛的提高效率,它已经跳出了设计师这个范围,和其他职业产生了联动,涵盖了研发技术甚至更多专业人员,也被称作业务型组件。虽然同样的模块不用再重新设计也不用再重新开发很吸引人,但这些组件的设计是否能被使用方认可?原有支持的技术栈是否与使用方需要的一致,学习和推广这些组件的成本是否能够得到同等回报?相关的公司流程、规则和资源是否方便对组件进行学习、推广和使用?都是需要考虑的问题。

这三个层次的组件库层层递进,每上升一个层次,听起来就越吸引人,所耗费的精力却越大。

做到最好的,诸如谷歌、微软、苹果、阿里等等,在业务上也有同等布局,比如需要开放给广大的开发者形成生态平台。这个时候,组件向外部赋能,不再局限于公司内部,所发挥的价值已经远远大于其所耗费的精力。

但作为一个新的组件库,我们首先需要根据自己的实际情况来确认要不要创建组件,而不是仅仅因为它美名在外。不做组件库,或者使用第三方的组件库,都是一种选择。而不是为了做组件库而做组件库。当确认这个组件库在当前的实际情况下依然有创建的价值,我们就要把这个价值更具像化,成为切实可行的目标。

第 2 步:借鉴 OKR 思维,创建符合实际情况的目标体系

进入公司的第二年,我开始基于我涉及到的三个 B 端产品来创建组件。

每一个 B 端产品其实都是一个系统,是平台+应用的结构,数据信息在这两者之间运转。虽然看着挺庞大,但首先,这三个产品体系都是基于一个统一的产品价值(AR 技术)来映射到不同应用场景(远程视频、巡视检查、展览展示)的。其次,在人力资源的配备上,三个系统的产品、研发和设计负责人都同属于一个团队,团队优先级一致。另外,虽然主次分工不同,但同一个产品经理或设计师都会同时涉及到三个产品线的定义中。

所以,在建设组件库的时候,我直接提炼了三个产品线的相同功能模块,给出了包含多个页面和多个交互逻辑组合而成的功能模块,对于市面上大多组件库会包含的按钮、提示、弹窗等也没有专门罗列,只将 AR 眼镜上有过特殊交互说明的模块给标示了出来。

掌握3个步骤,从零到一创建可协作组件库

来源:公司内部 Guidelines 文档

可能由于恰好符合实情,在没有费很多力气推广的情况下,研发团队就形成了登陆和首页列表 2 个模块,其中的登陆模块,更是一直沿用到了现在。

但随着探索期的深入,产品对接的业务场景迅速扩大,加上架构调整,公司布局更新,组织使命调整,想要一次打通形成第三层次的组件很快就行不通了。虽然后来我也针对这个现象做过一些调整,但收效并不明显,之前一直认定主要原因是时间和精力不够,直到组织设计团队完成了一场 workshop 后我才发现,没有联系实际情况设定切实可行的目标,可能才是收效甚微的主要问题。

现在的实际情况是怎么样的呢?

于我所在的组织来说,三个部门分别负责了 1-3 个业务线,每个业务线都对应不同的用户场景和产品需求,需要用实际的落地业绩和财务收入迅速证明自己所在业务线对于公司的价值,所以即使我能看到不同业务间存在复用的可能,想要像之前一样,直接形成第三层次的组件也很难。

这个时候,借鉴 OKR 思维,设定更具有实质性意义的 KR 目标,然后让组件库如同产品一样去迭代,确保每一次迭代都是关键和有效的。

比如,我认为创建的组件库要到第三层次才是它基于现状能获得最好的价值体现,那就可以把这个设定为 O。这个 O 的设定是由战略指引的,需要对齐公司或部门的目标,也就是我们在第一步明确的价值。

接着,我们来设计子目标,也就是 OKR 里的 Key results,可衡量的关键结果,以终为始,形成这个组件库的目标体系。

对应我这个例子,就可以从用户群的不同分为两类,一个是针对设计师而言有用,一个是对协作部门来说有用,以年度为周期,可以形成两个关键结果:

  1. 一套跨项目使用的 Sketch 组件库,覆盖项目 50% 界面设计工作量;
  2. 一套跨项目使用的组件设计定义文档和资源,支持对应功能直接进入开发阶段。

如果再往下细分,还可以把年度周期拆分为季度周期甚至月度周期,设定更小的 OKR 目标体系,使结果得到更及时的追踪和复盘。

第 3 步:聚焦相关竞品,以实际情况设定组件库内容

因为我们的项目几乎都是 To B 的业务线,每个产品无论大小都是一个体系,即信息在前端和后端之间传输,用户至少包含 2 个及以上的职业角色,最简单的是 1 个 Web 平台+1 个 AR 终端应用,所以要达到前面的 2 个关键结果,这个组件库从一开始就需要支持至少 2 个终端。

最开始由于几乎是单推我们自研的 AR 眼镜作为应用终端,在设计组件分类的时候,我选择优先罗列了组件,再在每个组件下区分终端。

这种形式和 Material design 的组件库相似,基于一种终端衍生到其他平台。在目录上,你会首先看到组件列表,再看到每个组件支持平台。

掌握3个步骤,从零到一创建可协作组件库

来源:Google Material design

但很快,这种推广模式就被改变了,除了 AR 眼镜,机器人、边缘算法盒子、工业 PDA、带 CV 模组的相机等都纳入了不同的业务线,以形成更贴合场景的方案构成。虽然它们都围绕计算视觉为核心技术,但在界面层的表现上就大不一样了。

而这个时候,我还是以之前的形式组织着这个组件库。导致使用的时候,必须得先看一看每个组件长长的目录,才能找到当前所需要的对应终端资源。

掌握3个步骤,从零到一创建可协作组件库

来源:公司内部组件介绍页面

在组织过那场 workshop 后,我开始广泛的研究行业内其他优秀的组件库。其实大多数优秀的组件库都有对应明确的、单一的终端,比如 Ant 组件是对应 web 终端,Hololens 的组件是对应 AR 眼镜的,即使苹果这样跨平台多设备的厂商,也分移动设备、电视设备、手表,输出了不同的组件库。

出于种种考虑,我将原本处于二级目录的终端分类提升到了一级,给设计师使用的 Sketch 组件也按终端划分成单独的文件。然后,再根据当前的业务情况,聚焦到 2 个主要的终端上:Web 网页和 AR 眼镜。

由于有了聚焦的终端,在借鉴其他组件库时,也就可以在之前广泛研究的基础上缩减范围,得到更有参考意义的结果。

比如,针对 AR 眼镜终端,Windows 的 Hololens 和 Magic leap 的设计就比 Material design 更具有参考意义。

掌握3个步骤,从零到一创建可协作组件库

来源:Magic Leap 设计 & Windows Hololens

即使具有参考意义,但由于每一个组件库所面临的实际情况都不一样,生成组件库时依然需要做对应性的更改。

以我这里创建的 AR 眼镜 UI kit 为例,因为最终要落入不同业务线的各个项目中,应对的客户和场景很难统一,所以,色调统一就不需要作为该组件库生成时一定要满足的条件。如果要保证一致性,Sketch 里的图层样式,甚至颜色变量都可以作为解决方案放到组件库里。

掌握3个步骤,从零到一创建可协作组件库

来源:公司内部 Sketch 页面

过硬的设计技能和专业能力,对建设一个优秀的组件库必不可少,但我认为一个优秀的组件库,必然首先是一个实用的组件库,在被它的光环吸引的同时,紧紧的扣住当前环境的实际情况,依时而定、依时而变,不被自身的专业角度限制,才能够发挥它本来应该给团队或公司带来的价值。

按照实际情况调整,这句话说来简单却最是困难,因为它就像这个组件库的土壤,土壤变了,上面就要跟着变化。这 3 个步骤,首先是在确认有这样一片让它生长的土壤,然后分析土壤当前和未来可以提供个组件库的养分,最后,才是动手开干,让组件库在这片土壤上开花结果。

因为土壤不一样,同样的方法,最后生成的组件库可能会完全不一样,但并不妨碍它成为助力协作,提高效率的一个好的组件库。

掌握3个步骤,从零到一创建可协作组件库

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

文章来源:优设  作者:林影落

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

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

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


日历

链接

个人资料

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

存档