不容忽视的9式设计基本功

有之后我们做起来的设计，有种说不出的难受，这或许是设计细节上发生纰漏。设计细节是UI设计上的一些完善，虽然规则是可以摆脱的，可以不遵守规则，大胆创新。但大多数之后，遵循设计完善可以让我们的设计符合视觉美感。设计达人现在和你们分享的这篇文章，借喻武林小说的口诀风格，聊聊如何提高我们的设计细节，让设计非常精美。希望这种口诀技巧才能化为你们的内功，在之后的设计中潜意识地用到。

大家好，很久没写文章了。之前做过一次团队分享，现在整理起来分享给你们交流和分析。

现在我们来聊一聊设计细节，从视觉设计的视角，总结了一些提高设计细节的方式。希望针对一些设计师有所帮助。个人看法，如有雷同，纯属巧合。

开门见山，那么我们可以从那些地方改善设计的细节呢？

一本“武林秘籍”一共为“九式”。虽然是设计的一些基本功，但容易被忽略。

掌握好很多，在以前设计中，多加勤练，多思考，你的设计经常非常细心~

第一式：塑“形”

一切戏剧都带有形式美；美的基本因子由“形”、“色”、“质”组成。

设计也有一样。首先我要讲的是设计中的“形”，同时我个人觉得“形”是图形设计中最重要的一个因子，“形”的设计好坏对于一个作品起着至关重要的作用。

此处所说的“形”可以理解为图形的轮廓、线稿、造型等。

“形”的控制在设计过程中必须反复思考和推敲，比如图标设计中的对其“识别性”的要求和设计中常用的“尺规几何做图法”都是对“形”细节的严格把控。在插画设计中，人物或物质型态的外型和节奏感也很重要。

“形”要具体，也要有“个性”。

打个比方，我们要画一个圆角方形，一般就会在圆形的基础上直接倒个圆角。

很普通对不对？能否可以针对这个圆角打磨更多的细节呢。

我们可以再给这个矩形进行处理以及换另一种画法，让他具备一些膨胀感或非常细腻，变得如此“不普通”。这样的圆角方形是不是更好看了点呢。

（别小看了这圆角方形，苹果图标的倒角矩形还注册了专利呢）

这是一组多年前OPPO手机主题比赛的参赛作品，过了这么多年，依然很喜欢。

第二式：控“色”

有了“形”，我们在来讲讲“色”。

就会有“甲方爸爸”说“这个颜色有点丑额！换个颜色。”其实我认为，没有一个颜色是丑的色彩。排除一些个人体验和偏好外，造成这种“丑”的窘境多半是由于颜色配色和色调关系之间出了问题。

然而网上有众多色彩配色工具，但是最好的工具是设计师的“感觉”，也可以说是设计师大量的累积和练习的一种素养。色彩搭配有办法可寻，但也不是完全固定的，就包括我们常说的“红配绿”也可以很高级。

我们试着给刚刚的斜角矩形添加个形状，可以是拼接，也可以是渐变色。但必须留意的是在做渐变的之后，需要切记明度、饱和度或者冷暖的差异，使得色彩过渡自然。

这是一组通过颜色渐变表现小植物结构的图形作品。基本是借助控制颜色的几个常见要素：色相、饱和度、明度来实现的。

第三式：添“质”

设计可创造虚拟抽象，也可还原真实。除了“形”，“色”，设计中“质”的表达也很重要。比如最早的拟物风格图标的流行到目前的极简化风格。这里要说的是，由繁到简并不是“去质”，“无质”也是一种“质”的体现方式。

很喜欢当时锤子手机的图标，尽可能的还原真实，有丰富的细节，可以对着看好久。扁平化的流行也让UI设计师的门槛变得愈发越低，对于绘画的要求也没有这么高了。

一般“添质”有两种方式：添加纹理（颜色）和添加光影质感。但是并不是一昧地追求“装饰”，避免过于设计。

这是我非常偏爱的两位设计师的佳作，喜欢的朋友展现下“质”感。左图是噪点插画，右图是伪3D质感（虽然想放自己作品的，还是大佬的作品更具说服力吧）

刚讲了三个基本要素“形”“色”“质”中提高细节的一些技巧。

我们总结一下：

塑“形”：形要具体，也要有个性。“形”是第一位的，在做设计时“形”的打磨需要更多的时间，“形”需要美感，也必须“个性”。

控“色”：明度冷暖，过渡自然。色彩能给人增添更强的视觉冲击，记住没有一个颜色是“丑”的，处理好样式的色阶、明度、饱和度，以及色彩之前的关系。

添“质”：赋予质感，注意光影。“质”是锦上添花。一般原则以“添加纹理”和“添加光影”为主。“无质”也是“质”的一种体现方式哦。

第四式：留“白”

接下去我们讲一讲“留白”。

正所谓“此处无物胜有物”，“留白”是设计中常见的技巧，这里看看的“白”并不是黑色或空无一物的含义；留白可以让你的主题更突显，画面更有空间感和通透感。

那怎么留白呢~~我们先来看张图，

一个红色小圆球，放在一堆集合图形中。你能迅速的定位到小圆球吗？人的视觉焦点是分散的，甚至会被他身边的几何图形影响，始终没办法聚焦，看到的是一堆凌乱的图形。

在我们经常设计过程中一样，设计是必须是克制的，需要做好“减法”。

我们可以借助“减法”来十分突出小圆球的视觉位置。

1：“减少干扰”：我们可以把小圆球身边的杂乱的图形弱化。

2：“去除”：把不相干的几何图形元素去掉。

充分发挥留白的功效，体现其内在价值，才能在突显主题、提升内容美感的同时，给观者造就一个较为轻松、愉快的氛围。

这是苹果官方的照片，大家体验下，其实画面主要是文字，产品图，没有过多的装饰，但是“浴霸”让你过目难忘~

留白同时能够延伸想象和触觉空间感，具有一定的艺术性。我国的写意画也经常有留白的应用。

说了如此多，不要形成一个要点：留白是万能的！虽然并不是所有的都必须大面积的留白，比如：有氛围类的活动、节日、功能性很强的页面等等。灵活采用才是王道。

第五式：层次

我们在设计中常常会看到“层次”，那“层次”如何而来呢？

通常状况，“层次”需要借助完善元素或内容之间的秩序，比如层级关系、主次关系、颜色关系、位置关系等等。

设计常用的方式：“对比”，即指出和削弱，元素间产生关系差；“归纳”：对相同元素的整理和不同元素的区别。

对于文字排版而言，比如说报纸或杂志通常还会有确立的层次：标题（一级）、副标题（二级）、正文（三级），这是很典型的三级排列。不同的层次可以更好地向读者展现这些是重要信息。

这是一份分享的培训通知，左边经过一定的内容提取，去除了一些没必要的内容，整理文章内容，建立元素之间的次序，突出分享主题，会不会变得吸引你呢。

第六式：对齐

“对齐”是指针对页面的各元素之间构建排列顺序；元素排列要有规律。

就像你们平常收拾屋子一样，各个物品放置整齐。我认为这是一个设计师最基本的要求之一，但仍然被一些设计师所忽视。

在设计过程中，组织和完善元素间的排列顺序关系十分重要。

通常设计软件中都有一些手动对齐工具，常用的对齐方法有“左对齐”、“居中对齐”、“右对齐”等。

请时刻检查我们的对齐！请时刻检查我们的对齐！请时刻检查我们的对齐！

找了一些影片剧照，大家体验下这三种对齐方法的在排版设计中的活力。当然，在制定良好的次序的前提下，有之后也会有多种对齐方法混合使用的状况。

然而我们要小心，有之后在某些状况下，自动对齐并不适用。比如一些文字、符号对齐和一些特殊图形上。需要用过视觉比例或其它的一些方式自动调整。

思考题：上面的播放按键，三角形与环形的对齐方法，大家认为哪种方法更优呢~~

第七式：拒绝“默认字体”

关于“字体”的使用仍然是我们设计师的痛，一是涉及到版权问题，很多商用的字体必须授权；二是“默认字体”尤其是中英文数字标点等一起的之后，会发生一些意外的状况。

这是Sketch里苹方字体打的一段文字，数字和中文字、标点符号之间有显著的问题。

这个之后，我们必须人工介入，对数字和标点符号进行微调，从而确保整体的平衡（如图）。

成为一个设计师，同时也必须一点点“造字”的素养，为了打造一些场景的氛围，尤其是运营设计中主题字体设计可以很高幅度提高活动质量。

造字本来涉及到时间成本，会耗费一定的时间和精力，但从效果和品质上来看，还是很有必要的。

第八式：精选图片

设计师们离不开图片素材。图片素材通常借助一些素材网站上挑选，也可以自行拍摄。但是网上找的或则自己拍摄的就会有一些问题，这个之后修图的能力就相当重要了。

如果用到一些食物照片素材，务必选用一些品质较差的照片以及摄影图片。右图是不是让你更有食欲呢。

设计师除了要学会精选图片，更要学会怎样精修截图。左图是修图前，左图是修图后。一般针对产品精修上会变得注重细节的打磨。修图后的啤酒是不是让你更想来一杯呢~~

第九式：统一原则

细节的打磨不光是局部的打磨，最终会重回整体的把控上。

我们来看一组头像排列的实例，乍看没什么问题，但是认真看会看到，每个头像的人物的比例关系和视线都不太统一，我们还可以做的更好。

我们来看下改进后的效果，每个头像的人物的比例关系和视线基本统一。

统一意味着协调一致，元素间的大小、重量、间距、方向、对齐、色彩、形状、布局、风格等同样也要遵守一定的顺序和规律。

我们再来看一组照片，左图给人的觉得非常杂乱，羽毛和球体跟产品原本不够显著，颜色上也非常突兀，所以会给人一种不够聚焦产品或者杂乱的觉得。

右图在形态、色彩、属性等方面的统一化处理，加强了每个单独视觉元素之间的契合，使得场景更整体舒适！

后面主要讲了“形、色、质”在细节打磨上的重要性，接着提到了版式设计中常见的一些细节的处理方式：“留白”、“层次”、“对齐”，最后提了几点注意事项：拒绝“默认图标”、“精选图片”、“统一原则”等。

一句话总结下下现在分享的内容：设计细节的把控就是要加强各个元素包含图形、构图、色彩、文字等之间的关系，使其和谐统一。

最终，感谢你们的观阅。