产设计从解户到定义问题，再到探索方案并输草图乃至视觉稿，每一个阶都系到一个产的成败。而中交互设计与视设计是与设计师密切相关的两个阶段，也是最大程度占据我们工场的内容。其中关键的信息设计、导航设计、界面设计能从栅工具中受益，因为它们概括下来，涉及到组织信息以提供更合规、流畅、且符合用户习惯的浏览验。
在面对复杂信息的版与布时，设计师如何进行决策，是凭借感觉经验经思考的随意摆放，还是有一套自洽的论体系得遵循并规范整个设计，且延伸至整个产线，多务，多平台成为通的布准则。我们当然皆希望成为后者。
1. 么是栅格
一句话概括：栅格系统是用规范化信息局，辅助设计人组织信息的工具，且能够尽能证设计与开程的规范高效，并提高局视效的一致、韵律感、秩序严谨、比例良等方面。
在平面设计领域通采“格”的方式来规范布，格就像设备屏幕上的一个个像素点，平面设计师将物核心版面区域拆分为等分的方格，保证、对齐、节奏、例、视觉面积等方面的协调感和一致性，从而保证设计美感和视觉传达效率。
但应用程序相关的产品设领域，鉴于设备屏幕横向宽度受限但纵向高度无限延展的背景，及真实体验设场景下，使用无限下拉交互方式承载复杂内的规则，产品设领域往往只需制纵向列式分割规则，以规范 X 轴向内的对齐、比例布局效果。这就我们所的的栅格（与网格作一区分，常用与产品设领域）。
栅格系统不是令“谈色变”高深技巧，而是设计界约定俗成广泛运用于平设计及品设计领域设计工具。在涉及到组织信息工作内容时，合理使用栅格系统能够从设计效率、设计质量、多色设计协作等多动设计师工作。
2. 网格/栅格发展历程
早在文艺复兴时期，们便有意识使用辅助线叠加在图片上形来模拟透视关系，已经开始使用黄比例矩形。13 世纪，法国筑师 Villard de Honnecourt 创作了张图表，试图实现“和谐设计”。该图将网格系统与黄比例合并，以生基于固定比例边距页布局。该技术至今仍在使用，大多数印刷书籍和杂志设计师都使用 Villard de Honnecourt 图来创平衡设计。
工业革命标志着大规模生开始。报纸，海报，传单和各广告等印刷品兴起，印刷设计师提出了很高要求。设计师必须解决两个问题：将不消息传不群，并允许自然扫视浏览为，时要防止不部分争夺读者注意力。可以看到已经有了栅格雏形。
△ 带广告报纸页，法国巴黎，1919 年
而今所使用的网格更多的是受瑞士版式响。第一次界大战，一直保持中立的瑞士成为了欧各地有创造力人士的聚会所。由于必须以三种官方语言（德语，法语和大利语）置印刷出版物，因此计需要一种新的网格系统来实现这一目标。像 Jan Tschichold 和 Herbert Bayer 这的印刷商都采用了模块化的方法。第一次，间距留被用作布局计中的动组件，这促使网格系统的发展。（Josef Muller-Brockmann）的图形计网格系统，1961 年。
以现，栅是用组织信息的工具，不论是几个世纪前的印刷物，还是今基屏幕的信息局，以用栅来现更规则、一致、和谐的信息展示效果。
小游戏：在两张纸上绘制一个图形，怎么保证位置一致？给一些人分配两张空白纸，给一些人分配两张带有格的纸
1. 基本构成
一个栅系统主要由 Container：容器、Columns :列宽、gutters：水槽、出血：Margin 四部分组成。
中容器指的是我们需要布信息的版面区域，一般为整个屏幕，或除固定浮区域的他分。栅格系统的他大元素都要基于该容器的大小计算。
Columns 列宽一般指的纵向分割空间中较宽松的部分，常用与置主信息，其界对应模块化信息 Box 的外框。设软件中一般以颜色的矩形的形式展示，很易分辨。
Gutters 槽处于 Columns ，用于放留白空，以实现版呼吸感及分割信息元素。也是我们在设计经常讲距。Gutters 是我们在界设计需要特关注甚至需要专赋予其特殊值栅格要素，如根据约定俗成些布局规则将其定义为 16、24 等 8 倍 px 值。
Margin 出血则比较好理解，源面计印刷计领域，是包围在息四周的空域，在印刷领域用于裁剪以保证输出成品的尺寸的规整，而在产品计领域则用于侧间距以增加界面呼吸，优化界面视觉致度乃至息的浏览体验。
2. 空间划分
栅格主划分横向 X 轴屏幕的比例，以保持整体设的规范化一致性，保证信息展示的节奏感，韵律感，以及保证同类信息同层级信息的视觉重不会偏差。由于不论移动设备还 PC，横向屏幕的展示空间都固，因此可以利用栅格义并提炼横向间距规则通用规则，配整产品的所界面。纵向由于可以无限延展，因此必栅格划分。只需根据产品设早义的常用间距规范配。常规的设系统中，往往会将栅格间距分作两部分讲，因两者既互补关系又界限模糊的区域。其中间距系统可以用解决纵向信息布局的设问题，栅格则解决横向，实际作场景，两者界限可能会融合间距系统义的间距可能会栅格系统的间距重合，这并什么问题，具体场景以设师判断准。
tips：纵向主影响布局精确性的问题字体，需了解不同字体不同行高场景下对应的字体高度、下间距留白，将由行高与字算的空白纳入间距规则。一般字体下一侧的留白行高减去字/2。
12 栅格与 24 栅格 n 倍栅格
产品设中，常用的栅格系统 12 栅格与 24 栅格，其中通用的则 12 栅格系统。
般情况 12 栅格能适应大部分场景，为 12 能够被 2、3、4、6 除，这意味着你可以将屏幕空等分为 2、3、4、6 份，可以满足各复杂信息拆分布局场景。
除了等布局，12 栅格在不对称布局也能进行较和谐的比例划，如双栏布局的 4+8 栅格，3+9 栅格。三栏布局的 2+8+2 栅格，3+3+6 栅格。
而在屏幕较大，需要精细化布局场景下可以采用 24 栅格布局。针 24 栅格有个很简单解释——列越多越灵活。使用与否主要看需要进处理信息内容层级多寡，需要屏信息进多个模块拆分，24栅格允许你进更多划分提高布局灵活性。
如下方的 Antdesign 栅格系统，作为 web 端通用的计系统，Antdesign 需要适配不同备环，足不同产品的诉求，因此为了保证最大的灵活性而选择 24 栅格。
当然，不要被局限在 12 栅格和 24 栅格，栅格只是一种工，可以灵活根据实际计景来选择栅格列数，例如比较简的卡片布局，可能仅仅使用 4 栅格就能完成规范化的计排版。再例如，横向布局素为奇数 5 个，那可以使用 5 栅格，要进一步细化布局（5 的模块内可能仍然有息需要拆对齐）可以使用 10 栅格等等。下图展示了比较灵活的栅格用法，而不是制 12 或 24 栅格。
下图展示了针对“金刚”五栅格的灵活运用示例。（当然在实际计金刚素布局会更加谨慎，这作为栅格操作示例）。未经调整为完全等的效果，然而计需要将核心域进行聚焦，因此会考虑增加侧 margin 值，来进一步突出中心素。另外在栅格数量的选择上，根据实际需求可以选择五栅格，但为了追求灵活性及后续延展性，可以把 5 栅格进一步划为 10 栅格，但实现的均衡效果是一致的。
3. 栅格的作用
在正开始讲解栅格作用前，我们可以先来做个小游戏。由两个分代表 A 和 B 组，拿到应组两张纸稿。其张标有红色圆，而两个需要做是在另张纸上原这个位。其 B 组是使用设计师祖传钛合眼睛来定位，结必然法做到完美。而 A 组，在栅格指导下，可以以高精准度和高效率完成圆绘制，这个小游戏很好帮助我们理解栅格在实设计发挥作用。
视觉角度
读过《写给家看的设书》的设师应该都知道，优秀的版面由亲密性、对齐、重复、对比四素组。这四元素基本都与栅格紧密相关，能其指导下得到好的执行。
1. 齐
栅格的所有素的边界都能作为对齐参考线。优秀的计 1 像素的对齐失误都能肉眼识别，之所以如此在对齐，不仅仅因为它从计的角度定义了限制规则来帮助更好的执行计，更是因为对齐直响了阅读受众浏览息的体验。对齐线恰好是阅读的起点，对齐的内容能够使用户在无识的状下浏览息而无需花费过多成本去转移视角，从而大大减少了阅读的附属行为，使人沉浸于内容本身。
当，对齐的内容自有其因秩序而产生的美感，姑且是一个因素。
2. 间距
为了更好的解间距的本质，我们可称它为留白。甚至你可将拟人为人类的隐私权。如果你与他人距离为 1cm，和距离 1m 相，哪一个会更舒适？信息同，信息可无限量，同时人在单位时间的阅读量，注意同样有限。信息需要被分割为多个区来依次被阅读，人需要短暂的休憩来缓解一时间专注成的疲惫。这正是间距的作，概括来说，间距使复杂的信息被拆分更易于阅读，同时使人的单位时间专注得到适量分配，总体而言升了人们阅读浏览信息的体验。除此之外，我们会称有利于秩序与节奏感呼吸感等方面，实是对升浏览体验的他解读。
栅格控制的是有间距而是要间距，保证模层级分割的节奏感与一致性。例如栅格控制 margin 血的间距，圈定容区面积,两侧留白制良好的呼吸感。同时栅格的 gutter 则是来控制 X 轴向元素间距、模间距的通间距。
3. 分割比例
在信息排版，良好比例关系能够极大提升阅读体验与信息美感。时典型比例关系易于降低设计师决策成本，增加设计确定性。如下图两个案例。X 轴时存在两组或三组要性等信息时，我们自然会选择等分设计，将 12 栅格分为两份 6+6 及三份 4+4+4。如此，设计师可以保证组信息所占视觉量基本相等，页以平衡。下是标准等分栅格示例，及标准称栅格示例（导航等辅助区域+主内容区=1/4+3/4）
在如下我在日常工作运用栅格个实操案例。作为个标准 Landing page 落地页，核心利益由配图+文案组成，由于内容较少，最终决定采用左右混排布局以充实版，为了保证左右视觉版平衡，利用栅格计算其积，平衡视觉效。其紫色文案区域基于 Box 予 1/2Gutter 空隙来判定其宽度，居处理。纵模块距则采用 2 倍 gutter.
过上两个示例，我们能看出采用用比例能够大大降低设计决策成本及提高输出物确定性，从设计师色度讲，论是其提供设计阐述依据是提高设计效率功用都大有裨（bi）益。从视觉度讲，栅格比例关系与黄比例规则结合，利于输出平衡有秩序感优秀版，并接提高用户浏览体验。
设计色度
提高设计效率与统性：设计师使用栅格系统能够降低决策成本，快速定义用规则并执设计，提高设计确定性。它帮助设计师节省了在基础设计操作上花费时，如移动元素、计算距等。由于组件化与模块化样是基于栅格系统和距系统进设计，此栅格样利于设计师和开发员组件和模块复用，进步提升效率。
栅格还利于规范化计，当存在多计协作的计项目，栅格系统利于帮助统一计一致性，统一输出标准。避免了多方参导致的主观因素的响。
开发角度
还度始终是计开发对中存在的问题，而栅格系统能够好的帮助规避常规的横向间距类问题（纵向间距问题主要受字体的置响），以提高计还度。
1. 自适应方案 ,屏幕适
栅格同时够指导页面在多平台多屏幕尺寸的自适应设计。于与开发对接，阐明流布或端点布等适配方案，保证还原的同时降低沟通成本。优秀的自适应方案够使产脱颖而，在同设备同环境都呈现优秀的展示效果。方是一个自适应方案的演示。更建议大打开Dribbble 直接缩小浏览器口来了解。
4. 规范角度+总结
栅系统是设计系统/设计规范的关键组成部分，符合个益相关者的需求，对用户，提供高质量的视面的排版、局、界面；对设计师提供统一、一致、规范化的设计规则参考，证设计输出的统一一致，对开人，证设计稿还原度、提高开效率。
且由于栅格系统在产设计领域已经成为约定俗成的规则，因此在当前户使的有产中，都存在栅格系统的规则影响，因此户对栅格系统形成的模固定的信息布方式已经养成交互、浏览的习惯，如见的两分布形式。这将尽可保证你的设计符合户对产界面的预期，就够使户快速成任务，实现户体验目标，且使这个过程尽可的流畅效，自然无意识。
面我们可开始正式建立栅格了，只需要按照面几个步骤，我们可计算符合需求的栅格系统。
1. 择栅格列数
在正式计算栅格元素的数值前，你首要进行抉择的是栅格的列数。前面有讲到我们最使的是 12 栅格和 24 栅格，但栅格本来就是一个灵工具。此时你需要结合真实需求来判断，涉及到需求的容规格，上线平台，交互模式等。假设，该需求需要发布在多平台，涵盖 PC 和移端，同时容较为简单，采规的交互与导航，那你可择 12 栅格来兼顾移端和 PC 端，并够很好地解决平台自适应的问题。
但如果该需求发布于 PC 平台，且功能复杂，内繁多，我们拥了屏幕、复杂内规格的判断条件，因此可以考虑采用灵活性高的 24 栅格。
2. 确器宽度 container
需强调，用栅格的设区域并不一的设稿尺寸，需根据真实场景判断，只真需置主信息，或者需行多平台配的区域器区域。排除存误导的区域可以使栅格易于划分。
例如在个常规 web 落地页需求设计，我们会基于 1920 或 1440 尺寸来定义个设计稿宽度，而用于布局主要信息核心区域实仅有 1024，两侧留白则是用于适配不屏幕尺寸，这也是最常规简单适配案。
另外假在一个复杂的 B 端产品计中，左侧存在常驻的菜导航，该菜导航虽然也属于整个产品 UI 的一部，但所有间都基本保持不变（宽度），它所占用的域为浮动域，可以不计算在栅格中，而仅在排除浮动域后的灵活组织息域定栅格。
定义出血值 margin 及用距 Gutter
品 UI margin 值最终视觉呈现有较大影响，margin 值越大，信息越紧凑，两侧留白充裕呼吸感较强，可布局信息区域越小。反，则核心区域版充足，布局亦可更加宽松，两侧空狭窄容易生压迫感。
通常，无论是 PC 还是移动端，都有一些约定俗成的 margin 规则，因此关于定义 margin 值可以直沿用典型的间距系统下的标准。基于现代屏幕的 UI 计都离不开 4 倍 8 倍间距系统的规范，人尽皆知所以这便不做赘述。一最为常用的基础间距为 4，8，16，24，32，48，将其中最为常用的 16px 作为基准值，1Rem=16px，则可以生成下方这一套常用间距系统。(Rem 是开发常用的计算方式，基于此建立栅格间距系统利理解，降低沟通成本，提高还度）
通常其中的 1Rem 值就用来定义 Gutter 值，因为它最通用，覆盖景最广。而 margin 值通常为 2Rem 或者 1.5Rem。例如在移动端基于 16px 标准间距将 margin 定义为 32 或 24px。
1. 手动绘制
手动绘制的方法早出专业的 UI 设软件时设师的选择。例如使用 PS 设 UI 界面的作场景。 UI 设软件日益发达的今天，无论使用 Sketch 还 Figma、XD，我们都可以使用软件自的栅格功能捷绘制栅格。这里仍然分享手动绘制的方法的原因，一方面避免忽略小部分受软件设备限制的人群，一方面手动绘制栅格需行主动算，这算过程利于们一理解栅格的规则，规避错误认知，及警醒设师不盲目信奉软件算的栅格系统，需意识到不可整除实问题。
在下图，我以 750 尺寸 Iphone 设备为例。假设我们希望以 16px 为用距（16px=1Rem），32px=2Rem 为出血值。则此时公如下：12C+11*16+2*2*16=750（12Column+11Gutter+2Margin=Container）
求出的结果为 42 余 6.大部情况都没法使栅格系统刚好整除，因此需要专门理多余的像素值，将多出的 6px 配 12 栅格上正好构成了 6 个 42px 的 Column+6 个 43px 的 Column.
2. 基于 Figma
Figma 自带 Layout Grid 功能是我目前体验过最佳栅格工具。它不仅仅提供栅格时提供网格功能。最关键是，它计算栅格逻辑契合设计师布局诉求。如下图，设计师需要选想要使用栅格应画板，过右侧检查 Layout Grid 添加个栅格，它默认为 Grid 模，需要在左上切换为 Column 模。然后如图所示将 Count 栅格数量与 margin 出血、Gutter 距三个元素配好，即可生成最终栅格。经过测量，该栅格条 Column 为 42、43 相排列，与我们计算结相契合。
3. 基于 sketch
Sketch 则加繁琐些，首先使用栅格需视图/画布/显示布局中启。需设置栅格的具体则需视图/画布/布局设置中行处理。其中总宽度指的栅格色区域的面积，即排除 Margin 的宽度，因此 750 尺寸下，排除 32*2 的 margin 后，其总宽 686，偏置 32 则控制的 Margin ，间距对应 Gutter，列宽对应 Column.
至此，应该已学会了如何根据实际作场景划分栅格，如何义栅格的各关键数以帮好的统一视觉输出，提高协作效率及解决一致性问题。但真实作场景中，很可能还会遇到各种阐述到的场景，这很常的事，不同需求业务，不同设备与下文背景都会限制设的因素，我希望能力用已知的规则去拓展并配真实作场景中，当然我这里还提总结下较高频出的误解，帮家栅格相关的设决策时底气，相对的也加高效。
1. 强制对齐
栅格是强制对齐的规则，很多时候可应当根据实际情况打破栅格，要害怕超栅格，但要清楚的认识到打破栅格的目的是合的，是符合需求的。例如图中的标题与配图为了实现叠的纵深感样式，必遵循二等分的栅格配，而是可突破栅格，延伸到图片区域。而在更多场景，一组布元素中，栅格仅仅需要控制总容器的位置与例系，而该复杂容器的细分元素是无法严格按照栅格布的。
2. 栅整除
栅无法永远精准整除，或者说，大部分情况下栅是无法整除的状态。而相差的像素值往往是无法被用户以肉眼察的，我很赞同大家对每一像素的执著，但你们应该很容易能理，栅质上不是为证像素级精确，而是为证浏览视级别的秩序、协与统一。就像之前提到的案例，当我计完 12 栅的数值分，现其中 6 个 42px，6 个 43px，每条栅 1px 差距，当将他们组合排，肉眼很难识别其中的差距。下方的设计案例释的就是此类非整除场。
3. 栅格域
栅格不一定是整个屏幕或界面，实际上只需要在活动域、主要内容域进行栅格化，例如左侧导航栏一属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，其占据的界面域也不需要用来布局其功能及内容。
4. 栅格嵌套
通常使用一组标准栅格来控制全局的视觉效果，但有些候无法仅用一组栅格来适配产品需求中的所有细业，细界面。例如在下方示例景中，在偶数栅格中需要添加三张图片，那可以将图片域作为独划的栅格域来重新定义栅格值，对齐进行三等。 在实际需求中有多景需要在总的栅格系统中嵌入一些模块对应的栅格系统。
另外我所的团队招聘优秀的设师，我们属于 Shopee 供应链设团队，因此希望 B 端设验的优秀设师，或者 C 端超强能力但转换领域的设师加入。面试高效透明，仅两次专业面，Leader 面后直接 Boss 面。20+HC，岗机会超多。外企环境，弹性作不打卡，无限零食供应各种福利。薪资保底 15+月，新加坡换岗的出作机会。建议加我微信直接推到 leader 手中，简历赶砸过吧。
浙公网安备33011002017549号