UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點 - 網頁設計, 網站設計, 網頁方案, Website Design, 網絡推廣

2020年3月Google全面落實「行動優先檢索」(Mobile-First Indexing)計劃,並表示Google會將行動版網站作為判斷網站搜索結果頁面排名的標準。與僅有PC版的網站而言,同時擁有PC版和行動版的網站將為更容易獲得搜索結果頁面更好的排名,也會更容易曝光於用戶眼前。這意味着,若網站沒有採用響應式網頁設計技術,將會影響網站的SEO成效

本文將分享有關響應式網頁設計中非常重要但又容易忽略的知識點,快速網頁設計從此不是夢。

UI設計知識點一:

響應式網頁設計的通用設計方案

設計師在具體業務中可針對不同情況,採用以下通用設計方案。這些設計方案除了單獨應用外,有時也可多種模式結合使用。

① Resize——調整大小

調整大小是響應式網頁設計中最基礎的設計模式,通常有等比縮放、固定高度,以及在不同尺寸按不同比例規格縮放這三種形式。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

② Reposition——重新定位

重新定位是指改變UI元素的相對位置,以充分利用不同尺寸的空間,如Material全局浮動按鈕與浮動下拉菜單,以Reposition的形式分別在PC端與移動端處於不同位置。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

③ Reflow——重新排列

重新排列,常見於內容彈性佈局,通常是基於某種排列規則自動向下折行,並結合調整大小與柵格系統應用於響應式佈局,如Carbon的Fluid Grid。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

④ Show/Hide——顯示/隱藏

基於熒屏空間、設備特性,以及某些特定情況對UI元素進行顯示或隱藏的方式,如:麵包屑導航。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

⑤ Replace——替換

替換是指針對不同尺寸的熒屏採用不同形態的組件,常用於對具體組件作針對性響應設計中。但進行UI設計時需注意用戶面對組件變化時的認知成本。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

⑥ Re-architect——重新構建

重新構建是指拆疊或拆分信息架構,這種模式在Web UI設計中較難實現,常出現於一些Native App的場景。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

UI設計知識點二:

響應式設計的基礎規則

設計師在實現具體設計方案時,通常會基於以下一系列基礎規則進行,如:

1. Rem——相對尺寸單位

相對尺寸單位對響應式網頁設計有着非常重要的實施價值,能使產品在保持信息節奏的情況下,根據不同情況進行等比例縮放內容,使得UI設計中的內容能更方便地調整密度,甚至還可配合Media Queries解決部分跨設備的尺寸適配問題,且幾乎沒有前端成本。

2. Breakpoints——熒屏斷點

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

熒屏斷點是響應式設計的基礎依據,通常都是基於Phone、Tablet、Desktop等維度來設計(包括考慮移動設備的橫屏豎屏情況)。一般來說,在滿足自己需求的前提下,熒屏斷點不需要太多,根據自身定位及設備覆蓋情況來制定會是更科學的方法之一。

3. Flex Layout——彈性布局

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

Flex Layout是CSS3提供的強大佈局功能,以更自然更具語義化的角度實現界面元素的自適應。一般來說,應用於Web設計體系的組件代碼基本上都是採用Flex Layout,而在響應式設計中,Flex Layout通常結合Breakpoints 使用,讓界面做一個更平滑的過渡。

4. Grid System——柵格系統

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

柵格系統是所有網頁設計體系中必備的,為界面佈局提供一致性和成本便利。傳統柵格系統在響應式網頁設計中主要結合Breakpoints 與一些 Responsive Token 實現,通過UI元素制定不同柵格數決定它們分別在不同熒屏下佔多少列,部分設計體系還會提供可見性相關的Token,控制界面元素在不同屏幕的顯示與隱藏。

現在柵格系統則更多與Flex Layout結合的方式,基於一些簡單的規則設置,在不需要特定響應式場景中不再需要指定繁瑣的Token,同時還能滿足大部分高頻且同通用的情況,在某程度上減低成本。

UI設計知識點三:

響應式網頁設計的組件應用

除了同樣的響應式基礎規則外,設計體系在具體組件中的響應方案也有許多值得挖掘的地方,下面就以兩個典型的應用情況來簡單說說:

1) 框架

幾乎所有響應式設計體系都會提供框架響應式方案,如Alta將界面框架分為四塊,並以Off-Canvas 和 Reposition 兩種方式在不同尺寸的熒屏中顯示或隱藏,以及通過特定方式展開或呼出。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

大多情況下,設計體系通過對框架的定義,以及控制不同部分基於什麼樣的模式響應熒屏尺寸來實施對框架的響應式設計。

2) 組件

Fluent和Material在設計文檔中更多基於基礎的網格、佈局、設計模式來闡述通用性相應規則,因此它們的響應式設計有非常好的延續性,而組件的響應式方案也基本遵循這些規則;Fiori 和Lightning 在通用性響應式設計模式上的定義並沒有那麼全面,反而更側重於在組件層面上,對所有組件都考慮針對性的 Responsive 或 Adaptive方案。

UI設計基礎知識:分享響應式網頁設計中重要且容易忽略的知識點
UI設計基礎知識

可見,在一個完善的設計體系中,考慮到每個組件在不同設備及熒屏適配是非常有必要的。如果我們能為UI設計中的每個組件都考慮不同場景的響應式,將會為用戶提供更精細化的操作體驗。

以上就是有關響應式網頁設計的基礎知識點,這些知識點看似簡單,實則需要注意的細節不少。只要掌握這些細節並融入到UI設計中,便能製作出滿足搜尋器SEO要求,同時給用戶提供流暢操作體驗的網站。


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk