B端设计师必读-各类型网页布局详解
时间：2023-10-15 00:18:02 | 来源：网站运营
时间：2023-10-15 00:18:02 来源：网站运营
B端设计师必读-各类型网页布局详解：一文了解各种布局的相关知识，在与前端开发对接时掌握设计话语权。
B端设计可能是下一个风口，目前内卷也很严重，由于B端设计师中很多都不太了解前端的技术，这次给大家分享一下最近学习和整理的网页布局相关的知识，本文会从B端设计师的视角带大家了解各种布局的知识点，让我们设计小伙伴在和开发的沟通中有一定话语权。
开发岗位种类和入门知识
开发岗位分成前端工程师和后端工程师。
后端开发工程师主要职责是平台设计、接口设计和功能实现，在日常工作中与我们设计师的交流不太多。
作为UI设计师的我们，在工作中最常打交道的就是前端工程师。前端开发主要工作是将UI设计师的高保真设计稿通过代码转化成可用的前端页面。前端开发又可细分为web前端开发、原生iOS开发和原生安卓开发。前端开发主要是用JS+CSS完成页面的构建。
这里简单介绍一下JS、CSS和HTML。
HTML（HyperText Markup Language）是超文本标记语言。超文本就是超越文本的意思，表示它不仅仅是简单的文本，它比普通的 .txt 文件要高级。这些记号超越了普通文本的标记，它们对普通文本的修饰，构成了一套规则，这套规则就是 HTML。
以盖房子类比，必须定义这个房子有多长、多宽，每一块面积如何规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室。将这些定义好，网页也就有了最基本的样子。
CSS（Cascading Style Sheets）是级联样式表。CSS 中的“样式”就是指外观。还以盖房为例，定义好了各个空间，房子也盖起来了，但还要装修，例如给客厅贴壁纸、给卧室铺地板。CSS 就是起装修作用的，要和 HTML —起配合使用。
JavaScript是一种脚本语言，主要用于前端页面的 DOM 处理。房子已经装修好，贴上了墙纸，铺上了地板，桌子、板凳、沙发都已经摆好，一切都很完美。可是，一个有生活情趣的住户时常要买些新家具，或者把茶几换个位置，这时，移动、添加、减少物件就只能靠 JavaScript 实现。
前端开发CSS单位
前端开发人员所使用的CSS单位包含很多种，我们设计师只需要了解所有单位分成两类，绝对单位和相对单位。网页设计中最常使用的单位px像素，就是一种绝对单位。
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。设置宽度为2px，不管屏幕变大还是变小都始终显示2px。
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
布局种类介绍
固定&静态布局
页面保持固定的宽度，不会根据浏览器或显示器的宽度大小而变化。开发使用像素这种绝对单位作为单位，页面按照精确像素展示。
固定布局属于前20年的技术产物，由于当时的科技水平有限，使用的纯平显示器尺寸类型都较固定，所以当时很多网页都使用的是固定布局。
设计简单，不需要考虑屏幕尺寸的限制，使用一种固定的尺寸进行设计即可。
开发简单，不需要考虑屏幕尺寸的适应问题。
小屏幕时需要左右滚动才能看到全部内容，大屏幕时两侧留白较多，空间浪费。
目前部分网页依然会使用固定布局设计开发，常见于一些新闻门户类网站，这一类网页以大量的图片和文字资讯为主，如：新浪网、中华网
固定布局形式适合一些新闻门户类等文字内容很多的网站，设计师在设计过程中可以定义一种适合浏览的页面内容区宽度，通常设置为1200px，内容区域居中两侧空间留白。
流式布局
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。网页中主要的划分区域的尺寸使用百分数。
页面中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置页面主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
布局保持不变，内容跟随页面宽度变化去做变化，内容会在大屏和小屏幕之间的宽度变化而变化，能够适应大屏和小屏之间的显示。
内部字体无法跟随变化大小
如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
阿里云网页版在低于750px分辨率时采用流式布局方式。
流式布局在设计中使用频率较少，在设计中需要注意宽度变化后导致的内容高度变化，设计时可以考虑做一种最大宽度的效果和最小宽度的效果。
自适应布局
自适应布局是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
在多个不同尺寸设备终端下查看网页内容，并且在小屏幕下也能保证相对好的阅读体验，对于不同的分辨率能够灵活的进行操作应用
通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。
设计工作量大，需要根据不用的页面设计不同宽度的设计稿
页面存在多个版本，每个版本都必须单独更新。通常，设计师需要针对6种最常见的屏幕宽度进行设计。320、480、760、960、1200和1600dp。而且，这个数字还在不断增长，这使得设计师在现场维护方面的工作变得更加艰辛和耗时。
Amazon在自己的页面中使用了部分宽度自适应的方法，与使用自适应网页设计的其他网站类似，亚马逊更加鼓励用户下载其官方APP。据报道，通过采用自适应设计，亚马逊移动端的访问速度比以往的响应式网页设计提高了40%。
对于UI设计师而言，一旦团队确定使用自适应布局开发产品，就需要做多套设计稿尺寸。对于自适应布局而言，就是根据不同的页面宽度加载不同的页面。
常用的设计尺寸使用600, 840, 960, 1280, 1440, 和1600dp作为断点，这里的断点个数和尺寸可以根据实际情况灵活去变化，主要是根据目前终端所在的宽度进行选择，例如产品目标用户使用笔记本的数量多，可以将1366作为断点。
响应式布局
随着CSS3出现了
媒体查询技术，又出现了
响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果。
对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式布局设计产品能够给用户带来无缝的体验感，无论使用哪种设备（台式机，移动设备等），访客都将获得相同的无缝体验。即使当它们从一种设备过渡到另一种设备时，也会给人一种熟悉和信任的感觉。
对于B端产品来说，跨终端办公是今后的趋势。那么响应式设计对于B端产品来说尤为重要，实现同一个页面在pc和pad上都能够流畅查看且操作。
响应式网页设计最大的担忧之一是加载时间。响应性网站会为所有设备加载信息，而不仅仅是访问者正在查看您网站的设备信息。
要匹配足够多的屏幕大小，工作量很大，设计也需要多个版本。
苹果官网
与自适应一样，对于UI设计师而言，一旦团队确定使用响应式布局开发产品，就需要做多套设计稿尺寸。每套设计稿在不同尺寸下设计元素以及导航要发生相应变化，比如在宽度缩小到750，考虑设备为移动端，内容在设计侧考虑移动端规范，需要遵循移动端的导航与用户习惯。
在实操过程中，我们需要更多分析竞品以及采用响应式布局的其他产品页面，并且能够熟悉掌握各个终端的设计规范。
B端Ant系统的响应式介绍
目前有很多大厂商都出了自己的B端系统，如Arco、element。解读响应式设计，大家可以根据需要寻找适合的案例，毕竟我们是要了解背后的规则，我在这里选择了 AntDesign 的布局相关规范。
Ant design中，主要应用了两种典型的适配布局形式，左右布局和上下布局，响应式规则主要作用在工作区中的内容区域中。
在这个区域中，Ant 采用了 24 列栅格（Coloum）、23 列水槽（Gutter）的栅格系统。其中水槽数值是固定的，内容区域减去 23 列间隔后，剩下的部分等分成 24 个格线。
栅格系统的基础应用，就是对内容模块分配指定数值的 “列”，比如一个组件的宽包含 3 列、4列、或者 12列。也就是说，在同一行中，总共包含 24 列，横向的元素按照设计师设计的大小比例平分这24列。
所以通过 Ant 的框架来完成 B 端页面的响应式设计，就是创建好画布以后，在需要响应式的区域创建出对应尺寸的24栅格系统，然后在该栅格体系内定义宽高、间距即可，Ant 的框架会自动帮助我们完成响应的功能。
比如，一开始设计的页面中，创建了 1440px 的画布，使用左右布局的形式，左侧使用 200px 宽的导航栏，导航栏采用固定布局，不参与栅格的计算区域。右侧区域宽度为 1192px，间距为 8px，列宽就是 42px。
在这之后，内部层次更低的表格、输入框、标签栏等元素也会对应实现响应的效果……
网页设计策略
不同断点间屏幕上的界面相互切换适应的策略有：展现、转变、分割、重排、扩展和移位。
1、展现，小屏幕上隐藏的UI信息在屏幕增大时可以展现出来，如下图所示本来隐藏在手机侧边导航中的菜单项在平板的左侧直接显示出来了。这一点也和以600为分界的策略相呼应，在更大的屏幕上直接显示出两级信息：
2、转变，界面元素从一个组件变为另一个组件，这一点也说明组件的使用并不是一成不变的，可以根据屏幕的大小选择合适的组件。如下图所示，侧边导航的菜单项可能在大屏上显示为标签；小屏幕上的文字列表项可以在大屏上显示为图片网格列表：
3、分割，分层的信息在一个大的空间里铺开：
4、重排，界面元素可以重新排布以填满新的空间：
5、拓展，界面元素在大屏幕上展开为更大的尺寸：
6、移位，界面元素调整到更合适的位置：
总结
- 如果只做pc端，那么静态布局（定宽度）是最好的选择；
- 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择。
- 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
- 各种布局并不是单独存在的，很多网页都是几种布局混着用。例如响应式网页中会包含固定布局、流式布局。
在线咨询
