美文网首页
浅谈iOS APP设计规范-按照iphone6尺寸

浅谈iOS APP设计规范-按照iphone6尺寸

作者: MK乐说 | 来源:发表于2017-08-15 10:33 被阅读0次

    现在iOS app 的尺寸也变多了,要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配,以前一般用的是iphone5的尺寸,iPhone6 plus出现后,iPhone6尺寸成了大多数设计师的选择。

    4d3457bba87a0000018c1b983c66.jpg
    002f57b6714e0000018c1ba8a6ab.jpg

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

    ☆ 状态栏(status bar):就是电量条,其高度为:40px;
    ☆ 导航栏(navigation):就是顶部条,其高度为:88px;
    ☆ 主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;
    ☆ 内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px


    82b557b6717b0000012e7e58518c.jpg

    二、关于iPhone6的图标的尺寸是:

    ☆导航栏的图标高度为44px(绝大部分功能按钮)左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。
    ☆关闭按钮34px*34px,返回按钮26px,简单笔画图标40px。

    三、常用的可点击高度-登陆框、密码框、功能列表等,统一设成88px。

    3a7e57b671bb0000018c1bb3c597.jpg

    四、搜索栏、输入框、评论框、地址框的高度,在iPhone6的原型图上,统一设成58px或60px。

    25b957b671ec0000018c1b13a0df.jpg

    五、在iPhone6设计稿中,界面元素之间的常用距离。

    常用间距-亲密距离:20px(与边缘距离);疏远距离:30px;
    其它距离-10px,44px等;
    区块间隔:30-40px。
    A、疏远距离:比如,改图标距离手机屏幕最左边的距离;
    B、亲密距离:比如,左边图标与右边文字之间的距离。


    f23657b6721d0000012e7ebabbd7.jpg

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

    ① 文字黑色#333
    ② 文字深灰色#666
    ③ 文字浅灰色#999
    ④ 边框浅灰色#e5e5e5
    ⑤ 背景淡灰色#f2f2f2
    ⑥ 按钮背景纯白色#ffffff


    11e957b672480000012e7e5c48f7.jpg 676d57b672580000018c1be5c4e7.jpg

    一、注意事项

    1、在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。
    2、不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。
    3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

    二、界面中文字选用的规则

    在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式,网页中会有常用的几个字体。
    以下是在72像素/英寸下的规范

    移动端常规字体
    IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好,方正兰亭黑和方正黑体简、方正中等线也运用的比较多。

    98ab57b6736e0000012e7eba0ef7.jpg

    三、字体的大小

    1、导航栏的文字大小是36-38px;
    2、标题字号:32px ,34px;
    3、内容区域的正文文字大小是:28px,30px;
    4、辅助性文字:20px , 24px,26px;
    5、标签栏(或主菜单栏)的图标下方的文字大小为20px;
    6、终极原则:不大于所在要件高度的一半;
    7、行间距:字号的1.2-1.5倍。
    下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小:




    187757b673cc0000012e7e115eb1.jpg

    相关文章

      网友评论

          本文标题:浅谈iOS APP设计规范-按照iphone6尺寸

          本文链接:https://www.haomeiwen.com/subject/cosmrxtx.html