牢记昨天的教训_所有开发人员都应牢记的设计技巧

最新推荐文章于 2024-10-09 15:55:17 发布

cumifi2519

最新推荐文章于 2024-10-09 15:55:17 发布

阅读量692

点赞数

文章标签：大数据编程语言 python 人工智能 java

原文链接：https://www.freecodecamp.org/news/design-tips-for-developers-84239ca00bfe/

版权

牢记昨天的教训

by Wiki Chaves

通过Wiki Chaves

所有开发人员都应牢记的设计技巧 (Design tips all developers should keep in mind)

在理想的世界中，面向消费者的产品开发团队应该每四到六位工程师就有一位设计师。实际上，这种情况很少发生。因此，我写了一些技巧，这些技巧是团队中的设计短缺时任何工程师都可以遵循的。 (In an ideal world, consumer-facing product development teams should have one designer for every four to six engineers. In reality this rarely happens. So I wrote some tips any engineer can follow when there’s a design shortage on their team.)

语境 (Context)

I’m a product designer with a diverse background. I have worked in different industries from education and advertising to retail and technology.

我是一个背景多样的产品设计师。我曾在不同的行业工作过，从教育和广告到零售和技术。

I always thought of roles as a strict boundary between what my responsibilities are and what they’re not. As a designer, I would be in charge of design, and engineers would be in charge of coding. That helped me define my role and also have certain control over my responsibilities.

我一直认为角色是职责与职责之间的严格界限。作为设计师，我将负责设计，工程师将负责编码。这帮助我定义了角色，并对我的职责有了一定的控制。

Last year, while I was working at Airbnb — a tech company renowned for its design culture — I faced a big challenge. After my on-boarding week, I landed on a team with 12 engineers, one PM, one data scientist, one researcher, and just me as a designer. I freaked out a little bit. How was I going to satisfy the needs of my team?

去年，当我在工作的Airbnb -一家科技公司一向以设计文化-我面临的一大挑战。入职一周后，我加入了一个团队，这个团队有12名工程师，1名PM，1名数据科学家，1名研究员和我作为设计师。我吓了一跳。我将如何满足团队的需求？

I thought about three possible solutions.

我考虑了三种可能的解决方案。

Working more hours. That was my first instinct. If I had to deliver design for more than twice the ideal number of engineers, I would have to work many more hours. That would seriously affect my life/work balance and eventually burn me out.
工作更多时间 。那是我的第一本能。如果我要交付的设计数量是理想工程师数量的两倍以上，那么我将不得不花费更多的时间。那会严重影响我的生活/工作平衡，最终使我筋疲力尽。
Slowing down. If I wanted to keep working at my usual pace, I would end up being a human bottleneck. Design requests would start accumulating and I would never have the time to catch up (which would have a serious negative impact on our team goals).
放慢脚步 。如果我想继续按惯常的节奏工作，那最终将成为人类的瓶颈。设计要求将开始累积，而我将永远没有时间跟上(这会对我们的团队目标产生严重的负面影响)。
Letting go. As a designer, it’s hard to let go. We are proud to be the experts with the experience. Letting the whole team design felt like I was not doing my job properly, and of course, it had an impact on my ego. But with time, this proved to be the best approach.
放手。作为设计师，很难放手。我们很荣幸成为有经验的专家。让整个团队的设计感觉就像我的工作做得不好，当然，这影响了我的自我。但是随着时间的流逝，这被证明是最好的方法。

每个人都是设计师 (Everyone is a designer)

I’ve thought a lot about this subject, and I found a great article by Daniel Burka that ended up convincing me that this was the right approach. Everyone can be a designer.

我对此主题进行了很多思考，并且发现Daniel Burka撰写了一篇很棒的文章，最终使我确信这是正确的方法。每个人都可以成为设计师。

Letting go didn’t mean that I stopped caring about our design. But I had to enable and encourage the rest of the team to use their design mindset and propose solutions to user problems or business goals. In the end, the user who uses your product doesn’t care if one particular screen or flow was designed by a designer or not. They care about the experience they are having, and that’s not a one-person responsibility.

放手并不意味着我不再关心我们的设计。但是我必须让并鼓励团队的其他成员使用他们的设计思想，并为用户问题或业务目标提出解决方案。最后，使用您产品的用户不在乎一个特定的屏幕或流程是否由设计师设计。他们关心自己拥有的经验，这不是一个人的责任。

In order to do this properly, I gave a few design tips and tools to our team and scheduled design office hours once a week. This provided a fixed spot where everyone could come with their design ideas to discuss it and share feedback.

为了正确执行此操作，我每周一次向我们的团队提供一些设计技巧和工具，并安排计划的办公时间。这提供了一个固定的场所，每个人都可以带着他们的设计思想来讨论它并分享反馈。

This process ended up having amazing results. In just a few weeks, we witnessed how some of those ideas got shipped to production with positive results. We were moving way faster than before and the team was super excited to see their design ideas out there in production!

这个过程最终产生了惊人的结果。在短短的几周内，我们目睹了其中一些想法如何运用于生产并取得了积极的成果。我们以比以前更快的速度前进，团队为在生产中看到他们的设计想法感到非常兴奋！

可能的情况 (Possible scenarios)

Before jumping to the design tips for developers, I want to start by mentioning the possible scenarios you might face. This will depend a lot on what stage of the project you are in.

在转到针对开发人员的设计技巧之前，我想首先提到您可能遇到的可能情况。这将在很大程度上取决于您所处项目的阶段。

方案1-没有设计师。 (Scenario 1 - There’s no designer.)

Probably the most common scenario among early stage startups or student projects. Having no designer on your team means you are the designer! Do not freak out, and use this opportunity to learn. I’m sure that if you follow some simple rules you can deliver a cohesive MVP.

可能是早期创业公司或学生项目中最常见的情况。团队中没有设计师就意味着您是设计师！不要害怕，并利用这个机会学习。我相信，如果您遵循一些简单的规则，就可以交付具有凝聚力的MVP 。

At this stage, you are probably a very small team. Don’t spend a lot of time trying to build something beautiful, trendy, or eye-catching. Focus on building a great experience with a decent UI. You will have time to improve it later.

在这个阶段，您可能是一个非常小的团队。不要花很多时间尝试构建美观，新潮或引人注目的产品。专注于通过体面的UI构建出色的体验。您稍后将有时间对其进行改进。

方案2-大约只有10位开发人员只有一名设计师。 (Scenario 2 - There’s only one designer for roughly 10 developers.)

This happened to me last year, and your designer will certainly need help. How can you help? Propose ideas — don’t expect that everything will come resolved. Sit down with your designer and show them your ideas. They will definitely appreciate it. Join them in brainstorming sessions and give feedback. If designs don’t come fully spec’ed out, ask your designer for the source file and look at it yourself to save them some time.

去年，这发生在我身上，您的设计师肯定会需要帮助。您能提供什么帮助？提出想法-不要指望一切都会解决。与您的设计师坐下来，向他们展示您的想法。他们一定会感激的。加入他们的头脑风暴会议并提供反馈。如果设计没有完全规范，请向您的设计师索要源文件，然后自己查看一下以节省一些时间。

方案3-每4到6个开发人员就有一个设计师。 (Scenario 3 - There’s one designer every 4 to 6 developers.)

You are lucky, as this is an ideal scenario! It doesn’t mean you can fully forget about design, but it is no longer of primary concern. I would still recommend that you join the brainstorming sessions to propose ideas and to give early feedback from your engineer perspective.

您很幸运，因为这是理想的方案！这并不意味着您可以完全忘记设计，但是它不再是主要问题。我仍然建议您参加集思广益会议，以提出想法并从工程师的角度给出早期反馈。

开发人员设计技巧 (Design tips for developers)

Here’s a list of design tips that will help you if you find yourself in the no-designer scenario. But they can also be applicable in any other circumstance.

以下列出了一些设计技巧，这些技巧将在您遇到无设计人员的情况时为您提供帮助。但是它们也可以在任何其他情况下应用。

设计师心态 (Designer mindset)

If you are going to design, it’s very important that you think as a designer. When you are designing, don’t think about engineering problems, but think about how to solve user problems.

如果要进行设计，那么考虑作为设计师是非常重要的。在设计时，不要考虑工程问题，而要考虑如何解决用户问题。

The user comes first.

用户第一。

Let’s say you have to build a photo uploader feature. During your designer time you shouldn’t think about performance, code optimization, or platform limitations. Think about what is the most effective and intuitive way a user can upload a photo. Think about the user’s motivation to upload a picture. How can this process be straightforward and maybe even enjoyable?

假设您必须构建照片上传器功能。在设计人员期间，您不应该考虑性能，代码优化或平台限制。考虑一下用户上传照片的最有效，最直观的方式。考虑一下用户上传图片的动机。这个过程如何简单明了甚至令人愉悦？

Then, when you finish your design, wear your engineer hat and review what you just did, with your engineer perspective. Is this technically doable? How long does it take to build this feature as you’ve designed it? Do you have the time to build it? If not, can you reduce the scope a bit so you can reach your deadlines?

然后，当您完成设计时，戴上工程师的帽子，并从工程师的角度回顾您刚刚做的事情。这在技术上可行吗？设计此功能需要花费多长时间？您有时间建造它吗？如果没有，您是否可以缩小范围以达到截止日期？

It’s very important that you don’t cross the line between roles, or you will end up limiting your design because of engineering constraints or vice-versa. If it helps, you can try dedicating mornings for design time and afternoons for engineering time. Or you can use an area in your working space to do all the design work, and then move to a different area to do your engineer work.

不要在角色之间越界，这是非常重要的，否则最终会由于工程约束而限制设计，反之亦然。如果有帮助，您可以尝试将上午指定为设计时间，将下午指定为工程时间。或者，您可以在工作空间中使用某个区域来完成所有设计工作，然后移到另一个区域来进行工程师工作。

制定计划 (Build a plan)

If you have an idea, before jumping straight to the code, build a plan. You can do wireframes, use sticky notes, a whiteboard, or sketch on a notepad — that’s up to you. Don’t skip this step even if you think you have all the details in your head. When you finalize your wireframes, review it and you will probably notice you are missing something.

如果您有想法，请在跳到代码之前，制定一个计划。您可以根据自己的意愿来制作线框，使用便签，白板或在记事本上绘制草图。即使您认为自己掌握了所有细节，也不要跳过此步骤。当您最终确定线框时，请对其进行检查，您可能会发现您丢失了一些东西。

Balsamic is a good tool for rapid wireframing. You can also use Sketch or Figma for your whole design process from wireframes to production.

香醋是用于快速线框图的好工具。您也可以在从线框到生产的整个设计过程中使用Sketch或Figma 。

从框架开始 (Start with a framework)

Not having a designer on your team doesn’t mean you have to design everything from scratch. There’s a lot of already built frameworks that you can use as a starting point and customize them your way. Bootstrap and Foundation are my favorite ones, but there are plenty of them depending on the type of application you want to build.

在团队中没有设计师并不意味着您必须从头开始设计一切。您可以使用许多已经构建的框架作为起点，并以自己的方式自定义它们。 Bootstrap和Foundation是我最喜欢的，但是根据您要构建的应用程序的类型，它们很多。

If you are building a native app, I strongly recommend that you follow Material Design’s guidelines for Android and Human Interface’s guidelines for iOS. Start with following the native patterns as closely as possible, unless you explicitly want to build a unique UI, like Snapchat, or a game. Only after you dominate the default patterns and components can you start customizing.

如果要构建本机应用程序，强烈建议您遵循Material Design的 Android 指南和Human Interface的 iOS 指南。除非您明确想要构建一个独特的UI(例如Snapchat或游戏)，否则首先应尽可能遵循本机模式。只有在控制了默认模式和组件之后，才能开始自定义。

设计系统 (Design systems)

If you are lucky to have at least one designer on your team, you can think about building your own design system.

如果幸运的是您的团队中至少有一位设计师，则可以考虑构建自己的设计系统。

Watch out!

小心！

This can be time-consuming and is only worth it when you are scaling fast and you have to maintain multiple applications with the same visual language. A great tool for building a design system is Pattern Lab.

这可能很耗时，并且只有在快速扩展并且必须使用相同的可视语言维护多个应用程序时才值得。 Pattern Lab是构建设计系统的绝佳工具。

品牌推广 (Branding)

As you build your framework you will probably start making decisions that will define your brand. Don’t feel intimidated by this! Branding is a fun exercise that you can definitely do. The brand you end up creating won’t get set in stone and you will probably hire a designer if your MVP is successful or if you get more resources. My friend Marc wrote a fun article about how to make a logo in about 5 minutes.

在构建框架时，您可能会开始制定定义品牌的决策。不要为此感到害怕！品牌推广绝对是一项有趣的活动。您最终创建的品牌不会一成不变，如果您的MVP成功或获得更多资源，您可能会聘请设计师。我的朋友马克 ( Marc)写了一篇有趣的文章，介绍如何在5分钟内制作徽标。

版式 (Typography)

After building your logo, you may want to choose a font family for the rest of the app. Google has a good beginner’s guide for choosing web fonts.

构建徽标后，您可能需要为应用程序的其余部分选择字体系列。 Google 为选择网络字体提供了很好的初学者指南。

You can certainly use the same font you used for your logo, but make sure your font has good readability, especially if your product has large amounts of text. I recommend that you keep it simple and limit the number of font families to one or two max. Here’s a list of popular fonts.

您当然可以使用与徽标相同的字体，但要确保字体具有良好的可读性，尤其是在产品中包含大量文本的情况下。我建议您保持简单，将字体系列的数量限制为最多一两个。这是流行字体的列表。

A common technique is to use a distinctive font for headings and a more readable font for larger blocks of text. You can get inspired by these examples. A handy tool I use a lot to identify fonts on web pages is the WhatFont chrome extension.

一种常见的技术是对标题使用独特的字体，对较大的文本块使用更具可读性的字体。您可以从这些示例中得到启发。我经常使用的方便工具来识别网页上的字体是WhatFont chrome扩展程序。

When building your framework, be conscious about the number of different font sizes you use. Again, keep it simple. If possible, use the minimum amount of variations. Try to avoid going under 16pt for large amounts of text. Many people, like me, will have trouble reading under that size!

在构建框架时，请注意所使用的不同字体大小的数量。同样，保持简单。如果可能，请使用最少的变化量。尽量避免在16pt以下处理大量文本。像我这样的许多人，在这种尺寸的阅读下会遇到麻烦！

If your product needs it, use a proper font that supports many languages. Noto, for example, is a font developed by Google that aims to support all languages.

如果您的产品需要它，请使用支持多种语言的正确字体。例如， Noto是Google开发的一种字体，旨在支持所有语言。

颜色 (Color)

Similar to typography, keep it simple. A common technique is to choose a primary color displayed most frequently across your app and a secondary color that provides more ways to accent and distinguish your product. For inspiration, you can use this color combinations page made by Tobias van Schneider, or use Material Design’s color tool to play around with color combinations. For more complex combinations you can use the Adobe color wheel.

与排版类似，请保持简单。一种常见的技术是选择在您的应用中显示频率最高的原色，并选择提供更多强调和区分产品的方式的副色。为了获得启发，您可以使用Tobias van Schneider制作的此颜色组合页面，也可以使用Material Design的颜色工具来尝试颜色组合。对于更复杂的组合，可以使用Adobe色轮。

When choosing two colors, avoid having vibrating color combinations. This happens when adjacent colors appear to merge, blur, and glow, giving the illusion of motion. Learn more in this article. Be careful with this undesirable effect if you create gradients.

选择两种颜色时，请避免使用振动色组合。当相邻的颜色看起来融合，模糊和发光时，就会发生这种情况，从而产生运动的错觉。在本文中了解更多信息。如果创建渐变，请谨慎对待这种不良影响。

Last, think about color contrast and accessibility. For an MVP, you don’t have to be fully compliant with WCAG. But with a little attention, you can reach some minimum degree of compliance. There are many tools to check your color contrast ratio like this one.

最后，考虑颜色对比度和可访问性。对于MVP，您不必完全符合WCAG的要求。但是只要稍加注意，您就可以达到最低程度的合规性。有很多工具可以像这样检查色彩对比度。

影像学 (Iconography)

Icons can definitely give some character to your UI and will help you in moments you need to synthesize complex concepts. They also take up less space and avoid long strings and internationalization problems. However, if you end up using an unclear icon to convey an important action, you will have a serious issue. If there’s doubt about the icon, use text only or an icon with a label close to it.

图标肯定可以为您的UI增添一些特色，并在您需要综合复杂概念的时刻为您提供帮助。它们还占用较少的空间，避免了冗长的字符串和国际化问题。但是，如果最终使用不清楚的图标来传达重要的动作，则会遇到严重的问题。如果对图标有疑问，请仅使用文本或带有标签的图标。

Good sources for icons are Noun Project, Material Design icons, and Streamline icons.

图标的好来源是Noun Project ， Material Design图标和Streamline图标。

插图 (Illustrations)

Illustrations can help you support important messages that you don’t want to get lost. On average, users read at most 28% of the text. Having an illustration and reducing the amount of text can help the user digest that information. A small animation can make that moment even more delightful.

插图可以帮助您支持不想迷路的重要消息。平均而言，用户最多阅读28％的文字。有插图并减少文本数量可以帮助用户消化该信息。小型动画可以使这一刻变得更加令人愉悦。

It’s hard to find the right illustration that fits your needs, so my recommendation would be to hire an illustrator to do it on demand. Otherwise, if you don’t have the resources for that, you can always look for free illustrations and may find what you need. Just remember to give credit.

很难找到适合您需求的正确插图，因此我的建议是聘请插图画家按需进行。否则，如果您没有足够的资源，可以随时查找免费插图，并找到所需的内容。只记得给点功劳。

摄影 (Photography)

When I build a new product, I always like to create a set of photos that I call product in use. These show different scenarios of users using your product or enjoying the benefit that comes after using your product.

制作新产品时，我总是喜欢创建一组称为使用中产品的照片。这些显示了用户使用您的产品或享受使用产品后带来的好处的不同情况。

For example, if you are creating an app that helps you reduce the time spent on your phone, maybe you want to have a set of photos of people participating in outdoor activities, or spending time with their families.

例如，如果您正在创建一个可帮助您减少在手机上花费的时间的应用程序，则可能想要拍摄一组参加户外活动或与家人在一起的人的照片。

Once you have this set of photos, you can use it to build the story and merchandise around your product. Use the photos on your onboarding tour, landing page, social media pages, or press release. Be consistent with the images you use, the style, the tone, and the age group. This will influence how people perceive your brand.

拥有了这些照片集之后，就可以使用它来围绕产品构建故事和商品。在入职游览，登录页面，社交媒体页面或新闻发布中使用照片。与您使用的图像，样式，色调和年龄段保持一致。这将影响人们对您品牌的看法。

An amazing source for free images is Unsplash. If you want to place your product in context, an affordable option is Placeit.

免费图片的一个惊人来源是Unsplash 。如果您想将产品放置在上下文中，则可以选择Placeit 。

原型制作 (Prototyping)

At some point you may want to build a prototype for testing an idea or a flow. You can test a prototype even at the wireframing stage!

在某个时候，您可能想构建一个用于测试想法或流程的原型。您甚至可以在线框图制作阶段测试原型！

A very simple tool for building prototypes is InVision, as it allows you to link a series of static images and build a flow with transitions that make it look like a finished product. Framer is another great prototyping tool, and it’s expanding its capabilities beyond prototyping every day.

InVision是构建原型的非常简单的工具，它使您可以链接一系列静态图像并构建带有过渡的流程，使其看起来像成品。 Framer是另一个出色的原型制作工具，它的功能已经超出了每天的原型制作范围。

Don’t get too attached to these tools that are constantly changing. Anything that works for you to test your idea (even paper prototyping) is fine.

不要对不断变化的这些工具过于依赖。任何适合您测试想法的方法(甚至是纸张原型制作 )都可以。

用户测试 (User testing)

By now you probably have a product or prototype that you are excited to test. Testing your product with only 5 users will give you early insights into what is working and what is not.

现在，您可能已经兴奋地测试了产品或原型。仅用5位用户测试您的产品将使您尽早了解有效的方法和无效的方法。

If you have the budget, you can use a tool like UserTesting. But if you don’t, you can do your own user testing recruiting family or friends as long as you keep it objective. Before starting your test, take some time to identify what questions you are trying to answer through user testing.

如果您有预算，可以使用UserTesting之类的工具。但是，如果不这样做，只要保持客观性，就可以对招募家人或朋友进行自己的用户测试。开始测试之前，请花一些时间来确定您要通过用户测试回答的问题。

One easy and cheap way to test is the thinking aloud test. This consists of letting testers simply verbalize their thoughts as they move through the user interface after you give them a task. It is important that you keep quiet and don’t help the testers accomplish their tasks.

一种简单而便宜的测试方法是大声思考测试。这包括让测试人员在给他们任务后在用户界面中移动时简单地表达他们的想法。重要的是要保持安静，不要帮助测试人员完成任务。

For example, if they ask you “What happens if I press this button” you can reply “What would you expect to happen?” Otherwise, if you give them the answer, you won’t learn from their experience.

例如，如果他们问您“如果我按此按钮会发生什么”，您可以回答“您希望发生什么？” 否则，如果您给他们答案，您将不会从他们的经验中学到东西。

It could help to have a third person to document the session. It’s hard to be the moderator and take notes at the same time. If you can not find a third person to help, you can video-record your session.

找第三方来记录会议可能会有所帮助。很难同时担任主持人和做笔记。如果找不到帮助的第三方，则可以对会话进行视频录制。

重复 (Iterate)

After launching your product, remember: Design is never done!

发布产品后，请记住：设计从未完成！

You will probably learn a lot after launching version one of your MVP. Take that knowledge and go back to the wireframing → prototyping → user testing cycle.

启动您的MVP版本后，您可能会学到很多东西。掌握这些知识，然后返回到线框图制作→原型制作→用户测试周期。