中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、為什么要掌握適配知識？

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

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

如下圖：

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

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

上面的對話，如果他們技術看見不知道有何感想？

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

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

1. 設計應該掌握適配知識

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

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

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

因此作為UI設計師，不僅需要了解一點前端知識，更要了解一些適配知識。不知道適配知識，在和技術溝通的時候必然會存在障礙。

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

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

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

2. 前端應該掌握適配知識

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

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

還是以我這個朋友標注的圖標區(qū)域為例，如果是按照他上面的標注，技術在理解的時候可能會有三種方案：

• 圖標尺寸固定，間距自適應；
• 間距固定，圖標尺寸自適應；
• 整體等比縮放。

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

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

下面我就用這三個方案舉個列子：

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

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

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

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

有個缺點就是當從小屏適配到大屏時，圖片展示就會模糊，影響用戶的閱讀體驗。我們常處理的方式就是將圖標切大一點，這無疑會增加圖片大小，最終導致安裝包過大。

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

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

該方式適配成本高，同時對于機型的兼容性不太好，需要針對某個機型進行單獨調(diào)整。

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

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

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

當然作為測試和后臺開發(fā)，也是推薦了解一些適配知識，這樣你們也可以了解我們的工作機制，可以幫助我們在溝通時能夠高效進行。

二、適配三原則

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

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

我們設計時主要考慮組件適配，它需要遵循以下三個適配原則：

1. 等比縮放

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

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

同時，少部分的圖標適配也會有間距不變、圖標等比例縮放的形式。

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

2. 彈性控件

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

普通列表，間距變化：

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

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

3. 文字流

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

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

三、圖片適配注意事項

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

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

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

1. 圖片全部展示

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

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

如下圖：

2. 等比縮放適配最長邊

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

如下圖：

等比縮放適配最短邊采用該種方式圖片的信息可以完全展示，同時圖片也不會被拉伸，同時還能夠將圖片撐滿，不影響用戶視覺體驗，因此在適配中常常用該適配方式。

如下圖：

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

作者：風箏KK，公眾號：海鹽社

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

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