UI设计稿是先做iPhone6的，向上方便适配iPhone6plus，向下方便适配iPhone5和iPhone4，所以，交互稿的尺寸就按照iPhone6的尺寸来做。
1:iPhone6的界面布局为：
屏幕尺寸：4.7英寸，设计稿大小为750*1334px,一倍缩小为375*667。
状态栏：就是电量条，高度为40px，一倍缩小为20px。
导航栏：就是顶部条，高度为88px，一倍缩小为44px。
主菜单栏：就是标签栏，高度为98px，一倍缩小为49px。
内容区域：就是屏幕中间的区域，高度为1108px，一倍缩小为554px。
推荐3款测量工具为markman马克鳗，dorado标注，pxcook像素大厨
2:关于iPhone6的图标的尺寸：
导航栏：图标高度为44px左右，一倍缩小为22px。文字大小最大值为32px，一倍缩小为17px。
标签栏：图标尺寸为50*50px左右，一倍缩小为25*25px。文字大小最大值为20px，一倍缩小为10px。
电量条：文字大小22px,一倍缩小为12px。
内容区域：文字大小是：24px,26px,28px,30px,32px,34px。一倍缩小为12px,13px,14px,15px,16px,17px。
3:设置界面的图标高度和开关滑动按钮的图标高度为58px,一倍缩小为29px.
4:颜色设置：
文字黑色：282828，文字深灰色：656565，文字浅灰色：989898。
边框浅灰色：c3c3c3，背景浅灰色：f2f2f2，按钮背景纯白色：ffffff。
5:常用可点击高度
可点击高度，在iPhone6原型上统一成88px,一倍缩小为44px。88（44）在iPhone6中是一个常用的设计尺寸。如退出登录按钮的高度就是88(44)px。
6:搜索栏的高度
统一成58px，一倍缩小为29px。这也是一个常用的设计尺寸。
7:界面元素之间的常用距离
亲密距离：20px。疏远距离：30px。一倍缩小为10px,15px。
疏远距离：所有元素距离手机屏幕最左边的距离。
亲密距离：左边图标与右边文字之间的距离。
其他距离：10px,44px等，一倍缩小为5px,22px。
单行文字的背景框的高度为88px,双行为176px,三行为264px。
按钮和文本框，原型图做成直角的，圆角半径多少，由UI来设计。
网友评论