Maybe you’re here because you think UI Design is the future of Graphic Design. Maybe what motivates you is the money. Or maybe you just woke up one day and someone at work told you “So, you are a designer, right? Well, we need an app”.

也許您在這里是因為您認為UI設計是圖形設計的未來。 也許激勵您的是金錢。 或者，也許您只是一天醒來而工作中的某人告訴您：“那么，您是設計師，對嗎？ 好吧，我們需要一個應用程序”。

Whichever the cause, you jumped into the UI Design wagon and you didn’t want to be seen as a noobie, so you signed up for some online courses and followed a couple of UX/UI accounts on Instagram.

無論是哪種原因，您都進入了UI Design旅行車，但又不想被視為傻瓜，因此您注冊了一些在線課程，并在Instagram上關注了幾個UX / UI帳戶。

And I think that’s awesome. But as a former graphic designer, and now a passionate UI Designer, I must warn you, that is not enough. The most important thing I learned is that UI has little to do with Figma techniques, Sketch plugins, or UI trends. Actually, my work as a UI rocketed as soon as I understood some of the foundations, namely the most important:

而且我認為這太棒了。 但是，作為前平面設計師，現在是熱情的UI設計師，我必須警告您，這還不夠。 我了解到的最重要的事情是，UI與Figma技術，Sketch插件或UI趨勢無關。 實際上，只要了解了一些基礎，即最重要的基礎，我作為UI的工作就會Swift增加：

Your design will turn into code.

您的設計將變成代碼。

I can almost hear you saying: “But Nico, you Captain Obvious, everybody knows that apps are built with code”. True, but my intention with this article is for you to go further. This is not about “knowing” it, it’s about how you integrate this concept into the way you think and work.

我幾乎可以聽到您說：“但是Nico，您是Obvious上尉，每個人都知道應用程序是用代碼構建的”。 是的，但我對本文的意圖是讓您走得更遠。 這不是關于“了解”它，而是關于如何將此概念整合到思考和工作方式中。

This is about putting this idea as the center of your workflow.

這是關于將這個想法作為工作流程的中心。

您之前已經做過。 (You’ve done this before.)

Think about the last time you designed something for print. Even before your first layer on Photoshop, you already did some adjustments: You set the color to CMYK, the dpi to 300, and the measurement units to cm.

想一想您上次設計印刷品的時間。 甚至在Photoshop的第一層之前，您就已經進行了一些調整：將顏色設置為CMYK，將dpi設置為300，將度量單位設置為cm。

There are lots of other micro-adjustments you do throughout your workflow, but I want you to focus on the notion of preparation. What you are actually doing with all these adjustments is preparing your design for what comes next: printing.

您在整個工作流程中還有許多其他的微調整，但是我希望您專注于準備的概念。 您所做的所有這些調整實際上是在為接下來的工作做準備 ：打印。

For UI Design, what comes next is code. Your work is going to be translated into a bunch of {}’s and ;’s, so it can be read by a browser or an operating system. So, when you work on an interface, you should also make time for this preparation, this next phase.

對于UI設計，接下來是代碼。 您的工作將被翻譯為{}的和； ，因此可以由瀏覽器或操作系統讀取。 因此，當您在接口上工作時，還應該花時間進行下一個階段的準備工作 。

這是否意味著我必須學習編碼？ (Does that mean I must learn to code?)

Look, if you have the time and will, yes, do it, it’s going to help you a lot. But if that’s not the case, you just need to understand two of the fundamental concepts of interface development: Divide & Conquer, and Don’t Repeat Yourself (DRY)

看，如果您有時間并且會的，是的，這樣做會為您帶來很多幫助。 但是，如果不是這種情況，您只需要了解界面開發的兩個基本概念即可： 分而治之和“ 不要重復自己”(DRY)

Divide & Conquer makes reference to the ‘deconstruction’ process a developer must perform after they receive a UI file from a designer. This means they have to “cut” that UI into its pieces. Later, these pieces will be coded separately, which is easier than building a whole page in one sit.

Divide＆Conquer引用了開發人員從設計師那里收到UI文件后必須執行的“解構”過程。 這意味著他們必須將用戶界面“切割”成碎片。 稍后，這些片段將被分別編碼，這比一次坐滿整個頁面要容易。

The purpose of this deconstruction is also to find which of these pieces repeat across different screens, so they can be coded just once and then re-use the code when needed. This is what “DRY” is about: not repeating a job previously done.

這種解構的目的還在于找到這些片段中的哪些片段在不同的屏幕上重復，因此它們只能被編碼一次，然后在需要時重新使用代碼。 這就是“干”的含義：不重復先前完成的工作。

那么，我從哪里開始呢？ (So, where do I start?)

This is what I recommend:

這是我的建議：

1. Familiarize yourself with the notion of component, which combines the “Divide & conquer” and “DRY” thinking into one single UI concept. You can learn more about this at the Material Design page. You can also visit other Design Systems (another term I recommend you check up), like Lightning or Carbon.

   熟悉component的概念，它將“ Divide＆conquer”和“ DRY”思想組合到一個UI概念中。 您可以在“ 材料設計”頁面上了解更多信息。 您還可以訪問其他設計系統(我建議您檢查另一個術語)，例如Lightning或Carbon 。

2. Before you start designing, ask yourself: How will this be translated into code? How long will it take?And if you don’t know the answers…
   在開始設計之前，請問自己：如何將其轉換為代碼？ 需要多長時間？如果您不知道答案...
3. Ask for the opinion and advice from your dev team. And do it frequently: The best ideas and solutions in my UI career have come from developers.
   向您的開發團隊征求意見和建議。 并經常這樣做：我的UI生涯中最好的想法和解決方案來自開發人員。

No one uses Figma files, inVision prototypes, or dribble Mockups in their daily lives. We all use apps or websites already coded. So if you want to work as a UI Designer, please note that a simple but codeable design is always better than an awesome design that is impossible to translate into a programming language.

沒有人在日常生活中使用Figma文件，inVision原型或運球樣機。 我們都使用已經編碼的應用程序或網站。 因此，如果您想從事UI設計器工作，請注意，簡單但可編碼的設計總是比無法轉化為編程語言的出色設計更好。

If it’s not coded, your design may be an interesting visual piece, but — unfortunately — it is not UI.

如果不進行編碼，則您的設計可能是有趣的視覺作品，但是-不幸的是-它不是UI。

For more tips about UI Design, follow me!

有關UI設計的更多提示，請關注我！

• On medium: @nicolozada

  上媒體： @nicolozada

• On Instagram: @nicolozada.design

  在Instagram上： @ nicolozada.design