適配落地，讓開發小哥哥看懂最重要
對UI設計師而言，你不僅需要好的視覺和交互設計能力，同時還需要具備和開發或前端之間的溝通能力、推進界面設計的落地能力。
而開發小哥哥每天面對代碼是相當忙，如果這時候我們提供的標註和適配有模糊不清的地方，這樣就會導致無盡的溝通。因此適配落地，讓開發小哥哥看懂最重要，接下里我將從三個方面和大家進行分享：
1、為什麼要掌握適配知識
2、組件適配三大規則
3、圖片適配注意要點
為什麼要掌握適配知識
前段時間有一個UI設計朋友找我，想我問我如何能夠提高設計能力。於是我讓他發一個界面給我，主要看他現在處於什麼水平，當他把他的界面發過來後，我發現了很多基礎性錯誤，設計相當不規範。於是我給他說，讓他去臨摹一些大廠的設計並要求進行標註，主要目的是讓他感受下別人的設計規範。然後他就去臨摹了優酷的首頁，同時標註得也是「特別全」，如下圖：
他標註的圖我暫時不做說明，問題比較多。下面主要來看看我和他的微信對話內容。大概意思就是他標註出來之後，有很多地方都需要去和開發進行溝通才能夠確定，當我問他圖標區域是如何適配的，他說的也比較含糊，最後直接說讓開發自己去適配。
上面的對話，如果他們技術看見不知道有何感想？其實有很多設計師和我這位朋友一樣，多表現為剛畢業1-2年的同學比較多，他們存在一個常見的錯誤觀念——適配是開發或者前端的事兒！
如果設計師這樣想的後果就是，設計師與技術之間就需要反覆溝通與調試，並不是說不可以，但這無疑是一個低效的工作方式。
設計應該掌握適配知識
在正常的工作流程中，不管是網頁設計、平面設計，都需要設計師對最終效果進行驗收。
比如上圖如果落地效果好，自然沒問題。如果落地效果差就需要設計師協助技術完成一系列的問題調試。此時，為了達成良好的協作溝通，設計師自然需要掌握一些前端知識或印刷知識。
因此作為UI設計師，不僅需要了解一點前端知識，更要了解一些適配知識。不知道適配知識，在和技術溝通的時候必然會存在障礙。
比如上圖的標註就是文章開頭說的那位UI朋友標註的。從圖上面看，他將頭像大小標註清楚了，同時圖片之間的間距也標註清楚了，如果不需要跨機型適配的話這樣標註沒有問題。但是如果換一個機型，屏幕寬度改變後，應該如何去適配呢？
因此為了項目的落地效果能夠高度還原設計稿，那設計是肯定需要掌握適配知識的。
前端應該掌握適配知識
當然作為前端也是需要掌握適配知識的，首先你要把界面寫出來，同時還要去適配各種機型，這本身就需要你了解適配知識。同時當你遇到這種「不懂」適配的設計師時，可以避免因溝通理解不同，導致界面反覆調整的情況。
還是以我這個朋友標註的圖標區域為例，如果是按照他上面的標註，技術在理解的時候可能會有三種方案：圖標尺寸固定，間距自適應；間距固定，圖標尺寸自適應；整體等比縮放。
這時候你也不確定用那種，肯定就會找設計進行溝通。但是設計也不太懂啊，讓你自己適配，這時候你千萬不要聽他的自己去適配去，最後上線效果如果不是他想要的，那麼讓你返工的幾率就很大了。這時候你就可以分別給他說下有哪些方案，常見的使用場景是什麼。這樣可以大大的降低後期反覆調整的情況。下面我就用這三個方案舉個列子。
方案一：圖標尺寸固定，間距自適應。
該方案就是在同一倍率下，圖標的尺寸固定不變，間距隨著屏幕寬度的變化而變化，該方案的優勢就是適配成本較低，同時在各大機型中表現良好。目前大多數APP都是採用這種適配方式。
比如餓了么他就是採用這種適配方式，圖標大小不變，間距隨著屏幕寬度而變化。因此比較推薦這種適配方式。
方案二：間距固定，圖標尺寸自適應
該方案同樣在同一倍率下，間距的尺寸固定不變，圖標隨著屏幕寬度的變化而變化，該方案適配成本也較低。有個缺點就是當從小屏適配到大屏時，圖片展示就會模糊，影響用戶的閱讀體驗。我們常處理的方式就是將圖標切大一點，這無疑會增加圖片大小，最終導致安裝包過大。
比如優酷視頻，他就是採用了間距固定，圖標尺寸自適應，這樣的好處就是在大屏手機中可以避免圖標展示過小的問題。
方案三：整體等比縮放
縮放的適配方案主要針對圖片和以圖片為主的整體界面，在適配中往往需要針對不同機型的尺寸上獲取不一樣的圖片資源，以保證放大後圖片的清晰度。該方式適配成本高，同時對於機型的兼容性不太好，需要針對某個機型進行單獨調整。
比如我們常用的淘寶就是採用整體等比縮放的方式。從圖可以看到除了導航欄和標籤欄，整個界面元素包括圖標、圖片、文字都採用750/640的比例進行縮放。在就需要針對不同屏幕尺寸切多套圖進行使用，因此該方式對於普通APP來說並不適用。
你向上面一樣給設計師說了，最後他也會樂意聽你的推薦，這樣就降低後期反覆調整的情況。
當然作為測試和後台開發，也是推薦了解一些適配知識，這樣你們也可以了解我們的工作機制，可以幫助我們在溝通時能夠高效進行。
適配三原則
上面說了適配的重要性，針對屏幕適配規則和適配相關知識點物理像素、邏輯像素、渲染像素等知識點這裡就不提了。
這裡主要和大家分享一下組件適配規則，這樣大家可以更好的了解我們的工作機制，從而方便提高彼此的協作能力。我們設計時主要考慮組件適配，它需要遵循以下三個適配原則：
等比縮放
等比縮放也就是指元素的尺寸不固定，隨著屏幕尺寸的變化而變化。常用於banner圖、產品圖的適配中。如圖，騰訊視頻視頻首頁的banner圖和視頻圖片都是採用16：9的比例。在適配中不管屏幕尺寸如何變化，都始終保持這個比例。
同時，少部分的圖標適配也會有間距不變、圖標等比例縮放的形式。
比如上文說的優酷圖標部分的適配，不管是640還是750的界面，他們的間距都是一樣的，唯一的區別就是圖標大小不同。該適配方式在一般App中較少使用。多用在對圖片質量要求較高的App中。
彈性控制項
彈性控制項是指組件尺寸不變，間距根據屏幕寬度而變化，就如同彈簧一樣。
1、普通列表，間距變化
比如餓了么，對比640和750的界面可以看出，其左右間距圖標和文字間間距都相等，而隨著屏幕寬度不斷變化，中間的間距變大。
2、橫向滑動列表
比如愛奇藝的導航，這種適配方式也較為常見，屏幕越寬，展示的導航數越多。
文字流
文字流指在多行文字的情況下，文字數量變化會影響界面布局和元素大小。在文字相同情況下，屏幕越寬段落文字行數越少。
比如小米商城，在相同文字數量下，750的屏幕尺寸展示4行文字，640點尺寸展示5行文字。
圖片適配注意事項
圖片在適配時，除了上面說的等比縮放的方式排版的適配外，還有具體的圖片如何適配到規定的比例框架里。圖片常見的適配方式有三種：
圖片全部展示；等比縮放適配最長邊；等比縮放適配最小邊。
圖片全部展示
圖片全部展示也就是不管你上傳的圖片尺寸是橫圖還是豎圖，直接將圖片進行拉伸到圖片布局框架中。
這樣的好處就是圖片信息不會丟失，但是圖片拉伸嚴重影響美觀，一般展示性App不建議採用該方式。但是特殊頁面比如榮譽資質就可以採用該方式進行適配，一遍保證信息能夠全部展示。如下圖：
等比縮放適配最長邊
採用該種方式圖片的信息可以完全展示，同時圖片也不會被拉伸，但是其缺點就是會導致圖片區域撐不滿，影響用戶視覺體驗，該方式不建議使用。如下圖：
等比縮放適配最短邊
採用該種方式圖片的信息可以完全展示，同時圖片也不會被拉伸，同時還能夠將圖片撐滿，不影響用戶視覺體驗，因此在適配中常常用該適配方式。如下圖：
總結
今天分享了3個方面的內容，為什麼要了解適配知識；適配三原則；以及圖片適配的注意事項。其主要目的就是想讓大家了解我們的工作機制，從而在日後的工作中可以能夠更好的協作。
推薦閱讀：