前段时间，几位做数据的P7P8（以阿里的职级作为衡量尺，来源于不同的互联网大厂）找到我，表示现在焦虑到不行，急需咨询一下未来的职业规划。我还蛮惊讶，毕竟拿着总包百万的年薪，相比于现在校招惨烈的厮杀，其他行业平平的薪资，虽比上不足，但总不至于焦虑成这样。 他们从

作为互联网的P7P8人，在升到一定的职级后，他们将会面临的是什么？对于他们而言，目前在焦虑与担忧什么？本文分享了几位互联网大厂P7P8人的故事，并在这样的困境中，重新整理自我，整装待发，打出差异化优势。

前段时间，几位做数据的P7P8（以阿里的职级作为衡量尺，来源于不同的互联网大厂）找到我，表示现在焦虑到不行，急需咨询一下未来的职业规划。我还蛮惊讶，毕竟拿着总包百万的年薪，相比于现在校招惨烈的厮杀，其他行业平平的薪资，虽比上不足，但总不至于焦虑成这样。

他们从大学毕业后，一直都在互联网大厂，一步步稳扎稳打，升职到P7P8，一直都挺优秀，靠自己实现了年薪百万，也是身边朋友羡慕的对象。

但这两年，风向就突然不对了。最开始是股价的持续下跌，有些阿里人把股票拿着当传家宝，传给自己的娃，没想到捂着捂着，股价腰斩都不止，想着互联网受到打压也正常，以后股价总会涨回来的。

结果到现在，内部绩效更为严苛，饭碗开始岌岌可危，降本增效这四个词就像一柄达摩克利斯之剑，一直悬在头顶。一轮又一轮的裁员，也不知道什么时候是个尽头。回顾一下自己的职业生涯，除了大厂光环其实也没啥竞争力，好像除了螺丝钉就是工具人。

虽然薪资看上去还是蛮多的，但潜在的危机，说句四面楚歌，真的一点都不过分。

一、看不到的晋升 一位阿里的朋友告诉我，大学毕业从P5开始做，认认真真做事，升职到P6基本没啥问题。再努力点，工作个六七年，一般也都能升到P7，但再往后，好像无论是升P8还是P9，就感觉突然被卡住了。

由于现阶段互联网大厂纷纷降本增效，晋升变得愈发困难。身边的几个pointer悄悄跟我说，今年他们公司的无论是数据还是产品、运营岗位，P7P8的晋升名额少得可怜。

往年无论是自己提报，或者领导推荐，只要符合要求，至少能上晋升答辩场走一遭，试一试说不定能成呢。

而今年在晋升答辩之前，破天荒的要在公司范围内筛一轮晋升提名，再走答辩流程。很多入职互联网的资深人士表示，过去无论是发展好或者差，晋升难度从未如此之大。

而相比于晋升名额的缩减，另一个现象在互联网的分析类岗位则愈发典型：

刚加班加点、保质保量地完成工作，又进入了下一阶段的工作，同时还要帮其他同学和部门解决问题。

像极了救火队员，日复一日，年复一年，周而复始。获得了身边同事的无数好评，但职级却依然停滞不前。慢慢地，你的职级与年龄逐渐开始倒挂，你开始步入中年危机。

你无数次的问题自己，明明那么努力，却为什么一直原地踏步？

付出的努力并不等于工作的价值。

互联网人不妨回顾下自己七八年的工作生涯，是不是大部分工作都是为了短平快的完成任务，缺少更大、更复杂的工程，缺乏可以逐步迭代，精益求精的项目？

这样的工作产出价值自然就很有限。

短平快地完成任务，会被老板下派更多的任务，而更多的任务，又会挤占思考的时间，更难有时间完成复杂性的工程，就好比笼子里的小白鼠，跑的飞快，但离目标却越来越远。

即使偶尔有灵感和想法，但你的时间已经被细碎的事情挤满，就像一个流水线的工人，按部就班地完成一个又一个任务，只能给领导留下一个踏实肯干的印象。

除此之外，在互联网，“外来的和尚好念经”似乎更为明显。

有次，我跟一个大厂的同学闲聊，他跟我说同样的P9级别，一个是土生土长的互联网人，一个是从麦肯锡跳槽过来的，他感觉两个老板的受欢迎程度完全不同。

某次的高管汇报会，几个团队都做了汇报PPT，土生土长的互联网人，写的PPT很是实在，对业务的结果有清晰阐述，但总让人感觉不够高屋建瓴。

而从麦肯锡跳槽来的P9，同样是汇报，会运用到一些外部竞对数据，一些结构化的拆解和分类。让人一下子觉得材料的格局被打开了。

而在关系网的建立上，土生土长的互联网人，确实能把自己的一亩三分地管得很好。而从麦肯锡跳槽来的P9，硬是把一个原本业务关联并不强的P12变成了自己的sponsor，而他经常讲的一句话也是：“那个部门我挺熟的，可以去聊一下，看看有没有合作的可能性。”

土生土长的互联网人，相比于咨询和金融背景的同学，在往高P晋升上真的有劣势。

咨询和金融，锻炼的是结构化的思考和表达能力，能更好地向老板展示业务价值。除日常合作的上下游部门外，咨询背景的同学也更愿意结交人脉，形成自己的关系网络。

越往上走，越要体现价值。越像是一个销售，把自己的业务成果推销出去。工作做得再好，如果没有sponsor，没有业务价值，也只会被湮灭在晋升的浪潮之中。

二、跳不出的门槛 往年在大厂晋升不上去，不少人都会选择跳槽。甚至有些小伙伴，工作两三年就会主动寻求跳槽，毕竟跳一次，升一职级，涨个30%的薪水，都是稀疏平常的事。

而在今年的大背景下，互联网内的跳槽变得尤为困难。一方面是因为相关岗位变少，难以产生高溢价，另一方面，相比于高薪，大家更看重稳定，毕竟有些公司还搞起了试用期裁员的玩法——招聘员工开展工作，试用期满6个月后离职，再招新的一批。

况且，不少互联网小伙伴也厌倦了996ICU，厌倦了互联网文化和节奏。因此，每次我做职业规划的直播，都会有不少互联网小伙伴，问我怎么转型到PEVC，怎么转型到外企，怎么转型到大型集团做数字化。

这个问题，我曾不止一次的回答过。互联网所需的能力模型，跟其他行业并不怎么匹配，互联网的工作经验，更具聚焦于互联网业务本身。

比如同样是分析师岗位，互联网的商业数据分析，侧重于业务策略和用户增长。而金融领域的分析师，更多的是站在行业角度，关注商业模式的变化和行业的未来发展。说实话，几乎没有纯互联网商业数据分析师，转行成为金融研究分析师的案例。

我曾写过一篇文章《听说你不想在互联网卷了，想转行到咨询或金融（PEVC）？》，详细阐述了咨询金融和互联网的差异。不少小伙伴看完，直呼真实。

然而，哪怕同样是在数据领域，其他行业对于人才的需求，也跟互联网截然不同。

比如快消零售类行业，很多时候看的不仅是用户增长和营销活动相关的流量和用户管理，公司会很关注竞对的最新动态和行业的商业趋势，各个品牌的收入利润费用，每次直播的边际贡献，而这些并非互联网分析师的关注重点。

再比如对于房地产企业而言，其最关心的是每个地产项目的全生命周期预算，资金的周转和负债水平，而这些分析更聚焦于财务侧，而非业务侧。

很多互联网的小伙伴觉得自己拥有大厂的数据分析经验，可以转行去传统企业做数字化。然而，很多传统企业需要的是能够从0到1搭建企业数字化的综合人才，并非一个单一技能的分析专家。

我见过很多数据分析的小伙伴，了解一下业务需求，问数仓要一张表，便开始刷刷刷的取数，做报表做分析。不了解数据的全链路架构，不了解数据治理和质量，不了解市场上数字化产品和选型标准，只懂得分析框架和取数方法，并不能胜任数字化岗位。

而这些传统企业，更需要具有甲方大厂和乙方咨询背景的同学，帮助他们真正推动从内到外的数字化改革。

前段时间，我跟资深猎头顾问Florence做过一场直播，《外企需要什么样的数字化人才？》，Florence就直言不讳的谈到，互联网和外企数字化人才的差异。

相对于互联网而言，外企更倾向于综合性人才。具体来说，互联网发展比较快，本身数据体量也非常大，所以在某一个非常细分的领域需要更加专业化的人才。因此，互联网对员工的期待可能就更偏向于流水线的一个模块熟练工。

但在外企在招聘时，其面试的轮数一般较多。它对候选人的要求实际上并不低，因为它是比较专注于把每一个职员当作一个专业人才去培养，并且希望把他们逐渐推向管理者的方向。因此，员工需要参与项目从设想到落地的全过程，其也更看重员工的项目管理和沟通协调能力。

此外，我曾与不少外企的数据负责人交流过（欧莱雅、LVMH、Kering、罗氏、特斯拉等），我发现他们在招聘人才时比较在意的是：外企思维。

因为在互联网公司工作久了会形成互联网本土化思维，这与外企文化下的思维是很不同的。小到一个沟通协调，大到个人价值观，都存在着不小的差异。

我曾亲眼见过，一个互联网小伙伴入职外企一周，就和同事发生冲突，吐槽这帮人太过慵懒，做事进度极慢。站在外企同事的角度，又会觉得这位互联网来的人，太过激进，让人很不舒服。

所以外企HR招聘互联网人才的时候，都会看看是否有留学经历，曾经有没有在类似的外企工作过。害怕招进的人水土不服，也害怕“鲶鱼“化。

当然了，哪怕是从互联网转行到一些头部外企，也要考虑是否能接受薪资待遇上的落差。一个比较资深的P7或者P8，很大概率总包是税前百万，但哪怕转行到头部的快消品外企，相同工作年薪和背景下，可能也就税前七八十万。

其实，无论是去外企，还是去咨询，或是去传统企业做数字化，能否成功转行已经是一个大问题了，还要在心理上能接受薪资上的落差，换做是谁，都会异常纠结，而往往人生的机遇，就在这些纠结中错过。

以退为进，可能才是解决困境的最佳解决方案。

三、躺不下来的人生 晋升又不上去，转行又有门槛，自然而然，很多资深的P7P8就在思考如何“躺平”。

而在互联网行业，想躺就能真的躺下来吗？

361的绩效压力还是很大的，毕竟连续两年3.25的绩效，大概率就要被劝退了。而如果业务线不给力，则整条线就可能被裁员。

而在三四十岁的年纪，又要顾娃顾家，又要赚钱养家，精力显然不如从前这么充沛，也确实需要占个坑位躺一下。

因此很多时候，大家都是在这种进退维谷的环境中迷茫彷徨。但可悲的是，人生往往是在“温水煮青蛙”的环境中，丧失机会。

上个月，我与几个互联网的校招面试官做了一场公益分享，关于校招的九死一生，当大家聊起校招就业市场时，深深地感受到一丝绝望的气息，暗自感慨，如果当年的自己，放在如今的校招环境，成功率究竟还能剩几成？

现在的大厂校招，不仅要求学校985硕士打底，项目经历丰富和学习成绩优异，更需要有大厂的相关实习经历。更重要的是，现在大厂的数据岗位招聘，越来越像咨询，校招生既要有结构化的思维逻辑和框架，也需要有一定的商业sense和互联网概念。

即便是苛刻到这种地步，这样背景的校招候选者，还是一抓一大把。

试想下，等这批优秀的新生代成长起来，曾经跟着风口起来的“幸运人士“还能一直幸运下去吗？

我想，作为职场老油条的P7P8，不担心被卷死显然是不可能的。

其实，数据类岗位和工程开发一样，说到底就是一门技术。技术的稀缺决定了人员的高薪，而技术的迭代又决定了人员的更替。而这便是“快速损耗的螺丝钉”

技术是一种工具，并非一种资源和经验，而工具，便可以快速复制和迭代。

这也是为什么互联网的数据类岗位，在五六年前数据分析稀缺的时代，可以速成和转行的原因。毕竟绝大部分的分析框架和思路，都是以GMV和用户增长为核心进行分拆和解构的。

相反的，市场上数字化人才，特别是推动企业数字化落地的人才，在竞争日益激励的就业市场仍然稀缺，其核心原因便是资源和经验。

这类岗位就好比律师、医生和销售，一方面要有相关的人脉资源，比如，推动数字化落地时，需要招聘优秀的数据人才，寻找有案例的咨询公司，引入合适的数据产品。

另一方面，需要有相关经验累积，特别是具有乙方咨询公司和软件厂商的落地实施经验，因为不同的公司，行业不同，现状不同，需求不同，内部格局甚至企业文化都不同，而这些极其复杂的因素交织在一起，便只能依靠经验去选择最优的解决方案。

不妨告诉大家，现在国内很多上市集团招聘数字化负责人，纷纷找我要人，开出200-300万年薪，都很难招到一个合适的人选。

四、回不去了的家乡 身边不少P7P8的小伙伴，其实都想过这最后一条路，回二三线城市，特别是回家乡找一份数据相关的工作。这两年，我见过太多的小伙伴，想要从北上广深杭，这些传统大厂的根据地，回到成都、重庆、武汉、长沙、南京等二三线城市。

我曾与一个湖南老家的大厂分析师聊过，他说他真的非常想回长沙，吃得又美味，房价又亲民，唯一却最为致命的问题，便是“数据相关的岗位太少”。

他说他非常羡慕那些能回老家工作的朋友，之前有开发的同事，跳回长沙三一重工去做数据开发，虽然三一重工的工作压力也非常大，但好歹是平薪回家了。

对于传统企业而言，数据开发，数据架构，数据治理这类岗位的需求，远远大于一个互联网数据分析师。毕竟很多传统企业连ERP信息化还在规划和发展阶段，只有一步步把数据建起来，才有分析角度和方向。

所以，作为一个数据分析师，想要回二三线城市，更是难上加难。

当然，除了没有合适的岗位，其实更为重要的一点，便是内心的纠结。

我曾问过一个年薪百万的P7的小伙伴，现在有两个选择，你选择哪个，在大厂年薪百万做螺丝钉 or 回老家高职院校教大数据？

其实，那个大专学校的大数据专业，在宝鸡当地，给到税后一万的工资（所有奖金加起来），真的着实是不低了。

这位小伙伴只想了两秒钟，便毫不犹豫地回答，我肯定选择留在大厂做螺丝钉。毕竟转行到外企和咨询这类看上去高大上的岗位，都面临降薪的纠结，更别说回老家，薪资直接跌到脚指头。

同样的问题，即使是问那些经历互联网红利，通过股票和期权实现财务自由的人，得到的回答几乎也是类似的，除非是真的要追求不一样的人生，否则最终还是在这个“既想躺，又得卷”的循环里往复。

对绝大多数普通人而言，失去一个东西的痛苦，远远大于得到一个东西的喜悦。

回不去的家乡，隔着的不是一张机票，而是梦想。

结语 今年的脱口秀大会第五期，有一个主题是“躺和卷怎么选”，脱口秀演员鸟鸟一针见血地说，这个题目营造了一种好像我们有得选的假象。但事实往往是，卷又卷不动，躺也躺不平。

我想包括我在内，应该不少小伙伴都有鸟鸟的这种共鸣吧，“我这个人就是躺的时候想卷，卷的时候想躺，永远年轻，永远左右为难”。

其实类似P7P8的困境，不仅是在互联网数据岗，在其他行业，在其他岗位上依然存在。职业发展虽然会有小波折，但理应是持续向上的过程，很不幸的是，真正的Work life balance并不存在。不断地打磨技能经验，不断地形成差异化优势，才是职业发展的正道。

我希望有一天，我对生活的态度能像生活对我的态度一样~

作者：空白女侠；公众号：空白女侠（ID：kongbainvxia）；

本文由 @空白女侠 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

B站开始进军“双十一”了。 熟悉B站的用户可能已经发现，今年10月，B站的直播分区上线了一个新的购物板块作为直播带货专区。在此直播的UP主们，视频中都挂有各类商品的“小黄车”链接，用户点击后就能跳转至淘宝、京东页面进行购买。 这是B站继去年12月灰度测试“小黄

在今年的双十一活动中，B站这位选手也终于入场，进一步开展其直播带货业务。那么作为“双十一”的新选手，B站的表现如何？其开展直播带货业务的背后，又隐藏着哪些推动原因？本篇文章里，作者对B站的直播带货业务进行了一定解读，一起来看一下。

B站开始进军“双十一”了。

熟悉B站的用户可能已经发现，今年10月，B站的直播分区上线了一个新的购物板块作为直播带货专区。在此直播的UP主们，视频中都挂有各类商品的“小黄车”链接，用户点击后就能跳转至淘宝、京东页面进行购买。

这是B站继去年12月灰度测试“小黄车”功能后又一电商动作，而将切入点放在双十一大促节点，则显示出平台对未来电商的期待。与此同时，B站还发布了“直播电商UP主招募激励计划”，鼓励粉丝量大于一千的UP主开启直播带货。据B站官方公告，所有自助提报的商品均需为B站会员购商品或已加入淘宝联盟B站内容库或已加入京东联盟商品库。

此前，陈睿曾提到，B站的目标是在2024年实现盈亏平衡，并将战略重心转移到商业化进程中。不难看出， 发力直播电商是B站实现“降本增效”的关键跳板。

作为“双十一”新玩家，B站表现如何？未来能否打破外界想象？

一、B站“插手”双十一 简单回顾下B站此前试水直播电商的历程。

2018年7月，B站邀请包括野食小哥、徐娇等11位UP主进行电商功能的测试。2019年3月，B站继续推出“势能榜种草机”的电商小程序，官方称之为UP主店铺的升级版本。 2021年9月，B站邀请4位UP主举行了一场持续了4小时的直播带货，推荐商品包括手办、B站周边、制服等泛二次元文化产品。 12月，B站花费1.18亿元获得支付牌照，并在部分UP主直播间中开启“小黄车”直播带货的灰度测试，支持用户在直播间内下单购物。萱草Daily等UP主均参与其中。双十二期间，UP主@动动枪DongDongGun直播5小时内，GMV超131万。 而相比往年的低调测试，今年在“双十一”节点上线购物板块，或许可以视作B站全面铺开直播带货的信号。

据B站官方账号@直播电商小助手 发布的公告，UP主参与直播带货，需要满足年龄大于18岁、粉丝量超过1000且四年内有过直播记录、直播间未被封禁的条件。在进行功能申请后，UP主还需通过相关法律法规考试，获得完整直播带货权限。

选品池中的商品则包括两类，一是 B站自有商品 ，如会员购、个性装扮、B站课堂等；二是 淘宝联盟、京东联盟商品 ，需UP主绑定推广账号。前者有着B站鲜明的二次元特色，后者则为B站提供了区别于泛二次元商品之外更大的选品池。

首战双十一，B站一直在活动期间多方造势，重视程度一目了然。账号@直播电商小助手更新了多支内容，指导UP主选品、挂车；发布“直播电商UP主招募激励计划”，为带货肝帝发放奖励；推荐多位种草UP主，@MR迷瞪、露露黄了、搞机所、住范儿、柿子菌meow都在官方推荐关注之列。10月31日，B站还联合小米举办“来，买出个正义”直播活动，邀请毕导、罗翔说刑法等UP主聊消费观念，为双十一延续热度。

B站官方“双十一”活动页

官方的热情和用户的回应并不成正比。打开“购物”板块，最鲜明的观感是直播氛围不足、分区混乱：板块首页，游戏、家居、颜值以及虚拟主播混杂在一起，界限不明；直播间观看人次维持在千人左右，鲜有人气上万的直播间；尽管挂出了“小橙车”，大部分主播依旧沿袭以往的直播风格，“摆烂式”带货，只偶尔提醒粉丝“商品链接在右下角”“请大家多多支持”。

B站up直播带货

并非所有的主播都能快速适应从产出内容到直播带货的转变。相对而言，时尚美妆、3C数码、家居生活等领域的UP主更具备带货基因。

例如，家装垂类UP主@Mr迷瞪，内容主打装修科普与产品评测，2022年提高直播团购频率，目前粉丝量103万。双十一期间，直播间合作品牌包括小米、美的、海尔、顾家、追觅等，带货产品有床垫、工学椅、指纹锁、智能家居等，后续加入了3C数码类产品，客单价较高。

区别于大众熟悉的主播出镜式直播，@Mr迷瞪直播更像是将视频内容“搬运”至直播间，以产品详解配合概念图像的方式呈现，并细致地列出优惠信息和个人看法。据B站数据，10月14日，即双十一开幕首日，@Mr迷瞪首场直播GMV破1.3亿，成为B站带货UP主标杆。

对于原本拥有自创品牌的UP主来说，B站开启直播带货更像是为其提供了扩大声量的渠道。 例如潮牌穿搭UP主@伟嘉gaara616，粉丝量71万，自有品牌为“Gastation嘉年华”，双十一期间进行新品直播，评论区常见用户询问“卧虎藏龙白色什么时候补货”“什么时候补码数”。

@搞机所、@伟嘉gaara616 直播间

美妆UP主则有@萱草Daily，主打美妆护肤长视频，是一位资深直播人，在B站及抖音都有着直播经验。10月29日晚，橘朵、野兽代码、逐本、瑷尔博士、优时颜、春日来信等品牌走入了她的直播间。

除此之外，3C数码还有@夏小荷装机馆，一面现场演示、讲解装机一面带货，直播间内产品包客单价在千元以上，用户点击就可以跳转至淘宝店铺“夏小荷装机馆”购买。飞瓜数据显示，单场直播内一款售价1999元的台式主机售出1327单。

单从直播表现方面，一些UP主有着颇为亮眼的成绩，但整体看来，直播入口的隐蔽、选品无特色，外加价格并未形成竞争力，B站的“双十一”还差些火候，商业化进程一如既往地坎坷。

二、下注直播电商，B站图谋已久 有目共睹的是，B站的商业化进程并不十分顺利，质疑声几乎贯穿于平台商业化始末。

为拓宽生存空间，内容平台大多选择依靠电商进行商业变现，例如知乎于2019年推出“知乎好物”，此后又增设商品橱窗，年“双十一”期间上线了自营电商业务；小红书则曾重金下注跨境电商，目前已走上搭建电商闭环、断外链之路。

B站执着于直播电商，一方面是为了平台的可持续发展。

立足于二次元ACG文化的B站，在最初并未显示出浓厚的电商基因。“为爱发电”是UP主常态，甚至直到官方上线“花火”前，UP主与品牌间的商务活动都处于一种随意的状态，恰饭文化最终为观众接受经历过阵痛期，今年，平台的“魔力赏”由于概率设置也难逃被“公开处刑”的命运。平衡内容与商业比重始终B站的重要议题，可以说，目前的电商氛围，是B站“强求”的结果。

@B站购物板块

众所周知，2014年，B站曾向用户承诺“永远不加视频贴片广告”，出发点是保证消费者体验；2016年，B站推广新番承包计划，陈睿在知乎再次声明“B站未来可能会倒闭，但绝不会变质”。尽管该声明在此后被调侃“叔叔，你能再表演一次那个吗”，但抛开东电版权事件，B站也确实还未上线贴片广告。

失去贴片广告这一商业收入来源，对B站而言并非无关痛痒。 尤其在加速商业化进程后，B站的广告位渐渐趋向饱和。举例而言，B站现有的广告位置有评论区下方的“蓝链”，用户点击即可跳转至淘宝等页面下单购物；视频右下角则可以插入广告链接，这种形式被称为“UP主推荐广告”。此外还有内容植入、商业弹幕、推广橱窗……单支视频可承载广告的位置已并不多了。

据B站2022年Q2季度财报，B站第二季度电商及其他业务收入6亿元，与一季度相比变动不大，其他业务中，广告、增值服务业务稍稍提升，但游戏业务同比下滑，遭遇滑铁卢。 在这种情况下，为直播增加附加值、提升电商业务收入就显得尤其重要了。

对这一点，B站似乎充满信心。谈及直播业务，陈睿表示，未来月活 UP 主都加入直播以后，平台的直播电商将会极具潜力。

另一方面，则是为创作者创收，留住更多中腰部创作者。

最近一年，我们看到过不少抖音创作者入驻B站、短期内快速涨粉的案例。但从B站“搬迁”至抖音的创作者可能不会有这样的待遇。长短视频的不同逻辑、B站独特的圈层特色，都让很多头部创作者的内容难以被抖音兼容。最近，@老师好我叫何同学也在抖音开设了个人账号，目前粉丝量62万，对B站“顶流”来说，这个成绩并不亮眼。

@老师好我叫何同学 抖音、B站账号

基于这种限制，已在B站内拥有相当数量粉丝、且有一定变现路径的头部创作者或许不会轻易离开B站，但对于支撑起B站内容金字塔的中腰部UP主来说，出走要容易得多。

从某种程度上讲，UP主就是B站最重要的资产。在好内容成为稀缺品的当下，流失优秀的原生UP主对B站来说无疑是巨大的损失。在过去，B站面对这种情况或许有心无力，但当下直播电商体系逐渐完善，B站势必要扩大商业路径，为UP主变现铺路。

不过，当下B站直播带货还存在诸多问题亦是不争的事实。

一则，平台内部直播带货氛围尚未建立 ，大部分长于内容而弱于直播的UP主积极性不高，而双十一期间，抖音淘宝京东上演“神仙打架”，争夺“尾款人”，相较之下，B站的水花并不大。用户打开B站的目的，仍然倾向于娱乐。想像抖音一样娱乐内容与直播带货并驾齐驱，B站还有很长的路要走。

二则，B站自身的选品池太浅 ，在B站内部电商“会员购”无法支撑起双十一消费需求的情况下，与淘宝、京东搭建合作关系是十分必要的。

B站与淘宝和渊源由来已久。2018年10月底，B站就获得了阿里投资，到次年2月，阿里巴巴宣布通过淘宝入股B站近2400万股, 持股比例占B站总股本约8%，引流B站优质创作者入淘的“千咖计划”同步启动，UP主推广橱窗的商品链接到淘宝，缩短了种草到消费的转化流程。在2019年财报中，B站电商及其他业务收入同比增长403%。

但从点击直播间内的小橙车，到跳转至淘宝内部下单，其中的步骤堪称繁琐，跳转路径的设置并不利于转化，UP主“摆烂式”直播也令用户无法果断下单。此外，尽管目前B站和淘宝关系密切，但无法让用户留在平台内部消费终究是一大问题。

最后，在基本不缺流量的情况下，直播带货比拼的是包括运营能力、供应链甚至整个生态在内的内容，在这一点上，B站还有很多探索空间。

作者： 潮关

来源公众号：卡思数据（ID：caasdata6），数据赋能短视频内容创作、运营、营销和电商带货。

本文由人人都是产品经理合作媒体@卡思数据 授权发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

给作者打赏，鼓励TA抓紧创作！

{{{path> 赞赏

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮...

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。

遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条 轮播图设计 原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮播图更好更易用的展示方式。

更多 轮播图 干货：

用好这4个设计建议，让你的轮播图点击率更高！ @腾讯ISUX - Jana：轮播图（Carousels）这样的交互方式，在web时代似乎已经司空见惯。

阅读文章 >

一、实际运用中的轮播图 在美国一份针对 50 家顶级零售电商网站的统计中，发现轮播图被广泛运用于电商网站：PC 端 52%的电商网站使用轮播图，而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：

如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关 如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化 轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计 二、轮播图设计十原则 那么，怎样在实际运用中做好轮播图设计呢，作者将 10 原则分成了四个部分来进行阐述：

1. 滑动（轮播）顺序和点击后的落地页

大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。

因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。

我们之前做的轮播图可用性研究，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。

两条原则：

原则 1： 轮播图的展示顺序特别是第一帧非常重要； 原则 2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。 2. PC 端自动轮播逻辑

自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：

原则 1：自动轮播不要太快

如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

轮播图的展示时间应该根据轮播图的文案内容来决定，尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。

其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。

原则 2：用户 hover 内容时应该暂停自动轮播

用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：

当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣； 当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ； 如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。 原则 3：用户有任何主动交互行为时应该停止自动轮播

当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。

点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时轮播图应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。

3. 轮播图控件应该具备两项功能

原则 1：轮播图控件提示当前图片所在帧数位置

提示用户有更多帧数的图片，让用户有更多探索的可能； 提示用户轮播图到底有多少帧图片； 当轮播图自动播放到最后一帧时提示用户将循环到第一帧。 比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。

原则 2：轮播图控件允许用户进行前后帧内容的切换

这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：

展示部分下一帧或前一帧图片； 根据所识别的背景图片的颜色和明度进行相应的颜色改变。

通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。

首先，它结合了位置感知和手动切换的控件为一个整体的 UI 组件； 其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么，因而可以让用户更有效的进行跨帧的切换。

4. 在移动端一切都如此不同

触屏设备上的轮播图与 PC 端有着很大的不同，之前列举的PC端上的交互逻辑在移动设备上是无效的，并且有很多新的规则：

原则 1：移动端没有 hover 状态因此尽量避免自动轮播

hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有 hover 状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了，自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。

原则 2：移动端支持滑动操作

用户在触屏设备上的操作预期就是滑动来进行导航切换 传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点） 原则 3：移动端屏幕的图片需要特别优化

许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差； 移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图 现在我们来总结一下：

三、轮播图的替代方案 单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：

它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用； 它高度符合用户与首页的交互方式，70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站； 相比于使用轮播图要遵守的那 10 条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。 更多设计原则：

这 7 个经典的用户体验设计原则，你可能用错了 编者按：我们看过太多关于设计原则总结梳理的文章，这篇出自 WebDesignDepot 的编辑 Ben Moss 的文章则是对这类文章的有效补充，他详细拆解了设计原则「不适用」的情况，用实际的分析和讲解避免设计师盲从「设计原则」： 在设计过程中，用户体验法则是非常宝贵的工具，它们为设计

阅读文章 >

 

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮...

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。

遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条 轮播图设计 原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮播图更好更易用的展示方式。

更多 轮播图 干货：

用好这4个设计建议，让你的轮播图点击率更高！ @腾讯ISUX - Jana：轮播图（Carousels）这样的交互方式，在web时代似乎已经司空见惯。

阅读文章 >

一、实际运用中的轮播图 在美国一份针对 50 家顶级零售电商网站的统计中，发现轮播图被广泛运用于电商网站：PC 端 52%的电商网站使用轮播图，而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：

如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关 如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化 轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计 二、轮播图设计十原则 那么，怎样在实际运用中做好轮播图设计呢，作者将 10 原则分成了四个部分来进行阐述：

1. 滑动（轮播）顺序和点击后的落地页

大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。

因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。

我们之前做的轮播图可用性研究，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。

两条原则：

原则 1： 轮播图的展示顺序特别是第一帧非常重要； 原则 2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。 2. PC 端自动轮播逻辑

自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：

原则 1：自动轮播不要太快

如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

轮播图的展示时间应该根据轮播图的文案内容来决定，尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。

其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。

原则 2：用户 hover 内容时应该暂停自动轮播

用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：

当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣； 当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ； 如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。 原则 3：用户有任何主动交互行为时应该停止自动轮播

当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。

点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时轮播图应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。

3. 轮播图控件应该具备两项功能

原则 1：轮播图控件提示当前图片所在帧数位置

提示用户有更多帧数的图片，让用户有更多探索的可能； 提示用户轮播图到底有多少帧图片； 当轮播图自动播放到最后一帧时提示用户将循环到第一帧。 比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。

原则 2：轮播图控件允许用户进行前后帧内容的切换

这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：

展示部分下一帧或前一帧图片； 根据所识别的背景图片的颜色和明度进行相应的颜色改变。

通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。

首先，它结合了位置感知和手动切换的控件为一个整体的 UI 组件； 其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么，因而可以让用户更有效的进行跨帧的切换。

4. 在移动端一切都如此不同

触屏设备上的轮播图与 PC 端有着很大的不同，之前列举的PC端上的交互逻辑在移动设备上是无效的，并且有很多新的规则：

原则 1：移动端没有 hover 状态因此尽量避免自动轮播

hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有 hover 状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了，自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。

原则 2：移动端支持滑动操作

用户在触屏设备上的操作预期就是滑动来进行导航切换 传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点） 原则 3：移动端屏幕的图片需要特别优化

许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差； 移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图 现在我们来总结一下：

三、轮播图的替代方案 单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：

它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用； 它高度符合用户与首页的交互方式，70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站； 相比于使用轮播图要遵守的那 10 条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。 更多设计原则：

这 7 个经典的用户体验设计原则，你可能用错了 编者按：我们看过太多关于设计原则总结梳理的文章，这篇出自 WebDesignDepot 的编辑 Ben Moss 的文章则是对这类文章的有效补充，他详细拆解了设计原则「不适用」的情况，用实际的分析和讲解避免设计师盲从「设计原则」： 在设计过程中，用户体验法则是非常宝贵的工具，它们为设计

阅读文章 >

 

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前...

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前总结的也不够完整。

更多 筛选功能 设计：

如何选择筛选控件？5000字+3个落地案例详细拆解 这篇文章又是小 5000 字，提供一些关于筛选控件选择的解决思路，同时辅助三个实际案例帮助理解。

阅读文章 >

产品本身也是随着实际业务场景的变化，从而考虑设计不同的形式来达到该功能的使用。产品需要优化，交互和布局同样需要优化，所以在 B 端产品中并不是一个同样的功能就仅限于只有一种解决方案。

对于产品而言，只有参与的项目越多，设计和思考的场景越全面，了解的产品越多，才能更好的掌握一个功能的多种类型和使用场景，这一次能够在原来的基础上更加全面的总结同一个功能的类型和场景，主要是在工作中也有遇到类似的业务场景，加上对其他产品的体验，从而让我更加全面的了解到该功能的多样性。

二、筛选的多种类型及排版布局使用场景 以下我对自己在实际工作中运用到的多种筛选类型再次做了总结，不同的筛选类型对应的排版布局各不相同，并且在实际业务中的使用场景也具有差异，下面我还是会通过不同的类型列举不同的场景案例，便于理解和运用到实际工作业务中。

现在总结文章的习惯是将需要总结的文章通过思维导图的形式画出整体的导线，这样让自己的脑海里面形成一个大致的方向，也是一个整体的构思，后期只需要根据导线一步一步往下描述具体的内容和案例即可。这个总结方式也可以运用到工作任务中，例如：当接到一个设计任务时，先理解该任务的整体方向，再细化每一个细节展开设计，这样能避免遗漏也能让自己对整体的把握更明确。

筛选的类型我分为以下四大类：

常规搜索筛选 按条件筛选 分类 tab 筛选 高级筛选

筛选的排版布局我分为以下三大类：

平铺选项筛选 隐藏选项筛选 折叠选项筛选

筛选的类型是根据业务场景而定，筛选的排版布局是根据筛选的类型而定，筛选的使用场景是根据实际业务场景而定，所以首先我们需要理解清楚真实的业务场景，再通过分析选择适合的筛选类型，当已经知道了筛选类型，我们只需要根据筛选的条件和页面的交互及空间利用情况选择合适的布局方式即可。

1. 常规搜索筛选

常规的搜索筛选不难理解，即常见的搜索框，根据输入文本关键词进行模糊搜索或者根据记忆准确输入完整的信息，精准搜索。文本关键词搜索需要通过用户的记忆来完成，只有当用户对需要搜索的内容（关键词）有记忆才能完成搜索筛选，搜索的结果范围根据关键词的精准度而定。

当搜索的关键词少且模糊时，搜索的结果数量就会很多，需要用户在众多的结果中再次查找自己的目标值，难度较大。而如果搜索的关键词多且准确时，搜索的结果数量就会较少，用户只需要在少量的结果集中查找自己的目标值，难度较小。

（注意：搜索结果的数量也会受到原本数据量的影响。）

例如在微信公众号发表记录中的搜索，当只输入“设计”关键词时，搜索结果一共有 202 条，需要在这 202 条数据中找到自己的目标值是比较难的。

当我将关键词改为“设计来源于生活”后，搜索结果只有 14 条，这样我在查找我的目标值时就变得容易很多。所以如果用户具有更深的记录，能够输入更多的关键信息，就可以缩短查到的时间，能更快的找到自己的目标值。

案例实操

下面我再列举一个关于搜索筛选在 B 端产品中的运用：（此例子将运用到后面所有案例，以下案例只作为简单举例，总数据量为 10 条，实际业务根据真实业务数据量而定）

需求背景：客户 A 需要在文件清单表格中，根据清单名称查找目标值。

设计要点：如果只需要在清单中通过清单名称来查看目标值的话，这里就可以选择直接使用搜索筛选来完成，因为清单名称复杂不清晰，是不确定的值。所以直接在表单上方加一个搜索框，用户只需要输入关键词即可完成搜索。

当输入关键词“策略”后，我们得到了三条名称带有关键词“策略“的数据结果，减小了数据范围，让用户在查找目标值时更加容易。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

2. 按条件筛选 按照条件筛选是对于数据内具有明确的条件分类，在筛选条件中将这些类单独作为筛选的条件，当选择某一个选项作为筛选条件时，筛选出现的数据结果集将是同类数据。筛选类型又分多种选择方式：下拉框选项筛选、平铺选框筛选、表头筛选、组合筛选。

下拉框选项筛选：

类别选项筛选，根据具体的选项在小范围内筛选。

下拉框选项展示提前预设好的选项，用户只需要选择需要筛选的类型，即可快速筛选出这类数据的数据结果集。此类筛选优点在于能快速筛选同类数据，不需要用户过多的记忆。缺点是无法快速达到精准筛查的效果，如果需要达到精准筛选的效果需要同时选择多项。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，能够快速统计审批中的数据量，并且完成后续任务操作。

设计要点：客户需要根据文件清单的状态快速筛选数据，文件的状态一共分为三类：已发布、审批中、未发布，虽然客户只说需要筛选审批中的数据，但是另外两个状态的数据也同样有筛选的场景，所以我们直接将状态类型作为选项，客户使用时只需要选择状态类型即可快速完成筛选。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

平铺选框筛选：

下拉框选项筛选的另外一种展示形式，将选项平铺展示，类别选项筛选，根据具体的选项在小范围内筛选。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，希望能够直接看到文件的状态类型，快速选择类型。

设计要点：这次客户的需求点是在上一个方案中提出的优化，由于上个方案是将状态选项放在下拉框中的，导致客户不能直观的看到状态选项，需要点击下拉框后才能看到，原操作路径为：点击展开下拉框→选择审批中选项→点击搜索。

为解决状态选项不直观的问题，我选择将状态选项直接平铺展示在外面，这样客户就可以直观的看到所有的选项。并且操作路径变成了：勾选审批中选项→搜索，操作路径和操作步骤也得到了优化。

表头筛选：

将筛选选项内置在表头中（更好地利用页面空间，隐蔽不直观）。当页面空间有限时，可以考虑此方案。另外当表格表头字段数据较多时，需要横向滑动查看数据时，建议还是直接将筛选条件单独放在外面。或者当需要筛选的选项太多时，表头字段都能筛选时，也可以考虑放在表头中。

案例实操

需求背景：客户希望界面更加干净、整洁，并且能够达到根据状态筛选的功能。

设计要点：平铺选项的方案直观，但是平铺与后面的搜索框排版在一起时，整体页面看着比较零散。将筛选选项直接放在表头字段后，通过 hover 展示下拉框，点击选项后不需要再次点击搜索按钮，直接进入搜索。操作路径为：图标 hover→选择选项。

这个方案缺点在于筛选的选项不直观，但是操作点击步骤只有一步。

组合筛选：

多种筛选类型组合为筛选组，组合筛选一般是是筛选的条件较多，选项较多时，将不同类型的筛选组件结合为一个筛选组。用户在使用时，只需要将所有的条件输入/选择后，点击搜索即可完成筛选，得到的结果将是多个条件组合后的并集/合集的值。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。也就是说客户想要将表格中所有的表头字段作为筛选条件。

设计要点：由于这里包含多种筛选类型，名称和编号是关键词筛选，发布状态和、责任人、责任部门、类型是选项筛选，发布日期是时间区间筛选。所以我们需要采用组合筛选的模式。

（右侧箭头：组合筛选占据空间较大，可考虑展开和收起筛选组件）

延展思考：

这里的筛选条件都来自于表头，并且表头字段一屏能展示完整，我们也可以将表头部分字段筛选直接放在表头中，采用搜索筛选+表头筛选的模式组合。

（注：筛选类型选择需要根据实际业务场景而定，选择适合真实业务场景的，此处只是举例延展。）

3. 分类 tab 筛选 分类 tab 筛选在软件中一般是作为系统的全局搜索才会使用到，主要是通过搜索关键词后，分类展示不同类别下带有该关键词的数据信息。等同于全局搜索是一个大的漏筛，通过输入关键词后，将符合该范围内的数据筛选出来，并且分类展示，用户再到每个分类下再次通过其他条件筛选，从而得到自己的目标值。

（此类型案例不适用，另举例说明）

例如：在飞书文档中，通过搜索关键词后，分别展示该关键词在文档、表格、多维表格、思维笔记、文件五大类别中展示结果集，用户通过类别区分，再缩小范围寻找目标值。

4. 高级筛选

筛选条件自定义组合（灵活且占空间小）。高级筛选占用空间比较小，用户可以根据需要自定义筛选条件，不必将所有筛选条件都展示在界面中。使用更灵活，界面更美观。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。并且页面简洁，筛选灵活度高。

设计要点：筛选的条件较多，并且还需要界面能够简洁，筛选灵活度较高，所以我们可以选择高级筛选模式，虽然这里可以直接用表头筛选，但是表头筛选的入口太多，不易查找，所以就采用高级筛选统一入口。如下图：

方案一：下拉选择式

通过下拉展示可筛选的条件类型，再根据类型选择具体的筛选条件，从而得到结果值。

交互细节：点击筛选→选择需要筛选的条件类型→选择具体的值

方案二：条件组合式

通过自定义条件，并且自定义筛选结果值。

当选择发布状态等于审批中中时，筛选的结果为数据中所有发布状态为审批中的数据。 当选择发布状态不等于审批中时，选的结果的数据中不包含状态为审批中的数据，只包含已发布和未发布的数据。

结语 此次案例并非真实案例，只是为了方便大家理解每一种筛选类型而列举的简单案例，实际工作需要根据实际需求及业务场景而选择最适合需求的类型。

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

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、着陆页设计范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项人工智能头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、 着陆页设计 范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项 人工智能 头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费的多功能截图美化设计工具 https://gemoo.com/tools/screen-capture

Gemoo 是一个完全免费的截图优化和设计工具，它足够轻量级，完全免费，而且内置多个功能，可以帮你将粗糙的截图变得细致而漂亮，比如可以快速添加注释、添加统一背景和放大细节、添加营销元素、无干扰式截图，另外它还能作为灵感搜集工具来使用。

2、免费着陆页设计范例大合集 https://landings.dev/inspiration/

如果你日常做网页或者页面设计比较多，那么可能会比较需要一些大公司、大团队做的着陆页设计范例。那么这个网站就能够满足你日常的灵感需求，同时，网站提供更为深入的筛选功能，可以选择深色系或者浅色系，主色包含哪些颜色等等。选中感兴趣的页面之后，还可以点进去查看详细的配色、官网链接和页面具体的设计。

3、轻量级图像编辑器 Tinykiwi https://www.tinykiwi.co/

很多图像设计是的工作完全用不到 PS 这样大型的图形设计软件，所以大量的轻量级图形设计工具诞生了，Tinykiwi 就是其中之一，它的基础功能全部免费，常见的设计功能也都齐全，如果你的需求只是简单的排版处理，那么这个工具可以作为日常平面设计的一个备用方案。

4、免费的 Figma 可用无限插图组合 https://sliday.gumroad.com/l/illustrations-kit-for-figma

Figma 用户有福了。这是一个专门为 Figma 用户准备的插画生成套件，其中包含 300 多个不同的组件，当你将这个免费的素材导入到 Figma 之后，可以根据内置的引导快速生成多种多样的插画内容，这套插画套件包含的插画素材有角色、背景、实际物品还有抽象元素，相当丰富，足以应对绝大多数的场景和需求。限时免费，记得下载！

5、免费的浏览器在线建模平台 https://www.womp.com/

如果你曾经被各种 3D 软件丰富的菜单和海量功能吓退过，那么这个名为 Womp Alpha 的在线3D建模工具，应该会让你感觉更加轻松吧？它没有大量的按键，它的建模方式更接近于「雕刻」，你只需要按照自己的想法，拿着鼠标一路划拉就能够构建出你喜欢的物品或者角色。

6、免费的超萌高素质插画图库 https://popsy.co/illustrations

这是 Notion 和 Popsy 一通出品的一套免费矢量插画，完全免费可以商用，不过使用的时候，需要标识出来自 popsy.co 。这套图库当中每幅插画都包含有若干契合的场景关键词，并且其中的主色调都可以快速进行定制，你所需要做的就是搜索关键词，获得你需要的插画即可。另外值得一提的是，popsy 本身也是一个快速的网站构建工具，你如果使用 popsy 构建网站，那么可以更快调用这套插画图库。

7、人工智能生成的高素质渐变色 https://gradients.ray.st/

渐变色素材绝对是日常设计中最为百搭好用的一类素材，而这波借由 AI 生成的渐变素材素质就相当高，总计有 52 款，你可以在你的设计项目当中直接使用。这波素材使用的是大尺寸 PNG 格式文件，挑选你喜欢的类型，直接下载即可。

8、人工智能头像生成服务 https://www.profilepicture.ai/

这个真的就是为了制作头像而生的人工智能生成服务，而且这项服务可能比别的同类服务更加「个人化」，你所需要做的，是上传至少 10 张包含有你的面部和身体特征的的照片，然后会以这些图像数据为基础，经过可能超过 3 个小时的训练，帮你生成超过 120 张各种不同风格、不同角度、不同类型的头像照片。这是一项收费服务，不过对于有这类需求的同学而言，可能也是值得的。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、着陆页设计范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项人工智能头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、 着陆页设计 范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项 人工智能 头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费的多功能截图美化设计工具 https://gemoo.com/tools/screen-capture

Gemoo 是一个完全免费的截图优化和设计工具，它足够轻量级，完全免费，而且内置多个功能，可以帮你将粗糙的截图变得细致而漂亮，比如可以快速添加注释、添加统一背景和放大细节、添加营销元素、无干扰式截图，另外它还能作为灵感搜集工具来使用。

2、免费着陆页设计范例大合集 https://landings.dev/inspiration/

如果你日常做网页或者页面设计比较多，那么可能会比较需要一些大公司、大团队做的着陆页设计范例。那么这个网站就能够满足你日常的灵感需求，同时，网站提供更为深入的筛选功能，可以选择深色系或者浅色系，主色包含哪些颜色等等。选中感兴趣的页面之后，还可以点进去查看详细的配色、官网链接和页面具体的设计。

3、轻量级图像编辑器 Tinykiwi https://www.tinykiwi.co/

很多图像设计是的工作完全用不到 PS 这样大型的图形设计软件，所以大量的轻量级图形设计工具诞生了，Tinykiwi 就是其中之一，它的基础功能全部免费，常见的设计功能也都齐全，如果你的需求只是简单的排版处理，那么这个工具可以作为日常平面设计的一个备用方案。

4、免费的 Figma 可用无限插图组合 https://sliday.gumroad.com/l/illustrations-kit-for-figma

Figma 用户有福了。这是一个专门为 Figma 用户准备的插画生成套件，其中包含 300 多个不同的组件，当你将这个免费的素材导入到 Figma 之后，可以根据内置的引导快速生成多种多样的插画内容，这套插画套件包含的插画素材有角色、背景、实际物品还有抽象元素，相当丰富，足以应对绝大多数的场景和需求。限时免费，记得下载！

5、免费的浏览器在线建模平台 https://www.womp.com/

如果你曾经被各种 3D 软件丰富的菜单和海量功能吓退过，那么这个名为 Womp Alpha 的在线3D建模工具，应该会让你感觉更加轻松吧？它没有大量的按键，它的建模方式更接近于「雕刻」，你只需要按照自己的想法，拿着鼠标一路划拉就能够构建出你喜欢的物品或者角色。

6、免费的超萌高素质插画图库 https://popsy.co/illustrations

这是 Notion 和 Popsy 一通出品的一套免费矢量插画，完全免费可以商用，不过使用的时候，需要标识出来自 popsy.co 。这套图库当中每幅插画都包含有若干契合的场景关键词，并且其中的主色调都可以快速进行定制，你所需要做的就是搜索关键词，获得你需要的插画即可。另外值得一提的是，popsy 本身也是一个快速的网站构建工具，你如果使用 popsy 构建网站，那么可以更快调用这套插画图库。

7、人工智能生成的高素质渐变色 https://gradients.ray.st/

渐变色素材绝对是日常设计中最为百搭好用的一类素材，而这波借由 AI 生成的渐变素材素质就相当高，总计有 52 款，你可以在你的设计项目当中直接使用。这波素材使用的是大尺寸 PNG 格式文件，挑选你喜欢的类型，直接下载即可。

8、人工智能头像生成服务 https://www.profilepicture.ai/

这个真的就是为了制作头像而生的人工智能生成服务，而且这项服务可能比别的同类服务更加「个人化」，你所需要做的，是上传至少 10 张包含有你的面部和身体特征的的照片，然后会以这些图像数据为基础，经过可能超过 3 个小时的训练，帮你生成超过 120 张各种不同风格、不同角度、不同类型的头像照片。这是一项收费服务，不过对于有这类需求的同学而言，可能也是值得的。

这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。所以我自己出一版，希望能帮助你们一次性解决这些问题。

这是一篇酝酿了比较久的内容了，即讲解 B 端 设计规范 和 组件库 的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。

所以我自己出一版，希望能帮助你们一次性解决这些问题。

之前的UI零基础系列也值得一看：

零基础 UI 入门七：教你快速上手APP适配 这是移动端规范的最后一篇，关于移动端适配相关原则的解析。

阅读文章 >

一、B端项目中的设计规范 1. 设计规范和组件库

B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。

所以，首先我们要先理清楚什么是设计规范和组件库。

设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。

换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。

组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。

严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。

组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。

对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。

所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。

设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：

任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。

项目规范是一个典型的 “**项目团队可以没有，但你不能不会**” 的基本招聘要求。

2. 开源组件库和项目规范

在今天搭建 B 端项目规范时，新手还有一个普遍的问题：

项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？

初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。

它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……

这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。

比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。

再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。

前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。

开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。

同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。

下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。

二、软件中的规范功能解析 1. 和规范有关的功能解析

之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。

但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。

所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。

① 样式功能

样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。

而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。

而每个样式分类独立生成记录的好处，就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种，投影制定了深、浅两种，使用者可以自由搭配这些选项。

② 响应式功能

响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。

例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。

或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。

图例，右下角放个问号，两个画布高度，画布不用太大

软件中的响应式并不等同于广义的网页响应式技术，它不能实现完整的删格布局和流体响应，只能帮助我们来解决一些最基本的响应需求，这在后面的章节中再具体介绍。

③ 自动布局功能

自动布局功，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。

它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。

自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。

掌握自动布局是 UI 设计类软件的灵魂，后面我们会解释它的具体功能和应用方法，然后再进入组件的具体使用环节，分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

④ 组件功能

组件功能在不同软件有不同的叫法，如 Symbol、Component、Element 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。

例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。

在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。

组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。

Figma重大功能更新！学会用「变体组件」让设计效率翻一倍！ Figma作为一个线上协作设计平台，因其强大的组件功能，越来越受到设计团队的青睐。

阅读文章 >

组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。

在后面我们会针对这些功能一一进行解释。

结尾 理解 B 端设计规范的存在价值，和软件中的 4 个基本功能概念，那么后面学习起来就会变得很容易。

欢迎关注作者的微信公众号：「超人的电话亭」

这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。所以我自己出一版，希望能帮助你们一次性解决这些问题。

这是一篇酝酿了比较久的内容了，即讲解 B 端 设计规范 和 组件库 的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。

所以我自己出一版，希望能帮助你们一次性解决这些问题。

之前的UI零基础系列也值得一看：

零基础 UI 入门七：教你快速上手APP适配 这是移动端规范的最后一篇，关于移动端适配相关原则的解析。

阅读文章 >

一、B端项目中的设计规范 1. 设计规范和组件库

B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。

所以，首先我们要先理清楚什么是设计规范和组件库。

设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。

换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。

组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。

严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。

组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。

对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。

所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。

设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：

任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。

项目规范是一个典型的 “**项目团队可以没有，但你不能不会**” 的基本招聘要求。

2. 开源组件库和项目规范

在今天搭建 B 端项目规范时，新手还有一个普遍的问题：

项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？

初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。

它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……

这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。

比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。

再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。

前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。

开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。

同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。

下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。

二、软件中的规范功能解析 1. 和规范有关的功能解析

之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。

但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。

所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。

① 样式功能

样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。

而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。

而每个样式分类独立生成记录的好处，就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种，投影制定了深、浅两种，使用者可以自由搭配这些选项。

② 响应式功能

响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。

例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。

或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。

图例，右下角放个问号，两个画布高度，画布不用太大

软件中的响应式并不等同于广义的网页响应式技术，它不能实现完整的删格布局和流体响应，只能帮助我们来解决一些最基本的响应需求，这在后面的章节中再具体介绍。

③ 自动布局功能

自动布局功，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。

它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。

自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。

掌握自动布局是 UI 设计类软件的灵魂，后面我们会解释它的具体功能和应用方法，然后再进入组件的具体使用环节，分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

④ 组件功能

组件功能在不同软件有不同的叫法，如 Symbol、Component、Element 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。

例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。

在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。

组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。

Figma重大功能更新！学会用「变体组件」让设计效率翻一倍！ Figma作为一个线上协作设计平台，因其强大的组件功能，越来越受到设计团队的青睐。

阅读文章 >

组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。

在后面我们会针对这些功能一一进行解释。

结尾 理解 B 端设计规范的存在价值，和软件中的 4 个基本功能概念，那么后面学习起来就会变得很容易。

欢迎关注作者的微信公众号：「超人的电话亭」