原型尺寸规范总结

最近公司安排我带一下新来的交互设计师,我想给他制定一份交互设计规范。这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。

因为Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。所以,交互设计稿的尺寸,就按照iPhone6的尺寸来做。

1473058522-3175-1154654-6d52609ed8445700

1、 iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。

状态栏(status bar):就是电量条,其高度为:40px;

导航栏(navigation):就是顶部条,其高度为:88px;

主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;

内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px

截图如下:

1473058523-3493-1154654-6a4df2d57eb51d48

推荐3款测量工具为:MarkMan马克鳗,Dorado标注,PXcook像素大厨。

2、关于iPhone6的图标的尺寸:

导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。

关于iPhone6的文字的尺寸:

导航栏的文字大小最大值是34px,标签栏的图标下方的文字大小为20px。内容区域的文字大小是:24px,26px,28px,30px,32px,34px。

3、(iPhone6设计稿尺寸是@2x),做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。

4、设置界面的图标高度和开关滑动按钮的图标高度:58px。

参考下图:

1473058523-6998-1154654-d3d00ca937c3f943

5、关于颜色,自从我做了3套高保真的交互原型图之后,发现后面还是改成画线框图来的快。

线框图的黑白灰之纯美,有利于专心布局界面,而不用在意界面的颜色搭配。

黑白灰颜色常用的数值是:

文字黑色#282828

文字深灰色#656565

文字浅灰色#98989

边框浅灰色#C3C3C3

背景淡灰色#f2f2f2

按钮背景纯白色#ffffff

6、常用的可点击高度,在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。参考图片如下,

1473058524-9891-1154654-7f30cf1fbb9e57ee

7、搜索栏的高度,在iPhone6的原型图上,统一成58px。在iPhone6设计稿中,58px是一个常用的设计尺寸。参考图片如下,

1473058522-6827-1154654-3c711cc5feb131eb

8、在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

疏远距离:比如,所有元素距离手机屏幕最左边的距离。

亲密距离:比如,左边图标与右边文字之间的距离。

参考图片如下,

1473058525-7460-1154654-f788db1b34fa20e1

9、原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。比如:

iPhone5在@2x屏幕尺寸是,640x1136px;对应的@1x,屏幕尺寸就是320x568px;

iPhone6在@2x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就是375x667px;

iPhone6Plus在@3x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就是414x736px;

参考图片如下:

1473058525-4152-1154654-6993246f74c1c303

10、iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介绍

iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x736pt-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是安卓机目前最流行的大屏设计稿尺寸。

iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,逻辑分辨率是375x667pt-@1x。

iPhone5是4英寸屏幕,640x1135px-@2x的像素分辨率,逻辑分辨率是320x568pt-@1x。

参考图片如下:

1473058526-9356-1154654-7e42a6083bfbb946

【综上所述】iPhone6的原型规范如下:

界面尺寸布局:满屏尺寸750x1334px

高度电量条高度40px,导航栏高度88px,标签栏高度98px;

各区域图标大小导航栏图标44px,标签栏图标50px;

各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC;

常用可点击区域的高度:88px;

单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;

按钮和文本框,原型图做成直角的,圆角半径是多少,由Ui来设计;

这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的3倍以上;

以上规范具备如下的一个条件,即可修改:

准备有已经上线的截屏参考页面;

产品和开发协商修改。

文/抖味
原文链接:http://www.jianshu.com/p/5e28dd1ec32d
如有侵权请联系小编:tina@iamue.com,感谢分享~~

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/17423/

(0)
TinadminTinadmin
上一篇 2016-09-05
下一篇 2016-09-06

相关推荐

  • FAB实践分析:设计中的悬浮按钮

    如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并将用户的可能操作归结为一个最突出的功能。正确使用FAB,最终会给用户带来惊人的帮助。为了促进操作,不要一味使用FAB!用户必须记住它的含义。FAB可以改善屏幕之间的转换

    2017-05-01
  • 心得分享:正确对待所面临的一切

    前面一直在和大家分享我在自学的过程当中所学到的知识,其实每次在写文章之前,我都会自己提前做好准备工作,然后再整理出来一个完好的结果呈献给大家,但是自从结束实习到回到学校的这段时间,产出率几乎为零,今…

    交互设计 2015-08-24
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • 从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

    从iOS 9改版到iOS 10之后,锁屏页面的音乐控件变大了,用户体验 明显提高。那么最佳的按钮触摸大小应该是多少?经过1.2亿次的实验后,这个结果被微软/苹果等顶级公司采用,强烈推荐学习。

    2017-05-04
  • 别让这10个设计误区毁了你的APP

    色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
    空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
    排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

    告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
    当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
    告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

    2017-05-21
  • 想成为云计算交互设计师,该具备哪些能力?

    最近有不少设计师会跟我聊到,做云计算的交互设计 与其他设计师有什么区别吗?我其实也不知道怎么回答,能够记起的最后一次 TC 类的项目已经是两三年前在学校的时候了,工作以后一直在做云计算的产品,没有太深入体验做其他的产品,我真的还不太能说出有什么区别。

    2017-08-28
  • 设计风格养成|5个维度,说说设计师讲述设计风格的正确姿势

    找准方向与维度,从大方向去讲解你的设计风格,只要你执行了,那它就不是什么困难的事情了。

    2017-05-06
  • 格局洗牌中的QQ音乐在怎么琢磨用户体验?

    2015年整个行业正版化洗牌,数字音乐平台格局不断蜕变,近日,腾讯数字音乐部总经理梁柱对我们分享了他的一些看法。 “你们那篇(虾米音乐王皓)文章我读了。” 腾讯数字音乐部总经理、QQ音乐总经理梁柱(Ross)对我…

    2015-12-04
  • 作为交互设计师,都应该尝试的低保真原型测试

    即便你是一名如此经验丰富、作品惊艳、才思敏捷、手法高超、声名显赫、有强大号召力……的设计师,如果你还未亲手尝试过低保真原型测试,我依旧会推荐此方法。

    2017-05-09
  • [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

    2016-08-24