这个实战案例告诉你高手是如何从零设计控制面板的（一）
这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次，她要设计的是一个控制面板的界面，如何控制不同UI元
素的平衡，如何从零开始构建，相当值得学习~
欢迎来到我的「UI设计指南」第二篇！如果你对于我的第一篇文章印象不错的话，那么这一篇应该也会合你胃口：
当然，请注意一点，我创建 UI 界面的过程中，绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体
验分析」这样的前置步骤，而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中，开头的这些步骤是无法忽略
的！
基本思路和低保真线框图
这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。
这一次，我们将会设计一个服务于医疗行业的控制面板（实际上，这个设计的初衷来源于我的姨妈，她是一名医生，不仅要
治疗病人还要处理大量的文书工作），而整个设计我将会在 Sketch 中完成。
通常，我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框，然后将他们按照需求和大小进行排列，直到最终
满足我的想法为止。我选择了一些随机的、但是相近的色彩，确保我能看清位置就可以了。
然后我针对哪些内容在哪里显示，进行了基本的说明。
这就是一个非常原始的界面框架了。
在下一步当中，我将会开始选取字体、配色和样式，就像我的上一篇文章一样，我们将会创建一系列小的设计系统或者说样
式表，供我取用和调试。
字体选取
对于这个控制面板，我选择的是「Sofia Pro」作为主要的现实字体，并且只有这一个字体。
实际上，想要创建一套漂亮的 UI 界面，并不需要很多字体。
我更喜欢使用 1~2 种字体来进行设计（标题和正文各一种）。
Sofia Pro 非常漂亮，给人感觉非常雅致舒适，气质上和 Futura 有点像，易读性也不错。如果你有 Adobe 创意云服务，那
么可以直接调用。
不需要使用太多字体，而要尽量使用字体的粗细对比，大小对比来营造视觉层次，这样其实是够用的。
就像上图所示，我仅仅使用了4种不同的大小（52p/32p/24p/18p），两种不同的字重（Bold 和 Medium）。我还使用了
3种不同的主要配色——鲜艳的蓝色（强调色），深蓝色（常规文本），浅蓝色（详细信息用这个颜色，但是它实际上是深蓝
色将不透明度调整到 30%之后的效果）。。
如果在选择字体尺寸大小的时候碰到问题，可以试试按照黄金比例来进行选取，效果也不错。