如何设计时尚的仪表盘界面
一步一步教你如何设计一个时尚的仪表盘界面
请注意，这并不是一个关于如何创建合理的产品的过程。我们将跳过所有的用户研究/用户体验/合理交互等等步骤，将只专注于创建一个干净、一致的用户界面。
最初的想法和框架
让我们从仪表板的想法开始。
我们将为医疗保健行业创建一个仪表盘，最好是医生，他们每天轮班，有不同的病人和其他职责（我姑妈是一名医生，实际上她不仅在拯救生命，而且正如她所说“有很多工作要做”）😉。整个过程我用的软件是Sketch。
通常，我从一个非常低调的线框开始。我创建了一个矩形和其他一些矩形，改变了它们的大小和排列方式，直到我对结果满意为止。我选择一些随机但相似的背景颜色，这样我就能更直观的看到矩形的位置。
在这一点上，我也在思考我想展示什么样的内容。
这就是仪表盘的最初“骨架”的外观。💀
字体
对于这个仪表盘，我选择了“Sofia Pro”（本文以圆体代替）作为我的主字体。只有这一个。
实际上，创建一个漂亮的UI并不需要很多字体。
我喜欢使用一种字体，或者两种字体（一种用于标题，一种用于常规文本）。
Sofia Pro是一个非常漂亮、拥有现代的外观并且易于阅读的字体。
不要使用多种字体，试着用字号大小、粗细和颜色等参数来区分同一种字体。
如上图所示，我只使用了四种字体大小（52p/32p/24p/18p）和两种字体大小（重粗和中粗）。我还使用了三种主要颜色-鲜艳的蓝色（强调色）、深蓝色（常规文本色）、浅蓝色（详细信息，它实际上是深蓝色，但不透明性约为30%！）。
如果您在选择正确的字体大小方面有问题，请尝试使用黄金分割法。
配色
对于颜色，我很少使用色环或预制调色板。我喜欢手工选择颜色。但是，如果你对选色感觉不太舒服，它们会很有帮助。
了解色彩心理学的基础知识并有能力选择适合某种产品/行业的配色是非常重要的。
我们正在为医疗保健设计一个仪表板，因此最适合的颜色可能是蓝色和绿色，因为它们是最受欢迎、最讨人喜欢的颜色，它们具有舒缓、放松的特点，并能营造一种专业和信任的感觉。
我选择了我的主要颜色-这个项目，一个生动、大胆的蓝色。我降低透明度，我得到我的第二种颜色。我从同一张彩色地图（HSL）中选择我的深蓝色。我也降低了这种颜色的不透明度，这就是为什么我得到了另一种不太饱和的颜色，我可以用它作为背景。然后我选择了我最喜欢的颜色，用于填充空白区域，这在设计师的世界里当然是白色了。
我们将使用单色配色方案
我们还需要一些其他强调颜色来区分内容。我只需稍微改变颜色贴图上的Hue（H）参数来选取它们。如果不把冷色和暖色混在一起，它们会很好看的。
UI元素样式
当我们选择了字体和颜色后，我们可以为我们的UI元素创建样式——容器、图标和按钮。
您可以创建一个功能性的、有吸引力的界面，只需要使用一些样式，您可以根据元素的角色和重要性混合使用这些样式。
你可以在下面的图片中查看我创建的样式的详细参数。
如你所见，我总共只创建了五个样式。其中一些用于不同的用途（例如用于容器和按钮）。重要提示：主操作样式应该只用于主要操作/CTA，并且应该只为最重要的元素保留。
创建阴影时，请尝试使用与元素相同的颜色，但要降低不透明度。
图标
在选择图标时，一致性是关键。我决定在整个仪表板上使用线性图标。尽量不要把线性和面性图标混在一起。
元素排列和文本内容
既然我们拥有创建仪表盘所需的所有东西，那么让我们开始重新排列所有元素，直到我们对结果满意为止。这里没有魔术般的捷径----我尝试不同的搭配，改变内容组成，打磨排线，直到它看起来很好。但是，在治理这种创造性混乱时，这里有一些建议：
1.记住在元素之间保持相似的边距/空格。我们现在不讨论网格/布局，但要确保至少主要内容在视觉上具有比例间距。
元素之间间距一致性的一个非常简略的例子。
2.放弃对页面太多空白的恐惧。留白是界面最好的朋友，它帮助保持用户界面的呼吸感，并使页面看起来干净、整洁。
3.只在少数选定的元素上使用主颜色。
4.使用不同大小的阴影来创造一种深度感。请记住，只有一些元素应该添加阴影，其余的使用扁平。
5.每个组的元素应具有一致的圆角度。例如：按钮的圆度应该相同。容器可以具有更大的圆角，但所有这些半径的值相同。
6.记住要将标签水平和垂直居中。
7.在容器内保持相同的边距。
8.增大按钮的圆角度，使其看起来更加平滑，这样它们看起来欢快热情更易点击！
看起来不错，但是总感觉缺少了点什么。
创建一个简单的插图
好了，我们快完成了！这是最后一步，这将使我们的仪表盘看起来更加精致和友好。
为你的用户界面创建好看的插图
你知不知道Sketch其实是创作简单插图的完美工具？事实证明，在Illustrator中所做的几乎所有事情，都可以在Sketch中完成。
正如你在上面的图片中看到的，你可以用一个非常基本的形状创建一个医生插图。对于这幅插图，我选择了一种非常流行的样式，阴影和高光实际上很简单，再加入一些对比线条。
首先，创建一个基本的轮廓，几乎只使用椭圆来画。当画一个插图时，总是从最基本，简单的形状开始-这真的很有帮助！在接下来的步骤中，您可以添加和使用不同的细节。在最后一步添加阴影-深颜色的线条代表阴影，白线代表高光。
看到了吗？就像做馅饼一样容易。🍰 我们不是插画家，但我们可以创造好看的插画！
看吧！现在看起来更友好了。
最终结果
就这样！我强烈建议您做一个类似的UI练习。我们通过实践学习最多，我们都应该经常练习。即使是最专业的设计师，如果他们停止尝试新事物，不再做用户界面的乐趣，也会偏离正轨。
让我们在仪表盘周围添加一些浮动的UI元素，就是很好的一个仪表盘作品！
试着用一些不真实的需求来练习一下吧——这是一个磨练你的技能和美学的好方法（所以当真的设计需求来的时候你就准备好大显身手了😎)
