對(duì)于一名好的UI設(shè)計(jì)師來說，具備優(yōu)秀的視覺和交互設(shè)計(jì)能力十分重要，但同時(shí)，具備和開發(fā)或前端之間的溝通能力、推進(jìn)界面設(shè)計(jì)的落地能力也是非常必要的。

對(duì)UI設(shè)計(jì)師而言，你不僅需要好的視覺和交互設(shè)計(jì)能力，同時(shí)還需要具備和開發(fā)或前端之間的溝通能力、推進(jìn)界面設(shè)計(jì)的落地能力。而開發(fā)小哥哥每天面對(duì)代碼是相當(dāng)忙，如果這時(shí)候我們提供的標(biāo)注和適配有模糊不清的地方，這樣就會(huì)導(dǎo)致無盡的溝通。

因此適配落地，讓開發(fā)小哥哥看懂最重要，接下里我將從三個(gè)方面和大家進(jìn)行分享：

1. 為什么要掌握適配知識(shí)？
2. 組件適配三大規(guī)則；
3. 圖片適配注意要點(diǎn)。

一、為什么要掌握適配知識(shí)？

前段時(shí)間有一個(gè)UI設(shè)計(jì)朋友找我，想我問我如何能夠提高設(shè)計(jì)能力。于是我讓他發(fā)一個(gè)界面給我，主要看他現(xiàn)在處于什么水平，當(dāng)他把他的界面發(fā)過來后，我發(fā)現(xiàn)了很多基礎(chǔ)性錯(cuò)誤，設(shè)計(jì)相當(dāng)不規(guī)范。

于是我給他說，讓他去臨摹一些大廠的設(shè)計(jì)并要求進(jìn)行標(biāo)注，主要目的是讓他感受下別人的設(shè)計(jì)規(guī)范。然后他就去臨摹了優(yōu)酷的首頁，同時(shí)標(biāo)注得也是“特別全”。

如下圖：

他標(biāo)注的圖我暫時(shí)不做說明，問題比較多。下面主要來看看我和他的微信對(duì)話內(nèi)容：

大概意思就是他標(biāo)注出來之后，有很多地方都需要去和開發(fā)進(jìn)行溝通才能夠確定，當(dāng)我問他圖標(biāo)區(qū)域是如何適配的，他說的也比較含糊，最后直接說讓開發(fā)自己去適配。

上面的對(duì)話，如果他們技術(shù)看見不知道有何感想？

其實(shí)有很多設(shè)計(jì)師和我這位朋友一樣，多表現(xiàn)為剛畢業(yè)1、2年的同學(xué)比較多，他們存在一個(gè)常見的錯(cuò)誤觀念——適配是開發(fā)或者前端的事兒！

如果設(shè)計(jì)師這樣想的后果就是，設(shè)計(jì)師與技術(shù)之間就需要反復(fù)溝通與調(diào)試，并不是說不可以，但這無疑是一個(gè)低效的工作方式。

1. 設(shè)計(jì)應(yīng)該掌握適配知識(shí)

在正常的工作流程中，不管是網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)，都需要設(shè)計(jì)師對(duì)最終效果進(jìn)行驗(yàn)收。

比如：上圖如果落地效果好，自然沒問題。如果落地效果差就需要設(shè)計(jì)師協(xié)助技術(shù)完成一系列的問題調(diào)試。

此時(shí)，為了達(dá)成良好的協(xié)作溝通，設(shè)計(jì)師自然需要掌握一些前端知識(shí)或印刷知識(shí)。

因此作為UI設(shè)計(jì)師，不僅需要了解一點(diǎn)前端知識(shí)，更要了解一些適配知識(shí)。不知道適配知識(shí)，在和技術(shù)溝通的時(shí)候必然會(huì)存在障礙。

比如：上圖的標(biāo)注就是文章開頭說的那位UI朋友標(biāo)注的。

從圖上面看，他將頭像大小標(biāo)注清楚了，同時(shí)圖片之間的間距也標(biāo)注清楚了，如果不需要跨機(jī)型適配的話這樣標(biāo)注沒有問題。

但是如果換一個(gè)機(jī)型，屏幕寬度改變后，應(yīng)該如何去適配呢？因此為了項(xiàng)目的落地效果能夠高度還原設(shè)計(jì)稿，那設(shè)計(jì)是肯定需要掌握適配知識(shí)的。

2. 前端應(yīng)該掌握適配知識(shí)

當(dāng)然作為前端也是需要掌握適配知識(shí)的，首先你要把界面寫出來，同時(shí)還要去適配各種機(jī)型，這本身就需要你了解適配知識(shí)。

同時(shí)當(dāng)你遇到這種“不懂”適配的設(shè)計(jì)師時(shí)，可以避免因溝通理解不同，導(dǎo)致界面反復(fù)調(diào)整的情況。

還是以我這個(gè)朋友標(biāo)注的圖標(biāo)區(qū)域?yàn)槔?，如果是按照他上面的?biāo)注，技術(shù)在理解的時(shí)候可能會(huì)有三種方案：

• 圖標(biāo)尺寸固定，間距自適應(yīng)；
• 間距固定，圖標(biāo)尺寸自適應(yīng)；
• 整體等比縮放。

這時(shí)候你也不確定用那種，肯定就會(huì)找設(shè)計(jì)進(jìn)行溝通。但是設(shè)計(jì)也不太懂啊，讓你自己適配，這時(shí)候你千萬不要聽他的自己去適配去，最后上線效果如果不是他想要的，那么讓你返工的幾率就很大了。

這時(shí)候你就可以分別給他說下有哪些方案，常見的使用場(chǎng)景是什么。這樣可以大大的降低后期反復(fù)調(diào)整的情況。

下面我就用這三個(gè)方案舉個(gè)列子：

方案一：圖標(biāo)尺寸固定，間距自適應(yīng)。該方案就是在同一倍率下，圖標(biāo)的尺寸固定不變，間距隨著屏幕寬度的變化而變化，該方案的優(yōu)勢(shì)就是適配成本較低，同時(shí)在各大機(jī)型中表現(xiàn)良好。

目前大多數(shù)APP都是采用這種適配方式。

比如：餓了么他就是采用這種適配方式，圖標(biāo)大小不變，間距隨著屏幕寬度而變化。因此比較推薦這種適配方式。

方案二：間距固定，圖標(biāo)尺寸自適應(yīng)該方案同樣在同一倍率下，間距的尺寸固定不變，圖標(biāo)隨著屏幕寬度的變化而變化，該方案適配成本也較低。

有個(gè)缺點(diǎn)就是當(dāng)從小屏適配到大屏?xí)r，圖片展示就會(huì)模糊，影響用戶的閱讀體驗(yàn)。我們常處理的方式就是將圖標(biāo)切大一點(diǎn)，這無疑會(huì)增加圖片大小，最終導(dǎo)致安裝包過大。

比如：優(yōu)酷視頻，他就是采用了間距固定，圖標(biāo)尺寸自適應(yīng)，這樣的好處就是在大屏手機(jī)中可以避免圖標(biāo)展示過小的問題。

方案三：整體等比縮放縮放的適配方案主要針對(duì)圖片和以圖片為主的整體界面，在適配中往往需要針對(duì)不同機(jī)型的尺寸上獲取不一樣的圖片資源，以保證放大后圖片的清晰度。

該方式適配成本高，同時(shí)對(duì)于機(jī)型的兼容性不太好，需要針對(duì)某個(gè)機(jī)型進(jìn)行單獨(dú)調(diào)整。

比如：我們常用的淘寶就是采用整體等比縮放的方式。從圖可以看到除了導(dǎo)航欄和標(biāo)簽欄，整個(gè)界面元素包括圖標(biāo)、圖片、文字都采用750/640的比例進(jìn)行縮放。

在就需要針對(duì)不同屏幕尺寸切多套圖進(jìn)行使用，因此該方式對(duì)于普通APP來說并不適用。

你向上面一樣給設(shè)計(jì)師說了，最后他也會(huì)樂意聽你的推薦，這樣就降低后期反復(fù)調(diào)整的情況。

當(dāng)然作為測(cè)試和后臺(tái)開發(fā)，也是推薦了解一些適配知識(shí)，這樣你們也可以了解我們的工作機(jī)制，可以幫助我們?cè)跍贤〞r(shí)能夠高效進(jìn)行。

二、適配三原則

上面說了適配的重要性，針對(duì)屏幕適配規(guī)則和適配相關(guān)知識(shí)點(diǎn)物理像素、邏輯像素、渲染像素等知識(shí)點(diǎn)這里就不提了。

這里主要和大家分享一下組件適配規(guī)則，這樣大家可以更好的了解我們的工作機(jī)制，從而方便提高彼此的協(xié)作能力。

我們?cè)O(shè)計(jì)時(shí)主要考慮組件適配，它需要遵循以下三個(gè)適配原則：

1. 等比縮放

等比縮放也就是指元素的尺寸不固定，隨著屏幕尺寸的變化而變化。常用于banner圖、產(chǎn)品圖的適配中。

如圖：騰訊視頻視頻首頁的banner圖和視頻圖片都是采用16：9的比例。在適配中不管屏幕尺寸如何變化，都始終保持這個(gè)比例。

同時(shí)，少部分的圖標(biāo)適配也會(huì)有間距不變、圖標(biāo)等比例縮放的形式。

比如：上文說的優(yōu)酷圖標(biāo)部分的適配，不管是640還是750的界面，他們的間距都是一樣的，唯一的區(qū)別就是圖標(biāo)大小不同。該適配方式在一般App中較少使用。多用在對(duì)圖片質(zhì)量要求較高的App中。

2. 彈性控件

彈性控件是指組件尺寸不變，間距根據(jù)屏幕寬度而變化，就如同彈簧一樣。

普通列表，間距變化：

比如：餓了么，對(duì)比640和750的界面可以看出，其左右間距圖標(biāo)和文字間間距都相等，而隨著屏幕寬度不斷變化，中間的間距變大。

橫向滑動(dòng)列表比如愛奇藝的導(dǎo)航，這種適配方式也較為常見，屏幕越寬，展示的導(dǎo)航數(shù)越多。

3. 文字流

文字流指在多行文字的情況下，文字?jǐn)?shù)量變化會(huì)影響界面布局和元素大小。在文字相同情況下，屏幕越寬段落文字行數(shù)越少。

比如：小米商城，在相同文字?jǐn)?shù)量下，750的屏幕尺寸展示4行文字，640點(diǎn)尺寸展示5行文字。

三、圖片適配注意事項(xiàng)

圖片在適配時(shí)，除了上面說的等比縮放的方式排版的適配外，還有具體的圖片如何適配到規(guī)定的比例框架里。

圖片常見的適配方式有三種：

• 圖片全部展示；
• 等比縮放適配最長邊；
• 等比縮放適配最小邊；

1. 圖片全部展示

圖片全部展示也就是不管你上傳的圖片尺寸是橫圖還是豎圖，直接將圖片進(jìn)行拉伸到圖片布局框架中。

這樣的好處就是圖片信息不會(huì)丟失，但是圖片拉伸嚴(yán)重影響美觀，一般展示性App不建議采用該方式。但是特殊頁面比如榮譽(yù)資質(zhì)就可以采用該方式進(jìn)行適配，一遍保證信息能夠全部展示。

如下圖：

2. 等比縮放適配最長邊

采用該種方式圖片的信息可以完全展示，同時(shí)圖片也不會(huì)被拉伸，但是其缺點(diǎn)就是會(huì)導(dǎo)致圖片區(qū)域撐不滿，影響用戶視覺體驗(yàn)，該方式不建議使用。

如下圖：

等比縮放適配最短邊采用該種方式圖片的信息可以完全展示，同時(shí)圖片也不會(huì)被拉伸，同時(shí)還能夠?qū)D片撐滿，不影響用戶視覺體驗(yàn)，因此在適配中常常用該適配方式。

如下圖：

總結(jié)：今天分享了3個(gè)方面的內(nèi)容，為什么要了解適配知識(shí)；適配三原則；以及圖片適配的注意事項(xiàng)。其主要目的就是想讓大家了解我們的工作機(jī)制，從而在日后的工作中可以能夠更好的協(xié)作。

作者：風(fēng)箏KK，公眾號(hào)：海鹽社

本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議