iphone界面尺寸规范

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iphone界面尺寸规范相关的知识，希望对你有一定的参考价值。

参考技术A iphone 6 plus设计版：1242*2208

ppi:401ppi

状态栏高度：60px

导航栏高度：132px

标签栏高度：147px

iphone 6 plus放大版：1125*2001

ppi:401ppi

状态栏高度：54px

导航栏高度：132px

标签栏高度：147px

iphone 6 plus物理版：1080*1920

ppi:401ppi

状态栏高度：54px

导航栏高度：132px

标签栏高度：147px

物理版、放大版、设计版的区别：

物理版就是iphone 6plus实际实际的屏幕像素，而设计版就是我们截屏iphone 6plus的界面在ps中去量，发现的尺寸。很明显，量出来的分辨率也就是设计版要比物理版的分辨率要大，这可能由于苹果采用了缩放显示的。至于放大版，其实就是iphone 6的尺寸等比放大1.5倍得出的分辨率。

iphone 6：750*1334

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone 5-5c-5s：640*1136

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone 4-4s：640*960

ppi:326ppi

状态栏高度：40px

导航栏高度：88px

标签栏高度：98px

iphone&ipod Touch第一代、第二代、第三代：320*480

ppi:163ppi

状态栏高度：20px

导航栏高度：44px

标签栏高度：49px

图标尺寸：

iphone 6 plus(@3X)

App store：1024*1024px(180px)

非retina：512*512px(90*90px)

程序应用：180*180px0000

主屏幕：114*114px(20px)

spotlight搜索：87*87px

工具栏和导航栏：66*66px

iphone 4、5、6(@2X)

App store：1024*1024px

程序应用：120*120px

主屏幕：114*114px

spotlight搜索：58*58px(10px)

工具栏和导航栏：44*44px

iphone&ipod touch第一代、第二代、第三代：

App store：1024*1024px

程序应用：120*120px

主屏幕：57*57px(10px)

spotlight搜索：29*29px

测量标注工具为：

MarkMan马克鳗，Dorado标注，PXcook像素大厨。

iphone6图标尺寸

导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

设置界面的图标高度和开关滑动按钮的图标高度：58px。

ip 6 plus的图标高度和开关滑动按钮为：87*87px。

iPhone6文字尺寸

导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px。

内容区域的文字大小是：20px～24px，26px，28px，30px，32px，34px。

文字颜色：

黑白灰颜色常用的数值是：

① 文字黑色#282828

② 文字深灰色#656565

③ 文字浅灰色#98989

④ 边框浅灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

常用的可点击高度，在iPhone6的原型图上，统一成88px。在iPhone6设计稿中，88px是一个常用的设计尺寸。

搜索栏的高度，在iPhone6的原型图上，统一成58px。

在iPhone6设计稿中，58px 也是一个常用的设计尺寸。

在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30px。

导航栏的图标高度为44px（绝大部分功能按钮）左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。

关闭按钮34px*34px，返回按钮26px，简单笔画图标40px。

常用的可点击高度-登陆框、密码框、功能列表等，统一设成88px。

搜索栏、输入框、评论框、地址框的高度，在iPhone6的原型图上，统一设成58px或60px。

在iPhone6设计稿中，界面元素之间的常用距离。

常用间距-亲密距离：20px（与边缘距离）；疏远距离：30px；

其它距离-10px，44px等；

区块间隔：30-40px。

A、疏远距离：比如，改图标距离手机屏幕最左边的距离；

B、亲密距离：比如，左边图标与右边文字之间的距离。

黑白灰颜色常用的数值是：

① 文字黑色#333

② 文字深灰色#666

③ 文字浅灰色#999

④ 边框浅灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

移动端常规字体

ios:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好，方正兰亭黑和方正黑体简、方正中等线也运用的比较多。

字体的大小

1、导航栏的文字大小是36-38px；

2、标题字号：32px ，34px；

3、内容区域的正文文字大小是：28px，30px；

4、辅助性文字：20px ， 24px，26px；

5、标签栏（或主菜单栏）的图标下方的文字大小为20px；

6、终极原则：不大于所在要件高度的一半*;

7、行间距：字号的1.2-1.5倍。

IOS

长文本

可接受下线（80％用户接受）:26px

见小值（50％用户认为偏小）:30px

舒适值（用户认为最舒适）:32～34px

短文本

可接受下线（80％用户接受）:28px

见小值（50％用户认为偏小）:30px

舒适值（用户认为最舒适）:32px

注释

可接受下线（80％用户接受）:24px

见小值（50％用户认为偏小）:24px

舒适值（用户认为最舒适）:28px

颜色值

IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)

内部设计

1、所有能点击的图片不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

4、充分考虑每个控制按钮在4中状态下的样式，如默认、按下、选中、不可点击。

短文本:

注释:

逻辑分辨率

lPPI（像素密度）

表示沿着对角线，每英寸所拥有的像素（pixel）数目，PPI的数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高，颗粒感越弱，图像更清晰。

1 inch= 2.54cm = 25.4mm

早期的iPhone3GS的屏幕屏幕分辨率是320 * 480,iOS绘制图形（CGPoint/CGSize/CGRect）均已point为单位。

l点（point）和像素（pixel）换算关系

iPhone3GS

1point = 1pixel

iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s

1point = 2pixel

iPhone6Plus/iPhone6s Plus

1point = 3pixel

iphone手机英寸如何制定?

pt以及倍率之间的换算关系

建立色彩标准卡

ps有没有标注工具

图标栅格系统

iPhone/iPad/Android UI尺寸规范

iPhone界面尺寸

设备分辨率PPI状态栏高度导航栏高度标签栏高度
技术分享图片

iPhone6 plus设计版

 1242×2208 px 401PPI 60px 132px 146px
技术分享图片

iPhone6 plus放大版

 1125×2001 px 401PPI 54px 132px 146px
技术分享图片

iPhone6 plus物理版

 1080×1920 px 401PPI 54px 132px 146px
技术分享图片

iPhone6

 750×1334 px 326PPI 40px 88px 98px
技术分享图片

iPhone5 - 5C - 5S

 640×1136 px 326PPI 40px 88px 98px
技术分享图片

iPhone4 - 4S

 640×960 px 326PPI 40px 88px 98px
技术分享图片

iPhone & iPod Touch第一代、第二代、第三代

 320×480 px 163PPI 20px 44px 49px

技术分享图片

iPhone图标尺寸：

设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏
技术分享图片

iPhone6 Plus (@3×)

 1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px
技术分享图片

iPhone6 (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px
技术分享图片

iPhone5 - 5C - 5S (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px
技术分享图片

iPhone4 - 4S (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px
技术分享图片

iPhone & iPod Touch第一代、第二代、第三代

 1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px


技术分享图片

iPad的设计尺寸

设备尺寸分辨率状态栏高度导航栏高度标签栏高度
技术分享图片

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2

 2048×1536 px 264PPI 40px 88px 98px
技术分享图片

iPad 1 - 2

 1024×768 px 132PPI 20px 44px 49px
技术分享图片

iPad Mini

 1024×768 px 163PPI 20px 44px 49px


技术分享图片

iPad图标尺寸：

设备App Store程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏
技术分享图片

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2

 1024×1024 px 180×180 px 144×144 px 100×100 px 50×50 px 44×44 px
技术分享图片

iPad 1 - 2

 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px
技术分享图片

iPad Mini

 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px

 

技术分享图片

Android SDK模拟机的尺寸

屏幕大小低密度（120）中等密度（160）高密度（240）超高密度（320）

小屏幕

 ??QVGA（240×320）   ?????480×640  

普通屏幕

 WQVGA400（240×400） WQVGA432（240×432） ??HVGA（320×480） WVGA800（480×800） WVGA854（480×854） 600×1024 ??640×960

大屏幕

 WVGA800 *（480×800） WVGA854 *（480×854） WVGA800 *（480×800） WVGA854 *（480×854） 600x1024    

超大屏幕

 ???1024×600 1024×768 1280×768WXGA（1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600

Android的图标尺寸

屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画

320×480 px

 48×48 px 32×32 px 16×16 px 24×24 px 不小于2 px

480×800px 480×854px 540×960px

 72×72 px 48×48 px 24×24 px 36×36 px 不小于3 px

720×1280 px

 48×48 dp 32×32 dp 16×16 dp 24×24 dp 不小于2 dp

1080×1920 px

 144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px

Android安卓系统dp/sp/px换算表

名称分辨率比率 rate (针对320px)比率 rate (针对640px)比率 rate (针对750px)

idpi

 240×320 0.75 0.375 0.32

mdpi

 320×480 1 0.5 0.4267

hdpi

 480×800 1.5 0.75 0.64

xhdpi

 720×1280 2.25 1.125 1.042

xxhdpi

 1080×1920 3.375 1.6875 1.5

主流Android手机分辨率和尺寸

设备分辨率尺寸设备分辨率尺寸
技术分享图片

魅族MX2

 4.4英寸 800×1280 px 技术分享图片

魅族MX3

 5.1英寸 1080×1280 px
技术分享图片

魅族MX4

 5.36英寸 1152×1920 px 技术分享图片

魅族MX4 Pro未上市

 5.5英寸 1536×2560 px
技术分享图片

三星GALAXY Note 4

 5.7英寸 1440×2560 px 技术分享图片

三星GALAXY Note 3

 5.7英寸 1080×1920 px
技术分享图片

三星GALAXY S5

 5.1英寸 1080×1920 px 技术分享图片

三星GALAXY Note II

 5.5英寸 720×1280 px
技术分享图片

索尼Xperia Z3

 5.2英寸 1080×1920 px 技术分享图片

索尼XL39h

 6.44英寸 1080×1920 px
技术分享图片

HTC Desire 820

 5.5英寸 720×1280 px 技术分享图片

HTC One M8

 4.7英寸 1080×1920 px
技术分享图片

OPPO Find 7

 5.5英寸 1440×2560 px 技术分享图片

OPPO N1

 5.9英寸 1080×1920 px
技术分享图片

OPPO R3

 5英寸 720×1280 px 技术分享图片

OPPO N1 Mini

 5英寸 720×1280 px
技术分享图片

小米M4

 5英寸 1080×1920 px 技术分享图片

小米红米Note

 5.5英寸 720×1280 px
技术分享图片

小米M3

 5英寸 1080×1920 px 技术分享图片

小米红米1S

 4.7英寸 720×1280 px
技术分享图片

小米M3S未上市

 5英寸 1080×1920 px 技术分享图片

小米M2S

 4.3英寸 720×1280 px
技术分享图片

华为荣耀6

 5英寸 1080×1920 px 技术分享图片

锤子T1

 4.95英寸 1080×1920 px
技术分享图片

LG G3

 5.5英寸 1440×2560 px 技术分享图片

OnePlus One

 5.5英寸 1080×1920 px

主流浏览器的界面参数与份额

浏览器状态栏菜单栏滚动条市场份额(国内)
技术分享图片

Chrome 浏览器

 22 px（浮动出现） 60 px 15 px 8%
技术分享图片

火狐浏览器

 20 px 132 px 15 px 1%
技术分享图片

IE浏览器

 24 px 120 px 15 px 35%
技术分享图片

360 浏览器

 24 px 140 px 15 px 28%
技术分享图片

遨游浏览器

 24 px 147 px 15 px 1%
技术分享图片

搜狗浏览器

 25 px 163 px 15 px 5%

系统分辨率统计

分辨率占有率分辨率占有率

1366×768

 15%

1440×900

 13%

1920×1080

 11%

1600×900

 5%

1280×800

 4%

1280×1024

 3%

1680×1050

 2.8%

320×480

 2.4%

480×800

 2%

1280×768

 1%

 

>> 查看最新分辨率使用情况

 


以上是关于iphone界面尺寸规范的主要内容，如果未能解决你的问题，请参考以下文章

（转）iPhone +ipad尺寸规范（界面 & 图标）

iPhone6的界面尺寸及原型规范

iPhone/iPad/Android UI尺寸规范

有知道iPhone6设计界面的具体尺寸吗

常见的手机设计尺寸

移动端界面设计之尺寸篇