APP-UI-设计规范PPT学习课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,IOS,Android APP UI,设计规范,1,iOS,篇,2,2025/5/27 周二,点击添加文本,点击添加文本,点击添加文本,点击添加文本,iOS,界面尺寸,设备,分辨率,PPI,状态栏高度,导航栏高度,标签栏高度,Iphone6 plus,1080 x1920 px,401,ppi,54 px,132 px,146 px,Iphone6/6s,750 x1334 px,326,ppi,40 px,88 px,98 px,Iphone5/5c/5s,640 x1136 px,326,ppi,40 px,88 px,98 px,Iphone4/4s,640 x960 px,326,ppi,40 px,88 px,98 px,ppi,（,pixels per inch,）即每英寸像素，也叫像素密度。,3,图标尺寸,设备,APP store,程序应用,主屏幕,Spotlight,搜索,标签栏,工具栏,/,导航栏,Iphone6 plus,1024x1024px,180 x180 px,114x114,px,87x87 px,75x75 px,66x66 px,Iphone6/6s,1024x1024,px,120 x120,px,114x114,px,58x58 px,75x75 px,44x44 px,Iphone5/5c/5s,1024x1024,px,120 x120,px,114x114,px,58x58 px,75x75 px,44x44 px,Iphone4/4s,1024x1024,px,120 x120,px,114x114,px,58x58 px,75x75 px,44x44 px,4,2025/5/27 周二,Iphone6,图例,5,2025/5/27 周二,状态栏规范,用户依赖于状态栏的重要信息，如信号，时间和电池。文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。,pt,（,point,）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。,pt=px,*,3/4 1pt=1/72,英寸,6,2025/5/27 周二,导航栏规范,导航栏是用于屏幕的快速信息。左边部分可用于配置文件，菜单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。请注意，如果您使用这些系统图标，您不需要为它们单独设计。,7,2025/5/27 周二,搜索栏,8,2025/5/27 周二,工具栏,Stepper,控件,9,2025/5/27 周二,提示框,提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字，退出一定是明显。,10,2025/5/27 周二,分段控制框,11,2025/5/27 周二,滑块,开关,12,2025/5/27 周二,布局标准控件,布局原理（,8px,原理由来）,由于,ios,技术开发是以,320 x640px,为标准开发的，所以此设定尺寸为,1,，算出各个尺寸的比例，然后乘以,4,，各个尺寸都能满足是整数，可以保证开发时不会模糊。,2px,（视网膜屏的到来）切图设计稿尺寸是,640 x960px,，所以设计时最小的单位尺寸是,8px,。,使用,8px,原理的目的,保证在双平台上大部分机型开发中不会出现模糊的变形的问题；而且只需设计一套设计稿，减少设计师的工作量，提高工作效率。,ios 1334x750 px,Iphone6/6s,13,2025/5/27 周二,点击添加文本,点击添加文本,点击添加文本,点击添加文本,图标网络,Apple,使用黄金分割在它们的一些图标上。这让图标保持良好的比例，同时确保了美感。虽然这是一个很好的规范，但它不是严格要求。甚至,Apple,在很多图标上也省略了它。,14,点击添加文本,点击添加文本,点击添加文本,点击添加文本,标准色,15,点击添加文本,点击添加文本,点击添加文本,点击添加文本,字体大小、规格,一般的规范是按钮用,44pt,、小文字用,12pt,、正文文本用,17pt,和标题用,20pt+,。,IOS 9,中文字体：苹方,/PingFang SC,IOS 8,中文字体：常州华文的黑体,-,简，在,mac os x,系统中选择 黑体,-,简,IOS,英文、数字：,Helvetial,16,点击添加文本,点击添加文本,点击添加文本,点击添加文本,间距和对齐方式,一般的规范最低要求,8pt,空白或边距。这将有足够留白空间，使得布局更容易扫描和文本更具可读性。而且在此基础上，,UI,元素应对齐，文本应该有相同的基线位置。,17,点击添加文本,点击添加文本,点击添加文本,点击添加文本,Android,篇,18,点击添加文本,点击添加文本,点击添加文本,点击添加文本,Android,界面尺寸,19,点击添加文本,点击添加文本,点击添加文本,点击添加文本,界面尺寸（,1280 x720px,）,状态栏高度：,50 px,导航栏高度：,96 px,标签栏高度：,96 pxAndroid,最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和标签栏一样的：,96 px,内容区域高度为：,1038 px,（,1280-50-96-96=1038,）,20,常用尺寸,一般把,48dp,作为可触碰,UI,原件的标准，,48dp=72px=9mm,，这是一个用户手指能够准确舒适触碰的最小尺寸。,Android,界面默认,list,的高度是：,48dp=72px,；,Android,界面每个元素之间最小的间距是：,8dp=12px,；,Android,界面默认,btn,的高度是：,40dp=60px,px=ppi/160*dp,21,2025/5/27 周二,常用屏幕尺寸,240 x320 ldpi,（低等屏幕）,320 x480 mdpi,（中等屏幕）,480 x800 hdpi,（高清屏幕）,720 x1280 xhdpi,（超高清屏幕）,相应的图片资源尺寸的比例关系为,1,：,1.5:2,也就是第一套图为,mdpi,的资源图片，,hdpi,可调整到,150%,，,xhdpi,可调整到,200%,。,22,2025/5/27 周二,点击添加文本,点击添加文本,点击添加文本,点击添加文本,双击添加标题文字,字体规范、大小,5.X,版本：思源黑体,/Noto Sans Han,5.0,以下版本：,Droid Sans Fallback,，可用 文泉驿微米黑 代替,英文、数字：,Roboto,标题（,58px,或,60px,）二级标题（,44px,或,48px,）正文字体（,32px,或,36px,）；英文最小字号,22px,，中文最小字号。,23,SP,与,DP,介绍,dp,：,device independent pixels,(,设备独立像素,),。,sp,：,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.,24,2025/5/27 周二,48DP,定律,48dp,作为安卓可触摸的,UI,元件的标准。,一般来说，,48dp,转化为一个物理尺寸约,9,毫米。建议的目标大小为,7-10,毫米的范围，这是一个用户手指能准确并且舒适触摸的区域。,如果你设计的元素高和宽至少,48dp,，你就可以保证：,（,1,）,.,触摸目标绝不会比建议的最低目标（,7mm,）小，无论在什么屏幕上显示。,（,2,）,.,在整体信息密度和触摸目标大小之间取得了一个很好的平衡。,而每个,UI,元素之间的空白通常是,8dp.,25,2025/5/27 周二,