UI设计师必收！同行总结可即刻上手的iOS规范参考

土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/

 

使用HTML 建立Mac OS App 视频教程。

官方QQ群:

(1)App实践出真知 434558944

(2)App学习交流 452180823

 

百度网盘同步：http://pan.baidu.com/s/1jG1Q58M

分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS

简直了，必须推荐给大家看看！HTML开发Mac OS App 视频教程 （分享自 @土豆 ） O网页连接

 

@-Deeper：最近一直在研究移动端的设计，不一样于创意稿，侧重于想法，视觉传达，较少考虑开发成本，或者产品需求。要上线的设计稿须要严格的视觉规范，而非单个页面的展现，是一个总体、统1、成套的系统。须要考虑也比较多，时间，人力，质量都必须去考虑。因此，决定为新的移动端产品作一套视觉规范。也有如下有几个好处：

1. 对于设计或者开发人员更具指导意义

2. 保持产品视觉与交互的统一

3. 提升工做效率 
   …

如下是在写视觉规范前一部分对iPhone几个较为典型界面的总结，一方面是了解苹果的一些默认数值，另外一方面是对视觉规范有个大致的参考基础。

以iPhone5 设置页面为基础

高度

1. 状态栏+导航栏 高度 128px，1px分割线，共129px，

2. 列表内小图标大小 58*58px 圆角为12px

3. 板块与板块之间的间隔为70px（若是状态栏+导航栏有1px分割线的话距离为69px）

4. 列表高度为86px

字体

iPhone的系统字体，在设计稿中最接近的中文字体为黑体-简 英文写做Heiti SC 英文字体为helvetica Regula r

1. 导航字体 中体 样式：浑厚 34px

2. 列表类字体 细体 样式：浑厚 34px

边距

1. 上下不限制

2. 左右距离手机屏幕边缘 左右各30px

3. 列表内图标上下左右间距30px

以iPhone5通知中页面为例

1. 板块说明文字 26px 细体 浑厚 与板块距离18px

2. 列表类标对一级标题说明 24px 细体 浑厚 与一级文字距离8px

3. 列表高度（包含1px分割线）100px

以iPhone5的APP Store 更新页面为例

1. 导航上返回/更新的字体：33px 细体 浑厚（没错就是33px —_—|||）；箭头与屏幕边框距离为16px

2. 控件一级菜单栏内tab切换：580x58px（包括2px描边） tab里字体：24px 细体 浑厚

3. 搜索框：608x56px；圆角12px；搜索框内字体：28px 细体 浑厚

4. 更新列表内图标： 128x128px ；圆角：30px

5. 列表高度（列表不包括向下1px分割线）：168px，因此icon距离列表20px

6. 列表内文字：28px 细体 浑厚；说明性文字：24px 细体 浑厚

7. 列表内部按钮大小92x52px ，包含2px描边，字体大小28px 细体 浑厚

8. tabbar下部菜单：高度 98px（包含顶部1px分割线）；字体20px 细体 浑厚

9. 更新通知红点大小： 36x36px 红点内数字 helvetica Regular 24px

屏幕像素尺寸与物理尺寸

pixels per inch 每英寸上像素点数量，iPhone3gs和iPhone4s屏幕大小同为3.5英寸。可是iPhone4s是将一个像素分为了4个像素。

也就是说按本来的尺寸设计适合只须要创建320x480px的画布（iPhone 3gs），视网膜屏出现之后就是将宽和高都乘以2倍。640x960px（iPhone 4s）因为图片从大放小效果不会受到影响，但从小放大就会出现质量误差，因此设计师们会以大尺寸为设计标准。这样适配各个屏幕尺寸比较省时。

开发者在xcode上开发的屏幕选择和设计师是不同的，他们只须要选择手机的物理尺寸便可以下图：

这里有一个pt的概念，下面是引用 《通俗易懂！超全面的移动端尺寸基础知识科普指南》 的一段文字：

 

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

1.5倍：1pt=1dp=1.5px（hdpi）

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

4倍：1pt=1dp=4px（xxxhdpi）

目前就总结了这些，基本可以理解之后，与开发者合做就比较容易，也可以很好的进行视觉还原的工做！