交互设计基础知识

高度

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

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

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

列表高度为86px

字体

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

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

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

边距

上下不限制

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

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

以iPhone5通知中页面为例

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

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

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

以iPhone5的APP Store 更新页面为例

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

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

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

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

列表高度（列表不包括向下1px分割线）：168px，所以icon距离列表20px

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

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

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

更新通知红点大小： 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）

当前页加载方式，框架加载优先

分布加载：优先加载占用资源少的内容，如框架，文字，再加载网路资源多的，如图片

懒加载：长列表，用户下滑达到某个点后自动加载更多内容

预加载：提前加载，如闪屏时候提前加载首页内容

智能加载：在不同网络下生成不一样的界面，网络差隐藏信息。主动判断网路，提供不同质量图片

缓存加载：针对无网络，让用户仍能看到缓存在本地有用信息，一般在主界面都会使用缓存，需要有缓存清理入口和机制。

加载样式：

状态栏加载：淘宝

导航栏加载：来往

界面加载:今日头条

工具栏加载：IOS邮件

幻灯片式引导：功能性+故事型 3-5个界面

浮层式引导：带箭头，3S自动消失，半透明

遮罩式引导：比较强势引导，遮罩层半透明，需要确认和退出按钮

嵌入式引导：初始状态，清空状态（淘宝购物车），出错状态

互动式引导：较为隐蔽，如：语音输入说明

多媒体引导

通知：

通知中心：android状态栏通知系统自带。ios本身不带，通过覆盖状态栏方式实现通知设计

顶部横幅(QQ)

ALert(打断程度最大，不推荐使用)

Toast

标识（小红点）

硬件辅助：声音，LED,震动

字体：

IOS 中文 黑体-简 Heiti SC 英文 Helvetica(Neue)

Android 中文 Droid Serif 英文 Roboto

常见字号：22 18 14 12 9dp

按钮状态：normal press disable

键盘样式：default ASCIICapable NumberPad PhonePad URL EmailAddress NumberPhonePad NumbeAndPunctuation