元素 互动 用户 前言当我们提及“动效设计”这一词，第一印象往往是那一类炫酷的极具视觉表现力的动效，而有一类动效，它们如春风细雨般融入了用户交互过程的点滴之中，为打造符合用户心智的流畅体验默默做着贡献，它们就是「交互动效」。本文将从以下三个方面展开介绍——「什么是交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」，带领大家了解交互动效的基础概念，以及具体的设计流程方法，希望大家看完后能够对交互动效有更加清晰的认知。更多动效设计干货：新手科普！交互动效基础知识入门什么是交互动效界面交互动效：用户与界面进行交流互动时以动效的形式进行信息传达。阅读文章 > 一、什么是交互动效？交互动效指的是那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。与视觉动效不同的地方在于，交互动效主要作用于产品的基础体验和功能体验层面，为用户营造更加自然流畅的体验。而视觉动效除了在功能体验层面能帮助用户降低理解成本之外，更多作用于情感体验，增加产品趣味性、传递产品调性，目的是引起用户的情感共鸣，调动用户的正面情绪。交互动效&视觉动效示例交互动效与视觉动效的影响范围差异二、为什么要重视交互动效？在实际的项目中，交互设计师往往会先处理任务流程和页面信息设计。在设计工作量大、时间紧张的时候，很可能遗漏掉需要增加交互动效的细节，到点检验收的时候才发现这些问题，这种情况在新人设计师中较为常见。在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。验收阶段才发现动效问题的尴尬必要的场景缺失动效直接上线，可能会产生以下的体验问题：不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。动效缺失产生体验问题例子总的来说，不注重交互动效将会给产品体验埋下各种体验问题隐患，加上进入互联网下半场后，互联网产品将会更加注重设计上的精致精细度。由此来看，掌握系统化的动效设计方法，已然成为设计师们的必修课。三、交互动效的设计流程和方法1. 动效评估在设计之前，我们需要先判断是否真的需要做动效？不能为了做动效而去做动效。① 场景聚焦首先，我们需要知道，什么样的场景适合做交互动效？可以总结为以下三类场景：三种适合做交互动效的场景「场的变化」指的是用户需要从产品中的一个「场」到另一个「场」，发生在页面间的转场、或页面内的转场。「场的变化」相关例子「内容的新增或减少」指的是由于用户的交互行为，导致页面中的内容（模块、组件、元素等）产生新增或减少。「内容新增/减少」相关例子「元素的属性变化」指的是由于用户的交互行为，导致页面中的元素属性产生变化，例如位置改变、状态变化、值变化等。「元素属性变化」相关例子② 优先级评估筛选出适合添加交互动效的场景后，我们需要评估在这个场景中做动效的优先级。判断做动效的必要性，可以从以下四个维度从高到低的维度去进行优先级评估：「一致性」——如果某个场景已经有定义好的动效规范，原则上需要遵循规范进行适配，以确保全局动效体验的一致性。这一个维度对于那些存在动效语言的产品是非常重要的，一致性是为整体产品调性和品牌所服务。例如iOS在全局都保持了高度统一的动效体验，如果某一个组件缺失了用户习以为常的动效，很容易被用户感知到且产生对品牌的负面评价。「帮助用户理解」——不加动效是否会影响用户对当前页面变化的理解？如果因为缺失动效，在元素关系、页面层级、状态变化上造成用户较大的困惑，影响了用户体验，那么在该场景下添加动效的必要性是较大的。「提升流畅度」——不加动效是否会影响视觉层面和操作层面的流畅度？即视觉上是否会产生闪跳、突变等卡顿感，操作上是否实时反馈、符合用户预期。「引导注意力」——页面中的元素是否需要通过动效来引导用户的注意力？会不会对用户造成不必要的打扰？有时候产品会出于业务诉求希望通过动效的手段来引导用户注意力，达到业务的目标，但是我们需要站在用户的角度去思考用户的注意力是否应该被引导，不让动效成为对用户的干扰。动效优先级评估2. 动效设计① 动效原则设计原则用于指导我们设计动效的方向，确保不偏离正确的方向。结合行业内的各类动效规范的设计原则，我们总结出以下六个通用性较高的设计原则： 舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。交互动效设计原则② 动效属性变化一个完整的动效是由不同元素的不同变化组成的，常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...动效常用变化类型时长小于 200ms 的动效不易被感知，多于 1000ms（1s）则让用户感到缓慢，交互动效时长一般在 200ms-500ms 之间，我们在设计时长时，可以从以下几个因素进行考虑：i）复杂程度：复杂的动画比简单的动画需要更多的时间来表达动效复杂程度对时长的影响ii）区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短动效区域范围对时长的影响iii）入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中动效入场/退场对时长的影响曲线曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。以下是三种常用的曲线类型：i） 加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。加速曲线示意ii） 减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。减速曲线示意iii） 缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。缓入缓出曲线示意③ 动效编排动效属性是针对单个元素进行设置的，那么如何对多个元素进行动效组合和编排？下面提供一些动效编排的技巧： 淡入淡出淡入淡出是通过透明度变化来实现过渡转场，也是最简洁实用、最常见的一种类型。其分为「单向淡入淡出」、「交叉淡入淡出」和「错开淡入淡出」i） 单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。单向淡入淡出示意ii） 交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。交叉淡入淡出示意如果退场元素和入场元素在视觉样式或者布局结构上差异较大，交叉淡入淡出可能会带来视觉上的混乱，这时候可适当错开出场元素淡出和进场元素淡入的时机。可通过错开元素进出场时机避免带来视觉混乱iii） 错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。错开淡入淡出示意 一镜到底一镜到底是通过共享元素、容器和动势来进行转场过渡的一种编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的编排方法。i） 共享元素共享元素是转场前后持续存在的界面元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感。共享元素转场示意ii） 共享容器当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。共享容器转场示意在使用共享容器转场时，有以下原则需要注意：原则 1——尽量减少独立移动的元素数量。多个元素运动会争夺并分散注意力，我们可以通过淡入淡出减少元素移动，让注意力更聚焦。原则 1：避免过多独立移动的元素原则 2—— 避免焦点元素在运动过程中和其他元素重叠。焦点元素和其他元素运动轨迹重叠会产生杂乱无章的过渡，同样地，可以用淡入淡出来简化运动。原则 2：避免焦点元素运动轨迹和其它元素重叠iii） 共享动势无法通过补间变化来实现柔和过渡，可以提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。共享动势效果示意其它编排技巧i） 运动路径如果转场中的元素沿对角线移动，线形运动路径具有简单而实用的风格，而弧形运动路径则创造了更加强调和戏剧性的风格。线形和弧形运动路径差异对比ii） 振荡一般情况下，转场动效在到达终点时会结束。当添加振荡时，过渡路径至少超过其端点一次，然后反向返回端点。振荡可以用来表达一种更加俏皮和充满活力的过渡风格。有无振荡差异对比iii） 纵深变化一般情况下，背景内容在容器变换过渡期间保持静态。可以通过动画背景内容的比例来强调纵深变化。这种通过强调前景和背景内容之间的距离，使过渡看起来更加生动。有无纵深变化差异对比iv ）交错一般情况下，入场元素会打包为一个组进行处理。「交错」是指通过对组中的元素应用短延迟，创建一种级联效果，将注意力非常短暂地集中在组中的每个元素或个别元素上。通过交错将注意力短暂地集中在每一项上交错还有可以用于强调页面元素，将需要强调的页面核心操作或元素在其他元素入场完毕后完成入场，能够吸引用户注意力，完成视觉引导。通过交错突出核心元素③ 动效落地尽管我们把动效设计得再精美，最终还是要靠开发大哥们把它还原出来。交互动效需要开发通过代码来实现，因此动效标注如何让开发看得懂且能理解，就尤为重要。这里推荐大家使用参数化的表格来进行标注，转场动效的标注文档中需要包括以下要素：动效 demo 附件：方便开发直接查看整体的动效效果触发条件：说明动效发生的条件，即用户通过什么行为触发该动效元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意变化属性：元素的什么属性发生，例如透明度、位置、大小等等动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参数转场动效标注文档示意手势动效的标注和转场动效略有不同，因为手势动效是跟手的效果，不像转场动效是在固定的时长内完成，因此不需要描述时长相关的参数和动效曲线，取而代之的是需要描述清楚页面元素跟手的联动关系。手势动效标注文档示意在动效验收的时候，如果发现有还原问题，那么可以将没有按照设计标注来做的地方在表格中圈出来，帮助开发快速定位问题，提高沟通效率。在验收环节运用标注文档定位问题结语交互动效作为提升产品精致精细度的必不可少的要素之一，也是作为设计师不可或缺的技能，本文给大家讲解了从动效评估-动效设计-动效落地的全流程方法，希望能对大家了解交互动效、上手交互动效设计有一定的帮助。当我们希望给用户带来不一样的惊喜和极致体验时，不妨试一试从交互动效入手。参考资料及部分示例图来源：material.io/design/motiondeveloper.harmonyos.com欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/interactive-effect-design-guide
布局 元素 项目 写在前面近年来，三星、华为等手机厂商陆续发布 Galaxy Fold、Mate X 等折叠屏手机。其普及速度似乎超过了人们的想象。2021 年 12 月 2 日，根据屏幕机构 DSCC 公布的一份最新研究报告指出：2022年第三季度，折叠屏手机的总出货量环比增加了 215%、同比更是暴涨 480%。折叠屏手机从折叠的方式和角度可以分为：内折叠、外折叠、X 轴折叠、Y 轴折叠等，目前这四个方向均已落地在各大产品中。其中最常见的使用状态有折叠状态和展开状态。折叠屏展开下屏幕变宽，给用户带来了更高效的信息展示和更加沉浸的浏览体验。从曲面到大屏再到折叠屏，这一概念的想法已经成为现实，屏幕宽窄的变化给体验设计也带来新的挑战，为了保证不同宽度下的使用品质，我们采用了响应式布局的设计策略来解决适配问题。本次笔者将从最常见的 X 轴折叠的方式（以华为手机 Mate X 为例），对响应式布局技术进行探索。折叠屏设计指南：Material Design 折叠屏设计指南：完结篇本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。阅读文章 > 二、什么是响应式布局形容响应式布局最贴切的一句话为“Content is like water”，即:“如果将屏幕看作容器，那么内容就像水一样。”通俗来说，「响应式布局」就是一套代码、一种设计语言同时兼容所有尺寸及终端，由一个网站转变成多个网站。在以前，响应式布局更多用在 PC Web 上，随着平板、大屏手机等等移动设备的普及，响应式布局越来越多地运用在移动互联网来解决多端浏览体验。二、响应式布局策略简单地说，页面设计可拆解为“基础元素(文字、图标等等)”、“页面布局(元素的组织形式)”、“信息架构 (页面之间的跳转关系)”3 个环节。在适配时，页面各元素粗暴地等比放大并不能保证不同屏幕尺寸下的浏览体验。为了建立科学可复用的适配体系，我们将从这三个环节分别解决适配问题。1. 基础元素基础元素包括文字、图标、按钮、图片素材等。我们通过观察发现，在展开态和折叠态下用户的浏览距离没有明显的变化，因此要避免展开时元素太大影响体验，在适配时用相同的大小比例即可。在特殊场景比如大段文本类页面时可以适当放大 1.2 倍比例。2. 页面布局常用的适配方式有拉伸布局、相对缩放、扩展布局、挪移布局等：拉伸布局各元素的显示宽度不是固定值，而是通过相对参照物的方式来确定其位置，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。相对缩放布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。扩展布局当组件内元素横向布局，元素间的距离固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。利用屏幕的宽度优势，将相同属性的布局组件横向并列同时排布。挪移布局布局内的元素根据屏幕的宽度来选择是上下排布还是左右排布。3. 信息架构前面提到的 2 点是对于单个页面的适配策略，在展开时，屏幕尺寸的增加也为信息架构的调整带来更多可能。例如社交软件主页，在折叠态时需点击某个聊天列表跳转进入对话详情，但是在展开态时会适配成“好友列表+对话详情”的形式来体现层级关系三、项目实战了解完通用的适配策略后，我们以平安集团个金业务线 “任意门”产品为案例，和大家分享是如何把这些理论知识运用到实际项目，并且推动项目落地上线的。1. 团队内部宣讲与价值说明由于本次项目会用到大量资源，我们在推动前，首先与业务方，主管，开发等内部成员组织了一次宣讲会，会上阐述本次项目要解决的问题和价值说明，得到大家认可后，一起决定去做本次项目。这一步是最关键也是起初就要做的，设计师往往自己先埋头做完设计然后再推动，但结果经常会很难推或者推不动，殊不知达成团队意识的统一是在执行前更重要。2. 适配体系建设在内部获得认可后接下来就是设计师进行具体方案设计了。由于任意门业务复杂，为了便于团队协作、保证体验一致性以及后期维护，我们结合前文提到的理论知识，建立了关于任意门的响应式适配体系：制定全局删格系统为了页面设计在不同屏幕宽度时的一致性和规整性，我们先制定了一套同时适用于宽屏和窄屏的删格系统。在制定删格系统时，需要考虑列数和水槽间隔以及安全边距。我们在本案例中利用等分列数，在折叠态使用 4 列，在展开态使用 8 列等分，另外水槽间隔为 8pt、安全边距 20pt。统一基础元素适配规则前文提到通过测试发现用户在展开态和折叠态下浏览距离没有明显的变化；另外也从实际考虑任意门业务复杂，二三级页众多，点对点修改成本高，为了团队提效，我们在适配时采用「文字、按钮等基础元素大小没有变化」这一策略进行标准化适配。建立模版组件库对于经常用到的组件，我们针对展开态建立了标准的组件库，以便于开发和后续设计同学延展。以金融行业经常用的产品卡片为例，我们发现在不同链路中都会有此类卡片的展示，通过对使用场景的梳理和分析，制定了统一的组件，团队内部直接挪用即可。再以常见的资源位为例，我们分别对 1 张、2 张、3 张的情况都制定了对应适配规则，在其他业务场景上直接复用即可拆分排期和保障机制输出完设计稿。最后就是开发落地了。由于版本迭代周期短，我们决定对项目进行拆分排期。本次项目是由设计师发起的，因此也承担了项目管理的角色。我们制作了项目周期表方便后续管理。同时，建立了「方案评审-开发-设计验收」保障机制，保证最后落地效果。通过以上策略，我们既可以快速地批量进行输出，又能保证体验一致性。五、写在最后在实际项目迭代中开发资源相当紧张，我们通过响应式适配策略既解决了折叠屏不同状态下的用户体验，又相对节约了人力成本。作为本次项目的发起者，设计师也获得了团队内部认可和好评。也在此感谢产整个团队的全力支持，在追求体验的路上没有尽头。参考文献《华为折叠屏应用开发指导》https://developer.huawei.com/consumer/cn/doc/90101本篇来源：优设网原文地址：https://www.uisdc.com/folding-screen-adapter
元素 主体 素材 大家元宵节的设计都做了没，今天给大家带来的是关于元宵节的案例实操，同时也会给大家提供一些小方法帮助大家能更快速高质量的出稿，希望对大家有所帮助~更多海报设计教程：借势海报必看! 二十四节气之立春海报设计常用意象总结大家好，这里是和你们聊设计的花生~春雨惊春清谷天，夏满芒夏暑相连。阅读文章 > 往往做不出来设计，就是这三个问题。元素方面还比较简单，这么多年过来了基本什么灯笼啊元宵啊，月亮孔明灯之类的都可以用，最关键的还是分清作用。例如元宵一看就很简单，但是一碗元宵这就比较复杂，或者月亮相对简单，灯笼较为复杂，当然不能一概而论具体素材还得具体分析。这里的其实大部分元素都属于简单元素，它的特征就是重复的大量的，外形相似的，细节较少的。而复杂元素的特点正好相反，画面中突出的，细节丰富的往往属于复杂元素也就更适合作为画面的主体。这个处理非常巧妙，大量的圆形重复不仅塑造了背景还塑造的氛围以及前后纵深，最重要的是在核心主体上添加了细节让其放大是有东西可看的。配色方面可说的点很少，基本都是白色黄色红色的组合偶尔也有橙色的表现，不断变换比例穿插，大体都是暖色红色背景为主。但是最近两年也有地产的不按照常规路子来，适当牺牲节日的调性氛围转而从抬高品牌调性的。那么如何深化画面呢？如果只能让我推荐一个方法，显然简单元素的重复使用是很好的选择。大家可以先观察一下这个设计是如何重复的。显然周围环绕的圆形素材以及反光的四个圆是这里的重复元素，也就是这些简单的图形在起到强化主体占据空间深化画面的作用。类似这种也是一个道理，山河孔明灯一个是用来塑造背景一个是用来拉出纵深的，这样深化设计的成本是最低的，我也会在后面的实操演示到。案例实操有了上面的分析设计就变得很简单了，首先我们要选用暖色色彩，红色背景，然后整体需要热闹一点最好是有灯的元素，最后我们采用一些简单的素材重复使用来深化画面。基础的文案陈列。主体我选择了一张摄图网的插画，这种就比较省事儿同风格素材比较丰富，出图速度比较快。当然缺点也有别直接像改尺寸一样变成抄袭了，最后多说一句注意版权！把主体提取出来对应区域进行摆放。修改为红色背景，这个红色注意别太刺眼就行。调整字体为喜鹊招牌体（已购买）编排适当进行断行和错位处理。继续拆分插画里的元素补上标题右侧的负空间，如果假设没有这个正好的素材，就考虑添加一些月亮，灯笼或者丝带之类的素材填补空间。给标题添加一点效果，这里我加了一点点渐变和浮雕，结合了一个月亮的素材处理成发光是为了略微增加一点空间感。借助插画里的祥云线条的描边来强化分割空间，大家认为这里是属于简单元素还是复杂元素呢。如果追求统一感的话可以不做色彩，但是我个人喜欢颜色层次丰富点，添加一个青绿色。进一步分区，让标题更加明显一点。这里要说一个点色块是可以占据空间的但是线框就不适合，但是色块想占据空间还需要有一定的内部填充，这就是我们下面要做的。添加相关元素让色块内部不要太空。下面有的素材主体部分最好也有，略微提亮一点主体底部可以有效拉开层次感避免素材因为与背景的色相对比而抢主体风头。月亮的元素可以这样前后穿插的使用，这样能建立标题和主体的关联，让画面看起来整体性更强。添加氛围点，让整体看起来更热闹一些，部分圆可以添加外发光这样细节看起来会更舒服。给部分弧度下增加暗色，在平面上做出层次。过一遍 acr 滤镜常规的锐化颗粒感以及适当的聚焦。最后做一个样机就完成了。本篇文章我们学习了元宵节海报的设计流程，知道了如何快速强化主体以及简单元素和复杂元素的使用逻辑，希望本篇内容能对大家有所帮助。讲道理这不加个好友平时白嫖问问题嘛~欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/lantern-festival-poster-design
元素 画面 动画 近期完成一些视频制作，表现形式着重在 MG 动画和产品的运营宣传方向，在设计阶段遇到一些困惑，同时在摸索中不断扩充这方面的知识体系，通过工作中的实战，总结出来 4 步搞定视频设计的方法，分享出来，不知道你们是否喜欢呢？更多动效干货：让动效又快又好落地！5种动效输出格式优缺点分析Halo，这里是设计夹，今天为大家分享的是「动效格式」。阅读文章 > 一、概念动态设计是指在一定的时间范围内，静态图形连续的运动变化。英文名称 Motion Design，有的时候会使用 MotionGraphics 英文名称，一般引申为动态图形的设计。从呈现形式上可以划分为交互类动态设计和展示类动态设计，此次文章分享的设计方法，主要聚焦在展示类动态设计。二、动态设计的意义1. 设计特点动态设计具有的三大通用优点，对用户的影响力比较巨大。2. 为什么做动态设计我们之所以倾向动态设计是因为动态设计可以为产品和用户带来很多的优势，包含以下五类：三、如何进行动态设计近期一直在支持的产品宣传视频设计，均是通过以下思维模型进行设计呈现。1. 前期分析① 了解需求，收集素材首先了解需求、用户、产品、场景的信息，在初步了解后，可以从用户的预期目标，内容素材的设计方向以及动画的表现形式等维度收集核心关键词；同时确认文案，配音，音效，等视频元素是否添加，以便确认视频动画设计的节奏；② 汇总结论，归纳主题关键词通过信息收集阶段，提炼出以下设计目标和导向：使用场景：应用于可以支持视频的会场，互联网平台（如微信朋友圈，抖音）；设计目标：用户群为企业用户，希望通过视频，向用户阐述产品的功能特色，解决的问题，带动用户的兴趣，进一步了解和沟通，提升线索量，促成交易；设计导向：视频生动有趣，突出核心优势和价值点，清晰快捷传递；2. 提炼设计方向围绕核心关键词，视觉设计的可视化，通过情绪板输出设计可执行方向，包括品牌风格，动画节奏，画面元素，排版设计；动画节奏：以逐步引导深入的方式，展开视频的故事描述；品牌风格：京东云品牌的轻盈、微质感的浅色科技风格为基因进行设计；排版设计：以文本为主，图形为辅的画面设计；画面元素：运用互联网元素，比如鼠标，界面，穿插 2.5Dicon 和红黑双色扁平 icon 使用；3. 设计执行① 脚本一个丰富的成片效果，是通过多组分镜动态呈现。而分镜画面的前后关系，则是通过脚本布局搭建，在做脚本设计时，是按照以下思路进行；内容结构拆解比如这次的产品宣传视频，通过文案逻辑进行拆分，形成分镜画面的设计思路。首先根据文案逻辑划分为四大模块，然后围绕文案提炼出核心内容，视觉元素，动画节奏等，如以下分析结论：封面点题：点出所推产品，继承京东云品牌风格，强调产品视觉特征，使用几何元素构成标题核心，微质感背景烘托主题氛围；用户痛点：分析现有痛点，通过一些常用场景和用户共情。可以使用问号弹跳引导出搜索，输入问题寻找答案，凸显现有问题，面临的痛点，使用图形符号，互联网元素，进行视觉传达；总结问题：通过痛点分析，汇总出企业存在的问题。可以利用鼠标移动逐个收起，引导出产品解决方案的优势特征；解决方案：提出解决问题的方案，这是用户所需要的，也是视频中的重点。以展台+互联网界面的元素呈现，运用镜头的推拉转移，使用户的视线始终能够聚焦在所展示的内容；产品政策：落脚在产品的优惠政策，以及联系方式，运用收尾呼应的方式进行，迎合产品主题，呈现优惠方式和联系方式；脚本规划经过了画面思路的整理，这一步主要是梳理文案和画面的映射关系、画面视觉表现，以及动态效果的编排。根据设计思路和故事主题，以配音的时间线为索引，制定分镜脚本；分镜画面实现前期可以利用手绘方式，通过文字排版和元素设计的简单排布，将画面快速呈现；② 文案内容口播文案如果视频需要使用配音，前期就需要收集口播文案，根据口播文案的逻辑，定义分镜元素的时序；画面文案画面文案是需要依据视频的表现形式进行搭配，比如文本为主或图形为主的画面。文本为主：文字内容为主要表达形式，贯穿画面之中，此类表现形式是需要和需求方确定分镜画面的核心文案；图形为主：图形为主的分镜画面，可依据配音进行图形故事设计，文案则为辅助呈现，文案内容可依据画面给予自主发挥；③ 画面设计风格探索参照制定的设计目标和方向，以脚本框架为引导，进行静态画面的实现。也可出 1-2 个静态视觉和需求方沟通，如无问题，其他分镜效果依此完成。或者可以制作部分画面的动态效果，以便判断脚本最终呈现的视觉效果。画面调性风格：首先遵守品牌风格规范，传递品牌价值，强化品牌基因；其次要提炼产品视觉基因，营造差异性，比如在这次的视频中所运用的色系、画面元素的设计、文案的排版，均以品牌的视觉基因贯穿在各个画面中，并营造产品的个性。色系：依据京东云品牌风格调性，以及产品色系搭配，可以定义出以下色彩搭配规范：灰色：辅助色系，主要是进行氛围渲染、画面转场、视觉层级塑造中使用；白色：视频的主要基调，结合其他色系，营造科技风，轻量化实现，体现产品的温度；红色：产品个性的打造，重要元素使用，凸显层级，信息有力传递；内容设计图形设计：继承京东云的品牌基因，利用光影效果，使用 2.5D icon，结合线面双色 icon 进行图形设计，同时实现元素场景化，使画面更具有冲击力。文案排版：围绕核心主题，以故事传递内容的思路，进行文字的排版，运用卡片方式进行编排，便于在画面中对信息进行层级塑造，利于信息传递。④ 动画实现元素分层将画面元素进行分层拆解，依据画面的氛围场景，和元素的主次关系，进行拆分；核心内容的叙事性：核心内容是主题含义的传达，需要以动画的故事主线进行属性动画的制作；辅助元素的说明性：辅助元素是帮助用户理解产品，营造故事场景，串连分镜画面。比如流程模块的时间轴动态效果，通过逐步呈现的政策趋势，来说明政策演变的历史；背景元素的转场连接和氛围性：背景元素可以提炼出转场元素和背景氛围元素。转场元素：分镜画面之间建立层级，创建空间，流畅过渡，使内容有序呈现；背景氛围元素：提高画面的活跃度，渲染动画的风格氛围；动画编排在时序编排上可以利用入场、停留、延展、退场 4 个阶段进行元素动画的设计，这样可以保持元素动作的连贯性，元素之间的动态过渡流畅。入场：一般指元素进场，出现在用户视线中，信息逐步呈现在画面中。一般用于对用户视线的引导，内容的提前铺垫。可以使用纵深动画、镜头语言、生长动画、组合构建、多重迭代、抽象图形转换方式呈现。入场时机：利用配音语义的上下衔接的时机，进行入场动画设计，平滑过渡到对应的配音时间线上。配音的节奏快慢，决定了元素动画的节奏，所以在配音语速上，要贴合动画的整体节奏。动画速度：需要快速呈现，平均时长在 5-20 帧，画面元素分层越多，属性动画设计越多，整体画面的时间线则会更长。停留/延展动画：一般指元素在画面中需要延时停留的运动过程，帮助信息语义传递更准确。核心元素：加深用户对信息的理解，动态节奏连贯，不拖沓，时间线要保持足够长，便于用户快速浏览。在实现手法上根据故事场景进行设计；背景元素：主要用于烘托核心元素，增加画面氛围。可以使用循环背景、循环流光、粒子衬托、动态背景等动画效果实现。由于运动越快，越容易聚焦用户视线，因此作为背景元素的动画，在运动节奏上适当放慢，时间线拉长，循环使用；退场动画：一般指元素退出用户视线，过渡衔接下一个元素的运动过程。用户往往关注入场动画而忽略退场动画，因此退场动画的设计可以适当弱化，过渡引导到下一个动画就可以。可以使用硬切，抽象过渡，摇摆镜头，蒙板遮罩等动画效果实现。在节奏设计上最好卡点进行，动画形式可以根据下一入场元素的属性动画决定，也可根据整体节奏把握。元素动画实现关键帧：一般指元素在运动中的关键动作所处的那一帧。关键帧与关键帧之间的动画是软件自动补齐，这种帧可以叫做过渡帧或者中间帧。关键帧的时间和位置，往往决定了内容出场的次序，以及动画呈现的密度和节奏的快慢，在设计制作中，做属性动画参数设置时，需要关注入场动画的开始帧，以及退场动画的结束帧。属性动画：一般指元素的透明度、位置、大小、旋转、形状、颜色等属性进行的变化。参数的变化幅度，是根据帧速和时长进行制定，参数幅度越大，动效越明显，或同等参数下，时间短，速度快，时间长，速度慢。时长：从元素动画的开始关键帧到结束关键帧之间的时间线，称为时长。单位上可以用帧表达，也可以用时分秒表达。时长的设置根据动画风格，运动距离作为参照，一般一个常规的动态变化持续时间在 200-500ms 以内。运动曲线：变换的速率曲线，也就是动画中间帧的运动规律。物体的运动不是一直保持同等速度运转，所以在做元素的属性动画时，需要遵照物理世界的运动规律进行。根据元素的画面场景，采用适合的运动曲线，如入场先快后慢，退场先慢后快，弹跳曲线，则是应用在有弹跳物体的场景中。⑤ 剪辑合成剪辑：最终对分镜进行合成和剪辑，形成连贯的、有逻辑、有叙事的呈现，也可根据音效，配音做画面转场的处理；音效：根据动态节奏，还会搭配音效的辅助，提升整体的氛围和风格。⑥ 动画自查一般会从时间、运动，以及元素三个方向，结合物理世界的运动规律，结合用户视觉感知习惯进行画面走查。四、如何交付动画的交付实现，一般会有两种方式实现，代码落地和成片交付：1. 生成成片根据使用的场景的不同可以区分为 MP4 和 GIF 动画交付，可以应用在平台广告或者抖音快手等短视频平台上传播。2. 代码落地实现如涉及到动效的开发，有一部分需要代码语言实现。直接生成代码：利用软件转化成对应的代码格式，现在市场上通用的是 lottie 所生成的 json 进行；提供动效标注图：还有一部分无法直接转化为代码语言，这时候我们可以提供动效的标注图，通过研发实现，标注图规范一般包括，触发条件，对象、变化属性、曲线数值、持续时间等，可以参照以下模板给到具体属性参数；五、最后很高兴您阅读到这里，以上是我的一点思考，希望能给在看的你带来一些小思路。最后祝愿大家在工作中收获美好，困难少一点，开心多一些。欢迎关注作者微信公众号：「JDTDA」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design-2
元素 设计师 流程 写在前面作为设计师，你一定遇到过这样的情况，自己做的设计稿，被开发出来后却完全换了一个模样。不仅视觉上有问题，交互上也有错误。而要想避免这样的情况，我们就一定要重视还原度走查这个阶段。更多设计还原干货：如何提升页面还原度？我总结了这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
英文 元素 贴纸 大家好，这里是和你们聊设计的花生~今天继续为大家带来海报设计常用 装饰元素 的第 3 期，本期的元素分别是：英文字体、中心辐射线、心形、镭射风及卡通风贴纸和渐变波点，并有超多实用教程和免费可商用资源分享给大家，一起来看看吧~上期回顾：简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 一、英文字体英文字体在海报设计中很常见，由于它也算是文字信息，所以很多小伙伴可能没有意识到这些英文字体也算是一种“装饰”。其实很多时候我们拿到的海报文案内并不包含英文信息，这个时候就需要设计师自己补充这部分的内容。添加英文字体可以达到以下效果：丰富文案内容。如果你拿到的海报文案都是中文且内容比较少，无法撑起整个版面，就可以自己根据海报的主标题、主题或者关键词添加对英文信息，这些英文信息可以与主标题处于同等层级，用于传达海报主题；也可以缩到很小，放在边角位置稳定版面。增强视觉吸引力和设计感。对于一些具有设计感的字体，我们可以将其放大，置于画面主体之后，这样会带来很强的视觉冲击力；也可以压在画面之上，平衡版面烘托氛围，具体情况要看字体的气质来确定。海报中英文字体的使用之前为大家推荐很多高质量的免费可商用英文字体，它们的风格各不相同，有的适合正文排版，有的则适合作为纯装饰。需要的小伙伴可以戳下方链接了解，或者直接访问我的主页。5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二）大家好，我是和你们聊设计的花生。阅读文章 > 海报如何更有力量感？加上这个元素准没错！（附素材下载）大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到海报设计中，可以营造浪漫优雅的氛围。阅读文章 > 海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 二、中心辐射线由中心像四周发散的线条元素常作为背景在海报设计中使用，置于画面主体人物或物体之后，可以起到聚焦视线、丰富画面的作用。它常见于复古、卡通风格以及与促销有关的海报中。中心辐射线及心形元素在画面中的使用三、心形心形算是一个比较特殊的图形符号了，在与爱情有关，或者表达强烈喜爱或推荐的主题中使用比较广泛，既可以作为局部的装饰元素，也可以放大作为主视觉或者特殊的图片形状使用。下面为大家介绍一种在 Ai 里快速画出完美心形的方法。四、贴纸贴纸作为一种独立性较强的设计元素，在海报、包装、品牌、VI 等设计中都能看见它的身影，设计简单但是能赋予对象独特的识别性。目前比较流行的贴纸风格可以分为 2 两种，一种以抽象几何元素为主，比如网格地球、星形或者纯文字；另一种是以扁平卡通插画元素为主题，形式丰富多样，趣味十足。且随着设计工具的进步，贴纸也有了更多不同的样式，比如加入了 3D 特效， 或者添加镭射渐变和材质质感。下面为大家推荐一些贴纸元素的设计教程：「镭射渐变贴纸元素设计教程」 https://uiiiuiii.com/photoshop/1212389155.htmlhttps://uiiiuiii.com/illustrator/1212388923.html「扁平卡通风贴纸设计教程」https://uiiiuiii.com/illustrator/1212458495.htmlhttps://uiiiuiii.com/illustrator/1212297326.html五、渐变波点渐变波点是是孟菲斯风格最常见的元素之一，具有强烈的复古气息。除此之外也可以作为海报中作为局部装饰，或作为插画中的纹理。之前我专门写了一篇文章向大家介绍如何在 Ai 和 Ps 中制作渐变波点效果，并讲解了背后的原理，帮助大家更好地制作出符合自己需求的效果，具体教程戳下面链接：渐变波点怎么做？我为你总结了 3 种超快方法（附原理解析）大家好我是和你们聊设计的花生~渐变波点是设计中常用的一种装饰元素，和各种风格的适配性很强。阅读文章 > 以上就是第三期的海报常用装饰元素推荐，希望对大家的设计有帮助~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读:先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 平面设计作品不出彩？来看高手总结的14个细节！本文用真实的平面设计作品案例，通过优化前后的关系，让读者短时间受到启发，建议平面设计师收藏保存哟上期回顾：上上期回顾：阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/decorative-elements-of-poster-design-3
元素 页面 视窗 写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。更多B端设计干货：5000字干货！超全面的B端设计指南：消息通知消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？阅读文章 > 一、X 轴的布局与适应B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。1. 单栏型表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。2. 双栏型表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。3. 多栏型多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。二、Y 轴的空间利用B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。1. 如何承载大量信息① 替换型对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。② 向下延展型对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。2. 如何区分强弱主次① 强-滚动吸顶当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。② 弱-局部展开对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。三、Z 轴的叠加顺序说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。1. 基础区间展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。2. 模态区间模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等)临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等）第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。3. 顶层区间全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。临时层-由 g 触发出的临时浮层最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。四、写在最后到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/xyz-design
字体 英文 元素 大家好，我是和你们聊设计的花生~之前为大家推荐过各种风格和类型的免费英文字体，适合不同的设计主题。其实英文字体除了作为正文或标题传递信息外，也可以作为“图形”装饰在画面中，增加画面的设计感和视觉张力。英文字体作为装饰元素在画报中的应用一般来说比较粗重的英文字体都可以放大作为装饰元素使用，但是比起常规的字体，具有设计感的字体更能提升质感。今天就为大家推荐 6 款我精心整理的英文字体，它们各有特色，视觉吸引力十足。适合放在个性潮流海报中作为装饰元素使用，也可以用于 Logo、作品集和 VI 设计，一起来看看吧~往期字体推荐:海报如何更有力量感？加上这个元素准没错！（附素材下载）大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到海报设计中，可以营造浪漫优雅的氛围。阅读文章 > 一、FacónFacón 是一款全大写的无衬线字体，由 Alejo Bergmann 设计并免费分享给所有人使用。字形粗黑，特点是字形断裂并带有尖锐突出的斜刺，像是被利刃快速划过后带出的痕迹。再加上字形向右微微倾斜，使得字体整体带有一种速度感和力量感，外形极具张力。二、Rubik GlitchGlitch 意味“故障”，而 Rubik Glitch 正是一款自带故障风特效的字体。字形厚重，带有参差不齐的粗糙短刺，以模拟电子屏幕故障后的显示效果，有种复古赛博朋克的感觉，适合科幻机能风主题的设计。同时我觉得它的外形也有些像水中的倒影。5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 三、Libre Barcode 39 Extended Text之前为大家推荐海报设计中常用的装饰元素时，就提到过条形码，当时给大家推荐的方法是直接从在线网站上下载素材。最近我发现了一款专门制作条形码的字体，每个字母和数字都有对应的形状，安装后输入任意内容就能自动生成对应的条形码，且尺寸和颜色可以随时修改，比使用在线网站更为方便快捷。简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 四、KounstructKounstruct 是一款高度图形化的英文字体，字母都是由直线构成，没有曲线和圆角，给人坚硬敦实的感觉。虽然辨识度较低，但是装饰性很高，特别是字母紧密排列在一起的时，可以形成特殊的图案纹理。五、ModulordModulord 也是一款图形化程度很高的字体，看起来像是由各不相同的矩形块堆叠而成，类似于像素字体但是更为概括简洁。字形抽象，因此适用于大尺寸的标题而非正文，但单个字母或者数字很适合放大作为主视觉元素使用。六、RonRon 是一款具有未来科技感的字体，字体笔画在转折处做了断开处理，仿佛是由一个个不同的小部件组装起来的。字体线条中等粗细，在断开处做了圆角处理，外形规整但负空间灵活透气，排版效果舒适，给人简洁、中性、沉稳之感。好啦以上就是今天为大家推荐的 6 款各具特色的免费可商用英文字体，希望对大家的设计有帮助~ 字体安装包都准备好了，下载方式见文章开头和结尾的链接。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：免费可商用！优设鲨鱼菲特健康体来啦！双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 6款个性英文字体安装包740KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/6-trendy-english-font
文字 图形 元素 文字图形化，顾名思义就是使文字具备图形的特点，从而使文字变得更加美观、更具视觉冲击力，甚至是可以把文字的意义图像化，使设计更具说服力和打动力，这也是设计师很喜欢的一种设计手法。在海报设计中，通常是把主题或者关键字词设计成图形，然后把其作为画面的主视觉，这种做法既能使画面视觉更丰富，又能突出关键字词。 而关于文字图形化的做法，主要有以下四种:用图片元素组成文字即用与需要设计的关键词相关的图片元素，或者使用与品牌和产品相关的图片元素组合成某个关键字词。在执行的过程中，既要保证文字本身的识别性，也要保证组成元素的识别性。另外，要找到图片元素与文字笔画的共同点，尽量让图片之间的组合自然而巧妙。把文字当作场景比如把文字设计成建筑或者公共设施，让它成为生活场景中的一部分，并与人或其他事物发生互动，这种手法通常会把文字做成三维效果，然后在此基础上去添加相关的图片元素。注意，文字本身才是重点，所以添加的图片元素不要抢了文字的风头，同样也要根据文字笔画的特点来转化成与其造型比较吻合的场景，比如倾斜的笔画可以做成楼梯或者滑滑梯。把文字的笔画或造型设计成图形比如把文字的笔画替换成与其意义相关的图形，或者把文字的外观造型设计成跟其含义相关的视觉图形，比如象形文字就具有这样的特点。在海报设计中我们可以设计得更夸张、更复杂一点。图文结合用与文字相关的图形跟文字组合成一个主体，从而形成一个主视觉图形，比如在文字的笔画轮廓里或者是文字的「字怀」部分填充图形。字体的风格和搭配的图形要在风格上尽量做到统一，比如手写字通常会搭配插画元素，书法字体会搭配中国风元素，立体字会搭配 3D 素材或摄影素材。结语文字图形化虽然不是很新颖的设计手法，创意性也不是特别强，但在商业设计中确实有着不错的效果，当然真要做得好也没有想象的那么容易，对于文字本身的设计、图片素材的创作与选择、文字与图形的组合方式等等都具有比较高的要求。另外，你的设计到底最适合以上四种手法的哪一种，也要有准确的判断。如何让画面更精致？注意这6个版式细节这篇文章我们来讲讲在设计手机详情页时，会经常用到的一些排版小细节。阅读文章 > 欢迎关注作者的微信公众号：「葱爷」本篇来源：优设网原文地址：https://www.uisdc.com/4-graphical-skills
元素 在线 模型 这个 3D 元素可以转个方向换个颜色吗？当然可以！大家好我是花生~ 提起有关设计的小笑话，比较经典的肯定有那个“大象转身”，我看一次笑一次，笑过之后又有一些淡淡的无奈，毕竟受设计素材限制是每个设计师都遇到过的难题。比如大家手上肯定下载了很多 3D 元素资源，但是在实际运用起来的时候，却因元素的角度、颜色等不能契合设计要求而只得放弃。这是使用下载好的 3D 元素的局限，但好像也没有什么办法。最近我发现一个比较有意思的网站 VERTEX，它能在线编辑 3D 元素，随意调整 3D 元素方向，并修改颜色和材质，能很好的解决我们用 3D 素材时的那些问题。而且站内素材都是免费可商用的，今天就推荐给有需要的小伙伴。可在线编辑 3D 元素的网站 VERTEXVERTEX 是一个支持在线调整 3D 元素的网站，它的开发者是 Vlad Kluev，一名来自莫斯科的设计师和 JavaScript 开放人员，擅长的领域包括用户体验设计、JavaScript、3D、Cinema 4D、Sketch、Figma、Photoshop 等。VERTEX 是他个人开发的一个公益性网站，分享他自己创作的 3D 元素，并通过编程让站内的 3D 元素可以编辑。「高质量模型」VERTEX 内的 3D 元素种类还是比较多的，而且质量很高，模型都非常精致。「角度调整」VERTEX 站内的 3D 模型支持 360无限制角度调整，使用者可以按照自己的需要调整好角度后导出为 PNG。调整时选择坐标上对应的 X、Y、Z 轴拖动即可，坐标开关在画面左上角，需要观察调整结果时可以选择关闭坐标显示。「颜色材质修改」除了可以调整角度，VERTEX 站内的 3D 模型支持按不同部位进行颜色和材质修改。这样的好处就是，对于同一个模型，我们可以通过改变其颜色或者材质，得到数十种不同的渲染结果，大大提高了模型的使用效率。而且使用者也不用像之前那样担心自己的 3D 素材与别人的“撞衫”了。「导出」当角度和颜色都比较令自己满意后，就可以点击图片下方的「download」将模型导出。中间会有一个几秒的渲染过程，然后会自动下载保存为透明底的 PNG，尺寸为 2720*2720px。由于保存十分方便快速，大家可以为模型多调整几个颜色或者角度，一一保存下来，之后使用也会方便很多。元素使用效果清晰上面就是 VERTEX 网站的功能介绍，总结一下一共有三点：3D 模型种类丰富，质量极高支持在线调整元素角度、颜色和材质，实现“一模多用”渲染导出快，图片高清，免费可商用附上 VERTEX 官方网址： https://vertex.im/ ，赶快自己动手试一试吧。在此也感谢作者 Vlad Kluev 的创作和付出，网站内的模型也一直在持续更新，值得大家收藏并持续关注。如果有小伙伴对 3D 元素的需求比较大，但是又没有更多的时间学习专业的 3D 软件，可以尝试一下 MagicaCSG 这款轻量级的 3D 软件，它界面简单操作便捷，建模和渲染都十分迅速，且质量不错。上手极快，学会之后就能自己按需求制作各种 3D 小元素，对之后深入学习更专业 3D 软件也有帮助。MagicaCSG 使用教程见下方链接：免费用上手快！快来试试这款 3D 设计神器 MagicaCSG3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 3D 素材下载网站，但是实际应用起来还是有局限的。阅读文章 > 以上就是今天分享的全部内容，谢谢大家的浏览。优设一直致力于为设计师提供最实用的设计干货知识，也为大家推荐了很多提升设计效率的神器。为了更好地为设计师提供服务，我们新建了一个「优设-花生设计交流群」，由我主导运营。无论你是想找神器、找教程还是想解决设计路上疑问，都可以进群交流，优设与大家共同成长。进群方式见下图，等你哦~本篇来源：优设网原文地址：https://www.uisdc.com/vertex
飞翔的企鹅
表哥
张大湿
在路上
