首页

阻力设计在产品中的应用

鹤鹤

一.什么是阻力 ?


在百度百科的定义中,阻力是物体在流体中相对运动所产生与运动方向相反的力。自然界中存在许多类型的阻力,比如空气阻力、水流阻力,各种各样的生物因此进化出相应的身体特征去减少阻力。如下图所示,拥有流线型外形的海豚掌握独特的减少湍流摩擦阻力的游泳方法,这使其游速在某些条件下可以达到每小时 70-100km,远超现代潜艇的航速。

人类为了摆脱自然界设计的阻力,做了许许多多的努力。采用纤维模仿鲨鱼皮肤结构的鲨鱼皮泳衣能够降低 30% 的水阻,提高人类游泳速度。汽车的流线型设计减小涡旋作用或避免涡旋的形成大大地减低了空气对其的阻力。

在人类社会,人为设计的阻力也无时无刻不在。为了公共安全设立的安检、为了交通安全而严格控制不同区域的最高车速、为了社会安定而设立的法律,诸如此类的阻力都无时无刻规范着人类的行为。


类似地,对于互联网产品,用户在使用时也会被刻意地或非刻意地设计出的阻力所影响,这些阻力会阻碍用户完成目标。


二、为什么会产生阻力 ?


在认知心理学中,我们接受外部世界的刺激之后做出反应的过程中,涉及到我们如何感知、学习、推理、记忆,以及如何把意图转化为行为。人类数十万年的进化过程中,对于感知、学习、推理、记忆的神经结构已经初步进化形成,大多数的人保持着相似的认知能力和认知缺陷。用户在使用产品时感受到的阻力往往来自于设计师未能充分了解用户的认知能力,从而设计出容易导致用户犯下认知性错误的产品。以下常见的人类的认知特点影响了我们感知和获取信息的过程。


2.1 倾向于通过经验、环境和目标进行判断

对于一件新事物,我们感知它的方式通常受到三个因素影响:过往的经验、周围的环境、当下的目标。我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦产品界面中与用户的经验预期相悖,就会产生阻力。


2.2 缺乏耐心和思考

面对一个我们从未使用过的机器设备时,我们很少愿意耐心阅读完它的说明书再去使用它,而是自信满满的希望通过简单的摆弄和熟悉就能够了解它的使用方法。《点石成金:访客至上的Web和移动可用性设计秘笈》一书中的第一条可用性原则就是“Don't let me think(不要让我思考)”,作者认为设计者在设计一个界面时,最好能够做到让界面清晰易懂、一目了然,让用户能够不必过多的思考就能够使用它,帮助用户跨越思考过程,让用户能够轻松做出复杂的决策,减少认知压力。


2.3 心流易被打断

我们可能都经历过心流状态,当我们在极度专注地做某件事时完全沉浸其中并且非常高效,但如果意外地被打扰,会让我们很烦躁。

有关任务执行的研究文献中就曾经提到过:中断会导致错误,而且人们容易遗忘之前的位置或状态。当一个任务打断了另外一个,重新启动需要的时间会让每个任务都变慢。

打扰我们的事情可能是工作时突然的一声噪声,也可能是在使用软件时冗余的弹窗、过多的页面跳转、无意的误操作等等。界面中过多的干扰会打断用户的心流,造成用户的使用阻力。


2.4 无法摆脱的认知负荷

认知负荷理论(Cognitive Load Theory)是在 20 世纪 80 年代由澳大利亚教育学家 J.Sweller 提出,由于对人类学习认知和教学指导提供了新的理论框架,该理论在教育领域成为重要的心理学指导理论,在交互设计领域也存在着借鉴意义,理论的主要内容如下:

认知负荷是指外部信息进入个体短期记忆后中后所需要的注意力资源和记忆容量,被分类为内在认知负荷、外部认知负荷以及相关认知负荷(如下图)。当任务需要消耗的注意力和记忆容量超出学习者的极限时,就会导致认知超负荷,超出的部分将不会被学习者有效获取。

不同的呈现形式形成的外部认知负荷是不同的,一般来说,文字>图式>视听。因此,为了避免认知超负荷给用户带来的使用阻力,我们应该设法简化信息来降低内在认知负荷,通过更合理的信息可视化形式和信息架构构建降低外部认知负荷。


三、产品设计中的阻力应用


如下图,基于上述的用户的认知能力分析,合理的降低阻力,能够让用户在使用产品时效率更高,成本更低。在提高交互效率方面我们可以通过减少操作步骤、提高传达效率、减少页面跳转来达到目的。在降低交互成本方面,我们可以通过降低操作难度、减少用户思考来实现,同时通过降低认知负荷减少用户的认知负担。阻力并不是越小越好,在某些场景下,我们需要增加阻力和提高用户的使用成本,进而提升用户体验或达成产品目标。通过提高防错能力、提供安全感和营造仪式感来优化体验。通过筛选用户和内容把控社区生态。通过功能引导和歧视性策略来迎合商业目的。


四、降低阻力的应用


4.1 提高交互效率


4.1.1 减少操作步骤

类似于一个倒金字塔结构,交互流程中的每一个步骤都伴随着流失。通过以下减少操作步骤的方法,可以降低用户行为路径中的阻力。


使用合适的控件

不同的控件有着不同的应用场景,控件的选用不当会形成多余的操作步骤。我们需要深入了解每个控件的属性和应用场景才能够做到灵活运用。

举一个例子,在微信的朋友圈发布页中编辑内容后点击取消后,弹出警告框显示“不保留”和“保留”按钮,但是考虑到用户可能会误操作点击取消按钮的场景,此处应增加一个按钮让用户回到编辑状态,否则不管用户选择哪个选项都会退出发布页重新进入,从而使用户多了一步操作。下厨房的发布页就考虑到了这个问题,使用了默认有返回操作的上拉菜单控件作为提示方式,即使在误操作场景下也不会增加操作步骤。

控件方面这里就不展开讲了,大家可以通过阅读 iOS 人机交互指南和安卓 Material Design 规范来深入学习。


复杂任务移交系统

任务都存在其复杂性,当我们无法简化它时,可以考虑将复杂性移交给系统,使其代替用户操作。

比如我们可以利用用户已经在产品中填写过的信息来帮助用户填写相关信息。例如通过身份证号码自动识别出用户的生日和性别,自动为用户填充。 


预判用户行为

预判用户行为分为两种方式,第一种是在用户操作前,预判可能发生的用户行为,以建议的形式为用户提供选择,缩短用户行为路径。

比如拍摄照片后,打开微信聊天页面,微信会以气泡的形式询问用户是否要发送图片,如下图。


第二种是由于用户的认知错误进行了非目标操作时,系统提前识别引导用户进入正确的流程并完成任务。


比如支付宝聊天界面中,很多用户误以为可以直接通过输入框输入金额数后点击发送就可以转账,但实际上只会发出一条消息。支付宝贴心地在用户输入数字后外显转账功能,从而避免了用户的错误操作,如下图。


优化页面流程

不合理的信息架构和流程设计会增加用户的操作步骤。比如最新 iOS13 的信息应用,将 iOS12 原有的使用分段控件整合信息的方式改为了 iOS13 的列表形式,导致从一级页面(A)进入到二级页面(B或C)后,如果想切换信息列表还需要返回到一级页面再次选择,增加了一步操作。iOS13 的这种改动可能考虑到用户切换信息列表的频率没有那么高,希望用户专注于当前的信息列表,但是我这样的用户经常查看过滤信息列表,担心是否有重要信息被屏蔽,多出的一步操作还是给我带来不小的使用阻力。


淘宝订单模块的做法就比较合理,从一级页面(A)进入二级的任何页面(B 或 C)后,二级页面可以在标签栏互相切换,而不需要退回一级页面再次选择二级页面,从而节省了一步操作。


快捷方式

快捷方式有跳转类和功能类两种,跳转类的快捷方式可以帮助用户快速触达或回退到某个页面。

比如我们可以通过长按 iOS 应用图标调出功能的快捷方式使用,减少中间的操作步骤。淘宝可以在大多数页面通过快捷方式快速回退到首页。


功能类的快捷方式提供给用户更快捷的方式完成复杂或较多的任务,比如哔哩哔哩的一键三连。被苹果收购的应用快捷指令可以自定义系统以及第三方应用的复杂任务,并且在下次一键即可完成。


4.1.2 减少页面跳转

米哈里·契克森米哈赖在《心流:最佳体验心理学》中将“最佳体验”定义为:当我们在做某些事情时,那种全神贯注、投入忘我的状态。这种状态下,我们身心合一,甚至感觉不到时间的存在,技术水平也会达到顶峰,在这件事情完成之后我们会有一种充满能量和非常满足的感受。然而,周围突然的干扰或环境刺激都有可能打破心流体验。 

用户在使用软件产品时很少有心流体验,因为过多的页面的跳转和刷新会中断用户心流,冗余的页面层级会增加用户的理解成本和操作成本。针对这个问题,我们可以提高单个页面的动态容量,在不跳转页面的前提下使用户完成任务,为用户创造在视觉感受层面上的心流体验,下面是一些方法举例。


覆盖层

覆盖层是出现并覆盖在原页面上层的一个弹出窗口,可以由用户触发或系统自动触发,在网页端和移动端都有着广泛应用。我们通常可以将其用于输入内容、附加信息、子页面信息外显、显示操作指令等。


a.模态覆盖层

模态覆盖层一般由点击触发,通常出现后会伴随亮盒效果,使用户聚焦于覆盖层上的任务,用户操作完毕后才可以进行覆盖层外的其他操作。模态覆盖层的大小不固定,它可以是一个小型的显示警示信息的弹窗,也可能是一个篇幅很大的信息介绍,在保持上下文的情况下展示更多信息,避免了用户迷失在各种页面跳转中。

如下图,behance的首页点击一个作品后,会在当前页面上生成一个模态覆盖层供用户浏览详细的作品内容,而不是跳转到新的页面。在设计师浏览单个作品的场景中,一般只需要 1-3 分钟的浏览后就会关闭页面,模态覆盖层的方式使得打开和关闭的操作更加流畅,提高了设计师的浏览效率。



模态覆盖层在移动端同样也有着应用。如果前后两个页面存在较强的关联性,为了避免用户产生明显的割裂感,一般适合采用模态覆盖层的方式展示新页面。如下图,知乎使用模态覆盖层展示评论。


b.详情覆盖层

详情覆盖层在网页端通过光标移入触发,触发后不需要刷新页面既可显示附加信息。如下图Boss直聘中光标移入某条招聘介绍时,会触发详情覆盖层展示出次级页面的详细岗位信息,避免了跳转新页面。


嵌入层

嵌入层类似于抽屉,需要的时候将其展开,不需要的时候将其收起。与模态层不同之处在于,展开后也不会遮盖页面的其他信息和影响其他操作。嵌入层的主要的应用场景有:拓展内容、展示下级内容。

如下图,微博的发现页面的功能图标可以通过嵌入层进行拓展从而展示更多功能。


Xmind的嵌入层展示了格式的下级内容,可以在保持能够继续编辑脑图的前提下进行格式设置。


标签页

对于内容丰富的页面,希望用户能够通过尽可能少的跳转就能够触达。我们可以将列表导航、宫格导航修改为标签导航或分页的形式。


4.2 降低交互成本


4.2.1 降低操作难度

把某些操作难度大耗费成本高的操作使用新技术解决,比如人脸识别和 OCR 技术可以降低信息输入成本,不但帮助用户使用较少的时间完成任务,也降低了用户的犯错几率和使用阻力。

手势的优化也是降低操作难度的可行方法,优化的方式有增加多手势操作和加大热区。比如在 App Store 首页进入应用推荐页后,针对不同使用场景的用户提供了三种退出的方式,大大降低了操作难度。


举一个反例,得到的书籍详情页中,查看详情的按钮热区只存在于文字上,但是用户的使用习惯会误认为整块区域都可以点击,因此每次点击多次失败后才理解热区的正确位置,如果将热区扩大到整个区域就可以降低操作的难度。


想要了解更多交互手势知识可以拓展阅读: 交互手势的容错性和逻辑性 


4.2.2 减少用户思考


提供默认选择

用户的每一次思考都伴随着流失的风险。有时用户对于我们提供的选择不是很了解,会纠结和疑惑不同选择之间的区别,最终可能导致放弃选择进而流失。我们需要做的是为用户提供默认选择,同时允许用户切换到其他选择,以此来减少思考,降低使用阻力。

以手机淘宝查看相似宝贝功能改版为例,在旧版中,长按淘宝某个商品会出现「找相似」和「找同款」的按钮选项,点击后会跳转到对应页面。在新版中,长按淘宝某个商品会直接跳转到「相似宝贝」页面展示商品,同时可以通过分段控件切换为「同款宝贝」。我猜测的改版原因是,由于旧版的第二步给用户的两个选项让用户过多思考,导致第二步的流失率过高,很多用户没能体验到「相似宝贝」和「同款宝贝」功能的的特色。改版后直接将更高频的「相似宝贝」的商品页展示给用户,同时也很方便地去切换到「同款宝贝」,这种交互形式的变化让用户无需思考就可以迅速体验到功能的特色、并在熟悉后下次会继续使用。


保持一致性

我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦交互界面中与用户的经验预期相悖,就会产生阻力。

上文提到过,我们习惯于从过去获得的经验中获得对于当下问题的解决方案。甚至对于重复出现的问题,我们已经形成了条件反射和肌肉记忆去解决它们而不是再次思考。因此,当设计缺乏一致性时,不但会导致我们已经形成的条件反射和肌肉记忆失效,还会更容易导致错误的发生。此时我们不得不从条件反射的无意识操作转换为消耗注意力的缓慢操作,从而形成阻力。为了避免这些阻力,我们需要确保按键的一致性、交互文案的一致性、交互手势的一致性。

如下图,警告框的按钮位置一旦第一次用户经过使用熟悉后,之后用户会进行无意识地快速操作,此时如果某个警告框缺乏一致性就会导致错误的发生。


4.3 降低认知负荷


4.3.1 降低内在负荷

内在负荷是任务中包含的信息和用户固有的认知结构产生交互作品而形成的负荷。体现在界面中的信息就是文案的设计了,它也是产品设计中重要的一环。悖于用户认知结构的文案设计会带给用户理解上的阻力。一份合格的文案设计需要做到简洁易懂、重点突出、无歧义性和保持一致。


简洁易懂

如果能够做到简洁,就不要冗余。确保每一个字都有其存在的意义。大部分用户会对冗余的大段文字产生畏难情绪,从而放弃阅读。词汇的选择要符合用户人群的认知范围,不应该使用用户难以理解的各种黑话和行话。在此基础上,如果能够通过形象生动的修辞手法帮助用户快速理解,就更胜一筹了,比如针对垃圾分类,一些网友发明的快速记忆方法就是一个很不错的例子,如下图。


重点突出

一段文案中可能有些是重点内容,有些是解释内容,并不是所有内容都需要让用户阅读并理解。大部分情况下只需要突出重点内容告知用户,能够引导用户下一步行动就足够了,至于其他解释性或者不重要的内容弱化即可。

针对前两条规则,我们以 12306 以及飞猪的学生票和成人票的选择弹窗作为案例进行对比。如下图所示,每一次购买火车票的过程中,当我遇到 12306 的这个弹窗,都会让我用不少时间去进行理解和思考。首先在个人看来,“温馨提示”在任何弹窗上都是占用空间没有实际意义的存在,如果没有标题,直接展示正文即可;其次,正文的内容重点信息不突出,其中有一个句子“请凭购票时所使用的有效身份证件原件和附有学生火车票优惠卡的有效学生证原件换票乘车。”过于长和复杂,很考验用户的短期记忆和耐心;最后,按钮文字没有提供操作路径,用户想知道如何操作需要先阅读完上面的文案。


飞猪的案例就避免了 12306 所存在的问题,做到了简洁易懂和重点突出,如下图。


表意清晰

表意清晰指的是文案传达的含义明确、不含糊、不存在歧义。下图是一款社交软件的警告框文案,文案的歧义让用户疑惑“取消”按钮是取消约会还是取消本次操作。经过修改后歧义性就消失了。


保持一致

同一个软件系统中,表达相同概念的用词一致。模块中的相似文案,语法表达方式一致。上文提到我们人类很少愿意思考的特点,一旦一个软件系统出现表示同一个概念,但是名称不一样的词语,我们大脑就不得不开始被迫思考:“这个词语和之前那个很接近但是有些不一样,它们是同一个东西吗?”这个思考过程从而形成了不小的阻力。《认知与设计》一书中提到一条规则:“同一个名称,就是同一个东西;不同的名称,就是不同的东西。”因此,一致性是撰写交互文案的一条重要原则。


4.3.2 降低外在负荷

当信息的内在负荷不能再进行降低时,通过改变信息的呈现方式、结构设计和逻辑安排来将复杂信息可视化,降低外在负荷,使信息更容易被用户接受和理解。这里涉及到信息可视化这个课题,这里就不做展开了。



五、提高阻力的应用


阻力并不是越小越好,在某些场景下,我们需要提高阻力提高用户的使用成本达成某些目的。


5.1 优化交互体验


5.1.1 提高防错能力

类似于马路上的减速带,在车辆进入需要低速行驶区域时进行阻碍。我们通常在用户容易犯错的操作前设定一定的阻力,减缓用户的操作的节奏,达到防错的目的。如下图,在蓝湖中如果要删除一个项目,就需要先输入项目的名称后才能成功删除,通过增加阻力提高了防错能力。



5.1.2 提供安全感

针对涉及到用户隐私的敏感操作,通过设计特定的交互流程让用户体验到安全感,比如通过增加指纹、面部识别等操作降低用户对于危险和风险的担忧,增加用户的确定感和可控感。


5.1.3 建立仪式感

生活中大部分的时刻都是单调乏味的,我们需要使用各种仪式点缀它。与此类似,在用户的操作行为路径里增加一些不必要的过程,也能成为用户体验旅程中的点睛之笔。

就像多年前坚果手机一代的包装,设计师别具匠心的将包装设计为一次充满着童趣的体验,虽然拆包装的过程时间增加,但是给予用户似曾相识的场景是不可替代的。


看似使用起来费力的微信摇一摇,可以加强用户的参与感和仪式感,就仿佛融合着一种占卜未知世界的神秘体验,这种感觉是点击无法给予的。当初支付宝基于 LBS 和 AR 技术推出了 AR 实景红包,众多用户不惜跨越“千山万水”收集线索图去寻找红包,并乐此不疲。尽管增加了操作成本和使用阻力,但是这些富于互动性和趣味性的体验带给用户的仪式感也是不可多得的。


5.2 维护社区生态

用户的属性和其产生的内容质量对于产品的社区生态建设有很大的影响。对于社区的认同感越高的核心用户越多,内容质量就越高,进而社区对潜在用户的吸引力就越大。一旦一些修养低或居心不良的用户大量涌入社区,就会同时带来大量的负面内容,造成对其他用户的干扰,甚至导致他们大量流失。因此,为了让一个产品的社区生态能够健康发展,我们需要采取一些筛选方法来设置阻力,以此来筛选出对平台有益的用户和内容。


5.2.1 筛选用户


邀请制

很多产品在冷启动阶段,为了避免垃圾用户和提高社区质量,会设立邀请制来控制用户来源,然后根据现有用户的使用反馈进行可控的优化迭代。这种方式可以有效地降低初期的运营成本,保持服务器稳定,甚至可以制造一种供不应求的感觉,获得更多的讨论度。


价格门槛

网络骗局在社交类产品屡见不鲜,婚恋类产品更是重灾区。很多推行高端婚恋或高端社交的产品为了保证用户质量,不仅严防死守,还会设立价格门槛,不付费直接无法使用,这在现今已经广泛推行的基础服务免费、增值服务收费的收费模式中很少见,但是确实有效地进行了用户筛选。



测试门槛

通过设置测试题将用户分成不同的群体,进行具有针对性的权限设置。比如 B 站转正时需要完成具有社区特色的晋级考试,需要花费的时间成本比较高,通过这种方式筛选出真正认同 B 站社区文化的优质用户,给予这些用户更多在社区中互动的权限,从而也大量减少了低质量用户的负面行为。

上述的三种用户筛选方法是否适用,需要考虑的产品属性。不同维度的筛选用户的方法还有很多,这里只是简单举例。


5.2.2 筛选内容

不同的内容形式对于社区的价值是不一样,我们可以通过一定的方式引导用户生产对于社区建设更有利的内容。比如微信发布朋友圈时并没有直接给用户提供纯文字信息的输入方式,如果用户想要发布纯文字内容,需要长按发布按钮才能进入相应界面。原因是微信官方认为相对于纯文字内容,附有图片的内容对于其他用户更具有吸引力,通过阻碍用户使用纯文字发布、鼓励用户使用配图发布使得整体的朋友圈社区的内容能够吸引用户浏览更长的时间,从而也可以使朋友圈广告得到更多的曝光。


5.3 迎合商业目标

有时产品的商业目标和用户目标存在一定冲突时,损失一定的用户体验满足商业目标是不得不进行的选择,这需要我们进行合理的平衡。


5.3.1 功能引导

为了迎合商业目标,我们有时需要针对一些功能设置一定操作阻力将其进行弱化,然后引导用户去使用我们希望其使用的一些特定功能。这类阻力设计最为常见,比如通过强化按钮对比进行功能的引导,如下图。



5.3.2 歧视性策略

歧视性策略常见的的应用方式就是通过 VIP 制度或等级制度将用户进行身份区分,针对身份等级低的用户设置使用阻力,以便于引导其投入更多精力和资源,或者通过此方式给予高等级用户优越感,刺激其进行分享炫耀。

16 年发布的支付宝生活圈就是一个很好的案例,芝麻信用 750 分以上才可以使用的歧视性策略非常简单粗暴。很多达标的土豪用户在朋友圈炫耀生活圈的截图,等待朋友们的膜拜点赞。互联网产品中,每增加一个动作,用户都会呈几何级流失,但是支付宝的歧视性策略给了用户巨大的动力完成了截图、保存、打开微信、分享照片等一系列动作,帮助支付宝生活圈实现了刷屏传播的效果。


六、总结


虽然让用户畅通无阻地使用产品是我们的目标,但是有时还需要我们合理地限制。不同的使用场景和商业目的共同影响着设计策略。在如今互联网产品越来越趋于存量竞争的态势下,我们更多的工作开始专注于产品的优化。希望本文能够提供相应的思路,助力你在产品优化探索中找到可行的切入点。



文章来源:站酷   作者:Ballen成名

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


设计创新|QQ主题美化体验升级

鹤鹤

QQ主题自2013年诞生,至今7年时间,保持了整个营收的Top3的成绩,受到了广大用户的喜爱。随着QQ数年来版本的迭代,我们也渐渐倾听到了一些用户对主题的反馈,为了给用户带来更好的体验,我们决定对QQ主题从上游到下游进行一次全面的优化。





01 主题方案的变革

——————————

产品问题&用户调研

我们对QQ主题进行了两轮用户体验反馈和调研,发现:目前的外网主题存在机型适配效果差、素材制作质量差、缺少全局美化等体验问题;而同时,用户调研的结果表明我们的用户希望体验到更好更高品质更全面个性化的主题。





项目设计目标

基于现网产品问题和用户调研结果,对优化方向进行了归纳分类,最终确定QQ主题体验升级的项目设计目标:增加主题覆盖范围 ,提升主题的美化质量 ,提升主题的可用性。


探索解决方案

为了达成上面的三个目标,一开始我们根据QQ主题的实现逻辑制定了初步的优化方案:通过新增素材增加主题覆盖范围,通过修改旧素材提升主题可用性和质量。



但在进行执行评审的时候,我们意识到,这样的方案虽然可行,但落地成本非常的巨大,需要每个主题包内新增两端共1800多张切图,花耗多家cp公司至少四个月的时间和人力。



我们不得不推倒开始的方案,开始思考:是否有更好的解决方案?


在对主题制作流程、客户端呈现逻辑、日常运营维护工作等问题进行深入的溯源挖掘后发现:QQ主题目前实现个性化的方案是后台下发素材包替换本地客户端资源实现个性化。而这就导致了素材包本身是固定的内容,只能被动的接受版本更新带来的种种问题。


在这样的情况下,即使我们按照一开始的方案执行落地,多个版本后我们仍需大量的人力去进行维护和更新才能保证用户的体验。



所以,我们必须打破旧方案带来的弊端,要让素材活起来


在综合设计思维,开发思维,运营思维去思考问题后,我们提出了一个崭新的实现方案:终端染色(使用Color-filter,对png进行染色的技术)+分色映射(将资源与色值进行映射,用一套有限色板去管理无限资源的概念)。



在这套新的个性化实现方案支持下,设计师简单的对色板进行配色,就能够对QQ客户端的全局颜色进行变化。而当版本更新发生资源变更时,仅需维护通用的线上映射关系,资源即可自动适配到应有的颜色。




评估解决方案

针对主题方案的变革新方案,分别从优点、变化、难点3个维度进行综合评估:


- 优点:

(1) 整体学习,制作,运营,维护的成本降低

(2) 美化范围变大,下载资源变小,用户体验得到改善

(3) 效率得到优化,难度降低,设计师有更多时间提升主题质量


- 变化:

(1) CP学习新的制作方式

(2) 产品运营省去了过往定期维护素材的工作

(3) 设计师在版本迭代时候进行新资源的分色映射关系

(4) 开发人员进行统一的分色映射表维护管理


- 缺点:

(1) 方案工作量大,多达120+的界面检验,上千个客户端资源,大量的代码需要修改。

(2) 方案执行难度大,包括如何用有限的色板兼容更多的设计需求,资源如何在不同场景得到更有效的复用,设计与开发未来如何进行映射表的对接,以及版本的上下兼容。


推动落地


设计师提出“终端染色+分色映射”的新方案后,通过积极拉动会议,向主题业务相关的多角色进行新旧方案的优劣讨论,方案得到一致认同后,多方联动形成项目组。


其次进行可行性评估,与开发结对紧密协作,共同讨论难点攻克新方案落地要点。


最后基于前期可行性评估,以及难点预研,项目组规划出阶段性的落地方案。


方案的落地主要为三部分工作: 梳理标记->归纳转化->编译覆盖。



梳理标记:


前端开发逐个查找界面的资源和代码并标记,交付给设计师进行资源色值的规划


归纳转化:


设计师根据ui的配色规则以及个性场景需要,进行ui色板的构建及资源的颜色映射分配。


在这一过程使用腾讯文档进行设计语言与开发代码的转化。



编译覆盖:

修改代码,让资源支持个性化需要的染色和素材替换、录入分色映射的腾讯文档并进行实机的染色编译并和设计师共同检验效果。


而在上述工作中,设计师的任务难点就在于色板的设计和染色规则的构建。


首先设计师根据QQ的ui规范,建立初步的色板;下一步,创建界面demo,模拟资源与色板的映射关系;然后替换多个不同的色板检验主题染色后多场景下的效果,再对色板和染色规则进行反复的调整;最后在效果符合预期的时候,再输出色板和染色规则并最终在真机上进行验证。




第一阶段成果

QQ旧主题:仅覆盖6个界面、素材包内涵400+切图、日常需要花费巨大成本维护1000多套主题。


主题新方案落地后:覆盖范围从6个界面扩展到60+界面、素材切图降低至48张、600多个资源得到梳理优化、60+个旧主题存在的可用性问题得到解决、维护成本得到大大降低。




02 主题智能编辑器的诞生

——————————

主题新方案落地后,考虑到旧主题制作时间长,难度大,设计费用高的问题,产品侧希望设计师能配合新的染色方案去优化主题制作、上架、验收的流程。


确定设计目标

根据旧流程里各个角色反馈的问题点,第2阶段的目标可提炼为:提升制作效率、打包效率、验收效率。考虑到旧流程中效率低、出错率高的步骤大多是人工操作部分,我们计划设计一个智能化的主题编辑器来实现工业化的主题生产。



探索解决方案


以提升效率为目标,首先深入制作流程勘察,挖掘制作流程的关键核心点,并提炼关键触点、痛点问题;基于各个触点关键问题,逐一给出解决方案,并全局的回顾整个流程,从全局去统领优化方案;继而以落地为导向,明确问题解决的优先级,稳步前进规划方案落地。在解决方案中,本地编译体验已实现,其他能力落地优先级如下:


- 首先解决智能切图和智能配色,优先级最高


- 其次解决规范优化和多界面预览,优先级居中


- 最后是直连后台,运营做审核,优先级最低



方案落地

传统的主题制作中往往最费时间和最易出错的就是切图,在这里我们使用了双重保险


保险1:编辑器将内置一套智能化的切图合成处理方案,设计师仅需上传极少量的必须切图。编辑器还会对上传的切图会进行命名、尺寸、格式的检测。


保险2:官方设计师预设主题的PSD/SKETCH设计模板,附带切图命名尺寸格式等,画完后一键即可导出全套切图资源。

新主题的染色规则中,色板存在21个颜色需要配色。对CP来说,即使有设计规范进行学习,也存在着出错的可能。为了让制作通过率达到最高,我们计划通过编辑器内置的智能配色,将复杂的配色操作简化为2步操作,达到快速稳定地输出合格的配色的效果。


新主题色板中,颜色可分为主色系和背景色系,两大色系下的色值再各有不同的色值要求。



从设计师的理想角度来看,如果只进行主色和背景色的选择,即可输出实现21个颜色的话,无疑效率和通过率都会得到大大提升。


为了实现理想效果,我们设计了一套方案:


在选择主色、背景色后,首先对它们进行一个检测,在这里我们引入了WCAG2.0的标准,检测主色元素在背景色元素上的显示是否符合大众的阅读要求。其次我们再把QQ设计规范中,对21个颜色的不同微小要求,通过HSB颜色模型转换为数据化的代码条件并内置在编辑器中。


这样,CP选择的两个颜色,通过颜色检测、颜色模型转换、预设条件的微调,就变成了符合我们视觉层级规范要求和可用性要求的21个颜色。



在实现了智能切图、智能配色、导入设计稿、在线预览、结构化打包、手机实际预览等能力后,编辑器的能力基本得到满足,我们接下来对编辑器进行框架设计,在多方案权衡后,最终采用了元素作导航,右边区域保持全局预览的交互框架,并设计了编辑器的ui界面。





第二阶段项目成果

使用编辑器前:从制作到上架需要约4周时间,每月上架主题平均为12个。


接入编辑器后:仅需一天即可完成素材的制作到上架,并且得益于制作难度的降低,可制作主题的CP得到了扩充,目前每月上架主题稳定在2000+个




03 主题适配规范网站的搭建

——————————

在完成了主题效果优化、主题制作优化后,我们把注意力放在了制作上架之后的流程-适配维护。


旧的主题适配维护涉及到cp/设计师/运营/开发四个角色的大量人力成本。


而新主题优化后,仅需要设计师&开发工程师两位角色进行低成本的操作。



但在实际工作中,版本中的不同更新都是由不同的设计师&开发负责的,适配工作往往很难执行。所以为了保证适配的效果,除了在产品的工作流程中增加适配规定外,我们还希望能帮助到不同业务方降低适配的成本



新适配流程中,设计师其实仅仅需要根据染色规则对新增资源去定映射关系,而实际映射的写入是开发操作的。那如果两个角色的工作能合并,并且省去学习新适配规则以及沟通的成本呢?



从帮助开发去理解分色染色的层面,我们把资源元素和颜色进行了场景化的匹配应对,并且把规则关系整理成了目录,搭建了Q-Element适配规范网站;开发同学在进行适配时候仅需根据设计稿的新增部分,寻找对应目录下的规则关系,即可对元素进行适配。





第三阶段项目成果

优化前:主题的版本适配需要设计开发产品的多方配合,花费数天时间去完成适配。


优化后:仅需开发1个小时的时间即可完成适配和验证



总结


通过3个阶段的努力,QQ主题美化初步完成了主题效果、主题制化、主题维护成本的三大优化。上线半年后,目前QQ新主题已经达到1万八千个,并且借助QQ美化平台完成了外部创作人、QQ、QQ用户三者之间的生态搭建,正源源不断的提供给用户更多更好的个性化主题。我们也会进一步努力,由QQ主题开始对个性化进行新一轮的优化,带给用户更好的体验。



最后,广大设计师的机会来了!如果您擅长插画或者动画,点此链接https://ycg.qq.com/qcc,报名参与我们的原创空间和QQ美化平台项目。按照页面引导提交作品审核,经原创馆审核后,就可以获得创作权限。 您的原创作品将被QQ及QQ空间数亿用户付费使用,并获得相应比例分成。




文章来源:站酷   作者:腾讯ISUX

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


该如何给儿童产品做设计?收下这个思路分析

鹤鹤

针对不同的受众我们会做不一样的设计,今天是针对儿童进行的产品设计思路的内容分享,面对儿童产品,我们需要从心理生理上的区别分析,进而推动内容、交互、视觉、动画等设计,一起来了解下吧~

“小山上的风,没有一个人知道,没有一个人能告诉我;风从什么地方来,风到什么地方去。”

英国的诗人米尔恩在给孩子的诗歌《小山上的风》里如是写道。

在不同的年纪,这个世界带给我们的触动和感知都是不一样的。那么当我们为儿童进行设计时,该如何去呈现呢?让我们一起来探讨下吧。

他们与我们

近年来,儿童产品的市场是比较火热的,由于儿童的生长变化较快,他们在心理和生理上都与我们成人有较大不同,对于外界的信号,他们更喜欢得到视觉和听觉上的反馈。并且常常能够从挑战和冲突中获得快乐,他们不在意结果,目的性较弱,还有着非常强烈的好奇心,无法预见其行为会引发的后果,其模仿能力的强弱随着年龄成长呈曲线状呈现。当我们在设计时,应将儿童的这些特性考虑进去。

任务旅程的设计

在某种程度上,儿童产品的客户形态有些类似我们的 ToB/G 产品的客户。使用产品的一线用户,并非最终具有购买权的客户。孩子的父母是儿童类产品最终具有购买权的客户,他们对早期教育、智力投资、内容是否健康积极等等都有较高要求。

因此我们在内容的设计上应更加的多元化,将任务完成后的数据量化体现,使父母便于了解孩子情况,同时也可以从侧面激励用户后续的付费行为。任务旅程有多种类型,在儿童品类的设计上,我们通常采用下面这 4 种任务类型去设计。

该如何给儿童产品做设计?收下这个思路分析

交互界面

好的设计可以减少认知负担, 可以最大限度地减少理解功能交互所消耗的智力资源。在年幼的孩童时期,他们的记忆容量比成人小,我们需要关注到这一点,怎样的信息容量,交互层级和人机互动才能让他们更好的理解和认知产品界面。

比如 LG 有一款面向低龄儿童的手表,表盘上只有一个按钮和出声孔,并且在噪杂环境下,还考虑到家长的心情,非常贴心的设计了 10 秒自动接听的人机交互方式。

该如何给儿童产品做设计?收下这个思路分析

△ 图片来源 | 文章作者&Roobo 设计团队

通常,我们成年人对交互体验,产品易用性都抱有较高的期望,我们期望产品能为我们带来效率的提升、便捷的操作、强烈的视觉冲击力等等。但是,儿童与成人在人机交互的互动上却有着天壤之别。当产品功能无法正常运行时,孩子们并不会像成年人一样感到失望。当设计不如他们所希望的那样时,虽然也会暂时感到沮丧,但他们在自己生命旅程的学习尝试中,也习惯了那些常常无法正常进行的任务。随着成长经验的增加,他们会逐渐熟悉了解世界的运行规则。

该如何给儿童产品做设计?收下这个思路分析

该如何给儿童产品做设计?收下这个思路分析

△ 图片来源 | 文章作者&Roobo 设计团队

配色与图形

有研究表明,在对 120 名学前儿童(3—6岁)进行了12种颜色和12种图形的辨认实验中显示,实验刺激用速示器分三种速度(0.01秒、0.05秒、0.1秒)呈现。结果表明:呈现速度对辨认正确率有着明显的影响。3-6岁儿童对颜色和图形的辨认能力均随年龄增长而逐步提高。学前儿童对颜色的辨别,在三种呈现速度条件下,均对黄、红、绿三色的辨认正确率为最高。

该如何给儿童产品做设计?收下这个思路分析

图标 icon 的设计上,简约、块面化、造型避免抽象,例如 3 岁+的孩童已经可以理解向前、向后的箭头,有研究显示,在短时段内,儿童对图形的辨认在不同呈现速度条件下出现优势与劣势图形之分。优势图形的正确辨认率百分比较高,而劣势图形则较低。

该如何给儿童产品做设计?收下这个思路分析

硬件的配合运用

现在市场上有很多儿童品类的硬件,深受家长和孩子的喜爱,在软硬件的结合上,我们要善加运用,例如硬件自带的摄像头、触摸屏、声控等等。当硬件与产品内容相结合,可以碰撞出更加多种多样令人振奋的新的交互方式。

该如何给儿童产品做设计?收下这个思路分析

该如何给儿童产品做设计?收下这个思路分析

△ 图片来源 | 文章作者&Roobo 设计团队

动画设计

在任务旅程中,内容合理优质的动画,广受家长及儿童的欢迎,但是动画频繁变换的画面容易引起视觉疲劳,大多数动画片每 6 秒会变换一次画面转场,超出了幼儿视觉神经的承受能力。在儿童不同的年龄段,注意力集中程度都是有所不同的,皮亚杰理论研究显示 3-4 岁的儿童注意力集中的平均时长为 10 分钟,4-6 岁儿童注意力集中平均时长则可达 15 分钟。在我们为孩子们设计他们喜爱的动画时,要充分考虑到这些因素。运营类动画一般控制在 1 分半之内是较为合理的。

市场上很多 AI 儿童伴读机器人,是可以自动推送产品内容的,考虑到儿童的健康使用,推送动画的播放时间要善加利用,并减少观看所需的步骤,在家长端也需要设计对应控制内容的开关,并将音量的控制开关放在显眼易点的位置。

该如何给儿童产品做设计?收下这个思路分析




文章来源:优设网   作者:JellyDesign

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




零基础入门前端要掌握哪些知识?

前端达人

零基础如何快速入「]前端?这个问题往往是没有基础会遇到的,想要快速入「门前端开发,简单来说就是要把基础的知识点掌握熟练,然后由浅入深的去学习,在这里根据我过来的经验,为大家简单介绍一下零基础如何快速入门前端。



举个可能不太恰当的例子:前端就好比如盖房子,html就充当 了房子结构这部分,也是房子的基础。css呢, 就好比咱们房子的装修,墙面什么颜色,什么风格,什么地板等等,这些给房子改变风格,样式的就是css。而Java呢,就好比这个房子的功能,房子需要制冷吧,需要暖气吧,也需要上下水吧。这些功能性的就相当于是Java。



一、前端工具(dreamwear/sublime/Photoshop/SVN等)

二、零基础入门(HTML,CSS)

1、前端开发概况、代码入门



页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置等等。



2、常用标签集合



header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…



3、常用选择器&标签类型划分



d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block…



4、浮动进阶



浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件…



5、定位



relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度…



6、表格和表单



表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始…



7、兼容性问题处理



兼容性问题总结、浮动在IE6,7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式…



8、整站进阶



样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…



9、css3入门



transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角,盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、



10、移动端布局



测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断…



11、Animation和Transform



浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题…



12、Bootstrap前端开发框架



Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具…


另外关于零基础如何快速入门前端的问题,项目实战这一点很重要,一定要学以致用,我的建议是,只有在实战项目中多加练习才能真正的掌握这门技术!

转自:csdn; 作者:


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

炫酷大数据可视化界面设计赏析(九)

前端达人

大屏可视化界面设计可谓是当今行业、企业发展的见证,生动直观地再现了行业、企业的全貌。不仅作为展示,方便了解、监督;同时可以作为一个有效的管理平台,带来效益。大屏界面面向范围广,协同性好,易于被采用。下面几个大屏的界面设计,沉稳的背景上,加上亮色作为点缀和强调。既不失其风格,又富有灵动性。


接下来为大家分享精美的大屏 UI设计案例:

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的UI设计公司,公司对UI设计的追求一向很高,致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计,用户研究、交互设计等服务。

WechatIMG1539.jpegWechatIMG1538.jpegWechatIMG1537.jpegWechatIMG1536.jpegWechatIMG1535.jpegWechatIMG1525.pngWechatIMG1524.jpegWechatIMG1523.png



(图片均来源于网络)


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


更多精彩文章:


   大数据可视化界面设计赏析(一)

   大数据可视化界面设计赏析(二)

   大数据可视化界面设计赏析(三)

  大数据可视化界面设计赏析(四)

  大数据可视化界面设计赏析(五)

  大数据可视化界面设计赏析(六)

  大数据可视化界面设计赏析(七)


日常临摹如何用到项目里去?这个案例说明白!

周周

不同的阶段,临摹的目的不尽相同。一般来说,前期临摹更多的是练习软件、技法,后期练习别人的风格表达,综合运用。所以,我把临摹分为技法临摹、半原创到原创 3 个阶段,每一个阶段没有绝对的界限,都是在积累创意,完全是可以用到自己的项目中去的。

今天会分享一个我当年做临摹练习并融入实际项目中的小案例。

临摹

大概是在 15 年左右,在网上看到锤子设计师设计的一个图标,觉得非常惊艳,当时就想把它临摹下来,这是当时临摹的一个效果。


日常临摹如何用到项目里去?这个案例说明白!△ 原作

日常临摹如何用到项目里去?这个案例说明白!

△ 这是我当时临摹的图

我在临摹这张图的时候,想达到的目标是能根据自己的 logo 色及文字,做一个半原创的设计。

然后实际练习中,不断观察原作发现有一些细节值得学习:

日常临摹如何用到项目里去?这个案例说明白!

  1. 图标分为水上和水下,2 个层级,在水下的图形因为折射的关系,会发生扭曲
  2. 水下会有深浅的颜色变化
  3. 真实的水会流动,所以在水下会画出带明暗细节的水纹线条
  4. 水下会有气泡,且气泡的产生符合真实场景,气泡的大小由小变大
  5. 水面的边缘因为透光而产生边缘反射
  6. 投影因为红色盒子的影响,会偏红色色相,并且有近实远虚的关系
  7. 盒子的边缘会有 1px 的高光和反光
  8. 背景为了增加图标的展示效果,也做了单独的设计,把四周压暗,然后加上杂色,使得整体的质感更加强烈

当时,对我来说,在练习的过程中有一个难点就是关于第 3 个细节水的纹理执行有些难度,因为其中包括了粗细变化、虚实变化、明暗变化等等,单纯的用图层样式或者矢量去画的话,难度都比较大。这个细节当时耗费了我不少时间,后面突然想到其实也可以用合成的办法来实现,然后我去找了真实水纹的图片进行叠加,很快就搞定了。所以,只要能达到效果,不能太过于局限某一种思路。

日常临摹如何用到项目里去?这个案例说明白!

分析并完成这些细节后,就是你在做这个练习中学到的点,尝试把它们学以致用。

运用

记得当时在 360 时需要设计一套关于摩洛哥蓝色小镇的官方定制版主题图标。从搜集的当地代表性的图片中发现,多彩颜料是当地的一大特征,所以决定以染料为关键词去画一个图标,又因为颜料本身自带多彩的特点,所以以它为主题图标就很合适了。

日常临摹如何用到项目里去?这个案例说明白!

然后在思考这个图标的时候,首先会应用参考图中的配色,并结合染缸的造型做出了第一版的效果。

日常临摹如何用到项目里去?这个案例说明白!

这个效果虽然是表达了那个意思,但缺乏亮点,联想之前练习过水的技法表达(临摹中第 3 点细节运用),正好可以利用水的纹理做下强化,这样就优化出了第二版。

日常临摹如何用到项目里去?这个案例说明白!

嗯,看起来感觉有了一些特点,但感觉缺乏细节,接着思考水除了有纹理高光,应该还会有边缘高光(结合临摹中第 5 点细节),所以在边缘尝试加了高光,增加体积感,做出水要漫出来的感觉。

日常临摹如何用到项目里去?这个案例说明白!

如果只有这一层高光的话,细节度感觉还是不大够,在之前的文章《如何从优秀作品中偷师,用一个游戏案例教你思路》我有分享到在 UI 大佬的作品中能学到他们对于 1px 高光的使用(临摹作用中的第 7 点),这里因为是液体的材质表现,所以增加一个高光点增加水的通透感。

日常临摹如何用到项目里去?这个案例说明白!

日常临摹如何用到项目里去?这个案例说明白!

到目前为止,似乎看起来已经差不多了,但考虑到现实世界中,溢出的彩色液体在透光性很好的情况下,也会对周围环境产生影响,所以我在颜料设计的四周,配上对应的四种颜色的模糊投影(临摹练习中的第 6 点)。

日常临摹如何用到项目里去?这个案例说明白!

在思考下,在临摹的图标中为了使得图标更加自然,作品中其实结合了很多真实世界中会发生的情况,比如水的折射,气泡的比例,深浅等等,那对于染料来说,会有怎样的真实情况发生呢?我当时想到一点是,染料在用的过程中其实很容易洒出来,所以图标背板上现在太过于干净了,增加一些细节能够使得背板能够跟主体物产生关联,也更加自然。嗯,又是一个小细节。

日常临摹如何用到项目里去?这个案例说明白!

最后,我们对比下第一版和最终版的效果,细节确实丰富了很多。

日常临摹如何用到项目里去?这个案例说明白!

一张动态图可以更加清晰的看到变化。

日常临摹如何用到项目里去?这个案例说明白!

总结

这次图标的优化过程,我觉得有几个要点对我来说印象深刻的:

图标的风格可以是扁平的,但想要增加自然舒服的细节,一样可以像画写实风格那样仿照现实。你需要留心观察这个世界,就算是一张照片中也能有非常多可以利用的细节。

碰到难做出来的细节,多想想有没有更效率的办法。比如在做水纹理的时候,一开始就想着完全靠鼠绘画出来,结果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出来。

对于图标来说,要注意其整体性。比如图标中的主体物不要跟背景脱离,不要让图标背板只是作为一个容器,而要让背板也成为图标本身的一部分,这样图标的整体性会更好。

临摹的过程中,一定要多分析,多记录自己觉得是细节的点。每一次记录,都可能是将来设计时提升细节的灵感来源。

以上内容只是我在日常练习中应用到实际项目中的一个小案例,其实还有非常多的灵感想法都来自于你平时做的练习,关键是要多动手,多总结,才能增强自己对细节的把握能力。





文章来源:优设网     作者:彩云译设计



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



新项目设计时一定会遇到的5个盲区,提前替你总结好了

周周


最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。

关于苹果账户登录的硬性规定

2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。

而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:

  • 按钮的高度需要等于图标的宽高(图标官方有提供下载,已经是自带留白区域的)
  • 按钮的高度需要与中间的文案成一定比例(字体是按钮高度的 43%,比如 44 的高度配 19 的字)
  • 图标离左侧最小间距需要超过按钮高度的 10%

剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。

想了解更多具体内容,可以参考官方贴:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

关于安卓启动图标可带动效了

还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:

1. 启动图标(前景,不带背景的)-108dp(324px)

当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:

  • 启动图标(前景,不带背景的)-108dp(324px)
  • 启动图标(背景)-108dp(324px)

想了解更多具体内容的铁汁,戳底下官方传送门:https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

关于全屏切图的压缩限制

这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。

个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。

但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。

不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:

  • 尽量使用纯色背景设计,这样背景图可以用代码来写,主体切图大小可以想对控制小一些。
  • 如果还是需要使用花色背景,建议可以尝试高斯模糊的花色背景,这样开发可以直接用 1 倍图进行拉伸,也可以有效控制切图大小。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。

关于动效到底导出什么格式不坑爹

目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:

  • Apng:一个 PNG 格式的位图动画格式图片
  • Webp:2010 年 Google 推出的全部通吃的图片格式(可代替 Jpg、gif、png)

目前我觉得性价比最高的就是 webp,它的优势主要在于:

  • 压缩率极大提升,同分辨率的 webp 比 gif 要小很多
  • 支持位图、支持支持 Alpha 透明和 24-bit 颜色数、支持 3D 翻转(这些 GIf 和 Lottie 都有限制),也就是不会出现毛边啦、变色一类的坑爹情况
  • iOS、安卓都支持(比如同样高性价比的 Apng 只能用于 iOS 端)

唯一的 2 个问题在于:

  • webp 目前只兼容 Chrome 和 Opera 浏览器,其它浏览器不支持。不过基本我们都应用于移动端应用,所以浏览器兼容对这个影响应该还好
  • AE、PS 等各类动效设计的软件无法直接导出 webp 格式,需要通过插件或其他第三方软件转换。

我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:

1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)

不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

2.下载 isparta

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)

关于切图标注协作方式谁家强

设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。

如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。

然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!





文章来源:优设网     作者:Nana的设计锦囊



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



社区团购的优点和缺点

涛涛

编辑导语:社区团购作为2020年的一大风口,虽然伴随其火热程度,社区团购基本上是人尽皆知,但是真正深入了解这个行业的人还是占少数的。本文作者从团长、产业模式和业务竞争关系三个方面出发,对社区团购的优缺点展开了分析讨论,与大家分享。

整个大零售产业至今没有谁站出来,对于社区团购市场的影响力和跨界冲击力做过很系统的阐述。少数几个产业知名人物给出过零散的意见,步步高超市的王填在两会提案中直接表态,有关部门必须严格监管社区团购的扩张,严格落实市场总局“九不得”规定,禁止社区团购互联网大公司通过价格手段倾销。

当然,步步高自己一年前就在长沙做着社区团购。名创优品的叶国富说社区团购再干一两年的话,500平方以上的超市基本没戏了。盒马的侯毅说社区团购是电商真正意义上,可以让全品类进入了中国所有地方,尤其是下沉市场。但是目前社区团购的交易形态和业务模式还很早期,整个赛道的模式还有很长的演变可能性。

整个赛道少数几个站出来发言的玩家,基本上都对社区团购的存在,以及三大互联网公司过去半年高举高打的重视,来自传统零售的防御心尤其重。

不过,按照此前相关部门监管互联网新业务的惯例来看,只要一个创新消费互联网业务的最终价值倒向于消费者,而且能够优化原来赛道的产业效率,监管在逐步观测和意见调整的总体态势,一向都是开放和支持的。

基于实体店业务的传统零售行业,对于社区团购的防御心应该是远超过此前传统电商和数字化零售跨界物种。社区团购提供批发式零售的家庭购买的成本和效率优化,显而易见的具备模式优势,代表着家庭场景购买的更先进生产力。

家庭购买一直是此前电商并未完全占领,或是仅有部分占领的一块最大零售阵地。就像以3C&家电起家的京东,会在财报分析师会议上,明确喊出京东未来第一品类是快消品——通过电商解决方案满足家庭购买一站式需求。

家庭购买的场景优质性和解决难点在于,它是需求和供给在履约层面最具确定性的零售流通方案。简单的说,它只是库存和房屋之间的确定性流通关系。

我们通常以为,一个人去沃尔玛为家里采买日常即时用品,是他自己和沃尔玛的买卖关系。其实对于沃尔玛来说,它的门店周边三公里内所有房屋里住着哪个人,其实没有差别意义。张三搬出去李四住进来,沃尔玛的来客逻辑都是一样的,这也是传统零售极度讲究门店选址的原因(除了美国Costco)。如果新搬来的李四不去沃尔玛,不是门店和李四房子的流通关系有变,而是李四认为沃尔玛在三公里覆盖圈的有效条件下,都不能替代沃尔玛逐步丧失家庭购买的一站式价值(假如沃尔玛确实不能满足的话)。

社区团购的出现,带来门店和房屋之间的确定流通关系,升级为门店和社区(多个房屋)的确定关系。购买场景的量变扩充,带来这种确定关系的规模化,很好的优化了单一订单(无论是到店、到家、电商)的成本与效率。自此,多个有利条件开始汇集到社区团购业务场景:家庭购买的商品普遍类同确保单品量相对集中、家庭品类价格空间微薄下还能创造价格优势、社区级集约化履约的成本优势、预售制集单的备货确定性(完全平台化作业的话,甚至可以做到零库存)等。

社区团购属于真正意义上第一次,实现了业务模式的先进性、平台组织机制先进性、前端体验价格的先进性,三位一体的同步进行。美团优选这种完全平台化组织业务链路的社区团购,甚至能在零库存的条件下,短时间内快速提高订单量规模。这让美团优选的主要平台任务,就是扩展入驻城市。而据我们36氪-未来消费 通过各种信息来源了解到的是,美团优选目前确实是订单量整体相对最高的社区团购平台。

与之相比,社区团购带来直接竞争关系的业务,应该主要发生在跨界但有交叉的其他提供购买的零售流通渠道。这种跨界又交叉的跨界关系,类似便利店的主要竞争者,其实发生在门店周边跨界的餐饮、烘培、茶饮等业态。彼此业态模式很不相同,但都是提供社区级的家庭日常购买。

01 团长的链路枢纽价值

社区团购的模式创新很大一部分确实在团长,脱离了团长的社区团购,很容易和社区门店自提业务混淆,即很类似此前破产的合肥呆萝卜做的社区店隔日自提业务。有了团长,平台才彻底放开手脚,专注做好平台特有且主导整条链路议价权的几个事情。

第一,不用直面终端用户的营销拉新和履约服务,全部交给团长。但是,2020年美团,滴滴,拼多多三大互联网巨头大规模砸钱投入,打破了此前由兴盛优选这种小公司创新才有的行业默契,直接把补贴给到终端用户。目的是短期内快速结束这个赛道的竞争和地盘划分。总的来说,社区团购抢不了小菜贩的卖菜生意,但是确实很伤兴盛优选的心,也很影响社区超市、百果园、钱大妈这些渠道商的业务。

第二,平台可以专注打造一套以团长为交互节点,以平台-团长-终端为交互关系(类似传统零售的经销商-小店-终端消费者),以社区级为履约交付单位,形成一套基于社区级场景的家庭日常购买生意。这样,平台就可以像一个传统零售的批发经销商,专注做好三个事情:小店拓展、品牌货源、供应链物流。

第三,简单地说,就是平台和团长,分工程度变深,彼此有限的资源和精力,更好的专注一个业务节点,做出更深度的能力。有了深度能力,效率自然就会变得更高。有了这些综合特性的驱动,分工优化彼此的效率,这个生意的魅力就形成:有了互联网的信息流效率及规模化,但是走的又是传统批发生意的成熟商流模式。

第四,社区团购主打的是家庭日常稳固购买,因为家庭购买与个人购买的最大区别,就是家庭购买是根据物流地址决定供给流通。简单地说,个人购买:服饰,手机,美妆,餐饮,一个人去全国任何地方的体验,其实都是一样。但是家庭购买:快销、食品、粮油、生鲜、清洁洗护,那就必须是在家里用。家庭购买的需求起点,也是围绕着家庭和住址发起。

平台的供给,自然围绕着家庭设计整个供给路线和效率公式。这也是为什么,传统零售辣么讲究开店选址的重要性。

社区团购更升级三步:

  1. 它不自营,大量已有的社区店,就是经过验证的优质选址店;
  2. 大量社区店及店主,已经与社区建立一套稳固可信赖的交易和信任关系。这些店主就是最好的团长(兴盛优选和美团优选都是这么认为);
  3. 家庭购买非常统一,家家使用的快消粮油清洁商品都差不多,家庭购买的确定性太高:付钱的是个人,使用的是家庭,位置都在社区。零售业讲究规模出效率,社区天然聚集了很多家庭凑成规模,因此社区的购买,最好统一集中购买。零售生意非常高级的流通形态:社区场景的家庭购买,统一的团购下单和履约。简称:社区团购。

第五,这种生意集中下来,就成为零售业很理想的一种生意:批发式零售,美国Costco就是批发零售的集大成者。这种生意还有一个优势,就是所有的竞争力全在商品和价格。因为批发式零售,价格即使没有补贴,也比一般零售渠道便宜。

只要再做到东西品质很好,那简直就是零售最硬朗的实力:好货低价。做到这种程度的零售业,竞争力是空前的,互联网都打不赢的优质商业模式。美国Costco在全球第一消费互联网大国的中国开店,生意比所有线下店和电商都好,人家就没有互联网。

02 社区团购模式还在早期

社区团购的问题也有,而且目前暂时还不好轻易解决,导致这个生意的现状和服务力,并没有发展的太成熟,业务链路上还有很多服务细节、品控和效率优化存在问题。

第一,暂时无法解决出货规模和品类丰富的函数关系。即规模是社区团购这种批发式零售的独特特性,但是一旦单品和品类走了丰富路线,铁定会稀释单一商品的规模。没有规模,就没有价格优势,就会反过来反噬社区团购这个商业模式的很有优势。

第二,暂时无法提供完整的一整套解决方案,这点生鲜最为典型。因为一盘菜的烹饪,中餐需要至少5-15种主料、辅料、配料、佐料。导致一盘菜的烹制,传统生鲜提供的购买体验,都是少量而多种的购买。这种购买是菜市场这种低门槛做生意,分散化的摊位设置又丰富配置菜品的线下场景强项,超市和电商直到今天都搞不赢菜市场。社区团购没那么大本事,抢不了小菜饭的生意。担心会抢小菜饭生意的人,骨子里还是看不起农民工。生鲜电商和社区团购,目前的产业能力还要大大的进化。

第三,对于三巨头、京东、阿里来说,各家企业也很清楚,生鲜只是当前快速积聚订单的起步手段。社区团购不能等于生鲜零售,这是大家心里揣着明白嘴里不说的共识。但是社区团购如果专注卖家庭高易耗的品牌快消品,它的价值也不高,利润率也很低。这里面的未来方向之一,还是要加强自建供应链,坚持走自有商品,或是品牌专供的路子。

第四,社区团购目前还有一个具备但没有很强发挥的模式能力,就是深入到村镇一级做下沉最彻底的团购。城市小区是社区,村镇也是社区。目前中国电商最下沉的地方,还只是到乡镇,还不能到乡镇下面的村子。因为电商一个订单一个物流包裹的履约模式,绝对玩不起深入到广袤分散,订单又不是很集中的村子。可是农村家庭除了极端贫困户,哪家不是完整意义上的家庭购买需求?社区团购的价值,在于它首次用最效率和经济的方案,让人看到了信心,可以做农村家庭一站式购买的渠道商,而且还可以深入到村落这个最下沉最末端单位。

03 跨界影响力的进攻与防御

生鲜前置仓、到家即时零售、到店购物、社区自提……这些围绕着社区场景做的家庭购买,社区团购与他们在模式也不具有可比性,但是业务方面未来的竞争关系会越来越强。

第一,前置仓和社区团购,模式很不一样,但是在生鲜品类、家庭客群单位、社区场景的履约线路设计三个方面,高度重合,导致双方在城市社区家庭的生鲜购买,确实存在直接的竞争关系。

2020年社区团购主要在二、三线城市作战,现在开始往北上广深一线城市拓展(上海还是最少)。这些一线城市都是前置仓重点布局的城市,两者的订单竞争短期内会有一定的直接关系。美团同时押宝了前置仓的美团买菜,社区团购的美团优选。而且美团的社区团购走的是更彻底的平台化模式,整个库存管理和拓城速度都做的很不错,外界确实对美团未来发展很看好。

反过来说,今天阿里社区团购,即盒马集市整合了零售通小店资源,反而坚持在供应链和物流方面走类自营的强控模式。加上盒马本身也在自营模式下做了社区到店和即时到家零售,以及还有手机淘宝流量扶持,阿里生态的潜在可用资源。预计美团和阿里,加上京东(如果京喜也有一个亮点模式),三家在社区级零售的竞争,在社区团购赛道的竞争,未来会非常好看。

第二,前置仓和社区团购的竞争力对比,两者现在有差异,但是对比的不公平。

因为前置仓所有能力都是围绕着品类——生鲜展开的。社区团购的所有能力是围绕着链路——团长展开的。当前阶段社区团购有了大投入而很火爆,才显得盘子很大。就好比自己家里今天结婚办喜事吃得好,就说自己可以过上一贯大鱼大肉的好生活。

因此,两者不在一个投入高潮期,不能代表社区团购可以替代前置仓,或是优越于前置仓的生鲜流通的模式,或是综合能力两者孰强孰弱(效率方面,目前来看前置仓的成本履约偏贵,但是综合体验更好)。

第三,即时到家零售背后,还有一个类似的平台化模式——同城零售。

他们这个玩家是用电商平台的规模效应,也在做着前置仓的生鲜生意,而且旱涝保收的只赚佣金。相比自营类且专注生鲜的前置仓,对于商品的操盘风险承担的更少一些。当然,这种平台天然要庞大,目前市面上也只有京东到家、美团(又有美团)、饿了么、天猫超市淘鲜达、淘宝买菜。

第四,即时零售天然是个大生意,也就是说,谁做前置仓,哪怕是创业公司,一开始就是正规大公司的规模来建构生意。

同城零售的规模更大,刚才提到,市面上就几家在玩。但是社区团购可以很小,只要团长搞定一个社区,再搞定货源,就能玩起社区团购生意。还是那句话,团长是社区团购生意的关键,而团长又是一个门槛极低且个体化的角色。

这也是为什么,武汉疫情封城期间,大量有货源的小菜贩,搞定一两个社区的物业公司或居委会,就能在各个小区玩起社区团购。毕竟,要说社区团购还需要什么互联网工具,微信群聊+微信支付,老人小孩都会用。

但是,团长既不属于平台的员工,也与平台没有强绑定的合作关系,导致团长的能力建设与长期成长都很有风险,团长的流动性(流失率)也非常频繁。团长角色的价值定义,兴盛优选此前并没有为行业提供一个成熟版本,这是摆在所有社区团购玩家面前的一个很复杂的问题。

文章来源:人人都是产品经理   作者:aria在这里

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


主题设计神器来啦!知识点Get了吗?

鹤鹤

设计系统基本就是组织如何构建数字产品的故事,在公司内部,设计系统改善了产品团队之间的协作,而设计和工程团队之间面临的一个常见问题是:共享品牌准则和界面信息。在开发过程中,应该遵守还原设计的内容,但是我们都知道这并不是那么简单。


从目标达成的角度来说,设计规则的创建与执行同样重要。我们期望参与产品的每一个角色,都能记住设计规范,结合设计原则(Perceptual Pattern )最终达成界面展示在用户面前的样子。这也就需要设计系统内,有一套控制性强、拓展性高的方法来维系产品的风格呈现,也就是我们今天将要讨论的设计变量(Design Token)


构成


什么是设计变量(Design Token)


在数字产品的概念中,许多中心和微小的UI信息片段将在多个平台上使用,被称为:设计变量(Design Token),他们是设计系统中设计语言的构建块,也是设计决策的呈现。他们维护核心样式的所有值:间距,颜色,版式,断点,动画,字体,平台比例尺,组件状态等,最终通过数据表示。命名规范和结构化的约束,可确保产品体验的统一度与灵活性,更进一步可为产品打造赋有情感的品牌认知。


而对于SaaS类或者APass类的公司而言,设计变量还可提供给多个合作商所用,满足多种定制化的诉求。



实施例举


在以往的真实产品中,示例(如下),设计人员会发现,实现和样式管理的环节在开发过程中是完全断掉的,设计语言转化为开发的语言时,缺少风格系统完整性的延续。我们通常看到的style代码都是一些几乎没有体感的参数,且公司产品体量越庞大复杂,想要全局迭代就越是痛苦。


但如果我们将这些参数封装起来,用语义化的方式来进行描述,就增强了“系统下的画面感”,如“font-size-level03”、“border-distinguish-background” 等,就是设计准则下情景化的归类与描述。


但语义命名只是一个最终呈现,真正让设计与开发者都能”读语义,识运用“。还需要我们在设计系统中建立一整套完整的设计变量对应表,并让大家对它们有着清晰的记忆。

这里我们将以群核科技旗下,工具设计系统(Tools )中的设计变量为例,来给大家进行详细分析。首先在设计原则下,我们引申出设计变量规则的制定原则:精准、灵活、易读。

意指归类与对象的精准性,配置化的灵活度,语意命名上的易读性。


对所需范围进行定义,命名规则与前端书写规则达成约定。


变量的“结构完整”,有助于设计与工程团队在长期维护上,提升灵活度,3层继承结构,很大程度保证了“精准”“灵活”这一原则。


定义完基础规则,我们具体来看设计变量在产品构建中,三大主用途——1,主题定制   2,跨平台呈现  3,优化工作流


主题定制


我们找到产品界面中定义“核心样式”的部分,例如颜色,字体大小,空间,动画,阴影,断点等等。通过这些具有统一命名规则的实体,用于代替硬编码的值,直接集成到设计系统下的组件库里,也在日常的产品界面开发中使用。


通过继承,别名变量起到了衔接全局变量和指定变量的作用,指定变量影响了最终的样式呈现,从而实现主题功能。


单个主题可供多个产品团队使用,主题本身也提供可配置化,即拥有不同的主题外观体验能力——如“客户诉求”、“用户自定义”,“产品定位差异”等,也可通过创建新的主题,完成新的对应表,继而产生相应的风格模式,例如“暗夜/日光模式”或“舒适/紧凑”布局模式,“企业品牌”定制模式等等。


主题功能在产品中体现


跨平台呈现


多端设计是未来发展趋势。最新的iPadOS 14还为许多应用程序添加了侧边栏,包括音乐,照片,文件和快捷方式,更加高效。它使iPad更具Mac感,也降低了学习成本。


目前我们很多产品都要考虑在 Web、iOS、Android 上设计。如果有新的功能增加,设计和开发会消耗较多的时间在上面,而且很难去统一把控。


Design Token 在跨多端设计中不仅是存储样式的变量,更是一套用于各操作系统间进行翻译的口令。我们希望通过变量来控制一些样式的属性,在不同终端做到自动化的映射。


假设在移动端正文字用14x,而在pc端为12px,虽然它们值不一样,但他们都是使用的color_text__primary,在不同终端变量会自动根据设备来取不同的值,通过一套设计就能实现多端运行,提升效率节约成本。


优化工作流

拥有了强大的设计变量样式库之后,它对我们的工作流程将带来什么革新呢?


显而易见的是,团队将节省非常巨大的工作量,我们不再依赖单个工程人员的修改质量,且能更大程度减少跨组依赖。此外,早期设计工具无法与设计变量生成器进行本地通信,我们通过优化Sketch插件,完成了变量命名数据的输出,使得工程人员可直观看见变量名称。这将为设计验收节省大量时间。


产品的大批量的历史问题也得到解决。数字化的自动识别效率远高于痛苦的人工调整,设计师和产品团队都将收获全新的迭代方式,这是有历史意义的一刻。


结语


简而言之,设计变量作为一个管理风格样式的有效手段,可集成主题管理,对跨平台开发也同样起到作用。简化团队合作协作流程,提升迭代维护效率。尤其适用于需要构建多个Web应用程序和跨终端应用程序的组织。


文章来源:站酷   作者:酷家乐UED

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



短视频创作者私域运营的研究思考

鹤鹤

随着移动网民数量增速放缓,流量红利逐渐消退,平台竞争愈发白热化,优质创作者成为平台的必争对象。在后流量时代,抓住优质创作者的核心是平台流量所能附加的多元价值,因此对流量的深耕与私域的变现成为了必定的解题走向。

面对这样的趋势,研究者应该如何走进创作者的世界,深入洞悉他们的私域运营需求?我们在对多名短视频创作者的研究中沉淀了一些思考。


为什么关注私域变现?

——理解行业和业务是选题关键


行业趋势:创作者的收入结构正在变化

短视频创作者的传统收入来源是依靠播放量获得的平台流量分成。但随着短视频玩家的不断涌入,公域流量瓜分紧张,基于粉丝沉淀的私域变现成为创作者多样化收益的来源。

从行业公开信息以及我们所接触的创作者的鲜活案例中均能发现,非流量分润的收入占比正在提升,多元的私域变现已成为他们收入的重要组成部分。

公域流量红利见顶


私域流量收入可观


业务思考:平台对创作者多元变现需求越发重视

短视频领域目前呈现创作者多平台分发的趋势。我们在研究中发现,多平台混合运营的作者占比已接近七成;头部作者也是如此,抖音和快手百万粉以上的作者中有三成为双栖作者。创作者精力被多平台瓜分,而影响创作者对平台的重视度和运营投入度的最核心因素就是经济收益。

在“主阵地+重点运营平台+纯分发平台+其他关注平台”这种金字塔型的混合经营模式下,平台只有向塔尖挺进,才能留住创作者。于是,支持创作者私域营运及多元变现也成为业务后续发力的重点方向,我们便顺理成章的将研究聚焦在这一主题上。

经济收益影响创作者平台投入


私域运营拉动平台成为主阵地



研究谁?——找准关键角色


私域运营是一个相对宏大的研究主题,要让研究具备可行性,就要锁定明确且合理的研究对象。找准关键角色,能够起到让研究事半功倍的效果。


考虑等级能力差异,研究锁定头部作者

内容创作的生态中,作者等级是影响需求差异化的核心变量。新手作者大多是视频创作小白,还处在能力突破和粉丝积累的初始阶段,更加关注成长收益,即创作能力的提升和流量的增长。而偏头部作者已经积累了一定的创作经验和粉丝基础,更在意经济收益,对于内容价值最大化需求强烈。

头部作者也往往意味有着更好的粉丝基础、更多的实战经验、更深的行业理解,对研究而言有更深的挖掘价值,也能在更短的时间内输出更多有效信息。所以本次我们圈定头部作者作为目标首选。


考虑不同垂类覆盖,避免信息产生遗漏

短视频的创作和运营日益走向细分化和垂直化,不同的细分垂直领域,也存在不同的变现方式和需求。因此,垂类领域是创作者研究中不可忽视的另外一个核心变量。

目前短视频多元变现方式主要有电商带货、付费专栏、咨询服务、打赏送礼等;我们在选择创作者的内容垂类时,也有针对性的确定生活、家居、教育、情感、影视五个垂直方向,覆盖所有变现类型。


 

研究什么?——梳理私域变现流程,搭建研究分析框架


在具体执行前,研究者首先要确定研究的关注重点,划定研究的边界。前期需要做大量的案头研究工作,充分了解行业现状。短视频领域研究中有一些常用的信息获取渠道,略作梳理,以供参考。

充分的信息获取决定着研究的下限,能为研究洞察打好基础,也能帮我们形成后续研究的系统性框架。我们基于私域运营的主要流程梳理,提取出影响私域运营效果的四个核心环节,形成最终研究产出的分析框架,后续关注创作者在该框架下各环节的具体需求及问题点。


 

如何理解创作者?

——5种思路,让深入分析成为可能


创作者对于需求的表达往往是主观和模糊的。对于B端创作者而言,由于具有更明确的平台利益诉求,他们对于需求的表达甚至会表现出更多的“私利”和“怨念”——“我想要更多的流量分成”,“我想要完善的运营服务”,“我辛辛苦苦做内容,却没有收益,真让我寒心”……

但是作为平台,流量和资源的有限性决定了无法弥合多方矛盾,满足无限需求。那么,作为研究者,我们不应该只简单传递“用户要什么”,而应该从用户需求出发,剖析需求背后的形成原因和深层问题,告诉业务“为什么会这样”以及“我该给什么”。

下面我们将以研究中的一些发现为例证,提供几种研究分析思路,让大家更好的理解如何还原创作者需求的本质。


一.不仅呈现事实,更要有底层思考

平台的流量分配已经从粗放式的内容引入时代发展到精细化的内容建设与资源分配时代,策略不断积极调整,向更多优质的内容倾斜。创作者们在寻求流量更持续、有效的利用时,也越来越意识到优质内容有着更大的增值空间,希望在平台的引导和扶持下,生产更优质的内容不断“圈粉”。

然而不同的平台有不同的调性和内容偏好,这时候创作者困惑的是:到底何为优质内容,我又该如何去创作平台喜欢的优质内容?这就需要平台通过激励政策和创作活动的引导给出答案。

在研究者的分析中,我们不能仅仅暴露“平台政策不清晰”的问题,也不能只对竞品的做法做简单的罗列和复制。值得深入思考的是,现有政策和用户需求的差距点在哪,后续优化的原则和方向是什么?

我们基于对于作者需求的理解和竞品差异点的分析,提炼出平台政策引导的三个优化方向:

1.垂直化:内容消费需求日益多元化,平台创作激励活动也要深入覆盖更加多样化的垂直细分领域;同时,为了增强创作者感知,应将各种激励计划显性化进行包装,清晰传递平台扶持的垂类和方向。

2.日常化:平台创作活动应当多样且高频,充分契合不同领域创作者的兴趣点,且需具备较强的时效性。

3.矩阵化:内容创作不再只是作者的单打独斗,更需要在重大运营事件上联合平台和MCN机构进行内容共建、资源联动,最大化内容的影响力。

 

二.不仅要看自身,还要看行业先行者

在短视频赛道上,存在着诸多优秀的先发竞争者。竞品在平台管理、运营服务、产品功能等诸多方面都能为研究提供较好的借鉴作用。在研究中,作者的表达只是我们研究的“引子”,关注竞品、对标行业标杆、分析差距,才能够对作者需求形成更准确的判断,对满足需求的方式和重要性层级形成有效启发。

以平台运营服务支持为例,竞品平台的做法为我们提供了良好的借鉴意义,也形成了行之有效的业务参考。平台与作者的理想关系是共赢共生,在服务过程中,需将平台的玩法透明地传递给作者,让作者对于如何运营、如何变现心里有底,建立“只要跟着平台走就没错”的信赖感,与平台之间形成更强的依存关系。


三.关注生态各角色,纳入C端视角

内容创作生态包括平台、B端创作者、C端用户三种主要角色。创作者运营的目标受众是C端用户,对用户更有吸引力的内容才更容易形成粉丝沉淀。因此,研究B端创作者,B-C联动的分析视角尤为关键。我们可以从“C端用户要什么”,推导出平台需要帮“B端作者做什么”,进而给出更贴合创作者实际运营情况的赋能措施。

研究发现,在粉丝沉淀环节,从C端视角出发,内容是形成作者关注关系的关键,也是塑造作者IP形象的关键。那么,对应到对B端需求的满足上,平台就应该为其优质内容的露出提供更多能力支持,包括内容的自主管理、内容的连带互通功能,最大化发挥内容的价值,充分赋能创作者。


四.聚焦群体差异,对细分需求保持敏感

不同类型的作者有不同的诉求,研究中需要更多关注差异、满足差异。

以变现转化环节为例,建立用户信任感是创作者的一大需求。商业社会、信任为王,信任是形成购买的起点。平台要重视对创作者身份的包装与强化,外露关键信息,快速建立用户对作者的信任感,从而促进付费转化。在这个过程中,不同垂类下促成用户下单购买的信息是不同的,作为研究者,应该对差异化的信息需求保持敏感。研究发现,电商购买中用户更看重优惠折扣和交易信息;而专栏购买、付费咨询,则更需要强调身份背书、作者荣誉等专业信息,以及增强作者和粉丝的沟通与交流,提升用户信任度。


基于以上分析,业务在信息外露、增强作者身份形象感知上也规划了进一步的优化措施,促进用户付费转化。


五.不仅看短视频,还看垂直行业赛道

依托于短视频平台的私域变现,本质上还是电商/知识付费,短视频只是在商品之外额外提供了一个内容展现、IP塑造的自媒体营销方式。因此,研究视角不能仅仅局限在短视频本身,更要学习垂直赛道的玩法,如:电商领域对标淘宝、盒马;知识付费领域对标得到、小鹅通等成熟玩家。他们在其各自领域已经形成较为成熟的变现模式,短视频平台在交易闭环的实现效果上需要向这些垂直赛道产品看齐。

纵观行业趋势,短视频平台也在不断引入产业链上的更多合作伙伴,例如:上游引入电商服务商进行供货服务和产业带打造;中游引入内容服务商提供创作者运营能力培训、代运营服务;下游引入品牌服务商助力营销推广,以此提高平台变现能力,共建生态繁荣。


结语:理解创作者,先要成为创作者


B端创作者的研究相对而言对研究者具有更大的挑战,需要具备更丰富的行业知识储备和更深入的问题洞察能力。理解创作者、理解内容创作生态才能为业务提出更切实可行的落地建议。

理解创作者,不能仅仅是走近创作者,而是要成为创作者,亲身经历才能更有感悟,这也是无论做任何领域的研究,作为研究者都应该具有的态度。

短视频行业正经历着它蓬勃的生长,未来有着无限的可能性,希望你和我们一起经历、一起探索,也希望我们的思考能够为你带来一些启发。

文章来源:优设   作者:百度MEUX

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


日历

链接

个人资料

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

存档