1.主流設(shè)計(jì)圖分為移動(dòng)端虱饿、網(wǎng)頁端2大類，移動(dòng)端有2大系統(tǒng)Android触趴、iOS氮发、網(wǎng)頁端。
2.應(yīng)該選擇哪個(gè)尺寸出圖冗懦，需要出幾套圖爽冕？
基于設(shè)計(jì)和研發(fā)之間的協(xié)作方式。
3.解決這個(gè)問題的核心目標(biāo)：
降低出圖資源披蕉，提升出圖效率颈畸，降低研發(fā)適配成本，減少溝通成本没讲。
4.圍繞這個(gè)目的眯娱，我們想盡可能做到：
1 選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn)；
2 定義一套適配規(guī)則食零，自動(dòng)適配剩下兩種尺寸
5.如何選定一套尺寸用于出圖困乒，選屏原則：
1 選擇主流機(jī)型做設(shè)計(jì)稿樣機(jī)（為了大幅度提高了視覺還原和其他機(jī)型適配）
2 主流大屏幕時(shí)代（如果以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角）
3 選擇中間尺寸（中間尺寸向上和向下適配尺寸差最小贰谣，界面調(diào)整的幅度最小娜搂，最方便適配）
6.蘋果從 iOS 6 開始提供了 Auto Layout（自動(dòng)布局）迁霎，他的作用類似 web 中的 CSS，可以用排版語言對(duì) UIView 進(jìn)行布局百宇，我們只要表達(dá)出 UIView 應(yīng)該靠左考廉、靠右、居中携御、邊距多少等信息昌粤，Auto Layout 根據(jù)設(shè)備尺寸自動(dòng)計(jì)算各 UIView 的 frame。以前 UI 設(shè)計(jì)喜歡用絕對(duì)定位啄刹，因?yàn)?iPhone 6 之前所有 iPhone 的寬度都是 320 points（注意涮坐，不是 pixels）
還有就是 app 的 Launch Image，因?yàn)樵O(shè)備尺寸增多誓军，再結(jié)合橫屏豎屏袱讹，導(dǎo)致的結(jié)果是一個(gè) app 要有 n 多個(gè) Launch Image，iOS 8 開始提供了 Launch Screen 的概念昵时，現(xiàn)在可以用一個(gè) xib 文件來作為 Launch Screen捷雕，然后用 Interface Builder 對(duì) Launch Screen 進(jìn)行設(shè)計(jì)，因?yàn)榭梢允褂?Auto Layout壹甥，所以我們只需要一個(gè) xib 文件都可以應(yīng)對(duì)所有尺寸的 iPhone救巷。
7.
了解各系統(tǒng)、設(shè)備屏幕密度
iOS設(shè)備：實(shí)際項(xiàng)目中句柠，以375ppi（x1920）作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸
以下是iOS的密度劃分以及代表的分辨率：
iOS設(shè)備還原為@1x的ppi對(duì)比圖：
320pt：供iPhone 3G俄占、3GS管怠、4S、5缸榄、5C渤弛、5S使用
375pt：供iPhone 6、6S甚带、7她肯、7S、8鹰贵、8S晴氨、X使用
414pt：供iPhone 6P、7P碉输、8P使用
PS：
iPhone X 適配問題籽前，請(qǐng)參考http://www.mobileui.cn/iphone-x-design-size-and-fit.html
物理版就是iphone 6plus實(shí)際的屏幕像素。
設(shè)計(jì)版就是我們截屏iphone 6plus的界面在ps中去量，發(fā)現(xiàn)的尺寸枝哄。
量出來的分辨率也就是設(shè)計(jì)版要比物理版的分辨率要大肄梨，這可能由于蘋果采用了縮放顯示的。至于放大版挠锥，其實(shí)就是iphone 6的尺寸等比放大1.5倍得出的分辨率众羡。假如不是要求特別高，有時(shí)也可直接用6的尺寸去適配plus蓖租。所以粱侣，我們?cè)O(shè)計(jì)的時(shí)候還是按設(shè)計(jì)版來做。
Android：實(shí)際項(xiàng)目中蓖宦，以480ppi（1080x1920）作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸
以下是Android的密度劃分以及代表的分辨率：
安卓各種機(jī)型越來越多齐婴，適配比較麻煩。為了適配便捷度稠茂，根據(jù)這些屏幕不同的密度自己進(jìn)行適配尔店。
網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)尺寸:
1、800*600下主慰，網(wǎng)頁寬度保持在778以內(nèi)，就不會(huì)出現(xiàn)水平滾動(dòng)條鲫售，高度則視版面和內(nèi)容決定共螺。
2、1024*768下情竹，網(wǎng)頁寬度保持在1002以內(nèi)藐不，如果滿框顯示的話,高度是612-615之間.就不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。(在dw里面有設(shè)定好的標(biāo)準(zhǔn)值, 1024*768頁面的標(biāo)準(zhǔn)大小是955*600,照著它的尺寸做就行了)
3秦效、在ps里面做網(wǎng)頁可以在800*600狀態(tài)下顯示全屏雏蛮，頁面的下方又不會(huì)出現(xiàn)滑動(dòng)條，尺寸為740*560左右
4阱州、在PS里做的圖到了網(wǎng)上就不一樣了挑秉，顏色等等方面，因?yàn)閃EB上面只用到256WEB安全色苔货，而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣犀概，所以自然會(huì)有失色的現(xiàn)象.
頁面標(biāo)準(zhǔn)按800*600分辨率制作，實(shí)際尺寸為778*434px
頁面長(zhǎng)度原則上不超過3屏夜惭，寬度不超過1屏
每個(gè)標(biāo)準(zhǔn)頁面為A4幅面大小姻灶，即8.5X11英寸
全尺寸banner為468*60px，半尺寸banner為234*60px诈茧，小banner為88*31px
另外120*90产喉，120*60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸
每個(gè)非首頁靜態(tài)頁面含圖片字節(jié)不超過60K，全尺寸banner不超過14K
標(biāo)準(zhǔn)網(wǎng)頁廣告尺寸規(guī)格
1、120*120曾沈，這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故尽?/p>
2这嚣、120*60，這種廣告規(guī)格主要用于做LOGO使用晦譬。
3疤苹、120*90，主要應(yīng)用于產(chǎn)品演示或大型LOGO敛腌。
4卧土、125*125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告像樊。
5尤莺、234*60，這種規(guī)格適用于框架或左右形式主頁的廣告鏈接生棍。
6颤霎、392*72，主要用于有較多圖片展示的廣告條涂滴，用于頁眉或頁腳友酱。
7、468*60柔纵，應(yīng)用最為廣泛的廣告條尺寸缔杉，用于頁眉或頁腳。
8搁料、88*31或详，主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO郭计。
廣告形式像素大小最大尺寸備注
BUTTON120*60(必須用gif)7K
215*50(必須用gif)7K
通欄760*100霸琴、430*5025K
15K靜態(tài)圖片或減少運(yùn)動(dòng)效果
超級(jí)通欄 760*100 to 760*200共40K靜態(tài)圖片或減少運(yùn)動(dòng)效果
巨幅廣告336*280、585*12035K
豎邊廣告130*30025K
全屏廣告800*60040K必須為靜態(tài)圖片昭伸，F(xiàn)LASH格式
圖文混排各頻道不同15K
彈出窗口400*300(盡量用gif)40K
BANNER468*60(盡量用gif)18K
懸停按鈕80*80(必須用gif)7K
流媒體300*200(可做不規(guī)則形狀但尺寸不能超過300*200)30K播放時(shí)間 小于5秒60幀(1秒/12幀)
網(wǎng)頁中的廣告尺寸
1梧乘、首頁右上，尺寸120*60
2勋乾、首頁頂部通欄宋下，尺寸468*60
3、首頁頂部通欄辑莫，尺寸760*60
4学歧、首頁中部通欄，尺寸580*60
5各吨、內(nèi)頁頂部通欄枝笨，尺寸468*60
6袁铐、內(nèi)頁頂部通欄，尺寸760*60
7横浑、內(nèi)頁左上剔桨，尺寸150*60或300*300
8、下載地址頁面徙融，尺寸560*60或468*60
9洒缀、內(nèi)頁底部通欄，尺寸760*60
10欺冀、左漂浮树绩，尺寸80*80或100*100
11、右漂浮隐轩，尺寸80*80或100*100
IAB和EIAA發(fā)布新的網(wǎng)絡(luò)廣告尺寸標(biāo)準(zhǔn)
在這6種格式中饺饭，除了2014年iab發(fā)布的4種“通用廣告包”中的格式：160x600, 300x250, 180x150及728x90，還包括新公布的468x60 和120x600(擎天柱)2種职车。
參考文章-
iPhone瘫俊、iPad、AndroidUI尺寸規(guī)范：
http://tool.lanrentuku.com/guifan/ui.html
6悴灵、6P出現(xiàn)后扛芽，如何實(shí)現(xiàn)一份設(shè)計(jì)稿搞定全部尺寸：
https://www.paintcodeapp.com/news/iphone-6-screens-demystified（英文版）
https://blog.csdn.net/cuibo1123/article/details/39405973（中文版）
從零開始設(shè)計(jì)一款A(yù)PP之Android設(shè)計(jì)規(guī)范篇：
http://www.uisdc.com/android-design-guideline-in-app
三分鐘搞清iPhone X 設(shè)計(jì)尺寸和適配：
