栅格 布局 宽度 前言在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感、工作效率都得到很大的提升。一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用栅格系统解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。更多栅格设计干货：用7大章节，帮你从零开始学会栅格系统前言现如今随着设备尺寸的多种多样，产品在设计过程中需要适配到更多尺寸，布局方案与栅格系统的搭配使用，可以很好的做到跨平台跨尺寸适配，极大的提升设计效率。阅读文章 > 一、栅格的定义及重要性1. 栅格的来源栅格的概念来源于平面设计中的“网格”，早在 13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。在 18 世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决“将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力”的问题时，栅格的雏形已然显现出来。20 世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。20 世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。2. 什么是栅格栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。3. 为什么要使用栅格首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。另外，在设计 Web 界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。二、栅格系统的组成栅格系统并没有我们想象的那么复杂，它主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可，下面我们将一一了解：1. 网格（Gird）网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。为什么用 8 为基础倍数呢？首先作为偶数，程序进行单位换算后可被整除，避免像素出现小数点；其次，8 为增量单位既不会显得琐碎、也不会让内容过于分散，当界面中所有元素都以 8 为倍数时，其元素大小、间距都有规可循，之前笔者曾写过一篇「间距」类的文章，感兴趣的伙伴可以去看一下。5000字干货！超详细的保姆级间距设计规范编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？阅读文章 > 2. 列（Column）列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。3. 水槽（Gutter）水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变的较为紧凑。4. 边距（Margin）边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。5. 栅格总宽（Container）栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。6. 容器盒子（Col-n）容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。三、栅格系统制作流程1. 设计栅格宽度在设计 Web 端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在 1024px~1400px 之间。例如：常见的 1024px、1200px、1280px、1400px 等，可满足绝大多数主流显示器，如果栅格宽度超过 1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。2. 选择栅格列数① 12 栅格12 列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是 12 栅格，它能够被 2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用 4+8、3+9 栅格，三栏布局使用 2+8+2、3+3+6 栅格等，变化较为灵活。② 24 栅格24 列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的 B 端 Web 设计采用的就是 24 栅格，相比 12 栅格，有更多的区域划分空间，其布局的灵活性也更强。需要注意的是，24 栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。③ 5 栅格5 列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的 5 图标（一行）、10 图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将 5 列栅格拆分成 10 列，布局、视觉效果基本能保持一致。其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比 5 列栅格会更灵活、更便捷。3. 定义水槽与边距水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以 8px 为最小单位进行推导，如 S=8px、M=16px、L=24px、XL=32px、XXL=40px、...等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。四、栅格与响应式的结合1. 自适应与响应式① 自适应自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是 PC 端、平板还是手机。我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。② 响应式响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。2. 栅格行为变化① 固定栅格将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显的不够协调。② 流动栅格流动栅格的边距、水槽宽度是固定不变的，在达到下一个断点前，列的数量也不会增加，列宽会跟随页面宽度左右伸缩，变化规则不一定是最小单位（8px）倍数，内容元素也会随着页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。我们可以将流动栅格的视觉呈现方式称之为响应式弹性布局，这种布局的兼容性很高，能很好的适应多端设备及不同的屏幕分辨率。对于不同尺寸的卡片混排也能平滑过渡，不会显得突兀，例如：图像、视频、类容编辑器、数据可视化等，除断点变化外，内容元素的缩放不会改变页面的排版布局。③ 混和栅格绝大多数的网站使用的都是流动栅格，但一些后台管理系统及工具型界面设计为了使布局既有固定的宽度、也有流动的宽度，就会采用混合栅格的形式。混合栅格的灵活性很高，特别是内容较为复杂的产品会显的更加友好，在不同分辨率的屏幕上都能达到理想的视觉效果。不过对于开发来说，规则相对复杂，实现成本较高。五、部分问题及处理方式1. 水槽中不要留下元素这里所说的并非水槽中不能存在内容，而是不要将单个元素或元素的边缘置于水槽内，否则就会参差不齐，违背了栅格的目的。如果你的元素过大，就让他跨越栅格，到达下一个列的右侧边缘。2. 栅格不一定整除虽说设计师对于每一个像素的的追求都很执着，但大部分情况下栅格都是无法整除的，而相差的像素也无法被用户以肉眼觉察。我们需要理解的是，栅格的目的是为了保持视觉的协调与统一，而非像素级的精确。举个例子，以 1920px 的宽度、12 栅格为例，内容区宽度可以是 1000px、1200px、1400px、1600px...，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。3. 栅格区域外的内容栅格是为了规范内容，并不是所有的内容都需要栅格。大多数情况下我们只需要将主要内容区域遵循栅格系统即可，其他部分如固定导航、侧边悬浮栏、右下角弹窗...等不一定要跟随屏幕尺寸或内容的变化而变化。4. 合理的打破栅格对齐对齐在栅格系统中的地位可谓是举足轻重，不过在一些特殊场景中不必为了对齐而对齐，在不影响视觉效果的前提下，可以根据实际情况合理的打破对齐。如下图中的照片墙，利用极小的间距将一些宽度不同的照片排列在一起，虽然没有同栅格的列宽对齐，但我们第一眼很容易将这些照片联想成一个整体，同时又能轻松的单独区分开来，也不会影响整体布局。5. 子父级模块对齐父级在部分场景中，当我们以卡片的形式将多个内容形成一个信息组，这时可以忽略子级元素的对齐方式，父级卡片遵守栅格对齐即可。六、结语栅格系统能为设计提供便捷，有助于设计效率的提升，很多设计师都会去关注栅格为什么重要，却容易忽略栅格在实际项目中的使用原则，同时还要伴随一些限制条件，所以并没有平常想象的那么简单。本篇文章提供了栅格系统的基础知识，希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，让栅格更好的服务于设计，若有不足之处，欢迎补充。万字干货！从4个方面完整解析栅格设计关于界面栅格的攻略，延展到适配方式。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/grid-design
栅格 按钮 组件 新的一年，先祝大家运势涨如脱兔，因为年前和过年这段时间工作没那么忙，就抽空继续整理了一些工作中对B端设计的总结，希望可以带给需要的人一些启发。如有纰漏，欢迎各路大神指正。上一篇说到了设计原则，接下来我们讲讲 B 端常用组件的内容。超全面的B端设计规范指南（一）：设计原则前言B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。阅读文章 > 谈到 B 端组件，很多人的印象是多且杂，想要全面准确的熟悉这些它们，需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情，我一般是按照使用场景去对组件分类整理。下面我们根据这个分类框架来逐个聊聊这些组件。一、基础组件说到基础组件，我想再将其细分成两个大类：一类是通用组件；一类是栅格/导航。怎么去更深刻的理解这两类的区别呢，我们可以打个这样的形象比方：通过这个比方我们不难理解，栅格/导航是先给页面定下了基本框架，而通用组件则是在这个框架基础上搭建页面的所用到基本元素。1. 通用组件常见通用组件一般包含：色彩/字体/间距/圆角/分割线/按钮。需要注意的是，通用组件看起来似乎很简单，但却是决定产品品牌调性、界面细节品质的重要因素，在设计过程中需要引起我们的高度重视。色彩色彩可分为主色，功能色，中性色三类。下面谈谈这三类颜色如何配置，以及如何定义这些颜色梯度。① 主色主色的选取主色作为产品的主要色调，在选取时应当优先选择品牌色，但有一点要注意的是 B 端和 C 端不一样，B 端一般不适合采用暖色系作为主色，如果品牌色为暖色调，则尽量考虑另选取一个冷色系作为主色，原因有两点：一是为了避免和警告、错误色冲突，产生歧义；二是冷色系带有商务、专业、冷静的情感，更符合 B 端产品调性。同时主色选取应避免高亮、荧光色、灰调高的颜色。主色的应用主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。② 功能色功能色主要用于页面表征状态，常见有成功色、警告色、报错色等。成功色主要用于操作结果成功提示以及标签配色等。警告色主要用于警告提醒功能以及标签配色等。报错色主要用于系统报错提示、圆点提示、以及标签配色等。③ 中性色中性色在页面设计中应用非常广泛，从线条到文字再到图形等等都可以见到它的影子。Tips：无论我们主色调是什么，中性色在调色时建议可加入适量的蓝色调，可让页面观感更清爽。④ 颜色梯度选取好了颜色后，怎么去更合理的定义每个颜色的梯度呢？（这里主要指对主色以及功能色定义梯度）我的方法是给颜色加一层半透明黑/白遮罩，当我们需要浅色，通过调整白色遮罩透明度得到合适颜色；而当我们需要深色时，则通过调整黑色遮罩透明度得到合适颜色。这样定义颜色梯优点是后续如果需要更改配色，只需一键替换全局色即可，大大提高工作效率。文字文字规范包含字体、字号、字重、行高等。① 字体/字重B 端字体/字重一般按照如下规范即可：② 字号不同于 C 端，B 端在字号选择上应当尽量保持克制。研究表明，Web 端上正文字号为 14 时，可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级，优先级从高到低的手法应该是颜色、字重、字号，也就是说一般尽量不采用字号大小区分文字层级。③ 行高行高可以参照下面的公式或行高参照表快速获得，如果通过公式算出行高非整数或非偶数，可就近取偶整数。间距关于间距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考虑到 4 的颗粒度偏小，因此可优先考虑 8px 的倍数作为间距值，在一些特殊场景可采用 4px 的倍数间距值。分割线分割线宽度一般统一为 1px 即可，同时注意颜色不可过深，以免干扰主体信息。如果需要不同层级分割线，可用颜色深浅来区分。圆角圆角大小一般根据使用场景控制在 2-3 个梯度即可，既不能全部统一一个圆角值，同时也不适合出现过多圆角值。同时圆角值不要过大，建议控制在 2-6px，以符合 B 端产品严谨专业调性。按钮这里从按钮的大小/状态/排放位置几个纬度来讲。① 按钮尺寸按钮高度一般情况下可以设置 3-4 种尺寸按钮，足以满足各种使用场景。至于按钮宽度，我们一般定义一个最小值，当超过最小值时，可设置 padding 值，按钮宽度根据内容自适应。② 按钮状态操作按钮过程中，按钮会呈现不同的交互状态。③ 按钮位置对于主次按钮组合，主次按钮排放位置应该怎么规定呢？可分为两种场景：一是当为从左到右阅读顺序时，主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时，主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时，应权衡优先级做出取舍。2. 栅格/导航熟悉通用组件后，我们要通栅格/导航来确定产品页面框架。栅格栅格可以有效地保证设计的一致性、让页面布局更具规律，并提高团队协作效率。应该如何设计栅格呢？① 栅格区域的划定我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层，而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。② 栅格自适应规则随着页面宽度变化，一般来说是通过栏宽变化实现自适应。③ 栅格栏数的确定根据页面内容丰富程度，栅格栏数一般定 12 或者 24 栏，考虑到 B 端产品功能往往比较复杂，建议采用 24 栏即可。④ 上下布局栅格⑤ 左右布局栅格导航导航可分为全局导航与局部导航。① 全局导航全局导航包含顶部导航、侧边导航、混合导航。这三种导航样式各具特点，应结合产品特性选择合适的导航样式。这里要注意的一点是，当产品可用性和用户体验产生冲突时，应优先保证产品可用性。② 局部导航局部导航包含面包屑、标签页、步骤条、分页器。面包屑面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系，并且可以快速回到上几级导航。标签页标签页可以帮助用户在一个页面实现快速切换不同内容，提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。步骤条当任务复杂或者存在先后关系时，可将其分解成一系列步骤，这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条，作用包含 3 点：一是让用户对操作流程长度和步骤有个预期，二是明确知道自己目前所在步骤，三是可以对用户的任务完成度有明确的度量。步骤条一般分为横向与纵向两种样式。步骤条小 Tips：当步骤条中有操作难度偏大的内容时，为了提高用户操作完成率，我们可以考虑把其放在靠后的步骤中，原因是用户前面已经完成了大部分简单操作，后面碰到高难度操作后，出于损失厌恶心理，不会轻易放弃操作。分页器当有大量内容需要展现时进行分页加载处理，分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。分页器一般分为迷你、简易、自定义三种样式。妙用分页器小 Tips：当表格中需要对数据全选操作时，为了提高操作效率，可将自定义每页跳数调到最大。例如一共 100 条数据，默认每页 10 条数据，要完成全选需要点击 9 次翻页，10 次全选（表格的全选框勾选后一般只选中当前页面全部数据，而不是所有页面总数据），当把每页条数调整为 50 后，则只需翻页 1 次，点击 2 次全选即可。到这里关于 B 端的基础组件就全部梳理完了，后续我们就来揭开展示组件的神秘面纱。部分参考资料：《B 端产品设计-Mia》《Ant Design》本篇来源：优设网原文地址：https://www.uisdc.com/design-principles-3
神器 工具 栅格 大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器，收到很多小伙伴反馈说非常有帮助。既然是小伙伴们都喜欢的东西，自然是要有第二期的啦，今天就再为大家 5 款设计师必备的效率工具，它们分别是：尺寸高宽比换算神器！让黄金比例手到擒来电脑端专属，批量图片处理及漂白神器 PictureCleaner网页排版必备的栅格自动计算工具轻简方便的 Windows 录屏软件 Gif123接到单不会报价？快用这个私单报价神器废话不多说，一起来看看这些效率工具有哪些特点吧~上期回顾：这 4 款工具，让设计师工作效率提升 200%！大家好，我是和你们聊设计的花生~作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人，我经常会遇到这样一些工具——作为设计师的我们不会经常用到，但是要急用的时候又不太好找。阅读文章 > 尺寸高宽比换算神器网站地址： https://www.pslkzs.com/nav/wh.php我们在做设计时经常会处理不同的尺寸，4:3 或者 16:9 这样的比例换算起来还比较方便，但是如果是想做成黄金比例 1.618:1 或者白银比例 1.414：1，可能就比较麻烦了。有了这个换算网站就方便很多啦，上面预设了 16：9、4：3、黄金比例等常用的尺寸比例，输入长度就能自动得出宽度。网站还支持自定义比例，你可以按需求设定自己想要的比例然后进行换算。网站界面简洁明了，免费使用无需注册，经常需要换算尺寸的小伙伴可以收藏起来了~批量图片处理及漂白神器 PictureCleaner应用详情及下载网址： https://www.cnblogs.com/Charltsing/p/PictureCleaner.html无论是在工作中还是生活中，我们经常需要用手机拍摄备份一些文件图片，比如书本资料、表单、试卷等，但是拍照出来的图片效果并不好，经常会有一些阴影、黑点，对再次打印使用有很大的影响。如果是在手机上，向扫描全能王这些软件可以解决，但文件量很大而且都是在电脑上的怎么办呢？这个时候你就需要 PictureCleaner。PictureCleaner 是一款国产的免费图片软件，适用于 windows 系统，它的功能类似于手机上的扫描全能王，可以将拍摄的图片转为类似扫描的清晰图片，支持批量处理和保留色彩效果：软还可以自动四角检测，可以对拍歪的图片自动进行图像校正，并支持 A4、A5 的规格化输出：软件的安装包我帮大家下载了，链接在开头和文末都有，安装包里的有个「重要说明」的文档，大家可以仔细看一下，很多重要功能在里面都有说明。栅格自动计算工具网站地址： https://www.pslkzs.com/nav/column.phpUI 设计师都知道，在做 PC 端和移动端的界面设计时，运用栅格来规范设计是非常重要。栅格可以让界面设计更高效，避免对内容元素进行无序排版导致浪费时间；也可以让整体界面更加美观有逻辑，特别是对响应式布局的界面，使用栅格能让界面在不同设备上的呈现具有统一性。今天给大家推荐的这个网站可以计算栅格数值，输入总宽度后，调整槽宽、边距、列数就能自动得出单个列宽，并且结果会以可视化的方式呈现出来，感受会更加直观。如果一个界面要分成比较多列，使用这个工具可以大大节省设计师的时间。轻量录屏软件 Gif123软件详情及下载地址： https://gif123.aardio.com/对于设计师来说，Gif 是一个远比截图更有效的问题解决工具，毕竟很多操作步骤只有详细录下来了才能很好地说明情况或者解答别人的疑问。Gif123 是一款适用于 Windows 系统的录屏工具, 它的应用程序才 780KB，但是功能非常全面。界面简单操作便捷，录制完成后自动压缩优化 Gif 的体积，支持一键复制到微信/QQ/文章编辑器等界面，且兼容性非常好，不用担心会动图变静态图。相比其他的 Gif 软件，Gif123 可以省去人为压缩、导出、上传等步骤，且智能压缩后 Gif 的色彩及质量仍然比较理想。软件安装也已经下载好了，链接在开头和文末，需要的话可以自己下载~私单报价神器网站地址： https://www.pslkzs.com/price/index.php很多设计师都会选择在业余时间接一些私单，既是一个增加收入的途径，也能累积设计经验。对于刚刚开始接私单的设计师来说，如何报价是一个不小的考验，报高了怕接不到单，报低了又觉得对不起自己的付出。如果你也有这样的疑问，那今天这个网站就能给你很大的帮助：它能按照你的收入水平和项目所需的时间算出合理的报价，非常方便。网站的算法是根据 「预计工作时间」 「你当前的工作的日薪 」 1.5~2 倍这个公式来的，也是公认的比较合理的一个计算报价的方法。网站还附带一个全面的设计报价参考清单，如果你没有自己的报价经验，这份清单还有很有参考价值的，等做熟了有了经验就可以根据自己的实际情况来处理了。以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~我是花生，我们下期见。更多免费资源：担心被封号？试试这5款常用软件的免费平替！大家好我是花生。阅读文章 > 又一个抠图神器！完全免费无需注册超好用！当前图片去背工具都设计得相当简单易用，只要将图片上传，就能以机器自动辨识主体和背景范围，快速将背景移除，转为透明背景或是套用特定颜色，像是之前介绍过的 FocoClipping、Designify、BackgroundCut、AI Background Remover 等等去背服务都有类阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 PictureCleaner 和 Gif123 下载安装包21.45MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-softwar
栅格 系统 尺寸 前言随着硬件技术和互联网的不断发展，市面上出现了更多的设备尺寸，这就要求我们设计的产品要适配到更多尺寸，而通过栅格系统可以跨屏幕的适配到不同的设备，极大提升设计效率。主流的企业级系统中都应用了栅格系统，但只重应用轻解释，很多时候在直接面对结论和各家不同的名词时，一时不知道如何下手。本文旨在通过查漏补缺的形式讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。什么是栅格系统1. 栅格系统的由来栅格系统 “grid systems” 也称之为网格系统，是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。2. 栅格系统的定义网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。栅格系统的好处1. 加强设计一致从页面美观的角度，栅格可以有效地保证设计的一致性、让页面富有节奏和韵律。2. 增加决策效率对于较大的团队，在日常工作中常常需要多个设计师协作完成，这时候就需要一套统一的标准来对设计师进行约束和高效协同，通过栅格系统不仅可以提高设计师的决策效率，亦可以规范设计质量。3. 降低解释成本和前端伙伴进行协作的过程中，我们发现通过一致的有迹可循的设计规律，比如有规律的间距和布局可以极大的提高前端伙伴的开发效率。通过栅格系统可以加强协作效率，降低解释成本。如何在 B 端产品中创建栅格1. 选择画布尺寸目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的设备尺寸为 1920X1080，但并不意味着我们要以此为设计尺寸。我们认为，如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。作为 B 端设计师，我们的受众相对比较固定，比如企业内部员工会统一派发笔记本；学校等事业单位也会统一采买设备。通常我们可以对内部设备进行调研，选择现有用户使用较多的设备进行设计。这样可以更加接近用户真实的使用场景。对于 SaaS 类产品而言，其用户设备比较广泛，我们也可以选择 Ant Design 推荐的设计尺寸 1440X900（近些年来随着屏幕尺寸的增加，Ant Design 也将设计尺寸改为 1440X900，同时主字号调整为 14PX ）。我们根据公司内部的调研选择了 1280X720 为基础设计尺寸，同时选择 12PX 的字体 ，最接近用户的真实使用场景。2. 确定栅格区域我们将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。3. 网格设置我们发现现在主流的网格单元的尺寸为 8 PX， 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4PX 作为最小的网格单位。4. 栅格计算PC 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。12 栅格将页面分为 12 份，在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。24 栅格将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。columncolumn（小列）以 24 栅格为例就有 24 个 column，它可以随着屏幕尺寸的不同，在一定的范围内进行动态变化。guttergutter（水渠）以 24 栅格为例就有 23 个 gutter，水渠的大小我们设置为固定数值 16PX，这里需要注意 gutter 值可以根据项目需要的视觉节奏而定。栅格大小栅格大小为 24 个 column + 23 个 gutter，以 1280X720 PX 的设计尺寸为例，左侧的导航固定尺寸为 208PX，我们减去 2 个页边距 2 X( 16X2 ）PX，减去 23 个 gutter （23X16) PX，再除以 24，最后我们得到了一个 column 的宽度为 26PX。小困惑：这个时候你可能会发现这个数字除不尽，个人建议这块有两个解决方案，1. 建议这边用刚才算出来的数字取一个整数去倒推我们的唯一变量左边导航的大小。2. 栅格的目的是为了让我们的设计更加合理便于和前端合作，直接取整数个人来说是可以接受的。注意事项1. 尽量保证偶数思维尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。2. 字段元素的起始点必须落在 column 上字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。3. 可以让父级容器对齐栅格，子元素可以不落在栅格上很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。栅格的应用关于栅格的适配和应用是通过对栅格制定不同的响应策略，来更好的支持和适配业务场景。通常有三种适配策略：固定栅格、动态栅格和混合栅格。1. 固定栅格固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。以内容区域展示卡片为例，首先我们会根据主流屏幕尺寸和业务呈现需求，确定设置几个断点值，随着设备尺寸的变化，展示卡片数量也随之变化，但卡片的尺寸是固定不变的。固定栅格很明确的缺点是它在未到达断点的临界值时，页面会出现空白，视觉呈现上，可能会显得不协调。比较常见的应用是对于筛选模块的响应，以拼多多商户后台为例，将输入框设定为固定大小，然后设置 1612px 为断点值，当小于设备屏幕宽度小于 1612px 时则显示 3 列输入框，当屏幕宽度大于 1612px 时则显示 4 列输入框。（因为业务需求拼多多屏幕设置最小值，即小于固定尺寸出现横线滚动条，所以我们能看到拼多多的筛选模块有 3 – 4 列输入框）。拼多多固定栅格的适配展示2. 流动栅格流动栅格和固定栅格的区别是它的元素大小会发生变化。以内容区域展示卡片为例，随着设备屏幕的大小变化，展示卡片数量也随之变化，但在未到达下一个断点之前，卡片会通过百分比缩放填充屏幕。流动栅格的优势在于它可以在屏幕上填充屏幕，拥有较好的显示效果，适用于仪表盘、视频列表和以卡片形式展示的图片、文字等。以 YouTube 的展示为例，视频列数会随着屏幕尺寸的变化而变化，当未到达断点值时，视频卡片的大小会发生变化并始终填充满屏幕。YouTube 流动栅格的适配展示3. 混合栅格混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。总结1. 有理可依了解基础的栅格知识可以帮助我们更加规范的展开设计工作，让设计更加有理有据。2. 充分沟通栅格系统需要和前端伙伴协作，在开展新的设计工作时可以和前端伙伴进行沟通，如果是一个已有的系统，可能已经有比较成熟的栅格解决方案，就不必耗费资源去重新设置。如果是一个全新的系统，可以根据业务场景制定栅格规则，通过和前端沟通可以了解当前的技术资源情况，选择合适的解决方案。对于商业设计而言，不应该一味的追求美，也不应该一味的追求商业，应该懂得平衡两者之间的关系。在做设计执行的时候，需要思考企业利益和设计体验的关系。注意活学活用最重要的是解决实际问题，同时也要把实现成本、技术资源等考虑进去。感谢你的阅读。参考：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://arco.design/docs/spec/gridB端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 欢迎关注作者微信公众号：「求职帮er」本篇来源：优设网原文地址：https://www.uisdc.com/build-b-end-grid-system
栅格 布局 尺寸 什么是栅格？我这里就不做说明了。很多优设的文章都写的很清晰了。这篇文章仅从我最开始接触栅格所遇到的困惑和部分设计师始终纠结的点来和大家一起讨论讨论。B 端到底用什么尺寸进行设计？确定布局要弄清楚用什么尺寸设计，首先要确定布局。我们常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是这三者的延伸和拓展。上下布局一般是固定顶部，有点类似于 PC 网页设计，实际上也差不多。现在的B端设计中很多都会搭配着这种布局用，比如帮助中心、消息通知，客户入网申请等（这些我都遇见并做过）。左右布局和“T”字布局，一般固定左侧，右侧区域做自适应。根据布局确定明确设计尺寸范围我们看一下百度统计最新出来的当前计算机分辨率数据，从统计的数据中可以看出，小尺寸的屏幕是越来越少了。但是不是我们就要用最小的尺寸或者用份额最大的 1920 进行设计了？显然不是按照这个维度来确定尺寸的。对网页设计来说，设计师差不多都知道有一个 1200 有效内容区域的说法。如果没有特殊要求，上下布局也是遵循这个原则的。设计师中绝大部分，包括我很多同事平时基本上用的 1920 和 1440 两种尺寸来进行设计。对于 B 端来说，不管你采用 1920 或者 1440，在做上下布局页面定宽设计的时候，遵循 1200 有效内容区域这个原则就是没有问题的，看了很多文章上面举例了 960、990、1024、1156 等等，大家都不用纠结，没有特殊要求，这些都没啥问题。上下布局在 B 端设计中是一个补充，有的可能有，有的可能没有，所以用 1920 还是 1440 最好还是根据左右布局来，保持统一。两年前我看过一篇大厂写的布局的文章，用的是 1280 的尺寸，记得是说因为考虑缩小浏览器会发生遮挡或者挤压（别问我为啥还记得，因为当时对于尺寸纠结的太厉害，至今难以忘怀），现在因为技术等方面的发展，个人认为再用 1280 的做已经不合适了。1440 的尺寸目前做中后台是比较通用的，大家也可以参考看一下蚂蚁 Ant Design。至于 1920 的用来设计 B 端行不行呢？我认为也是可以的，我就用过，也没用户反馈说显示有问题，我就当他没问题了。不过我还是建议大家在做 B端设计的时候用 1440 的来做，特别是用户群很复杂的情况下，方便低分辨率的电脑查看。当然如果我们给某一企业做定制服务，那就没尺寸的问题了，照着客户电脑尺寸来就行了。如何来进行栅格布局？现在有很多插件可以进行布局，软件一般也有自带布局功能。这里不做陈述：使用Sketch的人，千万别错过这款效率逆天的插件Anima！我一贯主张不要为工具所累，所以在各种诱人的 Sketch 插件面前，我总是提前思考下自己的真正需求，这款软件是将我奴役，还是为我所用？阅读文章 > 这里介绍我常用的 sketch 布局。这里我也创建了一个 1440 的网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。顶部高度没有特殊要求建议不要超过 100px，我一般就是 60-80px 内设定的；左侧可以根据目录内容自己设定一下，一般 200 多就差不多了。边距我一般设定 20px、24px。这样再对剩下的距离做栅格就行了，列宽保持偶数即可。有时候做栅格的时候会遇到一部分列宽是 42px，一部分列宽是 43px，这种设定也是可以的，回归到栅格系统的意义，栅格本质上不是为了保证像素级精确，而是为了保证浏览视觉级别的秩序、协调与统一，所以大家没有必要纠结。“没有绝对正确的栅格设计，只有最适合的栅格设计”，希望这篇文章可以帮助对栅格有疑惑的设计师们，同时也期待大家留言，大家一起学习探讨。万字干货！从4个方面完整解析栅格设计关于界面栅格的攻略，延展到适配方式。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-design-size
张大湿
在路上
飞翔的企鹅
