設(shè)計師和前端都需要了解的知識點

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

專業(yè)共識

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

一.  設(shè)計基礎(chǔ)

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

1. 尺寸

一個網(wǎng)頁的尺寸設(shè)置與屏幕分辨率和瀏覽器相關(guān)，我們不可能滿足所有用戶的最佳尺寸，但我們能做的是讓絕大多數(shù)用戶感覺是最佳的。

我們可以通過統(tǒng)計分析工具獲取用戶屏幕分辨率數(shù)據(jù)，從而為設(shè)計提供參考。

目前常見頁面尺寸

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

手機端：750px。

移動端適配

移動端可根據(jù)業(yè)務(wù)需求和產(chǎn)品特點選擇響應(yīng)式適配，還是獨立移動版設(shè)計，對于頁面結(jié)構(gòu)和功能簡單的站點，適用響應(yīng)式，對于大型業(yè)務(wù)復(fù)雜的站點，移動端建議獨立版本設(shè)計。移動端字體大小使用 rem 單位，以適配不同手機分辨率，保持整體縮放。移動端適配原則：文字流式、控件彈性、圖片等比縮放。

Retina 屏適配

設(shè)計師將 logo、icon、固定位圖片等圖片元素生成 2 倍大小提供給前端，前端利用 Media Query 實現(xiàn) Retina 高清屏適配。

2. 字體

進行跨平臺的字體設(shè)定，力求在各個操作系統(tǒng)下都有最佳展示效果。

字體家族

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

英文字體：Helvetica Neue（優(yōu)先字體）、Helvetica（備用字體）、Arial（次級備用字體）。

CSS Fonts

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

字體使用規(guī)范

設(shè)定字體使用規(guī)范，如主標題、次標題、小標題、正文、輔助文字、失效文字、鏈接文字等字號、顏色、樣式等。

補充

字號不得小于 12px，標準 icon 可轉(zhuǎn)成字體圖標，特殊字體可以使用 WebFont。

3. 排版

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

行高和段落

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

CSS 設(shè)定：

.paragraph {line-height:1.5;}

.paragraph p {margin:1em 0;}

PS 設(shè)定：

標點和空格

? 使用全角中文標點。

? 遇到完整的英文整句、特殊名詞，其內(nèi)容使用半角標點。

? 數(shù)字使用半角字符。

? 不重復(fù)使用標點符號。

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

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

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

對齊

? 中文/英文居左對齊。

? 數(shù)字/小數(shù)點對齊。

? 冒號對齊。

層級引導(dǎo)

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

4. 色彩

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

色彩和交互

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

5. 布局

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

柵格系統(tǒng)

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

6. 動畫

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

二. 十大原則

親密性、對齊、對比、重復(fù)、直接了當、足不出戶、簡化交互、提供邀請 、巧用過渡、即時反應(yīng)。
1. 親密性

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元。反之，則它們的距離就應(yīng)該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

縱向設(shè)定小、中、大三類間距，它們的關(guān)系 Y=10+10*N，橫向間距視具體情況而定。

2. 對齊

文案類對齊

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

表單類對齊

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

數(shù)字類對齊

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

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

3. 對比

主次關(guān)系對比

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

總分關(guān)系對比

通過調(diào)整排版、字體、大小等方式來突出層次感，區(qū)分總分關(guān)系，使得頁面更具張力和節(jié)奏感。

狀態(tài)關(guān)系對比

通過改變顏色、增加輔助形狀等方法來實現(xiàn)狀態(tài)關(guān)系的對比，以便用戶更好的區(qū)分信息。常見類型有「靜態(tài)對比」、「動態(tài)對比」。

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

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

4. 重復(fù)

相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計要素、設(shè)計風(fēng)格，某種格式、空間關(guān)系等。

5. 直截了當

需要在哪里輸出，就要允許在哪里輸入，不要為了編輯內(nèi)容而打開另一個頁面，應(yīng)該直接在上下文中實現(xiàn)編輯。常見方法有單字段行內(nèi)編輯、多字段行內(nèi)編輯、直接拖放、直接選擇等。

單字段行內(nèi)編輯

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

多字段行內(nèi)編輯

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

6. 足不出戶

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

覆蓋層

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

嵌入層

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

流程處理

漸進式展現(xiàn)：基于用戶的操作/某種特定規(guī)則，漸進式展現(xiàn)不同的操作選項。

配置程序：通過提供一系列的配置項，幫助用戶完成任務(wù)或者產(chǎn)品組裝。
彈出框覆蓋層：雖然彈出框的出現(xiàn)會打斷用戶的心流，但是有時候在彈出框中使用「步驟條」來管理復(fù)雜流程也是可行的。

7. 簡化交互

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

實時可見工具

如果某個操作非常重要，就應(yīng)該把它放在界面中，并實時可見。

懸停即現(xiàn)工具

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

開關(guān)顯示工具

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

交互中的工具

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

可視區(qū)域 ≠ 可點擊區(qū)域

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

8. 提供邀請

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

靜態(tài)邀請

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

漫游探索邀請：是向用戶介紹新功能的好方法，尤其是對于那些設(shè)計優(yōu)良的界面。但是它不是「創(chuàng)口貼」，僅通過它不能解決界面交互的真正問題。

動態(tài)邀請

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

推論邀請：用于交互期間，合理推斷用戶可能產(chǎn)生的需求。

更多內(nèi)容邀請：用于邀請用戶查看更多內(nèi)容。

9. 巧用過渡

在界面中，適當?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時也能增強用戶和界面的溝通。

在視圖變化時保持上下文

滑入與滑出：可以有效構(gòu)建虛擬空間。

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

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

解釋剛剛發(fā)生了什么

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

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

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

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

改善感知性能

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

10. 即時反應(yīng)

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

查詢模式

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

實時搜索：隨著用戶輸入，實時顯示搜索結(jié)果?！缸詣油瓿伞埂ⅰ笇崟r建議」的近親。

微調(diào)搜索：隨著用戶調(diào)整搜索條件，實時調(diào)整搜索結(jié)構(gòu)。

反饋模式

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

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

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

點擊刷新：告知用戶有新內(nèi)容，并提供按鈕等工具幫助用戶查看新內(nèi)容。

定時刷新：無需用戶介入，定時展示新內(nèi)容。

11.設(shè)計規(guī)范

遵循設(shè)計環(huán)境規(guī)范

按設(shè)計環(huán)境規(guī)范進行設(shè)計，如：Web、iOS、Android 設(shè)計規(guī)范。遵循文件命名及畫板圖層命名規(guī)范。

建立設(shè)計規(guī)范

例如：配色系統(tǒng)（主色調(diào)一般為品牌色、確定產(chǎn)品定位，整體風(fēng)格，字體顏色等）；信息系統(tǒng)（字體排版，圖標，層級區(qū)分等）；布局系統(tǒng)（柵格系統(tǒng)，間距等）；控件系統(tǒng)（按鈕，表單控件等）。

生成設(shè)計文檔

Style Guide（PDF 格式，風(fēng)格指南）；UI Kit（PSD 格式，PS 調(diào)?。?；標注圖（PNG 格式，前端參考）。

三. 有效溝通

1. 前期 · 多方確認

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

2. 中期 · 視覺規(guī)范

設(shè)計生成視覺規(guī)范和標注說明，提供給技術(shù)人員做參考，確保首次還原效果至少在 80% 以上。

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

3. 后期 · 還原跟進

技術(shù)人員初步完成頁面實現(xiàn)后，設(shè)計師需要主動跟進還原，并反復(fù)驗收跟進。

四. 效率工具

好工具能優(yōu)化工作流程，解放生產(chǎn)力，提升工作效率，這里列舉一些常用工具和插件。

設(shè)計工具：Sketch

快捷鍵：Cheat Sheet

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

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

Chrome 插件：

WhatFont? —? 識別網(wǎng)頁所使用的字體。

Page Ruler? — 獲取網(wǎng)頁中元素大小、位置信息。

Browser Resize? — 模擬各種分辨率。

Wappalyzer? — 用于識別網(wǎng)站使用的庫和框架。

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

ColorZilla — 拾色器。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

本文名稱：設(shè)計師和前端都需要了解的知識點
分享地址：http://muchs.cn/news15/321915.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、商城網(wǎng)站、虛擬主機、服務(wù)器托管、標簽優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)