移动端APP~最新UI界面设计规范（尺寸大小篇） |
您所在的位置：网站首页 › 尺寸2x › 移动端APP~最新UI界面设计规范（尺寸大小篇） |
移动端APP~最新UI界面设计规范（尺寸大小篇）
|
2016年即将过去，回顾过去的一年有喜有悲，有得有失。 设计这条路我坚定不移的走下来了，希望自己可以有更大的进步，2016年最后一天，整理一下，希望可爱的人儿在新的一年里学到更多的新知识。 回到正题。。。 相信在各个网站里面关于界面设计规范的文章多如牛毛，自己也根据自己的经验来做一个小小的总结，希望能够帮到一部分人，让一部分人先看到～～～文笔有限，请酷友各种包涵。 废话不多说，现在进入正题。。 智能手机如今已经完完全全的改变了我们的生活，身边的很多人都变成了低头族（沉默一族），缺少交流，生活都无趣了，不过后来仔细想想，有趣的人依然有趣，无趣的人玩着手机，好吧，我真的不是故意要扯的，不要转移视线，现在真的要进入主题了。。。 俗话说，没有规矩不成方圆，所以手机界面的规范真的是着实重要！ Android的界面尺寸规范 首先看一张图。
看到这张图之后，我的内心是拒绝的，难道全都要出一套图？ No No No,答案当然是否定的 第一代安卓手机出的尺寸是240x320px大小，现在市场上已经没有这么小尺寸的手机了，因此这个尺寸我们可以不用考虑，总共的话安卓手机的大小尺寸我们归为以下五类。 需要注意一个问题，可能会有很多人不明白2倍图或者3倍图是怎么得来的，这里我们不是用尺寸大小320x80px这些数字来计算的，因为你再怎么加减乘除，你发现你都无法从1倍图（320x480px）变成两倍图（720x1280）的大小。这里我们要看的是dpi的大小，也就是上图中手机模型下面的第一行字，你会很容易发现160dpi就是320dpi的一半，于是它就是两倍图。可是160dpi是怎么得来的呢，这里我们需要引入一个概念。 像素密度 像素密度是每英寸屏幕上所拥有的点，单位是DPI（dots per inch）。很多人通常会把DPI与PPI(pixels per inch)搞混，甚至模糊使用，DPI表示的是点，PPI是分辨率的单位表示的是像素， PS用PPI，1px=0.75dp，而且根据不同分辨率，它们之间的换算比例是不一样的，由上图可以看出。在安卓版本的切图中一般要求我们使用单位dp。DPI常使用在印刷行业，即为输出、打印的分辨率，它可以指喷墨打印的墨点，可以指扫描仪的采样点。既然是由一个个点组成，那我们就有一个公式可以计算出像素密度的大小：像素密度={√（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。手机的分辨率和英寸大小我们都知道，因而根据公式很容易算出像素密度。例如（√（720^2+1280^2））/6=245 好了，问题搞清楚了之后，那么我们要开始APP的制作了。 图标尺寸参考：
安卓手机基本尺寸大小 界面： @2x 720x1280px 状态栏：50px 状态栏字体：24px 导航栏：96px 导航栏字体：34px 可以大于34px但不能小于34px 导航栏中搜索框：56~60px 主菜单栏：96px 菜单栏图标下使用字体：22~24px @3x 1080x1920px （现用较多） 状态栏：60px 状态栏字体：32px 导航栏：144px 导航栏字体：50px 图标74px 主菜单栏：186px 字体：32px 图标100px 按钮最小为44px（手指可触控范围），通栏按钮至少60px 文本框大小为80~88px 弹框遮罩 深色遮罩20%~40%透明度 浅色遮罩40%~60%透明度 文本框之间的间距使用8的倍数，例如8px、40px等 需要图标尺寸： 512x512 144x144 72x72 96x96 64x64 48x48 32x32 24x24 字体使用谷歌开发的微软雅黑字体，或者思源黑体，英文则用Roboto字体 正文字体大小20~22是最小使用字体，最大不能超过导航栏中的标题字大小，可以等于。根据层级关系，设定字体大小。 IOS的界面尺寸规范 苹果机同样也有很多尺寸，如下图 苹果的1倍图是第一代苹果手机320x480px的大小，现在已经基本不用了。2倍图有三个尺寸，分别是：640x960px（iphone4/4s）、640x1136px（iphone5/5s）、750x1334px（iphone6/6s），尽管它们的尺寸不同，但计算出来的dpi是相同的，因此有三个2倍图。3倍图则是1080x1920px（iphone6plus物理版）、1242x2208px（iphone6plus设计版）。 现在iPhone手机主流的是用750x1334px做设计图，然后适配到3倍图的大小。6plus我们要用1242x2208px来做设计，苹果公司用他们自己的方法再适配到1080x1920px尺寸的大小上，因此苹果只需要出两套图。 图标尺寸参考：
苹果手机基本尺寸大小 界面： @2x 750x1334px 状态栏：40px 状态栏字体：24px 导航栏：88px 导航栏字体：34px 中等 可以大于34px但不能小于34px 导航栏中搜索框：56~60px 主菜单栏：98px 菜单栏图标下使用字体：20~24px 常规 @3x 1242x2208px 状态栏：60px 状态栏字体：28px 导航栏：132px 导航栏字体：44px 中等 主菜单栏：146px 字体：24px 常规 iPhone x 750x1624@2x
状态栏 88px 导航栏 88px 标签栏 98px （Home Indicator） 68px
iPhone 1125x2436@3x
状态栏 132px 导航栏 132px 标签栏 147px （Home Indicator） 102px 按钮最小为44px（手指可触控范围），通栏按钮至少60px 文本框大小为80~88px 弹框遮罩 深色遮罩20%~40%透明度 浅色遮罩40%~60%透明度 文本框之间的间距使用8的倍数，例如8px、40px等。
需要图标尺寸： 1024x1024 180x180 120x120 87x87 80x80 75x75 66x66 58x58 50x50 44x44 苹果手机的尺寸规范是要严格遵守的，而安卓手机由于品牌以及厂商等等的问题，尽管也有相应的尺寸规范，但相对自由很多，不同情况下可以设置不同的参数，正是因为此原因，谷歌新推出了Material Design设计语言，为安卓界面设计带来了革命性的历史变化，这里大家可以看看另一位酷友写的关于Material Design的文章，详细又深入。 英文命名规范 home_nav_back (表示主页的导航栏上的返回按钮) personal_my like_btn_nor/dis (表示个人中心页面里的我的喜欢页面里的按钮，该按钮位正常显示状态/不可点击状态) 不同状态： normal（正常）、pressed（按下）、selected（选中）、disabled（禁用）、visited（已访问）、hover（悬停）、 登录 login 注册 regsiter 图标 icon 搜索 search 编辑 edit 内容 content 注释 note 按钮 button（btn） 头部 header 底部 footer 返回 back 轮播 banner 导航栏 navigation（nav） 标签栏/菜单栏 table (tab) 标题 title 背景 background (bg) 删除 delete 下载 download 弹框 pop-up (pop) 用户 user 图像 image (img) 启动页： launch image 例：default_launchimage_1080x1920
尺寸 Ios：640x960 640x1136 750x1334 828x1792 1125x2436 1242x2208 1242x2688 Android：1080x1920 1080x2208 引导页：boot image
桌面图标：icon_1024 iPad界面尺寸规范 iPad 1/2/mini （1/2 =132ppi mini=163ppi） 界面：1024X768px 状态栏：20px 导航栏：44px 标签栏：49px iPad 3/4/5/6/Air/mini2 （264ppi） 界面：2048X1536px 状态栏：40px 导航栏：88px 标签栏：98px
|
在这里中屏幕的尺寸大小320x480px目前在市场也已经没有，不予考虑，因而安卓我们要出三张图（1.5倍图、2倍图和三倍图），目前主流的我们都是用2倍图的大小720x1280px尺寸来做界面设计，有需要然后再对另外两个尺寸的进行适配。
【本文地址】