• 2017年7月2日,氧16网正式改版,增加会员登录注册功能,感谢群里小伙伴的支持!
  • 氧16网设计交流1群:331622745,设计交流2群:536159510,欢迎志同道合的朋友加入!
  •    3年前 (2014-06-27)  教程 |   5 条评论  633 
    文章评分 1 次,平均分 5.0

    Android/IOS APP界面设计之尺寸规范

    刚开始接触UI设计的新手们,碰到最多的就是有关尺寸的问题,界面多大,文字怎么样才合适,关于安卓我是不是要做几套不同大小的才能适应?一大堆问题都让人头疼!

    闲话少说,希望这篇分享对大家有所帮助,不用再纠结尺寸大小,专心做好设计!

    Android/IOS APP界面设计之尺寸规范

    1.尺寸以及分辨率

    iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只要宽度不变都好说。至于像素问题,网页和移动的UI用72px就可以了,不必纠结。

    2.界面基本组成元素

    iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的,所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧:

      状态栏:显示运营商、信号和电量的区域,高度 40px

      导航栏:显示当前页面名称,包含页面“返回”等功能按钮,高度 88px

      主菜单栏:显示在页面下方的区域,一般作为分类内容的快递导航,高度 98px

    Android/IOS APP界面设计之尺寸规范

    注:在ios7 中,苹果开始慢慢弱化状态栏的存在,将“状态栏”和“导航栏”和融合在一起,但是再怎么变,尺寸高度都是一样的,不会影响设计。

    Android/IOS APP界面设计之尺寸规范

    3.字体大小

    iPhone上的英文字体为:HelveticaNeue,至于中文,一般是冬青黑体或是黑体-简。有关文字的大小根据不同类型的APP都有不同的定义,但是百度用户体验部提供了这样一份统计资料:阅读最舒适的长文本大小在32~34px之间,短文本为32px,注释等提示文本为28px。不管是否同意,至少人家有数据说话,你也可以把觉得好的应用截图放进PS里对比看,从而调试自己设计的文字大小。

    Android/IOS APP界面设计之尺寸规范

    总之,方法很多,个人的审美也不一样,有人故意把字做大以突出个性,自己实践,把数据作为参考,多做几款应用心中也就有数了,比看再说教程或者说明有用!

    Android/IOS APP界面设计之尺寸规范

    1.尺寸以及分辨率

    提到Android的尺寸,让多少设计和开发抓耳挠腮,数不清的机型和尺寸,重复的适配。这里我们就说些主流的设计尺寸吧,比如480*800720*128。很长一段时间内,我们都在用480*800,但是安卓手机分辨率的发展众所周知的越来越大,所以我建议使用720*1280这个尺寸来设计,切图上可以点9切图做到所有手机的适配。

    2.界面基本组成元素

    与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸来设计,那么状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。因为是开源的系统,很多厂家都把安卓系统“玩坏”了,这里的数值也只能作为参考,比如魅族flyme状态栏是正常的两倍高,还有很多厂商也在界面上相近办法。

    Android为了区别于IOS,从4.0开始提出了一套HOLO的UI风格设计风格,鼓励将底部的主菜单栏放到导航栏下面,从而避免点击下方材料误点虚拟按键,很多APP的新版中也采用了这一风格,比如微信。就前不久的I/O大会上,最新的Android L正式揭开面纱,宣布了安卓全面进入扁平化时代。

    Android/IOS APP界面设计之尺寸规范

    3.文字大小

    Android的字体为:Droid sans fallback,这是谷歌自己的字体,与微软雅黑很像。同样百度也提供了一份统计数据,但是个人觉得已过期,现在没有太大意义,因为他们是以480*800的分辨率作为测试,测试结果是阅读最舒适的长文本为27px,短文本也是27px,注释备注文本21px。具体还是要大家将做好的界面放到同分辨率的手机上看为准!

    对了,你还可以用我以前分享的12Grid:手机APP栅格系统来设计你的APP界面。

    大该就说这么多吧,希望对你能有所帮助!

     

    除特别注明外,本站所有文章均为氧16网原创,转载请注明出处来自http://yang16.com/4448.html

    关于
    氧16网 — 分享设计&素材&工具|文章烂,更新少,茫茫人海,能够被你关注真是三生有幸

    发表评论

    表情 格式
    1. 有用啊!也整合了一下

      Nora驹峥 评论达人 LV.1 3年前 (2014-10-08) [0] [0]
    2. 很有用`

      NJ痞子先生 评论达人 LV.1 3年前 (2014-06-30) [0] [0]
    1. 2014-09-1909:12
      苹果APP中文字体下载:冬青黑体和黑体-简 – 氧16(yang16.com)- 做设计 爱摄影 乐分享[ 来自 浙江省杭州市 阿里巴巴网络有限公司 ]

      […]   设计苹果IOS的客户端是常见的一个问题是,我应该用什么字体?这个问题我想应该困扰了不少刚开始设计ios客户端的设计师们,我在Android/IOS APP界面设计之尺寸规范曾说过了,今天就分享给大家冬青黑体和黑体-简的字体下载,欢迎UI设计们下载! […]

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享