UI界面的优化技巧

目录

一、字体与板式

二、间距与边距

三、配色与图像

四、增加层次感

五、设计的常识

一、字体与板式

1、注意大写

纯大写的字母文本，要额外拉开字母之间的字间距，提升可读性。

2、注意超细体的字体

字重超细的字体要谨慎使用。可以使用浅色，但是要根据字体情况进行选择。如果你设计的文本是装饰性也就算了，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分手机屏幕上看起来效果会非常的差，影响用户体验。

3、标题和正文字体尺寸

先说说网页排版。标题通常分 H1 到 H6 总计6个不同层级，但是通常不会全部用到，你需要确保层级最多不超过 4 个，并且控制它们整体的逻辑和一致性。网页的首屏和登录页面上的大标题，可以用最大的那一级，毕竟，富有表现力的视觉排版是当下趋势。

但是其他的文本不要和这个标题文本差距太大。英文文本以Chrome 浏览器为例，正文使用 16px 和 17px 这种大小，并且保留 12px 文本作为最小文本。

另外，同一个段落中，不要同时使用 16px 和 17px 这样相近又不同的文本尺寸，会让用户感到迷惑。

4、行高

尽量不要在行高上采用自动行高。通常，现在比较流行的做法，是将行高拉高一些，确保整体版面的透气性和可读性，尤其是涉及到大量文本的时候。

5、文本和标题的层次结构

在需要突出显示的部分使用粗体。标题、链接、按钮都在这个范畴内。如果将粗体样式应用到全部文本，这样重点就不突出了。

6、文字对比

我们要特别注意文本的色彩。控制好对比度，确保任何类型的显示器上都可以清晰阅读。在设计占位符文本的时候，这个问题特别突出。

二、间距与边距

留白对于整体设计的重要性是毋庸置疑的。留白的变化有助于设计师理清元素之间的关系，提供节奏感，增加平衡感。

1、去掉多余的框架和线条

将一个语义块和另外一个语义块分开，最简单的方法就是在两者之间增加一条 1px 的分割线。但是这并不是最好的方法。

我见过不少设计作品中，界面中一个又一个线条绘制的盒子相互嵌套，复杂无比，每个盒子都是用 1px 粗细的线绘制的。但是，如今的UI界面上基本不用这种手法了，大量的卡片替代了以往的各种「盒子」，通过投影和间距来控制卡片之间的关系。

2、梳理从属关系

边距有助于从视觉上来判断元素之间的亲疏关系。当我们考虑一个新闻资讯卡片的布局的时候，它包含有一张图片、一个标题，还有3~4行预览文本和发布日期，那么应该如何分组和间隔？标题和文本应该是一组，这一组和图片、日期的距离更远一些。听起来很令人困惑？看下面的图片你就理解了。

3、少即是多

总会有客户或者产品会想把所有的功能和元素都怼到同一个页面或者 APP 当中。这个时候，要你让标题、菜单、文本、特价优惠、社交帐号和电话号码都齐齐整整地塞到一起，同时还要给每个组件搭配上图标。

说真的，这种问题总不能避免。这个时候可以使用这个理由来试图进行沟通：用户一次接收的信息越少，进行有效操作的可能性就越大。循序渐进地呈现信息，能够让人更加愉悦，用户对于信息的接受性也更强。

用户永远都不会费力巴拉地去拆解和分析你的页面布局，紧密局促的布局也早已不符合主流审美和日常需求了。

4、屏幕边缘留白不均匀

如果你设计的是海报、Banner 或者是 卡片 等我们所熟知的视觉元素，那么请注意边缘留白的设计。如果按照经典的方式来布置（从左上到右下），那么尽量让上方的留白更大，这看起来会让视觉更加稳当，并且更加具有视觉吸引力。

三、配色与图像

Logo、图像、图标、背景这些元素决定了整个设计给人的情绪。所以在设计的时候，需要有针对性地挑选和优化。

1、关于 LOGO

LOGO 很难制作，但是设计师只要遵循基本的原则，就能创建出像样的 LOGO。

比如仔细选择配色。我有一次看到一家名为 「VIP catch」 的钓鱼用品店，他们使用了紫色的 LOGO，从名字、配色到色彩的选择都和钓鱼这个场景没有一点关系。如果选对配色，有针对性地加入一些和钓鱼相关的元素，其实也就好了。

另外就是，如果你时间有限，就不要试图给品牌 LOGO 设计一个特定的符号或者图形了，因为真的很难做好。最好制作成文本 LOGO，通过微调字体来制作。

2、阴影

元素下方的阴影一定不要用黑色。始终基于表层的、前景的元素来选取阴影的颜色和明暗。通常，一个看起来舒适的阴影是通过多个阴影叠加造就的，一个小且明确的阴影，位于正下方，另外一个阴影模糊且弥散，透明度更高。

3、图标和图像

任何可以矢量化的元素，都尽量制作成为矢量的。从符号、箭头到 LOGO ，现在都最好制作成为矢量 SVG 格式，方便开发人员嵌入到设计系统当中。PNG 图标的边缘模糊，在清晰度越来越高的视网膜屏幕上，矢量图形元素不仅更加锐利，而且消耗更少的系统资源。

如果你正在为网站处理一组图标，请尽量确保这些图标在视觉风格和细节处理上是统一的，看起来是同属一个「家族」的。这意味着图标的笔触宽度、边框半径、视觉重量都应该是一样的。

四、增加层次感

1、运用分组建立层次 

在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序时，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组。能提升用户对于内容上的理解。

▲stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常明确，互相都不会对对方视觉产生干扰，后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。

▲在球员定制的处理上，最右边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名；哪两个球队之间正在进行比赛。

▲当一组信息比较接近时，证明他们是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性原则创造这些关系，为信息带来层次。

2、运用空白建立视觉层次 

空白也是视觉设计元素，并不是留白就是空着，如果设计中留白运用合理，可以帮助用户理解很多信息，因此任何设计都需要通过适当的负空间来传递信息。

▲如上图我喜欢的一个应用classpass设计非常极简，页面中大量运用留白来凸显内容。

▲Artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉的时候就会去打开看看，里面的排版、还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。

3、运用氛围建立层次 

▲Jour这款产品在设计上，背景通过有层次的氛围纹理和质感，使得页面氛围感很强，层次细节更加丰富，当然在设计时候切忌对于设计氛围过度运用，那样会让用户分散注意力。

▲氛围除了图形，其实色彩也是很重要一种方式，我很喜欢的ASANS的设计，在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富，这些几何图形丰富细节的同时也让整个内容更加凸显。

▲Lugg是一款货车APP有点像国内的货拉拉，整个设计氛围感也非常强，运用的全插画设计，从引导页，到核心功能页面的设计都能看见完整插画的运用，是我目前见过运用插画氛围作为主设计最好的产品。

4、运用字体对比建立层次 

▲运用衬线字体和非衬线字体对比是非常常用的方式，如上图运用了Adelle Sans和Tiempos这两款字体的对比让页面内容结构非常清晰。

▲上图官网的设计，干净的排版，通过字体大小、字型进行对比，体现出视觉层次。

五、设计的常识

1、阅读顺序

试试用1、图、文字的顺序，跟图、1、文字的顺序阅读，大家不难发现后面这种阅读步骤更流畅、更能带来良好的用户体验。

2、标题与正文

标题与正文，想要搭配的好看，前期推荐用计算器，固定好标题文字大小或者内文文字大小，然后用1.414、1.5、1.618、1.732、2、3等比例进行运算。

内文的行距也是同样的道理，这里推荐大家文字大小用偶数，大小变换输入数值。这样可以在最后导出图片的时候，避免某些意料之外的瑕疵。

3、箭头

很多初学者习惯偷懒用英文的符号代替，但是往往细节决定成败。随便画一个矩形，删除一个锚点，旋转45°就能画出来，记住要统一成文字的笔画粗细。

4、圆角矩形

关于圆角矩形的大圆角，不是不可以用，但是大部分人用的不好。所以稳妥一点，推荐圆角小一点，或者拉成半圆，会大气很多。

5、人物肖像

当需要出现多个人像的时候，最好使他们形象大小、方向、色调一致，眼睛在画面的高度最好也统一，这样有利于画面和谐。

6、字体搭配

在对于字体个性不太了解的情况下，黑体搭配黑体、宋体搭配宋体，是不会有错的(黑宋搭配是比较难掌握的)。但是搭配的时候需要注意，英文在同字号的时候行高没有汉字高，这时候就需要加大1-2个字号，同时字重需要匹配。

7、乱数假文

Lorem Ipsum 在中文中叫乱数假文，它是自动生成的一种占位符。在如今的设计领域当中，直接使用乱数假文看起来非常不专业，因为无论是 Sketch 还是 Figma 当中都有太多的插件，可以帮你生成符合语境的占位符内容。在此基础上还有另外一个要点，就是展示性的组件内容也不要简单地复制，尽量使用不同的图片和配色，让它们看起来更加真实。

在你的设计作品中，通过优化上面这些设计细节，会让你的作品更精致更贴合用户的体验，加油努力吧，向优秀的人看齐！

部分参考

https://www.sj33.cn/archives/202012/55410.html