当前位置: 首页 > 线上学习 > 技术文章 > Android与IOS手机ui设计尺寸对比

Android与IOS手机ui设计尺寸对比

来源:汇众教育 编辑:小汇 2018-08-19 11084

摘要:手机的普及已经非常的流行了,功能也越来越多,伴随3G、4G时代的即将到来,手机界面设计在技术层面已经日趋成熟

  手机的普及已经非常的流行了,功能也越来越多,伴随3G、4G时代的即将到来,手机界面设计在技术层面已经日趋成熟,越来越多的手机软件UI设计者开始关注其的风格与品位。风格鲜明的手机受用户的青睐,是产生购买欲望的主要因素,因此手机的风格化设计越来越受到生产厂家的重视,其中手机界面的风格化设计扮演着重要的角色。手机UI设计是近几年新兴的一个行业,吸引着设计行业以及非设计行业的众多人开始涉及这个领域。不管你是大神还是菜鸟,都得遵循UI尺寸的那一套设计规范。然而对于新手,手机ui设计尺寸到底是多少呢?下面汇众教育就给您举例说明下。


  

  Android手机ui设计尺寸

   

  第一站、尺寸及分辨率

   

  Android常用界面尺寸:480*800、720*1280、1080*1920(单位都是像素:px)

   

  由于Android的尺寸多种多样,我们只需做几套比较主流的界面尺寸设计即可。

   

  第二站、界面组成元素

   

  Android的APP界面尺寸与iPhone的界面基本相同:状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成。以720*1280尺寸为例,元素的尺寸:

   

  状态栏(status):高度为50px

   

  导航栏(nav):高度为96px

   

  标签栏(tab):高度为96px

   

  内容区域:高度为1038px(1280-50-96-96=1038)

   

  第三站、常用字体大小

   

  Android常用的字号是:26px

   

  IOS手机ui设计尺寸

   

  第一站、尺寸及分辨率

   

  iPhone界面尺寸:320*480、640*960、640*1136(单位都是像素:px)

   

  当然在设计当中我们并不需要每一种尺寸都做一套图,建议取用640*960的尺寸设计。

   

  第二站、界面组成元素

   

  iPhone的APP界面一般由:状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成。以640*960尺寸为例,元素的尺寸:

   

  状态栏(status):高度为40px

   

  导航栏(nav):高度为88px

   

  标签栏(tab):高度为98px

   

  内容区域:高度为734px(960-40-88-98=734)

   

  至于iPhone5/5s的内容区域高度增加至910px。

   

  PS:在IOS7的风格中,苹果已经在开始弱化状态栏的存在,将状态栏和导航栏合在了一起,但是尺寸高度保持不变。

   

  第三站、常用字体大小

   

  苹果默认中文字体为:黑体-简体

   

  以IOS7为例:

   

  导航栏标题:34px

   

  普通按钮:34px

   

  表格头部:34px

   

  表格标签:28px

   

  页签栏文字:20px

   

  以上就是汇众教育提供的知识,根据个人经验和偏好,一般将软件UI设计稿分辨率设为640x960px,这个尺寸是ios5的分辨率,同时也可以兼容大部分安卓手机。并且尽量使用形状和图层样式,这样可以避免拉伸引起的变形和像素损失,达到一劳永逸的效果。在进行低倍切图的时候,设置“编辑-图像大小”到320x480px,并且配合“缩放样式”选项,达到想要的效果。

相关文章

关注我们

  • 官方微信

    咨询热线

    010-82826482 校区地址
  • 官方微博

    建议与投诉

    400-0065-789 联系我们
  • 线上直播平台