學目標：

1. 理解前端開發的基本概念和原理。

- 前端開發的定義和作用

- 前端開發的基本工具和環境

- 前端開發的職責和要求

2. 掌握HTML5標記語言的基本語法、元素和屬性。

- HTML5的發展歷程和版本

- HTML5文檔結構和基本語法規范

- HTML5常用的文本標記、圖像標記、表格標記等

- HTML5的表單元素和相關屬性

3. 掌握CSS3的基本語法、選擇器和常用樣式屬性。

- CSS3的發展歷程和版本

- CSS3的基本語法和選擇器

- CSS3的盒模型、布局和浮動

- CSS3的文本樣式、背景樣式和過渡動畫

4. 理解JavaScript的基本語法、數據類型、條件語句和循環結構。

- JavaScript的基本語法和變量定義

- JavaScript的數據類型和類型轉換

- JavaScript的條件語句和邏輯運算

- JavaScript的循環結構和數組操作

5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。

- DOM的概念和基本原理

- 使用JavaScript獲取和操作HTML元素

- 使用JavaScript創建、修改和刪除HTML元素

- DOM事件的處理和綁定

6. 理解響應式設計的概念和基本原理。

- 響應式設計的定義和作用

- 使用媒體查詢實現頁面布局的適應性

- 使用流式布局和彈性盒子布局實現頁面適配

- 使用響應式圖片等技術提升頁面響應性

大綱精細化教學設計：

第一部分：前端開發基礎

1. 前端開發概述

1.1 什么是前端開發

1.2 前端開發的歷史和發展趨勢

1.3 前端開發的基本工具和環境

2. HTML5基礎

2.1 HTML5的簡介和發展歷程

2.2 HTML5的文檔結構和基本語法規范

2.3 HTML5常用的文本標記、圖像標記、鏈接標記等

2.4 HTML5的表單元素和相關屬性

3. CSS3基礎

3.1 CSS3的簡介和發展歷程

3.2 CSS3的基本語法和選擇器

3.3 CSS3的盒模型、布局和浮動

3.4 CSS3的文本樣式、背景樣式和過渡動畫

4. JavaScript基礎

4.1 JavaScript的簡介和發展歷程

4.2 JavaScript的基本語法和變量定義

4.3 JavaScript的數據類型和類型轉換

4.4 JavaScript的條件語句和邏輯運算

4.5 JavaScript的循環結構和數組操作

第二部分：網頁交互與動態效果

1. DOM操作

1.1 DOM的概念和基本原理

1.2 使用JavaScript獲取和操作HTML元素

1.3 使用JavaScript創建、修改和刪除HTML元素

1.4 DOM事件的處理和綁定

2. 事件處理與表單驗證

2.1 常見的DOM事件類型和觸發條件

2.2 使用JavaScript處理交互事件

2.3 表單驗證的基本原理和實現方法

3. Ajax與數據交互

3.1 Ajax的簡介和發展歷程

3.2 使用JavaScript發送異步請求

3.3 處理服務器返回的數據

第三部分：響應式設計與跨平臺開發

1. 響應式設計概述

1.1 響應式設計的定義和作用

1.2 媒體查詢的基本語法和常用屬性

1.3 使用響應式設計實現網頁適配

2. 移動端開發概述

2.1 移動端開發的特點和挑戰

2.2 使用CSS3實現移動端樣式效果

2.3 使用JavaScript處理移動端交互

3. 跨平臺開發基礎

3.1 常見的跨平臺開發技術和框架

3.2 使用跨平臺開發工具搭建應用

3.3 測試和發布跨平臺應用

通過以上的教學目標和大綱精細化教學設計，學習者將能夠全面掌握前端開發所需的HTML5、CSS3和JavaScript的基礎知識，并能夠應用所學知識實現網頁交互和動態效果，以及具備響應式設計和跨平臺開發的能力。

輯導語：如何為一款產品制定合適的界面規則？隨著產品的迭代更新，作為設計師，則更需要在了解產品特性的情況下、設計出合理且有效的界面布局。本篇文章里，作者就對web產品設計適配選型做出介紹，并提出了他的看法。

一、開篇

現如今，幾乎所有的網頁設計都要進行響應式和自適應設計，才能讓產品能夠覆蓋到更多終端。接手一個產品設計的初期，制定界面適配規則時，你是否也有過如下疑問：

• 寬度單位我是用百分比還是px？還是rem？區別是什么？
• 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、CSS像素？瀏覽器窗口大小和設備大小和分辨率大小區是什么區別？
• 什么是響應式網站，自適應又是什么？兩者有何區別和聯系？
• 百分比寬度布局和流式布局和前者的關系是什么？
• 既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發了一個移動端版？這里面有那些坑需要避開？

二、歷史長廊

在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（Static Layout），也有叫固定布局（Fixed Layout）。

后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。

在當時，大多指的就是寬度自適應布局。

在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞——漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：Gmail和QQmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。

QQmail就是CSS hack的完美體現。你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。

Gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。

互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能。用戶要求不斷提高，網站更加看重的是用戶體驗了。

所以，谷歌式的漸進增強被廣泛認可。結合自適應的思想，出現了響應式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。

描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。

現如今，為何需要考慮多設備的兼顧呢？依然是因為時代發展與生活方式的變遷：

• 即便是PC或Mac用戶，調查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
• 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
• 屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別；
• 結合自身產品用戶訪問瀏覽器分辨率；
• 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。

三、布局方式對比

靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下。

1. 靜態式布局

窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。

2. 自適應布局

用自適應技術（Adaptive），我們可以開發和提供不同的布局，來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。

分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集。

每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小。

當可視窗口改變時，不會出現橫向滾動條，UI、圖片、文字會自動縮放，元素內容、布局、交互方式基本不變。

3. 彈性布局

以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。

4. 流體式布局

屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小。不同于百分比自適應的是，隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。

5. 響應式布局

如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活地去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。

頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、CSS media query的使用等。

狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

6. A+R混合模型布局

1）R和A上的區別

當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。

他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。

R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。

A只在針對幾種分辨率（如320、480、760、960、1200、1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。

兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。

兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。

混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應布局的融合。

自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。

很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。否則頁面實現太過復雜也會影響整體體驗和頁面性能。

一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。

2）選型

如何考慮實踐過程中的判斷呢？

一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。

但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。

于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源，這也算是響應式。開發及維護成本明顯提高。

當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層App化。

根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題。總之，根據場景響應式可以從各種層面、各種粒度上做。這是現代web開發的特點。

建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）。

響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片、適配、UI動畫自適應各種布局。

大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。

四、實踐與技巧

首先，我們需要了解幾種分辨率的差別。

PS：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率。

以一個SaaS類后臺產品為例。

對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：

如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。

自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：

• 左側的可視區代表整個屏幕小于960px時的具體布局和內容；
• 右側的可視區代表整個屏幕大于等于960px時的另一種布局。

在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景。每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。

通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。

這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。

因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

五、其他輔助手段——柵格

柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于對齊內容。

其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白，有助于分隔內容。

2. 頁面邊距（Side Margins）

頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。

3. 列結構

用于組成柵格的列數稱為列結構。

8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。

12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D。

4. 斷點

是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。

在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。

5. 網格規則

列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位。“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。

產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。

6. 流體柵格與混合柵格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。

六、結語

設計需在技術方案前介入，根據你的產品特點，進行設計方案評估。可借助的手段有刪格、網格規則等。設計斷點規則時，需關注設備的常見系統分辨率。

移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。

但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。

A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。

作者：神樂、沙拉；公眾號：酷家樂用戶體驗設計

本文由 @酷家樂用戶體驗設計 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議