时间 时区 方式 近年来产品的国际化趋势日益增强，如果你在做国际化产品的设计工作，一定会注意到时间的两种统计方式：UTC 和 GMT。比如你可能经常会看到这样的案例：UTC 和 GMT 究竟是什么意思？应该怎么使用？有哪些表述规范？本文就为大家科普下二者的区别和用法，带你从小白秒变行家。更多时间展示方法：大厂总结！体验设计师必知的「时间戳」控件设计“时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。阅读文章 > 一、概念科普先上一轮专业知识硬核科普：1. UTCUTC 的全称是 Coordinated Universal Time，被称作“协调世界时”，可称“世界统一时间”，“世界标准时间”，“国际协调时间” 等。UTC 是一种时间标准，全球通用，该时间已经与世界计时中心保持同步，作为全球民用时间和时区基础的时间标准。 UTC 时间标准划分图2. GMTGMT 的全称 Greenwich Mean Time，被称作“格林威治平均时间”或“格林威治标准时间”。GMT 是按照经线划分的时区（高中地理知识：地球表面按经线从东到西，根据圆周 360 将地球划分为 24 个时区，每个时区占 15，相邻区域的时间相差 1 小时），是由位于伦敦郊区的皇家格林尼治天文台确定的标准时间（因为本初子午线是通过那里的经线），是一些欧洲和非洲国家使用的时区。GMT 时区划分图1972 年，UTC 取代 GMT 成为世界时间标准。不过 GMT 现在仍然被欧洲广泛使用，是英国等几个国家的时间表述方式。在编写本文之前，我们一共调研 14 个产品（包括 2 个操作系统，7 个国际化产品，5 个设计系统），可以看到 UTC 及 GMT 在行业中均被普遍使用，UTC 偏多，但暂未形成主流。不过，由于有官方平台背书，也不排除 UTC 的使用范围会越来越广阔和通用的可能性。严格来说，UTC 和 GMT 各有所长：由于时间的测量方式不同，GMT 每 4 年比 UTC 慢 1 秒，因此在不需要精确到秒的情况下，通常也可以将 GMT 和 UTC 视作等同。UTC 没有夏令时计算方式，而 GMT 有。所以有可能在有夏令时区域，用户理解 UTC 的成本更高。我们可以总结两者的区别如下：UTC 和 GMT 两者的区别二、表述样式虽然 GMT 和 UTC 在概念上有些区别，但在实际使用中，两者的表述方式趋同，在视觉效果上完全一致。根据不同国家和地区，日期和时间的具体展示方式通常需要考虑以下因素：地域性：时间需要和地域文化和书写习惯相关联，便于当地用户快速理解。准确性：要保证时间的精度和准度，很多金融类产品的时间都需要精确到“分”甚至“秒”。易读性：在排版时要易于阅读，时间数据较长时要考虑折行的易读性。接下来的表述样式中，我们会以 GMT 为例，介绍下日期表达的细节规范。（需要说明的是：以下规范是经过调研后总结出的通用规则，并非不可更改的行业基本准则，如果你的产品有其他表达方式上的需求，可以适当变更和调整。）1. 不同国家和地区的时间表示方式不同国家对于时间的书写有不同的组合顺序，使用的标点符号也不相同。最常见的有四种类型，分别是：zh_CN：适用于中国大陆、中国香港等地区nl_NL：适用于荷兰等地区en_US：适用于美国等地区en_GB：适用于欧洲国家、东南亚国家和中国台湾等地区以下是这四种不同的“年月日”具体表现样式（yyyy: 年，MM: 月，dd: 日）：以下是这四种表现样式与 GMT 组合的实际案例（以 GMT 为例，UTC 同理）：2. 时间表示方式的具体规则接下来我们以 zh_CN 的 GMT 时间表示为例，来看看具体的时间展示细节规则：① 日期 + 时间 + 时区的组合展示日期和时间之间使用“,”+“空格”；时间和时区之间是使用“空格”；时区标识在前，偏移量在后，显示“(GMT整数偏移量)”；偏移量精确到“:”后两位，取小时整数。② 表示时间段两个时间段之间建议使用半角“-”链接；半角“-”前后有空格。③ 折行展示样式折行时“年月日”、“时分秒”建议各自同一行；段时间以“-”连接，“-”前有空格，在第一行。以上就是国际化产品中时间的表法方式，你可以将这些规范应用在工作中常用的组件模块上，在使用时可以直接调用，方便快捷且不易出错。最重要的是也要跟开发对接清楚，从代码层面做产品实践效果的最终防范。欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/time-display-guide
格式 动画 方式 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
知识 自己的 方式 2022年职场习惯第6期来了！这期邀请了南宁学院副教授邓海贝，分享了他快速成长的学习方法，以及坚持多年如一日的职场习惯和思考方式。上期回顾：为什么有人工作才两年，能力远超五年的设计师？大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。阅读文章 > 嘉宾介绍：邓海贝，南宁学院副教授，微信公众号“艺海拾贝 Design”主理人，2021 年优设年度十大作者。平面设计科普官，从基础知识到进阶技巧，无论是字体应用、配色法则或是排版布局，平面设计中每个环节的疑问，都能在他的文章中找到答案。大家好，我是邓海贝，感谢优设网的邀请，能与大家分享一些学习心得和工作经验！我目前在南宁学院任教，自己还运营着微信公众号：艺海拾贝 Design，平时发布一些版式设计相关的教程，旨在帮助新手设计师快速成长，欢迎学习版式设计的朋友们关注。1. 您有哪些坚持了三年以上的工作和生活习惯？先说生活习惯吧，早睡早起、保持稳定且规律的作息时间，是我一直以来坚持的生活习惯，不管工作日还是假期，基本保持在 23：00 左右睡觉，7：00 左右起床，充足的睡眠是保证每天精力充沛的重要基础。我平时大部分时间都用于正职教师工作（除了上课，还承担着教研室主任的工作），期间会有一些私人的设计项目介入，自从创建公众号之后又占据了大量的时间，4 年期间写了 160 多篇原创文章，目前还在筹备我的第一本书。往期热门文章回顾：用超多案例，帮你掌握「上下构图」的排版技巧构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。阅读文章 > 用超多案例，帮你掌握「左右构图」的排版技巧在设计之前，对于设计元素的摆放位置需要有一个大致的构想，这个构想就是构图，它相当于是版式的雏形，有了这个雏形之后，才能开始下一步的细化，只有充分理解构图的意义与作用，排版时才能做到心中有数。阅读文章 > 这可能是最容易出效果的配色方法：互补色（基础篇）互补色分为“光学互补色”和“印刷（色料）互补色”两种。阅读文章 > 做出高大上的书法字排版，看这一篇就够了！书法艺术是中华民族文化的精髓，是最具民族特色的设计元素之一。阅读文章 > 这些年几乎每天都工作到 22：00。但是我是极度不喜欢熬夜的人，如果没有特别紧急的事情，22：00 会关电脑停止工作。我认为熬夜的这些时间，第二天也需要花相同甚至更多的时间补眠回来，一旦第二天有其它急事不能补眠，那就很影响工作效率。再说说工作习惯，我是一个几乎没有拖延症的人，今天能做完的事，绝不会拖到第二天。我一直坚持的工作习惯是把每天要做的事项列好工作计划，把要做的事项根据紧急程度和耗时程度进行分类，根据事情的轻重缓急逐一攻破。第二个好习惯是工作时专心一志、心无旁骛，尽量提高工作效率。每个人拥有的时间都是相同的，只有让工作时间的效率最大化，才能完成更多事项。所以我在工作时是非常专心的，不能有一点干扰，别说是听音乐了，就算有一点杂音都不能容忍。我自从毕业两年后，就保持着一份主职加一到两份兼职的工作状态，而且还不熬夜，就得益于这两个好习惯。2. 刚进入职场的设计师，如何进行更有效的学习？经常有同学问我，为什么看了很多设计书和教程，自己的设计能力还是提升不了？如何进行更有效的学习？跟大家分享我的经验。学习金字塔理论这是美国学者埃德加·戴尔提出的学习“金字塔理论”，对我们常用的几种学习方法进行测试，两周以后学习内容平均留存率如下：第一种，只通过声音来学习的“听讲”方式，效果最低，只能留下 5%；第二种，通过看设计书和设计教程的“阅读”方式学到的内容，可以保留 10%；第三种，通过图片、声音、动画结合视频教程的“视听”方式学习，可以达到 20%；第四种，通过现场观摩的“示范”学习方式，可以记住 30%；第五种，“参与讨论”，可以记住 50%的内容；第六种，实际演练、亲身体验等“实践”学习方式，可以达到 75%；第七种，收获最大的学习方式，是分享知识“教授别人”的方式，可以记住 90%的学习内容。在学习的金字塔理论中，通过听讲、阅读、视听、演示的方式获得知识，学习的效果相对比较差，属于被动的学习；通过讨论、实践、教授他人的方式获得知识，都是团队学习和参与式学习，属于主动的学习，学习的效果比较好。所以你为什么看了大量的图文教程和视频资料，发现收获甚微，因为只处于“阅读”和“视听”的被动学习，如果课后不对所学知识进行巩固，没有把理论知识运用到实践中，其实并没有正常掌握和吸收知识。最有效的学习方式根据学习的金字塔理论，通过实践的方式学习知识，留存率更高，可以看出实践在学习过程中的重要性。所以去优秀公司工作是最好的学习方式之一。因为有一群志同道合的同事、在各种领域都有特长的前辈，可以不断汲取新知识。这些知识又可以通过在工作中与他人进行讨论交流，在实践中运用进行巩固，不断思考创新，所以进步是非常快的。这也是为什么我一直推荐大家去好的设计公司的原因，在优秀的公司学习一年，可以获得相当于普通公司几年的设计经验；而如果在图文店工作几年，其实你只是在用一年的经验重复做几年的事情而已。学习金字塔理论中，学习效果最好的方式是把知识传授给他人。我深有体会，在我做公众号写教程的这些年，每次写一篇教程，我会花几十个小时去看大量的文章、搜集图片资料、整理自己的知识、做案例示范，最后有条理的讲解出来。通过这样的知识输出，把大脑中掌握不太成熟的知识进行优化，使知识得到完善，从而会进一步加深对知识的理解。可以说写教程的这几年也是我进步最大的阶段。所以在学习的过程中要学会主动学习，积极与他人进行讨论，在实践中运用获得的知识，并主动的与他人分享自己学到的知识。正确的学习方法设计没有捷径，正确的学习方法简单总结起来就是多看、多做、多想，不断重复：多看，是提高审美的有效手段，我们经常说“读书破万卷下笔如有神”就是这个道理，优秀的设计师必须要有扎实的美术基础，极高的审美品味，丰富的知识底蕴。因此，想做好设计，第一步必须要多看和多借鉴，看的优秀作品多了自然会往优秀作品方向去做。还要善于整理归纳，看到优秀的作品要保存到自己的资料库进行分类，当接到设计任务时，能很快的调出来作为参考。多做。书看了教程学了，但是不等于学会了，只有在实践中运用，才能把知识转变为自己的。多练习是让初学者很好提升设计能力的方法，在实践过程使自己的技法和经验逐步提升，还能有效提高审美并熟悉设计中的规范。看和做的时候一定要多想，别只模仿表面，更要模仿优秀作品背后的思想，通过理解、感悟、最终进行创新。假设老师教给你的知识是 A，那么，如果你把 A 完全复制做出来，那你可能做出来的成果是 A+或者 A-，但是这个知识并不属于你。你需要通过学习 A，然后独立做出 B 或 C，这样才算真正把知识学懂，变成属于你自己的知识，简单的说就是举一反三。最后把学到的知识分享给他人。这个过程需要不断梳理、思考、研究，把相关知识融汇贯通，知识已经成为你大脑中永远不能磨灭的一部分。所以分享不只是帮助其他人，同时也是对自己的提升。还可以锻炼自身的写作、表达、沟通能力，这也是设计师要晋升所要具备的素质和能力。本篇来源：优设网原文地址：https://www.uisdc.com/designers-good-habit-denghaibei
官网 用户 方式 项目背景如大家所知，企业的招聘方式基本固定为社招与校招两种，而社招渠道比较宽泛，如多个招聘平台的招聘信息、猎头寻人、人脉内推等，而校招的渠道却比较单向，基本都是在毕业季前，在大学内宣讲、学校内搭建招聘展位等，由于时间较固定且频率不高，所以 58 之前并未搭建校招官网。来自于《2021 年度企业招聘渠道效果与趋势调研报告》但是，由大易发布的《2021 年度企业招聘渠道效果与趋势调研报告》指出，相比 2018 年，企业搭建专属招聘官网的比例已经从 41.4%上升到了 80.2%，71.8%的企业建设私域渠道的目的是提升候选人体验，企业开始跳出以「hr 为中心」的视角，转向「以人才为中心」，时时刻刻照顾候选人的应聘体验。所以搭建 58 的校招官网也是势在必行。两分钟底层法则的应用英国形象大师罗伯特·庞德曾说，这是一个两分钟的世界，你只有一分钟向人们展示你是谁，还有另外一分钟让他们喜欢你，如何在短暂的时间，屏幕大小的空间里，吸引到与企业志同道合的人，是我们此次升级的设计标准。1. 静态背景降低动态场景下的焦虑感我们调研了几个拥有独立校招官网的大厂，信息架构逻辑大体一致，区别较大的就是头屏的展示方式是采用静态还是动态，然而这个也是我们项目内争执比较大的点，依据两分钟底层法则，动态视频的吸引力必定是大于静态的图片，而视频的加载时长的无法控制会很大程度的影响用户体验，现有某个大厂的头屏视频就是很明显的样例，在网络状况不佳的时候，头部的灰色背景带来了焦虑感。怎么弥补用户这几秒的焦虑呢？我们把不可控的几秒变成可控的温馨画面，在视频加载中头屏展示图片，加载完成后开始自动播放视频，这样头部视频的方案得以保留。2. 极致的交互体验形式通过竞品分析得知，为了保障信息的连贯性，首页大多都采用平铺的方式展示信息，在某个模块下会通过简单的交互展示更多的信息。虽然设计上模块鲜明，但是对于用户是一次性的信息输入，无法快速集中获取某个模块的信息，所以为了更好的做到信息架构分明，我们首页采用分屏+微动效的交互方式，每屏只向用户展示一个信息，做到沉浸式信息浏览，同时这种方式也在一定程度上提升了品质感，如特斯拉品牌官网也是采用同样的交互方式。分屏效果展示二级页面，则采用大图背景样式，内容在固定区域内滑动，增加官网高级感设计语言定义每个企业都有一个品牌宣传色，为了保持 58 的企业识别性，我们保留橘色为主色，同时橘色也可以更好地传递企业秉持的温暖的概念。其次，依据 90 后、00 后这些 z 时代背景下的用户喜好，他们更注重品质、时尚，惊喜，内容等，针对这些关键词，我们采用了如下设计方式：1. 复杂内容视觉化58 的业务体系是复杂且庞大的，按以前的滑屏的交互方式很难有一个整体且直观的感受，那如何在简化的同时更直观、更整体呢？我们采用了当前流行的 3D 立体方式，打造了 58 的业务矩阵空间，这是个可以无限拓展的空间，对于目标明确的求职者可以快速查看某个品牌的介绍。2. 加大视觉反差在福利模块，为了突出福利内容本身，大胆采用灰色背景图片，同时增加不同形状的小面积色块做视觉的调和及内容类型区分。在成长故事模块 hover 状态下，由原先的彩色照片变为橘色背景与黑白照片搭配，用户的视觉焦点可转为内容本身。点击后的故事详情页采用杂志式的排版，弹窗的样式减少用户的跳出感。3. 图片增加故事性为更加深入内容，我们单独拍摄了一套极具故事性的员工形象照，拉近用户与照片中人物的距离，增加用户的沉浸感，照片主要围绕氛围感、接地气、传染力展开拍摄。4. 标题化文案经调研点击率高的内容，在标题文案结构上都做了很好的设计，所以文案优化也是我们设计语言的一部分。在标题中准确提炼用户感兴趣的信息，并打造每个故事之间的差异性，从而抓住不同用户的味蕾。总结通过 2022 届校招季，我们收集了用户流程下的一些数据，首页-职位列表页-职位详情的 UV 得出流程漏斗下的转化率以及按钮点击转化率，与往年相比有了很大的提升。最后再提一下英国形象大师罗伯特·庞德的话：两分钟的世界，你只有一分钟向人们展示你是谁，还有另外一分钟让他们喜欢你。然而当下 VR 科技的快速发展及应用，部分大型企业已经在官网首屏采用 VR 技术展示公司及企业文化，未来的可能性还有更多可探索的空间，说不定不久后可以用裸眼 3D 效果，给用户更加趋于真实的感受呢。大厂实战！vivo官网APP首页改版设计过程复盘vivo 官网 APP是什么？阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/58-website-upgrade
抽屉 方式 模态 本文会讲一些实用的 B 端弹窗设计方法：如何使用弹窗：根据应用场景、交互需求、内容量、一致性原则如何优化弹窗体验：弹窗按钮、弹窗高度、关闭方式、优化流程…对于想要快速上手 B 端设计的小伙伴，这篇实用性很强的 B 端弹窗设计值得仔细阅读～如何使用弹窗？1. 根据应用场景模态弹窗和非模态弹窗的具体使用场景可参考下图表格：2. 根据交互需求3. 根据内容量当内容量较少时，可以采取下拉菜单进行设计上的优化，下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速高效。如果不是影响业务流程的操作，而只是页面的设置类，可以将对话框改为气泡框或气泡确认框，如下图：当页面内容较多时，New page 新建页 > Drawer 抽屉 > Modal 对话框（内容的深度较深最好采取抽屉、内容宽度较宽则弹窗形式更为合理、而新建页合适宽度与深度同时较大的产品中）4. 遵从一致性原则除以上三个判断维度，还有「一致性」原则需要考虑，例如某产品弹出的表单大多较长，采用抽屉组件，为了保持体验的一致性，个别短表单也可以同样采用抽屉。例如钉钉的后台管理，大部分编辑都采用抽屉形式，而飞书的管理后台大部分编辑则采用弹窗的形式。但针对不同产品的具体情况，一致性的优先级有所区别。怎样优化弹窗使用体验1. 操作按钮固定在底部弹窗的操作按钮没有固定，随滚动条滚动，需要滚动到底部进行操作很不方便。2. 弹窗高度不高于浏览器内容展示弹窗高度过大，弹窗显示不全，就算滚动条固定到底部也有一部分显示不出来，影响操作。这里点击全屏显示会锁定页面的全局滚动条，但浏览器正常显示会出现两个滚动条的情况，体验会变差。对话框的大小主要根据内容而定。B 端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为 4 种：S （通知提示类）M （配置简单）L （配置复杂或者扩展详情）特殊 （根据实际情况而定）PC 的小屏幕分辨率为 1024*768，所以高度尽量控制在 600px 以内（除去导航栏、工具栏高度），宽度控制在 1000px 以内，避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。但值得注意的是：现在越来越多的宽屏正在逐渐占据市场，相对应的越来越多的网页设计的宽度和高度都不是固定不变的。抽屉提供稳定的尺寸。提供 S (w=378px) 和 M (w=736px)基础宽度选项。这两个尺寸是根据 antd 表单尺寸规范测算，分别可容纳单列和双列表单，而且保持了使用抽屉时父级页内容可见的优势。仍然支持自定义宽度。3. 背景锁定避免滚动条引起的抖动问题浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户注意力。因此我们要做的是背景锁定（从技术角度其实是暂时性干掉滚动条）。4. 关闭方式优化弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有 4 种：右上角的关闭按钮弹窗底部的“取消”按钮弹窗外的任意区域一段时间后自动消失弹窗外的任意区域，这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。但操作配置类弹窗不建议采用这个方式，容易误操作导致正在配置中的弹窗被关闭。5. 避免弹框上再弹出弹框的问题要尽量避免在弹框上再弹一层弹框，两层蒙版会让用户觉得负担很重。方法一：改为抽屉如下图，钉钉的后台编辑员工信息，抽屉弹窗选择部门后打开选择部门与人员对话框。抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉。方式二：避免中间弹窗跳转抽屉弹窗的交互方式方式三：隐藏当前对话框第一步，选择添加成员后隐藏当前新增用户组弹窗；第二步，打开添加成员弹窗保存确定后显示之前到新增用户组弹窗，如下面来自飞书的后台管理，新增用户组弹窗的打开两个弹窗交互方式：6. 优化交互流程现在弹出框不仅承载了信息编辑的功能，还可以作为上下文的跳转，帮助用户衔接路径。如 iconfont 中的新建项目，用户新增后，页面会直接跳转到新的项目空间。如果内容过多，如下图 ，可以重新梳理交互，改成轻量弹窗+新建页的方式。原来的编辑内容过多，业务可以拆分成基本信息和配置信息，新增内容保存后可以自动跳转到配置页面进行配置。7. 模态层优化方式一：模态层颜色根据产品品牌色定模态层模态抽屉的遮罩背景如果根据产品色定不仅更贴合品牌，且显得更有设计感。下图帆软的模态层就不是大部分产品都采用的纯黑透明度而是加入了点品牌的蓝色系。方式二：有模态层但不显示模态层模态抽屉的遮罩背景层可以降低透明度，也可以是全透明不显示的，可以更好的展示关联的信息，点击抽屉其他处可关闭抽屉，钉钉后台管理的模态抽屉就是这样设计的。方式三：去掉模态层下图中的抽屉为非模态抽屉，可以根据左侧列的切换快速查看右侧抽屉内容。最后通过上下两篇「B 端弹窗设计」分享，希望能让你对 B 端弹窗有一个初步的认识和了解。除了弹窗，B 端产品还有很多设计知识点需要学习，在后续的文章中，设计夹将继续为大家分享有用的「B 端设计」文章。慢慢来比较快，如觉得有帮助，欢迎关注作者微信公众号：「Clip设计夹」大厂高手出品！深入了解B端的弹窗设计应用（上）在B端产品中弹窗已经被更多的设计师关注和使用。阅读文章 > 大厂高手出品！深入了解B端的弹窗设计应用（下）本篇文章将分享B端弹窗相关内容，我把文章拆成上下两篇。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-ens-popup-design
表哥
在路上
飞翔的企鹅
