基本的思路和简单的布局

让我们先从确定一个数据图表的想法开始。

假设我们将为医疗行业创建一个数据图表，比如说医生，他们每天轮班，需要医治许多的患者和其他的工作（很多医生，他们不仅在挽救生命，而且也需要做一些文书工作）。

通常，我们可以从一个非常基础的矩形图稿开始。创建多个矩形作为模块，然后更改矩形的大小和排列，直到对结果满意为止。可以选择了一些随机但相似的颜色，这样在设计时可以清楚不同矩形对应的模块是哪些。

在下一步中，选择要使用的字体，颜色和样式。就像在APP中创建一个小的设计系统/样式表，可以随意调用它。

字型

对于数据图表，你可以只选择一种字体作为数据图表的字体。在实际中创建一个漂亮的UI确实不需要很多字体。最好使用一种字体或两种字体（一种用于标题，一种用于文本区）。

不要使用太多种字体，而应通过文字的大小、粗细和颜色等来区分字体的层级。

如上图所示，仅使用同一字体的四种字体大小（52p / 32p / 24p / 18p）和两种字体粗体（粗体和中体），以及使用了三种主要颜色-鲜艳的蓝色（强调色），深蓝色（常规文本），浅蓝色（详细信息，它实际上是深蓝色，但不透明度约为30％！）。

如果在选择正确的字体大小时遇到问题，请尝试使用黄金比例方法。

色彩选择

对于颜色，尽量少的使用色轮或预制调色板。最好是设计师自己选择颜色。如果你对选色不太满意，以下说的将非常有用。

了解颜色心理学的基础知识并具有选择适用于某种产品/行业的调色板的能力非常重要。

我们正在创建一个用于医疗保健的仪表板，因此合适的颜色可能是蓝色和绿色，因为它们是最受欢迎的，讨人喜欢的颜色，它们不仅看起来舒缓，放松同时还给人以专业和信任的感觉。

比如对于医疗这个项目，选择主要颜色为鲜艳的，大胆的蓝色。你可以降低不透明度，得到第二种颜色例如背景色。然后可以使用白色，即空白空间的和谐颜色。

我们还需要其他一些强调色来区分内容。仅通过稍微更改颜色图上的色相（H）参数来选择颜色。时两者颜色看起来很和谐。

UI元素样式

选择字体和颜色后，你可以为UI元素（容器，图标和按钮）创建样式。

你可以创建一个功能丰富且引人入胜的界面，只需使用几种样式，可以根据元素的作用和重要性进行混合。

你可以查看下图中创建的样式的详细参数。

如你所见，上图中总共只创建了五种样式。其中一些用于不同目的（例如用于容器和按钮）。重要说明：主要动效样式仅应用于主要动作/ CTA。并且仅应将其保存为最重要的元素。

创建阴影时，请尝试使用与元素相同的颜色，但降低不透明度。

图标

选择图标时，一致性是关键。所以你可以对整个数据图表使用统一性的图标，尽量不要将轮廓线与实体混合。

元素排列和文字内容

由于我们拥有创建仪表板所需的一切，因此让我们开始和重新排列所有元素，直到对结果满意为止。这里没有魔术–我尝试不同的配对，更改组成，抛光某些对齐方式，直到看起来不错为止。但是，在驯服这种创造性混乱时，这里有一些建议：

  1.  记住要在元素之间保持相似的边距/间距。我们现在不讨论网格/布局，但是请确保至少主要内容的视觉比例间距。

  2.  不必担心过多的留白。它是每个界面的最好的朋友。它可以帮助任何UI呼吸，并使它看起来光滑整洁。

  3.  仅将主色用于按钮或者是选择的元素。从另一个角度来说，这是起到引导用决策的重点部分。

  4.  使用不同的阴影来营造深度感。请记住，只有某些元素可以蒙上阴影。其余保持平整。

  5.  元素在每组中应具有一致的边缘圆度。例如：按钮都应具有相同的圆度。容器可以具有更大的拐角半径，但所有容器的值相同。

  6.  记住将标签在按钮上水平和垂直居中。

  7.  保持容器内的边距相同。

  8.  将矩形边缘的半径增加到看起来非常平滑的点。它们看起来会很气泡且可点击！

设计完之后整体看起来不错，但是好像缺少一些东西

创建一个简单的插画

数据图表基本上已经快完成了！这是最后一步，这将使你的数据图表看起来更加美观和友好。

你是否知道Sketch实际上是创建简单插图的理想工具？并且sketch有很多不错的插图插件支持你可以快速的创作合适的插图。

如上图所示，你可以创建具有非常基本形状的医生插图。对于此插图的风格选择了今年非常流行的样式，其中阴影和高光实际上很简单，通过使用不同的线来实现。

首先，你几乎可以只使用椭圆形来创建基本轮廓。进行插图绘制时，请始终从最基本，最简单的形状开始-确实有帮助！在接下来的步骤中，你可以添加和调整不同的细节。在最后一步中添加阴影，用颜色暗的线表示阴影，用白色的线表示高光。

看到了吗，插画实现起来非常的容易。虽然我们不是插画家，但我们可以做到！

现在的图看起来就非常友好了

最终呈现

我们通过实际的设计练习可以学习的最多，设计师们都应该经常练习。即使是最专业的设计师，如果停止尝试新事物并不做些练习的话，也会容易迷失方向。

让我们在仪表板周围添加一些浮动UI元素

尝试自己找一些喜欢的产品去做练习，这是一种提高技能和审美的好方法（当真正的产品来临时，您就可以更加得心应手了）

感谢大家的观看，如果你在这篇文章中有得到帮助，请为我点个赞吧谢谢。

祝设计愉快，愉快设计！ღ( ´･ᴗ･` )~