编辑导语:如何为一款产品制定合适的界面规则？随着产品的迭代更新，作为设计师，更需要借助产品特性的知识来设计合理有效的界面布局。本文介绍了网页产品设计改编的选择，并提出了自己的看法。
一.开幕
现在几乎所有的网页设计都要有响应性和适应性，这样产品才能覆盖更多的终端。当你接手一个产品设计的初始阶段，制定界面适配规则的时候，你是否也有以下疑问:
单位宽度我用百分比还是像素？还是雷姆？有什么区别？屏幕尺寸，屏幕分辨率，每英寸屏幕像素，设备像素，CSS像素是什么？浏览器尺寸和设备尺寸和大分辨率cell有什么区别？什么是响应式网站，什么是适应性网站？两者有什么区别和联系？百分比布局和流式布局与前者有什么关系？既然响应式这么受欢迎，为什么淘宝和JD.COM不做，而是单独开发手机版？有哪些坑要避开？
第二，历史走廊
早期硬件设备落后，网页主要采用绝对静态布局。具有绝对固定宽度的布局被称为静态布局，有些被称为固定布局。
随着时代的变迁和技术的发展。随着浏览器的增多，开发者忙于兼容各种浏览器。这期间实际上已经有了各种设备适配的解决方案，但并没有成为主流。这种新的布局方法称为自适应布局。
当时多指宽度自适应布局。
在这种新的思路下，出现了两种具体的解决方案:百分比宽度布局和流体布局。
当时大家还没有响应式布局的概念，但这时出现了一个新词——渐进增强。逐渐增强之后，又出现了另一个词，优雅退化。这里只是一个典型的例子:Gmail和QQmail。两者都是百分比宽度布局，属于自适应布局，但有区别。
QQmail是CSS hack的完美体现。用任何一个浏览器，都能看到几乎一样的邮箱，为了统一用户体验。
Gmail使用渐进式增强。你的浏览器越新越强，看到的效果越好，才能提升用户体验。后来Google发布Android，移动互联网爆发，html5标准发布。
互联网大战从PC打到手机。手机屏幕虽然更小，但提供了更丰富的功能。用户的要求在不断提高，网站更加注重用户体验。
所以谷歌式的渐进增强被广泛认可。结合自适应的思想，出现了响应式布局的概念——由Ethan Marcotte在2010年提出。
描述响应式界面最著名的一句话是“内容如水”——无论用户使用的是笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片大小和相关脚本功能，以适应不同的设备。
现在，为什么需要考虑多个设备的考虑呢？还是因为时代的发展和生活方式的改变:
即使对于PC或Mac用户，调查显示只有一半的人会全屏显示他们的浏览器，很难预测其余普通人会使用哪些浏览器。桌面、投影、电视、笔记本、手机、平板、手表、VR……智能设备越来越多，“主流设备”的概念正在消失；屏幕的分辨率发展很快，同样的画面在不同的设备上看起来可能大小不一。用户访问浏览器解析结合自己的产品；鼠标、触摸屏、笔、相机手势……意想不到的操控方式不断涌现。所以我们需要了解基础布局模式的特点，选择适合自己产品的布局实现模式。
三。布局方法比较
静态、自适应、流动和响应布局，以及A+R混合布局的特征比较如下。
1.静态布局
当窗口缩小后内容被屏蔽时，拖动滚动条显示布局。无论哪个设备，哪个浏览器，浏览都是一样的。在移动设备上，显示屏太小或不完整。
2.适应性布局
通过自适应技术，我们可以开发和提供不同的布局，为特定场景(如纯触摸屏或混合触摸屏设备)提供最佳体验。
为不同屏幕分辨率的设备设计不同风格的布局，相当于一系列静态布局。
每个静态布局对应一个屏幕分辨率范围，页面吞吐量的百分比自动适应设备的屏幕分辨率和可见窗口的大小。
可视化窗口变化时，不会有水平滚动条，UI、图片、文字会自动缩放，元素内容、布局、交互方式基本不变。
3.灵活布局
以百分比作为页面的基本单位，能够在一定范围内适应各种尺寸的设备屏幕和浏览器宽度，能够完美利用有效空空间展现最佳效果。
4.流体布局
它是自适应的一个子集，它还会按百分比自动适应设备的屏幕分辨率和可视窗口大小。与百分比适配不同的是，随着窗口大小的变化，页面的布局会有微小的变化，因此可以进行调整，这正好与适配相得益彰。
5.响应式布局
如果从广义上来说，响应式布局实际上更好、更智能、更灵活地实现自适应，它们都可以视为一种柔性布局。更通俗的说，响应类型侧重于“响应”，它会随着设备的属性而变化。
页面设计和开发应该根据用户的行为和设备环境做出响应和调整。具体的练习方法包括很多方面，包括弹性网格和网格删除、布局、图片以及使用CSS媒体查询。
狭义的响应式网页设计是指一个网站可以兼容多种终端——而不是为每个终端做一个特定的版本。
6.A+R混合模型布局
1)R和A的区别
当响应式设计基于预定义的断点时，使用CSS或JS调整布局和内容。该方法提供了基于用户代理和设备类型的预结构化模板。
它们之间的主要区别是DOM结构。用响应式思维开发时，HTML代码在所有情况下都会是一样的，而在自适应开发中，我们可能会有不同的代码结构和体验。
采用r流体+断点。在断点之间，页面仍然会随着窗口大小自动缩放，直到遇到断点，这将改变界面样式、布局甚至内容。一般来说，R需要在网页设计的前期就开始，所以旧网站很可能要彻底改造才能做RWD。
a只针对几种分辨率进行了优化，断点之间的自动过渡很少。而A则利用现有的桌面网站，保留并优化较小的分辨率，以降低改造成本。
这两种设计思路都是有效的，需要衡量项目中有多少组件，有多复杂，有没有适合所有用户的体验。开发web应用程序时经常使用响应式设计，例如通过自适应开发来构建定制体验。
两种方法各有利弊，但是同时使用会得到什么呢？A+R模型结合了基于单个主要临界点的适应性和响应性方法。
混合布局是为不同终端设备的屏幕分辨率定义布局。在每个布局中，页面元素自动适应窗口调整，百分比和像素的组合是混合的。混合布局可以看作是柔性布局和自适应布局的融合。
适应性布局、柔性布局、混合布局都是响应式布局模式之一。其中，自适应布局的实现成本最低，但扩展性较差。柔性布局和混合布局都是实现响应式布局的理想方式。
很多时候，单一的布局响应是达不到理想效果的，需要多种组合。但原则上要尽量保持简单轻便，统一的逻辑要保持在同一个断点内。否则，过于复杂的页面实现也会影响整体体验和页面性能。
一般情况下，灵活布置适用于一般柱和等截面的布置，而非等多柱结构的布置则需要混合布置。
2)选型
实践中如何考虑判决？
一个是看应用场景，一个是看如何设计一个“有求必应”的方案。简单、轻量级的页面可以直接响应媒体查询。比如博客，小商站等等。当前的CSS框架基本上是响应式的。
但请注意，响应式不仅仅是响应式的布局。简单地对大型电台使用媒体查询是远远不够的。
所以在同一个控制器层上，标识UA，渲染不同版本的模板，组合相应的静态资源，也算是有求必应。开发和维护成本明显增加。
当版本之间的差异很大时，维护成本可能会高得令人无法接受。即使单独做，也要调整架构，后端服务，应用层应用。
根据不同公司的技术特点，很难说调整成本是否可行。对于大站，单独做更清晰，同时用响应式组件解决复用和功能同步的问题。总之，根据场景反应，可以做到多种层次，多种粒度。这是现代web开发的特点。
建议开发响应式电脑网站和响应式手机网站。
响应式布局可能会导致冗余代码更多，对RD的要求也更高，比如如何更好的将图片、改编、UI动画适应各种布局。
大站还是要考虑数据计算和承载的问题，会输出不同的数据到桌面和移动端，减轻压力。
四。实践和技能
首先，我们需要了解几个决议的区别。
PS:原生应用可以查询水平和垂直两个方向的每英寸像素。通常浏览器可以查询一个系统像素对应多少物理像素。设计角度通常需要参考获得的系统分辨率。
以SaaS背景产品为例。
对于基础流量来自网页的产品，需要了解浏览器分辨率的现状，网页上不同屏幕分辨率的比例，以及数据源的统计，如图:
如前所述，在选择适配模式时，设计目标是区分web和pad可共享的设计布局大于手机，web是产品规划中的主要流量来源，而pad是短期的。考虑到技术维护成本和开发成本的平衡，判断需要A+R模式来完成产品的跨端设计。
自适应的方法可以让我们在不同的设备上有不同的体验、内容甚至功能。如果把960px作为主要的适应临界点，根据全局统计信息的定义，我们会得到一些相似性:
左侧可见区域代表整个屏幕小于960px时的具体布局和内容；当整个屏幕大于或等于960像素时，右侧的可视区域代表另一种布局。
在使用响应式技术时，我们可以使用主临界点来创建两种不同的体验场景。在每次体验中，我们可以在可用空空间中定义第二个临界点来调整布局。
通过结合适应性和响应性方法，我们得到了A+R模型。利用自适应技术，我们会致力于体验和功能，做两种不同的场景设计。有了响应式组件，我们可以在上下文中处理UI组件和布局。
这种设计方法需要设计师真正理解他们想要提供的体验，以便定义要遵循的模型。这种模式非常适合那些运行在功能较少或者结构完全不同的小型移动设备上的大型app。正如你所看到的，你的产品将会非常灵活，但同时也会非常复杂。
因为你必须处理不同的代码库和环境，Twitter、脸书和Github将这种模式应用于他们的移动网站。如果你在移动设备上浏览这些网站，你可以根据移动用户的期望来测试它们是如何改变的用户体验。
五、其他辅助手段——电网
网格系统可以帮助我们设计，但不能保证我们的设计。它有很多可能的用途，每个设计师都可以寻找适合自己个人风格的解决方案。对于简化复杂的响应式布局规则，这是一种非常有效的辅助手段。
1.列和插槽
列用于对齐内容。
槽引用相邻列之间的空，将控制页留空，这有助于分隔内容。
2.页边距
边距指的是内容和屏幕边缘之间的空间距。边距宽度定义为一个固定值，它决定了每个屏幕尺寸的最小呼吸空。
3.柱状结构
构成网格的列数称为列结构。
8、12、16和20是响应式布局中一些最常见的列结构。这取决于我们对产品的设计要求。
12列结构相对灵活。还可以通过4-4-4或3-3-3-3文本框排列内容来进一步细分，有些设计系统采用24栏的形式，比如Ant-D。
4.断点
指屏幕大小的具体范围，列结构、列宽、槽宽、边距都取决于断点。
在此范围内，将根据可用的屏幕尺寸重新调整布局，以获得最佳布局视图。
如果较小的屏幕有足够的可用空空间来容纳内容，则列将按比例缩小。如果栏的内容无法在较小的屏幕上显示，该栏将垂直放置图形内容。
5.网格规则
列槽的宽度是以网格为基本单位增减的，所以首先要定义网格的原子单位。网络名人的8分格，指的是设计页面时的8分法则。值得注意的是，列和槽的值尽量是8的倍数，但不一定是8的倍数。
产品中的各种元素都要遵循这个多元原则，不同的设计系统根据自己的需求设定这个规则。比如材质设计用2X网格。
6.流体网格和混合网格
流体网格具有不同宽度、固定槽和固定边距的列。流体网格具有灵活的内容宽度。根据屏幕大小，流体网格中的列可以增长或收缩，以适应可用的空空间。
混合网格有不同的宽度和固定的宽度。在现代布局中，一些元素超出了网格边缘，并与屏幕边缘对齐。页眉、页脚和出血是一些常见的例子。
如果内容宽度大于可用屏幕尺寸，那么固定网格将被转换为适应可用屏幕空的浮动网格，以完全适应内容。
不及物动词结论。
设计需要先于技术方案介入，根据你的产品特点对设计方案进行评估。可用的方法有网格删除、网格规则等。在设计断点规则时，要注意设备的常用系统分辨率。
手机桌面设计和手机桌面设计的区别远不止布局问题。只要有足够的编程，这些差异都可以通过响应式设计来解决。其实你可以认为，一个设计如果不能考虑到两个平台的重大差异，就不能算是一个合格的响应式设计。
但如果真的要处理好所有平台之间的差异，那就回到原点:做两个不同的设计或者用A+R的模式，在找到合适的过程中注重技术创新。
a和B不是一枚硬币的正反面。他们生来就是为了解决同一个问题，是同一个理念的延伸。
本文由@酷家乐用户体验设计原创发布。每个人都是产品经理。未经许可，禁止复制。
来自Unsplash的图像，基于CC0协议。
