平面設(shè)計和網(wǎng)頁設(shè)計的規(guī)則

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設(shè)計是圖形設(shè)計的未來。 也許激勵您的是金錢。 或者，也許您只是一天醒來而工作中的某人告訴您：“那么，您是設(shè)計師，對嗎？ 好吧，我們需要一個應(yīng)用程序”。

Or maybe everyone was doing it, and you just wanted to be popular也許每個人都在這樣做，而您只是想變得受歡迎

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上關(guān)注了幾個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:

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

Your design will turn into code.

您的設(shè)計將變成代碼。

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.

我?guī)缀蹩梢月牭侥f：“但是Nico，您是Obvious上尉，每個人都知道應(yīng)用程序是用代碼構(gòu)建的”。 是的，但我對本文的意圖是讓您走得更遠。 這不是關(guān)于“了解”它，而是關(guān)于如何將此概念整合到思考和工作方式中。

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

這是關(guān)于將這個想法作為工作流程的中心。

您之前已經(jīng)做過。 (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.

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

And you stared at the blank canvas for like half an hour.然后您凝視著空白的畫布半個小時。

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.

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

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設(shè)計，接下來是代碼。 您的工作將被翻譯為{}的和； ，因此可以由瀏覽器或操作系統(tǒng)讀取。 因此，當您在接口上工作時，還應(yīng)該花時間進行下一個階段的準備工作 。

這是否意味著我必須學習編碼？ (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)

看，如果您有時間并且會的，是的，這樣做會為您帶來很多幫助。 但是，如果不是這種情況，您只需要了解界面開發(fā)的兩個基本概念即可： 分而治之和“ 不要重復自己”(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引用了開發(fā)人員從設(shè)計師那里收到UI文件后必須執(zhí)行的“解構(gòu)”過程。 這意味著他們必須將用戶界面“切割”成碎片。 稍后，這些片段將被分別編碼，這比一次坐滿整個頁面要容易。

Source資源

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.

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

Source資源

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

This is what I recommend:

這是我的建議：

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概念中。 您可以在“ 材料設(shè)計”頁面上了解更多信息。 您還可以訪問其他設(shè)計系統(tǒng)(我建議您檢查另一個術(shù)語)，例如Lightning或Carbon 。

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…

在開始設(shè)計之前，請問自己：如何將其轉(zhuǎn)換為代碼？ 需要多長時間？如果您不知道答案...

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.

向您的開發(fā)團隊征求意見和建議。 并經(jīng)常這樣做：我的UI生涯中最好的想法和解決方案來自開發(fā)人員。

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原型或運球樣機。 我們都使用已經(jīng)編碼的應(yīng)用程序或網(wǎng)站。 因此，如果您想從事UI設(shè)計器工作，請注意，簡單但可編碼的設(shè)計總是比無法轉(zhuǎn)化為編程語言的出色設(shè)計更好。

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

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

For more tips about UI Design, follow me!

有關(guān)UI設(shè)計的更多提示，請關(guān)注我！

• On medium: @nicolozada

  上媒體： @nicolozada

• On Instagram: @nicolozada.design

  在Instagram上： @ nicolozada.design

翻譯自: https://uxdesign.cc/from-graphic-design-to-ui-here-is-the-most-important-rule-you-should-know-b1645435882f

平面設(shè)計和網(wǎng)頁設(shè)計的規(guī)則

總結(jié)

以上是生活随笔為你收集整理的平面设计和网页设计的规则_从平面设计到用户界面：这是您应该知道的最重要的规则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。