欧美中文字幕第一页-欧美中文字幕一区-欧美中文字幕一区二区三区-欧美中文字幕在线-欧美中文字幕在线播放-欧美中文字幕在线视频

iPhone6界面設計尺寸規范詳解

我是創始人李巖:很抱歉!給自己產品做個廣告,點擊進來看看。  

目前,很多APP設計師的APP Ui設計稿是先做iPhone6的,方便向上適配iPhone6Plus,也方便向下適配iPhone5和iPhone4的尺寸。

所以,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的文字的尺寸:

  • 導航欄的文字大小最大值是34px,標簽欄的圖標下方的文字大小為20px。內容區域的文字大小是:24px,26px,28px,30px,32px,34px。

?

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;疏遠距離:30p x。

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英寸屏幕,1242x2208px-@3x的像素分辨率,邏輯分辨率是414x736pt-@1x。物理尺寸是1080x1920px。這個物理尺寸,也是安卓機目前最流行的大屏設計稿尺寸。

☆ ?iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,邏輯分辨率是375x667pt-@1x。

☆ ? ?iPhone5是4英寸屏幕,640x1135px-@2x的像素分辨率,邏輯分辨率是320x568pt-@1x。

參考圖片如下:

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、以上所有的規范僅供參考,該調整和修改的地方可以調整。具體情況具體分析。

?

無覓相關文章插件,快速提升流量

隨意打賞

提交建議
微信掃一掃,分享給好友吧。
主站蜘蛛池模板: 在线免费观看亚洲 | 精品国产自在现线看久久 | 欧美一级免费片 | 久久99热精品 | 国产在线精品一区二区中文 | 国产精品久久久久久麻豆一区 | 国产欧美亚洲精品第一区 | 四虎精品成人免费永久 | 日本操比 | 久久久国产99久久国产首页 | 日韩精品一区二区三区国语自制 | 91在线免费看 | 国产精品久久久久久亚洲伦理 | 亚色91 | 国产在线精品一区二区三区不卡 | 天天做天天爱夜夜想毛片 | 国产精品国产三级国产a | 国产福利午夜波多野结衣 | 久久青草视频 | 成人欧美一区二区三区 | 特黄aa级毛片免费视频播放 | 欧美成人在线视频 | 天天爽天天爽 | 91在线观| 久久99久久99精品免观看 | 综合久久网 | 一级黄色影片 | 四虎永久免费地址在线网站 | 99在线精品视频免费观里 | 久草视频精品 | 久久精品免费一区二区视 | 五月婷六月婷婷 | 91精品免费不卡在线观看 | 免费观看毛片 | 日本精品夜色视频一区二区 | 久热这里 | 四虎精品免费国产成人 | 99在线在线视频免费视频观看 | 黄色影院免费观看 | 日韩手机看片 | 亚洲精品短视频 |