關于iOS多設備UI適配規范方案總結

2015年12月13日 30 分類：iOS APP開發方案

如果你僅僅認為首頁/搜索改版是主要需求，那你就錯了，其實iPhone6、iPhone6Plues的適配才是重點。

隨著蘋果發布iPhone6、iPhone6Plues，過去只屬于Android設備的移動App多種設備尺寸適配問題，iOS的適配問題終于還是來了。

以iPhone6為標準，對iPhone其他分辨率，制定了不同類型的適配方案。

首先了解iPhone主流設備：

將控件分為這幾類：

一、       文字流

文字流控件定義了一種方案：

1、            字號、行高都不變；

2、            行數，是否定行需看具體內容；

3、            控件整體以iPhone6為標準，進行等比縮放。iPhone6在此基礎上乘以1.10倍，iPhone5在此基礎上除以1.17。

二、       彈性控件

方法一：控件不變、間距變；

（如淘寶底部導航）

方法二：間距不變，縮放控件；

（如手雷輪播圖下四個入口）

方法三：左對齊，間距和控件都不變；如App Store中“精品推薦”效果

 （家里打不開store，無法截圖 /(ㄒoㄒ)/~~）

三種方案中，方案一最適合手雷這個產品，方案二為輔助。

方案三目前沒用，最為備選。

三、       圖片

方案一：像輪播圖、廣告圖，這類橫向拉通的圖片需要做多套圖，保持圖片高度不變；

方案二：小圖，則進行等比縮放。以iPhone6為標準，進行等比縮放。iPhone6在此基礎上乘以1.10倍，iPhone5在此基礎上除以1.17。

四、       兩種控件疊加

后三種情況，在很多同行分享的博客上并沒有提到，或許他們籠統的歸納到前三種之中，但我們還是覺得需要單獨定義。

兩種控件疊加的情況就要分視覺設計來分類了：

若與上層控件與底部密切關聯較強，就可按等比的方案來操作。

（手雷“熱門資源”模塊中的疊加效果）

若關聯性不夠強，則可以上層控件大小不變，間距也不變而僅縮放下層控件。

（搜索中的圖標沒變，輸入框等比拉伸）

五、       Table View

1、            左右固定；

2、            中間拉伸；

3、            高度不變；

（手雷我的首頁list）

六、       模塊間

保持模塊間高度不變，不需要過多處理。