A pp 设计规范简述
一、Android：
确定GUI需求——手机屏幕的大小 象素尺寸是目前较常见的手机屏幕尺寸，在设计时
可以根据实际产品要求进行设计，更大的屏幕可以 有更多的交互表现和视觉元素的支持，较为自由。 128×160 176×220 240×320（较多） 480×320
480×800（三星Galaxy S II，Andriod多用) 960×640（iPhone4: 3.5英尺 分辨率330dpi）
2-2 iphone4 –规范
3、IOS 文字规范:
2-2 iphone4 –规范
3、IOS 文字规范:
2-2 iphone4 –规范
3、图片/头像/缩略图数据参考：
头像
相册
头像
商品列表 商家图片 日志图片
格子铺 商家优惠 活动礼券
未知数
小
中
大 做略图
全屏
缩略图 小
缩略图 小
缩略图 缩略图 缩略图
2-1界面设计规范
导航栏：
高宽： 8 8 * 6 4 0 P X 坐标： 0 . 4 0 字体大小：按钮中文字24px / 导航标题3 4 p x 说明：位于“状态栏”下方，进入某些卡片后显示其当前位置的区域，包含2个控件（左右） 不能改变其高度以及样式轮廓（如“返回”样式轮廓是向左侧的三角，改变它的特征将会降 低iPhone使用者对己熟悉样式轮廓的对应操作理解）。并且需要注意“导航栏外观、导航栏 按钮”的视觉元素必须始终保持一致性，在其他卡片中时。 注:导航栏在例如“网页”状态时，则会改变其高度，或其特殊设计时，此时高度为120px
大 缩略图 缩略图
小 banner
80*80
124*124
140*140 200*150 960*640
140*140 80*80
200*150 120*120 200*150 124*124 120*120 限宽6 0 0 120*120 224*168 120*120 318*200
IPAD的设计尺寸
界面尺寸：
设备
尺寸
分辨率
状态栏高度 导航栏高度 标签栏高度
iPad第三代、第四代 2048*1536px
264PPI
40PX
88PX
98PX
iPad第一代、第二代
1024*768px
132PPI
20PX
44PX
49PX
iPad Mini
1024*768px
163PPI
20PX
44PX
49PX
IPAD的设计尺寸
3）卡片栏页面
◦ #每个卡片为独立的任务集 ◦ #个数取决于实际，但建议为4个卡片，最多5个，超过则第5个为“更多” ◦ #每个卡片内将可能有数个子级（即：1>1-2>1-3>...关系存在） ◦ #每个“子级”左侧必须包含返回上级的“按钮”，一般叫“返回”，子级过深则为“上级标题名称” ◦ #“子级”的标题名称应当为“当前卡片主要信息的总称”或“所执行按钮名称”，如“详情信息、 ◦ 主页、地图、私信、发送信息、选择”，取名间断且通俗易懂。 ◦ #当进入到“子级”时，可选隐藏“卡片栏”，直至点击“返回”该卡片顶层或“点击底部”弹出。
1-1、icon设计规范
IOS(iPhone)App 图标规范
为了使应用在App Store中吸引更多用户的 关注 漂亮的图标是必须的 为了保证应用能在IOS设备中展现的更好 按照要求制作图标 使应用的图标在每个对应的展示区都不被压 缩或拉大、模糊或锯齿 从而给用户留下好印象 所以严格按照图标规格制作图标是必须的
安卓文字规范
安卓文字规范
二、Iphone：
iPhone“应用 ”包含如下主要 界面：
1) 启动画面
◦ # 用于减缓启动时带来的延迟感 ◦ # 一般采用图片或简短的动画效果及 飞入 ） ◦ # 有时启动画面和登录可能会整合到一起
2) 登录页面
◦ # 用于户输入账号与密码的页面 （页面为logo与登录框 的组合的组合 ） ◦ #部分应采用一次登录后始终自动登录（除非在设置中关闭）
iPhone分组表格：
高宽： 9 0 * 6 0 4 p x 字体大小： 34px
边框线： 2px
2-1、界面构成
iPhone平面表格：
平面表格高度根据功能情况来定， 但要有一致性。
2-1界面设计规范
状态栏：
高宽： 4 0 * 6 4 0 P X 坐标： 0 . 0 说明：除了“沉浸式”应用默认隐藏外，其他“实用型”“效率型” 应用建议保留（若隐藏则需点击顶部可弹出）
2-1界面设计规范
卡片栏：
高宽： 9 8 * 6 4 0 P X 坐标： 0 . 8 6 2 图标大小： 6 0 * 6 0 px 字体大小： 2 0 px 说明：卡片默认样式为选中后有阴影块以及点亮图标（由iPhone自动生成的），在特殊情况 下可以改变。 图标设计应直达其该卡片”任务集“的寓意，是用众人皆知的图标样式（或联想），特别是在 没有头文字辅助描述下时。
1-1、icon设计规范
iPhone Apps
程序icon的设计： 直角。 无发光效果。 无透明度。 将图片命名为Icon.png， 放置在程序的资源包中， iPhone os 会 自 动 生 成 一 个 icon
2-1、界面构成
iPhone 基本界面构成：
状态栏 导航栏 内容区
卡片栏
2-1、界面构成
1-1、icon设计规范
512×512 57×57
114×114 72×72 29×29
50×50 58×58
iTunesArtwork Icon.png Icon@2x.png Icon-72.png Icon-Small.png Icon-Small-50.png Icon-Small@2x.png
IPAD的设计尺寸
IPAD的设计尺寸
界面尺寸：
设备
App Store(Retina)
App Store
主屏幕
Spotlight搜索
2-2 iphone4 –规范
1、文字规范：
2-2 iphone4 –规范
1、文字规范：
2-2 iphonห้องสมุดไป่ตู้4 –规范
2、控件基本规范：
2-2 iphone4 –规范
3、IOS 文字规范:
2-2 iphone4 –规范
3、IOS:
2-2 iphone4 –规范
3、IOS 文字规范: