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

專業(yè)共識(shí)

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

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

尺寸 、字體、排版、色彩、布局、動(dòng)畫。

1. 尺寸

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

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

目前常見頁面尺寸

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

手機(jī)端：750px。

移動(dòng)端適配

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

Retina 屏適配

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

2. 字體

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

字體家族

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

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

CSS Fonts

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

字體使用規(guī)范

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

補(bǔ)充

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

3. 排版

注意行高和段落、標(biāo)點(diǎn)和空格、對(duì)齊、文案長(zhǎng)度、層級(jí)引導(dǎo)。

行高和段落

行高默認(rèn)為字號(hào)的 1.5 倍。段落間距一般為字號(hào)的一倍寬。

CSS 設(shè)定：

.paragraph {line-height:1.5;}

.paragraph p {margin:1em 0;}

PS 設(shè)定：

標(biāo)點(diǎn)和空格

? 使用全角中文標(biāo)點(diǎn)。

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

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

? 不重復(fù)使用標(biāo)點(diǎn)符號(hào)。

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

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

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

對(duì)齊

? 中文/英文居左對(duì)齊。

? 數(shù)字/小數(shù)點(diǎn)對(duì)齊。

? 冒號(hào)對(duì)齊。

層級(jí)引導(dǎo)

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

4. 色彩

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

色彩和交互

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

5. 布局

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

柵格系統(tǒng)

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

6. 動(dòng)畫

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

二. 十大原則

親密性、對(duì)齊、對(duì)比、重復(fù)、直接了當(dāng)、足不出戶、簡(jiǎn)化交互、提供邀請(qǐng) 、巧用過渡、即時(shí)反應(yīng)。
1. 親密性

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

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

2. 對(duì)齊

文案類對(duì)齊

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

表單類對(duì)齊

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

數(shù)字類對(duì)齊

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

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

3. 對(duì)比

主次關(guān)系對(duì)比

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

總分關(guān)系對(duì)比

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

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

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

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

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

4. 重復(fù)

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

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

5. 直截了當(dāng)

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

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

當(dāng)「易讀性」遠(yuǎn)比「易編輯性」重要時(shí)，可以使用「單擊編輯」。當(dāng)「易讀性」為主，同時(shí)又要突出操作行的「易編輯性」時(shí)，可使用「文字鏈/圖標(biāo)編輯」。

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

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

6. 足不出戶

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

覆蓋層

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

嵌入層

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

流程處理

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

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

7. 簡(jiǎn)化交互

費(fèi)茨法則：如果用戶鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶越容易操作。

實(shí)時(shí)可見工具

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

懸停即現(xiàn)工具

如果某個(gè)操作不那么重要，或者使用「實(shí)時(shí)可見工具」過于啰嗦會(huì)影響用戶閱讀時(shí)，可以在懸停在該對(duì)象上時(shí)展示操作項(xiàng)。

開關(guān)顯示工具

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

交互中的工具

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

可視區(qū)域 ≠ 可點(diǎn)擊區(qū)域

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

8. 提供邀請(qǐng)

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

靜態(tài)邀請(qǐng)

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

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

動(dòng)態(tài)邀請(qǐng)

懸停邀請(qǐng)：在鼠標(biāo)懸停期間提供邀請(qǐng)。

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

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

9. 巧用過渡

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

在視圖變化時(shí)保持上下文

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

傳送帶：可極大地?cái)U(kuò)展虛擬空間。

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

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

對(duì)象增加：在列表/表格中，新增了一個(gè)對(duì)象。

對(duì)象刪除：在列表/表格中，刪除了一個(gè)對(duì)象。

對(duì)象更改：在列表/表格中，更改了一個(gè)對(duì)象。

對(duì)象呼出：點(diǎn)擊頁面中元素，呼出一個(gè)新對(duì)象。

改善感知性能

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

10. 即時(shí)反應(yīng)

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

查詢模式

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

實(shí)時(shí)搜索：隨著用戶輸入，實(shí)時(shí)顯示搜索結(jié)果。「自動(dòng)完成」、「實(shí)時(shí)建議」的近親。

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

反饋模式

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

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

進(jìn)度指示：當(dāng)一個(gè)操作需要一定時(shí)間完成時(shí)，就需要即時(shí)告知進(jìn)度，保持與用戶的溝通。

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

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

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

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

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

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

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

生成設(shè)計(jì)文檔

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

三. 有效溝通

1. 前期 · 多方確認(rèn)

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

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

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

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

3. 后期 · 還原跟進(jìn)

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

四. 效率工具

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

設(shè)計(jì)工具：Sketch

快捷鍵：Cheat Sheet

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

標(biāo)注工具：Markman、Size Marks、Zeplin、Sketch Measure

Chrome 插件：

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

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

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

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

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

ColorZilla — 拾色器。

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

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

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

廣告

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