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