有一些平面設(shè)計(jì)轉(zhuǎn)UI設(shè)計(jì)楞卡，或者有軟件基礎(chǔ)想做UI的童鞋脾歇，不知道如何開始做移動(dòng)UI界面觉渴。經(jīng)常會(huì)有困惑介劫，比如：

“手機(jī)設(shè)備這么多案淋，我該怎么做？”

“一個(gè)UI界面有哪些主要的組成部分踢京？”

“這些組成部分又有什么基礎(chǔ)規(guī)范？”

......

畢竟平面設(shè)計(jì)只是一張圖黔帕，而UI設(shè)計(jì)是要開發(fā)到硬件設(shè)備上的蹈丸。所以我們不僅需要根據(jù)硬件設(shè)備尺寸設(shè)計(jì)視覺稿，同時(shí)還要符合一定的設(shè)計(jì)規(guī)范逻杖、用戶使用習(xí)慣和考慮開發(fā)后的實(shí)現(xiàn)效果。萬里長征第一步荸百，只有弄清楚了這些基礎(chǔ)入門知識(shí)，才能開始真正的UI設(shè)計(jì)之旅蓝翰。這系列文章將從界面設(shè)計(jì)尺寸女嘲、布局畜份、字體欣尼、圖片、圖標(biāo)等幾個(gè)方面來具體闡述UI設(shè)計(jì)的入門基礎(chǔ)知識(shí)，使新手可以快速的上手谷徙。此篇文章先來具體說明一下界面設(shè)計(jì)尺寸

界面設(shè)計(jì)尺寸

由于android手機(jī)尺寸非常多，無法使所有的設(shè)備完美呈現(xiàn)效果谋旦，所以一般以iOS手機(jī)尺寸來設(shè)計(jì)，前端會(huì)自動(dòng)適配至其他機(jī)型册着，所以這里不詳細(xì)探討。

目前主流的 iOS 設(shè)備主要有 iPhone SE（4英寸）甲捏、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）芒粹、iPhone X（5.8英寸）』幔“英寸”是手機(jī)屏幕的物理尺寸钦奋，做設(shè)計(jì)的時(shí)候我們更多的是以像素分辨率來繪制的。所以需要了解一下iOS的不同手機(jī)的分辨率付材。見下圖：

上圖中屏幕尺寸和屏幕密度了解一下就好，我們主要關(guān)注的是像素尺寸和倍圖贞谓，雖然不同iphone型號(hào)的手機(jī)像素不同葵诈，但在前端那里，只有三種尺寸：1倍圖作喘、2倍圖和3倍圖。（@1x泞坦、@2x和@3x是切圖命名的后綴，代表設(shè)計(jì)稿是以哪個(gè)倍圖來設(shè)計(jì)的赃梧。如：icon@1x、icon@2x授嘀、icon@3x锣险。）

我們可以使用1倍圖來做設(shè)計(jì)览闰，即使用320*480的像素尺寸巷折；

也可以使用2倍圖來做設(shè)計(jì)压鉴，即使用640*960 或 640*1136 或 750*1334 的像素尺寸锻拘；

也可以使用3倍圖來做設(shè)計(jì)，即使用1242*2280 或 1125*2436 的像素尺寸上鞠；

選擇以上3種倍圖中的一種像素尺寸來做設(shè)計(jì)稿即可，前端會(huì)根據(jù)不同倍數(shù)進(jìn)行適配芍阎。適配的原則是：如果是1倍圖的設(shè)計(jì)稿缨恒，2倍圖里面的所有元素都是1倍圖里面元素的2倍，3倍圖里面的所有元素都是1倍圖里面元素的3倍骗露。

你可以選擇自己手機(jī)對(duì)應(yīng)的像素尺寸進(jìn)行設(shè)計(jì)，這樣便于隨時(shí)放入手機(jī)中查看效果珊随。我們公司設(shè)計(jì)師普遍使用2倍圖進(jìn)行設(shè)計(jì)柿隙，因?yàn)?倍圖手機(jī)尺寸的用戶數(shù)比較多，需要注意的是2倍圖里面的元素尺寸必須是偶數(shù)禀崖，這樣元素尺寸除以2適配1倍圖時(shí)可以整除。由于我使用的是iphone6s的手機(jī)艺晴，所以我一般會(huì)使用750*1334px的像素尺寸進(jìn)行設(shè)計(jì)。（1334px是iphone6s屏幕的首屏高度封寞，有時(shí)候一個(gè)頁面不止1334px這么高仅财，但是我們要參考首屏的高度，使重要的內(nèi)容能在首屏中展示满着，得到更多的曝光。）

下期我們將繼續(xù)探討移動(dòng)UI設(shè)計(jì)規(guī)范的布局风喇、字體、圖片还蹲、圖標(biāo)等～