拥抱变化：科技设计的核心精神

I think working in tech as a whole is a place where you really need to embrace change. 我认为在整个科技行业工作，是一个你真正需要拥抱变化的地方。

New technologies come out all the time. 新技术层出不穷。

There are just sometimes some bigger steps and bigger moments, like we're having right now. 有时会出现一些更大的进步和重要的时刻，就像我们现在正经历的。

So I think good design is about meeting the moment as a designer. 因此，我认为好的设计在于作为一名设计师，能够顺应时代潮流。

You more or less have to use the same tools that engineers do. 你或多或少地需要使用工程师所用的相同工具。

My idea of a great Friday night was building something on my laptop. 我理想中的一个美好周五夜晚，是在笔记本电脑上搭建一些东西。

Some of my friends would think, "What's wrong with you? Why aren't you out partying?" and I was having fun. 我的一些朋友会想：“你怎么了？为什么不出去玩？”但我乐在其中。

Something about using GitHub and being in the same place as engineers just sort of sparked this excitement and interest in me. 使用GitHub并与工程师在同一个平台工作，某种程度上激发了我内心的兴奋和兴趣。

So being comfortable with code and being comfortable with working with new technologies is going to give you a leg up in terms of designing for AI experiences. 因此，熟悉代码、乐于与新技术打交道，将在设计人工智能体验方面为你带来优势。

Remember that a lot of the core skills of a designer remain. 请记住，设计师的许多核心技能依然存在。

They're still needed. 它们仍然是必需的。

So building empathy for the customer experience, being good at storytelling and communicating ideas, being creative, and knowing how to get from a blank page or an ambiguous problem to something that is a great solution. 这包括为客户体验建立同理心，擅长讲故事和沟通想法，富有创造力，并且知道如何从一张白纸或一个模糊的问题中找到一个出色的解决方案。

初识GitHub与设计之路

I'm Diana, and I am the head of design at GitHub. 我是戴安娜，我是GitHub的设计主管。

GitHub is a tool for building software. GitHub是一个用于构建软件的工具。

It supports the whole SDLC (Software Development Life Cycle: 软件开发生命周期), from idea to fully-fledged project. 它支持整个软件开发生命周期（SDLC: Software Development Life Cycle），从构思到成熟的项目。

It's where people can collaborate on code and take an idea into a fully-fledged project. 在这里，人们可以协作编写代码，将一个想法转化为一个完整的项目。

I've been at GitHub for almost 9 years. 我在GitHub工作了将近9年。

In my time there, I have helped build out the design system (设计系统: 一套可重用组件和指南的集合，用于在产品中保持设计一致性) called Primer, turning that from a CSS (Cascading Style Sheets: 层叠样式表) framework into a fully-fledged ecosystem of components and tooling. 在此期间，我帮助建立了名为Primer的设计系统，将其从一个层叠样式表（CSS）框架发展成为一个由组件和工具组成的完整生态系统。

I led the team that delivered dark mode in 2020, which was something that people really wanted at the time. 我领导的团队在2020年推出了暗色模式，那是当时人们非常非常想要的功能。

We work on everything from onboarding to marketing to the actual product experience. 我们的工作涵盖从用户引导、市场营销到实际产品体验的方方面面。

When I was younger, I didn't really know web design and graphic design could be a career. 我年轻时，并不真正知道网页设计和平面设计可以成为一种职业。

I sort of stumbled across it by doing an apprenticeship in a design and print shop and realized that working on the web and with graphic design was the perfect type of role for me. 我通过在一家设计和印刷店实习偶然发现了它，并意识到从事网页和平面设计对我来说是完美的工作类型。

It was both a bit technical and creative. 它既有点技术性，又富有创造性。

It was the perfect marrying of the things that I was interested in. 这完美地结合了我所感兴趣的事物。

When I was in my early 20s, I decided I wanted to go and explore more of the world. 在我二十出头的时候，我决定要去探索更广阔的世界。

I picked Australia for a couple of reasons. 我选择澳大利亚有几个原因。

One, I wouldn't have to deal so much with the language barrier, apart from some fun slang words and different accents. 第一，我不需要过多地应对语言障碍，除了学习一些有趣的俚语和不同的口音。

It seemed like there were potentially some good job opportunities there. 那里似乎也有一些不错的就业机会。

Back in the UK, there was a bit of a recession starting to happen, particularly in the print industry. 当时在英国，经济衰退开始显现，尤其是在印刷行业。

A lot of people were saying, "Print is dead. The web's going to take over." 很多人都在说：“印刷已死，网络将取而代之。”

So, part of my reason for choosing Australia was that maybe I'd find a job there. 所以，我选择澳大利亚的部分原因是，也许我能在那里找到一份工作。

Maybe it would just be a great experience to see another country and to test myself a bit to see if I could do that on my own. 也许只是想体验一下另一个国家，并稍微考验一下自己，看看我能否独自做到。

So, I bought a one-way ticket and hopped onto a plane, and I never really looked back. 于是，我买了一张单程机票，跳上飞机，从此再也没有回头。

I was really fortunate to end up finding a great job there. 我很幸运最终在那里找到了一份很棒的工作。

A little bit later, after I had been there for 7 or 8 years, I started to get more interested in tech and ended up feeling like we weren't moving as fast as I wanted to in the agency I was working in at the time. 后来，在我待了七八年后，我对科技越来越感兴趣，最终觉得当时我所在的公司发展速度不如我所愿。

My idea of a great Friday night was building something on my laptop, and some of my friends would think, "What's wrong with you? Why aren't you out partying?" But I was having fun, and I felt like I wanted to be around more people who were interested in technology. 我理想中的一个美好周五夜晚，是在笔记本电脑上搭建一些东西，而我的一些朋友会想：“你怎么了？为什么不出去玩？”但我乐在其中，我感觉自己想和更多对技术感兴趣的人在一起。

Early on, I was introduced to Git (一个分布式版本控制系统) and GitHub while I was at a hackathon (黑客马拉松: 开发者在短时间内集中开发项目的活动) competition. 早些时候，我在一次黑客马拉松比赛中接触到了Git和GitHub。

The engineers were using GitHub and suggested I sign up because I knew a bit of front-end development (前端开发: 构建网站或应用程序用户界面的工作), and then I could be working in the same place as them. 工程师们正在使用GitHub，他们建议我注册，因为我懂一点前端开发，这样我就可以和他们在同一个地方工作了。

Something about using GitHub and being in the same place as engineers just sort of sparked this excitement and interest in me. 使用GitHub并与工程师在同一个平台工作，某种程度上激发了我内心的兴奋和兴趣。

So I started to put my websites on GitHub. 于是我开始把我的网站放到GitHub上。

I learned things like Jackyll, which was a static site generator that GitHub made. 我学到了像Jackyll这样的东西，那是GitHub制作的一个静态网站生成器。

I think there's something exciting about being able to take an idea you have in your head, make it, build it, put it out there on the internet, and have other people use it. 我认为，能够把你脑海中的想法付诸实现，构建它，然后发布到互联网上供他人使用，这本身就是一件令人兴奋的事情。

There's something that feels really great about that, as compared to just being able to make a picture of something. 与仅仅能制作一张图片相比，这感觉真的非常棒。

That just really excited me. 那真的让我非常兴奋。

缘定GitHub：Bootstrap与Octocat的魅力

What if I worked on a product that made such a big impact in my life that I use every day? 如果我能参与一个对我生活产生巨大影响，并且我每天都在使用的产品，那会怎么样？

Then Mark Otto sent me an email and said, "Hey, would you be interested in GitHub?" 随后，Mark Otto给我发了一封邮件，问：“嘿，你对GitHub感兴趣吗？”

Mark Otto was a bit of a celebrity to me because he had created Bootstrap (一个免费开源的前端开发框架), and if you were interested in design systems, you knew about Bootstrap. Mark Otto对我来说算是个名人，因为他创造了Bootstrap，如果你对设计系统感兴趣，你就会知道Bootstrap。

My immediate reaction wasn't, "Oh yeah, I definitely want to work here." 我当时的第一反应并不是：“哦，是的，我肯定想在这里工作。”

I would like to chat with this person who I think has done some great work. 我想和这位我认为做出了出色工作的人聊聊。

And in talking with Mark and some other design leaders at GitHub, I realized that this was such a good fit for me. 在与Mark和GitHub的其他一些设计负责人交流后，我意识到这非常适合我。

Then I thought about what I had been doing in my career and realized that so many signs were pointing towards GitHub. 然后我回顾了我的职业生涯，意识到有太多的迹象都指向了GitHub。

Aside from the actual product, I had an obsession with GitHub's mascot, which is the Octocat. 除了产品本身，我还对GitHub的吉祥物——Octocat（章鱼猫）——情有独钟。

I used to spend late nights just illustrating different variations of the Octocat just for fun because I loved the brand so much. 我过去常常熬夜，只是为了好玩而绘制Octocat的不同变体，因为我太喜欢这个品牌了。

So I said yes and took the plunge. 所以我答应了，并毅然投身其中。

We happened to have a brand that a lot of developers love. 我们碰巧拥有一个深受许多开发者喜爱的品牌。

It was kind of a happy accident. 这算是一种快乐的巧合。

The Octocat, which is our mascot, was picked from a stock illustration website and put on our 404 page (404页面: 当用户请求的页面不存在时显示的错误页面), and people kind of fell in love with it. Octocat，也就是我们的吉祥物，是从一个图库网站上挑选出来的，并被放在了我们的404页面上，人们很快就爱上了它。

We hired our first brand designer, I think in 2011, and they designed this amazing 404 page that really tapped into the developer mindset. 我们大约在2011年聘请了第一位品牌设计师，他们设计了这个令人惊叹的404页面，真正触及了开发者的心弦。

It had a Star Wars theme and said, "This isn't the page you're looking for." 它以《星球大战》为主题，写着：“这不是你要找的页面。”

With an Octocat that looked like a Jedi, it just tapped into nerd culture and met the moment well. 加上一个看起来像绝地武士的Octocat，它正好迎合了宅文化，也很好地顺应了当时的潮流。

优秀设计的标准与AI时代的挑战

So, I think good design is about meeting the moment. 所以，我认为好的设计在于顺应时代潮流。

I think it's about great experiences. 我认为它关乎卓越的体验。

What makes a great experience can be quite different for different types of users. 对于不同类型的用户来说，构成卓越体验的要素可能会大相径庭。

But yeah, I think it's about meeting that moment, making a great experience, deciding how you value the role of design in your company, and whether it is going to be that differentiator for you in having a successful product. 但是的，我认为这关乎顺应潮流、创造卓越体验、决定你在公司中如何定位设计的角色，以及设计是否会成为你成功产品的差异化因素。

As a designer, you more or less have to use the same tools that engineers do. 作为一名设计师，你或多或少地需要使用工程师所用的相同工具。

So being comfortable with code and being comfortable with working with new technologies is going to give you a leg up in terms of designing for AI experiences. 因此，熟悉代码并乐于与新技术打交道，将在设计人工智能体验方面为你带来优势。

广告：Lovable - 您的按需工程团队

As a founder, you already know ideas are the easy part. 作为一名创始人，你已经知道想法是容易的部分。

It's the execution, actually building the product, that slows everything down. 是执行力，是真正构建产品，拖慢了一切。

That's where Lovable comes in. 这就是Lovable的用武之地。

It's not just an AI (Artificial Intelligence: 人工智能) tool. 它不仅仅是一个人工智能工具。

It's your on-demand engineering team. 它是你的按需工程团队。

Simply describe your idea. 只需描述你的想法。

Lovable then builds a full frontend (前端: 负责用户界面的部分), backend (后端: 负责服务器、应用和数据库的部分), and database (数据库: 存储和管理数据的系统), so you can launch real, production-ready software without writing code. Lovable随后会构建一个完整的前端、后端和数据库，这样你就可以在不编写代码的情况下，发布真正可用于生产的软件。

It's already powering over 100,000 new products a day, helping 2.5 million builders turn ideas into software just by describing what they want. 它每天已经为超过10万个新产品提供动力，帮助250万开发者仅通过描述他们想要什么，就能将想法转化为软件。

No devs, no delays, no excuses. 没有开发者，没有延迟，没有借口。

They're launching in weeks, not months. 他们正在以周为单位发布，而不是月。

And guess what? These teams are still tiny. 你猜怎么着？这些团队仍然很小。

In fact, team EO is also using Lovable to build our upcoming EO school platform, and we're loving it. 事实上，EO团队也在使用Lovable来构建我们即将推出的EO学校平台，我们非常喜欢它。

If you're a non-technical founder or just want to build without bottlenecks, try Lovable today for free. 如果你是一名非技术型创始人，或者只是想消除瓶颈地进行构建，今天就免费试用Lovable吧。

Use the promo code EO2YPT to get 20% off your first purchase of the Lovable Pro plan. 使用优惠码EO2YPT，首次购买Lovable Pro计划即可享受八折优惠。

最难忘的项目：暗色模式的推出

The most memorable project for me was shipping dark mode. 对我来说，最难忘的项目是推出暗色模式。

It was memorable for many reasons. 它之所以令人难忘，原因有很多。

One, it had been something that customers had been asking for for quite a long time. 首先，这是客户长期以来一直要求的功能。

You felt a little bit of pressure about that. 你对此感到有些压力。

You'd think, "Oh my gosh, we've got to get this right." 你会想：“天哪，我们必须把这件事做好。”

The other thing was that unlike some of our other features, we had to keep it behind closed doors. 另一方面，与我们其他一些功能不同的是，我们必须对其保密。

There are many features where we try to loop in at least a few customers to get feedback before we ship something. 许多功能在发布之前，我们都会尝试至少邀请一些客户参与进来获取反馈。

And in this case, we wanted to do a big reveal. 但这次，我们想进行一次盛大的揭幕。

It was our big annual conference. 那是我们一年一度的大型会议。

This was in 2020. 那是2020年。

So, we also had to find other ways to get that right without getting direct feedback from customers. 所以，我们还必须找到其他方法来确保其正确性，而无需直接从客户那里获得反馈。

That was a little bit difficult because people have a lot of nuanced preferences, even in something like a dark mode theme on a website. 这有点困难，因为即使是网站上的暗色模式主题，人们也有许多细微的偏好。

So what we did is we looked for signals from how people had already made their own themes. 因此，我们所做的是寻找人们如何制作自己主题的信号。

There were Google plugins and other repos (repositories: 代码库) on GitHub that let people customize their user styles and override the GitHub styles to have a dark theme. GitHub上有谷歌插件和其他代码库，允许人们自定义用户样式并覆盖GitHub样式以实现暗色主题。

We noticed that there was variation. 我们注意到存在差异。

So some people liked a very close to pure black dark theme, and some people liked more of a lower contrast, dimmed theme. 有些人喜欢接近纯黑的暗色主题，而另一些人则喜欢对比度较低、更柔和的暗色主题。

So what we tried to do with the shipment was to ship something that we thought would look great because we knew this was going to get a lot of attention. 因此，我们试图做的是推出一个我们认为会看起来很棒的产品，因为我们知道这会引起很多关注。

And we also wanted it to be user-friendly for the variations of dark mode that people like. 而且我们也希望它能对人们喜欢的各种暗色模式都友好。

So what we went with is what we ended up calling a default dark mode that was fairly dark, finding that balance between not being so high contrast that it was too much for some people, and finding that middle ground. 所以我们最终选择了一种我们称之为默认暗色模式的方案，它相当暗，但我们找到了一个平衡点，既不会因为对比度过高而让一些人觉得刺眼，也找到了一个折中方案。

It was a really challenging project in terms of trying to find what was right for our customers and felt right for the product experience without getting direct feedback. 这是一个非常具有挑战性的项目，因为它需要在没有直接客户反馈的情况下，努力找到最适合我们客户并符合产品体验的方案。

So it meant taking a bit of a bet on which style of theme we would go with, and it also meant being prepared to fast follow. 所以这意味着我们要冒险选择一种主题风格，也意味着要做好快速跟进的准备。

So we built the system in a way that we knew we could add other things; once you add one, you can add multiple. 因此，我们构建系统的方式是，我们知道我们可以添加其他东西；一旦你添加了一个，你就可以添加多个。

It was a bit of a scary moment to launch that, wondering, "Do people like it?" 发布那一刻有点令人紧张，我们想：“人们会喜欢它吗？”

Years after that, the default dark theme was still the most popular theme. 几年后，默认的暗色主题仍然是最受欢迎的主题。

I think that is a signal that we got that right. 我认为这是一个信号，表明我们做对了。

Seeing something like 20% of people using that dimmed theme, we knew it was the right thing to do, as it still affects a lot of people, and it was right to be able to offer that other variation. 看到大约20%的人使用那种柔和的暗色主题，我们知道这是正确的做法，因为它仍然影响着很多人，而且能够提供那种其他变体也是正确的。

关注结果而非产出：衡量设计成功的标准

So I think focusing on outcomes, not output, is the key thing, and when you're beginning a project, you should be clear on what outcomes you're hoping to seek. 因此，我认为关注结果而非产出是关键，当你开始一个项目时，你应该清楚自己希望寻求什么样的结果。

For me, delivering good results means we've delivered a great end-user experience that solves problems for the customer. 对我来说，交付好的结果意味着我们提供了一个出色的终端用户体验，为客户解决了问题。

It's making something better about how they work. 它让他们的工作方式变得更好。

It's enabling them to do something that they maybe couldn't before. 它使他们能够做一些以前可能做不到的事情。

And I think another signal is that you feel proud of what you've shipped. 我认为另一个信号是，你为你发布的产品感到自豪。

You feel that not only does it solve a problem, but it also looks good and feels good to use, and it represents our brand well. 你觉得它不仅解决了问题，而且外观精美，使用体验良好，并且很好地代表了我们的品牌。

Those are the signals I look for: rather than just shipping something, did it actually solve a problem for someone, did it actually make a difference and improve the customer experience, and does it feel like it represents GitHub well? 这些是我寻找的信号：不仅仅是发布一个东西，而是它是否真正为某人解决了问题，它是否真正带来了改变并改善了客户体验，以及它是否很好地代表了GitHub？

Does it represent our brand well? 它是否很好地代表了我们的品牌？

GitHub设计系统Primer：协作与效率的基石

Primer, which is GitHub's design system (设计系统: 一套可重用组件和指南的集合，用于在产品中保持设计一致性), is essentially codifying patterns that can be used to design UI (User Interface: 用户界面). Primer，作为GitHub的设计系统，本质上是将可用于设计用户界面（UI）的模式进行编码。

It also acts as a language that is shared by designers and developers. 它也充当着设计师和开发者之间共享的语言。

So having both a language and a shared understanding is really valuable and often improves that working relationship as well as improving the end result. 因此，拥有共同的语言和理解非常有价值，它通常能改善工作关系，并提升最终结果。

And looking at their CSS and their front-end code, I remember thinking, "Huh, this could be improved." 看着他们的CSS和前端代码，我记得当时想：“嗯，这可以改进。”

What was in Primer wasn't representing the full product. Primer中的内容并不能完全代表整个产品。

So I just started poking around, suggesting some improvements to the CSS, and I found that there were quite a few other people at GitHub who also wanted to work on Primer and improve the front-end code. 于是我开始四处探寻，对CSS提出了一些改进建议，我发现GitHub上还有不少其他人也想参与Primer的工作并改进前端代码。

So we started this kind of grassroots team. 于是我们成立了这样一个基层团队。

So we just started to look for opportunities for improvement, divvy up the work, and keep moving things forward. 所以我们开始寻找改进的机会，分工合作，并持续推动事情向前发展。

What we tried to do was find things that would have the highest impact, focusing on what would address the biggest pain points. 我们试图做的是寻找能产生最大影响的事情，专注于解决最大的痛点。

Because when you are introducing changes to something like a design system, or introducing one for the first time, you are creating rules that people have to follow. 因为当你对像设计系统这样的东西进行改变，或者首次引入一个设计系统时，你是在创建人们必须遵循的规则。

And people will not always react to that in the most positive way. 人们对此并不总是以最积极的方式回应。

There are many different ways that you can design a single component, and many different ways that you could write the code for that. 设计一个单一组件有许多不同的方法，编写其代码也有许多不同的方法。

People have different preferences and opinions. 人们有不同的偏好和意见。

So what you want to do is try and win some friends and make it easier for them to use the design system than not to. 所以你想要做的是争取一些支持，让人们觉得使用设计系统比不使用更容易。

If the design and engineering teams are spending less time on recreating the same interaction pattern, they can spend more time on bigger problems and the overall experience. 如果设计和工程团队在重复创建相同的交互模式上花费的时间更少，他们就可以将更多时间投入到更大的问题和整体体验上。

约束下的创造力与AI时代的设计未来

A lot of people question and struggle with how to work with design systems and enable creativity. 很多人对如何使用设计系统并激发创造力感到疑问和困惑。

And sometimes you get people pushing back and rebelling against the system because they think that it's stopping them from being creative. 有时你会遇到人们抵制和反抗这个系统，因为他们认为它阻碍了他们的创造力。

I think constraints can actually lead to creativity. 我认为约束实际上可以激发创造力。

So if you are starting to create an illustration, for example, and we want to convey something that feels exciting and communicates that this is where the world builds software, there are a lot of things to think about regarding what that illustration needs to be. 所以，如果你开始创作一个插画，例如，我们想传达一种令人兴奋的感觉，并表达“这里是全世界构建软件的地方”，那么关于这个插画应该是什么样子，有很多事情需要考虑。

You don't necessarily need to start from scratch on picking those colors; if you're an artist, you have your paints ready at hand to work with. 你不一定需要从零开始选择颜色；如果你是一名艺术家，你的颜料就在手边，随时可以创作。

You can still find ways for creativity to come out of those constraints. 你仍然可以在这些约束中找到发挥创造力的方法。

Sometimes those changes in the system, those updates in the system, can inspire other product designers to think a little bit differently about how they're designing that particular user experience. 有时，系统中的这些变化和更新可以启发其他产品设计师，让他们对如何设计特定的用户体验有不同的思考。

If you're a designer or getting into design in the age of AI (Artificial Intelligence: 人工智能), you want to be curious and embrace the technology. 如果你是一名设计师，或者正在进入人工智能时代的设计领域，你必须保持好奇心并拥抱这项技术。

I think working in tech as a whole is a place where you really need to embrace change. 我认为在整个科技行业工作，是一个你真正需要拥抱变化的地方。

New technologies come out all the time. 新技术层出不穷。

There are just sometimes some bigger steps and bigger moments, like we're having right now. 有时会出现一些更大的进步和重要的时刻，就像我们现在正经历的。

And you should embrace that. 你应该拥抱它。

That's part of the fun of working in tech: there's something new to learn, some new possibility for solving a problem, some new way to create a solution. 这就是在科技领域工作乐趣的一部分：总有新的东西可以学习，解决问题的新可能性，以及创造解决方案的新方法。

And right now it's generative AI (生成式人工智能: 能够生成文本、图像或其他媒体内容的人工智能). 而现在，正是生成式人工智能的时代。

So designers are thinking, "Oh my gosh, what does this mean for me?" 所以设计师们会想：“天哪，这对我们意味着什么？”

I think, first, remember that a lot of the core skills of a designer remain. 我认为，首先，请记住设计师的许多核心技能依然存在。

They're still needed. 它们仍然是必需的。

So building empathy for the customer experience, being good at storytelling and communicating ideas, being creative, and knowing how to get from a blank page or an ambiguous problem to something that is a great solution. 这包括为客户体验建立同理心，擅长讲故事和沟通想法，富有创造力，并且知道如何从一张白纸或一个模糊的问题中找到一个出色的解决方案。

That, I think, is going to be pretty important. 我认为，这将会非常重要。

Especially right now, we're really at the forefront of evolving this technology. 尤其是在当下，我们正处于这项技术发展的最前沿。

It's pretty hard to really design a great experience without getting really close to it, because you need to try and navigate people through that complexity, trying not to let the complexity that's behind the scenes fall out onto the user interface. 如果不深入了解它，很难真正设计出色的体验，因为你需要尝试引导人们穿越这种复杂性，努力不让幕后的复杂性暴露在用户界面上。

So, it will be interesting to see how the tooling influences the role of design in the future. 所以，未来工具如何影响设计的角色，将是一件有趣的事情。