編輯導語：隨著需求的增多，越來越多的產品都有多適配的需求，那麼產品面臨多適配需求時的設計思路是怎樣的呢？本篇文章作者為你解答，一起來學習一下吧，希望對你有幫助。

作為一個 B 端設計師，你可能會發現越來越多的產品面臨多端適配的需求。設計面對適配於多端、多設備的需求時要考慮哪些內容？會有怎樣的設計思路？

本文會重點介紹兩種思路方法：

一、PART1響應式設計

1. Responsive Design

響應式設計（Responsive Design）的重點是柵格布局，頁面應用柵格後可適應不同的屏幕尺寸和方向，確保內容的可讀性。

響應式柵格布局結構是由列（column）、間距（gutter）和邊距（margin）這三個基本元素構成的：

所有頁面的由斷點（Breakpoints）進行統一的布局控制，即屏幕到達某一個斷點數值時，頁面的排版就會發生變化；屏幕越寬，列的寬度和間距的數值就越大。

理想狀態下，我們可以將每一個組件都嚴格按照柵格標準，對齊每一列的邊緣，並賦予其在斷點中的變化規律。

目前國外普遍認為12 列結構的柵格最為靈活實用。它可以進一步分解為 4-4-4 或 3-3-3-3 或 6-6 等大小的容器中。也有的產品會採用 16 列、20 列或 24 列的布局方式：

當頁面有側邊欄（側導航）時，也可以將右半部分設置為 12 列進行布局：

1）案例1 SAP Fiori Design 的柵格

Fiori Design 響應式網格將 UI 元素放置在 12 列流布局中。元素可以根據可用的屏幕大小顯更改所占列的數量，實現桌面、平板、手機等大、中、小屏幕的靈活布局和換行：

2）案例2 MaterialDesign 的斷點

Material Design3 更新了 4 個響應式斷點，分別是 600、905、1240、1440，當頁面寬度到達這幾個數值的時候，頁面的中的柵格數量和布局都會發生變化：

目前大部分產品會採用 3-4 個斷點，以保證在 PC、Pad 和手機設備上都具備易讀性。

使用響應式設計（Responsive Design）做多端適配的特點是：

設計師和開發如果為組件加上柵格布局的規則和定義，就不需要重複產出不同頁面寬度的設計稿；

斷點的數量並沒有絕對標準，數量越多，拖拽頁面看到的變化效果就越流暢，開發的成本也會越高。

自適應設計（Adaptive Design）是指設計根據特定設備調整頁面樣式和布局，使頁面適應設備和在該設備上的用戶操作習慣。

自適應設計更多的融入了用戶在使用設備時的習慣和方式，需要設計師具備多端設備的設計經驗和共情能力。

舉個例子，Airbb 海外版本的官網，在電腦上看到的界面，導航位於頂部，功能信息鋪開；而在手機設備上則考慮到了用戶的操作習慣，主導航位於頁面下方，並只保留了三個主要操作。

響應式（Responsive）和自適應（Adaptive）兩套思路並不矛盾，二者相輔相成。

響應式設計可以保證產品最基本的可讀性，自適應設計則用於提升產品的易讀性和易用性。

可以說，自適應設計是頁面在做響應式設計的極端情況下的最優解。需要注意的是，有一部分設計元素是必須採用自適應設計來完成多端適配的需求的。

這些元素的特徵是：

1）案例1 SAP Fiori Design 的表格設計

Fiori Design 在 web 端表格會顯示所有的過濾篩選條件，由於空間充足，表格中的每一列內容都可以平鋪展開：

而同樣的界面在Pad 端呈現時，會將每個可操控組件的面積增大，方便用戶通過觸摸進行交互。同時受到設備寬度限制，過濾篩選條件會折行排布，列表中的一些列會被折行展示：

而相同的界面在手機上呈現時，過濾篩選條件欄位被摺疊，大部分信息則被重新排布，縱向展示：

2）案例2 語雀編輯器

在桌面設備上，語雀編輯器的功能列表在屏幕上端平鋪展開：

而在移動端，主要功能操作區則位於屏幕下半部分靠近鍵盤，便於用戶輸入時統一操作：

使用自適應設計（Adaptive Design）做多端適配的特點是：產品使用會使體驗更加友好，但其設計和開發的成本投入也更高。而作為設計師至少還要掌握以下內容：

作者：元堯；微信公眾號：長弓小子。

本文由@ 元堯原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。