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 。