中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、PART1響應式設計

1. Responsive Design

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

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

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

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

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

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

2. 設計案例

1）案例1 SAP Fiori Design 的柵格

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

2）案例2 MaterialDesign 的斷點

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

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

3. 方法特點

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

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

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

二、PART2自適應設計

1. Adaptive Design

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

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

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

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

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

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

這些元素的特征是：

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

2. 案例分析

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

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

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

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

2）案例2 語雀編輯器

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

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

3. 方法特點

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

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

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

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

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