app-ui-设计规范.ppt

《app-ui-设计规范.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、IOS＆AndroidAPPUI设计规范iOS篇点击添加文本点击添加文本点击添加文本点击添加文本iOS界面尺寸设备分辨率PPI状态栏高度导航栏高度标签栏高度Iphone6plus1080x1920px401ppi54px132px146pxIphone6/6s750x1334px326ppi40px88px98pxIphone5/5c/5s640x1136px326ppi40px88px98pxIphone4/4s640x960px326ppi40px88px98pxppi（pixelsperinch）即

2、每英寸像素，也叫像素密度。图标尺寸设备APPstore程序应用主屏幕Spotlight搜索标签栏工具栏/导航栏Iphone6plus1024x1024px180x180px114x114px87x87px75x75px66x66pxIphone6/6s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone5/5c/5s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone4/4s1024x1

3、024px120x120px114x114px58x58px75x75px44x44pxIphone6图例状态栏规范用户依赖于状态栏的重要信息，如信号，时间和电池。文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。pt=px*3/41pt=1/72英寸导航栏规范导航栏是用于屏幕的快速信息。左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。请注意，如果

4、您使用这些系统图标，您不需要为它们单独设计。搜索栏工具栏Stepper控件提示框提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字，退出一定是明显。分段控制框滑块开关布局标准控件布局原理（8px原理由来）由于ios技术开发是以320x640px为标准开发的，所以此设定尺寸为1，算出各个尺寸的比例，然后乘以4，各个尺寸都能满足是整数，可以保证开发时不会模糊。@2px（视网膜屏的到来）切图设计稿尺寸是640x960px，所以设计时最小的单位尺寸是8px。使用8px原理的目的保证在双平台上大部分机型

5、开发中不会出现模糊的变形的问题；而且只需设计一套设计稿，减少设计师的工作量，提高工作效率。ios1334x750pxIphone6/6s点击添加文本点击添加文本点击添加文本点击添加文本图标网络Apple使用黄金分割在它们的一些图标上。这让图标保持良好的比例，同时确保了美感。虽然这是一个很好的规范，但它不是严格要求。甚至Apple在很多图标上也省略了它。点击添加文本点击添加文本点击添加文本点击添加文本标准色点击添加文本点击添加文本点击添加文本点击添加文本字体大小、规格一般的规范是按钮用44pt、小文字用12

6、pt、正文文本用17pt和标题用20pt+。IOS9中文字体：苹方/PingFangSCIOS8中文字体：常州华文的黑体-简，在macosx系统中选择黑体-简IOS英文、数字：Helvetial点击添加文本点击添加文本点击添加文本点击添加文本间距和对齐方式一般的规范最低要求8pt空白或边距。这将有足够留白空间，使得布局更容易扫描和文本更具可读性。而且在此基础上，UI元素应对齐，文本应该有相同的基线位置。点击添加文本点击添加文本点击添加文本点击添加文本Android篇点击添加文本点击添加文本点击添加文本点击

7、添加文本Android界面尺寸点击添加文本点击添加文本点击添加文本点击添加文本界面尺寸（1280x720px）状态栏高度：50px导航栏高度：96px标签栏高度：96pxAndroid最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：96px内容区域高度为：1038px（1280-50-96-96=1038）常用尺寸一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户手指能够准确舒适触碰的最小尺寸。Android界面默认list的高度是：48d

8、p=72px；Android界面每个元素之间最小的间距是：8dp=12px；Android界面默认btn的高度是：40dp=60pxpx=ppi/160*dp常用屏幕尺寸240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）相应的图片资源尺寸的比例关系为1：1.5:2也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可