这个实战案例告诉你高手是如何从零设计控制面板的(三)
元素布局和文字内容
现在,这个控制面板所涉及到的绝大多数的内容我都有了,因此我开始重新排列元素,直到我满意。这个部分真的没有取巧
的地方,唯一能做的就是进行尽可能多的尝试,结合一部分普世的需求,然后就是对不同排版进行尝试,不同的对齐方式,
细节的处理等等等等,直到我们看起来用起来感觉不错为止。

不过,在驯服混乱、寻求秩序的过程中,我依然是有一些有价值的建议:
1)记住元素和元素之间应该保持相同/相似的边距或者间距。即使此时我们不讨论网格和布局,但是至少要确保主要的内容
在视觉比例上的协调一致。
2)不必过度担心留白。留白是界面最好的朋友。它可以赋予任何界面以呼吸感,让它看起来整洁。
3)将主色使用在一些处于选定状态的元素,从另一个角度上来说,主色应该应用在令人瞩目的元素和交互上。
4)使用不同的阴影来制造纵深感。但是请记住,每次都只让一部分元素拥有阴影,这样才能制造出层次差异,其他的则保持
平整。
5)每个元素或者容器都应该拥有一致的边缘,比如按钮都应该拥有相同的弧度,卡片边缘的弧度也应当一致。
6)记住按钮上的标签文本应该居中。
7)保持容器内元素的边距是相同的。
8)如果想让界面变得足够平滑友好,可以提高圆角的弧度,让它越接近气泡色感觉,这样给人的感觉就越友好!

创建一副简单的插画
我们快要完成了,这是最后一步!这将会让我们的控制面板显得更加美观和友好。

Sketch 其实是创建插画的理想工具。我曾经用过很长时间的 AI,并且非常讨厌它。事实证明,我在 AI 中可以实现的效果
几乎都可以在 Sketch 中做出来!
就像上图当中,你可以通过基础形状很快创建出医生的插画。对于这张插画,我选取了一种非常流行的样式,其中的阴影和
高光其实都非常简单,但是加入了富有趣味的对比线条。
首先,你可以使用椭圆和线条来快速拼接出基本的轮廓,进行插画绘制的时候,始终从最基本的图形入手,确实是非常有帮
助的!在接下来的步骤当中,你可以添加不同的细节。在最后一步当中,添加线条状的深色阴影,增加白色的线条来呈现高
光。
这真的是超级简单,但是很能出效果,即使你不是插画师也可以做到!

最终效果
我强烈建议你也进行类似的 UI 设计练习!这种练习方式不仅出效果,而且能够很好地磨练自己的技能,尝试新鲜的设计技
法,并且填充自己的作品集。新鲜的尝试甚至可以算得上是某种意义上的「娱乐」!
如果将一部分 UI 元素突出呈现并超出原本的界面范围,借助阴影来强化层次,则能让这个 UI 更适合展示!

