對(duì)于iPhone 6/6Plus UI界面設(shè)計(jì)和適配尺寸規(guī)范的相關(guān)教程和知識(shí)點(diǎn)，網(wǎng)上已經(jīng)有很多了，而且大部分都是可以值得去參考和學(xué)習(xí)。

而今天25學(xué)堂來跟大家分享的必定是關(guān)于APP設(shè)計(jì)新手容易理解的iPhone 6/6Plus UI界面設(shè)計(jì)和適配尺寸規(guī)范。 ?也可以說是，目前移動(dòng)APP設(shè)計(jì)行業(yè)內(nèi)，小公司里面APP設(shè)計(jì)師如何用一套UI界面設(shè)計(jì)稿來解決所有的iphone機(jī)型。

下面這張圖是iphone手機(jī)的所有機(jī)型大全：

今天25學(xué)堂只講ios系統(tǒng)上面的UI界面設(shè)計(jì)和適配尺寸規(guī)范。安卓的后面再繼續(xù)，總之懶人也有懶人的辦法。歡迎來噴！

2014年，iPhone 6, iPhone 6 Plus發(fā)布后，iphone APP設(shè)計(jì)不得了考慮適配所有iPhone機(jī)型啦。

下面來看老譚老師聊聊一些關(guān)于iPhone 6/6Plus UI界面設(shè)計(jì)和適配尺寸規(guī)范的經(jīng)驗(yàn)和干貨。

第一種辦法

如果以iphone5s 為基準(zhǔn)設(shè)計(jì)稿，適配iphone6 或者是iphone 6 plus的方法和技巧。

當(dāng)舊的iPhone 5程序運(yùn)行在iPhone 6上面，假如沒有經(jīng)過適配。舊程序自動(dòng)等比放大，鋪滿新手機(jī)，舊程序也可以正常運(yùn)行。這種方案可算是自動(dòng)適配。但因?yàn)榕f程序拉伸了，整體看起來有點(diǎn)虛，也不能更好利用大屏空間。

一套設(shè)計(jì)稿適配的前提：設(shè)計(jì)稿必須為矢量的。圖片除外。比如圖標(biāo)，線、點(diǎn)、顏色塊等元素都是矢量或者形狀。

分為兩步走：

如果是一些常規(guī)界面：比如以文字、列表為主的界面，大部分是指布局相對(duì)簡(jiǎn)單的界面。不用設(shè)計(jì)師怎么切圖的界面，這些基本可以讓ios程序員完成適配即可。顯示效果也不會(huì)太差。

如果是一些定制界面：此時(shí)設(shè)計(jì)師應(yīng)該手動(dòng)為大屏幕重新調(diào)整設(shè)計(jì)。另外設(shè)計(jì)一些大圖或者是大的圖標(biāo)，以滿足適配iphone6.或者iphone plus

前提是你們的ios程序員需要了解蘋果公司的一個(gè)工具：Auto Layout

Auto Layout （Auto Layout Guide: Introduction），可以理解成 iOS 上的 CSS，如果設(shè)計(jì)師用 Auto Layout 提供的排版語言描述出 UI 布局，那不同尺寸的 iPhone 只要同一份設(shè)計(jì)稿就可以了。

總之：適配iPhone 6/6Plus UI界面設(shè)計(jì)的要點(diǎn)：

1、針對(duì)iphone6 ?可以用高度不變，橫向拉伸。或者等比拉伸

2、全矢量作圖。

3、定制界面或圖片位圖必須額外制作大圖。

4、工具欄、狀態(tài)欄、導(dǎo)航欄的高度規(guī)范和設(shè)計(jì)字體大小等均以2:3的比例放大即可。

5、iphone的5/5S/6/6P的屏幕比例為9：16，所以比例這個(gè)問題現(xiàn)在不是很大，但因?

Plus增加橫版顯示，所以建議對(duì)于一些用戶量較高的軟件進(jìn)行重繪。

如下圖所示：

第二種版本?

以iphone6 ?為基準(zhǔn)設(shè)計(jì)稿，適配iphone5 或者是iphone 6 plus的方法和技巧。

具體的適配方案和規(guī)范 可以點(diǎn)擊查看：

最新WebAPP設(shè)計(jì)指南規(guī)范：適配iphone6技巧

第三種版本：以iphone6 plus 為基準(zhǔn)設(shè)計(jì)稿，適配iphone5 或者是iphone 6的方法和技巧。

iphone6 plus 的設(shè)計(jì)尺寸是1242*2208px ??

解決方法：①簡(jiǎn)單粗暴的等比例縮放圖片尺寸，也就是說直接把現(xiàn)在有的圖片資源調(diào)整為0.5倍，如果全部用路徑畫圖，會(huì)簡(jiǎn)單許多，直接調(diào)整大小即可。

設(shè)計(jì)尺寸是：1242*2208px 這個(gè)尺寸是比較大的，對(duì)于哪些電腦配置不夠好的小伙伴們可以按照上面的2種做法。

如果你的是mac電腦，直接使用Sketch輕松做到，6和5的切圖可以用一套，ppi都是326，6+的話導(dǎo)出3x圖就ok。

?最后，給app設(shè)計(jì)師9點(diǎn)建議吧！

1、以后的應(yīng)用程序，都使用AutoLayout, 不要再用絕對(duì)定位。

2、使用類似網(wǎng)頁的方式來設(shè)計(jì)界面。

3、設(shè)計(jì)師好，程序員也好，盡量使用點(diǎn)這個(gè)單位進(jìn)行思考，而不要使用像素。比如，你需要做44 x 66個(gè)點(diǎn)的按鈕，2x模式，就乘以2, 3x模式就乘以3。這樣的思考方式可以大致估計(jì)到真實(shí)的物理長(zhǎng)度。44個(gè)點(diǎn)，就是手機(jī)上導(dǎo)航欄，工具欄的高度。假如用像素思考，容易使得做出的圖片過大或者過小。

4、非矢量素材，就可以做尺寸最大的，之后再進(jìn)行縮小。比如你需要兼容3x的屏幕，就直接做最高那種圖片。

5、而當(dāng)使用Flash之類的矢量工具來做素材的時(shí)候，應(yīng)該直接做點(diǎn)那個(gè)尺寸。比如44 x 66個(gè)點(diǎn)的按鈕。就建立一個(gè)44 x 66的場(chǎng)景。之后再導(dǎo)出成2倍圖，3倍圖，因?yàn)槭噶糠糯蟛皇д妗２灰⒁粋€(gè)3x的場(chǎng)景，導(dǎo)出成大圖片，再進(jìn)行縮小，這樣就容易失真。更理想的是直接使用矢量圖。

6、假如是那種導(dǎo)航欄，工具欄之類的背景圖，需要橫跨整個(gè)屏幕?？梢灾磺幸恍K，讓程序拉伸，拉伸方式是保持兩邊的像素不動(dòng)，只拉伸最中間的一列像素。需要拉伸的話，橫方向就不要出現(xiàn)一些漸變色。

7、按鈕的點(diǎn)擊區(qū)域，不應(yīng)該少于44像素，就算按鈕的圖片看起來比較小，也應(yīng)該使得點(diǎn)按鈕周圍的透明區(qū)也有反應(yīng)。

8、可以按照你當(dāng)前最方便測(cè)試機(jī)子的型號(hào)來做一些主要預(yù)覽圖，效果圖。比如你手頭有iPhone 5，可以按照iPhone 5的尺寸，320 x 568個(gè)點(diǎn)，需要兼容iPhone 6 Plus，就使用3x的模式。這樣方便將圖片放進(jìn)手機(jī)里面看實(shí)際的效果。有多個(gè)測(cè)試機(jī)，就選較大的，之后再進(jìn)行一些細(xì)調(diào)。假如支持iPhone 6 Plus的橫屏模式，需要另外處理。

9、上面說的是應(yīng)用的處理方式，游戲會(huì)有些特殊。現(xiàn)在很多游戲，按照1136 x 768的像素尺寸來設(shè)計(jì)場(chǎng)景，這樣可以同時(shí)兼容iPad和iPhone，并只使用一份圖。iPad 1x模式下尺寸是1024 x 768像素，iPhone 6在2x模式下，是1136 * 640。這種尺寸，可以簡(jiǎn)單將場(chǎng)景居中顯示，各自將場(chǎng)景拉伸到最大。