前言

隨著互聯網的不斷發展，設計師和開發人員之間的界限越來越模糊。在過去，設計師只需要關注設計方面的工作，而開發人員只需要關注編程方面的工作。但現在，設計師需要具備一定的開發知識，以便更好地與開發人員合作，共同完成項目。接下來講一些基礎知識拆分為車架/外殼/動力系統進行講解，希望通過具象化的策略幫助各位同行理解前端知識。

更多前端知識：

一、設計師理解開發知識的難點

設計師可能不熟悉開發中使用的技術術語和概念，例如編程語言、技術框架、數據庫等。這些術語和概念對于開發人員來說非常熟悉，但對于設計師來說可能比較陌生，需要花費一定的時間和精力去理解。

設計師可能對于某些技術實現的復雜性感到困惑或者無從下手。例如，設計師可能不了解如何使用代碼實現某個功能，或者不知道如何集成不同的技術框架。這些問題需要通過學習和實踐來逐步解決。

設計師可能無法理解開發人員使用的術語和技術，而開發人員可能難以理解設計師的想法和需求。在這種情況下，需要通過積極的溝通和協作來解決問題。

很多時候無法理解某些技術在實際應用中的優缺點，以及如何解決實際問題。在這種情況下，需要通過實踐和學習來積累經驗，并且與開發人員保持合作，共同解決問題。 在實際工作中，設計師需要不斷學習和掌握開發知識，以便更好地與開發人員協作，完成項目的開發和實現。同時，設計師也需要保持開放的心態和積極的態度，不斷學習和探索，提高自己的專業素養和實踐能力。

二、基礎認知

常見的 WEB 端的基礎開發分為 HTML，CSS 以及 JavaScript：

1. HTML：方便對網頁的結構進行調整，這里具象化為車架還有底盤。
2. CSS：需要了解網頁樣式，例如：字體大小，顏色等等。這里具象為車。
3. JavaScript 基礎：UI 設計師需要了解 JavaScript 的基本語法和常用 API，以便在設計過程中實現一些簡單的交互效果和動畫效果。這里比喻為發動機和傳動系統。

三、車架+底盤

HTML 是 HyperText Markup Language（超文本標記語言）的縮寫，是一種用于創建網頁的標準標記語言。HTML 使用一系列標記（tag）來描述網頁中的各種元素，例如文本、圖像、鏈接、表格等等，通過瀏覽器解析這些標記，最終呈現出整個網頁的樣式和內容。HTML 標記通常由一對尖括號（< >）和一個標記名組成，名通常表示標記的類型，例如表示一個 HTML 文檔的開始，表示文檔的頭部，表示文檔的主體部分。

除了標記名之外，標記還可以包含一些屬性，用于描述標記的一些特性和屬性。例如，標記用于插入圖像，可以包含 src（圖像的 URL）、alt（圖像的說明文字）等屬性。HTML 標記語言非常強大和靈活，可以通過各種標記和屬性來實現各種不同的功能和效果，例如創建表格、列表、鏈接、表單等等。同時，HTML 也是一門相對容易學習的編程語言，可以為初學者提供一個良好的入門門檻，幫助他們了解網頁開發的基礎知識和技能。

三、車身

CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫，是一種用于描述網頁樣式的語言。CSS 可以為 HTML 文檔中的各種元素（包括文本、圖像、背景等）定義不同的樣式和布局，從而改變它們在瀏覽器中的外觀和行為。CSS 中的樣式通常由一對花括號（{ }）和一些屬性-值對組成，例如：

plaintextCopy code
h1 { color: red; font-size: 24px; }

這個樣式表示將所有的 h1 標題顏色設為紅色，字體大小為 24 像素。其中，color 和 font-size 是樣式屬性，red 和 24px 則是對應屬性的值。這些屬性和值的組合可以控制元素的字體、顏色、邊框、內邊距、外邊距、定位等等方面的樣式。CSS 還支持選擇器的使用，可以根據元素的標簽名、類名、ID 等屬性來選擇特定的元素，并對其應用樣式。例如：

plaintextCopy code
p { color: blue; }

這個樣式表示將所有的 p 段落文字顏色設為藍色。而如果想僅對 class 為 content 的元素應用樣式，可以這樣寫：

plaintextCopy code
.content { font-size: 16px; }

CSS 的強大和靈活性使得它成為現代網頁設計中不可或缺的一部分。通過 CSS，設計師和開發人員可以輕松地控制網頁中各個元素的外觀和行為，從而實現豐富多樣的視覺效果和交互特性。

除了基礎的樣式，還有柵格系統和開發的布局方式。

四、常規的網頁布局

1. 盒模型布局：

基于盒模型的布局方式，即將網頁上的每個元素看作一個盒子，通過設置盒子的寬、高、內邊距、外邊距、邊框等屬性，來控制元素在網頁上的布局。

2. 浮動布局：

通過設置元素的浮動屬性，使元素脫離文檔流，從而實現多列布局等效果。

3. 定位布局：

通過設置元素的定位屬性，來控制元素在網頁上的位置，常用的有相對定位、絕對定位和固定定位等。

4. 彈性布局：

基于 CSS3 彈性盒子布局模型，通過設置元素的彈性屬性，來實現網頁的自適應布局。

5. 網格布局：

基于 CSS3 網格布局模型，通過設置網格列數和行數，以及各個網格元素的位置和大小，來實現網頁的復雜布局效果。

五、柵格欄

前端中的柵格布局可以通過使用 CSS 框架來實現，比如 Bootstrap、Foundation 等。這些框架都提供了柵格系統的封裝，使得開發者可以通過簡單的 HTML 和 CSS 代碼，實現網頁的柵格布局。 以 Bootstrap 為例，它的柵格系統基于一個 12 列的網格布局，可以通過在 HTML 中使用<div>

元素和一些預定義的類來創建柵格布局。具體實現步驟如下：

1. 在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。
2. 在 HTML 文件中使用<div>元素創建需要的柵格布局，將每一行分成 12 列。
3. 根據需要，可以在<div>元素中嵌套其他元素，實現更復雜的布局。

在這個例子中，我們使用了.container 來創建一個容器，.row 來表示一行，.col-6 和.col-3 來表示每個列的寬度。.col-6 表示該列占據 6 個網格，即柵格系統的 1/2 寬度，.col-3 表示該列占據 3 個網格，即柵格系統的 1/4 寬度。

根據需要，可以在<div>元素中嵌套其他元素，實現更復雜的布局。

在這個例子中，我們在.col-6 元素中嵌套了一個.card 元素和一個.alert 元素，實現了一個簡單的柵格布局。 通過使用 Bootstrap 的柵格系統，開發者可以快速實現網頁的柵格布局，提高開發效率。

六、發動機和傳動系統

JavaScript 是一種基于對象和事件驅動的腳本語言，用于在網頁中添加動態和交互性。它是一種解釋型語言，可以直接在瀏覽器中運行，而不需要編譯成機器碼。JavaScript 可以用于處理網頁中的各種事件和數據，例如鼠標點擊、表單提交、頁面加載等等，從而實現動態效果和交互特性。JavaScript 最初是由 Netscape 公司開發的，最初被稱為 LiveScript，后來改名為 JavaScript?，F在，JavaScript 已經成為 Web 前端開發的核心語言之一，被廣泛用于網頁交互、動態效果、數據處理等方面。JavaScript 是一種靈活、易學、易用的語言，它支持面向對象的編程風格，同時也支持函數式編程風格。JavaScript 可以與 HTML 和 CSS 無縫集成，通過 DOM（文檔對象模型）和 BOM（瀏覽器對象模型）等 API，可以訪問和操作網頁中的各種元素和屬性。JavaScript 還有很多優秀的框架和庫，例如 jQuery、React、Vue.js 等，可以幫助開發人員更加高效地完成各種任務。同時，JavaScript 也在不斷發展和改進，例如 ES6 和之后的版本，引入了許多新的語法和特性，使得 JavaScript 更加強大和易用。

其中動畫是一個比較難實現的點。

七、動畫

動畫實現方案有以下

1. 使用 CSS3 動畫：CSS3 提供了豐富的動畫效果，通過設置 animation 屬性和關鍵幀，可以實現復雜的動畫效果。在 JavaScript 中，可以通過操作 CSS 樣式來控制 CSS3 動畫的播放。
2. 使用 JavaScript 定時器：JavaScript 提供了 setInterval()和 setTimeout()兩個定時器函數，可以通過這兩個函數來控制動畫的播放。例如，可以使用 setInterval()函數來定時更新元素的位置從而實現動畫效果。
3. 使用 JavaScript 動畫庫：JavaScript 動畫庫如 GreenSock、Velocity.js 等提供了豐富的 API 和動畫效果，可以幫助我們更方便地實現動畫效果。

八、如何更好的交付

設計稿的規范性：設計稿需要規范，包括設計稿的尺寸、顏色規范、字體規范、間距規范等。這樣可以確保開發人員能夠準確地理解設計稿并按照設計要求實現。

設計稿的可讀性：設計稿需要具有良好的可讀性，包括標注清晰的頁面布局、交互效果、按鈕狀態、輸入框樣式等。這樣可以幫助開發人員更快地理解設計師的意圖并快速地將設計稿轉化成代碼。

設計稿的標注：設計稿需要提供清晰的標注，包括注釋、樣式名稱、字體大小、顏色等。這樣可以幫助開發人員更好地理解設計師的意圖，減少交流成本。

設計稿的規范格式：設計稿需要按照一定的規范格式進行交付，包括文件格式、圖層命名規范、圖片大小等。這樣可以使開發人員更方便地進行開發，并減少因為格式問題產生的交流成本。

設計稿的版本控制：設計師需要對設計稿進行版本控制，確保開發人員使用的是最新的設計稿，以避免因為設計稿版本問題導致的開發延誤。

總結

當設計師懂得開發知識時，他們可以更好地理解開發人員，更好地協調項目進度，從而提高項目的質量，降低項目的成本。寫出來希望對同行有所幫助，如果有哪里的理解或者是代碼寫錯了，請留言指正。