偏差 偏见 认知 编者按：这篇文章来自资深产品设计师 Steffan Morris Hernandez，他将用户调研和用户体验设计中常出现的 10种认知偏差梳理出来，文章中他还设计了 10 张示意图，方便读者理解：了解认知偏差，不仅对于用户体验研究和设计很重要，对于日常生活同样非常有用。很大程度上，认知偏见已经渗透到我们日常的判断和思维当中，而这种主观认知上的错位会「扭曲现实」。在我参与 UX 训练营期间，我开始深入了解不同类型的认知偏见，阅读过 Erika Hall 的《Just Enough Research》和大量的 NNGroup 的论文之后，我又梳理了一些在 UX 研究和设计当中，经常会碰到的认知偏差，并且结合一些视觉设计说明，方便大家理解。这7种广泛存在的认知偏差，影响了我们太多的决策现如今心理学和行为学已经是 UX 和产品设计领域当中诸多理论的来源和实践的依据，它们是 UI/UX设计师和产品设计师的必修课。阅读文章 > 如何利用「认知偏差」达成设计目标？来看大厂的实战案例！前言在近两年的电商相关设计实践中，积累和运用了一些关于改变用户认知和引导用户行为的心理学手段，例如心理账户、损失厌恶、社会认同等等。阅读文章 > 1、抽样偏差当没有选择正确的目标人群的时候，就会出现抽样偏差。举个例子，你正在设计一个 APP，帮助事物不耐受的用户记录膳食情况。这个时候，通常会选择3个需求比较旺盛的用户群体，成年男性（20-30岁）、成年女性（20-30岁）以及青少年男性和女性（15-19岁），将他们作为你的食物不耐受的目标样本。但是，如果你的采样对象仅仅只有成年的男性和女性，那么会自然产生抽样偏差，所计算出来的结果也不具有代表性。2、赞助商偏见赞助商偏见指的是，调研或者研究会偏向赞助商和组织方的目标和利益，研究结果也会更偏向赞助商想要的结果。赞助商是否给调研者和研究者提供交通工具或者和车马费，是否给他们提供经济奖励，是否提供额外的食物、饮料折扣，这些都会产生赞助商偏差。尽管调研者和研究者可能会试图尽量客观，但是这些赞助和奖励可能会让他们的评估结果偏向赞助方。Erika Hall 在 《Just Enough Research》当中曾经指出，可以将组织目标尽量替换成不带偏向的一般描述来降低影响3、错误共识偏见错误共识偏见一般指的是，一个人假设其他人跟他拥有相同的理念、想法，在特定的情况下会做出相似的决策和行为。比如初创公司正在设计一款 APP，但是并没有调研过终端用户的真实需求，仅仅是根据自身对于需求的臆测来推进，那么最终的结果可能是灾难性的，因为实际用户对于产品的需求可能和初创公司的假设截然不同，关于这种偏见的影响和应对，可以参考 NNGroup 的这篇文章：https ://www.nngroup.com/videos/false-consensus-effect/通过调研不同的终端用户，提升调研结果的有效性，可以降低这方面的偏见。通过多种方法、多种来源来降低信息源和观点的单一性，借助多来源多方法来提升内容和分析的可信度。4、面试官偏见面试官偏见是一种比较特殊，但是很容易出现的认知偏见，是我在参加训练营做访谈的时候发现的情况。作为面试官，始终保持中立的态度，是一项需要耐心和持续练习的技能。避免出现特定的倾向，避免出现引导性语句，尽量让受访者自己来探索问题，这一点非常关键。在采访过程中，面试官需要在面对受访者的时候表情始终维持中性，因为在特定的时候点头、摇头或者微笑，都可能会微妙地影响受访者。5、知识诅咒知识诅咒偏见，指的是假定一个人假定其他人对于某个领域的知识和他的理解水平相同。在UX调研和访谈的时候，降低这种偏见是极为重要的，因为困难的技术语言对于很多普通用户而言只会带来困惑，并且会直接影响到实际的调研。在访谈期间，以类似新手的方式和普通用户进行交流，可能是更加有益的，这可能会让用户更好地展开表达，因为调研者自身具备的专业知识和语汇会给用户带来障碍。6、确认偏差确认偏差可能是最常见的一种认知偏差，它指的是人会选择性的回忆、搜集有利的细节和证据，忽略不利的或者矛盾的资讯，来支持自己已有的想法或者假定的趋势。你在社交媒体和各种聊天室里面，最容易看到这一点，相同相似的用户群体里面更容易进行类似的表达，但是相应的，不同群体之间的想法两极分化也更加严重。如果有确认偏差的调研者有着明确的偏向和目标，那么在调研过程中，他如果发现和自己预期相反的证据，他可能会选择性忽略或者弱化它们的影响，这种情况后续反馈到产品和设计当中的时候，会导致最终产品或者服务无法将用户的需求和利益最大化。7、设计偏差在 UX 调研当中，设计偏差也是相当重要的一个存在。通常，设计调研方案的时候，如何构建会影响到后续的分析，并反馈到产品里面，如果有重要的影响因素一开始被忽略了，那么可能在后续的产品中逐步被放大，影响不断加深，而这种所导致的结果，就算是设计偏差。8、霍桑效应霍桑效应本身非常有趣，是一种心理学上的实验者效应，是指当被观察者知道自己成为被观察对象之后，会有改变行为倾向的反应。你在学校的时候，被老师注意到之前和之后，你的行为是否会有所不同？这种霍桑效应在 UX 设计和用户调研的时候，同样是存在的。被你观察的对象会注意到你的存在，他们的行为会更加「注意」，而在做访谈的时候，他们给予你的回应，也同样如此。所以为了降低这方面的影响，调研者和观察者要尽量融入环境，并且尽量鼓励参与者表现得好像周围没有人一样。9、社会期望偏差人们本能的会倾向于融入环境，融入集体，避免被拒绝和被讨厌。在调研和访谈期间，受访者会倾向于撒谎，并不会说出他们真实的想法，会尽量说调研者想要听的话，以避免显得不合时宜或者尴尬。为了解决这个问题，研究人员应该加强研究的保密性，努力促使参与者尽量诚实的回答问题，这也是为什么观察行为研究，会比访谈更有助于减少社会期望偏差，而参与者也可能会更加自然地表现。10、近因偏差近因偏差指的是人类倾向于对最近的经历给予更高的权重和价值。以考试为例，如果你在最近一次的考试中成绩不佳，但是此前的7次考试成就都颇为不错，那么你可能对于最近这次糟糕的考试记忆犹新，对于即将到来的考试感到信心不足。在 UX 调研当中，如果调研人员一直关注最新的发现，而不是宏观地审视所有的发现，那么可能就会出现近因偏差。结语如果你对于认知偏差类的知识感兴趣，那么你还可以查看下面的文章：https://xd.adobe.com/ideas/process/user-research/how-to-overcome-cognitive-bias-in-ux-research/https://www.nngroup.com/topic/psychology-and-ux/本篇来源：优设网原文地址：https://www.uisdc.com/10-ux-research-cognitive-bias
语音 互动 情感 通过构建伙伴认知、满足情感互动、增强沉浸体验等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索感知，促进搜索行为转化。数字人设计实战：Blender 实战！3D卡通虚拟数字人角色设计完整流程（中）着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。阅读文章 > 一、项目背景语音搜索场景在功能不断迭代的同时，也在探索更年轻化的玩法、传递更多元的体验感受。在产品初期，我们尝试在语音搜索场景下增加 AI 伙伴的形象，虽然线上版本已经实现，但从产品形态以及用户反馈上看，还没有达到可情感互动的效果。所以在本次迭代上，我们着重从情感联结、闲聊互动的维度，对语音搜索进行创新性尝试。二、设计挑战与目标围绕项目背景，从现在语音搜索的用户行为与框架来看，有几个比较明确的问题：数字人引入后，发现用户对人物的点击行为和聊天诉求均有增加，但由于功能受限，数字人没有办法给到及时回应。用户情感抒发得不到反馈；用户一搜即走，不会停留在语音搜索场景探索其他可玩功能。因为前期在语音搜索的优化中，已经尝试在面板中引入 AI 形象，上线后用户反响强烈，用户的行为中聊天、互动的诉求也明显增加。由此可见，满足用户对 AI 伙伴的情感化诉求是十分有必要的，同时语音搜索引入 AI 伙伴是体现同行业差异化的有力创新点，从行业报告《2021 年中国智能语音市场分析报告》中，也阐述了打造沉浸感语音搜索体验与引入 AI 是目前智能语音市场的发展趋势。综合以上原因，设计团队在与产品讨论过后，达成本次升级的核心目标：构建伙伴认知：强化“AI 伙伴”认知，激发语音搜索行为。满足情感互动：完善语音搜索场景情感化互动体验，满足用户期待。增强沉浸体验：打造可搜索、可互动、可操控、可定制等沉浸式语音搜索场景。三、设计举措1. 构建认知 - 语音搜索基础框架升级在旧页面中，语音面板限制了人物与按钮的展现，人物既要承载功能反馈又需要作为物理操作按键进行点击操作，与用户认知相悖且也不利于功能扩展。因此在新版本设计中，需要明确“人”在语音搜索里的属性，以及 AI 伙伴与语音搜索的关系。我们将语音搜索页面框架分为主要功能与辅助功能区。从旧语音面板中剥离出人物，并保留收音球在面板中做物理交互功能（发起收音、停止收音操作），利用 AI 伙伴的人物属性，打造智能拟人的交互反馈，满足用户情感诉求。以“人”为中心，最大化展示 AI 形象，增强情绪传递感的同时保证框架可拓展性。同时，将原堆积在面板中的功能与信息按优先级归位，确保页面信息清晰易读、功能操作热区无重叠、信息反馈区无干扰。新框架上线后，AI 伙伴互动与语音搜索的认知关系更加清晰，语音搜索跳框量明显增加，AI 伙伴带动面板整体导流增加，面板退出率下降。2. 引入情感 - 全场景情感化体验提升除了通过框架层面进行认知优化之外，为营造更贴合“人”的互动体验与情感建立，我们又根据语音场景对每个状态进行了情感体验升级。改版上线后，用户闲聊诉求和互动点击行为均有所提升，从而验证情感化的体验提升，满足了用户互动诉求。① 情感化引导提示：视觉上人物破框展示配合 AI 招手/比心的动作展示，不再是图片，而是可以对话的实体，同时使用年轻化的引导语气拉近与用户间的距离，增加数字人曝光，建立新用户心理预期，激发兴趣点提转化。② 互动提示规则升级：围绕“人”的真实情感，通过弹出气泡的方式模拟 AI 伙伴状态，比如听歌、读书、游戏。以此引发用户点击或进行互动行为尝试。并且配合 AI 伙伴升级引导规则，使引导能够根据不同场景进行适配，保证其既可以承接语音常规引导功能，又可以承接负一楼聊天互动，点击气泡可跳转对应负一楼场景、联动数字人语境内容，避免造成场景情感化割裂。③ 增加“AI 伙伴”情感反馈：增加人物动作、丰富情感化动态反馈，想要模拟更真实的“人”的状态，就需要满足更多拟人反馈。将语音搜索常见场景划分为聆听、识别解析、异常状态、指令响应、引导等 5 种状态。对应不同的状态，规划相应的数字人反馈动作或组合使用方式，可复用拓展其他相关场景，为设计与开发提效。3. 感知升级 - 营造沉浸视觉氛围确定了产品主要改版方向后，通过对目标的提炼，提取设计关键点「年轻化」与「情感化」，配合 AI 伙伴形象，需要呈现出轻松活力的氛围感，设计中运用了大面积的毛玻璃质感，使场景更加轻盈、沉浸。通过对色彩的运用来演绎年轻的视觉效果，诠释语音搜索年轻化的设计突破。① 定义视觉风格：围绕改版目标，定义设计关键词，由关键词延伸设计风格要点。② 形色字构质动：从「形色字质构」5 个方面提炼设计特征。基于视觉方向及特征提炼，在质感、形状、颜色三个设计中改动最大的方向详细描述。质感：设计趋势不断变化，半透明磨砂质感是近期流行的视觉风格，透过表层可看到背景模糊形态，有强化品质感、突出层级以及营销氛围感的特点，同时匹配视觉方向「轻盈」的特征。形状：在形状的设计上，整体界面元素保持大量带有弧度的形状运用，提高面板、按钮、图标、弹窗等元素的曲线比例，让界面始终保持年轻态，给人圆润、亲和的感受。颜色：颜色的运用为本次改版的重中之重，是打造年轻化氛围感知的基石。考虑到语音搜索场景日后的拓展，色彩上希望可以营造给用户一种轻松柔和的视觉氛围，并且元素的色彩需要与 AI 伙伴服饰相呼应，从而使 AI 伙伴形象更加灵动、场景搭配更加和谐生动。基础色彩范围制定：以度晓晓为示例，遍历目前线上所有度晓晓服饰装扮，对色彩进行归类处理，从中提取主题色系，从搜索色库中对应选出主题色环。如何在数字人装扮中提取主体色：我们需要把色彩量化，建立特定场景取色规则，根据规则层层筛选，我们可以从中获取 N 种主体侯选色。校正主体色，与搜索智库色彩形成映射关系：通过对数字人装扮的色彩分类，我们以 H 值为标准，通过调整 S 值与 B 值，划分了 12 个色相，设定对应色系的 H 值区间范围，如智能取色色值在该色相区间范围内，且吸取到的候选色个数最多，就在对应的色库卡中选取主体色。校正原则：色相必须保持是同类色、保持感官明度同频、保证视障人群的识别度建立辅助色搭配规则：为了保持背景层的色彩氛围营造，保证其具有清晰的识别度，我们以主体色为起点，选择了颜色相对较多的邻近色，在色温上保持整体色调的一致性，其次利用对比色和互补色，选择更加丰富多元的色相，制造更强烈的色彩对比，以保证满足各种使用场景下对色彩的需求。组件化思维拆解页面元素：在梳理了智能取色机制后，我们也在思考，语音面板涉及到的元素过多，往往会面临不同场景不同适配的情况出现，那么在做到视觉减负的同时，如何能灵活的替换对应元素呢？我们以组件化思维去拆分设计，进行立体化的分层，将引导层（热词推荐引导关注）、信息展示层（承接语音各类状态与信息）、形象层（强化 AI 伙伴智能感知）、背景层（烘托视觉氛围感）罗列出来，各场景可根据需要进行颜色延展，保证视觉样式达成横向统一，呈现出更加丰富的视觉内容，避免审美疲劳。总结本次语音搜索的改版升级，我们通过“构建伙伴认知、满足情感互动、增强沉浸体验”等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索的感知，从而促进搜索行为转化。构建认知过程中强化 AI 伙伴形象，增强语音搜索功能拓展性；同时结合“情感化”等全场景引导手段，营造更贴合“人”的互动体验与情感建立，对每个状态进行了情感体验升级；最后重新定制视觉风格，围绕「年轻化」关键点对整体氛围进行强化，让语音搜索场景更加年轻、有氛围感。本次改版上线后，搜索行为、互动行为均有所提升，用户体验也得到了显著提升。四、写在最后我们正处于数字化快速变革的时代，传统工具的基础功能已不再满足用户的诉求，人们的感官也从现实空间延伸到虚拟空间，AI 伙伴会逐渐融入人们的生活，未来语音搜索将不再是一个信息输入-结果输出的传统搜索工具，引入 AI 伙伴，可以让搜索更加智能，拥有人类一样的思维、表达、情感和学习能力，满足人们更高层次的情感诉求的同时，也可以让搜索更加简单有趣。未来我们持续对语音搜索进行升级，将 AI 伙伴与搜索链接的更加紧密，提升用户体验，创造出更多有趣的、创新的、别出心裁的年轻化设计。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/baidu-digital-human-role
元素 设计师 流程 写在前面作为设计师，你一定遇到过这样的情况，自己做的设计稿，被开发出来后却完全换了一个模样。不仅视觉上有问题，交互上也有错误。而要想避免这样的情况，我们就一定要重视还原度走查这个阶段。更多设计还原干货：如何提升页面还原度？我总结了这4个方法！「页面还原度」即开发工程师对设计稿的还原程度，页面还原度的高低，直接决定从产品需求到设计实现的程度是否被准确有效的表达。阅读文章 > 它是我们产品上线前的必要保障。虽然测试同学会帮助我们验证一些流程上的问题，但更多的还原度细节问题，比如交互和字号间距等，则更多依靠我们设计师的来检查。而在还原度走查的过程中，个人认为主要分为以下几个部分：一、还原度何时开始经过对比验证，发现还原度在测试进行第一轮测试后进行，效率和时间能够最大化。原因如下：第一轮没结束前，很多功能性 bug 会存在，如果介入过早，很难跑完全部流程，加大还原度介入难度。一些明显的交互和视觉问题，测试团队在第一轮是能够发现的，也能减少一部分工作量；如果等 bug 解决得差不多，可能都二轮后了，这时候才开始走查的话，那么留给设计师的时间就会非常少，因为结测的时间已经固定，这可能导致开发可能没有足够的时间修正问题。二、还原度检查内容当我们拿到开发提测的版本后，应该针对于哪些内容进行检测呢。本人认为可以整体检查可以分为以下 3 个部分：1. 整体流程当我们拿到产品后，第一时间可以看下我们的整体的流程是否有遗漏，整体流程是否能够跑通。首先需要确保我们的产品没有大的流程问题后，这个时候就可以开始细节的部分。避免某些大的流程被忽略，这往往需要更多的开发量，越早提出来开发就越早介入修改。虽然这个过程基本都会被测试团队在第一轮的时候查验出来，但为了避免有遗漏，我们最好还是先把全流程跑一遍以避免发生问题。2. 交互内容当流程跑完，这个时候我们就可以进入到交互细节的检查。一般来说我们在检查时主要注意以下几个方面：① 结合交互说明进行逐条验证：一般我们的交互说明已经非常详尽，包含各类异常状态和细节交互。因此我的建议是在验证的时候可以结合我们之前的交互说明进行对照验证，避免某些部分被遗漏或者忽略。出现问题有可能是我们的交互阐述的不够清晰或者说研发没有了解设计的逻辑，这些情况都是有可能发生的，因此我们在还原度验证时更需要细心验证和沟通。② 交互说明未提及的异常状态：这其实是很多设计师经常遇到的问题。我们在写交互说明的时候不可避免会忽略某些细节点。这个时候如果出现交互说明漏掉的异常状态，就需要和开发团队进行沟通。如果是重要且影响体验的问题，可能就需要拉着开发团队进行沟通，评估下时间进行修改；如果是不重要且不影响的体验的问题，就可以等下个迭代或者后续再进行对应修改；同时对问题做好记录，避免下次再出现类似问题。这同时也反向要求我们在交互说明中尽可能考虑得更加全面，才能避免多次返工。关于这块有个小建议，可以将平时遗漏的交互记录下来，形成关于自己薄弱交互环节的自查表。通过建立专属的交互自查表来强化自己对于各类状态的认知，从而将说明写得更加详尽和完善。3. 视觉内容视觉的还原度检查可以说是占据了整体检查的大部分内容。毕竟功能或者交互还有测试团队帮忙验证，但视觉细节只能靠设计师本人来进行走查了。在这里我将其分为以下几块内容：① 「像素眼」观察法由于习惯问题，设计师对于字体的大小，元素的对齐有一种天生的敏感，因此对于某些比较明显的还原度问题，设计师是能够通过直接观察发现的，比如某些元素没有左对齐。但这种只适合很多明显偏差的元素，在大部分时候，设计师还是需要借助辅助工具来协助进行还原度走查。② 检查元素（F12）协助走查在很多时候，我们发现某些元素存在问题，但不确定的时候，我们就需要借助检查元素辅助还原度走查。检查元素如何操作呢，可以通过右键-检查或者直接按 F12 来调出，通过鼠标选择元素，即可查看该元素的所有属性，包括字号、颜色、宽度等等都可以直观的看到。利用这种方法我们可以检查得非常细致，比如某些细微的间距是否准确，都可以检查出来。那么在这里我们可以简单介绍下前端的盒子模型，也就是你在检查元素中可以看到类似盒子的元素。盒子模型是 CSS 中的概念。所有的 HTML 元素都可以看作一个盒子，是用来设计和布局时使用。它包括我们常见的边距、边框、填充和实际内容。通过了解盒模型有助于我们理解前端是如何进行页面布局的，同时也帮助我们在走查时更直观地看到其中的间距和宽度等。用一个实战案例，帮你完全掌握 HTML 和 CSS 的实际应用写了那么多 HTML CSS 的学习，终于，要在这篇迎来具体的案例应用了。阅读文章 > 其实检查元素还能辅助交互状态走查，这可能是很多设计师忽略的一个点。比如我们设定了 hover 按钮时有灰色底块，此时我们如何验证灰色块的色值和大小是否准确呢。其实辅助元素也可以帮忙，如下图所示，我们通过勾选 hover 这个状态，界面中就会直接呈现当前元素的 hover 状态：③ 借助工具辅助走查目前市面上有两种常用的工具，想必很多设计师也已经知道了。分别是 CSS Peeper 和 Copiexl。首先推荐的是 CSS Peeper。这款插件其实就是类似于检查元素，只是界面会更简洁，相比于检查元素去掉了很多干扰元素，打开后我们点击页面上的元素就能够直接看到其对应的元素属性和间距等。对于设计师群体来说还是比较友好的。地址： https://csspeeper.com/第二款的则是字节出品的 Copiexl。其对比方式会比较简单粗暴，就是将设计稿和开发稿在相同尺寸下进行叠加对比，从而看出来有哪些区域是不一样的，从而快速找出不对的地方。教程官网都有，我这里就不进行详细介绍了。地址： https://copixel.bytedance.com/三、还原度如何记录通过以上几种类型的检查，基本上都可以检查出大部分还原度问题，那么此时如何与进行沟通呢，这个时候避免以下两个做法：直接当面找到开发，给他说很多还原度问题。因为开发在这个阶段也有很多其他工作，不仅会打断他工作，他也不一定记得这么多细节；直接将还原度问题在聊天窗口直接发出去。通过聊天记录看还原度，不仅不方便查看，还很容易遗漏掉部分信息。因此正确的做法是建立一份还原度文档记录表，内容包含：模块，具体问题，问题截图，问题严重程度，解决状态，对应开发。在这里需要注意的一点就是面对间距问题不正确时，不要直接跟开发说你去找设计文件对照下，而是直观地在还原度截图中告知他这里的正确间距，这样能够节省双方的时间，也避免开发再次看成错误的尺寸。这样的话不仅能够清晰记录每条还原度，开发还能够根据重要程度有优先级地改掉问题，同时也可以为我们后续做校验提供支撑。四、如何让整体变得更好通过整体流程的梳理，不难看出还原度验证过程其实也是协作过程。因此想要很高的还原度，我们也需要在以下方面做得更好：团队内部有严谨的设计规范，避免多设计师协作时同一控件用了不同的表现形式；注重设计宣讲和重点标注。在进研发时设计宣讲是必要的，能够让研发人员了解我们的整体设计逻辑以及我们关注的重点，同时我们在写交互时也可以将重点字段用不同的颜色进行标记，从而让研发人员在写得时候能够引起重视注重信息同步。我们所有的改动都需要将其同步给研发和测试人员，同时也可以在我们的设计稿上标记好更新内容，这样整体的协作会变得更加顺畅，也避免信息差导致的更新不及时。避免频繁修改，不论是谁面对频繁修改都是不太开心的，因此我们对于已经进入迭代的设计稿，因此如果面对必要的修改时要及时同步信息。如果一些不太重要的改动也可以先放一放，后面再改。写在最后当我们验证完毕后，记得有一份还原度报告作为最终的检测凭证。因为在大部分的研发迭代中，或多或少都存在一些遗留的问题，还原度报告可以清晰的记录这些问题，也方便在后续版本中进行修复。当然，即使经过上述的检验，也不可避免有遗漏之处，但没有关系，只需要将其记录下来，一些小的优化点我们可以在后面的排期中安排时间进行对应的修改。以上就是本次还原度想要说的，希望能够对大家有一些帮助。欢迎关注作者微信公众号：「阿东的设计体验馆」本篇来源：优设网原文地址：https://www.uisdc.com/reduction-by-design
受访者 产品 用户 前言在上一篇文章中，详细介绍了如何通过调研问卷的方式，整理发现用户的浅层需求。如何设计高质量B端调研问卷？高手总结了8个步骤（附模板下载）编者按：B端设计的调研问卷该如何设计？阅读文章 > 本文将分享另一个更为深层全面的 B 端用户研究方法——用户访谈。通过面对面地沟通，以及观察用户的表情、行为去挖掘更深层的需求。下面是本次分享的文章结构，标⭐️的为重点部分。一、用户访谈的两种路径用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。线上会议和电话访谈的优势显而易见，可以不受地域限制展开调研访谈，整体的成本也比较低，设计师可以自己找领导或者协调资源去推动。缺点也是比较明显，沟通起来效率低下，比如我们一定有过“电话里说不清，我们见面详谈”的经历。所以，相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效，其次对于搭载硬件设备的产品来说，让受访者在真实场景里操作演示，可以发现更多隐性问题。二、常见的 3 种受访者类型在访谈过程中通常会接触到以下 3 种类型的受访用户，不同类型的用户我们应该怎么接触交流呢？1. 话痨型话痨型的受访者占大多数，通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说，甚至连对应的解决方案都想好了。整体接触下来，我觉得该类型的受访者，可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多，例如：“太难用”、“超级麻烦”、“哎 我真的是受不了啊”...访谈话痨型的受访者，我们需要注意无论怎么聊都要紧扣主题，防止变成了吐槽专场。其次也要表达肯定，安抚情绪，并对问题进行进一步提问：“您的这些建议真的很棒，也给我们提供新的思路，我都记下来了，我还想确认下，刚才您说的 3 个关于结算环节的问题，哪一个给您造成的困扰最大？”2. 牙膏型顾名思义，受访者可能是因为性格内向或害怕说错了不好意思等缘故，在受访过程中问一句答一句，比较容易冷场。答案的价值也比较低，例如：“对，是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。这种情况下要尝试缓解下氛围压力，换个形式沟通：“就是随便聊聊，公司派我们来呢，就是因为非常关注用户的使用感受，想收集一波用户反馈与建议，您有啥不满意的地方都可以跟我讲讲，越多越好。”其次我们在提问的时候也要带有引导性，例如：“还有呢、然后呢、具体说说呢”，如果对方实在说不出所以然，最有效的办法就是进入上机操作环节，通常操作过程中那些问题也会随之暴露出来。3.专业型专业型的受访者一般是老板或者店长、经理岗位的员工，他们对于产品或整个门店乃至行业都了解的比较透彻。和这样的受访者沟通，不仅是局限于产品的一些问题挖掘，他们会从这个行业的角度阐述一些个人的见解观点，给我们提供一些有价值的优化方案或者改进方向。例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效，毕竟他们不需要亲自去做这些执行，而且坦率的说，对于绝大部分产品而言，好用并不能成为其核心竞争力。他们关心的是如何带来更大的商业价值，类似于如何提升坪效，如何提升门店会员的储值能力等等。而这些老板的关注点，也会给我们未来的产品优化方向打开新的思路，去思考如何给我们的用户创造更高的商业价值。三、采访者需注意的 5 个要点1. 多了解行业&业务背景我们在做访谈之前，首先一定要熟悉产品业务的相关背景、受访商户的基本情况。访谈过程中可能会提及一些专业名词，例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后，省去了不必要的解释环节，可以使访谈推进地更顺利。其次建议要了解下行业相关的基础知识。尤其是餐饮业态，华南、北方、四川等地都因为饮食习惯的不同，在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后，在提问过程中，也更利于提出一些深刻的问题，而不是浮于表面的提问。行业相关的分析报告，可以去艾瑞、36 氪、发现报告等网站进行查询收集，在此不做赘述。也可以看这篇详细了解：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 2. 访谈框架不设限在访谈初期，需要准备一份访谈框架，但并不意味着我们整个过程只能按提纲来提问。尤其是 B 端这种千载难逢的访谈机会，只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下，除了框架以内的问题，尽可能多发散的去提问。例如餐饮业态，会有各种不同载体的终端设备联动使用，一体机 POS、手持的 POS、厨房 KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下，让我们对于全链路的协作流程也会有更深刻的认知。再例如后厨会涉及到 KDS 大屏显示，可以问问目前的大屏显示是否够清晰（字够大），也可以和负责海鲜称重的工作人员聊聊，海鲜的售卖、计价流程，以及菜品双单位（例如：1「条」鱼，重量 1「公斤」）的使用等等。在沟通过程中，一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色，又或者是主产品关联的其他后台产品。3. 讲大白话在提问的时候要考虑到受访者的年纪和理解能力，如果措辞过于专业，可能会导致受访者理解不到位，因此沟通的过程中要尽可能的说大白话。4. 多看多问多感受我们都知道没有经历过的事，很难感同身受。有时候看到客户群里，因为产品的各种原因导致商户情绪激动，我们理智上非常理解，但是情感上很难共鸣。因此每次的门店调研，我都会抓住机会观察整个门店的运营情况，去感受那种忙碌的氛围。有时候开始进入营业高峰期，机器出现卡顿或者外卖不接单等情况时，自己的情绪都会一下子紧张起来，也能够深刻感受到产品给客户带来的困扰。当再次有产品迭代优化时，这些体验总能让自己能更容易代入用户的角度思考问题。除了去体会产品对情绪的直接影响，还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。这些都会帮助我们发现，到底什么是门店运营环节里最重要的模块。5. 做事有始有终在访谈过程中，不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户：“您的问题我已经记录下来，回去会针对这个问题反馈上报，最迟 X 天我会让顾问给您回复的”。这么做一方面也是细节处维护公司品牌的整体售后体验，其次也有助于我们再次回访时，受访商户乐意花时间跟我们聊。四、用户访谈的 3 个阶段了解了用户访谈的一些基本信息和注意点以后，到了本文核心部分，关于整个访谈的推进过程，一共分为 3 个阶段。1. 准备阶段① 访谈的3种类型首先明确访谈的类型，用户访谈的类型主要分为以下三种，最常见的就是第三种类产品使用回访。新品场景调研新品调研的访谈，一般是由于业务的发展，可能需要升级或者打磨一款新产品来满足市场的需求。在访谈的过程中，我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。潜在商户拜访当去往一个城市进行批量客户调研的时候，偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。由于是潜在客户，我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势，他们放弃竞对的原因，以及我们当前产品的功能是否满足客户的需求，还有哪些点不满足，客户重点关注的是什么。产品使用回访使用回访是最常见的访问类型，主要目的是对商户进行售后维护、提升使用体验。且由于 B 端产品的复杂性和远距离特点，以及新功能同步给商户存在的滞后性，公司会安排定期的上门回访。如果有这样的机会，UED 一定要尽量申请跟着去门店调研。② 问题设计3步走到了最关键的一步，就是关于访谈的问题设计。总结一下，问题的设计渠道来源主要有 3 种。主要还是根据调研目标进行问题设计，另外两种方式，作为辅助。那具体问题应该怎么设计，这边我们分为 3 个步骤，从面到点依次拆解进行问题设计。第一步：了解产品全场景能力B 端产品的特点可以借用《U 一点料》的 9 个字概括，“多场景、全链路、多角色”，所以设计问题前，我们可以从场景+链路+角色/节点功能的维度来设计问题。以餐饮行业的产品举例，首先建议了解自家产品的全场景业务能力。即从商家端到消费端会经历的产品模块和具备的现有功能，做到心中有数即可，毕竟不会一下子调研这么多模块和功能。第二步：确定要调研的流程主线其他 ToB 产品同理，可根据某个操作链路为主线，确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程，就是提取点餐>下单>结算为主线。第三步：关键节点问题展开设计根据刚才确定的主流程，我们找到所有关键节点进行问题框架设计。以上 3 个步骤可以理解为，如何在功能极其复杂的 B 类产品当中，筛选出与访谈目标紧密相连的功能链路。避免我们的访谈提纲做的过于冗余没有核心。③ 2种提前准备工作提前告知这点也非常重要，每一次去门店调研之前，先由当地负责的顾问与受访商户提前沟通。一方面是需要与对方预约时间，另外一方面这种访谈对商户而言就相当于优质的售后服务，会有受访商户提前列框架，准备问题。那么这种情况更有利于调研，因为受访者明确自己的问题点在哪里，就等着调研团队（售后团队）来门店后，好好拉扯一番。准备材料与设备万事具备，只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐，准备进入访谈阶段，大致需要准备的东西是以下 4 种材料工具。2. 访谈阶段在了解了受访者类型、采访者需要注意的点，以及带着我们设计好的问题，下面正式进入访谈阶段。① 开场白到达门店后，我们的顾问会给受访客户做一下来访成员介绍，并讲明此次到店的目的。一般都是产品使用回访，或者新功能推荐培训。通常来说，受访商户对来访团队总是有很多”心里话“想唠一唠，因此暖场氛围比较容易起来，也有助于我们接下来的沟通② 访谈中进入正题以后，我们会先大致了解下受访者最近使用的体验以及遇到的问题，而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言，搜集用户对于产品的真实态度。其实整个访谈流程我们归纳一下，需要关注的就是四个关键点，手+口+心+颜。手-实操演示关于实操演示放在第一个讲，是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”，这种形式对受访者而言需要花更多的时间去思考问题的答案。会遗忘甚至想不起来当时的具体情况，随便的敷衍回答“嗯，还行”、“挺好的”，或者干脆彼此都不在一个频道上。其次，在操作过程中，建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同，在用户操作的过程中，会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。回去通过视频仔细分析受访者的操作路径，以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。口-问具体操作这个就是根据问题框架进行提问。在这个过程中，通常会穿插着上机操作演示，在现场记录的时候可以先记录个大概，等结束后再仔细整理。心-问心里感受问受访者的心理感受，其实就比较偏主观了，我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是，即使是这样开放式的提问，也有提问技巧。比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。因为产品一定是有可有优化的空间，“有什么不好用的地方”这样提问的方式就是具体到了某个点上面，具体什么点不好用。而后者的提问方式是基于整个产品，受访者可能会出于不好意思等原因直接说“你们的东西还行吧，还可以”。颜-关注动作表情当我们提问产品优缺点的时候，受访者大部分都会带上表情和肢体语言，并且情绪表现和性格有比较大的关系。性格比较雷厉风行、急躁一点的，通常会像连珠炮一样疯狂输出，并且措辞会比较极端。例如：“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。接受到这种信息我们首先要做的就是安抚对方的情绪，其次对于这些信息要学会剔除一些夸张描述。而性格温和一点的受访者，在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”，如果某个高频操作真的很影响日常工作效率，往往会表现得很无奈，甚至还有点委屈。那么无论是哪种表现，其实都要考验采访者的经验，结合产品的功能去考虑，找到反馈中真实有效的部分。通过以上 4 个环节，其实就可以收集到很多有用的信息，语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。③ 结束语访谈结束后，我们需要做个简单的总结回顾。将关键问题再次复述确认，进行查漏补缺并且再次感谢受访者，表达他们今天提的建议价值很大，后续会梳理出可落地的点优化到产品当中。如果说聊得比较开心，大多数的受访商户都会邀请来访团队吃个饭再走，也算是额外的福利。在就餐过程中的非正式场合交流，也可以聊聊门店的一些运营情况等等，帮助我们更深入的了解这个行业。3. 收尾阶段① 资料梳理我们在访谈过程中会有大量未整理的一手记录，结束后需尽快的梳理，尽可能详细的记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具，方便分享修改。（本文提供模板可下载）如果是连续访谈几位商户，我会在访谈结束以后，迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题，去下一家受访商户的时候可以验证下该问题的普遍性。② 整理落地输出后我们需要再次进行提炼，将有价值可落地的问题点提取出来，进行汇报分享，并找到相对应的产品研发进行探讨排期，这样就形成了一个完整的闭环，真正做到了发现问题、解决问题。③ 流程概括前文絮絮叨叨说了很多，其实关于用户访谈这事用 6 个字就可以概括，简单理解：问谁？问啥？答啥？改啥？能够回答清楚这 4 个问题，那么这就是一次有价值的访谈经历。最后ToB 业务的特点就是会有一定的行业壁垒，设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵，对于行业的不了解。或者很多人对于 B 端的认知还停留在，B 端好像没啥好设计的，都是现成的组件库拖一拖，成就感比 C 端差远了。那么做访谈、体验优化的意义是什么呢？在《U 一点料》一书中提到，B 端产品做体验设计创新时，有 2 个要诀要诀 1：更好地帮助用户降低经营成本，增加企业收入要诀 2：更好地在业务链路上促进用户协同，提升工作效率所以，无论我们采取何种方式去研究用户，去挖掘需求，最终的目标与意义都是为了使整个系统，更贴合用户的真实使用场景，让系统可以成为用户在工作过程中一件“称手的工具”。如何真正理解用户需求，给他们最想要的东西，比如高效协同、效率提升，或者创造更多的商业价值。这不仅仅是业务方的事，也值得每一位设计师参与深思。欢迎关注作者微信公众号：「B端设计情报局」 文件名 如何下载使用 文件大小 提取码 下载来源 用户访谈模板6.83MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/user-interview-2
电影 拉片 系列 大家好，这里是和你们聊设计的花生~想必很多学设计或插画的小伙伴听过可以通过看电影来提升审美，学习构图、配色、造型等方面的知识，并获得相应的创作灵感。但究竟该如何通过看电影来达到这些效果，而不是只注意到主角好不好看，打斗场面刺不刺激呢？今天就为大家推荐我日常关注的 8 位专门做电影拉片的 B 站 UP 主，通过他们的视频我们可以学习电影的相关概念和知识，并了解如何在观看电影的过程中注意到布景、构图、配色、打光、运镜等因素对画面造成的影响。以此到达提升自己审美水平的目的，并将相关技巧应用到自己的创作中。大神总结！学插画必知的6种构图小技巧构图决定了整体画面的基调，是绘画的一个关键知识点。阅读文章 > 一、拉片放映室B 站主页： https://space.bilibili.com/414072102推荐内容："拉片基础认知"系列「拉片放映室」是一个专门分享电影拉片知识的 UP 主。他的"拉片基础认知"系列目前已经更新了 54 期，内容从什么是拉片到电影里常见的景别、场面调度、拍摄手法、构图、分镜、配色等都有。每期视频时长在 10 分钟左右，用具体的电影场景向大家解释相关电影知识，通俗易懂。如果你目前对电影是什么完全没有概念，看完这个系列的视频就能有一个全面且基础的了解。二、拉片实验室B 站主页： https://space.bilibili.com/18248648推荐内容：“学习看电影”系列、“拉片细品”系列这个 up 主的拉片偏向对电影的视听语言和拍摄技术进行阐述和分析。他的“学习看电影”系列对电影的构图、色彩、场面调度、光线、节奏等概念做了详细讲解；“拉片系列”每期从构图、配色、光影、镜头运动等方面解读一步经典电影。语言平实易懂，非常适合刚接触电影拉片的小伙伴。三、摄影 And1B 站主页： https://space.bilibili.com/473887933推荐内容：那些向名画致敬的电影、“每天一个电影镜头”系列、100 种电影镜头拍摄解析UP 主本身是一位电影摄影，最开始注意到这个 UP 是他作品《那些向名画致敬的电影》，是他受杰伦新歌《最伟大的作品》启发制作的。里面剪辑了一系列电影画面与名画场景重合的案例，配着音乐观看非常震撼，推荐大家去看一下。“每天一个电影镜头”系列共 48 期，分享不同的镜头移动方式蕴含的不用意义，此外也会分享一些电影剪辑和光影方面的知识。四、七影空间B 站主页： https://space.bilibili.com/258761814推荐内容：“电影的语言”系列、“昆汀”系列、《寄生虫》拉片这个 up 主专注分析电影的画面和声音，主要分析李安、诺兰、昆汀、库布里克、大卫·芬奇等国际名导的电影作品，并对其隐喻及现实意义做深入解读。其“电影的语言”系列目前更新了 2 期，分别是讲解电影画幅的作用以色彩的意义，非常细致，值得持续关注。五、小鱼陪拉片B 站主页： https://space.bilibili.com/84706708推荐内容：《这个杀手不太冷》拉片、《隐秘的角落》拉片、《寄生虫》拉片这个 UP 主做的是细致拉片解读，他对《这个杀手不太冷》的拉片分上中下三部分，时长接近 2 个小时，是真正的逐帧拉片，从镜头运动、构图、颜色，场景、音乐等各个方面详细解读了画面想出传达给观众的信息，看完之后感觉自己打开了新世界的大门。此外 UP 也会做优质网剧的拉片分享，《隐秘的角落》系列拉片看完之后也让人对这部剧有了更深入的认识。六、风过大泽B 站主页： https://space.bilibili.com/550515990推荐内容：《哈尔的移动城堡》系列拉片、《小丑》系列拉片这个 UP 主本身是一个电影爱好者，他的视频是纯电影拉片，在拉片的过程中分析电影在构图、运镜、节奏、意象等方面的细节和作用，并会对电影的主题和深层寓意做细致的解读，能让人能发现很多之前没有注意到的细节和耳目一新的解读视角。拉片风格也很友好，娓娓道来，好像是一位朋友在和你交流他对电影的理解和感受。七、博然讲电影B 站主页： https://space.bilibili.com/427613894推荐内容：《让子弹飞》拉片、《一代宗师》拉片、《功夫》拉片这个 UP 主本身就是一位导演，所以分享的内容也非常专业。他的拉片视频动辄就是 2 小时起步，但是看起来完全不会有“好长”这个感受，而是一打开就停不下来。通过他的拉片视频，我们不但可以深入了解电影专业知识、导演各种心思绝妙的设计和不同导演专属的风格特点，还能听到 UP 分享的很多有关电影圈内的趣事。八、一起拉片B 站主页： https://space.bilibili.com/98962489推荐内容：《小武》拉片、《路边野餐》拉片、《疯狂的石头》拉片这个账号专门做华语电影拉片，以贾樟柯、宁浩等国内导演的电影作品为主。UP 主本身也是专业影视从业人员，每次拉片会结合剧本进行分析，让观众了解从剧本到电影画面中间经历了怎样的设计布置以及导演为什么选择这样呈现，非常硬核。因此每部电影院的拉片时间很长，内容也相对比较深奥，适合想深入接触电影拍摄制作的小伙伴。以上就是今天为大家推荐的 8 位值得关注电影拉片 UP 主。推荐顺序是由入门到专业，大家可以根据自己的情况选择。其实不仅是设计师和插画师，摄影师以及视频剪辑师也可以从电影拉片中学到很多有利于工作的知识和技巧，毕竟艺术都是共同的，而且了解这些电影知识可以让我们之后观看影视作品收获更好的观影体验。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：9个设计师必看的国际顶尖设计网站大家好，我是和你聊设计的（经夏日高温烘焙更香脆的）花生~虽然优设一直有向大家推荐各类设计灵感，但是还是有很多刚接触设计的小伙伴们迫切地想知道有哪些“设计师必备国际设计网站”能让自己一键收藏，既然如此那干脆给大家就来一期优质设计网站推荐吧 ~除去设计师都熟悉的设计网站三巨头 Pin阅读文章 > 配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/8-movie-ups
插件 下载地址 设计师 序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？为此 QQ 设计师在日常工作中反复实验，终于找到了这些宝藏插件，让 UI 设计领域的你成为高效的设计师。更多Figma插件推荐：全是高频神器！B端设计师常用的 7 款 Figma 插件最近打开 Figma，点击我的插件，发现我已经安装了这么多插件...我究竟要用哪一个插件？阅读文章 > 一、Skale-缩放能力增强工具很多设计师在从 Sketch 转换使用 Figma 的时候，找不到对应 Sketch 里的缩放功能。此时你就需要 Skale，这是一款热门好用的缩放插件，可以设置元素缩放中心，缩放比例或者缩放到特定的宽度、高度（包括该对象的所有属性也会随之缩放）。下载地址： https://www.figma.com/community/plugin/808289809557716614/skale二、To Path-路径上创建图形和文字经常做平面的设计师会遇到的一个问题，Figma 内要如何在创建曲线的文字呢？你不妨可以使用 To Path 插件，它的功能是可以按照指定的路径来变换图形和文字。下载地址： https://www.figma.com/community/plugin/751576264585242935/To-Path三、Morph-快速创建特殊效果Morph 可以在 Figma 内快速创建一些特殊视觉效果，如浮雕，霓虹灯，抖音故障效果，倒影，玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。下载地址： https://www.figma.com/community/plugin/906950256777348534/Morph四、Mesh Gradient-网格渐变工具当我们需要多种颜色混合渐变的效果时，Mesh Gradient 的作用是可以在 Figma 内以网格的形式编辑渐变，你可以编辑、拖动、填充这些网格点，做出极光的效果。下载地址： https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient五、Webgradients-配色灵感工具做设计非常常用的一个方法就是多去尝试，当我们在做某个界面的时候不知道配色该如何处理的时候，可以使用 Webgradients 插件内置的多种高级配色，或许你的灵感就此诞生。下载地址： https://www.figma.com/community/plugin/802147585857776440/Webgradients六、Auto Layout Styles-自动布局管理相比 Sketch，Figma 在 Auto layou 方面极大的提升了设计灵活度。而 Auto Layout Styles 插件可以很好的管理或者单独对某几个元素配置 Auto Layout，设计师可以在插件内设置好布局关系并进行命名，然后应用到设计中。还可以对已经设置好的布局样式进行修改，Auto Layout Styles 会同步到所有调用过这个布局样式的元素中。下载地址： https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles七、Batch Styler-批量修改文本和颜色样式大家在工作中经常会需要去修改大量样式，这时候你就可以使用 Batch Styler 插件，它的主要提效点在于可以批量修改颜色属性样式，批量更改排版样式，批量删除、重命名样式。下载地址： https://www.figma.com/community/plugin/818203235789864127/Batch-Styler八、Styler-快速创建样式当需要批量创建样式的时候，手动逐个去创建并不是有效的做法，而 Styler 插件可以快速批量创建样式（包括文本，颜色，效果等），它可以基于图层属性批量创建、修改或更新样式，当设计师在搭建组件库样式的时候，Styler 可以大大提高工作效率。下载地址： https://www.figma.com/community/plugin/820660579767995949/Styler九、Design System Organizer-管理设计系统设计师在 Figma 内搭建组件库时，Design System Organizer 插件可以更方便设计师创建，管理和修改组件库。超级提效实用的功能包含：1.像文件管理器一般管理组件内容2.项目在类别树之间拖拽移动3.文件之前批量转移样式4.批量重新链接实例和样式。下载地址： https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer十、Breakpoints-响应式断点插件在 Figma 内，当需要展示界面因为拉伸拖拽而发生响应变化的效果时，使用口头描述和各种静态界面标注并不是最优解，使用 Breakpoints 插件，可以做一些响应式动态布局的效果，并共享动画原型。即使团队其他设计师没有安装这个插件，也可以在拉伸界面时预览到动态布局。下载地址： https://www.figma.com/community/plugin/824289601590456356/Breakpoints十一、Themer-UI 界面主题管理同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力，Themer 的主要功能包括一键切换样式，主题管理，团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用 Themer 可以一键切换成深色模式和浅色模式的设计稿，避免无效的适配模式工作。下载地址： https://www.figma.com/community/plugin/731176732337510831/Themer十二、Motion-关键帧动画当需要在做界面的动画时，很多设计师会问，Figma 要如何导入 AE？其实未必要导入 AE 才能做动画。Motion 插件的作用是可以直接在 Figma 内完成关键帧动画设计，将大部分图层属性创建成关键帧动画，避免设计师做动画时需要不停切换设计工具，在 Figma 内就可以轻松愉快的完成静态和动态的设计稿。下载地址： https://www.figma.com/community/plugin/889777319208467032/Motion十三、LottieFiles-导入和浏览 Lottie 资源在 Figma 内使用 LottieFiles 可以将自己的 dotLottie（.lottie）和 Lottie JSON（.json）文件导入 Figma 作为 gif 动画或高质量的 svg 图层，且可以访问和预览免费 Lottie 动画库内的资源，意味着有时候设计师甚至不需要使用其他设计软件来配合展示 UI 动画。下载地址： https://www.figma.com/community/plugin/809860933081065308/LottieFiles结语设计工具与设计师是相辅相成的。所有的设计工具本身都有局限，但合理利用插件可以放大工具的价值，为设计提效，让设计师有更多的时间去思考设计方案本身。你在设计中是否也遇到过一些宝藏插件呢？欢迎在评论区分享给我们，大家一起做最高效的设计师~保姆级教程！最容易上手的 Figma 操作指南！如果你是从零开始了解Figma，或是从平面切换到UI，或者（像我一样）从Sketch切换，那不妨一起来学习！阅读文章 > 第一波！我希望能早点知道的 11 个 Figma 技巧编者按：这篇文章来自资深 UI设计师 Danny Sapio，他总结了日常设计过程中，使用 Figma 的一些非常快速的设计技巧，希望能帮到大家：Figma 这款设计工具进步真的超级快，在 Sketch 当中很多进阶的、复杂的功能，在 Figma 当中实现起来像呼吸一样简单。阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/13-figma-plugins
时间 用户 场景 “时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢？本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。更多时间设计干货：如何设计「时间显示」更专业？来看大厂总结的方法！背景“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。阅读文章 > 一、时间戳类型时间戳的类型分为绝对时间和相对时间两种，二者覆盖了全部的时间戳场景，其中绝对时间强调“准确性”，而相对时间强调“即时性”。绝对时间和相对时间的差异1. 绝对时间绝对时间是指事件发生的确切时间，目标为用户提供精确的日期和时间，强调事件的准确性。它由“日期（年月日）+时间（时分秒）”的格式组成，既包含时间点也包含时间段，如：“下午 2:00 开会”、“2022 年 11 月 1 日～2022 年 12 月 1 日放假”等。优势是时间信息传达精准，给用户以确定性，强化对时间信息的感知；缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 4 种：“2007 年 2 月 6 日” 和 “2007-02-06” 是公历日期标准格式，用“-”分割时个位数需要加“0”。“2007/02/06” 在不同国家有着不同的展示顺序，在设计时需要谨慎使用。“2007.02.06” 使用英文句号做分割，容易与英文字段混淆造成误解，建议尽量少用。我们建议平台使用统一的展示方式，以保证统一性同时提升用户感知。2. 相对时间相对时间是指事件发生的时间与现在所处时间的差值，目标是提供相对的模糊时间，向用户强调事件发生的即时性。它大多数由“日期（年月日）/时间（时分秒）+定语”的格式组成，如：“帖子发布于 2 天前”、“会员 30 天后到期”等。使用场景多用于：倒计时、即时性资讯、通知推送等。优势是用户的理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是相较于绝对时间不够精确。设计时首先要注意单位换算。试想一下随着时间的增加，单位前的数字会不断增长导致字段所占空间越来越大，以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化，尽可能使用简短的字段描述相对时间，如将“48 小时前”简称为“2 天前”，将“712 天前”简称为“2 年前”。其次要关注时间取整。由于相对时间只提供及时性的模糊时间，因此为了降低用户理解成本并节省空间，我们可以将相对时间戳做取整处理，如将“1 小时 15 分钟前”取整为“1 小时前”。相对时间戳的设计注意「单位换算」和「时间取整」二、时间戳颗粒度绝对时间戳是由“日期+时间”组成的，在不同场景中设计师会使用不同的颗粒度来设计时间戳。「日期＋时间」的组合1. 粗颗粒度精确到“日”的时间戳，作为时间维度的 Tips 应用在各种设计组件中，向用户传达最基础的时间信息。2. 中等颗粒度精确到“分”的时间戳，常用于精确事件的时间展示，有 2 种展现形式：动态日期：以“XX 12:00”的格式出现，多用于时效性强的场景，如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化：前一天发生，可写作“昨天”；一周内发生可以写周几，如“周二 12:00”；超过一周内发生可以写日月，如“2 月 6 日 12:00”；超过一年内发生可以加上年，如“2022 年 2 月 6 日 12:00”。固定日期：以“2022 年 2 月 6 日 12:00”的格式出现，应用于关键时间节点的展示场景，相比较上一种方式更正式且传达的确定感更强。中等颗粒度的格式差异3. 细颗粒度精确到“秒”的时间戳，应用于金融交易场景，如交易记录、订单记录等。举例：58 到家 App 的订单模块，用户在查看订单记录时，给他们传达强烈的确定感，从而产生安全感并提升对平台信任。58到家APP的订单模块倒计时的设计也会精确到秒，并被广泛应用在各类运营活动上。如下图，58 到家的运营活动，用户看到时间一分一秒地流逝对心理造成压力，从而产生激励作用，增强消费欲望。限时运营活动的倒计时三、时间戳应用场景为了能更好地使用时间戳，我们还需要知道它在不同场景下的作用。1. 重要内容在设计中作为重要的内容要素使用，来强调关键的时间节点。如运营活动，该场景下时间戳对于活动内容的传达有重要影响，甚至关系到用户能否顺利完成活动任务，如用户能否在规定时间内完成抽奖获得礼物，或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。运营活动中的时间要素2. 行为标记记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性，包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时，实现快速定位。以下图的 B 端产品为例，我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导，方便用户以时间维度查看操作行为。B端场景下标记用户的操作行为3. Tips 信息用户在浏览产品内容时，时间戳作为该条内容的附属信息，起到补充说明的作用。该场景下时间戳的优先级较低，需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度，如下图中的收到消息时间使用绝对时间展示从而强调准确性，而 Feed 流中帖子的时效性更强，可以不提供精确时间，故使用相对时间展示。时间戳Tips 信息最后不难看出时间戳是一个可灵活运用的设计元素，需要设计师选择合适的类型、格式和颗粒度，并与应用场景紧密贴合，保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务，也可以给业务带来价值，像在 B 端场景下利用时间戳帮助用户追溯操作行为，或在 C 端场景下利用倒计时产生紧迫，感刺激用户消费，从而提升订单转化。时间戳虽然常见，但它的关注度却不高，许多设计师都是凭主观感觉设计，因此我们从一个理性的视角去梳理时间戳的设计方法，希望这篇文章能帮到你。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/time-stamp-design
格式 动画 方式 Halo，这里是设计夹，今天为大家分享的是「动效格式」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。作为用户体验领域不可缺少的一部分，动效随处可见。日常工作中，我们可能只用 1-2 种动效格式，对其他格式的了解有所欠缺。这次介绍 5 种动效输出格式和教程，包括 PS 输出和 AE 输出，建议收藏保存下来随时查看，帮助大家更快更好地完成落地！更多动效基础知识：设计师必学的73个基础动效设计！附全面系统的免费入门教程大家好，我是和你们聊设计的花生 ~昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效设计，非常有意思。阅读文章 > 一、PNG 序列帧方式PNG 序列帧就是把一张一张的 PNG 图片按照顺序播放，跟 GIF 相比不会产生边缘锯齿的效果，也比 GIF 支持的色彩范围大。优点：制作方便简单，还原度高，颜色偏差损失基本没有（PNG 图片压缩可能会有颜色偏差），动效效果还原度高（因为就是一张一张图片播放的，像 AE 做的一些雨水，火焰都可以显示出来，开发人员可调节播放速度）。缺点：需要加载全部图片，文件占用内存大，内存一大就容易造成打开页面的时候卡顿，大的文件用户体验感很差。1. PNG 序列帧-PS 输出方式2. PNG 序列帧-AE 输出方式3. SVGA 方式Svga 背景：jianshu.com/p/dfa16d9d67cd官方网站： https://svga.io/index.html官方插件： https://svga.io/designer.html官方文章： https://svga.io/article.html优点：SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。SVGA 的转换器和播放器都开源。使用设计师工具，可以轻松的将 Aep 或 Fla 格式的动画文件导出成 SVGA 格式资源文件。动画设计师通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画文件体积小，播放资源占用优，动画还原效果好，使用方法简便，大大提高了工作效率。缺点：有损压缩，不支持图层渐变和插件特效，有的平台并不支持 Svga。4. SVGA 动效输出流程5. SVGA 动效输出方式二、Lottie 方式Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS,Android 和 ReactNative 版本。Lottie 通过 AE 设计好的动画效果，通过 Bodymovin 插件直接导出 json 文件，并允许开发人员直接调用它们。Lottie 库使开发人员能够实现动画效果，提升了工作效率，减少了码代码的时间。优点：前端可以方便地调用动画和控制动画，以减少前端码代码的时间。json 文件的小，性能表现也很好。缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，图层命名需要英文。1. Lottie 动效输出流程2. Lottie 动效输出方式三、GIF 方式一种无损压缩的 8 位图像文件。大多用于网络传输上，速度要比传输其他格式的图像文件快，但不能用于存储真彩的图像文件。优点：兼容性好，可以多平台支持。缺点：GIF 格式仅支持 256 种不同的颜色，文件占用空间大，会有色彩失真效果。1. GIF-PS 输出方式2. GIF-AE 输出方式四、MP4 方式常用的视频格式，通常用在网站的展示背景还有宣传的 MG 动画什么的。优点：兼容性非常好。缺点：适合背景展示或者其他展示方面，其他方面很少使用。1. MP4-AE 输出方式五、交互动效输出文档动效参数文档是一种把动效参数量化的文档，它是动效设计师和前端开发人员沟通的重要工具。以前动效标注文档还要一个一个图层标注(位置，旋转，透明图，动画曲线)。现在直接用脚本直接就可以一键出来了。最后以上是 5 种常见的动效输出格式和输出教程，强烈建议收藏保存下来，已备随时查看，也希望这些内容能让大家对动效格式有更多了解和使用～欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/5-dynamic-format-analysis
京东 创意 心智 随着 3 年疫情影响，全球经济下行，消费者更加关注性价比高的货品，今年京东 11.11 以“给生活多点实在”为主题，以更简单、更大力度的优惠举措，更丰富的趋势新品和爆款好物，更全面、更贴心的服务体验 ，为消费者带来最实在的价格、最实在的商品和实在服务，京东电器也将在此次 11.11，重点围绕价格心智体验，通过设计让用户快速找到实实在在的商品。往期京东设计案例：大厂案例实战！京东微信购物2022年改版深度解读今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。阅读文章 > 本篇文章将从项目背景、价格心智设计语言传达、京东电器 11.11 事业部视觉创意、品类视觉创意、京东电器全渠道的线上线下视觉体验一致、总结与心得六个方向去讲述，浏览阅读大概需要 10 分钟目录：项目背景：2022 京东电器 11.11，在集团“给生活多点实在”的主题下，整合各事业部，在统一性中彰显各品类差异性，探索更全面、更贴心的服务体验，为消费者带来最实在的价格和商品。价格心智设计语言传达：3C Design 在设计上探索价格心智的表达新方式，传播“京东电器”品牌符号特征契合“好物，好价，好服务”体验心智。京东电器 11.11--事业部创意视觉：各级事业部会场 11.11 以“闪电·痕迹”为核心设计理念，统一加入京东电器代言人肖战，创意推导新品类，新趋势，通过创意触达让用户看见并吸引，实现更好的商业转化，提升京东电器品牌声量。京东电器 11.11 -- 品类视觉风格创意：京东电器 11.11 在品类侧会场中以京东电器 IP 形象 joy 为主体，让创意符号闪电划过展现各种创意场景，以场景维度推出 3C 各品类产品。京东电器全渠道的线上线下视觉体验一致：对线下业态视觉做统一规范指导，做到线上线下视觉体验一致，更好更有效触达用户体验，全方位传播心智提升品牌声量。总结与心得：此次 11.11 设计从用户角度出发，想用户所想，让用户快速找到实实在在的商品，满足用户对于购买高性价比货品的需求，建立京东电器为用户购物价格心智的首选平台。一、项目背景前言：京东 11.11 主题背景今年京东 11.11 以“给生活多点实在”为主题，将以更简单、更大力度的优惠举措，更丰富的趋势新品和爆款好物，更全面、更贴心的服务体验 ，为消费者带来最实在的价格、最实在的商品和实在服务。1.新消费设计思考基于京东 11.11“给生活多点实在”的主题，同时随着全球经济下行对用户生活方方面面的影响，3C 产品面临着新一轮的消费变化，此次京东电器 11.11 聚焦“人”“货”“场”进行了全新的设计思考。①：人群：关注消费者对于价格诉求，追求性价比，追求好的商品推荐，追求更多优惠信息的接受；②：货的设计：建设价格心智设计，让用户快速找到实实在在的商品，把好的商品介绍出去；③：场/业态：建设性价比爆品多端多场景，线上线下同时注重打造价格心智的实体业态环境，打造一致性的体验感知；2.造记忆-京东电器品牌的价格心智我们在去设计价格心智的同时加入对符号，货品氛围，线上线下场景化体验感知一致性的思考，通过对于楼层货品视觉氛围渲染、商卡价格力信息传达、百大品牌共建传播探索等， 给用户传递京东电器是价格购物首选平台的认知。近期工作思维模型：Design Think：设计团队近期目标会围绕三个维度去思考与推进执行“京东电器心智打造”：造记忆、造场、造势二、价格心智设计语言传达1. 商卡价格心智设计的调研与升级通过对友商平台商卡信息的调研，建立了商卡价格心智雷达图，并分析得出结论：友商平台主要通过标签的不同颜色区分活动的规则和促销节点，通过进度条可视化“库存余量”以增加促销紧迫感，商卡中重点突出“直降/补贴/全网低价”等信息；尝试应用“价格曲线”突出价格；商卡中较突出“优惠券”样式；京东电器根据自身货品及价格，此次 11.11 在商卡信息传达上，主要以突出“预估到手价”、突出“补贴”以及突出“抢购”三大信息维度作为重点设计方向；2. 价格心智组件调研分析此次 11.11，3C design 同时也对友商平台价格心智组件进行了设计调研，探索了“价格心智文案规范”、“架构按钮”、“价格梯度、价格曲线”和“价格信息描述”的信息和设计样式的表达。① 低价心智文案规范规则、进度、状态：对各平台“时间轴/倒计时”、“活动状态/进度条”做了收集调研；主要以突出“补贴”、突出“直降”“金额”、突出“券”、突出“秒杀”“限时”“抢购”四个维度为核心信息去传达给消费者对价格的感知；加购按钮：对各平台商卡上加入购物车的按钮信息做了收集调研；主要以突出“补贴”、突出“直降”“金额”、突出“券”、突出“秒杀”“限时”“抢购”四个维度为核心信息去传达给消费者对价格的感知；价格梯度、价格曲线：价格梯度主要包含“三阶”和“两阶”、价格曲线以不同维度描述价格：单价到手/预估到手/已省等；价格信息描述：主要包含“降价金额文案”、“补贴金额文案”和“券后金额文案”三大维度2. 京东电器价格心智组件应用&提升价格心智商卡设计提升设计升级：11.11 期间对 3C 全部 20 余个会场进行整体设计升级，具体优化提升补贴价、利益点、折线力度和到手价等信息，用逛会场的体验上提升价格心智；团队共同参与设计了共计 63 种商品卡片样式；24 种价格曲线样式；51 种加购按钮，在优化后单个商卡楼层曝光点击率最高提升 4 个百分点；同时也提升了会场的页面停留时长和转化，在后续大促中仍可沿用；3. 京东电器价格心智营销新阵地① 京东电器巨超值项目背景：京东电器帮我“砍下来”的心智玩法，运用征集用户购物心愿，让利消费者，促销极简，30 天价保，晚 8 开抢的重点策略主动出击，占领心智，提升消费者促销体验。创意思路：在打造京东电器巨超值品牌 IP 的同时，保持大促氛围感。页面整体框架去繁从简，突出重要促销信息的同时需要做到模块与模块间的合理布局。另外用户对于促销信息非常敏感，利用符合用户认知的图形提高主题的辨识度及营造促销的氛围感。巨超值货品选择：通过京东强大的议价能力，大单采购，为消费者提供高性价比货品，建设性价比爆品多端多场景的心智。低价心智设计感：巨超值会场是 11.11 主打价格心智的根据地，整体会场强化补贴价展示，设计增加“补贴 XXX 元”、“预估到手价”和“白菜捡漏价”等低价心智信息，同时设计大转盘会场，增加新用户引流；② 巨超值视觉创意展示：4. 未来展望3C Design 将在未来 12.12 等大促活动中，总结各会场商卡价格信息设计数据转化率，持续优化价格力信息，丰富价格设计样式，进一步强化京东电器价格心智传播。最终会修改并沉淀出属于 3C Design 专属的价格心智标签与文案规范组件库。三、京东电器 11.11 -- 事业部视觉风格创意前言：集团 11.11 视觉创意理念背景介绍：「核心目标」主会场氛围共建，打造集团整体大促氛围，给用户统一的强促销感知。「主视觉概念」围绕主题“11.11 主题”，拆解设计关键词 —— 体验至简、自然可持续、多元创新、多元包容，提炼出“给生活多点实在”的主视觉概念，以11.11Logo图形作为超级符号应用贯穿此次11.11，并结合京东品牌资产Joy符号，加深平台印记。1. 11.11 项目创意「痕迹」设计理念：消费者在 11.11 大促中有过喜悦、惊喜、感动等等，这些都是在记忆中的痕迹；品牌符号“闪电”闪过的痕迹，是京东电器与用户共同的记忆，痕迹上绽放出的画面（产品、服务、情感），都是京东电器 11.11 给用户带来的种种惊喜体验。主视觉各事业部拉通，通过“肖战”的粉丝经济效应，叠加京东电器品牌标志性记忆元素图形“闪电”，组成主视觉元素模型，在闪电的尾部设计了一条记忆“轨迹”，意指每一次购物都是一段美好的记忆，在价格心智的基础上添加一些温度。2. 一级事业部会场视觉创意规范：3. 各事业部主会场视觉创意：创意思路：各事业部统一以京东电器“闪电”符号+痕迹为核心创意设计理念，融入京东电器代言人肖战，强化京东电器品牌心智，将“场”的选景设在室外街道，在街道两侧融入各事业主品，强调各事业部卖点特色，在保证差异化创意的同时，各组视觉色彩调性整合保持一致性，强化京东电器视觉整体统一感，共建电器品牌视觉规范。将“京东电器”品牌符号特征契合“好物，好价，好服务”体验心智，延展出创意十足，个性鲜明的主会场画面演绎；随着 11.11 时期变化，在主 kv 视觉创意上，保持“闪电”符号+痕迹为核心创意设计理念的前提下，高潮期由预热期的正视角拉为仰视角度，强化视觉冲击力 ，将京东电器 11.11 大促氛围推向高点。① 群主会场项目背景：群会场不同于其他各级事业部承担销售货品的任务，旨在 11.11 期间起到功能分发的作用，为各事业部引流，提高转化，助力销售。创意思路：将各事业部打造出城的概念，融合各品类标志品牌产品，给予曝光。在页面设计中，旨在达到有效引流效果，重点设计各事业部入口。设计亮点：在以往大促节点期间，京东电器频道首页主要在头部进行主题氛围的渲染，此次在楼层入口进行组件创新，通过旋转魔方，多面多维度展示各级事业部品类会场及产品，更全面有效到达引流效果。② 各事业部主会场视觉创意展示各事业部楼层展示：从预热期、开门红到高潮期，随时期的推进，各事业部会场的氛围和视角也随之层层递进，在楼层的氛围渲染中，色调由橙红色推进到京东大促红色，促销氛围感愈加浓烈，在楼层条及商卡设计上，也更加强调京东电器价格心智传播，响应今年京东 11.11 以“给生活多点实在”的主题。技术创新价值：此次京东电器 11.11 期间，我们也通过数据驱动设计，不断深挖用户对于我们整个京东电器 11.11 大促活动的价值体验。在各事业部及品类会场，3C Design 前端组件共创新复用 60+组件。此次事业部各主会场大量使用 3C 营销设计团队沉淀的优秀组件，其中挽留弹窗，一键领券，浮层 icon，商卡层叠切换等曝光点击率均有不同幅度的增长，与集团研发团队共建的产品 3D 模板，在不断提升曝光点击的同时，实现了用户可以在会场上实时浏览产品的 360 度的样式，加深了用户对于新品，趋势品的关注度。此次 11.11 我们整理沉淀了各事业部主会场优秀组件样式 TOP10 并总结组件优势和使用推荐，为后续的活动做好了合理可视化的数据支持。四、京东电器 11.11 -- 品类视觉风格创意1. 创意符号打造创意思路：22 年 11.11 主要围绕京东电器品牌曝光、价格心智、视觉创意三个方面，首先在京东电器品牌上使用品牌 LOGO、符号、形象进行统一化的心智触达； 其二是价格心智，在颜色选择、构图、商卡展示信息上重点烘托氛围，突出价格心智；其三突出各个品类特色，保留个性化特征；设计理念：京东电器 11.11 在品类侧会场中使用“场景版”：闪电划过展现各种创意场景，以场景维度推出 3C 各品类产品。2. 品类会场视觉创意规范：3. 各品类创意视觉展示：预热期：高潮期：五、京东电器全渠道的线上线下视觉体验一致对线下业态视觉做统一规范指导，期间在各超级体验店，旗舰店等资源位上刊，做到线上线下视觉体验一致。并在 11.11 期间联合各大品牌供应商，首次以京东电器自身品牌闪电创意图形进行 1+100 百大品牌创意海报投放，持续传递京东电器“好价，好货，好服务”的品牌心智。1. 百大品牌① 项目背景此次京东电器 11.11 联合百大品牌进行视觉共建，项目从 9 月底开启进行整体的创意视觉的下发与宣讲，中期的审核与反馈，到最终 10 月底配合市场部侧在 11.11 期间做 1+N 整体的创意传播与爆发，此次创意海报也是京东电器首次以自身品牌闪电创意图形联动品牌侧一起在双十一期间共创视觉创意方案。② 百大品牌视觉创意规范闪电创意海报一共由闪电创意符号、创意背景、营销标题和信息四个部分组成。画面中各类元素的大小及位置皆与之形成对应关系。③ 项目亮点京东电器 1+100 百大品牌闪电创意海报联合投放，以京东电器“闪电”符号为基础图形共建创意海报；11 月 1 日-11 月 11 日期间各品牌侧陆续在各自官微进行投放与爆发，在 11.11 期间一起在京东站内外助力京东电器品牌曝光与声量传播；④ 优秀海报案例：⑤ 未来展望此次 11.11 京东电器和百大厂商品牌合作共创视觉创意，是京东电器和品牌方的合作共赢，在未来，要持续保持和各大品牌供应商的合作共建，助力共同发展进步，共同为消费者提供更优质的服务。2. 京东电器线下品牌传播在线下业态方面，以京东电器“闪电”符号为核心加入京东电器代言人肖战，助力品牌传播和吸引用户进店，全套视觉覆盖 5 家超体、40 家门城旗、100+五星双门头门店内；五家超体累计到店几十万多人次，线下业态会场累计曝光上千万多人次；全渠道 JOY 形象：京东电器全渠道（线下业态）JOY IP 形象在 11.11 期间开始传播，在用户心智上全渠道 JOY 热爱 3C 产品、热爱购物、有潮酷感的形象，同时此信息仅在宣传线下业态中使用，让用户感知“京东电器”服务的同时，也能识别出不同业态。线下传播 KV&上刊展示：六、总结与心得1. 京东电器低价心智结合 2022 年京东 11.11“给生活多点实在”主题，在一级事业部中加入京东电器代言人肖战，助力京东电器品牌心智提升，同时加入商业化思考，京东电器 2022 11.11 将设计重点放在了对于价格心智的思考，通过对符号，设计组件应用&提升等助力业务提升，让设计更营销，传递京东电器“好价，好货，服务”的品牌心智，提升京东电器品牌声量传播。2. 商业化的设计团队会针对用户体验、营销、交互、品牌、研究、前端代码设计等层面服务 3C 事业群。从创意到商业化价值的转化，再从数据理性分析并驱动，最终形成商业设计赋能于业务帮助业务增长。同时团队是个关注设计商业化、设计价值领域的所有项目的创新设计。从探索价格心智的商卡和组件样式，再到多场景价格心智氛围打造，设计表现力有过之而无不及，有效触达用户体验，全面提升京东电器品牌心智声量传播，最终触达 2022 年京东电器 11.11 价格心智表达。设计和商业的有机结合对设计师而言一直都是一个很大的命题，尤其在全球经济下行的今天，更需要设计师利用敏锐的观察视角，立足商业本身，持续挖掘设计价值，让商业美而简单。3C Desgin 优秀设计狮小伙伴们，希望下一个 11.11 更加精彩~THANKS.欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-3cdesign
合集 人工智能 干货 大家好，这是 12 月的第 2 波设计干货合集！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第一波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 1 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、圣诞设计素材大合集https://iconscout.com/pages/christmas-design-assets看来 IconScout 逢年过节都要出一波针对性的素材，眼瞅着圣诞节就快来了，它又推出了圣诞特辑。这次的合集当中，包括超过 65000 款图标、矢量插画、3D插图、 Lottie 动画素材，这当中相当一部分是免费的，正在愁圣诞节促销页面缺素材的同学一定要看看。2、文本转视频内容人工智能平台https://elai.io/从根本上来来说，Elai 所提供的功能并不复杂，它可以将你所准备好的文本转化为为带有真人念白的视频内容，而背景当中还能像制作 PPT 一样同期生成文本和其他类型的内容。Elai 会事先采集不同的角色形象和他们的声音，借助人工智能将他们合成到你的视频里。目前这项服务是收费的，不过提供免费试用，有需求的同学可以试试。3、人工智能高素质 LOGO 生成工具https://makelogoai.com/最终还是走到了这一步： 使用人工智能来生成 LOGO。这个名为 Make Logo Ai 的服务，可以根据你的需求来生成素质颇为不错的 LOGO，你需要描述你的公司或者产品的名称，然后人工智能会根据你所提供的这些特质，生成对应的 LOGO。这项服务同样提供免费试用。4、假透明 PNG 文件消除工具https://unfakepng.com/你是不是也曾碰到过这样的情况：在网上下载一个看起来半透明效果的 PNG 文件，结果发现背景并不是透明，而是伪装成「半透明效果」的马赛克效果。别担心，用 unfake.png 可以帮你去除掉这些马赛克，将图片变成真正意义上的透明 png，真的是业界良心啊！5、高素质无缝纹理图案生成插件https://www.figma.com/community/plugin/1138854718618193875/Noise-%26-Texture生成无缝的纹理素材对于绝大多数的用户而言可能都是非常有用的，如果你正好是 Figma 用户，那么这个视觉设计的时候经常会用到的插件可能对你会非常有用——你只需要选中涂层，选择生成纹理或者渐变，然后调整即可，你不需要纠结于肌理无法拼接完美的问题。6、免费高素质图标合集 Futiconshttps://futicons.com/非常简单直给的一套免费图标合集，素质过硬，品类丰富，但是最重要的是， 整体的风格非常的未来主义，涵盖了虚拟现实、星际旅行、人工智能等各种新潮科幻时尚的图标，某种意义上它可以作为我们已有的很多图标的补充。此外，他们还接受定制服务，你所需要做的，就是点击 Get Custom Icons 按钮，发送邮件给他们官方即可。7、抽象波纹背景素材生成工具https://fffuel.co/aaabstract/依然是在线素材生成平台 fffuel 出品的新功能，aaabstract 能够在线生成漂亮的波纹背景效果。当你打开它的时候，你会看到不断变化的波纹，你可以控制其中波纹的复杂度、失真度和混色的效果，有深色和浅色两种选择，确定了大概效果之后，就可以一键保存了！本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol2
数据 用户 指标 2009 年 Google 做了这样一个试验：用 41 种蓝色作为链接色，呈现在搜索结果页中，追踪它们带来的点击率，最终色值#2200CC 脱颖而出。据报道，该色值相较于其它蓝色，每年多为 Google 带来 2 亿美元的利润，可谓相当可观。数据结果显示，链接色越偏向绿色效果也就是他们的核心数据越差，越偏向蓝色效果效果越好。这不是个例，全世界许多互联网公司，包括 58，都在做着类似的事情——用数据来做设计决策。线上同时跑着许多版控制变量的测试方案，制定一个核心数据指标，有可能是点击率、停留时长或是日活跃用户数，保留数据效果好的那一版继续设计与试验，无限寻找并趋近商业与设计的平衡点。这便是数据驱动设计的一个缩影，它概括了数据在这类产品中的主宰地位。数据设计干货：如何构建数据体系设计方法论？五大章节帮你掌握！作为一名用户体验设计师，在工作中最常出现的痛点有两个：一个是如何让方案获得各个角色的认可，顺利的将方案推行下去；另一个是项目上线之后，设计产出和设计价值如何体现。阅读文章 > 一、提问与挑战看到 Google 的链接色试验，结合日常工作中数据的地位，难免会提出这样的疑问：为什么不测试第 42 种蓝色？为什么只测蓝色，而不测其它颜色？下图也是一个有关于颜色的案例，绿色与红色两个开始按钮，进行 AB 测。绿色在国际上都与顺畅通过有强烈的隐喻连接，而红色往往代表着错误与禁止。但是最终数据显示，红色按钮版本的转化率要优于绿色 21%。不知道这样的结果，是否能支持了这个产品将红色按钮推全量。为什么公认的更好的设计方案，最终数据不一定好看？数据至上的大环境下，我们是否会逐渐失去对产品的直觉判断能力？用户的每个决策简化为一个简单的逻辑动作，这背后一定是科学正确、无懈可击的么？要解答这些问题与挑战，需要先搞清数据驱动设计的优势所在。二、生存的土壤数据驱动设计之所以能够有生存的土壤且不断发展，总结市面上的沉淀，有以下几点：1. 利于团队理解一般来讲，产品的核心价值导向是抽象的，为产品制定核心指标的过程就是将它具象的过程。具体的核心指标，相比于一个抽象的价值观，更有助于整个团队的理解。2. 拥有可操作性核心指标制定后，能够有相应的公式对指标进行拆分，而拆分后的指标可以指导团队在各个环节去不断优化，具有很强的可操作性。3. 符合产品节奏许多互联网产品，由于市场环境也好、企业基因也好、产品生命周期也好，都希望小步快跑去快速迭代。数据驱动的产品，方便快速试错，不断调整方向。4. 便于向上管理广义的向上管理，包括个人对 leader 的汇报、项目组对高层的总结，甚至创业公司对投资机构的宣讲，这些场景有数据的加持，会使工作进展、项目成果、发展潜力更可被感知，从而争取更多的资源倾斜。三、数据陷阱数据驱动固然有它的优势，但这不意味着它是完美的理论。1. 核心数据难制定产品制定核心数据的过程，必然伴随着近似与误差。因为没有绝妙的数据指标能够完全等同于产品给用户带来的价值。举例来看，一款交友产品中「用户在这儿玩得开心」是核心价值，那么核心数据是用户停留时长、互动信息数量，还是 App 打开次数？如果用户停留时长高，但仅打开过一次手机意味着什么；如果用户频繁打开手机却没来往过几条信息又是什么场景；如果用户信息数量很多，但每天多次只打开不回复社交信息，那 ta 是怎样的用户？可是这些数据乍一看都是「玩得开心」的近似代表，却都有它们自己的局限。这就告诫我们一定要注意数据陷阱。2. 避免虚荣指标设计工作中，会出现数据指标有所提升，但最终产品收益不大的情况。其原因可能在于虚荣指标。虚荣指标 Looker 创始人 Lloyd Tabb 把虚荣指标与明确指标的差异总结如下：举例，对于家服平台来说，58 到家 App 并不是像其它 C 端用户一样只要登录就可以，用户需要在线完成购买服务的流程，才能称之为活跃用户：找服务、选服务、完成购买并完成线下服务。所以通过签到领奖励等运营手段带来的打开、注册/登录行为只是一些数据，除了为当天增加一个日活外，没有更多作用。所以 App 下载量、注册登录用户数便是 58 到家的虚荣指标，下单量才是精准指标。3. 代入到更宽广的层级设计一样东西通常需要把它置于它所属的更大的环境中来衡量，这是我从建筑师 Eliel Saarinen 的设计理念中学到的东西。互联网短短发展数十载，但是人们对于设计的探寻已经绵延千百年。建筑学——更是集概念性、落地性与时间沉淀于一身的学科。非常值得借鉴学习。建筑学如此，互联网产品的设计也如此。部分数据未能真实反应产品使用的情况，可能是因为没有把小的设计环节放置在整个流程中 没有把设计流程放置在整个产品的使用中 甚至，再进一步——没有把产品的使用放置在用户的日常手机使用中。如果我们在更长更广的视角去看待设计环节的数据驱动验证，很可能发现那个关键数据只是整个链条中的小小切片。它只能反应上下游关系，而无法真正地指导整套设计方案的产出。举例，58 到家 App 首页的 feed 模块，上线了双栏内容穿插 sku，与单栏场景化 sku 的灰度测试。预想中，后者能够为目标不明确的用户打造许多场景化的需求温床，促使用户根据场景提示来完成下单。数据情况：之前该该环节的核心数据定为了点击率，这就没有做到把这个小的设计环节放置到整个流程当中，也没有选用最核心的数据——即订单转化率，来衡量这个设计的好坏。如果仅看点击率，后者效果不佳，但如果看订单转化便扳回比分。再结合用户体验的直觉与经验：场景化 sku 的用户心智引领路径过长，不适用于若干行列表的呈现方式，会造成用户的疲劳感。相信后续针对后一版本的优化会取得较好的效果。还有些情况，一个核心指标确实无法反映设计的好坏，可以尝试增加二级指标，这也是代入到更大层级的一个方式。举例，假设 58 到家有 20%的用户是我们判断的高价值用户，他们贡献 80%的收入。那么我们在针对与收入相关的核心指标做版本迭代时，会不断向着 20%的用户倾斜。但是剩下 80%的用户，他们可能对于产品的增量拥有更大的想象空间，在优化核心指标的同时，可能会牺牲掉产品长远发展的可能性。所以增加并观测有关 80%非核心用户的二级指标，争取达到短期效益目标和长期增长目标的双保险。四、其他驱动经过上面的分析，我们发现数据驱动设计这件事本身，有利有弊，如果要做得科学有指导意义，难度并不小。那现行条件下，是否有其它驱动能够将其代替？假说驱动、理论驱动、直觉驱动以及神经营销学等等都是与之并列的驱动方式。其中直觉驱动与数据驱动最为不同。1. 直觉驱动罗翔老师讲刑法，说有些同学学了法之后，就失去了人性，失去了老百姓都懂的朴素价值观。做设计一样，我们判断一个设计好坏的时候，如果代入了太多复杂的设计方法论、数据验证理论、产品营销思维，就容易忘掉最朴素的设计直觉与价值判断。2. 神经营销学有关神经营销学，有一些耳熟能详的典故，如可口可乐与百事可乐的盲测。推荐 TED 演讲《神经营销: 消费者决策的新科学 Neuromarketing: The new science of consumer decisions》，内有详实的案例。3. 最重要的关卡最后回到产出设计方案的人——设计师自己。在发出交付邮件的那一刻，是否感到骄傲；上线后的某一天是否会很开心看到自己的设计；年终总结时是否愿意把它提交到团队的设计年鉴当中。这些问题的回答如果都是肯定的，我想这个设计不会差。最后回到最初的 41 种蓝色，无独有偶，2010 年 Microsoft 的 Bing 也做了类似的试验。最终确定了该搜索引擎的链接色——#0044CC。据报道，如果把额外的广告点击量和用户参与度考虑在内，每年能增加8000万美元的收入（考虑到Bing的市场份额远小于Google，Bing链接蓝的收益增长，从百分比来看要高得多）。看到这里，你是否对这两个互联网巨头的试验结果产生了一丝怀疑，Google 与 Bing 的用户，是否有如此大的差异，以至于这两个冠军蓝色看起来截然不同？有没有一种可能，人类的社会活动、心理状态以及使用产品时辅助做决策的潜意识等等这些，根本无法用数据去概括与总结？那数据驱动设计的根基，是否不复存在？这让我想到老友记中，Phoebe 让 Ross 这个古生物学博士，对进化论产生了动摇。当 Ross 松口后，Phoebe 对他说「How are you going to work tomorrow?」回到设计，这篇文章充满自相矛盾的假说与推演，既没有自圆其说，也没有明确立场。只是希望能够信马由缰地把有关数据的一些思考记录下来。接下来，你将用什么作为你的设计驱动?欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/data-analysis-design
用户 视觉 玩法 本次升级主要目标是解决百度 APP-小说频道活动调性同质化，缺少创新性和品牌感的问题。往期改版：千万级产品实战！「百度小说」会员全链路设计复盘本文通过强化会员品牌、全链路精细化运营和提升会员服务的设计手段，阐释如何为用户提供更好的服务。阅读文章 > 一、项目概述运营升级主要针对运营活动，探索全新的设计语言，构建用户对小说产品的记忆点。同时收拢活动玩法，沉淀模型，提升用户产品体验和各角色协同效率。图片数据引用《2021 年度中国数字阅读报告》二、运营现状现在小说频道的现状是: 设计风格缺少文学的调性。业务策略也在慢慢调整。需求结构由多线路变成单线的内容分发。设计周期需要 5 天左右的时间，主要是在建模和渲染上。总结出三个痛点：缺少品牌调性，3d 的设计手法，时下较流行，但是同时同质化严重，缺少小说特有的设计调性；传统的运营手法需要大量的时间打磨视觉，现在大部分小说的活动没有复杂的玩法以及内容，迭代的速度也相对比较快，过于精琢的画面不适合这种实效性的运营活动，性价比低；活动路径过长的玩法体验，不适合目前业务的发展需要。三、设计目标基于痛点，围绕三个设计目标解决目前的问题，并提炼三个设计方法。四、洞察分析1. 前期工作：前期调研了行业 top 的品牌以及运营活动，梳理竞品优势:设计轻量简洁、品牌颜色、符号运用统一、产品体验更沉浸。2. 视觉洞察：从行业分析来看自身业务，打造运营体验闭环。从色彩、插画、字体等视觉元素贯穿整个运营体系。落地到活动、物料等，全链路反复强调产品感受，打造深刻记忆点。五、运营升级1. 唤新视觉印记：如何打造小说频道运营体验？我们对运营风格进行了新的尝试，定义产品核心词「书香气」「沉浸感」，诠释和传递品牌精神和视觉感受。通过色彩定义、统一插画风格的设计手法，打造放松、自然的视觉体验。2. 视觉语言推导：① 拓展运营活动配色以书香气为理念，受到中国纸质文学的启发，探索如何将“书”的质感和“看书”的沉浸用视觉语言表达出来。在定义颜色时，基于产品品牌色，尝试以中国传统颜色进行多种配色尝试，并结合小说分类内容拆解色彩体系。② 色彩拆解③ 探索新视觉风格为更加稳固品牌记忆透传，我们探索全新的插画风格。插画风格的一致性有利于建立产品调性，强化品牌形象。好的插图设计能唤起用户的共情，拉近用户关系。结合小说独特的特性“放松”“自然”的阅读感受，探索出轻量、制作成本相对低的微颗粒质感插画风格。总结出来这类风格的特征：简洁统一、有趣味性、明暗对比强烈、主题明确。再结合沉淀的颜色体系、以及书香气的设计理念，搭建一个放松、快乐、随意、自然的看书状态。有周末在家安静看书的样子、有下班后慵懒的状态，在情感上引起用户共情。风格成型④ 插画风格规则：最后总结插画风格特征，输出插画体系规范。减少协同之间的认知和学习成本，提升易用性。⑤ 运营设计案例：运营设计作为传播品牌的手段之一，一定要以产品气质来设计画面，且色彩、图形等都要精准表达内容。适当使用品牌色以及 IP 作为画面点缀，建立用户对品牌的认知。⑥ 插图案例：视觉的一致性能够帮助用户加深对产品的联想，周期性的运营活动，视觉符号，多角度触达用户，逐步完善用户心智的打造。六、玩法模型1. 需求挖掘：小说频道的用户主要集中在 22～44 岁中青年，使用产品主要用于获取内容，在浏览行为上，除了实用性，更注重内容获取方式的体验。所以在运营活动的核心除了视觉表现外，还有内容呈现的方式以及活动玩法流程的体验。2. 自身业务：频道的活动类型大体分为两类，一种是书单推荐模式，没有过多交互行为，第二种是激励型活动，可以赚书豆、书券等虚拟币为内容付费。3. 步骤方法：① 我们的设计策略是根据活动类型划分设计方法书单推荐型：页面信息轻量化，用简洁的设计语言搭建视觉容器，让用户聚焦信息，提升用户浏览体验。激励型：以减少用户行为路径、更简便获取激励为目标，找到适合小说用户的活动玩法，并沉淀模型，提升各侧协作效能。② 页面轻量化为了保持用户想看书的持续兴趣，把书单推荐类的活动页面划分为模块，视觉区、互动区、内容区。结合新的设计风格落地，背景元素的减少，图形的简化，同时不过多装饰互动区，让用户下意识产生交互行为。给用户完美的浏览体验，提升用户粘性。③ 沉淀玩法模型收拢激励型玩法活动：小说的用户来平台都是为了看书的，玩法复杂的活动，会造成用户反感，能够使用户得到及时反馈的活动是第一选择。我们调研了目前所有端上的运营活动。收拢了大转盘活动和答题活动作为频道内基础的活动模型，他有三个特点：流程少、可复用性高、用户粘性大，比较契合小说频道的用户需求。体验更优：玩法简单、行为路径更短有一些激励型活动，比如邀请好友，需要经历诱导、点击邀请、分享、端外、回流等五步，而转盘活动只需要两步就可以完成整个流程。研发也只需要开发一次基础功能，后期只靠视觉换肤就能完成迭代上线。提升效能：提升各角色协同效能之前一个项目从立项开始，整个活动周期大于 15 天，玩法模型的沉淀，我们只需要产品提需到视觉换肤两个角色的合作，就能完成日常活动的迭代。总结目前小说频道的运营升级已经取得了阶段性的成果，沉淀了运营设计资产，为产品打下了视觉基础，在一定程度上也帮助业务解决了现存的问题。当然我们的设计语言、产品体验还在不断打磨、优化，持续将产品痛点和设计目标紧密结合，助力业务发展。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-novel
作品 插画 风格 大家也许都知道，学习设计，提高审美，第一件事就是打开优秀作品集，不断给自己的眼睛充电。但是看得多也往往眼花缭乱，在落实到具体项目时，反而会因为选择过多，束手无策。这篇文章中，我就这个问题为大家整理了八个我一直没有公开的，偷偷在粉的插画师以及他们的作品，我会把他们的作品优势、风格特征和学习点列出来，帮助大家在审美学习这一块，有针对性地去吸取他人所长，为自己的插画设计加码。（其实他们的作品也并不是每一个都完美，但只要把握住作品的风格精髓就可以挖到宝）只要你懂得如何去看，在这八种不同的插画风格中，其实已经蕴含了所有插画设计乃至平面设计的知识内涵。你要做的就是一块吸力超强的小海绵~let‘s go!更多插画师推荐：这五位顶尖插画师的作品，是我每日学习的源泉!（地图插画专题）大家好呀，我是和你们聊设计的花生~之前为大家推荐地图素材资源的时候，提到一种优化地图的思路是使用插画类地图，而在插画类地图中矢量地图在创作上比手绘地图更加简单高效。阅读文章 > 一、Mink yung：柔润的力量Mink yung 的作品大部分以人物形体为主，线条简洁，弧度清晰。Ta 的作品带给人一种柔润感，好像牛奶丝滑一样的感受。作品里的人物形体看起来都很圆润肥大，但是并不臃肿。色彩明快简洁并且看起来很柔和，运用单色就能支撑起对形象的立体塑造。1. 观看焦距：人物圆润的弧形表达，以及单色光影表现的简洁感。在群体人物之间建立起和谐的弧度起伏。阴影部分的形状表达。2. 食用方法：Mink yung 的作品非常适合临摹，尤其在临摹时去感受线条和光影表现的巧妙。3. 更多作品网站链接：https://dribbble.com/alsrud2二、Alex Pasquarella：体会构成Alex Pasquarella 很擅长风景的描绘，但 Ta 的风景作品带着非常强烈的简约构成风格，运用简单的矩形似乎就能巧妙拼缀成一个完成的风景演绎，这是他的作品里非常强烈的个人特色和对形状的归纳感知力。1. 观看焦距：简约几何形的造型能力。对构图的层次把握。2. 食用方法：学习 Alex Pasquarella 的作品中的方法，多拿普通的风景照片来“转”为几何表达，再参考作品中的表现方式加以修饰调整。看看你画中的风景和 Ta 的作品相比有多少差别。3. 更多作品：网站链接：https://dribbble.com/alexpasquarella三、COENPOHI：体积和光影COENPOHI 的作品围绕建筑展开，所有的作品都有着非常精巧的立体感。当然他所选取的视角大部分属于 2.5D 风格，这个风格之下，他对光影展开了一系列非常详细的研究式的描绘。1. 观看焦距：2.5D 风格的表达透视立体细节的把握2. 食用方法：要临摹 COENPOHI 的作品，需要有科学家反复实验等待最终结果的耐心，临摹他的作品能对立体光影表现有非常深入的理解。如果觉得自己没时间去临摹的，可以多观察，小片段去描绘。3. 更多作品：网站链接：https://www.behance.net/coenpohlhttps://www.coenpohl.com/四、Willian Santiago：像油画那样涂抹Willian Santiago 非常有特色，看起来非常像油画，但仔细研究作品的笔触发现更像是 PS 里的某种笔刷所涂抹而成。虽然造型简单，但带着一种奇异的复古风格，色彩尤其鲜明，具有一种沉淀的魅力。我第一次看到 Willian Santiago 的作品的时候，就两个字：惊艳~那种在简洁和装饰之间游刃有余的技巧，对图案和构成的巧妙结合，细腻的质感和色彩控制……都非常佩服。1. 观看焦距：形状的构思安排图案和形状的互动小笔触对构图的点缀2. 食用方法：Willian Santiago 不需要临摹，而是需要掌握他的涂抹方法，从简单的形状开始。其实他的画很简单，去掉了光影表达，集中在形色表现上，所以你在学习这类风格的时候，就是要吸取他对图案和形状的把握能力。色彩是非常重要的一个环节。3. 更多作品：网站链接：https://www.behance.net/williansantiago五、James Gilleard：细节极致修炼法看过 James Gilleard 作品的人都会说：太细节了太细节了~这是真的，你没有办法不被他的作品里的细节所惊到。如果说前面的设计师都在抛弃细节，Ta 的做法就是在收藏细节，每一个细节都不放过，这是什么体验？他非常擅长用小圆点来做光点，然后用细节的不同色彩的小形状去强调整个场景的光感。层层叠叠密密麻麻对细节的刻画，不厌其烦，尽管细节琐碎，但对形状却很有节制。能画这样的画的人一定不是普通人，我曾经尝试临摹他的一幅画，就一个很小部分，我画了整整三天，还根本没到这幅画的 10 分之 1，太魔鬼了~1. 观看焦距：光影的色彩分布透明小圆点的铺满感造型的细节2. 食用方法：学习 James Gilleard 无法临摹，除非你有足够的时间。我的学习方法是去体会片段，也就是截取一小部分来进行刻画，感受在绘制过程中他对光线的表达力。平时也没事可以拿出来看看，用眼睛去体会他对细节那种细碎而巧妙安排。3. 更多作品：https://www.behance.net/jamesgilleard六、Ana Duje：夸张人物的技法这两年比较流行的就是 Ana Duje 的这类夸张的人物画法，激起了一大波夸张人物的热潮。但是终究是 Ana Duje 的人物让人有种对形体超强的控制力，以及对图案肆意大胆的运用，从而在整个形色上更胜一筹。她的人物看起来大胆，有运动风，青春活力。线条来替代阴影，造型安排从形色上完全能 hold 住眼球，有种卡通+扁平的双向结合风格。1. 观看焦距：夸张人物的手脚表现时尚的鞋子和服饰设计线条和几何图案（格子、圆点、条纹）的运用2. 食用方法：Ana Duje 的插画适合初学者临摹，但是想要达到同等量级的创作，需要的还是跨越式的创作法。这在我们的扁平插画研习社课程里也讲过，怎样去移花接木吸取已有的原创作品，然后突破自己的创作局限。3. 更多作品：网站链接：https://www.behance.net/anadujehttps://anaduje.com/七、Maïté Franchi：美食的质感推出一位我很喜欢的插画师 Maïté Franchi，在扁平化还是最初光滑没有颗粒感的阶段，我就已经注意到 Ta 的插画作品里的颗粒，后来铺天盖地所有的插画都运用上颗粒的时候，我多少感觉 Ta 是在扁平插画里加入颗粒感的第一批人，也许我看得还不够多，但是 Maïté Franchi 的作品让人感觉非常温暖，她的作品大都很生活，围绕美食主题展开。颗粒质感很浓厚，色彩运用很有情调。我对插画质感的探索就是起源自 Maïté Franchi，不管怎么说，隔空表白一下~1. 观看焦距：扁平形状的简化颗粒感的运用质感的表达2. 食用方法：Maïté Franchi 的作品很适合临摹，如果你能把她的插画临摹到比较相似，你对插画颗粒感的把握也已经能出类拔萃了。在临摹的同时，去拆分，你会发现她的插画有很多不同的层次，这些都是非常珍贵的插画表现技法。3. 更多作品：网站链接：https://www.behance.net/maitefranchihttp://www.maitefranchi.com/八、Malika favre：影子、负形和故事最后推荐的是我心中插画界的一姐，那就是 Malika favre。我们的微信群里，只要说到推荐的喜欢的插画师，我一定会推 Malika，但是推完我又有点后悔，因为 Malika 确实不太适合初学者临摹啊。其实在我学习插画的初期，我一直在左顾右盼，不知道该从哪种风格学起。那时我只是学习原画，但是原画的那种游戏风格，一直让我提不起兴趣。直到看到 Malika，那种简洁的形色组合，瞬间就震撼到我了：原来插画是可以这样玩的！怎样有人能用这么少的颜色这么少的形状画出这么多好看的画？Oh my ~Malika 的插画真的太容易辨认了，风格大气时尚、对人物形体的极致表达，以及正负形的运用。简洁的圣经。很多人模仿 Malika 的风格，但是我感觉都只能学到一两层。她的风格有种无论怎样都很难被完全抄走的定力。有最坚固稳定的结构，最经典的配色，最不惹人注意的纯色填充。在 UI 界面里运用 Malika 风格的插画，你会发现简直美爆了。（如果不信可以去试试）特别是她的插画中，总有种故事感，这些故事感是从光影的形状中慢慢演变来的，艺术就这样诞生了。（流泪推荐……）1. 观看焦距：人物造型的精准阴影和投影的戏剧性表现正负形的巧妙切换运用2. 食用方法：Ta 的作品值得去细品，不适合临摹。这些形状色彩是每个人都会的，但是难点是我们无法像 Ta 一样组合得那么好看自然，富有形色的魅力。插画其实就是形色组合的游戏，Malika 只是把插画抽离到最本质的模样。她的作品中的构图是非常值得学习的方面，我们在研习社的课程中也专门单独去分析过，每一张的插画构图，每一个细节都没有浪费，不偏不倚，在画面构图中发挥必要的作用。大家研习中，重点可以看起来。3. 更多作品：网站链接：https://www.malikafavre.com/（是的，Malika 没有 Dribbble 号、Behance 号，但还是被发现了，真大师！网站需要梯子访问）我选取的插画师属于自带非常强烈的个人风格，并且属于扁平这个风格范畴。其实已经有很多优秀插画师，但是如果个人风格特征并不明显，或者其他范畴的，就未能关注到，所以慢慢挖掘到风格独特的插画师，我会再继续开写第二季~本篇来源：优设网原文地址：https://www.uisdc.com/8-illustrator
敦煌 素材 壁画 大家好，这里是和你们聊设计的花生~近日，敦煌研究院和腾讯联合打造的“数字敦煌开放素材库”上线了，号称是内容最权威、最官方的敦煌学研究开发素材库，也是首个基于区块链的数字文化遗产开发共创平台。里面包含了 6 大石窟的壁画和藏经洞文献，共有 6500 份高清数字资源档案，首次全部开放给文化爱好者等群体学习使用，是极佳的敦煌文化创作参考素材库。往期回顾：精美绝伦！80000+国潮插画灵感参考素材宝库「数字文物库」大家好，这里是和你们聊设计的花生~国潮插画是近年来最热门的插画风格之一，精致华丽的风格受到很多国货品牌的青睐，此类插画也在海报、包装、文创等等商业领域有广泛的运用。阅读文章 > 一、资源简介「数字敦煌开放素材库」官网： https://ip.e-dunhuang.com/“数字敦煌开放素材库”的素材资源可以分为自选素材、壁画专题、藏经洞文献、共创作品、壁画元素和艺术摄影 6 类。其中“自选素材”以莫高窟、麦积山石窟、炳灵寺石窟、北山石窟、西千佛洞、榆林窟 6 处石窟作为分类。进入其中一个石窟后可以浏览与其相关的所有高清素材，素材根据准确的方位和空间区域进行划分，对专业学术研究非常友好。而“自选”的含义是可以通过图像选择工具一整面壁画中的一部分，然后将这部分的内容作为素材下载。滚动鼠标可以查看壁画素材的高清细节“壁画专题”将壁画以内容进行分类，包含建筑、图案、动物、服饰、飞天、舞蹈等 19 个专题，还可以通过颜色进行筛选，可以用来快速查找不同类型的参考素材。“供养人”专题细节“壁画元素”则是将敦煌壁画中的经典的形象、图案或元素抽取出来，分为线稿和彩图 2 类；“艺术摄影”是 6 大石的窟外部风景及窟内各种彩塑、壁画的摄影素材。“壁画元素”及“艺术摄影”的界面最后值得一提的是“共创作品”。这部分支持用户根据站内素材进行二创，然后将二创作品上传，官方审核通过后进入官方素材库。如果这个素材被其他用户购买，创作者可以获得对应的收益。腾讯区块链技术会对所有认证素材进行上链，让数字内容获得有效保护。如果你正好有敦煌主题的 3D 设计或插画作品，可以尝试投稿。“共创作品”界面二、素材下载方法“数字敦煌开放素材库”虽然有“开放”二字，但它里面的素材并非开源。进入官网后首先要注册才能进行浏览，如果想要下载素材则需要进行实名认证。网站内的素材根据用途进行授权，不同授权下载的图像分辨率不同。对于学术研究、新闻报道、文化弘扬等用途要收费，但是如果是仅用于个人学习、研究和欣赏，则可以免费下载。我尝试下载了一张，尺寸大于 1000px，还是比较清晰的，可以用于设计或插画创作的参考。敦煌文化艺术具有强大的生命力，近年来在国潮插画、国风设计、影视制作及游戏设计等领域有广泛应用，而“数字敦煌开放素材库”的上线无疑我们提供了一个便捷专业的平台去深入了解敦煌文化，对促进敦煌文化广泛传播和进一步发展有积极作用，对中国传统文化感兴趣的小伙伴不要错过~「数字敦煌开放素材库」官网： https://ip.e-dunhuang.com/喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读:腾讯重磅出品！2022-2023 设计趋势报告：NFT虚拟形象篇（上）拓展阅读：1. 虚拟形象的诞生-CryptoPunks2017 年，正值以太坊生态开始发力之时，原本两个不在加密货币圈子的开发者机缘巧合之下带着一万多个像素头像来到了这个生态当中，并由此开发出了世界上第一个 NFT 项目——CryptoPunks。阅读文章 > 4500张！免扣复古插图素材网站「Free Vintage illustrations」大家好，我是和你们聊设计的花生~在上周给大家推荐的 9 个高质量的免扣素材网站中，有一个高质量的复古插画网站 Heritage Library，里面有 270 套复古插图素材可以免费商用，不知道大家有没有收藏用起来呢？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/ip-e-dunhuang
语音 助手 司机 现在的汽车就像智能手机一样有丰富的功能，我们可以在车上导航、听音乐、看视频甚至订酒店。但汽车和智能手机的不同在于，司机必须为了安全把注意力放在路上，把手紧握方向盘，很多时候不能用触摸来操作中控屏。而语音助手只需说话就能完成交互，成为车载交互的主要方式之一。这次带来一篇相关研究的译文，文章的作者 Casper Kessels（德国 Snapp 汽车软件公司设计总监）通过工作经验总结出车载语音助手的具体设计指南。本文译自：https://www.theturnsignalblog.com/blog/voice-design-guidelines原文作者：Casper Kessels（德国 Snapp 汽车软件公司设计总监）往期干货：HMI设计干货！滑动和点击哪个更不容易让司机分心？车载触摸屏与手机/平板电脑最大的区别之一是使用场景 —— 车载触摸屏可在汽车驾驶使用。阅读文章 > 过去几个月我一直在研究语音助手在减少驾驶员分心方面的作用。我发现，如果语音助手的设计合理，就可能减少分心。在我上一篇文章中已经涵盖了这个理论背景，我收集了所有的研究成果，并将其转化为设计驾驶员语音助手的具体指导方针。一、通用设计原则在设计与语音助手的交互之前，考虑其在车内的环境。语音交互将影响驾驶员和车内系统的其余部分的行为。在实现语音助手时，需要考虑以下指导方针。1. 听觉信息应该与视觉信息来自同一位置人类很难在空间上划分注意力。司机专注于观察道路。为了优化司机的多任务处理能力，来自助手的声音应该与该视觉信息来自同一位置，都在司机面前。2. 总是显示系统的状态根据尼尔森的第一个可用性原则，驾驶员应该意识到系统的状态，以避免混淆。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 系统在接收、处理和输出信息时应该告知状态。此外，它应该清楚地显示错误状态。例如，开车时，网络连接通常不稳定。为了防止错误，应该让司机清楚地知道，处理一系列任务需要更长的时间。3. 允许语音或手动激活语音助手驾驶员应该能够通过语音和手动输入触发和中断语音交互。语音激活可以是一个特定的短语，比如“嘿，Eva”，或者是一个直接命令，比如“打开 Spotify”。特别是在语音激活的情况下，系统必须立即对激活做出反应。4. 注意视觉干扰与语音助手互动可能会导致视觉分心，原因有多种：当一项任务需要大量认知资源时，它会影响驾驶员的多任务处理能力，导致视觉处理能力下降。有些司机在说话时倾向于将目光投向语音助手的“源头”(例如中间的屏幕)驾驶员检查屏幕有上提示的视觉输出，以确认操作是否正确执行。确保与语音助手的交互不会造成没必要的视觉干扰。二、将语音助手与界面的其余部分紧密地集成在一起根据实现的不同，语音助手可以是车内体验的重要组成部分，也可以是一个未被使用的噱头。尽管从技术上讲，语音助手通常与其他信息娱乐系统是分开的，但从驾驶员的角度来看，这些系统应该很好地集成在一起。1. 选择最佳的输入输出方式不是每个用例都能通过语音命令获得最佳效果。测试每个交互的最佳模式。交互过程可能依赖于多种模式。例如，说出一个地点的名称比打字输入更容易。另一方面，在屏幕上选择路线可能比语音更容易。2. 允许司机说话时提到屏幕上的任何元素司机经常会说话间提到屏幕看到的内容。可能提到名称或常用术语。例如，当司机在导航系统上看到即将到来的交通堵塞时，可能会问 “堵车得多久”。语音助理应该能够推断出司机在说什么。3. 不要把语音界面做成全屏任何时候都不能阻挡方位路线或警告等信息。语音助手应该显示其状态，但不能覆盖其他元素。当语音助手处于活动状态时，司机应该能够查看屏幕上的所有内容。苹果公司改变了 CarPlay Siri 的用户界面，以防止遮挡其他元素三、个性化人类不是机器。人类使用模棱两可的语言、语气词、表情等进行交流。在与语音助手交流时也应如此。语音助理表现得越 “人性化”，其信任度和满意度就越高。1. 换着花样回答单调的对话让人犯困。在重复的任务中，语言助手的反应每次应该不一样。有一个多样化的、迷人的助手可以减少困倦。此外，语音助手应该理解和使用“人类”的对话模式，如歧义和语气词。此外，一定要使用主动时态，并找到正确的形式，这可能取决于文化。2. 匹配司机的性格和情绪许多研究表明，与司机的个性和情感状态相匹配可以大大增加信任度和满意度。但要注意这一点，个性和情绪的不匹配将会产生不利影响。3. 注意司机所处的场景如果助手能够了解驾驶员的环境，例如位置、天气、乘客数量和以前的交互，那么交互效果就会得到很大的改善。四、错误处理语音助手的主要挑战之一是处理错误。与视觉界面相比，说话障碍更难纠正，并导致更大的压力。这就是为什么我们更加关注预防错误的原因。对于每个交互过程，设计人员应该记住并测试可能发生的错误，并找到预防错误的方法。1. 直接提问让司机更容易回答问题。避免使用开放式问题以避免混淆或不必要的答案。2. 防止错误循环，如果发生误解，应该改变提示当司机不明白什么地方出错了，他们可能会重复相同的答案，导致错误再次发生。在误解发生后，一定要改变提示，为恰当的回答提供更多的上下文和线索。然而，当重新提示时，一定再次给出相同的上下文。当危险的交通状况发生时，司机会认知上“关闭”语音助手的声音。假装什么都没听到。3. 适应用户的能力水平初学者需要更多的信息才能理解系统的局限性。通过与这些用户沟通，提供改进交互的方法来帮助他们。如果司机使用未知命令，请提供备用选项。五、适应驾驶场景正如我在之前的文章中所解释的，减少分心应该是设计师的主要目标。如果设计得好，语音助手在这方面是一项很有前途的技术。在设计驾驶语音助手时，需要考虑几个不同于典型语音助手场景的因素。1. 尽量减少交互次数司机的重点是安全驾驶。语音助手应该尽可能有效地进行通信，以最大限度地减少驾驶员与语音助手交流的时间。以下是如何实现这一目标的 3 个例子：① 保持交互简短，用自然语言② 不要问没必要的问题③ 如无必要，不加提示2. 在司机不忙的时候传递信息当汽车处于平静的环境中时，传递语音信息是最理想的。人们认为音频信息比视觉信息更重要，更能吸引注意力。在关键时刻（比如开车躲避障碍物）传递消息可能导致司机无法作出适当反应或忽略消息。3. 更长的等待响应时间，因为司机可能另有安排如果交互发生在关键时刻，司机会优先处理手头事务，直到情况有所改善。要知道说话比听需要更多的认知资源。司机可以在句子中间暂停，或者比平时等待更长的时间来回答。语音助手应该在取消整个交互过程之前考虑到这一点。4. 让司机控制语音助手考虑让司机控制交互的速度。允许他们轻松地暂停或打断，以便他们可以在喜欢的时候继续。最后愉快地探索语音助手如果你是一名汽车行业的设计师，你应该认真对待语音助手，并在设计过程的早期就将其纳入其中。这比你想象的要容易得多。现在有一些很棒的工具可以用来制作语音交互的原型。我喜欢使用 ProtoPie，它针对汽车应用有专门优化。有很多机会可以改进与语音助手的车内交互，但只有在体验探索之后，你才会知道什么是可行的!本篇来源：优设网原文地址：https://www.uisdc.com/voice-design-guidelines
网站 素材 高质量 每个设计师在设计过程中，都会用到 PNG 图片。对一些设计师而言，手动抠图有两个弊端，一是达不到理想效果，二是会浪费很多时间。所以， 今天给大家分享 8 个 PNG 免扣素材网站，帮助大家提升设计品质与效率。往期PNG素材推荐：超全整理！设计师必备的9个高质量免扣PNG素材网站大家好，这里是和你们聊设计的花生~前几天看到有小伙伴在优设问答里问有没有高质量的免扣PNG素材库推荐，答案是当然有啦~ 其实优设已经为大家推荐过不少PNG素材网站，我将这些资源都梳理了一遍，挑选出其中9个资源质量较高且可以免费商用的网站，整理成了这篇合集， 方便大家之后查询使用，需要阅读文章 > 一、PurePNG网站链接：https://purepng.com/（需梯子访问）PurePNG 是一个由创意人士组成的社区，提供了 31000+ 高质量 PNG 图片，包含了动物、建筑、名人、剪贴画、电子产品等多种分类，可免费下载使用。二、Stickpng网站链接：https://stickpng.com/StickPNG 是一个由创意人士组成的充满活力的社区，提供了 50000+ 高质量 PNG 图片，无需登录即可免费下载，并可以将这些图像用于您的个人非商业或教育项目。三、PngTree网站链接：https://pngtree.com/PngTree 拥有数百万免版税高质量 PNG 图片，每日更新 500+。除此之外，网站还提供海报设计模板和文字效果以及插画素材，每天可以免费下载 2 次。四、CleanPng网站链接：https://www.cleanpng.com/CleanPng 拥有超过 3,000,000 张透明 PNG 图片，50000 多个类别，无需登录即可免费下载所有图片，并且没有次数限制。五、Pixelsquid网站链接：https://www.pixelsquid.com/PixelSquid 是一个 3D 图库，拥有近 20000 个可以旋转的 3D 对象，包含了人物、家具、自然等多种分类，并且提供免费的 PhotoShop 插件，您可以在图形设计项目和工作流程中轻松使用它们。六、PngMart网站链接：https://www.pngmart.com/PnrMart 拥有海量的 PNG 图片，包含了动物、艺术、时尚、游戏等多种分类，无需登录即可免费下载。七、PngAll网站链接：https://www.pngall.com/PngAll 是一个由创意人士组成的社区，拥有海量的 PNG 图片、矢量背景和剪影素材。在这里你可以搜索到任何想要的图片，无需登录即可免费下载。八、Silhouetteac网站链接：https://silhouetteac-cn.com/Silhouetteac 拥有 200，000,000 图形资源，可以免费下载使用。更多素材推荐：4500张！免扣复古插图素材网站「Free Vintage illustrations」大家好，我是和你们聊设计的花生~在上周给大家推荐的 9 个高质量的免扣素材网站中，有一个高质量的复古插画网站 Heritage Library，里面有 270 套复古插图素材可以免费商用，不知道大家有没有收藏用起来呢？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/8-png-websites
作品 插画 风格 在文章《审美养成系列之我的私藏插画师作品集（第一季）》中，我们详细介绍了 8 位我非常喜欢的插画师和他们的作品，这一篇文章，我继续把自己的私藏心水掏出来和大家分享，仍然选齐了 8 位我所喜欢的插画师。审美养成系列！8个我私藏多年的插画师作品集（一）大家也许都知道，学习设计，提高审美，第一件事就是打开优秀作品集，不断给自己的眼睛充电。阅读文章 > 大家知道我一直很强调原创，能形成自己原创的独特风格的插画师其实并不多，在扁平插画这个领域，偶然能遇上一个我也会如获至宝。他们的作品一直在帮我拓宽对于插画的理解，也帮我看到插画创作的可能性。走马观花看一千个作品，不如好好静下来研究一副作品。他们每一个人的每一种风格都具有耐人寻味的细节，如果不仔细看，也很容易点“赞”以后匆匆离开，其实并没有太大收获。你们能从这些作品里看到，一种风格的形成，背后需要的是不断的大胆尝试的野心，和对安全感的抛弃。独创需要的也是一种独行侠的精神。不管怎样，这种精神总是能给我们带来惊喜！一、Idan Barzilay：柔和的光线1. 看点idan 的插画非常接近水彩质感，虽然部分作品仍然是经由软件才能实现的光效，但画作的底层逻辑仍然是水彩，尤其是对于光影的描绘和形态的不可捉摸，形状自由感，强化了这一印象。在造型方面，idan 也是别具一格，简约空灵。他非常擅长描绘人物以及人物的衣服折痕布料的轻盈感，利用光影制造体积感，结合配色中本身所表现的柔和感魅力，让 idan 的插画风格独创、深具开拓性。2. 食用方法如果你有水彩笔刷，就可以用水彩笔刷去临摹 idan 的插画，一笔一画感受他对光影的表达。其实 idan 的光影表现非常简单，并没有多么复杂的技巧，作品的优势仍然是体现的构图、配色和光影这个层面上。如果是用软件，试着去理解光影的表现手法，尤其是多层次的光影特色，在作品中非常明显。这一点是值得慢慢品味的。3. 更多作品网站链接：https://dribbble.com/idanbarzilay二、Brad Cuzen：线条的魅力1. 看点作品中人物的造型和色彩都很时尚，Ta 非常善用运用线条来表现衣服的造型质感，在扁平插画的简洁中增加了几分手绘的魅力。尤其是在设计小场景的时候，大量的手绘线条的运用，可以替代部分的质感，让画面显得生动有力。色彩本身很饱满、简洁，单色平涂就能设计出活泼可爱的作品。2. 食用方法在矢量的扁平插画之上，试着运用线形组合来表现造型，尤其是线条需要具有手绘感，搭配以单色的简洁色彩，就能有效临摹出插画中的趣味。3. 更多作品网站链接：https://dribbble.com/bradcuzen三、Febin Raj：高保真风景1. 看点Febin_Raj 的作品都是风景居多，且具有类似照片一样的对自然光影的表现力，风景看起来恢弘大气，简洁中富有形块的韵律，色彩搭配游刃有余，让人惊叹。在建筑造型上是偏写实的，结构感非常强烈。颗粒的运用也很克制，虽然是均匀平铺，但在不需要颗粒的部分也做了平滑处理，并没有整图平铺，而是在不同的材质上、不同光线下运用了不同的颗粒大小。2. 食用方法要临摹 Febin 的作品，需要是对形的简练概况程度，线条的精准度以及对透视的把握能力。尤其是写实的画面更是需要严谨的制图态度。对于颗粒的运用非常清晰明了，绝不能整图平铺。3. 更多作品网站链接：https://www.behance.net/febinraj四、Diana Traykov：像儿童那样去画1. 看点Diana Traykov 的作品非常童趣天真，尤其是她对人物的造型还在探索阶段，但每一次探索都能看到她对人物造型的大胆表达。她的构图也是随性而为，并没有严格的规律可循。这和上一个插画艺术家 Febin 的严丝合缝的创作截然不同。2. 食用方法临摹 Diana 其实最重要的是学会她背后的随性自在的创作思路，技法都非常简单，甚至只是简单的色块堆积。这也是临摹过程中最困惑的问题，很多人临摹的作品都很好，但自己无法原创也就是因为背后的创作思路是被架空的状态。3. 更多作品网站链接：https://dribbble.com/dianaxstoyanova五、Linn Fritz：极简形块1. 看点Linn 的创作很像我们在第一季中的 Ana Duje 的风格，只是 linn 的风格更为简约，极少用到纹理，色彩也相对比较柔和，最大程度的表达出极简感，细线条风格强化了这种感觉。linn 的作品中最值得看到的还是创作的思维，对于画面感的呈现，几何形体被运用得恰到好处。2. 食用方法要临摹 TA 的作品需要的仅仅是出于对夸张人物的了解，而其中的技法仍然是简单的。需要重点关注到的是形色的表现力。这是在简约风格的插画中非常明显的一个点。3. 更多作品网站链接：https://dribbble.com/linnfritz六、Xuan Loc Xuan：青春梦幻篇1. 看点Xuan Loc Xuan 的插画作品里有一种清新感觉的少年气息，作品主角都是少男少女和植物动物。人物的画法比较具象，但单独每一个形又是抽象的，带着独有的统一的质感，有非常明显的纸质纹理，具备水彩画的视觉特点。2. 食用方法技法上的独特魅力仍然来自于水彩功底的精湛和独到，除此而外，你可以选择运用他的表现手法，丰富的人物和植物以及动物做出的有机组合，撞击出别出心裁的想象力。3. 更多作品网站链接：https://www.behance.net/xuanlocxuan七、Kirsten Ulve：抽象的玩法1. 看点Kirsten 的插画风格是绝对的矢量和绝对的抽象，它的风格非常具有时尚感、女性主义的精致细腻，画风几乎无人能仿效。矢量插画在大家的眼中，几乎是很难保留自身的特点的，其他插画风格的笔触，用矢量画出来的时候几乎看不到。但 Kirsten 把形色玩到了极致，让其他画手可望不可及。2. 食用方法你几乎就可以放弃临摹 Kirsten 的插画，和 Malika 的插画一样，她的极简，让技法消失了。在作品中，看不到技法的痕迹。与其临摹，不如学着运用她的作品中的风格元素进行创作，小圆点、线条等，抽象的表达法，这里你可以找到端倪。3. 更多作品网站链接：https://www.behance.net/kirstenulve https://www.kirstenulve.com/八、ellice weaver：人间四月天1. 看点一个已然具备自身风格的插画师，在创作的主题上也会比较明确的对象。比如 ellice weaver 就是以多人物场景作为主题，风格温暖、人情味十足，每一幅都是热闹的生活场景，安静不张扬，但富有情调。质感运用得恰到好处，也很克制，同时具备手绘的随意感和矢量的内部形态。2. 食用方法临摹 ellice weaver 的插画是非常舒服的一件事，因为在寻找质感的时候，也不知不觉进入了形色的迷宫，开始了自己的探索。他的作品会带你不知不觉进入探索之中。3. 更多作品网站链接：https://www.ellice-weaver.com/这五位顶尖插画师的作品，是我每日学习的源泉!（地图插画专题）大家好呀，我是和你们聊设计的花生~之前为大家推荐地图素材资源的时候，提到一种优化地图的思路是使用插画类地图，而在插画类地图中矢量地图在创作上比手绘地图更加简单高效。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/8-illustrator-2
小技巧 颜色 快速 大家好，这里是和你们聊设计的花生~之前和大家分享了 4 期提升 Ai 文本排版效率的小技巧，很多小伙伴都说非常实用。这段时间我又学到了不少新的 Ai 小技巧，冷门但可以有效简化一些操作步骤，今天就先整理其中五个分享给大家~往期回顾：掌握这5个Ai小技巧，帮你快速提升文字排版效率（四）大家好，我是和你们聊设计的花生~今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~上期回顾：1. 设置网格并转换为参考线在进行折页或者画册设计时，为了保证版面的整洁有序、信息清晰传达，设置网格是必然可少的一步。阅读文章 > 一、快速切换填色模式之前想填充渐变色时，我都是用鼠标在左侧工具栏里点击渐变色，后来发现其实纯色、渐变和无填充三个选项都有快捷键，分别是""、"/"，也就是半角键盘状态下的逗号、句号和顿号键。选择对象后使用快捷键可以快速在三种状态间切换，比鼠标操作更方便。二、内部绘模式Ps 里的“剪切蒙版”可以让顶部图层的内容局限在底部图层内部，其实在 Ai 里面也有一项功能可以实现同样的效果，就是“内部绘图”模式，快捷键为 Shift+D。使用这个快捷键可以在“正常绘图”、“背面绘图”和“内部绘图”三种模式间快速切换，满足不同的绘图需要。（进入内部绘图模式后对象四周会出现虚线标记，如果内部绘图模式无法选取，可以右键选择“取消编组”或“释放剪切蒙版”）。三、快速切换边角样式Ai 里的边角样式有“斜接”“圆角”和“斜角”三种，通常是点击顶部工具栏里的“描边”选项进行修改。其实边角样式也有快捷键，具体的操作方法为：用直接选择工具选中需要修改的边角，在鼠标右下角出现小标记时，按住 Alt 键再次点击这锚点，就能在这三种样式中快速切换了。四、吸取局部颜色使用吸管工具吸取其他对象的颜色时，会将该对象的颜色完全复刻过来。如果我们想只取其中一种颜色，可以在取色的时候按住 Shift 键。用这种方式我们可以只吸取渐变色中的一种，或者只吸取描边的颜色。（Tips:通常我们先选中 B，然后用吸管工具去吸取 A 的颜色，则 B 的颜色变成和 A 一样。如果我们选中 B 后，按住 Alt 键用吸管工具点击 A，那会变成 A 颜色和 B 一样。）五、矩形橡皮擦再给大家介绍一个有关橡皮擦工具的新用法。Ai 里的橡皮擦是圆形的，用它来擦除形状时边缘总留下弧形，如果想让橡皮擦变成方形，可以在使用的时候按住 Alt，就能像拉取矩形选框一样删除不需要的部分。以上就是为大家推荐的 5 个冷门但实用的 Ai 小技巧，赶快打开软件亲手操作一遍吧 ~ 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：简单又实用！5种设计师必学的海报设计装饰元素（三）大家好，这里是和你们聊设计的花生~今天继续为大家带来海报设计常用 装饰元素 的第 3 期，本期的元素分别是：英文字体、中心辐射线、心形、镭射风及卡通风贴纸和渐变波点，并有超多实用教程和免费可商用资源分享给大家，一起来看看吧~上期回顾：一、英文字体英文字体在海报设计中很常见阅读文章 > 让版式更好看！7个字体排版设计小技巧今天这篇文章比较偏基础，但胜在讲的很全面，自己做项目的时候也可以拿来自检。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-ai-tips-5
按钮 形式 需求 签到的存在不仅可以增加用户的黏性，也是激活用户参与度的关键因素之一。签到按钮在 UI 设计场景中，算是较为常见的一个类型，一个好的签到按钮不仅可以提高用户的关注度，也能激发用户的点击欲。这就是给你的一个关于签到设计的小需求：这个小需求看起来很常见，交互设计也许给你的是签到两个字，也有可能帮你画了一个外框。总归它是显得很普通的，是不是没有一点设计感呢？那我们如何去增加设计感，还要有自己的特色，做出一个差异化的签到按钮呢？让我们带着这个问题，和黑马哥一起卷起袖子开干吧！签到功能交互设计分析：签到功能该怎么设计？从12个方面详细解析！本文是关于签到功能的视觉汇总分析。阅读文章 > 一、签到设计的类型在开始案例实战之前得先梳理一下关于签到设计的类型，方便我们挑选出最适合当前产品的风格。1. 纯文字形式纯文字形式属于最为简单的样式，有直接文字展示、文字带下滑线、文字加箭头等，这个形式不是很建议，缺少设计感和用户关注度。2. 按钮形式为了提高签到的点击属性，通常以按钮的形式设计较为稳妥，也就是我们说的签到按钮。按钮通常是带圆角的和全圆角形式，也分为线性外框、面性外框、质感外框等。想要设计得比较突出，通常会在按钮的质感上面进行视觉表现，增加光影质感和纹理图形等装饰。比如：极光风（弥散光）、流体渐变、图形纹理等都是不错的方向。3. 文字加图标形式在签到按钮的基础上，进行进一步强化就会配合图标或者图形进行视觉感增强。图标设计的角度出发发挥性也比较大，便于设计师做出更多方案。图形的角度可以是 IP 形象的结合，不仅可以提高情感化设计，也能做出差异化的设计方案。4. 微动效的形式微动效相较于静态表达来说，自然是要更为突出一些，签到按钮动态形式也是较为常见的存在。如果想要突出签到设计，微动效的表达是不会让你失望的。5. 特殊造型形式常规的形式依然离不开按钮的表达，为了打破常规形成差异化的设计，在签到按钮造型上面也是可以进一步深思的。在能够体现出点击属性的前提下，我们可以结合产品属性和业务特征，探索出符合属性范围的造型，也能使得签到设计更有特色。小结当我们梳理了一些常见的签到设计类型之后，就可以结合需求选择比较贴合的形式。当然，也可以创造出不一样的设计，下面就和黑马哥一起来演示一下吧！二、签到按钮设计实战需求：为一个充电桩产品设计签到按钮，需要体现出产品的服务属性，也要能变得更有特色。UI 设计师拿到这个需求都会觉得：这个也太简单了。于是就会快速的做出几个样式，虽然毫无设计感可言，但是老板喜欢就可以啦！不过，如果老板不喜欢呢，有没有思考过如何留有后手。1. 分析总结无论需求的大小，个人都会先进行一些简单的分析和总结。要知道别人做出来都是啥样式，然后再总结这些设计都有什么方法论。也就是本文开篇总结的一样，虽然很简短，但是总结有助于让自己更有把握。2. 梳理关键词关键词梳理可以打开我们的思路，虽然只是一个按钮，但是我们也可以通过关键词发散出更有意思的设计表达。比如充电桩这个产品我们可以梳理出哪些关键词呢？3. 绘制草图如果根据关键词都去进行电脑绘制比较耗费时间，先进行一些初步的草图有助于灵感的快速表现。4. 确定思路通过草图我们可以发散思维，选择出几个具有代表性的方案进行电脑绘制。这里黑马哥选择了电池这个表达作为示意，不仅可以体现充电的概念，也能体现出设计差异。5. 绘制初步造型只要思路确定了，绘制起来就比较快啦！快速把电池的造型绘制出来，然后再结合按钮的特征进行微调，以满足“签到”文案在造型轮廓中的布局。6. 初步配色确定造型后进行了初步的配色，利用大色块把整体的配色关系体现出来，这里也要思考动态表达的色彩关系。7. 质感深入很多设计师都只是进行简单的层级表达，缺少质感深入的技巧。我们要通过色彩变化体现出造型的结构特征，也要通过光影处理把电池的质感强化出来。8. 字体处理大部分情况下对于 UI 设计师来说都会选择一些常规的系统级字体，不过这里作为一个按钮来说我们在字体的选择上面可以突破。这里我选择了阿里妈妈数黑体作为签到的字体，然后也进行了一些质感处理，贴合电池按钮的设计表达。9. 最终效果通过对字体和电池造型的绘制，完成了这个不一样的签到按钮。我们再将按钮放到界面场景中看一下，最后结合界面的背景做一下投影等处理，这个关于签到按钮的小需求就搞定啦！小作业以上的静态方案算是完成了，这里也给大家布置一些发散的小作业。如果要做动态表达，你会如何做？如果这里要体现签到送礼，不改变当前设计基础的前提下，你会从哪些方面入手？欢迎大家进行思考，尝试去完成这个小作业，大家有什么新的想法也可以微信黑马哥进行交流。三、小结通过一个关于签到按钮的小需求和大家进行了一些设计交流，设计的思考带有一定的主观性，我们在自己的需求中还需结合实际的情况做出调整。需求不分大小，每一个从自己手中出去的设计方案，我们都要尽力做到最完美，体现出自己的职业态度和设计能力。本文观点仅作为个人经验表达，如果觉得不错我们互相进步，如有不足欢迎大家留言补充。欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/sign-in-function-design
表哥
飞翔的企鹅
落霞与孤鹜
在路上
张大湿
