设计系统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体系和设计目标，提升各类输出物的和谐度。
【设计系统1（界面拆解）】原文地址：https://medium.muz.li/the-anatomy-of-all-digital-interfaces-11d43f55eaf
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai）
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 爱琐搭配（喜欢复古、冷淡，像这种双环设计的气质耳环）
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 单点登陆
- 操作系统|[译]从内部了解现代浏览器(1)
- 别墅庭院设计，不同的别墅庭院设计也给人视觉上完全不一样的！
- 游乐园系统，助力游乐园管理
- 中国MES系统软件随工业化成长
- 推荐系统论文进阶|CTR预估 论文精读(十一)--Deep Interest Evolution Network(DIEN)