本文将通过一些实用的小技巧，一步步引导你完成设计~
基本思路和粗略的线框
从一个仪表盘的idea开始~
我们将为医疗行业创建一个的仪表板，尤其是为医生，他们每天轮班，要面对不同的患者和其他职责（我姨妈是医生，实际上她不仅仅挽救生命，还要处理大量的文书工作）。我会用Sketch完成整个创作过程。
通常，我会从一个非常低调的线框开始。创建一个矩形和另外一些矩形~~然后更改它们的大小和排列，直到对结果满意为止。我选择了一些随机但相似的颜色，以便看到矩形的位置。
这时候，我们需要清楚将要显示哪一类内容以及在哪显示。
这就是仪表板最原始的“骨架”样子
下一步，选择要使用的字体，颜色和样式。因此，我们先创建一个小的设计系统或“样式表”（随便你怎么称呼吧~~）
字体
对于这个仪表板，我选择“ Sofia Pro”作为主要字体。只有这一个字体。
实际上，创建一个漂亮的UI的确不需要很多字体。
我更喜欢使用一种或两种字体（一种用于标题，一种用于文本块）。
Sofia Pro是非常漂亮，外观新颖，易于阅读的字体-如果你有Creative Cloud，可以使用
不要使用许多字体，而应使用大小，粗细和颜色等参数来区分同一字体。
如上图所示，我只用了四种大小（52p / 32p / 24p / 18p）和两种字重（粗体和中体）。还使用了三种主色-鲜艳的蓝色（强调色），深蓝色（普通文本），浅蓝色（详细信息，它实际上是深蓝色，但不透明度约为30％）。
如果你在选择正确的字体大小上遇到问题，可以尝试使用黄金比例方法。
色彩调色板
对于颜色，我很少使用色轮或预制调色板（我喜欢手工选择颜色）。但，如果你对选色不太满意，那它们可以帮到你。
了解颜色心理学的基础知识，并能够选择适合的（适用于具体某产品/行业）调色板非常重要。
我们要创建的是一个医疗行业的仪表板，因此合适的颜色可能是蓝色和绿色，因为它们是最受欢迎的、讨人喜欢的颜色，它们舒缓、放松又给人以专业和可信的感觉。
我选择的主色是鲜艳的，大胆的蓝色。然后降低不透明度得到第二种颜色（例如，背景色）。从相同的颜色表（HSL）中选择深蓝色，再降低它的不透明度，就可以得到另一种低饱和度的颜色，这个颜色可用于背景。然后，选择我最喜欢的颜色，即留白与和谐的颜色。（当然，在设计师世界中是白色）
我们将要使用的非常单色的调色板
我们还需要其他一些强调色来区分内容。我是通过微调色相（H）来选择，它们看起来会彼此很合适，除非你不会冷暖搭配。
UI元素样式
选择字体和颜色后，我们为UI元素（容器，图标和按钮）创建样式。
只通过几种样式就可以创建一个功能丰富且引人入胜的界面，你可以根据元素的作用和重要性混合使用样式。
可以参考下图中所创建样式的详细参数。
可以对不同的元素使用相同的样式
可以看到，我一共只创建了五种样式，其中一些样式可用于不同目标（例如，容器和按钮）。需要强调：主要动作样式（primary action style）只能应用于主要动作/ CTA（call to action）。并且应该只将其应用于最重要的元素。
创建阴影时，请尝试使用与元素相同的颜色，但降低不透明度。
图标图像
选择图标时，一致性是关键。尽量不要将线性与填充混合使用。我决定在整个仪表板使用线性图标。
图标来自《设计用户界面》一书
（另外，还记得我在上一篇有关UI的文章中向您展示的用户头像的魔术吗？在可用性方面没什么用，但是可以为Dribbble作品创造奇迹~~文章链接：https://uxdesign.cc/how-to-achieve-friendly-lightweight-and-consistent-ui-design-a33a57183612 ）
元素排列和文字内容
我们已具备创建仪表板所需的一切，现在开始重新排列所有元素，直到满意为止。这一步没有魔法（我尝试了不同的搭配，更改组合，打磨对齐方式，直到看起来不错）。不过，在处理这种创造性混乱时，这里有一些建议：
1.记住要在元素之间保持相似的边距/间距。我们现在不讨论网格/布局，但是请至少确保主要内容在间距上是成比例的。
元素间距一致性上一个非常粗糙的栗子~
2.不必担心留白过多。留白是任何一个界面的最好搭档。它可以帮助UI“呼吸”，并使它看起来时尚整洁。
3.只将主色用于一些选中的元素。要不然，主色会显得太归于压倒性（到处都用的话）。
4.使用不同的阴影来营造纵深感。请记住，只有少量元素可以使用阴影，其他的保持扁平就好。
5.同一组元素应保持圆角一致。例如：按钮都应具有相同的圆角，容器可以具有更大的圆角，但所有容器圆角大小应该是相同的。
6.记住将按钮中的标签居中（水平居中，垂直居中）。
7.容器的内边距保持一致。
8.将矩形的圆角增加到一个看起来非常平滑的点。这样它们会看起来“很气泡”且“可点击”~
看起来不错，但是缺少一些东西
创建一个简单的插图
OK，我们就快完成了！这是最后一步，这会使我们的仪表板看起来更加美观，更加友好。
不必成为毕加索，就可以为用户界面创建漂亮的插图
你是否知道Sketch实际上是创建简单插图的理想工具？我在用Adobe Illustrator工作了很长时间（并讨厌它）。事实证明，在Illustrator中所做的几乎所有操作都可以在Sketch中完成（惊奇！）。
如上图所示，你可以使用非常基础的形状创建医生插图。这里的插图，我选择了一种非常流行的样式：阴影和高光实际上很简单，但是有对比线。
首先，几乎只需要用到椭圆来创建基本轮廓。进行插图绘制时，请始终从最基本，最简单的形状开始——真的很实用！在接下来的步骤中，可以添加和试玩不同的细节。在最后一步中添加阴影（深色线表示阴影，浅色线表示高光。）
看到了吧？小菜一碟~~~我们不是插画师，但我们可以做到！
最终结果
就是这个啦！强烈建议你做类似的UI练习。通过实践学到的东西最多，我们都应该经常练习。如果停止以尝试新事物和做UI为乐，即使是最专业的设计师也会迷失方向。
现在看起来更友好了
在仪表板周围添加一些浮动的UI元素，我们就得到了一个非常棒的Dribbble作品！
如果喜欢这篇文章，欢迎点赞鼓励~~~
作者：Diana Malewicz
原文链接：https://uxdesign.cc/how-to-design-a-sleek-dashboard-ui-a90ba41f0af1
网友评论