礼物 动画 序列 首先想说下为啥要写这篇文章，最近接到个项目任务，制作直播间礼物赠送视觉效果，由于之前没有接触过此类设计，因此在多方打听，并在网上到处探索后发现 SVGA 是个不错的选择，在与开发同学沟通并尝试了另外几种格式输出文件后，我们最终敲定了用 SVGA。在网上搜索了很多相关资料学习，发现网上关于 SVGA 的资料相当少，而且很大部分还是介绍关于开发的，关于设计制作的少的可怜，这也是我打算写这篇内容的的原因，我觉得或许应该有这么一篇文章，帮助到一些正在做这个事儿的设计同学，如果有什么表达有问题的地方欢迎大家指正…让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、礼物动效输出方法A：导出关键帧动画制作礼物动效缺点：需要把图片带到安装包中，增大了安装包体积B：使用属性动画缺点：开发代价较大，每一套礼物动画基本都不一样，开发人员需要去细细调参，花在业务上编码的时间会变得非常有限，从代码复用率极低C：输出 GIF 文件缺点：输出效果差，并且资源占用高D：使用 SVGA，SVGA 支持位图，并且输出后直接封装打包好的，直接给开发 SVGA 文件就 OK，并且 SVGA 更贴合直播类应该场景，SVGA 所提供的动态文本、动态图像功能都是其它库所不能提供的，在实现炫酷动画的基础上，性能表现也比较棒。SVGA 是开源工具可以跨平台使用，支持 Android、iOS、React Native、Web、微信小程序，但是在微信小程序上表现会差一些。二、什么是 SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。SVGA 不同于 Lottie，Lottie 需要在 Player 一层完整地将 After Effects 所有逻辑实现，而 SVGA 则将这些逻辑免去。也因此，SVGA 可以同时支持 Flash。SVGA 做的事情，实际上，非常简单，Converter 会负责从 Flash 或 AE 源文件中提取所有动画元素（位图、矢量），并将其在时间轴中的每帧表现（位移、缩放、旋转、透明度）导出。Player 会负责将这些信息还原至画布上。关于Lottie：Lottie 动效设计完全指南：渐变修复之前的文章已经介绍了 Lottie 是什么，以及如何导入/导出设计文件，那么今天就为大家讲解如何修复渐变。阅读文章 > 三、AE 基础属性制作输出 SVGA笔者常用的动效制作软件是 After Effects，因此主要讲如何通过 AE 制作导出 SGAV 动效，利用 AE 制作基础属性动画，基础属性动画包括（位移、缩放、旋转、透明度）。第一步：从 sketch 或者 PS 中将礼物和礼物效果元素切图导出，根据个人需可以将礼物拆分成几块分别导出，方便 AE 中制作动态效果。第二步：将导出的切图素材导入 AE 中，利用 AE 制作基础属性动画，制作完成后结果如下第三步：将背景隐藏在窗口-扩展中找到 SVGAConverter_A第四步：用 SVGAConverter_AE 插件导出 SVGA 文件，输出 SVGA 时记得把背景调成透明背景，输出后如下通过下图可以看到 SVGA 输出格式后文件大小仅为 145KB，如果是序列帧的话文件大小高达 10 几 M四、AE 预设效果制作输出 SVGA接触过 SVGA 的同学应该都知道，SVGA 支持位图、矢量和一些基础属性动画，很多时候我们制作礼物特效的时候，都是用自己做好的位图素材导入 AE 进行一些基础属性的动画制作，这次我将利用序列帧位图制作出一些更炫的礼物特效。第一步：在 AE 中用预设效果制作出自己满意的礼物特效第二步：将制作的特效动画导出序列帧，然后在将序列帧从新导回 AE 中，新建预合成将每一帧拼接起来，这样做的目的是因为 SVGA 无法识别 AE 的表达式和效果预设，所以我们将特效转为序列帧后在重新放进 AE，序列帧是位图所以 SVGA 可以识别并导出特效。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。五、AE 插件制作输出 SVGA这次我用 AK 大佬的插件 saber 为大家做案例，saber 是一款很不错的光效制作插件，也比较容易上手，视觉表现力也非常棒，本篇文章主要是将 SVGA，所以就不给大家具体说明 saber 如果做礼物特效了。第一步：根据礼物的轮廓利用 saber 插件制作出火焰燃烧效果。第二步：和刚才所说的预设效果特效动画一样，我们通过 AE 将特效动画导出 PNG 序列帧，然后在将序列帧导回 AE，并将每一帧拼接起来，这里有个小技巧给大家说下，用过 saber 的同学都知道 saber 的用法是利用 AE 的图层样式“屏幕”将光效合成在图里，其实 saber 也可以导出透明背景的 PNG 的，方法很简单，将 saber 当前图层复制一层，然后对复制出来的副本进行用亮度遮罩。第三步：接下来将制作好的序列帧预合成放置到礼物特效合成中，打开 SVGA 插件输出 SVGA 礼物特效动画。总结最后聊一下关于用其他软件制作的礼物动画，根据上面所说的几种方法可以发现，我们想要在 SVGA 中想要得到更好的效果，就是将制作的特效输出为序列帧后在 AE 中重新拼接起来，换一种说法就是我们可以不仅限于 AE 来制作，也可以使用 C4D 或者其他设计软件来做，只需要我们将最终效果已序列帧的形式进行输出即可。并且我们也可以利用位图、基础属性和插件相结合来做，值得注意的是如果视觉效果做的太过复杂会导致文件过大，同时也会产生性能方面的问题，在制作的过程中大家还时要把握好一个度。附件有 AE 的 SVGA 安装包大家可以下载参考资料：SVGA： http://svga.io/designer.htmlhttps://juejin.im/entry/59f1648f5188254115700ee6https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbfhttps://blog.csdn.net/gutaocslg/article/details/79908414 文件名 如何下载使用 文件大小 提取码 下载来源 SVGA安装包17.07MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/svga-motion-design
创意 品类 素材 “这可能是智慧的时代，也可能是愚蠢的时代”，不确定性作为 2022 年的主旋律，给营销经营带来了诸多风险的同时也创造了许多增长机会。以下将由羚珑设计平台联合主站体验设计及创新中台设计团队，为您解读在营销即时创意设计中的三大行业特征、四大创意洞察，并发布三大即时创意工具能力，助力每一次营销 Campaign 都掷地有声！如何提升电商图的点击率？先来了解注意力法则！信息爆炸的今天，消费者的注意力越来越稀缺，设计的目的不再仅仅是美观，更要有效。阅读文章 > 一、序言：营销创意从玄学到科学2022 年的零售电商迎来了 Ta 的第 14 个双十一大促，在全平台营销活动的助力下，线上流量及销售总额依旧保持平稳增长。在流量增长趋缓的背后，零售电商的生意模式，已经从抢夺增量完全转变为了竞争存量。与此同时，随着音频、短视频等泛创意内容发展，多元化的营销内容在一点点地抢夺着消费者的注意力。营销创意作为企业经营的一环，同样面临企业经营的三难选择困境。企业经营中的不可能三角是时间、金钱与创新，创新不是天马行空，而是在有限时间与金钱限制下的有限创新。同样地，营销创意中的不可能三角则是创意的规模、成本与质量，站在生意视角的营销创意，追求的是在有限成本投入下，带来规模化收益与优质创意效果。但不同于企业经营，营销创意不是简单的加减乘除，往往由于消费者的多元化与流量动线的复杂度，而产生非线性的效果表现，极大提高了创意投放的不确定性。广告大师约翰·沃纳梅克曾经这么描述创意这门玄学，“永远有一半的广告预算是浪费的，但遗憾的是，你不知道是哪一半”。在电商平台导购场景下，借助于海量用户数据反馈，羚珑基于千人千面的即时性创意生成能力，持续探索着创意科学化生产：通过程序化设计及投放技术，将高维度、难理解的创意美学转换为低维度、可区分的标签表达。同时依托人工智能算法，进一步挖掘海量多元化创意数据之间的关联与规律，建立全链路调优机制实时动态调整创意元素与组合形式，从而实现营销创意从玄学到科学的自我进化！此次报告由京东羚珑设计平台与主站体验设计、创新中台设计团队共同发布，以营销创意行业概览为始，解读营销创意发展设计新热点，并面向业务及品牌商发布动态创意策略及设计效率工具，旨在助力品牌每一次创意投放都能确定性增长！二、营销创意数据说明1. 数据统计数据来源：白皮书中提供的数据来源于京东 APP 首页首焦素材投放场景，数据统计来源于京东内部大数据平台。素材来源：白皮书中提供的素材均由 羚珑·即时创意生成引擎 智能生成供给。2. 数据范围统计周期由 2022 年 1 月 至 2022 年 11 月。3. 数据指标点击指数，即创意素材点击量占整体曝光量比例，数值越大说明创意素材越受欢迎营销效果越好。三、营销创意行业特征1. 广告市场增长趋缓，创意愈发重要根据艾瑞咨询数据显示，2021 年中国网络广告市场规模达 9421 亿元，同比增长 22.9% ，整体市场规模即将突破万亿。尽管广告市场规模增速趋缓，但万亿规模的量级表明，广告创意已经不再是一项营销支出，而是企业或品牌的一项经营战略，尤其在“注意力经济”模式下，广告创意的制作效率与投放效果扮演着愈发重要的角色。2. 千人千面时代，创意素材需求缺口明显随着生产技术与产业链的成熟，低线到高线城市基本已跨入第三消费时代，物质条件富足的同时，追求个人消费与精神价值差异化。根据京东 2022 财年第三季度财报显示，自营采购的 SKU 数量超过 1000 万。在海量且多元化商品供给的背景下，京东也推出了全新的 APP 11.0，通过交互视觉动线的新升级，围绕商品提供多样化内容呈现与推荐，以满足消费者的潜在兴趣与需求。如何进行体系化大改版？京东 APP 11.0 深度解读！在受到不确定性扰动的外部环境下，今年的 APP11.0 升级格外不同。阅读文章 > 在主张个性化的“千人千面”时代，除了需要精准多样的兴趣算法分发，同时更要有优质直观的动态创意传达。在推荐与兴趣算法的流量牵引下，消费者进入到不同的营销页面内，受到头图、商品卡片、通栏 Banner 等坑位的影响，注意力被极大地分散。如何围绕商品或活动更直观、清晰、可视化地视觉传达，便成为平台运营或商家经营中的核心工作。而不同于营销页面搭建，图片型创意素材更多是实时性、联动性地表达，如首焦 Banner 素材，便需要根据营销落地页商品进行个性化即时生成，以实现入口素材与落地页内外联动的一致性。由此而产生的创意素材缺口也愈发明显，以 APP 首焦场景为例，假设每个 SKU 日均参加 2 场 活动，活动单个 SKU 平均曝光次数为 10 次 ，1000 万 SKU 则需要 2 亿张 的创意素材供给。3. 即时创意生产，成为中长尾创意素材供给新模式当下消费者兴趣或注意力愈发分散，要求平台能够对中长尾的用户需求偏好进行迅速响应，创意素材供给的时效性持续在缩短，营销触达不仅要有内容，更要“日日新，又日新”。即时创意生产解决方案应运而生，通过无人化、自动化素材生产的方式，极大地满足了个性化营销下中长尾创意素材动态供给。即时创意，也称程序化创意，指的是将营销素材进行图层化模块化拆解及拼装，通过不同内容素材、营销素材、设计素材的动态组合，生成多样化、差异化的海量设计结果。四、零售营销创意洞察洞察框架：元素化创意设计策略 科学准确的洞察结论，来源于严谨的策略框架与实验设计。根据电商营销创意常见的设计手法，羚珑·即时创意算法将一张平面的创意素材进行多层级空间拆解，建立元素化的创意策略框架：我们根据氛围模块、文案模块、商品模块及背景模块进行设计层级拆分及参数化组合，进而为创意元素效用量化及素材效果对比提供实验抓手。具体来说，背景模块由背景装饰及背景框架组成，决定整体创意表现手法；商品模块与文案模块组成创意素材核心信息区域，通过商品前景、商品主体及背景突出商品本身的视觉信息，同时通过文案组件、按钮组件及背景辅助展示相关文字信息点；最后，通过最顶层的氛围模块，根据设计策略选取相关氛围元素进行空间布局，实现创意素材的氛围点缀。洞察一：促销型设计策略不一定是万能解法① 猜想假设在我们的惯性认知里，传统零售百货商店的热闹促销场景，往往能起到营造狂欢氛围与激发消费动机的作用。而在线上电商场景，由于消费者注意力的极易分散与信息多元化，单一照搬线下促销型设计方式、一味采用热闹喜庆的设计手法，未必在所有流量场景都能奏效，有时甚至产生负作用。② 设计拆解为了更科学地验证“促销型设计是不是万能解法”的设计猜想，我们基于 APP 首焦场景进行设计策略拆解与实验设置投放，具体方案大致如下：实验组 / 热闹鲜艳，高饱和配色，氛围丰富热烈 VS 对照组 / 简单清新，低饱和配色，氛围简单平和③ 实验分析经过效果数据清洗及统计分析，我们进行了整体对比及下钻对比：整体对比 - 热闹促销型设计并没有显著优势实验组热闹促销型设计并没有如猜想一般明显优于对照组的简单清新型设计，也就是说过于浓烈的颜色与过于复杂的装饰并不适用于所有投放场景。根据实验数据及设计经验，我们进行了 “热闹促销型设计不一定效果更优” 的原因推导：首先从设计经验出发，设计手法其实是一种工具，是为了帮助营销/产品更好地可视化表达，因此设计风格与手法应该与营销目的相匹配，应该是千人千面动态调整的，不存在某种通用设计解决方案。其次从用户行为出发，人类的感知漏斗中每秒大概接收 400 亿个感官信息而大脑只能处理 40 比特，这决定了人的注意力极为稀缺。我们看到，热闹促销型设计往往采用强烈的色彩与丰富的装饰元素，在某种程度上会使得焦点模糊，对创意画面造成干扰从而影响点击。下钻对比 - 热闹促销型与简单清新型偏好色相各有不同按照两组实验设计素材，我们进一步将设计效果细拆到每一个具体的色相 Hue 值，在两类设计手法下，组内不同色相的效果表现也存在差异：热闹促销型：色相影响显著，色彩光谱左右两端的暖色系（红橙色）效果表现最好，而中部的偏冷色系（蓝色）表现最差简单清新型：色相影响不明显，橙色、青蓝色表现突出，红色、紫色表现较差④ 设计建议当营销目的与创意风格均不确定时，选择橙色能获得更稳定的效果：橙色在热闹促销与简单清新型设计中均表现最优。当明确要制作热闹促销型设计的广告素材时，若没有明确的颜色偏好需求，建议优先选择红橙色，避免使用高饱和的蓝色。当选择上新或日常的简单清新风格时，若没有强烈的营销转化诉求，建议优先选择淡橙色和淡青蓝色，避免选择淡红色。洞察二：不同品类下的促销型设计表现效果不一① 猜想假设通过洞察一我们发现，促销型设计并不是万能的，需要结合不同色系效果进行效果搭配。除此之外，一张商用投放的广告素材，在色系这一核心的视觉影响要素外，商品属性或行业属性也会起到关键性的影响。② 设计拆解为了验证品类行业属性对广告素材效果影响是否显著，我们进行了新的实验设计：实验组 / 热闹促销色调，保留高饱和色彩去除装饰元素 VS 对照组 / 简单清新色调，通过低饱和色调突出品类属性③ 实验分析及建议同样经过效果数据分析，我们按照投放品类维度进行了品类设计偏好的同级对比与交叉分析：同级对比 - 相同品类在不同设计风格下效果存在差异可以看到，相同品类行业的商品，在相同投放时段与相近的测试人群下，热闹促销与简单清新型设计的效果存在显著差异：1）促销型设计表现排位明显高于简单型的，品类更易受氛围影响产生转化通过排位顺序对比，我们发现家具、家清与图书品类采用促销型设计能有效提高素材效果表现。这可能因为，用户购买决策周期短、复购率高的快消品类，促销型表现手法可以在氛围强化中增强用户的购买动机。对于这类与设计氛围强相关的品类设计，在日常素材设计时可以适当加入高饱和色相或氛围元素点缀，提高素材视觉冲击力，更高效地带动转化。2）促销型设计表现排位明显低于简单型的，品类信息或品牌信任感更为重要对于品类行业属性影响权重更大的品类，如医药、钟表眼镜等，在素材设计时应该突出素材品类调性，如医药品类需要通过设计元素或色系表现安心、可靠、信赖的视觉感受，过度的营销包装反而会降低用户潜意识的信任感。交叉分析 - 行业属性强的品类适用色系各有不同在同级对比基础上， 我们进一步选取了行业属性影响权重更大的品类进行了品类与色系的交叉分析，结论如下：1）医药品类：适用色系分布区间为浅蓝色到浅蓝紫色（ Hue 值 195-270）蓝色是冷色调中最冷的色系，是天空和海洋的象征，代表着永恒与女性气质。通过蓝色能带来严肃、稳定与冷静的感受，而结合高明度的明亮蓝色可以进一步达到放松、安心的暗示作用，能够传达医药品类的“安全可靠”属性。2）钟表眼镜：适用色系分布较为分散，冷暖色系适用不同子品类钟表眼镜不同于医药品类，以钟表为例，由于制造工艺及产业复杂度导致细分品类及产品存在较大属性差异，同时由于品类属性上属于非功能导向产品，更多需要面向不同人群或消费群体进行创意表达，由此我们给出两点建议：品牌机械腕表建议使用高端质感的淡金色，智能腕表倾向使用科技感的淡蓝色；同样的，女性人群建议粉色色系，男士人群倾向使用淡蓝色作为主色。3）宠物生活：暖色系如橙色更适合表达柔软与居家氛围宠物生活品类中较为重要的子品类为宠物食品及日用，当主色系为橙色时宠物食品素材可传达出营养、香甜的感受，同时暖色系也通过柔和温暖的质感营造温馨氛围；而当主色系为绿色或蓝色时，则更适合宠物医疗和清洁用品。洞察三：品类元素与场景化营造有利于促成转化 ⟡① 猜想假设经过前序的实验验证，我们已经得出“不同色系对于不同品类营销创意效果存在不同影响”的结论，在此基础上，我们尝试通过色系以外的其他设计维度，进一步挖掘品类创意的影响因素：对于一张营销创意海报设计，设计师通常会采用两种常见手法来体现商品品类特性，一种是通过相同颜色或相关联装饰等元素展现品类的功能特性或品类特质，以此形成联觉想象，而另一种则是为品类营造出真实使用场景，通过沉浸式虚拟空间渲染触发营销内容的通感感受。② 设计拆解为了验证品类元素与空间营造是否有助于效果提升，我们进行了多层对照实验设计：实验组 1 / 营造品类实景空间 VS 实验组 2 / 品类装饰元素突出品类特性 VS 对照组 / 日常通用设计突出色系③ 实验分析及建议按照如上的实验方案及分析思路，我们在不同品类进行了落地实验，在不同品类元素及场景下两种手法表现不一，其中我们选取品类特性易表达、元素易选取的母婴/童车童床品类进行实验分析举例。母婴品类由于特殊的用户人群与受众，新手妈妈用户在选购时更关注产品特质与包装材质，在设计上一般会通过柔和用色、可爱元素与室内温馨场景营造人性化与温暖感。因此，我们针对母婴/童车童床品类进行两组实验组及对照组设计：经过实验投放及数据回收，母婴品类实验组 1 最优、其次是实验组 2 与对照组，这表明童车童床品类更适合营造真实使用场景的设计手法，而在氛围元素营造与日常通用上则没有显著区别，这也表明相较于温馨可爱的氛围，商品场景空间是更为显著的特征。依据相同的设计实验思路，我们在家用电器、生鲜品类进行了灰度实验，同样验证了场景化氛围素材效果更优，相关品类的素材及结论如下。基于空间营造设计手法更优的结论，后续可以采用更多的空间场景进行品类相关设计，通过表达功能性与通感感受来进一步丰富创意设计效果。洞察四：新消费下的新创意更关注人群个性化表达 ⟡① 猜想假设随着商品经济的极大发展与富足，单纯强调商品功能性卖点的品牌营销无疑很难在红海中竞争取胜。无论是产品研发亦或是营销投放上，已经从之前的“物以类聚”进化到现在的“人以群分”：不是为了产品功能而购买，而是为了精神表达与自我满足而购买！ 而消费趋势上的变化，也对新生代的营销创意产生了影响。通过前期的调研走访，我们发现相同的品类基于不同人群特征推送符合其需求或喜好的创意素材，整体效果与接受度会有很大提升。如推送给 Z 世代，可使用潮流配色、有趣创新的设计更满足其好奇心与探索精神。② 设计拆解为了进一步验证突出人群偏好的设计是否真的更优，我们对 Z 世代人群进行了画像调研以及方案设计，试图找到新生代的设计语言与沟通密码：人群偏好：Z 世代消费类别主要是吃喝、购物和玩乐，悦己消费是 Z 世代消费的第一动力，高颜值、获得乐趣是大多数 Z 世代消费时所考虑的首要因素。品类偏好：Z 世代偏好电竞数码、潮玩手办、潮流服饰、美妆护肤、新式养生、颜值好物等新潮品类。视觉偏好：时尚前卫，个性有趣，色彩独特。基于以上分析，我们选定了 Z 世代偏好的几大核心品类，进行了人群创意与通用创意的设计输出：1）数码 - Z 世代人群设计 VS 品类通用设计2）食品 - Z 世代人群设计 VS 品类通用设计3）美妆 - Z 世代人群设计 VS 品类通用设计同时也针对站内的 Z 世代人群进行定向实验投放，相关数据回收中，敬请期待！五、羚珑即时创意解决方案发布电商营销创意涉及到的商品品类、设计维度非常繁多，从模板或创意角度来说需要准备大量素材作为实验支撑，同时也需要一定的实验周期来获取数据，最后才能分析得出置信结论，并进行方案的择优与替换。而这中间，其实有很多工作已经可以通过机器或程序来进一步解放人力、提升效率，为此我们即将为你介绍，伴随本次洞察一并发布的三大工具能力，帮助您一键创意投放与实验优化！解决方案一：即时创意生成引擎如何应对“千人千面”时代巨大的创意需求缺口？借助于数字化技术与人工智能算法，新一代的智能设计工具为商家经营或平台运营提供了一种更快速、更高效、更高质的创意生产模式！基于程序化技术原理及营销设计图谱，羚珑设计团队搭建了首个面向“人”、“货”、“场”零售三要素的即时创意生成引擎，支持根据用户画像、商品信息及营销活动实时生成多尺寸、多样化的海量创意素材，赋能京东全站各类型资源位及频道素材生产供给，旨在通过创意设计数字化升级与智慧化运营，持续探索接近商业、技术与美学的最优解！围绕电商营销的 “人”、“货”、“场” 三要素，羚珑即时创意生成引擎不仅提供了海量且丰富的创意设计素材，而且每一个素材效果、每一种设计手法背后都是模块化的设计元素，能够根据平台宏观大数据与场景微观小数据进行模块拆分、元素替换、重新组合与延展适配，在符合美学表达的同时，最大化地提升素材点击与转化效率！羚珑·即时创意生成引擎现已开放内测使用，请点击 https://ling.jd.com/ai/adv-produce 访问体验！解决方案二： 即时创意知识图谱知识图谱作为认知智能的重要一环，是实现机器认知智能的使能器，机器可以通过对知识图谱中实体、概念、关系的理解来形成基础认知，使人工智能具有了可解释性。知识图谱通常以图形的方式直观的表示知识以及知识之间的关系，其中节点代表知识的概念，边表示两个概念之间的关系。我们将专家团队在电商领域沉淀多年的设计经验，通过挖掘和整理，以图谱的方式进行存储以及查询，并应用到广告图智能生产链路中：围绕“人”、“货”、“场”三要素，我们搭建了基于不同人群、不同品类、不同营销场景的创意知识图谱，将零散的设计经验通过网状结构的形式连结起来，并通过可视化的方式进行呈现。知识图谱作为一种工具，既是专家知识的沉淀，也帮助设计师重新梳理知识和想法，探索不同领域之间的新可能性和联系。在创意设计知识图谱中，我们将品类、人群、设计模型、设计元素等定义为节点，节点与节点之间的连线即可以表示它们之间的关系，如“包含”、”适合“等。以「茶具」品类为例，我们基于创意元素化结构，从茶具品类的特性出发，围绕背景、字体、文案装饰、商品装饰、画布装饰等多个维度选择不同的素材来搭建创意设计知识。在图谱中，各个节点通过包含、搭配等关系被关联在一起，而在使用时，我们通过图计算，经过节点查询与路径推理，输出一个符合目标场景的创意广告设计。羚珑·即时创意知识图谱现已完成 60 + 品类知识搭建，覆盖电商常用日销、促销等常用营销场景。对于设计师而言，通过知识搭建工具，将优质设计进行了标准化沉淀，解放设计人力使得更深层次灵感的创作成为可能；对于用户而言，仅需输入关键词即可完成广告图生产，则是大大降低了营销广告设计的准入门槛！羚珑·即时创意知识图谱现已面向京东域内业务场景开放使用，欢迎设计及业务同学参与知识共创！解决方案三：即时创意动态调优基于即时创意生成引擎，商家经营与平台运营中涉及素材制作及设计的工作效率得到了极大提升，海量且多元化的品类、人群设计图片秒级生成。与此同时，在极大效率提升的基础上，我们更希望每一次投放实验都能得到更优的结果，每一次即时创意结果都能带来高质量的转化效果。创意从业者不难发现，在传统广告投放过程中存在着几大痛点：费用预算限制：有限投放预算下创意投放宽度非常受限，面对多元化人群偏好很难以单一内容促成转化；创意调整周期长：创意效果拆解、分析及再制作投放均需要一定时间周期，创意即时性差，而流量价值稍纵即逝；人力成本消耗大：智能投放工具使得计划配置、出价等更为便捷，但在创意素材环节，仍然依赖投手的全程人为调整及更新；为了解决以上痛点及问题，羚珑团队在即时创意生成引擎之上，进一步推出了全自动化“即时创意动态调优”策略，根据设计知识、设计资产、数据效果构建创意反馈自调优链路，实现创意投放的智能化调优！可以看到，传统的广告创意调优流程几乎全程需要人的判断与参与，因此会有诸多不可控及不确定的因素。而羚珑即时动态调优策略则在关键环节建立一套自动化感知及驱动的调优机制，通过程序代替人力从而实现创意设计的动态进化！整体的动态调优机制，大致拆分为两个阶段：① 前向探索实验在前向阶段，商家用户或业务同学在完成设计场景梳理并将设计关联知识录入系统后，系统会自动运行“创意拆分组合 > 无偏实验投放 > 效果数据分析”的创意探索流程，尽可能多样化地探索创意可能性。③ 后向收敛调优后向阶段系统则会在探索数据的基础上进行收敛聚焦，通过“创意知识关联 > 智能调整元素 > 二次投放实验”的创意收敛过程，不断优化业务场景中的广告素材，以持续提升广告素材的投放效果。羚珑·即时创意动态调优策略现已启动场景灰度测试，欢迎广大商家朋友及业务同学加入内测计划！六、因为相信，所以看见1. 总结展望“未来已至，只是分布的不均匀”，2022 年是极为不确定的一年，商家经营与平台运营受到巨大的压力与困难。过去的三十年是互联网红利三十年，也是消费端数字化的红利三十年，而随着消费端红利日渐消失，未来的商业博弈将在供给端数字化能力间缓缓展开。 我们相信，商家通过持续的每一次数字化运营与每一场动态化营销投放，一定能穿越寒冬，找到并放大营销创意的最大公约数制胜密码！我们也希望通过以上的三大即时创意解决方案与四大创意洞察结论，能够帮助商家朋友与业务朋友在未来的营销电商营销创意投放中更好地提升设计效率、实现更高地创意效果增长！因为我们相信，所以我们看见！2. 内容声明本白皮书由京东羚珑设计平台、主站体验设计及创新中台设计团队联合出品。如果您想提出建议或合作咨询，欢迎通过外部邮箱 lings@jd.com 或内部咚咚搜索 “羚珑” 联系我们。3. 协创团队主站体验设计团队： 邵维翰、周峯、周曼创新中台设计团队： 胥浩、王蕾、陈星佑、黄素媛体验技术研发团队： 凌飞、马剑、徐立峰、邱姝菡排名不分先后，感谢以上同学的创作与支持！欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/creative-white-paper
业务 设计师 课程 金三银四招聘季悄悄开始了。虽然去年到今年经历了一波裁员潮，但是依然有一波在 C 端做UI和产品的同学，逆流而上跳槽到 B 端领域做设计和产品了。虽然他们各自的业务和行业差异极大，但是不知道你有没有发现，他们都有个共同点，那就是收入都还相当不错。的确，对于 UI/UX 设计师而言，回老家考公是一种上岸方式，而 C 端转战 B 端也是一种上岸的方式。只是，相比于更容易理解、更贴近普遍认知的 C 端设计，加入更多行业背景、业务需求和专业流程的 B 端有着更高的门槛。为此，我们专门准备了这套 B 端设计入门私房课，给正在筹备上岸的你：课程原价169元，限时新课价直减40元，仅需129元！移动端扫码学习，网页端右戳学习 https://wei.xet.tech/s/2pMvzq入坑B端设计的绝佳时机！也许很多同学几年前就听说过「用友」和「金蝶」这些针对企业的商用软件开发企业，但是随着如今各行各业信息化建设，不止是传统的金融、仓储、物流等领域需要更加深入定制化的设计，而且教育、地产、医疗、销售乃至其他更加细分的行业，大都需要有自己的信息化管理系统。大概是在 8 年前，为了区别于针对个人用户（Customer）的 UI/UX 设计，有人提出了 B 端设计，也就是针对企业和商用（Business）的系统化 UI/UX 设计，彼时 B 端设计开始被提出，8年时间蔓延至今已呈大势之象。如今大量的企业有着自己独特的渠道、和同行截然不同的流程，在管理模式上也大相径庭 ，这也使得很多企业迫切需要贴合自身业务特征的定制化的 B 端设计。即便针对自身体系定制一套数字化系统成本高昂，但是效率提升后带来的利润增长更为可观，这使得 B 端设计成为了设计领域新的增长点，「钱」景无限！但是相应的，B 端设计所牵涉的「业务属性」，也对设计师提出了新的要求。设计师天然就是内容和信息的消费者，从事 C 端设计时，可以相对容易地代入身份，针对性地进行设计，而 B 端设计所涉及的行业不同，所牵涉到的专业性的用户身份也千差万别，业务流程可能完全找不到合适的参考，这一方面要求设计师需要通过专业的手段和方法来调研和梳理，摸清业务，另一方面也需要设计师有更加系统化的思维和方法，来为整个业务创建流程，搭建平台，统筹管理，而这也是 B 端设计不同于 C 端的重难点。这个时候，你就需要针对性地系统化学习了。事半功倍的学习路径很有必要！如果你是设计小白或者已经是 C 端的 UI/UX 设计师，那么这套课程可以带你以正确的姿势开始学习 B 端设计，如同你刚刚转到 B 端设计，这套课程同样可以带你重新收束 B 端设计的思维和知识点。课程会分为 3 个阶段：第一阶段带你着重了解 B 端设计的特征，概念和流程，明确方向第二阶段教你 B 端设计前期分析的方法和要点，深入业务第三阶段结合实际案例，循序渐进地教授 B 端设计执行的技巧下面是详细的大纲：课程原价169元，限时新课价直减40元，仅需129元！移动端扫码学习，网页端右戳学习 https://wei.xet.tech/s/2pMvzq用项目喂出来的课程讲师小煜老师是实实在在在大厂里，用一个个大型 B 端项目喂出来的资深设计师，从电商到金融，从 IM 到直播，踩过不同行业的坑，处理过多种截然不同的业态，面对千差万别的用户需求，在B端行业差异里逐步摸索出成系统的设计策略，又在共通的方法中，总结出应对不同需求的独特技巧，这套录播课程，就是她过往 B 端项目的总结。10 年前 C 端的 UI 设计当初是机会无限的蓝海，如今的人满为患，内卷严重。但是业务形态千差万别的 B 端需求旺盛，行业垂直且细分，需要懂得用户体验、具备系统思维、敢于探索需求、能够梳理业务的 B 端设计师，而任何一个细分行业的发展，起码都是按照十年来进行计算的。下一个十年，你可以从 B 端开始。课程原价169元，限时新课价直减40元，仅需129元！移动端扫码学习，网页端右戳学习 https://wei.xet.tech/s/2pMvzq本篇来源：优设网原文地址：https://www.uisdc.com/business-design-course
官网 用户 产品 官网作为连接产品/企业与用户的第一道门，给到用户的第一印象至关重要。官网就像一个会自述的虚拟人物，我们通过视觉设计赋予它形象，它用符合人设性格的话术，向用户介绍产品/企业。怎样的形象、表述能获取用户好感及信赖，从而建立长期合作关系呢？更多Gtech UED干货：用C端的方法，从3个方面提升B端产品的用户体验！在如今用户为王的时代，用户体验成为一种新的品牌竞争力。阅读文章 > 我们先看下不同公司的云产品官网设计：这 4 个“形象”，除了颜色和 logo 不同，风格都是一样的，语气措辞也大同小异。如果我们拿掉 logo、去掉颜色是怎样的效果？大家是否能在第一时间辨别是哪家公司的官网？话说回来，这几个网站的设计质量都是行业内的较高水准，但同质化严重。是我们被固化思维了吗？是只有这样的 3D 科技风（或是 2.5D 拟 3D)才能体现云平台的产品特点吗？阿里站在行业的前端领跑，凭借其强大的技术实力和设计实力在前几年就开始将其产品官网、APP 的视觉风格逐步 3D 化，并有了阿里动物园大家族，其核心的产品都拥有了形象化 3D IP 形象。在他们领跑的同时，其他大厂不甘落后，纷纷改版意图赶超，久而久之同质化的问题就越来越明显。子曰：“三人行，必有我师焉；择其善者而从之，其不善者而改之。”借鉴学习是很正常的事情，但是在借鉴的同时更应该体现自己的特点，否则就变成了“copy 不走样“了。比如说现在被大量运用的轻拟物 3D 图标，图标风格酷炫科技有质感，但却大大削弱了识别性。由于单个图标本身复杂度就很高，在看的时候大脑就需要去解读识别其含义，当多个图标同时出现的时候，更是造成了识别超负荷。我们单对比下面两组图标，第一组识别度会更高，大多立体图形的轮廓形态不一，彩色占比高，增加了丰富度和对比度；再看第二组图标，大多图标立体形态都是正方体、长方体、圆柱体，相对规整，且彩色占比较少，图标的层次感和丰富度就不足，这样识别度就降低了。《设计师要懂心理学》这本书中提及：要让某个物体易于识别，就用简单的几何图形来画它。这会让构成物体的几何离子更明显，从而使人更快、更轻松地识别该物体。多用二维元素，少用三维元素。大脑以二维形式接收人眼观察到的信息，因此屏幕上的三维图形可能会减慢识别和理解的速度。轻拟物立体图标可以用，但需适量，切忌过犹不及。云产品的官网设计趋同化是一个比较明显可见的例子，此类官网都属于软件服务类产品官网，其他常见官网类型还有企业官网、电商官网（B2C\B2B\C2C\D2C\O2O）、门户网站、综合服务型网站等等。一、万能的 “3W1H”法则在任何事情开始之前，我们都要找到方法和思路，帮助我们顺利的推进项目，这里我又要拿出万能法则了，这是一个基本思路，“3W1H”=What、When、Why、How。What设计官网的目的是什么？你要做的是什么类型的官网？目标用户是谁？他们想要在网站上获取什么信息？When目标用户何时会想要访问网站，存在几种可能触发的场景？Why目标用户为什么会访问网站？为什么没有促成转化？How用户如何搜索到该网站？如何在网站上快速找到有价值的信息？如何操作使用？好的设计是能捕捉到用户心智的设计。设计不仅需要有强逻辑性，还需要明白用户为何使用、如何使用。我们需要了解用户每次每个行为背后的动机和认知是如何的。想他所想，才可以帮助产品/企业最大程度的触达用户。二、官网设计 SOP我们根据以往经验的总结，沉淀了一套官网设计的标准流程，同时针对产品类官网我们定义了一套标准化官网模版，面对矩阵式的家族产品，都可以套用该模版以保证其统一性和搭建效率。那我们以公司企业官网的改版案例带入来看看如何去做官网的视觉升级以及官网设计的标准流程。1. 洞察 & 创意① 项目背景GTech 佳应科技是数字化零售与电商技术服务商，业务遍布中国、新加坡、马来西亚及印尼等多个国家。公司旗下的 SpeedShop 系列产品，其中 speedshop commerce 是企业级电商业务平台，为全球品牌量身打造，助力品牌业务 DTC 全球化拓展；还有 B2B 数字化平台，助力企业实现端到端、全链路营销闭环和业务运营在线化。随着公司产品线的战略调整以及公司业务的不断发展，原有官网设计及内容架构已经无法承载及精确传递新的企业发展蓝图，我们需要通过全新的品牌传达，来迭代用户对我们的品牌认知。② 竞品分析公司分为产品部门和项目实施部门，从产品定位来看，竞品公司是 shopline、shopify、bigcommerce 等 SaaS 建站公司，从项目来看，竞品公司是商派、百盛、伯俊等 IT 项目公司。我们分别对其进行了视觉及网站结构、内容的分析，从而得出以下结论：第一，是清晰有条理的内容及网站结构，明确的传达出公司产品能力及项目实施能力，抓住差异化的点去突出描述，让用户能够明确认识到我们与他们的不同之处，从而帮助及推动用户做选择；第二，是商业化产品是公司核心价值的体现，我们所有的产品都支持多语言，官网的视觉语言也需要与国际接轨。③ 用户画像从访问意图上来看，可简单分为两类：寻求合作、浏览了解。不同用户在网站上浏览的重点是不同的，对于面试者，他们关注公司介绍及业务范围，在面试时更加有的放矢，同时也考察是否符合自己的求职目标。对于公司员工，需要关注公司的产品动向，最新战略。对于核心用户-中小企业及大企业客户，需要通过官网上的业务范围和产品功能介绍，去和自己公司的需求进行匹配，同时会查看客户案例及背书，当基本符合诉求的时候就会发起咨询，所以官网上的意图传递需要精准明确。④ 企业/产品理念我们访谈了公司了领导层及产品负责人，对齐了大家对公司及产品的定位及发展愿景，提炼出了 3 个关键词“国际化、商业化、数智化”，同时会作为企业官网的底层内核。⑤ 设计趋势我们可以轻易的从网上获取到近些年的网站设计趋势，比如新极简主义、超大文本排版、交互式网站、以 3D 场景或者动画展示为主题、抽象插画（以图形、符号为主）、流体渐变、弥散柔光、玻璃风格等等，在了解了这些形式之后，我们结合实际需要展示的内容以及后续维护的灵活性、拓展性，去进行方案设计。⑥ 头脑风暴企业官网与市场部、产品部、销售部息息相关，我们邀请了相关同事一起进行“头脑风暴”，另外我们还组织了一场外援脑暴，邀请了合作公司的几位同事在线参与，目的是想了解，用户究竟想要在我们的官网上看到哪些内容，优先级是怎样的？内部诉求「你希望在官网展示哪些内容，并进行优先级排序」「选出能体现企业文化的图片」「你心中好的企业官网是怎样的？哪些官网你觉得设计的很棒？」外部诉求「你希望在官网看到哪些内容，并进行优先级排序」「哪些内容或是数据让你产生兴趣，并想与我们进一步联系」「你觉得官网上还缺少什么内容吗？」所有的 idea 收集完成后，我们需要聚合、提取出有价值有共性的点进行后续的方案设计的。⑦ 产出概念经过各种维度的调研之后，需要将提炼出的关键字、代表色融入到设计中，更直观的进行比对。我们用 2 周的时间产出了 3 稿方案进行全公司范围的投票，加之领导层的投票，最终一锤定音。定稿设计解析「颜色」旧版的视觉语言以天蓝色、彩色插画进行构建，对于专业度、国际化、数智化的感知力不足，新版的配色使用深蓝、黑、白、浅灰，深蓝色所传达的是“冷静、睿智、专业”的；黑色更增加了“神秘而炫酷”的科技感，白色、浅灰用以调和深蓝和黑色的压抑感，让整体视觉平衡且具有呼吸感。「框架」我们定义了一套标准化官网模版，保证矩阵式的家族产品官网的统一性和搭建效率。模版不会限制风格，每个产品在框架结构层根据规范，使用统一的文字层级、栅格系统、组件布局、交互规则，视觉层都可以根据产品定位发散设计，确保让每个产品都能有个性化的差异设计，从而提升辨识度。2. 设计 & 定义① 制定框架市场部的同事会根据讨论提供最终的网站结构图。② 内容文案网站结构确定后，需要填充每个页面的内容，并且对于文案进行反复斟酌，我们需要根据预设的人物性格，进行情感化表达。清晰明确的语言表达能够让用户更容易理解；情感化的措辞更加亲切，能拉近与用户的距离；全站统一的文案，能让用户感受到一致的体验和专业性。好的文案和内容，就像是在官网的框架（骨架）之上赋予血肉之躯。另外，我们提供中、英文双语，要考虑语境去翻译文字，使得不同国家的用户都能准确理解官网所传递的信息。*下图为产品市场部的同事在 wiki 上维护的官网内容。③ 设计排期与此同时，设计会在 wiki 上建立设计排期表，市场部的同事将页面内容准备好的时候，Content 列会标记为“DONE”，此时设计师可以进行排期，将页面设计状态更新为“DONE”时，前端工程师就可以开始了。这样，项目相关者可以看到每个页面的设计和开发负责人、设计起始时间，开发起始时间，使得官网项目的管理更加有序直观。④ 定义规则明确页面适配规则主流的 PC 屏幕宽度是 1280px～1920px，我们以 1200px 作为页面版心进行设计，自适应布局到移动端，移动端的设计需要注意尽量不要过长，突出核心内容，次要信息可以折叠或者通过横向滑动查看。明确每个页面的交互动效网站的设计，从点到面再到点，从视觉到交互事无巨细。比如页面滚动时文字和图片如何展示、按钮的交互、轮播 banner 的切换效果及速度等等。设计师首先需要了解你所想要的动效能否被实现，并将你想要的效果传达给开发，达成一致。简单说下基础动效，这个最常用最实用。在 css 里 animation-name 定义要使用哪种动画关键帧，animation-delay 是设置动画开始之前的延迟时间，animation-direction 定义了播放动画的方向，animation-duration 定义了动画的持续时间，animation-iteration-count 定义动画的播放次数，animation-timing-function 定义的是动画的变速效果。我们前端目前是引用了 animate.css，js 文件会控制标记了 animation 的元素进入到 viewport（视口）时，元素自下而上渐显展示。在设计师具备基础知识的情况下，再去跟前端沟通想要的效果，会事半功倍。3. 上线 & 验证① 设计走查设计稿一般会分批次交付，开发也是在第一批设计交付的时候开始正式加入，第二批设计稿完成前第一批交付的就开发完成上到开发环境，设计师在此时就可以开始走查，一些全局性的问题在此时提出，后续再开发的时候就可以避免重复修改，也能提前和开发磨合想法，这样后期的效率会提升很多。走查过程中我们会在 wiki 建立走查表，如下：② 网站埋点需要注意的是，中国 PIPL《个人信息保护法》出台之后，如果继续按照以往的认知使用 GA 分析工具，那你就可能会涉及数据出境的问题了。因为 GA 的数据中心在中国没有布点，那我们通过 GA 获取的用户行为数据，最终就是存储到境外的数据中心，这也就造成了前面说的问题。所以为了不要给公司带来不必要的麻烦，我们可以使用国内的第三方埋点服务商。③ 发布上线发布之前，我们需要检查走查表上记录的问题是否都被解决，并且协同市场同事再进行最后一次的文案复查，一切就绪之后就可以提交上线申请。网站正式上线之后也需要第一时间再全部 review 一遍，避免发布过程中产生了 bug 或数据遗漏。④ 数据复盘网站上线后，我们需要对比改版前后的数据变化，利用数据分析发现问题并着眼于用户访问过中的流失点，进行持续的运营调整和设计调整。网站改版总结期望这次的网站升级更为精准的将公司战略传达至用户，并建立“国际化、商业化、数智化”的企业形象，让用户形成认知，并产生价值认同，从而提升企业的行业影响力。以上就是我们做官网升级全流程，静态网站的设计相对动态网站的流程简单很多，动态网站比如内容型的知乎这种内容平台，用户需要注册登录、发布问答、评论等功能型的网站，或是品牌电商官网有标准的购物、售后流程。除了网站的视觉效果设计，交互体验的设计会花费更多的时间与精力。写在最后设计师并不只是在“设计”，不要只流于表面，要对内在进行深层的探索与思考，才能让设计更有价值。官网的设计及升级也不仅仅是设计师的事情，需要跨部门协同开发、运营一起，分工明确，各自的工作计划、进度都公开透明，可供任何相关者查阅。最后，在做任何设计之时，请问问自己以下几点我们做到了吗？做足功课，才能高瞻远瞩不盲目跟随趋势，寻求差异化，出奇制胜不要为了设计而设计，符合企业/产品内核最重要让你的设计不言而喻美好的设计源于我们的热爱，以及足够的了解。让我们做出更有灵魂的设计吧！欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/company-website-design
神器 效果 我是 大家好，我是灰色执照~很开心在过年期间又开发出了一款非常便利的设计神器：NB Earth 这是一款可以快速制作可视化地球的工具，无需下载任何软件，打开网站你就可以直接生成各种类型的地球。你还可以在地球上增加标注、在地球上增加路径动画。往期神器：三维地图绘制神器 NB MAP 升级了！可支持下载区县、乡镇地图！大家好，我是灰色执照~经过一段时间的努力，NB Map 又发布新版本了！阅读文章 > 软件体验地址： https://www.nbchart.com/lab/lab.php打开网站后，你会看到 6 种不同形式的地球，鼠标点击就可以进入对应的预设效果。相关操作你也可以直接看这个视频教程： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。这就是软件的主界面了，他总共可以分为 4 个操作区域，方便你添加数据，修改细节：软件主要可以生成以下效果：效果 1：飞线图飞线图常用于制作网络攻击、数据传输……输入对应的经纬度后，就可以生成点、四棱锥形状的标注、线条、文字以及地面上的水波纹动画。所有的参数都可以自己调整，比如点的位置、颜色、是否带动画、线条的样式……效果 2：旅游路径动画如果你需要像朋友展示某一次旅行要去的地方，相信 NB Earth 会给你带来非常清晰直观的效果。如果你是乘坐火车出行，同样可以把轨迹线条调整成紧贴地球：效果 3：柱状图可以直观的在地球上展示柱状图数据。上图为 2022 年各省的人口数据效果 4：科技感地球我试着尝试模拟了一下 github 首页科技感地球的效果。因为软件可以自行上传地表贴图，制作点状的地形贴图后很容易实现非常精美的地球可视化效果。效果 5：光柱柱状图由于柱状图的样式可以调节，为了增强科技感，你能够将柱状图设置成发光的形式。不得不说，这种外发光的柱状图还是挺炫酷。由于云层可以自己上传贴图，如果想要制作这种 2 层嵌套的科技感地图，也是同样十分方便好了，以上就是我这款软件的具体介绍了，更多详细的内容等待你自己去探索吧，今天的文章到这里就要结束了，希望你喜欢我的作品。开发不易，点个赞吧~更多可视化设计神器：数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps大家好，我是灰色执照。阅读文章 > 可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE大家好，我是灰色执照~ 很开心又和大家见面了。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/nb-earth
设计师 年终总结 工作 2022 年已经过去 2 个月了，这算是一篇迟到的文章，但是年终总结对于我们回顾过去展望未来有很重要的作用。到了年关岁末，很多公司都要求写年终总结，年终总结很多时候和我们的晋升和加薪有着直接的联系。年终总结的目标是回顾过去，展望未来。对于我们个人来说，是对自己一年工作的复盘，总结今年做了哪些事？有哪些成长和收获？有哪些不足；对于工作来说，这是一次展示自己付出、能力、工作成果的机会；对于公司来说，从团队成员的工作总结中，能看到每个团队成员的成长和不足、项目中的难点，帮助公司制定团队成长、流程优化、管理优化的规划有很好的指导作用。那么如何去写好一份年终总结呢？更多年终总结干货：设计师工作总结和年终汇报怎么写？送你一个通用思路！临近年终，我最近经常会收到大家关于述职报告和工作总结相关的问题。阅读文章 > 一、不同阶段的设计师汇报的重点不同设计师在不同阶段所思考的内容应该也会有所不同，我自身也是从实习生-初级设计师-高级设计师-资深设计师-设计专家（设计负责人）这样一路走过来的，每个阶段对于设计的理解和工作重心也会有所不同。接触过的设计师也是形形色色，我能看到工作 10 年的设计师还在展示自己设计的技法，才刚实习的视觉设计师在妄谈产品目标、产品策略...我会把设计师的成长路径主要分为 3 个阶段 ：第一个阶段（专业纵深），1-3 年设计师在专业纵深上进行不断反复的长时间训练，逐渐拓展在自己专业上的技能，比如视觉设计师要持续打磨自己视觉设计的能力第二个阶段（横向拓展），3-5 年设计师在这个阶段我们不应该只把自己定义成为一个只会画图的画图仔，而是专业技能过硬的商业设计师，既有深度，又有专业度，我们关注的点更多是在用户、业务、数据、体验上，对上游和下游的职业虽然我们不会直接参与执行，但是我们了解并能够深度参与到其中，并发挥出设计的最大价值第三个阶段（塑造影响力），5 年以上的设计师5 年以上的设计师不出意外的话基本上成为公司的中流砥柱了，可能已经成为小组长或者管理者了，我们需要的是开始注重自身影响力（对内、对外）的拓展，比如沉淀方法论、培养设计师、对外发声…所以，对于第一阶段的设计师来说，年终总结的内容应该聚焦到具体的项目执行、产出质量上面；第二阶段的设计师，年终总结应该聚焦到对于业务的赋能，专业度和深度的展现；第三阶段的设计师，年终总结应该聚焦到方法论沉淀、团队赋能、影响力塑造方向上来。二、年终总结汇报的四个步骤1. 工作业绩工作业绩要写明做了哪些工作，采取了怎样的措施、方法和步骤，有什么效果，取得了哪些成绩，取得成绩的主客观原因是什么，哪些做法是成功的、行之有效的。工作太乱太细碎，要怎么写？很多初级的设计师工作一般都比较细碎，不成体系，一个个展示的话很难突出重点，我们不妨将这些浩繁的工作，分成几小类，最终分小标题来写，这样就条理清晰了。哪些工作值得写？要回答这个问题就需要你站在老板和领导的角度去思考，把图做的漂亮只是设计师最基本的技能，老板关注的是你的图能够帮助他赚多少钱，你的工作对于团队的贡献有多少。我总结下来主要有 3 个方面的工作时值得被写出来的：业务赋能、团队赋能、体系化建设业务赋能：比如你公司的某个节日活动，因为你的设计帮助业务提升了 30%的销售额团队赋能：比如你主导建立设计插画库，设计团队的整理设计效率整体缩短了 40%的时间；你沉淀出设计 IP 设计的方法，让团队的产出更高效更专业；通过输出专业文章，全网曝光量 40w，帮助团队提升影响力体系化建设：体系化是一个面，比如说你改版一个界面就是线，而你改版塑造整体的产品调性就是面，常见的体系化有：产品品牌体系构建、设计系统搭建、会员体系搭建... 体系化是每个阶段的设计师都需要考虑的点，体系化的思维能够让我们有更加全局的的视角2. 经验亮点在工作完成的基础上，进一步做总结和深入思考，标明重点、亮点，这是体现设计师能力的关键。那么哪些是经验亮点的工作呢？领导关注的工作取得好成绩的工作大家评价都比较高的工作通过创新的方法、经验完成的工作解决业务痛点的工作...这些都属于经验亮点的一些工作3. 问题不足不管你身处的职位如何，每个人都会有自己的问题和不足，我们应该客观虚心的去谈，找到问题的根源，并尝试给出解决方案，遇到同类问题后面应该如何去解决。我们可以分三步走“描述问题+分析问题+解决问题”描述问题：哪一项工作没有做好，面对的困难是什么？分析问题：是什么原因导致问题的发生？解决问题：下次遇到了同类问题你会如何解决？4. 来年规划前面提到的 3 个方面都是回顾过去，那么接下来的来年规划就是对未来的行动了，对于来年的规划，我们可以考虑从以下 2 个方面去写：① 个人目标应与团队或公司目标为导向我看过很多设计师年终总结是以个人为导向，比如:要看多少本书、要学习什么课程，但是这个和你的领导老板有什么关系呢？这时候我们不妨转换下视角去说，发现目前团队对于 C4D 的能力欠缺，经常需要寻求外部合作，所以今年计划学习 C4D 的课程，补足这部分的能力② 结合总结的不足进行规划对于自身的短板和不足，我们不应该放任它，而应该着手去解决它，所以来年我们可以针对这些不足有详细的规划最后要提醒的是，同时一份好的来年规划，必须符合 SMART 原则：具体的、可衡量的、可达到的、有相关性的、有明确时间的三、年终总结需要注意的几个细节1. 不同阶段，重点不同设计师在不同的阶段，汇报的重点应该有所不同。千万不要还刚入行就大谈策略，设计总监还在讲设计技法。2. 数据说话，价值可视设计的价值量化一直是一个非常难的课题，在产出自身设计价值的时候我们尽可能通过数据将我们的价值可视化呈现在领导面前，而不是讲产出的设计多么炫酷。3. 主题明确，突出重点年终总结是对当年成果的高度精炼，我们对每个项目价值点、经验、不足都需要做到主题明确，让领导能够很明确的了解你阐述的重点是什么。4. 功劳苦劳，把握清楚功劳是努力能够得到明显的收获，甚至对业务对团队有着重大的推动作用；苦劳是辛辛苦苦去做，收到的价值和效果却非常小；所以我们在年终总结的时候应该多讲功劳，放大自己的价值。5. 适度包装，闪亮登场作为设计师来说，年终总结的包装也是必不可少的，我是主张内容大于形式，做适度的包装，能够体现设计师身份就可以，而不需要像做作品集那样做精细化的包装。写在最后对于我们设计师来说，把设计做好是本职工作，但是我们应该也要学会如何向别人呈现自己的价值，这对于我们来说也是个非常重要的课题。不知道如何写年终总结？收下这份速成攻略（附实用模板）想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…阅读文章 > 设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/designer-2022-summary
栅格 布局 宽度 前言在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感、工作效率都得到很大的提升。一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用栅格系统解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。更多栅格设计干货：用7大章节，帮你从零开始学会栅格系统前言现如今随着设备尺寸的多种多样，产品在设计过程中需要适配到更多尺寸，布局方案与栅格系统的搭配使用，可以很好的做到跨平台跨尺寸适配，极大的提升设计效率。阅读文章 > 一、栅格的定义及重要性1. 栅格的来源栅格的概念来源于平面设计中的“网格”，早在 13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。在 18 世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决“将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力”的问题时，栅格的雏形已然显现出来。20 世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。20 世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。2. 什么是栅格栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。3. 为什么要使用栅格首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。另外，在设计 Web 界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。二、栅格系统的组成栅格系统并没有我们想象的那么复杂，它主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可，下面我们将一一了解：1. 网格（Gird）网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。为什么用 8 为基础倍数呢？首先作为偶数，程序进行单位换算后可被整除，避免像素出现小数点；其次，8 为增量单位既不会显得琐碎、也不会让内容过于分散，当界面中所有元素都以 8 为倍数时，其元素大小、间距都有规可循，之前笔者曾写过一篇「间距」类的文章，感兴趣的伙伴可以去看一下。5000字干货！超详细的保姆级间距设计规范编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？阅读文章 > 2. 列（Column）列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。3. 水槽（Gutter）水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变的较为紧凑。4. 边距（Margin）边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。5. 栅格总宽（Container）栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。6. 容器盒子（Col-n）容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。三、栅格系统制作流程1. 设计栅格宽度在设计 Web 端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在 1024px~1400px 之间。例如：常见的 1024px、1200px、1280px、1400px 等，可满足绝大多数主流显示器，如果栅格宽度超过 1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。2. 选择栅格列数① 12 栅格12 列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是 12 栅格，它能够被 2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用 4+8、3+9 栅格，三栏布局使用 2+8+2、3+3+6 栅格等，变化较为灵活。② 24 栅格24 列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的 B 端 Web 设计采用的就是 24 栅格，相比 12 栅格，有更多的区域划分空间，其布局的灵活性也更强。需要注意的是，24 栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。③ 5 栅格5 列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的 5 图标（一行）、10 图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将 5 列栅格拆分成 10 列，布局、视觉效果基本能保持一致。其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比 5 列栅格会更灵活、更便捷。3. 定义水槽与边距水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以 8px 为最小单位进行推导，如 S=8px、M=16px、L=24px、XL=32px、XXL=40px、...等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。四、栅格与响应式的结合1. 自适应与响应式① 自适应自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是 PC 端、平板还是手机。我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。② 响应式响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。2. 栅格行为变化① 固定栅格将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显的不够协调。② 流动栅格流动栅格的边距、水槽宽度是固定不变的，在达到下一个断点前，列的数量也不会增加，列宽会跟随页面宽度左右伸缩，变化规则不一定是最小单位（8px）倍数，内容元素也会随着页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。我们可以将流动栅格的视觉呈现方式称之为响应式弹性布局，这种布局的兼容性很高，能很好的适应多端设备及不同的屏幕分辨率。对于不同尺寸的卡片混排也能平滑过渡，不会显得突兀，例如：图像、视频、类容编辑器、数据可视化等，除断点变化外，内容元素的缩放不会改变页面的排版布局。③ 混和栅格绝大多数的网站使用的都是流动栅格，但一些后台管理系统及工具型界面设计为了使布局既有固定的宽度、也有流动的宽度，就会采用混合栅格的形式。混合栅格的灵活性很高，特别是内容较为复杂的产品会显的更加友好，在不同分辨率的屏幕上都能达到理想的视觉效果。不过对于开发来说，规则相对复杂，实现成本较高。五、部分问题及处理方式1. 水槽中不要留下元素这里所说的并非水槽中不能存在内容，而是不要将单个元素或元素的边缘置于水槽内，否则就会参差不齐，违背了栅格的目的。如果你的元素过大，就让他跨越栅格，到达下一个列的右侧边缘。2. 栅格不一定整除虽说设计师对于每一个像素的的追求都很执着，但大部分情况下栅格都是无法整除的，而相差的像素也无法被用户以肉眼觉察。我们需要理解的是，栅格的目的是为了保持视觉的协调与统一，而非像素级的精确。举个例子，以 1920px 的宽度、12 栅格为例，内容区宽度可以是 1000px、1200px、1400px、1600px...，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。3. 栅格区域外的内容栅格是为了规范内容，并不是所有的内容都需要栅格。大多数情况下我们只需要将主要内容区域遵循栅格系统即可，其他部分如固定导航、侧边悬浮栏、右下角弹窗...等不一定要跟随屏幕尺寸或内容的变化而变化。4. 合理的打破栅格对齐对齐在栅格系统中的地位可谓是举足轻重，不过在一些特殊场景中不必为了对齐而对齐，在不影响视觉效果的前提下，可以根据实际情况合理的打破对齐。如下图中的照片墙，利用极小的间距将一些宽度不同的照片排列在一起，虽然没有同栅格的列宽对齐，但我们第一眼很容易将这些照片联想成一个整体，同时又能轻松的单独区分开来，也不会影响整体布局。5. 子父级模块对齐父级在部分场景中，当我们以卡片的形式将多个内容形成一个信息组，这时可以忽略子级元素的对齐方式，父级卡片遵守栅格对齐即可。六、结语栅格系统能为设计提供便捷，有助于设计效率的提升，很多设计师都会去关注栅格为什么重要，却容易忽略栅格在实际项目中的使用原则，同时还要伴随一些限制条件，所以并没有平常想象的那么简单。本篇文章提供了栅格系统的基础知识，希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，让栅格更好的服务于设计，若有不足之处，欢迎补充。万字干货！从4个方面完整解析栅格设计关于界面栅格的攻略，延展到适配方式。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/grid-design
用户 需求 产品 一、如何看待被小需求覆盖的工作日常？方法有两种，第一就是对日常工作情况分析，第二就是找出产生问题的原因一个设计师一般同时负责多个项目，多个产品老师同事提了不计其数的小需求，有的需求太小，一点挑战都没有，没有价值，做了对自己没有提升，许多设计师觉得自己做小项目没有价值，实则上是设计师自己的视角局限导致看问题比较片面，没有认识到自己实际的价值。每个设计师都觉得没有空间展现自己无限创造力、才华和艺术品味，感觉这一身的艺术细菌都被浪费了我们常常认为我们是固定的，世界是可塑的，但大多数情况下，世界是固定的，我们是可塑的。所以我们应该改变心态，认真对待小需求也能够提升个人能力，展现创造力和逻辑性。此外，调整工作方式，从解决问题的本质出发，认真分析问题，想清楚如何解决，不再随意思考随性设计从而产生随机结果。工作需求很琐碎，如何制作完整吸睛的作品集？前言我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。阅读文章 > 二、怎么解决这种情况，有哪些门道？我们是不是经常遇到这样：但不管是什么需求，都需要设计师明确业务流程，在了解业务基础上才能够梳理清晰思路。1. 分析目标用户，了解用户人群当我们拿到一个需求的时候，我们需要对业务有所基本的认知，以买保险为例，完成投保的步骤分为以上四步，用户首先进入到保险首页，浏览保险列表页面，点击查看保险详情，最后决定购买保险完成投保。用户人群：目标用户人群中，男性用户占比较高，且大部分处于婚育年纪的家庭车主，上有老下有小，生活的重担和家庭责任使他们具有较高的风险意识，注重品牌效应，追求品质，但大部分并不了解自身需求。现存问题：不知道应该买哪种保险？性价比高吗？适合全家购买吗？理赔方便吗？是官方平台吗？有哪些保障权益？2. 横向拓展功能矩阵，竖向梳理全流程我们还需要对用户行为有个基本面的了解。投保四个步骤分别对应什么样的用户行为？根据用户行为去做出什么样的设计决策呢？这个时候就需要设计师们做进一步的思考了。横向拓展思考，梳理产品框架。引入场景建立基本认知。提供辅助决策，产生价值认同。帮助用户做决策驱动，激励转化。竖向梳理全流程。用户使用流程包括了点击买保险入口、进入浏览保险列表、查看产品详情页、用户投保完成。而影响用户行为的因素有三点：提供可持续被感知的动机，吸引潜在的用户，利用保险应用场景引入到用户生活当中，给予用户基础认知将复杂的保险内容简洁化，降低用户认知门槛，让用户清晰了解到产品是否适合自己当用户被动机吸引进入到投保页面后，驱动用户做出决策需要建立在信任基础上，用户首次接触新产品时会选择熟悉的品牌，结合信用背书，让二者产生连接，增强产品可信度此外，保险产品具有一定的周期性的，我们不仅需要考虑用户行为上的痛点，还要思考产品周期对用户决策的影响。3. 了解覆盖保险周期用户所处的保险阶段分为：新手期、决定期、犹豫期、复购期，处于不同保险阶段的用户对于保险内容有不同的诉求，需要在框架和内容上去适配他自身的认知和意愿。与市场营销、产品运营策略相结合相关案例分析。三、实际案例分析1. 在上个版本的续保详情页存在了几个问题：当前详情页无法得知购买的是哪个保险，保险的特点和客户群体不清晰用户不清楚什么时候到了续保阶段，以及为什么会欠费信息层级不突出，文案信息冗杂，增加了用户了解产品内容的压力续保详情页和其他页面视觉差异不大，引起用户视觉疲劳根据以上的问题，可以给出对应的优化点：突出保险本身的优势，强调已保障天数明确费用计算规则，确保费用清晰明了加强保单与缴费明细的内容主次层级对比，强化产品信息统一保险页面设计风格相关展示：再来看个例子，下面是个保险复购期间续保 H5 优化。在上个版本存在的问题是：用户无法得知距离保险失效还剩多少天。产品升级前后对比弱，升级的内容无法有效并且直观地感知。设计风格上和投保详情页不一致，无法从品牌上传递信任感。根据以上问题，可以给出对应的优化点：明确失效保险名称以及天数的关键信息强化升级前后的对比，从内容信息上强化视觉展示这个页面要跳转到详情页，所以没必要展示全部内容，信息在一屏内展示完成视觉上统一设计风格同样，弹窗也有可以优化的地方突出保险额度和关键的保险信息增加已有多人完善信息，让用户产生从众心理把完善内容包装成用户福利，只有幸运用户才可以享有其他页面需要保持统一的设计风格四、这些对我们有什么启示呢？产品工作流程：产品设计流程：无论是接到一个大的项目还是日常小需求的维护，设计师都应该多去从业务流程去思考产品的痛点，找到业务流程中每个步骤间设计目标，对工作不同阶段要有清晰的认识。运用设计方法了解我们的用户、了解产品核心诉求。欢迎关注作者微信公众号：「产险设计事务所 PIDO」本篇来源：优设网原文地址：https://www.uisdc.com/demand-analysis-2
用户 数据 按钮 早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的运营设计出发，分析运营设计师如何通过设计语言去帮助运营活动提升数据的思路与技巧。拓展阅读：如何高效完成运营设计？大厂高手总结了这3个方面！前言在现如今的社会中，每天都有各式各样的商战。阅读文章 > 什么是好的运营设计？对于很多设计师来说，设计的好不好看？风格独不独特？专业表现力如何？在设计领域里有没有开创先河？可能是更看重的。而对于业务方来说，活动的数据好不好？市场反应如何？能否在此成功案例基础上建立一个成功的商业标准？是业务方更看重的。设计师追求的是运营活动的设计品“质”，而业务方则更追求的是运营活动数据“量”，各有侧重点，但如果只纯粹的追求一面，那肯定是不确切的。好的运营设计，应该是“质”和“量”两者兼具，在保证设计专业性的同时运用视觉语言吸引用户参与活动，达到多流量、多曝光、多转化等目的，从而帮助业务提升商业价值，才称得上好的运营设计。简单讲，有“质”有“量”的设计才是好的运营设计。运营设计应该关注哪些数据“量”？正常的 DAU、MAU、CTR、CVR、GMV，我们都需要理解这些数据代表的含义；但有一点需要注意，数据跟设计的影响关联度到底有多大，因为有的数据不一定是设计改动就会带来的，而是诸多其它因素变动导致的。那影响活动数据“量”的因素有很多，如投放渠道、投放时间、活动成本、产品价格，口碑、玩法以及页面的适配性、流畅度等等都有关系。常见数据指标：用6个章节，帮你掌握常见的数据指标和数据分析模型一文读懂设计师应该懂的数据指标和数据分析模型。阅读文章 > 举个例子，用户的活跃数据，比如日活 DAU 与月活 MAU，往往跟内容与服务本身的质量有关系。设计很难影响到活跃度，用户并不怎么会因为你的设计，而特地跑过来瞄两眼，除非你的设计也是属于内容的一部分；所以这块需要你自己多想想，把其中的因果关系梳理清楚。所以，我们的更多精力，往往可以放在点击率 CTR 上，这个才比较能代表，你的设计是否能吸引到用户点击，是否能吸引到用户进入详情页消费。那是不是提高了资源位/落地页的点击就一定能提高业务转化？并不是，提高点击可以说是变相提高了曝光，意味着有更多的销售机会，但下单转化是受很多方面的因素影响的，单纯提高点击其实不一定能提高销售转化，但正如上所述，我们能通过设计上的一些小小的“技巧”来帮助业务创造更多的机会，正是我们运营设计的价值。所以对于运营设计来说，着重需要关注的是前两层，资源位和落地页的点击率 CTR。那今天我就举几个小例子，分享一下帮助业务创造更多机会的设计小技巧：资源位1. 版式结构针对 banner 图中，左边放文案/商品哪种点击更好而进行测试测试结果显示手机类新品广告是左边放商品，右边放文案的效果更好，具体原因是什么？我们可以先看看其他类目的测试情况。其他类目包括美妆、家具以及虚拟类等等，均是左边放文案，右边放商品点击更高，这时我们再看看具体原因究竟是什么。首先有一个前提，人类的阅读惯性是从左至右、从上至下的一个过程。对应我们的 banner 来说，自然是左边区域的信息更容易被用户接收得到。基于这个前提，我们再看回案例。以上数据内容引自分期乐广告研究所首先左边是推新品手机的广告，手机类有什么品牌，有什么新品上市，关注这块的用户都比较了解（品牌方早已有铺天盖地的宣传），这时先看图就知道是不是他们所需要的，也就是说左边放商品的识别成本更低，于是点击会更好；而其他类目或卖场活动由于品牌十分繁杂，缺少知名爆款，用户其实是很难会被商品图吸引的。用户更多是先看有什么优惠，然后再进去看看有没自己喜欢的，这时候左边放文案的识别成本更低，点击也就更高。因此不同类目的用户诉求不同，应根据用户的需求来决定版式形式。2. 设计形式之前商旅有一个系列化的运营活动-差旅图鉴城市篇，会根据不同城市属性，介绍优质的酒店内容，引导用户预订。为了能体现系列化，在设计上，采用相同的设计风格，以此来帮助用户培养活动心智。广州篇上线之后，点击率不错并高于平均点击。但当北京篇上线后，数据呈现下滑趋势，而且低于平均数值。在合肥篇上线前，复盘了数据回落的原因：1）视觉较为相似，容易引起用户视觉疲劳。2）城市名太小，用户容易忽略，以为是同一个活动。因此合肥篇 banner 在设计形式上以极简的文字放大并突出城市名字再加上醒目的按钮来测试点击效果。没想到合肥篇上线后，点击率飙升，并超过之前其他城市篇的点击数据，大大超出预期。当资源位点击率遇到瓶颈的时候，不妨试试改变下设计形式，说不定是一个突破口。3. 动效在实践中我们发现，用户对动态的元素关注度是最高的，其次是色彩最后是明度。通过合理的优先级规划，可以有效的吸引用户注意力，让他们关注设计师想让他们关注的东西。在 banner 中，行动点按钮优先级最高，所以可以采用动态按钮，成为用户最关注的东西引导他点击。我们在携程商旅的入口进行动效按钮的首次尝试，通过和过往 banner 平均点击率对比，动效可显著提升点击率。落地页在设计移动端的落地页面时，一定要注意首屏主图高度的设置。常规的主图一般高度都定在 600px-750px 左右，余下一屏能展现的内容区域有限。如果将头部高度缩短，从而用户也可以在首屏看到更多信息，引导用户有兴趣向下滑动。于是我们将主图高度缩减到 550px。2. 分割线符号化视觉分割线是一种布局元素，有助于将主图和内容区清晰划分。使用分割线的目的在于使布局变得清晰，更易于用户理解。我们将携程商旅的 logo 为基础图形进行创意演变，和分割线相结合，为品牌营销传播制造抓手的同时也能和其他竞品产生视觉差异化。3. CTA 按钮位置CTA，Call to Action，行为召唤，是一种营销术语。用普通人类语言说，就是通过一些形式（通常都是按钮）让用户采取下一步行动，通过提升点击率来进一步提升转化率。能够为产品带来正向价值的按钮（关注、支付、下单、订阅等）都是 CTA 按钮，因此，作为页面中的 CTA 按钮，优先级是最高的。根据@Josh Clark 屏幕拇指原则，将按钮放在屏幕底部可以有效降低点击行为所消耗的成本。通常一屏内无法放满所有的内容，如果放在第二屏甚至长图末尾，对点击来说是大打折扣的。所以对于 CTA 按钮，一般都采用吸底处理。3 月底上线的促开通「对公支付」的活动上，我们按照以上三点设计策略进行了落地页规范化设计，并在 CTA 按钮上增加了动态的效果有效的吸引用户注意，帮助页面提升点击率。如何提高CTA按钮的点击率：学会这3个方面，帮你提高CTA按钮的点击率怎样设计 CTA 按钮，能够增加点击率和转化率呢？阅读文章 > 落地页设计，常见的页面信息结构：主图+内容区，主图：主副标题+氛围图；内容区：模块平铺/叠加，做设计之前就需要对页面中的内容进行布局的规范化，包括 logo 位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，给用户带来一致体验和品牌感知。呈现效果写在最后无论是用数据指标做效果衡量，还是用数据指标进行问题判断和原因锁定，客观公正的态度和科学的实验方法都是最重要的。数据相关的知识体系非常复杂，甚至需要有专职的数据分析师或用户研究员参与，文中列举的是一些基础的数据分析，或许不太全面，也是个人阶段性的心得总结，不足之处请多包涵，欢迎大家一起讨论。欢迎关注作者微信公众号：「TripDesign」本篇来源：优设网原文地址：https://www.uisdc.com/operation-design-thinking-skill
全息 影像 未来 编者按：为什么所有的好莱坞科幻电影当中，用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影？这种风尚是如何流行开的？它们对于未来的 UI 设计有影响么？目前全息影像发展到什么程度了？如果你厌倦了近期关于 AIGC 的持续热炒，不妨来看看资深 UX 设计师 Daley Wilhelm 关于全息影像、未来 UI/UX 的探讨。AR 和 VR 诞生前，人类的视觉增强探索史编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。阅读文章 > 托尼史塔克像抓住真实物体一样握住虚拟物品科幻电影喜欢炫耀技术的巨大飞跃。最新的《阿凡达》电影中，蜘蛛型自走机器人可以在数周内搭建一整座城市，在人体冷冻技术加持下，飞船可以将人类运送到数光年以外的地方。在詹姆斯卡梅隆的想象中，我们可以将记忆下载，上传到新的身体当中，所有这些极为先进的技术都是通过可触摸的、透明单色的的全息影像来进行控制的，而这个和好莱坞其他很多科幻电影中的界面如出一辙。阿凡达当我们透过科幻电影窥见未来的时候，我们看到的是无所不在的语音助手，超凡脱俗的可穿戴设备和大量的全息影像和3D交互。在这其中，不知道是出于何种原因，这些全息图几乎全都是蓝色的，漂亮地悬浮于桌面上方，每个路过的人都能看到。这种未来派的 UI 设计一直都令我困惑，因为它看起来很酷，但是实际并不实用。不过，好莱坞电影似乎极度痴迷于这种被蓝光包裹的未来科技。星球大战中莱雅公主的全息投影也许这种好莱坞设计公式源自于最早、最有影响力的科幻题材电影星球大战系列。星球大战当中许多科幻元素为后来者提供了灵感，而后续的很多作品会自然而然在前辈的基础上沿袭设计。《阿凡达》系列电影当中，对于蓝色全息影象就有着明显的偏爱。什么是全息影像我们先重新回顾一下好莱坞对全息影像的呈现形式。通常在电影当中，全息影像有两种形态，平面全息图和立体全息图。平面全息图其实早已出现，从平面的3D效果收藏卡到舞台上的初音未来全息图，都属于这种平面全息影像。而在科幻电影当中，投射到透明屏幕上的界面，也同属于这类。初音未来然而，立体全息影像则截然不同。顾名思义，它是立体的，占据空间体积的，那么我们要如何让光占据特定的空间，并且拥有三维立体的物体一样的「特征」？如何让光线停留在特定的地方而不是继续向前投射？而这正是物理学家 Daniel Smalley 这样的人所研究的课题。受到星球大战中莱娅公主的立体投影的启发，他已经能够通过激光击中纤维素粒子，在空中形成立体的 3D 蝴蝶轮廓，这个技术上的飞跃意味着全息影像已经成为可能，但是距离钢铁侠手中可以交互、随着手掌转动的立体投影太远，实在是相形见绌。乐观点预测，我们有可能在 10 年内看到一些拥有体积感、尺寸更大的全息影像，但是现在它依然是科幻电影和小说里供人想象的未来。最初打破常规的是《星际迷航》值得注意的是，最初打破这种使用全息影像「惯性」的是早期的《星际迷航》系列的电影和剧集，影片中设计师采用了浓郁 60 年代设计语言的扎实显示屏。然而此后剧集和电影重启的时候，又折返回去采用好莱坞的未来感全息 UI 界面，舰桥上悬浮着蓝色基调的全息影像 UI 界面，最新的 USS Discovery 当中，船员不再能够透过硬质屏幕和敌舰视频语音，所有人直接在全息影像频道里实时通话，还能便捷地进行战斗调动。然而如果真的要细抠设定的话，USS Discovery 的剧情所在时间段相反发生在柯克船长掌舵之前的事情，但是看起来技术相反更加先进，不过星际迷航粉对此倒是有一番详细解释，只是实际上主要原因还是好莱坞影视产业的发展的必然结果。好莱坞对于全息影像呈现的着迷是理所当然的，更加炫酷的视觉效果是必然的趋势。复古的黑蓝橙色如今也被蓝色和白色为主的色调所取代。漫威电影重塑了范式设计蜘蛛侠套装的界面就是经典的蓝白光影漫威的科幻电影如今比以往任何时候都要主流。是的，这些包含令人难以置信的未来技术的超级英雄电影被归类为科幻。甚至雷神所使用的魔法也已经被堂而皇之被解释为「被误解的科学」，而这也进一步推动漫威将蓝白色全息投影界面普及到整个漫威扩展宇宙。总部位于纽约的设计公司 Perception 是漫威电影中钢铁侠各色技术的创意源头。每当神盾局的尼克福瑞局长在和全世界领导人争论的时候，其实都是 Perception 的设计师在背后加班熬夜。当蜘蛛侠在设计战衣的时候，也是 Perception 的设计师建模渲染，并且操控哪些全息影像，而真正决定瓦坎达技术风格走向和未来感是否充足的，同样是 Perception 的工作人员。根据他们创意总监 John LePore 的说法：「了解电影所处的是哪个阶段以及技术所属的阵营，对我们而言是很重要的。它是否属于军队？如果是，那么我们需要添加更加扎实和实用的感觉。它是否是量产并且市售的产品？如果是，那么它需要有更加友好的界面。它是否是钢铁侠那样专业人士所使用的设备？如果是，那么它所拥有的界面就会高度的个人化。」案例研究：Tony Stark 的界面设计钢铁侠打开了太多的标签页钢铁侠 Tony Stark 是亿万富翁，天才发明家，花花公子，也是慈善家，但是他同样是一位专业的用户界面和用户体验设计师。他设计的界面是适合他自己的，并且有着非常具体的需求，但是由于他本身同时也是科技企业的负责人，这也意味着他所设计的界面会在更广阔的世界当中使用。接下来，我们按照时间顺序来看看 Tony Stark 的用户体验设计，以及它们在漫威宇宙中的演变。钢铁侠1（2008）除了制造 MK I 的阿富汗山洞，这是 Tony Stark 的工作区域技术含量最低的版本。很多跑车被放置在这里，桌面上的 Mac 显示器显示着繁复的界面，他可以透过语音来命名人工智能 Jarvis 辅助操作：他还有一支笔一样的交互工具，方便他将屏幕上的设计文件直接拖放到桌子上，以全息影像的方式呈现，并且可以与之交互：在 2023 年这种技术还无法实现。而其中最科幻的部分，就是他可以直接用手抓取，或者将特定的组件挑选出来，揉碎删除。Tony Stark 的这种展现方式，和如今的 HoloLens 2 在 AR 触觉领域的探索类似，也许我们和这样的交互方式已经非常接近了。钢铁侠2（2010）在第二部当中，Tony Stack 在国会听证会上，突然拿出的全透明手机，同样出自 Perception的设计，而这种想法也一度让现实世界中的科技企业感到兴奋，三星甚至专门参考电影中的内容，起草了一些关于透明手机的专利文件。在这个场景中，Tony 使用这个手机直接入侵了现场的电子设备。Perception 设计了一款带有透明玻璃的咖啡桌，Tony 轻拍两下即可启动，整个交互逻辑和我们日常使用触摸屏是高度一致的，滑动，缩放，虚拟键盘，当然，还有典型的蓝色透明界面：其实这类投影触摸屏本身并不算什么新鲜技术，它们可以使用摄像头、AI 感知来确定指尖的位置。另外，在发现新元素的场景当中，Tony 大量使用了手势交互来操控立体全息影像：钢铁侠3（2013）在《钢铁侠3》当中，传统显示器彻底被淘汰了。Stark 的实验室中，所有的信息呈现都已经使用全息影像了。这使得 Jarvis 所控制的投影区域比以往任何一部都要大。在这一部当中，Stark 使用全息影像重现了整个爆炸犯罪现场，在此过程中，Tony 穿行在全息影像中，使用极其详尽的数据分析寻找线索，找到罪魁祸首，他甚至不得不跳到工具箱的顶部，才能鸟瞰整个镜像，与此同时，大量的辅助信息的窗口、新闻报道和数据在空中交错，提供信息支持。使用整个房间来作为全息影像的载体是惊艳的，我们没有除此之外更好的范例，这中技术也许可以借助如今的虚拟现实技术来进行类比，但是全息影像无疑更加惊艳。复仇者联盟（2012）之后进入新阶段之后，Stark 大厦当中每个屏幕都已经是交互式的全息影像了。即使是离开自家实验室，在神盾局的天空母舰上，基于透明屏幕的平面全息影像也无处不在。近期上映的《黑豹2》当中，Shuri 的实验室里面也全都是全息影像，有2D的也有3D课交互式的。瓦坎达的普通民众使用的个人终端也不是我们熟知的智能手机，他们使用的是 Kimoyo 念珠手串，接听电话进行沟通的时候，这个小巧的念珠会让信息以3D全息影像的形式呈现出来。为什么好莱坞偏爱全息影像《银翼杀手2049》中的超大型全息影像电影当中为什么会使用全息影像和透明界面？问题的答案其实是显而易见的。全息影像在体验上更加直观，比起在手机上来回切换要更加令人愉悦，即使沟通的对象和你不在一个星球上，也同样可以面对面地进行沟通，这种无视空间且直观的沟通方式，毫无疑问是炫酷的。为什么是透明的界面和蓝色的光影？除了因为本身看起来足够具有科技感，而且也便于拍摄。但是从用户体验的角度来审视，全息影像受到如此青睐也是符合逻辑的。这种科幻美学符合预期不管全息影像在好莱坞是如何衍生出如此多丰富多彩的呈现，它现在已经成为了未来技术的一个代名词。《银翼杀手》《星际迷航》《阿凡达》全都是针对未来的幻想，科幻作品所描绘的未来生活方式，无论好坏，都已然成为客观存在的、大众对于未来的共同想象，它们就是我们对于未来的期许。Pamela Sargent 将这种现象称为「思想文学」，这些虚构发明一直被我们重述，我们才能不断想象、发明和验证，将之带入现实。不受传统屏幕限制Tony Stark 在电影中使用全息影像的妙处在于，所有的界面几乎已经不用受到传统屏幕的限制，除了可以随意变大变小，它们还能脱离传统屏幕的存在，被拖拽出来，在全息影像中，随意放置和缩放 ，这也是为什么 Tony 可以肆无忌惮地打开如此之多的界面窗口。而立体的全息影像则开辟了新的可能性。如果我们都可以像瓦坎达人一样使用全息影像聊天，那么原本高度依赖线下执行的任务，很大概率可以在线上完成了，比如购物。相比于使用 VR 和 AR 来预览商品和效果，全息影像所提供的效果会更进一步，这才是真正革命性的变化。而在《钢铁侠3》中，Tony 借助全息影像查看犯罪现场，就是立体全息影像的绝佳演示。值得一提的是，即使最终能落地，全息影像并非全是优点，有很多务实的问题有待解决。透明度界面其实有问题通常，我们认为内容通透干净清晰是一个优点，但是全透明的载体，无论是2D的屏幕还是3D的空间之下，所有的信息都是一览无遗的，毫无隐私可言，无论你在做的是什么事情，都会彻底地向所有人展示。除此之外，这种高度通透的视觉信息，有很大概率会造成视觉疲劳，在光照充足的区域，全息影像要如何呈现，同样是一个非常具体务实的问题，如果无法解决高亮度情况下的信息呈现，那么全息影像就只能存在于暗室当中了。针对全息影像优化如今依然有网站还没有针对移动端屏幕进行优化，甚至没有针对如今流行的高清屏幕进行优化。在全息影像开始发展、走向民用之后，会逐渐开始形成设计标准，那么咱们的数码设备、网站、内容都需要在这个标准下有意识地兼容才行。手势交互的遗漏全息影像是需借助手势来进行交互的。但是，我们目前尚且没有掌握所有的 iPad 手势，又谈何全息影像的交互呢？如果这项技术最终在现实世界流行开来，那么我们需要面对它相对陡峭的学习曲线。与此同时，即使具备了成熟的全套交互操作，能够像 Tony Stark 一样进行交互的人毕竟还是少数，多数人可能依然需要借助一些工具来更好地和全息影像进行交互，包括但不限于键盘和鼠标这些传统的交互工具。结语：全息影像是未来吗？https://image.uisdc.com/wp-content/uploads/2023/02/2466635606.mp4电影中一直在使用平面全息影像和立体全息影像，因为它们在大荧幕上看起来很赞，为用户提供了颇为不错的视觉享受。这种交互式、透明的蓝色界面已经透过好莱坞，成为了未来设计的代名词。如果科幻作品代表了我们对于未来的愿景，那是不是全息影像就是设计的未来方向？或许是。从我们目前在 VR 和 AR 领域的探索来看，用户的确非常想触摸虚拟屏幕，用户也想像 Tony Stark 一样操作虚拟物品，就像我们上面提到的 Microsoft HoloLens 2 那种混合现实交互的前进方向。实际上，现在的技术人员也在尽力借助产品来弥补虚拟环境下的感官体验，对于如今的 VR 设备而言，手持控制器是必不可少的，用户要靠它们获得触觉反馈。当下我们所拥有的技术是远落后于科幻作品的，但是指向这个方向的研究，是一直在推进的，起码我们现在已经攻克了一部分全息影像的可用性问题。本篇来源：优设网原文地址：https://www.uisdc.com/holograms-future-ui
色彩 灵感 作品 大家好，这里适合你们聊设计的花生~配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求的配色方案，并提升对色彩的感知力和掌控力。往期回顾：配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 一、Adobe Color网站直达： https://color.adobe.com/zh/create/color-wheel （需要魔法）Adobe Color 是 Adobe 公司开发的专业色彩灵感网站。如果只看它的首页，会觉得它只能用来寻找和谐配色方案，但它有两项经常被忽略的色彩功能：探索和趋势。Adobe Color 的“探索”功能可以让设计师按关键词搜索配色方案。比如在搜索框内输入 Cyberpunk，网站就会推荐很多相关的图像，并自动生成其的配色方案。配色方案可以下载为 JPG，右上角还有筛选器，可以按色卡、艺术作品、摄影照片来筛选内容。从绘画的角度来说，这种方式能帮助我们快速找到指定风格或场景的参考图片及配色方案，比自己先找参考图片、再提取照片配色更高效。“趋势”则是从 Behance 和 Adobe Stock 中抓取最新的图像内容，提取其配色方案，并按时尚、UI、建筑、插画、风景、美食等进行分类呈现。如果你觉得的自己在色彩方面的感知力较弱，不如多到这里逛逛，既能迅速了解不同行业最新的色彩趋势，也可以获取高质量的配色灵感。二、Color leap网站直达： https://colorleap.app/homeColor Leap 是一个记录不同年代作品色彩的网站，包含公元前 2000 年至 20 世纪 60 年代间的 12 个年代。点击主页的年代标签，进入后可以找到多套符合时代特色的配色方案和代表作品。多了解不同年代的配色风格，可以加深我们对色彩含义的了解，提升对不同配色风格的掌控能力。色彩时光机！可查询每个时代流行配色组合的 Color Leap每个时代都有代表的文化和呈现样貌，如果对于一些绘画或摄影作品有研究，可能也会发现不同年代会使用的颜色也大不相同，当然这牵涉到许多层面，就不在本文深入探讨了。阅读文章 > 三、Google Palette Art网站直达： https://artsexperiments.withgoogle.com/artpalette/ （需要魔法）Google Arts and Culture 和世界各地超 2000 间博物馆达成合作，拍摄它们馆内的艺术作品并上传网上用户欣赏。又在此基础上推出 Google Palette Art，利用电脑视觉演算技术分析并标记了这些作品的配色，让用户可以通过色卡来搜索艺术作品，在 Google Palette Art 上可以随机生成一组 5 种颜色的方案，然后得到所有类似配色的作品推荐。颜色是可以修改的，每修改一次推荐的艺术作品也会随之改变。我们还可以自己上传图片，网站会提取其中的 5 种颜色并推荐类似的配色作品。在 Google Palette Art 内我们不仅可以搜索配色灵感，提升艺术审美，还能了解作品背后的艺术知识。将鼠标悬停在作品卡片上，会有一个「更多详情」的选项，点击后会跳转到作品的介绍页，里面有作者信息。点击作者名称，就能跳转到艺术家主页，里面有艺术家的生平介绍、代表作品和作品故事。四、Designspiration网站直达： https://www.designspiration.com/Designspiration 是一个类似 Pinterest 设计灵感网站，但它可以通过色彩搜索站内的设计灵感。Designspiration 会自动为每个作品生成一组色卡，点击色轮可以查所有使用类似配色的作品，包含插画、平面设计、摄影照片、建筑等多个方面。色卡的颜色可以独立调整，我们也可上传自己喜欢的作品，用这种功能查询所有类似配色的灵感。spiration 在主页搜索栏右侧有一个调色盘小图标，点开后是一个调色板。我们可以在上面选择至多 5 种颜色，然后搜索以这种配色为主的所有灵感。这个网站非常适合刚开始学习设计或插画的小伙伴，如果在配色阶段被卡住了，可以先选一两种颜色进行搜索，过程中根据推荐的作品随时调整颜色，直到找到符合自己需求的配色。五、Palettemaker网址直达： https://palettemaker.com/Palettemaker 是一个免费的在线配色预览网站，它可以随机生成配色方案，或者根据一种配色方案生成 100+ 配色灵感，以及将配色实时应用到不同的设计模板上，模板包括 UI 界面、插画、排版、图案等。如果你突然有一个配色灵感，可以将其复制到 Palettemaker 当中，看看实际应用的效果如何。因为配色效果是实时呈现的，我们可以根据感觉一点点修改直至自己满意为止，然后在这个过程中总结色彩搭配的经验和技巧，积累多了对色彩掌握能力自然会有提升。如果是想迅速获得配色灵感，就可以使用它的 “Generator”功能，选一种颜色让 Palettemaker 推荐灵感，然后从中挑选自己喜欢的。以上就是本期的色彩灵感网站推荐，非常适合设计师和插画师日常浏览使用。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~推荐阅读:看电影学审美！5款超实用的电影拉片资源大家好，这里是和你们聊设计的花生~之前为大家推荐了 8 位 B 站上值得关注的电影拉片 UP 主，可以帮助大家了解电影拉片的基本知识。阅读文章 > 2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/6-top-inspiration-resource
职位 用户 产品 2023年市场逐渐复苏，招聘行业也迎来了新的机会，通过这段时间对招聘平台的深入体验与了解，给本人带来了很多使用体验，所以此次我对 BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这五家招聘 App 的首页功能进行拆解与分析，让大家更加了解招聘行业与其背后的设计逻辑，希望对大家有所帮助。往期拆解：万字拆解！12306产品设计全方位深度解析有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。阅读文章 > 一、阅读须知1. 时长说明全文约 8000+字，深度阅读本文大约需要 25-30 分钟；2. 观点阐述本文所有观点不代表公司，仅个人观点；本文中的所有观点没有任何产品偏向，仅站在一个用户的角度来分析产品；3. 适合人群第一类：UI/UX 体验设计师：跳出设计执行层，去思考招聘产品背后的设计策略，提升产品设计分析能力；第二类：产品/运营经理：通过全面的产品设计拆解、用户逻辑分析，获取产品设计参考；第三类：招聘行业从业者：通过首页分析与拆解，获取竞品逻辑参考；二、行业介绍1. 招聘平台定义指运用互联网及相关技术，帮助雇主和求职者完成招聘和求职的网络站点。狭义的招聘网指以网络为媒体的招聘广告发布平台及相关的人力资源服务系统，广义的招聘网站拥有招聘网站且网络招聘营收比重较高的公司，提供如招聘信息发布、简历下载、定制招聘专区、求职简历生成、职位搜索、薪酬查询等。2. 招聘平台优势① 对企业提高招聘效率；改善招聘效果；提高生产力；提高响应速度；提高各部门合作度；提供可持续作为后备的人才库资料② 对求职者快捷方便对于求职者来说，只要在人才网站上登记了个人简历，即可等候企业的招聘信息，如果上网方便还可以主动出击。网络招聘平台不断升级更新，快捷而富有效率，求职者通过招聘网站，可以不出家门就对工作的类别、地区和需求进行全方位智能查询，快速准确地查询到所需要的包括行业、职能、工作地点、工资等信息。工作职位分类清晰、针对性强。一些大的招聘网站，可以随时查询到数万条信息，而且每天更新职位，只要在家关注招聘网站就能第一时间掌握用人单位的需求。机会多网络求职的一大特点是招聘信息量大，海量的职位库中，求职者选择适合职位的机会也就越大。无限制“传统的招聘会不是每天都有，而且浪费精力和金钱。”一名求职者在采访中这样表示。相比其他招聘形式，网络求职也没有区域和时间的限制，能够给个人创造更多的就业机会。对于异地求职者，这省却了奔波于不同城市的烦恼；对于一般院校学生，因为不易亲临知名企业校园招聘会，但通过网络就可以获取与其它求职者同等竞争的机会。3. 盈利模式目前国内的互联网招聘平台可以分为三类：第一类是以智联招聘、前程无忧为代表的综合类招聘平台；第二类是以 58 赶集为代表的分类信息发布平台；第三类是以 Boss 直聘、猎聘网等为代表的垂直招聘平台。这些垂直招聘平台更多的是专注于一个领域或特定人群，比如，猎聘网主要面向高端人才，Boss 直聘更专注于互联网行业。虽然招聘平台众多，但目前我国互联网招聘行业模式主要分为两种。第一，传统模式，即招聘平台同时从 B 端（企业）和 C 端（个人用户）收取费用，综合类招聘平台均采用此模式。第二，C 端免费模式。招聘平台以求职者用户为中心，主要向 B 端收费，如企业完成招聘后平台按单提成等。然而，无论是哪种商业模式，用户数量都是企业盈利的重中之重。4. 排行图谱根据易观千帆 2020 年 6 月招聘类 app 数据的显示，第一位 Boss 直聘，月活跃用户人数 1558.76 万，日均活跃人数 369.80 万。 第二位前程无忧，月活跃用户人数 1296.29 万，日均活跃人数 268.78 万。 第三位智联招聘，月活跃用户人数 1139.37 万，日均活跃人数 243.75 万。第四位猎聘，月活跃用户人数 509.81 万，日均活跃人数 97.48 万。（以上数据为 2020 年数据，数据仅供参考），从招聘排行不难看出，招聘行业目前是属于多强混战的状态，没有形成垄断局势。各家都还有弯道超车的机会。此次我们主要分析头部的招聘产品分别为：BOSS 直聘、前程无忧、智联招聘、猎聘与拉钩招聘这 5 家招聘 APP。5. 产品更新频次与平台 slogon（1）产品更新频次：更新频次越高，说明产品更新换代速度越快，适应市场变化的能力越强，企业的发展就越有保障。根据点点数据提供的招聘类 app 更新频次数据的显示，BOSS 直聘的更新频次为：2.4 周/次、前程无忧 5 周/次、智联招聘 2.6 周/次、猎聘 2 周/次、拉钩招聘 2.1 周/次，从数据可看出猎聘的产品更新频次最高，前程无忧相对更新频次最低。（2）平台 slogon：对于一个企业、一个产品和一个网站来说，slogan 都非常重要。广告口号是一种较长时期内反复使用的特定的商业用语，它所强调的是一家公司和它的产品最为突出的特点，以下为各公司的 slogon。Boss 直聘：找工作，上 BOSS 直聘直接谈前程无忧：专业招聘求职找工作平台智联招聘：人才求职找工作招聘平台猎聘：招人找工作上猎聘，准！拉钩招聘：招聘找工作高薪求职三、首页拆解1. 框架结构分析① 框架结构首页各家的框架大同小异，整体分为：顶部操作区、运营区、内容筛选区、职位内容区、底部操作区这五个区域组成，下图为首页的框架图可以让大家快速熟悉页面结构。② 首页页面与品牌色虽功能相近，但各端的页面设计还是有很大的差异性，同时品牌色也有很大的差异，优秀的色彩会更好的占据用户的心智，合适的品牌色可以给产品带来更准确的调性与情感，下图为各产品首页样式与品牌色色值，让大家更加快速的了解界面与品牌色。2. 顶部操作区① 布局首页的顶部导航栏，是界面中不可缺少的组成部分，出镜频率极高， 在苹果界面指南中，则被称为 导航栏（Navigation Bar）。在界面中，顶部栏会显示与当前屏幕相关的信息和操作素材。在招聘行业的顶导中导航栏主要结构为左右结构 主要功能为：选择职位、添加职位、搜索等。② 顶部背景顶部背景是首页视觉风格的关键，它决定着产品的调性。目前这五款产品中的顶导一共有两种风格：渐变弥散风格：赋予界面更加轻松愉快的氛围感，营造出空间层次感的同时又不抢界面眼球，也是目前主流 APP 的设计趋势。应用产品为 boss 直聘、前程无忧、智联招聘品牌单色风格：此风格会提升色彩在界面中的占比，相比渐变风格界面会显得传统与稳重，赋予产品严肃的调性。应用产品为猎聘、拉钩招聘设计思考这两种风格哪个更加适合招聘平台？（1）通过这两种风格的分析，可以发现有两个大的方向一个是给予用户轻松的界面感受，一种是正式严肃的氛围，到底哪种更适合招聘行业呢，首先我们需要了解使用的用户人群与用户心智。用户人群：主要是来找工作的用户，使用人群体为 22-35 岁；用户心智：来找工作大多是忐忑的紧张的甚至对未来抱有期待的心理；（2）接下来我们把用户带入到这两种界面中，我们会发现当一个紧张的人进入到轻松的氛围中自然会降低用户的负面情绪，但我们将这种用户心智的人带入到一个严肃的氛围中会带给用户更大的心理负担从而降低用户的使用体验。接下来我把界面发给了不同行业不同职业的人群，让他们进行了匿名投票，其中选择渐变弥散的占比为：80%，主要反馈：好看、高级、看着更舒服轻松；10%的人选择了单色风格，主要反馈为：喜欢正式一些的；还有 10%选择弃票觉得两种都不太好；通过投票也认证了更多的用户喜欢招聘界面调性应该更加轻松些；③ 搜索这五款产品的搜索样式也是各有不同，主要分为：图标式入口搜索与搜索框搜索。其中 Boss 直聘与拉钩招聘为图标搜索入口；猎聘、智联招聘、前程无忧为搜索框搜索，这三款产品都支持上划隐藏输入框提高界面屏效（这里点一个赞）；设计思考搜索功能是否是招聘首页的核心功能？是否需要强化搜索框？首先经过分析，招聘平台的搜索场景与频次，搜索功能支持的内容分别为搜索职位与公司。（1）搜职位：首页上已经有用户预设好的职位，使用搜索可能是因为预设的职位不够精准（但现在职位分类已经十分精准）或预设以外的职位，所以本人很少用搜索来搜索职位；（2）搜公司：当用户有固定想了解和想加入的公司时会通过搜索来进行查询，所以此场景的使用频次会更高；其次我们发现现在带搜索框的产品上划后都会隐藏搜索框，由此可以判断搜索功能可能不是首页最核心的功能，没必要强化搜索框来影响用户使用核心功能，产品可以适当弱化搜索功能；④ 管理职位此场景主要是从首页的“+”中跳转进入，主要功能为管理当前职位、添加新职位、求职状态等功能，编辑求职中支持选择城市、期望职位、职位偏好、薪资要求、期望行业同时支持删除职位功能。产品亮点在管理职位页，Boss 直聘可以根据当前添加的职位推送相关与之前设置过的职位列表，这里采用了尼尔森十大原则中的易取原则，让选择可见，降低用户使用成本。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 设计误区在编辑职位中拉钩招聘的表单设计有一个明显的设计缺陷，没有遵循尼尔森十大原则中的易扫原则，它让整体的表单动线呈现为多个"Z"字形，让用户的可读性降低，应当把标题放到输入区上方，让整体动线成直线，提升用户的阅读一致性。大家也可以检查下自己设计过的表单中有没有出现过这种问题，如果有及时改正。设计误区：猎聘与智联招聘在修改职位页中把主按钮做成删除功能，这在我使用产品中带来了非常不好的体验，当用户修改完内容后还要寻找保存在哪里时，如果用户不注意很容易进行误操作，很多用户来编辑职位可能就是改一下城市或者薪资。第二个问题点是两个按钮距离过大，操作体验不一致，建议统一把按钮放在下方，方便用户进行操作。⑤ 职位交互滑动首页区域可以进行职位之间的滑动切换，这一点在所有招聘产品中都保持一致，可以让用户快速的进行职位切换。设计误区智联招聘的顶导区域有两个模块，分别为“职位”和“靠谱榜”，首先第一个设计误区，我注意到“职位”下方有一个触控条，这个条出现的交互定义是可滑动区域，而进行滑动后发现是滑动下方的职位而不是此区域，所以这个触控条完全没有存在的必要（大家在设计入口的时，要充分考虑到用户的使用场景不要增加无故的设计来提升用户理解成本）；接下来是第二个问题，当发现靠谱榜是点击才能进入后，想着这两个入口是可以来回点击切换的，结果发现是转到到一个 H5 落地页？是点返回 icon 回到首页，所以首页职位那两字存在的必要是什么？不仅让界面多了一个触控条甚至这俩字任何功能都没有，那为什么不直接去掉，然后把靠谱榜换成图标放到搜索的右边呢？属实不太理解。3. 运营区① 类型运营区是首页的引流功能，首页增加运营入口可以提升广告与运营活动的点击，但区域要进行克制，不能因为运营区影响主要功能的使用。在招聘行业的运营区的主要功能为：banner、直播、商业产品。其中 Boss 直聘没有运营区，智联招聘只有直播，猎聘有商业产品与直播，拉钩招聘是 banner 与商业产品，前程无忧全部都有。② 占比招聘行业作为工具类产品应当尽量减少运营区的占比，占比越高就会对用户的使用体验带来更大的体验阻碍，其中 Boss 直聘运营界面屏效占比为 0%，智联招聘占比为 23%，猎聘占比为 10%，拉钩招聘占比为 19%，前程无忧为 50%。产品亮点Boss 在首页没有设置运营区,这让界面更加工具化，把直播和活动的相关入口放到“我的”和“有了”里大大提升了首页的使用体验。产品误区前程无忧的运营区的屏效比占到了 50%，这已经严重的影响到了核心内容区的信息展示，其次运营区有两个 banner 位这样用户进入首页后显得杂乱无章，让用户无从下手。4. 内容筛选区① 功能内容筛选区也是以左右结构为主，布局与顶导类似，左侧功能区为：推荐、附近、最新；右侧功能分为：地区选择、与筛选；此功能区所有产品功能相同。设计思考次标题选中时是否需要视觉强化？根据界面层级关系发现，左侧的功能区在首页场景里属于一个次标题的位置，当前产品中有 3 款产品选中后样式为文字加粗，还有两款为选中后变为品牌色。其中猎聘最为复杂不仅改变了文字颜色还增加了圆角卡片。经观察主标题（也就是职位名称）为一级标题，产品都为默认色值，所以副标题应该遵循色彩规则保持设计一致性，选中加粗即可，没有必要强化，这样会导致模糊视觉层级，其次目前设计趋势为简化褪色，减去没必要的色值，给用户带来更简洁的体验。设计误区前程无忧的筛选列表中有一个月薪范围功能，这里是需要用户手动来填写，而其他产品则为滑动条滑动选择，这里前程无忧的手动填写就没有遵循尼尔森十大原则中的人性化帮助原则，相比滑动选择这种手写的交互方式会让用户的使用成本提高，建议改为滑动选择降低用户操作成本。5. 职位内容区① 布局职位展示区是首页中最为重要的功能，主要展示职位的重要信息，方便用户进行基础的判断，布局整体是卡片化处理，主要内容为：职位名称、公司信息（公司名称、人数、是否上市）、招聘人员、职位标签、薪资、地点和不感兴趣。各产品的内容信息基本一致，但样式上有两种形式分别为：职位标签在公司下方和职位标签在职位下方；设计思考职位标签是应该放到职位名称下方还是放到公司信息下方？首先要思考职位标签是什么，职位标签是对于职位进行的更详细的介绍如：工作经验要求、工作学历要求、职位类型等职位信息，这样看下来应该采用方案一（职位标签在职位名称下面）更合理，因为标签是根据职位而定的，但这样设计会导致主副文案（主文案为职位名称，副文案为公司信息）被标签所隔开，导致卡片的信息展示不协调。其次整体的卡片是职位卡片，卡片上的所有信息其实都是为这个职位服务的，标签只要出现在卡片内就可以满足用户预期，不会增加用户的理解成本，所以把标签放到更适合的位置让卡片展示更协调与舒适即可，所以方案二更加适合。② 薪资展示招聘平台中的薪资是非常重要的文字信息，找工作工作内容是一方面，但薪资对求职者来说才是重中之重。所以各产品中都对文字进行了一定的强化如：加入品牌色、专属数字字体等方式来进行特殊处理。薪资的文字结构为 xx-xx 万·xx 薪。产品思考薪资文字信息应该是用 K 为单位还是以万为单位？从用户角度分析“万”是中国的通用单位，对国内用户的理解成本更低，“K”是英文单词前面都有“kilo”的前缀，在国外为数字的通用单位，而且外国是不用“万”来做单位的，通常用“K”来表达薪资 10K=1 万，随着“K”这个单位逐渐在国内普及，和招聘市场逐渐走向海外，单位也由“万”变成了"K"，不过“K”对于很多三线以下城市的人可能不理解什么意思，所以建议产品同时支持国际单位与中国单位，用户可以通过设置自定义展示需要的数字单位。随后将这些平台是否支持这个功能进行了对比分析，发现 Boss 直聘在设置-主题设置中可以选择数字单位，其他平台均不支持，这点为 Boss 点个赞。设计亮点Boss 直聘与拉钩招聘对薪资进行了特殊字体处理，对于招聘行业数字是一个很敏感的信息，这些设计细节就是拉开产品之间的设计差距，定制化的数字可以与普通文字拉开差异，让数字更具备识别性，提高薪资信息在职位卡片中的视觉比重。③ 反馈功能反馈功能是提升职位列表质量的重要途径，招聘行业的反馈原因主要分为：公司不感兴趣、地区不感兴趣、行业不匹配、职位不符合预期、薪资低、其他原因等方面来进行推荐列表优化。在有反馈功能的产品中，Boss 直聘和前程无忧反馈原因最多有 9 个，猎聘最少仅有两个，反馈原因越多推送就会越精准，所以反馈原因方面猎聘还需要继续提升。产品误区这 5 款产品中，职位卡片可以进行删除与不感兴趣反馈，这样可以通过用户反馈来进行推荐列表优化，从而提高推荐职位的精准度。但拉钩招聘目前不支持反馈功能，这样会导致推荐列表无法根据用户来定制职位推送，推荐不精准会严重的影响用户使用体验，从而降低使用频次。6. 底部操作区① 布局底部布局随着时代的发展出现多种形式如：常规类展示、不规则突出展示、悬浮式展示、隐藏式交互展示等，但在这 5 个产品中，都采用的是常规类展示，其中猎聘、Boss 直聘、前程无忧为 4 个功能入口，智联招聘和拉钩招聘为 5 个功能入口。组合形式都为 icon+文字的形式，这种形式可以降低用户理解成本，提高用户操作体验。设计思考消息入口需要放到倒数第二个吗？这个问题是我一直纠结很久的问题，通过日常高频使用的产品发现（抖音、微博、支付宝、闲鱼等）消息功能都放在倒数第二个入口，从而养成了用户习惯，所以当我使用猎聘和智联时就会经常出现点错的情况，其次像日常使用的其他软件（微信朋友圈、淘宝购物车等）也都把高频使用功能放到倒数第二个入口，这里我查阅了大量资料发现，一般产品第一个入口是最核心的功能，而第二个入口距离第一个入口过近这样会导致用户不容易察觉到，所以第三个入口或倒数第二个入口是底部最适合放置第二核心功能的区域。招聘平台消息是非常重要的功能，求职者和招聘方大多都是通过“聊”来促进职位达成，所以把消息放到倒数第二个位置最为合适。② 图标设计底部导航栏的图标是路牌，承担着指路的作用，给用户指明进入产品后可以分别通往什么页面。早期的底部导航栏是单一的指路功能，而经过多年的设计迭代底导还具备着品牌调性、识别度、设计风格等功能。设计亮点前程无忧的首页入口选中后出现品牌 LOGO，这样可以很好的增加品牌曝光和识别度，更加凸显产品的专业与品牌调性。设计亮点Boss 直聘在底部图标设计上也是用尽了心思，在点击时增加渐变微动效让图标更具识别度，这种情感化的设计不仅可以提高感官体验，还可以更好的拉进产品与用户之间的亲和力，这些设计细节的累计才能不断的打动用户内心的惊喜感，也是设计师们不断探索的设计方向。四、总结通过对招聘行业首页的分析与拆解，发现整体体验下来这些平台的使用都还是不错的，因为此次是站在一个“挑刺者”的身份来横向体验对比产品，俗话说没有对比就没有伤害，如果用户体验单一产品是不会发现其中的问题与差异。在这次对比拆解中，发现 Boss 直聘是这 5 个招聘 APP 最好用的产品，无论是从产品层：薪资单位切换、反馈类别数量、没有运营广告等，还是从设计层：数字的特殊设计、底导 icon 动态设计等，都体现出产品与设计细节。希望其他平台可以弥补自身的问题，重视用户体验，努力做打动人心的好产品。下面是本人对各产品的打分（仅个人观点）Boss 直聘：猎聘：智联招聘：前程无忧：拉钩招聘：参考文献：点点数据-数据对比易观千帆-招聘类产品数据分析尼尔森十大原则本篇来源：优设网原文地址：https://www.uisdc.com/5-recruitment-platform-analysis
画面 主体 英文 今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。当然了人在床上躺水平心中涨是不可能的，了解这些技巧后也要尽可能的去实操练习一下，如果实操过程中出现什么问题可以随时加我末尾的微信，咱们可以互相交流讨论~往期回顾：案例实操！保姆级的元宵节海报设计教程来了！大家元宵节的设计都做了没，今天给大家带来的是关于元宵节的案例实操，同时也会给大家提供一些小方法帮助大家能更快速高质量的出稿，希望对大家有所帮助~更多海报设计教程：往往做不出来设计，就是这三个问题。阅读文章 > 一、藏头露尾这种处理方式适用于可以被分割的主体，通过在主视觉区隐藏起来主体的一部分然后在另一区域让其显示出来，这样重复不同于单纯的复制可以有效避免呆板以及尴尬，当然了最大的优势还是操作起来比较简单。双主体甚至更多主体同时出现的时候一定要注意平衡性，就想象两个主体是在画面里玩跷跷板，如果一侧过重就需要减少其在画面内的占比。如果一侧过轻，则可以考虑让标题等信息集中集中到轻的一侧。二、多维组合二维三维的组合不仅仅体现在插画和照片，还有图形和图片的集合部分，采用真实化有助于给画面以焦点，能够有效避免纯图形过于抽象或者纯照片过于普通，是一种很有设计感的组合手法。这种手法核心就是穿插，前后的叠压很重要，亦或者是通过一些细小的元素打造画面透视，无论哪一种手法都是为了打造空间感，如果觉得画面比较闷没有亮点，就非常有可能是空间感的塑造上出现问题。三、出血文字经常有读者跟我说，我不会图形造型怎么办，我设计看起来很普通怎么办，这个出血文字就能很好的解决这个问题，所谓出血文字就是把一个文字拉到极大让画面的边缘裁切掉这个文字的一部分。特别适合书法体或者外文这种内部结构类似图形感觉的字，越过版心首先就会打破死板，如果使用的是书法体更有一种大气的感觉，细节是如果你使用大字出血不妨加上点属性的小字来进行点缀类似下图这种就很好。如果变形特别厉害足以形成空间的话就可以尝试一下这种画面了，当然这种更加适合做练习的版视探索，实际商业中做这种画面大概率是没法协调好视觉性和阅读性的。四、英文手写体单独把这个字体拎出来讲是因为这个用好了真的能解决很多问题，包括局部的负空间，或者部分空间的空白，以及标题或者画面的死板感，甚至是主体的视觉性不足和画面亲和力不够情绪传达不到位等等，都可以通过手写英文来解决。更多英文字体推荐：婚礼设计必备！5款带连笔的高质量英文花字体（已打包）大家好，这里是你们聊设计的花生。阅读文章 > 五、竖版横做顾名思义就是拿竖版的图片横着做，优点就是形式感很强，因为打破常规所以看起来会比较有新鲜感，但缺点也同样不小，主流商业难接受，影响阅读甚至影响视觉传达，因为人很少会歪着脑袋看海报，除非你的内容真的吸引到他。做这种有几点需要注意，第一并不是所有元素都要翻转，该保留的阅读元素一定要保留好。第二不是所有项目都适合，如果你的项目很重视形式感并且客户有一定的审美基础可以考虑采用这种形式。第三规律不变，版式结构思维还是用纵向思维做，翻转后的元素视为图形就可以了。欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/5-poster-design-skills
用户 定量 方法 在各行各业以产品主导向用户主导的转变趋势下，用户体验领域受到了前所未有的关注。互联网产品一直秉持着以用户为中心的设计研发理念，在需求、设计、开发、测试、验证等各阶段开展着形形色色的用户体验研究（以下简称“用研”）工作。典型的以用户为中心的设计（User-Centered Design）包含五大步骤：共情用户（Empathize）、定义需求（Define）、构思创意（Ideate）、原型设计（Prototype）、测试迭代（Test & Iterate）。用户研究工作不仅可以支持前期的用户需求挖掘，而且可以用于测试验证产品的效果，为迭代提供改进方向。更多用研干货：用户研究干货！设计师如何建立和利用用户画像？回顾个人工作经历，在用户研究中，我从未亲自进行用户画像建模，但却一直和用研同学保持密切的合作，并借助他们的用户画像建模成果输出过很多有益于业务的需求洞察和方案设计。阅读文章 > 一、用研方法如何选择除了常见的访谈、问卷等方法以外，针对不同目标的用研会采取不同的研究方法。选择在什么时候使用哪些方法成为了用研工作的一道门槛。为了解决这个难题，体验研究专家 Christian Rohrer 提出了一个 3 维度的框架理论，以帮助从业者更好地理解不同方法的特性和适用场合。这 3 个维度分别是：数据来源（态度 VS. 行为）、研究方式（定性 VS. 定量）、如何使用产品。1. 数据来源（态度 VS. 行为）态度数据代表人们说什么，主要用来了解人们的想法、观念等等；而行为数据则表示人们做什么。有趣的是，在实际研究中时常可以发现这两者并不统一，即用户陈述的信息并不完全符合他们的真实行为。这可能由于用户出于某种顾虑不想让研究人员知道其真实的想法，亦或是用户自己并没有意识到这种言行上的差异。不过，即使用户自己表达的信息不能保证 100%的准确性和真实性，但这类数据对于研究用户有着重要的价值。例如，问卷调研法就经常被用来测量和分类用户的想法；焦点小组则很适合于挖掘用户想法及对产品的期望；卡片分类法能够探索用户对于信息结构的心智模型。与此相反，有一些研究方法专注于收集用户的行为数据。例如，A/B 测试通过比较不同版本产品的用户行为数据来判断产品表现；可用性测试用来发现用户在实际操作上的体验问题；眼动追踪技术对于理解用户的注视行为起着极大的作用。2. 研究方式（定性 VS. 定量）很多人认为定量研究就是问卷里的封闭式问题，定性研究就是问卷里的开放式问题。其实不然，定性研究与定量研究最本质的区别在于研究方式（是直接还是间接地收集数据）。定性研究是一种直接收集用户数据（如当面询问、直接观察行为）的研究方式；而定量研究是一种间接方式，如通过测量工具（问卷等）来收集用户的想法和行为。由于定性研究和定量研究的这种本质区别，定性研究方式更适合于回答“为什么”、“怎么做”这一类问题，比如人们在购买定期理财产品时会关注哪些因素；而定量研究则更适合用来研究“多少”、“多少程度”等问题，比如哪个产品的支付流程更快。3. 如何使用产品不同的研究方法对于用户在参与研究过程中如何使用产品具有不同的要求.基本可以分为以下几类：自然使用、按脚本使用、不使用、混合。自然使用产品的方式能够使研究的干扰降到最低，从而收集到最接近真实的用户数据。通过这种方式收集的数据具有较高的有效性，但是可控性稍弱。不仅田野调查中经常使用这种方式，一些定量研究也会使用该方式，如浏览行为的数据分析。按脚本使用产品的方式经常用来研究特定方面的使用情况，比如产品的购买流程发生了变化，可以让用户按脚本完成特定购买流程，从而发现我们所关注的体验问题。根据研究目的，脚本设计的严格程度也不尽相同。如果要做不同产品、不同版本的基准比较（benchmarking），相应的测试脚本会比较严格且会产生可以比较的量化数据。不使用产品的方式通常用来研究更广泛的问题，比如品牌态度、日常习惯、文化差异等等。混合方式比较创新，比如在参与式设计中，用户不仅可以自然使用产品，还可以参与产品设计。让用户自己重组设计元素，从而引出用户的需求和想法。不同的研究方法在上述 3 个维度上并不是固定不变的。例如，田野调查可以专注在用户说什么（访谈），也可以聚焦在用户行为（观察）；卡片分类既可以做成定性研究也可以做成定量研究；眼动追踪可以应用在按脚本使用的产品测试，也可以在自然使用的产品测试中使用。二、定性方法探幽索隐、精准定性定性研究因其低门槛、高灵活的特性而被广泛应用于各个领域。由于定性研究人人都能做，所以常常被认为很简单。事实上，定性研究正由于执行起来“简单”，很容易使研究过程太随意、研究结果偏主观，而导致研究产出无价值。虽然定性研究不需要像定量研究那样严格控制，但也有实践原则可以遵循，来保证研究质量。1. 访谈法访谈是使用最广泛的研究方法之一，通过问答的方式来揭示用户对某一事物的潜在动机、态度及情感。要保证一次访谈效果，需要提前考虑清楚许多事项，如访谈大纲、地点、时间、记录方式、分析方法等等。其中，访谈大纲对于访谈质量起到了决定性的作用。最常使用的是半结构化的方式，即事先设计好核心问题，再临场追问有趣的回答。在设计问题大纲时，需要尽量做到：问题表达清晰用语符合被访者习惯提问不带引导性不要提双重问题避免问题歧义在执行访谈时，使用一些技巧可以使得访谈更加顺畅。首先，在最开始一定要花时间建立良好的聊天氛围，可以提一些简单的用于了解被访者的问题（如请聊聊您的兴趣爱好），让被访者放松和进入状态。过程中，适时引导被访者描述经历，因为人们在回忆过往经历时往往能够想起被遗忘的感受和细节。同时，对于被访者说的话也需要判别有无夸张或虚假成分，对于有疑问的地方可以让被访者说出具体的事实依据。更经常的是，会在访问过程中产生有意思的话题，研究员可以根据实际情况进行追问。2. 焦点小组法焦点小组作为高效收集丰富信息的一种研究方式，不仅可以用于需求的挖掘，而且可以用来收集对产品、服务的印象，还可以诊断产品成功或失败的因素，甚至可以用来帮助理解和解释定量调查的结果。焦点小组一般由 4-12 个人组成，一个典型的 6 人组往往会持续 2 个小时。不同于访谈，焦点小组法更注重参与者之间的互动引发的思想碰撞，而不只是单纯的一对多访谈。要保证焦点小组的有效产出，需要主持人在一开始确立好基本规则，让参与者相互尊重，独立发表个人的想法，不对他人进行批评或指责。期间，也要注意意见领袖特质的参与者，可以通过减少与其眼神接触，多鼓励其他组员发言，来均衡每个组员的表达时长。同时，要注意避免从众效应的影响，在让大家表态时可以使用写下来的方式以减少组员之间的干扰。需要多少组焦点小组才算足够呢？一个简单的判断方法是看有没有新的数据产生。当受访者重复以前小组收集到的信息，并且没有新的数据出现时，则研究达到了饱和。实际工作中，由于需要提前招募用户，往往会根据经验和项目具体情况来定义组数，有时候可能就 4 组，也有时候多达几十组。3. 田野调查田野调查并不是一种单独的方法，而是一种从用户实际的工作、生活和娱乐环境中收集信息的研究方式。在一个田野调查中，往往会使用多种研究方法，如观察法、访谈法、情境式访问、日志法等。情境式访问是指边观察边询问，针对用户当下的行为做出及时的提问，立即获取到准确的答复，可以避免在事后访谈时的回忆偏差带来的影响。不过，研究员需要习惯这种挡在用户工作中的工作状态，不要感到奇怪和害羞，也不要害怕提出愚蠢的问题，把自己当成学徒，尽情享受调查过程。三、定量方法有的放矢、精确定量定量研究很适合于特定用研场景，例如了解用户偏好、满意度、品牌美誉度等。针对偏好类研究，以权益定价为例，一般使用三个工具，分别是确定权益覆盖面的 TURF 方法，评估喜好程度的 KANO 模型及测算权益组合效用的 Conjoint Analysis 方法。在评价产品或服务的满意度时，可以采用结构化问卷，将满意度拆分到各个功能点或环节，再应用统计方法进行分析。1. KANO 模型KANO 模型是对用户需求进行分类和优先级排序的分析工具。利用特定的问卷题型收集用户对于不同需求的态度，并分类为五种类型，分别是魅力属性、期望属性、必备属性、无差异属性和反向属性。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 接着，通过不同类型需求的百分比计算出 Better-Worse 系数，用来诠释对不同需求的期望程度。例如，在研究手机银行支付优惠的偏好时，我们针对不同优惠内容（如餐饮券、商超券、还款券、出行券、旅游券等等）进行了 KANO 分析，发现用户对于在手机银行平台上的餐饮优惠券有较大的需求。2. Conjoint Analysis（联合分析）在权益活动设计时通常会遇到这样的问题：什么样的权益组合（内容、价格、时间等）是用户喜欢的？联合分析法就可以用来研究什么样的组合最受消费者欢迎。联合分析可以模拟用户决策，预测不同权益组合的效用，从而帮助制定推广组合战略和价格战略。例如，在研究手机银行支付优惠的偏好时，我们先确定权益活动的 3 个维度（领券时间、领券形式、优惠内容）的不同水平（3 x 2 x 4），然后使用正交设计缩减组合数再让用户进行打分。最后，通过联合分析计算出各个维度对用户选择的影响程度。同时，还可以利用最大效用模型，模拟出不同优惠组合的受欢迎程度，以指导权益活动的设计。3. 满意度研究满意度研究关注用户期望与实际体验的匹配程度，可使用层次分析法和结构方程模型来搭建满意度体系。首先，借助已有经验建立影响因素之间的假设关系。再根据用户对不同因素的满意度评分，通过因子分析进行降维处理。确定因子后，进行回归路径分析，获得各因子对于总体满意度的贡献程度。这样，我们不仅可以知道各子功能/环节的满意度，而且还能明确其对总体满意度的影响，从而针对性地进行优化。写在最后用研工作的价值最终需要体现在产品体验提升及业务目标达成。所以，研究方法的理论分类是为了帮助从业者能够更好地理解，从而做出更优的选择。本文只是分享了用研方法的概览和结合实际工作的一些经验。如何让用户研究发挥更大的价值，还需要大家在实践中勤思考、多探索，以达到精准定性、精确定量。参考资料Https://www.nngroup.com/articles/which-ux-research-methods/Ann Blandford, Dominic Furniss, and Stephann Makri. 2016. Qualitative HCI Research: Going Behind the Scenes.Caroline J. Oates and Panayiota J. Alevizou. 2021. Conducting Focus Groups for Business and Management Students.欢迎关注作者微信公众号：「 OnepinganDesign」本篇来源：优设网原文地址：https://www.uisdc.com/user-research-4
图标 设计师 图形 小图标是界面的核心组成部分，承载着信息传递的重要作用。作为页面的最小展示单位，图标设计也是最能考验设计师基本功的一项工作。不过设计师熟练掌握的，往往只是单个图标的风格化绘制方法。在这个过程中，设计师更关注图标的美感和细节，而忽略了从宏观的角度考量「图标表达的准确性」、「不同图标之间的关联」、以及如何帮助业务「快速实现客制化功能」。更多图标干货：如何拥有一个画图标的好习惯？我总结了这 8 个方面！对于 UI 设计师来说，图标设计的能力至关重要，也是提升感官体验的重要方向。阅读文章 > 一、金融行业图标设计常见问题问题 1：金融行业功能服务名词抽象，设计师难以精准表达金融行业内，许多功能服务名词抽象，如工资理财、活期产品、定期产品，都没有可直接映射的物理形态，行业内也没有统一标准，设计师只能凭借经验绘制，难以精准表达。问题 2：关键词图形化的结果不一致，增加了客户的认知难度参与图标绘制的设计师分散在各业务线，每个人都依据自己的经验自由发挥，导致对同一关键词呈现的图形化结果不一致，增加了客户的认知难度。问题 3：工作模式割裂，难以满足千人千面的灵活配置及高端客制化需求以往的工作模式，由不同的设计师提供切图给不同的运营经理进行配置，这样多对多的模式导致沟通成本高，还经常出现配置重复、错误等问题。接下来，我们将从平安银行业务的特性出发，以金刚区双色图标为例，还原一个图标从诞生到前端展示的全过程，分享建设图标生态过程中的实践经验：2 个方法和 1 个工具「联想筛选法」「图标元素周期表」和「图标管理平台」。二、联想筛选法平安银行 App 是一款金融领域的 C 端产品，覆盖了账户、理财、贷款、保险和生活等多项综合服务，拥有着 400+丰富的功能服务类型，同时，这些功能服务的名称相较于其他行业都更为抽象。比如大家经常能接触到的电商平台，购物车、服饰、鞋包等，都有非常明确的物理形态，设计师只需要据此进行风格化处理，即可形成一个能精准表达相应含义的图标。但是在金融领域，许多功能对应的则是虚拟服务。如理财或保险，是没有物理形态的，且业内没有形成统一的标准，在用户层面还没有建立起统一的认知。那么如何绘制易理解、易识别的图标，是对设计师的一个考验。这里向大家介绍一种相对普适的方法「联想筛选法」，主要分为三步：第一步 了解服务特点图标代表某一功能服务的入口，起到帮助用户定位识别的作用，所以我们只有充分了解这项服务的实际含义与特点，才能真正绘制好一个图标。以保险为例，设计师首先需要思考保险是什么？它是给消费者提供保障与补偿，帮助消费者抵御风险的系列产品。因此我们在绘制图标时，需要充分体现“保障”和“抵御风险”的作用。第二步 映射联想了解服务特点后，设计师可进行简单的图形发散，即根据这项服务的实际含义和特点，联想相关的图形。比如下雨天撑起的一把伞、起到保护作用的盾牌、保险箱或一把锁，再比如在保险服务过程中用户通常接触到的一些实体物件，如保单。不过有一些功能服务，我们很难联想到合适的图形，这时就可以用文字来表达，如表达「税」的图形。一般情况下，我们通过从物理映射到相关性联想，再到文字表达这样的方法，逐步发散思维，就可以找出一些能表达其含义的图形。第三步 查重筛选拓展出几个图形后，如何筛选出最合适的那个呢？我们可以通过「契合度」「专属性」和「拓展性」这 3 个原则进行筛选，需要注意的是，这三个原则是有先后顺序的。① 契合度主要是分析哪个图形与该功能定义更为贴切。对于保险来说，契合度排序为：盾牌＞保单 ＞雨伞＞锁。② 专属性我们需要从全局的角度看这些图形，是否被其他功能占用。比如在业内，「锁」更多代表的是密码，而「保单」的样式和普通的账单难以区分，故可以排除。③ 拓展性需要考虑该图形在造型上是否容易和其他图形组合。因为功能服务往往不是单独存在的，通常会与一些相关功能共用图形（在第 2 个小节我们会分析拓展性案例）。通过以上 3 个步骤，就可以快速选择出最契合功能服务的图形。如最适合保险的图形是「盾牌」，它既高度契合保险服务本身的含义，同时也具有一定的专属性和拓展性。三、图标元素周期表通过上述联想筛选的方法，可以帮助设计师快速选择出与功能服务契合度较高的图形。不过绘制图标的设计师，是分散在各业务线，其中不乏新入职的同学。大家对方法的理解和掌握程度不一，导致不同的设计师，对同一关键词图形化的结果不一致，具体表现如下：同类型的功能服务，设计师使用完全不同的图形化元素，从而难以建立长期统一的客户认知。例如，同时用皇冠和钻石代表「权益」相关功能。即使图形元素一致，在风格化绘制的过程中，也会出现多种不同的样式。例如常用的人民币符号，在前期上线时就出现了七八种样式。为了解决上述问题，我们尝试沉淀出一套实现标准图形规范的快捷方式「图标元素周期表」：经过分析，现有功能服务名称多为 A+B 的组合结构。还是以保险为例，相关的功能有保险商城、保险服务、保险测评、跨境保险等，这类组合功能我们可以将其拆分为：保险+服务、保险+商城、跨境+保险这样的形式，进行图标设计。这样我们只要组合两个独立元素，就可以得到表意精确的组合图标，组合的形式可以是内外或左右结构：独立元素可以分为主图形和辅图形，经过组件化，最终形成「图标元素周期表」。业务设计师可以根据功能服务的特性，自由组合主辅图形即可。这大大减少了图形化结果不一致和样式不统一的问题。不断重复应用关键图形，可以建立并强化客户对相关功能服务的整体认知。当客户看到盾牌，马上可以联想到保险，就像看到放大镜，就知道是搜索功能一样。四、图标管理平台前两个部分介绍了联想筛选法和图标元素周期表两种方法，可以帮助设计师完成图标绘制。不过要使精心设计的图标，在前端正确展示，还需要开发与运营经理的参与。以平安银行为例，依托智能推荐能力，我们为客户提供千人千面的服务，且针对不同资产等级的客户，定制更符合客群审美的专属主题。因此在 UI 层面，图标需要配置更灵活以及满足换肤需要。我们尝试构建「 图标管理平台 (ICON ZOO) 」，旨在为设计师、开发和运营经理搭建沟通桥梁，将绘制好的图标标准化命名，上传至图标管理平台，平台将自动生成图标的 URL（唯一在线链接）。不论是开发调用，还是运营经理在后台系统配置，都不需要设计师单独提供切图，而是直接调用图标管理平台的 URL。这样大大减少了配置错误率，也方便我们随时对图标进行更新和换肤，同时提高工作效率。图标管理平台不仅能管理全平台的公共图标，业务设计师也可以创建业务图标空间，满足不同角色的协同需要。写在最后今天，我们从业务的角度出发，详细阐述了一个小图标从诞生到前端应用的全过程。看似一个很小的环节，如果在图标体量比较大且参与人数多的时候，沟通不畅通，就容易出现失控的情况。设计师需要感性和理性并存，感性可以为设计注入灵魂，理性可以让我们从业务角度出发，深入探寻问题本质，逐步找到最终的解决方案，帮助团队实现更高阶的目标。欢迎关注作者微信公众号：「 OnepinganDesign」本篇来源：优设网原文地址：https://www.uisdc.com/financial-icon-drawing
材质 贴图 参数 希望本篇文章对使用 Arnold 渲染器和苹果电脑做三维创意的 UI 设计师们有一定帮助。前言随着行业的发展，现在越来越多的岗位要求 UI 设计师需要具备一定的三维设计能力，因此大多数 UI 设计师也在不断更新自己的技法能力，学习三维软件，大家都知道三维软件最好是用 PC 电脑，毕竟 PC 硬件配置是苹果电脑没法比的，但是 UI 设计师公司普遍配置的是苹果电脑（有条件的公司会再配个 PC 电脑），目前在苹果电脑上使用三维设计软件主要是 C4D 和 Blender，渲染器 C4D 可以选择 OC、RS、Arnold，前两个渲染器主要靠 GPU，Arnold 靠 CPU，个人使用后感觉苹果电脑 CPU 要比 GPU 好用一些，所以还是比较推荐大家用 Arnold 渲染，我也是今年才开始接触 Arnold，之前做三维都是用 PC 电脑，OC 进行渲染，目前市面上关于 Arnold 渲染的学习资料相对比较少，因此写这篇文章的目的主要是给目前使用苹果电脑需要做三维设计的的 UI 设计师们一些关于我用 Arnold 渲染器的经验总结，希望对你们有帮助。 文章分为两块内容，渲染设置和渲染技巧，渲染设置主要是讲常用的渲染参数设置，渲染技巧主要是讲在渲染中的知识点和技巧，下面两张图是我前段时间用 Arnold 渲染的图，Arnold 渲染的质量还是可以的。更多3D渲染器技巧：OC渲染慢还有噪点怎么办？简单4步快速解决！最近在项目中用 OC 渲染玻璃或者室内场景渲染时，经常会发现画面有噪点的情况，碰到疑难杂症是我最开心的一件事，又可以学到新东西了。阅读文章 > 一、渲染设置技巧1. 采样参数采样值是 Arnold 渲染中的主要参数，数值的大小会直接影响渲染图的最终效果，采样数越多，抗锯齿质量越好， 渲染时间越长，但是采样值也是有个零界值，超过这个值只会让渲染时间变的更长，但是渲染的效果不会因为时长变的更好，所以大家不要盲目以为调高参数就能让渲染质量更好，也要关注下材质和灯光的问题，关于参数设置建议大家逐渐增加它。① 摄像机 Camera摄像机参数相当于是一个全局参数的倍增器，摄像机参数调高以后所有的参数都会变高，参数数越高，抗锯齿质量越好，渲染时间越长，大家在设置摄像机参数时尽量不要给的太高，摄像机参数太高会导致其他参数等比变高，渲染时间也变的很长，通常来说参数为 4 时可以渲染中等质量，参数为 8 时可以渲染高质量，参数为 16 时可以渲染超高质量。② 漫射 Diffuse漫射参数是控制渲染图中的漫反射采样值，漫反射采样值只会影响直接可见的漫反射表面，不会影响其任何东西， 增加漫反射采样值可以有效降低漫射噪点。③ 镜面 Specular镜面参数是控制反射采样值，同理提高镜面的采样可以有效降低渲染图中反射的噪点。④ 透射 Transmission透射参数是控制材质透明属性的采样值，同理提高透射的采样可以有效降低渲染图中透明材质的噪点。这里和大家说个小技巧，因为透明材质比如玻璃类材质，因为有镜面和透射两个属性，当你无法判断是哪个属性导致的噪点时，可以尝试将透射和镜面切换为零，就可以判断是哪个参数导致的噪点。⑤ 次表面散射 SSS当我们使用 SSS 材质时，提高次表面散射采样值可以降低 SSS 材质一定的噪点，要想有效的降低 SSS 材质噪点还需要增加一点镜面和漫射采样值，这样噪点会更少一些。⑥ 间接 Volume间接指的是体积渲染的参数，当我们渲染一些体积效果比如云、烟雾等时，增加间接采样值可以提升体积对象的透光性。2. 光线深度光线深度时设置光线反弹的次数，反弹次数越高渲染的时间也会相应的变的更长，下面给大家介绍下各参数的效果。① 总数总数时代表的最大反弹次数，一般来说不会去动这个数值，除非你需要反弹次数超过这个值。② 漫射增加漫射值可以提高渲染常见中光的漫反射次数，以房间为例漫反射次数越多，房间中接受到的光越多，现实世界中可能只有一束阳光照进房间，但是因为光线经过多次反弹，房间其他地方的物体也会受到光的影响。③ 镜面增加镜面数值可以提升渲染图中反射的光线反弹次数，如果你的图中反射材质比较多，建议可以适当提高反射的反弹次数，这样画面更真实一些。④ 透射增加透射数值可以提高光在透明材质中的折射次数，如果你的渲染图中有很多透明材质可以适当提高透射参数值。⑤ 体积体积参数一般在渲染体积对象时才会用到，一般默认是 0，当你渲染体积对象云、烟雾等时可以提高体积参数， 提高光线在体积对象中的散射次数，让体积对象更通透。⑥ 透明深度透明度参数默认是 10，一般没去动它，这个参数控制的是多少光线穿过透明物体表面，穿过物体表面的光线过少会变黑。3. ACES 工作流ACES 工作流是色彩编码系统在电影或电视制作的整个生命周期中管理色彩的行业标准。ACES 确保了一致的色彩体验，除了创意优势之外，它拥有极为宽广的色彩空间， 其范围不仅包含了目前己知的全部色彩空间，甚至超过了人类视觉所能感知的所有色彩范围。不仅如此，它也通过定义建立了一个统一且精确的数学空间，为未来的视觉工作做好了充足准备，通俗点来说用 ACES 工作流渲染的图要好看点，而且用 ACES 工作流渲染图亮部不会过曝。① 渲染设置要使用 ACES 工作流首先我们要去渲染设置中设置颜色管理，这里需要用到 ACES 的色彩文件包，我会分享给大家，可以在文末和开头下载，具体参数设置看下图，设置的时候记得选 1.0.3 版本中的 config。ocio 文件。② IPR 渲染窗口设置打开色彩空间列表 View（显示）-Toolbar（工具箱）- Show color space list（显示颜色空间列表）勾选将色彩空间设置为 Output-SRGB③ 设置贴图色彩空间ACES 贴图分为三类，用不同的色彩空间设置第一类：漫射材质（例如：木头材质表面的木头贴图）， 色彩空间设置为 Utility-sRGB-Texture第二类：材质的镜面、反射、凹凸贴图，色彩空间设置为 Utility- Raw第三类：光照贴图（例如：HDR 贴图）色彩空间设置为 Utility-Linear-SRGB4. 色彩校正ACES 工作流渲染的图有个缺点是偏暗，因此我们可以在 Post 中添加一个色彩校正进行调整一下，当然你也可以渲染完后在 PS 中进行调整5. 辉光效果Arnold 发光效果好多小伙伴都不知道是怎么弄的，其实 Arnold 的发光效果是放在 Post 里的，默认是没有开启的，如果你需要发光效果可以去 Post 里打开，具体参数根据渲染效果自行设置。6. Arnold 降噪大家在渲染的时候可以开启 Arnold 降噪可以降低最终渲染图中的噪点，在 Post 里可以找到 Arnold 降噪，关于参数我一般用的是默认的，大家也可以尝试下不同参数效果。7. 体积光体积光需要在渲染设置中的环境-大气里选择 atmosphere_volume，选择后会自动建立一个体积光的材质球，材质球的属性也比较简单。颜色 Density：控制体积光的密度参数越大越实、越小越虚哀减颜色 Attenuation：数值越高光穿过体积传播衰减的越多，数值越小光穿过体积衰减的越少，如果数值为 0 光穿过体积不会衰减8. 着色覆盖着色覆盖是个非常有趣的功能，你可以设定一个材质球， 赋予给着色覆盖，然后渲染画面中的所有模型材质都会变为你赋予的这个材质球材质。二、材质/标签1. 标准材质球标准材质球是 Arnold 渲染中用的最多的，大部分对象材质渲染都是用的标准材质球，标准材质球中包含了基础 Base、镜面 Specular、透射 Transmission、次表面散射 Subsurface、涂层 Coat、 光泽 Sheen、薄膜 Thin Film、自发光 Emission、几何体 Geometry、ID、 高级 Advanced，共十一个功能，最常用的是前面九个，接下来我会给大家介绍下标准材质球常用的一些功能都是干嘛的。① 基础 Base可以理解为材质的漫反射属性，基础属性的颜色决定了材质的颜色（玻璃和 SSS 可单独调整颜色），通常材质漫射贴图都贴在这里，基础里有个金属度属性可以制作金属质感材质。② 镜面 Specular可以理解为材质的反射属性，镜面属性的参数影响材质的反射效果，关于镜面说下几个难理解的参数，如果你想让你的图渲染的更真实，可以在网上找下对应材质的“反射率 IOR”是多少，Arnold 中预设了一些 IOR 参数，各向异性 Anisotropy 和旋转 Rotation（旋转可以做拉丝不锈钢材质）可以改变材质表面反光的样子。③ 透射 Transmission可以理解为材质的透明度属性，透射属性参数影响材质的透明度效果，做玻璃、水等材质时都会用到透射，关于透射我给大家讲下几个不好理解的功能。深度 Depth：深度数可以控制玻璃的厚薄效果，数值越高玻璃越薄。散射 Scatter：较厚的模型调整散色颜色会改变内部散射效果。散射各向异性 Scatter Anisotropy： 该数值为零时光线向四周均匀散射，大于零时散射效果向前偏，小于零时散射向后偏。色散阿贝 Dispersion Abbe：这个数值可以增加透明材质的色散效果，制作钻石、宝石等材料时用的到。透射通道 Transmit Aovs：这个是渲染半透明材质要用到的通道。介质优先级 Dielectric Priority：介质是在制作多个透明材质混在一起时使用的，数值越高的介质会覆盖数值低的介质。④ 次表面散射 Subsurface次表面散射就是我们常说的 SSS 材质，SSS 材质是模拟物体内部的散射效果，关于 SSS 材质我给大家讲几个不好理解的参数。半径 Radius：半径值是控制物体内部的透光性，值越高越通透越低则透过物体的光越少。比例 Scale：控制光线在反射回来之前可能在表面下传播的距离，比例增大会等比增加半径值的效果。类型 Type：类型中有三种类型可以选择扩散 Diffusion：通过单层，它可以捕获表面细节和深度散射。随机游走 randomwalk：与基于扩散理论的经验不同，随机游走实际上是在表面以下以真正的随机游走进行追踪， 并且不假设几何形状是局部平坦的。随机游走 Randomwalk v2：这种方法通过高度透明/光学薄的物体更准确、更深入地散射，从而在物体的精细表面细节和强背光区域周围产生具有更饱和色彩的 SSS各向异性 Anisotropy：将光均匀散射到各个方向，正值使散射效果向前偏向光的方向，而负值使散射向后偏向光。⑤ 涂层 Coat涂层参数和镜面属性很像，从字面我们可以理解涂层属性就是给物体表面涂抹了一层具有反射性的透明涂层，比如像汽车油漆的透明涂层，它的属性和镜面差不多，多了一个法线的功能。这里的法线指我们可以通过法线贴图来控制涂层，比如模型上的雨滴效果就可以用这种方式做。⑥ 光泽 Sheen光泽属性多用于表现纤维、布料、天鹅绒和缎子等表面的光泽效果，参数也比较简单。⑦ 薄膜 Thin Film薄膜属性是给材质表面一层反光涂层，效果就是大家所说的五彩斑斓的黑，这里需要注意的是，薄膜效果会受镜面属性的“反射率 IOR“影响。厚度 Thickness(nm)：厚度效果会影响镜面反射、透射和涂层。反射率 IOR：反射率会影响薄膜表面效果，如果你需要追求更真实的效果可以在网上找对应物体的 IOR 具体数值⑧ 自发光 Emission自发光很好理解，该属性可以给材质赋予发光效果，如果大家需要让一个物体对象做为光源，建议大家使用网格灯光，不要用材质自发光。⑨ 几何体 Geometry该功能主要用于模型的一些改变，接下来给大家说下常用功能。薄壁 Thin Walled：薄壁功能启用后会将你的模型对象模拟成一个薄片，比如你做玻璃材质的时候启用薄壁，你的模型对象会被模拟成一个薄玻璃。修剪透明度 Cutout Opacity：这个功能类似 PS 的蒙版， 可以通过黑白贴图来修剪模型，如果不用贴图单调试透明度数值会让模型产生透明效果。法线 Normal：法线功能是我们做 PBR 贴图最常用的功能，它并不是像字面意思那样只能用法线贴图，后面我会给大家说用法。2. SSS 材质说下关于 SSS 材质一些技巧，Arnold 可以在标准材质球可以中编辑透明和次表面散射，因此我们在做 SSS 材质时可以把透射和次表面散射混合在一起，混合参数根据效果自己把握，可以适当的加入一点自发光让材质更通透一些。3. 法线和凹凸贴图Arnold 的凹凸和法线贴图可能相比 OC 渲染要麻烦一点，文末我会给大家分享高质量免费 PBR 材质资源。凹凸贴图需要在节点编辑器加入 Bump2D 功能，在将黑白贴图连接到 Bump2D-凹凸贴图，最后链接到标准材质的法线上。法线贴图需要在节点编辑器加入 Normal 功能，在将法线贴图链接到 Normal-输入，最后链接到标准材质的法线上。同时使用凹凸和法线贴图，需要将第二步 Normal 功能链接到 Bump2D - 法线 Normal，最后将 Bump2D 链接到标准材质的法线 Normal 上。4. 置换贴图使用Arnold 置换贴图需要在节点编辑器中设置，在标准材质球中打开节点编辑器，加入节点功能“置换 Displacement”把贴图链接到置换上，在链接到 Arnold Displacemont。5. 透明贴图在 Arnold 中渲染透明贴图有两种方式，都是通过编辑材质球来实现，下面给大家介绍下着两种方式：① Alpha 贴图把透明背景的贴图，放入标准材质球的 Alpha 中可以制作透明贴图效果，简单理解为 PS 中的剪切蒙版。② 修剪透明度贴图把黑白贴图连接到修剪透明度，它是通过图片的黑白信息对物体对象进行裁剪，可以简单理解为 PS 中给图层加了一个蒙版。6. 贴图反相为啥要单独把反相这个节点功能拿出来说呢？因为好多朋友用节点的时候都没找到反相，Arnold 汉化后名字叫“补码 Complement”7. Arnold 标签关于 Arnold 标签主要讲几个实用的功能。① 不透明 Opaque：渲染玻璃材质时把这个勾去掉，玻璃会更通透一些。② 细分功能：细分功能可以通过渲染器增加模型的面数，比如：做一些需要高细分的置换贴图时，可以用细分功能去增加面数，而不用去增加模型面数。③ 置换标签：默认是 100CM 的高度，如果在你模型场景中不合适可以调整小些。8. 材质视图预览Arnold 材质默认是不会在摄像机视图显示你贴在哪个模型上的，可以通过节点编辑器中，将材质球链接到阿诺德视口 Arnold Viewport，就可以在摄像机视图中查看哪些模型贴了材质。9. 渐变控制黑白贴图当我们使用一些黑白贴图时需要对贴图细节进行一些调整，比如我们使用一张黑白污垢图，但是不希望污垢出现那么多，那么我们可以将黑白贴图链接到渐变节点进行调整，渐变节点还可以改变贴图的颜色。使用渐变调整黑白贴图时，渐变节点功能的类型一定要选用“Custom”三、灯光/渲染1. 渐变灯光如果想让灯光有更多的细节变化，可以尝试给灯光加一个渐变贴图，可以控制渐变贴图控制灯光照射到物体上的效果，同时可以使照射在物体上的灯光过度更柔和。2. HDR 天空给大家介绍两个 HDR 天空中的三个比较常用的三个功能① Arnold 默认 HDR 是对摄像机可见的，如果我们要对单一对象渲染一张透明背景的图，又不想让 HDR 显示出来可以在 Arnold 天空中把摄像机参数设置为 0，同理如果不希望 HDR 对模型对象产生漫射、反射等效果也可以在这里调整。② Arnold 的 HDR 不像 OC 可以直接在 HDR 参数面板进行调整，在 Arnold 中我们需要到坐标里进行调整 HDR 的位置。③ 如果想让 HDR 天空贴图变为黑白的，可以创建 image 材质球把 HDR 贴图放进去勾选单通道，在把材质球放到 Arnold 天空里3. 目标灯光Arnold 中没有 OC 的目标灯光，灯光中有一个目标功能，把目标模型拖入到目标功能即可。4. 巧用灯光做焦散Arnold 渲染器的焦散效果并没有 GPU 渲染器 RS 和 OC 的效果那么好，但是不代表不能做，可以采用聚光灯-灯光过滤的方式给一个焦散的贴图，文章最后我会给大家分享一套高清焦散贴图。5. 巧用灯光“可见“属性有时候我们需要对渲染对象某一属性进行单独调整，比如需要加强高光亮度，如果我们此时去提高灯光强度会让高光、漫反射、透射等属性都增加，如果只想调整高光可以在灯光属性面板可见中单独调节高光属性，同理想提高其他属性也可以单独调整。6. 着色调试模式这个功能其实挺好用的，你可以通过右键点击调色模式渲染各种类型的图，比如：白模、线框图、法线图、对象图等，对象图可以方便我们在后期修图的时候对单个对象进行调整。7. 降噪处理这里再次给大家提到降噪，如果只是单纯提高采样值并不能完全解决噪点问题，因为我们的灯光、HDR、体积等也是有采样值的，大多数情况灯光采样 3-4 就够了，光源越大阴影越柔和需要的采样就会高一些，所以我们在降低噪点时不要只看渲染设置的采样值参数，有时候可能受其他因素影响。8. 景深给摄像机加入 Arnold 标签，勾选景深，选择“大小”给大小一个合适的数值，可以自己尝试，按住 Control+option 点击 IPR 渲染窗口中的渲染主体对象注意：有些摄像机投射方式是没法使用景深的，比如等角视图，平行视图等。9. 渲染错误处理有时我们可能会遇到贴图丢失导致渲染错误无法渲染，但是因为材质太多不知道是哪个出了问题，可以到渲染设置中找到“错误处理“功能，将出错时中止的勾去掉就可以继续渲染了，出错的纹理和颜色会有颜色在渲染图中标示出来。写在最后随着行业的发展目前很多 U 设计师都在学习三维设计，三维设计软件和渲染器也有非常多的种类各有千秋，目前来看最适合做三维设计的硬件设备依然是 PC 电脑更好，但是做为 UI 设计师我们可能更多的在是苹果电脑上工作（有条件的会单独配个 PC)，因此如何在苹果电脑较差的硬件条件上更好的完成三维设计是一个挑战，以目前个人使用情况来看 Arnold 渲染器在苹果电脑上算是一个不错的选择，感兴趣的朋友可以尝试一下。 本篇文章给大家大致介绍了一下 Arnold 渲染器的基础知识和一些使用技巧，Arnold 渲染器做为一款强大的渲染器还有很多功能值得我们去探索。参考文献和资料素材Arnold for Cinema 4D 用户指南: https://docs.arnoldrenderer.com/display/A5AFCUGACES 色彩文件： 附件下载高质量 PBR 材质： https://polyhaven.com/textures高清焦散贴图：附件下载 文件名 如何下载使用 文件大小 提取码 下载来源 资源包3.7G8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/arnold-skills
网站 动态 链接 前言3d 动态设计近年在国内非常流行，设计师们都想尽办法提升自己的 3d 设计动态能力。3d 能力的提升离不开两步，第一步 3d 技术习得，第二步眼界提升并灵活运用。提升 3d 动态设计能力重点在于多看多练，多看关键是持续找到优秀的作品进行观看和学习，多练是需要把之前看到过的优秀作品下载下来进行拉片练习。由于动态设计资源先天存在难以搜索、预览、定位等难题，容易出现储存成本高使用效率低的情况，本文会以解决这些痛点为目标，主要分享一些经验让大家学会如何找、如何下载、如何管理等，提升大家对 3d 动态设计素材收集与后续应用能力。更多3D素材：PixelSquid！拥有20W+可旋转3D素材的绘画参考网站大家好，这里是和你们聊设计的花生~ 又是一年开工时，在这里祝大家开工大吉工作顺利~今天为大家推荐一个超棒的绘画参考网站 PixelSquid，里面包含 20 多万个 3D 素材，涉及人物、动植物、武器、汽车、建筑、家具、艺术品等各个方面，且素材可以 360任意旋转，使用它可以帮助我阅读文章 > 一、找内容1. 关注平台社区近年越来越多设计师、工作室选择大型社区发布自己的作品，这些社区有不少优点如免用户维护、用户量大、反馈及时甚至还能发布作品获得影响力和工作机会，所以深受大家喜欢。由于市场上能找到 3d 动态设计片子的平台较多，如有 pinterest、behance、站 cool、花瓣等这些比较知名的“全类平台”，但术业有专攻本文着重介绍动态设计，这个细分市场下的社区平台如 vimeo、Patreon 等。2. vimeo 视频社区网站链接：https://vimeo.com/3d 设计师动画素材聚集地，国内外的动态设计师设计作品基本都会在 vimeo 进行发布，甚至还能看到很多飞机稿、未加工过的毛片等。行业前辈一致认为 vimeo 是动态设计找资源最好的地方，但是自己接触 vimeo 后就发现无从入手，除了编辑推荐外很难找到自己想要的片子资源。这里会给大家介绍一下如何开始使用 vimeo 找到自己想要的资源。3. vimeo 使用方法第一步“建立资源渠道”可以先关注以下内容看看大神关注了那些人，如下图点击主页的 followeing，如果觉得不错就添加 follow 即可，这样资源渠道就能慢慢建立起来第二步“静待收获”当大家建立内容渠道后，过一段时间就能收到大量的作品推送。这样下次打开 vimeo 的时候看到的就不再是空空的首页，而是众多优质内容推送。第三步“重复”当资源渠道建立好后还需要时间维护，比如见到优秀的作品多点一下作者的详情页，如果是自己喜欢的作品类型可以关注一下，甚至还可以从作者主页了解作者关注哪些人，把这些操作成为逛 vimeo 时必做的习惯，周而复始资源库就会越来越丰富，作品推送质量也会越来越高。Stashmedia 动态视频网站网站链接：https://www.stashmedia.tv/老牌动态影像网站，Stashmedia 每天都有编辑推荐，除了片子外还有详细的制作说明和设计心得等。网站还提供订阅服务，订阅服务会把每月精选动态设计视频文件打包，能给不想动手收集的同学节约时间。Art of the Title 片头网站网站链接：https://www.artofthetitle.com/老牌片头网站，深度采访当前比较热门动态设计短片设计师，该网站主打商业短片为主，如电影、电视剧片头片尾，网站主要以赞赏付费进行阅读，最新的文章是免费的。Patreon 付费知识社区网站链接：https://www.patreon.com/ （需要魔法）含金量非常高的知识内容订阅网站，patreon 以会员订阅制度为主，里面能找到很多优秀的 motion 短片，但这些短片更多是知识付费准备，除了短片还有短片的详细制作方式，大部分都需要订阅才能观看。Tumblr 轻博客网站链接：https://www.tumblr.com/dashboard（需要魔法）老牌轻博客，由于平台环境轻松发动图交互友好，所以在上面能看到比较多的动态设计内容，tumblr 以博主为单位，内容积累方法跟 vimeo 比较类似。2. 工作室官网工作室官网主要展示完整项目为主，内容相比社区平台会更完整展示更严谨，部分项目能看到设计理念项目的设计精髓，完整的设计方案更有助于我们学习。ManvsMachine网站链接： https://mvsm.com/老牌动态设计工作室，作品品质非常高，主要代表作品是 nike 系列短片作品，mvsm 由于设计方法大胆新颖，一直是大家模仿学习对象。BUCK网站链接： https://buck.co/老牌创意工作室，相比上面提到的 mvsm，buck 作品重点在叙事题材的动态设计短片为主。Tendril网站链接： https://tendril.ca/Tendril 新锐动态设计工作室，主要服务互联网公司为主，近年作品刷屏率比较高，品质优秀，近年逐步代替 mvsm 成为很多同学的学习对象。4. 待发掘Odd fellow、Ordinary folk、Loop、Animade、Cub Studio 等等都是非常优秀的动态设计工作室，业界还有非常多优秀工作室待大家慢慢发掘。5. 艺术家/设计师上面提到的维度都相对比较全面，我们来看看比较轻量的维度“人”，这个维度相对比较轻量，有时候他们发的是一个视觉效果图、一个小动态或者一个小短片，内容少但是充满想法和灵感。同时由于个人作品集有时间的积累，能看到该设计师风格演变过程。找人方法维度Simon Holmedal （mvsm 技术总监）网站链接：http://www.simonholmedal.com/（需要魔法）Remi Dessinges （mvsm 总监）网站链接：https://www.remidessinges.com/Chris Bahry （Tendril 联合创始人）网站链接：https://www.instagram.com/tendrilchris/（需要魔法）Vitaly Grossmann （Tendril 创意总监）网站链接：https://www.vitalygrossmann.com/Adam Webber （前 BUCK cg lead）网站链接：https://www.adam-webber.com/Wes Cockx （数字艺术家）网站链接：https://cream3d.com/（需要魔法）二、下载内容大部分平台都不提供短片下载，为了解决这些问题大家可以用下面的小软件进行下载视频资源。1. chrome 浏览器插件-vimeo 视频下载器（免费）网站链接：https://chrome.google.com/webstore2. idm 流媒体下载器网站链接：https://www.idmchina.net/能自由下载所有流媒体的软件 windows 平台3. idm 代替品 ndm（mac 平台可以用）网站链接：https://www.neatdownloadmanager.com/index.php/en/能自由下载所有流媒体的软件 os 和 windows 平台三、高效利用内容日常使用中视频不如图片直观，为了能高效预览和定位，这里推荐 Video Thumbnails Maker（ https://www.videohelp.com/software/Video-Thumbnails-Maker ），Video Thumbnails Maker 是一款能帮助你把视频变成视频+截图自动化输出的软件，再配合 eagle 类软件进行使用，加大视频素材的整理和可用性。结语最后通过上文三步，解决如何找、如何下载、如何整理等问题，让长期积累成为习惯，大家一定能打造一个属于自己的高效的动态设计视频库。欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/manage-3d-resource
作品 官方 版权 大家好，这里是和你们聊设计的花生~现在插画师对自己作品的版权越来越重视，纷纷通过时间线存证、版权登记等方式来保护自己的原创权益，官方也通过线上版权登记、免费办理等措施为我们提供方便。今天就为大家推荐一份我查阅超多资料后最新整理清单，里面介绍了全国 22 个省的官方在线版权登记渠道，大部分都是免费的，可以帮助大家足不出户就完成版权登记。省份是按 A-Z 排序的，内容比较长，大可以在网页内按 Ctrl +F 输入关键词实现快速查找。阅读前有以下三点需要注意：具体的注册流程官方都有指南，不行就大胆的打官方电话咨询，网上也有很多网友分享的成功经验。如果遇到要求缴费情况，一定要记得甄别是否官方渠道，避免上当受骗。随时间推移本文内容可能会部分失效，如果你觉得本文内容有需要补充或修改的地方欢迎留言，我会持续更新。版权相关干货：设计师最关注的12个版权问题，我们邀请了腾讯法务为你解答！“签设计合同时需要注意哪些问题？阅读文章 > 1. 安徽登记入口：安徽版权在线数字服务平台网站链接：https://bqzx.ahcaee.com/#/copyrightService在线免费登记，官方办结期限是 22 个工作日。进入页面后直接下拉到作品登记流程，点击“立即申请”，注册个人信息进行实名认证，然后按步骤上传信息，等待审核，通过后就完成登记，可下载证书。2. 北京登记入口：北京市政务服务网网站链接：http://banshi.beijing.gov.cn/在线免费登记，官方办结期限是 22 个工作日。进入后在搜索框内输入“作品”，在结果页进入“作品自愿登记”，选择“网上办理。然后注册个人信息，进行实名认证并等待审核。通过后选择作品自愿登记下的“新建登记”，按步骤提示上传作品信息，提交后等待审核，通过后即完成登记，可下载证书。3. 重庆重庆市版权保护中心网站链接：http://www.cqca.com.cn/index.shtml在线免费登记，官方办结期限是 30 天。进入网站后先注册登录，然后点击首页的“作品登记”，按官方提示填写作品著作权初始申请登记表及其他信息，上传作品图片，提交后等待审核，通过后即完成登记，可下载证书。4. 福建福建省网上办事大厅网站链接：https://zwfw.fujian.gov.cn/在线免费登记，官方办结期限是 15 个工作日。进入页面后注册个人信息并登录，首页搜索“作品自愿登记”，在结果页选择不同地区，然后按照步骤填写信息、上传作品图片。提交后等待审核，通过后即完成登记，可下载证书。5. 广东广东版权网网站链接： http://www.gd-copyright.cn/在线登记，美术作品登记费用 150 元/件，从审核到证书下发官方办结期限为 32 个工作日。进入网站后，点击“广东省版权登记系统”注册个人信息并登录，然后点击页面左侧的“作品著作权登记申请”，根据提示填写并提交，然后等待预受理（5 个工作日左右），通过后缴纳登记费，再上传作品资料和图片，然后等待证书下发。据网友分享，广东每年年中时可以申请“作品登记资助补贴”，把登记的费用收回来。6. 贵州贵州省版权登记平台（有同名微信小程序）网站链接： https://www.gzbqdj.com/在线登记，美术作品标准收费 50 元/次，官方办结期限是 15 个工作日。官方指南里称贵州自 2022 年起针对省内的民族民间文化类美术、图形作品实施免费登记政策。进入网页后先注册登录，进行实名认证，然后点击首页的“版权登记-立即登记”，然后按官方提示填写信息、上传作品图片。提交后等待审核，通过后即完成登记，可下载证书。据网友分享贵州省版权登记是面向全国的，如果你本省的版权登记费用较贵，可以选择在贵州省登记。7. 广西广西版权网上登记平台网站链接：http://gxbq.gxbgsx.com/在线免费登记，官方办结期限是 30 个工作日。进入页面后点击“进入版权登记”，注册个人信息并登录，然后按官方提示操作，填写资料并上传作品图片。需要提交的文件官网都有模板，提交后会经历初审、复审和终审三个阶段，审核成功后发放登记证书。过程中记得多看一下审核进度。8. 甘肃登记入口：甘肃版权综合服务（公众号）/甘肃版权服务平台网站链接： http://www.gsbqfw.com在线免费登记，官方办结期限是 30 个工作日。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，填写著作权登记申请，上传作品图片及相关信息并提交，然后等待中心初审及后续的证书下发。9. 湖北湖北政务服务网网站链接： http://zwfw.hubei.gov.cn/在线免费登记，官方办结期限是 15 个工作日。进入网站后先注册个人信进行实名认证并等待 审核（2 天左右），通过后再登录网站，首页搜索“作品自愿登记”并进入，在左侧选择“申请登记”，按官方提示下载资料填写，再上传资料和作品信息。初审和终审通过后就可以拿到证书了。10. 河北河北省版权服务平台网站链接： https://www.hebeibanquan.com.cn/在线免费登记，官方办结期限 30 个工作日。进入页面后先注册个人信息并进行实名认证，然后在“服务事项”中选择“版权登记”，按官方提示依次填写信息并上传作品资料，提交后等初审和终审完成后即可完成登记，可下载证书。11. 海南海南政务服务网网站链接：https://wssp.hainan.gov.cn/hnwt/home （Chrome 或 edge 打开）在线免费办理，官方办结期限 20 个工作日。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，首页搜索“作品自愿登记”，点击在线办理，然后按照步骤填写信息、上传作品图片。提交后等待审核，通过后即完成登记，可下载证书。据网友分享，海南的线下版权登记办理速很快，上交文件如果齐全的话当天完成。12. 黑龙江黑龙江政务服务网网站链接：https://www.zwfw.hlj.gov.cn/在线免费办理，官方办结期限 30 个工作日。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，首页搜索“作品自愿登记”，点击在线办理，然后按照步骤填写信息、上传作品图片。提交后等待初审和终审通过后就完成登记了，可下载证书。13. 江西江西版权保护与服务网网站链接： http://jxbqbh.com/在线免费办理，官方办结期限 30 个工作日。进入页面后往下拉，先注册个人信息进行实名认证，认证完成后登录账号进入“版权登记”，点击左侧的“著作权申请登记”，然后按照步骤填写信息、上传作品图片。提交后等待受理和审核，通过后完成登记了，可下载证书。网站有非常详细的教学视频，可以观看后再操作。14. 江苏江苏省作品著作权登记系统网站链接： https://jscopyright.cn/jsuser/user/login在线免费办理，官方办结期限 30 个工作日。先注册个人信息进行实名认证，认证完成后登录账号进入“版权登记”，点击左侧的“著作权申请登记”，然后按照步骤填写信息、上传作品图片。提交后等待受理和审核，通过后完成登记了，可下载证书。点击"更多服务"可以查看登记指南。15. 宁夏宁夏政务服务网网站链接： https://zwfw.nx.gov.cn/在线免费办理，官方办结期限 30 个工作日。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，首页搜索“作品自愿登记”，跳转后下拉，在“办事导航”中选择“作品自愿登记个人”。进入后点击“我要申请”，然后按照步骤填写信息、上传作品图片。提交后等待初审和终审通过后就完成登记了，可下载证书。16. 山东山东版权保护与服务平台网站链接： https://www.sdszpdj.com/在线免费办理，官方办结期限 30 个工作日。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，进入“作品登记”然后按照步骤填写信息、上传作品图片，提交后等待审核通过后就完成登记了，可下载证书。官方的“作品登记指南”写的非常详细，可以参照操作。17. 四川四川版权综合服务平台网站链接：https://www.sc-copyright.org/在线免费办理，官方办结期限未知。进入页面后先注册个人信息进行实名认证，认证完成后登录账号。建议先看一下“登记指南”，然后进入“作品登记”然后按照步骤填写信息、上传作品图片，提交后等待审核，通过后即完成登记，可下载证书。18. 陕西陕西宣传网网站链接： https://www.sxxc.gov.cn/ （Chrome 或 edge 打开）在线免费办理，官方办结期限 15 个工作日。进入页面后点击顶部的“网上办事”，选择“版权业务”里的作品登记申请。先注册个人信息进行实名认证，认证完成后登录账号。参照“申办指南”，按照步骤填写信息、上传作品图片，提交后等待审核，通过后即完成登记，可下载证书。19. 上海上海一网通办网站链接： https://shbqdj.cn/#/index在线免费办理，官方办结期限未知。进入页面后先注册个人信息进行实名认证，认证完成后登录账号，完善用户信息。然后按照提示填写作品登记申请，等待审核，通过后即登记完成，可下载证书。“帮助”里有流程指引和各种文件下载。20. 天津天津市作品著作权登记平台网站链接：https://www.tj-copyright.com/在线免费办理，官方办结期限 30 个工作日。进入页面后先注册个人信息并登录，然后按照提示填写作品登记表，等待受理和审核，通过后即登记完成，可下载证书。“用户指南”里有流程指引、填表说明和各种文件下载。21. 云南云南版权网网站链接： https://www.ynbq.gov.cn/在线免费办理，官方办结期限 30 个工作日。进入页面后先注册个人信息并进行实名认证，通过后登录账号，按照官方提示填写资料、上传作品，提交后等待审核，通过后即完成登记，可下载证书。22. 浙江浙江省版权保护与服务网网站链接：http://home.zjbanquan.org/或下载“浙里办”APP，搜索“作品自愿登记”进行办理在线办理，基础收费 150 元/件，官方办结期限 30 个工作日。 进入页面后先注册个人信息并进行实名认证，通过后登录账号进入“版权登记”，按照官方提示填写资料、上传作品并缴费，提交后等待审核，通过后即完成登记，可下载证书。“版权服务”里与详细的流程指引。23. 中国版权保护中心网址直达： https://www.ccopyright.com.cn/ （Chrome 或 edge 打开）可以在线办理，需要邮寄材料，美术作品登记 300 元/件，系列作品登记第 2 件起每件 100 元，官方办结期限 30 个工作日。进入网站后先注册个人信息，进行实名认证并等待审核。通过后点击首页的“作品登记”，选择“作品著作权登记申请”，按官方提示填写申请表、上传作品信息，提交后等待审核，通过后即完成登记，可下载证书。在站内的“登记指南-作品指南”可查看办理流程和缴费标准。上面就是全部 22 个省和中国版权保护中心的在线版权登记渠道。吉林、青海、河南、湖南、辽宁、内蒙古、山西、西藏、新疆等省有的是没找到，有的是要到线下办理才行，所以没有收录。这些省的小伙伴可以尝试去中国版权保护中心登记，或者看看能不能用贵州省的版权登记服务。第一次自己办理版权登记可能会比较费时间，但是熟练了之后就会很轻松，也可以省很多钱，设计师和插画师们赶快收藏起来吧！最后还要再次提醒大家注意下面的事项：具体的注册流程官方都有指南，不行就大胆的打官方电话咨询，网上也有很多网友分享的成功经验。如果遇到需要缴费的情况，一定要记得甄别是否官方渠道，避免上当受骗。随时间推移本文内容可能会部分失效，如果内容有需要补充或修改的地方欢迎在评论区留言，我会持续更新。推荐阅读：最新微信异形红包封面怎么做？资深插画师5步教你搞定！大家好，我是插画师小光Sir~又是一年收红包的好时节，今年微信红包新增了异形红包封面样式，让封面设计有了更广的发挥空间。阅读文章 > 配色不用愁！6个设计师必看的色彩灵感网站大家好，这里适合你们聊设计的花生~配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/22-copyright-registration-channel
在路上
表哥
张大湿
飞翔的企鹅
落霞与孤鹜
