轉自優設，超多乾貨！設計師和前端都需要了解的知識點大全

04-19

文章開頭特別想吐槽一下優設沒有登錄和收藏功能，害的轉載累~

設計與前端的關係比較緊密，如何在日常工作中更加高效的進行合作，一直是雙方共同追求的目標。高效的合作方式，應該是雙方具備專業上的共識、能進行有效的溝通、以及對效率工具的運用。

專業共識

這裡的專業共識是指設計師和前端都需了解的知識點，雙方在這些知識點上達成共識，有助於能更加暢通無阻的進行溝通交流。

一. 設計基礎

尺寸、字體、排版、色彩、布局、動畫。

1. 尺寸

一個網頁的尺寸設置與屏幕解析度和瀏覽器相關，我們不可能滿足所有用戶的最佳尺寸，但我們能做的是讓絕大多數用戶感覺是最佳的。

我們可以通過統計分析工具獲取用戶屏幕解析度數據，從而為設計提供參考。例如使用Google Analytics 來獲取用戶屏幕解析度數據。

目前常見頁面尺寸

PC 端：960px / 980px / 1000px / 1190px / 1200px。

手機端：750px。

移動端適配

移動端可根據業務需求和產品特點選擇響應式適配，還是獨立移動版設計，對於頁面結構和功能簡單的站點，適用響應式，對於大型業務複雜的站點，移動端建議獨立版本設計。移動端字體大小使用 rem 單位，以適配不同手機解析度，保持整體縮放。移動端適配原則：文字流式、控制項彈性、圖片等比縮放。

Retina 屏適配

設計師將 logo、icon、固定點陣圖片等圖片元素生成 2 倍大小提供給前端，前端利用 Media Query 實現 Retina 高清屏適配。

2. 字體

進行跨平台的字體設定，力求在各個操作系統下都有最佳展示效果。

字體家族

中文字體：PingFang SC（iOS 優先）、Hiragino Sans GB（備用字體）、Microsoft YaHei（次級備用字體）。

英文字體：Helvetica Neue（優先字體）、Helvetica（備用字體）、Arial（次級備用字體）。

CSS Fonts

font-family:"Helvetica Neue"、Helvetica,"PingFang SC"、"Hiragino Sans GB」、"Microsoft YaHei"、"微軟雅黑"、Arial、sans-serif。

字體使用規範

設定字體使用規範，如主標題、次標題、小標題、正文、輔助文字、失效文字、鏈接文字等字型大小、顏色、樣式等。

補充

字型大小不得小於 12px，標準 icon 可轉成字體圖標，特殊字體可以使用 WebFont。

3. 排版

注意行高和段落、標點和空格、對齊、文案長度、層級引導。

行高和段落

行高默認為字型大小的 1.5 倍。段落間距一般為字型大小的一倍寬。

CSS 設定：

.paragraph {line-height:1.5;}.paragraph p {margin:1em 0;}

PS 設定：

標點和空格

? 使用全形中文標點。

? 遇到完整的英文整句、特殊名詞，其內容使用半形標點。

? 數字使用半形字元。

? 不重複使用標點符號。

? 中文和英文間需要空格。

? 數字與單位之間需要增加空格。例外：度、百分比與數字之間不需要增加空格。

? 中文鏈接之間增加空格。

對齊

? 中文/英文居左對齊。

? 數字/小數點對齊。

? 冒號對齊。

層級引導

使用對比手法區分信息層次感，讓用戶第一眼獲取所需信息。

4. 色彩

設計中對色彩的運用首要應考慮到品牌層面的表達，另外很重要的一點是色彩的運用應達到信息傳遞，動作指引，交互反饋，或是強化和凸現某一個元素的目的。任何顏色的選取和使用應該是有意義的。

色彩和交互

在交互行為中需對色彩做變化時，建議採取在顏色上添加黑色或者白色並按照 n+5% 的規律遞增的方式來實現。以下圖為例，當滑鼠 hover 某個特定元素，就視為浮起，對應顏色就相應增加白色疊加，相反點擊的行為可以理解為按下去，在顏色上就相應的增加黑色的疊加。

5. 布局

在布局時遵循尺寸規則、交互和視覺原則，建議使用柵格系統進行布局。

柵格系統

最常見的是 12 列柵格系統，例如 Bootstrap 的柵格系統，支持將一行分成 1 列、2 列、3 列、4 列、6 列等，並提供了強大的響應式布局方案。

柵格系統好文：《新手科普文！每個設計師都該懂的柵格系統基礎六要素》

6. 動畫

設計需了解一些常見動畫效果、實現手法、和 js 動效庫，例如：漸隱、縮放、移動、伸縮、搖擺等，便於和前端溝通。

進階好文推薦：

《騰訊超全乾貨！如何讓你的動畫更自然？》《技術乾貨文！深聊界面設計中的動畫原理》《成為懂技術的設計師！教你如何讓界面動畫自然流暢》

二. 十大原則

親密性、對齊、對比、重複、直接了當、足不出戶、簡化交互、提供邀請、巧用過渡、即時反應。

1. 親密性

如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元。反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

縱向設定小、中、大三類間距，它們的關係 Y=10+10*N，橫向間距視具體情況而定。

2. 對齊

文案類對齊

如果頁面的欄位或段落較短、較散時，需要確定一個統一的視覺起點，一般文案左對齊。

表單類對齊

冒號對齊（右對齊）能讓內容鎖定在一定範圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。

數字類對齊

為了快速對比數值大小，建議所有數值取相同有效位數，並且右對齊。

進階版的對齊方法：《基礎小科普！聊聊界面中常用的對齊形式》

3. 對比

主次關係對比

為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。

總分關係對比

通過調整排版、字體、大小等方式來突出層次感，區分總分關係，使得頁面更具張力和節奏感。

狀態關係對比

通過改變顏色、增加輔助形狀等方法來實現狀態關係的對比，以便用戶更好的區分信息。常見類型有「靜態對比」、「動態對比」。

看完這篇你絕對能用好「對比原則」：《設計基礎功！幫你徹底掌握設計四大原則中的對比原則》

進階版的對比方法：《實例教學！利用「對比原則」做出搶眼設計的20個方法》

4. 重複

相同的元素在整個界面中不斷重複，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。

重複元素可以是一條粗線、一種線框，某種相同的顏色、設計要素、設計風格，某種格式、空間關係等。

5. 直截了當

需要在哪裡輸出，就要允許在哪裡輸入，不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現編輯。常見方法有單欄位行內編輯、多欄位行內編輯、直接拖放、直接選擇等。

單欄位行內編輯

當「易讀性」遠比「易編輯性」重要時，可以使用「單擊編輯」。當「易讀性」為主，同時又要突出操作行的「易編輯性」時，可使用「文字鏈/圖標編輯」。

多欄位行內編輯

編輯模式在不破壞整體性的前提下，可擴大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。

6. 足不出戶

能在這個頁面解決的問題，就不要去其它頁面解決。

覆蓋層

二次確認覆蓋層：避免濫用 Modal 進行二次確認，應該勇敢的讓用戶去嘗試，給用戶機會「撤消」即可。

嵌入層

列表嵌入層：在列表中，顯示某條列表項的詳情信息，保持上下文不中斷。

流程處理

漸進式展現：基於用戶的操作/某種特定規則，漸進式展現不同的操作選項。

配置程序：通過提供一系列的配置項，幫助用戶完成任務或者產品組裝。

彈出框覆蓋層：雖然彈出框的出現會打斷用戶的心流，但是有時候在彈出框中使用「步驟條」來管理複雜流程也是可行的。

7. 簡化交互

費茨法則：如果用戶滑鼠移動距離越少、對象相對目標越大，那麼用戶越容易操作。

實時可見工具

如果某個操作非常重要，就應該把它放在界面中，並實時可見。

懸停即現工具

如果某個操作不那麼重要，或者使用「實時可見工具」過於啰嗦會影響用戶閱讀時，可以在懸停在該對象上時展示操作項。

開關顯示工具

如果某些操作只需要在特定模式時顯示，可以通過開關來實現。

交互中的工具

如果操作不重要或者可以通過其他途徑完成時，可以將工具放置在用戶的操作流程中，減少界面元素，降低認知負擔，給用戶小驚喜。

可視區域 ≠ 可點擊區域

在使用 Table 時，文字鏈的點擊範圍受到文字長短影響，可以設置整個單元格為熱區，以便用戶觸發。當需要增強按鈕的響應性時，可以通過增加用戶點擊熱區的範圍，而不是增大按鈕形狀，從而增強響應性，又不缺失美感。

8. 提供邀請

邀請就是引導用戶進入下一個交互層次的提醒和暗示，以表明在下一個界面可以做什麼。

靜態邀請

引導操作邀請：一般以靜態說明形式出現在頁面上，不過它們在視覺上也可以表現出多種不同樣式。常見類型：「文本邀請」、「白板式邀請」、「未完成邀請」。

漫遊探索邀請：是向用戶介紹新功能的好方法，尤其是對於那些設計優良的界面。但是它不是「創口貼」，僅通過它不能解決界面交互的真正問題。

動態邀請

懸停邀請：在滑鼠懸停期間提供邀請。

推論邀請：用於交互期間，合理推斷用戶可能產生的需求。

更多內容邀請：用於邀請用戶查看更多內容。

9. 巧用過渡

在界面中，適當的加入一些過渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

在視圖變化時保持上下文

滑入與滑出：可以有效構建虛擬空間。

傳送帶：可極大地擴展虛擬空間。

摺疊窗口：在視圖切換時，有助於保持上下文，同時也能拓展虛擬空間。

解釋剛剛發生了什麼

對象增加：在列表/表格中，新增了一個對象。

對象刪除：在列表/表格中，刪除了一個對象。

對象更改：在列表/表格中，更改了一個對象。

對象呼出：點擊頁面中元素，呼出一個新對象。

改善感知性能

當無法有效提升「實際性能」時，可以考慮適當轉移用戶的注意力，來縮短某項操作的感知時間，改善感知性能。

10. 即時反應

「提供邀請」的強大體現在交互之前給出反饋，解決易發現性問題；「巧用過渡」的有用體現在它能夠在交互期間為用戶提供視覺反饋；「即時反應」的重要性體現在交互之後立即給出反饋。

查詢模式

自動完成：用戶輸入時，下拉列表會隨著輸入的關鍵詞顯示匹配項。根據查詢結果分類的多少，可以分為「確定類目」、「不確定類目」兩種類型。

實時搜索：隨著用戶輸入，實時顯示搜索結果。「自動完成」、「實時建議」的近親。

微調搜索：隨著用戶調整搜索條件，實時調整搜索結構。

反饋模式

實時預覽：在用戶提交輸入之前，讓他先行了解系統將如何處理他的輸入。

漸進式展現：在必要的時候提供必要的提示，而不是一股腦兒顯示所有提示，導致界面混亂，增加認知負擔。

進度指示：當一個操作需要一定時間完成時，就需要即時告知進度，保持與用戶的溝通。

點擊刷新：告知用戶有新內容，並提供按鈕等工具幫助用戶查看新內容。

定時刷新：無需用戶介入，定時展示新內容。

11.設計規範

遵循設計環境規範

按設計環境規範進行設計，如：Web、iOS、Android 設計規範。遵循文件命名及畫板圖層命名規範。

命名規範：《提高工作效率！可能是最全面細緻的設計文件命名規範》

iOS設計指南：

《UI設計師必讀的IOS 10人機界面設計指南（一）》《UI設計師必讀的IOS 10人機界面設計指南（二）》《UI設計師必讀的IOS 10人機界面設計指南（三）》《UI設計師必讀的IOS 10人機界面設計指南（四）》

建立設計規範

例如：配色系統（主色調一般為品牌色、確定產品定位，整體風格，字體顏色等）；信息系統（字體排版，圖標，層級區分等）；布局系統（柵格系統，間距等）；控制項系統（按鈕，表單控制項等）。

設計規範參考：內部教程！超實用6步透視網易設計規範（附完整PDF下載）

生成設計文檔

Style Guide（PDF 格式，風格指南）；UI Kit（PSD 格式，PS 調取）；標註圖（PNG 格式，前端參考）。

相關教程：《如何製作實用美觀的設計文檔》

三. 有效溝通

1. 前期 · 多方確認

設計前審核原型，與產品和技術人員做好交流，進行功能評估，確認實現難度。視覺定稿前，與產品和技術人員進行確認，確保視覺稿是可實現的。有必要的話，提供前端效果插件。

2. 中期 · 視覺規範

設計生成視覺規範和標註說明，提供給技術人員做參考，確保首次還原效果至少在 80% 以上。

提高視覺還原度的技巧：《實用乾貨！視覺設計師如何讓設計效果高還原度落地？》

3. 後期 · 還原跟進

技術人員初步完成頁面實現後，設計師需要主動跟進還原，並反覆驗收跟進。

四. 效率工具

好工具能優化工作流程，解放生產力，提升工作效率，這裡列舉一些常用工具和插件。

設計工具：Sketch

快捷鍵：Cheat Sheet

PS 插件：柵格布局 Velositey、切圖 Cutterman

標註工具：Markman、Size Marks、Zeplin、Sketch Measure

Chrome 插件：

WhatFont? —? 識別網頁所使用的字體。

Page Ruler? — 獲取網頁中元素大小、位置信息。

Browser Resize? — 模擬各種解析度。

Wappalyzer? — 用於識別網站使用的庫和框架。

PerfectPixel? — 疊加插件，與設計稿進行對比。

ColorZilla — 拾色器。