首页

学会“邻近色”配色,搞定配色难题(实操篇)

seo达人



图片

 

邻近色配色实操-案例1

在PS中新建文件,背景选择红色,英文放大铺满背景,颜色选择红色的邻近色橙色。

图片

画出白色圆角矩形,给矩形添加图层样式“描边”和“投影”。描边的填充类型选择“渐变”,颜色选择白色和浅橙色的渐变,模拟玻璃边缘的厚度。

图片

图片

接下来制作毛玻璃效果。复制背景和文字图层,合并为一个图层。分别给此图层添加三个滤镜“模糊-高斯模糊”、“滤镜库-扭曲-玻璃”、杂色-添加杂色“,效果如下图:

图片

把图层移动到矩形图层上方,按快捷键“ctrl+alt+g”建立剪切蒙版,使毛玻璃效果只在矩形范围显示。

图片

最后加上文案排版,设计完成。

此案例使用了红色和橙色的邻近色配色,橙色和红色是充满活力和激情的颜色,能呈现出热闹、愉快的氛围。

图片

 

邻近色配色实操-案例2

方案二,在PS中新建文件,在背景上用绿色和黄色的柔和画笔随机画出颜色。

图片

使用“模糊-高斯模糊”让背景颜色更好的融合在一起,再执行“杂色-添加杂色”给背景增添质感。

图片

图片

图片

最后加入文案,颜色采用绿色和黄色,明亮的黄色搭配清新的绿色,新鲜而又清澈,显得朝气有活力。

图片

 

邻近色配色实操-案例3

方案三,在AI中输入英文,字体选择一款设计感较强的“Current”做为主体。使用蓝绿色搭配,蓝色明度低,绿色明度高,所以蓝绿配色即协调统一又有很强的对比。

图片

把英文转换为轮廓,给每个字母加上不同角度的渐变色,颜色沿用蓝绿色。

图片

最后加上文案,进行排版,设计完成:

此案例使用了蓝绿色的邻近色配色,让人联想到蓝天绿水之美,感到平静,放松,给人清爽舒适感。

图片

尝试新的配色,使用蓝色和紫色搭配。蓝色和紫色明度很接近,对比比较柔和,具有神秘梦幻感。

图片

红色和紫色搭配显得浪漫、华丽、高贵。

图片

 

优秀作业展示

以下是从本期投稿中选取的11份优秀作品:

01 『聪_cong』

图片

 

02 Anna

图片

 

03 NIAN廿七

图片

 

04 NoctilucaGladys

图片

 

05 Trista~Z

图片

 

06 蛋蛋DAN

图片

 

07 金角设计

图片

 

08 孔艳茹

图片

 

09 龙娟

图片

 

10 珞影随行

图片

 

11 咪奥mao

图片

 

原文地址:艺海拾贝Design(公众号)

作者:邓海贝

转载请注明:学UI网》学会“邻近色”配色,搞定配色难题(实操篇)

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

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

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

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



资源分享|两款B端设计走查神器

seo达人

Copiexl

图片

这是一款 字节跳动 出品的高效走查插件,它的原理十分简单,首先打开需要校验的线上项目;接着上传你的设计稿图片;然后通过降低设计稿的透明度,达到项目快速走查的目的。开发哪里有问题,一眼便知。简单教大家如何 安装使用 这样一款插件:

图片

 

1.安装方法:

首先打开软件的官方网站(https://copixel.bytedance.com/),点击免费下载(这里只支持Chrome浏览器,如果你是Safari 、Firefox、Opera等浏览器,在官网往下滚动,同样也是提供了下载入口)。

点击下载过后,就会跳转到 Google 的应用商店当中,点击安装即可,与浏览器插件的安装方式类似(这里需要科学网络,如果你访问不了 Google应用商店,可以直接在公众号后台回复“设计走查”,提供了另一种安装方式)。

 

2.使用教程

01.选择合适的页面设计尺寸

建议按照主流窗口尺寸的宽度设计,如:1366px、1440px、1920px;推荐最小设计尺寸使用1366px、1440px,最大设计尺寸1920px(宽)。目的是按照 1:1 导出设计图,与开发页面显示效果一致。

图片

02.该如何输出设计稿?

Copiexl 浏览器插件的原理是将你的设计稿 悬浮在前端还原的页面当中进行对比,这样就能快速知道自己的设计页面有何问题。

因此我们需要将设计稿进行一次性导出成 PNG 文件。这样可以批量导入到插件当中,直接切换设计稿提高走查效率。

03.如何使用

打开前端实现好的页面,使用你刚刚安装好的浏览器插件“Copixel”,添加UI设计图。

通过调整设计图位置、大小和透明度使其与开发页面高度重合,配合 有截图标注功能的软件(比如:Xinp)进行找茬标记。使用 走查文档 标记存在问题的地方并说明问题,这样就能高效完成项目走查。

然后将有问题的走查内容直接分享给开发即可。

 

插件使用的视频方法:

转载至Copiexl帮助文档

 

CSS Peeper

这是一个 设计走查 / 样式复制 / 资源下载 的效率神器,它能够轻松查看网页端当中所有元素的CSS属性,并且不需要像Chrome浏览器那样 “右键” – “检查” 浏览器元素,然后在许许多多的代码当中寻找你需要的CSS代码。我们只需要点击插件,选择元素就能够快速检查样式。

图片

 

场景一、设计走查

比如当前端工程师完成页面过后,需要设计师进行一个页面的走查,这个时候很多同学往往就会靠着自己的像素眼进行一一的比对,如果稍微有点经验的B端设计师会打开浏览器自带的检查,进行元素的核对。
然而浏览器自带的检查其实更多是面向程序员进行设计的,对于我们设计师而言,能够看懂的却只有一小部分内容,显然检查的效率并不会太高效。

图片

这时候使用CSS Peeper,就可以轻松对网页当中的CSS样式进行检查,我们不仅可以看到元素的常规属性,比如颜色、背景、间距;还可以看到元素的盒子模型,可以看到元素的 Padding、Margin…

通过这个插件,就能清晰的看见开发究竟是在哪一部分还原出现问题,并且能够很“欠揍”的在他面前秀一下~

图片

 

场景二、样式复制

对于设计师来说,就不用再去纠结竞品究竟是如何设计?如何还原出来,因为任何网页上的元素,你都可以通过这个插件,去查看他的还原思路,并且知道它的设计样式以及属性
同时可以点击颜色或者图片,将该页面用到的所有颜色或者图片总结出来进行汇总,可以导出,方便在设计风格上进行分析。

图片

 

场景三:资源下载

使用CSS Peeper 能够快速查看在该页面当中,所用到哪些图标、图片。并且可以将这些资源快速下载到本地进行保存。这样你就可以成为资源小能手。

图片

这也就是我工作当中最常使用的插件,你最常使用什么插件?一起来分享聊聊!!

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》资源分享|两款B端设计走查神器

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

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

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

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



火爆全网的酸性设计,你看懂了吗?

seo达人


毕竟这种风格的核心就是挑战传统的美感和欲望的定义。整个风格迷幻抽象、打破常规、高度失真或者超现实的视觉风格,完完全全地向观者展现着一种潮流先锋的态度。今天我们要聊一下酸性设计的主要特点,方便大家快速掌握!

图片

 

01.特殊质感

酸性设计中一个很重要的特点就是往往包含大量的特殊质感,例如液态金属、镭射、铝箔、玻璃、塑料或折射等等质感。这些特殊质感都给我们一个共同的感官,那就是科技感和未来感。这也是酸性设计之所以能代表潮流和先锋很重要的原因之一。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.高饱和色彩

酸性设计往往充斥着大量鲜艳、高饱和的色彩,包括各种高饱和度的渐变色、迷幻绚烂的霓虹色、让人眩晕的荧光色等等。还常常配上暗黑的背景,画面混乱又统一,充满矛盾的迷幻感。这种让人眩晕、充满感官刺激、打破传统美感标准的色彩,也充分体现了这种风格的调性,充满了探索的先锋精神。

图片

图片

图片

图片

图片

图片

图片

图片

q

03.打破常规的排版

酸性设计的排版看起来很难找到固定的规律,充满了随机性,似乎毫无章法,同时画面饱满丰富。但是仔细观察就会发现,它的构图方式其实是高度几何化的,通过几何图形的不断重复、剪切,形成看起来复杂无序的组合方式,从而体现酸性设计的流动感。

酸性设计就是这样通过破坏性的方式打破传统对美感的定义,引领了潮流的定义、创造一种新奇又让人欲罢不能的风格。

图片

图片

图片

图片

图片

图片

图片

d

04.装饰性字体

酸性设计所采用的文字特点也十分鲜明,通常都十分具有装饰性,造型或尖锐或富有流动性,例如哥特风字体等。搭配上如同被强酸腐蚀过后液态金属的质感,充斥着危机感和刺激感。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片


 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》火爆全网的酸性设计,你看懂了吗?

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

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

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

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



腾讯设计了一朵小红花,也太好看了吧!

seo达人


在腾讯公司滨海总部的公益文创市集上,看到一组设计,这些都是来自腾讯的设计师与WABC无障碍艺途的“小朋友”们一起创作的小红花。这些对小红花丰富的场景想象里,充满了爱,充满了温度。提到设计,大家这几年聊的比较多的UX设计、UI设计,但是对于公益设计却关注不多,公益设计相对于产品设计不同,它的每个设计背后都有一个动人的故事,今天我们一起来聊一聊公益设计。看看有哪些不一样的地方?今天我拿业内做的比较好的,腾讯公益的99公益日为案例,和大家聊聊公益设计如何去做?
图片

 

01.  通过跨团队合作保证一致性 

图片

 图片来源:腾讯CDC公众号

d

公益设计是一个大的系统设计,和做产品不一样,产品流程大家都知道,产品立项、交互设计、视觉设计、前端走查等等环节,但是公益设计,需要很多团队一起去推动,除了产品设计,还需要有市场团队、公关团队,包括整个的设计策略都有不同,相对于产品设计只需要和开发、产品、运营对接不同,公益设计需要对接的角色非常多,需要设计师有非常强的项目把控能力,以及对于项目落地后结果的把控能力。所以设计师在做公益这样的项目的时候,一定要做好项目管理,包括各个对接方时间排期规划等等,都要求较高。

·

02.  通过全局联动形成品牌感 

图片

除了对接人多以外,在设计落地上,产品设计更多在线上移动端或者H5,但是公益设计的落地场景却很广,包括电梯广告、地标广告、直播物料等等。

整体的设计链路线上到线下更为立体,所以在做公益设计的时候,需要考虑更多的一致性,如何让设计联动起来,如何让用户更有体感是非常重要的。

图片

图片

图片

图片

 图片来源:腾讯公益

a

公益设计的联动一定是多维度的,得让用户充分的感知,因此除线上直播、H5以外在用户能触达的各个场景都要覆盖到,比如机场、地铁等等。

在做线下推广时,每一张海报、每一次传播都有它的设计规范,腾讯也公开了这些设计规范,可以用来参考和学习.

图片

图片

图片

 小红花联动

e

除了线下运用,线上也需要联动,公益设计需要线上线下一起发力,如何让线上设计做的有趣好玩,让用户用参与感,是设计师需要思考的。如上图的H5场景,通过趣味化设计,答题得小红花场景,让用户参与进去,体现出更多的温暖和温度。

于一个产品,其实最难的是,这个产品如何和其它产品进行联动,同时也不违和,非常考验设计师的整体把控性。比如最近比较流行跨界玩法,很多品牌都会和一些时尚品牌进行合作,让产品有更多和年轻人交流的机会,让年轻人感觉到公益的魅力。

 图片来源:腾讯CDC公众号

a

腾讯公益这块是做的比较不错的,我仔细看了看2020年与2021年的IP连萌行动的一些IP形象,可以看到不论是腾讯的QQ企鹅、微信汽泡狗,还是腾讯动漫的狐妖小红娘、海尔兄弟、敦煌神鹿等,尽管画风差别不少,但小红花人与他们的联合却一点也不违和。

图片

 图片来源:腾讯公益

k

另外,小红花人的出现某种程度上还代表了腾讯公益俘获年轻群体的诉求。公益对于年轻群体关注度虽高,但参与度低,腾讯公益也一直在寻求解决的办法。而小红花人走到B站,去到了奈雪、喜茶的店里,与更多的年轻人沟通交流,正是把他们带回腾讯公益的平台上。 

图片

我当时看见这个广告的时候就深深被吸引,一起做好事这个主题也很轻松,在我喝一杯奶茶时候,还可以做一件公益好事,让我觉得这个设计非常有温度,公益设计一定要结合场景,让用户舒服的同时,品牌的温度和鲜活的形象也会更深刻。 

a

03.  通过IP符号打造形成记忆点 

图片

 图片来源:腾讯公益

d

在推出小红花IP后,怎么保证这些设计的一致性,打造出高度一致性的传播矩阵。别看这张海报看着很简单,其实一点不简单,首选图形上,大家第一眼记住的是什么?是不是和我一样,一朵小红花。的确如此,用户能记住的除了画面,就是符号。

图片

 图片来源:腾讯CDC公众号

a

就比如今天我们提到苹果你能想到什么?是不是苹果的LOGO,提到NIKE你会想到什么,是不是那个对勾,能看得出腾讯设计团队,也是想把品牌打造成符号,上图是他们的标志每年变化过程,我们能看见字体的变化、构图变化,但是唯一不变的就是这朵小红花。 

图片

图片

图片

 2019-2021年99公益日主视觉

w

这么多年的设计,品牌的延续感非常的强,始终围绕着这个小红花的超级符号打造整体风格,让我想起了以前上学时候,表现好,老师会给我们发一朵小红花的场景。虽然每年小红花有一些变化,但是对于温暖情感的传递,都没有变。比如18年主视觉,围绕汇聚概念做整个设计,很多爱心小花凝聚在一起,小的爱心变成大爱,和主题非常贴切。 

d

04.  赋予品牌温度和情感 

图片

图片

 图片来源:designforgood.qq.com

w

腾讯的设计团队不仅针对小红花设计了表情包,同时还在很多地方,立体地打造了小红花的形象。而这些小红花,就是用户参与到互联网公益最大的理由,在告诉用户“做好事得小红花”的同时,用户累计的小红花又给予产品体验的有效反馈,用户参与互联网公益的动机和动力得以确定。这一朵小红花,串联起了用户从感知、到行动、到反馈的全流程。  

图片

小红花通过这些年的打造,主视觉将手绘的花作为重点元素,根据不同公益活动类型去设计不同的KV,搭配一些手写的字体,让用户第一感受就是温暖,通过我们的公益行动绘制出一朵朵有爱的小红花,这些小红花背后都是一个个暖心故事。好的品牌一定是要不断曝光,才能在用户心中形成心智,那些伟大的品牌都是如此。 

图片

在2018年99公益日的主视觉上,可以看到无数爱心化为花瓣,汇聚成一朵小红花。这是小红花形象第一次登上腾讯公益的平台。

图片

欢迎围观小红花的首支散装舞蹈。#99公益日 热情似火,遇到我就别错过我!攒小红花能赢更多配捐,还可以兑换福利哟!

2019年的99公益日,不仅小红花之歌出现了,节日期间用户向好友发起集小红花的自发传播,从而为自己的捐赠争取更大配捐额,形成腾讯公益全新的社交玩法。

图片

图片

2021年,随着99公益日扩展为10天,配捐额也随之放大,用户可以每天到腾讯公益平台做好事打卡。同时,小红花“积分”也可以兑换公益农产品和小红花相关纪念品…… 

图片

小红花表面上的成长背后,离不开产品策略与设计的支撑。更轻量与丰富的“玩法”注入,如捐赠会议时间,捐赠腾讯视频积分等,拓宽了用户获取小红花的方式;而公益节日的时间点也同步延伸至每年的春节、“520”等时间段,拓宽了用户“一块”做好事的活跃次数。

在用户体验与设计的推动下,腾讯公益用了4年时间,种出一朵朵开满地球的小红花。现在,小红花不仅是腾讯公益的品牌符号,也是用户每一次公益行为的印记,还是用户获取反馈的“积分”,它甚至成为用户新的“社交货币”——没有小红花不足以谈爱心。

d

05.  最后 

图片

随着社会的发展,人们对于公益的关注也越来越多,那么作为设计师如何通过我们的设计力量,将我们平时的创意和有温度的设计结合起来,是我们每个设计师要思考的。希望今天这篇文章对大家有所帮助。 


图片


g

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》腾讯设计了一朵小红花,也太好看了吧!

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

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

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

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



B类产品设计细节:流程状态

seo达人

 

状态的命名

流程状态的设计原则与人机交互的最根本原则一致,即「以用户为中心」,确保目标用户在相应的使用场景下能够快速理解并正确执行相关操作。

 

按行业规则命名

专业工具或平台的设计中,对于状态的命名如果有行业约定俗成的术语,则遵照行业规则命名,即便在体验设计师自己眼中可能不够简洁美好。

例如:以工程师为主要用户群体的项目管理工具 Aone 中,bug 的状态有 10 种(如下图),且遵循了英文技术术语。对于设计师来说状态种类复杂、语言不统一,但从用户的角度来说这样是必须的、规范的,因此设计师要尊重用户的习惯和需求。

 

围绕核心操作命名

流程的名称通常是描述对应操作的过程或结果,如「待付款」、「退款中」是操作的过程,「完成付款」、「退款失败」是操作的结果。

单个核心操作

最简单、最常见的流程是:角色A 发起流程 – 角色B 进行操作 – 流程结束给出结果

这种两个角色三步走的流程,状态命名通常分为如下两种(框中是状态命名):

上图里面的动词可替换成其他动作;结果状态也可用「已通过」、「未通过」等,根据实际情况而定。

围绕一个核心的操作,也可能涉及多个角色。

例如:最常见的审批流程,过程中涉及多个角色的层层审批。如果不同角色审批时,用户可执行的操作不同,或审批的详细过程对用户非常关键,这时审批单的状态命名上需要注明具体角色;如果通常不需要关注具体到哪个人审批了,则统一称为「审批中」即可,用户可以到详情页面查看具体进度。

 

多个核心操作

涉及多个角色、一串核心操作的复杂流程。

  • 在流程完成之前的中间过程中,告知用户下一步待执行的操作,比上一步刚刚完成哪个更重要;

 

  • 在角色多、极易混淆的情况下建议在状态名上增加角色名。

例如:数字仓单的仓单质押流程中涉及三个角色(存货人、仓储方、资金方)多个步骤,过程中关键是引导用户继续后续操作、高效完成申请,所以状态上展示当前要进行的操作。同时流程中包含连续多个角色的接力审核确认,容易混淆,因此状态标签中显示当前需要哪个角色进行操作;而放款、收款的角色很明显是资金方和申请方来操作,所以对应的状态没有显示角色名称。如图:

 

  • 同一阶段时,不建议区分不同用户角色看到的状态名,可以给他们不同的反馈或提醒。

 

  • 状态组间存在一对多的映射关系时,要注意区分逻辑关系,不建议将上下层状态打平到一起。

接上面数字仓单的案例:系统中,货物的所有者可以用仓单进行质押,这样仓单就会有「未质押」、「质押申请中」和「质押中」状态(不允许重复质押)。而质押申请是个复杂的流程,「质押申请中」这一仓单状态,对应「质押申请单」的一系列流程状态。同理,在仓单解除质押、注销等其它情况下,又会有「解质流程中」、「注销中」等状态,对应的「解除质押流程」、「注销流程」有会一系列对应的状态。如图:

这种情况下要梳理好业务流程,如果将上下层状态打平到一起,短期内可能看起来比较简洁,但随着产品复杂度的提升(B 类产品通常会越来越复杂),逻辑关系会越来越混乱。

 

状态的视觉设计

状态的颜色

表示状态的颜色不建议超过 5 种:红色、橙色、绿色、蓝色、灰色。

设计师需要结合色彩的功能特性、品牌色板、产品逻辑、用户需求来选择适合的颜色。常用配色举例:

 

  • 状态的颜色不止会用在标签上,对应的可视化图表、图标等视觉元素要用色一致。例如进度条:

 

状态标签的样式

不同状态对应不同用户的不同操作,因此状态信息通常与普通文本在视觉上有所区分。常用的样式包括彩色标签、彩色圆点等等。例如:

 

  • 注意列表、表单中状态标签的样式统一。

 

总结

  • 原则:流程状态的设计原则与人机交互的最根本原则一致:以用户为中心。
  • 命名:
  1. 在流程完成之前的中间过程中,告知用户下一步待执行的操作,比上一步刚刚完成哪个更重要;
  2. 在角色多、极易混淆的情况下建议在状态名上增加角色名;
  3. 同一阶段时,不建议区分不同用户角色看到的状态名,可以给他们不同的反馈或提醒。
  4. 专业工具或平台中,如果有行业约定俗成的术语来命名状态,则遵照行业规则。
  • 关系:状态组间存在一对多的映射关系时,不要将上下层状态打平到一起。
  • 颜色:表示状态的颜色不建议超过「红色、橙色、绿色、蓝色、灰色」这 5 种。

 

原文地址:Ant_Design(站酷)

作者: 林叶

转载请注明:学UI网》B类产品设计细节:流程状态

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

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

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

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



【产品体验设计】-设计实践篇

seo达人


图片

对外行业角度+对内产品角度 

图片

◆对外行业角度

每一个产品都会经历不同的成长阶段,由萌芽期-成长期-成熟期-衰退期。几乎所有产品都会想办法去延长整个生命周期,尤其是在成长期和成熟期这两个阶段。腾讯动漫11年成立,经历了快速的成长期之后,已经逐步进入成熟期阶段。
 

漫画行业近几年属于红海市场,随着行列竞争日益激烈,除了腾讯动漫国内市场上也出现了不少头部动漫产品如快看漫画、哔哩哔哩漫画、咚漫漫画等,加上短视频冲击,导致动漫内容整体大盘逐步开始出现被分流的状态,这是从行业角度能够观察到的行业形态上的变化。 

◆对内产品角度:

随着整体用户基数平稳且大盘逐步分流,腾讯动漫近几年数据已经逐步开始出现下滑的趋势,产品开始面临数据提升和营收增长的两大难题。 
 

图片

行业+数据+用户 

图片

通过行业趋势的变化和产品内部数据表现可以发现产品目前处于生命周期的哪一个阶段,但想要了解产品具体滑落的原因,还需要进一步对问题进行定位和分析。 

◆外部竞争:

横向了解自己产品所处的环境以及竞争对手可以帮助判断产品发展趋势。我们对市面上分流产品都做了调研,发现外部除了同类内容型产品,短视频产品冲击最为剧烈,抖音快手分流严重。同时,在内容行业这片海也涌现出了非常多的漫画类型产品,同类竞争非常激烈,产品形态和内容题材同质化越来越严重。 

◆内部困境:

纵向知道自身产品的运转逻辑以及长短板有助于站在业务角度去思考问题。漫画是内容型产品,除了自制,大多数内容依靠采买,版权成本投入非常高;相比小说这类文字内容,漫画的制作时间周期长,更新频率相对比较慢;以及漫画作为娱乐内容产业,并不是日常功能类的刚需型产品,可被替代性成本很低;这些都是我们产品面临的客观问题。

◆数据拆分:

除了对于产品大盘数据起伏有基础的了解,更需要知道产品每一个模块儿具体数据变化,以便了解用户在产品各个场景的使用情况和具体问题。通过对腾讯动漫用户产品使用路径分段拆分,能够从:用户新进-内容消费-评论互动等不同场景数据分析能够看出用户的整体活跃有明显下降。

◆用户分层:

通过对产品各场景数据模块儿的拆分能够了解用户使用产品情况,如果想要进一步知道为什么这些数据会发生变化,就需要从使用者本身,也就是用户角度来进行具体分析。

 
每一年我们都会对平台用户做调研,多年来平台用户属性基本上已经固定,分为题材型用户、消遣型用户、拓展型用户、成熟型用户。这四类用户在我们平台对于找漫画,看漫画以及漫画内容消费上都有很多诉求点是我们平台没有满足的,这也是导致我们产品数据和口碑不断下降的核心原因。 
通过将从行业数据用户三个维度分析的问题进行汇总提炼,找到目前产品存在的痛点和短板。 

图片

明确目标+目测拆解+设计策略 

明确产品存在的痛点之后,核心要做的事情就是寻求解决这些痛点的方案,这些解决方案可能并不是直接和设计关联的,以及在解决方案方向比较模糊的情况下我们如何准确定位到设计目标并执行具体实施策略非常关键。  

图片

◆明确目标: 

产品体验设计的价值核心体现在两个方面:1 帮助业务更好达成目标;2 给用户带来体验价值。体验设计在制定目标的时候,会围绕这两点去进行切入。通过前期对于产品问题定位发现从行业、数据、用户等不同维度分析出来的问题可以归类为两大类:业务诉求和用户需求。再根据这两大类问题结合我们产品实际情况分析出目前需要解决的问题是:1提升产品用户价值;2实现产品数据的增长;而设计目标就是通过设计手段去实现这两点。 

图片

◆目标拆解:

设计目标的明确决定项目在上的设计方向和预期,要找到设计着力点还需要进行目标拆解,根据不同目标制定不同的设计策略。腾讯动漫是内容型产品,我们根据用户使用行为梳理了用户在产品时的内容消费模型(吸引-感兴趣-体验-满足-留存)。这个模型和用户体验地图类似,用户在不同阶段所关注的核心点以及体验诉求会发生变化,所以我们将模型进行分段拆分,分为前期内容基础体验和后期消费转化两个部分,并且针对这两个部分不同体验场景进行要点提炼。 

图片

◆设计策略:

有了设计目标和内容体验模型,如何让两者有效的结合起来形成可推动落地的方案,就是设计策略要做的核心内容。

 
前面将内容消费模型拆解为基础体验和消费转化,分为两个不同的内容消费阶段,设计策略要做的是将设计目标和不同的内容消费阶段进行结合,形成产品体验模型。整个体验策略优化我们核心要做两件事情: 
 
  • 1基础体验升级,通过满足用户在不同场景下的体验诉求,提升产品对于用户的体验价值。
 
  • 2消费转化部分,基于用户内容消费阅读路径,建立付费转化机制,从而带来付费营收的增长,实现产品商业化闭环。 

图片    

设计策略明确后,接下来就是可落地的设计方案。设计方案是围绕设计策略进行的颗粒度拆分,拆分下来你会发现围绕基础体验和消费转化会有很多可以做的内容,不可能保证所有的点我们都能做完且起到有效的作用。所以对于设计方案的执行,也需要进行优先级的排序和筛选。
 
腾讯动漫的内容型产品,回归用户使用产品本质需求,就是找内容和看内容,围绕这两个关键点再去细分用户使用产品的过程中,核心关注的体验点是什么,再围绕这些体验点,找到问题并且制定设计方案逐一优化。 
 

图片

◆基础体验

基于内容消费模型,我们分别对用户寻找内容进行了:视觉聚焦-建立视觉降噪体系、内容识别-加强内容拓展性、信息决策-提供有效决策信息等不同策略的优化。 

图片

◆视觉聚焦-建立视觉降噪体系

首先是色彩和设计样式上做减法,再根据简化后的色彩和样式搭建了图形体系、图标、插画体系,用在产品全局的视觉降噪体系上。 

图片

◆内容识别-加强内容拓展性

从品类拓展和特性打造入手。首先是结构的拓展,3种增加到9种,并且可以在首页随意组合,提升内容组成的多样性。内容模块儿的特性上,根据模块儿不同内容属性进行了重新打造,调整后数据效果非常不错。 

图片

◆信息决策-提供有效决策信息

为了提升决策效率,我们在内容筛选和决策上做了比较大的调整。对排行榜的结构和信息组成都进行了大的调整,对分类标签进行了优化,作品标签由官方维度转换为了用户维度和作品维度,同时除了配置官方分类标签以外,新增符合用户认知和当下潮流的个性化分类标签。 

图片

排行榜以前榜单形式是固定且单一的,在拓展性,品类以及公信力上都会有很多的问题。为了提升筛选效率,我们将排行榜单重新梳理,采用纵向结构满足不同绑带配置诉求;同时将榜单进行拓充,新增不同维度的榜单丰富榜单品类;在每个上榜作品上添加了作品评分以及用户评论数,提升榜单公信力。 

图片

然后是详情页决策,从页面底层结构开始着手开始梳理,用户访谈发现,线上详情页结构和用户视角的结构重合度非常低,于是我们对详情页架构进行了优化调整,新版的详情页架构结构顺序以及信息层级上,都更符合用户的认知。在整个决策过程中,我们通过优化详情页信息结构,在用户浏览过程中用不断吸引-刺激-加强用户的决策,更有效提升决策效率。 

图片

基础体验的第二部分是看内容,对于看内容的体验,我们基于漫画内容特性和用户核心的操作体验去进行了在观看体验和阅读操作上的体验优化。 

图片

图片

图片

图片

首先是观看,要想把观看体验做好,必须要有优质的内容品质,这里我们做了三点优化:
 
  • 第一点是终端适配,将传统页漫去进行条漫的分镜优化,让其更好的适配手机阅读体验;
 
  • 第二点是画质赛选,淘汰掉小尺寸的漫画图源,新增800PX以上高清图源,确保显示清晰度;
 
  • 第三点是建立后台上传系统,规范上传的尺寸、格式、以及大小等,从根源去解决漫画品质的问题。 
   

看内容第二个核心环节是操作,对整个浏览器的色调进行了轻量化设计,提升沉浸式观感和舒适度。同时,简化了信息栏结构,并且将高频操作提核,提升操作效率和易用性。 

图片

图片  

基础体验上,我们根据用户找内容和看内容的不同场景,进行体验的优化,提升产品对于用户的使用价值,也为我们后续进行进一步的内容消费转化,提供了契机。

图片

  图片

付费转化

我们根据用户找内容和看内容的不同场景,进行了基础体验的优化,提升产品对于用户的使用价值,也为我们后续进行进一步的内容消费转化,提供了契机。

良性的消费转化机制建立是我们的第二大设计核目标,基于用户内容消费路径建立付费转化机制。根据用户阅读路径下的体验地图,分析他们不同阶段的核心诉求,从而找到设计机会点,再将设计机会点转化成设计目标,从而制定设计策略。分别在用户阅读内容的不同阶段对用户进行付费转化上的引导刺激以及养成。 

图片

 这里结合实际输出案例具体分析下:我们根据用户阅读路径分为阅读前、阅读中、阅读后,分别在不同阶段根据用户不同诉求去进行设计目标制定和方案实施。 

图片

图片

阅读前-阅读前核心诉求是去引导消费,从其他场景进入浏览页,用户最直接的目标是希望能够尽快看到内容,所以获取内容的效率非常重要。我们将以前的支付跳转页面,改为支付弹层,并且将所有付费信息整合分层,最大化提升用户付费效率,帮助用户快速获取内容;针对用户对于付费的抵触心理,采用情感化的设计,在弹窗上加入了品牌形象,并从创作者口吻弱化官方盈利感知,同时也为用户提供非付费的观看途径,平衡用户心理预期。 

图片

阅读中-在阅读中,核心目的是去刺激用户消费,刺激用户消费需要从内容本身去挖掘用户的消费点。这里做了两点优化:第一,优化弹幕交互形式,新增表情互动功能,用户可以直接发布表情包代替文字弹幕,降低弹幕互动门槛;第二提供个性化弹幕皮肤,皮肤有主题性质和IP维度,用户可以根据自己喜好调选各自风格或者不同作品人物的弹幕皮肤,满足用户个性化定制需求。 

图片

阅读后– 最后是阅读完作品后的消费养成,我们尝试去搭建用户的荣誉体系,首先增加针对作品的打赏道具,用户可以根据自己喜好去对作品进行打赏或者吐槽,满足用户对于作品的情感宣泄。同时我们也进行了荣誉体系的搭建,对整个等级体系进行升级,以前我们等级感知,趣味性都很差。于是针对等级体系,我们开展了全民共创模式,在用户群体中去征集关于等级的创意想法,强化参与感。新版等级新增6种不同特殊样式,强化不同等级之间的差异感,刺激用户升级的活跃度。最后会设计用户专属个人等级卡片和打赏榜,满足个人成就感,加强用户对于荣誉体系的粘性。 

图片

 
方案呈现-最后将整体方案做成高保证DEMO,预览实现效果,同时也更方便和产品以及开发同学理解,有助于方案更好落地。

图片

设计体系搭建 

图片

图片

图片

在设计方案落地实现的过程中,经常会遇到两类问题:

  • 1.是设计上下游协同过程效率得不到有效保证。
  • 2.实现过程中设计方案的还原偏差。为了解决这两个问题我们进行了设计体系的初步搭建。首先,为了确保设计语言的一致性,我们提前制定了视觉规范;其次,也将部分模块组件化封装上传到协同平台形成组件库,做到随用随取;然后,在协同上利用智能标注软件和切图软件,效率高且精准的解决开发实现还原的问题;通过设计系统的完善,去提升项目的实现能力和协作效率。 

图片

数据+专业+口碑 

图片

设计师经常面临的一个难题就是项目设计完成后,设计价值无法得到有效的量化。设计相对比较主观,比较难有客观的量化结果体验好与不好,但也能够通过一些不同的维度来判断一个设计作品好与不好。这些维度可以是产品角度的可用性测试、用户角度是口碑测评、内部自查角度的项目复盘总结、以及相关专业人士或者干系人的角度的建议等。

 

主观维度:

我们进行了可用性测试,用户评论调研,也将项目整体设计思路进行相应总结,并且通过和公司内外各界专业人士进行交流获取反馈。

 

在客观角度:

从整体数据效果这块儿看,改版后这半年,我们会密切关注DAU的变化趋势,同时将整体数据拆进行分段分析,对比之前不同体验阶段数据有无明显变化,用以来评判设计改版后在数据上的有效性。
收到的设计反馈信息是单一面或者单角度时,好与不好的判断相对片面,如果能够从多方不同维度收集设计反馈,信息面相对会更全面,也能够为后续迭代提供更多的切入点。 

 

– 本文小结 –

图片

通过洞察-分析-制定清晰的用户体验策略,在设计方案推动的时候确保项目实现能力以及协调效率,最后对项目进行全面的验证,形成闭环。是产品体验设计师需要构建的能力体系,也是设计为产品创造价值的链条。这是关于产品体验的整体内容。很重要的一点:任何好产品都离不开持续迭代。

z

原文地址:TCD设计中心(公众号)

作者: OUOU

转载请注明:学UI网》【产品体验设计】-设计实践篇

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

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

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

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



2021下半年3种UI新趋势!

seo达人


01.毛玻璃质感

毛玻璃质感的风格其实已经火了好一阵子了,但是现在依然热度不减,预计还会火很久很久,实在因为这种质感太百搭了,从界面到3D、从卡片到图标,几乎无处不在。而且都会为作品大大加分,整体高级感氛围立马就出来了。你还不学起来吗?

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.几何化

抽象几何化的元素也是各种作品中都少不了,今天挑的都是绝对实用的风格,每个设计师都可以用到!整体简洁抽象的表达应用场景真的太多太多了,在你不知道加点什么丰富作品的时候,选它肯定没错的!跟高饱和色彩的完美搭配也是它受欢迎的原因之一,会让你的作品十分亮眼!

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

03.3D图标

表情图标的元素也火了很久了,然而现在更吸引人的是3D图标。包括表情、手势等等元素应用越来越多。3D图标更具有观赏性的特点使它格外受欢迎,加入立体化的萌趣表情以及手势等元素,可以赋予作品更加情感化的表达,让人觉得更有趣味性。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片图片

图片

图片

图片

图片

图片

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2021下半年3种UI新趋势!

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

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

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

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



vue 数据双向绑定原理

前端达人





首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会,接着为input会添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。



一小段手写实现代码

仅供参考

class Vue {
constructor(option){
this.$data = option.data
Observe(this.$data)
Object.keys(this.$data).forEach((key)=>{
Object.defineProperty(this,key,{
enumerble: true,
configurable: true,
get(){
return this.$data[key]
},
set(newVal){
this.$data[key] = newVal
},
})
})
}
}

function Observe (obj){
if(!obj || typeof obj !== 'object') return
Object.keys(obj).forEach((key)=>{
let value = obj[key]
Observe(value)
Object.defineProperty(obj,key,{
enumerble: true,
configurable: true,
get(){
console.log('有人获取了 ${key} 的值')
return value
},
set(newVal){
value = newVal
Observe(value)
},
})
})
}

1

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

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

使用 Nodemailer 发送邮件 邮件提醒通知功能实现

前端达人

Nodemailer 是一个基于Node的邮件服务模块。

使用 Nodemailer 完成一个发邮件功能非常简单,只需3步:

  1. 引入模块
  2. 创建 transport
  3. 发送邮件

引入模块

首先安装 Nodemailer

npm install nodemailer 

引入

var mailer = require('nodemailer'); 

创建transport

创建 transport 使用 Nodemailer 的createTransport方法,需要配置一下邮件服务。

首先,要在邮箱设置里开启 SMTP 服务。

然后,设置一个客户端授权密码。

最后,写一个配置文件(conf/mail.js)。以126邮箱为例:

module.exports = { host: 'smtp.126.com', auth: { user: 'user@126.com', pass: '******' } } 

host字段配置刚才开启的服务地址。
auth里的user字段配置邮箱账号,pass字段配置刚才设置的授权密码。

这样创建一个 transport:

var mailConf = require('conf/mail'); var transport = mailer.createTransport(mailConf); 

发送邮件

发邮件使用 Nodemailer 的sendMail方法,需要配置一下邮件内容。

这里配置了发件人,收件人,标题和正文:

var mailOptions = { from: mailConf.auth.user, to: 'receiver@xxx.com', subject: 'Hi, there', text: 'Mail from Node!' } 

可以像官方文档一样定义一个回调函数:

function mailCallback(error, info){ if(error){ return console.log(error); } console.log('Message sent: ' + info.response); } 

然后,就可以发送邮件了:

transport.sendMail(mailOptions, mailCallback); 

总结

这样就完成了最基本的发邮件功能。

Nodemailer 文档非常详细,可以探索实现更多功能。


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

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

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

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


产品数据规划指南

涛涛

数据指标基础概念

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

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

存档