編輯導(dǎo)語：在產(chǎn)品設(shè)計(jì)流程中，產(chǎn)品設(shè)計(jì)師需要與多方部門進(jìn)行接觸。而在產(chǎn)品正式落地、與用戶體驗(yàn)關(guān)聯(lián)起來之前，前端開發(fā)則是產(chǎn)品設(shè)計(jì)稿的首批讀者。如何在產(chǎn)品設(shè)計(jì)工作中提高對接效率與交付體驗(yàn)？本文作者結(jié)合其自身經(jīng)歷做了提升設(shè)計(jì)交付體驗(yàn)的經(jīng)驗(yàn)分享，一起來看一下。

前言

伙伴們~你們和前端相處愉快嗎？

我和前端相處得很愉快！

每天前端小姐姐接到我的設(shè)計(jì)稿都會(huì)第一時(shí)間放下淑女的形象只為了來找我撕逼~（沒錯(cuò)，我們前端是個(gè)很可愛的妹子）。

恕我直言，我以前一直認(rèn)為前端開發(fā)沒法將我辛辛苦苦做出來的設(shè)計(jì)稿100%還原出來，一旦有動(dòng)態(tài)效果的圖就會(huì)用GIF過大占用內(nèi)存，各種原因搪塞就是為了他們的技術(shù)不行找的借口。

我羨慕線上的App可以還原得那么好看！

我羨慕競品居然可以有那么棒的動(dòng)態(tài)效果！

我羨慕別人的開發(fā)說改就改，毫不推脫！

我羨慕……

作為一名優(yōu)秀的作圖小能手，產(chǎn)出不應(yīng)該被開發(fā)覺得麻煩而拒絕；一個(gè)優(yōu)秀的產(chǎn)品不取決于你設(shè)計(jì)得好不好，而取決于前端還原得怎么樣。

經(jīng)過我上百場與開發(fā)撕逼經(jīng)驗(yàn)得出：B端設(shè)計(jì)師與前端之間是存在著不同領(lǐng)域的知識鴻溝，而打破這個(gè)鴻溝的最好辦法就是設(shè)計(jì)師直接去了解前端的工作流程及方式。一個(gè)懂得前端知識的設(shè)計(jì)師與開發(fā)溝通起來可順暢太多了，開發(fā)也不會(huì)整天在你最專注的時(shí)候叫你切圖了打不過就直接加入他們，用魔法打敗魔法。

一、作為設(shè)計(jì)為啥要去了解前端在干什么？

我們都知道：

• 一個(gè)好的畫家需要了解他的畫筆、顏料、調(diào)色板、和畫布；
• 一個(gè)好的建筑設(shè)計(jì)師需要了解他使用的建材、所采用的結(jié)構(gòu)類型、建筑選址；
• 一個(gè)好的服裝設(shè)計(jì)師需要了解他使用的布料、人體結(jié)構(gòu)、布料剪裁技術(shù)。

但是這并不是說好的畫家得先成為顏料工匠，好的建筑設(shè)計(jì)師需要先成為結(jié)構(gòu)設(shè)計(jì)師，好的服裝設(shè)計(jì)師要成為布料專家。術(shù)業(yè)有專攻，每個(gè)崗位都有其專業(yè)性。我們所需要的僅僅是了解你上下游工種，了解其思維方式、自身的局限性和工作狀態(tài)；以設(shè)計(jì)的角度去理解開發(fā)的工作，以促進(jìn)設(shè)計(jì)和前端開發(fā)之前的工作順利進(jìn)行，減少溝通的成本，提升工作的效率。

在用戶體驗(yàn)之前是開發(fā)體驗(yàn)

用戶體驗(yàn)一直是我們設(shè)計(jì)師提倡的目標(biāo)，產(chǎn)品開發(fā)出來上線給到用戶手中才是用戶體驗(yàn)。

但是縱觀整個(gè)工作流程，最先接收到我們的設(shè)計(jì)稿的反而是開發(fā)。在接收到設(shè)計(jì)稿后，開發(fā)會(huì)直觀體驗(yàn)到你的切圖是否規(guī)范友好、輸出的文件格式是否方便他去工作？設(shè)計(jì)布局是否好實(shí)現(xiàn)？動(dòng)效描述是否有參數(shù)？設(shè)計(jì)師可以在畫布中發(fā)揮天馬行空的想象力，但是有時(shí)候?qū)τ陂_發(fā)來說就是一場災(zāi)難了。

二、超快速掌握基礎(chǔ)前端知識

1. 一個(gè)Web頁面是由什么構(gòu)成的？

B端設(shè)計(jì)師最常接觸的設(shè)備就是PC，此處便以Web頁面為例子，講述一下如何去理解前端網(wǎng)頁的基礎(chǔ)結(jié)構(gòu)。

一個(gè)靜態(tài)網(wǎng)頁通常我們可以拆解成3個(gè)部分：

• 頁面框架；
• 控件樣式；
• 數(shù)據(jù)內(nèi)容。

1）頁面框架.html

通俗地講，頁面框架可以類比于產(chǎn)品給予我們的原型圖，只不過是前端同學(xué)通過一種計(jì)算機(jī)能夠讀懂的語言去實(shí)現(xiàn)出來，讓計(jì)算機(jī)可以明白整個(gè)頁面結(jié)構(gòu)是怎么樣的。

2）控件樣式.css

我們在設(shè)計(jì)軟件中調(diào)整的顏色、投影、描邊大小、圓角大小……都屬于前端所寫的樣式范疇；前端通過計(jì)算機(jī)語言將我們在設(shè)計(jì)稿里面的樣式實(shí)現(xiàn)在屏幕上。

3）數(shù)據(jù)內(nèi)容.png

對于設(shè)計(jì)師來說，數(shù)據(jù)內(nèi)容更多可能是產(chǎn)品文檔里面已經(jīng)規(guī)定好的標(biāo)題名稱文字等，而對于前端來說還囊括了設(shè)計(jì)稿里面切好的圖片資源、動(dòng)效資源等。

2. 工作界面上開發(fā)工作與設(shè)計(jì)師有什么區(qū)別？

作為一名設(shè)計(jì)師，我們在進(jìn)行設(shè)計(jì)的頁面是一個(gè)可視化的一個(gè)狀態(tài)，我們是可以在設(shè)計(jì)的過程中很明確看到每個(gè)元素所處的位置，并且可以通過拖動(dòng)鼠標(biāo)輕易進(jìn)行調(diào)整的。

但是在開發(fā)的屏幕上他們是使用字母代碼去實(shí)現(xiàn)設(shè)計(jì)稿，只能通過網(wǎng)頁的窗口和模擬器進(jìn)行預(yù)覽。大部分開發(fā)的習(xí)慣都是寫好以后進(jìn)行發(fā)布預(yù)覽，而不是類似設(shè)計(jì)實(shí)時(shí)進(jìn)行預(yù)覽調(diào)整的。

3. 頁面是如何搭建起來的？

上面我們已經(jīng)知道了構(gòu)成頁面的元素有框架、樣式、數(shù)據(jù)，那么前端開發(fā)是如何利用這些元素將頁面搭建起來的呢？

眾所周知，在建立一幢房子的初期，建筑工人會(huì)在房子的外圍搭建腳手架起到方便搭建和穩(wěn)固房子的作用，然后再一步步地將鋼筋水泥覆蓋上去，同理前端開發(fā)也會(huì)利用標(biāo)簽作為代碼的腳手架將上述的頁面元素搭建起來。

1）前端常見標(biāo)簽詳解

我們知道，前端是利用標(biāo)簽將元素串聯(lián)起來的；那什么是標(biāo)簽?zāi)兀?/p>

不知道大家有沒有去仔細(xì)觀察過前端所寫的代碼，此處舉一個(gè)小案例方便大家對后面的內(nèi)容去理解，并且我也對前端寫的一些代碼進(jìn)行視覺上的優(yōu)化，便于我們?nèi)ダ斫鈽?biāo)簽的。畢竟我們也不是要真的硬核到去學(xué)習(xí)怎么去寫這些代碼。以下面的頁面為例子，左側(cè)為實(shí)現(xiàn)的頁面，右側(cè)為部分代碼。

通過觀察可以得知，整個(gè)代碼都是由單標(biāo)簽和雙標(biāo)簽組合而成的。

2）雙標(biāo)簽

可以觀察到代碼結(jié)構(gòu)是由很多很多的尖括號去引導(dǎo)的，每個(gè)尖括號都括起來一個(gè)詞，而且這個(gè)詞都是成雙成對出現(xiàn)的。我們可以將這一組稱之為雙標(biāo)簽；他可以依據(jù)不同的標(biāo)簽去實(shí)現(xiàn)不同的功能；

3）容器標(biāo)簽 </div>

可以理解為一個(gè)盒子，任何東西都可以裝在里面。

4）內(nèi)容容器 </span>

可以將一些文字內(nèi)容放置在里面，具體和上面的div標(biāo)簽有什么區(qū)別可以不用去了解。

5）單標(biāo)簽

單標(biāo)簽與雙標(biāo)簽相反，它不是成雙成對出現(xiàn)的，是單個(gè)出現(xiàn)的一些標(biāo)簽。

6）圖片標(biāo)簽 <img src=”資源地址”>

裝圖片的標(biāo)簽，后面接上圖片的地址就可以調(diào)用圖片了。

7）線條標(biāo)簽 <hr>

寫一條分割線上去。

8）將標(biāo)簽組合起來

通過上面的講解，大家或許對標(biāo)簽有一個(gè)模糊的概念但是卻并不是很清楚。沒關(guān)系，下面我將通過這個(gè)Tabe切換的案例去給大家講解一下前端開發(fā)是怎么將整個(gè)模塊是寫出來的。

首先我們會(huì)將整個(gè)頁面進(jìn)行分組處理，可以看到我們將頂部賬戶余額卡片和下面的功能列表分別作為兩個(gè)組去進(jìn)行處理。

在第一個(gè)盒子里面我們放置：賬戶余額、金額、轉(zhuǎn)入轉(zhuǎn)出按鈕，在第二個(gè)盒子里面我們可以放置各個(gè)4功能列表。這有點(diǎn)類似于我們在畫原型圖，但是如果我們換成代碼的語言，那么這就是前端開發(fā)所做的事情了~

那么我們將盒子劃分好了以后，是如何轉(zhuǎn)化成代碼的語言的呢？此處簡單以功能區(qū)作為一個(gè)案例。首先我們可以感知到，功能模塊可以設(shè)定為一個(gè)盒子；因此我們要使用<div>標(biāo)簽創(chuàng)建一個(gè)盒子。

有了盒子以后，我們再往下面去分析。盒子里面包含的內(nèi)容是銀行轉(zhuǎn)賬信息、預(yù)留手機(jī)號信息、交易明細(xì)信息、綁定銀行卡信息4個(gè)相似的模塊組成，那么我們可以說這4個(gè)信息是整個(gè)盒子的子集，而整個(gè)盒子是這4個(gè)信息的父集；他們是屬于包含于被包含的關(guān)系。

里面欄目模塊單個(gè)又可以拆解為：icon+文字+分割線，然后再重復(fù)4次。

9）什么是Css樣式代碼？

通過上面重復(fù)4次欄目模塊，我們已經(jīng)將基本的框架搭建好了，但是里面圖標(biāo)還沒替換，字體大小和分割線的粗細(xì)顏色都還沒進(jìn)行調(diào)整；那小伙伴們思考一下，我們在設(shè)計(jì)軟件里面是如何調(diào)整這些元素的？是不是通過操作欄里面去調(diào)整這些參數(shù)？

沒錯(cuò)，接下來就要引入包含這些參數(shù)的文件，css樣式代碼。

我們可以看到，有Css樣式和無css樣式在功能上是一模一樣的，只是比較丑，更接近產(chǎn)品給我們的原型稿。通常我們在設(shè)計(jì)稿里面都包含著樣式，開發(fā)通過讀取我們的設(shè)計(jì)稿將樣式代碼填充上去。

通過拆解css文件，我們可以在右側(cè)看到我們很熟悉的代碼；它們就是我們在設(shè)計(jì)時(shí)調(diào)整的長寬高、字體大小、顏色樣式、間距、位置等參數(shù)。

此處“l(fā)ist-separator”其實(shí)是開發(fā)對這個(gè)css樣式命名的一個(gè)名稱，之前有問過開發(fā)小姐姐為啥不用中文會(huì)更加易讀，她們的回答是這樣會(huì)low而且會(huì)不太兼容；下面的內(nèi)容我們就很熟悉啦~ 此處我翻譯了一下，是不是就很容易明白了呢？

其實(shí)css樣式在我理解上很類似于我們?nèi)粘９ぷ髦械慕M件，它們是可以重復(fù)調(diào)用的。此時(shí)我們將寫好的分割線樣式賦予到之前框架里面的每一條分隔線上。

當(dāng)然如果大家對標(biāo)簽感興趣，這邊可以推薦一個(gè)網(wǎng)址給到大家；里面的各類標(biāo)簽每年都會(huì)進(jìn)行更新而且有詳細(xì)的說明可以供大家去研究學(xué)習(xí)。

4. 總結(jié)

可能大家看到這里都懵逼了，畢竟這些內(nèi)容和設(shè)計(jì)是完全不沾邊的；也非常難以去理解，但是我們其實(shí)并不需要完全懂代碼，我們?nèi)粘９ぷ髦兄恍枰獙⒆约旱脑O(shè)計(jì)稿交付給到前端開發(fā)即可。具體開發(fā)如何實(shí)現(xiàn)是開發(fā)的事情，我們只需要明白：

1. 設(shè)計(jì)稿是開發(fā)通過計(jì)算機(jī)語言，在頁面上分割很多盒子去實(shí)現(xiàn)的；
2. 在盒子里面開發(fā)通過填充各式各樣的內(nèi)容和樣式最終呈現(xiàn)屏幕上看到的頁面（填充內(nèi)容包括文字、圖片資源）。

回到開發(fā)的工作流程。

一般前端開發(fā)在評審過后都會(huì)開始催促設(shè)計(jì)稿輸出的時(shí)間點(diǎn)，其實(shí)開發(fā)在評審過后對業(yè)務(wù)流程已經(jīng)有大概的了解，輔以產(chǎn)品文檔和設(shè)計(jì)稿、設(shè)計(jì)切圖他們就可以開始干活了；所以我們理解了開發(fā)的流程，那么只要將設(shè)計(jì)稿各種情況理清楚，設(shè)計(jì)切圖規(guī)范起來，和開發(fā)溝通就會(huì)順暢很多。

三、如何提升設(shè)計(jì)稿落地的還原度？

1. 開發(fā)是怎么樣設(shè)置間距的？

上面介紹了前端是如何寫盒子的，前端在將盒子寫好以后，整個(gè)盒子是貼邊的需要寫一些間距去將盒子與另一個(gè)盒子分開；這些也就是我們所說的間距。而開發(fā)常用margin（外邊距）和padding（內(nèi)邊距）來設(shè)定每個(gè)盒子之間的間距。

• margin（外邊距）： 盒子外圍添加空間；
• padding（內(nèi)邊距）：盒子內(nèi)部添加空間達(dá)到元素位置的調(diào)整。

此處舉一個(gè)小例子，幫助大家理解這兩者這件的區(qū)別。

2. 開發(fā)喜歡怎樣的切圖？

1）切圖需要統(tǒng)一

很多時(shí)候我們?yōu)榱俗非笠曈X重量上的統(tǒng)一，會(huì)將圖標(biāo)大小尺寸設(shè)置的不一樣；此時(shí)我們就需要輸出同等規(guī)格的切圖，方便開發(fā)按照格子直接填充上去。

2）減少上傳圖片數(shù)量和大小，重復(fù)使用切圖

我們將切圖給予到開發(fā)以后，開發(fā)會(huì)將其傳到服務(wù)器上面。

用戶在訪問我們的頁面時(shí)其實(shí)是相當(dāng)于發(fā)送一次請求，將服務(wù)器里面的圖片下載下來，如果圖片的數(shù)量太多或者文件太大，會(huì)占用大量用戶的帶寬帶來極差的體驗(yàn)。

而且服務(wù)器的空間也是需要公司付費(fèi)購買的，有時(shí)候也不支持我們大量使用太占空間的圖片。

此處列舉一下之前的一個(gè)需求作為案例，此業(yè)務(wù)需求背景是需要30個(gè)模板，每個(gè)模板需要3個(gè)場景的展示即是需要90張圖，如果我們每張都給予不同的高清圖的話，那么對服務(wù)器來說是一個(gè)巨大的壓力。

此時(shí)我們可以將一圖多用，對不同的使用場景進(jìn)行適配;我們只需要將適配的規(guī)則告訴開發(fā)即可。

3. 動(dòng)效交接的一點(diǎn)小建議

1）為什么開發(fā)不給你做動(dòng)圖？

隨著主流設(shè)備的不斷升級和技術(shù)不斷突破，動(dòng)效在我們?nèi)粘Ｉ钪性絹碓狡占?；?dòng)圖可以讓整個(gè)頁面一下子有了靈魂，但是前端開發(fā)會(huì)以各種各樣的理由拒絕我們做動(dòng)圖的欲望，相信大家也會(huì)經(jīng)常遇到開發(fā)的各種婉拒理由。

產(chǎn)品在和設(shè)計(jì)師過需求的時(shí)候，其實(shí)并沒有明確要做動(dòng)效；動(dòng)效的需求大部分都是由設(shè)計(jì)師自發(fā)組織發(fā)起的，在不影響業(yè)務(wù)主流程的情況下，動(dòng)效的需求一般優(yōu)先級會(huì)排得很低，但是作為一名有追求的設(shè)計(jì)師會(huì)就這樣放棄嗎？當(dāng)然不！ 設(shè)計(jì)師本職工作是優(yōu)化用戶體驗(yàn)，我們可以從開發(fā)小姐姐拒絕的理由入手。

首先我們常用的交付方式便是導(dǎo)出gif給到開發(fā)，但其實(shí)對于開發(fā)而言Gif就是圖片，gif只是圖片的另一種格式，是多張圖合在一起的圖片，我們將gif 給到開發(fā)相對于png和jpg他們需要二次加工太麻煩了，而且多張圖合在一起文件太大影響網(wǎng)頁打開速度，這也是需要他們背鍋的！這也是他們不想做的主要原因。

2）動(dòng)靜分離，減小體積

所做的動(dòng)效沒法落地很大一個(gè)問題在于動(dòng)效很難去做一個(gè)適配，當(dāng)我們?nèi)粘Ｐ枨箜撁胬锩婺骋徊糠职藙?dòng)效，我們需要將包含動(dòng)效部分內(nèi)容切出來讓前端去排列。這樣經(jīng)常會(huì)導(dǎo)致文件過大從而影響頁面體驗(yàn)。

動(dòng)靜分離的原理就是將動(dòng)態(tài)部分單獨(dú)切出來，其余部分全部是靜態(tài)圖；然后讓開發(fā)通過定位將動(dòng)態(tài)圖片補(bǔ)充上去。

上述的方法的確比之前要體積更小了一些，但是開發(fā)覺得做定位還是有點(diǎn)麻煩怎么辦呢？

此處我們可以依據(jù)動(dòng)圖的結(jié)構(gòu)，靈活去調(diào)整自己切圖的方式；遵循所切出來的動(dòng)圖與原圖是可以通過頂對齊、底對齊、左對齊、右對齊、居中對齊等方式對應(yīng)上的，而不是開發(fā)需要進(jìn)行一定的數(shù)值計(jì)算才可以定位上的。

甚至我們可以做成動(dòng)圖層與靜圖層同樣大小，他們只需要疊在一起就行。這樣可以極大避免適配上的問題，也極大減少了開發(fā)的工作量；讓他們可以保住頭發(fā)。

3）拆分動(dòng)圖幀，以代碼方式實(shí)現(xiàn)動(dòng)態(tài)

有時(shí)候我們做一些簡單的循環(huán)動(dòng)效，大部分的循環(huán)動(dòng)效都是其中1-2個(gè)圖層在重復(fù)變化，與其做成gif交付給開發(fā)，不如與開發(fā)協(xié)商好利用代碼控制相對應(yīng)的圖層；這樣整個(gè)效果實(shí)現(xiàn)會(huì)更好而且體積也會(huì)小很多。

此處我們可以將頂層，中間發(fā)光層、底層交付給開發(fā)，并告知閃動(dòng)時(shí)間為0.5s循環(huán)閃動(dòng)，讓開發(fā)控制整體的動(dòng)效即可節(jié)省大量的內(nèi)存占用。

4）不擇手段，減小Gif大小和體積

① 利用壓縮網(wǎng)站壓縮

我們可以在導(dǎo)出gif后通過對應(yīng)的網(wǎng)站進(jìn)行壓縮一下，此處推薦我本人常用的一個(gè)壓縮網(wǎng)站。

② 手動(dòng)抽幀

利用photoshop去將gif里面的重復(fù)幀可略幀刪除掉，僅保留關(guān)鍵幀；并且依據(jù)實(shí)際情況將延長重復(fù)幀的時(shí)長，達(dá)到減少幀數(shù)的目的，從而減小文件大小。

此處舉一個(gè)小例子，如下面的gif圖大概有490kb大?。辉趬嚎s網(wǎng)站里面已經(jīng)無法壓縮了。

我們將其拖入PS里面，調(diào)出時(shí)間軸，找到這個(gè)GIF的關(guān)鍵幀、可略幀、重復(fù)幀。

• 關(guān)鍵幀：用戶需要感知的信息；
• 過度幀：過度幀可減少；
• 重復(fù)幀：調(diào)整時(shí)長，制造停頓。減少因?yàn)橥ｎD時(shí)長而造成過多的圖片。

經(jīng)過優(yōu)化后，整體gif大小減少了將近50%

如果想要達(dá)到與開發(fā)小姐姐相處融洽，我們在交付的時(shí)候還是要減少開發(fā)的二次加工工作量。

其實(shí)我們的主要工作在于設(shè)計(jì)前和設(shè)計(jì)中，當(dāng)我們已經(jīng)到了交付時(shí)候，我們整體時(shí)間應(yīng)該是比較多的，這時(shí)候千萬要耐心，將切圖整理規(guī)范。規(guī)范的切圖不但能顯得我們本身職業(yè)素質(zhì)過硬，還能緩和她們因?yàn)槟玫絹y糟糟產(chǎn)品邏輯的“延時(shí)暴躁”，一舉兩得何樂而不為呢？

四、結(jié)語

在一個(gè)理想的狀態(tài)里，一切都將按照設(shè)計(jì)師的意愿而實(shí)行。在這個(gè)場景中，設(shè)計(jì)師交付了像素完美的設(shè)計(jì)，然后開發(fā)人員只是一言不發(fā)地把它放到代碼中，兩者沒有任何交流。想象是美好的，但是現(xiàn)實(shí)是很殘酷的，兩個(gè)職業(yè)的語言不一樣，有時(shí)候打字不一定能溝通好。

此時(shí)作為一名設(shè)計(jì)師是否可以勇敢地邁出堅(jiān)實(shí)的一步跨越職業(yè)與性別的鴻溝呢？

本文由 @weiyehe 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議