APP设计指南1培训课件.ppt

APP设计指南 IOS篇 1 一、 iOS设计尺寸建议： 以 640*960 或 640*1136 为基础适配 iphone4,5,6, 以 1242*2208 的尺寸去设计 iphone6 plus 内容区域 状态栏 导航栏 标签栏 设计界面 iPhone4-5s iPhone6 iPhone6 plus 状态栏 40 px 40 px 60 px 导航栏 88 px 88 px 132 px 标签栏 98 px 98 px 146 px 建议按照自己手机尺寸来设计，方便预览效果。 一般用640*960 或者 640*1136的尺寸设计 界面元素 2 二、 Android篇 2 一、 像素=DP*（DPI / 160） 例如，在一个240dpi的屏幕里，1DP等于1.5PX Android设计尺寸建议： 480*800 或 720*1280 图标 内容区域 状态栏 导航栏 标签栏 设计界面 720*1280 状态栏 50 px 导航栏 96 px 标签栏 96 px 安卓高中这些控件的高度都能用程序自定义，并没有严格的尺寸 3 一. 字体大小 iPhone上的字体英文为：HelveticaNeue。至于中文Mac下用的是 黑体，Win下可以用华文黑体 或者 方正黑体简体。 百度用户体验做过的一个小调查，可以看出用户可接受的文字大小 可接受下线 （80%用户可接受） 见小值 （50%以上用户认为偏小） 舒适值 （用户认为舒适） iOS 长文本 26 px 30 px 32-34 px 短文本 28 px 30 px 32 px 注释 24 px 24 px 28 px 设计 3 二. 图形部件 1. 状态栏差别 iOS版app内状态栏是可以修改背景的 Android版状态栏和手机有关，设计时不必考虑 3 设计 —— 图形部件 2. 可点击部件不小于88px 3. 所有部件的尺寸必须是双数 每个按钮有四种状态【默认】 【按下】【选中】【不可点】，至少考虑2种状态 【默认】【选中】 3 5. 除了广告图片，其他部件最好都用形状工具绘制 6. 可点击部件和周围边框保持一定间距（一般控制在20-30px） 7. 设计的时间要一直保持一个使用者而非设计者的思想。因为手机的可显示范围小所以布局的时候逻辑性要考虑，比如什么时候需要标签栏，什么页面只要返回按钮。 3 4 iPhone的切图适配： 切图 XXX.png 适配3GS（非视网膜屏幕） XXX@2x.png 适配iphone4、4s、5、5s、6 XXX@3x.png 适配iphone6 plus Android的切图适配（主流屏幕尺寸）： 320*480 px 480*800 px 720*1280 px 1080*1920 px 4 一. 需要提供给程序的切图文件包括： images 标注图 4 IOS的切图可以直接适用到 Android 的 XHDPI 模式 二. 设计图中需要切出来的元素： Logo 边框 按钮 图标 标签 其他控件 …… 4 三. 切图要点 1） 以每个模块分开创建文件夹存放切图文件，例如： 2） 所有切图必须为偶数，一般情况下切片格式为 PNG24 这样更助于程序员在做每个模块的时候找到相应图片。 4 3） 可平铺部件切图时： 4 4） 底部标签栏（有默认和选中两张效果）： 4 5） 命名规范： 非视网膜屏幕：XXX.png， Retina屏幕：XXX@2x.png 欢迎页、背景等需要对不同屏幕另外切图的文件名： 建议采用如下方法命名 Iphone 5、5s： xxx-5@2x.png Iphone 6： xxx-6@2x.png iphone 6 plus： xxx-6@3x.png 模块_类别_功能_状态.png 例：searchbg.png home_btn_selected.png