UI app界面的尺寸规范
UI界面的尺寸规范
上周更了一篇关于Android系统界面设计的尺寸规范，有些小伙伴看了以后存在部分尺寸上的疑问，这次把这些地方简单的解释了一下，顺便把iOS系统规范也加上了，两者可以做一个对比。在这里我要强调的是这是移动端的样式规范，不是网页，不是网页，不是网页！
名词解释
1.DPI (Dots Per Inch)
点数密度。所表示的是每英寸所拥有的点数量。Android特有单位
DPI数值越高，即代表显示屏能够以越高的密度显示图像，从而得出，显示的密度越高，显示器显示的就越真实、越清晰。
也就是说屏幕放的越大，物理尺寸不会变，但是每英寸里所包含的像素块变大了，数量就相对变少了，成像就会失真。比如说买显示器的时候有些人会挑选分辨率高的，这样相同物理尺寸下画面会更加清晰。
下面放张图给大家解释一下：
这两张图的物理尺寸相同，但是第一张图包含的像素块明显大于第二章图，如果成像的话肯定是第一张图较清晰。
2.PPI（Pixels Per Inch）
像素密度，所表示的是每英寸所拥有的像素数量，iOS特有单位
PPI数值越高，即代表显示屏能够以越高的密度显示图像。 从而得出，显示的密度越高，显示器显示的就越真实、越清晰
这个概念类似于DPI，理解起来较为简单。
举例说明：
同样尺寸大小的屏幕，点数密度越高的成像就越清晰，一英寸里有多少个像素格PPI就等于多少。
3.视网膜屏幕（Retina screen）：分辨率超过人眼识别极限的高分辨率屏幕
定义超过300PPI以上的屏幕称作视网膜屏幕
屏幕密度计算公式：
一、Android尺寸规范
分为两个方面：界面、图标
1.界面
（1）基本单位
DP：Android开发专用单位
以160 DPI屏幕为基准，称之为一倍图。1DP=1PX
计算公式：DP*DPI / 160 = PX
（2）主流尺寸及分辨率
实际开发中，主流尺寸是2倍图720 * 1280 以及3倍图 1080 * 1920，没有要求默认的是2倍图720 * 1280。
（3）安卓界面设计中控件的尺寸
2倍图中的尺寸图解
2倍图与3倍图之间的尺寸换算关系，3倍图是2倍图的1.5倍
（4）界面背景
一般情况下添加白色背景，也可以添加浅色背景，常用的颜色有#f5f5f5 #eeeeee #efeff4等
（5）分割规范
分割线：高度：必须1px ，颜色：#dddddd #cccccc #000000 （矩形）不透明度为10%
分割条（卡片间隙）：高度：必须20px 颜色：#f5f5f5
列表高：高度100-120px
总结：
2.图标
（1）启动图标尺寸
Android图标最大尺寸为512px，圆角半径为90px。
一般会切两套图，一套圆角一套直角。
以2倍图为例
a.主屏幕中的APP图标96px
b.应用商店搜索中的APP图标96px
c.设置中的APP图标64px
（2）功能图标
a.导航栏中的图标。可点击区域最小48px
b.标签栏工具栏中的图标可点击区域64px
3.文字规范
种类、字号、间距、颜色
1）种类
Android官方默认字体：“思源黑体”
2）字号
注意！！！字号必须用偶数
导航栏：36-38px 主题 副标题
正文：28-34px 说明性文字
b标签栏：22-24px 提示性文字
（3）间距
字间距：默认
行间距：1.5倍
（4）颜色
主文：#333333
副文：#666666
提示文：#999999
二、 ios基本尺寸规范
尺寸规范、字体规范、iOS人机交互、Android和iOS的差异
1.尺寸规范
（1）界面
名词解释：
PPI：（ios特有）像素密度，所表示的是每英寸所拥有的像素数量
PPI数值越高，即代表显示屏越能够以高的密度显示图像。显示密度越高，显示器显示就越清晰、越真实。
视网膜屏幕：分辨率超过人眼识别极限的高分辨率屏幕
PPI计算公式：
画布尺寸
设备尺寸
开发中以iPhone6为基础（2倍图）
背景：颜色：#f5f5f5、#eeeeee、#efeff4
分割线：1px 不透明度10% #dddddd #cccccc #000000
分割条：20px
列表高：100-200px
2.图标
（1）启动图标：（Android的2倍）
1024*1024
圆角180p’x
（2）功能图标：
主屏幕中的图标：120px,圆角半径25px
默认搜索页显示的APP图标：40px ,圆角半径10px
导航栏中的图标44px
标签栏/工具栏中的图标44px
文字规范：（必须偶数，否则会边缘模糊）
种类：苹方（iOS官方字体）
下面以二倍图为例：
导航栏：36-38px （主题，副标题）
正文：28-34px （说明性文字）
标签栏：22-24px（提示性文字）
间距：字间距默认，行间距1.5
颜色：#333333 #666666 #999999
2.iOS人机交互指南
智能手机传感器 iOS交互
（1）智能手机传感器
摄像头、麦克风、GPS、电子罗盘、重力感应器、加速度传感器、光线传感器、距离传感器、气压传感器、三轴陀螺仪
手机传感器是硬件
（2）iOS交互指南
3D触碰、颜色、音频、认证、数据输入、拖放、手势、多任务处理、通知、截图
3D触碰
用手指按压图片可以实时预览拍摄时的场景
颜色：（仅供参考，可以自行创作）
红色：rgb(255,59,48)
橙色：rgb(255,149,0)
黄色：rgb(255,204,0)
绿色：rgb(76,217,100)
蓝绿色：rgb(90,200,250)
蓝色：rgb(0,122,255)
紫色：rgb(88,86,214)
粉色：rgb(255,45,85)
音频
断开耳机时音乐会自动断开，避免外放
认证
自动提取信息中的验证码、提供数字键盘、生物识别登陆（面容ID）等
数据输入
数据选择器（日期、地名）、从系统获取信息、通过值列表轻松导航、在文本字段中显示提示（颜色#999999）
手势
点击、滑动、双击、长按、拖拽、轻扫、捏合、摇晃
多任务处理
滑过、拆分视图、画中画
通知
可选择
截图
截图后在屏幕上出现缩略图
正文部分就到这里结束。
以上就是Android系统和iOS系统界面的一些样式规范，两者有区别但是功能都差不多，主要是为了让顾客在转换一个新的操作系统时不会觉得完全陌生。当然，无论是喜欢什么系统，在做界面的时候都还是要按着规矩来，功能不是可以随便添加的。
本人刚接触这行，懂得不是很多，写的也不是很详细，如果有什么疑惑欢迎评论留言，我们可以一起探讨，共同进步。最后感谢您的阅读！