APPUI设计规范ppt课件
合集下载
《UI设计》课件——6.2 App界面图标设计
1 绘制圆角矩形
2 绘制形状
3 设置渐变颜色
App界面图标设计
6.2.1 认识App界面图标
2
图标是一组具有高度浓缩性、能快捷传达信息、便于记忆的图形，该图形既可以是图像，也 可以是文本或Logo。在设计图标时，要注重图标美观性和实用性，保证图标符合App界面的需求。
6.2.2 App界面图标类型
3
图标作为App界面中不可或缺的部分，是App界面设计的重点。从表达形式而言，图标可分 为拟物化图标、扁平化图标、2.5D图标3种类型。
6.2.3 App界面图标设计要点
4
在进行App界面设计时，除了需要掌握图标的类型外，还需要掌握App界面图标的设计要点。
具备识别性
具备共性 和差异性
风格统一
6.2.4 设设计“书画应用”2.5D图标，在设计时先绘制图标形状，然后绘制毛笔形状，完成后 的效果不但简洁美观，而且主题鲜明，其具体操作如下。
UI界面设计ppt课件
5
6
7
平衡原则
预期原则
经济原则
顺序原则
规则化
8
平衡原则 注意屏幕上下左右平衡。不要堆挤数据，过 分拥挤的显示会产生视觉疲和接收错误。
9
预期原则 屏幕上所有对象，如窗口、按钮、菜单等处 理应一致化，使对象的动作可预期。
10
顺序原则 对象显示的顺序应依需要排列。通常应最先 出现对话，然后通过对话将系统分段实现。
19
20
软件界面设计是为了满足软件专业化标准化 的需求而产生的对软件的使用界面进行美化、 优化、规范化的设计分支。
21
22
23
24
25
具体包括：
软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化
14
格式
在屏幕显示设计中，一幅画面不要文字太 多，若必须有较多文字时，尽量分组分页， 在关键词处进行加粗、变字体等处理，但 同行文字尽量字型统一。英文词除标语外， 尽量采用小写和易认的字体。
15
16
17
信息内容
信息内容显示不仅采用简洁、清楚的表达， 还应采用用户熟悉的简单句子，尽量不用 左右滚屏。当内容较多时，应以空白分段 或以小窗口分块，以便记忆和理解。重要 字段可用粗体和闪烁吸引注意力和强化效 果，强化效果有多样，针对实际进行选择。
28
29
软件按钮设计应该具有交互性，即应该有3到6 种状态效果：点击时状态；鼠标放在上面但未 点击的状态；点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态；不能点击时 状态；独立自动变化的状态。按钮应具备简洁 的图示效果，应能够让使用者产生功能关联反 应，群组内按钮应该风格统一，功能差异大的 按钮应该有所区别。
《UI设计》课件——6.4 App列表页界面设计
App列表页界面设计
6.4.1 App列表页界面类型
2
大多数商品类列表页界面多以单行 列表的形式进行展示，通常为左图 右文。图片能够诱导用户进行点击， 文字则用来说明商品信息。
双行列表页界面将界面内容分为两 个部分，常以卡片的形式进行展现， 卡片中上面为图片，下面为文字， 不但节省空间，而且使界面显得更 饱满。
4
本例将设计美食App列表页界面。在设计过程中先添加参考线，然后进行内容设计与制作。 该列表页界面采用双行列表的方式对列表内容进行展现，整体效果美观大方、便于查看，其具体 操作如下。
1 创建参考线
2 添加状态栏
单行列表 双行列表
页界面
页界面
6.4.2 App列表页界面设计原则
3
列表内容不能过满，要适当地进行 留白。留白能让整个App界面显得 张弛有度，并且有亲疏之分。
01
需要重点突出的元素应使 用明亮的颜色，使列表层要保证实物对象在前，虚化部分在 后，这样才能使主体更加明确。
6.4.3 设计案例——设计美食App列表页界面
6.4.1 App列表页界面类型
2
大多数商品类列表页界面多以单行 列表的形式进行展示，通常为左图 右文。图片能够诱导用户进行点击， 文字则用来说明商品信息。
双行列表页界面将界面内容分为两 个部分，常以卡片的形式进行展现， 卡片中上面为图片，下面为文字， 不但节省空间，而且使界面显得更 饱满。
4
本例将设计美食App列表页界面。在设计过程中先添加参考线，然后进行内容设计与制作。 该列表页界面采用双行列表的方式对列表内容进行展现，整体效果美观大方、便于查看，其具体 操作如下。
1 创建参考线
2 添加状态栏
单行列表 双行列表
页界面
页界面
6.4.2 App列表页界面设计原则
3
列表内容不能过满，要适当地进行 留白。留白能让整个App界面显得 张弛有度，并且有亲疏之分。
01
需要重点突出的元素应使 用明亮的颜色，使列表层要保证实物对象在前，虚化部分在 后，这样才能使主体更加明确。
6.4.3 设计案例——设计美食App列表页界面
UI设计PPT完整全套教学课件(2024)
30
避免过度使用动画，保持简洁性
1 2
适度使用
避免过多动画导致用户分心或产生视觉疲劳。
明确目的
确保动画服务于内容展示和用户体验提升。
3
保持简洁
选择简洁明快的动画效果，避免过于复杂或花哨 的设计。
2024/1/29
31
05 响应式布局与适配不同设 备
2024/1/29
32
响应式布局概念及优势分析
图文结合
将图片与文字有机结合，提高页面的整体美感和 信息传递效率。
15
文字排版和字体选择技巧
字体选择
选择易读性高、风格统一的字体，避免使用 过于花哨或难以阅读的字体。
字号和行距
根据内容层次和重要性，合理设置字号和行 距，确保文字清晰易读。
对齐和间距
文字应对齐工整，保持合适的字间距和行间 距，提高页面的整体美感。
使用跨平台UI框架
使用能够适配多种设备和浏览器的UI框架，如Bootstrap、React Native等。
进行兼容性测试
在多种设备和浏览器上进行测试，确保页面在不同平台上的表现一 致。
35
测试方法确保兼容性
浏览器兼容性测试
测试在不同浏览器和不同版本的浏览器 中的页面表现，包括主流浏览器和移动
设备浏览器。
2024/1/29
19
交互设计原则及流程梳理
• 反馈及时：对用户的操作给予及时、准确的反馈，提高用 户满意度。
2024/1/29
20
交互设计原则及流程梳理
需求分析
明确设计目标，了解用户需求。
草图设计
快速构思，绘制草图，明确界面布局。
2024/1/29
21
交互设计原则及流程梳理
避免过度使用动画，保持简洁性
1 2
适度使用
避免过多动画导致用户分心或产生视觉疲劳。
明确目的
确保动画服务于内容展示和用户体验提升。
3
保持简洁
选择简洁明快的动画效果，避免过于复杂或花哨 的设计。
2024/1/29
31
05 响应式布局与适配不同设 备
2024/1/29
32
响应式布局概念及优势分析
图文结合
将图片与文字有机结合，提高页面的整体美感和 信息传递效率。
15
文字排版和字体选择技巧
字体选择
选择易读性高、风格统一的字体，避免使用 过于花哨或难以阅读的字体。
字号和行距
根据内容层次和重要性，合理设置字号和行 距，确保文字清晰易读。
对齐和间距
文字应对齐工整，保持合适的字间距和行间 距，提高页面的整体美感。
使用跨平台UI框架
使用能够适配多种设备和浏览器的UI框架，如Bootstrap、React Native等。
进行兼容性测试
在多种设备和浏览器上进行测试，确保页面在不同平台上的表现一 致。
35
测试方法确保兼容性
浏览器兼容性测试
测试在不同浏览器和不同版本的浏览器 中的页面表现，包括主流浏览器和移动
设备浏览器。
2024/1/29
19
交互设计原则及流程梳理
• 反馈及时：对用户的操作给予及时、准确的反馈，提高用 户满意度。
2024/1/29
20
交互设计原则及流程梳理
需求分析
明确设计目标，了解用户需求。
草图设计
快速构思，绘制草图，明确界面布局。
2024/1/29
21
交互设计原则及流程梳理
app界面设计ppt课件
精选ppt课件2021
7
3
第三种APP信息布局方式：
大图展示布局
精选ppt课件2021
代表APP， mono猫弄、 one APP 等等。 8
4
第四种APP信息布局方式：
标签布局
标签布局来源移动android开发当中的一个术 语：标签布局 除了tab布局。还有标签关键词布局，热度布 局等等。 以标签的方式显示它的子视图元素，就像在 Firefox中的一个窗口中显示多个网页一样。
精选ppt课件2021
4
2
第二种APP信息布局方式：
列表布局
列表布局就是以列表的形式展示具体内容，并且能够根据数据的长度自适应显示。 列表布局就是List View 是可以滚动的列表布局方式，最常见的应该属于 android的列表布局，这也是最快速的app布局方式。因为无论ios开发和android 都有现成的列表布局插件和模板。
精选ppt课件2021
9
4
第四种APP信息布局方式：
标签布局
精选ppt课件2021
10
Thank you
精选ppt课件2021
11
感谢亲观看此幻灯片，此课件部分内容来源于网络， 如有侵权请及时联系我们删除，谢谢配合！
12
感谢亲观看此幻灯片，此课件部分内容来源于网络， 如有侵权请及时联系我们删除，谢谢配合！
精选ppt课件2021
5
2
第二种APP信息布局方式：
列表布局
以上的APP界面基本都是以列表布 局为主导。最能代表的就是分类信 息的展示形式。还有产品列表、对 话列表等等。
精选ppt课件2021
6
3
第三种APP信息布局方式：
UI界面设计PPT教学课件(2024)
利用缓动函数实现元素运动的平滑过渡，增强视觉效果。
缓动函数应用
通过定义关键帧实现复杂的动画效果，提高界面活力。
关键帧动画
利用CSS3的动画与变形属性实现丰富的动效表现，提升用户体验。
CSS3动画与变形
借助JavaScript实现更高级别的动效控制，如交互反馈、实时渲染等。
JavaScript动态效果
输入框（Input B…
允许用户输入文本信息，如搜索框、表单填写等。
下拉菜单（Dropdo…
提供一系列选项供用户选择，节省页面空间。
滑块（Slider）
用于调节数值或选择范围，如音量调节、色彩选择等。
弹窗（Modal）
用于展示重要信息或引导用户进行特定操作，如登录框、确认框等。
03
04
05
22
2024/1/29
UI界面定义
优秀的UI设计能够提升用户体验，增强产品吸引力，提高用户满意度和忠诚度。
重要性
4
2024/1/29
简洁明了、一致性、反馈及时、美观大方、易用性等。
视觉设计、交互设计、信息架构、可用性、可访问性等。
用户体验要素
设计原则
5
2024/1/29
个性化设计、情感化设计、智能化设计、跨平台设计、响应式设计等。
根据设计需求，合理运用图片大小、位置和层次等排版技巧。
03
02
01
15
2024/示优秀UI界面中图标、图片和文字的综合运用案例。
案例分析
学员动手实践，运用所学知识设计UI界面，并互相点评交流。
设计实践
邀请资深设计师分享UI界面设计经验及技巧。
经验分享
17
2024/1/29
APP UI 设计规范ppt课件
程序应用
Iphone6 1024x102 180x180
plus
4px
px
Iphone6/6 1024x102 120x120
s
4
px
px
Iphone5/5 1024x102 120x120
c/5s
4
px
px
Iphone4/4 1024x102 120x120
s
4
px
px
主屏幕
114x114 px 114x114 px
48dp=72px；
21
常用屏幕尺寸
240x320 ldpi （低等屏幕） 320x480 mdpi （中等屏幕） 480x800 hdpi （高清屏幕） 720x1280 xhdpi （超高清屏幕） 相应的图片资源尺寸的比例关系为1：1.5:
22
2
字体规范、大小
5.X版本：思源黑体/Noto Sans Han 5.0以下版本：Droid Sans Fallback，可 用 文泉驿微米黑 代替 英文、数字：Roboto 标题（58px或60px） 二级标题（44px或 48px） 正文字体（32px或36px）；英文 23
生就像走斑马线规规矩矩行行道道总是太多面对人生所有选择所有进退我想做为一名小学生我们更应该思考的是11分段控制框生就像走斑马线规规矩矩行行道道总是太多面对人生所有选择所有进退我想做为一名小学生我们更应该思考的是12滑块开关生就像走斑马线规规矩矩行行道道总是太多面对人生所有选择所有进退我想做为一名小学生我们更应该思考的是13布局标准控件布局原理8px原理由由于ios技术开发是以320x640px为标准开发的所以此设定尺寸为1算出各个尺寸的比例然后乘以4各个尺寸都能满足是整数ios1334x750pxiphone66s生就像走斑马线规规矩矩行行道道总是太多面对人生所有选择所有进退我想做为一名小学生我们更应该思考的是14图标网络apple使用黄金分割在它们的一些图标上
iOS_App界面设计规范ppt课件
iOS App界面设计规 范
方便进行标准的产品设计
2020/3/28
1
界面尺寸
2020/3/28
2
iPhone系列界面尺寸
设备
iPhone X
6+/6S +/7+/8+ 6/6S/7/8 iPhone SE
分辨率 1125 x 2436 px 1242 x 2208 px
状态栏 导航栏高度 标签栏高度 缩放因子 主屏尺 ppi 开发尺寸
Maximum sizes 83px x 83px(27.67pt x 27.67pt @3x) 56px x 56px(28pt x 28pt @2x)
18
• 设计单色模板图标 • 图标scale factor设置为@2x • 图标保持一致 • 图标要清晰易读，实心或者线条要一致
• 用颜色来表述选中或未选中两种状态
98px
@2x
4 326 320 x 568pt
iPhone5/5s /5c
640 x 1136 px
40px
88px
98px
iPhone4/4s
640 x 960 px
40px[20p t]
88px[44pt]
98px
@2x
4 326 320 x 568pt
@2x
3.5 326 320 x 480pt
your app is installed, as well as 120px x 120px (60pt x 60pt @2x)
larger icon for display in the App iPad Pro
iPad, iPad mini
167px x 167px (83.5pt x 83.5pt @2x) 152px x 152px (76pt x 76pt @2x)
方便进行标准的产品设计
2020/3/28
1
界面尺寸
2020/3/28
2
iPhone系列界面尺寸
设备
iPhone X
6+/6S +/7+/8+ 6/6S/7/8 iPhone SE
分辨率 1125 x 2436 px 1242 x 2208 px
状态栏 导航栏高度 标签栏高度 缩放因子 主屏尺 ppi 开发尺寸
Maximum sizes 83px x 83px(27.67pt x 27.67pt @3x) 56px x 56px(28pt x 28pt @2x)
18
• 设计单色模板图标 • 图标scale factor设置为@2x • 图标保持一致 • 图标要清晰易读，实心或者线条要一致
• 用颜色来表述选中或未选中两种状态
98px
@2x
4 326 320 x 568pt
iPhone5/5s /5c
640 x 1136 px
40px
88px
98px
iPhone4/4s
640 x 960 px
40px[20p t]
88px[44pt]
98px
@2x
4 326 320 x 568pt
@2x
3.5 326 320 x 480pt
your app is installed, as well as 120px x 120px (60pt x 60pt @2x)
larger icon for display in the App iPad Pro
iPad, iPad mini
167px x 167px (83.5pt x 83.5pt @2x) 152px x 152px (76pt x 76pt @2x)
APP UI设计规范(可公开版)1.3
APP UI设计规范（可公开版）前言APP UI设计，有何规律？从抽象到具体，前后台并行，大概要经过几个阶段，每个阶段，都有一些明确的阶段输出doc，具体：（上图是在著名的《用户体验要素》原图上进行改编）KPA#1：第一痛点创意首先，要确定你的“第一痛点”（first-item）还没有人做过，最好的调查方式是到APP Store上搜索已有的APP程序。
如果你发现已经有某个APP包含类似的痛点，那你需要比它做的“更好”，“更好”可以体现在体验（exp）创新上，也可以体现在功能（func）革命上。
中国的法律环境缺乏对APP痛点相关智识产权的严格保护，但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。
为什么呢？任何APP都不是孤立存在的，受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响，简单clone成功可能性很小。
另一方面，第一痛点创意风险很大，所谓失之毫厘，谬以千里，推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘，最好能输出类似下面的脚本化体验故事/片段：1.1）体验片段#1。
比如定机票应用中，有头等舱和经济舱。
经济舱是一个普通的人，而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。
要做头等舱的人，一般都愿意自己看到自己这么一个形象。
1.2）体验片段#2。
比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。
其实它在干嘛呢？它是在提示用户，新增了自己相册功能。
它虽然是给用户介绍新功能，但是它把整个情绪融在里面。
1.3）体验片段#3：比如安心停车，该APP具备查找附近有剩余车位的停车场位置，以及根据收费情况进行优先显示的基本功能，而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。
《UI设计》课件——6.1 认识App界面
要具备美观性
认识App界面
6.1.1 App基本界面构成
2
右图所示为去哪儿网App的各个 界面，可发现其界面分为3个部分， 分别是标题栏、信息展示区、底部导 航栏。
6.1.2 App界面布局形式
3
1. 导航布局
顶部导航式布局 底部标签导航式布局 双导航式布局
抽屉导航式布局
6.1.2 App界面布局形式
4
2. 信息展示布局
宫格式布局
热门标签式布局 图示式布局
信息展 示布局
竖排列表式布局 手风琴式布局
大图展示式布局
图表式布局
6.1.3 App界面设计要点
5
设计人员在进行App界面设计时，需要展现App的特点和功能，使其能够更快、更准确地传 递信息。App界面的设计要点主要包括如下4点。01Leabharlann 要明确传达主旨02
03
04
要保证功能的合理性 要有清晰的展现信息层级
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
开发的，所以此设定尺寸为1，算出各个尺 寸的比例，然后乘以4，各个尺寸都能满足 是整数，可以保证开发时不会模糊。@2px （视网膜屏的到来）切图设计稿尺寸是 640x960px，所以设计时最小的单位尺寸是 8px。 使用8px原理的目的
保证在双平台上大部分机型开发中不会 出现模糊的变形的问题；而且只需设计一套 设计稿，减少设计师的工作量，提高工作效 率。
13
图标网络
Apple使用黄金分割在它们的一些图标上。这让图标保持良好的比例， 同时确保了美感。虽然这是一个很好的规范，但它不是严格要求。甚至 Apple在很多图标上也省略了它。
14
标准色
15
字体大小、规格
一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。 IOS 9 中文字体：苹方/PingFang SC IOS 8 中文字体：常州华文的黑体-简，在mac os x 系统中选择 黑体-简 IOS 英文、数字：HelvetialIOS ＆ Androi来自 APP UI设计规范1
iOS 篇
2
iOS 界面尺寸
设备
分辨率
PPI
状态栏高度 导航栏高度 标签栏高度
Iphone6 plus
1080x1920 px
Iphone6/6s 750x1334 px
Iphone5/5c/ 640x1136
5s
px
Iphone4/4s 640x960 px
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）
20
常用尺寸
• 一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户 手指能够准确舒适触碰的最小尺寸。
• Android界面默认list的高度是：48dp=72px； • Android界面每个元素之间最小的间距是：8dp=12px； • Android界面默认btn的高度是：40dp=60px • px=ppi/160*dp
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
22
字体规范、大小
5.X版本：思源黑体/Noto Sans Han 5.0以下版本：Droid Sans Fallback，可用 文泉驿微米黑 代替 英文、数字：Roboto 标题（58px或60px） 二级标题（44px或48px） 正文字体（32px或 36px）；英文最小字号22px，中文最小字号。
7
搜索栏
8
工具栏 Stepper控件
9
提示框
提示对话框是用于输送关键信息和提示快速操作。提示应保持最 少文字，退出一定是明显。
10
分段控制框
11
滑块 开关
12
布局标准控件
ios 1334x750 px Iphone6/6s
布局原理（8px原理由来） 由于ios技术开发是以320x640px为标准
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.
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 图例
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
21
常用屏幕尺寸
240x320 ldpi （低等屏幕） 320x480 mdpi （中等屏幕） 480x800 hdpi （高清屏幕） 720x1280 xhdpi （超高清屏幕） 相应的图片资源尺寸的比例关系为1：1.5: 2 也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可调整到 200%。
保证在双平台上大部分机型开发中不会 出现模糊的变形的问题；而且只需设计一套 设计稿，减少设计师的工作量，提高工作效 率。
13
图标网络
Apple使用黄金分割在它们的一些图标上。这让图标保持良好的比例， 同时确保了美感。虽然这是一个很好的规范，但它不是严格要求。甚至 Apple在很多图标上也省略了它。
14
标准色
15
字体大小、规格
一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。 IOS 9 中文字体：苹方/PingFang SC IOS 8 中文字体：常州华文的黑体-简，在mac os x 系统中选择 黑体-简 IOS 英文、数字：HelvetialIOS ＆ Androi来自 APP UI设计规范1
iOS 篇
2
iOS 界面尺寸
设备
分辨率
PPI
状态栏高度 导航栏高度 标签栏高度
Iphone6 plus
1080x1920 px
Iphone6/6s 750x1334 px
Iphone5/5c/ 640x1136
5s
px
Iphone4/4s 640x960 px
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）
20
常用尺寸
• 一般把48dp作为可触碰UI原件的标准，48dp=72px=9mm，这是一个用户 手指能够准确舒适触碰的最小尺寸。
• Android界面默认list的高度是：48dp=72px； • Android界面每个元素之间最小的间距是：8dp=12px； • Android界面默认btn的高度是：40dp=60px • px=ppi/160*dp
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
22
字体规范、大小
5.X版本：思源黑体/Noto Sans Han 5.0以下版本：Droid Sans Fallback，可用 文泉驿微米黑 代替 英文、数字：Roboto 标题（58px或60px） 二级标题（44px或48px） 正文字体（32px或 36px）；英文最小字号22px，中文最小字号。
7
搜索栏
8
工具栏 Stepper控件
9
提示框
提示对话框是用于输送关键信息和提示快速操作。提示应保持最 少文字，退出一定是明显。
10
分段控制框
11
滑块 开关
12
布局标准控件
ios 1334x750 px Iphone6/6s
布局原理（8px原理由来） 由于ios技术开发是以320x640px为标准
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.
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 图例
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
21
常用屏幕尺寸
240x320 ldpi （低等屏幕） 320x480 mdpi （中等屏幕） 480x800 hdpi （高清屏幕） 720x1280 xhdpi （超高清屏幕） 相应的图片资源尺寸的比例关系为1：1.5: 2 也就是第一套图为mdpi的资源图片，hdpi可调整到150%，xhdpi可调整到 200%。