组件 玩法 此类 前言在现如今的社会中，每天都有各式各样的商战。运营设计则是至关重要的一部分。所谓运营设计即是运用完善的设计思维、产品思维和设计技能去完成视觉设计，在保证设计美感的同时，兼顾用户和产品营销的需求，达到流量多、曝光量多、积累口碑等目的。运营活动具有周期较短、业务目标明确、用户群体明确、玩法简单等特点。运营类活动生命周期较短，常在某一段时间(也可能是周期性的)，一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，那么作为运营设计师怎么才能做出一系列快速、高效、高质的运营设计呢？本文主要从运营设计师，需要什么样的思路、技巧？并明确哪些步骤是可以快速搞定的？哪些内容是需要精修打磨？怎么归类？怎么统一？等内容去引导大家做好运营设计。灵活把握设计思路、避免陷入程式化设计师长期处于单向业务线的设计中，往往都会有思维模式固化的特点，每做一个项目，可能需要清楚设计目标、背景、品牌定位、用户人群等等。岂不知一个短短的运营设计，哪有那么多时间去深入了解，我们要做的就是依据项目的重要程度，做思路筛减，灵活运用，了解到哪些是必要的，哪些是非必要的。我们依据项目的重要性，大致分为四类运营活动：S 级大促活动、A 级节日&平台类主题活动、B 级品类&渠道等日常活动、其他助力玩法&推广类活动等。那么接下来我们考虑以什么样的设计思路去应对这四种不同级别的项目活动。1. S 级大促活动S 级大促活动，常见的有双十一、年中大促、春运大促等。此类的活动有爆发量高、活动周期较长、促销力度大、出现次数较少等特点。那么此类活动对于无论是产品运营还是设计师都是重中之重，而且 S 级活动往往涉及到的物料输出非常多，包括各个会场、换肤、顶通等等，所以针对每个环节，我们都要做到深入了解，精细打磨。我们要做的有：1. 理解活动目标，包括活动效果目标、业务转化目标、品牌形象目标、设计影响力目标等；2. 明确目标用户，掌握用户行为特征、思想和情感需求，洞悉目标人群的特征才能实现精准的设计触达；3. 制定设计策略，包括规划设计排期、定义设计风格、设定活动符号、把控节奏点等内容；4. 细化流程，规避风险，视觉风格定好后，依据关键词，先草图绘制，进行创意联想，避免过早陷入细节，待方案确认后，再进行精细化打磨，按照时间节点，各个端口物料输出；5. 关注设计结果，总结复盘，要及时了解用户反馈、可量化数据验证，项目结束后做总结和复盘，把项目过程中遇到的问题及时列出，好的经验和方法延用。A 级节日&平台类主题活动A 级活动，常见的就是节日节点和平台主题类活动，例如春季家装节、回收焕新季等。此类活动一般上线时间为 3-8 天左右，频次相对较高，此类活动可以根据活动属性和项目特点，打造系列化运营设计，既可以保证设计质量又可以节省时间。我们要做的有：1. 规划时间、统筹归类，将一年内的 A 级活动，依据活动特征属性，进行归类整理，进而为做出系列化的运营设计做好准备；2. 确定阶段性设计风格，依据当前设计趋势结合业务熟悉，打造适合业务转化的视觉风格，包括 C4D、插画、酸性、场景合成等；3. 定义设计语言，包括设计版式、构图、色彩和字体符号等，将此类信息进行明确定义，在设计时，就可以直接使用，也不需要每次投入时间去考虑；4. 关注数据，及时总结，A 级类活动相对频次较高，所以实时的总结经验教训，为下一次活动做准备是非常有必要，也只有这样，才能使每次的运营设计越做越好；B 级品类&渠道等日常活动B 级活动，也就是我们所说的日常运营活动。此类活动一般我们打开 app，每日都会看到，常见的有福利日、品类日等主打活动。此类活动有上线周期长、频次短、营销力度小等特点，基本上一个月或一个季度更换一次、有的甚至半年或一年，基本是跟业务及品牌主打相关。此类活动的目的，一方面是为了促活、留存、流量汇聚等，另一方面是为了传达品牌理念，提升业务及品牌形象。我们要做的有：1. 深入了解品牌形象和业务属性，根据品牌规范对运营活动进行设计，B 级活动对用户来说，曝光率会比较久。所以我们在设计的时候，尽量依据品牌关键词，选择规范中的品牌色、字体、符号等内容，加深用户对品牌的印象，从而提高知名度和业务转化；2. 模版规范化、统一处理，针对于 B 级活动，做相应的模版规范，统一视觉样式，是非常有必要的。不但能提高设计效率，同时也能逐渐沉淀出符合产品调性的品牌基因，从而保持产品的一致性；3. 视觉降噪、简洁处理，B 级活动视觉避免花里胡哨，能够让用户在有限的时间内 Get 最有价值的信息，找到所得，从而实现转化就可以；4. 版本优化，迭代更新，总所周知，一个 app 要想保证用户留存和拉新，是必须不断升级和改进，那么 B 级运营活动同样也是如此，会伴随着主 app 的设计调性，不断优化迭代。其他助力玩法&推广类活动除了以上分析三种类别的活动外，我们常见的运营活动还有助力玩法和推广类活动，通常依赖游戏化手段或任务类玩法带来优秀用户体验，有领红包、领劵、抽奖、限时秒杀等形式，从而获得成功拉新转化的一类活动。此类活动有运营感强、行为体验丰富、流程触点多等特点。另外此类活动对产品运营和交互设计的要求比较多，需要对玩法策略和交互逻辑有清晰的设定，那么作为运营设计师我们需要怎么做呢？我们要做的有：1. 参与策略制定、提出创意想法，针对玩法推广类活动，在设计前期，我们一定要参与策略制定，能够将自己的一些设计创意和灵感，融入到活动中；2. 了解玩法逻辑，强化设计价值，当设计玩法确认后，我们一定要配合交互设计师，对玩法中的每个流程逻辑，要有清楚的了解。并对每个流程页面中的内容进行层级分析和强化处理，包括利益点、文案和激励机制等；3. 市面设计分析，融入自身创意，在开始对活动进行设计的时候，我们首先要对此类玩法市面上的设计进行收集整理，吸取别人的优点，同时将自己的创意融入，最终做出更好的玩法设计；4. 案例整理，提高复用，当我们做完一系列的玩法活动时，要学会对其进行整理，做成通用模版，从而提高设计复用性，降低设计成本。综上所述，对四类活动进行了一些设计思路分析，其中的思路方法也不是一成不变的，有些点是互通的，这就在于设计师在设计中要学会灵活把握，找到快速有效适合自己的方法，只要有了清晰明了的设计思路，我们做设计的时候才能达到事半功倍的效果。运营物料规范制定众所周知，运营设计师的需求内容有专题页、详情页、H5、Banner、闪屏海报等等，分别对应不同的设计要求。我们在运营设计的时候，在输出物料上花费的时间是非常的大。所以运营设计物料做统一性的规范标准是非常有必要的。一般来说我们针对运营物料，需要明确规范的有尺寸大小、图文结构、字体字数、配色、元素等内容；用一个项目实例来具体说明一下：为 58 同城本地服务运营活动入口的 banner 图，涉及到 APP 和 PC 端。当我们已知素材和文案内容后（如下图左），我们就可以制定其版式结构，包括尺寸大小、字号间距、主视觉等内容（如下图右），那么我们每次设计的时候，只需要更改文案、主视觉和配色即可。以下两张图是按照 banner 规范做出来的效果：另外再举个例子，就是我们的活动页面设计，常见的页面信息结构：首屏+副屏，首屏：主副标题+氛围图，副屏：模块平铺/叠加，我做设计之前就需要对页面中的内容进行布局的规范化，包括位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，如下图所示：组件化降低设计成本对比设计规范来说，组件库更像是一个强大的工具库，是提高工作效率和保证团队协作一致性的基础。组件库作为设计系统的一部分，在运营设计过程中设计师可直接调取，组合构建出新的页面，通过组件库带来的价值主要体现在三个维度：1. 设计一致性当我们使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。2. 提高设计效率我们做运营设计的时候，总会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。3. 高效协同我们在进行运营设计的时候，可能会涉及到产品、开发及数据等人力侧的支撑，组件库能够随着业务发展不断的优化和完善，在不同的需求和各人力侧之中，能够灵活支撑页面内容进行延展和扩充，从而实现全链路、多场景的高效协同。以下是我们在做 58 到家的家庭服务运营设计中，部分的组件样式，包括服务列表、弹窗等等。在组件库的构建过程中，我们需要整体思考，明确组件化的设计内容，不断去优化和完善组件细节，包括设计原则、应用场景以及拓展性等。同时组件库需要根据产品的发展不断迭代和创新，才能让它的可持续性特性发挥至最大。写在最后设计行业是一个不断发展、推陈出新的行业，新的风格和形式层出不穷。而随着互联网和人工智能的发展，运营设计也在大的时代浪潮下产生着变化。我们需要在新的维度上进行思考，充分调动用户的感官，用更具有创造性的思维完成设计表达，在更丰富的场景下实现多通道的感官设计，创造更新鲜的体验。设计师需要不断学习和成长，为设计行业注入新的活力。以上是个人在运营设计中的一些经验总结，从设计思路、物料规范和组件化三个方面进行了论述，不足之处请多包涵，同时篇幅有限，关于运营设计的内容无法一次详尽，欢迎大家一起讨论。设计师应该懂的运营基础知识由销售演变成运营在我看来，当今互联网行业的经营实际上与传统行业的销售并无区别，我们可以从以下两个行业的业务结构图看出，互联网行业的经营实际上是从传统行业的销售模式转变而来。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/operation-design
图片 编辑 就能 Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要打开网站、无须注册就能使用。3秒无痕修图！在线黑科技修图神器 Magic Eraser大家好，我是和你们聊设计的花生~抠图和修图是每个设计师都必须花时间处理的日常工作，它们虽然难度不高，但需要处理的频次不低，所以很多时候我们都会借助智能工具来处理。阅读文章 > Hama 目前支持上传任何尺寸大小的原始图片，不过下载时会将处理后的图片大小限制为 720px，依照网站说明他们正在准备付费 Pro 版本，未来需要付费才能下载高分辨率的图片成果，但好处是没有限制单一图片编辑次数。如果在去除时无法获得较好的效果，不妨重复进行几次，让机器重新辨识效果会更理想（也取决于用户本身图片的复杂性）。Hama网站链接：https://www.hama.app/en使用教学开启 Hama 网站将图片拖曳到网页的虚线方框就能开始使用，Hama 不会将任何图片储存于服务器。接着会看到简易编辑器，使用者需要做的就是从下方调整橡皮擦的粗细，然后标记出想要清除的范围，顺带一提，这张操作范例使用的图片来自 Pixabay，它是一个收录超过 30 万张相片的免费图库。图库两连发！有三十万可商用图片的Pixabay+图片搜索引擎今天这篇源自之前合集里推荐过的一个图库站，最近实际深入使用后，发现它确实是个极佳的图片素材库，不但提供了大量且可以免费使用的照片、向量图和艺术插图，而且都可以自由下载使用，包含商业用途，无须署名。阅读文章 > 举例来说，我想把相片中的 Gogoro 机车移除，就以橡皮擦标示出特定范围，点选下方「Erase」清除。接着 Hama 就会开始分析计算要清除的人物或物品，同时补上可能的背景颜色或样式，看起来就像是变魔术一样直接让 Gogoro 从照片消失（除了没有描绘到的阴影部分）。如果想比较一下原图和去除后的图片差异，点选右上角「Original」切换原图和处理后的图片。一张图片有无限制的编辑次数，若是觉得看起来没有很完美，可进行多次编辑，为了让编辑的流程更快、更顺畅，建议将右上角「Auto」切换为开启状态，就能在每次标示范围后让 Hama 自动分析处理，不用重复点击 Erase 清除按钮。完成编辑后点选右上角「Download」即可下载、保存编辑后的图片。值得一试的三个理由：1. Hama 让用户上传图片、将画面中不想要的部分抹除2. 支持上传任何尺寸的原始图片，不过下载时图片大小限制为 720px3. 不会将图片储存于服务器，可反复进行多次清除没有次数限制又一个抠图神器！完全免费无需注册超好用！当前图片去背工具都设计得相当简单易用，只要将图片上传，就能以机器自动辨识主体和背景范围，快速将背景移除，转为透明背景或是套用特定颜色，像是之前介绍过的 FocoClipping、Designify、BackgroundCut、AI Background Remover 等等去背服务都有类阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hama
透视 圆柱 物体 上篇文章分享了一波空间感很强的作品，这些作品都有一个共同的特点，即具有很强的透视关系，于是有人建议葱爷写一篇关于透视的文章，完整的透视学其实是很复杂的，葱爷也很难讲清楚，不过对于平面设计师来说，掌握一些最基本的透视关系即可，这个葱爷还是能说上一二的。用超多案例，教你一招搞定海报设计视觉冲击力！强烈的视觉冲击力对于平面设计来说是一个很重要的品质，而关于如何加强画面的视觉冲击力，有一个方法简单又有效，即加强画面的空间感。阅读文章 > 为什么会有透视呢？从逻辑上来说，两条平行线是永远不会相交的，但是如果两条平行线是沿着离我们视线越来越远的方向延伸，变成了一个三维空间，那么这两条线在我们的眼睛看来是会相交的，因为人眼的成像是二维的，而且人类没法把离视线很远的物体看得跟离视线近的物体一样清晰。这就是为什么我们看一条纵向延伸的道路为什么会越来越窄的原因，实际上这条路的宽度一直没变。透视学包含了线性透视、空气（颜色）透视和隐形（消逝）透视，线性透视指物体的轮廓随着视线距离的变化，呈现出近大远小的现象；空气透视是指物体的颜色会随着距离的变化而进行改变，比如变亮、变暗、变灰等；隐形透视是指物体会随着距离的变远，变得越来越模糊。其中最复杂的就是线性透视，由于我们所处的空间是三维的，即横向空间（X 轴）、竖向空间（Y 轴）、纵向空间（Z 轴）。在现实场景中，每一个物体都会有这三个空间上的透视，即三点透视，但在绘画或设计中有时会减少其中一个或两个空间上的透视，以达到不同的视觉效果，于是又产生了单点透视和两点透视。单点透视是最简单的，即版面中只有一个消失点，比如这个点是在 Z 轴上的，那么物体只在纵向空间上发生位置变化时才会有透视。首先，在版面中确定一个消失点，假设就是在版面的正中央，然后拟定视平线就是版面的水平中轴线。这时版面中除中心点外的任何一个位置离我们的视线都要比消失点更近，而且同样大小的物体离消失点越远，就会越大。那么，上图这三个圆点的大小是一样的吗？检验一下就知道了，我们以最近的圆 A 作为标准，通过平移得到圆 B 与圆 C 在处于跟圆 A 同等距离的位置时正确的大小。拉上透视线，就可以看到圆 B 和圆 C 都大了一点。所以如果这三个圆是同等大小的，那么正确的比例应该是下图这样。当然，在做设计的时候，我们用到元素也大多是三维的，那么这些三维的元素在这个空间里又会有怎样的透视呢？我们可以给上图的圆增加一个厚度，使其变成圆柱，如下图。这些圆柱的透视是对的吗？通过拉上透视线就可以看出来，三个圆柱透视方向都偏离了，它们的消失点都不在我们设定的消失点上。调整以后得到如下效果，这才是正确的透视。通过该图我们还可以看到，如果圆柱刚好在视平线上且在消失点的左侧，那么我们就只能看到圆柱的正面和右侧面；如果圆柱在消失点的正上方（同时也在视平线之上），那么就只能看到圆柱的正面和底面；如果圆柱在消失点的左下方（视平线之下），那么我们就能看到圆柱的正面、顶面以及右侧面。套用这种方式，再加上一些对比关系，我们可以做出如下效果：同类型的作品其实很多：当然，消失点和视平线也不一定要在正中间：接下来葱爷再来说说两点透视，即版面中会有两个消失点，这时物体在两个维度上都会有透视，这种情况经常被用在正方体或长方体包装盒的效果图设计中。假设一款包装的效果图是上图这样的，正面没透视、左侧面有透视，即位于单个消失点的空间里，那么这个效果图看起来会很奇怪，因为一个真实的长方体包装，如果能看到它的两个面，那么说明这个长方体没有哪一个面是正对着我们的。我们可以画一个长方体的结构透视图，如下：长方体的高是由 ABCD 四条直边组成的，由于包装是呈半侧面摆放的，所以离我们最近的一条边是 A，其次 B 和 C，最远的是Ｄ。那么根据透视关系，B和C的高度要比A短，所以该包装的正面和左侧面都会以A为起点越来越小，并分别消失于左右两个点上，这就是两点透视。所以该包装的效果图调整成下图这样会舒服很多。当然，这是包装处于视平线上的情况，如果包装处于视平线上方或下方，那么就能看到三个面。比如下图，我们看到了包装的正面、右侧面和顶面。但是这个效果图也有点奇怪，因为它只做了两点透视。我们还是来看看它的结构透视图，我们重点来看看 ABCD 这四条边。由于包装位于视平线的下方，那么顶面自然比底面离我们的视线更近，近大远小的原理，所以线条 A 要比线条 B 长、线条 C 要比线条 D 长，所以该包装盒的正面和右侧面都会从上往下慢慢变小一点，并消失在同一个点上，这就是三点透视。所以上图包装效果图比较合理的透视应该是这样的：三点透视在拍摄高层建筑物时，效果更为明显。另外，透视效果要想很明显，只有线性透视还不够，还需要颜色透视和消逝透视的配合，即离光越近的地方颜色明度越高，视觉越清晰、离光越远的地方颜色明度越低、视觉越模糊。比如下图中的几个圈虽然有轮廓大小的变化，但是并没有空间感。而如果把这些圆圈的颜色，从外到内逐渐调亮，并逐渐变模糊时，透视感和空间感就出来了，很多空间感很强的作品都是运用了这些原理。我们看到的很多空间感很强的作品，都是做了这三种透视的处理。好了，本篇文章就写到这里，当然，葱爷只是讲了透视学中的九牛一毛而已，但如果你真的把这些原理搞懂了，应付平面设计中的绝大部分透视关系还是没什么问题的，希望这篇文章对你有所帮助。超实用！高手的 Ai 兵器谱之「理解透视网格」在设计工作中，我们经常需要绘制具有透视感的物体，此时，如果你能熟练掌握Adobe illustrator（Ai）中的透视网格功能，就能帮助自己高效的完成。阅读文章 > 欢迎关注作者的微信公众号：「葱爷」本篇来源：优设网原文地址：https://www.uisdc.com/perspective
用户 玩法 上瘾 「微信读书」是一款基于微信关系链的阅读类 APP，以阅读+社交的设计理念，对读书类产品进行了颠覆式设计，旨在为用户打造一个以书交友的平台——让阅读不再孤单。笔者作为一个重度「微信读书」上瘾用户，最近从正在制作的《微信读书产品设计分析报告》中提炼出来了「微信读书」的 11 种营销玩法，结合戴夫·麦克卢尔的增长模型、尼尔·法埃尔的上瘾模型和西奥迪尼的社会心理学进行了全面的拆解，为广大产品设计者提供一份设计参考。关于上瘾模型的详细介绍：万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 问答1. 每日一答玩法规则「每日一答」有两种玩法，第一种是用户每天可以进行回答挑战，连续答对 12 道题目后可参与「瓜分无限卡」、「书币」的机会，答错则丧失机会，但可以通过「复活卡道具」或分享给好友请求帮忙获取复活机会；第二种是「问答 PK 比赛」，采用赛季制，持续时间为两个月，用户可邀请好友或随机对战，胜利者可赢取积分，赛季结束后根据积分决胜出总冠军，最终给与玩家不同的奖励。功能价值「每日一答」从 APP 直接跳转到微信，不仅操作体验方便，更能结合微信生态引流传播，打造全民学习答题的读书活动。其次通过丰富多变的游戏化方式，保持对用户的新鲜感，形成读书-娱乐的小闭环，抢夺用户时间，提高用户留存率，增强用户满意度、忠诚度，是培养用户对产品形成习惯的重要方式。策略推导⑴「积分」的玩法非常丰富，不仅可以「抽奖」，「兑换无限卡」、「道具卡」还可以直接兑换书籍，为用户提供了多变性的猎物酬赏。⑵进入「每日一答」，用户可选择「瓜分读书天数」（以读书时间为诱）或「书币」（以钱为诱）两种形式的问答；「排行榜」分为好友排行和全网排行，通过排名机制，以社交酬赏为诱，吸引用户积极参与问答，从而提高用户习惯度，成为忠实粉丝。⑶利用稀缺性，用户每天只有1次机会回答机会，但如果回答错误，可通过使用「续命卡」或邀请朋友解答的两种形式进行复活；用户闯关失败后，用户还可通过「书币购买」、「看广告复活」、「邀请朋友」玩游戏复活，通过这样多变、丰富、游戏化的答题形式，彻底让用户主动分享传播，拉新引流。⑷「问答PK」的设计非常创新，有别于很多答题竞猜的的单机游戏模式，微信读书采用了体育比赛的赛季制度，让用户像踢比赛一样参与，每个赛季时间为2个月，通过PK，决胜出赛季总冠军，刺激又好玩，让用户彻底上瘾。促销1. 免费领书功能价值用户可通过分享领取图书，也可以通过阅读 1 分钟并加入书架后领取，这对未付费用户的激活和新用户的引流有很大的帮助。策略推导根据用户读书记录、兴趣推荐，激发用户兴趣；用户阅读 1 分钟加入书架也可赠送，有效促进未付费、未形成习惯的用户激活；多变性的设计，每天能领取的图书都不一样，给用户始终保持神秘感。2. 无限会员日功能价值每周一为「无限会员日」（无限会员就是微信读书的 VIP 会员），用户可进行免费抽奖，并为自己最想要的「会员权益」投票。这是新用户激活、老用户留存的好方法。通过「抽奖」、「会员权益」吸引新用户购买无限卡，其次给与老用户充分的自主权，让他们来参与产品设计，极大提高用户的活跃度和忠诚度。策略推导充分利用稀缺性，每周 1 次，每次也只能抽奖 1 次；结合游戏化风格设计，模拟真实的老虎机交互效果，生动又有趣；通过调研，调动粉丝的产品设计参与度，满足用户真实需求。3. 翻一翻玩法规则每周一期，每期 9 本赠书，每周二中午更新，普通用户可翻 3 张卡，每张卡可领取一本赠书，无限卡会员可翻 6 张卡。功能价值「翻一翻」是促进用户激活的有效方式，通过游戏化风格的设计，每周精选 9 本书籍赠送给用户，吸引用户开始阅读，培养读书习惯。策略推导充分利用了互惠原理、稀缺和多变性的酬赏，激发用户兴趣，培养用户习惯。组队1. 组队抽取无限卡玩法规则每周一期，每周六更新，用户需要邀请 1 个好友才有资格参与；组队成功后，每周六中午 12 点公布中奖信息。功能价值「组队抽奖」是一个纯分享邀请的引流传播形式，利用「终身无限卡」为诱饵，激发用户组队抽奖，其次抽奖规则门槛也高，有效避免用户利用规则漏洞重复参与。策略推导充分利用互惠原理，人人皆可组团，团长更能额外获得多一次机会，从而充分调动了团长拉新引流的积极性。2. 组队读书玩法规则三人成队，一起读书，以「无限卡」、「抽奖」为诱，21 天为一个积分周期，根据每期的最终积分读书小队还可以晋升等级，兑换更丰富的奖品。功能价值「组队读书」是促进用户激活、留存的重要方式，以组队读书的形式，用户不仅可相互监督，还极大提高了活跃度。策略推导⑴利用独具创意的设计方式，把一个人读书变成了三个人一起读书，极大提高用户活跃度和忠诚度；⑵每周发布不同的共读任务，以21天为周期的比赛机制，通过奖品酬赏，让小组成员之间自发相互监督，有效激活未付费用户，彻底培养用户读书习惯。邀请1. 联名卡玩法规则每周精选 6 本好书，每周四更新，用户分享至微信好友或朋友圈集齐 2 个赞可获得 2 天无限卡，每期最多可得 12 天无限卡。功能价值「联名卡」是鼓励用户分享传播的有效方式，通过分享集赞的方式，可兑换相应的无限卡天数，进一步激活用户变现。策略推导颜值超高的海报设计搭配传神的文案，让用户更主动参与传播，形成人际型触发，老用户带新用户，无限增长。2. 邀请微信朋友玩法规则用户邀请朋友和 30 天未阅读用户阅读可以获得 3 天无限卡，成功邀请多人奖励可累积。功能价值「邀请朋友」是鼓励用户拉新和唤醒活跃度极低的用户一个方式，用户行动成本低，酬赏不高，但可以有效激活用户传播。策略推导自动生成了用户读书时长和读完书籍，通过这样有趣而又取巧的设计，利用社交酬赏，激发用户主动邀请好友，双向倒逼，一举两得。读书1. 阅读时长功能价值根据用户每周的阅读时间，为用户生成当周的读书时长统计，用户还可以按月、按年的时间查询历史读书时长。这个功能对用户的留存有极大的帮助，是提高用户满意度和忠诚度的重要方式。策略推导⑴右上角点击分享后，可以分享给好友，可以生成当周的读书海报，可以设置为「微信状态」，从而帮助用户获取社交认同，引流推广。⑵为用户提供全面直观的数据分析，用户可按天、周、月查看读书分析，还可查看「年度读书报告」，像一部留声机，储存着用户的读书回忆；底部展示本周读书的详细记录，包括「读过的书」、「阅读字数」、「留下的笔记」，通过如此直观具象的设计，让用户尖叫。⑶设置了「阅读奖励」，拆分成不同的阅读小任务，培养用户的读书习惯，从而进一步寻找机会激活变现。2. 读书排行榜功能价值「读书排行榜是」据用户每周读书时长自动生成的，目的是通过好友之间的排名，利用用户的攀比心理，激发用户读书，提高用户读书时间，培养用户习惯。策略推导利用赠券效应，「读书时长」可兑换阅读福利；通过排名，利用攀比心理，激发用户增长阅读时间；右上角可生成读书排行榜海报，传播引流。3. 勋章功能价值微信读书的勋章体系非常丰富，包含了「连续阅读」、「阅读时长」、「阅读天数」、「阅读书籍」、「读完书籍」、「收到的赞」和「想法」发布七大类型，充分激发用户读书兴趣，留存用户，培养用户习惯。策略推导⑴「勋章」体系分类非常有创意，根据时间的维度有「连续阅读」、「阅读时长」、「阅读天数」，这是对用户阅读时间的酬赏；根据阅读书籍数量有「阅读书籍」、「读完书籍」，这是对用户阅览群书的酬赏；根据想法和点赞，又有「收到的赞」和「想法发布」，这是对用户的内容投入进行酬赏。通过如此多维度的设计，多变性的酬赏，从而提高用户新鲜度、活跃度和忠诚度。⑵点击右上角的分享，可分享给好友，还可同步微信状态，生成勋章海报，拉新引流。总结通过对「微信读书」的 11 种营销玩法的全面设计拆解，我们发现，作为微信的亲儿子，这个含着金钥匙出身的富二代，真是沿袭了腾讯系的产品设计套路，把用户彻底研究透了。充分利用了互惠、稀缺、社会认同、多变性酬赏等营销模型，让用户主动分享、主动学习、主动参与，最终培养用户形成使用产品的习惯，成为产品的忠实粉丝。上万字分析！6大方面完整分析「丁香医生」的产品设计一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。阅读文章 > 欢迎关注作者微信公众号：以琳设计。每月定期分享大厂APP分析和读书笔记资料包，也欢迎大家添加微信好友交流：本篇来源：优设网原文地址：https://www.uisdc.com/wechat-read
页面 用户 产品 前言在 B 端产品当中，我们经常看到五花八门的设计页面，很多人会质疑自己，这是 B 端产品的页面么？感觉品牌调性不太符合，B 端产品往往传达给用户的都是严肃、刻板，但是在同一个产品当中，同样会存在这样的差异。在浏览各大设计系统时，我们经常听到 B 端页面的具体归类，通常都会分为：表单页、列表页、详情页、结果页、工作台 等等…，但是除了这些维度进行划分之外，我们还可以从另一个角度去看待 B 端的具体页面。那今天就是我们要讲的，按照用户的专注维度去划分的三种 B 端产品的页面类型：“过渡页面、沉浸页面、配置页面”其实在我划分页面类型的本质上，是在对用户的不同姿态所去使用的专注度的思考。因为我们用户最终的使用姿态也就导致了，页面需要进行细致的分类。过渡页面为什么工作台总是五颜六色？花花绿绿？为什么我明明想要的是表格、表单，你却给我看这个花花绿绿的页面？为什么我不建议打工人的居住位置选择在公司附近？其实都可以通过过渡页面/场景进行解答。过渡页面，在设计中也就是用户不需要非常专注于某一个具体的页面。而用户在这些页面当中主要起到过渡的作用，也就是用户可以通过这些页面去寻找到他想要的内容。比如工作台/首页，它本质其实就是分发，也就是说在 C 端产品它分发的是用户流量，而在 B 端产品它分发的是产品功能。因此你会发现 B 端产品的工作台都是以各种各样花里胡哨的功能入口来展开的，即使是相应的图表，折线图，但通常情况下这些数据可以通过图表进入到对应的页面当中。因此它的本质都是提供给用户进入系统功能的入口。而花里胡哨则是通过颜色的区分，能够让他明确的知道我究竟要去到哪，要用什么功能？比如现在你打开 Sketch/Figma，它的页面当中总是花花绿绿。其实在它看来，这个页面就不是一个严肃，需要去沉浸的页面，而更多是让你找到你想要的信息内容。其实过渡页面的本质就是如同我们上班工作，每天都需要有一个通勤时间，比如 15 分钟、30 分钟，来去缓冲工作与生活，通过这样的方式来进行切换自己的工作状态，能够让你知道在哪些地方我需要格外专注、在哪些地方我们稍微放松。沉浸页面沉浸页面，顾名思义就是让用户更为投入的页面，我们再以 Figma 为例。你会发现 Figma 在首页当中，它的设计风格是非常跳跃、夸张的，而到了沉浸式场景当中，他的设计风格就是克制、聚焦。这究竟是为什么？其实这个和我们 B 端产品有着异曲同工的地方。在 B 端产品当中，你会发现，表单、表格，我们在设计这些页面的时候，考虑的不是如何设计其颜色、样式，想的更多就是在用户不被干扰的前提下，能够更加合理、高效展示这些信息。而这些页面在设计的时候其实就是一个沉浸页面，考虑的是从统一的页面布局，相同的交互形式，来对用户进行教育。这也是为什么你看 Sketch、Photoshop、Figma。这类相同类型的工具型软件，都拥有着相类似的信息布局方式，而我们再去做其他的 B 端系统时也会借鉴他们的布局方式。配置页面配置页面，也就是用户对于前台应用的相应配置，在 B 端系统当中就是我们常说的管理后台系统。在管理后台的设计当中，考虑的就不是如何布局、如何进行颜色突出，我们更多应该去思考如何降低用户的使用成本。常见的处理方式会有几类：可视化配置、帮助体系的建立、专业门槛的降低、产品模版的建立。这里就不展开讲了，里面会涉及到较多的细节。在接触到的任意 B 端系统的管理后台，都需要做到上面几点才能够算是一个合格的 B 端管理后台。比如在飞书的字段配置页面里面，你会发现就是如此。采取可视化的配置策略能够让你知道管理后台的配置结果，在前端系统的页面里面究竟应该如何展示。最后聊聊其实，最后你会发现，我们在文章里聊的其实并不是页面类型，而是你的用户它的使用究竟有哪些场景。虽然大家都在说 B 端，但 B 端产品本身就是一个复杂的结合体，它有着不同的页面、不同的，因此在设计上，我们更要格外小心。如何做好B端产品的信息设计？我总结了3个原则！最近在 12306 网站购票时，弹窗中展示了大段的文字信息，我只是匆匆扫了两眼就果断关闭了，实在没有耐心逐字读完。阅读文章 > 欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/b-end-page-type
用户 书单 产品 全文11250字，拆解页面80个，3大理论设计模型，100多个产品设计细节，通过对【微信读书】的设计策略推导，为你提供一份读书类APP产品解题宝典！序言1. 适合人群UI/交互设计师跳出执行层的思维，从产品设计策略推导过程中提升产品设计分析能力;产品经理/运营通过全面完善的产品设计策略推导、交互演示，获取读书类产品的设计参考；读书类产品从业者通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考；2. 推导目标通过对「微信读书」V6.2.2 APP 产品设计的拆解和策略推导，去思考总结一款读书类的 APP 应该如何设计，如何才能发展成一款用户习惯类产品，为相关的产品设计从业者提供一份产品设计策略参考，从而降低产品的失败率。3. 推导步骤第一步：产品拆解通过全面的设计拆解，深究「微信读书」的产品设计细节。第二步：策略推导结合增长模型、上瘾模型、社会心理学进行设计策略推导，分析「微信读书」为什么这么做。第三步：总结思考通过用户需求、动机、习惯分析，对「微信读书」的设计策略进行验证，从而输出产品设计参考。4. 分析模型增长模型由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。上瘾模型由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 社会心理学主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。用户需要什么样的读书 APP？据艾瑞咨询 2020 年发布的《中国数字阅读产品营销洞察报告》，数字阅读行业市场规模突破 200 亿，数字阅读用户规模突破 4 亿，如今市场上的读书类 APP 也数不胜数，但是用户为什么要读书，需要什么样的读书产品，读书类产品的设计到底面临什么难点，我将结合尼尔·法埃尔的上瘾模型以及 B.J.福格的行为认知学进行剖析和总结。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 1. 用户为什么要读书？痛点分析阅读前门槛高：读书需要时间，还要动脑筋去思考去理解，本身不是一件容易的事情，所以喜爱并能坚持的阅读的人很少。时间少：人们现在的生活节奏实在太匆忙了，从早晨到晚上，几乎都有做不完的工作，到了周末，又要陪伴家人或和朋友聚会，能静下心读书的时间实在太少。阅读中找书难：读书很重要，大部分人都能明白，但在有限的时间里不知道看什么书，看了又有什么作用，似乎和当下的工作、生活状态联系不上来。难以坚持：读书需要日复一日的坚持，一本再薄的书，最少也要花 3-5 个小时才能阅读完，而且如果只是零散的阅读，根本无法建立有效的知识体系，过了几日就彻底忘记。阅读后可感知价值不高：用户读的书太少，太过零散，所以对图书的可感知价值不高，读完以后也说不出获得了什么。难以学以致用：大部分人读书没有方法，没有系统化阅读，读完就忘记，所以无法学以致用。用户动机行为设计学的发明人美国斯坦福教授 B.J.福格，把用户的动机主要分为三类，第一种，追求快乐，逃避痛苦；第二种，追求希望，逃避恐惧；第三种，追求认同，逃避排斥。读书对大多数人来说，是一件枯燥乏味、耗费脑力、难以坚持的事情，所以大部分用户之所以读书，更多是为了追求希望。用户要追求什么希望呢？这是因为随着信息科技的高速发展，职场的压力越来越大，对人才的要求已经越来越高，这个时代需要更专业、更全面的人才，读书成了最好、最公平、最便宜的方式。所以这是用户选择读书的真正动机。期待酬赏酬赏也就是奖励，用户通过读书，可以获得什么奖励？这是用户选择读书的目的。社交酬赏通过读书，提升知识技能后，获取朋友、同行、领导的认可，在工作生活中也能把知识运用起来。自我酬赏通过读书，丰富了自己的精神世界，自己感到满足、开心、快乐。2. 用户对读书产品的需求时间需求移动互联网时代，用户的时间已经被切割成碎片，难以聚焦到某个集中的时间段进行阅读，更多是在等待客户会议结束的办公室里，在出差的高铁上，在加班回家睡前半个小时这样碎片化的时间进行阅读。设备需求必须是随时随地可阅读的手机 APP，多数用户已经没有耐心和时间通过笔记本或纸质书籍进行阅读了，即便 kindle 做得再好，用户在高铁啃着面包，带着 kindle 外出读书的场景已经一去不复返了。书籍需求书籍要齐全，多数用户是因为朋友推荐某本书，或因工作需求才会下载某个读书 APP，有目标性的阅读。体验需求产品的用户体验要友好，读书界面排版要规整，阅读不费劲，如果有小惊喜，那就更棒了。金钱需求多数用户并不排斥付费，甚至有很多人还有购买实体书阅读的习惯，对电子阅读的方式，更希望是物美价廉的价格。精神需求用户开始坚持读书后，除了书籍能给自身的帮助，还渴望获得更多的精神需求，比如对书籍的评论或观点获得认同，甚至希望能给外界留下自己爱读书、积极奋进的形象等等。3. 读书类 APP 的设计难点书籍版权首先你得拥有海量的书籍版权，如果你花了 100 元的广告费吸引了一个新用户在你的 APP 无法找到心仪的书籍，那么这个用户大概率就会失去了。书籍的版权成为读书类 APP 的最低门槛。用户时间对于读书类 APP，产品用户数的增长和数量不能成为评估产品是否成功的唯一标准。即便你有 2 亿用户，如果用户每周平均读书时间低于 10 分钟，那么这个产品也难以达到预期中的价值。如何鼓励用户读书，如何增加用户读书时间，才是产品增长的最大难点。用户习惯读书的本质是一个习惯行为，如果用户无法坚持，三天打鱼两天撒网，那么这样的用户也无法称为活跃用户、习惯用户，所以读书类 APP 最终的目标是建立用户读书习惯，让用户每天、每周坚持阅读。谁能让用户习惯自己，谁就能成为行业最后的胜者。4. 小结综上所述，大部分用户读书的真正动机是希望提升技能、学习新知识，从而在职场、生活中能够获取更多的认同，从而提升自己的核心竞争力。用户对读书产品真正的需求是便捷，在有限的时间里随时随地进行阅读。而读书类 APP 设计的本质和难点就是如何让用户习惯使用自己的产品进行阅读，这是一个抢夺用户习惯的赛道。微信读书设计策略推导1. 产品画像产品介绍「微信读书」是一款成长在微信土壤的阅读类 APP，以阅读+社交的设计理念，对读书类产品进行了颠覆式设计，不仅可以为用户提供电子书籍阅读、实体书籍购买，用户还可以发布读书想法、撰写读书笔记，志在为用户打造一个以书交友的平台——让阅读不再孤单。产品生命周期诞生于 2015 年的「微信读书」，目前已进入产品生命周期的成熟期。根据官方 2019 年中旬公布的资料，微信读书用户数已经超过 2.1 亿（到如今保守估计最少 3 亿）；而根据易观千帆 2021 年 4 月份的数据统计，月活跃用户人数已超过 2000 万。处于成熟期的产品，主要聚焦于用户的留存和变现，其次在功能和界面设计方面都已趋于稳定，更侧重于追求极致的用户体验。用户画像综合百度指数、易观千帆等第三方平台统计数据，微信读书用户人群普遍学历较高，以大学生、上班族、自由职业者为主，年龄较轻（20-35），生活在一线，主要分布在北上广深这一类一线大城市，喜欢在午间与睡前阅读。用户评价截止到 2022 年 4 月 15 日，微信读书在 APP Store 评分为 4.9 分，阅读类书籍排行第 3。微信读书结合社交的理念，对读书类产品进行了颠覆式设计，虽然褒贬不一，但用户对微信读书的评价相对较高。迭代历程截止到 2022 年 4 月 15 日，从含着金钥匙华丽诞生到现在，微信读书在过去 6 年多时间，从初期的阅读+社交初步试探，到要为用户讲一个好故事，最后到今天的让阅读不再孤单，已经进行了大大小小数百次迭代，最新的版本为 V6.2.2。2015 年 8 月 28 日正式发布 V1.0 版本，以阅读+社交理念初步探索；2017 年 5 月升级到 V2.0 版本，可查看公众号文章，支持有声读书；2018 年 9 月升级到 V3.0 版本，推出微信读书无限卡会员服务；2019 年 6 月进行 V4.0 升级，slogan 升级为看一个好故事，让阅读简单一点；2020 年 8 月升级到 V5.0 版本，支持在产品购买实体书；2021 年 10 月升级到 V6.0 版本，slogan 再次升级——让阅读不再孤单。产品拆解对「微信读书」的功能信息架构、核心页面进行全面的拆解，然后把功能按照增长模型划分为三大类，分别是「读书服务」、「营销工具」和「会员服务」，为策略推导做最后的准备。小结通过对产品画像的整理，我们了解了微信读书的基础信息，作为腾讯系设计开发的产品，有天生的成长优势，依托微信强大的用户基数和巨大的流量，这是一个含着金钥匙出生的富二代。而通过快 7 年时间的发展，它的用户数和活跃用户数应该是读书类 APP 产品的前列（由于没有真实数据的考证，只能结合已公布的数据进行判断）。2. 读书服务阅读功能价值「阅读」是微信读书 APP 的首页，根据用户兴趣和好友在读推荐相关的书籍和书单，形成千人千面的信息流，降低用户找书的时间成本，快速激活变现；其次通过多变性的设计，让用户保持对产品的新鲜感，极大提升用户留存率和产品满意度。策略推导1）头部展示用户「本周阅读数据看板」和「最近在读书籍」，直观醒目，又能让用户聚焦读书。2）根据用户兴趣推荐相关的书籍和书单，利用多变性的信息流，带给用户新鲜感，对用户留存有极大帮助；推荐好友在读书籍，利用从众心理，激发用户读书欲望。3）页面头部下拉后进入二楼，不仅节省排版空间，更能向客户快速传播促销服务，激活用户。书城功能价值「书城」是为用户提供找书、选书阅读的图书馆，包含了国内外众多知识领域的专业著作，比如经济理财、社会文化、历史文学等常见分类，其次还有男生小说、女生小说两大年轻用户喜欢的种类。「书城」是实现用户激活、留存和变现的重要方式。策略推导①书城首页1）用户可输入关键词对目标书籍进行快速检索（滚屏播放热门书籍），快速实现用户激活。2）向用户展示书城分类，「男生小说」和「女生小说」是利润产品，位置最靠前；「听书」是战略计划，为微信听书引流，形成闭环；「书单」为图书增加了功能和场景，减少读书的枯燥度，也降低了找书的时间成本；「榜单」根据热度划分，激发用户读书兴趣；「免费书」属于互惠促销，快速激活用户。3）利用神秘的多变性，根据用户在读、读过的书为用户推荐感兴趣的书籍；在右上角还设置了「摇一摇」的功能，用户每点击一次，推荐不同的书籍，帮助用户快速获取”猎物”，开始读书。4）图书根据上新时间、热度、价值划分为「新书速览」、「排行榜」、「热门推荐」、「重磅好书」，激发用户兴趣，降低找书成本。5）书单根据时间、功能划分为三类，分别是「每周书单」，「今日书单」，「专题书单」；「每周书单」包含了每周最受关注、每周搜索人数最多、每周评论人数最多图书；「今日书单」筛选了用户创建的热门书单；「专题书单」是针对某一个专题生成的图书合集；书单的目的是引导用户快速阅读，实现激活变现。② 图书详情页1）右上角分别为「听书」、「在读人数」、「分享」和「更多」。「听书」为机器阅读，体验虽差，但可满足不同人群的用户习惯；「在读人数」加入了社交属性，用户可查看在读朋友人数、本书阅读用户，可对朋友的阅读、想法进行查看、点赞；「分享」和微信全面链接，用户可把读书状态同步到微信状态，打造完美的外部触发，传播引流；「更多」里面，加入私密阅读，充分尊重用户隐私权。2）根据用户评分和图书热度，生成了「微信读书推荐值」，激发用户兴趣；其次通过「精彩点评」和「热门划线」，增强信任状，为用户选书做出参考。⑷通过全面完整的「图书详情页」介绍，持续增强信任状，打消用户顾虑；在底部可查看作者、出版社其他图书，关联了相关书籍，书单，实现阅读的小闭环。书架功能价值「书架」就像收藏夹，用户在阅读的时候，可以把图书加入到书架，方便阅读。「书架」可查看最近更新书籍、在读书籍、已读书籍、未读书籍，支持用户对图书进行分类，还可以创建书单分享。「书架」就是用户对产品的内容投入，可以有效帮助产品实现用户激活，培养用户习惯。策略推导① 书架页1）头部为「搜索」和「添加」，搜索框滚屏播放最新热门书籍；点击「添加」后，支持从电脑、icloud、微信导入书籍。2）TAB栏包含「默认」、「更新」、「进度」、「购买」和「分类」，满足用户可根据不同的维度查看读书进度。3）「书单」和「书架」为同一权重，主要是鼓励用户创建书单，为平台创造优质内容；用户可对书籍进行分类、移除、下载等，有效对图书进行管理。② 书单页1）用户可创建自己的书单，也可以搜索别人的书单；2）官方根据用户创建的书单，精心筛选，解决用户找书难的痛点；3）用户可对书单评论、收藏，给书单创建者赐予社交酬赏，形成闭环，从而创建更优质的内容。读书功能价值「读书」是指用户选定书籍以后开始进入阅读。「读书」加入了腾讯土壤的社交基因，提供了丰富多样的功能，如想法、划线、个性字体、个性背景，在读书的同时可以和书友一起讨论交流。「读书」是培养用户习惯，让用户对产品上瘾，实现用户留存的重要方式。策略推导① 读书页⑴用户进入阅读，「未加入书架」会进行强提醒，避免用户再次寻找；用户可把图书加入「购物车」，除了开通无限会员卡阅读，还支持电子图书、纸质图书购买，快速变现；利用羊群效应，展示朋友在读人数和阅读总用户数；「分享」支持同步到微信个人状态，微信看一看，引流推广；点击「更多」，系统提供了自动阅读、下载到本地阅读等方式，还提供了私密阅读、隐藏想法等充分尊重用户自主权的功能。⑵用户可根据自己习惯切换到「听书模式」;可快速进入图书关联的「小圈子」，和书友进行交流分享；鼓励用户输入「想法」，和书友交流学习。⑶点击可查看图书「目录」，快速跳转；提供「笔记」和「划线」功能，帮助用户记录，同时也增加用户投入；可自由拖动读书进度，切换「自动阅读」模式；提供多种读书背景，支持会员使用特殊皮肤，诱发变现；用户可自由调节字体类型，字号，边距，行距，还提供多种字体效果，支持会员使用特殊字体，诱发变现。⑷当前页面用户发表的想法可快去查看，用户可进行评论、点赞、转推；用户对图书进行划线后，可对划线进行评论、点赞、分享。② 尾页图书读完后，关联对应的「小圈子」，形成小闭环，目的是利用社交酬赏，抢夺用户时间，把用户留在微信读书；为用户推荐相似书籍，引导用户继续阅读，开始下一个读书闭环。③ 结束页⑴标记完结，自动生成海报，利用社交酬赏，引导用户分享传播。⑵系统展示精选读书笔记，激发用户对图书撰写高质量读书笔记获取点赞、转推。小圈子功能价值「小圈子」是一个为书友提供交流学习的社区，用户可以加入不同主题的小圈子（官方创建），发表想法，点赞评论分享。「小圈子」可以帮助产品实现用户留存，提高用户活跃度。策略推导⑴根据不同的主题，官方创建不同的兴趣圈子，用户可根据兴趣加入，可以发布想法，点赞评论，获取社交酬赏，提升用户活跃度。⑵用户在发表想法的时候，可以关联官方创建的主题，形成话题，丰富圈子内容，反向吸引用户，打造优质、健康的社区氛围。朋友的想法功能价值「朋友的想法」继承了微信朋友圈的基因，好友在看书所发表的想法会同步更新，朋友之间可进行转推、评论、点赞，获取社交酬赏，有效提高用户活跃度。策略推导为了节省用户时间，丰富产品内容，提高使用频率，用户的读书想法默认同步至想法圈；用户发表的想法自动关联书籍，好友可直接进入阅读，降低使用成本。笔记功能价值「笔记」就是用户对产品的数据资料投入，当用户在阅读一本书的时候，会做大量的笔记，随着笔记越来越多，用户对产品的依赖度就越来越大，从而彻底习惯产品，变为忠实用户。优化建议从当前版本来看，笔记的功能还略显单薄，还未能充分吸引住用户产生更多的投入。小结从读书服务这个板块来观察，微信读书的产品设计理念就是把读书和社交充分结合，利用微信土壤无与伦比的优势，全面连接微信生态，把读书这件略显枯燥乏味的行为，打造成一个可随时交流沟通、以书交友的平台。3. 营销服务每日一答玩法规则「每日一答」有两种玩法，第一种是用户每天可以进行回答挑战，连续答对 12 道题目后可参与「瓜分无限卡」、「书币」的机会，答错则丧失机会，但可以通过「复活卡道具」或分享给好友请求帮忙获取复活机会；第二种是「问答 PK 比赛」，采用赛季制，持续时间为两个月，用户可邀请好友或随机对战，胜利者可赢取积分，赛季结束后根据积分决胜出总冠军，最终给与玩家不同的奖励。功能价值「每日一答」从 APP 直接跳转到微信，不仅操作体验方便，更能结合微信生态引流传播，打造全民学习答题的读书活动。其次通过丰富多变的游戏化方式，保持对用户的新鲜感，形成读书-娱乐的小闭环，抢夺用户时间，提高用户留存率，增强用户满意度、忠诚度，是培养用户对产品形成习惯的重要方式。策略推导⑴「积分」的玩法非常丰富，不仅可以「抽奖」，「兑换无限卡」、「道具卡」还可以直接兑换书籍，为用户提供了多变性的猎物酬赏。⑵进入「每日一答」，用户可选择「瓜分读书天数」（以读书时间为诱）或「书币」（以钱为诱）两种形式的问答；「排行榜」分为好友排行和全网排行，通过排名机制，以社交酬赏为诱，吸引用户积极参与问答，从而提高用户习惯度，成为忠实粉丝。⑶利用稀缺性，用户每天只有1次机会回答机会，但如果回答错误，可通过使用「续命卡」或邀请朋友解答的两种形式进行复活；用户闯关失败后，用户还可通过「书币购买」、「看广告复活」、「邀请朋友」玩游戏复活，通过这样多变、丰富、游戏化的答题形式，彻底让用户主动分享传播，拉新引流。⑷「问答PK」的设计非常创新，有别于很多答题竞猜的的单机游戏模式，微信读书采用了体育比赛的赛季制度，让用户像踢比赛一样参与，每个赛季时间为2个月，通过PK，决胜出赛季总冠军，刺激又好玩，让用户彻底上瘾。免费领书功能价值用户可通过分享领取图书，也可以通过阅读 5 分钟并加入书架后领取，这对未付费用户的激活和新用户的引流有很大的帮助。策略推导根据用户读书记录、兴趣推荐，激发用户兴趣；用户阅读 5 分钟加入书架也可赠送，有效促进未付费、未形成习惯的用户激活；多变性的设计，每天能领取的图书都不一样，给用户始终保持神秘感。无限会员日功能价值每周一为「无限会员日」（无限会员就是微信读书的 VIP 会员），用户可进行免费抽奖，并为自己最想要的「会员权益」投票。这是新用户激活、老用户留存的好方法。通过「抽奖」、「会员权益」吸引新用户购买无限卡，其次给与老用户充分的自主权，让他们来参与产品设计，极大提高用户的活跃度和忠诚度。策略推导充分利用稀缺性，每周 1 次，每次也只能抽奖 1 次；结合游戏化风格设计，模拟真实的老虎机交互效果，生动又有趣；通过调研，调动粉丝的产品设计参与度，满足用户真实需求。翻一翻玩法规则每周一期，每期 9 本赠书，每周二中午更新，普通用户可翻 3 张卡，每张卡可领取一本赠书，无限卡会员可翻 6 张卡。功能价值「翻一翻」是促进用户激活的有效方式，通过游戏化风格的设计，每周精选 9 本书籍赠送给用户，吸引用户开始阅读，培养读书习惯。策略推导充分利用了互惠原理、稀缺和多变性的酬赏，激发用户兴趣，培养用户习惯。组队抽取无限卡玩法规则每周一期，每周六更新，用户需要邀请 4 个好友才有资格参与；组队成功后，每周六中午 12 点公布中奖信息。功能价值「组队抽奖」是一个纯分享邀请的引流传播形式，利用「终身无限卡」为诱饵，激发用户组队抽奖，其次抽奖规则门槛也高，有效避免用户利用规则漏洞重复参与。策略推导充分利用互惠原理，人人皆可组团，团长更能额外获得多一次机会，从而充分调动了团长拉新引流的积极性。组队读书玩法规则三人成队，一起读书，以「无限卡」、「抽奖」为诱，21 天为一个积分周期，根据每期的最终积分读书小队还可以晋升等级，兑换更丰富的奖品。功能价值「组队读书」是促进用户激活、留存的重要方式，以组队读书的形式，用户不仅可相互监督，还极大提高了活跃度。策略推导⑴利用独具创意的设计方式，把一个人读书变成了三个人一起读书，极大提高用户活跃度和忠诚度；⑵每周发布不同的共读任务，以21天为周期的比赛机制，通过奖品酬赏，让小组成员之间自发相互监督，有效激活未付费用户，彻底培养用户读书习惯。联名卡玩法规则每周精选 6 本好书，每周四更新，用户分享至微信好友或朋友圈集齐 2 个赞可获得 2 天无限卡，每期最多可得 12 天无限卡。功能价值「联名卡」是鼓励用户分享传播的有效方式，通过分享集赞的方式，可兑换相应的无限卡天数，进一步激活用户变现。策略推导颜值超高的海报设计搭配传神的文案，让用户更主动参与传播，形成人际型触发，老用户带新用户，无限增长。邀请微信朋友玩法规则用户邀请朋友和 30 天未阅读用户阅读可以获得 3 天无限卡，成功邀请多人奖励可累积。功能价值「邀请朋友」是鼓励用户拉新和唤醒活跃度极低的用户一个方式，用户行动成本低，酬赏不高，但可以有效激活用户传播。策略推导自动生成了用户读书时长和读完书籍，通过这样有趣而又取巧的设计，利用社交酬赏，激发用户主动邀请好友，双向倒逼，一举两得。阅读时长功能价值根据用户每周的阅读时间，为用户生成当周的读书时长统计，用户还可以按月、按年的时间查询历史读书时长。这个功能对用户的留存有极大的帮助，是提高用户满意度和忠诚度的重要方式。策略推导⑴右上角点击分享后，可以分享给好友，可以生成当周的读书海报，可以设置为「微信状态」，从而帮助用户获取社交认同，引流推广。⑵为用户提供全面直观的数据分析，用户可按天、周、月查看读书分析，还可查看「年度读书报告」，像一部留声机，储存着用户的读书回忆；底部展示本周读书的详细记录，包括「读过的书」、「阅读字数」、「留下的笔记」，通过如此直观具象的设计，让用户尖叫。⑶设置了「阅读奖励」，拆分成不同的阅读小任务，培养用户的读书习惯，从而进一步寻找机会激活变现。小结通过对营销服务的全面分析推导，我们发现，微信读书真是沿袭了腾讯系的产品设计套路，把用户彻底研究透了。充分利用了互惠、稀缺、社会认同、多变性酬赏等营销模型，让用户主动分享、主动学习、主动参与，最终培养用户形成使用产品的习惯，成为产品的忠实粉丝。4. 会员服务个人主页功能价值「个人主页」是用户对好友展示的落地页，它记录了用户在微信读书的全部投入，包含了「读书时长」、「粉丝数」、「获得的赞」、「收获的勋章」、「创建的书单」、「发表的想法」的等。用户不仅可以查看自己的读书历程，还可以生成海报向朋友分享，满足了用户的炫耀心理，从而激发用户更加努力读书，彻底养成习惯。策略推导⑴利用炫耀心理，详细展示了用户的「读书时长」、「收到的赞」、「粉丝数」和「勋章」，让用户可第一时间感知，诱发传播分享。⑵「书架」和「读完的书籍」只对关注的好友开放，充分尊重用户的隐私权，保证了读书的私密性，这也解释了为什么当有新用户关注的时候，需要用户确认。读书排行榜功能价值「读书排行榜是」据用户每周读书时长自动生成的，目的是通过好友之间的排名，利用用户的攀比心理，激发用户读书，提高用户读书时间，培养用户习惯。策略推导利用赠券效应，「读书时长」可兑换阅读福利；通过排名，利用攀比心理，激发用户增长阅读时间；右上角可生成读书排行榜海报，传播引流。勋章功能价值微信读书的勋章体系非常丰富，包含了「连续阅读」、「阅读时长」、「阅读天数」、「阅读书籍」、「读完书籍」、「收到的赞」和「想法」发布七大类型，充分激发用户读书兴趣，留存用户，培养用户习惯。策略推导⑴「勋章」体系分类非常有创意，根据时间的维度有「连续阅读」、「阅读时长」、「阅读天数」，这是对用户阅读时间的酬赏；根据阅读书籍数量有「阅读书籍」、「读完书籍」，这是对用户阅览群书的酬赏；根据想法和点赞，又有「收到的赞」和「想法发布」，这是对用户的内容投入进行酬赏。通过如此多维度的设计，多变性的酬赏，从而提高用户新鲜度、活跃度和忠诚度。⑵点击右上角的分享，可分享给好友，还可同步微信状态，生成勋章海报，拉新引流。消息功能价值「消息」是产品的外部触发，当用户收到评论、点赞时候，会第一时间通知用户；其次用户之间可以通过「私信」在线沟通，建立好友关系，增加用户的关系投入，从而培养用户对产品的使用习惯。关键发现在「私信」的对话窗口，点击「推送」图标，不仅可以把「书架」的书籍推送给好友，还可以通过「书城」搜索直接发送，这个功能充分结合了用户场景设计，体验非常棒。小结通过这个篇章的分析，我们可以感受出微信读书团队对用户读书这件事的理解已经不是传统意义的读书了。他们努力的不只是为用户提供超过上百万的书籍阅读，而是努力在把阅读彻底变成了一种生活习惯，你不仅可以查看每周的读书时长分析，甚至还可以查看两年前的读书记录和报告，这不就是一部记录成长的时光机吗？我的天啊，我感觉自己从忠实粉丝变成脑残粉了。5. 策略总结多变的酬赏微信读书设计团队已经把多变性的设计玩得炉火纯青了，无论是为用户推荐书籍，还是阅读这件本身比较严谨的事情，都能给用户随时保持新鲜感和神秘性。用户的读书行为，已经不是一个纯粹的阅读，而是以书交友、以知识分享为乐。便捷的阅读只是一个阅读页，微信读书也设计了无数个细节。不仅可以帮助用户做笔记、划线，还可以切换听书，查看或分享想法，甚至连读书的字体、背景都支持个性化定制，把阅读这件小事做到极致。高频的触发通过丰富的营销玩法、分享机制，在微信的生态，触发用户阅读的方法有上百种。你能想象当你看见你的同事微信状态显示正在阅读《增长黑客》的时候，你不思考接下来如何制定一个读书计划吗？用户高投入用户的高投入将会彻底提高用户对产品的忠诚度，因为用户在读书过程中会产生很多数据资料，比如划线、笔记、想法，甚至阅读时间、读完记录等，你能让一个在微信读书拥有 18 枚勋章、阅读时长超过 1000 小时的用户变成你的读书用户吗？比登天都难！写在最后的话写完整篇分析的时候恰逢第 27 个世界读书日，在《人民日报》等官方媒体都在号召全民读书的时候，作为一个需要每天输入大量知识并反复输出的创业者，我很庆幸，能通过读书 APP 让自己坚持每天阅读。而通过对微信读书的设计策略全面推导，我认为，微信读书真的是一款非常棒的读书类 APP，他们的产品设计策略不仅直击用户痛点，还进行了颠覆性的创新设计，不是给用户一辆跑得更快的马车，而是一辆可以加速到 400 码的法拉利！附录参考1. 参考书籍《增长黑客》-肖恩·埃利斯/摩根·布朗《影响力》-罗伯特·西奥迪尼《上瘾》-尼尔·法埃尔《福格行为模型》-B.J.福格2. 参考文章微信读书的终局：社群化-niko微信读书产品设计中的心理学-原住民让阅读不再孤独：微信读书产品体验报告-fantasy艾瑞咨询-2020 年中国数字阅读产品营销洞察报告从三大模型入手，拆解微信读书的11种营销玩法设计「微信读书」是一款基于微信关系链的阅读类 APP，以阅读+社交的设计理念，对读书类产品进行了颠覆式设计，旨在为用户打造一个以书交友的平台——让阅读不再孤单。阅读文章 > 超过5000字的产品笔记，揭秘微信读书是如何让人上瘾的！二手最近迷上了微信读书，上下班的地铁上，吃饭中，甚至是去个洗手间都要打开微信读书看一会，曾经用来漫无目的刷微博、刷新闻的零碎时间，现在慢慢的都被微信读书占据了。阅读文章 > 欢迎关注作者微信公众号：「以琳设计ElimDesign」本篇来源：优设网原文地址：https://www.uisdc.com/wechat-read-design
地址 工具 设计师 工欲善其事，必先利其器。好的工具可以有效的激发设计师的灵感、提升设计师的效率。我们准备做一个设计效率工具系列，整个系列将好的设计工具贯穿到完整的设计流程中，并结合日常我们使用的情况向大家做推荐。通常的设计流程分为日常的积累、研究分析、设计创作、测试评估、对外宣传这几个环节。此篇为综述篇，之后的篇章会针对不同环节进行深入的陈述。日常积累设计师日常除了应对当下的需求，每天可以拿出一定时间保持学习的习惯。不仅可以让我们紧跟最近的设计趋势、设计潮流、设计方法，也可以让我们潜移默化中得到提升。Panda｜ 全而美的设计订阅平台Panda 帮助设计师不错过每天的设计灵感和资讯，包括新的设计方法理念、流行潮流、也有一些新产品推出。我们可以把 Panda 替换 Chrome 主页，每次打开浏览器页面都可以随时看到最新的设计资讯。一些英文的订阅也可以用 chrome 浏览器的翻译功能可以粗略查看。地址： https://app.usepanda.com/#Topys｜ 创意内容平台全球顶尖创意内容平台，作为中国成立最早、最受欢迎的创意垂直网站，以 “Open Your Mind” 为宗旨，始终专注在全球创意、艺术、灵感、人文领域寻找最有质感的声音。地址： https://www.topys.cnVoicer｜分享生活和设计的美学我们总在生活中与「一瞬间的感动」相遇。Voicer 的理念即是发现这「感动」， 将它传递给更多热爱生活的人们。内容包括创意内容品牌、在线杂志等。致力于分享生活和设计之美。地址： https://www.voicer.meDesign better｜优质设计读物网站涵盖设计商业思维、产品设计原则、设计系统等关于推动设计团队前进的实践读物，同时提供 PDF 和有声格式。地址： https://www.designbetter.co研究分析设计师在调研过程会研究用户、记录用户的行为和需求，会使用一些高效的记录工具。同时繁多的调研的信息需要汇总整理，协作整理，这里会推荐一些记录和整理的工具给大家。Noted｜录音笔记好工具Noted 是一款将录音和笔记相机相结合的软件。我们做访谈用户或做会议纪要的时候，经常错过记录的内容，如果通过一些软件录音的话，后期回听需要比较多时间成本。Noted 可以在记录笔记的同时记录输入文字的时间点所对应的录音，输入的每个字的时间点都会对应到。当内容没记录下来时可以随时跳到对应时间的录音进行回听，方便在漫长的录音文件中快速检索。地址： https://www.notedapp.io/MarginNote｜文献收集箱重塑学习方式的阅读笔记工具，更加高效阅读书籍和学习，可以在阅读时摘录笔记，制作学习卡，提取关键词，根据笔记生成思维导图，梳理知识框架。非常适合阅读专业书籍，阅读论文以及复习。地址： https://www.marginnote.com/chinese/homeGoodNotes｜手写笔记一款功能强大的手写笔记软件，拥有多种笔记封面和纸张模板可以选择，支持自定义模板，可以简单处理图片，可以导入 pdf、ppt 等文稿并做标记，也适合做电子手账。地址： https://www.goodnotes.com/zh-cn腾讯文档｜在线协作调研阶段方便多人一起搜集资料和汇总，多人同时在线编辑，内容实时同步。随时随地高效协作，轻松创作。地址： https://docs.qq.com/homeXmind｜思维导图功能强大的思维导图软件，极简设计，流畅体验，多种结构图风格选择，方便资料的汇集和思路的整理。地址： https://www.xmind.cn设计创作当设计目标确定时，接下来进行具体的创意设计。设计师除了通过脑暴进行发散方案以外，一些高效的设计工具可以让我们事半功倍。1. 灵感搜集Collect UI｜ 界面灵感UI 设计灵感库，基于 dribbble 平台精心挑选优质内容，提高效率便捷，为设计师提供专项更好的灵感。同时支持邮件订阅推送。（需要梯子）地址： https://collectui.comAdobe Color｜ 配色灵感Adobe color 不仅从各个维度解决了我们的配色需求，同时也提供找图需求。其中包含 9 种智能调色模式可以选择。拾取主题色、拾取图片中的渐变色、协助工具可以合理帮助检查不同颜色的对比、探索 behance 趋势。地址： https://color.adobe.com/zh/createUseanimations｜ 图标动效灵感图标动态效果库，当绘制的图标需要一些巧妙的微动态效果时可以参考。地址： https://useanimations.com/index.html2. 灵感搜集FigmaEX｜ 插件可视化当插件特别多时候，FigmaEX 极大的改善了 Figma 中使用插件的体验，将插件可视化。可以进行展开，同时显示插件的名称与图标。可以通过拖拽调整插件的顺序，调节高度。地址： https://moonvy.com/figmaEX/Autoflow｜ 流程图插件输出交互设计稿的时候，方便快捷的在不同画板之间连线，提升输出效率。地址： https://www.figma.com/community/plugin/733902567457592893/AutoflowSkewdat｜ 倾斜插件这是一个非常简单实用的 Figma 插件，它可以帮你将任何形状元素倾斜过来。地址： https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprioUndraw｜ 插画素材最棒最全的插画库，支持快速搜索，一键调整颜色。地址： https://undraw.co/illustrationsMagic Eraser｜轻松移除杂物一款免费的在线服务，它通过 AI 自动去除图片中不需要的部分，只需要上传图片，等待几秒钟即可。用鼠标把不要的部分划掉，松开鼠标就会闪几下，被划掉的部分就消失了，比如去水印之类的小东西，如果用 PS 的图章，估计要十来分钟，而用 Magic Eraser 就几秒钟，简单易用，推荐使用。地址： https://www.magiceraser.io3秒无痕修图！在线黑科技修图神器 Magic Eraser大家好，我是和你们聊设计的花生~抠图和修图是每个设计师都必须花时间处理的日常工作，它们虽然难度不高，但需要处理的频次不低，所以很多时候我们都会借助智能工具来处理。阅读文章 > 3. 设计验证Checklist Design｜ 设计清单设计输出后可以通过这个清单去做最后的检查。网站列举了一些通用场景（页面、元素、流程、主题、品牌）下的基本设计要素。可以检查你的设计在这些场景下是否符合规范。样式、颜色、命名、易用性等是否合适。地址： https://www.checklist.design/?ref=prototyprio测试评估Hawkeye｜ 眼动追踪工具一般的眼动跟踪设备比较昂贵，使用繁琐。这个名为鹰眼的眼动追踪 APP，可以通过手机前置摄像头捕捉用户在使用产品时的视觉动向。地址： https://www.usehawkeye.com/?ref=prototyprio2. 评估还原CoDesign｜ 腾讯自研设计协作平台覆盖产品经理、设计师、工程师协作需求。设计交付更轻松，有效管理和使用设计资产。地址： https://codesign.qq.com/Pixel Eye｜ 高效视觉还原在项目上线前设计师都会对最终的产品实现效果进行走查，以保证设计还原的准确性，体验的流畅性。这是一款视觉还原工具，帮助前端工程师在页面重构阶段就能快速发现开发稿与视觉稿的差异，实时对比、实时修改，减少工程师与设计师的沟通成本，提升整体开发效率。Pixel Eye 暂未对外开放，敬请期待。对外宣传1. 效果展示Mockup World样机的类型全面而且免费，综合质量很高。地址： https://www.mockupworld.cols.graphics素材非常优质精美，有免费和付费的资源。地址： https://www.ls.graphics/#UI2. 在线作品集制作Portfoliobox针对设计师或者创意人员的作品展示工具，可以直接在网页浏览器中搭建属于你的作品展示平台。地址： https://www.portfoliobox.net/cn/结语此综述篇大家有了比较整体的了解，在设计流程中每个环节介绍了一些比较好用的工具，后续的设计工具系列文章会针对某一环节进行更深入的探索。这 4 款工具，让设计师工作效率提升 200%！大家好，我是和你们聊设计的花生~作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人，我经常会遇到这样一些工具——作为设计师的我们不会经常用到，但是要急用的时候又不太好找。阅读文章 > 这 5 款工具，让设计师工作效率提升 200%！（二）大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器，收到很多小伙伴反馈说非常有帮助。阅读文章 > 欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/practical-software-trend
极光 背景 明度 作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。极光风趋势的来源极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。UI 场景中的极光风设计由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 1. 强化导航栏设计的视觉感如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。2. 强化个人中心顶部视觉区域随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。3. 丰富背景设计的视觉感除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。4. 点缀弹窗设计局部极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。5. 强化卡片式设计局部卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。6. 突出搜索设计的差异化搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。7. 分类标签的装饰设计这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。8. 图标设计中的运用运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。9. 深色卡片色彩强化以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。10. 作品包装中的背景强化除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。11. 其他场景中的应用普及在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。实现极光风设计的方法通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。方法 01：利用不透明度渐变融合不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。方法 02：利用模糊度变化融合这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。方法 03：利用背景模糊融合背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。方法 04：利用图片模糊融合以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许会带来意想不到的效果。除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。极光风案例实战小结研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。2021 年，UI设计师最值得跟进的新趋势「极光风」编者按：如果你有关注设计趋势，那么你一定会知道新拟物化和玻璃拟物化这两种近年被提出的设计风格，而最初提出它们的，就是著名的设计师 Michal Malewicz，他如今俨然已经是设计圈内的趋势观察家。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/aurora-ui-design-trend
蝙蝠 大卫 电影 诺兰的蝙蝠侠三部曲中的蝙蝠车 Tumbler 可能是蝙蝠车历史上最没蝙蝠特征的蝙蝠车。当第一部《蝙蝠侠：侠影之谜》刚刚上映的时候，还有不少人诟病这辆蝙蝠车不够「蝙蝠侠」，但是随着系列作品的推进，这款「现实主义风格蝙蝠车」逐渐得到了广泛的认可，甚至直接影响了后续几代蝙蝠车的设计。《蝙蝠侠》电影设计美学的源头，竟然都始于蝙蝠战车！你也许看过很多蝙蝠侠的故事，漫画，剧集，电影，在所有的故事当中，蝙蝠侠这个角色的出现，都会从那个小巷开始：一次莽撞的抢劫，手枪枪响，珍珠项链散落满地，死亡，尖叫，惊恐，失神，然后一个名为蝙蝠侠的角色由此诞生。阅读文章 > 超人气的蝙蝠战车是如何创造出来的？揭秘背后设计稿！相比于诺兰前传三部曲的「写实感」，扎克·施耐德的这3部 DC 电影似乎排名并没有那么靠前，甚至口碑也没有那么的神，但是在美术风格、视觉设计上，口碑是无可撼动的。阅读文章 > 在拍摄完成之后，电影中饰演瑞秋的女演员 凯蒂·霍尔姆斯 面对 Tumbler 直言：「当我看到这个玩意之后，我终于了解男人对于车的痴迷。」那么Tumbler 的诞生过程到底是怎样的？下面我们具体聊聊。没看过蝙蝠侠漫画的诺兰和之前提到的两位导演不同，诺兰在拍摄蝙蝠侠之前，其实从未读过蝙蝠侠的漫画，这个有着接近一个世纪历史的角色，经历过数次重启，有着成吨的历史和无数供粉丝津津乐道的细节。好在负责和诺兰对接的编剧大卫·高耶对于这个角色有着相当深入的研究。「克里斯从未读过漫画。他不了解这个漫画里的世界。所以他相信我在那团队中能够帮他掌控好经典的元素：什么东西可以修改的，什么东西不能碰。」大卫·高耶在接受 indiewire 访谈的时候，回忆说。所以大卫干脆为诺兰写下了蝙蝠侠这个角色绝对不能更改的10件事情：「我定下了关于蝙蝠侠和超人绝对不能修改的10件事情，我把它们写下来，对克里斯说，这就像十诫一样，只要我们尊重这10个规则，咱们就不会有问题。」实际上，拥有版权的华纳在找上诺兰之前，已经陷入困境了——他们尝试不同的蝙蝠侠和反派的组合来开发电影，但是这些尝试相继失败。而正是这些失败给了诺兰机会，诺兰选择从布鲁斯·韦恩回到哥谭市成为蝙蝠侠之前的几年的故事入手。「如果我们只是把这个漫画故事当作一个真实的故事来讲述，而不是在虚构的漫画世界中发生的事情呢？」诺兰对于蝙蝠侠系列的「不熟悉」恰恰让他对于这个系列电影不会有粉丝的「偏见」。而大卫·高耶对于这个角色的深入理解，则和诺兰的构想产生了有趣的化学反应。蝙蝠车：功能应当重于形式在剧本开发早期，蝙蝠车尚且没有一席之地。「但是从情感上来说，如果没有蝙蝠车，那么自就不存在蝙蝠侠。」大卫·高耶对于诺兰的这一想法是认同的，诺兰在此基础上强调：「我们要如何让（蝙蝠车出现的）叙事变的可信？」而高耶对于这一问题经过了深思熟虑：「蝙蝠侠不应当为了帅而做任何事情，他的所有装备都应当是功能重于形式的。」「我们必须解释一切，布鲁斯韦恩之所以成为蝙蝠侠的缘由。他没有超能力，他不会神奇地变成一个英雄，他拥有普通人的身躯，但是有技术，有钱——富有就是他的超能力。」「一个隐藏身份的人自己制造一辆超级战车，我们认为是不可信的。所以，如果这辆车来自他父亲公司为军方定制的军用车辆，但是又被封存起来了，这件事情就显得自然可信得多。」对于蝙蝠车，诺兰自己有清晰的构想——它摩登现代，是一辆穿行在城市中的高速坦克。「因为在我脑中，对于蝙蝠车，有非常具体的、贴合当前时代的感觉，我希望看到蝙蝠车的人能够对于这部电影的气质，有非常具体的感知——也就是这个故事架构在更为真实的世界当中。」「蝙蝠车应该是兰博基尼和悍马的复合体。」Nathan Crowley 的快速原型诺兰提出需求，负责将需求具现化的人，是制片设计师/艺术总监 Nathan Crowley。Nathan 和 诺兰的第一次合作的作品是 2002 年的惊悚片 《失眠症》 。这次合作之后，两人建立了紧密的私人关系，而当诺兰得到华纳授意，开始筹备新蝙蝠侠系列的时候，他第一时刻联系了 Nathan，并邀请他前去家里吃午饭。关于这次特殊的午饭，Nathan 回忆说：「从我去他家吃饭开始，克里斯就在提重拍蝙蝠侠电影的事情，当时他笃定的状态仿佛整部电影都已经拍好了一样……他逐渐开始详细解释他更具体的想法。我记得那次午餐之后，他所提出的想法让我非常兴奋——因为他说他认为开始阶段最重要的事情之一，就是重新设计蝙蝠车。」第一版原型。底部为最终版的对比，整体轮廓的延续性显而易见。蝙蝠车是蝙蝠侠的另外一面。在和大卫高耶的最初沟通中，诺兰也提到了，蝙蝠车是兰博基尼和悍马的复合体的构想，这一点得到了大卫的支持。诺兰甚至使用油泥自己捏了一个大概的轮廓出来。随后，Nathon 拿到了诺兰的蝙蝠车「原型」。于是，当天下午， Nathon 开始了一场疯狂的采购：「那是一个星期五，我去玩具反斗城买了一堆玩具车（笑），我在自己的工作室把所有的玩具车都拆碎为零件。克里斯曾提及希望它是兰博基尼和悍马的混合体，所以我就从这个构想入手，混搭出了第一个版本的原型。然后我将这个奇怪的混合体放到克里斯的家门口。」「在玩具设计领域，当您使用现有零件制作新玩具时，这称为 kluging 或 kit bashing。」Nathon 在一次访谈中解释过这种设计方式的「行话」。值得一提的是，在国内的模型圈子中，这种做法一般被称为「杀肉」。Nation 很显然在反斗城里不止买了一堆车。虽然车体上的零件来源复杂，但是整个车体的外轮廓的塑造过程中，使用了兰博基尼 Countach 的整体框架作为主体：驾驶舱的部分则来自于 P-38 闪电式战斗机的玩具模型，为了重塑车体前端的「内八」式悬挂系统，也借用了 P-38 两侧的引擎外壳来进行塑造：「……之后，他打电话跟我说，我们把车库改成艺术部门的工作室吧，然后我们该想想具体怎么拍摄这部电影了。」Nathon 回忆说，之后，他和诺兰一起在这个带有传奇色彩的工作室内蝙蝠车的原型，耗上了整整8周的时间。在诺兰家车库继续迭代作为诺兰诸多电影的艺术设计的「起点」，诺兰家的车库在电影圈里是一个传奇般的存在。而这个车库被用起来，则始于这部《蝙蝠侠：侠影之谜》。在诺兰的反馈之下，Nathon 对第二版的车身进行了调整，原本连接前轮的悬挂接近完成，原本看起来单薄的车轮被替换成了更加厚实的版本，车身后半段加入了更多的开合结构和细节，如同战斗机一样，不过驾驶舱依然沿用了之前的单人模式，并且位置更加靠前，确保视野：通过第三版的迭代，车身的轮廓大体就不变了。在第四版的修正当中，战斗机驾驶舱被双人并排位替代，原本的条形驾驶舱结构则「退化」为一个小小的车头，延伸到两个前轮之间的位置。原本车身上看起来无意义的细节也被扰流板所替代，参差的轮廓也被形同隐形战斗机式的一体式几何外甲覆盖，看起来更加富有科技感，仿佛真的可以「低空飞行」：虽然 Nathon 曾在后续的纪录片中声称前后大约做了5版的原型，但是最终我们能看到的原型，大概就只有上述的几个。此时的蝙蝠车的轮廓和细节的设计，已经确定，最终被制造出来的真实车体，和这个模型大概有9成相似。这辆后来被命名为 Tumbler 军用车辆，自此问世，随后它需要从微缩模型变成真实存在的车辆。「我们决定不用数字建模的方式来呈现它，你在屏幕上看到的每一帧画面里，都将是一辆真正的汽车。」Nathon 说道。另外，在这个车库里，诺兰兄弟（诺兰的弟弟乔纳森诺兰负责了分镜）和 Nathon 不止创造了Tumbler，此后的3个月里，他们探讨了很多剧情、场景的走向，并且使用手工搭建的微缩模型来辅助呈现：将模型带进现实通过了华纳高层的审核之后，诺兰带着剧本和模型回到英国，开始找到特效和道具团队，开始构建这辆真实的蝙蝠车。这辆 Tumbler 最终是由电影汽车工程师克里斯·科博尔德和安迪·史密斯在英国制造完成，这个过程完全是从零开始的：Tumbler 的主要动力来自一台 500 马力的雪佛兰 350 V8 引擎，通过钛合金车轴驱动四个 44 英寸 Super Swamper 轮胎。在搭建过程中，他们会不停地测试车体的各方面性能，包括在不同的路况下、不同天气、不同路段上的驾驶：他们竭尽全力让这辆蝙蝠车贴合真实车辆的设定：宽 9 英尺，长 15 英尺，重量为 2.5 吨，但仍然能够在 6 秒内以加速到60英里/小时的速度，Tumbler 最高时速为 110 英里/小时。由于在设定上这是一辆「桥梁架设车」，在剧情中也需要这辆车拥有跳跃功能，所以工程师在测试后期，想到了一个办法，他们在车底增加了一组可以瞬间向下出力的弹射踏板：同时，借助流线型的车体和尾部的可动式扰流板，来提升整车的空气动力学性能：这种独特的设计，让这辆蝙蝠车使其能够进行高达 30 英尺的无辅助跳跃，真正意义上还原了设定。故事还未结束当然，Tumbler 本身的研发故事远不止上面提到的这些。诺兰和 Nathon 在拍摄第二部《暗黑骑士》的时候，受到到华纳高层的启发，将蝙蝠摩托 BatPod 隐藏在 Tumbler，并且为了保密避免被媒体知道，还曾偷偷去片场卸了 Tumbler 的轮胎带会工作室去测试 BatPod 用。而第三部中的飞行载具 The Bat 其实是不能真的飞起来的，这一点属实有点超出剧组的工程团队的能力了。故事还有很多，如果你愿意挖掘，你能从他们设计到落地的过程中发现很多有趣和值得借鉴的地方。终于写完了。参考来源：http://www.batmobilehistory.com/art/nolancrowley.phphttps://nofilmschool.com/dark-knight-production-designhttps://www.indiewire.com/2013/09/david-s-goyer-says-he-had-to-tell-christopher-nolan-what-the-batman-canon-was-for-the-dark-knight-trilogy-93286/http://rarwrites.blogspot.com/2012/04/five-amazing-batmobile-concept-designs.htmlhttps://collider.com/the-dark-knight-trilogy-nathan-crowley-interview-batmobile-batpod-gotham/https://comicbook.com/news/clay-model-was-the-inspiration-behind-christopher-nolans-batmobi/本篇来源：优设网原文地址：https://www.uisdc.com/create-batmobile-3
上瘾 健身操 都是 嗨大家好，我是和你聊设计的花生~最近大家快乐吗？如果不太快乐的话就快去跟着刘畊宏的跳操吧，随着好听又有节奏的《本草纲目》“狂魔乱舞”一番，保证让你又！痛！又！快！乐！（个人亲身体验）最近有关刘畊宏的话题太火爆了，从「刘畊宏穿羽绒服跳操」、「刘畊宏女孩」到「刘畊宏 7 天涨粉 1000W」、「刘畊宏抖音粉丝突破 3000W」，让人想不知道都不行。健身减脂其实一直都是热点话题，从 HITT 燃脂运动，到帕梅拉健身操，再到 B 站、Keep 上各种健身跟练视频，各种优质健身教程层出不穷。但是像刘畊宏这样 7 天内涨粉 1000 万、直播时最高有 200W 人同时在线健身的”现象级”直播却非罕见。是什么原因让“刘畊宏男孩女孩”们即使痛也要每天跟着直播挑健身操，难道真的是上瘾了吗？我想起前两天刚好看了 廖庆Joseph 的文章「万字读书笔记！产品设计宝典《上瘾》全面解读」，里面提到“上瘾模型”。万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 想让人们对一个产品上瘾，需要在「触发」「行动」「多变的赏酬」「投入」4 个步骤都做好对应设计，才能达成让人使用习惯，不经大脑思考就下意识选择这个产品。同时，用上瘾模型也可以用来诊断一个产品的设计是否完善，关键步骤能否吸引住用户。刘畊宏的直播健身操虽非一个产品，但能让人产生上瘾行为，那么肯定在一些关键的点上有独特之处，我们不妨也用“上瘾模型”来分析一下，触发上瘾模型的第一步就是「触发」，即促使我们去使用某个产品的原因。在这里我们可以理解为促使我们发现并参与到刘畊宏直播健身操的原因。1. 外部触发刘畊宏作为明星，兼具演员、歌手、专业健身教练、新媒体大 V 等多个身份，参加过国民综艺《爸爸去哪了》，爆火之前在抖音和微博上已经有近百万的粉丝了。自 2018 年入驻抖音，刘畊宏分享过健身类的短视频、和家人朋友的互动，做过直播带货，但都是不温不火的状态，直到今年 2 月才确定做专业的健身短视频博主。4 月初，因为上海疫情，定居上海的刘畊宏也需要居家不能外出。作为专业健身教练，刘畊宏决定和妻子 Vivi 在抖音开启健身直播，带领大家在家里进行锻炼。随后的事情我们便知道了：刘畊宏自编本草纲目毽子操、刘畊宏穿羽绒服直播跳操，刘畊宏祝周杰伦身体健康被警告、刘畊宏女、刘畊宏 7 天涨粉 1000W……相关话题一次次登上微博热搜和抖音热门，而且很多网友和自己身边的亲友都开始跟着直播跳操了。这些都是刺激更多人去了解刘畊宏健身操的触发因素。刘畊宏是谁？做了什么？他的直播健身操为什么突然这么火？怎么那么多人甚至明星都跟着他跳健身操？除此之外，刘畊宏健身操的确能解决很多人居家健身的需求。除了专业、不限场地无需器械、动作简单易学这些常见优点，刘畊宏的直播健身还有以下特点能更好的触发人们参与：更有动力如果是平常，我们健身需要非常自律，到点了自己就要站起来运动。这并不是很多容易的事情，很多时候可能我们吃完饭就开始玩手机，玩着玩着时间过了就不想运动了。刘畊宏的直播健身课有规定好的时间端和频率，一周 4~5 次，非常合理。就如朋友一样和你约定好了一起健身一样。可能你正刷着抖音，想到今晚就有直播的健身课，顺手点进去就开始动起来了。互动感更强，更热闹。这是其的最大特色之一，也是最有吸引力的地方。现在的健身跟练视频，都是录制好了上传到视频网站上的，视频有合适音乐，动作讲解也很详细。但是不够有“活力”，每次都是平淡理性的旁白在提醒你，跟着做旧了就让人觉得索然无味。但当你进入刘畊宏的健身直播间，一切就不一样了。你可以在直播间看到有几百万人和你一样，同时在线一起跳操；你会看到飞快闪过的弹幕“我已经准备好垫子了”“留了好多汗，好棒”“太累了，腿好酸”“Vivi 在划水哈哈哈”，好不热闹；你会听到刘畊宏激情模型的口号，边跳边不停地提醒你注意调整动作、注意补水，还会和弹幕互动接梗；甚至还能看见 2 个主播互相斗嘴秀恩爱，好像在听相声。有参与过直播健身的网友就表示，做的时候一定要听到刘畊宏和 Vivi 的说话，不然坚持不下去。的确，跟着直播做操，你好像回到了线下和自己朋友一起、或者有真实的健身教练带着你健身的时候，在非常轻松的氛围中完成了训练，比自己一个人默默做运动有意思多了。虽然累，但也非常开心。哪怕不跟着做，就是听着歌看着主播跳操也是一件很开心的事情。这种有互动性质的直播健身课，能为参与者提供更多真实的情感方面支持，这是关键，其他录屏类的健身教程所不能提供。行动当人们通过「触发」了解到一个产品后，下一步就是为用户的「行动」创作条件，让用户能以最快最简单最直接的方式使用上产品。这里可以理解为为什么健身直播间的参与度会这么高。根据福格行为模型，如果想要人们完成某个特定行为，需要同时满足三个条件：动机（Motivation），即开展某个行为的渴望程度。能力（Ability），完成某个行为的难易程度。触发（Trigger），触发某个行为的激励和反馈。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 触发前面我们都已经谈到了，不做赘述。动机分为三种：追求快乐，逃避痛苦；追求希望，逃避恐惧；追求认同，逃避排斥。虽然跳操的时候很累，跳完后一段时间内双腿不能自理，但是流汗的时候还是很开心的，看着自己一天比一天瘦很开心，瘦了后被别人夸的时候更开心。这样不仅可以减肥，也算是跟上潮流，和朋友家人同事也有很多的共同话题。刘畊宏原创的《本草纲目》毽子操，动作都非常基础能力方面就更不用说了，涉及的几点基本都符合：时间：晚饭后睡觉前正好，如果不做运动也是躺着玩手机看视频，画一个小时做做运动肯定是更好的选择；金钱：免费直播，打开跟着做就行；体力：减肥某种意义山就是消耗多余的体力，而且也无需全程做完，可以根据自己的体力情况决定跟着做多久；脑力：健身动作非常基础，跟着做个 2-3 遍就明白了，不用花很多时间学习；社会环境：健身一项都是也很积极正面的活动，是受社会鼓励的，家人朋友也都支持我们多多坚持，保持健康的身体状况。不论是动机、能力还是触发条件都是达到了的，健身直播间的参与度自然也就高了。多变的赏酬多变的赏酬刺激用户再次使用的关键，正是因为刘畊宏的健身操能让给予参与者“赏酬”，刺激促使他们不断跟着直播进行运动。我们前面有提到，刘畊宏的直播间很大的一个特性就是能通过真实丰富的情感支持给参与者。这就是一种精神鼓励，参与直播间的人会感受到认同、快乐、满足等积极情绪，并更加期待着下一次的健身直播。打开小红书，搜索刘畊宏，你就会看到很多条用户分享的跟练效果图。当我们发现自己的体重每天都在下降，身体的线条也比之前更加好看，连容易长痘、便秘的问题都得到了改善，继续参与运动的积极性就更高了。投入上瘾模型的最后一步是投入，即如果你想让用户对你的商品或者服务产生深厚的联系，就要让用户一步步产生投入。对爆火的刘畊宏健身直播间来说，我们投入最多的就是自己的时间和汗水了。随着健身效果的显现，我们会将自己的感受与经验分享出去，这就是对健身运动的进一步投入。这些内容的传播不仅吸引着别人去了解和参与刘畊宏的直播，发布者也为因为自己的行为收到认同和鼓励，从而引发更多人和更持续的参与。至此也就引发了新一轮的触发，上瘾模型的闭环也就形成了。总结通过分析，我们可以看出刘畊宏健身直播火爆符合上瘾模型的 4 个方面，所以极高且持久的参与度。其中直播的互动性最为重要，提供了传统跟练教程无法提供的实时互动和情感支持，让参与者更容易与主播产生持久深厚的联系。以上就是今天的分享。如果你也有跟着刘畊宏直播一起跳操的话，记得一开始强度不要太大，量力而行。动作也要做标准，不然容易出现肌肉扭伤的情况哦~本篇来源：优设网原文地址：https://www.uisdc.com/liugenghong-studio-design
客户 项目 新天地 我是从 2018 年年初开始做自由职业的，到现在已有 4 年半的时间，在做独立插画师、设计师的过程中，合作过很多品牌。我把商业合作的流程分为了 3 个阶段 : 前期的沟通阶段，中期的调研阶段，后期的项目执行 & 宣发阶段。注：底部有惊喜~前期：沟通阶段当客户找到我们时，可以先与客户进行初步沟通，了解项目的需求。建议先了解风格、应用场景、预算、周期，这四项内容可以双方了解，确认初步是否合作的意向，其次可以了解工作量与是否需要多人协作，来评估自己的能力与时间是否能完成这项工作。这里需要注意的是，在遇到需要试稿的客户时，建议沟通一下试稿是否有稿费。初步沟通后，就是确认合作与项目报价了，在报价时可以先评估下预计花费的时间，再通过以下这个公式评估报价。在根据上面的公式报价时，我们也可以考虑更多的因素，如是否加急、插画师影响力等来评估报价。例如如果需要加急的话，可以适当提高报价，因为如果加急的话，有时需要熬夜来完成项目，对我们的健康是有损伤的。是否含税在报价时最好在报价时说明，避免双方在税上理解不同。确认报价后，就到了和客户签订合同的阶段了，这时可以明确以上几点 : 版权归属、延期后果、结款时间、修改次数。这个阶段我们可以明确一下版权的归属。例如，这个系列是我的个人系列作品《Living in Space》，这个作品已经进行了多次合作授权。作品的版权是属于我的，那么和客户合作的时候一般就属于授权合作，使用权的费用一般是版权的 1/3-1/5。明确修改次数也非常重要，避免我们在合作后期无限次的修改。签约好合同，就可以收付定金了，通常情况下，收到定金之后开始工作。中期：调研阶段接下来就是中期调研了，挖掘需求部分是非常重要的。首先是品牌研究，涉及到调性、配色、吉祥物、字体等，我们可以主动跟客户沟通，让客户提供相关的设计规范，帮助我们理解品牌；其次是客户的需求，包含了客户的审美偏好和产品的理解，这一点也非常重要，因为客户对自己的品牌一般会有很深入的理解，我们可以站在服务的角度主动的倾听、理解、沟通；最后是用户需求，了解用户画像及受众审美偏好。例如，下面这个系列是我和新天地合作的运营插画设计 :“i 到家”是新天地在疫情期间推出的全新电商品牌。人们经历了几个月的一起，心情悲伤沉重，因此新天地希望插画风格是治愈、温暖、充满希望的。在插画配色时，选用了新天地的品牌色，突出品牌调性。另外还要考虑客户的需求，在前期，我出了两个版本的草图，一个主体是“人物”，一个主体是“手”。在沟通中，客户明确表示更喜欢抽象的表达，因而最终选择了“手”为主体元素的方案。接下来就是搜集资料了，这一部分也非常重要，通过搜集资料创建情绪版，我们可以更好的理解客户的审美偏好，当客户没有明确想法时，引导客户表达出自己的需求。最后是明确需求，我们可以通过文档、ppt、邮件等列出项目需求，帮助双方进行想法的梳理，从而推进项目的进度。后期：项目执行&宣发确认需求之后，就是交付初稿了。初稿可以包含 1-3 个草图、文字描述、风格参考，帮助客户想象出最后的成果。例如，下图是我 2020 年和新天地合作的新年运营插画动效的截图 :在草图阶段，我提出了三个方案，用草图和简短文字描述动效的画面，帮助我和客户充分沟通。客户收到方案之后，三个方案都很喜欢，于是他们把方案发到工作群里让同事投票，最终选出了方案。接下来就是执行提案与项目修改，这里包含了四个步骤，在每个步骤有阶段性成果都可以和客户沟通，尽量让创作过程不逆推，提升效率。在这个过程中，如果有修改意见，可以用文字记录下来，发给客户确认，避免双方理解不一致或遗漏修改。这是我和抖音综艺栏目《羽仔的花园》合作的插画主视觉，草图修改下方，也用文字记录了修改的地方，方便我和客户更好的沟通。项目完结之后的宣发也是很重要的，项目上线后，我们可以将成果分享到各个设计平台。例如，这个是我和歌德学院合作的三维插画设计，在完成项目之后，客户将最终的出版物寄给了我，我用照片的形式记录了这项工作成果，发布到各个设计平台，也梳理了自己对项目的思考与工作成果。这就是我总结的插画师的商业合作流程啦，希望能对你有所帮助。对了，今晚8:00，我会有一节免费的 IP 形象设计公开课，想学3D 设计和 IP 形象设计的同学，可以扫码进群参与哦这10个顶尖大神的作品，是我每日学习的源泉！想学设计可以关注哪些设计师？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/business-illustration-process
作品 版权 著作权 “签设计合同时需要注意哪些问题？”“被抄袭了怎么维权？”“参考构图算侵权吗？”很多设计创作者都会遇到诸如此类版权问题，却不清楚如何解决。今天是世界知识产权日，也是腾讯设计 优设网联合栏目「设嗑院」首期内容，我们向设计师们征集了一些关于版权方面的具体问题，并邀请了公司法务 J 一一解答、给予建议，希望能帮助大家提高版权意识，学会保护自我权益和劳动成果。本文约4600字，预计阅读时间：12分钟（T：腾讯设计 J：腾讯法务）01T：版权主要保护设计创作者的哪些权益？J：版权即著作权，设计创作作品完成，著作权即产生。设计创作者拥有的著作权权利，与设计作品的创作性质有关。自有作品：如果作品为设计创作者的自有作品，则设计创作者拥有作品完整的著作权，根据我国著作权法的规定，作品著作权包括署名权等4项人身权利，复制权、信息网络传播权等13项财产性权利。委托作品：受委托创作的设计作品，可以由委托方和设计师签署合同约定著作权归属，如果双方没有明确约定或者订立合同的，著作权归受托人，即著作权归设计师享有。职务作品：为完成工作任务而创作的作品属于职务作品，在没有约定的情况下，一般职务作品的著作权归设计师所有，法人或其他组织有优先使用的权利。但相当情况下，法人或其他组织会通过与设计师的劳动合同或通过其他方式，约定著作权归属。此外，法律还规定，主要利用法人或其他组织的物质技术条件创作，并由法人或者其他组织承担责任的特殊职务作品，著作权由法人或其他组织享有，设计创作者享有署名权，这类特殊职务作品包括工程设计图、产品设计图、地图、计算机软件等。02T：在签合同时，哪些方面需要避坑，版权归属问题上需要注意哪些问题？J：一般而言，版权合同包括版权委托创作、版权许可、版权转让等合同类型。设计师在签署版权合同合同时，除了创作作品的一般要求、时间、付酬标准外，对于版权的归属需要特别注意，委托作品的著作权权利归谁所有，版权许可合同的许可时间、地域、许可权利范围和使用范围、可否转授权，版权转让合同中具体转让权利的类型等，均应有明确的约定，此外，版权合同还应约定违约责任和作品知识产权担保责任等相关条款。03T：品牌 IP 形象在没有正式注册前，是否能商用？J：品牌IP形象不仅可以传递企业价值、凝聚品牌力，本身也是一种无形资产，创造经济利益。因此，品牌IP形象在正式发布和商用前，建议先进行知识产权的注册和登记。首先，品牌IP形象可以通过商标进行保护，例如腾讯公司的“企鹅图形”是公司注册的图形商标。我国商标法实行“注册制”，并且规定了“申请在先”的原则，只有通过商标局的审查和批准，才能获得注册商标权。提前对品牌IP形象进行商标查新和注册，才能最大可能获得商标法律保护，同时避免侵犯他人的商标权。其次，具有独创性的品牌IP形象还可以通过著作权进行保护，例如微信“黄脸表情包”。我国著作权实行“登记制”，尽管作品著作权自作品创作完成时即产生，但登记具有确权和证明的效力，在品牌IP形象被他人抄袭和侵权时，快速提供原创和权属证据，降低维权难度。 04T：描绘图片算抄袭吗？比如描有版权但未经购买的图片呢？J：一般而言，未经著作权人许可而使用其作品，就构成侵权，同时，为保护公共利益，对一些对著作权危害不大的行为，不视为侵权行为，即著作权法中的“合理使用”制度。我国现行著作权法第二十四条明确：著作权合理使用，可以不经著作权人许可，不向其支付报酬，但应当指明作者姓名或者名称、作品名称，并且不得影响该作品的正常使用，也不得不合理地损害著作权人的合法权益。05T：如果在工作中使用到了某素材网站的元素，但是公司只开通了购买的个人VIP。这种情况下若追责，是公司的责任还是设计师的责任呢?J：在工作中，应避免使用未购买版权的网站素材。若公司只以个人的名义购买了某网站的VIP账号，供公司多人使用，是否构成侵权要看双方的合同约定。若合同有明确约定，或者虽无明确约定但网站版权方明确知道（若发生纠纷，需要通过证据来证明，此时，视为对合同的变更），该VIP账号虽利用个人名义购买，但实际供公司多个设计师使用，不构成侵权或者合同违约，否则，则可能构成侵权或违约。设计师是为了完成公司工作任务而使用网站素材，属于职务行为，一般对外不承担侵权或违约责任。但由于侵权行为可能对公司的名誉和产品声誉造成损害，同时会承担一定的经济损失，公司可能会对设计师的行为进行内部追责或者影响该设计师的业绩考核。06T：插画构图参考别人的构图，但是元素不一样算侵权吗？参考别人单独设计的字体，根据他的方法设计出其他字体算侵权吗？J：著作权侵权的主要判断标准是两作品是否构成“实质性相似”，即两作品具有独创性的部分，是否会使人产生相同或相似的欣赏体验。因此，无论是参考他人的构图还是他人设计的字体所产生的作品，是否构成侵权，要看我们设计的作品和被参考作品是否构成实质性相似。此外，著作权中有一个概念，叫“思想表达二分法”，即著作权法保护的是思想（例如思路、创意、构思、操作方式等）的表达方式，不保护思想本身。具体而言，插画构图参考他人的构图，需要判断被参考作品的构图部分是否具有独创性，体现了作者的创造性劳动，以及我们设计的作品相关构图部分与被参考作品是否相同或相似。参考他人设计字体的方法设计出其他字体，是否侵权需判断两字体的最终表现形式是否相同或相似，如果仅是方法相同，字体不相同或相似，不构成著作权侵权。举例而言，若某字体通过将字拟物化的方式进行创作，另一种字体也通过拟物化的方式创作，但是具体字体拟物的形象不同，两者不构成相同或近似，不构成侵权。07T：同事之间协作，源文件必须要共享吗？如何保障在公司内部的个人设计版权，防止别人拿着自己作品去面试？设计源文件外泄公司外部是否承担法律责任？J：创作者可以通过采取一些防范性措施保护自己的设计版权，例如，保留创作的设计底稿、创作日志、与创作相关的沟通记录等等，对于已经完成的设计稿，可以及时进行版权登记，或者通过第三方存证机构、时间戳等方式保存证据。公司、设计师均应通过一些保密措施或者管理规定保护设计创作的源文件，严格限制源文件共享查看权限、查看范围，保存源文件查看记录、复制转移记录等，以便发生源文件外泄时进行维权和问责。08T：在公司期间使用了非商免字体做图，如果字体公司提起侵权诉讼，我是否需要承担一定的赔偿责任？J：公司或者部门因工作需要，一般会采购购买商业数据库供员工工作使用，应尽量避免使用非免费的商业数据库或素材网站。使用非商免字体作图所形成的作品，一旦对外发布，极有可能收到字体著作权权利人的投诉或诉讼，导致公司对外承担赔偿责任，甚至可能引发严重的舆情风险。如果员工是为了完成公司工作任务而使用非商免字体创作作品，对外不承担赔偿责任。但根据具体情况，公司内部可能对员工进行追责和处罚。09T：数字藏品可以商用吗？如果作为设计元素，是否算侵权？J：数字藏品可以商用，若非自有版权的数字藏品，使用其作为设计元素或者商用，需经发行人或其他权利人许可或同意。10T：自己设计的画面想做一些周边售卖，如印在手机壳、笔记本等载体上，需要做哪些版权登记或商标注册之类的，才能合法商用并保护自己的权益呢？J：将自己设计的画面印在手机壳、笔记本等载体上，实际上就是对设计作品的复制使用，或者起到标识该种载体商品来源的作用，可以通过版权和商标等途径保护自己的合法权益。在满足独创性的前提下，对自己设计的画面可以进行版权登记。版权登记，自行申请登记或者委托专业机构进行登记，各省、自治区、直辖市版权局和中国版权保护中心是官方登记机关。版权登记一般需要填写申请表、提供权利人的身份证明、作品样本、作品说明书等申请材料。版权登记是权利人享有作品版权的初步证明，在没有相反证据的情况下，登记的权利人就是作品的著作权人。版权登记具有流程简单、速度快、效力高等特点。自己设计的画面还可以申请注册商标。国家知识产权局商标局是进行商标注册审查的唯一机构，商标核准注册是获得商标法律保护的前提。商标未注册也可以使用，即未注册商标，但未注册商标不享有商标专用权，也就是说别人也可以使用这个商标。商标注册，可以自行申请也可以委托专业机构进行申请。商标专用权，自商标局核准注册之日产生，有效期十年，到期可以续展。需要注意的是，商标注册，必须指明具体的商品名称和服务分类，也就是说，若非全类注册，商标权人仅在自己注册的类别上享有商标专用权。这也就是为什么相同的商标，可能存在多个注册权利人的原因。11T：如果自己的作品被抄袭了，如何维权？科学的、具体的维权取证方法和流程是怎样的？J：原创设计被抄袭的现象比较常见，设计师平时应了解一些相关的法律常识，提高维权意识。进行维权首先需要确权，即证明作品是自己创作的。如上所述，对于原创创作作品，设计师应及时进行版权登记，同时保留自己设计的底稿、设计沟通过程、记录等文件；也可以将作品通过第三方存证机构进行存证，证明作品自存证时已产生且未被篡改。其次，进行维权还需要证明对方存在侵权。取证方法包括申请公证机构对对方的侵权行为进行证据保全，或者通过上述第三方存证机构、申请时间戳等方式进行在线取证，如果实在不方便通过上述方式取证，也应该通过手机录屏、截屏等方式保存证据。在充分保存证据后，则可以启动维权流程。维权的方式和流程可以包括：（1）协商，通知对方立即停止侵权，赔礼道歉，赔偿损失等，协商过程中，可以进一步保留和保存沟通记录；（2）请求调解组织调解，签订和解协议；（3）若协商沟通、调解不成，可以通过像法院提起民事诉讼的方式解决。12T：具体的维权时间和费用大概在什么期限范围？J：如果通过向法院提起诉讼的方式进行维权，基本流程为准备立案材料、立案、一审、二审、执行等，根据民事诉讼法的规定，一审民事案件的审限为6个月，二审审限为3个月，特殊情况可以延长。维权费用包括取证费用、立案诉讼费、律师费等，案件若取得胜诉，可判决侵权方承担维权的合理开支。【设计资源全平台】腾讯设计云：https://design.tencent.com/【原创版权保护】CoDesign：https://codesign.qq.com/原创馆：https://ycg.qq.com/zhixinlian【字库类】360查字体：https://fonts.safe.360.cn/字由：https://www.hellofont.cn/优设标题黑：https://www.uisdc.com/uisdc-first-free-font【在线制作类】即时设计：https://www.uisdc.com/zt/js-designMasterGo：https://www.uisdc.com/mastergo【图标类】阿里巴巴矢量图标库：https://www.iconfont.cnFontello 图标字体制作工具：http://fontello.com【图库类】Pexels 免费图片分享：https://www.pexels.com看完采访的你，如果遇到版权相关问题，欢迎留言提问。优设推荐关注“腾讯设计”官方公众号，第一时间获取腾讯的设计方法论设计师常见的五个法律问题，我们邀请了专业律师来解答！编者按：很多设计师平时不重视学习常用的法律知识，一遇到版权问题/职场问题就无所适从，所以今天我们特意收集了设计师们常会遇到的五个问题，邀请民商及知识产权领域律师刘杰，为大家答疑解惑。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/tencent-and-uisdc
颜色 页面 原因 前段时间我在京东买到坏芒果了，要申请售后。作为一个界面设计师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。发现问题：用户出错在哪里A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的B：我不知道退款要填多少东西，什么是一定要填的C：提交的时候出错了，说是没写描述，又要回头去写用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。分析问题：先发散，再归因1. 发散问题以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。问题 1：漏填为什么不给出必填提示呢？不同的申请原因，注释分别是什么？全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？全部的申请原因都要上传凭证吗？如果申请原因不同，填写描述的提示会不同吗？说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。分析之后发现：1）必填提示很重要。除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。2）选项之间可能有交叉或者重复，分类不明。比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。问题 2：误点为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？怎么体现申请原因和描述问题的从属关系呢？注释的内容可以直接放在描述文字输入框内吗？怎么结合？页面的框架存在问题吗？卡片和分割线的规范是什么？这种左右选项结构的组件形式是影响因素吗？分析之后发现：1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。2）文字的颜色让人分不清主次从属。这一点在下面有更详细的分析，先不在这讨论。2. 收拢归因经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。3. 竞品分析大法找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。万字干货！4 大模块帮你完整掌握竞品分析互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。阅读文章 > 观察淘宝和京东，我们可以发现：1）淘宝有必填提示，京东没有；2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。最后一点关于字体的，分析项比较多：通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？解决问题：低成本有效解决经过一轮竞品分析后，我们得出了相应的解决方案：1）统一页面结构卡片间距保持一致；输入框颜色略浅于背景色。2）文字视觉关系调整文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。3）准确引导操作给予必填提示。这是调整前后的对比图：从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。有时候能用最低成本从设计层面解决问题，也是一种能力。以电商为例，帮你掌握超全面的产品分析流程曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。阅读文章 > 欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/adjust-font-size
文案 用户 产品 前言公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。笔者相信，在谈正事时，大家应该都很反感说话总是拖泥带水又模棱两可的人，因为在听一大堆废话后、你还不知道对方到底要表达什么，甚至有可能在理解错误的情况下产生误导。在互联网产品设计中，语言本身就是一种界面、一种架构，是链接用户与产品的桥梁，在交互过程中能帮助用户更好地理解产品、如何跟产品沟通顺畅。更有甚者，一个产品语言表达方式的好坏，在用户眼中就代表着这个产品是否友好、好用，所以，有时候简短的几个字就能决定着用户的去留，而这些通过给用户传达信息的语言，我们就将它称之为微文案。作为设计师，大多都会将自己的专注力集中在了视觉和交互上，潜意识的认为文案只是产品、运营者的工作，殊不知作为经常都在研究用户、跟用户打交道的人，在一些细节上会比产品更懂用户，相比美观的视觉设计，精致、简短文案的引导，则更加清晰、直接。微文案对产品和用户都有着巨大的影响，清晰、准确、友好、一致的文案设计不仅能为产品带来好的体验，还能拉近用户与产品的距离，甚至可以当做改良用户体验和吸引用户的工具，因此文案设计就显得非常重要。下面，笔者就和大家简单地聊一聊那些在设计中看似不起眼的微文案设计。了解微文案Joshua Porter 在 2009 年诊断过一个电子商务网站，用户在该网站购买流程中填写表单时，有 5%-10%的用户因地址填写错误而终止交易流程，导致用户流失。于是，Porter 提出在地址栏旁增加“请务必输入与您的信用卡关联的地址”的文本提示，后来他在自己的文章中说道“就这样，错误消失了”。这种做法不仅节省了用户时间，还改善了网站的转化率、提高收入。Porter 最终得出的结论是“在正确的位置、正确的时间、添加正确的引导性文案，就可以完全改变用户体验”，并把这类文案命名为“Microcopy”。1. 微文案的定义微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：交互前-引导用户去完成某个行为交互中-鼓励、帮助用户去完成某个行为交互后-及时给予用户行为之后的反馈（问题和解决方案）2. 微文案被重视的原因用户在与产品交流时，微文案作为最接近于用户与产品交互的位置，它可以帮助用户预测问题的发生、并鼓励用户进行下一步操作，提前预判操作过程中可能碰到的问题并提供解决方案，在很大程度上降低用户跳出率。好的微文案可以清晰的表达出症结所在，消除用户疑虑，让其更快作出抉择，从而为产品带来收益。另外，在情感化方面，微文案的语气态度影响着用户的情绪，用户随时会在当前心情好坏的驱使下决定是否在这个流程中继续走下去。有很多产品在进行体验上的优化时，微文案就是其中的一大版块。我们都知道，在这个互联网时代，个人信息早就不是什么秘密，但还是会遵循能不提供就不提供、能不注册就尽量不去注册的这一原则。用户体验专家 Jared M. Spool 就利用人们的这一心理在界面增加一段微文案创造了 3 亿美元的利益，基于用户在购物前不愿意提供太多个人信息，Jared M. Spool 在购物页面上写道「您无需注册即可在我们的网站进行购买，只需要点击继续按钮。为了方便您在网站的后续购买，您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了 45％；另外，Maggie Stanphill 在曾经对谷歌的一个旅店预定广告中将微文案「预定房间」改为「查看可用房间」，其点击率增加了 17%，结果是显而易见的。3. 微文案专业岗位的出现在国外，如谷歌这样这样的大型公司，对微文案设计非常重视，为了更好进行品牌文化传播以及给用户创造更好的使用体验，会有对应职位的「UX Writer」人员对微文案进行把关。相比国内，虽然微文案岗位还处在一个比较尴尬的位置，但对微文案的重视程度明显在快速上升。微文案设计的基本原则1. 去开发化首先，微文案需要简单直白，让用户一眼就能看懂，要规避掉开发语言（如 404、505、错代码 xxx 之类的描述）、双重否定等用户不易懂的文案，避免用户在操作前总是要去思考、陷入不知所措的境地，用户需要明确的知道当前发生了什么，以决定接下来的行为。其次，避免模棱两可的文案，需要将发生的问题、行为指引等，清晰的表述出来，需要注意的是清晰表述并不是要长篇大论，能用词语表达的就绝不用句子、能用一句话标明就绝不多加半句，用户没有耐心来看你写小说。很多时候，用户在完成任务的过程中总是被很多「下一步」搞得一头雾水，用几个个字的简短描述来代替「下一步」需要完成的任务不是更好吗？当然刻意制造惊喜或氛围的除外，前提是你的惊喜真的能给用户或产品带来价值。2. 委婉+鼓励回想一下我们小时候做家务的情景，当父母用命令的语气对我们说“赶紧去扫地，等会我来检查”或者“我这会有些忙，你去帮忙把地打扫一下，扫的干净有奖励哦”，虽然都是不可抗拒事情，但很明显第一种方式是极不情愿的接受，做起事来可能是为了应付，以后会尽量找理由不去做；第二种语气则接受程度更高，还具备一定的吸引力。微文案也是如此，友好的表达方式会显得有诚意，用户更易于接受。3. 应时应景在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用。例如空状态/缺省页，可清楚的告知用户发生了什么问题以及解决方案，再通过按钮（按钮文案上述有说明）加以引导；在支付过程中，出现余额不足时，应明确提示金额还差多少、以及在附近提供便捷的充值入口；当用户有多张优惠券，下单时却无法选择使用，则需要将使用条件在原有文案的基础上强化、突出显示。常见所处位置1. 按钮按钮微文案的好坏对产品、用户来说是至关重要的，尤其是「行为召唤按钮」。产品历经千辛万苦将用户带到转化（开通 VIP、下单、支付、登录）页面，就差按下这个按钮，如果因为文案的不清晰让用户有疑惑、增加了操作、理解、时间成本，或对用户产生误导，极有可能让用户从这里溜走，得不偿失，请记住。不管前面付出了多少努力，在用户按下决定转化的关键按钮前，都不算成功。按钮是引导用户按下的关键因素，如果想要通过按钮为产品提高一定的转化率，那么你的按钮就需要一个优秀的微文案。通过下图中按钮微文案的左右对比，你更倾向于哪一种呢？2. 表单在表单页面，作为方向指引，标签只是一个清晰明确的简短文案，真正能给予用户更多帮助的是占位符，它能准确的提醒用户输入区域的交互位置，所以就成了每个表单项的必备元素，但就是因为这点，很多设计师站在必备的基础上，为了占位而占位，让占位符失去了本该发挥的作用，毫无价值。下图是淘宝新增地址的表单页面，左侧的占位符直接重复标签内容，没人说这种搞法是错误的，但右侧描述了应输入内容的说明、规则、注意事项等，明显降低完成表单内容的难度。设计师可能没有感觉，怎么看都能看懂，但有没有想过填写这个表单的用户根本不是互联网人群，只是第一次想在网上买个东西而已。道理大家都懂，说起来大家都会，但如果你真的玩了很多APP就会发现，除了那些大厂的产品设计之外，见过最多的不就是左侧的这种表达方式吗？3. 错误/温馨提示提示，并不仅仅是告知用户问题所在，而是需要在用户操作之前就给出温馨提示（如注销账号）；出现问题后自动定位到具体位置并提供解决方案（如填写表单），如果实在无法解决，尽可能的提供备用方案或求助渠道，尽可能的降低用户损失（如误删某数据）；操作即将完成或完成之后给予用户鼓励（如就差一点、太棒了）。4. 缺省/空状态空状态是产品中必然存在的一种状态，不管是用户初次使用还是系统出错，都可能给用户带来焦虑、挫败或疑惑的负面情绪。优秀的微文案能达到安抚用户糟糕情绪、取悦用户的作用，从而弥补空白页面带来的失落，然后配合按钮中引导性的微文案帮助用户去消灭空白状态，避免下次出现同样的情况（部分特定的空状态只需安抚用户即可，无需/无法进行引导）。微文案设计方向及思路1. 清晰易懂应使用用户熟悉的语言，尽量让微文案清晰明了、易于理解，避免使用一些专业术语和网络名词。如果不是写“小说”，就不要长篇大论，浓缩才是精华，没有必要在一个位置反复强调同样的内容，需要做的是精简语句，减轻用户的理解负担，降低时间成本。切记，产品每多一点使用成本就可能流失掉一批用户。2. 统一性表达对同一类型事务/事件的微文案，其语法、语种都需要保持统一性的表达，避免因用词偏差增加用户认知负担。频繁出现的词汇如新增/新建、您/你、确定/是否…等，即便不影响用户理解，也需要在无歧义的情况下选择其中一种表达方式始终保持一致。3. 尊重用户微文案需要永远站在用户角度考虑，不要使用命令和强迫的语气，多给予用户理解与包容、并加以支持与鼓励，让其感受到产品足够的友好、尊重。即便需用户自行承担相应的责任，文案也要克制谦逊，利用相对（万事没有绝对）的语气将出现问题的原因和结果反馈给用户，如果可能的话，尽量提供补救措施，将用户的损失降到最低后，利用微文案对用户情绪进行安抚。4. 「您」和「你」的区别「您」-正式且过于认真、严肃，刻意强调对用户的尊敬，感觉时刻保持着距离，少了一份亲切感；「你」-距离更近，有种打成一片的感觉，试想一下，如果你跟朋友之间总是过于尊敬、客客气气，很可能会缺少一种默契，至少不会去交心。产品也是一样，在交互过程中与用户扮演的就是「你」和「我」的角色，为了拉近与用户之间距离，不妨多使用「你」「我」跟用户进行交流，会更亲切。5. 两相矛盾的微文案将两相矛盾的文案融合在一起，看似具有强烈的冲突性，却是一种因果关系。这种方式在营销文案中很常见，当用户害怕失去时，产品顺势给用户一种失去后的打击，文案就起到了“激将”的作用，然后再给予合适的引导，用户转化率很可能得到大幅度的提升。6. 不要拒绝用户不要拒绝你的用户，切记要避开如“不要、不能、不可以…”等负面的词汇，一开始就摆出一副拒人于千里之外的姿态，用户凭什么要惯着你的产品。多使用正向且具有引导性的文案，协助用户解决当前的尴尬处境，就算用户迫不得已离开，至少没有留下不好的印象，或许下次还有机会。7. 省略不必要的标点符号一句话或一个词就能说清楚的内容，可省略掉不必要的标点符号，例如标签、标题、小提示…等。另外，在部分弹窗中有两段语句的折行文案，去掉标点会显得更干净。结语很多初中级设计师认为，文案不属于设计的工作范畴，殊不知文案也和图形一样，都是引导用户的重要元素，在某些场景中，文案更能直击用户内心，起着不可替代的作用。好的微文案能为产品助力，让用户在完成任务的过程中不会迷路，甚至在关键环成为用户在黑暗中的一盏明灯，确保每一步都给用户带来更加顺畅、愉悦的产品体验。以上是笔者对微文案的理解，不足之处敬请谅解，欢迎大家一起探讨，一起学习、取长补短。如何快速增加17%的业绩？收下这份微文案设计基础指南当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/microcopy
贴纸 插画 主页 大家好，我是和你们聊设计的花生~上一期为大家推荐了 5 位擅长扁平风插画的艺术家：这 5 位优秀的扁平风插画艺术家，是我每日学习的源泉！大家好，我是和你们聊设计的花生~之前有和大家聊到矢量扁平风插画在设计领域的应用越来越广泛，并且逐渐规范化，这表明这种插画风格将成为一种稳定的应用风格。阅读文章 > 今天要为大家推荐的 5 位艺术家，都非常擅长「贴纸」设计。现在无论是在短视频、海报、产品包装，还是企业 VI 和手账中，贴纸都有广泛的运用。亮眼的贴纸可以成为一种风格代表，为设计增色不少，一起来看看吧~Tony Balderama「Instagram 主页」 https://www.instagram.com/tony_balderama/「Behance 主页」 https://www.behance.net/eltonitoTony Balderama 是一位来自墨西哥的设计师，非常擅长潮流类的图标贴纸设计。他的贴纸设计以线条勾勒元素形象，细节丰富；颜色偏好高明度中饱和度，鲜亮有活力却又不会扎眼；主体形象设计也非常有个性，标志性的“半闭眼”显示出随心自由的生活态度，受到很多年轻群里的喜爱。Mrsl Va「Behance 主页」 https://www.behance.net/mrsl_vaMrsl Va 是一位来自乌克兰的插画师和设计师，她设计的贴纸带有噪点插画的特性，风格轻松文艺。小而精致的作品形式非常适合刚入门学习插画的小伙伴学习借鉴。Martcellia Liunic「Instagram 主页」 https://www.instagram.com/liunic/「Behance 主页」 https://www.behance.net/liunicLiunic 是一位来自印度尼西亚的插画师和视觉艺术家，她的插画形状抽象简单，用色大胆，充满童趣。由于画风鲜明可爱，Liunic 与 Google、Adobe 等知名品牌都有过合作。在进行商业创作的时候，Liunic 大量使用贴纸拼接的方式，排版灵活，可以贴合不同形式的装饰要求。Yangjin Kim「Behance 主页」 https://www.behance.net/typo-yj「Instagram 主页」 https://www.instagram.com/yangjin.c/Yangjin Kim 是一位韩国图形设计师，他设计的贴纸简单又充满趣味，并经常将文字图形化进行直接的情感传达。贴纸还被添加了立体厚度效果，使其表现样式更加丰富多样。Mat Voyce「个人网页」 https://matvoyce.com/「Instagram 主页」 https://www.instagram.com/matvoyce/「Behance 主页」 https://www.behance.net/matvoyceMat Voyce 是一位来自英国的字体及动效设计师。他专门研究 2D 类型动画，其中以贴纸类型的动态字效最为出色，与可口可乐、Facebook、logitech 等知名品牌都有合作。相关教程贴纸类的元素设计起来并不复杂，喜欢这种风格的可以打开小伙伴打开下方教程学起来~「AI+PS 教程！手把手教你制作镭射风贴纸插画！」https://uiiiuiii.com/illustrator/1212378876.html「AI 教程！手把手教你绘制快乐肥宅主题可爱贴纸！」https://uiiiuiii.com/illustrator/1212284008.html「更多相关资源教程」https://uiiiuiii.com/以上就是今天的分享。如果大家平时在设计上有疑问，欢迎在优设的「设计问答」版块提出，会有非常多优秀的设计导师为大家回答~本篇来源：优设网原文地址：https://www.uisdc.com/sticker-design-2
权衡 产品 目标 设计在于权衡每当谈到设计原则，大家仿佛认为只要将每一条原则发挥至极致，即可设计出最为卓越的产品。然而在现实中，我们时常需要在不同的原则之间进行取舍，或是处理设计原则与业务目标及技术局限之间的冲突。设计的过程，即是在所有相关因素之间进行权衡并寻求最优体验的过程。那么，我们应该如何明智地进行权衡呢？何为权衡？一款产品面世之前，通常会历经诸多规划讨论、会议、验证、打回、迭代等等。旁观者时常认为自己可以很聪明地发现产品当中很多有待改进的地方，而实际上这些“改进”或许已经在团队自己的 backlog 当中，等待资源到位或时机成熟时付诸实施。伴随着整个设计开发流程，我们始终需要考虑如何进行权衡。譬如在现有的时间及预算条件下应该选择怎样的用研方法？对于当前目标，哪些设计原则具有更高的优先级？面对无法突破的技术屏障，次优的设计方案是什么？是否需要砍掉部分功能，或是将 deadline 延后？何时需要权衡？任何时候都可能需要。尤其是在不同方面的目标或原则相互冲突的时候。即便是两个显而易见的设计原则之间都有可能产生冲突。譬如应该确保更少的点击次数还是更低的认知负荷？你可能需要优先考虑降低用户的思考成本，即便以更多的点击作为代价。而更多时候，我们需要在不同的维度之间进行权衡，包括业务目标、用户目标、技术局限等等方面。权衡的原则与所有制定决策的过程类似，我们可以在若干指导原则的帮助下进行更有效的权衡决策。1. 通过高层目标推导底层方案每个产品都应该有长期目标与愿景。通常，底层决策可以在清晰简明的高层目标的指导下变得明确起来。譬如，冥想类 app 的目标是给人们带来平和的心境，帮助他们练习倾听内在。自然，所有产品都希望实现良好的口碑传播，但在冥想课程后面添加“分享到社交平台”的按钮是否妥当呢？未必。在“塑造平和心境”的高层目标之下，诸如“分享”、“排行挑战”一类的社交互动功能更应受到否决。冥想练习结束时的界面状态应该是简洁而优雅的，这会有助于人们将平和的心境带入接下来的现实生活当中。2. 成本与价值成本与价值矩阵是一种非常经典的优先级排序方法。我们需要评估开发一项功能所耗费的成本及产生的价值，然后将其放置到矩阵中。设计师与开发人员可以有效地对成本进行评估，而关于价值的看法很可能因人而异。https://www.nngroup.com/articles/prioritization-matrices/要弄清解决一个问题或开发一个功能可以带来的价值，我们可以问问自己：问题出现的频率如何？每天若干次，还是偶尔出现？有多少用户会被这个问题影响？问题的严重程度如何？只是小小的困扰，还是可能导致用户放弃产品？能否在解决问题的同时，不至于让用户付出高昂的学习成本来适应新的方法？是否应该通过若干次发布来实现增量迭代？3. 妥协，而非牺牲如果无法以最优的方式同时实现功能 A 和功能 B，那么与其彻底砍掉其中某一个，不如考虑是否存在妥协的方式。如果 A 拥有更高的优先级，那么在此前提下我们还可以针对 B 做些什么？譬如，出于安全考虑，一些产品会将登录流程设计得比较复杂，不仅需要身份信息，同时还需要通过不同的设备来辅助认证。从体验的角度，这无疑增加了使用的难度。但换个角度，将安全需求作为即有约束，我们如何在这个框架内尽可能提升易用性？我们可能要作出一定的妥协，但不至于彻底牺牲体验。4. 遵从规则，或打破规则关于设计、开发及产品决策制定，都有着相关的准则、规范及最佳实践。我们需要了解何时遵守哪些，何时需要针对特定的用例和场景而打破规则。这些在很大程度上来自于经验。以用研为例，理想的操作方法在每本书中都有介绍。而在现实中，我们时常需要根据项目预算及时间资源来调整具体的方式，最典型的可能包括适度减少被测数量，邀请目标受众以外的用户，通过视频连线进行测试而非实境观察等等。“仅与一位用户进行测试也强于不做测试。”—— Steve Krug，《Don’t Make Me Think》常见的权衡类型设计层面的一些权衡决策通常是设计师可以去把控的，而无需整个产品团队一起深入讨论。以下是一些常见的需要权衡的方面。1. 最小化认知负荷 v.s. 最小化操作成本“某些类型的心智处理工作相比于其他行动更具挑战性。”—— Susan Weinschenk，《设计师要懂的心理学》根据《设计师要懂的心理学》所述，人类需要处理三种类型的负荷：认知负荷：例如理解事物、心算、记忆密码等等。视觉负荷：通过视觉感知界面时的感官负载。行动负荷：诸如移动鼠标或点击屏幕上的交互元素时所需付出的操作成本。处理这三类负荷所需占用的心智资源是不同的，其中认知负荷占用的最多，视觉其次，行动则最少。所以“减少点击次数”并非一成不变的准则，特别是当你仅仅为了降低点击次数而将大量信息塞进一个界面的时候。信息过载所产生的认知负荷，相比于增加几次点击所带来的成本提升，着实更加令人痛苦。我们接下来看到的是 Slack 的公司注册流程。仅有的三个必填项分散到了三个界面中，增加了两次额外的点击，但在心智上，每一步都精确符合用户的认知，你无需付出太多的思考，流程自然而然，你甚至不会在意点击过几次鼠标。来源：Slack2. 清晰性 v.s. 一致性另一个典型的情况是，如果稍许的“不一致”能够使信息更加清晰易获取，则可以尝试使一致性妥协于清晰性。不过这里需要把握一个度。我曾做过的一个项目中，客户希望每一次的发布活动都能使用全新的设计风格。这样搞一两次确实可以使活动显得独特而出彩，而长此以往，整个设计思路会变得非常轻率。3. 美观性 v.s. 易用性多数时候，我们所遵从的原则是首先让产品易于使用，而后使其更加美观。这方面确实存在不少争论，所以这里我只举一个例子来说明另一种情况：有些时候，美观性确实可以掩盖易用性方面的问题。根据尼尔森诺曼团队（NN Group）的研究，“对于拥有良好视觉外观的界面，用户能够容忍其所存在的轻微的易用性问题。” 在研究当中，一名用户遇到了很多轻微的界面交互问题，但最终仍然完成了任务。之后，当被问及整体体验时，这名用户夸赞了界面的良好外观，包括配色及图片等等，并评价这个网站“非常易于使用”。4. 安全性 v.s. 易用性这一点取决于具体情况。对于大公司大产品来说，出错的成本过于高昂；存在潜在冲突时，安全性远比易用性更加重要。譬如麻烦的多重认证机制在这类产品中非常常见。此外，很多公司的内部工具在安全性方面同样拥有更高的优先级，毕竟即便易用性相对较差，员工无论如何也需要接受培训学会使用。而对于面向大众的小公司小产品，安全性与易用性之间的优先级差距相对而言没有那么悬殊，很多时候我们更倾向于易用性优先，使人们首先喜欢使用产品，而在需要确保安全性的环节提供相应的对策。5. 现有模式 v.s. 创新模式如果基于现有的模式库来构建产品，那么我们时常需要权衡的一个问题，就是花费时间创造新模式是否值得，或是仅依靠现有模式便好。要创造新模式，我们还要考虑有哪些即有元素可以被运用，新模式在将来可以怎样被复用，包括所需的时间成本等等。而现有的模式可以节省设计与开发成本，但对于特定的需求来说未必能提供到最优的解决方案。跨职能权衡然而在多数时候，关于权衡的决策很难由设计师单方面制定。很多“辩论会”由此而生，各团队都希望立足于自己所在的职能去争取到最优的方案，相关的讨论往往混杂着各个维度的要素，难以清晰权衡。尼尔森诺曼团队提供的“权衡标尺”可以非常直观地为用户需求、功能特性等要素进行优先级排序，帮助产品团队聚焦在最重要的方面。步骤大致如下：第一步：与利益相关人及其他团队成员共同脑暴产品需要具备的各种关键要素，例如移动支付、愿望单、社区、搜索；一致性、可访问性、安全性，等等。来源：Nielsen Norman Group第二步：将这些要素按照主题进行分组，例如“项目要素”、“功能特性”、“用户体验诉求”等等。来源：Nielsen Norman Group第三步：通过讨论进一步浓缩每个主题当中的要素数量，为每个要素设定一个重要度渐增的标尺；刻度的数量等同于要素的数量，且每个要素的得分互不相同，从而使团队必须制定清晰的优先级决策。来源：Nielsen Norman Group结语产品设计亦如我们的生活本身，很多时候并不存在绝对正确的决策。在不同的情境下，有着不同的优先级、目标、约束，以及我们所必须进行的权衡。为了能够在所有的局限要素之间寻求最优决策，我们需要始终把握住高层目标，进而关注底层细节。创造产品并持续打磨的过程自始至终离不开“权衡”二字。那么多设计原则如何快速掌握？试试我这个方法！之前写过一篇《零基础如何成为交互设计师？阅读文章 > 欢迎关注作者的微信公众号：「Beforweb」本篇来源：优设网原文地址：https://www.uisdc.com/make-smarter-design-tradeoffs
表单 信息 抽屉 本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。前言在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。表单设计的 3 大模式1. 平铺平铺：指的是将表单信息完整的排版在界面中。无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。例如：飞书的审批表单页面设计就是采用平铺的设计方式2. 分组表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。折叠分组折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式区域分组区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。例如：下面是我在工作中所运用的一个区域分组的表单设计方式。标签分组标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。上下结构左右结构复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。3. 分页分页：指的是将整个表单信息通过多页的形式展示。分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。表单的 4 大呈现方式及使用场景1. 弹窗（对于信息较少的表单）最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。案例：2. 抽屉（内容信息较多，且与底部信息强关联）抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。下面分别介绍这三种模式的区别以及使用场景。有遮罩层的抽屉模式有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？有遮罩层的右侧抽屉模式的表单具有以下特点：01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。案例：无遮罩层的抽屉模式无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。无遮罩层的右侧抽屉模式的表单具有以下特点：01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。02：适用于复杂表单且可以展示更多的字段信息。03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。案例：3. 挤压模式挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。案例：4. 页面（单独表单填写，且信息量较多）当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。案例： 总结B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 欢迎关注作者的微信公众号：「设计小余」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-model
工具 插件 干货 大家好，4月的第3波实用设计干货合集来了！这次又找到了2个颇为不错的免费插画来源，不过这次最值得关注的其实是一款付费的动画曲线制作工具，和一个可以免费申请 Beta 测试版的 AI 矢量编辑插件，这俩工具都有独特的优势，具体可以往下看：1、文字快速视觉包装插件https://chrome.google.com/webstore/detail/text-to-image/nkljaohokglebeljcgchmehnhdieakda有时候，单纯地分享文本内容，会显得过去单调，你可能会想将文本内容快速转换为视觉上看起来更加有趣的版本再展示出来，那么这个 Chrome 浏览器插件可以帮你快速完成这种设计。选中文本之后，右键呼出菜单选择插件，自动生成图片效果，修改配色和其他参数，即可导出图片。2、2022 年可视化导图工具全搜罗很多做产品的同学都是工具控，这个是脑图软件博客网站所总结梳理的最新的的脑图工具列表，你可以直接在这个列表中筛选出你可能用得上的脑图工具。最近几年，脑图工具的类型和数量翻了接近10倍，各种衍生的工具各有优劣，如果你对于这类工具感兴趣，不妨订阅这个博客的邮件更新：https://mindmappingsoftwareblog.com/newsletter/3、免费插画图库 Control Rockshttps://control.rocks/这是一套可以完全自定义角色的插画图库，总计有2种不同的样式——黑白描边和填色两种，它的完整版本是矢量的，可以直接在 Figma、Sketch 和 Ai 当中使用，免费版仅仅包含 PNG 格式的插画，但是完全免费可商用。4、免费插画素材Figma 插件https://www.figma.com/community/plugin/781441863578182316/Illustrations这是一个可以用于 Figma 的免费图库插件，插件包含的插画都是高质量且免费可商用的，安装好这个插件之后，直接拖放插画即可应用于 Figma 的各个 UI 界面当中。5、动效曲线编辑器 Converturehttps://ixeau.com/couverture/如果你经常需要设计动效，那么你应该清楚一个好用且专业的动效曲线编辑器有多重要。这个名为 Couverture 的缓动编辑器出自一名德国柏林的独立开发者，这个工具不仅能够生成动态足够自然的缓动曲线，还能实时预览，内置的动效曲线效果极佳，而且可以非常自然地导出和 CSS、SwiftUI ，并且可以导入其他支持时序曲线的设计工具。这是一个收费的 APP，但是它确实非常好用且具有针对性，感兴趣的同学可以看看。6、数据跟踪插件 Qualashttps://www.qualas.io/正确的数据跟踪能够帮助产品团队更好地进行决策，而这个名为 Qualas 的工具则是专门帮助团队更好搜集数据用的，从产品设计阶段开始进行数据跟踪节点的埋设，可以让数据团队、开发者、PM 和设计师直接在原型图上开始协作，确定需要跟踪的数据节点、类型、状态，无需花费大量的时间来编写 Excel 表格和数据库表单，而是直接可视化地完成这个环节，全部在 Figma 内完成。这个插件提供免费试用。7、超强矢量轮廓编辑插件https://www.lttrink.com/illustratorLttr/Ink 是一个面向 Adobe Illustrator 的笔触矢量编辑工具，它从根本上将 AI 中的钢笔工具进行了进一步的升级，尤其是用来设计字体的时候，这款工具能够帮你快速编辑字体骨架，修整字体轮廓，各个锚点井井有点，不会出现混乱的情况。目前这款插件可以免费申请 Beta 版试用，抓紧机会。8、3D 图标包 Joyconhttps://designill.gumroad.com/l/joycon-free这个名为 Joycon 的 3D 图标包出自设计社区 Designill，完整版 64 个图标的版本是收费的，不过提供一个免费的 Demo。这个设计师社区其实还会日常推荐很多别的设计资源，你可以访问这个链接 https://znap.link/designill 获得更多的免费资源。9、开源 React 控制面板 Horizon UIhttps://horizon-ui.com/Horizon UI 是一套适用于构建控制面板的开源系统，它适用于 Chakra UI 和 React，使用它来构建面板和呈现复杂多变的数据，不仅能够确保功能上的完善和多变，而且可以确保视觉层面上的自然好看。Horizon UI 还有付费的 Pro 的版本可供选择。第一波！2022年4月精选实用设计干货合集大家好，4月的第1波实用设计干货合集来了！阅读文章 > 第二波！2022年4月精选实用设计干货合集大家好，这里是 4月的第2波实用设计干货合集！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/2022-4-design-resources-vol3
界面 产品 几何图形 Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。总结从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：B 端界面设计占比 476/828，57.4%；C 端界面设计占比 180/828，21.7%；视频动效作品占比 223/828，26.9%；明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。Dribbble 年度最佳作品Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。下面我们来欣赏年度最佳作品里面的流行趋势吧。1. 易读性（停顿感）字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。2. 曲线在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。3. 多彩高斯渐变风多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。B 端界面设计1. 侧边栏 SidebarB 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。2. 仪表盘设计仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。3. 流程设计复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。4. B 端 C 化B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。B端产品C端化是自嗨？对不起我想得太简单了！经常在网上看到「B 端产品 C 端化」的讨论。阅读文章 > 5. 轻代码化轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。界面设计技巧1. 人文气息为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。2. 毛玻璃效果毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 3. 轻拟物轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。大厂都在用的轻拟物设计风格，本文教你四步完成！上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读：[link https://www.uisdc.com/light-imitation-style]本期展开轻拟物的具体技法讲解和演示。阅读文章 > 4. 简洁设计简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。5. 几何图形几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。6. 暗黑设计暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。阅读文章 > 7. 模块化（组件化）为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。为什么我强烈建议你学会使用模块化设计？风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。阅读文章 > 8. 插画插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。9. 几何插画几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。10. 线面插画线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。动效1. 微交互界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。想做好微交互设计？我总结了这 8 种常见类型！大家好，我是 Clippp，今天为大家分享的是「微交互设计」。阅读文章 > 2. Mg 动画Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。三维1. 三维图标MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 2. 轻三维为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？阅读文章 > 3. P4D（PS+C4D）P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。4. 卡通 IP卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。盲盒和NFT背后，是属于设计师的掘金热潮前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。阅读文章 > 5. 三维动画C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。总结上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势Hi，我是彩云。阅读文章 > 欢迎关注作者的微信公众号：「水手哥学设计」本篇来源：优设网原文地址：https://www.uisdc.com/dribble-design-trend
菜谱 编辑 用户 今天继续给大家讲交互方案的设计思路。你们会发现其实想做交互设计比 UI 设计难很多，那为什么交互设计比较难呢？因为 UI 设计相当于从 0.5 到 1，而交互则是从 0 到 1。但并不意味着 UI 就比交互来的层次低，交互注重逻辑，UI 注重对品牌和质感的表现，没有孰优孰劣，但是在入手和执行层面，UI 相对简单一些（我自己也是 UI 出身）。交互设计也可以说是体验设计的核心。我们需要根据已有的“材料”来进行任务流程、用户行为的设计，以确保用户能高效、满意的完成任务达成目标和解决问题。所以在这整个环节中，要思考的信息和判断的逻辑会更复杂。交互设计往往觉得很有成就感的地方在于自己设计的流程或者一些创新的交互能够获得用户的好评以及业务数据的提升，在这个方面 UI 设计的成就感知会来的不够明显，因为视觉表现很难量化，用户也只能通过好不好看来表达，所以 UI 设计师们也希望通过一些方法来找到属于自己的成就感，例如我们也会选择一些平台发表自己的视觉创意来获得同行们的认可等等。那么今天我们一起来聊一个交互案例，来看看需求从“材料”到具象化表现都需要思考什么。当然，学案例是为了扩充自己的知识面，但是想要真正学会，我们要从底层开始学。首先来讲一个发布菜谱的功能：一个美食类产品中需要设计一个用户自己创建菜谱的流程，基于这个概念我们可以如何设计流程。我们都知道商业设计离不开业务，那么这里我们先不考虑这么多，只考虑如何将流程设计做到最高效，有需要的时候再将业务加入进来。第一步：来尝试进行一下脑暴这里和工作中常规的步骤不一样，在工作中我们往往第一步都是去分析这个需求的背景、用户的定位、业务目标什么的，但是这里不用，我们只单纯的做交互方案，所以就不去啰嗦那些了。在脑暴前，准备好 3 个问题：1. 什么是菜谱2. 为什么要发布菜谱3. 怎么发布菜谱。通过这 3 个问题我们就可以大致知道这个任务所包含的信息、形式、流程。1. 什么是菜谱：菜谱是通过图文、视频等方式给用户提供做菜步骤的教学内容2. 为什么要发布菜谱：希望通过用户自主发布内容的形式来提高整体用户的活跃度以及平台对用户个人品牌的塑造。让用户之间产生更多的互动。3. 怎么发布菜谱：这里要根据第一个问题脑暴之后再进行流程的设计。接下来我们根据菜谱这个概念进行拓展：1.菜谱的基本介绍 2.菜谱的制作流程 3.其他支线选项。在真实工作中其实产品经理会把这个流程要包含的功能和信息点都列举清楚，只是我们现在自己来从 0 到 1 设计一次。菜谱的基本介绍可以包含菜谱的封面、菜谱的名称、菜谱的简介、难度、时间、食材，菜谱的制作流程可以包含需要的图片、文字描述。但是这里的颗粒度大小不一，例如难度、时间颗粒度小，但是食材我们可以再继续细化拓展：食材的名称、用量。菜谱的其他编辑选项，例如菜肴的口味、菜系的分类，编辑这个选项是有助于其他用户在筛选菜系和分类的时候更快的找到这个菜谱。第二步：根据信息和内容进行触点分析和控件使用例如菜谱的封面，那么我们就需要一个容器来上传图片或视频，可以用一个占位图 image 来代替，先不用考虑放什么位置以及在哪个节点，先将每一个信息点都进行控件化。接下来菜谱的名称和简介都是输入模块 text。难度和时间有两种形式：输入和选择，那我们当然用选择，因为操作和理解成本更低，能用选择就不要用输入。选择用什么形式呢？可以用 picker、action sheet 动作面板、展开单选，那哪个更方便高效呢？这里如果需要选择的选项不多，也不需要滚动、联动，那么用 action sheet 就可以了。如果你想让选项更直观更方便操作那么你可以把选项直接放出来。交互控件科普系列！ Sheet 的常见样式和设计注意事项总结还在频繁地使用弹窗对用户展示重要提示吗？阅读文章 > 接下来是食材，食材又分为食材的名称和用量，那么也是一个输入的行为，需要两个输入框，这里就不能用选择的交互了，因为在这个场景中选项是根据用户需求随机、特定的，需要用户自己输入。最后是菜谱制作流程中的图片和文字描述，也是图片和视频的上传和文字输入模块。这样我们就把这些控件具像化了，就更直观的帮助我们进行接下来的操作。第三步：将控件进行组合以及场景的补全根据用户的操作习惯和场景，我们将操作顺序捋一遍。什么样的操作顺序更符合我们上传的习惯呢？先填写制作顺序吗？不对，应该先编辑基本信息，也就是我们通过烹饪的流程，先想好要做什么菜，再去准备食材，再开始一系列烹饪的步骤。所以我们要先让用户去添加封面编辑标题和介绍，烹饪难度和时间其实放在开头和末尾都可以，但是考虑到这些信息在列表中会一起展示，那么我们索性就在开头就直接一起编辑。接下来是添加食材，添加食材的场景中会涉及到对食材的添加、删除、清空以及智能编辑（类似添加收货地址），所以这里的场景不要漏掉。那有的小伙伴要问是不是可以再加一个拍照识别食材的功能？其实不需要，因为我们在准备做菜谱之前肯定对这道菜有了解，知道每一个食材的名称我们才会去做菜，否则连什么食材都不知道就去做，那万一有毒呢？所以这个场景是不存在的。再接着是编辑制作步骤，依然是思考用户场景，除了上传图片和文字以外，还需要提供步骤添加、删除、调整位置、批量传图等功能。这些场景我们在脑暴的时候或多或少会遗漏掉。第四步：制定步骤和流程移动端产品的层级和路径主要是根据页面来划定的，所以页面越多路径就越深，但是路径深并不意味着一定就多余，路径少也并不意味着操作就简单。路径阶段的划分主要是根据这几点来考虑的：1. 当前页面内容是否溢出、符合场景、满足预期也就是说当前页面中的内容是否符合当前场景的用户，以及是不是过载了。例如我们去购买电影票的流程，当我们在查看电影详情的时候，不会出现电影院和电影场次的选择，因为不符合当前场景的用户需求。2. 场景是否独立我们在选择回收自己的手机时，在选择型号页面不会再让用户编辑估价信息。这个场景是独立的，并且只有完成了前置操作步骤后才能进行下一步。3. 任务是否需要阶段性结束，为什么需要进行新建界面，是因为当前界面在满足 1 和 2 两个约束后，要考虑第一个步骤是否阶段性完结了，例如我如果把菜谱编辑基础信息界面单独做一个界面，而编辑步骤再单独做一个界面，这里第一界面是否阶段性完结呢？还没有，因为你可以随时要去修改标题、封面、食材等等，而经常返回上一页并不是一件很简单的事，用户也会担心我编辑好的步骤会不会保存等一系列问题。这里再用一个蔚来 app 中选购车辆配置的流程举个例子。他这里也将选择配置流程划分成了几个界面，但这个流程结构就不是单纯的线性结构了，虽然他每个不同的配置单独做成一个界面但是顶部利用 tab 来切换不同配置选项的界面。所以当任务需要阶段性完成时候，例如只有先输入手机号点击发送验证码之后才能收到验证码，在这样的流程中我们可以使用下一步来进入下一个环节。如果要分不同的界面，而又没有出现阶段性完结的情况，那么前一页的内容编辑再下一页也需要有，例如我们把标题编辑单独做一个界面，但是下一个编辑基本信息界面也依然要能够编辑标题。第五步：设计原型和布局通过对用户场景和触点的分类，以及对第四步的思考，我们可以发现其实编辑基本信息和编辑步骤是需要放在同一个页面中去完成的，因为没有阶段性结束。但是放在同一个界面也有一些问题比如单个界面需要编辑的信息太多，比较繁琐，再次编辑需要上下滑动浏览不方便等问题。所以我们也可以看一下市面上的竞品都是怎么做的，有一些产品会将编辑标题单独划分出一个界面，这其实没改变前者的问题，单独作为一个页面或许是基于这两点考虑：1. 希望用户通过认真对待标题来提高菜谱的点击率和引起别人的兴趣2. 业务需求，通过让用户了解优质内容的协议来谨慎对待上传菜谱的质量3. 对于一个复杂操作前的一个准备和引导，让用户更容易接受接下来的大量表单的填写。接下来是填写的界面，那么我们就可以根据信息展示的优先级和第三步设定好的控件进行布局，这里涉及到的原理就不讲了。我们主要来分析一下某些功能在布局的时候为什么这么放。首先封面和标题还有简介从上至下应该没有什么问题，因为有两个输入模块咱就无法左右放，因为这 3 者是强关联信息所以是一个整体。其次是难度和时间，这两个字段包含的内容和形式我们在之前的步骤中提到有两种形式，一种是 actionsheet 还有一种是选项标签化平铺，前者的好处是节省空间，易扩展，后者则更加直观和方便选择，另外也要考虑类似控件在整个产品中的统一性。接下来是食材添加和编辑，这里涉及到食材名称和用量的文本输入，这里可以直接用一行输入模块来放单个食材的编辑，因为整个页面表单很长所以尽量简化上下空间。同时还有对食材的删除、清空、调序和新增。那这三个按钮怎么放比较合理呢？我们要看用户使用的场景，可以考虑的维度有：操作频率、操作优先级以及任务的主方向。所以在食材编辑这个模块中，最高频的是新增其次是删除，再次是调序最后是清空。而当食材新增后内容会向下延伸，所以新增的按钮不适合放在上方，也不适合放在每个输入模块的右侧。删除和调序则是最某个食材信息的编辑所以是针对单个输入模块的，那必须跟在后面。最后的清空可以放在新增按钮的左侧。这样就完成了添加食材的模块。再接下来是烹饪步骤。上传图片和编辑文本没什么问题，上下布局是因为在正式浏览的时候需要大图和文字搭配的形式，所以为了形式统一就只能这样布局。目前调整步骤在最底部，同时删除操作也需要点击调整步骤后才能出现，这里因为调整步骤和删除不是高频操作，弱化层级可以理解，但是如果放在底部，那么如果我想要删除第一步和调整前 2 步顺序的时候，就要上下来回滑动，不是很方便。那其实我们可以这么做，把烹饪步骤作为一个 bar，在页面向上滑动的时候置顶，添加食材也可以这样操作。就是为了让用户在上下滑动的时候可以随时进行一个编辑，步骤在任何位置都可以直接进行换位和删除。另外由于是大图模式，在换位的时候进行长按拖动其实对拇指的操作有一定的要求。既然这样为什么不用上下切换的按钮进行调序。我们来看一下拇指拖动要激活两个阶段，首先要长按激活拖动，然后需要按住不放进行拖拽，由于卡片面积较大拇指滑动的距离就要长，对于手小的用户就不太方便了。那我们是否可以做成一个上下切换的按钮，这样只要通过单击就可以完成顺序的调换，并且通常调换顺序并不需要跨越多个步骤进行，一般也只是相邻两个步骤的顺序换一下即可。所以这里首先我会把编辑按钮和批量传图都放在烹饪步骤 bar 右侧并置顶。最后再补上剩余的选项模块和发布、预览、草稿的按钮即可。预览和草稿必须放在导航栏，因为这俩功能是随时需要进行操作的所以不能在页面底部，而发布按钮可以放在最底下。也有小伙伴想问，为什么不在底部做一个固定的 bar 来放这些按钮呢。因为页面纵向信息很复杂，不仅底部占用了高度也容易误操作，在没有编辑完时，发布按钮还是比较鸡肋的，所以是不会出现一个底部固定的 bar。好啦，今天分享的交互流程案例大家学废了吗？我们下期再见，有更多想法和交流欢迎在留言区留言！为什么你的交互方案过不了？大厂高手教你这 4 个方法！本周特邀前百度资深交互设计师薏薏来讲讲自己从交互小白一路升级打怪的过程，薏薏从纯理科转行设计，从 C 端近年转行 B 端，求职、工作中踩过不少坑，今天将分享其中的一部分心得体会。阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/interaction-design-process-prototyping
张大湿
表哥
飞翔的企鹅
在路上
落霞与孤鹜
