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

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

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

1. 響應式設計（Responsive Design）；
2. 自适應設計（Adaptive Design）。

一、PART1響應式設計

1. Responsive Design

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

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

所有頁面的由斷點（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 MaterialDesign 的斷點

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

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

3. 方法特點

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

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

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

二、PART2自适應設計

1. Adaptive Design

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

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

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

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

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

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

這些元素的特征是：

• 所占頁面面積比重較大，尤其是寬度較寬（比如列表）；
• 在移動端高頻使用的操作（比如導航）；
• 與輸入、上傳相關能激發鍵盤功能（比如彈出的鍵盤會對界面布局造成影響）；
• 分享、掃碼等會與其他 App 産生交集的相關的功能（比如移動端屏幕上的二維碼隻能被識别，不能被掃描）；
• 與移動端平台基礎規範相關的功能 （比如按鈕的尺寸和位置）；
• 在移動端不具備的功能（比如鼠标懸停後的提示内容）；
• 頁面跳轉相關的提示和功能等等。

2. 案例分析

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

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

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

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

2）案例2 語雀編輯器

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

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

3. 方法特點

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

• 功能模塊的優先級；
• 信息展示的優先級；
• 用戶核心路徑及操作頻率；
• 用戶核心路徑中的痛點和卡點；
• 不同平台的設計标準和範式；
• 組件形式演變的不同狀态；
• 多語言情況下的方案布局與呈現；
• 本地化用戶的操作習慣與界面呈現；
• Android 和 iOS 系統的用戶操作習慣等。

作者：元堯；長弓小子。

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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部