你真的作好「設計交付」了嗎？

設計交付

前言

設計交付對於UI設計師來講是一項必要的工做流程，設計交付影響着界面的最終實現和各尺寸適配效果。

適配很差是開發的責任？

不少剛入門的設計師都對適配有着誤解。認爲適配是開發小哥須要作的事，開發小哥須要對各尺寸的適配結果負責任，本身的工做就是把界面設計精美易用。這是很是不專業的想法，界面易用、精美當然重要，但界面最終不是存放於我的電腦中自我欣賞，而是以app的形式出現於用戶的手機中，這是你的設計纔會揭開神祕的面紗，展現最真實的樣子。因此設計師頗有必要配合開發去作還原和適配，進一步的完善產品，這是設計師必須關注和思考的一部分。

我我的是對開發實現的最終效果比較在乎的人，個人上一篇文章《這款sketch插件，幫你完美還原安卓界面》的提到的問題，就是在數次拿到測試機後生無可戀的茫然中發誓要解決的。上篇文章解決了設計交付後的頁面還原的問題，今天我就和你們分享一下設計交付對於不一樣尺寸之間的適配的影響（ios）

自動化標註，一勞永逸？

截止到目前來看，自動化標註已經很是的智能和普及，很大一部分設計師都積極地邁進了自動化標註工具的大門，今後，告別加班。我不否定自動化標註所帶來的設計交付效率的提高和人工的解放，但在這高效的背後，少了一次自我審覈的過程，就更要求設計師在設計界面時對尺寸、間距的把控，缺乏了對頁面還原把控的此次機會，全部設計元素、尺寸、間距等都交由開發自主掌控。而且在很大程度上下降了設計師對界面還原和適配結果的責任心，忽略了自動化標註對不一樣尺寸設備適配帶來的不肯定性。

接下來我會從文字和圖標、圖片、組件等維度來分析一下，爲何不一樣尺寸設備之間的適配，沒法用自動化標註描述清楚。以及應該如何作正確全面的設計交付。

文字和圖標

文字做爲界面設計中的基礎之一，在設計交付中卻不多單獨說起，由於以pt爲單位的文字，按照@3x和@2x的設備自動適配相應的大小，隨着屏幕增大或縮小，兩個設備上文字顯示大小几乎一致。（plus微大一點點）一屏中能看到的內容就相應的增長減小，有效的突出了大屏手機看更多內容的優點。

（手機爲拍攝，爲了界面清晰屏幕部分使用截圖，下同。）

而且適配彷佛最合乎開發的規範簡單高效，並不會有特殊狀況出現。但文字適配不僅有這一種方式。

還有一種就是文字大小根據屏幕比例進行放大，在2倍圖適配3倍圖須要*1.5的基礎上，再乘以兩個屏幕的比例倍數，獲得一個根據屏幕比例縮放後的文字。兩設備上文字大小有明顯區別，肉眼可見。

這樣的文字適配方式的優點是，文字和界面的比例關係上更接近於設計圖，同時也必定程度上避免了界面尺寸改變而文字沒變，界面中負空間的增長。這種方式適配的界面每每不僅是文字，包括圖片和組件等都會相應的等比縮放，來保持完整的一屏的內容呈現。 因此兩種方式各有其優點，結合產品的不一樣頁面內容及特色，採起合適的適配方式，更優質的向用戶展現頁面信息和產品內容。

圖片

這裏的圖片定義爲橫向鋪滿屏幕或基於屏幕橫向大小才肯定尺寸的圖片，常見如banner、背景圖等。

這些圖片若是在設計交付時沒有對背景圖的適配方式進行一些特殊要求強調，那開發默（tou）認（lan）寫出來的在3倍圖中就會出現圖片壓扁的狀況，

這是由於開發在寫這個版塊的時候，高度寫了固定，寬度隨屏幕拉伸，而高度適配X1.5倍也小於等比拉伸以後的高度。因此圖片被壓扁。

若是是簡單漸變細節微小的背景被壓扁也還能夠接受，可是如banner等這種圖片內容豐富，呈現質量要求高的圖，就不能用默認的適配方式了，對於這種類型的圖片，適配時要保持圖片的寬高比，等比縮放。

但等比縮放又帶來了一個新的問題，那就是做爲背景的圖片等比拉伸後高度較之於設計圖要增長一些，這時背景上文字和文字間隙，就須要相應的進行調整，以避免背景增大負空間增多。這也在必定程度上增長了開發的工做量，因此在設計交付時要選擇適合不一樣頁面的圖片適配方式，作到時間和效果的平衡。

組件

組件這一律念是一個比較歸納的說法，它是指由多個元素組成的頁面的某一板塊，它能夠是金剛區，能夠是頭像列表，也能夠是一組x軸滑動卡片。組件是豐富多變的，不一樣的產品有不一樣的目的不一樣樣式的組件版塊。因此豐富的組件版塊在適配時也一樣有着多樣的適配方式。

1、內容間距等比縮放

這種適配方式保持了設計稿的總體比例關係，還原度高，比例視覺舒服。

2、內容尺寸固定、間距自適應

這樣的適配方式是大多數開發默認會選擇的方式，由於內容大小固定後，內容數量按照屏幕等分，實現起來簡單快捷。

3、內容尺寸自適應、間距固定不變

這樣的適配方式，保持必定的空白和距離，避免過分擁擠和過於鬆散。

4、內容尺寸不變，間距不變，數量自適應

這種適配方式有利於突顯大屏幕的優點，一屏內展現內容更多，當屏幕尺寸變化，展現內容就相應的變化。

總結

不少狀況下適配方式不止一種，設計交付所有依靠全自動化標註也沒法表達清楚，設計師若是沒有思考頁面適合的適配方式或在交付時沒有傳達清楚，那開發只會依照他擅長和經驗來處理。等到驗收時再修改只會更加費時費力，多數都會選擇下次迭代優化，而後就會不了了之。 因此設計師在設計時應思考不一樣板塊和頁面適合的適配方式，並經過文字描述的方式在自動化標註工具中備註，準確的將適配思路傳遞給開發。只有在設計時多一步思考；交付時多一步傳達，纔會在不一樣尺寸的設備適配中獲得完美的產品。