编导：随着需求的增加，越来越多的产品有多少适应性需求，那么产品面对多少适应性需求时的设计思路如何呢？ 这篇文章的作者会为你解答。 一起学习吧。 我希望能帮到你。
作为b侧设计师，你可能会发现越来越多的产品面临着多匹配的需求。 设计适合多功能、多设备时，需要考虑什么？ 有什么样的设计构想？
本文重点介绍两种思路。
响应设计( Responsive Design )； 自适应设计。
第1部分响应设计1 .响应设计( Responsive Design )专注于网格布局，页面应用网格可以支持不同的屏幕大小和方向，内容
响应网格的布局结构由三个基本元素组成：列、间距和边距。
所有页面上的断点( Breakpoints )提供统一的布局控制。 也就是说，当屏幕达到某个断点的值时，页面的排版会发生变化。 画面越宽，列的宽度和间隔的数值就越大。
理想情况下，可以使每个组件严格符合网格标准，使每列的边缘对齐，并给出断点处的变化规律。
目前，国外普遍认为12列结构的网格是最灵活实用的。 还可以分解成4-4-4或3-3-3-3或6-6等大小的容器。 有些产品采用16列、20列或24列布局方式。
如果页面上有侧边栏，也可以将右半部分设置为12行进行布局。
2 .设计案例1 )案例1 SAP Fiori Design网格
Fiori Design响应网格将UI元素放置在12列流布局中。 元素根据可用屏幕大小更改显示的列数，以提供大、中、小屏幕(如桌面、平板电脑和手机)的灵活布局和换行符。
2 )案例2材料设计断点
Material Design3更新了四个响应时间断点： 600、905、1240和1440。 当页面宽度达到这些数值时，页面的网格数量和布局会发生变化。
目前，为了保证PC、Pad和手机设备上的可读性，大多数产品都采用了3到4个断点。
3 .使用方法的特征响应设计进行多拟合的特征在于：
设计师和开发人员只要在组件中添加网格布局的规则和定义，就无需重复生产不同页面宽度的设计稿
断点的数量没有绝对的标准。 数量越多，拖动页面看到的变化效果越顺畅，开发成本也越高。
二. PART2自适应设计1 .自适应设计( Adaptive Design )是指设计者针对特定的设备调整页面的样式和布局，以调整设备及其用户的设备
自适应设计更多地吸取了用户使用设备的习惯和方法，需要设计师具备多设备的设计经验和共鸣能力。
举个例子，Airbb海外版本的官网、电脑界面、导航均位于顶端，功能信息广泛； 另一方面，在手机设备上考虑到用户的操作习惯，主导航在页面下方，只剩下3个主要操作。
响应式( Responsive )和适应)这两种想法并不矛盾，而是相辅相成的。
响应设计保证了产品最基本的可读性，而自适应设计用于提高产品的可读性和易用性。
可以说自适应设计是进行响应性设计的页面的极端情况下的最优解。 需要注意的是，有些设计要素需要采用自适应设计来满足多匹配的需要。
这些要素的特征如下。
占页面面积的比例较大，特别宽(如列表)； 在移动侧高频使用操作(例如导航)； 与输入、上传相关联地提取键盘的功能(例如，弹出的键盘会影响接口布局)； 共享、扫描等与其他APP交叉的相关功能(例如，移动终端的屏幕上的二维码无法被识别，也无法被扫描)； 与移动平台基本规范相关的功能(如按钮大小和位置)；移动端不具备的功能(如鼠标悬停后的提示内容)； 有关跳页的提示和功能等。
2 .案例研究1 )案例1 SAP Fiori Design的表格设计
Fiori Design会在web端表格中显示所有筛选条件。 由于有足够的空间，所以可以并排展开表中各列的内容。
如果在Pad端显示同一界面，则各可操作组件的面积会变大，用户可以通过触摸进行交互。 此外，根据设备的宽度，过滤条件会换行，列表中的几列会显示为换行符。
如果手机上显示相同的界面，则过滤条件字段将折叠，大多数信息将重新排序并垂直显示。
2 )案例双语雀编辑器
在桌面设备上，“麻雀编辑器”功能列表将并排展开在屏幕的上边缘。
在移动终端上，主要功能操作区域位于屏幕的下半部分，用户输入时可以统一操作。
3 .方法的特点使用自适应设计进行多匹配的特点是产品的使用使体验更友好，但其设计和开发的成本投入也更高。 作为设计师，至少要掌握以下内容。
功能模块优先级信息展示优先级用户核心路径和操作频率用户核心路径内痛点和卡点不同平台设计标准和范式组件形式多变多种状态多语言场景布局和呈现本地化用户操作习惯和行为方式Android和iOS系统的用户操作习惯等。 作者：元尧； 微信“长弓混蛋”。
这篇文章由@元尧原创，每个人都是产品经理。 未经许可禁止转载。
标题来自Unsplash，基于CC0协议。
