Welcome to the second step by step UI guide. Since you really liked my first article on “How to achieve Friendly, Lightweight UI”, I decided to make another one in a similar manner. Please note, that this is not a “legit” process on how to create a product. We will focus on creating a clean, consistent UI, and we skip all the research/user experience/whatever you like to call it/steps.

歡迎使用第二步UI指南。 由于您真的很喜歡我的第一篇文章“如何實現友好，輕巧的UI”，因此我決定以類似的方式制作另一篇文章。 請注意，這不是創建產品的“合法”過程。 我們將專注于創建一個干凈，一致的用戶界面，并且跳過所有研究/用戶體驗/您想要調用的任何內容/步驟。

基本思路和粗略的線框 (Basic idea & rough wireframe)

Let’s start with an idea for a dashboard.

讓我們從一個儀表盤的想法開始。

We are going to create a dashboard for a healthcare industry, preferably doctors, who have daily shifts, different patients and other duties (my aunt is a doctor, and actually she is not only saving lives, but as she says “there’s sh*tload of paperwork to do”) 😉. I will use Sketch for the whole process.

我們將為醫療行業創建一個儀表板，最好是醫生，他們每天輪班，不同的患者和其他職責(我的姨媽是醫生，實際上她不僅在挽救生命，而且如她所說：要做的文書工作”)😉。 我將在整個過程中使用Sketch。

Usually, I start with a very low-key wireframe. I create a rectangle and some other rectangles, and I change their sizes and arrangement until I’m happy with the result. I choose some random but similar colors so I actually see where the rectangles are.

通常， 我從一個非常低調的線框開始。 我創建一個矩形和其他一些矩形，然后更改它們的大小和排列，直到對結果滿意為止。 我選擇了一些隨機但相似的顏色，因此實際上可以看到矩形的位置。

At this point, I also have in mind what kind of content I want to show and where.

在這一點上，我也要記住要顯示哪種內容以及在哪里顯示。

In the next step, I’m choosing fonts, colors, and styles that I’m going to use. So, as in my previous article, we are going to create a little design system/stylesheet/call it as you like.

在下一步中，我將選擇要使用的字體，顏色和樣式。 因此，就像我上一篇文章中一樣，我們將創建一個小的設計系統/樣式表/隨意調用它。

字型 (Font(s))

For this dashboard, I chose “Sofia Pro” as my main font. Only this one.

對于此儀表板，我選擇“ Sofia Pro”作為主要字體。 只有這個。

Actually, you don’t really need many fonts to create a nice UI.

實際上，創建一個漂亮的UI確實不需要很多字體。

I prefer to work with one font, or maybe two (one for headings, one for text blocks).

我更喜歡使用一種字體，或者也許使用兩種字體(一種用于標題，一種用于文本塊)。

Instead of using many fonts, try to differentiate the same font with such parameters as size, weight and color.

不要使用許多字體，而應使用大小，粗細和顏色等參數來區分同一字體。

As you can see on the picture above, I’m using only four font sizes (52p/32p/24p/18p) and two font weights (bold and medium). I’m also using three main colors — vivid blue (accents), dark blue (regular text), light blue (detailed info, it is actually dark blue, but with opacity around 30%!).

如您在上面的圖片中所看到的，我僅使用四種字體大小(52p / 32p / 24p / 18p)和兩種字體粗體(粗體和中等)。 我還使用了三種主要顏色-鮮艷的藍色(強調色)，深藍色(常規文本)，淺藍色(詳細信息，它實際上是深藍色，但不透明度大約為30％！)。

If you have problems with choosing the right font sizes, try using the golden ratio method.

如果在選擇正確的字體大小時遇到??問題，請嘗試使用黃金比例方法。

色彩調色板 (Color palette)

For colors, I rarely use color wheels or premade palettes. I like to choose colors by hand. Yet, they are very helpful if you are not feeling very comfortable with color-picking.

對于顏色，我很少使用色輪或預制調色板。 我喜歡手工選擇顏色。 但是，如果您對選色不太滿意，它們將非常有用。

It’s quite important to know the basics of color psychology and have the ability to choose the color palette that will be suitable for a certain kind of a product/industry.

了解顏色心理學的基礎知識并具有選擇適用于某種產品/行業的調色板的能力非常重要。

We are creating a dashboard for healthcare, so the suitable colors would probably be blues and greens, as they are the most popular, likable colors, they are soothing, relaxing, and they create a feeling of professionalism and trust.

我們正在創建一個用于醫療保健的儀表板，因此合適的顏色可能是藍色和綠色，因為它們是最受歡迎的，討人喜歡的顏色，它們既舒緩，放松又給人以專業和信任的感覺。

I choose my main color — for this project, a vivid, bold blue. I lower the opacity and I get my second color — for example, for backgrounds. I’m choosing my dark blue from the same color map (HSL). I also lower the opacity of that color and that’s how I get another, less saturated color which I can use for background. And then I choose my favorite color, the color of empty space and harmony, which in the designer world is white, of course.

我選擇我的主要顏色-對于這個項目，它是鮮艷的，大膽的藍色。 我降低不透明度，得到第二種顏色-例如背景。 我從相同的顏色表(HSL)中選擇深藍色。 我還降低了該顏色的不透明度，這就是我得到另一種不飽和的顏色的方法，該顏色可用于背景。 然后我選擇我最喜歡的顏色，即空白空間和和諧的顏色，當然在設計人員世界中該顏色是白色的。

We also need some other accent colors to differentiate content. I pick them only by slightly changing the Hue (H) parameter on the color map. They will look good with each other, unless you won’t mix the cold with the warm ones.

我們還需要其他一些強調色來區分內容。 我僅通過稍微更改顏色圖上的色相(H)參數來選擇它們。 它們彼此看起來很好，除非您不會將冷氣與熱氣混合在一起。

UI元素樣式 (UI element styles)

When we have chosen the fonts and colors, we can create styles for our UI elements — containers, icons and buttons.

選擇字體和顏色后，我們可以為UI元素(容器，圖標和按鈕)創建樣式。

You can create a functional, attractive interface having only a few styles to work with, that you can mix depending on the element’s role and importance.

您可以創建一個功能豐富且引人入勝的界面，只有幾種樣式可以使用，可以根據元素的作用和重要性進行混合。

You can check the detailed parameters of the styles I created in the picture below.

您可以檢查下圖中創建的樣式的詳細參數。

As you can see, I created only five styles in total. Some of them are used for different purposes (for ex. for containers and for buttons). Important note: primary action style should only be used for primary actions/CTA’s. And it should be saved only for the most important elements.

如您所見，我總共只創建了五種樣式。 其中一些用于不同目的(例如用于容器和按鈕)。 重要說明：主要操作樣式僅應用于主要操作/ CTA。 并且僅應將其保存為最重要的元素。

When creating shadows, try using the same color as the element, but lower the opacity.

創建陰影時，請嘗試使用與元素相同的顏色，但降低不透明度。

影像學 (Iconography)

When choosing icons, consistency is the key. I decided to use outline icons for the whole dashboard. Try not to mix outlines with solids.

選擇圖標時，一致性是關鍵。 我決定對整個儀表板使用大綱圖標。 盡量不要將輪廓與實體混合。

Also, do you remember the magic trick for the user avatars, that I showed you in my previous post about UI? Very useless when it comes to usability, but works miracles for Dribbble shots!

另外， 您還記得我在上一篇有關UI的文章中向您展示的用戶頭像的魔術嗎？ 在可用性方面非常無用，但為Dribbble射擊創造了奇跡！

You can find it here: https://uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612

您可以在這里找到它： https : //uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612

元素排列和文字內容 (Element arrangement & text content)

Since we have all the things we need to create a dashboard, let’s start and rearrange all the elements until we are happy with the result. There is no magic trick here — I try different pairings, change composition, polish certain alignments, until it looks good. But here are some bits of advice when taming this creative mess:

由于我們擁有創建儀表板所需的一切，因此讓我們開始和重新排列所有元素，直到對結果滿意為止。 這里沒有魔術–我嘗試不同的配對，更改組成，拋光某些對齊方式，直到看起來不錯為止。 但是，在馴服這種創造性混亂時，這里有一些建議：

1. Remember to keep the similar margins/spaces between the elements. We won’t talk grids/layouts now, but make sure that at least major content has visually proportional spacing.
   記住要在元素之間保持相似的邊距/間距。 我們現在不討論網格/布局，但是請確保至少主要內容具有視覺比例的間距。

2. Abandon the fear of too much whitespace. It is every interface’s best friend. It helps any UI breathe, and it makes it look sleek and tidy.

2.不必擔心過多的空格。 它是每個界面的最好朋友。 它可以幫助任何UI呼吸，并使它看起來光滑整潔。

3. Use your primary color only on a few selected elements. In another way, it will be too overwhelming.

3.僅將原色用于一些選定的元素。 從另一個角度來說，這將是壓倒性的。

4. Use different shadowing to create a feeling of depth. Remember that only some of the elements should cast a shadow. Leave the rest flat.

4.使用不同的陰影來營造深度感。 請記住，只有某些元素可以蒙上陰影。 其余保持平整。

5. Elements should have consistent edge roundness in each group. For example: buttons should all have the same roundness. Containers can have bigger corner radius, but the same value for all of them.

5.元素在每組中應具有一致的邊緣圓度。 例如：按鈕都應具有相同的圓度。 容器可以具有更大的拐角半徑，但所有容器的值相同。

6. Remember to center labels in the buttons, both horizontally and vertically.

6.記住將標簽水平和垂直放置在按鈕中央。

7. Keep the same margins inside containers.

7.保持容器內的邊距相同。

8. Increase the radius of the rectangle’s edges to the point where it looks very smooth. They will look very bubbly and clickable!

8.將矩形邊緣的半徑增加到看起來非常平滑的點。 它們看起來會很氣泡且可點擊！

創建一個簡單的插圖 (Creating a simple illustration)

Ok, we’re almost done! Here is the last step, that will make our dashboard look more polished and friendly.

好的，我們快完成了！ 這是最后一步，這將使我們的儀表板看起來更加美觀和友好。

Did you know that Sketch is actually a perfect tool to create simple illustrations? I worked in Adobe Illustrator for ages (and hated it). It turns out that almost everything I was doing in Illustrator, can be done in Sketch (surprise!).

您是否知道Sketch實際上是創建簡單插圖的理想工具？ 我在Adobe Illustrator中工作了很長時間(并討厭它)。 事實證明，我在Illustrator中所做的幾乎所有操作都可以在Sketch中完成(驚奇！)。

As you can see on the picture above you can create a doctor illustration with a very basic shapes. For this illustration, I chose a quite popular style, where the shadows and highlights are actually simple, but contrast lines.

如上圖所示，您可以創建具有非常基本形狀的醫生插圖。 對于此插圖，我選擇了一種頗受歡迎的樣式，其中陰影和高光實際上很簡單，但有對比線。

First, you create a basic silhouette, using almost only ovals. When making an illustration, always start from the most basic, simple shapes — it really helps! In the next steps, you can add and play with different details. Add shadows in the last step — dark lines for shadows, white lines for highlights.

首先，您幾乎僅使用橢圓形來創建基本輪廓。 進行插圖繪制時，請始終從最基本，最簡單的形狀開始-確實有幫助！ 在接下來的步驟中，您可以添加和使用不同的細節。 在最后一步中添加陰影-暗線表示陰影，白線表示高光。

See? As easy as pie. 🍰 We are no illustrators, but we can do this!

看到？ 像餡餅一樣容易。 are我們不是插畫家，但是我們可以做到！

最終結果 (The final result)

This is it! I strongly encourage you to do a similar one as a UI exercise. We learn the most by practice, and we all should practice often. Even the most professional designers get out of track if they stop trying new things and doing UI for fun.

就是這個！ 我強烈建議您做類似UI的練習。 我們通過實踐學習最多，我們都應該經常練習。 即使是最專業的設計師，如果他們停止嘗試新事物并做UI娛樂的話，也會迷失方向。

Let’s add some floating UI elements around the dashboard, and we have a very nice Dribbble shot material!

讓我們在儀表板周圍添加一些浮動UI元素，我們有一個非常不錯的Dribbble鏡頭材料！

Try practicing with some fake products – it is a good way to polish your skills and aesthetics (so when the real one comes you’re ready to rock 😎).

嘗試練習一些假冒產品–這是一種提高技能和美感的好方法(因此，當真正的產品來臨時，您就可以動彈了。)

If you make a dashboard with some help from my article let me know, I’d be happy to see it. Thank you and have fun designing!

如果您在我的文章的幫助下制作了一個儀表板，請告訴我，我將很高興看到它。 謝謝，設計愉快！

你喜歡這篇文章嗎？ 😊 (Did you like this article? 😊)

I just released a >📚 UI DESIGN BOOK 📚<I 🖋 write about design and I’m a 👩🏻?🔧 co-founder/lead designer at HYPE4 design-driven software agency!

我剛剛發布了>📚 UI設計圖書 📚<我🖋 寫的設計 ，我在👩🏻🔧共同創始人/首席設計師HYPE4設計驅動的軟件代理！