從iOS手雷出發 總結iOS多裝置UI適配規範方案

2021-06-29 15:15:58 字數 1931 閱讀 7335

研發gg表示蛋疼。。。(根本是庫克沒調研清楚,小道訊息說iphone8又要回歸4寸屏)

由於經驗不足,發版過程介面適配bug一直反覆。為了將來不再受制於介面適配影響工作進度,總結5.0的經驗之後,今天手雷ios小夥伴們坐下來一起定製了這份ui規範。

以iphone6為標準,對iphone其他解析度,制定了不同型別的適配方案。

首先了解iphone主流裝置:

將控制項分為這幾類:

一、文字流

文字流控制項定義了一種方案: 1、

字型大小、行高都不變; 2、

行數,是否定行需看具體內容; 3、

控制項整體以iphone6為標準,進行等比縮放。iphone6在此基礎上乘以1.10倍,iphone5在此基礎上除以1.17。

二、彈性控制項

方法一:控制項不變、間距變;

(如**底部導航)

方法二:間距不變,縮放控制項;

(如手雷輪播圖下四個入口)

(家裡打不開store,無法截圖 /(ㄒoㄒ)/~~)

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

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

三、

方案二:小圖,則進行等比縮放。以iphone6為標準,進行等比縮放。iphone6在此基礎上乘以1.10倍,iphone5在此基礎上除以1.17。

四、兩種控制項疊加

後三種情況,在很多同行分享的部落格上並沒有提到,或許他們籠統的歸納到前三種之中,但我們還是覺得需要單獨定義。

兩種控制項疊加的情況就要分視覺設計來分類了:

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

(手雷「熱門資源」模組中的疊加效果)

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

(搜尋中的圖示沒變,輸入框等比拉伸)

五、table view

1、左右固定; 2、

中間拉伸; 3、

高度不變;

(手雷我的首頁list)

六、模組間

保持模組間高度不變,不需要過多處理。

團隊總結的適配方案,總結出來當分享了

參考文獻:

iphone 6 / 6 plus 出現後,如何改進工作流以實現乙份設計稿支援多個尺寸?

iOS多裝置解析度適配

1 選擇一種尺寸作為設計和開發基準 2 定義一套適配規則,自動適配剩下兩種尺寸 3 特殊適配效果給出設計效果。第一步,視覺設計階段,設計師按寬度750px iphone 6 做設計稿,除外所有設計元素用向量路徑來做。設計定稿後在750px的設計稿上做標註,輸出標註圖。同時等比放大1.5倍生成寬度11...

iOS各種裝置資訊獲取總結

這個方法後面會列出來 nsstring devicename self getdevicename nslog 裝置型號 devicename nsstring iphonename uidevice currentdevice name nslog iphone名稱 iphonename cgfl...

IOs裝置解析度總結

在做ios裝置解析度適配的過程中,尋找裝置配置花費了很多不必要的時間,因此把成果記錄下來,供以後使用,也是讓後來者不必像我一樣花費那麼多時間。型號尺寸 邏輯解析度 物理解析度 渲染解析度 倍素iphone 3.5320x480 320x480 1xiphone 3g 3gs 3.5320x480 3...