嗨！UI 设计新人。

你是否还在困惑：为什么感觉自己做设计总是无从下手？

或者时常有疑问在自己的脑海里：什么样的界面设计才是好的界面设计，为什么我的设计总是不那么“好看”？

如果你开始思考了，那么以下是界面设计的七宗罪可以帮你对号入座，看看你的界面中了什么招。

---

1 图标设计里隐藏的坑

ICON DESIGN MISUNDERSTANFING

图标是界面设计中最重要的元素之一，也是我们 UI 设计师必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。但一个产品里用到那么多的图标，到底什么样的图标才算好呢？注意以下四点，图标设计实力分分钟指数型飙升。

      🤔统一度

在统一度方面，很多新手只是主要到了我们图标大小的统一，往往忽略了其他细节-颜色、线条粗细、圆角等。当然如果图标还有透明度+渐变的设计语言的话，那么透明度、渐变角度和颜色梯度也需要保持统一。

🤔产品调性

好的图标设计，不仅仅是好看，同时要符合产品的调性。那如何知道这个产品调性是属于那种，我们需要从用户和品牌出发。

例如金融类产品他们的用户都是理财用户，那我们就要给用户营造出安全可靠的感觉，所以图标圆角不宜过大，塑造一整安全感。而儿童类产品在设计语言上使用大圆角给人一种可爱，萌萌的感觉。

或者是设计的时候就可以加入一些品牌基因，比如淘宝，支付宝等等。 🤔差异性

有时候我们追求统一性，而忽略了图标的差异性。比如优酷的6.0，看上去很美观、精致、符合统一性。但这么多图标放一起，对于用户想迅速找到想要的功能，还是需要一定的时间。

---

2 中文文字排版

CHINESE TEXT LAYOUT

说到排版，就一定是要说文字的排版，界面当中的三大要素：图标、文字、图片，而其中能明确传递信息的就是文字了，所以文字是界面设计很重要的一部分。

🤯

强化文字层级，提升阅读体验

将必要的文本内容集合起来，重新排列，有意识地梳理文字层级的主次关系，要让用户能够清晰地感知到内容。

对于信息层级，通常会按照主要标题、副标题、正文、辅助文字等常见的文本元素构成。当我们把文字的本身的层级关系理清楚了，接下来就是根据文字本身的属性进行设计，文字本身属性字体、字号、字重、字色，通过调节这几个文字属性的参数，达到层级区分的效果。

例如我们知道主要标题就应该突出，那我们就可以加大主要标题字号，增加字重，让它粗一点。那我们为了拉开标题和正文的对比关系，可以让正文字号变小，或者是调整它的颜色。

🤯

有意识地创造呼吸感

字间距、行高、文本长度 是在进行排版的时候，最常调整的属性。很多新手对于行高，字间距都会疏忽，这几个方面是可以直接影响用户的阅读体验度的，所以我们必须要有意识的主要。

a.行高

在不同的地方，可能会使用不同的术语来表述「行高」的概念，比如 PS 中会使用「行距」来描述它，其实本质上，它们所说的是同一个东西——直白来说就是两行文字的垂直间距大小。

行高本身在UI设计中并不存在一个标准的数值，它通常取决于我们文本所要的效果而进行调整。一般而言，很多设计当中，倾向于将行高设置为字体高度的 1.5倍，也就是说如何你的字体大小为16pt的话，16乘以1.5，那么你的行高就是24。

当然在实际的设计当中，会根据字体本身的设计特征和应用场景（移动端阅读可能会适当增加，智能手表这种使用场景上可能会设置得更高），进行合理的调整。值得一说的是，1.5倍这个根据经验之谈，多数场景下都可以运用。

b.字间距

字间距指的是文本在横向上的间距。很少有人会在横向的字间距的设置上花费太多的时间，但是它确实是会对阅读产生影响的。在英文字体当中，字间距通常会遵循下面的准则：

使用大写字母的时候，需要增加字间距

字号增加的时候，需要适当减小字间距

增大字体粗细的时候，需要适当减小字间距

通常在排版的时候，软件会自动调整不同字母和字母之间的距离，而在进行视觉设计的时候，还需要注意字偶距的问题。（字偶距就是特定字母组合之间的间距比如按照一般的字间距，就是字母的最外沿空一点然后继续下一个字母。但是A和V这样的特定字母挨在一起，如果不针对性的调整字偶距，那么看上去它们就会离得很远，中间一大块空白，好比AV这样。通常针对这些特定的字母组合要设置特殊的比如副的间距值。）根据英文的字间距的问题，我们也可以根据情况应用在我们的中文文字的排版上。

c.文本长度

文本长度也就是说的是文本段落的宽度，文本每行的长度。通常，文本的长度要控制得相对短一点，这样易于阅读。在大屏幕上，比如 1440px 宽度的笔记本电脑屏幕上，使用每行 60~80 字符的长度（中文通常控制在每行 35~42 个字之间），但是，如果在是移动端的屏幕上，那么每行的字符数要缩短到 35~45 这个范畴（中文则可以控制在20~25个字即可）。

🤯

根据内容来选取字体

我们都是知道iOS默认字体中文是：苹方字体，英文是：San Francisco。安卓默认字体是：思源黑体，英文是：Rotobo。但现在不少App会采用非系统默认的第三方字体，选取文本字体的时候，需要考虑到潜在读者的体验。不同的字体能够给界面和体验带来截然不同的体验，字体的选择能够影响用户对于界面的第一印象。当然英文字体通常不会有很大的选择空间，在这方面中日韩三国在文本字体上，存在的问题明显会更多一些。

🤯

尽量左对齐提升可阅读性

在世界上绝大多数的国家和地区，所使用的文字排版都是从左到右的（阿拉伯语就是反过来的），阅读顺序也是从上到下，所以左对齐是遵守用户阅读习惯的重要准则。左对齐给人的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程在，极大地减小了阅读压力——而居中对齐则明显做不到这一点。另外，还要注意一点，就是要避免在段落的最后一行只有一个字，单字成行在排版中叫「寡字」，在我们 UI 设计中，一定要尽量避免这中情况的发生。

3 模块布局设计样式单一

SINGLE MODULE LAYOUT DESIGN

UI 设计新手们，最容易犯的错误就是生硬拼凑元素，造成画面不协调。抑或是大量复用单一排版样式，造成布局过于单调。在日常的设计工作中，元素太少就会空，容易让人觉得缺少设计感、模块元素单一，没有层次感；而元素太多没有合理的安排又会给人杂乱没有主次的感觉，遇到这些问题该如何解决。

🤭

善用辅助小元素

避免画面「空」没有设计感的第一种方式就是运用一些点状、线状或者是一些形状的辅助小元素进行填充，辅助小元素的有无对于画面整体的影响还是很直观的，这些元素的使用大大增加了画面整体的装饰感和丰富度，提升整个界面的精致度和设计感，增加界面的层次感和用户对界面的印象。当然在增加这种装饰性元素的时候一定要注意它的存在形式，不易过大，太过于明显，要尽可能做到不影响画面主体，只作为辅助填充的元素存在。

🤭

增加视觉变化

投影

增加投影是一个提升页面细节一个很简单高效的手段。我们在运用卡片设计时，往往会忽略掉投影的变化，其实投影是一个提升画面质量很重要的一点，所以我们投影不易过重，要自然，同时也可以考虑使用卡片本身的一些颜色，对于我们投影颜色的影响。

运用色块

运用一些色块也可以起到一定的增加视觉变化的作用，比如作为凸出内容的一些渐变色块等等。

但无论是哪种方式，目的都是为了增加画面的层次感，凸出主体内容，所以无论如何都不能因为改变而忽略了主体。

🤭

把控视觉比例

视觉比例即是主体元素，包括图片，文字，图标等内容在界面整体的比例关系。当然设计不像算数，不会有固定的值。只要从视觉的角度看比例协调、合理就行。最简单的一个只有图案和文字的海报，只要视觉比例把控得当，不添加任何辅助元素和效果，也不会给我们带来设计感。

其实让界面丰富，增强层次感的方式有很多种，它们可以相互结合，但是切忌不要为了使用这些小元素和技巧而去使用，同时使用多种也很容易让画面变得更乱。

4 色彩把控薄弱

COLOR

我们经常拿着厚厚的色彩书，看着各种色彩搭配的网站。甚至我们总想得到一个万能公式快速的解决这个看起来复杂的学科。但对于界面色彩，这其实是大部分人想的过于复杂了。

🌈

理解色彩情绪 

界面的设计中会有一些固定的套路，例如：警告我们会用什么颜色、链接我们会用什么颜色，完成应该用什么颜色。这些很多人都能脱口而出的颜色，这种固定搭配只要掌握规律，运用起来并没有很难。

🌈

 主体色发挥到极致

我们常陷入一种误区，尤其是首页金刚区有很多图标的时候，这时如果问设计师这个界面的主体色是什么，很多人就会陷入纠结，其实大可不必纠结，因为我们大多时候对主体色的理解过于片面。

🌈

颜色比例与色彩组合

在搭配服饰时我们经常会遵循一个规律：颜色最好不要超过三种，这样整套搭配不会显得冗杂优惠很和谐。界面的设计也是如此，一个简单的规律：界面中使用最多三种颜色就可以让整个界面的逻辑清晰，层次明确。

当然我们用更多的颜色去表现界面也一定是可以的，这个时候我们需要对颜色的比例进行调和，找到合适并且舒服的搭配比例。

---

5 忽视竞品分析

COMPETITIVE PRODUCT ANALYSIS

竞品分析是大部分刚入门的设计师最开始最容易忽略的点，也是工作中设计师会弱化的步骤，关于竞品分析很多人容易落入以下的误区：

a. 竞品分析只有交互设计师和产品经理需要做;

b. 竞品分析就是照搬其他同类竞争品的设计;

c. 竞品分析不需要方法论;

d. 竞品类别过于单一;

......

😲

跳出设计师职能范围

很多设计师或者工作岗位要求设计师也要参与一部分交互设计，即使我们需要跳出交互设计师这个身份，视觉设计师依旧需要去了解 app 的来龙去脉，页面的承接跳转关系。

通俗来说，是需要设计师开始有全局意识，大到设计风格，小到设计细节，都可以综合考虑来进行设计，使界面具备美观性和易用性。

😲

回归设计师做分析

这个时候我们就要开始海罗各种竞品来做分析了，大到产品的主色调、配色、icon 设计，细节到必要要素分析，插画风格剖析。当然如果有更明确的竞品，我们还可以对整个 app 历史迭代版本进行解析，减少更多的试错成本。

😲

跳出竞品去做分析

很多设计师做到上一步，就开始停止思考了。这样很容易让我们的思维进入一种定式，比方说我们经常在图片采集网站（Pinterest）中看到的瀑布流样式运用在电商领域、社交分享中都毫不违和。如果我们单纯只看某一单一类别，我们可能会失去很多的创新的机会。

---

6 缺乏产品思维

PRODUCT THINKING

我常常会问面试者一个问题：什么是产品设计师？

当然产品思维和产品设计师还是有一定的区别的，但是加上产品二字，设计师的职能，工作方式都会出现明显的区别。

问出这个问题，面试官往往是想要从面试者的嘴里得到的答案就是对于产品思维的思考。

当然产品思维是一个很广的东西，在这样简短的篇幅里，并不能体现的非常全面，这里我引申两个小点：

🤥 

视觉上，我们要拒绝盲目

盲目的开始设计，举一个简单的例子：市面上的聚合型产品过多，所以导致设计师出现了一种固有印象，既所有的产品都要有金刚区。我们常常把大部分的时间用在做金刚区的优化上面，然而可能很多设计师对于这里为什么会需要金刚区都不知道，如果不知道为什么就开始了这个设计，那你的设计或许根基就是不稳的，毫无说服力的。

🤥

以解决问题为核心

大学的时候我的老师问过我们一个问题：设计是什么？学生们对此有五花八门的各种回答：比如设计是创造，设计是让生活更加美好.......

老师的一席话让我醍醐灌顶，并且至今都作为自己的设计理念——设计是用来解决问题的。

如果所有的设计你都用解决问题为核心的思路去思考，把设计作为一个个小的数学题去攻克，设计就会简单并高效的直击痛点。

---

7 眼界局限思考

THE PREVENTION OF CANCER

设计师的眼界决定了作品集的好坏。而很多刚入门的UI设计师往往喜欢“断网”做设计，全靠自己原创。打破眼界局限从收集开始，量变才会有质变。

以下是设计师必须要随时翻阅的网站：