APP UI 设计规范ppt课件.ppt

1、IOS Android APP UI设计规范,1,iOS 篇,2,点击添加文本,点击添加文本,点击添加文本,点击添加文本,iOS 界面尺寸,ppi（pixels per inch）即每英寸像素，也叫像素密度。,3,图标尺寸,4,Iphone6 图例,5,状态栏规范,用户依赖于状态栏的重要信息，如信号，时间和电池。文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。 pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。pt=px*3/4 1pt=1/72英寸,6,导航栏规范,导航栏是用于屏幕的快速信息。左边部分可用于配置文件，菜

2、单按钮，而右边的部分是一般用于动作按钮，如添加，编辑，完成。请注意，如果您使用这些系统图标，您不需要为它们单独设计。,7,搜索栏,8,工具栏,Stepper控件,9,提示框,提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字，退出一定是明显。,10,分段控制框,11,滑块,开关,12,布局标准控件,布局原理（8px原理由来） 由于ios技术开发是以320 x640px为标准开发的，所以此设定尺寸为1，算出各个尺寸的比例，然后乘以4，各个尺寸都能满足是整数，可以保证开发时不会模糊。2px（视网膜屏的到来）切图设计稿尺寸是640 x960px，所以设计时最小的单位尺寸是8px。 使用8

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

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

5、本,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界面每个元素之间最小

6、的间距是：8dp=12px； Android界面默认btn的高度是：40dp=60px px=ppi/160*dp,21,常用屏幕尺寸,240 x320 ldpi （低等屏幕） 320 x480 mdpi （中等屏幕） 480 x800 hdpi （高清屏幕） 720 x1280 xhdpi （超高清屏幕） 相应的图片资源尺寸的比例关系为1：1.5: 2 也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可调整到200%。,22,点击添加文本,点击添加文本,点击添加文本,点击添加文本,双击添加标题文字,字体规范、大小,5.X版本：思源黑体/Noto Sans Han 5.

7、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

8、和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,48DP定律,48dp作为安卓可触摸的UI元件的标准。 一般来说，48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围，这是一个用户手指能准确并且舒适