一直以为保持界面的一致性是很简单的，但最近在复盘自己之前做的项目时，发现界面不够统一，缺乏一致性，有些细节容易被忽略掉，根据自己的学习与见解，与大家分享一下如何提升界面设计的统一性~

01 .为什么要提升界面的统一性

在学习用户体验设计的基本原则时，提到一致性原则，为了减少用户认知负荷，快速上手使用我们的产品，需要保持用户熟悉的设计模式，那么就需要设计师们确保界面设计的统一性。

统一性的作用：

1.对于用户：减少用户认知，快速完成操作

2.对于团队：建议统一整体的设计体系，提升设计效率

3.对于产品：加深用户对产品品牌的认知，加深用户对产品的印象

02 .如何提升界面设计的统一性？

在界面设计的过程中，设计师应该时刻关注自身品牌与设计规范，通过布局结构、视觉层次、设计风格等维度来达到设计的统一性。

我们可以重点从以下三个维度来提升界面的统一性。

一、布局结构维度

定义板式布局结构是我们做界面设计的第一步，我们需要确保页面基础布局的统一性。如在页面布局时，会涉及页边距、导航栏、tab等这种基础布局结构，我们需保持通用的设计模块的布局统一性。布局结构的统一依赖于我们前期设计规范文档的制定以及设计师对规范的熟悉度与使用~

?相同的页边距、固定的顶部导航、tab布局样式

二、视觉层次维度

在界面设计中我们通常通过颜色、大小、粗细、纵深、间距来拉开界面的视觉层级，视觉层次维度是需要我们重点关注的~有时在做设计的过程中我们会做着做着就放飞自我，追求差异与创新，忽略了视觉层级关系的统一性问题。

颜色

色彩不统一的问题比较容易出现在界面设计中。特别是出现在一些状态颜色区分上。不同状态的色彩应该严格定义，使用时保持统一。比如有时会遇到这种情况，一个页面中已完成状态用灰色，在另一个页面中却用了绿色，这种情况是初级设计师比较常犯的错误。

我们需要确保相同层级、相同功能的元素色彩保持统一。定义好品牌主色、辅助色和功能状态色，在界面设计中，严格按照色彩规范来使用。

严格定义色彩使用规范

大小

大小统一性问题经常出现在字体、、图标上。

字体大小

前期制定好字体规范后就应该严格遵循，正文比如使用14px，那么所有的正文都应该使用14px，不要为了美观而刻意的去调整字号。

比例

我们需要重视的比例大小。在同一业务模块中比例应该是统一的，这也有助于产品后期按比例配图，确保效果。比如feed流采用1：1，banner图采用白银比例，那么我们在界面设计中，出现对应模块下的时，比例大小也应用我们定义好的比例，而不是每个页面随意定义。

图标大小

同一模块下的图标需保持大小统一。在绘制图标的时候建议使用图标栅格来绘制，确保图标视觉重量一致。

粗细

粗细的统一性主要是指描边粗细的一致。粗细不一致的问题通常出现在分割线粗细、图标粗细上。

分割线粗细

分割线建议用0.5px的描边大小，从一开始就做成组件形式，后续要调整粗细或者颜色都可以全局调整。

图标描边粗细

相同模块的图标粗细需要统一，这里也是需要从视觉上去达到统一。在antdesign的设计规范中，有指出弯曲的线条会比竖直的线条看起来细、倾斜的线条也会比竖直的线条看起来细一些，我们在做设计时，也应从视觉感受上进行灵活调整。

纵深

对象离地面越远阴影越大，模糊值越高，在UI设计中也是如此，我们主要通过阴影来达到纵深感。通过设置阴影参数来拉开视觉层级。

我们可参照ant design将卡片纵深分为无、低、中、高四个 UI 层级，各自分布在不同的高度层级，阴影属性也有所不同。相同层级模块的阴影应该保持统一，方便复用与开发。

间距

在界面设计中我们也经常通过间距来拉开视觉层级。间距规则也很重要！！关于间距规则如何定义，可以参考此文章《方法论｜UI设计中的间距规则》

我们需要统一间距规则，反复使用到我们的界面设计中，使界面达到统一、具有节奏感，同时拉开视觉层级。

三、设计风格维度

在界面设计中，同类的设计元素、模块尽量保持统一的设计风格。一致的设计风格让界面整体更加统一和谐。

图标风格的统一

功能属性相同、层级相同的图标应该采用相同的设计表达形式，确保图标构图、韵律、风格的统一性。

插画风格的统一

缺省页插图应该采用统一的设计风格。为了突显品牌在banner插图设计中风格也需尽量保持统一。

开言英语banner插画风格的统一

整体设计调性的统一

整体设计调性是针对整个app而言的。如果我们首页采用卡片式风格，那么整体的重要页面都应该采用一致的卡片式风格，而不是每个一级页风格差异明显。页面横向间风格的统一也是我刚工作时导师常强调的一点。

统一的设计风格

总结

在工作中，当我们设计完成后可以耐下心来检查整个界面设计的一致性，横纵向对比我们的设计元素否达到统一。我们可以从布局结构、视觉层次、设计风格这三个维度来提升界面设计的统一性。

布局结构：页边距、导航、tab栏、分段控件等模块布局的统一

视觉层次：从色彩、大小、粗细、间距、纵深维度拉开视觉层级，确保同一层级元素的视觉统一性

设计风格：图标、插画、整体设计调性的统一

通过提升界面设计的统一性，让我们的设计更加规范统一，提升用户体验；审查界面的统一性，通过对细节的把控，也能让我们在做设计的过程中变得更加仔细与严谨~