组件库设计复盘 + 译文分享

Posted 2023-02-14

参考技术A

译者前言：
作为一个外包中级UI刚到客户公司(传统制造业大公司)不久的时候主力设计了一套2B的移动的UI组件库规范。
从公司人员结构及使用场境出发。以提高复用性、提高效率、降低用户学习及识别成本为目标导向。产出了使用同一套UI标准的针对设计师的Sketch组件库、针对交互及产品的Axure组件库、针对开发使用的PIX组件库。

经宣讲和意见收集产品和开发推行有一定成果。但仍有不少人吐槽：
1、产品端现状： 吐槽主要集中组件库不能覆盖某些常见的业务场景和需求。因此经理们经常要求我们把市面上不太常规的操作增加至组件库中。
我们的囧境： 由于公司涉及的业务内容较多，我所在的UED部门由于不太能接触到具体业务场景，所以难以甄别经理所要求的组件是否具有复用性。因此我认为组件库团队中需要有项目经验丰富的产品经理作为顾问。
2、开发方面： 逻辑固定不大及展示类小UI组件使用较多（如toast、下拉刷新、），但那些组件间有强逻辑绑定、经常定制化的，例如单选多选弹窗等，因为怕有坑怕麻烦。宁愿自己手写。
我的见解： 对于逻辑比较复杂、变化灵活的组件，有2条道路可以选择：
1是不封装逻辑，完全退化为UI样式封装。只提供样式模型，变换逻辑自己填充。（即使日后进行逻辑封装也要留下自己DIY逻辑的可能性）
2、若要进行逻辑封装，需要对业务场景非常熟悉很有经验的前端工程师思考总结出最常用的场景进来进行。并留出变换逻辑DIY的可能性。
3、设计的方面： 由于这是我直接能亲耳听到的吐槽，所以记录、思考得比较详细，主要有以下方面：
1）组件库难用
我的见解： 这里面有2个客观原因和1个主观原因。
一是互联网泡沫破灭前，先进的设计团队管理经验没有回流到制造业的客观原因。我进来，客户公司的设计团队对Sketch工具并不熟练、设计师比较各自为政，不习惯统一的规范。二是在设计工具市场由于盗版和开源化等，没什么肉。一些组件库工具发展缓慢，造成组件库分享及使用体验不太好。例如蓝湖规范云是在我组件库开始后2个月才开始发布。Sketch弹性组件属性也是组件库计划开始后才发布。
主观原因是组件库的分类组织方式不太符合团队客观状况，由于我上一家公司是外资小团队。我出于避免组件名称歧义及方便开发的目的，对组件和图标使用了英文+BEM命名方式。导致不直观、文案过长。很多设计师找组件、图标不方便。
2）组件库丑
我认怂： 由于我进来做的第一个项目使用了渐变和阴影。跟一位负责工厂及物流应用的经理起了冲突。我了解到客户公司的2B产品除了面对在总部办公的白领外，还面对一大部分的工厂工人。他们的手机状态及网络环境未必比得上总部办公楼。所以在UI设计上我用了简单、老套、减少歧义、降低学习成本、增加复用性的设计原则。在时尚和美观度方面确实考虑较少。现在看来确实有一些组件的设计可以在不影响以上原则的前提下提高一下。
3）组件库限制了我
一些思考： 我在设计组件库的时候留了一些可以样式定制化的插槽。例如，颜色、图标都可以切换。若能熟练运用不至太影响终稿的设计效果。另外，我认为组件库和规范更像工具而非镣铐。若组件不能满足设计要求。可以在规范范围内，对组件进行重组，使之符合场景需求。同时，若有更好，使用场景更广的点子和建议，可以反映到交流群里使之成为规范。被更多人使用。

第一次做大项目，听到很多人不停的吐槽。让我个人产生了一定的迷茫。看了Airbnb官网上的这篇文章。其中一段话使我廓然开朗。

一个全公司使用的设计系统，只有2、3个少数的人来参与，那是不可能民主科学的。必须要让尽可能多的人来参与发表意见。建立健全的反馈讨论社区才是王道。

现分享原文及译文如下，跟同迷茫的小伙伴互励互勉：

Design Language Systems are unique. Some companies create systems for efficiency and reuse, and others make them to express their look and feel. While the goal may differ, all systems have something in common—people need to be able to use and grow them. If we only spend time designing product components, we aren’t designing the invisible human components : the overall relationships between the system and the teams who adopt it.
每个设计语言系统都是独特的。一些公司创造自己的设计语言系统是为了提高效率和复用性，而另一些公司是为了表现他们的形象和理念。尽管目的并不一致，但所有的系统都有一些共通点 —— 都需要被人使用和扩充。如果我们只把时间花在产品概念设计上，就相当于忽略了 无形的人的部分 ：设计系统与使用该系统的团队的总体关系。

The system serves people, not the other way around . It’s the designers and engineers, the real customers of design systems, who need to be at the center of our work. With a storied background in this space , Yujin Han and I—Design Manager and Experience Design Lead , respectively —know the challenge of getting teams to contribute. So now we’re asking ourselves, “How might we set teams up for success by helping them incorporate our design language system (DLS) in their daily work?” Here’s how we’re evolving our model to be inclusive and empower teams to engage with the system.
系统服务人员，而非 反过来 。设计师和工程师们是设计系统的真实用户，设计系统的建立应以他们为中心。 在这样的背景下 ，Yujin Han 和我——设计经理及体验设计 负责人 ， 各自都 ——意识到要动员整个团队是有一定挑战的。因此我们现在泯心自问“如何帮助他们把设计语言系统(DLS)吸纳到日常工作中，协助团队取得成功呢？”我们通过下面的方法，把设计模型发展的更具 包容性 ， 给予团队自主权 去使用我们的系统。

Back in 2016, a team of engineers and designers created the first version of our Design Language System (DLS) with the goals of creating consistent experiences and cross-platform unity . The company was growing and teams were moving fast. People needed a common language to stay in sync .
早在2016年，一个工程师及设计师团队创造了第一个版本的DLS，目的是创造 持续一致的体验 以及 多平台统一 。当时公司在扩张，团队的节奏非常快。人们需要一个通用的设计语言来 保持同步 。

Since we released the DLS in 2016, our design organization grew significantly . The system was valuable and in high demand —a wonderful problem to have—but we couldn’t keep up with the amount of requests coming in. New components were being made, but not documented . And files were being shared across teams, but without naming conventions . It was the wild west. We’ve evolved from a single app to a platform that supports multiple businesses—a shift that has us increasingly considering human needs over solely focusing on features. Collaboration across businesses is critical because we don’t want our community to experience chaos while we transform our technology behind the scenes. So, we created a feedback loop to bring everyone together.
自从2016年我们发布了该DLS，我们的设计机构 显著成长 了。这个设计系统非常有价值且人们对它 有很大需求 ——有这样的问题是件好事——但我们 没法跟上 持续增长的大量需求。新的组件做出来了，但没有 文档记录 。文件在团队里到处流传，但没有 命名规则 。混乱得恍如荒野西部。我们从一个单一的发展为一个支持多种业务的平台——一个使我们越来越关注人文需求而非只关注特性的转变。 跨业务 协作非常重要，因为我们不希望团队在幕后改造技术活时让我们的 社区 变得混乱。因此我们创建了反馈 循环 机制把每个人连在一起。

Last year, we tried a critique model so designers across Airbnb could meet together to share product feedback and systems thinking. We called this feedback loop the DLS partnership. It was off to a good start, but when people got busy, attendance dwindled. When we asked people why they stopped coming, they expressed that they were coming out of their own passion , but that it wasn’t required or expected of them .
去年，我们尝试建立了一个发评论的模块以便所有Airbnb的设计师可以聚集在一起分享他们对产品的意见和系统思维。我们把这称为DLS协作者的反馈循环机制。这本来是个很好的开始，但当人们忙起来，参者逐渐减少。当我们问他们为何不来了，他们反映道，他们是 出于热情 而来，但后面发现系统 并不符合他们的需求或期待 。

It was clear that designers wanted dedicated time to participate , and acknowledgement for their participation. Instead, the partnership felt like extra effort , so we researched and developed a few key themes for improving our relationships with teams.
显然，设计师们更希望 花时间参与 ，并通过自己的参与获得认可。而这种 协作 感觉是 额外的负担 。因此，我们研究开发了一些关键主题来 改善 我们与团队的协作模式。

Recognition
认可
What they said: Designers were unclear if leadership backed partnership with our team.
What we did: We sought buy-in from managers, and ensured they would recognize designers for their involvement.
他们这么说：设计师们不清楚他们的领导支不 支持 与我们团队的协作.
我们这么做：我们应该先寻求经理 支持 ，保证他们认可设计师的参与。

Accountability
责任
What they said: While we gave a lot of critique, designers didn’t know what feedback to prioritize and when to turn advice into action .
What we did: We set actionable goals and tracked them so designers knew exactly what to focus on .
他们这么说：当我们给出很多评论，设计师们不知道反馈的 优先级 ，不知道何时把建议 付诸实践 。
我们这么做：我们设置可行的目标并跟踪全过程，因此设计师们能知道应该 关注 什么。

Collaboration
协作
What they said: Designers were eager to work together, and share their results with other teams.
What we did: We started providing opportunities for people to create shared projects and learn from each other.
他们这么说：设计师们 迫切渴望 一起工作，并与团队分享他们的成果。
我们这么做：我们开始提供给设计师创作并分享项目相互学习。

Partnership with designers was key, but getting buy-in from managers would make or break the program . We wanted to shift the collaboration mentality from nice-to-have to necessity . So we brought managers together before we kicked off the program, and asked them to nominate one or two designers on their team to participate. To build excitement, we also asked them to host small celebrations with their team to acknowledge their designers’ new roles.
与设计师之间的合作是关键所在，但从经理们中获得支持是 项目成败的关键 。我们想把合作心态的从“最好能有”变为“ 必须要 ”。因此我们在项目开始前把经理人聚集在一起，并套球他们从各自团队中 提名 一到两位设计师来参与。为了提高兴奋度，我们要求他们举行一个小 庆祝仪式 来 告知 设计师ta将有一个新的角色。

We announced the program launch with an invitation that welcomed partners to collaborate with us. As a design-led organization, we design everything —from emails and platforms to meetings and internal programs. In the fall when the program came to a close, we wrote performance evaluations for each partner so their managers could understand their contributions .
我们宣布项目 启动/落地？ 时，向协作者发出合作邀请以欢迎他们。作为一个 主导设计 的组织，我们设计“所有东西”——从邮件到平台、从会议到内部项目。在秋天，当这个项目接近结束时，我们给每一个参与者写了 表现评价 ，确保他们的经理人知道他们作出的 贡献 。

During the kickoff meeting, we asked designers to post ideas and vote on how to improve the design system—such as building a pattern library or researching product theming . This democratic process empowered people to work together on these improvements. The meeting agenda played a big role in the design of the program. Our goal was to help designers make time to work together and apply systems thinking to real projects . We also wanted to provide a space where people could learn from each other. Our agenda broke down into these activities: gratitudes (foster community, inspire reflection) , open forum (create a market for collaboration), stand up ( track progress and unblock work ), heads down time (works on DLS with partners), action items (plan next steps and milestone), and share outs ( give and receive critique on work ).
在 启动 会议中，我们要求设计师po出自己的想法并投票选出完善设计系统的方法——例如建立一个 样式库 或 研究产品课题 。这个民主的进程允许人们合作起来改进系统。这种会议议程是我们项目的一个重要环节。我们的目标是帮助设计师抽出时间来共同工作，并 将系统思维应用到实际项目中 。同时我们也希望提供一个空间以供人们互相学习。我们的 议程可以分解为 以下的活动： 致谢(激励团队，激发反馈) 、 开放式讨论 (创造一个合作的大环境)、确立( 跟踪进度，扫清障碍 )、埋头苦干(与搭档一起着手干好DLS)、行动项目(计划下一步行动及里程碑)、分享( 给予并接受工作评价 )。

Each week, we’d ask our partners if they had feedback to improve the meetings. For example, partners wanted to know if other teams were working on similar challenges, so collaborative open forums were born. By prototyping meetings in real time, we were able to adapt to people’s needs. We wanted the meetings to be productive , but more importantly, we hoped to foster relationships . With fun project team names like Fabric and Tapioca, a bi-weekly batch of bubble tea, and occasional balloons, we designed a cheerful, welcoming environmen t.
每周，我们都会询问合作者是否有提高会议效果的反馈意见。例如，合作者希望知道其他团队是否有类似的挑战，为此诞生了 协同开放讨论会 。通过即时 简易 会议，我们能够适应人们的需求。我们希望会议 成果累累 ，但更重要的是我们希望 促进关系 。通过（取）一些有趣的团队名字，例如“Fabric”和“Tapioca”，两周一批的气泡茶和随性的气球装饰，我们设计了一种 活跃温暖的氛围 。

In addition to the partner meetings, we piloted co-design sprints. For two weeks, a product designer and system designer sat side-by-side to co-create a new filter sidebar so our guests can more easily find homes and experiences. The sprint included a debrief with the product research team , and user testing by the end of the first week.
除了伙伴会议，我们主导了合作设计冲刺活动。每2周，一位产品设计师和一位DLS设计师会排排坐，一起协同创作出一个新的筛选侧栏，以让我们的顾客更容易找到“民宿”和“体验”服务。这个冲刺活动包括 向产品研究团队报告 以及第一周结束前的用户测试。

There were also daily desk critiques with managers. This allowed designers to receive nearly real time feedback, and to keep moving things forward . In the second week, the product-and-system pair presented their work to their respective teams together, and received guidance from engineering, data science, and content strategy. As a result of the co-design sprint and support from additional teams, the pattern was updated in the product and submitted to our DLS component template for all teams to use.
同时我们每天会与经理人们有一个 面对面的评论会 。这让设计师们可以几乎即时地接收到反馈，并 推进进程 。第二周，“产品-系统”搭档会一起向各自的团队展示他们的工作成果，同时接受工程师、数据研究员、内容策划人的指导意见。作为协同设计冲刺的努力以及其他团队的支持的结果，产出的样式会被更新并 提交到 我们的DLS 组件模板 中，以供全部团队使用。

Tracking outcomes helps us prove the program’s value. Another early, powerful outcome of the program was the improvement of our selection patterns . Lesar Stepputat, an Experience Designer on Airbnb’s Payments team, was already working to improve drop down selection states on his team. Through our program, he ambitiously scaled his impact to improve the pattern across the entire Airbnb product.
追踪产出 能帮助我们验证这个项目的价值。另一个早期强有力的产出是我们的 选择组件样式 的 改进 。Lesar Stepputat，Airbnb支付团队的一位体验设计师，已经在着手改进团队 下拉选择状态 组件了。通过我们的项目，他雄心勃勃地在调整Airbnb全线产品样式方面 扩大自己的影响力 。

One of our success metrics of the partnership was attendance. While the first version of the program had fallen to just a few people attending meetings , our efforts resulted in an average of 60-70% of partners regularly participating. We also created a survey to collect open-ended feedback . Over half of the dozen respondents highly recommend the program. The survey also showed that the program cultivated strong relationships in the community. One partner even noted that ‘this has been the single most effective change brought to the DLS in a year and a half’.
出席率是我们成功的伙伴关系 指标 之一。虽然项目的初期只选定了少数人会 参与到会议中 ，但经过我们的努力后合作伙伴的常规参与率平均数达到了60%-70%。同时我们创建了一个问卷调查，收集 开放式的反馈意见 ， 超过半数 的被访者 高度评价 这个项目。这个调查也表明，本次项目在社区中的员工中建立了强有力的合作关系。一位成员甚至写到“这是一年半以来DLS 最有效的转变 。”

While the initial positive response was a strong start, we also found areas for improvement . One thing we consistently heard from the partners was a desire for the DLS team to develop an openness to feedback when sharing work, and for feedback to be shared earlier in the process .
尽管 最初的 积极反馈是个很好的开始，我们仍找到其他 提升空间 。我们长期收到伙伴反馈，希望DLS能建设一个 开放平台 ，以便他们分享作品或在 项目早期阶段收集反馈意见 。

Now,*** we’re iterating to evolve*** the partnership.
现在我们 正在逐步促进 伙伴关系。

Through this process, we learned that with an inclusive mindset , we can effectively build partnerships that results in a healthy community and actionable outcomes .
通过这个流程，我们学习到： 保持包容的心态 ，我们可以有效地建立伙伴关系，最终可建立健康的社区关系及 可行的产出 。

For a robust design system to work, a company needs a mature culture that empowers people develop the system together. Without this, designers may feel like the system is limiting or blocking their creativity. Our intent is to continue to support teams as they build a sustainable design system community together.
一个 充满活力的 设计系统的运作，要求公司有 成熟的企业文化 ，允许员工共同拓展系统。 否则，设计师将认为这套系统是在限制或阻碍他们的创意。 我们的 初衷 是持续的支持整个团队来共同建立 可持续的 设计系统社区。

一个有机的共同体

Creating and maintaining a design system is like planting a tree—it has to be nurtured and cared for to reap the benefits. The seed of our design system has been planted, and now our teams are working together to maintain and grow it. Our new way of working gives people recognition , facilitates trust , and creates strong partnerships. By committing to learn from each other and measure progress together, we’re able to provide a better experience for our teams, and for the entire Airbnb community.
创造及维持一个设计系统就 像是植树——必须要呵护和滋养才能收获到好处。 我们设计系统的种子已经种下，现在我们的团队正共同协作来维护及壮大它。我们的新工作方式给予人们 肯定 ， 促进信任 ，形成紧密的合作关系。通过一起 参与 相互学习及衡量进度。我们能为团队及整个Airbnb社区提供更好的体验。