恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP开发规范总结
0.0°
2019-03-21 原创文章 经验/观点 举报 1579 5 4 0

以工作经验中认为有必要时常知道的规范为出发,总结了多位大神的分享。

IOS设计尺寸

Image title

Image title


320*480px    IPhone3GS   (我没见过3GS实体机,只在网上见过图片,但你需要知道这个尺寸)

640*960px       IPhone 4/4s  (4拟物化盛行时代的设计尺寸)

640*1136px     IPhone 5/5s/5c  (5时代的设计尺寸,现在出来6/6 plus,很少有人再用这个尺寸设计)

750*1334px     IPhone 6    (基本上现在做IOS的APP设计,用这个的应该最多)

1242*2208px   Phone6 plus  (这是标准分辨率,也就是设计需要的尺寸;另外还存在物理分辨率是1080*1920,主要是程序员那边为了匹配不同分辨率视觉一致用的。plus还涉及到横屏,横屏是是没有状态栏的,设计横屏时可以参考IPad的设计模式)


屏幕尺寸:我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。

1 inch = 2.54cm = 25.4mm

Image title


PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目。PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱。


关于字体大小的问题(750*1336为例)

顶部操作栏文字大小      34-38px

标题文字大小                28-34px

正文文字大小                26-30px

辅助性文字大小             20-24px

Tab bar文字大小           20px

切记,字体大小要用偶数。


最小点击区域问题

IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点),在设备上1 point等于1像素,所以转换成像素就是44*44像素,换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论:

用食指操作,触击范围在7mm左右合适;用拇指操作,范围在9mm左右合适)。

据说这个尺寸下,不容易出现误操作,误点击;小于这个尺寸,点击就会变的有些不太准确,一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……

所以现在做设计,为了图标精致,你可以把图标做的小一些,但是切图输出的时候,要考虑用户点击难易度的问题,

所以,切图的时候,涉及到需要点击的小图标的时候,普通屏幕还是切44px大小,高清屏就需要切88px,不够的地方用透明区域补全,否则用户点击的时候会比较困难,会很不灵敏。


Scale起源

早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS绘制图形(CGPoint/CGSize/CGRect)均以point为单位(measured in points):

1 point = 1 pixel(Point Per Inch=Pixel Per Inch=PPI)

后来在iPhone4中,同样大小(3.5 inch)的屏幕采用了Retina显示技术,横、纵向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 显像分辨率提升至iPhone3GS的4倍(1个Point被渲染成1个2x2的像素矩阵)。

但是对于开发者来说,iOS绘制图形的API依然沿袭point(pt,注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下(320x480):1 point = scale*pixel在iPhone4~6中,缩放因子scale=2;在iPhone6+中,缩放因子scale=3)。

可以理解为:

scale=绝对长度比(point/pixel)=单位长度内的数量比(pixel/point)


切图

Image title


Image title


Image title


切片的命名规则:

切片种类+功能+图片描述(可有可无)+状态.png

名称应使用英文命名,不要以数字或者符号当作开头,使用下划线进行连接。

举个例子:一个首页的处于正常状态的确定按钮

btn_sure_nor.png

btn_sure_nor@2x.png

切片种类是按钮(btn);功能是确定(sure);状态是normal(正常)


安卓补充


Image title


Image title




更新:2019-03-21

收藏

5人已收藏

小人物L

加油!不是一句话的事儿

  • 9

    作品

  • 3

    粉丝

  • 8

    关注

  • 民兵训练大屏
  • AE粒子动画
  • 作品集
  • 上海地铁司机评估系统
相关标签
app规范

    猜你喜欢

      2019-03-21 原创文章 经验/观点 举报 1579 5 4 0

      APP开发规范总结

      0.0°

      你确定要举报APP开发规范总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录