設(shè)計(jì)稿設(shè)計(jì)得漂亮只能說(shuō)明你一個(gè)合格的設(shè)計(jì)師，如何為用戶(hù)打造一款量身定制的產(chǎn)品是我們作為設(shè)計(jì)師需要苦心鉆研的。所以，你的設(shè)計(jì)在出圖時(shí)，是給你買(mǎi)家秀還是賣(mài)家秀？

買(mǎi)家秀vs賣(mài)家秀

看到標(biāo)題有些同學(xué)可能會(huì)一愣，UI設(shè)計(jì)還有買(mǎi)家秀和買(mǎi)家秀？其實(shí)就是設(shè)計(jì)稿和最后上線(xiàn)頁(yè)面的對(duì)比。我們會(huì)發(fā)現(xiàn)設(shè)計(jì)稿設(shè)計(jì)的美輪美奐，整齊工整，最后上線(xiàn)的頁(yè)面卻慘不忍睹。產(chǎn)品，運(yùn)營(yíng)甚至boss得問(wèn)了：這做的是什么東西？那這鍋誰(shuí)來(lái)背，測(cè)試？開(kāi)發(fā)？還是ued？毫無(wú)疑問(wèn)這個(gè)鍋ued是背定了。當(dāng)然有同學(xué)會(huì)說(shuō)：開(kāi)發(fā)說(shuō)實(shí)現(xiàn)不了，只能這樣做了。那么，你為什么總是相信開(kāi)發(fā)說(shuō)不能做就不能做？說(shuō)不定只是開(kāi)發(fā)想偷懶呢？（我的開(kāi)發(fā)小伙伴請(qǐng)不要打我我知道你們是愛(ài)我的）。

設(shè)計(jì)師進(jìn)階利器－－學(xué)習(xí)前端

有句名言說(shuō)得好：知己知彼，百戰(zhàn)不殆。下面要講幾個(gè)簡(jiǎn)單的前端小知，所有頁(yè)面的布局都會(huì)用到，拿安卓舉例，五種常見(jiàn)的頁(yè)面布局：

1.線(xiàn)性布局（LinearLayout）

2.表格布局（TableLayout）

3.單幀布局（FrameLayout）

4.相對(duì)布局（RelativeLayout）

5.絕對(duì)布局（AbsoluteLayout）

另外，還有兩個(gè)單詞也是要非常了解的：

（1）margin：元素周?chē)深~外的空白區(qū)?！翱瞻讌^(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)域；

（2）padding：稱(chēng)呼為內(nèi)邊距，其判斷的依據(jù)即邊框離內(nèi)容正文的距離，而我喜歡CSS權(quán)威指南解釋的“補(bǔ)白”（或者叫“留白”），因?yàn)樗苄蜗?。補(bǔ)白(padding)：補(bǔ)白位于元素框的邊界與內(nèi)容區(qū)之間。很自然，用于影響這個(gè)區(qū)域的屬性是padding。

總結(jié)買(mǎi)家秀的原因：

1. 溝通不到位。
2. 細(xì)節(jié)不到位。
3. 驗(yàn)收沒(méi)有規(guī)范不到位。
4. 設(shè)計(jì)稿沒(méi)有出詳細(xì)。

其實(shí)要做好每一點(diǎn)都不是那么容易的事情，真以為UI就只是畫(huà)畫(huà)圖嗎？資深一點(diǎn)的UI看手機(jī)上就能分辨字體大小，1px甚至0.5px的誤差，控件間距，包括很細(xì)微的顏色誤差等等。

1.溝通不到位

在之前的文章中有提過(guò)，一個(gè)設(shè)計(jì)師判斷他水平的高低，設(shè)計(jì)能力不是最優(yōu)先，而是溝通能力，以及解決問(wèn)題的能力。

• 設(shè)計(jì)助理：標(biāo)注切圖，OK！
• 設(shè)計(jì)師：標(biāo)注切圖丟開(kāi)發(fā)，OK！
• 高級(jí)設(shè)計(jì)師：標(biāo)注切圖丟開(kāi)發(fā)，開(kāi)發(fā)跟進(jìn)，OK！
• 資深設(shè)計(jì)師：標(biāo)注切圖的過(guò)程中與開(kāi)發(fā)溝通，確認(rèn)頁(yè)面細(xì)節(jié)，根據(jù)驗(yàn)收規(guī)范驗(yàn)收，提供完整的設(shè)計(jì)稿，并有一定開(kāi)發(fā)知識(shí)，能聽(tīng)懂開(kāi)發(fā)說(shuō)的代碼，并給出建議。
• 設(shè)計(jì)專(zhuān)家：自己設(shè)計(jì)自己寫(xiě)代碼。

所以，我們能發(fā)現(xiàn)高級(jí)設(shè)計(jì)師這個(gè)級(jí)別開(kāi)始都將更多的接觸開(kāi)發(fā)，和其進(jìn)行更多的溝通，舉個(gè)例子：

這是一個(gè)星星的排列，我們通常在一家稍微大型的公司能發(fā)現(xiàn)，一個(gè)功能模塊對(duì)應(yīng)一個(gè)開(kāi)發(fā)，但是其中的元素難免會(huì)重復(fù)使用。為了避免資源重復(fù)，開(kāi)發(fā)就會(huì)使用同一套的資源，也就是同一個(gè)切圖，那么問(wèn)題來(lái)了：星星的排列寫(xiě)法只有一種嗎？然而并不是，兩個(gè)人的實(shí)現(xiàn)方法不一樣，雖然結(jié)果一樣，但是需要的切圖并不一樣。

• 寫(xiě)法一：提供貼邊切圖，開(kāi)發(fā)代碼實(shí)現(xiàn)其中間距。
• 寫(xiě)法二：提供左右有間距的切圖，開(kāi)發(fā)自動(dòng)排列。

如果沒(méi)有溝通到位，我們會(huì)發(fā)現(xiàn)兩邊的效果總是不能保持一致，導(dǎo)致最后和效果圖有了差別。這僅僅是一個(gè)例子，而項(xiàng)目中我們會(huì)發(fā)現(xiàn)許許多多類(lèi)似的或者其他細(xì)微的問(wèn)題，如果溝通不及時(shí)，上線(xiàn)之后就只能成為買(mǎi)家秀了。

2.細(xì)節(jié)不到位

注意細(xì)節(jié)！注意細(xì)節(jié)！注意細(xì)節(jié)！

“細(xì)節(jié)成就品質(zhì)”，這句廣告詞簡(jiǎn)直了。我們會(huì)發(fā)現(xiàn)在日常的生活中，為什么我們會(huì)對(duì)一家店產(chǎn)生好感，覺(jué)得他們服務(wù)好，讓人覺(jué)得花大價(jià)錢(qián)都值？是因?yàn)樗麄冊(cè)诜?wù)中對(duì)細(xì)節(jié)把握的到位。

舉個(gè)例子：上周和倆兄弟去擼串，特地找了一家五星級(jí)好評(píng)的燒烤店，一家門(mén)面很普通的燒烤店，生意卻極好，足足等了50分鐘終于輪到我們了。在上菜的同時(shí)，服務(wù)員會(huì)詳細(xì)給我們說(shuō)明我們將要擼的幾個(gè)串分別是幾串和幾串，并且每次上菜都會(huì)提醒顧客注意菜品燙口，當(dāng)生蠔有一只偏小的時(shí)候給我們額外加了一只，食用完的鐵簽可以放到邊上的竹筒內(nèi)以便回收同時(shí)安全不至于扎到顧客，最后加上燒烤的味道確實(shí)不錯(cuò)，價(jià)格也很實(shí)惠，這樣的店能拿到五個(gè)星好評(píng)就不奇怪了。

又扯到服務(wù)設(shè)計(jì)上去了，言歸正傳。我們?cè)谧鯱I驗(yàn)收的時(shí)候，是否也會(huì)注意到細(xì)節(jié)？例如對(duì)齊，統(tǒng)一性，1px（dp）的誤差？是否和開(kāi)發(fā)妥協(xié)并沒(méi)有完全按照效果圖來(lái)實(shí)現(xiàn)？往往細(xì)節(jié)的忽略會(huì)導(dǎo)致整個(gè)產(chǎn)品看起來(lái)不精致。

3.沒(méi)有驗(yàn)收規(guī)范

我們通常驗(yàn)收的時(shí)候會(huì)將開(kāi)發(fā)做好的頁(yè)面截圖下來(lái)，對(duì)比著效果圖來(lái)做大家來(lái)找茬。但是，往往會(huì)這里漏一些那里漏一些，那么如何才能更完整細(xì)致的驗(yàn)收UI稿呢？筆者在這里整理了一下方法：

（1）根據(jù)UI KIT組件整體驗(yàn)收，所有元素－控件－頁(yè)面風(fēng)格對(duì)照開(kāi)發(fā)之前所做的組建庫(kù)對(duì)應(yīng)檢查；

（2）對(duì)應(yīng)標(biāo)注后的效果圖來(lái)調(diào)整開(kāi)發(fā)頁(yè)面，并按順序列出需要改的點(diǎn)，為什么需要一一列出？因?yàn)槲覀兿胱岄_(kāi)發(fā)改視覺(jué)bug的時(shí)候開(kāi)發(fā)正在改更為重要的測(cè)試提出的功能bug，這個(gè)時(shí)候如果不做序列排列bug，開(kāi)發(fā)會(huì)便會(huì)遺漏。（經(jīng)驗(yàn)tips：文字自帶有上下的空隙，標(biāo)注時(shí)工具會(huì)將空隙自動(dòng)算入標(biāo)注的數(shù)值中。）

（3）注意異常流頁(yè)面。很多時(shí)候UI驗(yàn)收完所有可見(jiàn)頁(yè)面之后以為大功告成，但是還有一些隱性頁(yè)面依然沒(méi)有被發(fā)現(xiàn)，比如為空頁(yè)面，斷網(wǎng)頁(yè)面，請(qǐng)求失敗頁(yè)面，toast，彈框等。

（4）控件及頁(yè)面的交互。將所有頁(yè)面跳轉(zhuǎn)動(dòng)效統(tǒng)一，對(duì)照交互說(shuō)明幫助交互設(shè)計(jì)驗(yàn)收頁(yè)面動(dòng)效，不要怕越俎代庖，不要覺(jué)得幫別人驗(yàn)收他們的部分就是吃虧，整一個(gè)產(chǎn)品需要所有人共同努力來(lái)完善，產(chǎn)品才能做到極致。

（5）詳細(xì)的設(shè)計(jì)稿

到底什么是詳細(xì)的設(shè)計(jì)稿？

1）補(bǔ)全所有異常流狀態(tài)：為空頁(yè)面，斷網(wǎng)頁(yè)面，請(qǐng)求失敗頁(yè)面，toast，彈框等；

2）考慮字段為空時(shí)候頁(yè)面的展示方式；

3）設(shè)計(jì)說(shuō)明，其實(shí)所有的設(shè)計(jì)都是有據(jù)可循，而不是空穴來(lái)風(fēng)，為什么要這樣設(shè)計(jì)？這樣設(shè)計(jì)能解決用戶(hù)的什么問(wèn)題，最后能到一個(gè)怎樣的效果？）

案例tips：一張頁(yè)面你將他信息完全填滿(mǎn)，看上去很飽滿(mǎn)很充實(shí)，信息很完整，但是！這只是設(shè)計(jì)稿最理想的狀態(tài)，實(shí)際狀態(tài)是這些字段后臺(tái)返回給前端是一個(gè)空值，這時(shí)候東一塊空缺，西一塊空缺，在字段缺失的情況下頁(yè)面的展示需要也設(shè)計(jì)進(jìn)去，這樣開(kāi)發(fā)的時(shí)候能針對(duì)性的做出實(shí)現(xiàn)方式。

作者：getjieyingjun（微信公眾號(hào)：雷神U部落）

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