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

作為一個 B 端設(shè)計師，你可能會發(fā)現(xiàn)越來越多的產(chǎn)品面臨多端適配的需求。設(shè)計面對適配于多端、多設(shè)備的需求時要考慮哪些內(nèi)容？會有怎樣的設(shè)計思路？

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

1. 響應式設(shè)計（Responsive Design）；
2. 自適應設(shè)計（Adaptive Design）。

一、PART1響應式設(shè)計

1. Responsive Design

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

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

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

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

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

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

2. 設(shè)計案例

1）案例1 SAP Fiori Design 的柵格

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

2）案例2 MaterialDesign 的斷點

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

目前大部分產(chǎn)品會采用 3-4 個斷點，以保證在 PC、Pad 和手機設(shè)備上都具備易讀性。

3. 方法特點

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

設(shè)計師和開發(fā)如果為組件加上柵格布局的規(guī)則和定義，就不需要重復產(chǎn)出不同頁面寬度的設(shè)計稿；

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

二、PART2自適應設(shè)計

1. Adaptive Design

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

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

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

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

響應式設(shè)計可以保證產(chǎn)品最基本的可讀性，自適應設(shè)計則用于提升產(chǎn)品的易讀性和易用性。

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

這些元素的特征是：

• 所占頁面面積比重較大，尤其是寬度較寬（比如列表）；
• 在移動端高頻使用的操作（比如導航）；
• 與輸入、上傳相關(guān)能激發(fā)鍵盤功能（比如彈出的鍵盤會對界面布局造成影響）；
• 分享、掃碼等會與其他 App 產(chǎn)生交集的相關(guān)的功能（比如移動端屏幕上的二維碼只能被識別，不能被掃描）；
• 與移動端平臺基礎(chǔ)規(guī)范相關(guān)的功能 （比如按鈕的尺寸和位置）；
• 在移動端不具備的功能（比如鼠標懸停后的提示內(nèi)容）；
• 頁面跳轉(zhuǎn)相關(guān)的提示和功能等等。

2. 案例分析

1）案例1 SAP Fiori Design 的表格設(shè)計

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

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

而相同的界面在手機上呈現(xiàn)時，過濾篩選條件字段被折疊，大部分信息則被重新排布，縱向展示：

2）案例2 語雀編輯器

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

而在移動端，主要功能操作區(qū)則位于屏幕下半部分靠近鍵盤，便于用戶輸入時統(tǒng)一操作：

3. 方法特點

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

• 功能模塊的優(yōu)先級；
• 信息展示的優(yōu)先級；
• 用戶核心路徑及操作頻率；
• 用戶核心路徑中的痛點和卡點；
• 不同平臺的設(shè)計標準和范式；
• 組件形式演變的不同狀態(tài)；
• 多語言情況下的方案布局與呈現(xiàn)；
• 本地化用戶的操作習慣與界面呈現(xiàn)；
• Android 和 iOS 系統(tǒng)的用戶操作習慣等。

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

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。