很多设计师在公司，肯定有成型的设计系统，我们只须要按照规范做设计即可。但是，当我们自己独立去接咨询项目的时候，或者加入一家 start up 的公司时，我们是否能够独立产出设计系统？我们是否可以做出为现在和未来功能留有余量的布局？我们的栅格和断点到底该如何定义？如何做相应式布局？
这些问题实在都是做一个设计系统的根本，也是我们最该当闇练节制的技能。
我讲在这篇文章里回答这些问题，我将自己的事情履历以及长期参考的 Design Guideline 放在本文做为例子，包括 Carbon Design System、Fluent UI、Lighting Design System、Evergreen、Material Design、Ant Design，来帮助大家在最短的韶光内，办理上述问题。
本文将会分为 6 部分讲解，相信耐心的你会愉快看完得到一些收成。
Part 1: 间距和最小单位 Spacing & Mini UnitPart 2: 设计布局 LayoutPart 3: 栅格系统 Grid SystemPart 4: 断点 BreakpointPart 5: 画板尺寸选择 FramePart 6: 宽高比 Aspect Ratios在写正文前，我先遍及一些新人可能不熟习的英文词汇，在 Design Token 中，我们不可避免的会利用一些英文词汇，本文中为了方便，把一些常见的设计英文直接书写，新入行的朋友不要慌张，在本文中还有更详细的阐明。
Margin 间距，表示固定间隔、页边距Padding 添补，表示元素边框与元素内容之间的空间Offset 偏移Column 栏，常缩略书写为colRow 行Grid 网格Gutter 水槽，指得是列、网格间得间隔Container 容器Box 盒子Card 卡片Component 组件，组件在 Sketch 内才叫 Symbol，可能是开来源于java，表示引入 xx 数据类型一、Part 1: 间距和最小单位 Spacing & Mini Unit
1. 设置最小单位为 8px 或 4px
统一设计的最小单位就像是固定一把尺子的最小刻度，这会让我们的设计更大略，更统一，落地实现更大略。引用我特殊喜好的设计师 Mizko 说的一句话:” It’s will make your life much easier.” lol
在 Martial Design和 Ant design 中其实用到了最小间距和最小间距形成尺子这个观点，在 Carbon Design System 中则更直接，他们定义了2x Grid System，大略来讲便是界面设计的内容都可以被2整除或者是2的倍数 （IBM很神经 乃至把 2x Grid 用到了他们的建筑设计、周边设计等)，2x Grid 的 Mini Unit 是 88px，也便是他们设计的最小单位为 8px。同样，我们从 Ant 和 MD 看到的设计最小单位也是 8px。
你可能会问那直接用 2px 为什么弗成？我会回答那会让你的人生很难，由于 2 规定出来的间距太多，设计调用时，反而会出来更多规则，让你的设计韵律感不佳。
在一些设计团队分享中看到一个比较故意思的结论，在目前统计的用户常用屏幕尺寸中，8px 和 4px是整除率最高的之一，以是选择 8px 或者4px，我在事情中常用的最小单位是8px，比较推举。
但是在一些情形下，8px 不能知足我们的所有需求，以是，我们可以涌现一些特例，比如 2px、4px、6px 等分外间距。我们比如某个间距是 28=16px 我们以为不足时，还可以 16+4=20px进行调度，规矩是为了更好的统一而不是限定。（我脑中是一把尺子，大刻度是8，小刻度是4。）
在 B 端设计中，Ant 有一个最小单位为 8px 的常用模度表，可以作为参考, 这对我们设置页面布局规则将有提效。
以是这里总结一下，一样平常我们利用 2x grid 思维作为基准，用 8px 作为最小单位，最小间距也可以是2px 、4px等，建立自己的模度表，并常利用，让自己设计更大略。
补充一点，苹果的设计规范内，有些地方有基数，是由于他们用了大量的人力去调度到最舒适，团队强大，做“尺子”的人，人家怎么弄怎么对咯。
2. 在设计软件中设置快速操作
Figma 中，在 Preferences 里的 Nudge amount 设置 big nudge=8 即可。
Sketch中，在 Preferences 里的 Canvas 设置 big nudge=8 即可。
二、Part 2: 设计布局 Layout
设计布局实在是产品的功能和诉求决定的。
对付 B 端后台类产品，功能比较繁芜，以是在布局上比较讲究如下几点：
方案导航形式：布局前整理现有功能和未来可能新增功能，预留功能收纳的导航，为未来新增功能留足空间。划分功能区：布局时考虑用户端设备，如果是 PC 端只管即便担保用户在一屏内可以高效操作，可以横、纵向分割屏幕，划分功能区，如导航区、操作区、内容区等。考虑多端适配：如果是比较大略的后台，建议采取百分比方案空间，或者采取固定版心的形式进行大屏适配，利用 Break Point 来进行不同屏幕的适配；如果是功能繁芜的后台，比如海内常见的飞书，就要合营栅格、相对值及固定值来进行后台布局，将页面灵巧处理，尽可能在一屏内完成所有交互。合理利用副屏：在 PC 端设计时，一些功能可以提前收纳如 Dialog、Drawer、Right Side Area中，这样不止可以减少页面的跳转，让用户更加专注，也可以让功能得到更好的收纳，实现用户体验和产品需求的双丰收。就像上文所述，方案产品布局须要看功能诉求，每个产品千差万别，那么我这边来列举一些常见的布局供大家来参考，希望会有帮助。
案例1:大略的 2 col 和 3 col 布局设计，如下图：
在一些功能不繁芜的系统，我们的布局可以相对大略，也方便多设备适配。
先说适配，我们可以吧 Body 1 看作移动真个一屏，同理 Body 2 和 Body 3 也一样，合营 Break Point 就可以轻易的实现多端适配。比如，我们可以通过设置 Body 1 的宽度区间和所占屏幕比例约束，当到某一个 Break Point 时，只显示或不显示 Body 1 即可。同理，Body 2、Body3 也是这个方法。
再说布局内容，Body 1 可以是导航，也可以是内容，Body 2 和 body 3 放入紧张信息 1 和紧张信息 2 即可。其余，案例要灵巧利用，在这样的布局上，我们也可以增加顶部导航，来开释 Body 1 的压力。
案例2:大略的固定版心设计，如下图：
这样的布局依旧是适宜一些功能不繁芜的系统，实在很多网页便是这样的设计。
先说适配，我们可以将 Break Point 设置不同的版心大小，只要在版心内做好设计即可。我们也可以想一下，如何能让这个布局更好的适配？相对值是答案，我们可以把固定的版心设置成相对大小，比如屏幕宽度的 80% ，再设置断点和最大最小值，那么这个产品在多设备下的适配会更有活气。
这个布局承载繁芜功能的缘故原由是，顶部导航的容纳功力有限，用户须要反复去顶部导航征采。这样布局的变形是在 body 左侧可以增加快速导航，右侧增加赞助信息内容模块，比如 Titter 便是这样处理的。
案例3:工具型后台，如下图：
工具型界面设计实在很常见，比如 Adobe 系列，随着功能和繁芜度的增加，header 和 Side Area 的繁芜程度也在加深。
用这种布局的情形也可能是自定义功能的后台，比如用户要自定义审批表单和试卷等。Side Right Area的增多有时是为了优化交互，比如我很推举的动效软件 Protopie, 在右边分了 3个side area，分别是交互办法、韶光、参数，这大大节省了动效制作的操作本钱。
这样布局的相应式也同样，便是设置 Side Bar 的参数即可。
案例4:常用后台设计系列，如下图：
上图是一部分目前的主流后台布局手段，通过产品的方案的多少决定 Header 和 Navigation 的交互以及位置。
是否用到 Right Side Area 也是功能决定的，可以通过相应布局实现预留 Side Area 的位置，如果不是一贯全局涌现，可以用 Drawer 形式呼出。
Body 区域须要根据业务场景分区，操作区、显示区等。Content 一样平常在 Body 内，利用百分比或者栅格来方案相应。这部分适配一样平常也是用 Break Point 和规定格模块参数来决定，一样平常会利用栅格。
三、Part 3: 栅格系统 Grid System1. 栅格的起源
网格系统开始是书面书本的赞助线，1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特殊委员会。
他们的紧张任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担当领导，他们以罗马体为根本，采取方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是天下上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。
万维网同盟（World Wide Web Consortium）发布的CSS Grid Layout Module Level 1制订了二维的基于网格的布局体系。
2. 栅格的定义
栅格系统英文为 Grid Systems，（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
3. 利用栅格的意义
1）节奏感 Rhythmic
网格系统确保各个布局之间的同等性，提升体验和视觉的同等性，使设计更有秩序感、节奏感。
2）动态的 Dynamic
利用网格可以跨不同屏幕尺寸的多个设备体验连贯，是相应式设计的必备手腕之一。
3）效率化 Efficiency
效率化分三个层面表示：
对设计师：能让设计师高效准确设计界面，多端口屏幕设计减少，提高设计效率；对开拓：节省开拓本钱，增加合营效率，落地实现更精确；对用户：秩序感的界面降落了用户的理解本钱，让用户体验更好。4. 栅格的种别我们从 Figma 的 Layout Grid 可以看出，栅格的分类大致有四种：
1）网格式 Grid
网格式的栅格系统利用范例是 2x Grid System ，这是 IBM 设计的根本。无论利用何种设备或媒介，2x Grid System 都能供应足够的构造和辅导，让设计师可以专注于自己的创意。
2x Grid System 的根本固定单元是 8px 的小方格，通过组合这些小方格，组成了rows、column、container、card 和 components，以及 margin 和 padding。
有些情形，便是网格形式的栅格系统，利用最小单元格打算出的 padding 和 margin 形成水槽。下图是 2x Grid System 的示例：
2）列式 Column
列式网格式常见的互联栅格形式，我们见到的大部分网页及开源组件库险些都是列式的，(苹果的网页只用了相对值，担保在相应下的丝滑变革，这是须要很大的本钱的，恰巧我的公司也是这样搭建，确实打算起来比较麻烦），下图是列式示例：
3）行式 Row
行式一样平常比较少，在栅格系统中，行式常常用于标定 header 和 footer 来利用。在网格系统中，我们之前讲过最小单位，为了方便设计，常常用行式栅格作为最小单位的”尺子”标记在画板，我用 FIgma 的在操作举例：
行式栅格更多的浸染是来调度纵向的最小单位，比如我们设定 Mini Unit=8px，就可以在 Layoout Grid 设置 Count=1000+ ，Type=Top，Gutter=0，Height=8px（mini unit)。相信我，这一定会让我们的设计生涯轻松很多。
4）组合式 Compound (前三种办法稠浊利用)
在大部分情形下，前三种办法都是组合利用的，只不过我们常常不列出行式或者用赞助线来代替。
5. 栅格系统的构成
栅格由 栏 (Column)、水槽 (Gutter) 、 边距 (Margin) 、最小单位 (Mini Unit) 构，前文讲过最小单位，以是下面不赘述。
1）栏 (Column)
Column 栏是栅格系统内容的容器，盛放文本、表格、图片等内容及元素。
页边距不是固定值的情形，列的宽度是固定的。如果是固定边距的情形，列的宽度不是固定的。UI设计中，我们一样平常会选取页边距固定，也便是设置Margin。
总之，列和页边距只有一个是固定值，另一方的值由运算得出。
详细运算公式：
Viewport Width= Column Width number of column + 2Margin + Gutter Width (number of column -1)
Number of Column 和 Gutter 是我们自己定义的，Viewport Widt 利用栅格部分页面宽度也是固定的，那么只要变量只剩 Cloumn 和 Margin，给个中一个值定义，即可算出另一方的值。
其余，列数也可以通过定义 Break Point 改变， 在不同 Break Point 下的界面设置不同的列数。
例如，
页面宽度小于 400px 时，用 6 列，知足手机端；页面宽度在 400-1200px 时，用 8 列，知足pad和小型电脑；页面宽度大于 1200px 时，用 12 列，知足PC真个大尺寸。Container 如果是卡片形式，可以设置 Padding 来让视觉更有秩序。在我们利用栅格系统做 B 真个 PC 端设计时，建议选用 24 栏设计或者 12 栏设计。须要把稳的是，列和栏是有差异的，在 Ant Design 中 1列 = 1栏+1水槽。
2）水槽 Gutter
水槽：是列之间的空间，可帮助分隔内容。
水槽的宽度是固定的，但是对付不同的真个设计，我们可以设置 Break Point， 在不同 Break Point 下的界面设置不同水槽宽度。在针对不同端口设计时，移动端常用的水槽宽度较小，PC 真个水槽宽度每每较大，相应式布局每每通过设置 Break Point 来定义不同端口不才水槽的宽度。
须要把稳的是，水槽的宽度要小于列宽，避免涌现设计留白过大的情形。
比如，在 Material Design 中，在移动设备上，0-599 dp 时 ，此布局网格利用 16dp 水槽；在平板电脑上，断点为 600-094 dp时 ，此布局网格利用 24dp 水槽。
3）页边距 Margin
页边距分两种，固定边距和非固定边距，值得把稳的是，非固定边距的情形下，Margin还可以定义为相对值，比如 Margin = 10% screen width，也便是页边距即是10%的屏幕宽度。
在一个app界面设计中，可以有1-3种固定页面边距，这是根据页面呈现内容和你想呈现的视觉效果决定的。一样平常来说，页边距越大，相应定义的水槽也可以越大或者坚持不变，这是为了让页面更清爽，留白更多，有时也是为了突出高等感，反之，如果页面内容过多，可以用小边距。须要把稳的是，同一个页面只能利用一种边距。
在相应式布局时，也可以根据 Break Point 去设置页边距的值。
比如，在 Material Design 中，在页面宽度在小于即是600px的情形下，margin = 16px在页面宽度大于600px的情形下，marigin = 32px
四、Part 4: 断点 Breakpoint
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport size.
断点是自定义屏幕的宽度范围，在不同范围下确定不同的布局规则，这是为了适应不同的设备和屏幕尺寸。
我们先来看一下如下几个 Design System 的断点规则：
我们先从 Break Point 个数来看，Sales Force 的断点个数最少，个人认为的缘故原由是 Sales Force 的用户群体多用PC端，由于大多为后台操作，须要担保用户在单屏能只管即便方便完成所有操作，以是 Break Point 较少。而其他三家都有自己的硬件设备，为了设计能更好的做事于全真个设备，以是断点个数较多。
我们再从 Break Point 的值来看，各个 Design System 的值都大相径庭，这是由于要适配独特的产品尺寸。下面，我们来看一下主流设计软件的默认设备画板尺寸：
我们可以得出下面结论：
0-599px 大致为手机适配600-1023 大致为平板适配1024-1439 大致为手提电脑适配1440+ 大尺寸适配（ps: 这是我个人常用的 Break Point 参数）
以是我们在定义 Break Point 前，须要看产品功能繁芜度及该产品的用户常用设备。如果用户什么设备都用且所有功能都须要，那么恭喜你，全端适配相应，Break Point 规则会很多，人生很难。反之，我们用户常用设备少，我们可以减少断点。
在定义 Break Point 的大小和详细值后，我们还须要定义在该 Break Point 范围内的规则，常见的包括: Column number, Gutter, Margin，Column size 等，乃至在有些时候，为了更好的呈现效果，我们变动某些 Font Size, Padding 等。比如，我们在 PC 端利用了64号字作为 Huge-title，但是在移动端64号字可能会效果很差，我们就须要在移动真个断点范围缩小字号，大概它可以是28号字。
回到我们 Break Point 的定义， Break Point 让我们可以适配不同的设备，以是，在不同的 Break Point 下，我们须要灵巧而统一的调度不同的参数，比如，绝对值变为相对值等等。但是我们同样须要考虑开拓本钱，只管即便靠合理的交互避免繁芜的规则产生，这一点往后有机会再写。
在规则比较多的情形下，建议建立 Google Doc 制作表格，进行规则管理。
五、Part 5: 画板尺寸选择 Frame
B 端项目在 PC 真个设计稿尺寸很多公司都不一样，据 Ant 统计，利用中台系统的用户的主流分辨率紧张为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
根据事情的履历，直接说结论：
如果客户多为政府、国企、医院、学校等，这样的机构有很多古早屏，为了更好的适配，统一为：1280800；一样平常为144900，把稳，须要去掉浏览器 Browser，以是一样平常设计区域为：1440820。画板统一是必要的，就像移动真个统一是一个道理，这会大大减少团队的沟通和理解本钱。
六、Part 6: 宽高比 Aspect Ratios
在调 Container 大小时，限定宽高比，这样做将增强产品之间的统一感。我们可以制订几个得当本产品的宽高比，然后制出表格，从表格中选择一个纵横比，然后根据须要乘以每个维度的基本单位以设置宽度和高度，保持纵向或横向的比例。
如下宽高比是一个设计体统该当有的：1:1，2:1，2:3，3:2，4:3，16:9
七、结尾
Grid System 内容远比短短的这一篇文章要多，须要理解更多的朋友可以去看Josef Müller-Brockmann(约瑟夫·米勒-布罗克曼)所著的《平面设计中的网格系统》。
本文由 @JQ Design 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自Unsplash，基于CC0协议
