栅格 布局 宽度 前言在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感、工作效率都得到很大的提升。一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用栅格系统解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。更多栅格设计干货：用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端筛选功能如何设计？4个章节帮你掌握！引言筛选作为一个常用的功能，在产品设计中的应用面是非常广的。阅读文章 > 一、筛选的类型筛选的存在无非就是帮助用户准确、快速的找到目标数据，这个数据可能是单个，也可能是一组。在《信息架构：超越 Web 设计》中，筛选系统与导航系统、标签系统、组织系统被列为信息架构的一部分，因此筛选也会与其他系统有一定的联系，比如状态、类型筛选就需要依赖标签系统。筛选的类型分为输入类筛选、选择器类筛选、平铺类筛选、分页筛选、高级筛选。1. 输入类筛选输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据。输入类筛选从筛选准确性上，可以分为模糊筛选和精准筛选。① 模糊搜索按照用户输入的检索词，筛选出字段中带有该检索词的所有数据。优点：可以筛选出同类数据缺陷：精准度不高② 精准搜索按照用户输入的关键词，仅筛选出整个字段都与筛选词相同的数据。优点：检索精准缺陷：由于过于精准，会考验用户的记忆能力。由于精准搜索的精准性，一个字的偏差，都会造成搜索失败，因此，在正常的设计应用中，模糊搜索的使用频率会更高一些。输入类筛选从筛选形式上，可以分为单标签搜索和多标签可切换搜索③ 单标签单标签搜索只能在输入框中的一个既定范围中搜索。优点：便捷，应用普遍缺陷：范围少，面对复杂数据需要多个组合筛选④ 多标签可切换在一组标签中选择搜索范围优点：便捷，节省空间缺陷：展示不直观；多一步选择标签的操作；不能组合筛选如果空间有限，没有组合搜索的可能性，可以使用多标签可切换；正常情况下，不要剥夺用户使用组合筛选的机会。2. 选择器类筛选选择器类筛选可以是单选或者多选，用户点击选择待选项即可。这类筛选往往是筛选的某类标签或者某组数据，方便用户批量处理。优点：无需准确记忆，适合批量数据缺陷：展现方式不直观，匹配结果的精准度不够此类筛选往往和表单的选择器使用的是同一个组件，而且可以使用第三方的开源库，应用范围比较广，同输入类搜索一样，是最优先被考虑的类型。3. 平铺类筛选平铺类筛选是将所有的待选项铺出来，方便用户直观选择。可以是单选，也可以是多选。优点：待选项平铺，选择方便直观缺陷：占用空间，待选项数量过多的时候，可能会存在折行或隐藏，没有关键词搜索，选择效率变低平铺类筛选大多应用在电商、招聘等网站；如果筛选维度很少，空间充足且待选项的数量在 5 个左右，可以考虑在表格、列表页面使用平铺类筛选。4. 分页筛选分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来，不一样的是，分页 Tabs 的视觉级别更高一些，相当于标题存在，并且不支持重置。有一些平台也称之为分组。优点：帮助用户提前做了一轮筛选；待选项平铺，选择方便直观缺陷：占用空间，需要考虑待选项的数量和页面空间的适配分页 Tabs 对用户来讲无疑是便捷的数据筛选，但前提是需要保证大多数用户筛选维度的共通性，否则就会对部分用户造成困扰，或者提供用户自定义的机会。5. 高级筛选高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加等属性。优点：可以满足的用户应用场景最多缺陷：操作比较繁琐二、筛选的布局由于筛选组件的数量和业务应用的场景有所不同，所形成的布局模式会有所差异，大致会分上下布局、侧边布局、浮层布局、表头布局。1. 上下布局上下布局是值筛选条件位于数据的顶部优点：展示直观，筛选条件和数据关系联系更紧密；横向空间上可以展示更多的数据缺陷：数量多的话会压缩纵向空间上下布局是当前用户使用方式中最常用的方式，如果系统给的筛选条件过多，需要对筛选条件进行分层，低频类的需要收起。2. 侧边布局侧边布局是指将筛选条件列在数据的左侧或者右侧。优点：可以展示更多的筛选条件缺陷：宽度大的话会压缩横向空间；从视线覆盖面积来讲，侧边布局用户对照查看数据的耗时会更长使用侧边布局的时候，需要考量当前内容区数据的字段展示量如何。因为一般情况下，侧边会存在导航，再加侧边筛选，数据压缩比较严重。还要看一下当前用户的使用习惯如何，对侧边布局的接受度。3. 浮层布局浮层布局一般会有抽屉、对话框、悬浮框。优点：节省空间，能容纳更多的筛选条件缺陷：用户无法快捷的对比筛选值和筛选数据；具有一定的打断性，特别是对话框和抽屉；用户再次修改比较麻烦浮层布局一般在空间有限，又有筛选需求的时候使用；使用过程中需要标记当前有筛选值，最好能将筛选值单独显示出来，方便用户数据对比和清除重置。4. 表头布局表头布局是将筛选条件的图标固定在表格表头的右侧，用户点击后筛选优点：筛选流程更直观缺陷：用户无法快捷的对比筛选值和筛选数据；表头的空间有限，如果是横向滚动，隐藏后不容易发现一般不推荐优先使用表头筛选；像个别场景，空间有限，使用过程要标记当前有筛选值的状态。如果为方便用户筛选，又没必要单独给界面加一个选择器类筛选，可以尝试使用排序代替筛选，让数据以一定的顺序进行分组。比如按照优先级：高、中、低排序，倒序按照高、中、低的顺序排列，正序反之，可以满足大部分用户的查询需求。三、筛选的触发方式1. 实时触发在输入或者选择筛选值的时候，数据实时匹配。优点：筛选效率高缺陷：比较考验系统的稳定性；对于想使用精准搜索范围的场景，会延长整体的加载时间与手动触发相比，更推荐实时触发，但是要考虑系统的稳定性，在答应用户之前先和研发团队预研方式的可行性。2. 手动触发在输入或者选择筛选值的之后，需要手动点一下搜索或者查询按钮。优点：稳定性更高缺陷：多一步操作，效率低四、帮助用户1. 帮助用户做收纳无论使用哪种布局或者筛选类型，都会遇到筛选条件数量很多的情况。如果当下不能轻易改变用户习惯或者优化成本太高，可以试试以下三种方式：对筛选条件进行分层，将高频的筛选条件放在外面，低频的收起，用户用到的时候再展开。一些复杂 B 端系统，筛选条件是根据用户自定的数据生成，因此数量和内容不可控，多角色场景下使用习惯也不一致，这时可以给几个系统常用筛选条件，让用户可以自定义选择。考虑极限情况，如果用户确实添加了很多的筛选条件，要考虑页面内局部滚动。2. 帮用户标记筛选状态如果在使用可收起筛选、浮层筛选、表头筛选等方式的时候，一定要为用户标记当前有筛选值的状态。如果不标记，用户在筛选后没有重置，离开页面再回来的时候容易遗忘当前已经筛选过。或者将选择后的筛选值外显，在数据顶部放置一份，方便用户对比和清除。3. 帮助用户记住筛选值用户筛选过后，点击数据查看详情，如果详情是一个单独页面，往往都会刷新，再返回的时候，筛选条件已经清空了，如果用户需要多次查看该筛选值下的数据，需要多次选择。所以，用户从下级页面返回上级页面的时候，需要帮用户记住筛选值。至于是研发记住，还是优化设计表达避免刷新，要具体场景具体分析。筛选器的使用有的平台也会叫过滤器、视图等，名称有出入，但是功能大体是一致的。一般在筛选条件数量和使用角色都比较多的业务场景中使用。系统会默认给几个筛选器：全部、我负责的、我创建的等。这是从另外一个维度帮助用户记住：将常用的带有筛选值的筛选条件作为一个筛选组保存起来，方便用户下次进来的时候直接选择使用，方式便捷迅速。以下是几种筛选器在页面中的常见表现形式：4. 帮助用户更容易到达在有筛选条件的表格页面，应该确保顶部筛选条件和操作栏固定。如果数据太多，滚动会隐藏筛选区，应该只允许表格内容区滚动，方便用户对比筛选值和筛选数据。另外，如果用户要修改筛选值，这样的话不需要再回滚，容易再次触及。当然，除了以上设计复盘，还可以对筛选组件做一些创新设计，有机会再和大家讨论。业务场景的不同会导致设计师的表现也会有所不同，上述是我对最近工作的复盘，如果还有其他的筛选内容，欢迎大家再补充和交流～本篇来源：优设网原文地址：https://www.uisdc.com/filter-function-design-3
布局 元素 项目 写在前面近年来，三星、华为等手机厂商陆续发布 Galaxy Fold、Mate X 等折叠屏手机。其普及速度似乎超过了人们的想象。2021 年 12 月 2 日，根据屏幕机构 DSCC 公布的一份最新研究报告指出：2022年第三季度，折叠屏手机的总出货量环比增加了 215%、同比更是暴涨 480%。折叠屏手机从折叠的方式和角度可以分为：内折叠、外折叠、X 轴折叠、Y 轴折叠等，目前这四个方向均已落地在各大产品中。其中最常见的使用状态有折叠状态和展开状态。折叠屏展开下屏幕变宽，给用户带来了更高效的信息展示和更加沉浸的浏览体验。从曲面到大屏再到折叠屏，这一概念的想法已经成为现实，屏幕宽窄的变化给体验设计也带来新的挑战，为了保证不同宽度下的使用品质，我们采用了响应式布局的设计策略来解决适配问题。本次笔者将从最常见的 X 轴折叠的方式（以华为手机 Mate X 为例），对响应式布局技术进行探索。折叠屏设计指南：Material Design 折叠屏设计指南：完结篇本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。阅读文章 > 二、什么是响应式布局形容响应式布局最贴切的一句话为“Content is like water”，即:“如果将屏幕看作容器，那么内容就像水一样。”通俗来说，「响应式布局」就是一套代码、一种设计语言同时兼容所有尺寸及终端，由一个网站转变成多个网站。在以前，响应式布局更多用在 PC Web 上，随着平板、大屏手机等等移动设备的普及，响应式布局越来越多地运用在移动互联网来解决多端浏览体验。二、响应式布局策略简单地说，页面设计可拆解为“基础元素(文字、图标等等)”、“页面布局(元素的组织形式)”、“信息架构 (页面之间的跳转关系)”3 个环节。在适配时，页面各元素粗暴地等比放大并不能保证不同屏幕尺寸下的浏览体验。为了建立科学可复用的适配体系，我们将从这三个环节分别解决适配问题。1. 基础元素基础元素包括文字、图标、按钮、图片素材等。我们通过观察发现，在展开态和折叠态下用户的浏览距离没有明显的变化，因此要避免展开时元素太大影响体验，在适配时用相同的大小比例即可。在特殊场景比如大段文本类页面时可以适当放大 1.2 倍比例。2. 页面布局常用的适配方式有拉伸布局、相对缩放、扩展布局、挪移布局等：拉伸布局各元素的显示宽度不是固定值，而是通过相对参照物的方式来确定其位置，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。相对缩放布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。扩展布局当组件内元素横向布局，元素间的距离固定时，布局可显示元素的数量可随着显示宽度的改变而发生变化。利用屏幕的宽度优势，将相同属性的布局组件横向并列同时排布。挪移布局布局内的元素根据屏幕的宽度来选择是上下排布还是左右排布。3. 信息架构前面提到的 2 点是对于单个页面的适配策略，在展开时，屏幕尺寸的增加也为信息架构的调整带来更多可能。例如社交软件主页，在折叠态时需点击某个聊天列表跳转进入对话详情，但是在展开态时会适配成“好友列表+对话详情”的形式来体现层级关系三、项目实战了解完通用的适配策略后，我们以平安集团个金业务线 “任意门”产品为案例，和大家分享是如何把这些理论知识运用到实际项目，并且推动项目落地上线的。1. 团队内部宣讲与价值说明由于本次项目会用到大量资源，我们在推动前，首先与业务方，主管，开发等内部成员组织了一次宣讲会，会上阐述本次项目要解决的问题和价值说明，得到大家认可后，一起决定去做本次项目。这一步是最关键也是起初就要做的，设计师往往自己先埋头做完设计然后再推动，但结果经常会很难推或者推不动，殊不知达成团队意识的统一是在执行前更重要。2. 适配体系建设在内部获得认可后接下来就是设计师进行具体方案设计了。由于任意门业务复杂，为了便于团队协作、保证体验一致性以及后期维护，我们结合前文提到的理论知识，建立了关于任意门的响应式适配体系：制定全局删格系统为了页面设计在不同屏幕宽度时的一致性和规整性，我们先制定了一套同时适用于宽屏和窄屏的删格系统。在制定删格系统时，需要考虑列数和水槽间隔以及安全边距。我们在本案例中利用等分列数，在折叠态使用 4 列，在展开态使用 8 列等分，另外水槽间隔为 8pt、安全边距 20pt。统一基础元素适配规则前文提到通过测试发现用户在展开态和折叠态下浏览距离没有明显的变化；另外也从实际考虑任意门业务复杂，二三级页众多，点对点修改成本高，为了团队提效，我们在适配时采用「文字、按钮等基础元素大小没有变化」这一策略进行标准化适配。建立模版组件库对于经常用到的组件，我们针对展开态建立了标准的组件库，以便于开发和后续设计同学延展。以金融行业经常用的产品卡片为例，我们发现在不同链路中都会有此类卡片的展示，通过对使用场景的梳理和分析，制定了统一的组件，团队内部直接挪用即可。再以常见的资源位为例，我们分别对 1 张、2 张、3 张的情况都制定了对应适配规则，在其他业务场景上直接复用即可拆分排期和保障机制输出完设计稿。最后就是开发落地了。由于版本迭代周期短，我们决定对项目进行拆分排期。本次项目是由设计师发起的，因此也承担了项目管理的角色。我们制作了项目周期表方便后续管理。同时，建立了「方案评审-开发-设计验收」保障机制，保证最后落地效果。通过以上策略，我们既可以快速地批量进行输出，又能保证体验一致性。五、写在最后在实际项目迭代中开发资源相当紧张，我们通过响应式适配策略既解决了折叠屏不同状态下的用户体验，又相对节约了人力成本。作为本次项目的发起者，设计师也获得了团队内部认可和好评。也在此感谢产整个团队的全力支持，在追求体验的路上没有尽头。参考文献《华为折叠屏应用开发指导》https://developer.huawei.com/consumer/cn/doc/90101本篇来源：优设网原文地址：https://www.uisdc.com/folding-screen-adapter
用户 布局 功能 前言随着产品不断迭代，产品功能会逐渐丰富全面，但对于用户来说，是不是齐全的功能就等同于好的体验呢？本文将以“腾讯会议设置布局”交互优化为例，结合《设计心理学 2》的相关理论，分享关于简化复杂任务的设计心得。腾讯往期案例：如何构建科学有效的色彩系统？来看腾讯文档的实战案例！“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。阅读文章 > 一、为何要“简化”任务一款产品是不是功能越齐全多样就意味着越好的产品体验呢？对于专家用户来说，当然是功能越全面越能满足自己的需求，但对于新手用户来说，全面的功能未必等同最佳的体验，过多操作挤在同一任务中，可能会让用户感到不知所措，难以上手。因此设计师应尽可能帮助用户简化任务，避免用户因为界面复杂而放弃任务。专业类软件的核心用户通常是掌握某项技能的专家用户，他们在使用前，已经有预期需要先系统学习整个软件的操作，因此它们的复杂和全面是符合专家用户要求的。即便如此，近年来，Figma 之类的软件也在持续打磨易用性，降低用户使用门槛。专业图形建模类软件操作界面作为一款面向普通大众、以高效协同为第一初衷的产品，腾讯会议更需要不断简化复杂操作，让大多数用户都能快速上手，流畅地主持或参与一场会议。下面我将结合腾讯会议设置布局的交互优化案例，来分享关于简化复杂任务的一点点心得。会议场景矩阵相比线下会议，线上开会不免缺乏临场感，因此在腾讯会议里，主持人常常需要通过设置布局来让成员关注重要的视频画面。在无特殊需求的普通会议中，官方提供的两种默认布局就能满足常见的会议场景：腾讯会议默认布局实际上，真实的会议场景需求多种多样。例如，企业汇报更关注发言人，而小组讨论则更侧重轻松的沟通，如何在同一个界面里满足不同的诉求成为难点。为此，腾讯会议在默认布局的基础上，推出了“自定义布局”和“会聚模式”功能，来提供更丰富的会议布局选择。丰富的布局模式因概念陌生，且需要设置成员顺序、位置以及画面比例，对于普通用户来说，这两个功能有一定的使用门槛。在该功能推出一段时间后，我们发现：用户普遍找不到设置布局的入口，在具体设置过程中也遇到较多困难，认为设置布局是“高阶”而“复杂”的功能而不愿尝试。要让用户能把布局能力真正用起来，简化布局的设置过程就显得尤为重要。布局操作路径为了探究具体是什么原因让用户觉得功能复杂，我们开展了易用性测试，得出以下几个交互层面的具体问题，包括：1）入口难找；2）操作难理解；3）流程任务多；4）效果无预期。因此简化任务流程是当下急需解决的问题。具体问题二、复杂任务的“简化”原则那么如何才能把任务变得简单呢？依照诺曼的《设计心理学 2—如何管理复杂》一书中所说，系统复杂性的总量是恒定的，想要用户操作变简单，那隐藏在幕后的复杂性就要增加，在管理复杂时，可以从以下角度出发：良好的概念模型易懂的语义符号自动化、模块化的配置鼓励和系统默认组织结构学习的辅助工具如何管理复杂“概念模型”存储在用户脑中，也被叫做心理模型，它能帮助我们快速理解事物运作的背后逻辑。若我们的界面没有准确地传达出概念模型，用户就需要通过不断地摸索和猜测来尝试，最终很有可能因为不理解其含义而失去耐心。设计师应当通过浅显易懂的语义符号，帮助用户构建合适的概念模型，以帮助他们更好地理解产品功能和操作逻辑。像 iphone 的”开锁“提示、微信的”漂流瓶“、深泽直人的 CD 机，都是通过用户生活中熟悉的物理模型，让用户快速联想到熟悉的事物，从而更好地理解接下来需要与产品互动的操作。概念模型案例“自动化”选项和默认配置，则能帮助用户摆脱繁琐的选项和步骤。我们可以基于对场景和用户习惯的了解，提供常见的选择或智能配置。例如在表单设置页内提供默认的模板和样式，能够让用户更轻松地理解产品功能和效果。相比起手动添加内容，可以大大减少理解成本，帮助用户更轻松地完成设置过程。通过“自动化”简化用户操作“组织结构”是指把集中在同一个页面的任务进行结构重组，拆分成易于操作的小步骤，并保证每个模块都简单易学，容易理解。用户在进入一个铺满选项和操作的页面时，通常会不知所措，不知道从哪一部分先开始。或许本身设置的难度并不大，但复杂的设置项也会在心理上给用户带来巨大的压力，从本能上抗拒和排斥。好比完成一场马拉松可以把每 5km 作为一个里程碑去逐个击破，倘若我们能将原本用户觉得困难的大目标拆解成一个个简单的小目标，明确每个步骤应该做什么，并在完成每个步骤后都给予充分的鼓励和反馈，用户就会有持续去完成设置的耐心和动力。拆解关键步骤“学习的辅助工具”是指在合适的时机给予用户有效的帮助指引和提示，对于 Saas 类产品来说，在用户需要的时候及时提供帮助和指导，能给用户充分的安全感，缓解用户操作时的不安和紧张。关于操作的提示，我们不能只是告知用户哪里出错了，更重要的是给出原因并提供解决方案。提前引导而非指责，将能大大提升用户持续操作和探索的信心。另外需要注意的是，用户很可能第一次遇到时未必能记住所有指引的内容，因此对于复杂的操作任务，还需要提供稳定常驻的帮助入口，便于用户二次查阅。辅助学习三、产品“简化”的设计策略有了设计原则的指导，我们的设计目标也会更加清晰。在具体的方案设计层面，我们需要结合设计对象的特点，将理论指导转化成可落地的设计方案。布局设置一般由主持人在会议中统一设置，因此在场景上，具有“设置时间紧张”、“自定义程度高”、“生效范围广”、“角色复杂”等特点。结合前文梳理的设计理论原则及业务场景特点，我们将设计理论转化成了具体可落地的设计策略。设计策略具体包括以下四点：1. 简化入口，及时帮助通过便捷的入口和及时的引导，让功能在合适的时机曝光，保证用户在需要时轻松地找到功能。针对“入口深”这个问题，我们将原本不稳定的入口改为常驻入口，待用户选择布局后再提示相应条件，及时引导用户在使用前先打开摄像头。同时在移动端和应用面板也都增加入口，降低用户寻找的门槛。增加入口另一方面，我们将原本需从客户端跳转到 Web 页面的操作，都简化至客户端内，减少用户跨端操作，避免因为过多的窗口跳转让用户感到迷惑。同时精简了高级功展示，在会议的客户端只保留核心操作，这样用户就不需要在多个页面之间来回跳转，完成设置项后，也可以在会议的客户端立即生效。缩短路径，减少跳转考虑到新手用户并不一定能理解“布局”、“轮询”等功能的作用，我们在页面顶部增加“新手指引”常驻入口，用户可以通过步骤引导图来详细了解每一步操作。对于用户比较陌生的高级功能，也在功能的启用选项旁提供 GIF 动图，帮助用户全面、直观地了解功能。通过新手指引快速学习2. 自动配置，提供模板“系统默认”具体落地到设计方案，即可以根据用户的使用频率，自动设置常用选项，同时提供默认模板，减少用户的决策压力和理解成本。例如，用户在进入设置页时，可能不太理解“布局”、“视图”、“背景图”及“模式”等陌生的概念名词之间的区别，也不知道这些布局样式适用的场景，因此，我们通过提供默认模板和效果示意，帮助用户快速理解概念之间的区别和不同的效果。常见模板及官方背景图同时考虑到自主设置有一定操作门槛，我们把常用的样式增加到默认列表中，用户选中后就可以直接使用（左图，L 布局）。对于座位设置功能，我们也提供了“自动填充”的默认选项，新手用户可直接选择自动排序，快速使用布局功能，而专家用户若有特定的排座诉求，则可以切换到“手动模式”来进行更高级的设置（右图，设置座位）。提供多种模式，满足不同诉求3. 拆解任务，分解流程“简化复杂页面”非常重要的一个方面是重组页面结构，把聚合在一个页面的任务根据先后顺序拆解成不同的步骤，让用户不再迷失于平铺了多个功能的庞大页面。拆解步骤拆解成小步骤后，可以通过增加步骤条导航和引导提示，让用户更明确每个子环节的“小目标”和当前所处的进度阶段。通过导航降低用户心理门槛除了将一个页面拆解成多个步骤，还可以通过收起/隐藏侧边栏目录，让用户更聚焦在某一具体的内容，免除其他元素的干扰，这样用户能更专注于布局画面本身的编辑。4. 效果预览，建立联想新手用户初次设置布局时，可能缺乏安全感，不知道应用范围是自己还是全部成员。为此，在设计客户端的设置流程时，我们提供了“场景示意图”和“效果预览区”，让用户在编辑的过程中也能快捷地联想到应用后的效果，实现所见即所得。除了官方提供的场景图模板，用户还可以根据自己的诉求在编辑器内 DIY 创作自己的场景图。考虑到对于新手用户来说，场景图编辑器的功能有一定使用门槛，在进入编辑器时，我们都会提示用户，可以通过调整模板场景图来快速上手，理解创作后的效果。通过效果图构建联想对于设置了座位、但未开启摄像头的成员，我们通过“铭牌”的概念模型，让用户能够联想到线下会议室里的“座位牌”，从而更好地理解这个座位已被主持人提前预留给了重要的成员。通过概念模型映射，帮助用户理解抽象概念可以看到，无论是场景效果“示意图”还是“名牌”的概念模型，都是通过真实世界里的元素，唤起用户在真实世界的心智，从而帮助用户更快地理解软件界面的功能逻辑。总结与回顾经过持续半年的方案打磨和研发落地，上文提及的改版方案已全部上线，会聚模式和自定义布局的渗透率都有了非常大的提升。通过该项目我们知道，在面对场景复杂多样的产品时，我们需要遵循一些通用的简化设计策略，综合考虑不同用户的认知门槛，尽可能降低上手难度。具体策略包括“简化功能入口”、“提供默认设置”、“拆解复杂流程”、“构建联想概念”等。为用户打造更简易的使用流程，一步步简化用户设置任务的操作，才能从根本上提升用户使用产品的效率。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/simplify-user-tasks
视觉 布局 权益 设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。往期案例：京东APP 9.0 是如何改版设计的？收下这份官方的完整复盘！2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。阅读文章 > 一、前期分析1. 项目背景PLUS未开通会员项目的背景有以下几个关键点：未开通会员频道"首屏"做为开卡转化的核心阵地，80%的流量集中在首屏，却没有很好的发挥首屏价值。PLUS 长期沉淀已有更多卡种，在主频道内没有呈现。未开通频道长时间未做视觉升级，因此需要进行体验设计优化，从而提升开卡效率。2. 业务诉求① 首先明确核心诉求在于提升频道首屏的开卡率② 接下来拆解诉求频道外露多卡种权益组织形式重构交互视觉体验升级优化开卡链路基于以上这几点去促使用户更快决策，助推到业务核心诉求从而提升首屏开卡率。3. 现状分析明确业务诉求后，相应对频道页面的现状进行分析，整合来看有以下 6 点。卡种选择单一且无核心价值传递会员权益形式表达不清晰，撩拨感弱权益露出无权重差异转化链路层级长联名卡视觉样式老旧且框架较高与正式开卡页面视觉风格不统一二、设计预研对自身问题有了拆解后，接下来对淘系、零售、O2O 相关竞品进行调研， 提炼竞品的一些相关优势策略点。正所谓“他山之石可以攻玉”。并且罗列归纳了竞品的几种布局方式因此，基于对自身现状的分析，和对竞品的分析，我们将本次体验设计升级的策略主要锚定在 权益表达、结算链路、结构布局、卡种展示 四个关键点。三、设计推演设计推演拆分为发散和收缩两个部分。1. 飞机稿发散发散阶段围绕 结构布局 和 卡种展示 进行发散.① 结构布局发散了 包裹式布局 和 分段式布局② 针对卡种展示，分别发散了 传统 tab 切换 和 卡片轮播 以及 卡种场景化探索。③ 由于有多种卡种，因此在卡种发散的过程中针对于 不同卡种的用户感知，也进行了相应的探索。比如 强感知 的皮肤颜色切换、卡面图形切换，次强感知 的标签样式区分。强感知 的皮肤颜色切换强感知 的卡面图形切换次强感知 的标签样式区分2. 收缩-策略推演最后的方案收缩落地，我们主要围绕前面提及的四个方向进行策略拆解，首先是权益展示。1）权益展示分为三个点：① 是进行主次权益的权重差异，助力用户决策。② 会员权益显性露出，强化关键信息，以及 sku 的轮播露出，打造强撩拨感。③ 最后组件化输出模块，后台灵活配置上传，节省开发成本。2）结算链路① 摒弃了以往全页面跳转形式，采用浮层收银台的方式，减少用户在页面间跳转带来的迷失感，从而达到简化支付路径的目的。② 其次视觉整体优化。保证视觉一致性传递。3）结构布局① 整体采用分段式布局结构、使模块更聚焦，提升首屏的秩序感② 分层展示便于开发还原。 「前期 UI 评审阶段和开发做好沟通，便于开发判断使用什么实现方式，从而做到又快又好的还原设计稿（皆大欢喜）」4）卡种展示① 多卡种滑动保证卡种外露的同时 引导用户操作。② 卡面微动效，强化 PLUS 的 品牌心智和用户感知。③ 卡面氛围，最终采用 3D 打造的效果，彰显 plus 品牌的尊贵感知，助力用户决策。并且拓充氛围坑位的运营属性，可配置氛围延展 plus 会员卡的情感化表达。④卡面上进行不同卡种 slgan 的透传，进行价值传递，进一步助力决策，比如京典卡：开通享 12 大特权，省钱又省心； 免费试用：开通享 8 大特权，免费试用 30 天；0 元开通：开通享 12 大特权，多用多省少用不亏。⑤ 联名卡整体视觉减负。四、数据验证本次首屏设计体验升级，在组内同学、产品和开发的共同的努力下，最终测试上线，通过测试版本追踪数据，我们也得到了相应正向的反馈（这里就不放数据啦）。大厂实战！京东内容助手从想法到落地的完整设计复盘本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。阅读文章 > 京东 11.11 的视觉体系是如何建立与推动的？来看完整复盘！京东每次集团大促都会有无数的问题等待我们去解决，在此给大家分享一下京东运营设计团队关于双 11 项目的复盘总结，希望共同探讨，一起学习进步视觉定位每次遇到集团大促，我们视觉团队都会倍感压力，不仅仅来自于运营团队业务要求的压力，也来自于年轻群体的购物趋势变化非常快，审美要求也越来越阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-plus-redesign
栅格 布局 尺寸 什么是栅格？我这里就不做说明了。很多优设的文章都写的很清晰了。这篇文章仅从我最开始接触栅格所遇到的困惑和部分设计师始终纠结的点来和大家一起讨论讨论。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
网格 布局 页面 网格的历史说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。页面布局页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。网格的作用及概念要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。接下来通过几个图例来详细解释下。列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。8pt 网格介绍有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px为什么一定要用 8pt？使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。文本如何设置？基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。例如：small = 8pxmedium = 16pxlarge = 24pxx-large = 32px……页面布局类型普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。最后用图例展示下如何利用网格系统在网页设计上进行页面布局。在 figma 上的设置如图：我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。https://www.figma.com/community/file/1076073453929437640/8pt-web-grid最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。参考文献：The Comprehensive 8pt Grid Guide：https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179UI/UX Design: Setting Up Grids：https://uxplanet.org/ui-ux-design-setting-up-grids-d8b3fd9271fbmaterial design：https://material.io/designHistory of grids: from the printing press to modern web design：https://webflow.com/blog/history-of-gridsHistory of the design grid：https://99designs.hk/blog/tips/history-of-the-grid-part-2/网格系统真是太好用了，6个方面帮你早点学会！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「iU梦工厂」 文件名 如何下载使用 文件大小 提取码 下载来源 栅格 表格插件神器1.05MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-grid-system
布局 屏幕 面板 本文为 Material Design 折叠屏设计指南中文版译文第二篇，超多干货建议收藏。Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 核心布局核心布局是一系列大屏幕布局，作为设计和实现的起点。在为大屏幕适配 App 时，这些布局可以用来帮助定义布局和组织共同元素。这些布局支持常见的活动，如内容浏览和消费，以及身临其境的媒体体验。列表详情视图许多布局可以基于列表和详情之间的关系来建立。在屏幕左边显示列表，右边显示列表对应的详情，可以在空间上建立它们之间的关系。只能用于横屏。在竖屏时，要考虑调整布局。列表详情视图的用途包括：文本消息和对话文件浏览器和打开的文件夹音乐家和专辑1. 布局用例列表详情视图最好用于浏览内容和快速查看详情信息。这对显示一系列对话和文本信息、浏览文件和查看它们的详情、浏览多个专辑封面和它们各自的曲目的布局来说，都很有帮助。即时通讯 App，显示联系人列表和他们的对话列表详情视图使用两列，一列用于列表或条目组，另外一列用于详情视图。1. 列表区域。2. 详情区域1:1 布局将屏幕分割为两个相等的空间，来显示列表和详情。邮件 App 使用 50/50 分割屏幕空间1:2 布局如果列表上的内容可以轻松阅读的话，也可以使用三分之一的列表和三分之二的详情来划分屏幕。消息 App 使用 1:2 划分屏幕顶部的应用栏可以放在详情视图内。在滚动内容时看到详情视图内固定位置的顶部应用栏当切换到竖屏模式时，最好使用单列布局，让内容舒适地在狭窄的屏幕里流动。在竖屏模式下使用单列布局。如果在竖屏模式下使用列表详情视图，确保有足够的空间来列表条目具备可读性。当心！ 确保在竖屏模式下有足够的空间，使得列表条目易于阅读当用户从横屏变成竖屏并选择了一个条目时，在过渡到竖屏模式时显示所选条目的详情视图。当从横屏（左图）过渡到右图时，如果用户以及在列表中选中了条目，则在竖屏时显示选中的内容。如果用户没有做出选择，在切换屏幕方向时返回到竖屏模式的列表视图。如果用户没有从列表中进行选择，在竖屏模式以单一视图显示列表。辅助面板（Supporting panel）辅助面板布局是一种扩展屏幕的方法。辅助面板布局的用途包括：生产力软件Word 文档和评论注意：辅助面板与列表详情视图布局不同，因为主要和次要的焦点同时是彼此不可分割的。1. 布局用例辅助面板布局通过使用占据屏幕三分之二的详情容器或焦点面板，和占据剩余空间的辅助面板，两者配合创造一种焦点和辅助的关系。这种布局适用于无缝铰链设备。一个详情容器或焦点面板占据了屏幕的三分之二，而辅助面板则占据了剩余的空间。屏幕分为焦点面板（左）和辅助面板（右）。1. 焦点面板。2. 辅助面板。对于有物理铰链的可折叠设备，最好将屏幕分成相等的两半，用其中一半作为辅助面板。如果设备有物理铰链，组合结构可以把一个面板作为焦点，另外一个显示补充或辅助信息。在竖屏模式时，辅助面板可以放在焦点面板下面。竖屏时，辅助面板可以放在焦点面板下面。信息流（Feed）信息流是新闻和社交 App 中常见的布局。信息流由多个卡片（tiles）构成，用户通过卡片探索内容。信息流的整体交互体验在移动设备和可折叠设备上是相同的。在这两种设备尺寸上，打开一个条目都会打开一个新页面；在可折叠设备中，由于屏幕尺寸更大，信息流更具有沉浸感。1. 布局用例信息流可用于通过卡片和列表来显示不同的内容。信息流布局支持内容和浏览，通常用于新闻或照片等 App。通过卡片和列表展示各种内容，信息流布局支持内容发现和浏览。信息流可以使用卡片、列表、banner 和其他元素等组件，以呈现进入 App 的多个入口。1. 信息流区域信息流允许内容组件扩展多个列，以创造为大屏幕优化的布局。内容组件在多列上扩展，创建为大屏幕优化的布局。主角式布局（Hero）主角式布局优先考虑屏幕顶部的内容，并使用辅助面板。布局的主角区域提供了专门的空间来突出单一内容。译者备注：主角式布局（hero layout）来源于戏剧表演的 hero prop（主角/主要道具），指制作最精美，适合特写镜头，用于凸显最重点的部分。1. 布局用例主角式布局使用屏幕顶部为图片、适配或轮播图等元素提供更多的空间。这种布局可以用于内容的详情视图，比如文章或者 App 商店中的 App。主角式屏幕显示一个带有视频或图片的轮播图，并在下方显示辅助面板。在主角式布局中，顶部区域使用大图或视频作为屏幕上最突出的视觉元素。这种布局可以与其他布局相结合，如辅助面板。1.主角式区域在主角式屏幕中，后退按钮帮助用户导航回到前一个屏幕。主角式屏幕显示导航栏上的后退按钮。Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 欢迎关注作者的微信公众号：「龙爪槐守望者」本篇来源：优设网原文地址：https://www.uisdc.com/material-design-foldable-devices
张大湿
落霞与孤鹜
表哥
在路上
飞翔的企鹅
