本文5500字每边，反反复复校订8遍以内，先期写作完约莫须要22两分钟，若是深入细致认知并全然稀释则提议“先珍藏再反反复复的品，毡片品”。期望对石边略有协助，局限性望标定，祝写作融洽。首章前的专业术语坚信许多朋友在做页面结构设计的这时候，具体来说碰到的难题是“以别的体积展开结构设计？”的的现阶段消费市场电子设备为数众多，既要相容pc端相同体积，又要相容智能智能手机、智能手机等相同体积，一会儿是苹果公司端，一会儿又是Android端，即使更要考量其它智能电视、佩戴电子设备之类，事实上要厘清电子设备类型就足够多让人胆战心惊的，更年迈体弱体积了。事实上他们无须惧怕，即便那时控制技术成形，后端天神的积极响应式神功Kozhikode“全屏搞掂”为数众多痛点，而对他们结构雕塑家来说，也是顺理成章，愈来愈科学规范的事了。上面，正式宣布进来下期主轴吧。Web端页面结构设计解析度现况解析度消费市场占比解析度消费市场占比1920*108040.75%1536*8645.88%1366*76812.99%1024*7684.51%1440*9009.01%1280*7204.03%1600*9006.04%其它16.79%
图二）
常用页面结构设计体积，Photoshop cc2020新建文档-web（图三）结合百度统计解析度占比情况（图一、图二），他们来看Photoshop新建文档的web体积模版（图三），可以说Photoshop相当良心，详细的展示了常规电子设备所涉及到的页面体积，把结构雕塑家疑虑的体积难题统统解决了。对于结构雕塑家来说，只需专注内容创作即可。那么难题来了，要满足全站积极响应，对于他们结构雕塑家来说，是不是（图三）中涉及的所有体积都要各出一套视觉稿呢？算一下至少也得七八套，这工作量对于结构雕塑家来说岂不是超级大？估计结构雕塑家得疯了吧。当然，原则上要满足各终端像素级别的还原，肯定是产出更多套结构设计稿，对后端小哥哥在开发时的参考价值越高，还原度自然也会越完美。但稳住，别慌！以我搬砖十余年的付出，可以负责任的告诉你：不须要产出这么多套结构设计稿！！！不管是从投入成本（不为老板节约成本的结构雕塑家，不是好的美工～），还是从控制技术实现层面都不须要。那具体是几套呢？别着急，先让他们从结构雕塑家的角度，简单了解下页面结构设计中页面布局的主要方式吧。（ps：欢迎路过的控制技术大牛留下更专业的解答）页面结构设计中页面布局的主要方式静态布局即传统页面结构设计模式，只需做一套体积的结构设计稿（比如1280*800px），一旦电子设备解析度宽度小于1280px，则出现横向滚动条，一旦电子设备解析度宽度大于1280px，则内容居中显示，两边留白。（常见于新闻类、电商类、政府类页面），这种布局方式对结构雕塑家和后端来说是最简单的。
自适应布局可以把自适应布局看作是静态布局的一个系列。自适应布局的特点是为相同的屏幕解析度定义固定布局，即创建多个静态布局。一个静态布局对应一个屏幕解析度，改变屏幕解析度可以切换相同的静态局部，但页面元素不随窗口大小的调整发生变化。简来说之是须要自适应几个终端，就须要出几套体积的结构设计稿。（结构雕塑家得哭了～）
弹性布局以百分比作为页面的基本单位，可以适应一定范围内所有体积的电子设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
混合式布局混合式布局是为相同终端电子设备的屏幕解析度定义布局（适配各种体积的PC、智能手机、佩戴电子设备之类），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。简来说之是只须要一套结构设计稿适应多个终端。（结构雕塑家的福音啊～）
自适应布局、弹性布局、混合布局都是积极响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的积极响应式布局实现方式。许多这时候，单一方式的布局积极响应无法满足理想效果，须要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑，否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则须要采用混合布局的实现方式。
我所接触的网站项目几乎也都是积极响应式开发，显然积极响应式已成为页面结构设计的标配，而不是什么奢侈品。所以，牢牢掌握积极响应式布局结构导则也是极为必要的。积极响应式页面设计的基准体积了解了页面结构设计的布局方式，再回到前面的疑问“以别的体积展开结构设计？”的答案自然就有了，事实上结构雕塑家只需出一套体积的结构设计稿给到后端小哥哥积极响应适配就够了，但考量到web端和移动端的交互方式略有区别，且相同段位的后端小哥哥执行力也相同，为了确保不出现特别大的差异，他们团队的做法都是结构设计以下两套基准体积，再给到后端展开全站积极响应。web端基准体积：1920*1080px这里在结构设计时又分两种形式，一种是以1920px全宽体积展开结构设计（常见于个性化页面结构设计），一种是内容控制在以1200px为宽度体积的安全范围内展开结构设计。具体用那种形式，可根据实际项目情况而定，两种形式事实上是视觉效果相同。移动端基准体积：750*1334px（375*667px @1）
该体积满足了移动端相同体积的积极响应效果，结构导则遵循移动端结构导则，关于移动端结构导则可查看我的上一篇文章《也许是2020年全网最全的关于iOS、Android结构导则、适配总结文章》
知识点拓展：移动优先原则优先移动端结构设计，有利于产品核心功能价值的凸显，web端界面能承载的内容较多，许多次要功能也会被加进来，如果优先web端，产品策略思考上会不够聚焦。因此，他们在展开产品结构设计时，都习惯优先移动端结构设计，再展开大体积的结构设计，加法原则，也符合产品的迭代思路。开发过程也是移动电子设备优先原则。（图四） fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E "Web端响应式设计规范13")
Sketch 的布局设置（图八）以12栅格系统为例，一个12栅格系统根据业务须要，可被2等分、3等分、4等分、6等分、12等分，还可以被1：2：1、1：3：2、1:2、1:3、1:5等不对称分割。注：列的数量越多，页面就越“碎”，比较难把控，适用于业务信息量大、信息分组多、单个盒子内信息体积较小的页面结构设计。槽的宽度越大，页面越轻松简单。8点网格列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，目前最普适易用的是8 点网格。结构设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。但产品中各类元素应该遵循8倍原则（图标、组件大小等）。8点网格系统有两种栅格形式，结构雕塑家可根据具体情况展开选择。将元素放到8的倍数栅格中，称之为“硬栅格”。元素之间的距离是8的倍数，称之为“软栅格”。为什么是8点网格呢？目前主流电子设备的屏幕解析度基本能被8整除，可确保相同布局之间的视觉一致性，同时可以适配多种体积。（图九）现阶段主流屏幕解析度，基本上都能被8整除，图片 以8为单位符合“偶数原则”。偶数原则在页面缩放中最大程度的避免了0.5、0.75、1.25等次像素的出现，使页面显示效果更佳。后端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来结构设计，结构雕塑家使用以8为基本单位的栅格系统的话，相互对接会更加方便，也能更高品质的还原结构设计。关于8点网格更详细的内容，这里不过多描述，感兴趣的可以自行搜索“8点网格”深入细致了解，也欢迎添加本人微信共同交流。读到这里，坚信许多好友已经知道页面结构设计的正确打开方式了。接下来，让他们继续了解关于页面结构设计更细的一些规范吧。页面布局结构页面的布局结构是页面基本框架，后续的结构设计都是在这个大的框架下完成的。最典型的页面布局结构有每边布局与左右布局结构。每边布局结构：也是导航栏在上，内容区域在下，大众化布局结构，符合用户认知，遵循用户从上而下浏览习惯，贯穿全屏的导航栏结构设计也使页面显得正式宣布稳重，页面内容也能够做到全空间展示。左右布局结构也是导航栏在左，内容区域在右，常见于后台系统，侧边导航栏可固定也可收起，相对比较灵活，抽屉式概念，扩展性比较强。但因为固定在侧边栏，导致右侧内容区域空间被压缩，相对每边布局的结构，内容展示方面也相对局限一些。一般为了与内容区域做区分，导航部分会用选择更深的颜色、安排更多的图标和文本。常见的三种左边导航栏的积极响应形式灵活积极响应：侧导航可折叠、可扩展。右边内容随着侧导航的变化而积极响应。固定积极响应：侧导航始终保持静态宽度，右边内容积极响应。悬浮积极响应：侧导航漂浮在内容区域之上，即停即走的概念，不影响内容积极响应。Web端最佳首屏结构设计体积这两个数据足以表明，首屏内容对转化率的重要性。查阅了一些其它人对于页面首屏高度的认知，大致意思是根据浏览器参数、消费市场占有率以及屏幕解析度，可以推出首屏的最佳结构设计宽度和高度。首屏高度=屏幕解析度总高度-系统任务栏高度-浏览器高度（工具栏、状态栏、边框等）-位置工具栏（如360、百度）任务栏高度：40px（Win7、8、8.1、10=40px Win XP=30px）浏览器高度：160px（包含工具栏、状态栏、边框等）位置工具栏：30px（如搜搜工具栏，百度工具栏，360工具栏之类用户浏览器上安装的各种插件都会影响到首屏的高度）根据用户可见首屏内容高度统计（图十）及二八比例划分原则，首屏高度控制在710px可以照顾到约80%的用户群体，最终得出的结论是：首屏安全宽度为1002px（最大安全宽度可以为：1258px）Windows XP首屏高度为580pxWindows7、8、8.1、10首屏高度：710px但须要注意的是他们采取的是积极响应式开发，事实上首屏按照1920*1080px来结构设计即可，核心内容可以聚焦在710px的高度内。例如Apple官网首屏核心内容是聚焦在710px的高度。（图十一）Apple官网首页首屏的核心内容体积：1002*710px（图十一）文本规范PC系统默认中文本：微软雅黑（事实上作为屏幕输出，不能用在banner，否则会侵权哦）这里推荐一篇关于微软雅黑如何使用不侵权的文章：（ 微软雅黑这样使用不侵权 https://www.uisdc.com/microsoft-yahei-use-way）Mac系统默认中文：苹方系列英文可以使用：Arial、DIN如果要用一些个性化的字体来体现页面的独特性，提议购买正版字体，作为结构雕塑家的他们，应该尊重版权和原创，我收集了一份可能是2020年最全的、可永久免费商用的中文本体包。（感谢优秀的字体结构雕塑家们的无私奉献）字体包链接: https://pan.baidu.com/s/1ZyRAen0eWaedmL-8uYQOlg 字体包密码: 85wq正文字体≥12px即可，目前许多网站字体已经14px起步。可根据实际效果展开选择，但尽量使用偶数。色彩规范：应该遵循品牌VI规范体系，须要注意相同状态的用色规范（默认、悬停、按下 、成功反馈、警示反馈、错误反馈），颜色不宜过多，控制在3种以内，文本色彩尽量避免纯黑色。按钮规范：可分为线型按钮、面型按钮、文本按钮、图标按钮、文本+图标按钮。按钮的状态一般有默认、按下、悬停、禁用。按钮大小可遵循8点栅格原则。图标规范：图标结构设计取整数制作，完成后输出SVG格式，上传到阿里巴巴矢量图标库，方便后端调用。注意相同形状图标视觉的大小统一（椭圆、方、圆、长方、三角），可遵循8点栅格原则。表单规范：系统表单结构设计中，注意输入框样式统一，一般有默认、选中、输入、禁用、校验错误等，另外还有单选、多选、下拉等组件。可遵循8点栅格原则。弹窗规范：分模态弹窗和非模态弹窗，他们最大的区别在于是否强制用户交互，是否打断用户现阶段操作流程。弹窗大小可根据显示的内容、边距来结构设计，位置保持全居中。非模态弹窗，须要考量自动消失的提示时间。可遵循8点栅格原则。控件规范：在系统中许多控件须要结构雕塑家来优化结构设计，保证控件的统一风格，也方便后期迭代。在实际工作中为了节省开发时间，后端也会提供封装好的控件让他们来选择，他们要协助后端规范好控件的样式。可遵循8点栅格原则。到这里，关于页面结构设计积极响应式结构导则的梳理基本上够全面了。总结回顾一下，以下几个核心知识点务必牢记：页面结构设计的页面布局方式积极响应式页面结构设计基准体积结构设计稿积极响应式工作原理和栅格系统8点网格页面布局结构Web端最佳首屏结构设计体积页面结构设计的相关规范，须要遵循8点栅格原则。（文本、色彩、按钮、图标、表单、弹框、控件规范）期望大家认真写作并及时消化，真正转化为自己的东西，并应用到实际项目当中去。切记，规范只是起到引导作用，它可以让他们的结构设计更加严谨，但他们的创意不能被规范所束缚，永远记住最好的规范是没有规范。不足之处还望标定，祝大家学习融洽。我是Piger，一个游走在结构设计行业十余年的结构设计人。我积累了许多“无用功”，我将毫无保留的分享出来，共同学习、进步。整理不易，愿各位略有收获。感谢！2020.6.7你们的“在看”，是我继续前行的动力。
