很多剛?cè)腴T的設(shè)計師都對適配有著誤解。認(rèn)為適配是開發(fā)小哥需要做的事，開發(fā)小哥需要對各尺寸的適配結(jié)果負(fù)責(zé)任，自己的工作就是把界面設(shè)計精美易用。這是非常不專業(yè)的想法，界面易用、精美固然重要，但界面最終不是存放于個人電腦中自我欣賞，而是以 app 的形式出現(xiàn)于用戶的手機(jī)中，這時你的設(shè)計才會揭開神秘的面紗，展示最真實的樣子。所以設(shè)計師很有必要配合開發(fā)去做還原和適配，進(jìn)一步的完善產(chǎn)品，這是設(shè)計師必須關(guān)注和思考的一部分。
我個人是對開發(fā)實現(xiàn)的最終效果比較在意的，我的上一篇文章《用這個免費(fèi)的 Sketch 插件，幫你完美還原安卓界面！》中提到的問題，就是在數(shù)次拿到測試機(jī)后生無可戀的茫然中發(fā)誓要解決的。上篇文章解決了設(shè)計交付后的頁面還原的問題，今天我就和大家分享一下設(shè)計交付對于不同尺寸之間適配的影響（iOS）。
截止到目前來看，自動化標(biāo)注已經(jīng)非常的智能和普及，很大一部分設(shè)計師都積極地邁進(jìn)了自動化標(biāo)注工具的大門，從此，告別加班。我不否認(rèn)自動化標(biāo)注所帶來的設(shè)計交付效率的提升和人工的解放，但在這高效的背后，少了一次自我審核的過程，就更要求設(shè)計師在設(shè)計界面時對尺寸、間距的把控，缺少了對頁面還原把控的這次機(jī)會，所有設(shè)計元素、尺寸、間距等都交由開發(fā)自主掌控。并且在很大程度上降低了設(shè)計師對界面還原和適配結(jié)果的責(zé)任心，忽略了自動化標(biāo)注對不同尺寸設(shè)備適配帶來的不確定性。
接下來我會從文字和圖標(biāo)、圖片、組件等維度來分析一下，為什么不同尺寸設(shè)備之間的適配，無法用自動化標(biāo)注描述清楚。以及應(yīng)該如何做正確全面的設(shè)計交付。
文字作為界面設(shè)計中的基礎(chǔ)之一，在設(shè)計交付中卻很少單獨(dú)提及，因為以 pt 為單位的文字，按照@3x和@2x的設(shè)備自動適配相應(yīng)的大小，隨著屏幕增大或縮小，兩個設(shè)備上文字顯示大小幾乎一致。（plus 微大一點(diǎn)點(diǎn)）一屏中能看到的內(nèi)容就相應(yīng)的增加減少，有效的突出了大屏手機(jī)看更多內(nèi)容的優(yōu)勢。
△ 手機(jī)為拍攝，為了界面清晰屏幕部分使用截圖，下同。
并且適配似乎最合乎開發(fā)的規(guī)范簡單高效，并不會有特殊情況出現(xiàn)。但文字適配不只有這一種方式。
還有一種就是文字大小根據(jù)屏幕比例進(jìn)行放大，在2倍圖適配3倍圖需要*1.5的基礎(chǔ)上，再乘以兩個屏幕的比例倍數(shù)，得到一個根據(jù)屏幕比例縮放后的文字。兩設(shè)備上文字大小有明顯區(qū)別，肉眼可見。
這樣的文字適配方式的優(yōu)勢是，文字和界面的比例關(guān)系上更接近于設(shè)計圖，同時也一定程度上避免了界面尺寸改變而文字沒變，界面中負(fù)空間的增加。這種方式適配的界面往往不只是文字，包括圖片和組件等都會相應(yīng)的等比縮放，來保持完整的一屏的內(nèi)容呈現(xiàn)。
所以兩種方式各有其優(yōu)勢，結(jié)合產(chǎn)品的不同頁面內(nèi)容及特點(diǎn)，采取合適的適配方式，更優(yōu)質(zhì)的向用戶展示頁面信息和產(chǎn)品內(nèi)容。
這里的圖片定義為橫向鋪滿屏幕或基于屏幕橫向大小才確定尺寸的圖片，常見如 banner、背景圖等。
這些圖片如果在設(shè)計交付時沒有對背景圖的適配方式進(jìn)行一些特殊要求強(qiáng)調(diào)，那開發(fā)默認(rèn)寫出來的在3倍圖中就會出現(xiàn)圖片壓扁的情況，
這是因為開發(fā)在寫這個版塊的時候，高度寫了固定，寬度隨屏幕拉伸，而高度適配X 1.5倍也小于等比拉伸之后的高度。所以圖片被壓扁。
如果是簡單漸變細(xì)節(jié)微小的背景被壓扁也還可以接受，但是如 banner 等這種圖片內(nèi)容豐富，呈現(xiàn)質(zhì)量要求高的圖，就不能用默認(rèn)的適配方式了，對于這種類型的圖片，適配時要保持圖片的寬高比，等比縮放。
但等比縮放又帶來了一個新的問題，那就是作為背景的圖片等比拉伸后高度較之于設(shè)計圖要增加一些，這時背景上文字和文字間隙，就需要相應(yīng)的進(jìn)行調(diào)整，以免背景增大負(fù)空間增多。這也在一定程度上增加了開發(fā)的工作量，所以在設(shè)計交付時要選擇適合不同頁面的圖片適配方式，做到時間和效果的平衡。
組件這一概念在本文中是一個比較概括的說法，它是指由多個元素組成的頁面的某一板塊，它可以是金剛區(qū)，可以是頭像列表，也可以是一組 x軸滑動卡片。組件是豐富多變的，不同的產(chǎn)品有不同的目的不同樣式的組件版塊。所以豐富的組件版塊在適配時也同樣有著多樣的適配方式。
1. 內(nèi)容間距等比縮放
這種適配方式保持了設(shè)計稿的整體比例關(guān)系，還原度高，比例視覺舒服。
2. 內(nèi)容尺寸固定、間距自適應(yīng)
這樣的適配方式是大多數(shù)開發(fā)默認(rèn)會選擇的方式，因為內(nèi)容大小固定后，內(nèi)容數(shù)量按照屏幕等分，實現(xiàn)起來簡單快捷。
3. 內(nèi)容尺寸自適應(yīng)、間距固定不變
這樣的適配方式，保持一定的空白和距離，避免過度擁擠和過于松散。
4. 內(nèi)容尺寸不變，間距不變，數(shù)量自適應(yīng)
這種適配方式有利于突顯大屏幕的優(yōu)勢，一屏內(nèi)展示內(nèi)容更多，當(dāng)屏幕尺寸變化，展示內(nèi)容就相應(yīng)的變化。
很多情況下適配方式不止一種，設(shè)計交付全部依靠全自動化標(biāo)注也無法表達(dá)清楚，設(shè)計師如果沒有思考頁面適合的適配方式或在交付時沒有傳達(dá)清楚，那開發(fā)只會依照他擅長和經(jīng)驗來處理。等到驗收時再修改只會更加費(fèi)時費(fèi)力，多數(shù)都會選擇下次迭代優(yōu)化，然后就會不了了之。
所以設(shè)計師在設(shè)計時應(yīng)思考不同板塊和頁面適合的適配方式，并通過文字描述的方式在自動化標(biāo)注工具中備注，準(zhǔn)確的將適配思路傳遞給開發(fā)。只有在設(shè)計時多一步思考；交付時多一步傳達(dá)，才會在不同尺寸的設(shè)備適配中得到完美的產(chǎn)品
