IOS ＆ Android APP UI设计规范1 1第1页，共25页 iOS 篇2 2第2页，共25页 iOS 界面尺寸设备设备设备设备分辨率分辨率分辨率分辨率PPIPPI状态栏高度状态栏高度状态栏高度状态栏高度导航栏高度导航栏高度导航栏高度导航栏高度标签栏高度标签栏高度标签栏高度标签栏高度Iphone6 plusIphone6 plus1080x1920 1080x1920 pxpx401 ppi401 ppi54 px54 px132 px132 px146 px146 pxIphone6/6sIphone6/6s750x1334 px750x1334 px326 ppi326 ppi40 px40 px88 px88 px98 px98 pxIphone5/5c/Iphone5/5c/5s5s640x1136 px640x1136 px326 ppi326 ppi40 px40 px88 px88 px98 px98 pxIphone4/4sIphone4/4s640x960 px640x960 px326 ppi326 ppi40 px40 px88 px88 px98 px98 pxppi（pixels per inch）即每英寸像素，也叫像素密度。
3 3第3页，共25页 图标尺寸设备设备设备设备APP storeAPP store程序应用程序应用程序应用程序应用主屏幕主屏幕主屏幕主屏幕SpotlightSpotlight搜索搜索搜索搜索标签栏标签栏标签栏标签栏工具栏工具栏工具栏工具栏/ /导导导导航栏航栏航栏航栏Iphone6 Iphone6 plusplus1024x10241024x1024pxpx180x180 180x180 pxpx114x114114x114pxpx87x87 px87x87 px75x75 px75x75 px66x66 px66x66 pxIphone6/6Iphone6/6s s1024x10241024x1024pxpx120x120120x120pxpx114x114114x114pxpx58x58 px58x58 px75x75 px75x75 px44x44 px44x44 pxIphone5/5Iphone5/5c/5sc/5s1024x10241024x1024pxpx120x120120x120pxpx114x114114x114pxpx58x58 px58x58 px75x75 px75x75 px44x44 px44x44 pxIphone4/4Iphone4/4s s1024x10241024x1024pxpx120x120120x120pxpx114x114114x114pxpx58x58 px58x58 px75x75 px75x75 px44x44 px44x44 px4 4第4页，共25页。
Iphone6 图例5 5第5页，共25页 状态栏规范 用户依赖于状态栏的重要信息，如信号，时间和电池文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位pt=px*3/4 1pt=1/72英寸6 6第6页，共25页 导航栏规范 导航栏是用于屏幕的快速信息左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成请注意，如果您使用这些系统图标，您不需要为它们单独设计7 7第7页，共25页 搜索栏8 8第8页，共25页 工具栏Stepper控件9 9第9页，共25页 提示框 提示对话框是用于输送关键信息和提示快速操作提示应保持最少文字，退出一定是明显1010第10页，共25页 分段控制框1111第11页，共25页 滑块开关1212第12页，共25页 布局标准控件布局标准控件Ø布局原理（8px原理由来） 由于ios技术开发是以320x640px为标准开发的，所以此设定尺寸为1，算出各个尺寸的比例，然后乘以4，各个尺寸都能满足是整数，可以保证开发时不会模糊。
@2px（视网膜屏的到来）切图设计稿尺寸是640x960px，所以设计时最小的单位尺寸是8pxØ使用8px原理的目的 保证在双平台上大部分机型开发中不会出现模糊的变形的问题；而且只需设计一套设计稿，减少设计师的工作量，提高工作效率ios 1334x750 pxIphone6/6s 1313第13页，共25页 图标网络 Apple使用黄金分割在它们的一些图标上这让图标保持良好的比例，同时确保了美感虽然这是一个很好的规范，但它不是严格要求甚至Apple在很多图标上也省略了它1414第14页，共25页 标准色1515第15页，共25页 字体大小、规格一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+IOS 9 中文字体：苹方/PingFang SCIOS 8 中文字体：常州华文的黑体-简，在mac os x 系统中选择 黑体-简IOS 英文、数字：Helvetial1616第16页，共25页 间距和对齐方式 一般的规范最低要求8pt空白或边距这将有足够留白空间，使得布局更容易扫描和文本更具可读性而且在此基础上，UI元素应对齐，文本应该有相同的基线位置。
1717第17页，共25页 Android篇1818第18页，共25页 Android 界面尺寸1919第19页，共25页 界面尺寸（1280x720px）状态栏高度：50 px导航栏高度：96 px标签栏高度：96 pxAndroid最近出的都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96 px内容区域高度为：1038 px （1280-50-96-96=1038）2020第20页，共25页 常用尺寸•一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户手指能够准确舒适触碰的最小尺寸•Android界面默认list的高度是：48dp=72px；•Android界面每个元素之间最小的间距是：8dp=12px；•Android界面默认btn的高度是：40dp=60px•px=ppi/160*dp2121第21页，共25页 常用屏幕尺寸240x320 ldpi （低等屏幕）320x480 mdpi （中等屏幕）480x800 hdpi （高清屏幕）720x1280 xhdpi （超高清屏幕）相应的图片资源尺寸的比例关系为1：1.5: 2也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可调整到200%。
2222第22页，共25页 字体规范、大小5.X版本：思源黑体/Noto Sans Han5.0以下版本：Droid Sans Fallback，可用 文泉驿微米黑 代替英文、数字：Roboto标题（58px或60px） 二级标题（44px或48px） 正文字体（32px或36px）；英文最小字号22px，中文最小字号2323第23页，共25页 SP与DP介绍 dp：device independent pixelsdevice independent pixels(设备独立像素) spsp：scaled pixels(放大像素)， 主要用于字体显示best for textsize由此，根据 google 的建议，TextView 的字号最好使用 sp 做单位，而且查看TextView的源码可知 Android 默认使用 sp 作为字号单位 sp和dp一样，是android开发里特有的单位，设计师在做UI设计的时候 通常最初是建立320*480这个尺寸的画布开始的，这个尺寸的画布 在android分辨率的分类中称为mdpi，在这个尺寸下，ps里的1px就等于android中的1dp，同样，这个时候1点的字就等于 android中1sp，举个例子：你建立画布的尺寸是320-480，里面的文字是30点，那么它就是30sp。
一般android设置长度和宽度多用dp,设置字体大小多用sp. 在屏幕密度为160，1dp=1px,当屏幕密度为240时，1dp=1.5px.2424第24页，共25页 48DP定律 48dp作为安卓可触摸的UI元件的标准 一般来说，48dp转化为一个物理尺寸约9毫米建议的目标大小为7-10毫米的范围，这是一个用户手指能准确并且舒适触摸的区域如果你设计的元素高和宽至少48dp，你就可以保证： （1）. 触摸目标绝不会比建议的最低目标（7mm）小，无论在什么屏幕上显示 （2）. 在整体信息密度和触摸目标大小之间取得了一个很好的平衡而每个UI元素之间的空白通常是8dp.2525第25页，共25页。