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

設計交付對于 UI設計師來說是一項必要的工作流程，設計交付影響著界面的最終實現和各尺寸適配效果。今天就和大家分享一下不同尺寸之間適配的影響。

一、適配不好是開發的責任？

很多剛入門的設計師都對適配有著誤解。認為適配是開發小哥需要做的事，開發小哥需要對各尺寸的適配結果負責任，自己的工作就是把界面設計精美易用。這是非常不專業的想法，界面易用、精美固然重要，但界面最終不是存放于個人電腦中自我欣賞，而是以 app 的形式出現于用戶的手機中，這時你的設計才會揭開神秘的面紗，展示最真實的樣子。所以設計師很有必要配合開發去做還原和適配，進一步的完善產品，這是設計師必須關注和思考的一部分。

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

二、自動化標注，一勞永逸？

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

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

三、文字和圖標

文字作為界面設計中的基礎之一，在設計交付中卻很少單獨提及，因為以 pt 為單位的文字，按照@3x和@2x的設備自動適配相應的大小，隨著屏幕增大或縮小，兩個設備上文字顯示大小幾乎一致。（plus 微大一點點）一屏中能看到的內容就相應的增加減少，有效的突出了大屏手機看更多內容的優勢。

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

并且適配似乎最合乎開發的規范簡單高效，并不會有特殊情況出現。但文字適配不只有這一種方式。

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

這樣的文字適配方式的優勢是，文字和界面的比例關系上更接近于設計圖，同時也一定程度上避免了界面尺寸改變而文字沒變，界面中負空間的增加。這種方式適配的界面往往不只是文字，包括圖片和組件等都會相應的等比縮放，來保持完整的一屏的內容呈現。

所以兩種方式各有其優勢，結合產品的不同頁面內容及特點，采取合適的適配方式，更優質的向用戶展示頁面信息和產品內容。

四、圖片

這里的圖片定義為橫向鋪滿屏幕或基于屏幕橫向大小才確定尺寸的圖片，常見如 banner、背景圖等。

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

這是因為開發在寫這個版塊的時候，高度寫了固定，寬度隨屏幕拉伸，而高度適配X 1.5倍也小于等比拉伸之后的高度。所以圖片被壓扁。

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

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

五、組件

組件這一概念在本文中是一個比較概括的說法，它是指由多個元素組成的頁面的某一板塊，它可以是金剛區，可以是頭像列表，也可以是一組 x軸滑動卡片。組件是豐富多變的，不同的產品有不同的目的不同樣式的組件版塊。所以豐富的組件版塊在適配時也同樣有著多樣的適配方式。

1. 內容間距等比縮放

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

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

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

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

這樣的適配方式，保持一定的空白和距離，避免過度擁擠和過于松散。

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

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

總結

很多情況下適配方式不止一種，設計交付全部依靠全自動化標注也無法表達清楚，設計師如果沒有思考頁面適合的適配方式或在交付時沒有傳達清楚，那開發只會依照他擅長和經驗來處理。等到驗收時再修改只會更加費時費力，多數都會選擇下次迭代優化，然后就會不了了之。

所以設計師在設計時應思考不同板塊和頁面適合的適配方式，并通過文字描述的方式在自動化標注工具中備注，準確的將適配思路傳遞給開發。只有在設計時多一步思考；交付時多一步傳達，才會在不同尺寸的設備適配中得到完美的產品。

歡迎關注作者的微信公眾號：「約克想說」

圖片素材作者：Tiago Machado

「讓設計效果百分百還原」

• 《免費下載！騰訊設計師研發的視覺還原走查神器「他山石」》
• 《實用干貨！視覺設計師如何讓設計效果高還原度落地？》
• 《把買家秀變成賣家秀？這四個方法幫你百分百還原UI設計稿！》
• 《實戰五步走！UI設計師如何讓設計稿100％還原？》