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