iPhone6界面設計尺寸規范大全【含原型設計規范】

目前,很多APP設計師的APP Ui設計稿是先做iPhone6的,方便向上適配iPhone6Plus,也方便向下適配iPhone5和iPhone4的尺寸。這一節課也算是25學堂為大家精心整理的iPhone6界面設計尺寸規范大全。

當然下面的10個方面的不僅是iPhone6界面視覺設計尺寸規范,也是iPhone6界面原型設計尺寸規范。值得APP設計師和APP產品經理好好的閱讀。

所以,ios系統平臺上的APP交互設計稿的尺寸,就按照iPhone6的尺寸來做。

尺寸大小如下:750*1334px

APP畫布的建立

詳細的iPhone 6界面 APP首頁設計教程:小白學習APP界面設計,從設計APP首頁開始

 

1、 iPhone6的界面布局是:屏幕是4.7英寸的,設計稿的大小為750x1334px。

☆ ?狀態欄(status bar):就是電量條,其高度為:40px;

☆ ?導航欄(navigation):就是頂部條,其高度為:88px;

☆ ?主菜單欄(submenu,tab):就是標簽欄,底部條,其高度為:98px;

☆ ?內容區域(content):就是屏幕中間的區域,其高度為:1334px-40px-88px-98px=1108px

截圖如下:

點擊查看:完整版的iPhone 6界面設計尺寸規范

另外25學堂跟大家推薦3款 測量標注工具為:

MarkMan馬克鰻,Dorado標注,PXcook像素大廚。

1、Android APP界面標注、尺寸換算和APP標注工具

2、移動APP設計之PS切圖插件大匯總,值得收藏

 

 

2、關于iPhone6的圖標的尺寸:

導航欄的圖標高度為44px左右,標簽欄的圖標尺寸為50x50px左右,最大為96x64px。

關于iPhone6的文字的尺寸:

導航欄的文字大小最大值是34-36px,標簽欄的圖標下方的文字大小為20px。

內容區域的文字大小是:20px ? 24px,26px,28px,30px,32px,34px。

 

擴展閱讀:iphone6/6+的適配原理和適配心得分享

APP設計必備素材:iPhone6手機模板素材下載

0027+free+psd+files

 

 

3、(iPhone6設計稿尺寸是@2x),

做原型圖的時候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。

 

4、設置界面的圖標高度和開關滑動按鈕的圖標高度:58px。

參考下圖:

iphone6 圖標高度

 

5、關于顏色,自從我做了3套高保真的交互原型圖之后,發現后面還是改成畫線框圖來的快。

線框圖的黑白灰之純美,有利于專心布局界面,而不用在意界面的顏色搭配。

黑白灰顏色常用的數值是:

① 文字黑色#282828

② 文字深灰色#656565

③ 文字淺灰色#98989

④ 邊框淺灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

?

 

6、常用的可點擊高度,在iPhone6的原型圖上,統一成88px。在iPhone6設計稿中,88px是一個常用的設計尺寸。

參考圖片如下,

iphone6 行內高度88

 

7、搜索欄的高度,在iPhone6的原型圖上,統一成58px。

在iPhone6設計稿中,58px 也是一個常用的設計尺寸。

參考圖片如下,

iphone6 搜索高度58

 

 

8、在iPhone6設計稿中,界面元素之間的常用距離,親密距離:20px;疏遠距離:30px。

A、疏遠距離:比如,所有元素距離手機屏幕最左邊的距離。

B、親密距離:比如,左邊圖標與右邊文字之間的距離。

參考圖片如下,

iphone6 界面元素之間的距離

 

9、原型設計中,需要考慮不同屏幕尺寸的蘋果手機,在@1x的情況下的適配情況。

比如:

☆ ?iPhone5在@2x屏幕尺寸是,640x1136px;對應的@1x,屏幕尺寸就是320x568px;

☆ ??iPhone6在@2x屏幕尺寸是:750x1334px;對應的@1x,屏幕尺寸就是375x667px;

☆ ??iPhone6Plus在@3x屏幕尺寸是:750x1334px;對應的@1x,屏幕尺寸就414x736px;

 

參考圖片如下:

尺寸

 

 

10、iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介紹

☆ ?iPhone6Plus是5.5英寸屏幕,[email protected]的像素分辨率,邏輯分辨率是[email protected]。物理尺寸是1080x1920px。這個物理尺寸,也是安卓機目前最流行的大屏設計稿尺寸。

☆ ?iPhone6是4.7英寸屏幕,[email protected]的像素分辨率,邏輯分辨率是[email protected]

☆ ? ?iPhone5是4英寸屏幕,[email protected]的像素分辨率,邏輯分辨率是[email protected]

參考圖片如下:

iphone 6設計尺寸規范

 

【綜上所述】iPhone6的原型規范如下:

1、界面尺寸布局:滿屏尺寸750x1334px

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倍以上;

12、以上所有的規范僅供參考,該調整和修改的地方可以調整。具體情況具體分析。

 

每天更新,
全站高品質素材免費下載!