2024年5月6日发(作者：)

竭诚为您提供优质文档/双击可除

iphone设计规范

篇一：给不同尺寸的iphone设计app界面是要怎么标

注？

———移动开发的黄埔军校给不同尺寸的iphone设计

app界面是要怎么标注？

市场上形形色色的手机很多，各种型号、尺寸、品牌和

系统...面对这么多种的手机品牌，相信在做app设计的时

候很多新手设计师都格外的头疼。

“我们到底要做几套设计图？”“针对目前很受欢迎的

iphone又讲如何适配，如何标记呢？”

首先我们还是要先分析设计的app针对的市场方向，如

果是安卓系统和ios系统的用户都需要能够下载和使用的话，

就必须针对两个系统各做一套设计图。这两套图是有些具体

尺寸宽高等设计规范上的区别的，详见下方。ios篇

———移动开发的黄埔军校

图标尺寸

1 12

字体

iphone上的字体英文为：helveticaneue至于中文，mac

下用的是黑体-简，win下则为华文黑体，所有字体要用双数

字号。

百度用户体验部做过一个小调查，对于app字体大小的

调查结论如下：

移动开发的黄埔军校

颜色值

ios颜色值取Rgb各颜色的值比如某个色值，给予ios

开发的色值为R:12g:34b:56给出的值就是

12,34,56(有时也要根据开发的习惯，有时也用十六进

制)

内部设计

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

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

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

4、充分考虑每个控制按钮在4中状态下的样式，如图

android篇

界面尺寸

android的尺寸众多，建议使用分辨率为720×1280的

尺寸设计。这个尺寸720×1280中显示完美，在1080×1920

中看起来也比较清晰;切图后的图片文件大小也适中，

2 12

应用的内存消耗也不会过高。

移动开发的黄埔军校

状态栏高度：50px

导航栏高度：96px

标签栏高度：96px

android最近出的手机都几乎去掉了实体键，把功能键

移到了屏幕中，当然高度也是和标签栏一样的：96px

内容区域高度为：1038px(1280-50-96-96=1038)

图表尺寸

ps:android设计规范中，使用的单位是dp，dp在安卓

机上不同的密度转换后的px是不一样的

字体

android上的字体为：droidsansfallback，是谷歌自己

的字体，与微软雅黑很像。android的字体大小调查结论是：

———移动开发的黄埔军校

颜色值

android颜色值取值为十六进制的值比如一绿色的值，

给开发的值为#5bc43e

而我在设计的时候，喜欢安卓设计一套效果图

(1080*1920)，ios设计一套效果图(640*1136).

设计完成后具体适配时，还请设计师一定要和程序员沟

通！沟通商议适配，互相了解习惯适配手法和习惯才是制胜

3 12

之道！

那么适配又有那些需要留意的细节呢？请看下文！

界面名字

每个界面需定出一个前缀。比如主页，前缀是home，设

置前缀为settings，课程表是lesson。

定好前缀之后。设计师就可以建立文件夹：

篇二：ios与android界面设计规范整合

ios篇

一、尺寸及分辨率iphone界面尺寸：320*480、640*960、

640*1136

iphone6：4.7英寸(1334×750)，iphone6plus：5.5英

寸(1920×1080)

ipad界面尺寸：1024*768、2048*1536

单位：像素72dpi，在设计的时候并不是每个尺寸都要

做一套，尺寸按自己的手机来设计，比较方

便预览效果，一般用640*960或者640*1136的尺寸来设计。

ps：作图的时候确保都是用形状工具(快捷键：u)画的，

这样更方便后期的切图或者尺寸变更。

(首三个系列的屏幕分辨率为320x480(hVga)，163ppi；

iphone4及iphone4s的屏幕分辨率为640x960，326ppi；

iphone5则是640x1,136，326ppi，而iphone5的屏幕对比

为接近16:9（71:40）。)

4 12

二、界面基本组成元素

iphone的app界面一般由四个元素组成，分别是：状态

栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、

内容区域(content)。

这里取用640*960的尺寸设计，那我们就说说在这个尺

寸下这些元素的尺寸。

状态栏(statusbar)：就是我们经常说的信号、运营商、

电量等显示手机状态的区域，其高度为：40px导航栏

(navigation)：显示当前界面的名称，包含相应的功能或者

页面间的跳转按钮，其高度为：88px主菜单栏(submenu，tab)：

类似于页面的主菜单，提供整个应用的分类内容的快速跳转，

其高度为：98px内容区域(content)：展示应用提供的相应

内容，整个应用中布局变更最为频繁，其高度为：734px

[下图为了说明我不是瞎掰的：960-40-88-98=734]

至于我们经常说的iphone5/5s

的640*1136的尺寸，其实就是中间的内容区域高度增

加到910px。

ps：在最新的ios7的风格中，苹果已经开始慢慢弱化

状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么

变，尺寸高度也还是没有变的，只不过大家在设计ios7风

格的界面的时候多多注意下~

三、字体大小

5 12

iphone上的字体英文为：helveticaneue。至于中文mac

下用的是黑体，win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查，可以看出用户

可接受的文字大小。

四，列表栏目间距

ios设计规范中列表的高度为88px

五，颜色值问题

ios颜色值取Rgb各颜色的值比如给予ios开发的色值

为R:12g:34b:56给出的值就是12,34,56(有时也要根据开发

的习惯，有时也用十六进制)；android开发的色值则使用十

六进制#0c2238

andRoid篇

一、尺寸及分辨率

android界面尺寸：480*800、720*1280、1080*1920。[单

位：像素]

android比iphone的寸尺多了很多套，建议取用

720*1280这个尺寸，这个尺寸720*1280中显示完美，在

1080*1920中看起来比较清晰，切图后的图片文件大小也适

中，应用的内存消耗也不会过高。

二、界面基本组成元素android

的app界面和iphone的基本相同：状态栏、导航栏、

主菜单、内容区域。

6 12