• 如何更好的统一颜色规范?这个方法正在成为新趋势!

    UI交互 2022-05-05
    Hi,我是彩云。咱们平时在做 UI 组件库的时候,会遇到一个问题,定义了很多颜色但在团队合作的时候,却依然还是会根据每个设计师自己的喜好来配色,很难将颜色...

    Hi,我是彩云。咱们平时在做 UI 组件库的时候,会遇到一个问题,定义了很多颜色但在团队合作的时候,却依然还是会根据每个 设计师 自己的喜好来 配色 ,很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰,那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例,希望能帮你解决这个难题。

    我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素:它们构成视觉语言,帮助定义品牌,并被开发和设计师每天用在产品设计中。

    但如果我们在使用颜色上没有明确的指导原则,颜色被团队中的设计师按喜好使用时,将会导致产品看起来非常混乱。

    我们 APP 中的不一致例子

    接下来我会告诉你,我们是如何做好颜色规范以及在整个项目中面临的挑战,正如你将看到的,这个项目并不像看上去那么简单:

    如何通过 Getaround 在设计和技术方面管理颜色 概述这个系统的局限性,并说明我们如何改进它 什么是语义颜色 我们是如何实现它的,以及它带来的优势! 我们之前在 Getaround 中如何管理颜色? 1. 在设计方面

    和许多设计团队一样,我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中,可以在其中找到我们在产品中使用的所有常见样式,例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库(iOS、Android、Web、电子邮件)。

    颜色名称过去是基于它们的外观。例如:紫色颜色是我们的主要颜色,而石墨色是基本文本的常规颜色。

    2. 在技术方面

    在我们的 APP 中,曾经会用相同的系统来管理颜色。此外,还有一些语义颜色,但仅限于 iOS,开发用的也不多。

    我们在旧系统中面临的限制 在使用这个系统时,团队反复面临同样的问题:

    如何确保从一位设计师到另一位设计师以相同的方式使用颜色? 如果没有适当的指导原则,我们如何确保开发很好的还原? 如果明天我们必须用全新的配色方案来改造我们的品牌,要怎么快速统一? 让我们试着找出我们是如何陷入这种境地的?

    1)没有明确的颜色使用规范

    所有设计师都使用相同的色板,但自 2019 年 Getaround 品牌重塑以来,除了引入不一致之外,没有明确关于如何使用它们的规范,所以设计师在选择颜色时迷失了方向。

    然后他们将开始建立自己的参考资料,每个设计师都有不同的配色想法。

    例如:设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色?颜色命名在这里不是很有帮助

    2)旧品牌的设计包袱

    以前品牌的一些旧颜色仍在使用(按钮上的蓝色阴影,标题……)。到现在也没有真正的行动计划来迭代它们。

    旧驱动器品牌

    我们对新系统的设想 在 2021 年初,我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。

    我们问自己“5 年后我们的 APP 会是什么样的?”。我们会回顾,Getaround 品牌是如何成为我们视觉方法中心的。

    以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分

    致力于设计系统的 Cobalt 团队借此机会重新考虑了 颜色系统 。然而,为了使这一目标成为现实,我们面临着一些挑战:

    1)制定指导原则

    我们如何确保每个设计师都可以依赖易于理解和使用色彩系统?拥有一个简单系统将加快使用速度。

    2)颜色能通过可用性标准

    我们如何确保从一开始就设计出易于使用的颜色?

    3)易于维护并符合未来趋势

    我们如何才能使系统易于维护并符合现在和未来的行业标准(例如:暗模式)

    我们新的颜色系统:语义颜色 在我们的探索阶段,在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色:(主要?强调?)

    我们还测试了 APP 界面在黑暗模式下的外观,以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本?我们开始与开发讨论这个问题,以了解他们有什么解决方案来处理这些问题。

    语义颜色的概念很快就被开发人员提出来,因为他们知道并且很好地使用了这个概念。但对于设计师来说,又要如何准确理解呢?

    1)什么是语义颜色?

    语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。

    例如,你可以将颜色命名为“成功”或“积极”,因为它指的是含义,而不是“绿色”或“翡翠绿”。

    甚至可以根据颜色在屏幕上的应用方式来命名颜色,例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……

    2)从基于外观的配色方案到基于语义的配色方案

    语义颜色并不新鲜,越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习

    google: https://material.io/design/color/the-color-system.html#color-theme-creation

    Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color

    Shopify: https://polaris.shopify.com/design/colors#navigation

    Asana: https://polaris.shopify.com/design/colors#navigation

    显然,这种颜色系统有很多优点。因此,现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。

    3)深入研究语义颜色

    我们的新颜色系统由两部分组成:

    基础色板 语义颜色

    基础调色板

    我们与品牌团队密切合作,他们定义了一个全新的品牌,我们在工作时会围绕这个品牌考虑。

    该品牌的每种颜色都采用多种色调进行调整,以创造更大的灵活性,一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们,但他们会选择在产品中效果最好的那些。

    基础调色板

    语义颜色,语义颜色建立在用作参考的基础调色板之上。正如我之前解释的,命名不再是指颜色的“外观”(洋红色、棕色、绿色……),而是指UI 元素它们被应用于(文本、图标、按钮、背景……)以及该元素的状态(活动、非活动、成功……)。

    请参阅此处的命名法和一些示例:

    语义颜色结构和示例

    这意味着来自基础调色板的颜色可以用于多种语义颜色:

    这就是我们根据这个新原则重新调整颜色命名的方式:

    我们通过设计师和开发进行了内部用户测试,以确定命名语义颜色的最佳方式。

    我们尝试了很多不同的命名方法,发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护,同时在命名方面有足够的延展性。

    语义颜色的好处 1)语义色彩嵌入设计原则

    语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测,因为视觉语言直接传达了设计决策。

    例如:在这里,颜色命名使设计师更容易做出正确的选择。在我们的原则中, *Accent* state 用于交互元素。

    2)解锁黑暗模式

    语义颜色可以适应不同的主题。语义颜色的名称始终相同,但它的外观可能会根据所选模式而改变。例如,语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式,将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者,因为它将使它更加面向未来。

    明暗模式下的语义颜色 Primary.Background

    3)语义颜色高效灵活

    如果我们将来要更新颜色,使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。

    另一种情况可能是更新特定 UI 元素的颜色,例如按钮,而无需触摸使用紫色颜色的其他元素。在这种情况下,我们只需要更新 ButtonBackground.Primary 颜色,非常简单。

    如果没有该系统,更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。

    4)颜色组合指南

    这个系统似乎很容易使用,但设计师仍然有一些问题:

    我什么时候可以使用正常文字颜色? 我什么时候可以使用次级文本颜色? 我什么时候可以使用可交互颜色? 为了帮助设计师选择颜色,我们创建了一个交互式指南,列出了所有可能的颜色组合。

    我们在 figma 原型中创建了这个指导原则,每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合,以最大限度地保持一致性。

    Figma 中内置的语义色彩交互指南

    结果 采用这种新的颜色系统产生了一些变化:

    1)我们从“Foundation”库中提取颜色,并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到  Dark 模式。这也使库更轻且更易于维护。

    2)语义颜色已在我们的 iOS 和 Android 应用程序上成功实现,我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。

    总结 总结下今天学到的内容:

    1)发现并准确描述团队在使用颜色时遇到的问题

    2)如何从提出设想,到以新的方式来定义颜色

    3)如何通过语义化颜色来使得大家更方便的使用颜色,我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理,这样团队协作才会更加高效。

    超详细!凤凰新闻「暗黑模式适配落地」全方位复盘 凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配,本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。

    阅读文章 >

    欢迎关注作者的微信公众号:「彩云译设计」

  • 9个超实用的PS小技巧,看完就能用上!

    UI交互 2022-05-04
    Hello,各位宝贝大家好,我是你们好久不见的小肥肥~ 我又来给大家讲一下稀奇古怪(但有用)的小技巧了,觉得有用请用力的夸夸我。 1. 调整产...

    Hello,各位宝贝大家好,我是你们好久不见的小肥肥~

    我又来给大家讲一下稀奇古怪(但有用)的小技巧了,觉得有用请用力的夸夸我。

    1. 调整产品透视,让它更自然与环境融合 有时候我们需要将一个物体 P 在画面中,让他看起来浑天天成,自成一体,但总是会出现这样的情况。

    这物体放进画面,透视角度完全对不上。

    那应该用什么方式来解决呢,机智的小肥肥来教你

    ①首先选中图层,点击菜单栏的「编辑-透视变形」。

    ②然后使用鼠标画出盒子三面的网格,接着点击属性栏的「变形」,然后拖拽操控点,调整到合适的透视角度。

    ③最后再给物体加一点投影,产品就可以比较自然的放在环境中啦,这就是透视变形的妙用。

    2. 快速制作墙面转折投影 上文提到的透视变形,除了修改透视,其实还可以用来做投影

    当我们在制作产品展示场景时,可能需要给产品添加投影。如果产品后面有墙面,就一定要注意了。很多同学都是这样的投影,这是完全错误的做法。

    正确的做法如下

    ①先将产品图层复制,鼠标右键「栅格化」,再点击锁定透明像素,然后吸取背景深色,「Alt+Deldet」填充做投影。

    ②将投影放到产品层下方,点击「编辑」-「透视变形」。分桌面与墙面部分拉出两个框。

    ③点击属性栏的「变形」,然后拖拽锚点,做出投影的转折感并回车。

    ④将投影图层模式改为「正片叠底」,并使用「滤镜」-「模糊画廊」-「光圈模糊」为投影添加虚实变化。

    ⑤最后将投影尾部用橡皮擦稍微擦淡一些,我们的投影就完成啦!

    3. 一键替换天空 在户外拍照时,如果天公不作美,可能会拍出不合心意的天空照片。但是没关系,前期不够,后期来凑,在 PS 2021 的版本中,有一个非常简单的功能,可以让你一键更换掉照片中的天空。

    打开 PS,导入照片。

    选择图层,点击「菜单栏」里的「编辑」-「天空替换」。在弹出来的选项卡里,可以选择天空的类型,有「蓝天」、「盛景」和「日落」。

    选择好之后,还可以调整「亮度」、「色温」、「光照」、「颜色」等效果,让天空和前景更贴合,更真实。并且还可以用鼠标在画面中拖动天空的位置哦。

    4.「禁止套娃」迭代照片

    上图的这个「套娃」效果是不是很有趣?教你一分钟就搞定它!

    首先选择一张合适的图片,一般用相机、手机、或者画册图会比较合适,导入 PS 后,按「Ctrl+J」复制一次图层。

    接着,选中复制好的图层,按「Ctrl+T」,调整大小和旋转方向。

    然后隐藏掉新图层,回到之前的图层,用「钢笔工具」或者「选框工具」给相机中间区域制作选区。

    再次回到复制图层,取消隐藏后,点击「图层面板」最下方的「新建蒙版」,为它添加蒙版。

    最后,按「Ctrl+Shift+Alt+T」重复上一步的变换操作。这样,套娃效果就制作出了。

    5. 调整文字对齐 当我们的文本中有双引号等符号时,就算点文字居中对齐,文字看着也是错乱的。

    这时,我们可以点击「段落-设置-罗马式溢出标点」。这样文字就可以完全对齐啦。

    6. 给产品做自然高级的阴影,看起来更真实 怎么给产品加上自然高级的阴影呢?

    你只需要画一个和素材差不多大小的黑色矩形,放置在素材后面(闹钟),然后使用「滤镜」-「移轴模糊」,微调数值,看见出现一点阴影,就可以啦。

    7. 给人物添加更自然的口红 你是怎么给人物图片加口红的呢,是这样直接画笔涂红然后降低透明度吗?达咩!!

    这里教你更自然的口红做法,首先将口红的图层改为「正片叠底」。

    但嘴巴的高光没有了,显得整体非常假。我们双击图层进入「混合选项」,然后按住 Alt 将下图层右边的色标向左拉,让下图层的高光泛上来。

    这样就可以最大程度的保留嘴唇的纹理感,加上自然的口红啦,我们来看一下对比。

    8. 快速调整段落字间距与行距 在编排大段落文本时,Ctrl+A 全选文字,按住 Alt+方向键,既可以快速调整字间距与行间距

    9. 制作梦幻的丁达尔光效 如果让画面氛围感拉爆呢,有一个手法就是添加丁达尔光效,俗称耶稣光。只需要按「Ctrl+Alt+2」调出画面高光选区,然后「Ctrl+J」复制出来。

    接着「Ctrl+D」取消选区,使用「滤镜-模糊-径向模糊」,调整好模糊类型和参数,以及中心的位置。就可以制作出一点光线的效果。

    但是这个效果还不够强烈,我们可以按 「Ctrl+Alt+F」 重复上一步滤镜,将滤镜重复几次,就可以得到非常神奇梦幻的丁达尔光效。如果觉得光效不够强烈,可以复制图层并将模式改为「颜色减淡」。

    文章到此就结束啦!一定要边看边动手操作下,你才能真正掌握。每个软件有太多功能,软件大神也未必全掌握。想学入门设计,最重要的是掌握设计的基础原理,学会提起作品规律参考借鉴,综合运用理论知识构建画面哦。

    如果你想学 PS AI AE,系统设计入门和设计原理,这里推荐一下我正在讲课的「 优设 设计师 就业衔接班」,带你一次掌握 10 种以上设计类型,比如海报设计、图标合适、矢量插画、电商合成、动效 MG。

    而且上手快,零基础和一定基础都能学会!按照行业标准训练,帮你掌握职场加薪技能,甚至直接拿着毕业作品面试!

    复制id添加咨询师微信,立即抢占名额「大胖:uisdc2」「国庆:uisdc3」​​​​

    PS宝藏级小众样机插件,内附超多福利! 好久不见,我又回来了,今天给大家带来一个宝藏级的 PS 插件:烤漆质感插件。

    阅读文章 >

  • 9个超实用的PS小技巧,看完就能用上!

    UI交互 2022-05-04
    Hello,各位宝贝大家好,我是你们好久不见的小肥肥~ 我又来给大家讲一下稀奇古怪(但有用)的小技巧了,觉得有用请用力的夸夸我。 1. 调整产...

    Hello,各位宝贝大家好,我是你们好久不见的小肥肥~

    我又来给大家讲一下稀奇古怪(但有用)的小技巧了,觉得有用请用力的夸夸我。

    1. 调整产品透视,让它更自然与环境融合 有时候我们需要将一个物体 P 在画面中,让他看起来浑天天成,自成一体,但总是会出现这样的情况。

    这物体放进画面,透视角度完全对不上。

    那应该用什么方式来解决呢,机智的小肥肥来教你

    ①首先选中图层,点击菜单栏的「编辑-透视变形」。

    ②然后使用鼠标画出盒子三面的网格,接着点击属性栏的「变形」,然后拖拽操控点,调整到合适的透视角度。

    ③最后再给物体加一点投影,产品就可以比较自然的放在环境中啦,这就是透视变形的妙用。

    2. 快速制作墙面转折投影 上文提到的透视变形,除了修改透视,其实还可以用来做投影

    当我们在制作产品展示场景时,可能需要给产品添加投影。如果产品后面有墙面,就一定要注意了。很多同学都是这样的投影,这是完全错误的做法。

    正确的做法如下

    ①先将产品图层复制,鼠标右键「栅格化」,再点击锁定透明像素,然后吸取背景深色,「Alt+Deldet」填充做投影。

    ②将投影放到产品层下方,点击「编辑」-「透视变形」。分桌面与墙面部分拉出两个框。

    ③点击属性栏的「变形」,然后拖拽锚点,做出投影的转折感并回车。

    ④将投影图层模式改为「正片叠底」,并使用「滤镜」-「模糊画廊」-「光圈模糊」为投影添加虚实变化。

    ⑤最后将投影尾部用橡皮擦稍微擦淡一些,我们的投影就完成啦!

    3. 一键替换天空 在户外拍照时,如果天公不作美,可能会拍出不合心意的天空照片。但是没关系,前期不够,后期来凑,在 PS 2021 的版本中,有一个非常简单的功能,可以让你一键更换掉照片中的天空。

    打开 PS,导入照片。

    选择图层,点击「菜单栏」里的「编辑」-「天空替换」。在弹出来的选项卡里,可以选择天空的类型,有「蓝天」、「盛景」和「日落」。

    选择好之后,还可以调整「亮度」、「色温」、「光照」、「颜色」等效果,让天空和前景更贴合,更真实。并且还可以用鼠标在画面中拖动天空的位置哦。

    4.「禁止套娃」迭代照片

    上图的这个「套娃」效果是不是很有趣?教你一分钟就搞定它!

    首先选择一张合适的图片,一般用相机、手机、或者画册图会比较合适,导入 PS 后,按「Ctrl+J」复制一次图层。

    接着,选中复制好的图层,按「Ctrl+T」,调整大小和旋转方向。

    然后隐藏掉新图层,回到之前的图层,用「钢笔工具」或者「选框工具」给相机中间区域制作选区。

    再次回到复制图层,取消隐藏后,点击「图层面板」最下方的「新建蒙版」,为它添加蒙版。

    最后,按「Ctrl+Shift+Alt+T」重复上一步的变换操作。这样,套娃效果就制作出了。

    5. 调整文字对齐 当我们的文本中有双引号等符号时,就算点文字居中对齐,文字看着也是错乱的。

    这时,我们可以点击「段落-设置-罗马式溢出标点」。这样文字就可以完全对齐啦。

    6. 给产品做自然高级的阴影,看起来更真实 怎么给产品加上自然高级的阴影呢?

    你只需要画一个和素材差不多大小的黑色矩形,放置在素材后面(闹钟),然后使用「滤镜」-「移轴模糊」,微调数值,看见出现一点阴影,就可以啦。

    7. 给人物添加更自然的口红 你是怎么给人物图片加口红的呢,是这样直接画笔涂红然后降低透明度吗?达咩!!

    这里教你更自然的口红做法,首先将口红的图层改为「正片叠底」。

    但嘴巴的高光没有了,显得整体非常假。我们双击图层进入「混合选项」,然后按住 Alt 将下图层右边的色标向左拉,让下图层的高光泛上来。

    这样就可以最大程度的保留嘴唇的纹理感,加上自然的口红啦,我们来看一下对比。

    8. 快速调整段落字间距与行距 在编排大段落文本时,Ctrl+A 全选文字,按住 Alt+方向键,既可以快速调整字间距与行间距

    9. 制作梦幻的丁达尔光效 如果让画面氛围感拉爆呢,有一个手法就是添加丁达尔光效,俗称耶稣光。只需要按「Ctrl+Alt+2」调出画面高光选区,然后「Ctrl+J」复制出来。

    接着「Ctrl+D」取消选区,使用「滤镜-模糊-径向模糊」,调整好模糊类型和参数,以及中心的位置。就可以制作出一点光线的效果。

    但是这个效果还不够强烈,我们可以按 「Ctrl+Alt+F」 重复上一步滤镜,将滤镜重复几次,就可以得到非常神奇梦幻的丁达尔光效。如果觉得光效不够强烈,可以复制图层并将模式改为「颜色减淡」。

    文章到此就结束啦!一定要边看边动手操作下,你才能真正掌握。每个软件有太多功能,软件大神也未必全掌握。想学入门设计,最重要的是掌握设计的基础原理,学会提起作品规律参考借鉴,综合运用理论知识构建画面哦。

    如果你想学 PS AI AE,系统设计入门和设计原理,这里推荐一下我正在讲课的「 优设 设计师 就业衔接班」,带你一次掌握 10 种以上设计类型,比如海报设计、图标合适、矢量插画、电商合成、动效 MG。

    而且上手快,零基础和一定基础都能学会!按照行业标准训练,帮你掌握职场加薪技能,甚至直接拿着毕业作品面试!

    复制id添加咨询师微信,立即抢占名额「大胖:uisdc2」「国庆:uisdc3」​​​​

    PS宝藏级小众样机插件,内附超多福利! 好久不见,我又回来了,今天给大家带来一个宝藏级的 PS 插件:烤漆质感插件。

    阅读文章 >

  • 方法+实战!4个方面帮你轻松掌握线稿练习方法

    UI交互 2022-05-03
    Hello~大家好!我是优设手绘班的讲师-橙子(全平台ID@啤酒味的橙子酱) 对于刚入门绘画的萌新同学,开笔第一步:画线稿,就是一个万年难题。常因为...

    Hello~大家好!我是优设手绘班的讲师-橙子(全平台ID @啤酒味的橙子酱 )

    对于刚入门绘画的萌新同学,开笔第一步:画线稿,就是一个万年难题。常因为画线稿慢、反复画线稿等问题,没有更多精力去学其他绘画知识,而感到心有余而力不足。

    今天我来分享一些练线稿的小技巧、临摹的观察方法,以及结合小案例给大家演示线稿的绘制过程。

    线条的重要性 线稿是所有风格的第一步,无论是什么画风,都需要干净又漂亮的线稿。比如目前热门的描边类插画和国潮插画,具有美感的线条能够让画面呈现出非常好的效果。

    以下所有的案例,都是在线稿的基础上,进行了上色的细化。

    1. 描边类型插画:

    2. 个人小周边:

    3. 国潮插画:

    4. 表情包的绘制,也保留了基础的线稿:

    练线条的方法 接下来,分享练线条的方法和技巧,帮助大家整理练习的思路。

    1. 调整画线的习惯 很多同学画不好线条,可能是绘画习惯的问题,比如拿笔的方式,发力的方式等。下面整理一些练习中常出错的地方,大家可以对比看看自己有没有这些问题。

    ① 握笔的手太用力

    画线条的第一步:要学会正确的姿势,这样才能更顺滑的画出好看的线条。握笔太用力会导致线条非常的僵硬,而且画久了手也会非常累。这里大家需要注意放松手腕,用手腕带动画笔运动,也就是以手腕为支撑点,或者也可以以手肘为支撑点,而不是整个手臂发力。

    ② 反复描线条

    如果在草稿的找形阶段,我们可以反复的描线条帮助我们定位,但是在最后想画出干净完整的线稿,必须改掉反复描线的坏习惯,用下面这个案例,给大家讲一下草稿与完整线稿的差别。

    详细对比看看:

    通过上面的案例,我们会发现在草稿阶段的线条会出现重叠的痕迹,因为我们在利用眼睛找形的时候,会留下的一些反复确定线条位置的痕迹。而在线稿阶段,因为要保留线稿的状态,所以我们需要整理线条,所有的线条要干净利落,不可以出现反复描的痕迹。

    ③ 出笔速度太慢

    画线条的时候如果画线条的速度太慢,一定会导致线条歪歪扭扭,相反如果我们快速出笔,因为一定的缓冲力反而会让线条更加顺畅。

    2. 基础线条练习方法 ① 直线的练习方法

    直线是最常见的一种线条,一般情况我们可以在 PS 当中运用笔刷,结合 Shift 快速的画出直线,但是难免线条会比较的呆板,这里给大家提供一个简单的绘制直线的练习方法:在固定的区域内尝试绘制不同角度的线条,比如横线、竖线、斜线。

    在做直线练习的时候,注意线条与线条之间的间距,保持力度均匀,锻炼手稳。如果画错不要用橡皮工具,画完一个再另起一个格子重新练习,这样是为了看到自己进步的过程,刚开始练肯定会出现歪歪扭扭的情况,对于初学者来说都是非常正常的,只要多练都可以让手产生肌肉记忆。

    除了直线,也可以练习曲线:

    下面给大家提供一个空白的表格方便大家进行练习:

    ② 连线的练习方法

    除了常规的直接画线条以外,也可以随意的画出一些不规则的点,能增加练线的趣味性。

    具体方法如下图:

    相同的点状分布也可以画出不同的线条走势,大家可以根据自己的感觉来练。

    临摹线稿的方法 临摹学习也是初学者常用的练习方法,但是往往因为抓形不准,导致最后画出来的效果和原图差别太大。这时候可以运用以下几个方法结合观察,帮助我们把造型画得更加准确。

    1. 找参照点

    找参照点的方式类似画格子,但是不建议大家直接使用过多 PS 的标尺,比如这样:

    注意:不建议长时间使用这个方法,容易对工具产生依赖性。

    我们需要学会的是用眼睛观察,在心里画格子。前期练习做不到用眼睛观察,可以少量的拉一些线条帮助观察,参考线可以放在一些有具体区域的位置,比如用来大概确定头部的高度,切记不可用太多哦。

    2. 运用负空间检查造型

    什么是负空间呢,这里直接看一张图片就可以理解:

    以上案例黑色区域为负空间,除了大块的正负,里面的细节也可以分出详细的正负空间。

    理解什么是负空间之后,就可以利用负空间来检查形准了,一般画出线稿之后,可以检查负空间的面积,或者是线稿产生的角度,以此对比和原图之间的差异。

    这里我们可以先看线稿部分和临摹原图的造型对比,会发现好像没什么大问题。

    接下来检查负空间:通过左右两张图的红色区域(负空间)对比,就会发现右侧没有画正确的地方。

    3. 几何形概括

    大部分的插画都可以用基础的几何形归纳,基础的几何形分为:圆形、三角形、方形。运用几何形归纳相当于帮助我们简化造型,同时检查线稿存在的问题。

    根据原图可以分析出画面的几何形,在绘制线稿的时候,注意找一些几何形,帮助我们分析提炼造型。

    插画线稿绘制过程演示 第一个小案例用植物来演示过程。

    动笔之前可以先分析一下:照片中的花能用什么几何形来概括,也可以画一下负形的轮廓,方便后期画完线稿,检查自己的形准。

    当然负形也是可以用眼睛对比观察,刚刚开始会有难度,多多练习就可以用眼睛找准位置了。

    分析完之后,可以开始用铅笔画出大型,注意这个时候多用弧线、长线,帮助我们找形。

    画好粗略的草稿之后,就可以整理更干净的草稿了,在画最后草稿的时候,可以根据最终想要的风格选择笔刷,这里我依旧用的还是铅笔笔刷,画的时候注意花瓣的穿插关系。

    第二个案例运用国潮锦鲤演示过程。

    国潮小案例可以在照片的基础上做一些改动,比如加入一些细节或者夸张,锦鲤的鱼鳍和尾巴可以夸张画得更大,体现出流动感,身体的弯曲角度也可以更加明显,借鉴照片的时候,大家只需要借鉴大概的动作就可以了。

    草稿阶段依旧使用铅笔笔刷画出大型,注意线条多用长线概括形体。

    画出大型后就可以新建图层开始整理线稿了,因为国潮的最终效果需要保留线稿,这里使用「硬边圆笔刷」勾出线稿,需要注意线条干净利落,注意线条之间的衔接。画完最终线稿之后,如果想处理材质效果,可以加上金箔的质感,提升完成度。

    文章到此就结束啦!

    画线是每个绘画者的基本功,希望大家在空闲时间,能够拿出手中的纸笔,或打开iPad、PS 练一下,争取减少画线精力,去学人体结构、配色方法等绘画系统知识,让自己的画技更上一层楼!

    如果你觉得自学摸索困难,耗费了太多时间精力,也没能系统掌握画画技能。可以来参加「优设手绘就业衔接班」。我们教你掌握大厂非常欢迎的插画风格,人物、场景、配色、商稿流程都有! 而且上手快,无需 手绘 板,零基础也能学,Mac/Win/iPad 都能学!

    更多手绘班的详情,请添加我同事 V 信 uisdc2 或 uisdc3

    7 个常用手绘技巧!每个都能让效率翻倍! Hello~大家好,我们是优设手绘就业衔接班的讲师橙子和阿森 今天我们俩来分享一些画画小技巧,看起来好像挺简单,但是学会就能节约大把时间哦!

    阅读文章 >

  • 方法+实战!4个方面帮你轻松掌握线稿练习方法

    UI交互 2022-05-03
    Hello~大家好!我是优设手绘班的讲师-橙子(全平台ID@啤酒味的橙子酱) 对于刚入门绘画的萌新同学,开笔第一步:画线稿,就是一个万年难题。常因为...

    Hello~大家好!我是优设手绘班的讲师-橙子(全平台ID @啤酒味的橙子酱 )

    对于刚入门绘画的萌新同学,开笔第一步:画线稿,就是一个万年难题。常因为画线稿慢、反复画线稿等问题,没有更多精力去学其他绘画知识,而感到心有余而力不足。

    今天我来分享一些练线稿的小技巧、临摹的观察方法,以及结合小案例给大家演示线稿的绘制过程。

    线条的重要性 线稿是所有风格的第一步,无论是什么画风,都需要干净又漂亮的线稿。比如目前热门的描边类插画和国潮插画,具有美感的线条能够让画面呈现出非常好的效果。

    以下所有的案例,都是在线稿的基础上,进行了上色的细化。

    1. 描边类型插画:

    2. 个人小周边:

    3. 国潮插画:

    4. 表情包的绘制,也保留了基础的线稿:

    练线条的方法 接下来,分享练线条的方法和技巧,帮助大家整理练习的思路。

    1. 调整画线的习惯 很多同学画不好线条,可能是绘画习惯的问题,比如拿笔的方式,发力的方式等。下面整理一些练习中常出错的地方,大家可以对比看看自己有没有这些问题。

    ① 握笔的手太用力

    画线条的第一步:要学会正确的姿势,这样才能更顺滑的画出好看的线条。握笔太用力会导致线条非常的僵硬,而且画久了手也会非常累。这里大家需要注意放松手腕,用手腕带动画笔运动,也就是以手腕为支撑点,或者也可以以手肘为支撑点,而不是整个手臂发力。

    ② 反复描线条

    如果在草稿的找形阶段,我们可以反复的描线条帮助我们定位,但是在最后想画出干净完整的线稿,必须改掉反复描线的坏习惯,用下面这个案例,给大家讲一下草稿与完整线稿的差别。

    详细对比看看:

    通过上面的案例,我们会发现在草稿阶段的线条会出现重叠的痕迹,因为我们在利用眼睛找形的时候,会留下的一些反复确定线条位置的痕迹。而在线稿阶段,因为要保留线稿的状态,所以我们需要整理线条,所有的线条要干净利落,不可以出现反复描的痕迹。

    ③ 出笔速度太慢

    画线条的时候如果画线条的速度太慢,一定会导致线条歪歪扭扭,相反如果我们快速出笔,因为一定的缓冲力反而会让线条更加顺畅。

    2. 基础线条练习方法 ① 直线的练习方法

    直线是最常见的一种线条,一般情况我们可以在 PS 当中运用笔刷,结合 Shift 快速的画出直线,但是难免线条会比较的呆板,这里给大家提供一个简单的绘制直线的练习方法:在固定的区域内尝试绘制不同角度的线条,比如横线、竖线、斜线。

    在做直线练习的时候,注意线条与线条之间的间距,保持力度均匀,锻炼手稳。如果画错不要用橡皮工具,画完一个再另起一个格子重新练习,这样是为了看到自己进步的过程,刚开始练肯定会出现歪歪扭扭的情况,对于初学者来说都是非常正常的,只要多练都可以让手产生肌肉记忆。

    除了直线,也可以练习曲线:

    下面给大家提供一个空白的表格方便大家进行练习:

    ② 连线的练习方法

    除了常规的直接画线条以外,也可以随意的画出一些不规则的点,能增加练线的趣味性。

    具体方法如下图:

    相同的点状分布也可以画出不同的线条走势,大家可以根据自己的感觉来练。

    临摹线稿的方法 临摹学习也是初学者常用的练习方法,但是往往因为抓形不准,导致最后画出来的效果和原图差别太大。这时候可以运用以下几个方法结合观察,帮助我们把造型画得更加准确。

    1. 找参照点

    找参照点的方式类似画格子,但是不建议大家直接使用过多 PS 的标尺,比如这样:

    注意:不建议长时间使用这个方法,容易对工具产生依赖性。

    我们需要学会的是用眼睛观察,在心里画格子。前期练习做不到用眼睛观察,可以少量的拉一些线条帮助观察,参考线可以放在一些有具体区域的位置,比如用来大概确定头部的高度,切记不可用太多哦。

    2. 运用负空间检查造型

    什么是负空间呢,这里直接看一张图片就可以理解:

    以上案例黑色区域为负空间,除了大块的正负,里面的细节也可以分出详细的正负空间。

    理解什么是负空间之后,就可以利用负空间来检查形准了,一般画出线稿之后,可以检查负空间的面积,或者是线稿产生的角度,以此对比和原图之间的差异。

    这里我们可以先看线稿部分和临摹原图的造型对比,会发现好像没什么大问题。

    接下来检查负空间:通过左右两张图的红色区域(负空间)对比,就会发现右侧没有画正确的地方。

    3. 几何形概括

    大部分的插画都可以用基础的几何形归纳,基础的几何形分为:圆形、三角形、方形。运用几何形归纳相当于帮助我们简化造型,同时检查线稿存在的问题。

    根据原图可以分析出画面的几何形,在绘制线稿的时候,注意找一些几何形,帮助我们分析提炼造型。

    插画线稿绘制过程演示 第一个小案例用植物来演示过程。

    动笔之前可以先分析一下:照片中的花能用什么几何形来概括,也可以画一下负形的轮廓,方便后期画完线稿,检查自己的形准。

    当然负形也是可以用眼睛对比观察,刚刚开始会有难度,多多练习就可以用眼睛找准位置了。

    分析完之后,可以开始用铅笔画出大型,注意这个时候多用弧线、长线,帮助我们找形。

    画好粗略的草稿之后,就可以整理更干净的草稿了,在画最后草稿的时候,可以根据最终想要的风格选择笔刷,这里我依旧用的还是铅笔笔刷,画的时候注意花瓣的穿插关系。

    第二个案例运用国潮锦鲤演示过程。

    国潮小案例可以在照片的基础上做一些改动,比如加入一些细节或者夸张,锦鲤的鱼鳍和尾巴可以夸张画得更大,体现出流动感,身体的弯曲角度也可以更加明显,借鉴照片的时候,大家只需要借鉴大概的动作就可以了。

    草稿阶段依旧使用铅笔笔刷画出大型,注意线条多用长线概括形体。

    画出大型后就可以新建图层开始整理线稿了,因为国潮的最终效果需要保留线稿,这里使用「硬边圆笔刷」勾出线稿,需要注意线条干净利落,注意线条之间的衔接。画完最终线稿之后,如果想处理材质效果,可以加上金箔的质感,提升完成度。

    文章到此就结束啦!

    画线是每个绘画者的基本功,希望大家在空闲时间,能够拿出手中的纸笔,或打开iPad、PS 练一下,争取减少画线精力,去学人体结构、配色方法等绘画系统知识,让自己的画技更上一层楼!

    如果你觉得自学摸索困难,耗费了太多时间精力,也没能系统掌握画画技能。可以来参加「优设手绘就业衔接班」。我们教你掌握大厂非常欢迎的插画风格,人物、场景、配色、商稿流程都有! 而且上手快,无需 手绘 板,零基础也能学,Mac/Win/iPad 都能学!

    更多手绘班的详情,请添加我同事 V 信 uisdc2 或 uisdc3

    7 个常用手绘技巧!每个都能让效率翻倍! Hello~大家好,我们是优设手绘就业衔接班的讲师橙子和阿森 今天我们俩来分享一些画画小技巧,看起来好像挺简单,但是学会就能节约大把时间哦!

    阅读文章 >

  • 为什么你的数据越来越好,用户越骂越狠?

    UI交互 2022-05-02
    自 KPI、OKR、AB 实验等理念流入互联网后,长期以来业内的行事准则都是“数据导向”,想必日常工作中你也经常被产品规劝“哎呀~这样做数据一定会好的,不...

    自 KPI、OKR、AB 实验等理念流入互联网后,长期以来业内的行事准则都是“数据导向”,想必日常工作中你也经常被产品规劝“哎呀~这样做数据一定会好的,不要在乎这些体验细节”,或者你也有过试图说服产品“体验好的话数据就会好呀”,但往往有些时候在项目规划和设计阶段自信满满地认为可以带来数据收益的项目,上线后却不理想,这是为什么呢?本期,我们来说一说项目上线后数据复盘和体感差异的原因。

    我们先厘清几个概念,体验好、口碑好和数据好。在这里我们暂且先定义「体验好」为项目执行者认为的好体验,诸如减少一步操作、更容易获取关键信息等业内理论上认为的体验好;「口碑好」是项目实际上线后用户的正向反馈;「数据好」是项目上线后观测指标达到或超出预期。如果照这么理解的话,我们通常的思路是「体验好」带来「口碑好」,「体验好」和「口碑好」共同带来「数据好」。

    接下来我们通过几个案例来详细讲讲实际发生的,不符合模型的情况

    口碑差,数据好 写这个议题的时候,首先映入脑海中案例就是 19 年订阅号的一次改版,改版的主要优化点是把原先进入时为账号列表改为进入文章信息流,如下图所示:

    从产品设计思路上来讲,用户进入是来消费文章的,原方案用户需要先选账号(文章来源),再选择想要阅读的文章,改版后直接把文章呈现在用户面前,属于设计思路中常见的“减少一步”带来的“体验优化”。然而项目上线后却遭到用户的强烈不满,用户意见诸如:“越改越乱”、“我现在都不知道哪些公众号有多少条消息没看”、“逼着我取消了好几个公众号”,当然,其中也不乏一些赞美之词,但不习惯/不喜欢/体验差的声量还是占据了反馈的绝大部分。在这样的骂声中产品还是坚持这样的方案,想必数据应该给了产品相当大的正向反馈。这是一个理论上体验好,实际上口碑差但数据好的案例。

    我们将用户反馈进行一些归类处理,就能发现这次数据复盘与体感差异不符的原因。负反馈的用户大多是有深度阅读习惯的用户,习惯是先寻找今日想钻研的领域(对应某个账号),然后一次性地认真阅读吸收文章,改版后对这类用户来说,首页的劣质内容抢占了太多视线,导致寻找合意的文章变得困难。

    假设一下你是一个历史系的学生,你每天会去学校图书馆里的历史区阅读相关书籍,但你也喜欢看杂志和小说,历史书读累了偶尔也会逛逛其他图书区。现在图书馆突然跟你说,反正你来这里都是看书的,我发现你会看历史书、杂志和小说,我把所有的杂志小说都和历史书混在一起给你,省的你在这些区里走来走去的,你会因为图书馆让你少走了几步而感谢它吗?显然不会,这样你每天读书之前就得先把历史书筛选出来,而筛选历史书的成本远比多走几步路的成本大得多。

    当然,肯定不是所有人去图书馆都是去读专业书的,也不是所有使用该功能的用户都有深度消费习惯,但是用户对功能的依赖程度不同,导致用户愿意为功能发声的意愿也不同,当深度用户的体验折损远远大于非深度用户的体验升级,带来的必然是负反馈强势碾压正反馈。

    而为什么数据会好呢?深度文章的生产和消费成本远远大于非深度文章(成本可以理解为需要付出的时间&需要掌握的知识储备),原来先找账号后找文章的方式,用户会主动去寻找深度文章来阅读,而现在是非深度文章占据了首页百分七八十的版面,假设你每天花 100 分钟阅读,阅读一篇深度文章需要 25 分钟,阅读一篇非深度文章需要 5 分钟,那么改版前你每天可以阅读 4 篇文章,改版后你每天可以阅读 20 篇文章,数据这不就上去了?

    再举例假设,全校 1000 个学生,只有 50 个学生每天泡馆,200 个学生经常去,其他学生比较少只看一类书,甚至有的同学不爱看专业书,觉得去图书馆麻烦就不常去。但是图书馆改版后,所有书你随便抓一本就可以开始看,50 个每天泡馆的学生不爱去了,200 个经常去的学生里 100 也不爱去 100 个觉得差不多,但是剩下 750 个学生里有 600 开始抽空去图书馆看一看了,这图书馆的生意不也好起来了。

    体验好,数据差 我在几年前做过一款国外产品,针对的是非发达国家地区的摩的市场,可以简单理解为国外打摩的软件,用户在软件上呼叫摩的后,摩的师傅来接送你,你需要在软件上输入摩的师傅的号码完成旅程并付款。简单流程示意如下图。

    当时二维码已经在国内盛行起来了,国内用户已经习惯了使用二维码做任何事,包括付款。我们认为使用二维码会比输入一串数字来说更简便,体验更好,所以决定把输入「摩的的编码」这一步优化为「扫描摩的上的二维码」,并向摩的师傅们发放了专属的二维码贴纸。我们自信满满,觉得这样的优化一定能够带来 用户体验 的升级,拉新促活不在话下。然而结果却背道而驰,改版后平台成单量显著下降了。我们不得已做了一次当地用户调研和访谈。

    原来,因为当地经济情况和技术水平都较落后,二维码对当地人来说十分陌生,人们很难下决定通过这样陌生又迅速的行为去执行付款操作。用户对二维码表现出的强烈不安全、不信任感直接影响了用户放弃成单付费。相反,输入数字串(俗称 PIN 码)虽然流程相对繁琐,但对于付款这种慎重的行为,恰好留足了时间做思考和决定。

    与此相似的案例在国内产品上我又碰到了一次,这次是开设房间时需要对房间设置权限,起初我们的版本是作为选择项,用户开房时可以选择所有人可加入或者只有朋友能加入。有一次,我们觉得这样的设计似乎有些繁琐,只需要一个权限开关就可以了,打开开关就是仅朋友能加入,关闭开关就是所有人都可以加入(这层含义较隐晦,需要用户额外去思考和理解),我们又一次自信满满地上线了。结果又一次与预期背道而驰。

    第一个例子与第二个例子有一个相似之处,是对用户来说,这都是一个“谨慎的操作”,对于“谨慎的操作”,传统理论上那些「体验好」的方法(更快一点,更简单一点)不太受用,这些「体验好」的设计仅仅只是从行动上帮用户减少了一两步,却没办法帮助用户减少执行行动前的思考。举个例子,你本来需要亲自开飞机空投炸弹,优化到你只需要按一个按钮就可以发射炸弹,对你投炸弹这个行为的影响大吗?不大,因为「要不要投炸弹」在行动前的思考远远复杂于「投炸弹」这个行为。反而可能因为我们有时间在飞机上了解清楚“炸弹”,而没办法在按钮上对“炸弹”有理解,而导致面对着按钮犹犹豫豫,最终放弃。对于复杂且谨慎的行为,设计清楚(帮助用户在思考节省时间)远比设计简单(行动简单了但思考不会简单)来得更重要。

    体验不好,数据好 “我在这里放个按钮/入口!”

    “这里不符合使用场景呀。”

    “我知道,但这里流量大(os:我需要流量把我的功能戴起来)”

    “……”

    “按钮/入口要设计得大一点,再大一点,颜色要鲜艳的,最好是大红色,能来点动效就更棒了”

    不知道这样的对话大家熟不熟悉,我早期的职业生涯中经常能遇到这样的项目需求。但往往这样又大又红的设计还总能拿到很好的数据供人吹嘘,明明用过的人都觉得这样的设计体验很不好,为什么却在数据的驱使下越来越猖狂呢?

    以上图的例子做展开,在这样的需求下,我们可能会被迫做出这样的设计:

    上线后,项目负责人发了一封邮件:需求上线后「算命」功能使用 pv/uv 上涨显著,证明这是一个合理的需求,非常好的设计,我们要朝着这个方向持续优化!

    但你真的觉得这是一个合理的需求、好的设计吗?

    这就是典型的把数据当目标,以片面下结论的情况。

    首先我们必须明确一点,做需求做设计都是为了更好的体验或服务新的产品阶段,数据只是辅助我们判断有没有达成目标的工具,切莫盲目服务数据。其次,在做需求做设计的时候应有全局观。就以上述所举例子展开,需求的目标应该是在用户想算命的场景提供算命服务,如果我们判断消息页是用户想要算命的场景,那么我们上线后观测的数据除了算命功能的 pv/uv,还需要补充退出率,以及顶部新增算命入口后,对聊天页的折损数据(聊天 pv/uv,收发消息数…),把这些考虑进去我们很可能得到不一样的数据结论:

    看完真实的复盘后,首先应该能判断消息页不是用户想算命的场景,此时如果你的产品策略不是把这个软件转型成算命软件就可以下掉这里的入口了;如果你正要转型算命软件,非常需要消息页来带量,那么你也能看出来在这里加入口对聊天体验的折损有多大,此时你就得思考一下,「带起来的量」值不值得聊天功能「折损的体验」?

    如果不值得,你也可以开始考虑换种方式带量了;如果值得,那继续做大做强就没什么问题了,祝福这个产品成为算命一霸。

    总结 项目上线后数据复盘与体验有差异是很常见的,包括但不限于上面所述案例表现出来的原因。总之,还是要牢记数据是工具,不是目标,如果发现数据复盘结果与预期有不符,可以尝试:给用户分层,更细致化地分析用户行为;通过用户调研了解用户真正的使用场景和流程,真正帮用户解决难点而不是“伪体验好”;以及,用更全面的视角、结合更多信息来看待项目是否达成目标。“数据说谎”的现象还有很多,将来再继续讨论。

    产品用户体验很好可是数据不佳,问题出在哪里? 编者按:这篇文章来自 Any.do 的设计师,分享了一些关于 UX设计和产品升级开发的故事。

    阅读文章 >

    欢迎关注作者微信公众号:「白话说交互」

  • 为什么你的数据越来越好,用户越骂越狠?

    UI交互 2022-05-02
    自 KPI、OKR、AB 实验等理念流入互联网后,长期以来业内的行事准则都是“数据导向”,想必日常工作中你也经常被产品规劝“哎呀~这样做数据一定会好的,不...

    自 KPI、OKR、AB 实验等理念流入互联网后,长期以来业内的行事准则都是“数据导向”,想必日常工作中你也经常被产品规劝“哎呀~这样做数据一定会好的,不要在乎这些体验细节”,或者你也有过试图说服产品“体验好的话数据就会好呀”,但往往有些时候在项目规划和设计阶段自信满满地认为可以带来数据收益的项目,上线后却不理想,这是为什么呢?本期,我们来说一说项目上线后数据复盘和体感差异的原因。

    我们先厘清几个概念,体验好、口碑好和数据好。在这里我们暂且先定义「体验好」为项目执行者认为的好体验,诸如减少一步操作、更容易获取关键信息等业内理论上认为的体验好;「口碑好」是项目实际上线后用户的正向反馈;「数据好」是项目上线后观测指标达到或超出预期。如果照这么理解的话,我们通常的思路是「体验好」带来「口碑好」,「体验好」和「口碑好」共同带来「数据好」。

    接下来我们通过几个案例来详细讲讲实际发生的,不符合模型的情况

    口碑差,数据好 写这个议题的时候,首先映入脑海中案例就是 19 年订阅号的一次改版,改版的主要优化点是把原先进入时为账号列表改为进入文章信息流,如下图所示:

    从产品设计思路上来讲,用户进入是来消费文章的,原方案用户需要先选账号(文章来源),再选择想要阅读的文章,改版后直接把文章呈现在用户面前,属于设计思路中常见的“减少一步”带来的“体验优化”。然而项目上线后却遭到用户的强烈不满,用户意见诸如:“越改越乱”、“我现在都不知道哪些公众号有多少条消息没看”、“逼着我取消了好几个公众号”,当然,其中也不乏一些赞美之词,但不习惯/不喜欢/体验差的声量还是占据了反馈的绝大部分。在这样的骂声中产品还是坚持这样的方案,想必数据应该给了产品相当大的正向反馈。这是一个理论上体验好,实际上口碑差但数据好的案例。

    我们将用户反馈进行一些归类处理,就能发现这次数据复盘与体感差异不符的原因。负反馈的用户大多是有深度阅读习惯的用户,习惯是先寻找今日想钻研的领域(对应某个账号),然后一次性地认真阅读吸收文章,改版后对这类用户来说,首页的劣质内容抢占了太多视线,导致寻找合意的文章变得困难。

    假设一下你是一个历史系的学生,你每天会去学校图书馆里的历史区阅读相关书籍,但你也喜欢看杂志和小说,历史书读累了偶尔也会逛逛其他图书区。现在图书馆突然跟你说,反正你来这里都是看书的,我发现你会看历史书、杂志和小说,我把所有的杂志小说都和历史书混在一起给你,省的你在这些区里走来走去的,你会因为图书馆让你少走了几步而感谢它吗?显然不会,这样你每天读书之前就得先把历史书筛选出来,而筛选历史书的成本远比多走几步路的成本大得多。

    当然,肯定不是所有人去图书馆都是去读专业书的,也不是所有使用该功能的用户都有深度消费习惯,但是用户对功能的依赖程度不同,导致用户愿意为功能发声的意愿也不同,当深度用户的体验折损远远大于非深度用户的体验升级,带来的必然是负反馈强势碾压正反馈。

    而为什么数据会好呢?深度文章的生产和消费成本远远大于非深度文章(成本可以理解为需要付出的时间&需要掌握的知识储备),原来先找账号后找文章的方式,用户会主动去寻找深度文章来阅读,而现在是非深度文章占据了首页百分七八十的版面,假设你每天花 100 分钟阅读,阅读一篇深度文章需要 25 分钟,阅读一篇非深度文章需要 5 分钟,那么改版前你每天可以阅读 4 篇文章,改版后你每天可以阅读 20 篇文章,数据这不就上去了?

    再举例假设,全校 1000 个学生,只有 50 个学生每天泡馆,200 个学生经常去,其他学生比较少只看一类书,甚至有的同学不爱看专业书,觉得去图书馆麻烦就不常去。但是图书馆改版后,所有书你随便抓一本就可以开始看,50 个每天泡馆的学生不爱去了,200 个经常去的学生里 100 也不爱去 100 个觉得差不多,但是剩下 750 个学生里有 600 开始抽空去图书馆看一看了,这图书馆的生意不也好起来了。

    体验好,数据差 我在几年前做过一款国外产品,针对的是非发达国家地区的摩的市场,可以简单理解为国外打摩的软件,用户在软件上呼叫摩的后,摩的师傅来接送你,你需要在软件上输入摩的师傅的号码完成旅程并付款。简单流程示意如下图。

    当时二维码已经在国内盛行起来了,国内用户已经习惯了使用二维码做任何事,包括付款。我们认为使用二维码会比输入一串数字来说更简便,体验更好,所以决定把输入「摩的的编码」这一步优化为「扫描摩的上的二维码」,并向摩的师傅们发放了专属的二维码贴纸。我们自信满满,觉得这样的优化一定能够带来 用户体验 的升级,拉新促活不在话下。然而结果却背道而驰,改版后平台成单量显著下降了。我们不得已做了一次当地用户调研和访谈。

    原来,因为当地经济情况和技术水平都较落后,二维码对当地人来说十分陌生,人们很难下决定通过这样陌生又迅速的行为去执行付款操作。用户对二维码表现出的强烈不安全、不信任感直接影响了用户放弃成单付费。相反,输入数字串(俗称 PIN 码)虽然流程相对繁琐,但对于付款这种慎重的行为,恰好留足了时间做思考和决定。

    与此相似的案例在国内产品上我又碰到了一次,这次是开设房间时需要对房间设置权限,起初我们的版本是作为选择项,用户开房时可以选择所有人可加入或者只有朋友能加入。有一次,我们觉得这样的设计似乎有些繁琐,只需要一个权限开关就可以了,打开开关就是仅朋友能加入,关闭开关就是所有人都可以加入(这层含义较隐晦,需要用户额外去思考和理解),我们又一次自信满满地上线了。结果又一次与预期背道而驰。

    第一个例子与第二个例子有一个相似之处,是对用户来说,这都是一个“谨慎的操作”,对于“谨慎的操作”,传统理论上那些「体验好」的方法(更快一点,更简单一点)不太受用,这些「体验好」的设计仅仅只是从行动上帮用户减少了一两步,却没办法帮助用户减少执行行动前的思考。举个例子,你本来需要亲自开飞机空投炸弹,优化到你只需要按一个按钮就可以发射炸弹,对你投炸弹这个行为的影响大吗?不大,因为「要不要投炸弹」在行动前的思考远远复杂于「投炸弹」这个行为。反而可能因为我们有时间在飞机上了解清楚“炸弹”,而没办法在按钮上对“炸弹”有理解,而导致面对着按钮犹犹豫豫,最终放弃。对于复杂且谨慎的行为,设计清楚(帮助用户在思考节省时间)远比设计简单(行动简单了但思考不会简单)来得更重要。

    体验不好,数据好 “我在这里放个按钮/入口!”

    “这里不符合使用场景呀。”

    “我知道,但这里流量大(os:我需要流量把我的功能戴起来)”

    “……”

    “按钮/入口要设计得大一点,再大一点,颜色要鲜艳的,最好是大红色,能来点动效就更棒了”

    不知道这样的对话大家熟不熟悉,我早期的职业生涯中经常能遇到这样的项目需求。但往往这样又大又红的设计还总能拿到很好的数据供人吹嘘,明明用过的人都觉得这样的设计体验很不好,为什么却在数据的驱使下越来越猖狂呢?

    以上图的例子做展开,在这样的需求下,我们可能会被迫做出这样的设计:

    上线后,项目负责人发了一封邮件:需求上线后「算命」功能使用 pv/uv 上涨显著,证明这是一个合理的需求,非常好的设计,我们要朝着这个方向持续优化!

    但你真的觉得这是一个合理的需求、好的设计吗?

    这就是典型的把数据当目标,以片面下结论的情况。

    首先我们必须明确一点,做需求做设计都是为了更好的体验或服务新的产品阶段,数据只是辅助我们判断有没有达成目标的工具,切莫盲目服务数据。其次,在做需求做设计的时候应有全局观。就以上述所举例子展开,需求的目标应该是在用户想算命的场景提供算命服务,如果我们判断消息页是用户想要算命的场景,那么我们上线后观测的数据除了算命功能的 pv/uv,还需要补充退出率,以及顶部新增算命入口后,对聊天页的折损数据(聊天 pv/uv,收发消息数…),把这些考虑进去我们很可能得到不一样的数据结论:

    看完真实的复盘后,首先应该能判断消息页不是用户想算命的场景,此时如果你的产品策略不是把这个软件转型成算命软件就可以下掉这里的入口了;如果你正要转型算命软件,非常需要消息页来带量,那么你也能看出来在这里加入口对聊天体验的折损有多大,此时你就得思考一下,「带起来的量」值不值得聊天功能「折损的体验」?

    如果不值得,你也可以开始考虑换种方式带量了;如果值得,那继续做大做强就没什么问题了,祝福这个产品成为算命一霸。

    总结 项目上线后数据复盘与体验有差异是很常见的,包括但不限于上面所述案例表现出来的原因。总之,还是要牢记数据是工具,不是目标,如果发现数据复盘结果与预期有不符,可以尝试:给用户分层,更细致化地分析用户行为;通过用户调研了解用户真正的使用场景和流程,真正帮用户解决难点而不是“伪体验好”;以及,用更全面的视角、结合更多信息来看待项目是否达成目标。“数据说谎”的现象还有很多,将来再继续讨论。

    产品用户体验很好可是数据不佳,问题出在哪里? 编者按:这篇文章来自 Any.do 的设计师,分享了一些关于 UX设计和产品升级开发的故事。

    阅读文章 >

    欢迎关注作者微信公众号:「白话说交互」

  • 如何提升出海社区包容性?来看腾讯的实战案例!

    UI交互 2022-05-01
    导语 随着 trovo 社区的发展,玩家多样性也越来越明显,为了社区氛围更能体现海外文化多元包容的理念,我们展开了关于 IP 家族的思考。 ...

    导语 随着 trovo 社区的发展,玩家多样性也越来越明显,为了社区氛围更能体现海外文化多元包容的理念,我们展开了关于 IP 家族的思考。

    多方面了解行业和自身特征 1. “小世界”存在的支撑点

    通过备受关注的的英雄联盟、漫威和封神榜宇宙这些家族化的 IP 和成熟的宇宙故事里以及被人们推崇喜爱的程度来看,世界观对于电影文学和 ACG 游戏内容产业对于 IP 的成功塑造是显著的。

    而它的逻辑上的实际用途对于创作者的工作也能有效提供认知边界和创作依据。

    2. 大 IP 怎么传递自己的“小世界”

    以《星球大战》、《权力的游戏》为例,他们都构建了一套蕴含着哲学、科学原理的世界观。

    一方面赋予内容层面和视觉元素的规定情景,划好边界合理性,将用户和创作者的认知拉到同一个层面上;另一方面为内容创作者提供了合理的脑暴灵感库,有效提升内容产出的效率。

    3. Trovo 海外社区玩家环境特点

    Trovo 旨在打造全球互动内容游戏玩家社区,目前面向的地区主要有北美、拉美、欧洲地区。多样的国家,由于在语言、宗教、文化和审美都有诸多的差异。

    我们在探索一个能被海外社区用户理解并保持忠诚度的宇宙和家族角色之前,先去了解他们生活的政治、文化环境和喜好,以帮助我们更好的实现一个大同小异的科幻世界,能够映射每一个用户的身份,给予一个属于他们自己的世界。

    搭建小世界的“物理环境” 1. 提炼小世界的“三要素” — 提炼关键词

    通过以上的分析,我们对海外玩家有了进一步的了解。接下来需要总结出 trovo 宇宙中,关于历史、文化、地理的背景三要素,以帮助我们完成细节的设定。我们对 T 宇宙设定的大概轮廓,锁定在了包容性高、科技发达、发展探索,这三个关键词上:

    地理:在面对全球化的用户背景下,我们希望创造一个能对所有地区的用户来说都是可以被接纳的环境背景。

    文明:结合玩家的喜好和产品的直播社交功能,更希望这个虚拟世界的文明是拥有高度发达的科技技术的,能够让玩家自由地交流和沟通。

    历史:结合社区的发展现状,我们是一个正在快速发展中的内容平台,用户组成更偏向倒金字塔的结构,所以希望构造一个更关注中低腰部用户的发展中世界,每个人都在探索未知和发展自己的路上努力。

    2. 为小世界“添砖加瓦” — 总结框架

    我们根据三个关键词,再结合产品特色、用户感知、市场上做得好的 IP 宇宙,脑暴了一些细节词的设定去帮助我们完成框架故事的描述。

    在广阔的 Troverse 宇宙中,有无数个星球,每个玩家都拥有一个专属星球,他们各有千秋,值得被探索和发现。而玩家可以利用“传送科技”探索其他星球,分享游戏、分享快乐。

    但是这个世界并不完美,星球间的连接不够紧密,大星球的光芒常常掩盖周边的小星球。“传送科技”的连接常常不稳定,需要一种名为“Data Gems”的能量来维护直播流平台,幸运的是,它能被在每个星球上挖掘到的。据此,星球上的玩家不断探索穿梭于新的星球之间分享和探索,致力于让每个星球都能闪闪发光。

    生动化小世界,打造 IP 家族 1. IP 家族化的原因

    其实我们一开始产生做家族 IP 和宇宙的想法,是为了结合产品中的多人开播功能 Squad 去做的。这个功能中最大的特色就是“多人连线直播”,所以我们把家族名称命名为“T-squad”小队,非常有超级英雄的基因。

    在此之前,Trovo 平台已有基础品牌 IP 形象叫 Leon,它在很多方面表现非常出色,得到了许多用户的喜爱。海外用户对于性别、种族的平等是比较看重的,可惜的是 Leon 的男性知识非常明显,这让它在面对海外用户的包容性上并不是那么的全面。多元角色的包容性更高,而且在品牌价值上,成体系、家族化的集群化在力量上是更强的。

    那么问题来了?就是当我们向用户抛出这么多角色时,他要怎么记住呢?

    2. 归纳 IP 家族的个性基因

    要达到区分角色的目的,就需要传达属于角色独有的设计点,并且为他们设计特有的个性。但这些都不是凭空捏造的,要让用户认可这些角色就需要更全面的去分析。

    我们从专业性格测试、用户游戏角色类型、社区主播、观众、政治环境性别平等四个维度,划分成了角色设定的 4 个象限,从中去组合形成多元角色。

    3. 赋予 IP 家族差异化的内在表现

    如何合理的进行设定角色框架也是一个比较冗长的过程,要在保证多元化的情况下,平衡地去分配每个象限的比例,如果稍有不慎,就有陷入种族歧视、政治不正确的困境中。为了让这些角色更好的服务于产品,我们赋予每一个角色符号化的产品象征,这对后续的视觉化也比较有重要的参考意义。

    (小插曲:原本只有一名女性角色,后面受到海外同事的建议和反馈,我们新增了一名女生角色。而在角色的肤色考虑上,尽量避免刻板印象,如黑人我们原本使用的是黑色,后来改成了蓝色。)

    4. 在小世界中找到“自我”的故事

    从大部分成功的 IP 故事构成来看,发展和冲突是构建情节的必要元素。根据世界观的框架,我们花了比较多的时间对”T-Squad“小队的故事做了设定,一包括多元角色和这个世界的主故事线,二是每个角色自己的故事线。

    家族 IP 的外在差异化表现 1. 草图阶段-任由想法天马行空

    对于小队角色的构思要遵循原品牌原有的 IP 设定,变色龙作为基础形象进行二次创作。但是这个阶段不宜过早设置太多规范因素的影响,应该尽可能的发挥创作者的自由发挥能力,表达出能和设定吻合的角色外形。

    2. 平面阶段-规范化表现

    进入到 2D 设计的阶段,不能仅着眼于细节化的呈现,更多的是考虑动作、道具、画风等视觉语言的统一性:

    设计时对后期可能性的应用有一定的考虑,例如后期可能会有线下周边的生产需求,那么我们尽量把角色的身高差异设计得不要太大,有利于减少生产周边产品的难度。为了契合世界观的题材,我们采用了比较多的机械化科幻的元素去融入到角色的服装和道具中。

    3. 三维阶段-可应用性

    进入到 3D 设计阶段,在遵循 2D 设定的基础上,对我们平台而言材质不追求真实质感,追求后期的延展和应用性。

    (由于项目紧急,我们将一部分模型工作外包了出去,感谢萌熊和尚章工作室对部分模型的支持。)

    考虑到该多元角色后续其他活动的应用,所以前期会更注重角色骨骼、表情的绑定、权重的设置上,以保证角色做动作的时候不会有严重的穿膜问题。这里推荐使用自动绑定骨骼工具 Mixamo 以及节点姿态变形适应快速完成节奏快的项目:

    多途径传递“T 宇宙” 1. 玩家互动体验—年度回顾

    万事俱备,只欠东风。世界观和角色都有了,是时候让它和用户见一次面了,我们借助用户数据年度回顾运营活动,验证世界观。

    我们设置了能够让用户能有更沉浸体验的黑洞进入基地的方式来选择自己喜欢的角色,并且能够在房间里探索道具和查看自己过去一年的数据,强调自由探索和个性化情感。在许多的文案细节上,我们也精心为每个 角色设计 了属于他们自己的个性化对话、让用户更能感受到角色的魅力。

    2. 认领“专属基地”

    场景构成:“每个玩家都有专属自己的星球”是世界观中非常具有个性化的限定场景,当我们需要根据每个角色的特点去设计场景时,面对多个角色时就变成非常有挑战性了,我们要将一个场景大致构成、位置、和道具模块确立下来。

    道具设定: 道具根据不同的场景需要,做了情感承载和功能数据承载的区分,情感承载可以塑造角色性格,功能数据承载可以展示用户数据:

    推进基地外观设计,在视觉上使用了科技金属外框、搭配星空流动的背景等元素增加用户置身在宇宙中的情景化元素,呈现两种视角的基地,让用户对自己的基地有更全面的了解:

    3. 探索自己基地里的“专属数据”

    在基地中我们设置了专属的基地编号,凸显房间的独特性。房间内的部分道具可以互动,让用户触发后可以查看自己对应的数据统计;用户可以根据心情选择自己想要分享的年度数据,包括基地的卡片。

    4. 和角色产生情感链接-角色动作

    小团队中面对大量角色动作的产出时,能够使用 Mixmao 动作库去快速生成骨骼运动,是比较高性价比的,角色动作结合性格去做演化,我们将动作分类了为飞船挥手、进场、avatar 默认呼吸、点击互动、跳舞庆祝,另外我们需要让动作和手势适合而且要在大范围地区没有贬义。游戏化的角色选择界面,通过场景道具触发动作:

    5. 宣传小 PV 微动画

    动画能够让观者十分直观地了解到品牌想要传达的价值和故事。对于 Trovo 这样一个快速发展中的产品,结合自身人力条件,我们希望短平快地以最小成本做一个小短片。一方面为活动预热,达到刺激用户参与度的效果;另一方面,我们希望通过这部短片,能够向用户传达我们构建的宇宙面貌。故事的节奏我们也希望可以通过一个从低-高-低的方式展开。

    6. 周边徽章套盒-真实世界的碰撞

    我们还生产出了一系列全珐琅徽章套盒,加强用户对于世界观的印象,毕竟用户对于拿到手上的东西感知会更深,一共有 2 个系列,典藏套盒用于赠送给主播纪念,盲盒套装用于线上商城进行售卖。以 5+1 的形式区分常规款和稀有款式,增加了流行的盲盒的玩法。

    旋转配件:针对每一个角色所代表的产品象征,将道具零件制作成了可以 360 度旋转的凸起零件,旋转起来非常丝滑,总之一句话,盘他!

    特别稀有款:而对于稀有款式的大魔王 GG,当然不能缺少了特别的出场方式,日光模式下金粉闪烁,异常夺目。而在夜光模式下,也不能输,他手中的绿色能量蠢蠢欲动,荧光散射,仿佛正在谋划下一场 troverse 宇宙的能量争夺战。

    对未来的思考和展望 1. 家族角色整体反馈

    活动得到了一些不错的正向反馈和用户的喜欢,从数据表现上来看,leon 的使用次数达到 5 万人次,它作为品牌的原 IP 形象,用户对它的忠诚度还是比较高的。

    其他新晋的角色也有不俗的表现,还有社区主播利用 penny 的模型制作了一款游戏,也从另一方面说明了海外玩家是很有创造力的。

    2. 对“T 宇宙”的后续思考展望

    Trovo 还在成长,包括 T 宇宙也是初步形成,但是仍然希望能够向 ACG、文学电影领域学习,不断完善世界观的和加强重视,这不仅对品牌来说是一件有益的事情,还能提供有效的创作支撑点。对于这些新晋的家族成员,要通过更多维度的运营活动融合,去培养和提高用户对他们的忠诚度,让他们慢慢喜欢上这些角色。由于这次项目过于紧急,角色的外在表现仍然有很多不足的地方,期待后续的迭代更新。

    Troverse 宇宙仍有很多缺失的部分需要完善,如不同角色间的互动性故事、不同的种族间的关系,其生存环境;宇宙地图和地区的分布,区域之间的关系;不同星球之间的生存、娱乐、工作方式的体现;反派角色的塑造等。

    出海产品如何从零搭建IP插画库?让大厂高手教你! 插画作为一种高效的视觉表现手法,在如今的互联网设计中已被广泛应用。

    阅读文章 >

    欢迎关注作者微信公众号:「腾讯设计族」

  • 如何提升出海社区包容性?来看腾讯的实战案例!

    UI交互 2022-05-01
    导语 随着 trovo 社区的发展,玩家多样性也越来越明显,为了社区氛围更能体现海外文化多元包容的理念,我们展开了关于 IP 家族的思考。 ...

    导语 随着 trovo 社区的发展,玩家多样性也越来越明显,为了社区氛围更能体现海外文化多元包容的理念,我们展开了关于 IP 家族的思考。

    多方面了解行业和自身特征 1. “小世界”存在的支撑点

    通过备受关注的的英雄联盟、漫威和封神榜宇宙这些家族化的 IP 和成熟的宇宙故事里以及被人们推崇喜爱的程度来看,世界观对于电影文学和 ACG 游戏内容产业对于 IP 的成功塑造是显著的。

    而它的逻辑上的实际用途对于创作者的工作也能有效提供认知边界和创作依据。

    2. 大 IP 怎么传递自己的“小世界”

    以《星球大战》、《权力的游戏》为例,他们都构建了一套蕴含着哲学、科学原理的世界观。

    一方面赋予内容层面和视觉元素的规定情景,划好边界合理性,将用户和创作者的认知拉到同一个层面上;另一方面为内容创作者提供了合理的脑暴灵感库,有效提升内容产出的效率。

    3. Trovo 海外社区玩家环境特点

    Trovo 旨在打造全球互动内容游戏玩家社区,目前面向的地区主要有北美、拉美、欧洲地区。多样的国家,由于在语言、宗教、文化和审美都有诸多的差异。

    我们在探索一个能被海外社区用户理解并保持忠诚度的宇宙和家族角色之前,先去了解他们生活的政治、文化环境和喜好,以帮助我们更好的实现一个大同小异的科幻世界,能够映射每一个用户的身份,给予一个属于他们自己的世界。

    搭建小世界的“物理环境” 1. 提炼小世界的“三要素” — 提炼关键词

    通过以上的分析,我们对海外玩家有了进一步的了解。接下来需要总结出 trovo 宇宙中,关于历史、文化、地理的背景三要素,以帮助我们完成细节的设定。我们对 T 宇宙设定的大概轮廓,锁定在了包容性高、科技发达、发展探索,这三个关键词上:

    地理:在面对全球化的用户背景下,我们希望创造一个能对所有地区的用户来说都是可以被接纳的环境背景。

    文明:结合玩家的喜好和产品的直播社交功能,更希望这个虚拟世界的文明是拥有高度发达的科技技术的,能够让玩家自由地交流和沟通。

    历史:结合社区的发展现状,我们是一个正在快速发展中的内容平台,用户组成更偏向倒金字塔的结构,所以希望构造一个更关注中低腰部用户的发展中世界,每个人都在探索未知和发展自己的路上努力。

    2. 为小世界“添砖加瓦” — 总结框架

    我们根据三个关键词,再结合产品特色、用户感知、市场上做得好的 IP 宇宙,脑暴了一些细节词的设定去帮助我们完成框架故事的描述。

    在广阔的 Troverse 宇宙中,有无数个星球,每个玩家都拥有一个专属星球,他们各有千秋,值得被探索和发现。而玩家可以利用“传送科技”探索其他星球,分享游戏、分享快乐。

    但是这个世界并不完美,星球间的连接不够紧密,大星球的光芒常常掩盖周边的小星球。“传送科技”的连接常常不稳定,需要一种名为“Data Gems”的能量来维护直播流平台,幸运的是,它能被在每个星球上挖掘到的。据此,星球上的玩家不断探索穿梭于新的星球之间分享和探索,致力于让每个星球都能闪闪发光。

    生动化小世界,打造 IP 家族 1. IP 家族化的原因

    其实我们一开始产生做家族 IP 和宇宙的想法,是为了结合产品中的多人开播功能 Squad 去做的。这个功能中最大的特色就是“多人连线直播”,所以我们把家族名称命名为“T-squad”小队,非常有超级英雄的基因。

    在此之前,Trovo 平台已有基础品牌 IP 形象叫 Leon,它在很多方面表现非常出色,得到了许多用户的喜爱。海外用户对于性别、种族的平等是比较看重的,可惜的是 Leon 的男性知识非常明显,这让它在面对海外用户的包容性上并不是那么的全面。多元角色的包容性更高,而且在品牌价值上,成体系、家族化的集群化在力量上是更强的。

    那么问题来了?就是当我们向用户抛出这么多角色时,他要怎么记住呢?

    2. 归纳 IP 家族的个性基因

    要达到区分角色的目的,就需要传达属于角色独有的设计点,并且为他们设计特有的个性。但这些都不是凭空捏造的,要让用户认可这些角色就需要更全面的去分析。

    我们从专业性格测试、用户游戏角色类型、社区主播、观众、政治环境性别平等四个维度,划分成了角色设定的 4 个象限,从中去组合形成多元角色。

    3. 赋予 IP 家族差异化的内在表现

    如何合理的进行设定角色框架也是一个比较冗长的过程,要在保证多元化的情况下,平衡地去分配每个象限的比例,如果稍有不慎,就有陷入种族歧视、政治不正确的困境中。为了让这些角色更好的服务于产品,我们赋予每一个角色符号化的产品象征,这对后续的视觉化也比较有重要的参考意义。

    (小插曲:原本只有一名女性角色,后面受到海外同事的建议和反馈,我们新增了一名女生角色。而在角色的肤色考虑上,尽量避免刻板印象,如黑人我们原本使用的是黑色,后来改成了蓝色。)

    4. 在小世界中找到“自我”的故事

    从大部分成功的 IP 故事构成来看,发展和冲突是构建情节的必要元素。根据世界观的框架,我们花了比较多的时间对”T-Squad“小队的故事做了设定,一包括多元角色和这个世界的主故事线,二是每个角色自己的故事线。

    家族 IP 的外在差异化表现 1. 草图阶段-任由想法天马行空

    对于小队角色的构思要遵循原品牌原有的 IP 设定,变色龙作为基础形象进行二次创作。但是这个阶段不宜过早设置太多规范因素的影响,应该尽可能的发挥创作者的自由发挥能力,表达出能和设定吻合的角色外形。

    2. 平面阶段-规范化表现

    进入到 2D 设计的阶段,不能仅着眼于细节化的呈现,更多的是考虑动作、道具、画风等视觉语言的统一性:

    设计时对后期可能性的应用有一定的考虑,例如后期可能会有线下周边的生产需求,那么我们尽量把角色的身高差异设计得不要太大,有利于减少生产周边产品的难度。为了契合世界观的题材,我们采用了比较多的机械化科幻的元素去融入到角色的服装和道具中。

    3. 三维阶段-可应用性

    进入到 3D 设计阶段,在遵循 2D 设定的基础上,对我们平台而言材质不追求真实质感,追求后期的延展和应用性。

    (由于项目紧急,我们将一部分模型工作外包了出去,感谢萌熊和尚章工作室对部分模型的支持。)

    考虑到该多元角色后续其他活动的应用,所以前期会更注重角色骨骼、表情的绑定、权重的设置上,以保证角色做动作的时候不会有严重的穿膜问题。这里推荐使用自动绑定骨骼工具 Mixamo 以及节点姿态变形适应快速完成节奏快的项目:

    多途径传递“T 宇宙” 1. 玩家互动体验—年度回顾

    万事俱备,只欠东风。世界观和角色都有了,是时候让它和用户见一次面了,我们借助用户数据年度回顾运营活动,验证世界观。

    我们设置了能够让用户能有更沉浸体验的黑洞进入基地的方式来选择自己喜欢的角色,并且能够在房间里探索道具和查看自己过去一年的数据,强调自由探索和个性化情感。在许多的文案细节上,我们也精心为每个 角色设计 了属于他们自己的个性化对话、让用户更能感受到角色的魅力。

    2. 认领“专属基地”

    场景构成:“每个玩家都有专属自己的星球”是世界观中非常具有个性化的限定场景,当我们需要根据每个角色的特点去设计场景时,面对多个角色时就变成非常有挑战性了,我们要将一个场景大致构成、位置、和道具模块确立下来。

    道具设定: 道具根据不同的场景需要,做了情感承载和功能数据承载的区分,情感承载可以塑造角色性格,功能数据承载可以展示用户数据:

    推进基地外观设计,在视觉上使用了科技金属外框、搭配星空流动的背景等元素增加用户置身在宇宙中的情景化元素,呈现两种视角的基地,让用户对自己的基地有更全面的了解:

    3. 探索自己基地里的“专属数据”

    在基地中我们设置了专属的基地编号,凸显房间的独特性。房间内的部分道具可以互动,让用户触发后可以查看自己对应的数据统计;用户可以根据心情选择自己想要分享的年度数据,包括基地的卡片。

    4. 和角色产生情感链接-角色动作

    小团队中面对大量角色动作的产出时,能够使用 Mixmao 动作库去快速生成骨骼运动,是比较高性价比的,角色动作结合性格去做演化,我们将动作分类了为飞船挥手、进场、avatar 默认呼吸、点击互动、跳舞庆祝,另外我们需要让动作和手势适合而且要在大范围地区没有贬义。游戏化的角色选择界面,通过场景道具触发动作:

    5. 宣传小 PV 微动画

    动画能够让观者十分直观地了解到品牌想要传达的价值和故事。对于 Trovo 这样一个快速发展中的产品,结合自身人力条件,我们希望短平快地以最小成本做一个小短片。一方面为活动预热,达到刺激用户参与度的效果;另一方面,我们希望通过这部短片,能够向用户传达我们构建的宇宙面貌。故事的节奏我们也希望可以通过一个从低-高-低的方式展开。

    6. 周边徽章套盒-真实世界的碰撞

    我们还生产出了一系列全珐琅徽章套盒,加强用户对于世界观的印象,毕竟用户对于拿到手上的东西感知会更深,一共有 2 个系列,典藏套盒用于赠送给主播纪念,盲盒套装用于线上商城进行售卖。以 5+1 的形式区分常规款和稀有款式,增加了流行的盲盒的玩法。

    旋转配件:针对每一个角色所代表的产品象征,将道具零件制作成了可以 360 度旋转的凸起零件,旋转起来非常丝滑,总之一句话,盘他!

    特别稀有款:而对于稀有款式的大魔王 GG,当然不能缺少了特别的出场方式,日光模式下金粉闪烁,异常夺目。而在夜光模式下,也不能输,他手中的绿色能量蠢蠢欲动,荧光散射,仿佛正在谋划下一场 troverse 宇宙的能量争夺战。

    对未来的思考和展望 1. 家族角色整体反馈

    活动得到了一些不错的正向反馈和用户的喜欢,从数据表现上来看,leon 的使用次数达到 5 万人次,它作为品牌的原 IP 形象,用户对它的忠诚度还是比较高的。

    其他新晋的角色也有不俗的表现,还有社区主播利用 penny 的模型制作了一款游戏,也从另一方面说明了海外玩家是很有创造力的。

    2. 对“T 宇宙”的后续思考展望

    Trovo 还在成长,包括 T 宇宙也是初步形成,但是仍然希望能够向 ACG、文学电影领域学习,不断完善世界观的和加强重视,这不仅对品牌来说是一件有益的事情,还能提供有效的创作支撑点。对于这些新晋的家族成员,要通过更多维度的运营活动融合,去培养和提高用户对他们的忠诚度,让他们慢慢喜欢上这些角色。由于这次项目过于紧急,角色的外在表现仍然有很多不足的地方,期待后续的迭代更新。

    Troverse 宇宙仍有很多缺失的部分需要完善,如不同角色间的互动性故事、不同的种族间的关系,其生存环境;宇宙地图和地区的分布,区域之间的关系;不同星球之间的生存、娱乐、工作方式的体现;反派角色的塑造等。

    出海产品如何从零搭建IP插画库?让大厂高手教你! 插画作为一种高效的视觉表现手法,在如今的互联网设计中已被广泛应用。

    阅读文章 >

    欢迎关注作者微信公众号:「腾讯设计族」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通