当前位置 - 養生大全網 - 養生知識 - IOS接口設計尺寸標準規範

IOS接口設計尺寸標準規範

很多IOS APP UI設計稿都是基於iphone6,方便向上適配iphone7的尺寸,向下適配iphone5的尺寸。所以我給大家分享壹下iPhone6的界面設計尺寸的規格。

IOS界面設計尺寸規格(以iPhone6為例)

壹、接口尺寸規格

1,接口大小為:750x1334px。

2.狀態欄:就是電源欄,高度40px

3.導航:是頂欄,高度88px

4.主子菜單(tab):是選項卡欄和底欄,高度為98px

5.內容區域:屏幕中間的區域,其高度為:1334 px-40px-88px-98px = 1108 px。

二、圖標尺寸規格

1,導航欄和工具欄尺寸44 x 44 px

2.標簽列的大小為75x75px。

3.導航欄的最大文本大小為34-36px,標簽欄中圖標下方的文本大小為20px。

4.內容區的文字大小為:20px 24px,26px,28px,30px,32px,34px。

3.設置界面圖標高度和開關滑動按鈕高度:58px。

第四,可點擊的高度規格

在iPhone6的原型機圖上,統壹為88px。在iPhone6的設計稿中,88px是常用的設計尺寸。

五、搜索欄高度規範

搜索欄的高度在iPhone6原型機上統壹為58px。

六、界面元素間的距離規範

在iPhone6的設計稿中,界面元素之間常見的距離,親密距離:20px;遠距:30p x。

A.遙遠的距離:比如所有元素到手機最左邊屏幕的距離。

b親密距離:比如左邊圖標和右邊文字的距離。

7.在樣機設計中,需要考慮蘋果手機在@1x條件下對不同屏幕尺寸的適配。

1,iPhone5 at @2x的屏幕尺寸為640 x 1136 px;對應@1x,屏幕尺寸為320x568px

2.iPhone6 at @2x的屏幕尺寸為:750 x 1334 px;對應@1x,屏幕尺寸為375x667px

3.iPhone6Plus在@3x的屏幕尺寸為:750 x 1334 px;對應@1x,屏幕尺寸為414x 736 px;

八。iPhone6Plus推出@3x,iPhone6推出@2x,iPhone 5推出@ 2x。

1,iPhone6Plus為5.5寸屏幕,像素分辨率為1242x208px-@ 3x,邏輯分辨率為414x 981px-@ 1x。物理尺寸為1080x1920px。這個物理尺寸也是安卓最受歡迎的大屏設計草圖尺寸。

2.iPhone6是4.7寸屏幕,像素分辨率為750x1334px-@2x,邏輯分辨率為375x889px-@1x。

3.iPhone5為4英寸屏幕,像素分辨率為640x1135px-@2x,邏輯分辨率為320x757px-@1x。

總結:iPhone6的原型規格如下:

1,界面尺寸布局:全屏尺寸750 x 1334 px;;

2.電池條高度40px,導航條高度88px,標簽條高度98px;

3.每個區域的圖標大小,導航欄圖標為44px,50px對於選項卡欄圖標;

4.每個區域的文字大小為:工具條22px,導航欄32px,20px對於標簽欄;

5.常見的文字尺寸:32px、30px、28px、26px、24px、22px、20px;

6.常見顏色:淺灰色背景#f2f2f2,深黑色文字#323232,深灰色邊框顏色# cccccc

7.常見可點擊區域高度:88px;

8.單行文字背景框高度:88px,兩行文字:176px,三行文字:264px;

9.常見間距:親密距離:20px異化距離:30px,其他距離:10px,44px等。

10,按鈕和文本框,原型做成直角,圓角半徑由Ui設計;

11.在這種情況下,需要修改原型。單個頁面的邏輯流程圖或者用戶的學習使用時間是其他頁面平均值的3倍以上。