本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。
目录
o界面设计尺寸及栏高度
o边距和间距
o内容布局
o界面图片设计比例
o建立统一风格的图标
o APP版式设计规范
o界面文字设计规范
o设计适配
o切图规范
o设计稿标注
一、界面设计尺寸及栏高度
目前主流的iOS 设备主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了Retina 视网膜屏幕，其中iPhone 6s/7/8 Plus 和iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。
通过上面的讲解和图示我们了解了iPhone 不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？也就是说我们用Photoshop 做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。
注意：在进行iphone x 设计的时候我们依然可以采用熟悉的iphone 7 的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。
二、边距和间距
在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们进行了解。
1. 全局边距
全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。
在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。
以iOS 原生态页面为例，「设置」页面和「通用」页面都是使用的30px的边距。
再以微信和支付宝为例，他们的边距分别是20px和24px。
通常左右边距最小为20px，这样的距离可以展示更多的内容，不建议比20还小，否则就会使界面内容过于拥挤，给用户的浏览带来视觉负担。30px是非常舒服的距离，是绝大多数应用的首选边距。
还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，比如站酷APP（当然站酷APP 也进行了改版，首页已经采用了不通栏的卡片式设计）。这种图片通栏显示的设置方式，更容易让用户将注意力集中到每个图文的内容本身，其视觉流在向下浏览时因为没有留白的引导被图片直接割裂，造成在图片上停留更长时间。
2. 卡片间距
在移动端页面设计中卡片式布局是非常常见的布局方式，至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于16px，过小的间距会造成用户的紧张情绪，使用最多的间距是20px、24px、30px、40px，当然间距也不宜过大，过大的间距会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。
以iOS（750*1334px）为例，设置页面不需要承载太多的信息，因此采用了较大的
70px作为卡片间距，有利于减轻用户的阅读负担，而通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。
下面来看一下微信的卡片间距设置的是多少，以及颜色值。
△卡片间距和颜色值是直接截图测量和吸取的，可能不十分准确
继续举例，下面的两张截图分别是巨划算（卡片间距20px）和拼多多（卡片间距
16px）的首页截图，这种电商类的APP 因为需要承载大量的信息，所以一般间距设置的都比较小。
总结：卡片间距的设置是灵活多变的，一定要根据产品的气质和实际需求去设置，平时也可以多截图测量一下各类APP 的卡片间距都是怎么设置的，看的多了并融会贯通，卡片间距设置自然会更加合理，更加得心应手。
3. 内容间距
一款APP 除了各种栏（状态栏、导航栏、标签栏、工具栏）和控件icon 就是内容了，内容的布局形式多种多样，这里不去探讨内容具体应该如何去布局，我们来说一说内容的间距设置问题。
先来介绍一下格式塔原则中的一个重要的原则就是邻近性，格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起，，互相靠近的元素看起来属于一组，而那些距离较远的则自动划分组外，距离近的关系紧密。来看下图，左图中的圆在水平方向比垂直距离近，那么，我们看到了4排圆点，而右图则看成4列。
在UI设计中内容布局时，一定要重视邻近性原则的运用，比如在下面这款轻芒阅读APP 的主界面中，每一个应用名称都远离其他图标，与对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观，如果应用名称与上下图标距离相同，就分不出它是属
于上面还是下面，从而让用户产生错乱的感觉。
再来看一个案例，日日煮APP，上面图片与文字较近，下面图片与文字较远，所以我们
清晰的知道文字是属于上面的图片的。
三、内容布局
在APP 的设计中内容的布局形式多种多样，这里介绍最常用的两种布局形式，列表式布局和卡片式布局。
1. 列表式布局
列表式布局方式非常普遍，随便打开一个APP，基本都存在这种布局方式，其布局形式的特点在于能够在较小的屏幕中显示多条信息，用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。
以我们最常用的微信和QQ 为例，其「信息」页面都是采用的列表式布局，在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px，最大的高度要视内容的多少而定。
继续举例，自如（列表高度110px）和唯品会（列表高度106px）的列表式布局。
2. 卡片式布局
形式非常灵活。其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的，其信息量可以相对列表更加丰富。
在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。
双栏卡片的布局形式，比较常见于以图片信息为主导的App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。
四、界面图片设计比例
在UI设计中，对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。
这些比例不无根据，它们都和图片尺寸有关。16:9 是根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，4:3 是勾三股四弦五，在摄影中非常常见……
五、建立统一风格的图标
在应用界面的设计中，功能图标不是单独的个体，通常是由许多不同的图标构成整个系列，它们贯穿于整个产品应用的所有页面并向用户传递信息。
一套APP图标应该具有相同的风格，包括造型规则、圆角大小，线框粗细，图形样式和个性细节等元素都应该具有统一的规范。
通过分析以上三组图标可以得出：他们具有统一的色彩，统一的圆角大小，统一的线框粗细，那综合起来也就是具有统一的风格，给用户高度统一的视觉体验。
六、APP版式设计规范
版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感，在UI设计中版面设计的原则有哪些呢？
1. 对齐
对齐是贯穿版式设计的最基础，最重要的原则之一，它能建立起一种整齐划一的外观，带给用户有序一致的浏览体验。
2. 对称
对称是宇宙间的设计哲学，是对立统一规律的本质属性，呈现出一种和谐自然的美，在应用界面的设计中，引导页设计、注册登录输入框和按钮等无一不是对称的设计。
3. 分组
物以类聚，人以群分。分组是将同类别的信息组合在一起，直观的呈现在用户的面前，这样的设计能够减少用户的认知负担，在移动端界面的设计中最常见的分组方式就是卡片，为用户选择提供专注而又明确的浏览体验。
七、界面文字设计规范
文字是APP 中最核心的元素，是产品传达给用户的主要内容，所以说文字在APP 的设计中是非常重要的，那么，文字的字体如何选择，字号如何设定，是否加粗，颜色如何设置？
在一款APP 中字号范围一般在20-36之间（@2x）,当然iOS 11中出现了大标题的设计，字号还是要根据产品属性酌情设定。另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
关于字体：在iOS 9推出之前设计师普遍采用华文黑体、谷歌思源、冬青等字体进行设计，iOS 9推出了苹果自己的字体——苹方！自此之后苹方字体被广泛应用于移动端设计中。
关于字体颜色和是否加粗：字体的颜色设置我们一般很少用纯黑色，一般用深灰色和浅灰色、细体和粗体（注意要用字体本身的字重，不能用PS 的加粗功能）来区分重要信息和次要信息，进行信息层级的划分。
八、设计适配
iOS 主流设备的分辨率分别是640x1136px（@2x）（iPhone SE）、750 x1134px
（@2x）（iPhone6s/7/8）、1242x2208px（@3x）（iPhone 6s/7/8 Plus）、
1125x2436px（@3x）／750x1624px（@2x）（iPhone X）。
在设计设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以选择中间尺寸750 x1134px作为基准，向下适配640x1136px，向上适配1242x2208px 和750x1624px／1125x2436px。
1. 750×1334向下适配640×1136
由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。
为了让大家了解适配的原则，我们以文字描述和图示的方式进行750x1334px到
640x1136px的界面推导。
绘制一个750x1334px的设计图，这是最常见的首页设计图，从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。
下面开始进行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以我们不需要改变图像大小，只需将画布大小改成640x1136px即可，然后再改变横向元素的间距以达到适配的目的。
首先打开750x1334px的设计稿，执行Command+Alt+C（改变画布大小的快捷键），鼠标左键单击「定位」的左上角的格子，设置宽高为640和1136，点击「确定」。
改变画布大小之后，设计稿的右边和下边都被裁切（上面左图中半透明蒙版覆盖区域），画布缩小成640x1136px。
上面左图裁切到右图适配完成，做了如下调整。
o导航栏右边的图标向左移动保持和原来的右边距一致，标题居中。
o首焦图高度除以1.17（750／640=1.17得到）后居中，宽度640px。
o主要入口右边的图标向左移动保持和原来的右边距一致，各图标的间距等宽。
2. 750×1334向上适配1242×2208
由于750x1334px界面是2倍的像素倍率，而1242x2208px是3倍的像素倍率，也就是说1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以
我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242x2208px，最后调整界面图标和元素的横向间距的大小完成适配。
上面说了整体思路，下面我们来说说具体怎么适配。
首先对750x1334px的画布执行Command+Alt+I 命令（调整图像大小），单位设置为百分比，宽高设置为150%，点击「确定」，调整之后的画布大小为1125x2001px。
紧接着对1.5倍之后的1125x2001px界面执行Command+Alt+C（调整画布大小），鼠标单击「定位」左上角的格子，调整宽高为1242和2208px，点击「确定」。
上面左图拓展画布到右图完成适配做了如下调整：
o导航栏右边的图标向右移动保持和原来的右边距一致，标题居中。
o首焦图的高度乘以1.65（1242/750=1.65得到）后居中，宽度1242px。
o主要入口右边的图标向右移动和原来的右边距一致，各图标的间距等宽。
注：分割线仍是1px。
3. 750×1334向上适配1125x2436px（@3x）
与苹果之前发布的iOS设备相比，iPhone X 的像素分辨率发生了变化，为
1125x2436px（@3x），在实际工作中为了方便向上和向下的适配，我们仍然可以选择熟悉的iPhone 7（750x1334px）的尺寸作为模版进行设计，只是高度增加了290px；设计尺寸为：750x1624px（@2x）。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的设计稿。
在适配的时候需要注意，状态栏由之前的40px增加到88px，标签底部预留68px用于放置主页指示器，如下图所示。
关于主页指示器的适配涉及到两种情况：底部出现标签栏、工具栏等操作设计时，需要将底色下延68px并填充原有颜色，这样的处理可以让底部设计更佳简洁舒适，没有功能操作时，页面底部不需要填充颜色，只需盖住主页指示器即可。
对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
九、切图规范
当界面设计定稿之后，设计师需要对图标进行切片提供给开发工程师，通常我们只需要对icon 进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。
iPhone 界面尺寸 设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7 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 UI设计规范：IOS、Android系统主流尺寸整理
iPhone图标尺寸： 设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P - 6SP - 7(@3×)1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px iPhone6 - 6S - 7 (@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
一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 （七）字体
1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110
Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程 是什么使得android 有着独特的用户体验？ 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets 和live folders 来实现实时信息的预览 用户想用时，任一应用程序都可以挑选和选择 android 不是关于程序的，它是关于活动，把任务分层， 1.2 架构基础 硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android 提供更多更好的功能。当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。 竖屏与横屏 一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99％的android 布局支持横屏。 焦点和菜单 在触摸模式里没有焦点，只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标，使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点： 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3 屏幕上的行为
android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准，避免混淆用户。 1.4 表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则 这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的，不止能应用于android 的用户界面设计，也可以应用于其他。苹果建议开发者花费60％的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻 隐喻是构建一个基于操作任务心智模型的模块；用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时，要注意andriod 中存在的隐喻，不要重新定义它们。同时，检查你的应用程序执行的任务，看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型 用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说，用户在真实世界里有写字、寄信的经验，也会产生特定的期待，像写一封新的信，选一个接受者，然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型，而不是建立一个用户已有的知识经验模式。 在设计程序用户界面之前，试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻，它代表了任务的概念组成。在写信这个例子中，隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中，隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望，包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要通过努力地何必把个下面的特征与用户心智模型相融合： 熟悉性 用户的心智模型主要是建立在经验的基础上 简单化 一项任务的心智模型通常是流线型，关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节，但是基本的组成部分占大部分，并且不会占用用户的注意。 可利用性Availability
移动互联网产品原型尺寸规范 最近公司安排我带一下新来的交互设计师，我想给他制定一份交互设计规范。这样一来，即使新来的交互设计师没什么基础，也可以根据这一份规范，做出大致标准的原型图。 因为Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。所以，交互设计稿的尺寸，就按照iPhone6的尺寸来做。 1、iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。状态栏(status bar)：就是电量条，其高度为：40px； 导航栏(navigation)：就是顶部条，其高度为：88px； 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px； 内容区域(content)：就是屏幕中间的区域，其高度为： 1334px-40px-88px-98px=1108px 截图如下：
推荐3款测量工具为：MarkMan马克鳗，Dorado标注，PXcook像素大厨。2、关于iPhone6的图标的尺寸： 导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。 关于iPhone6的文字的尺寸： 导航栏的文字大小最大值是34px，标签栏的图标下方的文字大小为20px。内容区域的文字大小是：24px，26px，28px，30px，32px，34px。 3、（iPhone6设计稿尺寸是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。 4、设置界面的图标高度和开关滑动按钮的图标高度：58px。 参考下图：
移动设备的界面设计规范 作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或尺寸变更 关于页面比例，请按照ios以及android制作两套尺寸页面 IOS篇 1、尺寸及分辨率 iPhone 界面尺寸：320×480、640×960、640×1136 （以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都是72 ppi）本次使用640×1136的尺寸设计。 2、界面基本组成元素 iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域 这里取用640×1136的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸： 状态栏：信号、运营商、电量等显示手机状态的区域，其高度为：40 px 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：910 px P.S. 在最新的 iOS8 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起 3、字体大小
iPhone 上的字体英文为：HelveticaNeue至于中文，Mac下用的是黑体-简，Win 下则为华文黑体。 字体大小请保持在24px~36px之间（具体大小，请作图后放置手机中观看实际效果） 4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px Android篇 1、尺寸及分辨率 Android 界面尺寸：480×800、720×1280、1080×1920… （单位：像素） Android 比 iPhone 的尺寸多了很多套，本次设计建议取用720×1280 这个尺寸，这个尺寸720×1280中显示完美，在1080×1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。 2、界面基本组成元素 Android 的 APP 界面和 iPhone 的基本相同：状态栏、导航栏、主菜单栏以及中间的内容区域。 Android 中我们取用720×1280的尺寸设计： 状态栏高度为：50 px 导航栏高度为：96 px 主菜单栏高度为：96 px 内容区域高度为：1038 px（1280-50-96-96=1038） 若Android功能键移到了屏幕中，高度也是和菜单栏一样的：96 px 3、字体大小 Android 上的字体为：Roboto，是android原生的字体，与微软雅黑很像。 字体大小范围为16px~32px（具体大小，请作图后放置手机中观看实际效果） 4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px 要求篇
一、Android设计常识 开始介绍之前先帮大家梳理一下Android常用单位，方便各位亲们更好的掌握并了解Android端设计规范。 Android常用单位 per inch)：数字影像的解析度，也就是每英寸所拥有的像素数，即像素密度；PPI计算公式：ppi=√（长度像素数2 + 宽度像素数2）/屏幕对角线英寸数 per inch)：是指印刷上的计量单位，也就是每英寸上能印刷的网点数，我们设计用于显示器的默认为（72像素/英寸）就好了； 屏幕尺寸（Screen Size）：一般我们所说的手机屏幕尺寸，比如3英寸、英寸等，都是指对角线的长度，而不是手机的面积； 分辨率（Resolution）：是指手机屏幕垂直和水平方向上的像素个数，比如分辨率为：720*1280，是指设备水平方向有720个像素点，垂直方向有1280个像素点 pixels)：像素，不同设备显示效果相同 （ point）：一个标准的长度单位，ios的逻辑单位，1Pt=1/72英寸，用于印刷业，非常简单易用；标注字体大小（72是早期台式机的DPI） （Scaled-independentpixels）：放大像素，安卓的字体单位； （Density-independentpixels）：是指设备的独立像素，不同的设备有不同的显示效果，它与设备硬件有关系； sp和dp基本一样，是android开发里特有的单位，都是为了保证文字在不同密度的显示屏上显示相同的效果；dp与设备硬件有关，与屏幕密度无关，sp与屏幕密度和设备硬件均无关； 换算关系 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。* dp：以160PPI屏幕为标准，则1dp=1px。 dp和px的换算公式：dp*ppi/160 = px。 对于320ppi的屏幕，1dp x 320ppi/160= 2px。 * sp：它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时， 1sp=1px。 sp 与px 的换算公式：sp*ppi/160= px。
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸，为屏幕对角线的测量。 为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。 像素（PX） 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化，引入一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。 于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp：一个普通的手机屏幕（240X320，320×480，480X800） ? 480dp：一个中间平板电脑像（480×800） ? 600dp：7寸平板电脑（600×1024） ? 720dp：10寸平板电脑（720×1280，800×1280） Android SDK模拟机的尺寸 屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏 幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）
【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
UI设计规范 一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。
（七）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110
本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。 目录 o界面设计尺寸及栏高度 o边距和间距 o内容布局 o界面图片设计比例 o建立统一风格的图标 o APP版式设计规范 o界面文字设计规范 o设计适配 o切图规范 o设计稿标注 一、界面设计尺寸及栏高度 目前主流的iOS 设备主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了Retina 视网膜屏幕，其中iPhone 6s/7/8 Plus 和iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。 通过上面的讲解和图示我们了解了iPhone 不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？也就是说我们用Photoshop 做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。
注意：在进行iphone x 设计的时候我们依然可以采用熟悉的iphone 7 的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。
android人机界面指南 1Android设计的依据 1.1框架结构及流程 是什么使得android有着独特的用户体验？ 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets和live folders来实现实时信息的预览 用户想用时，任一应用程序都可以挑选和选择 android不是关于程序的，它是关于活动，把任务分层， 1.2架构基础 硬件平台 android设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android提供更多更好的功能。 当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。 竖屏与横屏 一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android手机中。99％的android布局支持横屏。 焦点和菜单 在触摸模式里没有焦点，只有轨迹球。Android平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5个图标，使用点击more menu菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点： 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3屏幕上的行为 android设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android行为的标准，避免混淆用户。
1.4表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO是开始你的工具包的好地方。
? UI设计规范 一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 ^ 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）: （六）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （七）资源状态
对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 （八）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （九）《 （十）字号 字号通常按照标题及征文级别递减为42、36、34、30、24 （十一）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48 （十二）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110
1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop 画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2）/ 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。
以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏）对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近320 dpi （xhdpi 模式），480 x 800 的手机很可能接近240 dpi （hdpi模式），而320 x 480 的手机则很接近160 dpi（mdpi模式）。 来自友盟指数2014年3月份的数据： 480 x 800的手机占比最高为31.9%，720 x 1280的手机占比为16.5%位居第二，而240 x 320的手机占比最少为1.0% 。xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高，目前为6.1% 。 2、单位换算方法 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。 * dp：Density-independent pixels，以160PPI屏幕为标准，则1dp=1px。dp和px的换算公式：dp*ppi/160 = px。对于320ppi的屏幕，1dp x 320ppi/160 = 2px。 * sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时，1sp=1px。sp 与px 的换算公式：sp*ppi/160 = px。对于320ppi 的屏幕，1sp x 320ppi/160 = 2px。 简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。 为什么要把sp和dp代替px？原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。
H5网页设计规范 1、非可循环平铺图片的背景图，须按最大屏幕尺寸来设计，即：1920*720； 2、集团、新闻类网站中间内容宽度使用1003PX；展示、购物类网站中间内容部分宽度使用1200PX； 3、必须删除非显示图层和参考线； 4、命名和分组必须规范，建议使用一下命名规则（如有更合适或者更熟悉的命名规则请提前与技术沟通）中英文均可； 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 整体布局：wrapper 左右中：缩写为L R C 水平/垂直：H/V 菜单：submenu 摘要: summary 按钮：btn/button 滚动：scroll 鼠标悬停：hover 点击：click 已浏览：visited。广告横幅：AD/ banner
5、建议将每个独立控件设计有明显的边界，如果不能给出明显边界，请在设计稿中标出与邻近控件的距离； 6、段落文字必须给出行高，必须使用10号以上字体，建议使用1.5倍行高和14号字体。 7、需要后台添加的文字（标题、内容等）必须使用常用字体，即宋体和微软雅黑； H5手机页面设计规范 1、PSD按照宽度640PX，高度不限来设计； 2、可点击部件不可小于88PX，（如果不够提交设计稿的时候特别说明）。 3、所有部件的尺寸大小必须是双数。 4、每个按钮需要有四个状态：默认、按下、选中、不可选。至少需要考虑：默认和不可选两个状态。 5、除广告图片外，其他图形部件尽量用图形工具绘制。 6、可点击部件尽量和屏幕四边保持20-30PX的距离。
app界面设计规范 篇一：移动app界面设计规范色彩篇 移动app界面设计规范——色彩篇 色彩在我们的APP界面设计中，是一个很让人头疼的事情。无论是APP UI设计大神还是APP设计新手，都是需要制定一套属于自己的配色方案或配色计划色彩，从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。 调色板 调色板以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。 篇二：安卓界面设计规范 目前主流的安卓手机分辨率有以下3种： hdpi，对应800*480的手机。主流机型，很多。如小米1 ，1s 三星 htc 等 xdpi，对应1280*720的手机。三星Galaxy系列和华为p6.
xxdpi，对应1080*1920的手机。小米手机，华为荣耀手机系列为主加上 htc one。 下面是当面流行的安卓手机的屏幕尺寸和分辨率： 小米 3和小米4 屏幕尺寸和分辨率： 5英寸 1920×1080像素 魅族MX2 屏幕尺寸和分辨率：英寸 1280×800像 魅族MX3 屏幕尺寸和分辨率：英寸 1800×1080像素 HTC one屏幕尺寸和分辨率：英寸 1920×1080像素华为荣耀6屏幕尺寸和分辨率： 5英寸 1920×1080像素 华为p6屏幕尺寸和分辨率：英寸 1280×720像素 华为p7屏幕尺寸和分辨率：5英寸 1920×1080像素 什么是屏幕像素密度？ 屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。 在目前我们的安卓APP设计项目当中，我们并不会去为每一种分辨率去设计一套UI界面。这是一种追求完美和理想的状态。小公司肯定是耗不起这样的。所以，这个时候我们需要学会变通。为了适应多分辨率，
作者：Bruce Lee 出处：https://www.doczj.com/doc/7e4383512.html,/BruceLee521 样式 设备和显示器 Android有百万计的手机、平板电脑和其他设备，这些设备都有各种屏幕尺寸。利用Android 的灵活的布局系统，您可以创建小到手机大到平板的各种应用程序。 变通 拉伸和压缩布局，以适应不同的高度和宽度。 优化布局 在大型设备中有额外的屏幕空间利用。但在移动手持设备上需要创建复合的视图，结合多个视图来显示更多的内容，并且是这些视图易于导航。 所有的资源 提供不同的屏幕分辨率（DPI）的资源，以确保您的应用程序在任何设备上看上去都很好，比如32*32，64*64。 策略 那么设计这些多尺寸的屏幕，应该从哪个规格开始？一种方法是先设计标准设备的（正常大小和MDPI），然后设计向上和向下比例的尺寸。另一种方法是从最大屏幕尺寸的开始，然后缩减，并找出我们需要使在小屏幕上的折中的UI。
主题 主题是Android机器应用统一样式到应用程序或活动的一。样式指定用户界面元素的视觉属性，如颜色，高度，填充和字体大小。为了促进更大的平台上的所有应用程序之间的凝聚力，Android 提供了三个系统的主题，你可以从中选择来构建应用程序： 全亮主题 全暗主题 全亮与全暗动作条主题 Gmail是使用全亮的主题。Settings是使用全暗主题. Talk使用全亮与全暗动作条主题. 触摸反馈 使用颜色和明亮来响应触摸，强化行为的手势，并表明什么样的动作是允许的什么样的是不允许的。 当用户触摸可操作的区域，应用程序需要可视化的反应。这让用户知道哪些对象被触摸了，你的应用程序是“听”到触摸了。 状态 Android的UI元素具有内置的触摸反馈，包括状态，用于指示触摸元素是否会产生什么反应。 通讯
竭诚为您提供优质文档/双击可除 app界面设计规范 篇一：移动app界面设计规范色彩篇 移动app界面设计规范——色彩篇 色彩在我们的app界面设计中，是一个很让人头疼的事情。无论是appui设计大神还是app设计新手，都是需要制定一套属于自己的配色方案或配色计划色彩，从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。 调色板 调色板以一些基础色为基准，通过填充光谱来为android、web和ios环境提供一套完整可用的颜色。基础色的饱和度是500。 篇二：安卓界面设计规范 目前主流的安卓手机分辨率有以下3种： hdpi，对应800*480的手机。主流机型，很多。如小米1，1s三星htc等xdpi，对应1280*720的手机。三星galaxy
系列和华为p6. xxdpi，对应1080*1920的手机。小米手机，华为荣耀手机系列为主加上htcone。 下面是当面流行的安卓手机的屏幕尺寸和分辨率： 小米3和小米4屏幕尺寸和分辨率：5英寸1920×1080像素 魅族mx2屏幕尺寸和分辨率：4.4英寸1280×800像 魅族mx3屏幕尺寸和分辨率：5.1英寸1800×1080像素htcone屏幕尺寸和分辨率：4.7英寸1920×1080像素华为荣耀6屏幕尺寸和分辨率：5英寸1920×1080像素华为p6屏幕尺寸和分辨率：4.7英寸1280×720像素 华为p7屏幕尺寸和分辨率：5英寸1920×1080像素 什么是屏幕像素密度？ 屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称ppi。 在目前我们的安卓app设计项目当中，我们并不会去为每一种分辨率去设计一套ui界面。这是一种追求完美和理想的状态。小公司肯定是耗不起这样的。所以，这个时候我们需要学会变通。为了适应多分辨率， 1：在标准基础（xdpi：1280*720）上开始，然后放大或缩小，以适应到其他尺寸。 2：从设备的最大尺寸（xxdpi：1920×1080）开始，然