优漫：B端设计设定设计尺度和标准
新闻来源：本站
日期：2021-05-09
实际上在庞大的web类别中，根据产品属性、用户群的不同分为许多类型：从网页前台到管理后台，设计师扮演了一个很重要的角色，判断web产品是否适合框架和标准定义。
设定设计尺度和标准。
实际上在庞大的web类别中，根据产品属性、用户群的不同分为许多类型：从网页前台到管理后台，设计师扮演了一个很重要的角色，判断web产品是否适合框架和标准定义。
一、确定设计尺寸。
当确定网页的尺寸时，我们首先应该考虑大众使用的显示器。
记起N年前，当时网页的信息内容必须设计在800或1000宽范围内，规则其实并不正确，但随着设备和网络的发展，网页显示的分辨率也在迅速变化，为了兼顾大众浏览体验，屏幕分辨率也越来越高。
据百度流量研究院最新数据显示，市场上电脑屏幕的大小不一，占设备总数最多的还是1920×1080，分辨率最低的是1024×768，低于1024的分辨率可以忽略不计。
终端管理后台考虑的是最小响应屏，建议采用中间尺寸1440×900宽，响应屏从小到大便于适配，但从大到小的适配问题尤其突出。选择此尺寸的前端以降低适配错误率。
决定了宽度，那么如何定义高度尺寸呢？虽然浏览器的竖屏显示方向是无限的，但是不得不说首屏在界面设计中的重要性，研究显示，首屏以上的关注度为80.3%，而首屏以下仅为19.7%，这就解释了为什么我们在设计时会将重要内容放在首屏上。
就拿中间尺寸1440×900来说，我们不能直接以900的高度作为基准尺寸，要去除系统任务栏、浏览器菜单栏和状态栏之后，剩下的网页首屏内容控制高度大约为720px(相对安全区域700-750PX)。
使用这一中间值，就可以满足80%的用户群，Antdesign的组件也是1440x720px，因此，1440x720px的大小将被最终确定。
普通Web网页固定宽度显示类型：一般设置为1200px(1000px-1400px区间)作为设计的相对标准，在这个范围内，大多数浏览器都可以显示所有内容。
二、布局规范。
在数字产品设计方面，几乎所有你可以在设计工具中完成的工作都可以通过代码来创建并展示，但由于许多原因(从开发思想到基本的设计规范)，可能是设计稿没有落地，或是设计输出质量差，这会让你感到困扰，下面我们来讨论一些设计前的准备工作。
一、方框模型使您更了解开发思想。
箱体模型是网页设计领域中最常见的一种思维模式，也是CSS技术应用最广泛、效率最高的界面开发模式之一，是提高设计人员与开发之间沟通效率的重要手段。
框式模型包含下列属性：内容(content)、内边距(padding)、外边距(border)、外边距(margin)
二、基于八点网格确定栅格基准。
Grid是组成页面Grid系统的最小单元，8点/8point/8pt，建立一个8为单元的Grid系统，用8的倍数表示内容元素(按钮、输入框、图片等等)和布局规则。
为何根据8位数定义网格？尽可能确保栅格最小单位是偶数，用2、4、6、8点或10点作为栅格的候选者原子单位其实是可以的，偶数能够匹配大多数主流显示设备，最大程度地避免半像素模糊的情况。
据最新的中国PC端主流解析度统计，只有“4,8”无法被1366整除，其它的都可以。因为4太小在视觉上不能很好地区分，所以我们选择了8作为最小单位，以后所有的数值都是8的倍数，8作为最小的栅格单位，更多的用在了后台系统。
页面中常用的栅格单元是8、10，那么针对最小的单元是8、10还是多少也是需要根据需求进行分析的。如淘宝、京东等电商网站的内容区均为1190px，以10为最小格子，普通网页固定宽度显示类型用的比较多，宽度可以用10整除。
举例来说：从下面这幅对比图中可以看出，是否严格按照网格体系来排列的结果，在好坏上有明显的区别。
关于iOS的@1x,@2x,@3x图与MaterialDesign的@1x,@1.5x,@2x,@3x,@4x,Ios和materialdesign组件都是以8点为基准的，小控件也是以4点为基准的。
三、栅格系统使设计更加有序有序。
网格系统，能使设计更有序、更规范，简单来说就是用科学的方法去排版。使用格子系统，就是将一页页切成具有N个格子的单元(块)，保证每一页的信息都能有序排列。
在此基础上，将该页的宽度表示为W，网格单元的宽度表示为a，网格单元之间的间隙表示为i，网格单元+网格单元之间的间隙表示为A。这个公式是：宽度=(栅格宽度X数量)+(栅格数量-1)X空隙宽度，就是栅格系统Get，见下图：
接着我们又拿了个栗子，我们选择了尺寸为1440x720px的画布(左右布局)，布局采用24栏格子。设置24个栅格来划分1152宽的内容区域，页面中栅格的槽位设置为定值，即浏览器在一定范围内增大或缩小，栅格的列宽随之增大或缩小，但槽位宽度值固定不变。
编写以下样式，数值仅供参考，复制请谨慎。
在PC端，12格栅和24格栅比较常用。他们都可以被2,3,4,6,12等分，也可以被1:2:1,1:3:2…这样的比例来分割，提供了足够丰富的变体。
通常12个栏栅适合在信息承载密度低、信息承载比较松散的中后台网页设计或网站展示类网站。一个24等分的格子系统，适用于中后台的页面设计，业务信息量大，适合于信息多的情况，格子的选择要根据实际情况而定。
填满内容：在建立好基础栅格后，我们可以将内容的布局划分为多个块，使整个界面整齐划一。将内容放入块中，内容的开始和结束尽量避免放在水池中，块的高度也要保持8的倍数。
例如，在24个栅格中，块内容占据8、6和12个栅格的布局。
没有格子格子可以设计吗？不用格栅也没问题，许多优秀作品并没有刻意遵循传统格栅，反而显得更加灵动。
但在打破规则之前必须了解规则，所谓的方法论和规范只是前人所积累的经验，当你的创新足够具有破坏性时，规则就会变成陈规旧俗。
