總所周知，開發小哥哥和設計小姐姐之間的關係一直都很微妙……時而討論得熱火朝天，時而吵得不可開交，時而大打出手……啊不，是一直相親相愛的（微笑臉）
其實有時候還真別怪人前端小哥哥懟咱們，很多時候是設計交付的東西沒到位，導致前端那邊開發過程中遇到各種阻力，每次遇到一個問題就來問咱們，效率低下不說，咱們不煩，人家也煩了……
換位思考，如果我們拿到的產品原型不全面，做一個地方要去問一下產品經理才能進行下一步，我們也煩透了，甚至想打產品經理一頓（表裝，我知道你想打）。
經歷了幾個項目後好歹沒讓前端追著砍了，最近我又見到了久違的讓前端犯心臟病的設計交付，不說是誰設計的，總之~這樣的設計交付讓我也想追著砍……
1、距離測量困難
自從藍湖等眾多自動標註軟件出現後，設計師們就解放了雙手，提前下班省的時間都夠多吃好幾個茶葉蛋了。
藍湖好用還免費，你說氣不氣。正因為大家夥兒都用上了藍湖，於是對於標註這一塊就沒那麼上心了，基本上就是項目一做，圖一切，藍湖一上傳，就成甩手掌櫃了，任前端小哥哥隨便搗鼓，這樣一來，雖然時間是省了，但是更大的問題出現了，藍湖或者是其它標註軟件在測量的時候是以圖層來測的，這就造成前端在測距離的時候如果沒有一個參考，就會很難測量。
舉個栗子
設計交付中包含一個表格
前端小哥哥開發的時候需要測量表格每個縱列的寬度，每行的高度，咱們看看下面的表格在藍湖裡會如何測量。
看下面的圖，紅色背景是開發需要知道的高度，因為這樣才好把文字居中垂直放置。這時候你也許會說，這不是沒問題嘛，合作相當愉快呀！
好嘞，如果沒有分割線呢？？
沒有分割線的時候，開發小哥哥只能測量兩個圖層之間的距離，如下圖所示，這時候根本沒辦法判斷文字大小是多少，俗稱：追著砍系列~
正確做法
給元素增加容器，表格寬度可能不一樣，一定要給每個元素增加一個容器，可以讓開發直接看容器的大小，So easy~
2、切圖問題
2.1 切圖不全
對於切圖不全這個問題沒有完美的解決辦法，唯一的辦法就是細心再細心一點，做完一個版塊後檢查一遍。現在的切圖工具很多，只要你用得順手能提升效率就行。
2.2 格式不對
關於格式這一點一定要先和前端溝通，溝通很重要，提前溝通至少可以避免一半的問題，一點都不誇張。如果拿不準圖標格式，一定不要先自己悶著做，要問前端他習慣用哪種實現方式，他要png就切圖，他要iconfont就做iconfont。
先說下切圖比較重要的一點，最好用正方形，這樣方便前端測量尺寸，對頁面還原度也有很大的幫助。
我個人的習慣是：
1）先畫一個正方形
2）在正方形上畫圖標
調整間距的時候以正方形為參考調整，而不是以圖標的大小為參考。
舉個例子，看下面圖片中的點贊圖標，點贊圖標是不規則的，圖標的實際大小是36*40，我在設計的時候就在圖標下面放了一個正方形，只要把圖標框完就行，比圖標實際大小大也是沒問題的。
是不是覺得還沒啥，不就是不規則嘛，也不影響呀！
一個圖標還沒啥，可是……圖標多了之後，尤其是相同板塊的圖標如果大小不一樣的話……就會出現下面這種情況：
當我們把圖標都放到一個規則的矩形裡面的時候，就不會有這樣的問題了。
3、插畫該怎麼交付？
如果我們的設計裡面包含了插畫，該怎麼交付呢？直接把插畫切圖？
一般在實現的時候插畫使用的都是png的圖片格式，只要切圖基本沒什麼大毛病，只是如何切圖才能保證實現效果最好，適配的時候不會產生形變等，這才是比較重要的問題。
因為插畫的使用場景太多了，舉一個啟動頁的例子，觸類旁通，基本原則是一致的，那就是讓前端更好地落地。
啟動頁的插畫比較大的問題是適配的問題，手機屏幕尺寸太多，很難做到一稿適配所有，所以啟動頁在切圖的時候有兩種情況，第一種是整屏，如果是整屏的話，比如下面這種，基本只能儘量一稿適配，特殊機型另外調整一稿出來。
但是如果是下面這種的話，如果沒有一個好的適配規則，那麼就可能出現不同手機相差太大的情況。
有幾種適配方法：
1）
適配方法：插畫到頂部的距離一定
問題：部分手機可能出現大量空白
2）
適配方法：把插畫和文字一起整屏切圖，寬度適配，高度自適應
問題：部分手機可能看不到文字
以上兩種都不是最佳方案，比較推薦的方法是按比例適配。
我們可以將屏幕分為兩部分：插畫區域A，文字區域B
適配方法：
- 保持為 A : B 比例在任何屏幕下都一致
- 插畫適配：寬度跟隨屏幕，高度自適應
- 插畫距離A上下比例 b : c 不變
- 文字適配則保持與區域B上下垂直居中即可
4、不要忘記梳理多狀態
記得我最開始做設計的時候也經常忘記梳理多狀態，導致前端做到中途老是跑來問我或者是實現出來發現有很多問題。這樣的情況多了會給別人一種不專業的印象，於自己於項目都不利。所以後面在設計中我儘量把所有的情況都考慮到，一來是想把自己接手的事情做到滴水不漏，二來也讓別人覺得你是一個專業的設計師，只有贏得別人的尊重才能與別人平等交流。
我們都知道一個產品不管是移動端還是web端，所包含的狀態都不可能一成不變，比如文字有長有短，圖片有一張也有多張或者沒有圖片，輸入框有默認狀態也有輸入狀態等等，這些所有狀態不管是樣式還是交互都需要我們定義好，前端小哥哥才能依據我們的設計實現出來，如果我們不知道怎麼定義或者忘了定義，就會出現兩種情況，第一種是前端根據自己的想法隨意實現，第二種是前端不斷地來問我們這裡那裡該怎麼做，如果這兩種情況出現了，不是前端的鍋，是我們沒有把工作做到位，我們該檢討。
我個人的習慣是做完了之後進行交互/UI自查，這樣能夠檢查出自己有沒有遺漏哪些東西。
下面就幾種我們在設計過程中比較容易忽略的幾個地方來講解。
4.1 輸入框
輸入框可以說是最常用的組件之一了，幾乎所有產品都會使用到輸入框，所以輸入框的定義一定不能忽略。
4.2 文字長度
文字部分也是比較容易忽略的地方，我們在設計的時候往往都是按照比較好看的段落來做的，但是上線後效果卻不如預期，為什麼呢，因為如果是用戶上傳或者運營的內容，我們很難控制字數，雖說可以強制控制，比如截斷，可是有些地方的文字對用戶比較重要，就不能截斷，遇到這些地方的時候就要思考該如何適配，以及把所有的情況都羅列出來，方便前端查看。
舉一個例子，我接手的一個項目中有這樣一個版塊，按照時間順序展示用戶的檢修信息，包含檢修人、單位，以及上傳的文件，文件可以點擊查看。因為用戶明確表示這裡的檢修文件名稱很重要，而且手機上打開文件的體驗並不佳，所以需要用文件名來輔助用戶判斷這是一份什麼文件，所以這裡文件名稱必須完全展示。
文件名稱大部分不會超過一行， 但是凡事無絕對，而且用戶取的名字也不可控，所以這裡就必須考慮到文件名稱的長度問題，在做設計的時候就不能只把一行文字的狀態展示出來，而要把所有狀態都考慮到。
可以看下圖中的適配方案，這些適配和所有狀態我們都必須梳理好之後交付給前端。
最後最後，總結起來就一句話，站在開發的角度思考，多和開發溝通。基本上能進解決80%的問題。
閱讀更多 北京設計小白 的文章
