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设计驱动的软件代理！