前言 相信大多数人无论在学习还是工作中都或多或少遇到过一些效率低下的情景：

永远有画不完的图、开不完的会，自己的精力又十分有限，十分焦虑事情做不完怎么办

明明有很多事情要做，却无法集中注意力，不断切换处理不同的事情，时间和精力在大量内耗中被消耗掉，实际的输出效率十分低下

要做的事情越多拖延症越严重，面对繁多的任务不知如何下手，时间快速流逝，临近 deadline 的时候突然发现什么都没做

设计资产繁多且混乱，想要找到某个东西的时候总是想不起在哪里

……

所有的这些，都会大大影响学习工作的效率，那么该怎样才能更高的效率处理这些问题呢？

本文会从动力、规划和专注三个角度来破解这个难题。首先，万事的开头一定需要有一个内在的动力作为驱动，在有了动力之后还要对自己做的事情有详细的规划，做到有的放矢，最后，在落地执行的阶段要保持专注。

效率来源于动力 相信你一定有过“通宵达旦、乐此不疲”的愉快经历，比如一整晚打游戏上了十颗星、或者连续十个小时刷完了一部五十集的电视剧；当然也一定有过“心不在焉、味如嚼蜡”的痛苦经历，比如小时候被妈妈强迫练习钢琴时数着时间期待结束、或者在期末考试前夕为了不挂科被迫复习一上午才看了五页书。我们会发现，同样是长时间做一件事，当我们内在动力不同时，效率高低实是天壤之别。那么我们该如何获取工作的动力呢？

1. 自主选择

有研究表明，人类对掌控力的需求是一种生理需求，在面对选择时做决定可以直接证明自己拥有掌控力，并且极大的提升执行效率。人们渴望拥有选择的自由——哪怕所做的决定并不会带来任何好处。

回顾前文提到的例子，无论是通宵打游戏还是连续十个小时刷完一部剧，自己拥有绝对的选择权，因此可以连续长时间保持一种十分高效的状态；而练习钢琴是在妈妈的强迫下做的、复习专业课是快要考试了，为了不挂科而在自己的强迫下做的，在这些事情上，自己的选择权都比较弱，于是效率往往比较低下，且可持续的时间也较短。由此可见，“拥有选择权并能自主做出决定”是获得动力的第一步。在工作中，我们就可以通过“把握选择权并做决定”的方式来获取工作动力。

在我工作初期，为了避免反复修改设计稿，我曾经习惯于在做项目时输出多个方案，把能想到的方案全部罗列出来，并让更具有经验的前辈以及其他项目相关人帮助我来决定哪个方案才是最优解。诚然，对于一个新手来说，这样可以最大限度的减少出错，保证输出方案的质量。但一段时间后，我开始逐渐丧失输出方案的动力，因为我感觉输出多方案只是为了给决策人——而不是自己——提供多个选择而已。因此我输出方案的效率开始直线下滑，有时甚至会卡在“只有两个方案不够选”这样的问题上，为此自己也时常陷入苦恼之中。

破解这个局面的灵感是在一次与前辈的交流中获得的。我开始尝试自己去做设计决策，自己从多个方案中选择自己认为最好的方案。于是，输出多方案这件事就从“给别人提供选项”变成了“帮自己推敲设计”，我也不再单纯为了“多个选项”输出多方案，而是在不断思考“当前的方案有什么问题，还能怎么去解决”的过程中输出更多的方案。这样的改变让我重新找到了设计的动力，思考更加主动、效率也得到了极大的提高。

2. 学会放弃

虽然通过“做决定”可以获取动力，但这并不意味着我们可以无脑“做决定”，向错误的方向走出一百步还不如停在原地不动。我们要尽量保证做的每个决定都是有意义的。

为了做到这一点，可以尝试着在做每个决定的时候多问自己几次为什么，从而找到其背后的原因，同时也可以找到做决策的依据。

当我还在上学时，发现有些“学神”的日常表现与普通人并无二致，他们有时也会逃课、也会不写作业，考试前也未见他们悬梁刺股，但是每次考试成绩却名列前茅。很多年后，我有幸认识了一位这样的“学神”朋友，姑且称其为 A 君，在与他交流后，才解开了我心中的疑惑。A 君给我讲了一个秘诀——学会放弃。

在 A 君的心中，没有什么事情是不可以放弃的，包括上课、听讲、写作业、刷题，这些看起来都是获得好成绩必须要做的事情，其实都可以放弃。问题在于，如何选择该放弃哪些事情。A 君的做法是，当有一件事情需要去做时，首先会问自己一个问题——为什么要做这件事？

比如，第二天有一节课要上，这时就要先问自己，为什么要上课呢？答案是因为上课可以从老师那里学到新的知识点。但是，获取新的知识点并不一定只能通过上课的形式，也可以通过看书、在网上找一些资料、甚至找其他前辈请教。那么问题就变成了“通过哪种形式掌握新知识点更加省时省力？”

A 君说在他上学时，每个学期都会去买一本教师版的教材，上面会有一套比较完整的教案，他在预习时会先看一遍教案，如果自己能够掌握所有的知识点，那么第二天的课就会选择放弃。这就是为什么虽然他逃课了，但是还能取得好成绩的原因。有得就有失，有时有计划的放弃反而会提高整体效率。

效率来源于规划 只拥有动力还不足以让 工作效率 有质的提升，我们还需要对工作内容进行合理的规划，让工作变得井井有条。在开始工作之前先做一份工作计划，可以让工作的执行事半功倍。

为了更好的制定工作规划，我会把长期的目标规划的更加系统，而把短期的规划尽量做到碎片化。

1. 长期规划——让目标变得smart

美国管理学大师德鲁克于 20 世纪 50 年代提出 smart 原则，在制定和考核绩效时须符合五项原则：具体的(Specific)、可衡量的(Measurable)、可达到的(Attainable)、与其他目标具有相关性的(Relevant)、具有明确的截止期限(Time-bound)。

在进行长期目标的规划时，也可以参考这样的原则，让每个目标变得更加清晰。

例如“提升产品的用户体验”可以是一个目标，但是不是一个好的目标，因为其不够具体、不易衡量、不易达到且不具有明确的截止期限。

针对“不具体”的问题，我们可以对其进行一些更具体的拆分，例如“优化触区大小”、“优化转场动画”、“提供更加情感化的空页面插图”都可以成为具体的目标。

针对“不可衡量”的问题，可以给目标添加上一些可量化的指标，例如“优化产品的 5 个一级页面中的触区大小”、“优化所有一级页面向二级页面跳转的转场动画”、“提供常见的 10 种空页面场景的情感化插图”。

在确定目标-拆解目标的过程中，还要时刻注意目标的是否是可达成的。例如“优化产品中全部触区大小”这个目标，在不同的产品中工作量也是有着巨大差异的，如果优化对象是 QQ 这种体量庞大的产品，牵扯到的页面和业务团队甚至无法穷尽，“优化全部页面的触区大小”就是一个不可达成的任务，此时，我们就可以将目标修改为“优化全部一级页面的触区大小”，让目标变得具有可达成性。

制定任务时，应该给任务设定一个截止期限，例如“一个月内优化全部一级页面的触区大小”，这里的“截止期限”实际上不一定是“完成期限”，而是一个回顾的时间点。到了截止期限，我们应该回顾该任务的完成情况，并对其进行进一步的处理，已完成的任务可以进行复盘、归档；未完成的任务可以进行进一步的规划。

2. 短期规划——日程计划or任务池

所有的长期目标都要依赖每日的具体执行才能得以实现，所以每日的日程规划也显得尤为重要。然而并不是制定一个日程规划表就一定可以按部就班的完成任务。相信绝大多数人应该都遇到过这样的情况，早上开始工作之前认认真真地制定了一份工作计划，精确到了每个小时需要完成什么样的工作，但是可能会因为各种各样的原因——临时加入的高优需求、临时的会议亦或同事向你咨询了几个问题——打乱了整个工作计划，到了晚上发现，规划好的事情只完成了一半。

变化总比计划快，我们永远无法精确预判意外情况会消耗掉我们多少时间和精力。因此，与其做一份十分详尽的时间规划，倒不如建立一个任务池。

todo 列表就是一个天然的任务池，把需要完成的事情记录下来，不要指定具体的完成期限，而是归类并标注优先级(可以参考前文阐述的 ROI 管理模式)，尽量摆脱以时间为衡量尺度的任务规划方式，从而避免单纯因为赶 deadline 而优先完成 ROI 过低或者价值较低的任务，导致更加具有价值的任务被迫延期。每次规划仅聚焦于任务池中最需要完成的一两个任务，不必过分追求一个完整的计划表。当完成当前规划的任务后，再从任务池中找出需要继续完成的任务。

“写 todo 列表”这件事也不必是一个固定日程，可以利用碎片化时间进行记录和整理，例如上班通勤的路上、完成一项任务后的短暂休息时间、在食堂排队的时间等等。

总之，尽量降低“日程规划”这件事的形式化，随时随地管理自己的任务池，用极致碎片化的方式来管理任务池，可以让短期规划这件事情变得更加灵活且高效。

效率来源于专注 在衡量工作效率时，我们讨论的不只是对某一件事情的专注度，而是整个工作过程中的“综合专注度”。例如我们可能在攻克一个难点时十分专注，但是中途又被打断去快速处理了一些其他琐碎事物，然后再次回到之前的攻克难点的任务中。如果从单个任务的视角来看，无论是攻克难点的任务、还是处理琐碎事物，可能都保持了高度专注的状态，但是如果考虑到在多个任务中间来回切换而产生的内耗时，整体的效率并不见得很高，这种情况下“综合专注度”就不算高了。

为了尽量提升“综合专注度”，我把日常任务分成三种类型：疑难型任务、紧急型任务和琐碎任务。三种任务需要的专注度不同，处理方式也不同。

1. 疑难任务 我把工作量大且需要高密度思考的任务归类为“疑难任务”。这类任务需要注意力高度集中，且需要大块时间集中处理。

例如“以提升发布效率为目标重构整个发布编辑流程”就是一个疑难任务，该任务涉及到大量竞品的调研分析、超过十个页面的设计、繁多的交互分支路径的遍历。

面对这类任务，最好的解决办法就是进入心流模式，利用整块的时间集中攻克。心流是心理学中的一个概念，指一种将个人精神力完全投注在某种活动上时所表现的心理状态，在这种状态下，可以获得最高的工作效率，但是通常这种状态下会呈现出一种抗拒中断的特性，只能专心处理某一项任务。因此心流状态十分适合用来处理疑难任务。

为了进入心流状态，首先需要创造一个舒适的工作环境，包括但不限于一个舒适的工作姿势（如一套舒适的桌椅和随手可得的办公工具）、不易被干扰的环境（如带上一副降噪耳机并把手机调到勿扰模式）等等，总之就是尽量减少被打断心流状态的可能。

不必强求自己一步进入新流状态，实际上也鲜有人可以做到这点，我们可以按照思考密度从低到高的方式来安排工作流程，让自己渐入佳境。在开始解决真正疑难的核心任务前，不妨做一些周边工作作为热身，例如遍历市面上的相关竞品，并一一截图，这并不需要太多复杂的思考，但是却可以帮助自己进入工作状态。在完成竞品的遍历后，就可以顺理成章的开始进行竞品的比对和分析，再过渡到设计方案的输出。“遍历竞品-分析竞品-输出方案”就是一个思考密度和专注程度逐步递增的过程，这样的工作流程会更加容易进入心流状态，并高效的解决疑难问题。

2. 紧急任务 工作里经常会遇到一类任务，提出的比较临时，例如老板提出的紧急需求、线上出现的严重 bug 或重大舆情等。这类任务往往重要性很高，需要在极短时间内响应，因此对于“综合专注度”会产生负向影响，我把这类任务归类为“紧急任务”。

紧急任务往往会让人手足无措，这是因为当人从比较放松的状态突然进入到紧张状态时，注意力往往会本能的聚焦于某个最明显的事物或者平日养成的习惯中。例如在高速公路上正常行驶时，突然遇到前车紧急刹车，很多新手司机会出于本能的把刹车踏板踩到底并猛打方向避让前车，虽然这样的选择并不明智，但是人们会本能的把注意力聚焦在“减速、躲避”这件最为明显的任务上。

如果是一位驾驶经验丰富的老司机在同样的紧急情况下，可能就会采取更优的处理方式——点刹、扶稳方向盘、尽量降低撞击伤害。这是因为他对于“前车急刹车”这样的紧急状况有充分的心理预案，所以遇到紧急情况的时候才不会手忙脚乱。同理，在工作中要想高效的处理紧急任务，最好的办法就是“有备无患”，把工作做在平时，在紧急情况出现时，可以用最快的速度做出最优的应对，从而尽量减少紧急情况对综合专注度的影响。

我们可以通过预测/预想的方式，来提前做好准备，避免紧急情况出现时的手足无措。例如当我们做汇报方案/晋升答辩时，可以根据已有经验提前预想对方会挑战哪些问题，并思考该如何回答；做设计方案时，提前思考设计方案的优缺点以及上线后可能会遇到哪些问题，并做好预案。

另外可以通过复盘已经出现过的紧急任务来总结经验，以备日后之需。我曾经遇到过一个十分临时的老板需求，要求在一个现有的页面基础上用十分钟快速做一些微调。但是我在处理这个任务的时候遇到了一个问题——一时间脑子一片空白，完全想不起这个页面的源文件在哪里，最终只好重新画了一整个页面，本来十分钟就可以完成的任务，实际上花费了半个小时才做完。在这件事情之后，我与其他同事一起，把负责项目的核心页面源文件进行了一次归档，日后再次遇到类似的问题，就可以十分高效的找到想要的源文件了。

3. 琐碎任务 工作中还会有大量的琐碎任务，这类任务复杂程度不高，工作量也不算大，也不是非常紧急，但是数量和种类繁多，互相之间又不耦合，我在处理这类任务时有三板斧：记录和归档、统筹规划、集中处理。

记录和归档

好记性不如烂笔头，为避免遗忘，遇到需要处理的琐碎任务一定要及时记录下来，这也会成为任务池的重要组成部分。

最好选择一个可以多端协同的工具进行记录，确保自己在任何环境中都可以记录和整理。我日常会使用 notion 进行事项记录和规划。除了优秀的多端协作体验以外，notion 还有一个重要优点是可以用“面向对象”的方式进行数据整理。例如我会建立“相关人员”、“版本节奏”等等数据库，这些数据库可以独立管理和维护，而在需求管理时，可以在其中直接调用“相关人员”的数据来标注负责该需求的产品、设计师、开发等人员，也可以调用“版本节奏”来快速标注当前需求的时间节点信息，并且各个数据库中的数据也是实时联动和更新的。

从任务管理模式到 ROI 管理模式

有一种比较常见的一种工作模式——逐项完成手头的任务，这样的工作模式以任务本身为管理对象，因此我把它称为“任务管理模式”。但是在工作中，相比于海量的任务，无论是个人的时间精力还是团队的人力资源都会显得捉襟见肘，有时面对繁多的任务甚至会无从下手，这时就会出现一个棘手的问题——该如何进行工作任务的取舍？

在商业领域，有一个名词叫做 ROI(Return on Investment)，是指回报与投入的比值，直接反映了综合盈利能力。在日常工作和生活中，也可以引申这样的概念，通过一项任务的产出与投入的比值来衡量该任务的价值。

前文中提到的学神 A 君在获取知识点时，是选择听课还是自学，其根本的决策依据就是 ROI。如果知识点简单，自学即可完全掌握时，听课就显得耗时耗力，ROI 较低，此时就选择逃课自学；反之如果知识点比较难，自学起来比上课还要更加耗时耗力，那么此时上课的 ROI 就更高，肯定要选择上课。

这种工作方式有两个步骤：第一步是分析每项任务背后的价值点，并以此为依据对多项任务进行归类；第二步是根据 ROI 进行优先级的排序，然后做出取舍。这种以 ROI 为核心管理对象的工作方式，我称之为“ROI 管理模式”。

在处理琐碎任务时，我们要有意识的从单纯的任务管理模式转向 ROI 管理模式。这就要求我们去思考每件事情背后的价值，并且把目光放在长期的收益上，而不是只关注短期收益。优先选择 ROI 高的任务，放弃 ROI 低的任务。

集中处理

每天单独规划一段时间用来集中处理琐碎任务，这样既可以保证琐碎任务有持续不断的被处理掉，又可以尽量减少频繁任务切换造成的内耗。我比较习惯于在早上以及下午开始工作之前的半个小时处理琐碎任务，恰好可以作为开始工作的热身活动。

把日常的任务按照“疑难任务”、“紧急任务”、“琐碎任务”进行分类是我自己在工作中常常使用的分类方式，实际的分类方式也可能会因人而异，但是不变的核心思路是合理安排各项任务，最大限度的提升“综合专注度”，从而获得更高的工作效率。

结语 本文从动力、规划、专注三个方面探讨了一些提升 设计效率 的思路，实际上提升效率的手段不仅局限于本文讨论的范围，每个人面对的问题和状况都不尽相同，可以根据自己的实际情况总结出自己的“提效套路”，希望每位读到这里的读者都能有所收获。

效率翻倍！24 个腾讯高手的私藏设计工具 工欲善其事，必先利其器。

阅读文章 >

欢迎关注作者微信公众号：「腾讯ISUX」

项目背景 如大家所知，企业的招聘方式基本固定为社招与校招两种，而社招渠道比较宽泛，如多个招聘平台的招聘信息、猎头寻人、人脉内推等，而校招的渠道却比较单向，基本都是在毕业季前，在大学内宣讲、学校内搭建招聘展位等，由于时间较固定且频率不高，所以 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」的微信公众号：

今天继续给大家讲交互方案的设计思路。

你们会发现其实想做交互设计比 UI 设计难很多，那为什么交互设计比较难呢？因为 UI 设计相当于从 0.5 到 1，而交互则是从 0 到 1。但并不意味着 UI 就比交互来的层次低，交互注重逻辑，UI 注重对品牌和质感的表现，没有孰优孰劣，但是在入手和执行层面，UI 相对简单一些（我自己也是 UI 出身）。

交互设计也可以说是体验设计的核心。我们需要根据已有的“材料”来进行任务流程、用户行为的设计，以确保用户能高效、满意的完成任务达成目标和解决问题。所以在这整个环节中，要思考的信息和判断的逻辑会更复杂。 交互设计 往往觉得很有成就感的地方在于自己设计的流程或者一些创新的交互能够获得用户的好评以及业务数据的提升，在这个方面 UI 设计的成就感知会来的不够明显，因为视觉表现很难量化，用户也只能通过好不好看来表达，所以 UI 设计师们也希望通过一些方法来找到属于自己的成就感，例如我们也会选择一些平台发表自己的视觉创意来获得同行们的认可等等。

那么今天我们一起来聊一个交互案例，来看看需求从“材料”到具象化表现都需要思考什么。当然，学案例是为了扩充自己的知识面，但是想要真正学会，我们要从底层开始学。

首先来讲一个发布菜谱的功能：一个美食类产品中需要设计一个用户自己创建菜谱的流程，基于这个概念我们可以如何 设计流程 。我们都知道商业设计离不开业务，那么这里我们先不考虑这么多，只考虑如何将流程设计做到最高效，有需要的时候再将业务加入进来。

第一步：来尝试进行一下脑暴 这里和工作中常规的步骤不一样，在工作中我们往往第一步都是去分析这个需求的背景、用户的定位、业务目标什么的，但是这里不用，我们只单纯的做交互方案，所以就不去啰嗦那些了。

在脑暴前，准备好 3 个问题：

1. 什么是菜谱

2. 为什么要发布菜谱

3. 怎么发布菜谱。

通过这 3 个问题我们就可以大致知道这个任务所包含的信息、形式、流程。

1. 什么是菜谱：菜谱是通过图文、视频等方式给用户提供做菜步骤的教学内容

2. 为什么要发布菜谱：希望通过用户自主发布内容的形式来提高整体用户的活跃度以及平台对用户个人品牌的塑造。让用户之间产生更多的互动。

3. 怎么发布菜谱：这里要根据第一个问题脑暴之后再进行流程的设计。

接下来我们根据菜谱这个概念进行拓展：1.菜谱的基本介绍 2.菜谱的制作流程 3.其他支线选项。

在真实工作中其实产品经理会把这个流程要包含的功能和信息点都列举清楚，只是我们现在自己来从 0 到 1 设计一次。

菜谱的基本介绍可以包含菜谱的封面、菜谱的名称、菜谱的简介、难度、时间、食材，菜谱的制作流程可以包含需要的图片、文字描述。但是这里的颗粒度大小不一，例如难度、时间颗粒度小，但是食材我们可以再继续细化拓展：食材的名称、用量。菜谱的其他编辑选项，例如菜肴的口味、菜系的分类，编辑这个选项是有助于其他用户在筛选菜系和分类的时候更快的找到这个菜谱。

第二步：根据信息和内容进行触点分析和控件使用 例如菜谱的封面，那么我们就需要一个容器来上传图片或视频，可以用一个占位图 image 来代替，先不用考虑放什么位置以及在哪个节点，先将每一个信息点都进行控件化。接下来菜谱的名称和简介都是输入模块 text。难度和时间有两种形式：输入和选择，那我们当然用选择，因为操作和理解成本更低，能用选择就不要用输入。选择用什么形式呢？可以用 picker、action sheet 动作面板、展开单选，那哪个更方便高效呢？这里如果需要选择的选项不多，也不需要滚动、联动，那么用 action sheet 就可以了。如果你想让选项更直观更方便操作那么你可以把选项直接放出来。

交互控件科普系列！ Sheet 的常见样式和设计注意事项总结 还在频繁地使用弹窗对用户展示重要提示吗？

阅读文章 >

接下来是食材，食材又分为食材的名称和用量，那么也是一个输入的行为，需要两个输入框，这里就不能用选择的交互了，因为在这个场景中选项是根据用户需求随机、特定的，需要用户自己输入。

最后是菜谱制作流程中的图片和文字描述，也是图片和视频的上传和文字输入模块。这样我们就把这些控件具像化了，就更直观的帮助我们进行接下来的操作。

第三步：将控件进行组合以及场景的补全 根据用户的操作习惯和场景，我们将操作顺序捋一遍。什么样的操作顺序更符合我们上传的习惯呢？先填写制作顺序吗？不对，应该先编辑基本信息，也就是我们通过烹饪的流程，先想好要做什么菜，再去准备食材，再开始一系列烹饪的步骤。

所以我们要先让用户去添加封面编辑标题和介绍，烹饪难度和时间其实放在开头和末尾都可以，但是考虑到这些信息在列表中会一起展示，那么我们索性就在开头就直接一起编辑。

接下来是添加食材，添加食材的场景中会涉及到对食材的添加、删除、清空以及智能编辑（类似添加收货地址），所以这里的场景不要漏掉。那有的小伙伴要问是不是可以再加一个拍照识别食材的功能？其实不需要，因为我们在准备做菜谱之前肯定对这道菜有了解，知道每一个食材的名称我们才会去做菜，否则连什么食材都不知道就去做，那万一有毒呢？所以这个场景是不存在的。

再接着是编辑制作步骤，依然是思考用户场景，除了上传图片和文字以外，还需要提供步骤添加、删除、调整位置、批量传图等功能。这些场景我们在脑暴的时候或多或少会遗漏掉。

第四步：制定步骤和流程 移动端产品的层级和路径主要是根据页面来划定的，所以页面越多路径就越深，但是路径深并不意味着一定就多余，路径少也并不意味着操作就简单。路径阶段的划分主要是根据这几点来考虑的：

1. 当前页面内容是否溢出、符合场景、满足预期也就是说当前页面中的内容是否符合当前场景的用户，以及是不是过载了。例如我们去购买电影票的流程，当我们在查看电影详情的时候，不会出现电影院和电影场次的选择，因为不符合当前场景的用户需求。

2. 场景是否独立我们在选择回收自己的手机时，在选择型号页面不会再让用户编辑估价信息。这个场景是独立的，并且只有完成了前置操作步骤后才能进行下一步。

3. 任务是否需要阶段性结束，为什么需要进行新建界面，是因为当前界面在满足 1 和 2 两个约束后，要考虑第一个步骤是否阶段性完结了，例如我如果把菜谱编辑基础信息界面单独做一个界面，而编辑步骤再单独做一个界面，这里第一界面是否阶段性完结呢？还没有，因为你可以随时要去修改标题、封面、食材等等，而经常返回上一页并不是一件很简单的事，用户也会担心我编辑好的步骤会不会保存等一系列问题。

这里再用一个蔚来 app 中选购车辆配置的流程举个例子。他这里也将选择配置流程划分成了几个界面，但这个流程结构就不是单纯的线性结构了，虽然他每个不同的配置单独做成一个界面但是顶部利用 tab 来切换不同配置选项的界面。

所以当任务需要阶段性完成时候，例如只有先输入手机号点击发送验证码之后才能收到验证码，在这样的流程中我们可以使用下一步来进入下一个环节。如果要分不同的界面，而又没有出现阶段性完结的情况，那么前一页的内容编辑再下一页也需要有，例如我们把标题编辑单独做一个界面，但是下一个编辑基本信息界面也依然要能够编辑标题。

第五步：设计原型和布局 通过对用户场景和触点的分类，以及对第四步的思考，我们可以发现其实编辑基本信息和编辑步骤是需要放在同一个页面中去完成的，因为没有阶段性结束。但是放在同一个界面也有一些问题比如单个界面需要编辑的信息太多，比较繁琐，再次编辑需要上下滑动浏览不方便等问题。所以我们也可以看一下市面上的竞品都是怎么做的，有一些产品会将编辑标题单独划分出一个界面，这其实没改变前者的问题，单独作为一个页面或许是基于这两点考虑：

1. 希望用户通过认真对待标题来提高菜谱的点击率和引起别人的兴趣

2. 业务需求，通过让用户了解优质内容的协议来谨慎对待上传菜谱的质量

3. 对于一个复杂操作前的一个准备和引导，让用户更容易接受接下来的大量表单的填写。

接下来是填写的界面，那么我们就可以根据信息展示的优先级和第三步设定好的控件进行布局，这里涉及到的原理就不讲了。我们主要来分析一下某些功能在布局的时候为什么这么放。

首先封面和标题还有简介从上至下应该没有什么问题，因为有两个输入模块咱就无法左右放，因为这 3 者是强关联信息所以是一个整体。其次是难度和时间，这两个字段包含的内容和形式我们在之前的步骤中提到有两种形式，一种是 actionsheet 还有一种是选项标签化平铺，前者的好处是节省空间，易扩展，后者则更加直观和方便选择，另外也要考虑类似控件在整个产品中的统一性。

接下来是食材添加和编辑，这里涉及到食材名称和用量的文本输入，这里可以直接用一行输入模块来放单个食材的编辑，因为整个页面表单很长所以尽量简化上下空间。同时还有对食材的删除、清空、调序和新增。那这三个按钮怎么放比较合理呢？我们要看用户使用的场景，可以考虑的维度有：操作频率、操作优先级以及任务的主方向。

所以在食材编辑这个模块中，最高频的是新增其次是删除，再次是调序最后是清空。而当食材新增后内容会向下延伸，所以新增的按钮不适合放在上方，也不适合放在每个输入模块的右侧。删除和调序则是最某个食材信息的编辑所以是针对单个输入模块的，那必须跟在后面。最后的清空可以放在新增按钮的左侧。这样就完成了添加食材的模块。

再接下来是烹饪步骤。上传图片和编辑文本没什么问题，上下布局是因为在正式浏览的时候需要大图和文字搭配的形式，所以为了形式统一就只能这样布局。

目前调整步骤在最底部，同时删除操作也需要点击调整步骤后才能出现，这里因为调整步骤和删除不是高频操作，弱化层级可以理解，但是如果放在底部，那么如果我想要删除第一步和调整前 2 步顺序的时候，就要上下来回滑动，不是很方便。

那其实我们可以这么做，把烹饪步骤作为一个 bar，在页面向上滑动的时候置顶，添加食材也可以这样操作。就是为了让用户在上下滑动的时候可以随时进行一个编辑，步骤在任何位置都可以直接进行换位和删除。另外由于是大图模式，在换位的时候进行长按拖动其实对拇指的操作有一定的要求。既然这样为什么不用上下切换的按钮进行调序。

我们来看一下拇指拖动要激活两个阶段，首先要长按激活拖动，然后需要按住不放进行拖拽，由于卡片面积较大拇指滑动的距离就要长，对于手小的用户就不太方便了。那我们是否可以做成一个上下切换的按钮，这样只要通过单击就可以完成顺序的调换，并且通常调换顺序并不需要跨越多个步骤进行，一般也只是相邻两个步骤的顺序换一下即可。所以这里首先我会把编辑按钮和批量传图都放在烹饪步骤 bar 右侧并置顶。

最后再补上剩余的选项模块和发布、预览、草稿的按钮即可。预览和草稿必须放在导航栏，因为这俩功能是随时需要进行操作的所以不能在页面底部，而发布按钮可以放在最底下。也有小伙伴想问，为什么不在底部做一个固定的 bar 来放这些按钮呢。因为页面纵向信息很复杂，不仅底部占用了高度也容易误操作，在没有编辑完时，发布按钮还是比较鸡肋的，所以是不会出现一个底部固定的 bar。

好啦，今天分享的交互流程案例大家学废了吗？我们下期再见，有更多想法和交流欢迎在留言区留言！

为什么你的交互方案过不了？大厂高手教你这 4 个方法！ 本周特邀前百度资深交互设计师薏薏来讲讲自己从交互小白一路升级打怪的过程，薏薏从纯理科转行设计，从 C 端近年转行 B 端，求职、工作中踩过不少坑，今天将分享其中的一部分心得体会。

阅读文章 >

欢迎关注作者的微信公众号：「应谋鬼计」

设计在于权衡 每当谈到设计原则，大家仿佛认为只要将每一条原则发挥至极致，即可设计出最为卓越的产品。然而在现实中，我们时常需要在不同的原则之间进行取舍，或是处理 设计原则 与业务目标及技术局限之间的冲突。

设计的过程，即是在所有相关因素之间进行权衡并寻求最优体验的过程。那么，我们应该如何明智地进行权衡呢？

何为权衡？ 一款产品面世之前，通常会历经诸多规划讨论、会议、验证、打回、迭代等等。旁观者时常认为自己可以很聪明地发现产品当中很多有待改进的地方，而实际上这些“改进”或许已经在团队自己的 backlog 当中，等待资源到位或时机成熟时付诸实施。

伴随着整个设计开发流程，我们始终需要考虑如何进行权衡。譬如在现有的时间及预算条件下应该选择怎样的用研方法？对于当前目标，哪些设计原则具有更高的优先级？面对无法突破的技术屏障，次优的设计方案是什么？是否需要砍掉部分功能，或是将 deadline 延后？

何时需要权衡？ 任何时候都可能需要。尤其是在不同方面的目标或原则相互冲突的时候。即便是两个显而易见的设计原则之间都有可能产生冲突。譬如应该确保更少的点击次数还是更低的认知负荷？你可能需要优先考虑降低用户的思考成本，即便以更多的点击作为代价。而更多时候，我们需要在不同的维度之间进行权衡，包括业务目标、用户目标、技术局限等等方面。

权衡的原则 与所有制定决策的过程类似，我们可以在若干指导原则的帮助下进行更有效的权衡决策。

1. 通过高层目标推导底层方案

每个产品都应该有长期目标与愿景。通常，底层决策可以在清晰简明的高层目标的指导下变得明确起来。

譬如，冥想类 app 的目标是给人们带来平和的心境，帮助他们练习倾听内在。自然，所有产品都希望实现良好的口碑传播，但在冥想课程后面添加“分享到社交平台”的按钮是否妥当呢？未必。在“塑造平和心境”的高层目标之下，诸如“分享”、“排行挑战”一类的社交互动功能更应受到否决。冥想练习结束时的界面状态应该是简洁而优雅的，这会有助于人们将平和的心境带入接下来的现实生活当中。

2. 成本与价值

成本与价值矩阵是一种非常经典的优先级排序方法。我们需要评估开发一项功能所耗费的成本及产生的价值，然后将其放置到矩阵中。设计师与开发人员可以有效地对成本进行评估，而关于价值的看法很可能因人而异。

https://www.nngroup.com/articles/prioritization-matrices/

要弄清解决一个问题或开发一个功能可以带来的价值，我们可以问问自己：

问题出现的频率如何？每天若干次，还是偶尔出现？ 有多少用户会被这个问题影响？ 问题的严重程度如何？只是小小的困扰，还是可能导致用户放弃产品？ 能否在解决问题的同时，不至于让用户付出高昂的学习成本来适应新的方法？是否应该通过若干次发布来实现增量迭代？ 3. 妥协，而非牺牲

如果无法以最优的方式同时实现功能 A 和功能 B，那么与其彻底砍掉其中某一个，不如考虑是否存在妥协的方式。如果 A 拥有更高的优先级，那么在此前提下我们还可以针对 B 做些什么？

譬如，出于安全考虑，一些产品会将登录流程设计得比较复杂，不仅需要身份信息，同时还需要通过不同的设备来辅助认证。从体验的角度，这无疑增加了使用的难度。但换个角度，将安全需求作为即有约束，我们如何在这个框架内尽可能提升易用性？我们可能要作出一定的妥协，但不至于彻底牺牲体验。

4. 遵从规则，或打破规则

关于设计、开发及产品决策制定，都有着相关的准则、规范及最佳实践。我们需要了解何时遵守哪些，何时需要针对特定的用例和场景而打破规则。这些在很大程度上来自于经验。

以用研为例，理想的操作方法在每本书中都有介绍。而在现实中，我们时常需要根据项目预算及时间资源来调整具体的方式，最典型的可能包括适度减少被测数量，邀请目标受众以外的用户，通过视频连线进行测试而非实境观察等等。

“仅与一位用户进行测试也强于不做测试。”—— Steve Krug，《Don’t Make Me Think》

常见的权衡类型 设计层面的一些权衡决策通常是设计师可以去把控的，而无需整个产品团队一起深入讨论。以下是一些常见的需要权衡的方面。

1. 最小化认知负荷 v.s. 最小化操作成本

“某些类型的心智处理工作相比于其他行动更具挑战性。”—— Susan Weinschenk，《设计师要懂的心理学》

根据《设计师要懂的心理学》所述，人类需要处理三种类型的负荷：

认知负荷：例如理解事物、心算、记忆密码等等。 视觉负荷：通过视觉感知界面时的感官负载。 行动负荷：诸如移动鼠标或点击屏幕上的交互元素时所需付出的操作成本。 处理这三类负荷所需占用的心智资源是不同的，其中认知负荷占用的最多，视觉其次，行动则最少。所以“减少点击次数”并非一成不变的准则，特别是当你仅仅为了降低点击次数而将大量信息塞进一个界面的时候。信息过载所产生的认知负荷，相比于增加几次点击所带来的成本提升，着实更加令人痛苦。

我们接下来看到的是 Slack 的公司注册流程。仅有的三个必填项分散到了三个界面中，增加了两次额外的点击，但在心智上，每一步都精确符合用户的认知，你无需付出太多的思考，流程自然而然，你甚至不会在意点击过几次鼠标。

来源：Slack

2. 清晰性 v.s. 一致性

另一个典型的情况是，如果稍许的“不一致”能够使信息更加清晰易获取，则可以尝试使一致性妥协于清晰性。不过这里需要把握一个度。我曾做过的一个项目中，客户希望每一次的发布活动都能使用全新的设计风格。这样搞一两次确实可以使活动显得独特而出彩，而长此以往，整个设计思路会变得非常轻率。

3. 美观性 v.s. 易用性

多数时候，我们所遵从的原则是首先让产品易于使用，而后使其更加美观。这方面确实存在不少争论，所以这里我只举一个例子来说明另一种情况：有些时候，美观性确实可以掩盖易用性方面的问题。

根据尼尔森诺曼团队（NN Group）的研究，“对于拥有良好视觉外观的界面，用户能够容忍其所存在的轻微的易用性问题。” 在研究当中，一名用户遇到了很多轻微的界面交互问题，但最终仍然完成了任务。之后，当被问及整体体验时，这名用户夸赞了界面的良好外观，包括配色及图片等等，并评价这个网站“非常易于使用”。

4. 安全性 v.s. 易用性

这一点取决于具体情况。对于大公司大产品来说，出错的成本过于高昂；存在潜在冲突时，安全性远比易用性更加重要。譬如麻烦的多重认证机制在这类产品中非常常见。此外，很多公司的内部工具在安全性方面同样拥有更高的优先级，毕竟即便易用性相对较差，员工无论如何也需要接受培训学会使用。

而对于面向大众的小公司小产品，安全性与易用性之间的优先级差距相对而言没有那么悬殊，很多时候我们更倾向于易用性优先，使人们首先喜欢使用产品，而在需要确保安全性的环节提供相应的对策。

5. 现有模式 v.s. 创新模式

如果基于现有的模式库来构建产品，那么我们时常需要权衡的一个问题，就是花费时间创造新模式是否值得，或是仅依靠现有模式便好。要创造新模式，我们还要考虑有哪些即有元素可以被运用，新模式在将来可以怎样被复用，包括所需的时间成本等等。

而现有的模式可以节省设计与开发成本，但对于特定的需求来说未必能提供到最优的解决方案。

跨职能权衡 然而在多数时候，关于权衡的决策很难由设计师单方面制定。很多“辩论会”由此而生，各团队都希望立足于自己所在的职能去争取到最优的方案，相关的讨论往往混杂着各个维度的要素，难以清晰权衡。

尼尔森诺曼团队提供的“权衡标尺”可以非常直观地为用户需求、功能特性等要素进行优先级排序，帮助产品团队聚焦在最重要的方面。步骤大致如下：

第一步：与利益相关人及其他团队成员共同脑暴产品需要具备的各种关键要素，例如移动支付、愿望单、社区、搜索；一致性、可访问性、安全性，等等。

来源：Nielsen Norman Group

第二步：将这些要素按照主题进行分组，例如“项目要素”、“功能特性”、“用户体验诉求”等等。

来源：Nielsen Norman Group

第三步：通过讨论进一步浓缩每个主题当中的要素数量，为每个要素设定一个重要度渐增的标尺；刻度的数量等同于要素的数量，且每个要素的得分互不相同，从而使团队必须制定清晰的优先级决策。

来源：Nielsen Norman Group

结语 产品设计 亦如我们的生活本身，很多时候并不存在绝对正确的决策。在不同的情境下，有着不同的优先级、目标、约束，以及我们所必须进行的权衡。为了能够在所有的局限要素之间寻求最优决策，我们需要始终把握住高层目标，进而关注底层细节。创造产品并持续打磨的过程自始至终离不开“权衡”二字。

那么多设计原则如何快速掌握？试试我这个方法！ 之前写过一篇《零基础如何成为交互设计师？

阅读文章 >

欢迎关注作者的微信公众号：「Beforweb」

本篇文章总结了 B 端 表单设计 中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。

前言 在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。

表单设计的 3 大模式 1. 平铺 平铺：指的是将表单信息完整的排版在界面中。

无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。

例如：飞书的审批表单页面设计就是采用平铺的设计方式

2. 分组 表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。

折叠分组

折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。

在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。

折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。

例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式

区域分组

区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。

在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。

例如：下面是我在工作中所运用的一个区域分组的表单设计方式。

标签分组

标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。

上下结构

左右结构

复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。

下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。

3. 分页 分页：指的是将整个表单信息通过多页的形式展示。

分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。

同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。

表单的 4 大呈现方式及使用场景 1. 弹窗（对于信息较少的表单）

最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。

案例：

2. 抽屉（内容信息较多，且与底部信息强关联） 抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。

抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。

下面分别介绍这三种模式的区别以及使用场景。

有遮罩层的抽屉模式

有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？

有遮罩层的右侧抽屉模式的表单具有以下特点：

01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。

02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。

案例：

无遮罩层的抽屉模式

无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。

无遮罩层的右侧抽屉模式的表单具有以下特点：

01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。

02：适用于复杂表单且可以展示更多的字段信息。

03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。

案例：

3. 挤压模式

挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。

挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。

但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。

案例：

4. 页面（单独表单填写，且信息量较多）

当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。

案例：

总结 B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。

简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）

6000字干货！6个方面帮你循序渐进掌握表单设计 前言 表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。

阅读文章 >

欢迎关注作者的微信公众号：「设计小余」

本篇文章总结了 B 端 表单设计 中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。

前言 在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。

表单设计的 3 大模式 1. 平铺 平铺：指的是将表单信息完整的排版在界面中。

无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。

例如：飞书的审批表单页面设计就是采用平铺的设计方式

2. 分组 表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。

折叠分组

折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。

在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。

折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。

例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式

区域分组

区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。

在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。

例如：下面是我在工作中所运用的一个区域分组的表单设计方式。

标签分组

标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。

上下结构

左右结构

复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。

下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。

3. 分页 分页：指的是将整个表单信息通过多页的形式展示。

分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。

同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。

表单的 4 大呈现方式及使用场景 1. 弹窗（对于信息较少的表单）

最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。

案例：

2. 抽屉（内容信息较多，且与底部信息强关联） 抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。

抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。

下面分别介绍这三种模式的区别以及使用场景。

有遮罩层的抽屉模式

有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？

有遮罩层的右侧抽屉模式的表单具有以下特点：

01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。

02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。

案例：

无遮罩层的抽屉模式

无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。

无遮罩层的右侧抽屉模式的表单具有以下特点：

01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。

02：适用于复杂表单且可以展示更多的字段信息。

03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。

案例：

3. 挤压模式

挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。

挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。

但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。

案例：

4. 页面（单独表单填写，且信息量较多）

当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。

案例：

总结 B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。

简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）

6000字干货！6个方面帮你循序渐进掌握表单设计 前言 表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。

阅读文章 >

欢迎关注作者的微信公众号：「设计小余」

Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。

为了保证这篇文章的质量， Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。

总结 从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：

B 端界面设计占比 476/828，57.4%； C 端界面设计占比 180/828，21.7%； 视频动效作品占比 223/828，26.9%； 明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。

Dribbble 年度最佳作品

Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。

为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。

MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。

最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

1. 易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。

2. 曲线

在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。

除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。

3. 多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。

B 端界面设计 1. 侧边栏 Sidebar

B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。

2. 仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。

3. 流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。

4. B 端 C 化

B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。

B端产品C端化是自嗨？对不起我想得太简单了！ 经常在网上看到「B 端产品 C 端化」的讨论。

阅读文章 >

5. 轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。

界面设计技巧 1. 人文气息

为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

2. 毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的 设计趋势 。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“ 透光艺术-C4D 创建彩色玻璃的 4 个技法 ”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。

实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧 这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。

阅读文章 >

3. 轻拟物

轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

大厂都在用的轻拟物设计风格，本文教你四步完成！ 上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读： [link https://www.uisdc.com/light-imitation-style] 本期展开轻拟物的具体技法讲解和演示。

阅读文章 >

4. 简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。

5. 几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。

几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

6. 暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。

在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。

顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档 近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。

阅读文章 >

7. 模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。

为什么我强烈建议你学会使用模块化设计？ 风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。

阅读文章 >

8. 插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。

9. 几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。

10. 线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。

动效 1. 微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。

想做好微交互设计？我总结了这 8 种常见类型！ 大家好，我是 Clippp，今天为大家分享的是「微交互设计」。

阅读文章 >

2. Mg 动画

Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

三维 1. 三维图标

MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。

如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！ 背景 QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。

阅读文章 >

2. 轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。

「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！ 还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？

阅读文章 >

3. P4D（PS+C4D）

P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。

4. 卡通 IP

卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。

卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。

对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。

盲盒和NFT背后，是属于设计师的掘金热潮 前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。

阅读文章 >

5. 三维动画

C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。

总结 上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。

存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。

6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。

国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势 Hi，我是彩云。

阅读文章 >

欢迎关注作者的微信公众号：「水手哥学设计」

Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。

为了保证这篇文章的质量， Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。

总结 从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：

B 端界面设计占比 476/828，57.4%； C 端界面设计占比 180/828，21.7%； 视频动效作品占比 223/828，26.9%； 明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。

Dribbble 年度最佳作品

Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。

为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。

MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。

最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

1. 易读性（停顿感）

字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。

2. 曲线

在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。

除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。

3. 多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。

B 端界面设计 1. 侧边栏 Sidebar

B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。

2. 仪表盘设计

仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。

3. 流程设计

复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。

4. B 端 C 化

B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。

B端产品C端化是自嗨？对不起我想得太简单了！ 经常在网上看到「B 端产品 C 端化」的讨论。

阅读文章 >

5. 轻代码化

轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。

界面设计技巧 1. 人文气息

为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

2. 毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的 设计趋势 。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“ 透光艺术-C4D 创建彩色玻璃的 4 个技法 ”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。

实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧 这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。

阅读文章 >

3. 轻拟物

轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

大厂都在用的轻拟物设计风格，本文教你四步完成！ 上期我们聊到了最近比较流行的轻拟物风格，科普了基础概念，如果你还没读过，可以前往阅读： [link https://www.uisdc.com/light-imitation-style] 本期展开轻拟物的具体技法讲解和演示。

阅读文章 >

4. 简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。

5. 几何图形

几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。

几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

6. 暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。

在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。

顶级大厂如何做好暗黑模式设计？来看 Ant Design 的规范文档 近年来暗黑模式的设计趋势开始一点点明显，Ant Design 在这次 4.0 的升级中也对这类暗黑场景化的设计开始进行初步的探索，接下来就让我们一起来看下 Ant Design 这一针对企业级的设计体系是如何设计暗黑模式的。

阅读文章 >

7. 模块化（组件化）

为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。

为什么我强烈建议你学会使用模块化设计？ 风筝KK：模块化设计是将设计分解成小的模块，然后独立设计它，最后再将它们组合成更大的系统，就像小朋友玩的积木一样，由一些简单的零件组成小的模块，然后再组合成各种模型样式。

阅读文章 >

8. 插画

插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。

9. 几何插画

几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。

10. 线面插画

线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。

动效 1. 微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。

想做好微交互设计？我总结了这 8 种常见类型！ 大家好，我是 Clippp，今天为大家分享的是「微交互设计」。

阅读文章 >

2. Mg 动画

Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。

三维 1. 三维图标

MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。

如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！ 背景 QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。

阅读文章 >

2. 轻三维

为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。

「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！ 还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？

阅读文章 >

3. P4D（PS+C4D）

P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。

4. 卡通 IP

卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。

卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。

对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。

盲盒和NFT背后，是属于设计师的掘金热潮 前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。

阅读文章 >

5. 三维动画

C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。

总结 上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。

存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。

6000 多字的设计流行趋势，希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。

国外专业机构出品！2022年你需要抓住的 8 个UI/UX设计趋势 Hi，我是彩云。

阅读文章 >

欢迎关注作者的微信公众号：「水手哥学设计」

设计在于权衡 每当谈到设计原则，大家仿佛认为只要将每一条原则发挥至极致，即可设计出最为卓越的产品。然而在现实中，我们时常需要在不同的原则之间进行取舍，或是处理 设计原则 与业务目标及技术局限之间的冲突。

设计的过程，即是在所有相关因素之间进行权衡并寻求最优体验的过程。那么，我们应该如何明智地进行权衡呢？

何为权衡？ 一款产品面世之前，通常会历经诸多规划讨论、会议、验证、打回、迭代等等。旁观者时常认为自己可以很聪明地发现产品当中很多有待改进的地方，而实际上这些“改进”或许已经在团队自己的 backlog 当中，等待资源到位或时机成熟时付诸实施。

伴随着整个设计开发流程，我们始终需要考虑如何进行权衡。譬如在现有的时间及预算条件下应该选择怎样的用研方法？对于当前目标，哪些设计原则具有更高的优先级？面对无法突破的技术屏障，次优的设计方案是什么？是否需要砍掉部分功能，或是将 deadline 延后？

何时需要权衡？ 任何时候都可能需要。尤其是在不同方面的目标或原则相互冲突的时候。即便是两个显而易见的设计原则之间都有可能产生冲突。譬如应该确保更少的点击次数还是更低的认知负荷？你可能需要优先考虑降低用户的思考成本，即便以更多的点击作为代价。而更多时候，我们需要在不同的维度之间进行权衡，包括业务目标、用户目标、技术局限等等方面。

权衡的原则 与所有制定决策的过程类似，我们可以在若干指导原则的帮助下进行更有效的权衡决策。

1. 通过高层目标推导底层方案

每个产品都应该有长期目标与愿景。通常，底层决策可以在清晰简明的高层目标的指导下变得明确起来。

譬如，冥想类 app 的目标是给人们带来平和的心境，帮助他们练习倾听内在。自然，所有产品都希望实现良好的口碑传播，但在冥想课程后面添加“分享到社交平台”的按钮是否妥当呢？未必。在“塑造平和心境”的高层目标之下，诸如“分享”、“排行挑战”一类的社交互动功能更应受到否决。冥想练习结束时的界面状态应该是简洁而优雅的，这会有助于人们将平和的心境带入接下来的现实生活当中。

2. 成本与价值

成本与价值矩阵是一种非常经典的优先级排序方法。我们需要评估开发一项功能所耗费的成本及产生的价值，然后将其放置到矩阵中。设计师与开发人员可以有效地对成本进行评估，而关于价值的看法很可能因人而异。

https://www.nngroup.com/articles/prioritization-matrices/

要弄清解决一个问题或开发一个功能可以带来的价值，我们可以问问自己：

问题出现的频率如何？每天若干次，还是偶尔出现？ 有多少用户会被这个问题影响？ 问题的严重程度如何？只是小小的困扰，还是可能导致用户放弃产品？ 能否在解决问题的同时，不至于让用户付出高昂的学习成本来适应新的方法？是否应该通过若干次发布来实现增量迭代？ 3. 妥协，而非牺牲

如果无法以最优的方式同时实现功能 A 和功能 B，那么与其彻底砍掉其中某一个，不如考虑是否存在妥协的方式。如果 A 拥有更高的优先级，那么在此前提下我们还可以针对 B 做些什么？

譬如，出于安全考虑，一些产品会将登录流程设计得比较复杂，不仅需要身份信息，同时还需要通过不同的设备来辅助认证。从体验的角度，这无疑增加了使用的难度。但换个角度，将安全需求作为即有约束，我们如何在这个框架内尽可能提升易用性？我们可能要作出一定的妥协，但不至于彻底牺牲体验。

4. 遵从规则，或打破规则

关于设计、开发及产品决策制定，都有着相关的准则、规范及最佳实践。我们需要了解何时遵守哪些，何时需要针对特定的用例和场景而打破规则。这些在很大程度上来自于经验。

以用研为例，理想的操作方法在每本书中都有介绍。而在现实中，我们时常需要根据项目预算及时间资源来调整具体的方式，最典型的可能包括适度减少被测数量，邀请目标受众以外的用户，通过视频连线进行测试而非实境观察等等。

“仅与一位用户进行测试也强于不做测试。”—— Steve Krug，《Don’t Make Me Think》

常见的权衡类型 设计层面的一些权衡决策通常是设计师可以去把控的，而无需整个产品团队一起深入讨论。以下是一些常见的需要权衡的方面。

1. 最小化认知负荷 v.s. 最小化操作成本

“某些类型的心智处理工作相比于其他行动更具挑战性。”—— Susan Weinschenk，《设计师要懂的心理学》

根据《设计师要懂的心理学》所述，人类需要处理三种类型的负荷：

认知负荷：例如理解事物、心算、记忆密码等等。 视觉负荷：通过视觉感知界面时的感官负载。 行动负荷：诸如移动鼠标或点击屏幕上的交互元素时所需付出的操作成本。 处理这三类负荷所需占用的心智资源是不同的，其中认知负荷占用的最多，视觉其次，行动则最少。所以“减少点击次数”并非一成不变的准则，特别是当你仅仅为了降低点击次数而将大量信息塞进一个界面的时候。信息过载所产生的认知负荷，相比于增加几次点击所带来的成本提升，着实更加令人痛苦。

我们接下来看到的是 Slack 的公司注册流程。仅有的三个必填项分散到了三个界面中，增加了两次额外的点击，但在心智上，每一步都精确符合用户的认知，你无需付出太多的思考，流程自然而然，你甚至不会在意点击过几次鼠标。

来源：Slack

2. 清晰性 v.s. 一致性

另一个典型的情况是，如果稍许的“不一致”能够使信息更加清晰易获取，则可以尝试使一致性妥协于清晰性。不过这里需要把握一个度。我曾做过的一个项目中，客户希望每一次的发布活动都能使用全新的设计风格。这样搞一两次确实可以使活动显得独特而出彩，而长此以往，整个设计思路会变得非常轻率。

3. 美观性 v.s. 易用性

多数时候，我们所遵从的原则是首先让产品易于使用，而后使其更加美观。这方面确实存在不少争论，所以这里我只举一个例子来说明另一种情况：有些时候，美观性确实可以掩盖易用性方面的问题。

根据尼尔森诺曼团队（NN Group）的研究，“对于拥有良好视觉外观的界面，用户能够容忍其所存在的轻微的易用性问题。” 在研究当中，一名用户遇到了很多轻微的界面交互问题，但最终仍然完成了任务。之后，当被问及整体体验时，这名用户夸赞了界面的良好外观，包括配色及图片等等，并评价这个网站“非常易于使用”。

4. 安全性 v.s. 易用性

这一点取决于具体情况。对于大公司大产品来说，出错的成本过于高昂；存在潜在冲突时，安全性远比易用性更加重要。譬如麻烦的多重认证机制在这类产品中非常常见。此外，很多公司的内部工具在安全性方面同样拥有更高的优先级，毕竟即便易用性相对较差，员工无论如何也需要接受培训学会使用。

而对于面向大众的小公司小产品，安全性与易用性之间的优先级差距相对而言没有那么悬殊，很多时候我们更倾向于易用性优先，使人们首先喜欢使用产品，而在需要确保安全性的环节提供相应的对策。

5. 现有模式 v.s. 创新模式

如果基于现有的模式库来构建产品，那么我们时常需要权衡的一个问题，就是花费时间创造新模式是否值得，或是仅依靠现有模式便好。要创造新模式，我们还要考虑有哪些即有元素可以被运用，新模式在将来可以怎样被复用，包括所需的时间成本等等。

而现有的模式可以节省设计与开发成本，但对于特定的需求来说未必能提供到最优的解决方案。

跨职能权衡 然而在多数时候，关于权衡的决策很难由设计师单方面制定。很多“辩论会”由此而生，各团队都希望立足于自己所在的职能去争取到最优的方案，相关的讨论往往混杂着各个维度的要素，难以清晰权衡。

尼尔森诺曼团队提供的“权衡标尺”可以非常直观地为用户需求、功能特性等要素进行优先级排序，帮助产品团队聚焦在最重要的方面。步骤大致如下：

第一步：与利益相关人及其他团队成员共同脑暴产品需要具备的各种关键要素，例如移动支付、愿望单、社区、搜索；一致性、可访问性、安全性，等等。

来源：Nielsen Norman Group

第二步：将这些要素按照主题进行分组，例如“项目要素”、“功能特性”、“用户体验诉求”等等。

来源：Nielsen Norman Group

第三步：通过讨论进一步浓缩每个主题当中的要素数量，为每个要素设定一个重要度渐增的标尺；刻度的数量等同于要素的数量，且每个要素的得分互不相同，从而使团队必须制定清晰的优先级决策。

来源：Nielsen Norman Group

结语 产品设计 亦如我们的生活本身，很多时候并不存在绝对正确的决策。在不同的情境下，有着不同的优先级、目标、约束，以及我们所必须进行的权衡。为了能够在所有的局限要素之间寻求最优决策，我们需要始终把握住高层目标，进而关注底层细节。创造产品并持续打磨的过程自始至终离不开“权衡”二字。

那么多设计原则如何快速掌握？试试我这个方法！ 之前写过一篇《零基础如何成为交互设计师？

阅读文章 >

欢迎关注作者的微信公众号：「Beforweb」