互联网医疗作为一个市场规模超千亿的赛道，随着疫情的加速，目前这个赛道已经进入规范化发展的高速增长期。根据易观千帆 7 月份数据显示，在线医疗行业有 613 个 APP，月活跃用户人数达到 3362.84 万人。从本月开始，设计大侦探将会针对医疗产品进行全面的拆解，为医疗行业的 UI 设计师、产品经理和相关从业者带...

互联网医疗作为一个市场规模超千亿的赛道，随着疫情的加速，目前这个赛道已经进入规范化发展的高速增长期。根据易观千帆 7 月份数据显示，在线医疗行业有 613 个 APP，月活跃用户人数达到 3362.84 万人。从本月开始，设计大侦探将会针对医疗产品进行全面的拆解，为医疗行业的 UI 设计师、产品经理和相关从业者带来更多的设计参考。

往期回顾：

上万字分析！6大方面完整分析「丁香医生」的产品设计 一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。

阅读文章 >

一、导读 1. 内容结构

全文 9040 字，分为四个部分，分别是导读、产品画像、产品拆解和写在最后面的话，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群

第一类，UI/交互设计师，可以跳出执行层，去思考医鹿的产品设计策略，提升 产品分析 能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取 产品设计 参考；第三类，医疗产品行业从业者，通过对医鹿的全面拆解，获取竞品设计参考。

3. 分析模型

我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考医鹿为什么这样设计。

第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。

第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。

万字读书笔记！产品设计宝典《上瘾》全面解读！（上） 为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？

阅读文章 >

万字读书笔记！产品设计宝典《上瘾》全面解读（下） 《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。

阅读文章 >

第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。

二、产品画像 在本节，我们将会通过阿里健康官网、百度百科、易观千帆和七麦数据等资料网站，对医鹿进行全面的调研，让大家对医鹿有一个全面的了解。

1. 产品介绍

阿里健康成立于 2014 年，作为阿里巴巴集团大健康领域的旗舰平台，开展的业务包含医药电商及新零售、互联网医疗、消费医疗、智慧医疗等领域，医鹿是 阿里健康 面向消费者推出的一个手机 APP 客户端，主要为用户提供在线医疗服务、预约挂号、疫苗预约、体检预约和自营药房等服务。

2. 商业模式

作为阿里健康面向 C 端消费者的 APP，医鹿以「健康问题，先上医鹿」为价值主张，旨在打造一个互联网医疗综合服务平台，为用户提供在线问诊、在线买药、预约挂号、疫苗预约等医疗服务。易观千帆的数据显示，医鹿的核心用户群体主要以 31-35 岁的女性为主，消费能力水平较强，其次还有面向医生使用的「医蝶谷」APP 客户端。作为阿里生态重要的一环，医鹿和天猫、支付宝、夸克全面链接，为用户提供了更完善的服务。医鹿的盈利模式以医疗电商为主，其次还有在线问诊、疫苗和疾病监测等服务。

3. 用户画像

医鹿的用户群体以女性为主，占比 68.03%，年龄以 31-35 岁居多，占比 57%，其次为 24-30 岁，占比 28.57%；医鹿的用户消费能力较强，高消费者占比 28.98%；用户主要分布在新一线城市和二线城市，其中一浙江省最多，广东和安徽省位居前三。

4. 信息结构

医鹿 APP 主要分为首页、问医、消息和我的四个一级栏目。「首页」主要为其他二级栏目进行引流，内容包含儿童疫苗、成人疫苗、在线问诊、看中医、预约挂号、预约体检、自营药房和精选名医；「问医」是医鹿的核心功能版块，包含极速问诊、复诊开药、特色门诊、特惠义诊等服务；「消息」主要为用户提供疾病交流、答疑的社群服务；「我的」就是用户中心，用户可以查看购买的订单和服务。

5. 重要迭代记录

阿里健康成立于 2014 年，首个 APP 版本发布于 2014 年 11 月 13 日，截止到 10 月 20 日，APP 版本已经更新至 V6.6.72 版本，平均 1 年更新次数为 22 次。

版本迭代重要记录

2015 年 2 月，发布 V2.0.1 版本，上线图文咨询、预约挂号等服务； 2017 年 3 月，发布 V4.4.0 版本，增加视频直播等内容，slogan 为问诊购药管慢病好助手； 2020 年 8 月，发布 V5.0.0 版本，APP 更名为医鹿，slogan 为阿里健康在线服务平台，提供了多种医疗咨询服务； 2021 年 8 月，发布 V6.4.0 版本，上线母婴社区、育儿干货、母婴好物免费试用功能； 6. 产品生命周期

根据易观千帆数据显示，截止到 2022 年 7 月，医鹿月活跃用户人数 50.67 万，行业独占率 6.22%。目前医鹿已经处于产品生命周期的成熟期，作为一个 2014 年就上市的公司，当下聚焦于丰富商业变现方式和新业务的拓展。

7. 竞争图谱

根据健康界《2020 年中国互联网医院发展研究报告》，2020 年行业规模将突破 940 亿元，行业未来将进入规范化发展的高速增长期。目前互联网医疗行业的商业模式主要分为 5 种类型，分别是医疗服务类（挂号、问诊）、医药电商类、健康管理类、医生助手、医疗知识。从行业图谱观察，可以看出这个行业的竞争非常大，医鹿面临的直接和间接竞争对手非常多。

从易观千帆数据看，截止到 2022 年 7 月，在医疗-在线问诊分类，平安健康的月活跃人数位居榜首，达到 577.43 万人，小荷和好大夫紧随其后。在医疗-药品流通分类，健客网上药店位居榜首，月活跃人数达到 254.17 万人，医鹿为 50.67 万人，位居第五。

三、产品拆解 根据增长模型，我们把医鹿的产品功能拆分为「医疗服务」和「内容服务」两个大版块，然后对两个版块的内容进行全面的拆解。

1. 医疗服务 「医疗服务」是医鹿最核心的内容，也是实现商业变现的最重要的方式。医鹿借助阿里巴巴强大的生态优势，链接了众多第三方合作伙伴，为用户提供丰富的医疗服务，从预约挂号、在线问诊、复诊开药、在线药房到疫苗预约、疾病自测、医护上门，应有尽有。

① 问医

「问医」是医鹿的核心服务，主要为患者提供在线医疗问诊服务。从问诊类型拆分，医鹿主要提供极速问诊、复诊开药和特惠义诊三种类型；从问诊方式拆分，医鹿主要提供图文问诊和电话问诊两种方式；从科室的服务看，医鹿的主要以儿科、皮肤科、妇产科、男科和眼科为主。

问医首页

「问医」首页主要分为五块内容，分别是高频功能入口、按科室找医生、特色门诊、优选服务和推荐医生。

头部为极速问诊和复诊开药，这两个高频功能是激活用户的最佳方式，「极速问诊」可以为用户提供60秒快速接诊，「复诊开药」则可以帮助用户按病情或处方开药，节省时间成本。

为用户提供多种信息检索方式， 比如可以按科室找医生，医鹿的科室内容比较全，包含20多个常见医疗科室；还有特色门诊，分别为儿科、皮肤科、妇产科和男科四个科室，每个科室由专门的专家团队组成，24小时无休，为患者提供7*24小时和60秒极速接诊服务；

优选服务包含了精选名医、特惠义诊和眼科精选专家，这个版块核心卖点为专家，利用医疗专家吸引用户兴趣；

从第二屏开始，以Feed流形式向用户展示平台的医生专家，用户也可以进行高级筛选，比如按科室、服务价格、医生职称和地区等。

极速问诊

「极速问诊」的本质是卖时间，用户只需要描述自己的症状，平台就会安排合适的医生进行接诊。目前医鹿的极速问诊采用人工智能 AI 接诊的形式，非常智能化。

提醒患者输入症状，2-50字都可以； 提醒患者输入患病时间； 提醒患者选择就诊人； 提醒患者上传检查单或照片； 系统安排医生，为用户推荐四种就诊方式，包含专家急症、极速三甲图文、极速普通图文和极速三甲语音，付款后即可开始问诊。

复诊开药

「复诊开药」主要帮助患者通过专家医生的在线问诊，指导购买药品，从而节省线下就医的时间成本。

首次使用需要添加「用药人信息」才能购买，需要输入正确的姓名和身份证号信息；②用户需要输入详细的病情描述才能进行下一步；③用户可以上传线下就诊的历史处方、病历和报告单，还可以自己选择药品；④点击确认后，跳转到人工智能AI问诊，提醒付款后专家医生会在线接诊。

医生详情页

「医生详情页」作为医疗产品权重非常高的落地页，内容规划上从上至下分为三个部分。

头部主要向用户展示医生的基础信息，包含医生的基础资料、专业擅长和服务评价等； 第二部分展示就诊方式和通知公告，医鹿主要提供图文咨询和电话咨询两种方式； 底部主要向用户展示其他用户对医生的评价和接诊的案例，给用户更多决策参考。

图文咨询

进入图文咨询，问诊流程和极速问诊一样，需要根据AI助理的提示录入基础信息；②当支付订单后，需要等待医生接诊，然后才能进行在线咨询。

电话咨询

就诊前，需要添加就诊人信息；然后描述详细病情，选择咨询预约时间；②支付订单后，进入AI智能问诊界面，等待医生的来电。

② 看中医

在阿里健康收购「小鹿中医」以后，医鹿 APP 也加入了中医版块，目前以小程序的形式运行，用户体验好。

首页

小鹿中医的首页主要分为中医大全、知名中医和精选医生三个部分。

「中医大全」为用户提供三种检索方式，分别是按科室找、按疾病找和按医院找，其次还提供四种问诊方式，专家问诊、快速问诊、预约挂号和按方抓药。②「知名中医」主打专家优势，为用户提供多名全国的知名中医专家问诊，内容划分为全国名中医、名医传承专家、省级名中医和国务院特殊津贴专家。③在底部，以Feed流的形式向用户展示小鹿中医的名医专家。

医生详情页

小鹿中医的详情页主要包含六个部分，分别是医生基础信息，门诊信息、协定方、患友反馈、患友评价和问诊服务。

医生基础信息包含医生的姓名、医院、科室、专业擅长和服务人数等信息，主要向患者介绍医生； 「门诊信息」主要为用户提供在线预约功能，通过平台可直接在线预约，节省时间成本； 「协定方」就是医生自己设计好的处方，患者根据自己的需求可以直接在线购买； 小鹿中医在患者评价部分加入了一个有趣的设计，那就是患者可以通过购买虚拟锦旗的形式赠送给医生，这种设计不仅丰富了产品的内容表现形式，而且可以进一步激发医生对患者的服务，获取更多的锦旗。 问诊服务包含在线问诊、预约挂号和提问服务，服务形式相比「问医」，丰富很多。

③ 疫苗

疫苗是一个刚需服务，从医鹿的迭代记录也可以看出，医鹿对「疫苗」这个版块的重视度很高。不仅提供了儿童疫苗和成人疫苗，还提供了疫苗助手、疫苗百科、接种问答等工具，其次「疫苗」也是 APP 首页瓷片区的核心内容，给了很多的入口。

儿童疫苗

「儿童疫苗」主要分为用户管理、儿童疫苗预约和健康科普三个版块。

「健康记录」就像一个健康助手，为家长提供疫苗接种记录和成长记录工具。「疫苗接种」的交互界面以清单的形式设计，家长可以为孩子接种的记录打钩；而「成长记录」栏目，系统会提醒你定期体检时间和注意事项。

进入「疫苗预约」，可以查询用户最近的接种点，然后进行线上预约。

「健康科普」分为选苗攻略和育儿知识，主要为用户提供科普知识宣传。

成人疫苗

「成人疫苗」主要为用户提供疫苗接种、抢苗提醒和私立疫苗等服务。第一屏的金刚区主要向用户展示热门疫苗，用户可根据需求进行直接预约购买。其次还有 HPV 现货专区、抢苗助手、扩龄订阅、抢苗提醒和私立疫苗等服务。

拓展知识

由医鹿免疫规划中心策划的「一图看懂 HPV 疫苗」可以帮助我们理解「成人疫苗」这个版块内容设计。中国每年约有 10 万女性患上宫颈癌，在 15-59 岁中国女性中，宫颈癌的发病率和死亡率均位列前五，而 HPV 疫苗主要就是是降低女性患上宫颈癌的风险。HPV 疫苗目前分为三种类型，分别是 2 价、4 价和 9 价，9 价 HPV 可以预防约 92%的宫颈癌，HPV 疫苗接种越早，患病概率风险越低。

疫苗百科

「疫苗百科」主要为用户提供对疫苗知识的普及，包含儿童非免疫规划疫苗、儿童免疫规划疫苗和成人疫苗三大类，拥有 30 多个词条，内容由多位医疗专家编审撰写，包含疫苗简介、科普和问答等内容。

接种问答

在 APP 用户中心的「疫苗工具箱」，还提供了一个「接种问答」的工具。这个栏目主要以问答的形式帮助用户解决接种疫苗过程中出现的一些常见问题。

④ 预约挂号

「预约挂号」也是一个用户的刚需服务，公立医院的挂号系统有时候由于传播方式、用户体验等原因导致患者不知道如何挂号，医疗产品刚好可以满足患者这一需求。但是医院的挂号系统是封闭的，不支持接入，所以「预约挂号」更多是通过第三方平台代支付或现场支付的形式服务。

首页

「预约挂号」的首页主要分为三个部分，头部为 LBS 地址和搜索，用户可以切换地区或直接检索；金刚区为用户提供三个 tab 切换按钮，可以按专科、疾病和医院查找；底部以 Feed 流的形式向用户展示医院信息。

医院详情页

医院详情页主要包含医院基础信息、分院信息、热门医生、热门科室、就医工具和挂号须知六个部分。

头部向用户介绍医院的基础信息，包括医院介绍、医院等级、营业时间等。当医院有不同的分院时候，会以TAB切换的形式为用户提供各分院的导航信息和挂号入口。 「热门医生」和「热门科室」的拆分不仅可以方便用户快速预约，其次也可以丰富页面的设计内容，其次也支持用户查看全部分类进行挂号。 「就医工具」主要是医鹿推出的服务，激活用户变现，包含免费试新药、智能分诊、新药招募等工具，给患者提供更多的就医服务。

挂号流程

用户需要根据医生的号源进行预约。②添加就诊人，确认预约后，由第三方平台代收挂号费或到院支付挂号费，医鹿只是做一个中转。

⑤ 预约体检

「预约体检」包含了体检预约、专享检测和医护上门，在内容设计上也根据人群、功能、价格设计了非常丰富的服务。

体检预约

医鹿的体检服务非常丰富，按人群分有中青年体检、女性体检、父母体检；按功能分有入职体检和公立体检；按价格分有高端体检、新体检和特惠体检。每个分类还有不同的服务套餐，覆盖了各类用户人群。

在用户福利设计上，也提供了多种促销方式，设计了购买体检可以赠送话费，限时抢购7折，购买送豪礼等内容。其次还设计了「健康优选」和「健康排行榜」，丰富了体检版块的内容设计，给用户更多的选择。

在底部以TAB切换的方式为用户提供医院和热门套餐的选择，其次用户还可以根据报告时效、适用人群、体检项目等分类进行筛选。

专项检测

「专项检测」提供了 HPV 检测、幽门检测、甲状腺检测、两性健康、核酸检测、基因检测、过敏检测、居家自测、疫苗抗体和阿尔兹海默病检测 10 种服务，服务流程比较简单，用户下单后平台发货，用户在家自行检测。

医护上门

「医护上门」是医疗 O2O 服务，主要提供上门检测和上门护理两大类服务，其中「上门检测」包含慢病检测、核酸检测、上门体检等服务，而「上门护理」包含打针、换药、小儿护理等服务。

⑥ 自营药房

阿里健康的定位是医疗电商平台，作为医药电商平台的先驱，「自营药房」就是阿里健康官方直营的在线商城。不过从内容设计看，这个版块的内容比较单薄，医疗电商的主要销售平台在天猫的阿里健康大药房。

天猫-阿里健康大药房

从商品分类看，阿里健康大药房主要提供防疫专区、感冒发烧、全球进口、维矿营养、长尾用药、专科用药、慢病用药等 20 个分类。

从内容设计看，阿里健康大药房的内容相对比较夯实，不仅提供新人优惠券、限时抢购等常见促销方式，还设计了用药服务卡、家庭药箱和用药提醒等工具。

2. 内容服务 「内容服务」主要帮助产品实现用户留存和传播拉新，医鹿在升级到 V6.6.72 以后，过往很多优质的内容版块已经没有了入口，目前只保留了社群、育儿百宝箱等几个功能。

① APP 首页

医鹿的首页设计就像一个导航，主要给其他版块进行引流，高度甚至没有超过 1.5 屏，在当下的医疗产品中比较少见，首页的内容主要分为三个部分。

头部为搜索和金刚区，金刚区主要为用户提供9个高权重功能入口，包含儿童疫苗、成人疫苗、在线问诊和自营药房等； 瓷片区为疫苗助手、HPV现货和医美试用官三块内容，主要为高利润产品导流。 底部为精选名医，会根据用户的LBS自动定位，为用户推荐当地的医院和医生信息，用户也可以切换地区查找医生，其次每月还会生成儿科、妇科和皮肤科的好医生榜单。

设计讨论

和过去的首页设计历史版本相比，医鹿如今的的首页仿佛做了一次大瘦身，很多内容都被砍掉了，比如直播、科普、每日推荐等内容。对于这样的升级，个人认为首页的设计缺少了多变性，对用户的黏性降低了，在其他医疗产品都在丰富内容抢夺用户时间的时候，医鹿的设计策略让人捉摸不透。

② 搜索

「搜索」是一个非常重要的功能，除了为用户提供精准的搜索结果，还能引导用户，起到分流作用。

引导页

「引导页」从上至下分为三个部分，分别是搜索记录、热门推荐和热门专题。当用户搜索关键词以后会保留搜索记录，也会为用户进行热门内容的推荐，其次还设计了「热门专题」，主要给其他版块导流。

结果页

「搜索」的结果页主要分为三个部分。

第一部分，当用户检索疾病的时候，首屏会调用「医鹿医典」的内容，通过专业权威的词条知识为用户进行全面的知识普及；第二部分，调用阿里旗下的「夸克」的全网搜索数据，比如专家解读、专家回答、相似病例等；第三部分，调用医鹿平台的数据，向用户推荐相关的医生、医院和交流群，激活转化。其次也可以通过 TAB 栏（医院、群聊、医生和相似病例）快速切换。

医鹿医典

「医鹿医典」目前没有入口，当用户检索疾病的时候，才会出现医典的入口。医疗百科作为一个医疗产品必备的内容，阿里健康在产品发布的早期就开始打造，但如今把入口都砍掉，让人感到不可思议。

设计讨论

从医鹿的搜索结果页来看，基本上把搜索内容都交给第三方的「夸克」了。虽然这充分利用了阿里巴巴强大的内容生态，但个人觉得这样的设计不利于平台内容的发展，一个平台如果都不生产原创内容了，那么对用户的吸引力就会越来越小了。

③ 社群

「社群」是医鹿用户运营的主要方式之一，当用户搜索疾病或就诊完以后，都可以加入对应的疾病答疑群。社群主要由医生小助手和管理员运营，负责为用户答疑。群功能主要包含求助、群问答和群公益，其次还可以对群进行置顶聊天和消息免打扰。

④ 育儿百宝箱

「育儿百宝箱」主要为宝妈提供儿童保健、宝宝娱乐和查询评测三大类服务，其中有医鹿原创打造的，比如育儿百科、用药助手和辅食神器等，另外还有直接调用「夸克」提供的第三方工具，比如血型查询和自闭筛查等服务。从功能设计来看，看似非常丰富，但是内容的深度却很浅，入口也很深，更像一个鸡肋功能。

育儿百科

「育儿百科」为医鹿原创，由 200+公立三家医院儿科、妇产科副主任以上医疗专家编审，包含行为发育、喂养、睡眠、日常护理、生长发育、健康问题和疫苗七大类。百科内容主要以问答的形式帮助用户解决日常的育儿健康困惑。

⑤ 疾病风险评估

「疾病风险评估」是免费的评测服务，包含了 17 种常见疾病的评估，比如高血压、痔疮、乙肝、风湿性关节炎等，用户进入后即可开始进行评测，评测完以后会为用户生成简单的评测报告。

设计思考

「疾病风险评估」其实是一个非常常见的引流和留存手段，不过从医鹿目前的内容更新和体验设计来看，这个版块不仅长久没有更新甚至没有入口，权重非常低。

3. 设计总结 在为医鹿进行产品设计总结之前，我对平安医生、丁香医生、好大夫等头部医疗产品进行了全面的功能调研，按照增长模型，我拆分为四大类，输出了一张医疗产品设计的竞争模型图。根据这个竞争模型图，我们可以看出医鹿的诸多问题。

① 产品定位

医鹿 APP 作为阿里健康面向消费者的前端产品，在我全面拆解完以后，给我最大的感受就是它的产品定位并不清晰，没有差异化。

以易观千帆 2022 年 7 月的数据为参考，在医疗-在线问诊分类，平安健康的月活跃人数是医鹿的 10 倍，而医鹿甚至连前 20 都进不去；在医疗-药品流通分类，健客网的月活跃用户人数是医鹿的 5 倍，医鹿只排名第五。这组数据说明即便拥有阿里巴巴集团如此强大的资金和流量资源优势，但不管是在医疗服务还是医药电商，医鹿都没有做到行业前三，甚至大幅度落后头部产品。

其次从用户群体分析，相比小荷健康这样只针对重病、大病和癌症患者的产品，还有像丁香医生只针对年轻女性和新手妈妈服务的产品，医鹿的目标用户人群显得非常不清晰。

② 医疗服务

医鹿的医疗服务看上去非常丰富，除了常见的在线问诊，还有中医、挂号、疫苗、体检、医护和医疗电商服务，但事实上这些内容版块更多是和第三方医疗机构合作，除了中医和医疗电商，其他的并没有核心竞争力。甚至医疗电商这块业务，阿里健康似乎更倾向于在天猫的场景进行销售，这让医鹿的定位非常尴尬。

③ 内容服务

在内容服务方面，医鹿几乎把过去设计的内容都砍掉了，比如健康科普和直播已经在平台找不到内容了，而像医典这样的高质量内容，平台也不给入口，这样的设计让人感到非常奇怪。其次从内容的更行频率看，像育儿百宝箱和疾病风险评估这些内容，不仅设计得很浅，而且很长时间没有更新维护，用户体验一般。

④ 营销服务

医鹿几乎没有营销工具，整个产品除了一个优惠券和红包，连健康金币都准备要停止服务了。相比其他头部医疗产品，这简直没法相提并论。相反在天猫阿里健康大药房的旗舰店，还设计了相对丰富的营销服务。比如会员可以购买鹿卡，享受会员权益，还可以签到领积分、抽红包。

四、结束语 这是我第二次拆解医疗产品，相比今年 3 月份拆解的丁香医生，不管是拆解效率还是内容深度，都有了很大的提升。不过相比丁香医生，医鹿整个产品带给我的冲击却少了很多，这和我这半年的个人成长有关，其次也和医鹿不断“瘦身”有关系。

上万字分析！6大方面完整分析「丁香医生」的产品设计 一个优秀的产品如何设计，遵循什么原则，有什么策略，是否可以用一个设计公式来描述它，从而让我们全面、结构化的方式去研究学习。

阅读文章 >

另外，这也是第一次拆解阿里系的产品，我也发现了很多一些特别的地方。比如医鹿和天猫阿里健康大药房的界限划分得不是很清晰，阿里健康似乎更愿意把医疗电商的销售场景设计在天猫，还有医鹿甚至会在搜索的结果页直接调用夸克采集的第三方数据，导致流量流出，这让我一时难以理解。

也许这就像我第一次拆解腾讯系的产品一样，一个产品的设计，除了设计团队，土壤也特别重要，都是姓马，但一个擅长社交，另一个擅长电商，所以最终产品呈现给用户的，是两种不同的用户体验。

最后，从医鹿开始，我将开启一轮医疗产品的的全面拆解，下期我们将会拆解京东健康，敬请关注！

参考文献

中国互联网医疗年度盘点 2022-易观分析 易观千帆 - 医鹿/平安医生/丁香医生/京东健康/医疗产品 APP 数据分析 七麦网-医鹿产品迭代记录 阿里健康官网 医鹿（阿里健康）VS 京东健康，电商巨头另一赛道的比拼 阿里健康 APP 产品体验分析报告（上） 2020 互联网医疗产品竞品分析报告——阿里健康VS平安好医生 欢迎关注作者微信公众号：「设计大侦探」

最近我学到了一些经验，也想清楚了一些事情。从社群反馈来看，好像大家还蛮喜欢看彩云的职业思考，之前一篇《来腾讯的第三年，我的 13 条职业思考，关于那些被最常问到的话题》就很受好评。因为我自己是有每天写作的习惯，今天就将我近期的一些思考整理分享，包括工作方法、思维方式、心态习惯以及对未来的职业思考等，希望对你有所启发！

最近我学到了一些经验，也想清楚了一些事情。

从社群反馈来看，好像大家还蛮喜欢看彩云的职业思考，之前一篇《来腾讯的第三年，我的 13 条职业思考，关于那些被最常问到的话题》就很受好评。因为我自己是有每天写作的习惯，今天就将我近期的一些思考整理分享，包括工作方法、思维方式、心态习惯以及对未来的职业思考等，希望对你有所启发！

近万字干货！来腾讯第三年我总结的13条职业思考 2014 年夏夜。

阅读文章 >

在看本文之前请思考几个小问题：

做事情为什么要注重流程方法？ 普通人到底能不能弯道超车？ 踩坑时，什么样的难度值得你去研究或跳过？ 如何面对职业未来？ 什么事情是你最好马上就应该做的？ 带着这几个小问题，看是否能从我的思考中找到答案。

一、流程化思维 每周更文都是我一个人，为了提升效率，我会习惯将事情流程化，这样也不容易遗漏重要事情。

比如，对于公众号文章编辑来说，我会先把内容从 Typora（我最常用的 markdown 编辑工具）中复制填入编辑器，然后再全选所有内容进行统一格式化，去掉从外部带进来的所有格式内容。再统一修改字体，字号，颜色，字距，段落高度，缩进。这个时候，我会对文稿内容进行一次保存。然后申明原创和赞赏，封面，概要，是否合并到合集，再保存一次。这样保证已经填进来的内容不会丢失，重要的申明不会遗漏。

然后，再进行细致的调整。修改所有小标题字号，图片间距。然后，再对所有链接、图片注释进行字号、颜色、对齐方式进行统一修改。最后，再逐句看完文稿，把需要强调的文字加粗，保存并发预览自己再读 1 遍甚至多遍。最终，确认无误后才算完成一篇文章的编辑工作。

通过这种流程化的操作，尽管文章编辑比较繁琐，但在将近 5 年的时间里，几乎没有出现错误。分享这个事情，主要是想跟大家分享我的做事方法。

我会尽可能地将我要做的事情“流程化”，算是我的思维体系中的一部分。这样的思考模式会帮助我在其他各个事情上做到更好。比如，我经常能发现项目中存在的问题然后总结流程规范，生活中也会把自己流程化，形成规律也降低了启动的成本，更容易坚持。

我在做一件事的时候，会去想整个事情的流程运转，每一个环节分别做哪些事情，哪个节点是资源充足的，哪个环节是缺失的。通过这样的思考，全局的概念就有了。这样不论遇到什么疑难杂症，你都能先从整体上来判断得失。

流程式的思维方式，会让人的思考变得越来越系统。

二、欲速则不达 最近看到 XX 公司爆的大规模裁员，毁约 Offer，让市场上的寒气更甚了。

其实，我很早就觉得这家公司迟早会出问题，前期实在是扩张的太快，薪资 2 倍甚至 3 倍的薪资都能给，感觉跟市场几乎是脱节的，特别不靠谱。很多后面从这家公司出来的员工，往往不得不面对降薪的情况才能找到工作。

急速的扩张，带来的问题就是内部管理混乱，上层给的资源和权限过多，导致下面的每个团队都想快速扩充自己的地盘。现在钱烧的差不多了，盈利陷入冰窟，不健康的经营模式自然走不下去了。

从公司的发展联想到个人的发展，几乎每一个想要速成的最后都没能速成，真是讽刺。

欲速则不达，拉长时间看，最后跑的最远的往往是那种脚踏实地把事情认真做好的人。同样都是努力，本来别人就比你厉害，凭啥总想弯道超车？没那么多逆天改命的事。

三、如何面对职业未来 近期的就业环境，我也不多说了，大家应该都懂。在这种环境下，普通人还能做哪些事更好的规划自己的未来呢？我认为也有几点：

1. 把英语学好。 以后远程工作的机会可能会越来越多，国内机会不多，或许还能远程去外企，或者给老外做私单。目前看到很多高端职位，都是要求英语要好，能达到基本的听说读写水平，如果真的在国外工作，其实拼的也就是语言能力，当你可以像母语一样能说会道，那就跟在国内上班没啥区别了。

为了把英语学好，我会用背单词提升词汇量，再用做译文提升阅读理解能力。我今年从计划专项提升词汇量开始到现在，转眼都已经打卡了 228 天，量变带来质变，现在看英文原文已经越来越少用到翻译工具查单词了。

2. 学会道术结合。 不断学习，才能成长，这没错。但必须认清道和术的区别，要多去思考，学习事物的本质原理，术很多时候只是你达成目标的工具，当然涉猎足够多的术有利于开阔眼界，找到更多可能性。术是学不完的，但道思考清楚了，很多问题便有了通解。保持学习力，也理解了道，就不那么担心离开平台光环，因为不论去了哪里都有实力把事情做好。

3. 跟对人很重要， 在 35 岁前要建立自己的圈子和找到能跟的领导。很多职位其实都是相互内推介绍来的，从社会上招聘进来的成本非常高，导致很难成功。

4. 提升认知 ，时刻为未来做准备，要去想 5 年后我还在做什么，假设我不做这份工作了，我还能做什么。而只有提升自己认知能力，才能找到对的方向。

5. 提升软实力。 不管是在大公司还是小公司，纯技术类岗位被外包替代的可能性日趋增加。每个做技术的人都应该找寻一些技术之外的软实力，可以是协调能力，汇报能力，写作能力等等

6. 把自己当成产品 ，发展自己的个人品牌，放大自己的影响力。就算年纪大了，找不到工作了，有自己的个人品牌也就还有机会和希望。

四、换个思路看问题 在做项目过程中，踩坑很正常，我就很喜欢从踩坑中学习新知识。但硬刚一个巨坑，有时候也是不理智的，怎么判断什么时候该研究一个坑，什么时候需要转换思路呢？

我的判断是，如果涉及到自己完全不擅长的领域，且短时间内问题不好拆解，那就先别急着硬刚，冷静下来想想有没有别的方案。

比如最近的一个需求是做一个商场建筑模型设计，我最初考虑的方向是偏写实的风格。但我又不想做的太普通没特色，就需要我去思考一个建筑如何有好的楼房结构，怎样才算是有设计美感。在研究的过程中，我逐渐发现这已经属于建筑设计范畴了。而对于建筑设计，我完全是外行，且这个领域过于庞大还不好拆解，也与自己的专业跨度太大，没法在短时间内速成。

此时就需要转换思路，回过头来明确我们的产品目标是再地图上标识出此处的场所建筑，那其实是可以做一些艺术化处理的，不一定非得是写实的才行。

比如商场可以用手提袋模型来设计，不仅可以简化造型，还能把非专业的事情转化为自己专业内已知的事情。此时再去思考创意，设计上就相对可控，难度也大大降低，问题迎刃而解。

五、去做了才知道行不行 当想做某件事时，一定要先去做了才能知道，光有想法不去行动是永远不会有结果的。

很有可能当你去做了会发现，山的另一边可能还是一座山，但你至少要翻过去才能知道。

去实践，在做事的过程中，对自己会有更加清晰客观的认识。做的过程中，越来越清楚自己的能力边界范围，然后回到并聚焦在自己的能力范围内，这样才可能把自己的能量发挥到最大。

六、把每天的写作当做未来的积累 真心建议你开始写作，每天总结自己的得失，反思自己，多一些深入思考，说不定等到将来，这些你每天写的文字就能成为你的无价之宝。

我自己现在每天都在写，回头看，已经改变了我的人生。在写作的过程中，陆续认识了新的朋友，扩展了自己的圈子。后续我有这么多宝贵的素材来源，相信能很好的拓展延伸。

所以，如果决定开始写的话，一定要认真对待你每天的记录，尽量不记流水账，多写自己的想法，多做有价值的记录。保持精进，比如能否精简文字，句子能否更通顺，能否写的更好。刻意练习不是简单的堆量，还需要多改进，总结经验，方能真正进步。

等到将来不工作了，看着你曾经写的这些点滴思考，一定会是特别美好的回忆。

欢迎关注作者的微信公众号：「彩云译设计」

本文将以百度商业团队 Light 设计系统 PATS 度量体系的建设为例，分享我们如何探索设计系统度量的建构与具体实践。希望通过文章能为大家带来新思考，并借此与大家进行交流与探讨。更多设计度量体系：产品体验度量设计指南（一）：谷歌HEART模型随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大...

本文将以百度商业团队 Light 设计系统 PATS 度量体系的建设为例，分享我们如何探索 设计系统 度量的建构与具体实践。希望通过文章能为大家带来新思考，并借此与大家进行交流与探讨。

更多 设计度量 体系：

产品体验度量设计指南（一）：谷歌HEART模型 随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大企业的关注点聚焦到了如何获取企业及行业利润上来。

阅读文章 >

写在前面 成熟的设计系统是一个强大的生态体系，在这个体系下，各系统部分协同运行，促进平台产品之间的一致性，为更大规模的产品提供“标准化”的工作流程，从而实现组织的运作效率的提升。

设计系统是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法（Kholmatova，2017）。

它既包含了可复用并组成界面的要素，也涵盖了如何在设计团队当中创建、提炼、使用和共享的方法。在 2014 年后，各大知名公司开始在界面设计领域纷纷构建设计系统。百度商业团队随着产品不断的发展和壮大，团队希望通过统一的设计和研发语言来提升产品的一致性，并实现团队协同效率提升，从而达到降本提效。在基于自身业务特性上，建设了一套 Light 设计系统并持续的发展。

目前在设计系统建设方面，各家有非常完备的建设方法与实践。当设计系统建设趋于完备和成熟时，如何更有效定位设计系统的发展方向、持续迭代成为我们思考的重点。

一、为什么要做设计系统度量 度量是一种测量或评价特定现象或事物的方法，而体验度量则是一种可靠的测量或评价体验的方法与数据体系，使得体验可被测量、量化并以数据的形式表示出来。

管理学大师彼得•德鲁克：无度量、无改善。设计系统无疑是一个动态发展的，是不断演进的一个生态。在百度商业团队Light Design设计系统建设初步完善后，我们希望通过行之有效的度量，来进行可测量、可量化、可持续的监测，从而对设计系统进行全面评估，明确下一步重点的投入方向。这对我们设计系统管理和迭代非常有必要。

二、如何建立设计系统度量 1. 现有度量模型研究

在构建度量体系之前，我们先回溯已有的度量模型。了解当前市面上以及学术上已有的成熟度量模型。并带着以下 2 个问题进行研究：

行业中已有的度量模型有哪些？ 设计系统度量是否可以依照现有度量模型展开？

当前业界较为典型常用的模型体系：例如 HEART + GSM 模型、PTECH 模型、《云计算软件产品使用体验质量度量模型及度量方法》。

产品体验度量设计指南（一）：谷歌HEART模型 随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大企业的关注点聚焦到了如何获取企业及行业利润上来。

阅读文章 >

设计师和产品想法不一致怎么办？试试谷歌的GSM模型！ 我们为什么要使用 GSM 模型 常规工作中，需求往往由 PM 发起，UE 团队到底如何跟 PM、FE 等团队成员协同，达成目标共识，是我们值得讨论的。

阅读文章 >

通过对比分析模型维度、具体指标和方法，我们发现：

较为典型常用的模型是面向具体商业产品和用户，但针对设计系统的度量很少涉及。 常见度量模型建构的方法是有一定共性特征，我们可借此指导建构设计系统度量模型。 在维度的划分上：根据不同的产品场景与业务属性来提出。例如 GSM&HEART 模型更加注重用户行为和感受，因此维度划分包含了愉悦感、参与度和接受度。而作为服务于企业中后台产品的 PTECH 模型和云计算产品模型，在维度划分上有倾向性的加入易用性、任务效率、和性能。

指标推导与方法选取：度量具体指标的推导方式多是通过 GSM（目标-信号-指标），通过结合具体产品的特性与场景，具像化的处理并拆解维度，推到出相关的目标、信号和指标，来实现对目标的衡量。同时，在度量方法选取上，上述三个模型实践都做到了客观与主观评估方法的全面覆盖。

2. 设计系统度量的建构

根据以上调研，我们认为：现有度量模型评估的对象、内容和方法是面向用户群体，并针对具体业务或产品；而设计系统的度量则是：通过全面科学的度量体系，评估设计系统在工作流程与业务侧应用的表现，验证其价值，并判断在应用中存在的问题。

我们基于百度商业团队 Light 设计系统发展和预期目标，构建了一套度量设计系统的评估体系。具体构建过程分四步进行：

Step 01. 盘点当前现状：

通过盘点对设计系统的各项内容、困惑问题等，以此明确设计系统需要度量对象和内容。根据设计系统标准化建立指南（Invision，2020）所提出：设计系统在不同发展阶段，需要到达标准的依据以及设计系统应包含的内容。结合我们设计系统当前发展的情况，将百度商业团队设计系统内容拆分为原则规范（Principle）、设计资产（Asset）、设计工具（Tool）、维护管理（Support）四大板块。由此，明确我们度量设计系统的具体内容，并将我们设计系统度量定义为设计系统 PATS 度量体系。

Step 02.制定度量维度：

在明确度量对象内容后，结合我们设计系统的目标，将度量体系聚焦五大维度：

通用性：是否能全面覆盖商业业务需求；并适应不同业务的变化，灵活可拓展 易用性：在使用设计系统时，设计系统是否容易被理解和使用 效率：通过使用设计系统，是否能提升工作效率 可靠性：系统是否安全可靠、有人维护的 满意度：对使用设计系统的满意程度

Step 03.明确目标、信号与指标：

在不同维度下，依照 GSM 模型的方法具体推导出指标和度量方法。具体实施的过程是：罗列出度量内容在维度上所期望的目标，以及表现出的信号，来推到出具体指标。整个过程中，做到「贴近系统目标，紧扣度量内容」。

Step 04.选取度量方法：

对应上述的划分维度和指标，设计特定的度量问卷，采用主观评分的形式持续跟踪使用者们体验分数变化，从而监控设计系统在我们工作流程中的运行情况。并结合定性访谈，对薄弱内容深入探究，了解具体原因。此外，我们也引入客观度量方法，对组件应用表现的客观数据进行监测，来反映其灵活度情况。

三、PATS 度量落地实践 构建设计系统 PATS 度量模型后，持续开展度量实践，度量模型与评估方法得到初步验证，确定设计系统度量体验分的基线；并了解当前系统发展不足的地方，明确短期解决方案以及⻓线行动规划。

第一次度量实践中，对比本次度量的平均分发现：易用性与可靠性维度远低于平均分，存在明显的短板。于是，重点针对短板问题，一方面，通过定性访谈对具体问题归因，找准痛点，制定出应对方案；另一方法，调研先进设计系统的建设方法，学习管理经验，给出具体的改善措施。

通过半年执行改善措施后，再次度量时，聚焦分值的变化观测到：执行相应的措施和决策后，分值有了明显的变化。例如，通过切换 Figma 工具作为 Light 设计系统相关资产的载体，利用其优势将设计系统内容根植到工作流程，使得易用性维度提升幅度非常显著。在一定程度上，验证了工具切换决策的价值。但易用性维度分值依旧较低，有可提升空间，还需持续优化。

此外，成立 Light 设计系统维护小组，制定维护管理建设机制，明确双周更新通知，统一日志记录模板，明确各项负责人等，推动可靠性维度得分提升显著。通过 PATS 设计系统度量，既为我们指明了下一步改善的方向，也对设计系统的发展决策进行验证。

总结 在建立设计系统 PATS 度量后，实现了全面并精准的监控和管理，并指引我们提出可提升系统体验的决策与方向。而设计系统是复杂的，也是不断变化、演进的。未来设计系统 PATS 度量的方法也会随设计系统的发展而逐渐丰富，来获取更全面的数据。最终，帮助团队更好地推进设计系统的建设，提升设计系统的成熟度，推进设计系统向一个良性循环的方向前进。

欢迎关注作者的微信公众号：「百度MEUX」

大家好，这里是和你聊设计的花生~上次向大家推荐了配色神器 Palettemaker，它最大的特色可以将配色方案自动应用到海报、插画、图案等设计模板上，让用户实时预览配色方案的大致效果。今天再为大家推荐一个我最新发现的配色工具 「Color-editor」 ，它允许用户上传自己的文件，并利用预设的配色方案对其进行上...

大家好，这里是和你聊设计的花生~

上次向大家推荐了配色神器 Palettemaker，它最大的特色可以将配色方案自动应用到海报、插画、图案等设计模板上，让用户实时预览配色方案的大致效果。今天再为大家推荐一个我最新发现的配色工具 「 Color-editor 」 ，它允许用户上传自己的文件，并利用预设的配色方案对其进行上色。

拯救配色废！让配色效率暴涨10倍的预览神器 Palettemaker 大家好，这里是设计神器挖掘前线记者花生为您发回的实时报道 ~ 配色一直是我们设计师比较关注的话题，可能大家都收藏了很多个自动生成配色方案的网站，但会发现在网站上看着不错的配色用起来却不太行，没办法就只能再重新找，非常浪费时间。

阅读文章 >

Color-editor 网址直达： https://iconscout.com/color-editor

Color-editor 是国外的一个设计资源网站 iconscout 开发的一款色彩编辑工具，可以对 SVG 格式的文件自定义上色。这意味着我们可以将自己的 SVG 文件上传到网站上，利用网站预设的配色方案进行一键上色，非常适合 UI 图标、UI 插画等矢量文件的快速配色。下面一起来看看这个神器怎么使用吧~

1. 使用介绍

进入网站后，首先点击上传本地的 SVG 文件，然后会出现如下界面，网站的调色功能集中在左侧工具栏，调色效果会实时展示在右侧的窗口，点击面板顶部的左右箭头可以撤销&还原炒作，点击「重置」可以一键还原到最初的配色。

Color-editor 一共提供 3 中着色模式，分别为彩色模式，单色模式和灰度模式，适合不同的配色需要。

① 彩色模式（color tone）

进入彩色模式后，网站会自动给出 200+种预设的配色方案，点击其中一种就能将配色应用到 SVG 文件中。

由于预设配色只有 4 种颜色，如果你觉得应用效果不是很完美，可以在左侧的「item colors」里对画面的任意一种颜色进行单独调整，让整体的配色更加和谐。

如何设计B端色彩体系？3个步骤帮你掌握起来！ 编者按：B端设计的色彩体系如何构建？

阅读文章 >

② 单色模式（monochrome）

当进入单色模式后，画面中的颜色就只剩一种颜色，而在色彩的饱和度上有所差别。此时我们可以通过色相滑块修改色彩，以及整体降低色彩的饱和度，使配色更加和谐。

感觉这个功能很适合对个 UI 图标进行批量上色——将多个图标一起导出为一个SVG文件，然后上传到网站选择一个主题色就能实现快速上色，整体风格统也会统一，还可以重新下载为SVG格式，方便后期编辑。

③ 灰度模式 （graytone）

进入灰度模式后，画面中的色彩饱和度会处在一个很低的范围，即使改变色相也只能看出一些细微的变化。可以调节左侧的 TONE VALUE 选项，可以把饱和度调整为零。

除了一些简单的的图标和元素，Color-editor 也可以为画面更加复杂矢量插画进行上色。需要注意上传的插画本身需要有不同的上色的区分，否则网站会无法识别。上色完成后，点击网站右下角的下载按钮就可以将保存文件，网站提供下载 PNG、SVG 和 PDF 三种格式。

好啦以上就是今天的 配色神器 推荐，喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友。有关本文或设计的问题可以在评论区提出，我会第一时间为回复 ~

推荐阅读：

Banner设计保姆级全方位教学！万字干货！ 编者注：Banner设计看似简单，实则囊括了平面设计、设计心理学、用户研究、文案设计等多领域的知识点，本文用1万2千字的超长篇幅，帮你从零开始掌握Banner设计。

阅读文章 >

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（三） 大家好，我是和你聊设计的花生~ 之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。

阅读文章 >

最近在学习大厂设计系统时，发现了 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的设计思考」