物体 形状 视觉 2.5D插画在商业设计风格中一直名列前茅，并且受到客户和设计师的广泛欢迎。为什么呢？这有三个原因：A.在2.5D插画中，我们可以使用全系列的图形解决方案进行说明，使其在视觉上独一无二。这对于为特定品牌的需求而创建的图形非常重要。 B.您在单个场景中传达复杂或者比较细腻的信息时，2.5D插画比平面插画更有信息性。C.由于2.5d属于单一透视。所以这对于绘画基础相对比较薄弱的设计师，会相对更容易一些。不过在初次尝试2.5D的时候也会相对比较困难。因为网上关于这个话题的教程比较少，理论性的文章偏多。 所以这两年来，我们一直在教人们矢量图形，等距和商业插画。在本文中，我想与您分享使用等距插图的最有效工具，并分析如何使插图更好。那么，让我们开始吧！一. 2.5D设计方法首先要做的是永远忘记SSR方法。要在Adobe Illustrator中使用等距，我们使用引导线和内置3D功能，例如Extrude和Bevel，Rotate和Revolve。我们分别检查了每个工具。首先从线段开始，我们最初以30度（或330度）的角度放置。我只有在三种情况下使用等距测量法：1）当物体具有简单矩形的形状时，眼前物体的尺寸和比例;2）当需要完成体积图的“平面”时；3）对齐沿直线延申的相同长度的物体；当您需要将复杂形状转换为等轴测视图时，旋转是最理想的。我需要在前面提到的旋转功能的帮助下增加我们转向等轴测视图的形状厚度时使用挤压和斜角功能。当您需要绘制使用以前的工具很难创建的旋转形状时，旋转功能是不可或缺的方式。使用旋转工具时，我们按轮廓绘制对象的一半，然后旋转它。使用这些工具，您可以在等轴测投影中构建复杂的形状，这些形状在SSR的帮助下无法构建。二.光学补偿等距是一种角度，其中形状的三个边是可见的，所有直线彼此平行并且没有透视缩短。缺乏透视力迫使我们在使用等距时使用一些技巧。我们来看看例子：A.中心元素左边的图片显示，由于缩短，中心暗矩形（A）左侧的距离大于右侧（B）的距离。同时，它在几何和视觉上都处于中心位置。但是，在等轴测图中，内部对象必须向右移动，以便在视觉上看中心。问题是我们的愿景不允许我们在等轴测视图中看到事物。这就是为什么几何中心并不总是在视觉（或光学）的位置主页按钮和手机的摄像头向右移动，以便在视觉上看中心为了弥补透视的不足，我们必须将内部物体略微向右移动。我们无法确定究竟有多远，因为它取决于它的大小。你只能通过眼睛告诉它。B.物体的大小等长线中缺少缩短也会导致相同尺寸的物体彼此距离相当远的物体出现一些问题。在透视图中，我们可以很容易地确定哪个物体更近，哪个更远。但是，这不适用于等轴测图。这可以在汽车的车轮中最清楚地看到。如果我们绘制相同尺寸的近轮和远轮，则视觉上看起来像后轮更大这就是为什么为了在视觉上创造相同的轮子，我们应该将后轮稍微缩小（例如B）。如果我们使它们的尺寸更加明显（例如C），那将会更好。C.视觉静态左 - 看起来不自然；右 - 看起来更逼真由于在等轴测图中所有线条彼此平行，因此插图看起来不自然。通过添加以不同角度放置的对象可以很容易地解决该问题。 笔记本电脑的例子清楚地证明了这一点。直线是2.5D比较不常用，可以稍微有些角度（与那些推广SSR方法的人一样）。III.做有风格的样式化设计左边 - 比较死板，不够自然，右边 - Good job在等轴测视图中，我们看到一个物体的三个边。如果我们不使用等距测量方法，我们就不会得到漂亮的2D插图，3D效果也显得不伦不类。请务必在插图中使用如下流行的方法：负空间，形状线条，纹理和对比阴影。如果可以的话，尽量避免各种色调的原色。使用这些技术不仅可以显着增加您的工作效率，还可以使您的插图更专业。看看成果： 原文地址：https://medium.muz.li/how-to-make-great-isometric-illustrations-by-the-simplest-way-b3dab0cdf47b
品牌 视觉 游戏 WeGame 作为 PC 游戏发行平台，自品牌创立以来就一直致力于做连接开发者和游戏玩家的桥梁，随着业务的不断发展和优化诉求的持续积累，在今年我们迎来了品牌的全面升级。设计团队主导了 WeGame 2.0 的整体设计工作，今天便和各位分享一下背后的所思所想以及相关设计成果。迄今为止，WeGame 已经陪伴玩家走过四个年头，作为一个逐渐步入成熟期的产品，却没有经历较大的版本升级，而随着业务的不断发展，我们清晰的意识到, WeGame 需要调整升级再前行。而触发改版的具体动因，可分为以下两点：1. 自我审视，调整方向再前行WeGame1.0 定位以“发现更大的游戏世界”，着力于向外挖掘游戏内容，而今看已逐渐偏离实际，对于产品现状的自我审视，调整方向再前行，才能更好的提升品牌价值。2. 产品老化带来体验问题，需自下而上的革新产品持续迭代 4 年多，其间客户端存在着不少遗留的体验问题，如电脑资源的高占用、软件使用卡顿、启动游戏太慢等性能问题，正持续影响着平台口碑。因此自下而上的革新，提升平台体验势在必行。基于以上思考，在今年初，由产品侧发起制定了 WeGame2.0 的升级策略，主要体现为两点，一是向开发者推出一系列更友好的扶持策略，以刺激内容增长；二是持续的优化平台性能，往更轻更快更好玩的方向发展。而产品诉求是希望品牌能够传递出更友好更亲和的感觉，不走高冷范。WeGame 的核心价值在于连接开发者与游戏玩家，在品牌升级之路上也将秉承初心，因此，品牌的新定位为：与游戏人同行，表达了平台希望与玩家、开发者和行业携手并进，共同探索游戏世界的目标。具体会落实到以下三点；综上所述，我们将 WeGame2.0 的设计目标,定为以下三点：首先是配合产品战略升级，刷新品牌调性；然后在继承核心品牌基因的基础上，植入新调性以刷新品牌设定；以及探索更多维度更多形式，不断的深化品牌应用，拓宽品牌边界。而在设计执行上会具体的分为品牌调性、品牌设定和品牌应用三大实施步骤。1. 建立品牌屋通过建立品牌屋整合和梳理相关信息，包括“品牌是什么”，“品牌要做什么”，我们对 WeGame2.0 的升级工作也有了一个较为清晰明确的方向，就是要让品牌传递出更年轻、更具亲和力的感觉， 摆脱产品“疲态”，重新注入“活力”。2. 确立 WEGAME 2.0 品牌调性3. 关键词：活力、趣味、多元关键词活力、趣味、多元，是 WeGame2.0 的高度提炼和解读。活力，表明我们会带着更年轻化的表达，以传递正向的游戏能量；趣味，表达的是要去探索更多形式，做到更有趣更好玩；多元，是不断的拓宽品牌边界，创造出更多可能性。4. 围绕关键词，建立情绪板以上参考图来源于网络品牌调性确立后，接下来的工作重心围绕如何继承核心品牌要素以刷新品牌设定，使其焕发新面貌，覆盖的维度也能更广更全面。品牌设定主要由品牌识别系统、品牌形象、视觉风格三大内容构成。1. 品牌识别系统标志图形LOGO 的设计由来WeGame Logo 的设计是由“W”和“G”组成的一个裂开的蛋型，自创立之初就表达着“孵化，新生，破壳而出”的概念和寓意，在此次升级中我们希望将这份初心延续下来。新 LOGO 的改版过程在保留原 Logo“蛋形“和“W 形”的基础上，我们对图形细节进行了不同程度的调整，然后向内外部用户发放问卷以调研 Logo 的偏好度。结果显示，大家普遍更倾向于选择变化度较小的圆角化图形和渐变的配色风格，而我们也根据这个结果进行再优化和细节打磨。旧—新：新版Logo在充分继承品牌基因的情况下，将图形变得更圆角化更柔和，线条走向也调整的更为匀称。Logo 的定稿效果Logo 的动画演绎辅助图形辅助图形是除 Logo 外最为重要的品牌符号，目前主要有三类元素组成，从 LOGO 图形延伸出的“W”型和圆直角的基础型，还有结合新品牌调性加入了更多活力的视觉表达元素等。W 形：首先是从 Logo 延展出来的 W 型符号，是作为最重要的图形元素。圆直角：基于 LOGO 圆角化延伸，打造出来的圆直角的一个基础型。活力—视觉表达式 ：是对活力的具象化和视觉化，包括对“动”的表达，和对“态”的表达元素。视觉表达式图示色彩系统品牌主色调：活力渐变橙通过在旧版 Logo 上提取原色，来进行色调调和并拓展阈值，得出了全新的活力渐变橙，这个更具年轻化和动感的品牌主色调。除此以外还加入了更多的辅助配色，以形成一个闭环式的全彩色环。文字系统规范基础字体的运用：基于 Logo 圆角化的特征，寻找了一些合适的品牌基础字体。建立字符变形规则：对于特殊字体的设计，我们建立了一套字符变形规则：就是圆直角的基础型加上品牌识别元素，再加上活动的识别元素。活动 LOGO 展示：目前这个规则被应用到了四大品牌活动的 Logo 上，我们希望在这些 Logo 上能够呈现出既统一，又具备着强识别特征的效果。平面构成基于以上内容，从点线面出发来组建了各类平面构成元素，以补充平面图案素材。WeGame2.0 品牌书在完成了以上视觉符号的刷新工作之后，我们建立了一个系统的品牌视觉指南，以便指导后续的应用，这里是品牌书的部分页面展示。2. 品牌形象品牌形象的建设是品牌设定中最为重要的组成部分，作为一个人格化的符号，IP 形象往往能够携带更多的品牌信息,更直接有效的传递给用户。蛋蛋君设定：WeGame 平台的核心形象蛋蛋君，是一个探索游戏能量的机器人伙伴，它是从 Logo 图形延展而来，带着“W 形”面罩和“圆形” 等明显的符号化特征。在品牌升级中我们将会保持蛋蛋君的基础型不变，去赋予更多的形式和变化。更多配色、更多材质、更多形式、更多小伙伴“游戏人”设定包括蛋蛋君在内，这三个形象代表着游戏行业中的每个身份，我们想要以人格化的形象来提高亲和力，在后续的品牌场景中可以起到一个辅助作用。玩家设定：青春活力的年轻小伙，服装设定为反戴鸭舌帽，身穿大帽 T。开发者设定：严谨而友好的开发小哥，在造型上搭配了黑框眼镜，格子衫等元素。3. 视觉风格WEGAME1.0 风格：WeGame1.0 时期我们从 0 到 1 建立起来“硬核、酷炫”的品牌风格，而后因运营需要体现热闹的活动氛围感，转而探索更为活泼的视觉风格，逐渐的两者间风格开始存在着偏差。那么，酷炫的品牌风格与活泼的运营风格是否能够做到更好的融合呢？带着这个问题，结合 WeGame2.0 产品战略调整，品牌需体现更具年轻化和亲和力的感觉，去思考新风格应该怎么变？新风格定位：我们最首要思考的是风格定位，希望是介于硬核感和亲和力之间，为 WeGame2.0 寻找定义一种新风格，既要摆脱高冷感，又要避免低龄的感觉。流行趋势分析：然后我们也针对当下流行的风格趋势进行了研究分析，提取出其中的共性特征，主要是高概括的图形元素和高饱和、高对比的配色风格。以上图片参考来自于网络设计灵感：对玩家来说，游戏中常常出现的对抗元素 ，像“胜利与失败”，“友军与敌军”等高对比而又具备强视觉冲击力的元素，往往会成为他们最为熟知且最为关注的焦点。而抓住玩家的视线焦点，正是游戏平台所需要的。以上图片参考来自于网络定义全新风格：对撞视觉经过以上思考，最终我们定义了一种全新的风格：对撞视觉，作为平台的主视觉风格。具体表现为颜色和元素间的对撞，主要是由圆润的主元素加上尖锐的辅助图形，以及加入高对比的配色形式所组成的视觉风格，这种视觉风格是很开放的，变化的形式也可以多种多样，也比较符合 WeGame2.0 趣味多元的感觉。品牌主视觉 ：“与游戏人同行”的具象化表达设计构思：品牌主视觉主要采用了“W 形”的整体构图框架，以及多个游戏人角色一起同行、方向一致的表达元素来组成画面，以对 “与游戏人同行”的概念进行具象化的表达。对撞视觉的概念图展示WeGame 新官网首页：其他功能页面：客户端下载页、翼计划页、先锋测试页等功能页面的集合WEGAME2.0 客户端：“轻、快”围绕新品牌定位“与游戏人同行”，希望给用户带来更为年轻化的体验，WeGame 客户端搭建了一套“轻快、轻盈”的视觉语言，以契合软件性能的大幅提升；在主要业务场景中，运用了大面积的磨砂玻璃效果和丰富的主题化配色，以提升整体的品质感和商品的多样性。图：客户端主要界面一览广告模板设计：结合 2.0 辅助图形和配色风格进行组合设计，输出了多种品牌化的广告模板，以便后续在项目中更灵活的使用。运营活动设计：在日常的运营活动设计中，也会在新品牌风格的基础上来进行设计。线下应用场景：WEGAME 开发者大会在今年 7 月底所举行的 WEGAME 开发者大会这个线下活动里，官宣了 WEGAME2.0 即将跟大家见面的消息，因此以品牌主视觉延展做了整套视觉包装。礼品包装设计品牌传播活动—游戏之夜S4试玩发布会活动介绍：游戏之夜是 WeGame 专属的游戏发布会，发布会通过举办各种活动来集中造势为新游戏做推广。在今年我们一共举办了两届游戏之夜，其中下半年的游戏之夜 S4 为试玩游戏发布会，在此为了配合品牌升级的宣传工作，活动整体的视觉包装以突出 WeGame2.0 为主，延续“与游戏人同行”的全新品牌概念和全新品牌主色调。宣传视频构思:其中发布会宣传视频的构思也会主要围绕着“与游戏人同行”来进行故事演绎，主题为“游戏人，一起玩！”，画面中蛋蛋君挥手召集开发者和游戏玩家，一起跑向电脑玩游戏，似乎有好玩的事儿即将发生，强调“一起”和“同行”的概念。发布会先导视频：转场页模版设计：以一种平面排版结合 3D 动画的形式，表现蛋蛋君带着另外两个小伙伴逐个登场亮相的感觉。游戏介绍页模版设计：延续活力和动感兼具的视觉语言活动主站 KV：表现“游戏人，一起玩”的主题概念宣发海报集合:游戏联合海报：除常规的宣传物料以外，本次活动还尝试加入了游戏联合海报的形式，为每款参与试玩的游戏制作专属的宣传海报 ，提供给在各社交媒体中进行宣传，借助不同的传播渠道为活动提升曝光度。统一的海报框架，专属的游戏元素游戏海报集合：这里是所有试玩游戏的海报集合，为了配合各个游戏风格海报的主色调上也会有所调整。以上是我们在 WeGame2.0 视觉升级中对品牌探索的一些阶段性成果，而这仅仅是开启了品牌的一个新篇章，品牌建设是一个长期的过程，后续我们将持续打造高识别、高传播的品牌符号，建立和不断的丰富品牌资产，拓展更多品牌应用场景，以设计赋能和助力业务持续发展。腾讯实战案例！如何打造有温度的二次元 IP 形象？项目背景随着 80、90、00 后陆续成为互联网社交的主力群体，泛二次元文化从以前的小众圈层，逐渐发展壮大，与主流文化接轨。阅读文章 > 优设推荐关注“腾讯设计”官方公众号，第一时间获取腾讯的设计方法论本篇来源：优设网原文地址：https://www.uisdc.com/wegame2-0
错觉 视觉 角形 俗话说“耳听为虚，眼见为实”，但….有时候眼睛也会欺骗大脑。先看点有意思的东西吧，下图是网络上一张引起强烈争议的 gif 图像，这两个圆圈到底是不是在移动？会动的圆圈上下滑动页面的同时看下图，就能看见“音浪”在晃~~赫林错觉图中共有 12 个黑点，欢迎能同时看到所有黑点的同学评论区自证~赫尔曼栅格错觉事实情况是，“圆圈”要比“竖线”更高，也许尺子才能告诉你真相。缪勒-里尔幻觉实不相瞒，左右两个色块的颜色其实是一样的。同时对比错觉实践出真理，原来眼睛真的在骗我。贾斯特罗幻觉以上现象通常称之为“视错觉”，它象是眼睛跟我们开的一个玩笑，而我们往往还乐于接受这些假象。其实“视错觉”现象的背后有很多理论解释，感兴趣的同学可以搜寻公开资料了解。其中有一个重要的科学原理——格式塔原理（Gestalt是一个德国词，意为图像或形式）。格式塔原理解释了人们如何以视觉感知物体，以及图像的结构、视角、大小等要素是如何影响我们的视觉的。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 原理与应用据说在 1910 年的某天，心理学家 Max Wertheimer 看到一个铁路交叉道口的信号灯交替闪烁，产生了这么一个错觉：他觉得这些信号灯是在一个圆周之内运动，事实上，这些信号灯只是按预定的时间间隔闪烁而已。这个视觉与现实的差异触发了 Wertheimer 的灵感，并形成了一套完整理论。下面我们就来简单了解一下它的几个重要特性与设计应用。1. 轮廓&延续感当辨认一样物体时，我们倾向于首先辨别它的轮廓，然后将这个轮廓归类为已知的经验或事物。在此之后，我们才会去注意到这件物体的细节及各个组成部分。在下图中，观察者会首先辨认出一条斑点狗，而不是首先认出它的头、腿、耳、嘴等细节部位之后再在脑中组合成一条狗的样子。一只正在溜达的狗子与之类似，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。下图中，观察者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。在视觉感知中，目光的延续性已经超过了颜色造成的差异。交错的直线和曲线在界面设计中，轮廓感和目光动线往往比细节更重要，如果用户根本就辨认不出图像之间的关系，那么这个界面设计得再华丽也是失败的。卡片结构常常在任务型表单设计中被使用，它能带给用户更清晰的步骤感知，并快速识别每个模块的信息类型。卡片式结构经典的 T 形结构被广泛运用于导航、菜单类设计，对于复杂信息归类有很好的效果。T 形构图2. 平衡错觉有时候图形位置会欺骗你的眼睛，尤其是那些具有复杂几何以及比例比不一致或不对称的特殊图形。比如将三角形完全居中的放置在容器内看起来也会像是发生了偏移。会出现这种现象的原因是由于三角形分割错觉的影响。如下图当三角形质心与容器中心相重合的时候看起来会更“居中”。三角形分割错觉在进行排版或者字体设计的时候，往往更多的会依赖于直觉，而不是参数和逻辑，如果仅仅是从尺寸数值上保持一致，也会使一个整体当中的不同个体显得不一样大，因此我们需要对同一整体下的个体尺寸进行调整，已经达到光学平衡。如下图中在没有对个体进行单独调整时所有字母看上去并不平衡。视觉平衡调整淘宝图标在设计时会将图形形态定义出一个相对模糊的范围，然后进行尺寸、位置的微调，确保图形的“质心”相对于容器居中，从而让所有图标在同等尺寸下视觉感受一致。淘宝图标设计基础规则3. 视觉补全我们的大脑往往会在接收到碎片化信息之后会自动把缺失的部分进行补全。下图中的图形在事实上是不完整的，但并不妨碍我们看到一个球体和一个柱状体。事实“缺失”的图形这种现象原理被广泛应用在 logo、广告等设计中，利用“负空间”给与“完整”图形所不能带来的视觉冲击感和想像空间。Federal Express 的标志如今仍然被认为是最经典的 logo 设计之一，发现里面的“负形”空间了么？Federal Express Logo著名的 WWF（世界自然基金会）熊猫徽标。WWF logo配合故事演绎，可以产生更具内涵的意境。29CM logoKFC 将产品与对应的行为进行了巧妙地结合。KFC 广告Koleston Naturals 是以“天然染色”为推广定位的染发剂产品。设计师将女性的长发和五官镂空，通过镂空处可以看到海和天际线，随着日出日落可以看到长发颜色随自然而变。巧妙的将产品的“天然染色”诉求和大自然结合。Koleston Naturals 染发剂广告与视频的丰富表现性相比，静态海报对于展现更深层次意境的时候比较局限，利用负形空间表现藏于表面之下的含义是一个比较不错的手法。多重含义海报在其他领域格式塔的设计理论很多时候会被应用在比如工业、建筑等设计领域，常常是各路大师们的惯用手法。火爆网红打卡界的成都太古里裸眼 3D 大屏。成都太古里裸眼 3D 广告屏放进去的红酒居然消失了。Pinetti Wine Rack就算移动观察角度，也还是会一直被这只小恐龙注视。裸眼 3D 小恐龙当盛有调料的时会出现立体效果的味碟，满满的惊喜。what should cialis cost曾经风靡一时的手机小游戏，充分利用了视错觉构建的矛盾世界。纪念碑谷游戏截图对视错觉感兴趣的小伙伴还可以去线下场馆实地体验，Museum of Illusions 幻觉艺术博物馆短短 3 年时间风靡全球 19 个国家在纽约、柏林、迪拜等多个城市排名 TOP5 的“明星博物馆”，据说上海也有开哦~Museum of Illusions 幻觉艺术博物馆写在最后视错觉的相关理论非常多，在设计上的应用可以说是存在于生活的方方面面，它既能帮助设计师避免表达与认知发生偏差，也能在创意领域中发挥非常大的作用。进阶学习！视觉设计中的11个经典的视错觉现象主物质界面（译者）：写这篇文章目的，是帮助大家理解这些让人抓狂的效果背后潜藏的原理。阅读文章 > 欢迎关注「淘宝设计」公众号：本篇来源：优设网原文地址：https://www.uisdc.com/visual-illusion
视觉 图标 内容 背景顺丰速运 APP 围绕寄件生活场景，为用户提供寄快递、查包裹、查运费、网点服务等一站式快递物流服务。随着 2021 年业务发展和内容丰富，用户对产品体验有着更高的诉求。基于用户声音及产品目标，从体验设计纬度定位出现有界面风格陈旧、操作体验不统一、品牌感知弱等问题，因此我们对顺丰速运 APP 进行全新设计升级。接下来，我们将此次改版的内容以及设计上的思考拿出来与大家一起分享，感兴趣的小伙伴可以前往应用市场下载「顺丰速运 APP」进行体验哦。前期分析通过数据分析、用户声音、体验自查、竞品分析、行业设计趋势分析，存在以下几个问题：产品特色不够明显，与竞品拉不开差异，核心功能体验路径冗长且复杂视觉风格近一年没有更新迭代品牌感知弱，缺乏情感化传达1. 设定设计目标针对现有问题，最终确定设计目标为提升顺丰速运 APP 的视觉美观度、操作易用性及品牌辨识度，强化产品的核心竞争力。实现这一目标我们提取三个关键词：「美观 – 全新视觉升级」从界面布局、色彩、图标、字体等进行全新视觉体验升级，让用户感受到更好的视觉体验「多元 – 更丰富的服务体验」针对日益增加的多样化需求，设计上从多元工具整合和自定义设置两个角度出发，进行多元化服务设计探索「高效 – 服务高效性」强化信息层级展示，提高用户查找信息效率2. 全新视觉现有视觉风格满足不了年轻用户群体的审美诉求，新旧版本交替导致视觉界面体验不一致。伴随着产品服务体验不断升级，视觉风格也亟需进行升级。本次视觉升级围绕颜色年轻化、极简化布局、字体规范化、图标亲和力、情感化传达进行展开。色彩年轻化黑红作为顺丰的品牌色，升级后持续强化品牌感知；同时在明度和饱和度做了优化，相比之前得沉闷，优化后整体更加活泼与透气。中性色作为贯穿整个产品的颜色，进行了规范化定制 ，让 APP 整体视觉更统一成体系。极简化布局旧版本页面边距较小，呼吸感较差，内容层级不清晰。从产品的信息展示效率上考虑突出重要信息和功能，因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计，使之可以较好地聚合各类信息，更加有利于信息流内容的清晰展现。圆形在人的视觉过程中更容易被认知，给人一种柔软治愈的感受，圆角的合理运用对容器来讲，会突显矩形内的内容，将用户的视线聚焦在内容本身。两个圆角矩形排列时更容易区分内容归属，模块化更强。字体规范字体的运用 ，为整体视觉风格一致性打好基础提升产品体验。图标识别性：颜色采用顺丰的品牌色黑红，运用了叠加撞色的手法，打造独特的视觉语言，同时强化信息层级功能性：通过设计上手法进行区分，例如：图标线性的表现形式一致性：采用圆角，结合圆润视觉语言，统一视觉风格美观性：整体视觉风格更加年轻，活泼底部导航栏图标在图标微动效设计上贴合图形的意义，增加弹动效果，让用户在切换时感知状态的变化。想学更多的图标动效：本篇来源：优设网原文地址：https://www.uisdc.com/express-app-v9-0
用户 利益 视觉 签到提醒、会员购买引导、福利发放等场景都需要依托于弹窗为载体进行展示。分类并拆解设计细节，是画好运营弹窗的先决条件。大纲：弹窗属性介绍运营弹窗的作用运营弹窗在用户行为路径中的出现节点运营弹窗的 8 种细分运营弹窗的设计逻辑拆解运营弹窗的视觉分析弹窗属性介绍弹窗是一种典型的模态视图，所谓“模态”是指，暂时中断用户操作，以确保用户接收到重要通知，或专注做出某项决策，半透明蒙版起到隔绝内容层与浮出层的效果。当用户点击弹窗中的按钮时，才能退出模态视图。由于弹窗的阻断感极强，弹窗的出现必然伴随体验的牺牲，因此，除非有足够的理由，不然慎用弹窗。弹窗大分类：基础弹窗：通知类、决策类运营弹窗基础类型弹窗承载着重要功能，且与流程紧密相关，不容易引起用户抵触，而运营类弹窗，往往背负着明确的运营指标，以商业为导向，需要合理布局和策划，提供足够的利益点或趣味性，才能避免引起用户反感。运营弹窗的作用运营弹窗的出现势必对应着一个明确而关键的目的，不同的运营目标影响视觉呈现的方式。运营弹窗的目标有 3 大类：为了转化：刺激用户消费，不管是发放折价券或者联合会员，都是用利益引导用户购买，从而实现转化。为了活跃：引导签到或参与时效性活动，以利益为驱动，增加用户打开产品的动力。为了拉新：以拼多多为代表，用现金的形式吸引用户大量分享，依附微信强大的社交网络，力求达到指数型裂变。运营弹窗在用户行为路径中的出现节点弹窗本身带有一定的强迫性，用户没有办法禁止弹窗出现。糟糕的弹窗设计不仅达不到运营目标，反而会让用户对产品整体的观感直线下降。不妨以弹窗出现为起点，梳理用户使用路径。运营弹窗的 8 种细分基于以上分解的目标维度和行为路径维度，我们可以将运营弹窗细分为以下 8 类：利益发放、开卡弹窗、签到弹窗、活动弹窗、分享弹窗、反馈弹窗、挽留弹窗、回归弹窗。运营弹窗的设计逻辑拆解1. 利益发放弹窗利益发放弹窗的核心是：给用户一个能激发消费的理由，这个理由可以是具体的折扣优惠、也可以是拼手气抽奖或者其他福利形式。当利益足够吸引时，用户越倾向冲动消费，而当利益吸引不够时，可以通过增加形式感或趣味性的玩法进行补充。2. 开卡弹窗开卡弹窗，顾名思义，是为了引导用户购买会员。核心是突出会员的优越性，常见的具体手法是，计算节省金额、展示专属功能、制造紧迫感、提供免费体验机会等。根据产品不同的核心竞争力，选择合适的利益点，如工具性产品主要以产品性能为核心卖点，如果对自己产品有信心，不妨提供免费会员体验机会，“由奢入俭难”，一旦体验过流畅高效的会员服务之后，升级服务的欲望将会更加强烈。3. 签到弹窗签到是很好的提升粘性的手段，根据签到功能的权重，分配不同的展示形式。首页导航栏、个人中心都是常见的放置签到入口的位置。部分产品着重突出签到，当用户进入首页之后，直接跳出签到弹窗。在流量最大的首页跳出签到弹窗，好处是在总量上提升了进入签到流程的 UV，但是坏处也相当明显，对于没有签到意愿的用户来说，这无疑是一种强硬的打断，影响体验。4. 活动弹窗活动弹窗主要是为了推广活动而存在，活动的具体形式不胜枚举，因此视觉样式也多种多样。根据活动性质、品牌调性和目标人群视觉偏好，选择合适的视觉风格进行展示。5. 分享弹窗在获客成本越来越高的当下，如何有效拉新成为关键和难点。被拼多多“套路”过的用户已然对分享提现有了防备。清晰明确的门槛和足够强的利益点，才是撬动用户主动分享的关键。6. 反馈弹窗反馈弹窗顾名思义，是告知用户结果的弹窗，分为正反馈弹窗和负反馈弹窗两种。正反馈弹窗很好理解，告知用户得到了某些福利，氛围热闹愉悦。而负反馈弹窗的设计方向有两种，一种是“以正面姿态传递负面信息”，如下图图 3，整体氛围还是热闹喜庆的；另一种设计思路是“情感化表达负面信息”，将“遗憾”和品牌 IP 做结合，通过 IP 形象将负面情绪拟人化、卡通化，减轻用户的失落感。7. 挽留弹窗当用户关闭某些弹窗后，又会立即出现一个祈求用户回心转意的挽留弹窗。挽留弹窗最需要注意的两个重点：文案突出利益点：表明用户将要放弃的福利是很可观的，强化损失厌恶。按钮位置：根据用户习惯，右侧按钮是惯常行动点，一般是顺应用户意愿的，有“确定”的默认内涵，而挽留弹窗的行动点布局是逆反的，用户的“确定”实际上被放置于左侧。8. 回归弹窗回归弹窗见于用户在一段时间内都没有打开应用或界面，用户本身对产品的粘性较低，为了争取用户，在此机会给用户发放福利，希望能尽量留住用户。运营弹窗的视觉分析从视觉表现的角度拆解利益发放类弹窗，从简约到复杂的过程中，信息传递的效率逐渐下降，氛围感逐渐抬升。针对不同的场景，权衡信息与氛围之间的平衡。有些时候，设计师下意识会在弹窗上增加许多氛围装饰，虽然起到了丰富视觉的作用，但一定程度上也影响了信息的传达。活动弹窗由于主题灵活多变，对应视觉呈现方式也多种多样。常见弹窗有基础形状，一般是矩形，而有些弹窗突破了形状的限制，没有底板约束，更加自由。工具性、金融性产品更加适合规则弹窗，凸显专业克制，而娱乐性产品，如微博，重视氛围打造，更加适合无边框弹窗。小结设计运营弹窗，首先要了解设计目标，做到心中有数，根据信息优先级进行视觉上的突出和弱化，平衡氛围和信息传达效率。整理并归纳优秀案例，使设计更加有的放矢，有理有据。本篇来源：优设网原文地址：https://www.uisdc.com/run-popover-design
飞翔的企鹅
在路上
落霞与孤鹜
张大湿
