易观分析：元宇宙概念发展至今，已于游戏、社交、音乐等泛娱乐领域广泛应用，同时为多行业提供全新的线上解决方案，有效提升其智能化、数字化水平。 本报告从元宇宙规模、产业链、资本关注度等概况层面入手，关注数字藏品（区别、规模与国内发展特征等）数字孪生（模型、应用和挑

本分析内容主要分析对象为元宇宙的应用场景及其未来的发展趋势。主要对数字藏品、数字孪生、数字人、数字社区几大领域，结合元宇宙概念，进行基于行业的规模、案例、应用场景等内容的分析，一起来看一下吧。

易观分析： 元宇宙概念发展至今，已于游戏、社交、音乐等泛娱乐领域广泛应用，同时为多行业提供全新的线上解决方案，有效提升其智能化、数字化水平。

本报告从元宇宙规模、产业链、资本关注度等概况层面入手，关注数字藏品（区别、规模与国内发展特征等）数字孪生（模型、应用和挑战等）、数字人（政策、规模、虚拟直播等）、数字社区（政策、差异化、趋势等）四大方向，并针对各方面提出总结、建议及预测分析，为元宇宙领域从业者、投资者提供前沿参考。

本文由 @易观分析 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自作者投稿

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

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

{{{path> 赞赏

几天前，淘宝直播方面透露，俞敏洪将在10月31日晚现身 “新东方迅程教育专营店”淘宝直播间。 要知道，双11是电商行业公认的全年最重要节点，也是各家血拼的关键时刻，而俞敏洪带领的东方甄选早在今年6月就已经成功挤下长期占据抖音带货头名的 “交个朋友直播间”，成为

随着双十一的到来，今年在抖音上爆火的 “东方甄选”会怎么直播，一直是大家关注的焦点，然而背后的公司新东方创始人俞敏洪，却选择离开抖音，去往淘宝，如何看待他的这种行为呢？或许能从新东方这一年来的各种行动中，看到背后的意义。

几天前，淘宝直播方面透露，俞敏洪将在10月31日晚现身 “新东方迅程教育专营店”淘宝直播间。

要知道，双11是电商行业公认的全年最重要节点，也是各家血拼的关键时刻，而俞敏洪带领的东方甄选早在今年6月就已经成功挤下长期占据抖音带货头名的 “交个朋友直播间”，成为抖音新晋“带货一哥”。

但在这样关键的节点，自带流量属性的“新东方领头羊”俞敏洪，却选择了淘宝直播。

根据官方披露，俞敏洪在淘宝直播的内容主要涉及大学生学习成长与规划。而去年双11，俞敏洪也进行过相同的操作，最终换来了数万用户在其直播间购买了考研英语、大学英语四六级等课程。

就像新东方官方口径所回复的那样——“在淘宝做教育直播是新东方一项有清晰目标的长期规划”。看上去，俞敏洪此次瞄准淘宝直播，大有复兴其教育板块的意图。

在我们跟“新东方迅程教育专营店”的客服沟通时，对方确认了很重要的一点，购买课程后将在新东方的app中上课。

从某种程度上来讲，app实则就是一家公司的私域流量池，公司拥有在app中分发内容、运营用户的绝对控制权，这点对于教育课程产品而言，尤为重要。毕竟能够私域运营就关乎着能够降低获客成本、促进续费转化。更何况， 只有圈到自己的app中，才能方便辅导老师/助教进一步到微信这一私域场景运营用户，或是拿到电话号码供电销人员促转化。

哪怕成人教育产品的用户生命周期并没有K12学段长，但也不意味着就完全没有续费转化空间。一个非常简单的场景就是，选择报班考四级的同学大概率会选择报班考六级，而后再是考研、考托福雅思等等。

也就是说，通过直播的方式，新东方完成的仅仅是引流的工作，在整个教培的商业链路上，后面所有的交付、扩科、续费、转介绍，都将脱媒完成。

其实，哪怕不是教育线，而是在抖音上直播的东方甄选，目前也已经推出了自己的app，从软件界面来看，开发已经基本成熟。一旦用户闻风而动，未来东方甄选的经营也将实现脱媒。

这也许并非平台所愿。因为“平台不可能允许有新平台从它这里孵化出来。”

当我们抛出“平台本质上是否希望有人能够长久走红”的问题时，一位长期跟抖音打交道的运营商这样告诉我们。

但怎么说呢，只要大V足够大，就还有与平台博弈的筹码。

于是，这个双11，罗永浩去了淘宝，而曾经的淘宝直播达人丫头baby则成了抖音的带货 “新一姐” ，10月6日，丫头baby的单日GMV超过了东方甄选。

所以就像主播可以在不同的平台流转一样，平台也可以让主播像潮水一样涌动，只要它想。

01 事实上，这几个月东方甄选的火爆，让很多人已经忘记了——新东方是一家教育集团，或者对东方甄选的成功产生误解，认为它能拯救整个新东方。

毕竟， 根据8月26日新东方在线财报会上透露，东方甄选近三个月的GMV达到了20亿元左右。

但实际情况并非如此。只能说，东方甄选成为了新东方在线的求生命门，而新东方在线仅为新东方集团旗下的在线教育业务平台。目前，新东方在线于港股上市，但长期规模和估值并不高。

当然，自东方甄选诞生以来，新东方在线在资本市场焕发新生。但单从财务数据角度，东方甄选无法撑起新东方教育集团的生存使命。

要知道在双减前，新东方2020财年营收35.79亿美元，这是实打实的净收入（gmv指的是订单所拍金额，包含付款和未付款的部分；而营业收入指的是实际的金额流水），且净利润4.13亿美元、运营利润3.99亿美元。

而且，新东方还有数万名跟教培角色密不可分的员工，东方甄选的直播间亦无法承载他们。更不用提，俞敏洪本人包括整个公司众多员工对于回归教育的理想和抱负。

就像东方甄选的主播YOYO在云顶对话中这样说道：“我曾是个英语老师，我将来还会当一名老师的，那是一种信念。”

值得注意的是，俞敏洪被爆淘宝直播的节点刚好卡在罗永浩被爆淘宝直播的后一天，两方公开回应且承认此事的时间点，又刚好卡在20日同一天。两大流量人物叠加效应出现在重大社会流量事件中，这无疑是一个成功的营销案例。

很明显，俞敏洪这次要利用淘宝直播，利用双11的重大消费关注度，利用跟老同事罗永浩“同台共售”的舆论关注度，重新吸引大众对于新东方教育集团中，那些合规教育业务的关注。

而教育，才是这家公司穿过29年生命周期的根基。

一个令人感叹的事情是，在在线教育的流量大战最激烈的时候，无论是新东方还是俞敏洪都参战甚少，据说是因为老俞觉得这不符合教育的模型，也因此有好几年，新东方不被很多人看好，更不乏有人觉得老俞已经“廉颇老矣”。

可是当时代的镜头一切换，他玩起流量来，比谁都溜。

02 而随着俞敏洪出抖，关于东方甄选出抖的讨论也越来越多。

尽管此次俞敏洪在淘宝选择的直播间并非东方甄选的直播间，但后者去淘宝直播，也只不过是时间问题。且这个开播的具体时间，可以说越发逼近。

因为东方甄选旗舰店早已在天猫成立数月，且从7月30日起陆续上架东方甄选的自营商品，当前的粉丝数量已接近3万。

更进一步的消息是，在点淘app中可以看到，东方甄选主账号拥有32.9万粉丝，目前已经发布了超过280个短视频，商品橱窗上架了近50款商品。

只是，强化与淘宝的关联，实现多平台发展，本质上东方甄选都还只是不同平台上“售货员”一样的存在。

于是我们能看到，今年8月，东方甄选的独立app被爆在各大应用平台上线，从介绍来看，这款app为东方甄选的好物平台，提供一站式购物体验。

尽管目前该app并未开通直播功能，但凭借着热度，在自然流量的增长中，该app早在今年8月份就已经有20万的下载量，且已有消费者自行购买。在我们随便打开一款东方甄选的自营商品“藕粉”时，该商品下方“评价”一栏已经有近600个消费者评价；而店铺热榜销量第一名的“蛋黄酥”，已经有超过1600个评价。

随后不久，东方甄选宣布与顺丰控股和京东物流达成紧密合作关系，计划建立20个自营产品仓库，为自营产品提供面向全国的物流服务保障。

这其实蕴藏着俞敏洪试图让东方甄选摆脱对平台依赖的抱负。

事实上早在今年6月份，俞敏洪就在一次直播中透露：“未来东方甄选也会非常认真的布局，第一，建立一个立体化的销售平台，为更多的中国商家服务，除了抖音以外，也会考虑到其他地方；还会以较快速度自建产品体系，类似于网易严选。”

新东方在线首席财务官尹强此前还透露过，“虽然俞老师说允许东方甄选每年亏一个亿，但是没想到今年就盈利了。”

更为关键的是，虽然东方甄选独立app被爆上线是在今年8月，但其实根据第三方数据显示，该app其实在4月份，东方甄选远未走红时，就已经上线。

这些都说明，其实俞敏洪早就对东方甄选的未来规划得很清晰，不管是抖音，还是淘宝，只是其获取流量和关注度的平台，俞敏洪要做的是自己的商业闭环，而并不是平台的售货员、去争抢一个所谓的销冠。

03 你不能否认，今天很多网红是今天直播平台的“工具人”，但俞敏洪包括背后所代表的东方甄选，显然不在这阵列之中，他们甚至反其道而行，把平台当成了助力自身发展的工具，不管是淘宝，还是抖音。

一位接近淘宝直播的人士告诉我们， 其实早在抖音开播前，东方甄选就与淘宝讨论过，毕竟当时新东方及新东方在线的官方旗舰店都已在淘系长期经营多年，且双方合作的不错。

“但当时新东方承受的压力确实比较大，俞敏洪当时是不求售卖数据多好，只是希望能有一波猛的关注度，积累一些口碑，在监管造成的舆论对新东方不利的时候，希望能用一些正向的东西证明新东方过往坚持的价值观是对的。所以俞敏洪做出了自己的选择。”

很显然，当时对新东方而言，最佳渠道选择就是抖音。而当下，在淘宝旗舰店流量更为精准高效的时候，俞敏洪想要促进教育板块的复兴，着陆点自然就成了淘宝，尤其是在双11期间的淘宝。但这中间的核心又是，俞敏洪不希望被任何一个平台所束缚。

这恐怕是一个几十年营商的企业家，所具备的排他性优势，即具有终局思维。

当然，一些天赋型的年轻企业家也有，例如拼多多，在通过微信的社交关系链迅速崛起的同时，黄铮没忘了把用户导流到自己的app上。而那些同时期的社交电商，包括微店、有赞等，无一不泯然众生。

有关直播达人与平台强依赖强绑定的后果，其实已经有若干网红从爆火到沉寂的共同轨迹可供参考。与同一天官宣去淘宝直播的交个朋友直播间，其实也在遵循这样的轨迹。

其实早在今年4月，在回答媒体关于是否考虑发展跨平台直播业务时，交个朋友创始人黄贺的回答仍是暂不考虑。但6个月之后答案之所以完全不一样，跟交个朋友当下的处境不无关系。

尽管哪怕是抖音官方都不得不承认，交个朋友直播间与抖音直播电商的发展是相辅相成的关系。但作为平台方，不管是出于平衡各大主播生态稳定的考量，还是出于自身利益最大化的考量，都不可能让一个直播间长红，哪怕这个直播间是为自己打出直播电商关键一枪的“交个朋友”。

也许在过去两年多的时间里，抖音中心化的算法推荐对交个朋友直播间的影响较小，但随着罗永浩退网、东方甄选迅速蹿红，交个朋友直播间今天的被动局面越发明显。有数据统计，东方甄选在三个月内就大举赶超了交个朋友，后者的月销售额一度不及前者四成，且粉丝量级也相差近800万。

两组非常鲜明的数据摆在这里：10月22日上午8点31分，东方甄选抖音直播间本场点赞73.8万，实时在线2万人；交个朋友抖音直播间本场点赞13.5万，实时在线4268人。

下午8点25分，我们再次打开了两个直播间。东方甄选抖音直播间本场点赞1883.6万，实时在线10万人次+；而交个朋友抖音直播间本场点赞4.1万，实时在线3631人次。

这可能也是罗永浩虽然说“退网”，但这又不断地出现在舆论视野，包括经常回到直播间，为交个朋友站台的原因所在。

你不能说罗永浩没有终局思维，但至少，他的终点不在直播电商上。反而，当时对他而言，做直播电商只是为了还债，他心心念念的是还债后重新创业，重新追求自己的科技梦，也就是已经诞生的“细红线”。

不管原因如何，结果摆在这里，今天交个朋友作为平台上的“售货员”，被流量的算法所裹挟。

虽然不能否认，罗永浩将在10月24日下午出现在淘宝直播间的信息，确实为交个朋友重新积攒了一波高关注度和新流量。毕竟在预热直播间里，有不少粉丝多次询问罗永浩出现的具体时间。

数据亦能佐证这点：在10月20日下午交个朋友淘宝预热首播前15分钟，其直播间粉丝数量就已经达到了6382名；在当天下午4点50分，即直播50分钟后，粉丝数量就已经超过了10万粉；在10月22日晚上8点35分，粉丝数量已经突破112.2万。且在同时段，其淘宝直播间的人气热度要远高于抖音直播间。

但罗永浩的创业终点毕竟不是带货，随着新项目的发展，他必然会将绝大部分精力投入其中，否则投了“细红线”的王兴也不干。

对于交个朋友来说，是时候去借鉴一下俞敏洪的做法了，让生意走向闭环。

作者：孙颖莹，编辑：王芳洁

来源公众号：最话FunTalk（ID：iFuntalker），不写平庸的故事

原标题：无论淘抖，俞敏洪的工具而已

本文由人人都是产品经理合作媒体 @最话FunTalk 授权发布，未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

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

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

{{{path> 赞赏

又一年双十一，各大主流电商平台相继公布了今年的活动节奏。相比去年，不仅玩法及平台规则有所调整，内容电商与货架电商边界也开始模糊，各大平台不再只攻单一方向，货架、小程序、直播、内容种草遍地开花，生态覆盖更加全面。 本文将聚焦内容平台电商化、电商平台内容化的蛛丝马

一年一度的双11大促又打响了信号，在这场大促之战中，我们可以看到电商平台们拿出了各式各样的举措，而在多样玩法的背后，所透露出的讯息是内容电商与货架电商之间的边界正在模糊，平台在生态方面也覆盖得更加全面了。具体如何理解？不如来看看作者的拆解。

又一年双十一，各大主流电商平台相继公布了今年的活动节奏。相比去年，不仅玩法及平台规则有所调整，内容电商与货架电商边界也开始模糊，各大平台不再只攻单一方向，货架、小程序、直播、内容种草遍地开花，生态覆盖更加全面。

本文将聚焦内容平台电商化、电商平台内容化的蛛丝马迹，欢迎各位一起探讨。

一、双11部分平台玩法 五大平台双11节奏和公布的扶持计划、玩法如图：

1. 淘宝 淘宝今年发布了12项商家服务举措，主要强调种草流量、产品工具的升级，弱化商家的经营成本。

直播流量侧，推出“双11超级播”激励，向各类开播的商家和达人提供冷启动流量激励，同时头部主播在李佳琦之外，迎来罗永浩及“交个朋友”淘宝首播。种草流量侧，启动“星光1000”打榜赛进行流量扶持。

对促销玩法娴熟的淘宝而言，今年双11的重点依旧是解决商家的流量焦虑，同时丰富内容，继续实现淘宝站内短视频、图文内容与直播的联动闭环。

天猫甚至联手微信，上线“天猫超市小铛家”微信小程序，配有天猫超市的logo和“天猫超市送货上门”的介绍，或将在微信内试水电商业务。小程序主要是静态展示天猫超市的“猫超卡”及“超值换购”介绍，首页并未同步天猫超市的购物页。

去年阿里曾在微信上线电商小程序，但未以淘宝或天猫等品牌命名小程序。去年5月，在微信内测“亲友省钱购”小程序，定位社交电商，为用户搜罗淘宝网红包、优惠券、低价好货，是一款社群朋友圈省钱必备的工具。

2. 抖音 抖音今年正式进入双11，商家玩法上，首次融入“预售定金”的玩法，同时增加“商城消费券”、“抖音商城超值购”、“抖音商城低价秒杀”等促销手段。

此外还将结合“跨店满减”核心玩法，联合商家设置多种补贴，并为商家提供亿级流量曝光、抖音商城首页流量曝光机会。

短视频、直播依旧是大促重点，不仅设置了“短视频任务赛”、“好物直播间”、“天天领红包”等玩法，还针对品牌和头部主播，设置了“品牌嘉年华”、“大咖直播间”，并为后者准备了上亿流量扶持。

对拆分了货架电商的抖音而言，今年双11不再单单是平台直播电商的主战场，所以许多已在货架电商体系内成熟的玩法被引入。流量也不单单投入到直播间，会向商城和店铺做倾斜。

3. 快手 快手今年同样开始发力平台的货架电商。

针对爆款商品、大场主播、直播切片挂车等进行流量奖励，平台也为参加大促的商家和主播设置了流量奖励任务，完成即可得到不同额度的奖励。

玩法上，快手会在双11期间为快手商场开放顶部导航tab一级入口，为商家带来亿级流量。同时推出“万人砍价团”，用户可提前支付商品定金，定金人数越多，商品越便宜。

此外，从10.28号起，快手电商将恢复淘宝联盟在快手直播间购物车、短视频购物车、商详页等的商品外链，月底淘宝联盟在快手的商品外链将全部恢复成功（今年3.1号快手曾切断淘宝联盟和京东联盟外链，有赞和魔筷等第三方外链仍未恢复）。而抖音直播间仍不支持淘宝京东等第三方平台在内的购物车链接。

抖快断外链也合理，平台不再满足于做一个给传统电商平台导流的工具，而要做一个完全独立的电商平台。

不过今年以来，快手电商增速放缓，一季度增速47.7%，二季度13.4%，这次淘宝和快手在双11前再次牵手，相比耗时较长的搭建快手商城、搜索场、店铺直播间，有利于其尽快的进入提速、提效模式。

4. 视频号 从目前整理的视频号5大核心玩法来看，平台双十一大促的重点，一是拉动品牌的入驻，二是拉动商家的直播率，让商家引导私域流量的转化，提高直播间GMV。

5. 小红书 小红书今年除了与天猫深度联动、发挥平台的种草能力外，还公布了一项时尚主播成长计划，大力扶持头部主播、发力站内成交。

不仅通过各入口将用户引导进直播会场，也会对开播主播的笔记进行高曝光推流，主播的直播间也会得到发现页推流。

针对TOP类的时尚主播，小红书基本维持了和去年双11相似的激励政策，日榜TOP1-3名的主播预计将会得到30w的流量曝光，TOP4-10有10w曝光，以此类推。而总榜排名前三的主播，将得到3000w曝光和1000w张宠粉补贴券。同时，直播间成交量超过500w的主播，将得到500w笔记曝光。

从上面5个平台的双11节奏和玩法看，今年的大促战线有所缩短。

预热战线的拉长，或许对某些商家/主播而言，能更好地蓄积流量，实现最终的爆发，但这也存在流量提前流失的情况。而节奏上的调整，除了考虑到商家和主播前期的准备外，或许也与平台促销活动频繁，需给商家和主播留出喘息空间有关。

在补贴政策上，与往年相比，各大平台的补贴力度更大更丰富。抖快尤甚，抖音拿出了多个亿级流量，快手则宣布将投入此前两倍的助推流量。

因此，今年的双11仍有很多看点。

首先，抖快在发力货架电商，商城首次参加大促，平台不仅将其放置在首页的一级入口，还引入了新的用户玩法、投入了大量流量，来带动这一新版块实现增长。

其次，视频号今年第2次参加，除新增了许多玩法，并鼓励品牌自播外，视频号在公域流量上的表现值得期待。

而持续发力双11的小红书，今年能否在直播电商和站内成交方面实现新的突破，而不是为电商平台做嫁衣，同样备受关注。

二、抖快发力货架电商 抖快已开始将商城入口常态化置顶，抖音商城置于顶部右侧第2位，此前一直在顶部和底部之间反复变动；快手部分用户顶部居中位置出现商城入口，此前快手商城被藏在首页弹出栏里的二级入口。

抖快曾先后切断淘宝京东等第三方外链，转而自建供应链。随着货品池初具规模，二者都基于搜索、推荐、商品分类、营销活动等电商平台惯用的区块，搭建起了商城货架，并先后将商城从幕后推到了台前。

抖快商城布局、结构和淘宝大同小异，顶部菜单，中间品牌、直播等四宫格板块，下方信息流，下图左快手、中淘宝、右抖音，三者结构趋于一致。

不过被推荐到首页的商品，及推荐算法，有所差异：主做电商直播的抖快，商城的信息流中，直播间的占比较高。淘宝首页，短视频、单品出现最多；抖快根据用户的内容观看、商品消费历史进行推荐。淘宝推荐更多参考点击、收藏、加购等消费行为。

单品、店铺、商城，这是电商货架的纵向结构。商城之下，店铺基于平台各自的特色，也有差异化的设计：主打“信任”的快手，品牌旗舰店首屏的上半部分，着重强调“回头客推荐指数”；抖音的品牌旗舰店，直播间入口占据了首页半屏的空间，这和淘宝的“店铺二楼”版块比较接近；而淘宝，店铺主页设置有直播、商品、会员、动态、分类这五大区块，业态更均衡、精细。下图左淘宝、中抖音、右快手：

短视频平台“搭货架”的原因无外乎电商GMV增速放缓，主要受商业化流量规模影响，其评估方式为“平台流量×商业化渗透率”，平台流量业界普遍计算公式为“平均日活×日均使用时长”，商业化渗透率主要是电商直播间、带货短视频、信息流广告等在原生信息流中的出现频次。

业内预估目前抖音商品、广告的渗透率已超15%，已经十分接近主流信息平台的广告加载率，刷7条视频，基本就会出现1条电商、信息流的广告，已触及用户体验的红线，商业化或很难进一步渗透。抖快两大内容平台，能输送给电商业务的流量，接近触顶。

此时针对电商业务只有两种破局方案：做大既有流量的交易效率；寻找电商流量的新增长。

关于交易效率的提升，快手官方称：将用算法提升人货匹配精准度；加强用户对个性化需求的探索，加强对搜索框、猜你喜欢等泛商城产品的建设；在商品层面，补足商品参数、详情的刻画。

关于流量增长，抖快均为将商城置于用户感知最明显的APP首页顶部一级入口。抖音电商的行业运营也将分出内容业务和货架业务两条业务线，未来聚焦商城和品牌发展。

短视频电商平台过去基于流量、算法，主打“货找人”模式，是强公域逻辑，品牌带货能做的主动动作很少，除了选品，就是投流，但随着流量、推荐效率见顶。如今开始寄希望于打造一个单独的场域，培养用户“人找货”的心智，让电商业务实现流量的自我生产与流转。

兴趣电商是激发冲动消费，但对于消费者来说，购物只会偶尔冲动，不会长期处于冲动的状态。

因此，理性、刚需性消费才是常态。其背后是大量的主动搜索行为。淘宝上的搜索，即最大、最典型的“人找货”流量，也是短视频平台们所缺失的。将平台流量导入商城，大规模推动用户主动搜索、浏览商品，是抖快培养“人找货”心智的第一步。

当交易回归到“人找货”，尤其涉及购买消费电子、美妆等单价较高的单品时，供应链质量、售后、物流、信任体系等，才是平台们比拼的核心竞争力。而在这些方面，抖快相比京淘仍有差距。最直观的案例是，目前抖快商城力推的iPhone、飞天茅台等尖货，基本源自第三方供应链。而京淘早已实现了品牌旗舰店或官方授权自营。

简言之，短视频平台要分流刚需购物群体，就必须要完成对电商基础设施建设和品牌供应链的布局，让大大小小的商家在抖音有个长期的经营阵地，让商家发挥传统电商的精细化运营优势与能力，通过商城分发的流量，提高订单转化率。

今年上半年，快手的线上营销服务收入（包含品牌广告、效果广告、直播电商广告、短视频电商广告等）同比增长20.7%，其它服务（包含电商业务）同比增长25.2%，但相对落后于同比增幅近40%的电商业务GMV，以及公域电商直播GPM（每千人下单总额）。

这背后反映的，是“货找人”模式下货币化率（电商行业的货币化率=营业收入/GMV）偏低，即GMV的增长，没能很好地驱动营收规模的增长。这事关退货率、复购率，以及直播电商中存在的更多的“分佣方”。

以“分佣”举例，“货找人”的整条交易链路中，额外有电商主播、达人的参与，平台和品牌能够分享的利润，需要先行扣除佣金、坑位费等。比如头部主播的佣金率普遍在20%-30%之间，单个坑位费也在数万元不等。同时，对比更具确定性的“人找货”，“货找人”订单退货率略高，复购率偏低，也是行业普遍承认的事实。

所以抖快加码商城，推进“人找货”，一定程度上也是为了用更具确定性的消费行为，拉高平台整体的订单质量。同时希望通过商城，为品牌搭建一条与消费者连接的新通路——品牌可以通过积累店铺粉丝、搭建品牌会员体系、孵化社群等方式，建立起自己的私域，对冲依赖公域流量的电商直播本身的不确定性。

不然，像东方甄选出逃转而自建APP，罗永浩和交个朋友出逃到淘宝的案例将永远无法杜绝。

短视频平台当前的所有尝试，都是在打造一个集长短视频、社交、电商、求职于一体的超级APP。超级APP的基础在于业务协同，彼此促进。但抖快的内容、电商两大核心业务之间仍然没有很好的协同。

以抖快商城举例，搜索“短袖”匹配到的单品，大多还没有配套商品短视频，也没有进入品牌在播的直播间。短视频平台的“货架”所提供的，还是偏传统的详情页。这背后反映的是所谓的内容电商的尴尬：短视频平台拥有优质的内容供给，但这方面能力突出的网红达人，往往不具备供应链能力，所以变现多通过品牌广告、效果广告，带货则偏生硬。

而具备供应链能力的品牌，大多是选品、找主播、开直播这样简单粗暴的带货逻辑，缺乏做内容的意愿和动力。所以平台高涨的GMV背后，更多还是内容造流量，电商消耗流量的简单逻辑，彼此偏割裂。

协同需要业务的底层具备统一性。比如支付宝的业务都基于支付心智。微信公众号、视频号的底层都是社交心智，美团就是做关于本地生活服务的一切。统一的心智，才能让多业务之间彼此联系、有机统一、相互促进。兴趣、信任，是抖快给内容、电商之间抹上的粘合剂，但目前来看，粘的不算牢。

抖快前置商城入口，培养用户主动购物的习惯，也许是平台意识到，电商和内容之间的化学反应很难，与其彼此消耗，不如新造一个货架，然后更独立地去运作。

三、抖音淘宝化进程 抖音电商逐步进行内容和商品分流，改变过度绑定内容流量的模式，分出内容业务和货架业务两条业务线。

在商家数量不多、sku数量相对较少的时期，抖音商城的商品更多是类似拼多多的“白牌”，随着越来越多商家及品牌的入驻，开始向京东淘宝靠拢，未来将主做商城和品牌。

这其中似乎可窥探出抖音电商面临的困局。

首先，抖音电商此前的发力点主要在内容领域，即在短视频和直播场景中售卖，这是原“兴趣电商”模式，就是向潜在消费者推荐其可能感兴趣的商品或带货直播。后升级为“全域兴趣电商”，集合了短视频、直播、商城、搜索、店铺等多元化场景，加强自身的电商资源。

兴趣电商靠情绪驱动，以冲动型购物为主，问题是复购率很低，所带来的冲动型购物不具备刚需性。生活刚需用品、大件商品、乃至正规的品牌商品，兴趣电商均无优势。品牌商家依然会以主流传统电商为核心经营阵地。

其次，以内容为导向的电商缺乏中心场布局。在抖音等以内容为导向的平台，内容与流量起到了决定性作用，一直以来抖音电商都是在以“货找人”的形式运作，主播和粉丝是直播带货的核心。然而，内容电商的本质在于内容，优质的内容必须要有专业的主播来完成。

但保证持续优质内容的输出本身就挺难的，在内容与流量之间，商家与品牌方很难做出权衡。若想在传统电商面前形成绝对优势，抖音电商必须完成以人为中心到以商品为中心的转变。

最后，虽然电商已是抖音发力的一大方向，但无论是物流与售后服务，还是产品的供应链，目前的抖音电商都有很多不足，远未达到老牌电商平台的高度。最为关键的一点是抖音电商的底层信任体系与真正的电商平台存在差别，抖音电商底层信任更多来自用户对主播本人的信任，而非来自抖音平台。若主播足够强大，内容足够优质，即使换一家平台直播带货，依然效果很好。

如今，在短视频和直播场景中售卖的“兴趣电商”模式（货找人）已经成熟，后续需要开拓更多商家经营阵地，即不依赖于内容的货架场景；对商家而言，商城和店铺将进一步打通，以便用户在直播间加入店铺会员后、能在不开播的时候进入店铺自行购买。

抖音此次向货架电商靠拢，打通直播带货与商城路径，尽管的确有可能让用户从“冲动型消费”过渡到“习惯型消费”，但或许还应思考如何走通内容创作者与商家间的合作路径，如何完善平台的底层信任体系、售后、供应链以及如何培育适宜品牌商家持续经营的商业生态与土壤。

但做货架电商并非全是好处。目前抖音还处于品牌入驻的红利期，商家在前期需大量投入，产生自然流量后会降低投放。用户的留存和复购会导致平台搜索型流量的上升，随着抖音开始发展货架电商，对转化要求更高的广告类型（如搜索广告，这类广告更要求ROI）占比上升，将会拉低平台的平均货币化率。

近一年，抖音在电商领域不断布局：推出综合电商抖音商城、直播电商“抖音直播”、跨境电商、二手售卖业务和回收业务、源头好物“心跳优选”、酒水自营“朝酿暮饮”、周边“抖音文创”、潮流电商“抖音盒子”和种草平台“可颂”等。

私域电商不断加码：首页内测“逛街”一级入口，对标淘宝的“订阅”，打造商家版的朋友圈；增加“电商会员”功能，为商家打造私域流量池；内测电商会员、“复购券”和“我的常购好物”功能，让用户能主动去消费，提高订单复购率。

为了向货架电商发展，抖音小店升级为抖音商城，界面与京淘无异，并反复试探“商城”入口位置，从APP底部导航栏（取代前社交功能“朋友”，将朋友频道置于首页上方）到常驻首页顶部一级入口，电商与社交孰轻孰重显而易见。

还先后推出了百亿补贴（现改名为“超值购”）、拼团、秒杀等分区，让用户的购物习惯从兴趣电商中的“激情购买”，逐步向“刚性购买”发展。

此外抖音还想打造下一个购物狂欢节，已连续3年举办“818好物节”（8.6-8.18号），除了搞预售、发红包、联动品牌搞嘉年华，还有更多达人、商家涌入开播。

同时提出“泛商城”概念，引导商家通过泛商城集中引爆。抖音正在通过整合抖音商城、抖音搜索、达人橱窗/商家店铺等三大入口场景，以商城和搜索组合，搜索和短视频及直播间跳转等打造一套流量互通的多场域交互模式，进一步完善人找货到货找人的商业闭环，以满足商家多元化经营需求，为品牌商家打造一个聚集流量的新场所。今年618则是这一打法的首次体现。

泛商城为“品牌+商家”提供了更多转化路径的选择，实际销量也有大幅提升，而且抖音商城内的超值购、品牌馆、低价秒杀等频道，另外还有品牌官方旗舰店的商详页、购物车等场景，都试图尝试在“泛商城”的流量聚合逻辑下形成通透式、全景式的导购路径。

今年的818活动一大变化就是升级抖音商场，将原来的百亿补贴频道改为商城超值购，通过清晰的品类分类和货品陈列，帮助消费者更直接地获取商品信息。同时还有直播精选、品牌馆、热点话题、爆款榜单等频道，满足消费者更多的购物场景及购物链路需求。

另外，抖音还在活动期间完善了服务，通过抖音支付银行卡补贴、抖音月付免息立减补贴、818运费险千万补贴、极速收款和服务市场818等加大全流程经营保障。其中，抖音支付、抖音月付新用户将会获得“立减7元”的红包补贴。

818好物节期间，可以看到商城页面都是与活动相关的优惠信息：818补贴、818正品、领818无门槛券……

抖音电商还将手伸向了头条。10.19号今日头条上线独立“购物”频道。该频道位于搜索栏下方，用户搜索商品时出现，可在“购物”tab中下单购买，商品由抖音电商提供。

该页面为双瀑布信息流的传统货架电商模式。和抖音商城相比，除了没有独立的优惠板块以外，商详页及支付流程（也用抖音支付）等其它模块均相同。甚至连“品牌”的标签都照搬了过去。此外，用户还可以看到商品的直播画面，并在直播间内下单。（下图左头条右抖音）

不过，今日头条内原有的以“头条小店”为主体的“值点”商城频道仍存在，即用户可以在两个频道内进行购物。但值点优先级已处于末位。

作为抖音电商的核心，“直播间”也是该频道的重要模块。用户点击带有“直播中”标识的商品后，不会进入商品详情页，而是直接跳转到对应的直播间，并完成后续交易。

今年5月，今日头条的直播服务便已切换为由抖音提供，直播带货等功能也全部复制到了今日头条中。而且首页信息流推荐中也会出现带货直播。

近日，抖音极速版商城首页内测“9块9特价”频道，开始向下沉市场渗透。此前，抖音pp便在商城首页上线了“低价秒杀”频道，内设“9.9封顶”和“19.9封顶”两大类目。此次9块9特价频道的上线，无疑凸显了抖音电商继续向低线城市渗透的决心。

该频道主打爆款好物、补贴精选、低价折扣、最高9块9四大卖点，商品覆盖家居日用、服饰鞋包等8个品类，每个大类下又细分2-5个小品类，均为低价走量引流商品。

页面设爆款专区、9.9元专区、4.9元专区3大类目。其中，“9.9元专区”价格多为9.9元，最低5元左右；“4.9元专区”多为5元左右，产品最低价仅1元。

但特价专区内的商品并不全都只有9.9元，部分商家将9.9元商品作为引流款，也会提供正常价格商品供消费者购买。引流商品的销量都很高，但sku较拼多多、淘特等平台还不够。

该活动对参与商家设有门槛：

玩法方面，9块9特价活动与“限时特卖”工具、“定金预售”工具、“拼团”工具等玩法互斥，同时与“平台定金优惠”、“秒杀活动”、“超值购”等活动互斥。同一商家不可同时参加互斥的玩法和活动。这一做法在电商领域内较为普遍，尤其大促期间，平台的优惠玩法多样，但多数不可叠加。

9块9包邮俨然不再是新鲜的线上玩法，但确实可以转化一批消费用户。而且相比正价商品，消费者对9块9包邮的特价商品包容度更高，退货率和售后率都明显要低。

下图从左到右为拼多多的“9块9特卖”、京东的“券后9.9”、淘宝的“天天特卖”和9块9包邮：

这些平台的特价专区有着很多共性特点。商品单价不高，以日货品为主，如垃圾袋、纸巾；而且特价专区入驻的商家门槛并不高，比如对店铺的好评率要求不高，以此吸引各类商家的入驻提升站内商城中品类的丰富性（商家数量和SKU），同时还能用低价的策略激活消费者的活跃度，一举两得。

最后，虽然这些特价专区都以9块9包邮为噱头，但许多商品只是以9块9为起点。比如抖音极速版一款烤肠页面显示2.4元，但2.4元是单根烤肠的价格，而该烤肠一包为八根，实际付款价格远超9块9。

自拼多多从低线城市杀出后，下沉市场便成了传统综合电商巨头的兵家必争之地。阿里相继押宝聚划算、淘特、淘菜菜等，向下沉市场伸出多只触手。京东则始终重押京喜，后拆分为京喜APP、京喜通、京喜拼拼并入京东零售。

抖音电商拆分业务线开始注重发展商城和品牌业务后，加大对下沉市场的投入也是顺势之举，后续还可以利用今日头条中的电商频道再俘获一批消费用户。

四、快手货架电商进程 快手也开始灰度商城频道，提升流量变现效率，部分用户可通过搜索或快手APP首页顶部一级入口进入。

但抖快商城优先级不同。打开快手，用户会先进入“精选”界面，需在底部导航栏完成从“精选”到“首页”的跳转，方能看到“商城”；抖音则是直接进入首页，无需跳转。

商城板块与淘宝、抖音商城无异，首页包含了商品分类栏以及品牌补贴、超级秒杀和品牌特卖等频道。今年“双11”期间，快手将力推短视频、直播间、店铺、商城这一全新的商家经营矩阵。

推动货架电商发展，可补充直播电商的不足。货架电商的优势在于搜索的便捷性和产品的丰富，可满足确定性需求的用户；直播电商主要满足非确定性消费需求，其优势在于动态的解说展示及购物指导，消费者会与主播产生信任关系。对于非确定性消费需求，消费者被短视频和直播激发消费需求、进行下单。

快手大搞“信任电商”体系后，已有用户养成快手下单习惯，通过提高商城入口曝光，可有效提升用户复购率。

另一方面，为商城设立超级入口，也将进一步提升电商用户的渗透率，有助于提升平台的收入。

五、电商闭环与独立电商之争 内容平台在APP内电商闭环与搭建独立电商孰是孰非？目前并无定论。

但抖音盒子即将暂停运营，去年12月推出时，曾被寄予厚望：一来，随着抖音电商业务快速扩大，商业化必然会对内容生态有所侵蚀，抖音盒子是消解这种矛盾的一种尝试；二来，作为一个独立电商APP，它也被寄望能从外部获取新的流量。

不过，在“降本增效”的大环境下，抖音盒子业务表现平平，短时间内很难看到转机，投入还很大。而且盒子上线将近一年，并未对抖音主端拉来新增，关联性不强。

而且抖音盒子定位潮流电商，但当前这条赛道市场容量相当有限，且早已有得物这样的老玩家在前，想要有所突破确有难度。

抖音电商如今在快速布局货架电商，抖音主端也在推“商城”版块，与抖音盒子有功能重合，而且二者上面的商家和商品都还是要从抖音内容生态的流量池中获取用户，才能实现转化变现。但比起抖音盒子，抖音电商明显更为重视内部的“商城”板块。

六、淘宝搜索入口短视频化 淘宝在原有首页短视频和逛逛短视频两种短视频类型下，增加了第三种搜索短视频。

在淘宝APP进行关键词搜索，部分商品不再以图文形式展示，而是直接以短视频的形式出现。且并非是传统商品组成部分的主图短视频，而是和抖快上下滑动体验相似的短视频信息流。

2018年，主图短视频首次进入到淘宝主搜，就是消费者点进商品后，代替原本头图位置展示的短视频。但它和此次进入到主搜的短视频信息流并不相同。

传统的展示界面里，商品是展示的焦点：“头图/主图短视频+名称+价格+店名”，组成了一个最基础的销售单元；但现在，短视频信息流穿插其间：短视频+商品链接，组成新的销售单元。这类视频区别于纯产品展示的商品图，更像是种草、安利商品的内容。

如今，在手淘搜索关键词“T恤”，你可能会刷到一个跳舞的姑娘——某家旗舰店发布的“一起跳舞吧”短视频。也可能刷到“精致女孩如何风格多变”等为主题的短视频内容。

不同于抖快，淘宝上每一个视频内容都挂着宝贝链接。

点击跳转后的消费体验有两种：一种是上下滑动，和抖快相似，左下角有商品链接；一种是类似图文时代卡片式的左右滑动，店铺订阅的标志更明显。

这也就意味着在同样的入口下，使用短视频展示商品的商家会比其他商家多出一个获取流量的途径。

打开淘宝的消费者一般是有明确消费目的的刚需购物群体，淘宝将搜索入口的短视频化-电商平台的关键词搜索对应了消费者的明确的购物目的。从流量层面提升了短视频内容消费的权重，将其与搜索结合，沉浸式内容消费有了明确的购物目的指引与更好的筛选价值，能更好得提升交易效率。

在之前，淘宝逛逛与大淘宝体系内的货架电商相互独立，关联性不强，如今从搜索入口的切入，在某种程度上打通了其货架电商与内容电商的隔阂，将两者更好得融合了起来。

目前想要发搜索短视频可以通过淘宝天猫商家后台“千牛”。千牛官方协议显示“根据内容质量、设置权限、用户阅读习惯等因素同步发布至公域渠道，包括但不限于淘宝平台的主搜、有好货等渠道。”视频内容方面，可以是“单品评测、开箱、试用、分享等多种形式”但必须“挂载提及的商品”。

可见，淘宝搜索也开始从“交易”走向“消费”，这也是电商平台内容化最为核心的一点，但交易是一个事件，消费则是一种状态，升级消费路径上的体验，用“逛”来满足“没有明确目标”的用户，愈发重要。

京东和拼多多同样也在发力内容，京东设立“逛”专区，开始扶持短视频达人，拼多多首页底部增加了“多多视频”一栏。

不过传统电商盈利模式其实是更多依赖货架电商的流量竞价收费模式（淘宝直通车广告），短视频模式是否会冲击到原有的商业模式，还有待观察。

从整体看，淘宝电商与抖音电商愈来愈殊途同归。当前的淘宝已是集内容消费、种草、分享、交易为一体的内容消费平台，恰如抖快这类短视频平台越来越注重内循环-将平台内的公私域的流量经营、人群经营与货品经营融为一体，实现平台内的内容种草—养草—拔草商业闭环。

在过去，传统电商倾向于引导商家站外种草，站内消费，但目前短视频作为核心入口的意义，就是将用户的种草习惯引导到站内，更深入培育种草经济。

抖音也在融合传统电商的打法，不仅要「货找人」，还要「人找货」，从去中心化经营向中心化经营场景靠拢——通过「短视频-直播-商城-搜索-店铺」的中心场布局打造泛商城玩法，让搜索为商城和店铺导流，与品牌连接，提升经营转化。同时淘宝抖音也都在强化营销工具对引流拉新与商家经营的作用。

作者：一步两步，微信公众号：瞎学瞎看

本文由 @一步两步 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

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

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

{{{path> 赞赏

最近在学习大厂设计系统时，发现了 WCAG 标准。这个概念之前也听说过，但是没怎么当回事儿，这次沉下心来了解了一番，发现里面包含了不少科学的方法。我觉得 B 端设计师还是有必要了解下这块内容。

最近在学习大厂设计系统时，发现了 WCAG 标准。这个概念之前也听说过，但是没怎么当回事儿，这次沉下心来了解了一番，发现里面包含了不少科学的方法。我觉得 B 端设计师还是有必要了解下这块内容。

相关神器推荐：

检查网页配色是否符合WCAG规范的神器「Color review」 本文要推荐的「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规范的在线工具，也能协助使用者找出看起来好看、又适合每个人的色彩组合， Color.review 无需下载软件或应用程序、直接以浏览器开启就能使用，产生对应的分享链接来将检测结果提供给其他人

阅读文章 >

一、什么是 WCAG Web Content Accessibility Guideline（Web 内容无障碍指南）是业界公认的指导标准，简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本，并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。

1. 4 项原则 WCAG 解释了如何让残障人士更容易访问 Web 内容。该标准有 12-13 条准则，分为 4 项原则：

Perceivable（可感知）

信息和用户界面组件必须以用户可以感知的方式呈现，用户必须能够感知所呈现的信息（不能对他们的所有感官都不见）

Operable（可操作）

用户界面组件和导航必须是可操作的。用户必须能够操作界面（界面不能要求用户无法执行的交互）

Understandable（可理解）

必须让用户能够理解信息以及用户界面的操作（内容或操作不能超出他们的理解）

Robust（稳定耐用）

内容必须足够强的适应性，可以兼容包括辅助技术在内的各种用户工具。不管技术的进步，还是用户工具升级，内容都应该保持可访问性。

2. 成功标准 WCAG 是面向残障人士的，包含了视力、听力、运动和智力等诸多方面的标准条例。但是符合该指南的产品必然有助于用户体验的提升。

每条准则都有可测试的成功标准，分为三个级别：A（最低），AA，AAA 级（最高）。

我们在 B 端产品设计中，可以参考颜色对比度的无障碍标准，提升界面信息的易读性。

产品设计阶段和实际的使用场景还是有差异的，同一个颜色在不同终端设备受到色域、分辨率等影响，显示效果也不相同。用户的实际使用环境与设计师的办公环境也可能有很大不同。如果用户存在视觉障碍，对设计的要求将会更加苛刻。

二、颜色对比度的无障碍标准 虽然很多可用性原则都提到易读性，但是到底该如何做呢？或许每个设计师都有自己的答案。不过设计师不能仅从自身出发，而需要一个相对科学的标准，去检验颜色对比度的可读性。

WCAG 中就有专门的颜色对比度要求。

颜色对比度是基于亮度或发光强度，计算出来的两种颜色之间的差异程度，对比范围为 1-21。通常写为 1:1 或 21:1，颜色中对比度的最大值为 21:1（纯黑与纯白）。两个数字之间的比值越高，颜色的相对亮度就越大。

为了满足不同场景下的需要，WCAG 制定了两条色彩对比度条例，对比度最低标准（AA 级）和对比度增强标准（AAA 级）。

1. AA 级对比度要求如下：

文本和文本图像的视觉呈现具有至少 4.5:1 的对比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本图像的对比度至少为 3：1

2. AAA 级对比度要求更高，要求如下：

文本和文本图像的视觉呈现具有至少 7:1 的对比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本图像的对比度至少为 4.5：1

参考 Material Design 和 iOS 人机交互规范，基本都是以满足 AA 级标准为主。特殊情况下要求满足 AAA 级标准。

当然上述的两条标准并不是对所有页面文本信息的要求。以下情况的文本，并无最低对比度限制：

未激活的（inactive）用户界面组件的一部分（按钮或菜单选项）。 表单字段的占位符 (placeholder) 或 ghost text。 只是纯粹的装饰。 对任何人都不可见的内容。 文本作为「包含其他重要视觉内容图片」的一部分。 文本作为 logo 或品牌名称的一部分 三、颜色对比度 标准有了，我们该如何确定我们选择的颜色对比度呢？

通过阅读性能评估，色相和饱和度对可读性的影响其实很小，甚至没有。真正影响阅读体验的是颜色亮度造成的对比度。所以在 WCAG 标准中，颜色对比度计算公式是基于相对亮度的。

公式如下：

对比度 = （L1 + 0.05）/（L2 + 0.05）。「L 指颜色的相对亮度 」

相对亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中 R, G , B 取值为：若 XsRGB <= 0.03928 则 X = XsRGB/12.92；否则 X = ((XsRGB+0.055)/1.055) ^ 2.4。

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值为 XsRGB = X8bit/255「X8bit 指 R、G、B 通道各自在 8 位/通道下 0-255 的取值」。

这个公式很复杂，我也没怎么搞懂。在实际应用过程，设计师可以选择方便的色彩对比工具，测试对比度是否满足 WCAG 标准。

推荐两个工具

工具一：WebAIM’s Color Contrast Checker

这是一款可以对比度是计算工具。只要设定好前景色、背景色，自动计算出对比度结果，并判定是否满足 WCAG 的标准。

地址： https://webaim.org/resources/contrastchecker/

工具二：Color Tool

Color Tool 是 Google Material Design 提供的一款 配色 工具，基于 WCAG 标准，自动计算出黑色文本在选定背景色上的最小透明度数值。

地址： https://material.io/resources/color

根据以上标准，我们借用 Material Design 的颜色对比度工具，可以得出在白色背景下，符合 WCAG 标准的颜色范围：

大文本可以用的最浅纯灰色是#949494 普通字本可以用的最浅纯灰色是#757575

我们在做基础规范时，就要考虑到 WCAG 标准，将色彩控制在可用性标准之内，这样才能保证产品的阅读体验。

写在最后 B 端产品设计时，一个很重要的原则就是清晰，既要能够清楚地传递信息；还要保证界面的易读性。设计评审时，我们听到比较多的就是“界面没有层次性”。在我看来，这个层次性就是界面的整体对比度。重要信息是否突出显示，次要信息是否可读。

有些设计师在大面积白色背景上，信息整体平铺，没有通过一定的设计手法进行内容空间划分，第一眼效果就是信息的堆砌，毫无层次感。加之文本用色的随意性，最终导致页面就是“惨白一片”。

所以设计师需要借助科学的方法修正自我的认知偏差，这样才能保证个人的成长和设计的有效性。

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

欢迎关注作者微信公众号：「子牧UXD」

他是活跃在湖北设计圈的大学老师，喜欢做海报，为形形色色的活动做海报，他说喜欢用这样的方式去读懂人，学做人。他就是有着设计师与高校教师双重身份，喜欢用海报讲故事的武汉工商学院艺术与设计学院副院长——何轩。一、用海报读懂人生10 月初的一天，在黄鹤楼白云阁美术馆里，我指着他设计的海报展主视觉，问他：“你的设计让人陌生...

他是活跃在湖北设计圈的大学老师，喜欢做海报，为形形色色的活动做海报，他说喜欢用这样的方式去读懂人，学做人。他就是有着设计师与高校教师双重身份，喜欢用海报讲故事的武汉工商学院艺术与设计学院副院长—— 何轩 。

一、用海报读懂人生 10 月初的一天，在黄鹤楼白云阁美术馆里，我指着他设计的海报展主视觉，问他：“你的设计让人陌生，却又似曾相识，这种方式你还要坚持多久？”

何轩凑近了自己的作品，开启“上课模式”式，回答道：“创意就是把熟悉的东西变得陌生，我试图用更多的方式让事物自己去讲故事。比如黄鹤楼，或许它作为千年古楼，也想让自己像乐高积木一样说话，我仅仅是用特别的立场让事物呈现截然不同的语境。”

而那幅海报正是黄鹤楼 1800 年历史的主题海报邀请展的主视觉海报，当时正在黄鹤楼公园展出。

黄鹤楼 1800 年主题海报邀请展

翻开何轩的履历，大大小小各种比赛的获奖经历不胜枚举。第六届城市运动会在武汉举办时，何轩设计的吉祥物海报成为官方宣传物料，投放到了武汉三镇的街头。那年是 2007 年，也是他从事 海报设计 和教育生涯的元年。十五年弹指一挥间，但对何轩而言，创意设计与艺术教育这两件事都是他深爱并始终愿意为之付出努力的。

中华人民共和国第六届城市运动会海报之一，风格较符合当年审美潮流

何轩和他的作品一样，丰富且极具思考维度。他把海报设计作为交流的语言，精微的画面层次中充满了对社会观点的剖析。用海报去读懂不同的人和事，将美学与世象呈现在平面之上。很多人说他的海报风格颇具画意，而他认为自己只是在用作品讲故事。

他认为海报是情感的眼睛，是梦想的外化表现 。一出剧目在一千位观众眼里有一千种解读的办法，同样的一张海报在不同的人眼里也有不同的含义。何轩想让海报里成为观看者的感情出口，想让每个人的心里都住进一个哈姆雷特。这需要将自己切换到不同的视角，变成不同的角色，过程很辛苦，但又很奇妙。

交谈中又聊到设计专业的学生在课外需要涉猎的知识，我请他做一些书籍、电影方面的推荐。他非常熟稔地举出《梦的解析》《天工开物》《人类简史》《社会契约论》等一连串的书名，并说“知识面是由不同的聚合体归纳出来的，这种聚合体就是学生面对的各种专业，多看看，用以夯实精神世界以及填充沟通过程中的知识障碍。”

这句话有些抽象，但内涵却在何轩的海报中得到了具象的体现。在他设计的三张同样用城市的场景作为创意蓝本的海报中，一张将建筑变化成梦幻的繁星点点，如同乘坐飞机鸟瞰城市的夜景；一张用数码技术模拟出长江的波涛，将城市建筑与波浪重叠，营造出一幅超自然的汉江揽胜图；最后一张是为字绘中国丛书《字绘香港》设计的海报，他将香港著名的地名设计成店招，让阅读者仿佛漫步于香港街头。

第三届海峡两岸创意创新高峰论坛

武汉设计日首届中国包装创新设计周

丛书《字绘香港》海报

二、用海报拓印回忆 在众多城市文化活动的主视觉设计上，何轩一直保持着自己的见解与风格。合情不合理是上品，合理不合情次之，不合理又次之，合情合理最差，是他一直秉持的设计观念。

“你看到的是云吗？不太像又或许是的？”何轩指着一张海报问我，那是他设计的中国农谷屈家岭文化 IP 全球征集大赛的主视觉。

中国农谷屈家岭文化 IP 全球征集大赛

“当我们看到“云”中镂空出一个“家”字的时候，你会不会回忆起家的影子？而那颗“米”会不会让你想起不论多晚回家，家里都有热饭热菜等你？“粮”谐音“娘”，累得时候就回家，这就是屈家岭的历史。在这里发现了五千年前的炭化黍米，证明了长江流域的先民们曾在这里孕育了芸芸众生。我们寄意于邮票，将本届大赛的优秀成果传承给下一个五千年。”

简短的几句描述，让我茅塞顿开，原来他的海报里，每一个元素都有特殊的维度。我不禁问道：“你做这幅海报的时候，去过屈家岭吗？如果没有去过，这样做出来的设计，会得到更多人理解吗？”他没有直接回答，而是反问我说：“你想过家吗？你想不想吃爸妈做的饭菜？”

但不及我思考回答，他又道：“一幅作品勾起你内心里一丝回忆，激起你心底一片涟漪，这幅海报的使命就已经达成。”

于是我尝试从这个设计观念的角度，解读了他的作品《又十年》。那是他为靳埭强设计奖十周年海报邀请展创作的海报，画面中央是一个中国特色的泡菜坛子，用汉字笔画镂空后投射出星光点点，是不是靳埭强设计奖的下一个十年将继续照耀每一位设计人的意思？

听完我的看法，何轩连连赞许，说：“海报是我留存记忆的方法，泡菜坛子是我对陪伴的物化。赠送泡菜是亲人之间在物资匮乏的年代最好的亲情表达式，我第一次玩陶就做了这个笔画镂空的坛子，它和激励我大学四年的靳埭强设计奖一样，让人振奋和温暖。”

靳埭强设计奖十周年主题海报邀请展

“不久前，《字绘中国》这本书出版了，书里用绘画的方式呈现出中国各省的风土人情，是一本集城市文化传播、旅游纪念的书籍。受主编徐郑冰的委托，我设计了书的封面。那一刻对于泡菜坛子的回忆被调动起来，那干脆就用一个青花瓷盘总结这本书。因为「瓷」就是「CHINA」，中国人的团圆不就是坐在一起做很多顿饭吗？封面还特意做了开窗处理，那是从窗户外看到客厅里热气腾腾的烟火气。”

丛书《字绘香港》封面（海报）

何轩说，创作的忘我程度，来自让自己一人分饰多个角色——设计者、评委、上司以及客户。这四种角色的切换需要设计师调动回忆，是与不同的立场产生同理心的过程。提高设计的准确率就靠这些。

2020 年，我曾读过他的专著《园创：武汉城市公园文化创建》，书上详细记载了他与伙伴们为武汉七座城市公园更新标志的过程。100 个问答形式，将设计项目中的多个角色观点表现得淋漓尽致。《园创：武汉城市公园文化创建》这本书还成为 2021 年武汉市社会科学的后期资助项目，一个商业项目能够变成一部学术著作，这种城市文化的传播方式让人称奇。

在提到其中武汉中山公园的标志设计时，何轩感慨颇深。他说小时候就在中山公园玩，上小学在这里春游过，上中学时吃完中饭也常常去公园转一圈。而正是因为拥有这些经历和回忆，何轩深刻透彻地理解了为什么中山公园在历次修缮中，总是采用修旧如旧的策略。

《园创：武汉城市公园文化创建》书籍设计

三、生活是平面的，卷起来才精彩 何轩的设计启蒙是从大二那年开始的。那年他买了电脑，用它完成了专业作业和业余时接的设计单子；那年他也拥有了自己的一台佳能的彩色打印机，是用自己大学的第一笔奖学金买的。何轩用它来打印作业，出给甲方看的稿子也更方便了。

时间到了大三，他完成了武汉市旅游节主视觉，还跑到江汉路对着“煮热干面”的雕塑写生，然后传到电脑上画成电子素材，为之后的设计做积累。当时正是跟着沈冬上课，老师觉得他做事很踏实，就把他带在身边做项目。

那是收获颇丰的一年，何轩手里积累了武钢宾馆雕塑设计、武汉市旅游节 VI 设计、武汉市育才二小 VI 设计、江岸区教育局 VI 设计、《王心耀艺术》书籍设计等十余项设计项目。

大四毕业后，何轩选择留校读“大五”。用这个词是因为教书后很多大赛他已经不能参加了，于是开始指导学生去拿奖。2006 年，他指导学生获得了全国大学生广告设计大赛全国金奖。接下来的十年里，他指导获得等级奖的作品近百余件，成为了名副其实的“奖皇”。

全国大学生广告设计大赛全国金奖

2009 年，他在准备研究生面试的时候，做了一本精美的作品集，叫《轩轾》——指高低轻重任由评说之意。当时的面试官翻完作品集以后，对其他几位评委说“大家看看还有什么问题？”没有评委说什么，于是他就这样被录取了。

直到那时何轩的人生似乎还是平静如常，但在 6 年后的 2015 年，何轩开始了职业的第一卷：他离开了工作了十年的原单位，加入了武汉工商学院，并在 2 年后成为该校艺术与设计学院的副院长。

参与城市文化传播的研究之路也是从那个时候开始的。湖北省台湾事务办公室主办的海峡两岸创意创新高峰论坛主视觉他一做就是五届，还有中国当代学院水彩名家邀请展、中国高等教育学会主办的全国艺术与设计学院院长论、全国美育与设计教育峰会、故宫博物院上任院长单霁翔武汉讲座、黄鹤杯工业设计大赛、刘小康先生领衔的汉港两地设计智库高峰论坛、第十九届武汉国际车展…… 武汉的很多文化、学术和商业活动的主视觉都是他负责的。

五届海峡两岸创意创新高峰论坛海报

武汉大学万林艺术博物馆主办的中国当代学院水彩名家邀请展

中国高等教育学会主办的全国艺术与设计学院院长论坛

全国美育与设计教育峰会

故宫博物院上任院长单霁翔武汉讲座

黄鹤杯工业设计大赛

汉港两地设计智库高峰论坛

第十九届武汉国际车展

2019 年武汉疫情封城期间，何轩临危受命制作了雷神山医院的铭牌，还将当时的工作照片做成了海报《感谢你们拼过命》。画面中的两个主角是他的学生，封城封不住他们参与抗疫的热烈之心，于是何轩决定要为他的学生做一幅海报，把奋战在抗击疫情一线的人们都画出来。他说有了他们，武汉不害怕。

感谢你们拼过命

四、艺术教育是要让人幸福 与其他学科相比，从事艺术教育的教室多少会有些“个性”，这一点在何轩身上得到了很好的体现。当然，在对待课堂的态度和认真钻研教学的劲头方面艺术类的教师并没有什么差别。

第一次为大一学生准备《世界现代设计史》的课教学材料时，何轩特意把陈奕迅的《K 歌之王》重新填词修改，还在课堂上为大家演唱，让学生们对史论课的有了全新且深刻的理解。

他认为教育是帮助一个孩子在未来的生活中更成功地寻求自己的幸福，而这条路上会遇到很多阻碍。

最常见的阻碍之一就是“伪帮助”。在中国的教育里，不按规则办事可能被视为失败者，但是何轩说：“帮助是启发学生向善，而不是嘴里说我是为你好。”

第八届大广赛时，面对一位准备设计减肥药的平面广告的学生，何轩问她有没有想过其他的选题，比如自己的父母最需要强壮骨骼的产品。受到启发后那位学生改做与老年人营养品有关的设计，画面里是不倒翁在各种场合的状态——不踉跄，不摔倒，而这正是老人最大的安全感。这个理念最终被评委认可，那位学生的平面广告作品最后也获得了大广赛的全国银奖。

全国大学生广告设计大赛全国银奖

而后的阻碍是“忘了授业”。大学只顾着传道却忘了授业，而且还把解惑的责任推给了企业。学生被动改行，被安排。

“老师不会赚钱怎么教会学生赚钱？”这是何轩的大胆之言。2014 年为学校设计校庆礼品是，何轩专门买了一台多功能木工一体机，每天研究并在朋友圈发晒成果。有个同样对木工感兴趣的学生看到后主动找到他，两人便一同切磋起木工工艺技巧。后来那个学生的毕业设计也是跟着何轩做的，再后来那个同学的木工作品获得了楚天杯首届工业设计大奖，拿了 5 万元奖金。"如果每个大学生毕业条件里多一个拿大奖的要求，估计中国的教育体系在毕业这一环节就算圆满了”，这是何轩从中发出的感慨。

畅想公园产品设计

阻碍之三是“偏执的寻求”。何轩认为设计者不该一直仰望所谓的“别人家的孩子”，而是应该努力成为那个优秀的人，做到每一次都比过去的自己更优秀。米兰设计周中国高校设计学科师生优秀作品展主视觉的设计过程，就是一个很好的例子。

米兰高校展的主视觉初稿是专升本的一个学生做的，在那一稿的海报里连 design 这个英文单词都拼错了。于是何轩要求她把一种风格做出 10 种不同的变化，结果是做得一次比一次好。后来这 10 个蓝本被何轩进一步优化提升，最终有 3 张海报分别成为了三届米兰高校展的主视觉，那个同学求职简历里也多了一个极具分量的成果。

三届米兰设计周中国高校展主视觉

尾声但不是结束 何轩刚刚参加的工作的时候是 22 岁，他给自己教的第一届学生曾说过，一个理想的职业人生，应该是 20 岁厚积薄发、30 岁初露锋芒、40 岁中流砥柱、50 岁慢慢成为年轻人的偶像。

而这样理想的状态是建立在骑士精神、契约精神之上的。作为 40 岁的大学老师，何轩也在时刻反省，寻求自身在专业领域和精神层面的再次起飞。面对这位脑袋里装着一座游乐园的大学老师，我们也可以拭目以待。

更多设计师访谈回顾：

一个产品人的妄念与懦弱：专访 flomo 创始人刘少楠 刘少楠有着一份丰富的职业履历。

阅读文章 >

最近在使用 Figma 搭建组件库，期间也遇到了一些困难：如何搭建变体、如何精简变体、搭建的组件如何更易用等，后面通过上网看视频教程、拆解大厂设计系统组件结构，再经过自己的仔细琢磨与尝试，总结了一些搭建组件和变体的方法技巧，其中包含一些隐藏功能，属于进阶版，目标是让搭建过程更高效易懂、设计协作更易用。基础教程：用...

最近在使用 Figma 搭建组件库，期间也遇到了一些困难：如何搭建变体、如何精简变体、搭建的组件如何更易用等，后面通过上网看视频教程、拆解大厂设计系统组件结构，再经过自己的仔细琢磨与尝试，总结了一些搭建组件和变体的方法技巧，其中包含一些隐藏功能，属于进阶版，目标是让搭建过程更高效易懂、设计协作更易用。

基础教程：

用四大章节，帮你10分钟学会 Figma 组件库的搭建和使用 背景 1. 为什么需要 Figma 组件库 当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。

阅读文章 >

一、组件嵌套 组件嵌套逻辑可以使用在按钮组件上面，比如同一个尺寸不同样式的按钮，建立一个按钮主组件，使用它的实例建立其他的按钮主组件，等于其他的按钮主组件相对第一个的按钮主组件就是实例。所以当我们想要调整按钮尺寸、圆角、字号，只需要对第一个按钮主组件进行调整即可，其他实例主组件也会同步更新。

二、批量命名变体属性和值 变体需要设定属性（Property）和值（Values），使组件更接近前端代码。现有组件转化成变体，为了准确转换，组件命名遵循结构：componentName/value1/value2，第一个/之前的文字将成为变体组件的名称，其他/将创建一个新的属性，然后将属性作为一个值添加。

创建变体前，批量选中组件，按 command+r，可以对组件进行批量命名。注意，如果想在名称后面接着命名，需要点击[当前按钮]，输入框内容会变成$&，这时输入就可以了。

还有一种方式，先建立变体然后再新建属性和值，批量选择变体内的组件选择对应值，这样的方式也比较高效。

三、交换实例属性（Swap instance property）

操作方式：选择组件内的图标实例，点击应用实例交换属性，填写属性名称就可以了。

四、文字属性（Text property） 创建一个具有命名值的文字属性，就像代码组件通常具有的那样，例如：label=“内容文本”，更贴近开发逻辑。并且设计师更新组件中的文本，而无需深入到子图层中。

操作方式：选择组件内的文本，点击创建文字属性，填写属性名称就可以了。

五、布尔属性（Boolean property） 布尔属性允许在组件内添加是否可见的元素，并在其属性上有开关切换的值，无需制作其他变体，可以精简组件数量，减少文件体积。比如按钮样式有图标和无图标，这时我们一个组件就可以搞定了。

操作方式：选择组件内的图层，在图层处选择创建组件属性，填写属性名称和选择开关值。

六、公开嵌套实例属性（Nested instances property） 这个功能还在测试中，变体里的嵌套实例属性，允许直接从属性面板编辑它们，无需导航到嵌套实例图层。比如标题栏组件，按布局可以分为：左侧、标题、右侧三个模块，每个模块都建立了不同的变体，然后集合在一个标题栏组件中，我们可以在组件属性面板编辑所有模块。

操作方式：首先要到设置-帐号里点击对应功能的开关，这个功能才能正常使用。

选择嵌套实例的变体，新建属性- Nested instances(嵌套实例)，勾选对应的嵌套实例属性，这样我们就可以在变体的属性面板选择嵌套实例的属性和值了。注意，嵌套的实例需要有可以切换的值，新建属性面板才能看到 Nested instances 按钮。

七、应用：搭建对话框组件 可以看下初期的对话框组件，类型样式都是平铺出来，通过属性和值来建立变体，组件数量很多，文件冗杂，组合使用不是很灵活。

因此我进行了优化处理。

首先，考虑到层级太多，根据使用场景分为两类：基础对话框、引导对话框。

接着按原子理论梳理了单个对话框的布局结构，可以分为内容层和操作层。内容层元素拆解：文本（是否有副标题）、图标（大、小尺寸）、配图（是否有关闭 icon）、输入框（是否显示）、选择器（是否显示）；操作层元素拆解：文字按钮（横向/主按钮、横向主次按钮、竖向/主次按钮、竖向/主次次按钮）、填充按钮（主按钮、主次按钮）。

明确建立变体思路，配图、输入框、选择器使用布尔属性，文本、图标、文字按钮、填充按钮建立组件，使用内部属性外置，之后进行实例组合，就达到了精简组件的效果，都在一级属性栏切换，更易用。

八、分割线可以用形状或 frame 描边 比如列表的下分割线，我们可以画一个 1px 的矩形，再通过布尔属性建立开关；好处就是实际使用时可以选择隐藏或显示分割线。

如果实际调用不需要隐藏分割线，那么，我们可以在 frame 的描边，选择下描边 1px，跟随 frame 属性，减少图层，避免冗杂。

分割线规范：移动端的设计稿如果是 1 倍图，那么列表分割线应该是 0.5px，因为设备基本都是@2x 或@3x 的，开发写的分割线代码都是 1px，不会跟随设备倍率变化的，0.5px 在 1 倍图的设计稿上更符合实际预览效果。像 iOS Design Guidelines 文件也是这样处理。

九、一些小技巧 主组件删除了，复制的组件还在，选中复制的组件，在右侧面板可以还原主组件的 主组件不能变为 frame，实例才可以 直接拖变体内的组件出来，就是调用的变体实例 避免组件平铺冗杂，文件体积过大，善用布尔属性或公开嵌套实例属性 变体属性和值命名要易懂易理解，命名和元素要有结构对应关系，有一定规律性，避免词语过多太复杂 先建立变体，然后对变体组件里的元素使用布尔属性，元素属性跟随组件，可以外置于变体属性。 内存出现使用警报的常驻提示，主要原因是组件图层数量过多或者存在许多隐藏的组件；我们可以通过使用布尔属性减少设计系统中所需的变体和层的数量，进而提高文件的内存使用率。如果文件包含大量页面或大量高分辨率图像，也有可能会遇到性能或内存问题。因此，组件库的资产管理要有一定的规范化。 团队库搭建好一份深浅模式变量库，使用 figma 的插件「Appearance」可以一键变色，需要在插件点击保存变量到云端，然后到设计文件上选择画板切换深浅模式即可，亲测可用。 总结 以上就是近期使用 figma 搭建组件和变体的一些感悟，好用的组件和变体才能提高设计师的使用效率，当然需要前期搭建过程的规范性和统一性。如果大家有什么好的点子，也欢迎在下方评论交流。

 

欢迎关注作者微信公众号：「ALEI的设计思考」

最近在学习大厂设计系统时，发现了 WCAG 标准。这个概念之前也听说过，但是没怎么当回事儿，这次沉下心来了解了一番，发现里面包含了不少科学的方法。我觉得 B 端设计师还是有必要了解下这块内容。

最近在学习大厂设计系统时，发现了 WCAG 标准。这个概念之前也听说过，但是没怎么当回事儿，这次沉下心来了解了一番，发现里面包含了不少科学的方法。我觉得 B 端设计师还是有必要了解下这块内容。

相关神器推荐：

检查网页配色是否符合WCAG规范的神器「Color review」 本文要推荐的「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规范的在线工具，也能协助使用者找出看起来好看、又适合每个人的色彩组合， Color.review 无需下载软件或应用程序、直接以浏览器开启就能使用，产生对应的分享链接来将检测结果提供给其他人

阅读文章 >

一、什么是 WCAG Web Content Accessibility Guideline（Web 内容无障碍指南）是业界公认的指导标准，简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本，并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。

1. 4 项原则 WCAG 解释了如何让残障人士更容易访问 Web 内容。该标准有 12-13 条准则，分为 4 项原则：

Perceivable（可感知）

信息和用户界面组件必须以用户可以感知的方式呈现，用户必须能够感知所呈现的信息（不能对他们的所有感官都不见）

Operable（可操作）

用户界面组件和导航必须是可操作的。用户必须能够操作界面（界面不能要求用户无法执行的交互）

Understandable（可理解）

必须让用户能够理解信息以及用户界面的操作（内容或操作不能超出他们的理解）

Robust（稳定耐用）

内容必须足够强的适应性，可以兼容包括辅助技术在内的各种用户工具。不管技术的进步，还是用户工具升级，内容都应该保持可访问性。

2. 成功标准 WCAG 是面向残障人士的，包含了视力、听力、运动和智力等诸多方面的标准条例。但是符合该指南的产品必然有助于用户体验的提升。

每条准则都有可测试的成功标准，分为三个级别：A（最低），AA，AAA 级（最高）。

我们在 B 端产品设计中，可以参考颜色对比度的无障碍标准，提升界面信息的易读性。

产品设计阶段和实际的使用场景还是有差异的，同一个颜色在不同终端设备受到色域、分辨率等影响，显示效果也不相同。用户的实际使用环境与设计师的办公环境也可能有很大不同。如果用户存在视觉障碍，对设计的要求将会更加苛刻。

二、颜色对比度的无障碍标准 虽然很多可用性原则都提到易读性，但是到底该如何做呢？或许每个设计师都有自己的答案。不过设计师不能仅从自身出发，而需要一个相对科学的标准，去检验颜色对比度的可读性。

WCAG 中就有专门的颜色对比度要求。

颜色对比度是基于亮度或发光强度，计算出来的两种颜色之间的差异程度，对比范围为 1-21。通常写为 1:1 或 21:1，颜色中对比度的最大值为 21:1（纯黑与纯白）。两个数字之间的比值越高，颜色的相对亮度就越大。

为了满足不同场景下的需要，WCAG 制定了两条色彩对比度条例，对比度最低标准（AA 级）和对比度增强标准（AAA 级）。

1. AA 级对比度要求如下：

文本和文本图像的视觉呈现具有至少 4.5:1 的对比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本图像的对比度至少为 3：1

2. AAA 级对比度要求更高，要求如下：

文本和文本图像的视觉呈现具有至少 7:1 的对比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本图像的对比度至少为 4.5：1

参考 Material Design 和 iOS 人机交互规范，基本都是以满足 AA 级标准为主。特殊情况下要求满足 AAA 级标准。

当然上述的两条标准并不是对所有页面文本信息的要求。以下情况的文本，并无最低对比度限制：

未激活的（inactive）用户界面组件的一部分（按钮或菜单选项）。 表单字段的占位符 (placeholder) 或 ghost text。 只是纯粹的装饰。 对任何人都不可见的内容。 文本作为「包含其他重要视觉内容图片」的一部分。 文本作为 logo 或品牌名称的一部分 三、颜色对比度 标准有了，我们该如何确定我们选择的颜色对比度呢？

通过阅读性能评估，色相和饱和度对可读性的影响其实很小，甚至没有。真正影响阅读体验的是颜色亮度造成的对比度。所以在 WCAG 标准中，颜色对比度计算公式是基于相对亮度的。

公式如下：

对比度 = （L1 + 0.05）/（L2 + 0.05）。「L 指颜色的相对亮度 」

相对亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中 R, G , B 取值为：若 XsRGB <= 0.03928 则 X = XsRGB/12.92；否则 X = ((XsRGB+0.055)/1.055) ^ 2.4。

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值为 XsRGB = X8bit/255「X8bit 指 R、G、B 通道各自在 8 位/通道下 0-255 的取值」。

这个公式很复杂，我也没怎么搞懂。在实际应用过程，设计师可以选择方便的色彩对比工具，测试对比度是否满足 WCAG 标准。

推荐两个工具

工具一：WebAIM’s Color Contrast Checker

这是一款可以对比度是计算工具。只要设定好前景色、背景色，自动计算出对比度结果，并判定是否满足 WCAG 的标准。

地址： https://webaim.org/resources/contrastchecker/

工具二：Color Tool

Color Tool 是 Google Material Design 提供的一款 配色 工具，基于 WCAG 标准，自动计算出黑色文本在选定背景色上的最小透明度数值。

地址： https://material.io/resources/color

根据以上标准，我们借用 Material Design 的颜色对比度工具，可以得出在白色背景下，符合 WCAG 标准的颜色范围：

大文本可以用的最浅纯灰色是#949494 普通字本可以用的最浅纯灰色是#757575

我们在做基础规范时，就要考虑到 WCAG 标准，将色彩控制在可用性标准之内，这样才能保证产品的阅读体验。

写在最后 B 端产品设计时，一个很重要的原则就是清晰，既要能够清楚地传递信息；还要保证界面的易读性。设计评审时，我们听到比较多的就是“界面没有层次性”。在我看来，这个层次性就是界面的整体对比度。重要信息是否突出显示，次要信息是否可读。

有些设计师在大面积白色背景上，信息整体平铺，没有通过一定的设计手法进行内容空间划分，第一眼效果就是信息的堆砌，毫无层次感。加之文本用色的随意性，最终导致页面就是“惨白一片”。

所以设计师需要借助科学的方法修正自我的认知偏差，这样才能保证个人的成长和设计的有效性。

配色被说不好看？高手这160种配色方案直接拿去用！ 颜色可以在很大程度上影响一件设计作品的调性和美观性，要想抓准一件设计作品的调性，选择一个合适的色彩搭配组合尤为关键，为此，葱爷花两天时间整理了 19 大设计调性，多达 160 种配色方案，赶紧收藏起来以备不时之需吧。

阅读文章 >

欢迎关注作者微信公众号：「子牧UXD」

最近在使用 Figma 搭建组件库，期间也遇到了一些困难：如何搭建变体、如何精简变体、搭建的组件如何更易用等，后面通过上网看视频教程、拆解大厂设计系统组件结构，再经过自己的仔细琢磨与尝试，总结了一些搭建组件和变体的方法技巧，其中包含一些隐藏功能，属于进阶版，目标是让搭建过程更高效易懂、设计协作更易用。基础教程：用...

最近在使用 Figma 搭建组件库，期间也遇到了一些困难：如何搭建变体、如何精简变体、搭建的组件如何更易用等，后面通过上网看视频教程、拆解大厂设计系统组件结构，再经过自己的仔细琢磨与尝试，总结了一些搭建组件和变体的方法技巧，其中包含一些隐藏功能，属于进阶版，目标是让搭建过程更高效易懂、设计协作更易用。

基础教程：

用四大章节，帮你10分钟学会 Figma 组件库的搭建和使用 背景 1. 为什么需要 Figma 组件库 当我们在做设计稿的时候，例如做一个按钮，如果没有做成可复用的组件，那后面在其他模块要用到按钮的地方可能又需要重新画，会有很多的重复劳动。

阅读文章 >

一、组件嵌套 组件嵌套逻辑可以使用在按钮组件上面，比如同一个尺寸不同样式的按钮，建立一个按钮主组件，使用它的实例建立其他的按钮主组件，等于其他的按钮主组件相对第一个的按钮主组件就是实例。所以当我们想要调整按钮尺寸、圆角、字号，只需要对第一个按钮主组件进行调整即可，其他实例主组件也会同步更新。

二、批量命名变体属性和值 变体需要设定属性（Property）和值（Values），使组件更接近前端代码。现有组件转化成变体，为了准确转换，组件命名遵循结构：componentName/value1/value2，第一个/之前的文字将成为变体组件的名称，其他/将创建一个新的属性，然后将属性作为一个值添加。

创建变体前，批量选中组件，按 command+r，可以对组件进行批量命名。注意，如果想在名称后面接着命名，需要点击[当前按钮]，输入框内容会变成$&，这时输入就可以了。

还有一种方式，先建立变体然后再新建属性和值，批量选择变体内的组件选择对应值，这样的方式也比较高效。

三、交换实例属性（Swap instance property）

操作方式：选择组件内的图标实例，点击应用实例交换属性，填写属性名称就可以了。

四、文字属性（Text property） 创建一个具有命名值的文字属性，就像代码组件通常具有的那样，例如：label=“内容文本”，更贴近开发逻辑。并且设计师更新组件中的文本，而无需深入到子图层中。

操作方式：选择组件内的文本，点击创建文字属性，填写属性名称就可以了。

五、布尔属性（Boolean property） 布尔属性允许在组件内添加是否可见的元素，并在其属性上有开关切换的值，无需制作其他变体，可以精简组件数量，减少文件体积。比如按钮样式有图标和无图标，这时我们一个组件就可以搞定了。

操作方式：选择组件内的图层，在图层处选择创建组件属性，填写属性名称和选择开关值。

六、公开嵌套实例属性（Nested instances property） 这个功能还在测试中，变体里的嵌套实例属性，允许直接从属性面板编辑它们，无需导航到嵌套实例图层。比如标题栏组件，按布局可以分为：左侧、标题、右侧三个模块，每个模块都建立了不同的变体，然后集合在一个标题栏组件中，我们可以在组件属性面板编辑所有模块。

操作方式：首先要到设置-帐号里点击对应功能的开关，这个功能才能正常使用。

选择嵌套实例的变体，新建属性- Nested instances(嵌套实例)，勾选对应的嵌套实例属性，这样我们就可以在变体的属性面板选择嵌套实例的属性和值了。注意，嵌套的实例需要有可以切换的值，新建属性面板才能看到 Nested instances 按钮。

七、应用：搭建对话框组件 可以看下初期的对话框组件，类型样式都是平铺出来，通过属性和值来建立变体，组件数量很多，文件冗杂，组合使用不是很灵活。

因此我进行了优化处理。

首先，考虑到层级太多，根据使用场景分为两类：基础对话框、引导对话框。

接着按原子理论梳理了单个对话框的布局结构，可以分为内容层和操作层。内容层元素拆解：文本（是否有副标题）、图标（大、小尺寸）、配图（是否有关闭 icon）、输入框（是否显示）、选择器（是否显示）；操作层元素拆解：文字按钮（横向/主按钮、横向主次按钮、竖向/主次按钮、竖向/主次次按钮）、填充按钮（主按钮、主次按钮）。

明确建立变体思路，配图、输入框、选择器使用布尔属性，文本、图标、文字按钮、填充按钮建立组件，使用内部属性外置，之后进行实例组合，就达到了精简组件的效果，都在一级属性栏切换，更易用。

八、分割线可以用形状或 frame 描边 比如列表的下分割线，我们可以画一个 1px 的矩形，再通过布尔属性建立开关；好处就是实际使用时可以选择隐藏或显示分割线。

如果实际调用不需要隐藏分割线，那么，我们可以在 frame 的描边，选择下描边 1px，跟随 frame 属性，减少图层，避免冗杂。

分割线规范：移动端的设计稿如果是 1 倍图，那么列表分割线应该是 0.5px，因为设备基本都是@2x 或@3x 的，开发写的分割线代码都是 1px，不会跟随设备倍率变化的，0.5px 在 1 倍图的设计稿上更符合实际预览效果。像 iOS Design Guidelines 文件也是这样处理。

九、一些小技巧 主组件删除了，复制的组件还在，选中复制的组件，在右侧面板可以还原主组件的 主组件不能变为 frame，实例才可以 直接拖变体内的组件出来，就是调用的变体实例 避免组件平铺冗杂，文件体积过大，善用布尔属性或公开嵌套实例属性 变体属性和值命名要易懂易理解，命名和元素要有结构对应关系，有一定规律性，避免词语过多太复杂 先建立变体，然后对变体组件里的元素使用布尔属性，元素属性跟随组件，可以外置于变体属性。 内存出现使用警报的常驻提示，主要原因是组件图层数量过多或者存在许多隐藏的组件；我们可以通过使用布尔属性减少设计系统中所需的变体和层的数量，进而提高文件的内存使用率。如果文件包含大量页面或大量高分辨率图像，也有可能会遇到性能或内存问题。因此，组件库的资产管理要有一定的规范化。 团队库搭建好一份深浅模式变量库，使用 figma 的插件「Appearance」可以一键变色，需要在插件点击保存变量到云端，然后到设计文件上选择画板切换深浅模式即可，亲测可用。 总结 以上就是近期使用 figma 搭建组件和变体的一些感悟，好用的组件和变体才能提高设计师的使用效率，当然需要前期搭建过程的规范性和统一性。如果大家有什么好的点子，也欢迎在下方评论交流。

 

欢迎关注作者微信公众号：「ALEI的设计思考」

他是活跃在湖北设计圈的大学老师，喜欢做海报，为形形色色的活动做海报，他说喜欢用这样的方式去读懂人，学做人。他就是有着设计师与高校教师双重身份，喜欢用海报讲故事的武汉工商学院艺术与设计学院副院长——何轩。一、用海报读懂人生10 月初的一天，在黄鹤楼白云阁美术馆里，我指着他设计的海报展主视觉，问他：“你的设计让人陌生...

他是活跃在湖北设计圈的大学老师，喜欢做海报，为形形色色的活动做海报，他说喜欢用这样的方式去读懂人，学做人。他就是有着设计师与高校教师双重身份，喜欢用海报讲故事的武汉工商学院艺术与设计学院副院长—— 何轩 。

一、用海报读懂人生 10 月初的一天，在黄鹤楼白云阁美术馆里，我指着他设计的海报展主视觉，问他：“你的设计让人陌生，却又似曾相识，这种方式你还要坚持多久？”

何轩凑近了自己的作品，开启“上课模式”式，回答道：“创意就是把熟悉的东西变得陌生，我试图用更多的方式让事物自己去讲故事。比如黄鹤楼，或许它作为千年古楼，也想让自己像乐高积木一样说话，我仅仅是用特别的立场让事物呈现截然不同的语境。”

而那幅海报正是黄鹤楼 1800 年历史的主题海报邀请展的主视觉海报，当时正在黄鹤楼公园展出。

黄鹤楼 1800 年主题海报邀请展

翻开何轩的履历，大大小小各种比赛的获奖经历不胜枚举。第六届城市运动会在武汉举办时，何轩设计的吉祥物海报成为官方宣传物料，投放到了武汉三镇的街头。那年是 2007 年，也是他从事 海报设计 和教育生涯的元年。十五年弹指一挥间，但对何轩而言，创意设计与艺术教育这两件事都是他深爱并始终愿意为之付出努力的。

中华人民共和国第六届城市运动会海报之一，风格较符合当年审美潮流

何轩和他的作品一样，丰富且极具思考维度。他把海报设计作为交流的语言，精微的画面层次中充满了对社会观点的剖析。用海报去读懂不同的人和事，将美学与世象呈现在平面之上。很多人说他的海报风格颇具画意，而他认为自己只是在用作品讲故事。

他认为海报是情感的眼睛，是梦想的外化表现 。一出剧目在一千位观众眼里有一千种解读的办法，同样的一张海报在不同的人眼里也有不同的含义。何轩想让海报里成为观看者的感情出口，想让每个人的心里都住进一个哈姆雷特。这需要将自己切换到不同的视角，变成不同的角色，过程很辛苦，但又很奇妙。

交谈中又聊到设计专业的学生在课外需要涉猎的知识，我请他做一些书籍、电影方面的推荐。他非常熟稔地举出《梦的解析》《天工开物》《人类简史》《社会契约论》等一连串的书名，并说“知识面是由不同的聚合体归纳出来的，这种聚合体就是学生面对的各种专业，多看看，用以夯实精神世界以及填充沟通过程中的知识障碍。”

这句话有些抽象，但内涵却在何轩的海报中得到了具象的体现。在他设计的三张同样用城市的场景作为创意蓝本的海报中，一张将建筑变化成梦幻的繁星点点，如同乘坐飞机鸟瞰城市的夜景；一张用数码技术模拟出长江的波涛，将城市建筑与波浪重叠，营造出一幅超自然的汉江揽胜图；最后一张是为字绘中国丛书《字绘香港》设计的海报，他将香港著名的地名设计成店招，让阅读者仿佛漫步于香港街头。

第三届海峡两岸创意创新高峰论坛

武汉设计日首届中国包装创新设计周

丛书《字绘香港》海报

二、用海报拓印回忆 在众多城市文化活动的主视觉设计上，何轩一直保持着自己的见解与风格。合情不合理是上品，合理不合情次之，不合理又次之，合情合理最差，是他一直秉持的设计观念。

“你看到的是云吗？不太像又或许是的？”何轩指着一张海报问我，那是他设计的中国农谷屈家岭文化 IP 全球征集大赛的主视觉。

中国农谷屈家岭文化 IP 全球征集大赛

“当我们看到“云”中镂空出一个“家”字的时候，你会不会回忆起家的影子？而那颗“米”会不会让你想起不论多晚回家，家里都有热饭热菜等你？“粮”谐音“娘”，累得时候就回家，这就是屈家岭的历史。在这里发现了五千年前的炭化黍米，证明了长江流域的先民们曾在这里孕育了芸芸众生。我们寄意于邮票，将本届大赛的优秀成果传承给下一个五千年。”

简短的几句描述，让我茅塞顿开，原来他的海报里，每一个元素都有特殊的维度。我不禁问道：“你做这幅海报的时候，去过屈家岭吗？如果没有去过，这样做出来的设计，会得到更多人理解吗？”他没有直接回答，而是反问我说：“你想过家吗？你想不想吃爸妈做的饭菜？”

但不及我思考回答，他又道：“一幅作品勾起你内心里一丝回忆，激起你心底一片涟漪，这幅海报的使命就已经达成。”

于是我尝试从这个设计观念的角度，解读了他的作品《又十年》。那是他为靳埭强设计奖十周年海报邀请展创作的海报，画面中央是一个中国特色的泡菜坛子，用汉字笔画镂空后投射出星光点点，是不是靳埭强设计奖的下一个十年将继续照耀每一位设计人的意思？

听完我的看法，何轩连连赞许，说：“海报是我留存记忆的方法，泡菜坛子是我对陪伴的物化。赠送泡菜是亲人之间在物资匮乏的年代最好的亲情表达式，我第一次玩陶就做了这个笔画镂空的坛子，它和激励我大学四年的靳埭强设计奖一样，让人振奋和温暖。”

靳埭强设计奖十周年主题海报邀请展

“不久前，《字绘中国》这本书出版了，书里用绘画的方式呈现出中国各省的风土人情，是一本集城市文化传播、旅游纪念的书籍。受主编徐郑冰的委托，我设计了书的封面。那一刻对于泡菜坛子的回忆被调动起来，那干脆就用一个青花瓷盘总结这本书。因为「瓷」就是「CHINA」，中国人的团圆不就是坐在一起做很多顿饭吗？封面还特意做了开窗处理，那是从窗户外看到客厅里热气腾腾的烟火气。”

丛书《字绘香港》封面（海报）

何轩说，创作的忘我程度，来自让自己一人分饰多个角色——设计者、评委、上司以及客户。这四种角色的切换需要设计师调动回忆，是与不同的立场产生同理心的过程。提高设计的准确率就靠这些。

2020 年，我曾读过他的专著《园创：武汉城市公园文化创建》，书上详细记载了他与伙伴们为武汉七座城市公园更新标志的过程。100 个问答形式，将设计项目中的多个角色观点表现得淋漓尽致。《园创：武汉城市公园文化创建》这本书还成为 2021 年武汉市社会科学的后期资助项目，一个商业项目能够变成一部学术著作，这种城市文化的传播方式让人称奇。

在提到其中武汉中山公园的标志设计时，何轩感慨颇深。他说小时候就在中山公园玩，上小学在这里春游过，上中学时吃完中饭也常常去公园转一圈。而正是因为拥有这些经历和回忆，何轩深刻透彻地理解了为什么中山公园在历次修缮中，总是采用修旧如旧的策略。

《园创：武汉城市公园文化创建》书籍设计

三、生活是平面的，卷起来才精彩 何轩的设计启蒙是从大二那年开始的。那年他买了电脑，用它完成了专业作业和业余时接的设计单子；那年他也拥有了自己的一台佳能的彩色打印机，是用自己大学的第一笔奖学金买的。何轩用它来打印作业，出给甲方看的稿子也更方便了。

时间到了大三，他完成了武汉市旅游节主视觉，还跑到江汉路对着“煮热干面”的雕塑写生，然后传到电脑上画成电子素材，为之后的设计做积累。当时正是跟着沈冬上课，老师觉得他做事很踏实，就把他带在身边做项目。

那是收获颇丰的一年，何轩手里积累了武钢宾馆雕塑设计、武汉市旅游节 VI 设计、武汉市育才二小 VI 设计、江岸区教育局 VI 设计、《王心耀艺术》书籍设计等十余项设计项目。

大四毕业后，何轩选择留校读“大五”。用这个词是因为教书后很多大赛他已经不能参加了，于是开始指导学生去拿奖。2006 年，他指导学生获得了全国大学生广告设计大赛全国金奖。接下来的十年里，他指导获得等级奖的作品近百余件，成为了名副其实的“奖皇”。

全国大学生广告设计大赛全国金奖

2009 年，他在准备研究生面试的时候，做了一本精美的作品集，叫《轩轾》——指高低轻重任由评说之意。当时的面试官翻完作品集以后，对其他几位评委说“大家看看还有什么问题？”没有评委说什么，于是他就这样被录取了。

直到那时何轩的人生似乎还是平静如常，但在 6 年后的 2015 年，何轩开始了职业的第一卷：他离开了工作了十年的原单位，加入了武汉工商学院，并在 2 年后成为该校艺术与设计学院的副院长。

参与城市文化传播的研究之路也是从那个时候开始的。湖北省台湾事务办公室主办的海峡两岸创意创新高峰论坛主视觉他一做就是五届，还有中国当代学院水彩名家邀请展、中国高等教育学会主办的全国艺术与设计学院院长论、全国美育与设计教育峰会、故宫博物院上任院长单霁翔武汉讲座、黄鹤杯工业设计大赛、刘小康先生领衔的汉港两地设计智库高峰论坛、第十九届武汉国际车展…… 武汉的很多文化、学术和商业活动的主视觉都是他负责的。

五届海峡两岸创意创新高峰论坛海报

武汉大学万林艺术博物馆主办的中国当代学院水彩名家邀请展

中国高等教育学会主办的全国艺术与设计学院院长论坛

全国美育与设计教育峰会

故宫博物院上任院长单霁翔武汉讲座

黄鹤杯工业设计大赛

汉港两地设计智库高峰论坛

第十九届武汉国际车展

2019 年武汉疫情封城期间，何轩临危受命制作了雷神山医院的铭牌，还将当时的工作照片做成了海报《感谢你们拼过命》。画面中的两个主角是他的学生，封城封不住他们参与抗疫的热烈之心，于是何轩决定要为他的学生做一幅海报，把奋战在抗击疫情一线的人们都画出来。他说有了他们，武汉不害怕。

感谢你们拼过命

四、艺术教育是要让人幸福 与其他学科相比，从事艺术教育的教室多少会有些“个性”，这一点在何轩身上得到了很好的体现。当然，在对待课堂的态度和认真钻研教学的劲头方面艺术类的教师并没有什么差别。

第一次为大一学生准备《世界现代设计史》的课教学材料时，何轩特意把陈奕迅的《K 歌之王》重新填词修改，还在课堂上为大家演唱，让学生们对史论课的有了全新且深刻的理解。

他认为教育是帮助一个孩子在未来的生活中更成功地寻求自己的幸福，而这条路上会遇到很多阻碍。

最常见的阻碍之一就是“伪帮助”。在中国的教育里，不按规则办事可能被视为失败者，但是何轩说：“帮助是启发学生向善，而不是嘴里说我是为你好。”

第八届大广赛时，面对一位准备设计减肥药的平面广告的学生，何轩问她有没有想过其他的选题，比如自己的父母最需要强壮骨骼的产品。受到启发后那位学生改做与老年人营养品有关的设计，画面里是不倒翁在各种场合的状态——不踉跄，不摔倒，而这正是老人最大的安全感。这个理念最终被评委认可，那位学生的平面广告作品最后也获得了大广赛的全国银奖。

全国大学生广告设计大赛全国银奖

而后的阻碍是“忘了授业”。大学只顾着传道却忘了授业，而且还把解惑的责任推给了企业。学生被动改行，被安排。

“老师不会赚钱怎么教会学生赚钱？”这是何轩的大胆之言。2014 年为学校设计校庆礼品是，何轩专门买了一台多功能木工一体机，每天研究并在朋友圈发晒成果。有个同样对木工感兴趣的学生看到后主动找到他，两人便一同切磋起木工工艺技巧。后来那个学生的毕业设计也是跟着何轩做的，再后来那个同学的木工作品获得了楚天杯首届工业设计大奖，拿了 5 万元奖金。"如果每个大学生毕业条件里多一个拿大奖的要求，估计中国的教育体系在毕业这一环节就算圆满了”，这是何轩从中发出的感慨。

畅想公园产品设计

阻碍之三是“偏执的寻求”。何轩认为设计者不该一直仰望所谓的“别人家的孩子”，而是应该努力成为那个优秀的人，做到每一次都比过去的自己更优秀。米兰设计周中国高校设计学科师生优秀作品展主视觉的设计过程，就是一个很好的例子。

米兰高校展的主视觉初稿是专升本的一个学生做的，在那一稿的海报里连 design 这个英文单词都拼错了。于是何轩要求她把一种风格做出 10 种不同的变化，结果是做得一次比一次好。后来这 10 个蓝本被何轩进一步优化提升，最终有 3 张海报分别成为了三届米兰高校展的主视觉，那个同学求职简历里也多了一个极具分量的成果。

三届米兰设计周中国高校展主视觉

尾声但不是结束 何轩刚刚参加的工作的时候是 22 岁，他给自己教的第一届学生曾说过，一个理想的职业人生，应该是 20 岁厚积薄发、30 岁初露锋芒、40 岁中流砥柱、50 岁慢慢成为年轻人的偶像。

而这样理想的状态是建立在骑士精神、契约精神之上的。作为 40 岁的大学老师，何轩也在时刻反省，寻求自身在专业领域和精神层面的再次起飞。面对这位脑袋里装着一座游乐园的大学老师，我们也可以拭目以待。

更多设计师访谈回顾：

一个产品人的妄念与懦弱：专访 flomo 创始人刘少楠 刘少楠有着一份丰富的职业履历。

阅读文章 >