建议收藏起来，方便随时查看～

  用户头像篇

关于用户头像这个板块的信息，如果采用昵称向上对齐，ID向下对齐的方式，两块内容就会很分散，不够聚焦。

如果头像和背景的颜色有一部分接近或者颜色一样，看起来会感觉头像好像少了一块，例如左图。为头像框添加描边，让头像更有整体性，还可以让文案对比更明显，页面看起来也会更精致。

当用户使用手机注册登录后，新用户没有头像的情况下，就要给一个默认头像，或者使用品牌IP形象，增加用户的品牌记忆。

  按钮篇

当一个页面有两个操作按钮时，可以区分出来一个最重要的按钮，引导用户更容易去进行选择。

当弹窗背景是白色的时候，会有点空荡的感觉，显得细节不够，可以为背景丰富细节，增加耐看程度。

当使用亮色按钮时，如果文字也比较亮，识别度就会很差。识别度对比一定要明显，亮底暗字，暗底亮字，画面一定不能出现识别模糊的情况。

登录板块，在用户未输入的状态下，登录/注册按钮呈现置灰状态，给人不可点击的感觉。输入信息后，激活登录按钮高亮状态，这样可以更清晰地引导用户操作下一步。

在这样的登录状态中，输入后与未输入的文字颜色需要给予一定的区分，这样便于用户区分哪些是填写和未填写的。在输入框可以增加对应的icon ，让整体感觉更丰富。

  卡片排版篇

关于投影的使用技巧，尽量选择颜色微浅或者和卡片颜色相近的投影。左图的投影使用比较深的颜色，会让画面太过沉重。

在图文式卡片排版的场景中，图片占比内容区域大，能起到突出重点的作用。

右图内容少的时候使用的是黄金分割比法则 0.618:1的比例。当内容多的时候，左图的布局也不错，瀑布流排下去能避免过于死板。

卡片上有过多的小标签时，可以加一个淡色的底，这样不会给人文案很多的感觉，整体视觉不会很分散，且层级更加分明，让用户更快速的找到自己需要的信息。

卡片背景直接排上文案，背景会显得很空，没有层次和细节。所以在做背景的时候，适当加上一些细节，就会显得耐看很多。

文案直接加在图片上时，要去对应地处理图片，例如给图片加一个蒙版，这样就不会导致文字的颜色和图片叠加在一起看不清的情况。

在做效果图的时候，有图片需要添加到设计稿中，尽量选择搭配起来比较和谐的图片，比如：饱和度、色相、亮度等尽量保持差不多的感觉，这样看起来会增加设计稿中的整体一致。

在有多个板块需要做成滑动的时候，需要留出一个被遮住的板块，代表还有内容可以滑动。在左图中，多个板块刚好做成一个宽度的内容，那么用户不知道后面还有内容可以滑动。

  文字排版篇

文字行间距的把控，对于较大的文字，行间距通常来说采用文字大小1.5倍的间距，文字较小时使用1.2倍的间距会比较合适。通常情况下，我会设置比1.5倍还大一些的间距，文字行间距太小不易于用户阅读，可适具体情况而定。

当主标题和副文案一样长的时候，整体会显得很呆板，且看着是一团字的感觉，这时就可以让标题和副标题之间产生长短不一的显示，就不会那么呆板。

在卡片上排列信息时，需要用到线条的时候，线太深给人感觉分割会很明显，把线的颜色调浅，有一点感觉在会比较好。

接着上面的信息排列，另一种方案是可以把线去掉，增加上下两者的间距，扩大留白也可以起到拉开信息之间的板块区分，让整个画面更加简洁和干净。

信息已填写与未填写的一个区分，已填写过的信息用深一些的颜色，未填写的信息用浅一些的颜色，这样利于用户更快速找到需要修改和填写的信息。

对于导航选中的栏目，选中的信息显示和其他的栏目对比要拉开。对比弱的话，用户一眼看不出来当前选择的导航栏目是哪一个。针对选中的栏目，可以根据品牌形象去做延展，建立品牌认知感。

面对内容过多的场景，分别将两组信息排在画面里，例如左图，会感觉整个画面信息很多，而且很分散。

在右边的排版中，加了一层背景包裹起来分别对应的信息时，会让信息层级更加分明。

图标和文字搭配的情况下，为图标加一个底色，可以让该页面图标的大小视觉保持一致，也会给予其重心的承载作用。

在需要突出信息的时候，左图的排版方式并没有达到需要突出的信息，看不到重要的信息。如前面所说，在做信息层级的时候对比一定要拉开，才能突出最重要的信息，让用户一眼get到主要信息。

文案信息板块的排版，当文案层级对比不是很明显的时候，如第三种，居中排列文案，会使阅读体验很差，视觉参差不齐的循环。当文案层级比较明显的时候，居中对齐也是一种比较好的方式。

当文案标题需要加硬投影的时候，亮字下应该加颜色较暗的投影，例如右图。如果亮字下面的投影颜色还是很亮，会出现标题文案识别不清晰，对比度不足。

最后

以上就是全部的UI/UX设计技巧，希望通过这些技巧能够让你对界面设计加入更多思考，打造更好用的产品！

另外推荐大家去「下雨天DS」主页查看更多内容：myandy.zcool.com.cn

慢慢来比较快，如觉得有帮助，

前半部分从字体的最基本属性（字族、字号、字重、大小写等）说起，熟悉字体的那些特征，了解字体在界面中的作用，以及iOS与Android系统字体的使用规范。

字体基础知识

字体是界面设计的基石

字体是排版中最重要的元素，对用户的阅读体验有着至关重要的作用。一般来说，设计师需要了解的字体通常有中文字体和西文字体两种。西文字体由来已久，从最早的罗马字体到现在苹果手机中的SF-UI字体，经历了许多设计上的变革。而中文字体的发展并没有西文字体那么顺利，数量上也远远落后于其他字体。但中国设计正在崛起，我们也看到越来越多的设计团队和设计师加入字体设计的队伍，数量上正在呈指数级别增加。

设计是一门非常严谨的学科，里面蕴含了很多道理，就连最基础的字体选择和排版，都经过了将近千年的发展和演变，有非常多的专业知识。像平面设计一样，在UI设计中字体的使用也有相应的规范，设计师应懂得这些基础知识，才能将字体为自己所用。

本篇就从我们常用的设计软件（sketch、Figma、P hotoshop）字符面板开始，来聊聊有关字体与排版应用方面的知识。

字体的那些属性

• Font 中文翻译为「字型」，是指字的粗细、宽度和样式，是一套具有同样风格和尺寸的字形。例如「Regular_16pt_SF-UI」。
• Typeface 中文翻译为「字体」，是指一整套的字形，一个或多个字型的多尺寸的集合，例如「SF-UI」里有不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。
• Glyph 中文翻译为「字形」，是指单个字的形体或是字体的骨骼。 同一字可以有不同的字形，而不影响其表达的意思，例如汉字中的「令」字，第三笔可以是一点或一撇， 最末两笔可以作「ㄗ」或「マ」。

Font和Typeface常常被混淆使用，其实可以这样理解，前者指一种设计，后者指具体的产品。

1. 族类 GenericFamily

族类就是不同字体类型，例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。

而这些众多字体又可分为「衬线体」和「无衬线体」。

衬线体

宋体就是衬线体，特点就是笔画开始和末端的地方都有额外的装饰，且笔画的粗细有所不同。在传统的正文印刷中，普遍认为衬线字体能带来更加的可读性。常见的衬线体有宋体、Times New Roman、Georgia等。

衬线体一般在APP中比较少见，文字阅读类偏爱这种衬线体，例如「单读」，大标题用的是「華康標宋體」、正文内容用的是「苹方-纤细」而英文用的是「XCross Traditional Bold」

黑体

黑体是无衬线字体，特点是笔画没有额外的装饰，且笔画的粗细差不多。相比严肃的衬线体，简单干净的无衬线体给人一种休闲轻松的感觉。因此大多数App都是使用黑体作为默认字体。如冬青黑体、思源黑体、Myriad等。

2. 字族 FontFamily

一个族类包含不同的字体，然而一个字体又可能有好几种字族。如果电脑安装了Helvetica，在Sketch字体选择器中会发现超过40多个前缀是Helvetica的字族。这是为了协助人们在不同的使用场景下表达合适的意思。

知识点：

基本字族包括细体、标准、粗体、斜体，值得注意的是，斜体字常用在引用文本上，代表「本段文字引用的是另一个著作」的含义。

例如：「若我们能以满怀新鲜的眼神去观照日常，「设计」的意义定会超越技术的层面，为我们的生活观和人生观注入力量。」（引自原研哉的《设计中的设计》）

3. X-height（X字高）

在西文字体中，x高度是指字母的基本高度，就是基线和主线之间的距离。它指一个字体中小写字母的x高度，在现代字体设计领域，x高度代表了一个字体的设计因素，因此在一些场合字母x本身并不完全等于x字高。

除了字母a、c、e、m、n、o等高度一样，还有一些小写字母的字高都比x字高要大，并分为两类：一是含有升部的字母，字母笔画含有向上部分，如字母b、d、h；另一类是含有降部的字母，字母的笔画向下超过了基线，如字母g、p、q。

4. 字号 Font-size

字号就是字体大小，通常在网页端使用px作为字号的单位。移动端兴起后，iOS字体单位是pt，Android是sp。

以iOS为例，正文字号不应小于11pt，这样才能被正常阅读，建议在14-18pt之间。在使用较大的字体来获得更好的易读性的同时，我们也应相应地减小字体的字重，考虑Light、Thin，因为过重的字体会太过醒目，影响其他内容的显示效果。

当字体大小为12-18pt时，建议使用Regular，18-24pt时，使用Light，24-32pt,使用Thin，当字体大小超过32pt时，建议使用Ultralight。

字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。

设计中的最小字号

我们都知道在界面设计中最小字号不能低于20px，那是因为，正常情况下，在手机距离眼睛30cm左右，使用视角计算公式，我们能识别到的最低的文字大小为h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我们经常使用iPhone7的尺寸1334×750为例。iPhone7的dpi为324，也就是一英寸上显示324个像素，1英寸为2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。

字号的基数关系

我们在做设计时，字号的单位最好使用一个基数作为倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。

5. 字重 FontWeight

Weight，中文翻译为「字重」，是指字体笔画的粗细，字体中很重要一个概念，不同字重传递出来视觉感受完全不一样。一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字体厂商划分字重各有不同，例如「苹方」字体就有6种不同的字重。

一般都有细体、正常、粗体三种基本字族。在应用场景上，通常「细体」多用于超大号字体；「正常」用于正文内容；「粗体」表示强调，多用于标题；

两种字重属性

轻字重：传递出轻盈放松的视觉感受，常配合粗的字重使用，在一些辅助信息，说明文案时候使用；

重字重：视觉感受庄重，很重要，常用在重点强调的文字，页面大标题，数字，引导行动操作点上等；

例如百度网盘「发现」页就用了Regular、Medium、Semibold三种字重以拉开信息层次对比；

知识点：

需要注意的是：在进行界面设计时，不要用软件自带的文本加粗，它不仅破坏了字体本身的美感，还改变了文字原本的字宽，小字体下会模糊不清，合理的方式是使用字体本身的字重来控制粗细。

注意超细体的字体

字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分低分辨率的手机屏幕上看起来会非常糟糕。

6. 字色 FontColor

字色即文字对应的颜色，不做过多解释。需要大家注意的是 远离纯黑色和纯灰色！

纯黑色就像没有生命力的深渊，能吞噬所有细节，使用户陷入冷冰冰的极端情绪中。纯黑色还会与白色产生强烈的对比度，看久了就会感觉疲劳，让用户产生焦虑情绪。

还有就是真实世界中是不存在纯黑色的。尝试在色彩中加入一些色相，这样就不会让页面看上去死气沉沉的。例如iOS系统「设置」页面背景色就是加入了白色的低饱和度蓝色，看上去柔和自然。

7. 字符样式 FontStyle

除了以上几个最常用的文字属性外，还有几个使用频率比较低的字体设置。例如带下划线的、删除线的文本。「下划线文本」一般出现在「文字按钮」或带链接的网址，而「删除线文本」一般会出现在商品橱窗的现价、原价

例如「CCtalk」的课程现价和原价的区分，原价用删除文本，「微信读书」文章底部「加入书架 随时阅读」就是带链接的下划线文本。

8. 字符选项 Text options

Ps和Sketch都有文字（字符）选项一栏，主要针对西文字母大小写格式变换的设置。最常见有默认大小写、全部大写、全部小写和小型大写字母，Ps里面还有「上标」和「下标」。

• 默认大小写：即正常大小写格式，软件不做干预；
• 全部大写：如果输入的是小写字母，选择这个选项，软件会强制把小写改为大写；
• 全部小写：如果输入的是大写字母，或者只是首字母大写，选择这个选项，软件会强制把所大写改为小写；
• 小型大写字母：这个选项比较特殊，所谓「小型大写」就是，在字号一样的情况下，与小写字母一样高，外形与大写字母保持一致。

注意英文大写

纯大写的字母文本本身不太适合大篇幅阅读，会加大阅读障碍，用的时候注意要额外拉开字母之间的字间距，提升可读性。

9. 全角与半角 Full-width and half-width

全角是指一个字符占用两个标准字符的位置。中文字符、全角的英文字符、国标GB2312-1980中的图形符号、特殊符号都是全角字符。半角是指一个字符占用一个标准字符的位置。

通常情况下，英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的，因为正常情况下没有打全角英文的需求。

知识点：

在设计作品时也一定要记得中文搭配全角符号，英文使用半角符号。否则会出现诸如「你好.」或者「t h a n k s。」这样的错误。可按键盘「capslock」键切换全角和半角。这个小知识点虽然非常基础，却也是设计中经常出错的地方。

iOS与Android

众所周知，iOS和Android两大阵营都有各自的设计系统，要作出符合平台规范的设计，设计师应熟读各平台的设计规则。因为本篇以讲字体为主，我们就来看看iOS和Android各自字体的规范是什么样的。

1. iOS字体规范

可用字体

在iOS系统规范中，中文字体是「苹方」字体。英文字体是「San Francisco」也简称「SF-UI」，英文还有另外一个衬线体「NewYork」。除了在iOS和Mac OS上，还单独为Watch OS单独对字体进行了调整，命名为 San Francisco Compact。

字体设置

因为在英文字体下，字体环境比较复杂，为了让字体在任何地方看起来都最佳，苹果官方针对不同字号开发了两套「SF-UI Text」和「SF-UI Pro」字体，而每套字体下面又分为Text（文本模式）与Display（展示模式）两种属性，Text只有6个字重，而Display则有9个字重。

这么多类型的字体我们该怎么用呢？iOS的建议是，在字号小于20pt时，使用SF-UI Text，大于或等于20pt时，则使用SF-UI Display。这需要我们在界面设计时手动切换。

对于「NewYork」，小于20点的文本使用小号，20到35点之间的文本使用中号，36到53点之间的文本使用大号，54点或更大的文本使用特大号。

苹方字体提供了6个字重供设计开发者使用。所以从iOS11开始，iOS使用Semibold中粗体、大字号作为界面的标题变的更为流行起来，较为明显的有 iOS 中的一些原生APP，比如App Store、Apple Music…

知识点：

在iOS中，默认字体单位是「pt」，正文字号不应小于11pt，建议在15-18pt之间。在使用较大的字体来获得更好的易读性同时，也应该相应地减小字体的字重，因为过重的字体会太过醒目厚重，影响其他内容的显示效果。

iOS更全面的文字设置

动态类型可以通过让读者选择他们喜欢的文本大小来提供额外的灵活性，除了标准的动态类型大小之外，iOS系统还为有阅读大字体的需求的用户提供了许多字号上的调整（可在系统字体显示大小设置）

iOS「显示与亮度」下设置「文字大小」模式

「苹方」和「SF-UI」字体可在iOS规范网站免费下载

网址：https://developer.apple.com/fonts/

2. Android字体规范

可用字体

在Android设备中，Android始祖Google为了更好的追求视觉效果，联合了Adobe设计发布了「思源黑体」(Noto)来作为中文默认字体，「Roboto」为英文字体。

字体类型

思源黑体，英文名为「NotoSans CJK」。该字体不仅仅在字形上更易于在屏幕阅读，并且拥有7种字重，充分满足了设计的要求。

英文「Roboto」字体，只有6个字重，视觉语言与思源黑体Noto保持一致。该字体具有「现代的」和「平易近人」的气质，是「Material Design」设计风格下的推荐字体。

字体设置

Material Design字体规范，字体类型比例支持的十三种样式的组合。它包含可重用的文本类别，每种类别都有预期的应用程序和含义。

注：Web浏览器根据根元素大小计算REM（根em大小）。 现代网络浏览器的默认值为16px，因此转换为SP_SIZE / 16 = rem。

△Material Design设计类型比例。（字母间距值与Sketch兼容。）

知识点：

值得注意的是，在安卓的字体单位中，不再以px，pt作为单位而是统一的使用了sp，换算方式是：

px = sp*ppi/160 ，sp = px / (ppi / 160)

以iPhone7为例，尺寸是750×1334，密度326ppi 来换算，那么Android的1dp = 1 * 326/160 ≈ 2px

「思源黑体」和「Roboto」字体可在GoogleFonts免费下载，并且可以商用。

网址：http://www.googlefonts.cn/

3. 话题扩展

值得一提的是，越来越多的手机厂商，为了能够强化自身的品牌形象，推出了定制款的字体。

比如小米的「小米兰亭」：

OPPO的「OPPO Sans」：

三星的「SamsungOne」：

字体基础知识小结

正如开头所说，文字是界面中最核心的元素，字体作为基本语言，是设计中体现品牌很重要一点，字体选择非常重要，字体也是设计中占比（约 80%）最大的内容，所以我们一定要熟练掌握，接下来将从文字行高、字间距、行间距等说起，围绕字体排版继续聊。

]]> //www.laura-marie.com/53886.html/feed 0 //www.laura-marie.com/53665.html //www.laura-marie.com/53665.html#respond Fri, 07 Aug 2020 01:23:10 +0000

设计：Fons Hickmann

有人可能会说，并没什么明显的问题啊，产品和卖点都很突出、排版清晰整洁、各元素对比很鲜明、色彩与产品调性也是相符的，要不把字体再设计一下？把图片再修漂亮一点。以上说的这些观点都是对，但是你们有没有发现一个问题，就是这些观点的关注点都是在一些具体的细节上，比如排版、配色、字体设计、修图等方面，却没有从整体去评估这件作品是否有完成设计需求，可不可以让它的效果变得更好。产品主图的首要目的是要吸引消费者的注意，而上图在这一方面做得明显不够，因为它既不是很漂亮，视觉冲击力又不太强；既没有与同类产品的主图有明显差别，也没什么意思，这样的设计通常很难让客户买单，就算客户买单了实际效果也不会太好。而如果我们在设计形式做一点更改，比如像下图这样，不是直接的罗列文字和图片，而是把设计形式与产品的属性结合起来，是不是就比上图更新颖、更有趣了一点。

这里并没把功夫花在字体设计上，因为必要性不大。所以说，不论是做设计还是看设计，我们都应该要遵循从大到小、从整体到局部的过程，先保证有一个好的大方向，再去完善细节。具体如何做呢？接下来我将从四方面来详细阐述。

◇◆  一、准确传达诉求  ◆◇

这是平面设计最重要也是最基本的原则，却经常会被很多设计师忽略，所以我们可以看到很多作品花里胡哨，却连自己想要传达什么信息都没讲清楚，或者会让人产生误解，这是很可笑的。那么想要准确传达诉求该怎么做呢？

1.信息要便于阅读

a.重点信息要突出。将标题、标题中的关键字、价格、优惠信息、活动时间、电话号码等，用大一点的字号、粗一点的字体突出，不仅能提升其传达率，还能使文字排版更有张弛。比如下面这则海报：

从总体来看，版面下方的主题被重点突出，上面的信息相对弱化。

从局部来看，在主题中，设计师又特别突出了“该你上场”这几个字，这么处理会便于读者快速了解海报的核心内容。

b.信息分类明确。在一张海报中，信息可能会有很多，如主题、副标题、小标题、内文、时间、地址、电话等信息，这时就要将它们进行合理的分类，以免信息太过繁杂、相互干扰，影响阅读。例如下图的信息就很明显地被分成了五大块，可以让读者很清晰地阅读、理解版面上的信息。

在这里，设计师合理运用了间距的关系，以及统一各同类信息的排版方式、元素、色彩等，来达到版面中各信息的统一与区隔。

除了以上这两点外，把文字对齐排列、保证字体的识别性以及文案的正确阅读顺序等等，都能提升信息的易阅读性。

2.创意简单、准确

创意可以使设计变得更有趣、更有内涵，但创意也会在一定程度上提高理解的门槛，所以在商业设计中的创意一定要简单且准确。比如下图是我早前做的一则冰箱广告，想表达该冰箱保鲜功能好的诉求，虽然创意很有趣，但老实说理解起来会有一点难度。

下图的海报同样也是要表现冰箱保鲜功能效果好，但该创意更直观，所以理解起来会简单很多，而且形式上也并不是太常规。

3.配图与主题相符

图片是设计的主要构成元素，它不仅能使版面更好看、增强视觉冲击力，而且图片本身也能够传递信息，帮助受众理解。当然，前提是你配的图片在调性和寓意上要与主题相符，如果只是觉得图片好看就放上去是不可取的。

以上是给同一个主题配上不同画面的两个设计方案，很明显左图比右图在调性上和元素内容上要更符合主题的需求。

◇◆  二、设计调性与主题相符  ◆◇

1.字体相符

特别是标题字体，由于字号一般比较大，占的空间也比较大，它的风格会影响到整个画面的调性，所以你要有能力评判什么样的主题、画面，适合使用什么类型的字体，这一点你可以去看看同类产品、品牌设计的做法。

在logo设计中字体调性也要与品牌和图形相符，下图是一个互联网品牌的Logo，它的图形是由几何色块组合成的一只鸟，那它的标准字用什么类型的字体更合适呢？通过对比我们可以看出左图的字体比右图的字体更合适一些，因为前者的风格与图片的调性更统一。

2.颜色相符

色彩本身是具有一定寓意的，所以在搭配颜色时，要选择与主题寓意相近的色彩。例如下图是一则境外银行卡的banner，主题和配图都跟旅游相关，而背景却用了玫红色，虽然红色、蓝色、白色搭配在一起很漂亮，但在调性上与旅游不相符，因而不是一个好的选择。

所以我重新搭配了一个寓意自然、纯净的蓝色背景。

3.风格相符

设计的风格有很多，但并不是使用什么样的风格都行，例如目标消费群是年轻女生的面膜包装设计适合使用二次元风格。

而以中老年人为目标消费群体的保健品包装就不大适合这种风格，它比较适合的是中国风和复古风。

婴儿奶粉的广告一般会用写实或插画风格，以表现产品健康、天然的特质。

而艺术感比较强、色彩比较浓重的波普风就不适合该类品牌的设计。

4.形式相符

形式对设计的气质和吸引力有很大的影响，例如以文字作为主题搭建场景的设计形式，比较适合主题类海报，或者产品是服务的海报设计，但不太适合做以实物产品为主的海报设计，因为该形式没法突出产品。

还有下图这种发散构图的形式，适合表现比较酷、比较热闹的主题，但不太适合表现温馨、安静等主题。

5.版式相符

不同的排版方式也是有调性差别的，比如下图是一则苹果电子手表的轮播图，图片部分给人的感觉比较高大上，所以文字的排版像下图一样简简单单就可以了。

而如果像下图一样用蓝色块将文字突出，并且刻意的与logo错位排版，反而给人很low的感觉，与品牌以及图片调性都不匹配。

6.元素相符

即使是表现统一内容的元素，其调性也是会有很大差别的，比如由于五官、发型、着装、表情的不同，会导致模特的气质也有很大差别，有的会偏向朴实、有的比较商务、有的比较潮、有的比较冷酷、有的比较温暖等等，我们再给画面搭配模特时也要选择气质匹配的。例如下图的氛围比较时尚，所以应该搭配一个外表看起来比较潮的模特。

而下图的模特穿着比较职业，所以不太适合用在这里。

◇◆ 三、形式要有吸引力  ◆◇

做好了前两点还仅仅是把设计做对了而已，想要做好，表现形式很关键。文章开头列举的例子之所以中规中矩，就是因为表现形式太普通，葱爷通过总结发现，优秀的表现形式必须满足有趣、新颖、视觉冲击力强，这三者中的至少一个条件。

1.有趣

设计形式有趣的作品相比无趣的作品更有活力，更能获得受众的好感，所以有趣也是评判设计好坏的一个重要指标。我们可以通过图形创意、拟人、增加互动、使用小孩或动物元素等方式，来增加设计的趣味性。

▲上图采用拟人的手法来增添趣味性。

▲上图把可爱的emoji表情与人物结合，表现手法新颖而有趣。

▲上图把文字当成实物来与图片元素发生互动，也挺有意思。

2.新颖

如果你总是用很常规、很老的表现形式做设计，不仅会很无聊，而且很难起到好的效果，因为客户和消费者都已经视觉疲劳了。所以每次做设计的时候，不要总想着按按最常见、自己最熟悉的方式来做，而是要想想怎么带给受众新的视觉体验，我们可以跨行业去找参考，很多在其他行业比较常见的形式，在本行业中可能还是香饽饽，也可以多运用当下比较流行的一些表现形式。

▲用真实人物与黑白漫画结合起来是比较新颖的一种设计形式。

▲爆炸贴其实是虚拟的一个东西元素，把它当成实物表现出来也是很新颖的做法。

3.视觉冲击力强

由于消费者每天接触到的设计、广告非常多，所以只有你的设计视觉冲击力很强时，才有可能吸引到消费者的注意力。想要有强烈的视觉冲击，一个重要的手段就是在设计中创造强烈的对比，比如大小对比、色彩对比、空间对比、风格对比等等。

▲上图主要为色彩对比与质感对比

▲上图为空间对比，前面的老虎由于离镜头非常近，所以有很强的亲近感。

还有一种形式的视觉冲击也很强，就是创造一种全新的视觉，比如下图把立体字当成披风一样与前面的人物结合起来，就是以前没有过的做法，所以视觉冲击力也很强。

◇◆ 四、细节到位  ◆◇

一件作品如果能够做好前面三条，就应该是一件不错的作品了，过稿的成功率也会比较高，但想要更上一层楼就得靠细节的执行了，这一点很考设计师的功底，所以很多新手在细节方面都处理不好，奇怪的是他们都很喜欢把精力用在细节的处理上。好吧，既然如此，葱爷也来说几个在设计中要注意的细节。

1.文字行距

行距是很小的东西，但在排版中很关键，以下图的名片设计为例，左右两个方案除了行距有点差别，其他地方都是一样的，但是明显可以感觉到，右图的排版比左图要舒服很多？这就是行距的作用。

从下图中我们可以看出，其实左右图方案在文字行距的控制上非常讲究。

一般来说，正文的行间距至少要大于字间距三倍以上，而且不同信息之间的行距要大于同类信息之间的行距。

2.装饰元素

装饰元素可以丰富版面、增添氛围，而且还可以增加设计的精致感，下图是一则banner，整体感觉还是比较大气的的，但总感觉少了点什么东西，对，就是装饰元素，所以中间白色块部分显得很单调。

而下图的解决方案是在人物后面以及其他空白的地方增加了一点装饰的图形和文字，感觉是不是好多了。

注意，装饰元素的调性要与画面相符，且不能干扰主要元素。

3.保证元素与版面的关联性

版面中的任何一个元素都不应该是独立存在的，它一定在某方面与版面中的其他元素存在关联，比如位置、颜色、字体、轮廓、逻辑等方面。

例如上图大大小小的元素有很多，但是各元素之间的关系我们通过下图就可以看出来。主要是排版位置与色彩的关联。

4.背景的处理

以海报设计为例，背景一般需要起到以下三个作用：1.突出主体；2.增添整体的氛围；3.使设计更精致、更有品质感。

上图的背景只使用了两个色彩相近的色块，感觉非常单调，主体也没有得到明显的突出，并且视觉上左轻右重不平衡。

在上图的方案中，背景中的大色块改成了渐变灰色，人物与前面的色块得到了有效突显；并且把人物素材二次使用叠印在背景中，增添了背景的丰富性以及与主体的关联。

5.各元素之间的统一协调性

一件完整的设计作品通常是由多个不同的元素组成的，而这些元素组合在一起是否统一和谐，则决定这件作品给人的舒适度。比如下图就结合了很多的元素，虽然很节制地控制了颜色的数量，但整体给人的感觉还是不太和谐。

认真观察我们就可以发现上图的元素组合有以下几个问题（如下图所示）：

• 标1的地方把高矮建筑左右分布，视觉不平衡；
• 标2的地方把小树放在最左边，视觉不平衡；
• 标3的地方都是单独放一个元素，太孤立；
• 标4的地方人物挡住无限符号右边孔的空间太多，不透气。
• 标5的三个元素以飘在空中的方式结合进来显得太随意，不自然。

所以我在此基础上做了一些调整：

• a.让所有元素尽量在一个矩形内，这样整体看起来会比较平衡；
• b.把扎堆在一起的建筑采用三角形构图排列，平衡性更好；
• c.把孤立的元素与其他元素并在一起；
• d.人物往中间移动，使其既要平衡画面又不要挡住无限符号的孔太多；
• e.给飘散的几个Icon增加了光线，让它们更自然地融入主体。

结语

终于写完啦！由于本文讨论的是一个大而全的话题，信息量很大，几乎涵盖了所有设计中比较关键的问题，所以也没法把每个问题都说得很细，但核心观点就是一句话：大感觉比细节更重要，先把大感觉做对了、做好了，再去打造细节。

原文地址：葱爷（公众号）

作者：葱爷

02.

03.

04.

05.

06.

07.

08.

设计：Sweety & Co.