设计系统1：界面拆解

解剖学一般是针对某些器官的分开和分离。用户界面也可以一样被分解。从创立之初，用户界面也会随着设计师对用户的不断了解而成长，他们也会死亡，为更适合的模式提供更多的空间，所以，如果UI设计一个组织，那他即应该可以被解剖。

每个数位的屏幕元素，我们看到是由四个部分组成：颜色，字体，排版和图标。当然在UI界面，声音，深度和动效也是有的，但是都没有前面的四个重要。没有一个UI元素可以脱离前面四个元素存在。如果能在设计过程中尽早的定义这些模块，那么就有机会创造更好的界面和交互体验，而且整体能从属于一个大的目的-品牌定位。

来看看下面的例子，对一个简单的按钮进行解剖。

想看看他们是如何组合发挥作用的吗？

现在添加了他们的网格系统，让其无论在什么屏幕下，都能给我们一个灵活的，响应的方法去适应？

我使用的是8点网格系统，就是运用8的倍数去定义每一个块体和内部元素：尺寸，Padding和Margin。他将给你一个更有凝聚力的布局，Elliot Dahl的文章里有很好的提到这一点，8点网格：https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

当你打开最喜欢的app，会发现整个UI中的这四要素，这些程序员来编写这个页面时，都会遵循一个CSS的样式。这很重要，因为大部分设计师都不知道这个重要的事实，最终给到开发者不一致的设计文档。这样导致了不一致的UI，页面是一种分散的体验。

总是换位思考，设想开发同学会准确的参照你给的东西进行编码。所以如果界面出现问题，那可能就是设计师的错。

所有的前端开发人员，需要在他们的代码中标记处Padding，Margins，Font-size，Font-weight，color，background-color等等。如果你的系统中有对这些有着明确的定义，那么对于开发同学来说是会有着很大的帮助。我用一个叫做Design Token的方法来帮我处理这个过程，然后我组成一个SASS文件，如果你不熟悉，一个前端开发同学可以帮助你。你可以在这里了解更多：https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

总之，尝试用一个框架开始撰写你的UI，让你的UI界面可扩展，可以变换参数（色调，排版风格，图标），但是你应该始终有一个框架，这个框架就是设计系统。

设计系统，是一个由动态指南构成的产品，用于传达一个统一的UX体系和设计目标，提升各类输出物的和谐度。

原文地址：https://medium.muz.li/the-anatomy-of-all-digital-interfaces-11d43f55eaf