首页

Invalid default value for prop "data": Props with type Object/Array must use a factory function to r

前端达人

超级好用

问题: 

 大致意思是Object/Array类型的Props必须使用工厂函数返回默认值。

 

问题定位:

 

 

解决办法:

将默认的值以函数的方式进行返回


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

文章来源:csdn

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

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

每天都在用的“黑体”,原来这么排版才好看!

seo达人

图片

汉字的黑体是依据西文无衬线体特点所创造,黑体起初只有一种笔画粗细度,由于汉字笔划多,这会导致小字清晰度较差,所以一开始主要用于标题设计。

随着制字技术的精进,黑体具有了不同字重和宽窄的字形,让黑体应用领域更为广泛,无论标题、内文还是注释都可以胜任。

图片

尤其是随着20世纪末电脑和互联网的普及,黑体字的价值得到了进一步体现,它简洁的笔画特征与屏显介质特性相符,从而成为了当今各种屏幕媒介中最有发展前景的字体。

图片

黑体高度的统一性,可以让字体本身对眼睛刺激降到最低,而把更多的注意力放在文字表达的内容上,特别适合段落性文字的编排,成为正文使用的首选字体。因为正文强调的是字体“读”的功能性,为正文选择黑体可以让读者轻松舒适地进行阅读,专注于文字所表达的内容。

图片

图片

各大字库也开发有各有特点的黑体,其中免费商用的有:思源黑体、阿里巴巴普惠体、OPPOSans、鸿蒙字体。

图片

在黑体基础上又衍生出很多字体,这里推荐的是部分可以免费商用的黑体:

图片

 

黑体的使用场景

简洁和规矩的黑体在气质上没有太大的个性,它适用的范围比较大,可塑性很强,通过字形的变化,可以表现出不同的气质。

 

现代、科技

黑体简洁干练和几何化结构的笔画特征,呈现出强烈的现代感,适合表现科技、未来感相关的情景。(如电子、科技、互联网等行业)

图片

图片

 

正式、严谨

黑体是极具理性风格的字形,没有明显情绪导向也让黑体给人一种中立客观的印象,适用运用在各种正式、严谨和体现安全信赖感的场景。(如政府、企业、医疗行业等)

图片

图片

 

醒目、冲击力

较粗的黑体强壮有力显得十分醒目,还具有很强的视觉冲击力,常用于促销页面,口号式的标题配上粗黑体才够力道。

图片

图片

 

浑厚、力量

粗黑体浑厚稳重,具有力量感,适合运用在运动、工业等设计领域。还有着有男性倾向,常用在体现男性产品的设计中。

图片

图片

 

高雅、精致

笔画较细的黑体结构清晰,没有过多的装饰,显得简约、高雅而精致,有着女性特点,适合运用在服装、化妆品等行业。

图片

图片

 

黑体的搭配实操

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配,是最简单、安全的搭配方法。本次案例使用思源黑体进行搭配示范。通过字体的大小、粗细形成阅读的层次感。

图片

西文选择与黑体风格统一的无衬线体“Univers”,粗细尽量和中文相一致。

图片

编排效果:

图片

 

案例二

第二个案例进行一个运动文案的编排示范。带有强烈动感的书法体,搭配具有力量感的黑体,非常适合运用在一些要体现激情活力的运动、游戏、舞蹈等设计主题,硬朗的黑体与柔和的书法体能够产生强烈的对比效果。

图片

西文则选择与黑体风格统一的无衬线体。注意根据书法字的结构和笔势进行排版,通过对文字大小、位置的调整,让文字看起来更紧密也更有节奏感。

图片

也可以选用与书法体风格匹配的西文手写体进行搭配:

图片

 

案例三

第三个案例进行一个时尚女装文案的设计示范。本案例选择较细的黑体和宋体进行搭配,字形形成了微妙的对比,两款字体都有着高雅、精致的气质,运用在具有女性时尚特征的设计中相得益彰。

图片

西文则选择和黑体相对应的无衬线体、宋体相对应的衬线体进行搭配。

图片

编排效果:

图片

如果感觉排版太过于规矩,可以尝试加入手写体加强字形对比,打破呆板感,营造更强烈的动感。

图片

黑体无论是识别性、适用面、视觉效果都非常好,新手使用也不容易犯错,缺点是个性不足,用得不好会显得平庸。用好黑体是现代设计师必须具备的基本功,需要大家不断练习来掌握黑体字的使用技巧。

 

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

作者:邓海贝


转载请注明:学UI网》每天都在用的“黑体”,原来这么排版才好看!



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

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

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

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






前端保证一比一按源文件做,结果又是惨不忍睹…

seo达人



图片

但真的是相差很远诶!

我再仔细问了一下,终于知道原因了……

他确实是按照方案做的,但是所采用的,都是宽度和高度,而不是间距。

我说:

『 界面布局的关键不是宽高,而是间距 』

看他相当地不以为然,于是我只好这样从头开始解释:

 

前端原理

对于前端来说,界面是一个盒子一个盒子套起来的,而不是像画图工具那样一个图层一个图层叠加起来的。

如果把界面看作一个大盒子,那么里面的模块就是小盒子。小盒子里面会装有文字、图片或者更小的盒子

由于现在很多网站都是响应式的,所以这些盒子一般没有固定的宽度,而是根据固定的边距,来自由伸缩。

图片

Sketch 和 Figma 等 UI 绘图工具,都提供了固定边距的自动布局功能,用的就是这个原理。

图片

上图截自:Sketch

 

但是因为这些绘图工具的画板里用的是图层结构,所以只能固定元素相对于画板的边距,而不能固定元素相对于模块的边距,除非使用组件。

 

尺寸是变化的

前面提到了一个很关键的点,那就是「盒子」,或者说框架宽度不固定(响应式页面)。

既然宽度,那么框架的高度也同样是不固定的

因为页面包含大量固定字数的文字或者固定比例的图片,在宽度不固定的情况下,高度自然也没法固定了。

图片

那么既然页面内的元素无法固定高宽,那么什么才是固定的呢?

答案是:

 

间距是固定的

你可以想象一下栅格伸缩的情景,原理一样,只是真实页面上栅格替换成了各不相同的边距。

也就是说,设计师最好是一开始和前端交付时,就明确设计稿上各元素之间的边距,而不是高宽:

图片

这一点,不但一些设计师不清楚,很多前端也不清楚。只是设计师不清楚是因为不知道前端原理;而前端不清楚,是因为他们不在意相应布局的视觉效果。

不过,虽然框架不固定高宽,但是按钮、图标、LOGO 等小元素,通常还是固定高宽的

图片

 

文字对尺寸的影响

一些设计师向前端提供文字参数时,只提供字体和字号,结果出来的效果还是相差很远。

图片

通常来说,最容易产生问题的参数就是「行高」了,因为浏览器的默认行高是 100%,而很多系统平台都有自己的默认行高。

所以说,行高一定要明确才能确保效果,而且最好是提供百分比而不是数字,这样就能够跟随字体尺寸按比例变化了。

图片

除此之外,还有「段落间距」和「字间距」可以注意一下,不过使用率较低就不多说了。

图片图片

 

尺寸标注

我知道现在有很多工具可以查看设计稿的尺寸,但是如果前端是新手,也会 get 不到你的设计规范。

标注的时候,就可以只挑关键参数,即:字体、字号、行高、边距、色彩。

其实,如果你知道哪些是关键的,需要标注的东西也没有特别多,比以后东拉西扯地沟通细节高效多了。

图片

很多设计师看了上图的标注,也许会惊呼“没必要”吧!

这说明你的前端同事很优秀,不需要解释太多。

可即便前端同事再优秀,按钮是否要自动灵活伸缩?按照文字内容还是按照界面宽度伸缩?这些东西,也还是要他们自己来“猜”。

像我这样对自适应方案想得比较多的,就更加倾向于标注清楚些。

 

总结

如果你有一名优秀而细心的前端同事,那么以上都不是问题,可能你根本不需要知道也能好好合作。

但是设计师的工作生涯中难免遇上几个难对付的前端,多点沟通技巧,也可以让自己心情愉快些。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》前端保证一比一按源文件做,结果又是惨不忍睹

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

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

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

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



金融产品如何做好惠农设计?

资深UI设计者

窥见“乡村金融困境”一角

去年夏天的时候,我曾随父母和一群叔叔阿姨回到他们当年下乡的村庄游历。那是县城边一个山清水秀的村隅,流水潺潺,疫情的阴霾从未造访。对我而言,那天最为深刻的记忆停留在我们路过了当地的农信社网点,那应是安静的乡道中最热闹的一角,我看到熙攘人群中很多的老人,掂着银行卡、存折或者手机,还有大大小小的纸张资料站在大厅中,或是神色匆匆,或是眉目惶然。

这些留守在村里的大多数人,他们所有与金融的联结固定在农村银行网点与金融服务站中,他们在这里存钱取钱、缴交社保、支取生活费、领取补贴和低保。农村的银行网点有限,业务又必须本人办理,很多村民过来一趟已经足够费时费力,而一旦忘带了什么资料,又相当于白忙一趟。

对于我们来说,手机上轻点两下便可完成的操作,对于他们来说竟然如此困难。

金融产品如何做好惠农设计?来看腾讯的实战案例!

1. 服务使用之困:不会用

根据最新的第七次人口普查数据,全国人口共 141178 万人,其中居住在乡村的人口 50979 万,占比 36.11%,而据世界卫生组织发布的《中国老龄化与健康国家评估报告》预测,到 2030 年,中国农村与城市地区 60 岁以上的人口比例将达到 21.8%和 14.8%。但由于农村人口密度与交通原因,现代农村金融很难覆盖到普通农户。

一面是由于有限的教育资源与严峻的老龄化形势,另一面是显著低于城市的金融服务覆盖率,对农村人民来说,线下金融服务办理难,流程慢,而对于可以跨越地理限制的线上金融,横亘在大家面前的是比城市更严重的数字鸿沟,“不会用,也不敢用”。

2. 资金之困:不能用

土地在我们国家不只是农业生产资料,还承载着农民的福利和农村基层的各类开支。近年来政府通过金融扶持“三农”的决心可见一斑,农村创业创新进度的不停推进,2020 年返乡入乡创业创新人员 1010 万,带动农村新增就业岗位超过 1000 万。

然而无论是个体农户还是涉农小微企业而言,涉农贷款由于农业天然的弱抗风险能力,其后续还款力和坏账率都让很多商业银行心存顾虑。根据 29 家上市银行 2019 年年报数据,大型国有银行及商业银行整体涉农信贷规模稳步上升,但涉农贷款占比却仍处于较低水平,且多家银行呈下降趋势。

一方面是蓬勃的创新发展与蒸蒸日上的资金需求,一方面是涉农金融服务的资金困境,最终也让缺乏足够的资金支持的乡村的产业与业态面临失去活力的风险。

也正是源于这些类似的故事和真切的数据,我们开始探讨“惠农金融”这个话题。依靠腾讯云推出的虚拟营业厅、腾讯云银行、产业金融学小程序等等一系列解决方案,我们希望能让农村金融业务更加温暖,更加灵活,减轻银行和用户的办事成本,把无界银行服务的理念传达到更多地方,提升银行数字化的服务广度与深度。

从包容性设计看惠民设计

惠农设计里自然会涉及到适老化的问题,而除此之外,它会是一个具体指向性更弱,更复杂的语境。

这是为什么我们认为包容性适合作为设计原则来引导惠农的设计。因为它的主旨正是在充分认识到用户的多样性的前提下,允许不同的用户在产品和服务中选择自己更喜欢的方式来参与并体验产品,避免产品在不同人群中产生体验隔阂。而我们也相信好的设计,最终能让大家都受益。

包容性设计较早可以追溯到 2000 年,剑桥大学教授提出的包容性设计方块(The Inclusive Design Cube),这个方块以感知、认知、移动能力三个元素为象限延伸构成立方体。中心的实心方块表示三种能力均具备,而方块越往外延,其中的某项能力便出现欠缺。他们提出,包容性设计是提醒大家不停考量实心方块外沿,以满足更多群体的设计方法。

金融产品如何做好惠农设计?来看腾讯的实战案例!

英国制定了国际上第一份官方解释包容性设计的标准 BS 7000-6-2005(Design management systems – Managing inclusive design – Guide),在标准中,它将包容性设计定义为“主流产品或服务的设计能尽可能多的为人群所方便使用,无需特别的适应或特殊的设计。”

包容性设计的核心主旨,并非“人人都可以使用的设计”。剑桥大学工程设计中心教授 Ian Hosking 绘制了包容性设计的群体金字塔,展现群体中个人的能力差异,并指出包容性设计首先以底座的无困难用户为根基,自下而上覆盖至一个相对理想的用户群体范围,而无障碍设计或可达性设计则是自上而下,优先考虑极端人群的需求,两者是不同的。

金融产品如何做好惠农设计?来看腾讯的实战案例!

浅谈设计解法与设计实践

我们将包容性设计原则带入到设计流程中,重新审视金融云虚拟营业厅等等一系列产品的相关设计,将人置于流程的中心,力图以更为鲜活的视角来洞察设计中的需求,并努力地满足它们。

我们面临着更加含糊但是又无处不在的差异:

  • 生理差异,源于农村人口与城镇人口不同的年龄构成,健康状况差异等各方原因,如:农村地区老年人口视力受损的患病率高于城市,在设计中我们要更充分地考虑页面元素的样式、用色、大小等等;
  • 认知差异,主要由于不同的文化背景导致,他们需要比一般app更为简易直观的操作,更为少且聚焦的流程;
  • 情境能力差异,源于不同的生活经验,生活环境,人际亲疏等等,我们需要在操作中给予更强的安全感,并充分考虑不同情境下的使用场景。

1. 变“不会用”为“安心用”

农村人口尤其是留守乡村人口,其教育程度与文化背景造成的认知差异比城镇人口更为明显,获取信息服务与学习新的科技手段的成本也显著高于城镇人口。近年来越来越多的村镇开始组织手机学习培训班,可以看得出来这类需求也在日趋提升。

2. 实验:感受认知差异的存在

要考虑不同文化水平的人眼中的手机和信息化服务是什么样子的,我们可以通过更改手机语言设置这样一个简单的实验来窥知一二。这实际上模拟了微软在包容性设计中提到“永久性障碍”中”语言障碍“的情形。

具体来说,此时我们的认知模型已然改变,无法通过文字来获取信息,而需要通过视觉符号来识别功能图像、记忆功能位置、强记文字形状等等不同的方式来记住这些服务与功能的使用方法。

下图是 iPhone 的设置页,左右对照一下我们就会发现,原来这个打开过成千上万次的页面,理解偏差可能会有多大。而这里我模拟的还是对手机有一定程度了解的理解模式,若是对于抽象图案理解有一定困难的人群,情况会更加严峻。

金融产品如何做好惠农设计?来看腾讯的实战案例!

而其实 iPhone 和苹果做的已然算是不错,我们可以看看其他,以下是 Twitter。

金融产品如何做好惠农设计?来看腾讯的实战案例!

我们发现当无法倚仗文字来判断信息时,我们会通过其他更为直观的方式来进行信息获取,此时能帮助我们记忆和理解的手段包括而不仅限于:图像,颜色,信息分组,声音等。

3. 声音,图像,而不仅仅是界面

虚拟营业厅依仗腾讯云强大的音视频技术,实现基于移动端的远程视频柜员支持服务。在业务过程中我们以座席人员包揽业务中绝大多数操作为原则,尽可能减少手机侧用户的操作成本,在线上还原线下办理业务的体验。

我们通过语言沟通,屏幕示意等等多种方式,让用户尽可能只需要通过口述,便完成相关金融业务的办理。

金融产品如何做好惠农设计?来看腾讯的实战案例!

虚拟营业厅的”个人理财风险评估“业务,座席人员在座席系统中调取问卷逐一提问,用户只需口述与回答即可,登记答案、提交与审核均由座席人员完成。

金融产品如何做好惠农设计?来看腾讯的实战案例!

身份证验证的过程中,用户界面上不需要有任何操作,只需把身份证对准摄像头,座席人员在座席端里点击拍照按钮替用户完成拍摄。

若是遇到一定需要用户进行操作的部分,我们也可以通过标注、分享屏幕等等功能,直观地给用户展示所需要进行的操作,将他们的理解成本降到最低。

金融产品如何做好惠农设计?来看腾讯的实战案例!

在身份验证流程中,座席人员通过“标注”功能加上动作示意,让用户进行“翻转摄像头”操作。

4. 具象,更加具象

Zereh Lalji 和 Judith Good 对印度孟买的工人进行过一项关于手机使用的调查测试,在测试中他们明确地发现越是具象的产品功能图标,越是容易被受试者理解。

金融产品如何做好惠农设计?来看腾讯的实战案例!

Lalji 和 Good 实验中受试者表示最为熟悉的功能,从左到右:电话本,相机,电筒,录音机。

金融产品如何做好惠农设计?来看腾讯的实战案例!

Lalji 和 Good 实验中,受试者自己绘制的关于有声邮件的图像,左图表示人与人之间传递的类似”电报“的概念;而右侧小人脖子里的线条表示声波,箭头指向的四边形则表示”邮件已经传送“。

经过我们的观察与测试也同样,具象的信息在适农化中更加受到欢迎和认可。 在虚拟营业厅的客户端里,我们细化了所有待机场景的插图,输出了两个不同的方案。对于熟悉手机操作的人来说,下面的方案更加强烈且直观,但是上面的方案,理解成本会更低。

金融产品如何做好惠农设计?来看腾讯的实战案例!

5. 唯一,且永远聚焦

以包容性设计展开的各种实验和研究发现,人们对于有实体按键的手机的理解程度必然高于纯触屏手机,其原因在于一个反馈强烈的唯一按键,可以在任何时候提供用户最快地返回原点的捷径,这是一个超越了信息架构和系统所有功能的存在。

在同样的思路启发下,我们在腾讯云的另一款产业金融产品“消费金融小程序”里也沿用了这个原则。在这个复杂的小微企业贷款流程中,我们保持了所有流程主按钮的唯一,且保证了所有流程都单线进行。只要遵循“哪里亮点哪里”的方式,就可以让这个申请流程一路进行。

金融产品如何做好惠农设计?来看腾讯的实战案例!

消费金融小程序中,申请页面主按钮始终唯一

6. 变“不能用”为“安全用”

针对农村金融服务覆盖率较低、涉农和小微企业融资难的问题,线上金融其实提供了非常好的解决契机,它能让更多的银行的同类产品有机会摆脱物理位置的限制,以更低的传播成本触达到有资金需求的用户。尤其是疫情以来,客户经理的获客与对客都有了更多的制约。

7. 更丰富的对客模式让用户更全面获取信息

我们在虚拟营业厅的现有框架下延伸出了更丰富的对客模式,在这里我们可以将多种形式的产品内容介绍(PPT、视频、文字等等)通过手机端推送到目标客户面前。这样的模式能让更多样形式的金融产品直接推送到有需求的人群面前,增加他们的选择面,让他们可以更为方便地选择自己的金融服务。对于银行而言,这样的功能也有助于让他们突破地理条件的限制,可以为农村打造更多专属的涉农产品,并方便地把它推送到目标客群前。

金融产品如何做好惠农设计?来看腾讯的实战案例!

座席人员利用投送文件功能,给目标客户讲解产品

8. 安全容错的设计

提到安全,很多设计师的第一反应便是我们通过品牌背书来给用户建立安全感与信任感,因为腾讯多年在互联网行业展现的不俗口碑,是我们所独有的优势,但其实这一点并不是所有行业项目都能做到的。适农设计中,对于资金安全与隐私安全的要求甚高于线下金融服务,对于我们来说,实现安全这个目标,仍然需要从体验出发,将安全感蕴含在每一个细节体验的打磨之中。

A. 复杂网络环境的弱网提示

金融服务业务类型众多,仅仅是简单的一个信息修改,在服务过程中便会涉及到身份认证,人脸识别,信息拉取等等多个步骤,同样在线下办理业务的时长若是移到线上,不习惯线上办理流程的用户会对网络的卡顿与不稳异常敏感,从而严重影响整体业务办理的体验。

虚拟营业厅基于当前农村信息化基础网络建设的现状,我们在研发过程中引入了专用的实时音视频技术(Tencent-RTC),为整体通话质量作出保障。同时基于农村网络基础设施的建设现状与网络信号的复杂性,我们对于有可能出现的弱网风险,都在设计上作出了预判和提示,一则可以给用户更充分的预期,配合现场协助的工作人员,也会与用户进行解释和安抚,另一方面也能适当降低由于网络问题导致通话质量低下,客户对座席人员的整体满意度影响。

金融产品如何做好惠农设计?来看腾讯的实战案例!

B. 梳理操作流程,让提示清晰且无处不在

与金钱有关的所有操作,用户都会自带“需要小心谨慎”的心理暗示,而基于涉农金融业务的复杂性,贷款往往需要经过非常复杂的资料填写,资料提交、身份核验与审核的步骤,冗长的申请流程效率低,用户没有预期,整体申请体验和通过率都很难达到理想效果。

我们在消费金融小程序中采用了一种新型的流程申请与资料填写方式,可以精准地提醒用户现在所处的申请步骤,所需的时候资料与步骤总计耗时等等,可以提升申请体验,提高申请通过率,降低用户不满与焦虑感。

首先我们将复杂的神情流程做出层级梳理操作,分为大型,中型,小型步骤三部分。

对于大型步骤,我们在关键的新手教育节点予以呈现,以一种旅程地图的形式,告知用户全流程。

金融产品如何做好惠农设计?来看腾讯的实战案例!

对于中型步骤,我们以清单的形式,让用户对这里的复杂程度有清晰预知,也让用户可以提前准备好所需的资料,一切都一目了然。

金融产品如何做好惠农设计?来看腾讯的实战案例!

对于小型步骤,我们让进度条在页面顶部悬停,让用户时刻可见,同时页面单向滚动,文案上也清晰告知用户接下来要做什么。

金融产品如何做好惠农设计?来看腾讯的实战案例!

这样一套流程设计,我们从申请流程开始到结束,从宏观到微观,做到了脉络清晰且提示全程可见,可以给用户更充分的安全感与确定感。

金融产品如何做好惠农设计?来看腾讯的实战案例!

C. 可控且可退回的纠错方式

当人们在使用不熟悉的服务和功能时,他们往往比平时更害怕出错和失败,而在此时若是身边的人或者工具本身可以提供他们明确的安抚和纠错的路径,他们的顾虑情绪会明显得到安抚。

因此当我们在给更广泛的人群做设计,我们就更需要提供实质意义的明确信息,如明确的错误原因提醒,与轻松的回退机制等等。

消费金融小程序中,我们引导用户进行单线程的申请动作,与此同时若是发现出错的内容,用户可以随时从清单中明确地看到,并快速进行重新提交。

金融产品如何做好惠农设计?来看腾讯的实战案例!

结语

所有技术与设计的问题,最终都会回到人

我们一直致力于打造的无界金融服务,归根结底,是整合着诸多新的科技与技术,引入更为人性化的设计理念,来让更多的人可以更加便捷而有尊严地使用线上金融服务。本文通过将包容性设计的理念引入适农设计,将不会用变为安心用,不能用变为安全用,我们也希望随着我们的努力,会有越来越多有需要的人,可以把我们提供的服务,当成迈向这个缤纷数字世界的一扇窗,一座桥,而我们也可以持续不断地,依着专业能力与同理心,让这扇窗越来越亮,这座桥越来越宽。

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

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

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

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

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




构建视觉层次的4个技巧

资深UI设计者

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。


什么是视觉层次

视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。

视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。

当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。

如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次

颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。

Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab.

Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。

Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。

更多设计文章,设计交流,欢迎添加 | 微信ddm7212

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


运用文字大小字重建立层次

丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。

无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。

除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。

很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。

运用视觉重量建立层次

比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。

如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。

headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。

在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。

设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。

同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。


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

文章来源:站酷   作者:我们的设计日记

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

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

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


实例解析2021年UI设计流行趋势

seo达人

前言

首先定义下所谓行业。美柚是一个工具,但也不仅仅只是一个工具。我们致力于为女性提供一种新的生活方式,提供包含健康管理、问题解决、娱乐交流、电商购物等服务。

从功能上进行拆解,把美柚可以划分为工具、社交、电商、母婴四个大类。

在这四大领域中,我们从易观千帆、艾瑞指数、七麦数据、蝉大师等相关指数平台,筛选相关行业的主流应用进行分析,总结出2021年美柚相关行业设计趋势。

所选应用应该也是我们日常生活中大家比较常用的,工具类所含的「健康医美」也是近年来比较受关注的一点。

整体分析将从视觉表现以及人文关怀两方面展开。7:3的内容比例,以下分析案例包含但不仅限于上述20个应用。

 

第一章 · 视觉表现

1.1 明亮饱和的主色

互联网行业发展日趋成熟,早已进入争夺用户时间的阶段。不计其数的应用,多元的信息,都在促使我们需要一开始就吸引用户。

对于品牌色的选择,并不只取决于应用本身,还有「竞争」,如何在成山成海的应用列表中一开始吸引用户,给用户留下深刻的印象,是定义品牌色时需要思考的。

这几年,有许多应用对其品牌色进行调整。强如国民级应用-「支付宝」和「淘宝」,也需要在被追赶的压力下不断调整策略。大多调整方式,是轻微变动其色相外,提升色彩的饱和度与明度,让产品本身更跳跃。

将拾色器划分为9宫格,通过对所选应用主色在拾色器中的观察,可以发现大部分APP主色的趋势为:高明度、高饱和度的色彩。即拾色器的右上角区域。

母婴孕育类产品的主色选择则更偏向中度饱和。颜色饱和度更多偏向中右区域,这与品类本身柔和的气质息息相关。

从趋势上来说,更加明亮饱和的色彩能在一定程度上更加吸引用户的注意力。当然,并非一味的高明度、高饱和度色彩就是最好的,仍然需要根据产品特性及方向进行正确的决策。

 

1.2 大圆角卡片

日常生活中,如果一件物体过于锋利,就显得不够安全,比如我们常见的锤子,剪刀,给人的感觉都很尖锐。圆角矩形在生活中也是非常常见的,如电脑、平板、桌子等等。巴罗神经学研究所关于“角”的研究发现:角的突显性感知与角的度数的线性变化,锐角比钝角产生更强的虚幻的突显性,因而圆角的设计比直角更具有温度感

苹果新系统(Big Sur),窗口四角从以前的10px增加到20px,控制中心也沿用了ios14的卡片设计风格和布局。微软win10的概念稿中也出现了圆角。我们可以确信,圆角矩形将会在未来一段时间内继续风行。

 

· 边距卡片布局

卡片设计的本质是将信息整合,建立更清晰的页面结构,同时拥有更强的交互能力。 从以下截图中可以看到不论什么行业,卡片布局对于框架结构的承载都是极其优秀的。

 

· 悬浮卡片

iOS 13开始,模态面板采用新的卡片形式。模态面板在操作时会有一个纵深的效果,适用于单手操作。在Apple自带应用中,模态面板得到了广泛应用。

悬浮卡片在各大应用中的运用率极高,不止在于模态面板,也可以作为模块区分。模态面板一般悬浮卡片有吸顶操作,而仅作模块区分的悬浮卡片会跟随内容移动。

 

· 大圆角

既然这个趋势点命名为「大圆角卡片」,那么大圆角是必不可少的。

基于移动端屏幕质量的进化,能更好的呈现圆角的质感,圆角开始被广泛使用。从苹果手机的进化,我们也能明显感受到其圆角的变化。随着全面屏时代的来临,圆角的弧度也越来越大。

可以感知到现在各大应用中的圆角相较于以往都是成倍数的增长。

圆角卡片会成为一个趋势,主要在于两点:一个是技术升级,现在的设备都能更好的对圆角进行渲染;

二是我们视网膜中视觉最敏锐的区域叫中央凹,它在处理运行时最快,圆角矩形在视觉识别过程更容易。

 

1.3 轻量渐变

过渡柔和的轻量渐变越来越受欢迎,其简约兼顾美感的同时,也可以创造轻松、温暖的氛围。回顾过去一年,关于色彩的运用,在渐变色的使用上越来越理性和克制。

观赏下追波上几个轻量渐变的作品,可以在展示时作为背景使用,也可以在页面背景上直接使用,都拥有不错的视觉效果。

实际案例中,考拉、淘宝和小红书的几个页面背景都使用的轻量渐变的效果。我们常常使用的视频软件 腾讯和优酷 也开始在页面背景中使用轻量渐变进行氛围烘托。

除了页面背景,在单独卡片背景我们也可以看到越来愈多使用轻量渐变的效果。这个位置渐变的使用会更加克制一些。

 

1.4 磨砂玻璃

磨砂玻璃主要基于「背景模糊」的效果。与过去的毛玻璃有所不同的是,磨砂玻璃模拟现实玻璃的效果,具有更强的通透感和层次感,带有柔光的感觉。

一样磨砂玻璃的技法,不同的色彩与透明度,所表现的效果是有区别的。

实际运用中,图标和图片都可以做磨砂效果。

玻璃效果的图标层次感更好,有效提升视觉表现力。不过如果大片运用的话可能会引起视觉疲劳,能否成为一个成量级使用的趋势还有待时间的考证。

彩色背景或图像经过玻璃效果的叠加显示更加柔和,同时不影响前置文本的可读性。这一点我觉得未来可能会运用的更多。

 

1.5 温和彩色系图标

这里需要着重强调下「系列」,是一整组的彩色图标。

过度的使用高饱和色彩会引起视觉疲劳,在同一场景下,一整套多彩图标偏向使用更加温和的彩能传递平静且更加柔软的情绪。

大部分彩色系图标处理方式有这几种方式:

  • 同色系叠加-图形带透明度产生叠加的视觉效果;
  • 饱和相对较低的单色或同色微渐变;
  • 微渐变主体+同色浅色底板

它们的统一特性就是成系列的彩色图标,饱和低不高,视觉感受轻松柔和。

 

1.6 图形三维化

手机屏幕进入高分辨率时代,屏幕色彩也更加的准确,现代的前端框架可以承载更加精细的画面以及减少页面的加载时长。三维可以创造更多元的设计感官,在UI中开始变得越来越受欢迎。毋庸置疑,3D在2021年会变的更加流行。

3D可以塑造更强的空间感。在UI运用中的3D效果不追求过分逼真和完全拟物的光泽感,以简约的造型和丰富明快的颜色提升设计感。

视觉三维化以更加立体、更具视觉冲击力的形象强化用户对内容的感知。IP形象三维化可以给用户建立更加立体的品牌认知。也可以运用在运营图中增加图片的冲击感。

图标三维化,在立体感上可以再稍微弱化。Big Sur系统采用拟态图标,既是一个新尝试也是开始。我们可以大胆预测,未来将会在更多设计中看到轻拟物图标。我们可以大胆预测,未来将会在更多设计中看到轻拟物图标。

在时刻需要掠夺用户注意力的时代,极简扁平的视觉已到了极限。但全局拟物的设计势必影响信息获取效率,因而轻拟物图标一般运用在关键功能入口上,不适宜大面积使用。

 

1.7 数据可视化

大数据时代,数据的展示是必不可少的,借助图形化手段,更加清晰有效的传达信息。让美学和功能齐头并进,整合稀疏而又复杂的数据集,这就是我们常说的数据可视化。

也可以理解为我们常说的图表,看下实际案例中,不同行业有关数据的展示都进行了可视化表达。

 

第二章 · 人文关怀

2.1 关注隐私保护

大数据时代加快科技、社会发展的速度,同时也让网络时代下隐私保护的伦理问题进一步演化。互联网便利的同时也滋生科技隐私的信任危机。

隐私保护技术不完善、法律不健全、意识不充分;国内尚在制定中的《个人信息保护法》无一不在提示我们应当关注隐私保护。

投射到应用中,我们如何能做的让用户感知自己隐私得到保护呢?

  • 支付宝-多窗口模糊处理、付款二维码界面截图时会做模糊处理并在文字上进一步提示,是对金融资产的保护;
  • 饿了么-电话呼出,使用加密虚拟号码,这也是近年来几乎都会使用的对通讯隐私的保护方式;
  • 百度-无痕浏览是对搜索信息的保护

 

2.2 智能化

在互联网、大数据的支持下,应当具有满足人的各种需求的属性。一般来说,智能化我们都在说某一个系统或者设备,其实APP应用也可以通过细枝末节的展示给予用户智能化的感觉。

 

· 记住用户的选择

饿了么提交订单页面,当你选择以后都需要餐具,后续每一次订单都会默认「需要餐具」。记住用户的选择,不要让用户总是重复同一个选择,提升操作效率。

 

· 告知用户进度

keep进入「我学过的课程」会显示上次学习时间,在相关课程详情页帮助用户记录训练次数。告知用户进度,不会疑惑当前事项是否曾经操作过。

 

2.3 生活化

我们说了很多年的情感化设计,今天来说说更加生活的情感化,我在这里称它为「生活化」。在更加浮躁的网络时代,以更加生活化的情感来贴近用户,引起共鸣。

薄荷健康首页每天都会出现不同的壁纸,上面都附有很诗意的句子,如“你做三四月的事,在八九月自有答案”,“要有大大小小的期待,生活才不会百无聊赖”。看着是鸡汤了一点,但是感觉阳光灿烂的一点呢。

丁香医生下拉刷新随机出现的文案也是非常生活化,“耳屎不用掏的太干净”“口水消毒不靠谱”“脚臭的不一定有脚气”,诸如此类,既贴近生活又带点小科普,非常符合健康应用的调性。

 

结语

趋势具有周期性且永不止息。我们无法预知未来什么样的设计会脱引而出引领潮流。我们能做的是先行感知可能成为趋势的设计,在变革到来之前拥抱变化。

流行是量级,趋势是方向,一个流行的设计是否成为趋势要在一个周期内的量来判断。苹果作为硬件乃至互联网行业的先驱者,他们的每一次设计变革较大概率上都预示着视觉的革新。

 

原文地址:站酷

作者:草莓设计说

团队:美柚用户体验设计中心

转载请注明:学UI网》实例解析2021年UI设计流行趋势 — 美柚UED

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

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

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

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



浅谈动漫IP商品化设计思路

seo达人



前言

近几年随着IP越来越火,很多小伙伴们都开始尝试做IP衍生周边开发,那么面对众多IP我们动漫的IP该如何去做商业化开发呢?经过摸索和尝试,这里总结了一些经验跟大家简单的分享一下。

本篇主要内容分为两个模块:

一.IP种类的浅析及两者的差异点

二.内容型IP如何做长线设计规划思路

  • 1.认识自己
  • 2.认识行业市场背景
  • 3.明确的商业化授权路径
  • 4.人员配置设计
  • 5.系统的设计规划方案及执行

 

IP种类的浅析  不同种类的差异点 

IP这个词每个人都有不同的的见解,网上可以搜索到各种专家的解释,这里就不做过多的说明。但是结合过往的项目经验需要小伙伴知道的是IP其实可以统分两大类:

图片

(图片来源于网络,侵删)

 

内容型IP就是类似狐妖小红娘、一人之下、火影忍者、漫威系列、迪士尼公主系列等有一定的世界观、历史、人文、故事等内容为基础构建的世界;

形象型IP就是类似kakao、熊本熊、Molly、BT21等由一些通信、艺术家或者明星等为基础演化出具有独特性的品牌形象。

 

虽然故事型IP和形象型IP在商业化时都可以进行漫画、动画、游戏、周边等内容的开发,但是实际接触下来,我个人认为故事型IP要比形象型IP更难开发,原因如下:

  • 从形象面部来看,故事型IP大多是人物形象,在关键性特征上提取很难像形象型ip那样去抽象化形成独特的符号
  • 从颜色传递来看,形象型IP很直观的就可以在形体上识别关键色
  • 从轮廓简化来看,形象型IP也能够很直观的展现出具有识别性的剪影

图片

(图片来源于网络,侵删)

 

那么,像我们几万部动漫基本全是故事型IP,在商业授权设计中我们又是如何辅助业务去做商业开发的呢?接下来就给大家简单介绍一下,我们是如何做长线设计规划的。

 

内容型IP 如何做长线设计规划

先强调一下在规划前,首先我们要明确的知道每个IP都有生命周期,如何在有限的生命周期内创造无限价值就是商业授权设计师需要前置重点考量的事情。其次我们也要清晰的知道现在IP所拥有的粉丝量并不代表它与商品转化量成正比,所以不要盲目的去重度商业化。
具体我们是怎么做的呢?

 

流程如下:

认识自己 → 认识行业市场背景 → 明确的商业化授权路径 → 人员配置设计 → 系统的设计规划方案及执行

 

【Step 1-认识自己】

这个就跟上战场前先检查自己的装备一样,才能明确的利用现有的优劣势及时调整作战计划,一般从以下几个方面着手:

  • 是否拥有核心资产也就是IP ?

优势:我们拥有很多优质且知名的IP,通过平台的运营IP的生命周期都不短,很合适做商业化开发,也有一定的粉丝量积累

劣势:关于作品前期内容设定是缺失的,这意味着后期我们需要花费很多时间和精力做内容整合,来统一标准规范

  • 是否拥有相互配合的团队包括商务、渠道、市场、设计等等,这里我们着重指的是设计团队

优势:拥有互联网相关的运营、UI、品牌等维度的设计资源

劣势:缺乏对IP商品化相关的设计及生产工艺等内容的设计资源,等于是一穷二白从零开始搭建团队

 

【Step 2-认识行业市场背景】

在16年时,国内才真正进入“IP元年”,在人人都开始做IP的大趋势下,IP行业细分出的商业市场也逐步开始形成,尤其随着18年中国Z世代人口数逐渐攀升,在他们的马斯洛底层需求被满足后,更加追求的是顶层精神需求带来归属感和陪伴感。同时Z世代的人均月可支配金额为全国平均水平的150%,因此这波人群的“消费动机”和“消费实力”都得到了充分的体现,也成为了我们IP衍生品市场强有力的助推剂。总之,目前国内IP商品化市场还处于蓝海市场,有机会的话大家都可以试一试。

 

【Step 3-明确的授权设计流程】

设计是服务业务的,最终结果都是以业务目标为导向的,所以我们一定要清晰的知道业务的商业授权路径是什么,才能有针对性的知道设计流程是什么。

完整的商业开发流程,从最开始的内容整合到落地成商品,需要经历多个环节和不同团队的协作完成,而商业授权设计在整个链路上都需要前置参与并从中获取关键点:

  • 内容整合:整个IP商品化最核心最关键的一步就是需要整合最底层的IP框架,包括IP相关概述、用户特色、IP基础设定、品牌调性等内容,打好关键基础才能够指引后期商品产出
  • 图库构建:同样是核心关键的一个环节,需要设计全程参与核心资产的品控产出
  • 商业授权:配合业务授权,权衡设计方案的可行性
  • 审核监修:全程参与品质把控,了解商品从设计到落地的每个环节及核心审核要点
  • 运营推广:全程参与品质把控,输出商品核心卖点并关注数据闭环

图片

所以,可以看出,整个商业授权设计需要的设计能力是比较偏综合性的,所以要前置参与整个开发路径还要知道每个环节的核心要点,包括b端商品的生产工艺及流程,c端的商品卖点宣传等等。

 

【Step 4-人员配置设计】

在上面我也有说明,IP商品化需要设计具备很多综合能力,不仅仅是表层的设计美感,也包含了对项目的统筹、人员分工、b端商品的生产工艺及流程的跟进等等,所以我们根据业务细分模块建立了美术PM机制,T队的形式,进行职能划分,更加专业高效的配合各类业务

图片

 

【Step 5-系统的设计方案及执行】

那么针对设计流程如何规划设计方案呢?我们拿《狐妖小红娘》来举个栗子:

1-前期资产整合,由于IP商品化是部门新拓展的业务,整块内容处于零基础阶段,所以我们首先需要快速学会走起来,一步是整合内容,一步是基础规范搭建,来形成统一的对外标准规范,让整块机制运作起来。

图片

 

2-中期补齐模块,在核心内容搭建完毕后,这时我们需要结合业务细分模块诉求找到快速推进SKU增长的方法,学会稳健前进,以下是目前我们常用的4种设计策略:

 

2.1 贴图设计

对原始素材进行整合设计并搭建素材库,可以快速低成本的进行商品设计,类似粉丝向产品徽章、钥匙扣、亚克力立牌等能直接进行印刷的品类,虽然商品量能够在短时间内迅速增量,但是对设计是有要求的,它需大量有设计感的图库进行支持的。
这种设计能够快速助力IP商业化试水,明确粉丝的消费能力并及时止损。

图片

 

2.2 定制设计

结合IP故事内容挖掘核心卖点,在有一定的消费力转化下做的升级策略,一般这个时候我们就会去开发手办、联名、定制等这类重一点的商品了,去满足核心粉丝的精神寄托。但是这类产品开发周期长,成本投入相对也会增加。

图片

 

2.3 功能设计

这类商品设计更加考验设计师对商品工艺以及其他领域的知识积累,因为需要打破壁垒做双向结合设计,比方说现在的暖手宝和小手办的结合,不仅可以暖手还可以随时替换小手办,赋予了新的功能,多方位满足用户使用和观赏的体验,这类设计不仅开发周期长,需要储备的知识量也很大,也很消耗资源,但是能够在具备“颜值”的情况下增加更多趣味性,助力业务扩展更多商机。目前市面上这类产品也不是太多,

图片

(图片来源于网络,侵删)

 

2.4 品牌设计

这类设计是需要深度挖掘作品内涵并结合元素演化出的新品牌概念做创新设计,类似我们平台的一线牵、哪都通、人有灵等,这种模式主要是借力使力反哺ip,用来积攒口碑的和品质的,但是它需要部门协作集中运营,会消耗各方资源。

图片

以上的几种设计思路,多数针对大IP商业化年度项目规划,即保证了IP整年度商品运营规划,还可加强品牌效应。像我们的《狐妖小红娘》着重抓情人节来做品牌,其他定制设计会跟随电商重要营销时间上,贴图设计就可以填补全年空缺满足日常消费

图片

3-后期下沉市场,我们除了服务IP粉丝外,业务的最终目标是进军大众消费市场,那么就会涉及到更多产品的垂直开发以及不同消费人群的定位,这就更加需要设计从消费者的角度考量商品本身的材质、卖点、功能等内容做深入研究

这个阶段需要我们更加垂直的去开拓更多大众消费品

图片

 

结语

以上内容基本是动漫IP商品化的一些思路分享,希望这些浅薄的经验可以帮助到正在做IP商业化的小伙伴,如果想要进一步深入了解相关内容欢迎一起相互探讨和学习。

 

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

作者:Limit钱

转载请注明:学UI网》浅谈动漫IP商品化设计思路

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

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

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

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


B端教育产品的情感化设计(视觉篇)

资深UI设计者

教培类产品若想更有效地吸引用户留存,则需要站在用户的角度进行思考,让用户有持续性的动力使用产品。而有“温度”的设计可以让用户更有动力。本篇文章里,作者从视觉上总结了B端教育产品的情感化设计操作策略,一起来看一下。


我们是如何让工具化教培类产品更具有“温度”,同时又满足B端产品多样、规范化设计的。

B 端教育产品的情感化设计(视觉篇)

一、项目背景

此项目是由我们的合作伙伴-清华大学心理学系学习科学实验室执行主任宋老师和他的团队发起,与我们腾讯云的小伙伴一起完成设计和开发的。宋老师的师资团队在教育培训行业已有多年的沉淀,且在类工具化的教培线上产品授课经验丰富。

宋老师团队认为:“现有的工具化产品并不能足够满足团队的教学需求和理念”。他们需要更富有情感化的产品,区别于其它的在线工具化的教培产品。

同时在教学过程中宋老师团队的核心痛点在于:如何让学员有动力地学习下去。21天中长期课程训练营,学员会经常出现无法坚持学习、学习动力不足、中途放弃学习等问题,而这些也自然成为我们需要去突破和解决的设计难点。

1. 核心诉求:如何让学员有动力学习?

解析问题:老师团队希望做出与市场上工具化产品有所区别的产品目标,更是一款具有情感化且具有工具属性的教培产品。根据这个目标和方向,我们快速尝试了一版方案:让学习进度清晰可见—“学习地图”方案。

B 端教育产品的情感化设计(视觉篇)

设计目标

快速迭代1.0 学习地图,定位问题聚焦设计方向。

B 端教育产品的情感化设计(视觉篇)

1.0版设计地图

我们快速打造并模拟上线了1.0版学习地图,并和宋老师团队沟通发现:如上图的信息模式更适合即时性运营类的信息传达,而在21天这样的学习训练营中,这样的视觉信息表达会有以下的问题:

  1. 学习路径漫长且曲折,让学习目标看起来很难完成;
  2. 在漫长的路径上连续不断的关卡造成一种让用户遥不可及且容易中途就放弃学习;
  3. 节点的节奏过于单调让学习没有预期感、缺失成就感。

虽然秉持着创造轻松的学习环境和气氛的目标,我们的设计还不能满足实现情感化的工具产品,所以我们快速的定位问题并调整了我们学习地图的设计思路。

B 端教育产品的情感化设计(视觉篇)

1.0版设计地图

2. 学习如何才能是轻松又有动力的?

回答最初的问题,如何让学习轻松有效又有持续性?分为以下几个维度:

1)缩短学习路径— 让学习目标看起来轻松可执行。

2)拉近终点目标— 让原先看起来遥不可及的目标“触手可及”。

3)只聚焦当前任务 弱化未完成的任务—帮助学习者减负,学习者不需要关注将来的任务,只需要把精力聚焦在当前的任务下,完成当前的力所能及的“小事”就能打卡成功。

4)放大学习成就感— 在21天的训练营,把学习分成:初、中、后期。在学习初期需要关注学习习惯的养成;在学习中期需要帮助学习者在中途不要放弃学习,鼓励学习者,并将学习回报等可视化,像是累计的学习时间获得惊喜等;在学期后期放大目标,凸显目标任务近在咫尺的感受,在最后学习终点放大学习的成就感。

5)放大社交属性— 腾讯的基因就是有社交属性的,所以将学习组团化,学习者之间互相鼓励,让学习变得简单和快乐。

3. 从笼统的游戏化设计聚焦关键设计点

1)轻松

创造更轻松愉快的学习氛围。首先需要拆解分化目标本身,聚焦于当下要完成的事,而不是想着那个遥不可及的目标;其次,让过程可见,看见学习的过程视觉化的量化;最后,惊喜埋点,让学习是一件快乐的事情。

2)激励

主要的思考方向聚焦在:增加互动,老师上课直播的送花 、标示(学习积极分子等)创造学员之间的互动,攀登榜等。其次通过惊喜盲盒让学习也是可以开心并且有成果的。

3)品牌化

以此次的项目代表,不同的教育机构有自己的属性和教育理念的传达,也有大量的运营的需求。如何帮助合作伙伴或是客户更好的快速、清晰、准确的塑造其品牌和品牌识别度,也是我们需要聚焦的方向。

4)B端设计

作为B端的设计,希望后续面对类似需求的客户可以将设计元素组件化,量化复用的同时,满足用户定制化的需求,灵活多变,帮助产品快速的产出。

B 端教育产品的情感化设计(视觉篇)

聚焦设计关键点

二、差异化学习地图专项设计

1. 地图信息属性调整

1)节点

将课程的节点放大,且增加变量的属性,让每节课程的节点都“埋藏惊喜”。同时节点的设计分为基础节点和其它节点。其它节点包含:彩蛋节点、运营位节点等,让节点变成一个组件的同时具备了灵活变化的属性。

B 端教育产品的情感化设计(视觉篇)

节点组件

2)路径

节点自身就可以组成隐形的路径,相对就压缩了学习路径,减轻学习者的学习负担。并且用空间感的“近大远小的”路径设计从视觉上“拉近”学习目标终点。

3)角色融入

将学习者角色带入,用了小人“跳一跳”的动态增加学习的趣味性。

B 端教育产品的情感化设计(视觉篇)

动态跳一跳

4)故事线

服务于售前,产品可以针对不同的客户和需求串连不同的故事线。

在做初期提案时,我们的故事线是:学习积累水滴灌溉小树苗,在学习过程中小树苗慢慢成长变成大树,通过这样的视觉呈现来体现学习的成就感。学习者在不同的节点会解锁带有树苗长大的惊喜“彩蛋”节点。

作为B端的设计服务,不同的客户有不同的目标需求,但是基于这样的学习地图组件,后续可以更换不同的故事线,也可以根据客户需求灵活定制学习地图。

2. 地图在界面上的的呈现

1)终点目标可见/聚焦当前任务

首屏就可以看到终点,并展示终点第21节课程,减轻学习者的负担。在视觉上呈现出:完成这个目标“看起来”也不是很困难的感受,让学习者感觉自己是可以凭借着努力去触达学习终点的。所以学习者只需要聚焦在当前需要完成的课程,而不需要考虑还未完成的课程。

B 端教育产品的情感化设计(视觉篇)

地图的视觉呈现

2)界面结构

  • 远景:不同的阶段感,放大成就感。
  • 课程区域:(减少学习负担,聚焦当前的任务。
  • 前景区域:边走风景边会变化体现成长感,减少学习的倦怠感。

3)前、中、远景的结构设计

界面的结构分为:前景、中景、远景。

  • 前景区域:随着学习者边“走”风景会变化,在前景处体现学习者的成长感,减少学习的倦怠。
  • 中景:课程区域,减少学习负担,聚焦当前的任务。
  • 远景:弱化未来的课程,在学习后期阶段,放大目标触手可及的感受,帮助学习者坚持学习。

4)学习地图元素的组件灵活变化

1.0版本的学习地图设计重心放在视觉插画上,而忽略了服务于B端用户所需的快速组件化。基于现在的设计结构,可以有效的产出和预估设计的工作量,将其作为有情感沉淀的半自定义组件。

B 端教育产品的情感化设计(视觉篇)

如何通过界面提升学习动力

5)最后小结

学习地图的设计是为了帮助学习者减轻学习负担、帮助学习者明确学习路径、凸显学习的成长感。灵活的节点设计以及隐藏彩蛋增强了学习的动力,减少了学习的疲劳感。而在产品售卖层面,可以串联不同的故事线快速搭建学习地图。

三、帮助合作伙伴树立品牌

1. 客户提案

合作伙伴提出了关键词“成长”,为了更好地管理用户的预期,我们做了以“成长”为核心的三个维度展开的设计提案。方案A为成长沐浴在阳关下的治愈型方案—向阳而生感受成长的力量。方案B为学习也可以很快乐—学习嘉年华。方案C为成长的经典绿色方案—成长是一种诗意的栖居。

B 端教育产品的情感化设计(视觉篇)

3个不同的提案

确定主题向阳而生

在与合作伙伴沟通后选择了A方案向阳而生,产品也重新定义了故事主线。将故事主线定义为“登山看日出”所以根据新的故事主线我们定义了主要的品牌元素及延伸运用。

2. 品牌设计元素的提取与应用

宋老师团队选择的“向阳而生”的方案,将设计元素的落点在于“阳光”的设计点上。

B 端教育产品的情感化设计(视觉篇)

视觉元素提取抽象并赋予视觉的语意“在名师的指导下学习成长,犹如沐浴在温和自在的阳光中,快乐成长,快乐学习”,并加入了“学习”的元素—笔记本,希望可以通过纸张体现学习过程中的“亲切感”。

B 端教育产品的情感化设计(视觉篇)

主要设计元素首先来分解主要的视觉设计点-阳光,提取阳光“温暖柔和”的特质。将阳光元素抽象出:磨砂模糊的阳光光晕、一束光线的色彩形状的组合。并将这些特质运用在界面设计中,如下图。

B 端教育产品的情感化设计(视觉篇)

设计元素在界面上的应用在质感上运用更多偏磨砂的效果,加入有代表性的笔记本元素作为底纹。在界面可以上看到,通过阳光光束突出人名,重要的按钮及按钮状态也增加了阳光光晕的设计,在细节上潜移默化地呈现教学与设计的理念。

B 端教育产品的情感化设计(视觉篇)

设计元素在界面上的应用

3. 差异化:融入新的故事线—放大学习成就感

融入新的故事线“登山看日出”。在产品中“学习地图”作为差异化的设计点的全过程展示,参看下图视频演示。

首次学习过程模拟学习进度的视觉化呈现分为三个不同阶段:

  1. 初期-学习新鲜期;
  2. 中期-学习倦怠期;
  3. 后期-学习冲刺期。

我们将21天的学习进程分成不同的阶段,并根据不同的用户心理改变视觉呈现,前期和中期和后期会有明显的“视觉改变”,在最后成功的学习完成也会有一个仪式感的“学习路径”的层层叠加,凸显学习的成就感,此时也是用户对自己用心学习的最好回馈,将这一些心理状态都视觉化地呈现在用户眼前。

B 端教育产品的情感化设计(视觉篇)

B 端教育产品的情感化设计(视觉篇)

阶段的视觉呈现学习地图组件分为:

  • 前景:学习过程变化的信息;
  • 中/远景:学习节点,学习节点包括基础节点和自定义节点,自定义节点可以根据产品和客户的需要更改节点的属性;
  • 远景:学习结束的仪式感展现。这一学习路径的视觉展现形式也可以很好地转化为设计组件,串联不同的故事线让学员去完成不同天数的线上学习。

B 端教育产品的情感化设计(视觉篇)

学习地图组件

1)其它学习激励页面

呼应“向阳而生”的故事线,我们的设计还包含了其它的学习激励机制。例如:每次完成学习会获得一个“太阳”积分、学习攀登榜的设计上,呼应登山主题的视觉表达。

B 端教育产品的情感化设计(视觉篇)

其他激励页面

2)设计规范与设计协同

为感更好地进行教育的视觉协作,我们将视觉规范分为:设计总体理念的概览、设计基础组件、设计特殊组件、界面相关的具体设计内容、典型页面和人物封面规范等,保证内外部的设计输出规范,保持产品视觉基调完整准确。

B 端教育产品的情感化设计(视觉篇)

设计规范

B 端教育产品的情感化设计(视觉篇)

协同设计

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

文章来源:人人都是产品经理   作者:腾讯设计

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

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

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


家装产业化的新特点与新机会

资深UI设计者

随着互联网的发展到一定程度,各行各业都在发生着新的变化,家装行业也逐渐告别了以“互联网+”模式为主导,开始聚焦于家装产业本身。那么,家装产业化会带了哪些新的特点与机会呢?我们一起来看看吧。

当互联网时代渐行渐远,每一个行业都在发生着新的变化,家装行业亦不例外。告别了以“互联网+”模式为主导,越来越多的玩家开始将关注的焦点聚焦在了家装产业本身。

改变家装行业原有的运行逻辑,改变家装行业原有的组成元素,改变家装行业的原有的功能属性,一个全新的时代从此开始缓缓拉开序幕。

乍一看,家装行业的新变革与整个行业正在发生的新变化颇有几分相似之处。如果我们仔细观察便会发现,家装行业因其特殊性,它的发展是有着某些自己的特点的。

认清了这些特点,我们在探索和实践家装进化的过程当中,才能摆脱原有的困境,真正为家装行业的进化找到出路。

反过来,如果我们一味地对家装行业的进化进行一刀切,简单武断地将家装新进化与其他行业的进化混淆起来看待,非但无法促进家装行业的良性发展,甚至还将会把家装行业的发展带入到新的死胡同里。

最后,我们又将陷入到与互联网家装相类似的怪圈当中,难以自拔。

一、家装进化的新特点

一直以来,人们在看待家装的时候都不仅仅只是看待家装本身,而是更多地看待的是家装行业背后的东西。当家装行业的发展进入到了全新的阶段,人们在看待家装的时候,同样面临着同样的问题和抉择,从而呈现出一些新的特点,认识到这些特点,并且从其中寻找到新的机会,才能真正让家装行业的发展带入到全新的阶段。

家装行业不再传统和原始。提及家装,人们首先想到的是传统和原始,无论是从家装行业的运行机制上来看,还是从家装行业的组成元素上来看,几乎都是如此。

然而,经历了互联网时代的洗礼之后,家装行业的这样一种状态正在发生深刻而又全面的改变。

越来越多的新元素开始加入到了家装行业当中,比如,人工智能;比如,大数据;比如,新型材料等等。

当组成家装行业的新元素开始发生嬗变,家装行业的传统和原始开始被彻底而又全面地改变,家装行业再也不是我们所认为的那样一种状态了。一场由内而外的新变革开始在家装行业上演。

与此同时,家装行业的运行机制同样正在发生着一场深度变革。按照传统理解,我们所认为的家装行业是一个由内而外的过程,即家装公司向业主提供服务的过程,在这个过程当中,业主是被动地等待着家装公司为自己提供产品和服务的。

当家装行业的内在元素发生了深度改变之后,这种状态开始被打破,越来越多的业主开始主动地选择家装公司,主动地选择家装产品和服务,家装行业开始了由外而内的新运行逻辑。

无论是从家装行业的组成元素上来看,还是从家装行业的运行机制上来看,家装行业都不再是我们认为的传统和原始的家装,而是开始了一场全新的进化。在这样一场全新的进化里,家装行业不再是我们所认为的传统意义上的功能和属性,而是开始有了新的内涵与意义。

家装行业不再仅仅只是装修。跳出装修的牵绊,真正为家装行业找到新的出口,才是让家装行业的发展真正摆脱以流量为终极追求的宿命的关键。

只要家装行业依然还在以装修为主要的功能和属性,无论家装行业如何嬗变,家装行业的发展始终都是以流量为终极追求的。因此,让家装行业真正跳出传统怪圈的关键在于告别装修,为家装行业赋予新的内涵和意义。

乍一看,告别装修,家装便不能称之为家装,因为家装始终都是和家装深度绑定在一起的。几乎所有的家装从业者都将装修看成是家装的使命和意义所在。

正是因为如此,我们才无法真正让家装行业的发展摆脱传统的限制,更加无法让家装行业的发展带入到全新的发展阶段。当家装行业的发展开始了新征程,另外一个显著的特点,就是去装修化。

一直以来,笔者都认为,所谓的装修是在特定的历史条件下赋予的家装行业的一种特殊的使命。一旦这样一个历史阶段不再,我们对家装所赋予的这样一种装修的功能和属性便会开始瓦解。当精装交付时代来临,这样一种特定的历史阶段,开始发生改变。

于是,人们开始寻找装修之外的新功能和新属性。在新的历史阶段,家装行业更多多承担的是一个构建场景的过程,正如互联网时代人们搭建平台作为一切行为和动作的承载一样。

在新的阶段,家装行业更多地承担的是搭建新场景和新平台的任务。所以,在这个时候,家装已经不再是简单意义上的家装,而是有了新的内涵和意义。

家装行业不再拘泥于家装本身。如果家装行业的发展和进化仅仅只是拘泥于家装行业本身,家装行业的发展和进化始终都是无法摆脱原有的困境的。

这是家装行业一直都在改变,一直却无法跳出原有的发展怪圈的根本原因。当时间的指针来到了新阶段,家装行业的进化不再仅仅只是拘泥于家装本身,而是开始更多地跳出家装,寻求新的发展突破口。

现如今,我们看到的是家装行业本身开始与越来越多的外部行业,越来越多的外部元素产生联系。

总结来看,家装行业不再仅仅只是拘泥于家装本身,而是开始更多地跳出家装,将目光转移到了更多家装之外的新领域里。比如,将家装与生活联系;比如,将家装与健康联系等等。

当家装行业的发展告别了原有的封闭与孤立,而是越来越多地开始开放的时候,所谓的家装便不再仅仅只是我们所认为的那种传统意义上的家装,而是开始更多地被赋予了新的内涵和意义。比如,家装的场景功能;比如,家装的联通功能等等。

认识到家装行业的新特点,并且以这些新特点为出发点,寻找家装行业的破局之法,才是确保家装行业的发展可以进入到新阶段的标志。对于一直苦于无法破局的家装行业来讲,这无疑是一个新的开始,以此为开端,家装行业的发展才能真正进入到一个全新的发展阶段。

二、家装行业的三个新机会

结合家装行业的进化所呈现出来的新特点,我们可以非常清晰地看到三个家装行业进化的新机会。抓住这三个新机会,并且真正将家装行业的发展带入到新阶段,才是保证家装行业真正进入到新阶段的关键所在。

机会一:替代传统元素,重构传统机制。

我认为,替代传统家装的元素与重构传统家装的运行机制应当是一个相辅相成的过程。所谓的替代传统家装的元素,其实就是一个将新的元素变成家装行业新主体的过程。

从现在的发展情况来看,以人工智能、大数据、云计算为代表的新元素正在越来越多地成为家装行业新的组成部分。

当新元素取代旧元素充实和完善家装行业的大背景下,我们看到的是一个全新的家装行业机制正在被重塑的过程。

传统意义上的以人为主体的运行机制,开始被新的运行机制所替代,从而形成了一种全新的运行机制,这种全新的运行机制比传统的运行机制更加快速、标准和规范,同样可以让家装行业更好地运行。

在这个时候,对于每个玩家来讲,只有真正抓住了替代传统元素的机会,并且真正用新的元素来代替旧的元素,从而建构一个全新的机制,才能让家装行业的发展真正进入到新阶段。以此为开端,家装行业的发展才能告别传统,迎来新时代。

机会二:拓展家装行业的新功能。

一直以来,家装行业的症结在于始终都没有摆脱装修的牵绊,一直以来,人们都在将装修看成是家装行业的唯一出口。

在红利期,这种发展是没有任何问题的。然而,等到红利期已过,我们再将传统功能看成是家装的唯一出路,所导致的一个最为直接的结果就是家装行业的发展开始进入到死胡同里。

在这种情况下,我们必然需要拓展家装行业的新功能。以新功能为家装行业的发展找到新的突破口,以新功能来促进家装行业的新发展,以新功能来填补红利期见顶的空白。

在我看来,未来的家装更多地需要承担的是一种生活方式的营造者,一种新场景的承担者的角色。

对于每一个玩家来讲,他们都应当将拓展家装行业的新功能和打开家装行业的新思路作为主要目标。可以预见的是,当每一种的家装行业的新功能被发现,被打开,家装行业的发展瓶颈就会被突破和改变。以此为出发点,家装行业的发展才能真正进入到一个全新的时代。

机会三:增强家装行业的联通性。

家装行业作为一种载体,它的发展越来越多地开始表现出与外部产业的深度联系和融合上面。对于每一个有志于在家装行业的新阶段有所作为的玩家来讲,最后一个机会便是如何增加家装行业与外部行业的联通性,以此来增加家装行业的新机会。

在这个过程当中,增强家装行业的联通性,主要表现在内外两个方面。从内部联通上来看,家装要强化与上下游之间的联系,不断对上下游进行深度赋能,以此开启家装行业的新发展;从外部联通上来看,家装行业要强化与金融、制造、消费等大行业之间的联系,以这样一种联系来确立家装行业的中心地位。

可以预见的是,当家装行业成为新的中心和纽带,特别是当家装行业的发展与外部产业真正联通在一起的时候,它的发展才能告别传统时代和互联网时代的封闭与孤立的状态,真正进入到一个全新的发展阶段。

三、结语

当互联网时代的红利不再,家装行业的发展开始呈现出新的特点。认识到这些特点,并且抓住衍生出来的新机会,家装行业的发展才能告别传统意义上的发展逻辑,真正进入到一个全新的发展阶段。

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

文章来源:人人都是产品经理   作者:孟永辉

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

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

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


淘宝不“淘”了 | 淘宝的内容设计

ui设计分享达人

文章大纲:

1. 淘宝为什么不淘了

2. 淘宝的基础内容设施

3. 淘宝没有种草经济

4. 让人逛下去的产品设计

5. 逛逛和小红书的设计区别

6. 写在最后



1. 淘宝为什么不淘了


1.1  “淘” 历史


淘宝成立于2003年5月,当时最早的slogan是:“淘你喜欢”,这句话的主体是以平台角度出发,对用户说的,意思是让用户来平台选购商品。


随后2005年,slogan变成了“淘我喜欢”,主体从平台转变成了用户,意思是让用户自主选择来平台购物。


在最近的2021年,淘宝的slogan变为了“太好逛了吧”。代表性的是淘宝app打开的启动图从玲琅满目的商品图,换成了新的slogan:


图:淘宝启动页变化


图:淘宝的slogan变化




1.2 需求的类型


淘,又有“筛选”的意思,而筛选行为是要对某具体目标进行的,不可能凭空筛选,这个目标产生的过程,就是我们常说的“用户需求”。


“用户需求”的产生一般分为两种:有目的的需求和无目的的需求。


有目的的需求:需求产生的过程有户外广告、朋友推荐等。以这种方式产生的需求,用户会带着明确目标,这时用户直接打开软件,通过搜索,直接缩小商品范围,更快触达目标商品,在这种场景下,用户明显没有“逛”的心情。


无目的的需求:当用户在没有明确目标的情况下打开软件时,用户购物意向都是比较模糊的,没有明确选择区间。此时,如何让用户产生购买欲望,是产品设计时必须要重点思考的。



图:需求产生的类型



我们都知道,淘宝最开始的定位是“淘”,主打的是以导购型社区为目标,主要解决“用户来平台需要买什么”的问题,也就是有目的的消费需求。


针对这类用户,最简单的思路就是“让用户买到想要的东西”,基于这一思路,淘宝推出了“千人千面”的算法机制。


随着淘宝算法越来越精准,用户购买越来越效率,导致很多用户对于淘宝的使用心智固定在了购物平台,而不是内容消费平台。


但是算法是有一定的滞后性的,只有在用户产生数据后才能够进行精准推荐。(这个数据可以是在淘宝平台产生的,也可以是在其他平台产生的,比如说通过搜狗输入法输入了某个商品名)


所以单纯的靠精准的算法推荐,并不能解决用户的潜在需求。



图:不同需求类型的解决方案




1.3  商家的流量成本


在淘宝店铺的运营中,有一项重要的指标叫UV价值,指的是平均每个客户在店铺的销售额,数字越高说明访客的转化率越高,转化高就代表最终的GMV会高。


而根据淘宝的数据统计,店铺粉丝级别越高,对店铺的粘性越强,UV价值也就越高。最终反映在淘宝数据上就是GMV高,既利于平台,也利于商家。


粉丝的积累需要流量,而淘宝店铺的流量来源一般分为:淘宝站内、淘宝站外,其中有包括淘宝推广、搜索竞价、淘宝客、直通车等方式,但这些流量通常是不稳定的,免费流量自不用说,付费流量的投入成本也对店铺的资金有一定要求。


所以店铺需要把这些吸引的流量,转化成店铺的粉丝。


举个例子,在很多电商平台上,店铺会有自己的引流款,这些商品不是为了毛利。只是起到为店铺引流的作用。


因为对于平台的店铺来说,持续不断且稳定的流量增长,不仅可以推动销售的稳定增长,也利于长期的发展方向。



图:淘宝流量来源




2. 淘宝的基础内容建设


2.1  内容整合成社区和去中心化


早在2015年,当时淘宝内部孵化淘宝头条,分享优质的消费类资讯内容,当时淘头条的MAU(月活跃用户)过亿。但随着视频内容的崛起,图文形式逐渐走下坡路,淘宝看准了直播带货的赛道,开始逐渐布局淘宝直播的内容形式。期间也相继加入了微淘、有好货、买家秀、好物点评团等内容形式。


但是这些内容一直分散在淘宝各个功能模块中,没有形成一个整体的社区化。



图:淘宝的内容矩阵


其中最成功的应该就属淘宝直播了,根据淘宝直播2021年度报告:2020年淘宝直播带来的GMV超过人民币4000亿元。


但是,直播的内容形式注定是以主播自上而下中心化的,用户是跟着主播走的,一旦主播下播以后,这些观众也会失去购买目标。


并且由于直播属于一对多的形式,越大的主播,观众越多,这时候主播和观众的互动率是很低的,久而久之,用户的互动积极性也会受打压。



图:以主播为中心化的淘宝直播


除了淘宝直播,近年来另一个改动比较大的应该就是微淘的出现了,在逛逛出现之前,一直占据底部栏的二号位,它的内容形式主要以店铺上新、直播、福利为主。


这也是淘宝在店铺私域流量运营上做的一次尝试,目的是为了让用户更容易和店铺产生连接。但是实际上,由于微淘的内容形式之间关联性不大,业务场景混乱,一些刚起步的商家也没有资源拓展多业务场景,导致内容质量参差不齐,影响转化。


淘宝做微淘中做内容的目的是为了让用户有东西可以逛,但是逛内容就代表着用户购买需求不明确,这又与营销场景相冲突(营销场景是为了让用户快速下单完成购买),所以微淘也一直被诟病转化率低。



图:微淘主要的三个问题




2.2  信息流时代


后来在2020年年底的时候,淘宝迎来了另一个比较大的改版,猜你喜欢变成了纵向的信息流,点击猜你喜欢进入的是一个流量的中转站。比如说点击一件衣服,下面全是衣服的推荐。


新版猜你喜欢的特点很明显,牺牲转化率,增加用户使用时长。在实际点击进入信息流中,用户总感觉下面有新的内容,这时候用户的心态普遍是浮躁的,会使用很短,甚至一两秒的时间决定是否深入了解产品。如果不喜欢,就会滑到下一个产品,无形中增加了用户在平台的停留时长。


据淘宝官方数据表示,此次猜你喜欢的大改版,淘宝用户的点击率和用户时长都提升了20%。



图:猜你喜欢改版,通过牺牲转化来提高使用时长





2.3  “逛逛”来了


逛逛是以UGC内容形式为主的种草平台,顾名思义,就是消费者在无聊的时候,可以到处逛逛。


如果说信息流是纵向的内容推荐,那么逛逛就是通过大数据,横向的推荐内容,最终向商品引流。丰富的内容为其他消费者带来沉浸式购物体验,类比线下商圈,就是逛着逛着就把东西买了。





3. 淘宝没有种草经济


3.1  从AISAS模式到SICAS模式


AISAS模型是一种用户决策分析模型,由电通公司(日本第一大广告公司)提出,是消费者行为学领域很成熟的理论模型之一。


AISAS模式将消费者从产生需求到最终完成购买的路径分成了五个阶段,既Attention(注意) - Interest(兴趣) - Search(搜索) - Action(行动) - Share(分享)。其中消费者在注意商品并产生兴趣之后的信息搜集(Search),以及产生购买行动之后的信息分享(Share),是当下互联网消费时代尤其重要的两个阶段。


搜索就是当用户对某商品产生兴趣之后,消费者会通过线上或者线下渠道来收集相关产品的信息,比如说评价、打分等。分享是在购买路径完成后,用户自发向身边人推荐商品的阶段,也就是口碑裂变,当然也有可能变成商品吐槽大会。


但是,在前文也提到了,搜索是在有明确对某个商品产生兴趣之后才会产生的动作,整个消费路径是单向进程的,缺少信息的互动与交换,用户很难有效辨别信息真伪,用户与商家依然存在信任问题,最终的购买壁垒依然存在。



图:AISAS消费模型的流程


随后,DCCI(互联网数据中心)在AISAS的基础上,提出了新的SICAS行为消费模型:


既 Sense(品牌与用户相互感知) - Interest&Interactive(产生兴趣并形成互动) -  Connect&Communicate(建立联系并交互沟通) -  Action(行动) - Share(分享)。


Sense,感知:品牌(商家) - 用户相互感知,通过多触点,在商家个用户之间建立感知,对用户来说,关注、分享、订阅、推送等,都是有效的感知行为,而商家要做的,就是想办法,通过什么样的方式或内容,让用户有效使用他们的感知行为(分享、点赞、订阅等行为)。


Interest&Interactive,产生兴趣和互动。在产生兴趣上,随着用户对传统的广告曝光和广告产生的印象的敏感度在降低,理解并响应用户的需求正在成为关键。站在用户的角度,观察用户真正想要的内容,衡量内容的指标不再是广告的传播率、曝光率,而是变成了点击率、点赞数、好评度等。


Connect&Communication,建立连接和产生沟通。在用户产生兴趣之后,通过平台提供的服务:客服,问大家,好评团等形式,完成用户信任的积累,帮助用户完成购买决策。


剩下的Action(购买行动)和Share(体验分享)与AISAS模式一样,就不展开说了。



图:SICAS消费模型的流程,以及和AISAS消费模型的区别


综上,SICAS模式前三点的核心观点是建立联系,也就是互动,这也与时下流行的种草经济不谋而合。





3.2  基于社交的种草经济


种草行为本质上是人与人之间的一种互动关系,互动天然的容易产生强关系链,而强关系也意味着情感联结和信任,最终会形成社群关系。随着越来越多拥有相同消费偏好的用户聚拢,用户消费习惯逐渐圈层化,在各垂直的消费圈层中得到身份认同感。


在这种社群氛围的烘托下,用户更容易表现出高表达欲和参与度,既用户不仅是内容的消费者,同时也会发展为内容的生产者。



图:逛逛想打造的种草生态



综上结合淘宝的问题以及消费模式的转变,我们可以得出淘宝近期疯狂改版的思路:


图:淘宝改版思路



4. 让人逛下去的产品设


在了解上述淘宝自身的问题和新消费类型带来的冲击后,可以总结淘宝最近经常改版的战略可以分为两个方向:转化的归转化,内容的归内容。



4.1 微淘升级为订阅


淘宝第一个改版是将原来的微淘升级为了订阅,并且放在首页上的tab,与推荐并列。此次改版,最大的改变就是拆分了店铺运营的内容,让不擅长做内容的商家可以专注自家的店铺运营。



图:首页专注商品转化,逛逛专注内容消费


新版订阅的精选一栏中:包括上新、买家、评测等,这些内容一起构成商家和粉丝的互动模式,吸引新客快速转粉,同时也增加了老客户的黏性。


在之前微淘的版本,用户需要点击微淘-点击店铺-点击订阅,升级后的订阅路径变成了左滑进入订阅页面-直接订阅店铺。点击直播可以直接进入直播间

更短的触达路径加上私域流量的运营,优化之前微淘转化率低的问题。



图:路径图,直接进入直播间,直接订阅店铺



图:提高直播入口权重




4.2 “买家秀”社区升级成为“逛逛”


另一个重要改版是“买家秀”社区升级成为“逛逛”,为了弱化逛逛的购物属性,强化社区氛围,逛逛在产品的商业化设计上十分克制,主要围绕引导用户进行内容消费和互动为目的进行设计。


在内容分发形式上,分为了以平台推荐为主的“发现流”和以社交关系链主导的“关注流”,更加注重内容垂直和精细化。



图:逛逛的内容分类


逛逛的发现模块与小红书类似,都属于种草型内容社区。内容主要以穿搭、彩妆等淘宝擅长的领域为主。


页面的布局形式和首页的商品流一样,以双列信息流呈现,和单列相比,一方面,给用户提供多样化的选择,承载不同的内容形式(短视频、图文),延长用户在平台的停留时长,同时也为其他内容引流,模拟更真实的线下“逛街”体验。


另一方面,和首页注重转化率的算法机制不同,影响发现流推荐算法的因素除了本身的内容质量,还会受到用户浏览行为的影响,比如浏览内容时产生的关注、收藏、点赞、评论等互动行为。



图:表现内容互动率的互动指标


逛逛相比首页推荐,去中心化的机制也更加明显,举例来说,小米官方店的号,粉丝量达到了千万级,但是内容的互动率很低,点赞评论甚至不超过个位数。


个人认为是因为品牌天然的自带营销属性,用户在看到品牌账号时,很容易形成品牌注册账号是为了卖产品给我的刻板印象。


这也反映了逛逛的流量重点落在消费者的内容上,以消费者视角为突破口,摆脱和商品相关的品牌属性,注重普通用户对商品的真实评价,而不是围绕IP账号产生的内容消费。



图:小米账号和个人账号互动率对比


在用户路径的引导上,发现页并不支持点击头像进入用户主页,只能先点击进入内容详情页然后才可以进行关注等操作,先看内容,再关注人。



图:更关注内容转化率


另外一个人关注流的动态则加强调社交关系的转化,因为是经过用户主动“关注”过后筛选出来的内容,是内容生产者和内容消费者相互选择的关系,所以在产品设计上以单列大图为展现形式,帮助用户消费内容。为了防止让用户感受到广告的营销感,产品设计上特地强调了分享、点赞、收藏、评论等按钮,弱化商品链接。


和其他的社区一样,关注信息流中也会推荐一些“你可能感兴趣的人”,但不同的是,用户无法直接关注推荐的博主,需要先“查看TA”,进入博主的个人页后才可以进行关注操作,这样的目的主要是为了让用户了解达人的领域内容之后,再决定是否关注,这样的关注更加有效,粘性更强。



图:“关注流”视觉设计的思路


“逛逛”的内容形式很好地弥补了淘宝缺乏用户导购的问题(俗称种草),依托KOL产出的优质内容,与消费者产生情感上的价值链接,创造出用户的潜在需求。




5. 逛逛和小红书的产品设计区别


这次改版之后,很多人说这是小红书。关注、发现、垂直分类栏,都和小红书很相似。



5.1 内容起家和电商起家



淘宝和小红书对内容的分发模式是不同,小红书默认分类栏处于收起状态,只有主动下拉的时候太会出现,由此可以看出小红书对自己的内容推荐还是比较有信心的,由于一开始就是做内容起家,所以对自身平台用户的喜好是有所了解的。


但是淘宝是一个电商起家的平台,在内容方面,缺乏对用户的偏好判断,所以逛逛的导航栏下方,会加入了“官方话题栏目”和“官方出品的内容”,利用精选话题引导社区内容的方向,一定程度上也可以通过话题数据了解平台用户的偏好。



图:小红书比淘宝更懂用户喜欢什么内容



5.2 内容导向不同


小红书等平台不光有购物种草,还有学习、音乐、科普等内容也相对成熟。和淘宝转型社区内容一样,小红书也在进行图文、视频向直播内容扩展的战略方向。所以我们会发现,在小红书的编辑内容上,视频和直播是强露出的,且不支持位置更换。


再来看逛逛的内容,以穿搭、彩妆为首的消费品内容,这些都是淘宝擅长的领域,容易产出优质内容,反过来说,这些内容最终也都是可以在淘宝上可以消费到的,最终还是以平台商品转化为目的。



图:内容形式对平台战略的影响




5.3  小红书互动率更高,淘宝内容消费效率更高


小红书在内容消费形式上,比逛逛更加注重互动:首页瀑布流点击进入二级的内容页后,可以直观的看到博主全部的文本简介,以及下方的用户评论内容,用户消费的不光是图文本身的内容,也是其他用户评论产生的内容,更容易产生社交关系链。


逛逛则更注重内容本身的消费效率:产品设计上使用沉浸式的下滑体验,用户点击产品图后,进入的是同系列产品的瀑布流,如果想要查看评论的话,需要点击评论icon进行二次跳转,此时用户会一直专注于内容的消费,容易忽略其他用户评价等内容。



图:提高互动率的产品设计



 6. 写在最后的一些思考


此次淘宝做内容社区的优势之处在于,淘宝将社交关系融入到了商品的消费链路中,消费者通过商品体验、测评、种草等方式,和平台产生互动,建立联系。


而淘宝最不缺的就是商品,并且拥有8亿多的消费者,和其他平台相比,更容易产生垂直领域的优质内容和专业的KOL,但是要想经营一个优质社群,除了需要一批优质的内容创造者,还需要考虑后续涌现的用户是否会对现有社群模式产生冲击。(比如知乎开放用户注册后,导致内容注水的现象)


因为淘宝本身相当于一个巨型供货方,大大缩短了带货变现的路径和难度,不同于小红书这类平台,它们最开始是没有带货模式的,常常需要通过接推广给其他商品引流来变现。


过短的变现路径必然会吸引一些用户或者机构抱着获利的心态涌入社群,这种逐利的心态,也有可能会影响专业KOL的创作心态。

文章来源:站酷   作者:抓马桥分桥

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

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

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


日历

链接

个人资料

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

存档