編輯導語:隨著需求的增多,越來越多的產品都有多適配的需求,那麼產品面臨多適配需求時的設計思路是怎樣的呢?本篇文章作者為你解答,一起來學習一下吧,希望對你有幫助。
作為一個 B 端設計師,你可能會發現越來越多的產品面臨多端適配的需求。設計面對適配於多端、多設備的需求時要考慮哪些內容?會有怎樣的設計思路?
本文會重點介紹兩種思路方法:
- 響應式設計(Responsive Design);
- 自適應設計(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協議。