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来设计。