After listening to Craig Federighi’s talk on how to be a better software engineer I was sold on the idea that it is super important for a software engineer to learn the basic principles of software design.

听了克雷格·费德里希(Craig Federighi)关于如何成为一名更好的软件工程师的演讲后 ，我被认为对软件工程师来说学习软件设计的基本原理非常重要。

For this reason, I embarked upon a journey to cross my lane and learn design and user experience and open myself to new ideas and possibilities. While I am nowhere near the journey’s end, I did manage to pick some fundamentals along the way for UI design that will help me for the days to come.

因此，我踏上了跨越自己的道路，学习设计和用户体验，并使自己接受新想法和可能性的旅程。 虽然我还远没有走到尽头，但我确实在UI设计过程中选择了一些基础知识，这些基础知识将在以后的日子里为我提供帮助。

In this article, I will recap and mention these fundamentals and what I learned while working on a new UI design project in Figma. A web based, massively collaborative and easy to use design tool.

在本文中，我将回顾并提及这些基础知识以及在Figma中进行新的UI设计项目时所学到的知识。 基于Web的，大规模协作且易于使用的设计工具。

In conclusion, this article points to the importance of maintaining a design system for UI development for any project, big or small. A design system keeps you as a designer sane when it’s easy to get lost in your creative ideas.

总之，本文指出了为任何大小项目维护用于UI开发的设计系统的重要性。 当您很容易迷失自己的创意时，设计系统会让您保持作为设计师的理智。

一致性需要工作 (Consistency requires work)

If there is only one rule for designing interfaces it is consistency. Consistency is essential not only for your design to look and feel good but also because it encourages stability and fluidness between development and design teams.

如果只有一个设计接口的规则，那就是一致性。 一致性不仅对于您的设计外观和感觉至关重要，还因为它可以鼓励开发团队和设计团队之间的稳定性和流畅性。

As a designer you’ve heard of this before. I surely did, but what I didn’t know was that consistency requires work. It is easy to be inconsistent and move fast. However, being consistent is essential for a design to be successful.

作为设计师，您之前已经听说过。 我确实做到了，但是我不知道一致性是否需要工作。 容易前后矛盾，行动Swift。 但是，保持一致对于设计成功至关重要。

For example, if you are using 16pts padding for your modals then you must use it with every other modal in your design. Similarly, your colors, paddings, alignments, typography, shadows and assets need to be consistent throughout.

例如，如果对模态使用16pts填充，则必须在设计中将其与其他所有模态一起使用。 同样，您的颜色，内边距，对齐方式，版式，阴影和素材也需要始终保持一致。

This is where design systems come into play. Design system lets you pre define your colors, typography, shadows, icons and alignment which helps keep every stakeholder on the same wavelength.

这就是设计系统发挥作用的地方。 设计系统使您可以预先定义颜色，版式，阴影，图标和对齐方式，从而使每个利益相关者保持相同的波长。

If you’re using Figma for designing consider using Pixel Perfect plugin which helps round position and dimensions of all selected layers.

如果您使用Figma进行设计，请考虑使用Pixel Perfect插件 ，该插件可帮助舍入所有选定图层的位置和尺寸。

更智能地命名您的元素 (Name your elements smarter)

Being consistent in your UI design goes a long way, but what also goes a long way is how you name your UI elements and components. As a developer I absolutely dreaded when a designer would send Sketch files without proper naming conventions.

在UI设计中保持一致要走很长的路要走，但是也要走很长的路是如何命名UI元素和组件。 作为开发人员，当设计师在没有适当命名约定的情况下发送Sketch文件时，我绝对感到恐惧。

A consistent naming convention can save not only your time as a designer but also your developers’ time when the design gets to see the light of day.

一致的命名约定不仅可以节省您作为设计师的时间，而且可以节省您的开发人员在设计日渐成熟时的时间。

For you as a designer and design team, a good naming convention means it is easier to make sense of what you are working on and allows you to make rapid changes without breaking anyone else’s work.

对于作为设计者和设计团队的您来说，良好的命名约定意味着您更容易理解所从事的工作，并且可以在不中断任何其他人的工作的情况下进行快速更改。

I like the idea of dividing your design system components and subcomponents as atoms, molecules and compounds which are the conventions of atomic design, a principle famous in the development community.

我喜欢将您的设计系统组件和子组件划分为原子，分子和化合物的想法，这是原子设计的惯例，这是开发社区中众所周知的原理。

不要离网！ (Don’t go off the grid!)

Before jumping on your creative wagon and producing the best designs of your life, consider investing in a grid system. Grids are great because they enforce a consistent design across the team. As individuals they help you iterate much faster as the grid allows you to snap UI elements in the right position.

在跳上您的创意旅行车并制作出您生活中最好的设计之前，请考虑投资网格系统。 网格之所以出色，是因为它们在整个团队中实施了一致的设计。 作为个人，它们可以帮助您更快地进行迭代，因为网格允许您将UI元素捕捉到正确的位置。

Make grids an integral part of your design system. On the web a 10pts grid is often used. On mobile platforms 8pts grid works like a charm.

使网格成为设计系统不可或缺的一部分。 在网上经常使用10pts网格。 在移动平台上，8pts网格的工作原理很吸引人。

确定字体大小 (Determine font sizes)

Now every time and again, you will need a headline text or a caption text which is smaller than normal. So decide all of your fonts before moving on to building your prototype. You will save a lot of time and ensure consistency. Your colleagues will rejoice in you and your future self will be very pleased.

现在，一次又一次，您将需要一个标题文本或标题文本，它们比正常情况要小。 因此，在继续构建原型之前，请先确定所有字体。 您将节省大量时间并确保一致性。 您的同事会为您感到高兴，您未来的自我会感到非常高兴。

避免小文本 (Avoid small body text)

Have you ever seen a mobile app with fonts that you can’t read? That is absolutely a no go. A rule of thumb is to use at least 16 points for your body text on mobile designs. A readable text goes a long way as there are people who struggle to see smaller fonts.

您是否曾经看过带有看不懂字体的移动应用程序？ 那绝对是不行的。 经验法则是在移动设计上为您的正文至少使用16个点。 可读文本大有帮助，因为有些人努力查看较小的字体。

给人们他们想要的 (Give people what they want)

Also known as, design for accessibility. When designing it is super important to consider the fact that you are designing for a vast variety of people. People have different needs. For example, some people use Android phones, others use iOS. Some people like dark mode, others don’t. Some people like big fonts while others prefer smaller.

也称为可访问性设计。 在设计时，考虑到您要为各种各样的人进行设计这一事实非常重要。 人们有不同的需求。 例如，有些人使用Android手机，另一些人使用iOS。 有些人喜欢黑暗模式，其他人则不喜欢。 有些人喜欢大字体，而另一些人则喜欢小字体。

The more choices you can provide to your user the better it gets. For example, on Android the standard button height is 48 px while the clickable area is 48x48, while for iOS the standard button height is 44 px and the clickable area is 44x44 px.

您可以为用户提供的选择越多，获得的效果就越好。 例如，在Android上，标准按钮高度为48像素，而可点击区域为48x48，而在iOS上，标准按钮高度为44像素，而可点击区域为44x44像素。

对比非常重要 (Contrast is super important)

If you have dark themes darken the distant surfaces. Farther in the distance they are the darker they get. Do not only invert your light theme. Think from a light source perspective. Also, avoid pure black or white. Lookup black smearing.

如果您有深色主题，则使较远的表面变暗。 在远处，它们变得更暗。 不仅要颠倒您的浅色主题。 从光源角度考虑。 另外，请避免使用纯黑色或白色。 查找黑色涂片。

Contrast and accessibility goes hand in hand. Think about the difference of colors of the background layer and the text layer. Contrast ratio 7? Way to go! Contrast ratio 3.9? Not good.

对比度和可访问性齐头并进。 考虑一下背景层和文本层的颜色差异。 对比度7？ 要走的路！ 对比度3.9？ 不好。

避免在深色背景上使用纯白色文字 (Avoid pure white text on dark background)

Pure white on pure dark is the highest contrast possible 21:1 which may sound good in theory, but it can cause eye fatigue and halation. Avoid pure white text. Go with 90% opacity with your whites on a darker background which gets easier to read.

纯白色和纯黑色是可能的最高对比度21：1，理论上听起来不错，但会引起眼睛疲劳和光晕。 避免使用纯白色文字。 白色在深色背景上的不透明度为90％，更易于阅读。

There are many other tips and tricks to better your UI design and process. For now, I could only muster a few of them to share with you people. Hopefully you have taken something valuable from this article.

还有许多其他提示和技巧可以改善您的UI设计和流程。 现在，我只能召集其中几个与大家分享。 希望您从本文中学到了一些有价值的东西。

If you have anything to add feel free to reach out!

如果您有任何补充，请随时与我们联系！

我想和你联系 (I WANT TO HEAR FROM YOU)

I’d love to hear your feedback. Send me your thoughts, criticisms, and ideas in a direct message on Twitter. If you have nothing to say, you can always follow me on Twitter until you have something to say.

我希望听到您的反馈。 在Twitter上直接发送您的想法，批评和想法给我。 如果您无话可说，可以随时在Twitter上关注我，直到您有话要说为止。

Also, do not forget to subscribe to my mailing list and get updates from me as they happen directly in your inbox.

另外，别忘了订阅我的邮件列表并从我那里获取更新，因为这些更新直接发生在您的收件箱中。

Originally published at https://blog.xtabbas.com on May 3, 2020.

最初于 2020年5月3日 发布在 https://blog.xtabbas.com 。