移动端APP~最新UI界面设计规范(转载)
首页发现 同城 职位 活动 正版素材 课程
登录注册
移动端APP~最新UI界面设计规范（尺寸大小篇）
1年前发布
原创文章 / UI / 教程 18107 7 274
移动端手机界面看似简单，然而里面却存在着许许多多的设计规范，只有最好的规范才能给我们带来最好的视觉。
2016年即将过去，回顾过去的一年有喜有悲，有得有失。
设计这条路我坚定不移的走下来了，希望自己可以有更大的进步，2016年最后一天，发布这个作品。
回到正题。。。
相信在各个网站里面关于界面设计规范的文章多如牛毛，这篇文章也算是一个小小的总结吧，也希望能够帮到一部分人，让一部分人先看到~~文笔有限，请酷友各种包涵。
废话不多说，现在进入正题。。
智能手机如今已经完完全全的改变了我们的生活，身边的很多人都变成了低头族（沉默一族），缺少交流，生活都无趣了，不过后来仔细想想，有趣的人依然有趣，无趣的人玩着手机，好吧，我真的不是故意要扯的，不要转移视线，现在真的要进入主题了。。。
俗话说，没有规矩不成方圆，所以手机界面的规范真的是着实重要！
Android的界面尺寸规范
首先看一张图。
4e86584f5e2da801219c77fc481c.jpg
看到这张图之后，我的内心是拒绝的，难道全都要出一套图？ No No No,答案当然是否定的
第一代安卓手机出的尺寸是240x320px大小，现在市场上已经没有这么小尺寸的手机了，因此这个尺寸我们可以不用考虑，总共的话安卓手机的大小尺寸我们归为以下五类。09ec5859288aa8012060c86874cf.jpg在这里中屏幕的尺寸大小320x480px目前在市场也已经没有，不予考虑，因而安卓我们要出三张图（1.5倍图、2倍图和三倍图），目前主流的我们都是用2倍图的大小720x1280px尺寸来做界面设计，有需要然后再对另外两个尺寸的进行适配。
需要注意一个问题，可能会有很多人不明白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的制作了。
图标尺寸参考：
1a59586785c7a801219c773df602.jpg
安卓手机基本尺寸大小
界面：720x1280px
尺寸高度
状态栏：50px 状态栏字体：24px
导航栏：96px 导航栏字体：34px 可以大于34px但不能小于34px
导航栏中搜索框：56~60px
主菜单栏：96px 菜单栏图标下使用字体：22~24px
按钮最小为44px（手指可触控范围），通栏按钮至少60px
文本框大小为80~88px
弹框遮罩 深色遮罩20%~40%透明度
浅色遮罩40%~60%透明度
文本框之间的间距使用8的倍数，例如8px、40px等
字体使用谷歌开发的微软雅黑字体，或者思源黑体，英文则用Roboto字体
正文字体大小20~22是最小使用字体，最大不能超过导航栏中的标题字大小，可以等于。根据层级关系，设定字体大小。
IOS的界面尺寸规范
苹果机同样也有很多尺寸，如下图757258677ed0a8012060c8de69da.jpg
苹果的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尺寸的大小上，因此苹果只需要出两套图。
图标尺寸参考：
52f85867866aa8012060c87ee1d2.jpg
苹果手机基本尺寸大小
界面：750x1334px
尺寸高度
状态栏：40px 状态栏字体：24px
导航栏：88px 导航栏字体：34px 中等 可以大于34px但不能小于34px
导航栏中搜索框：56~60px
主菜单栏：98px 菜单栏图标下使用字体：20~24px 常规
按钮最小为44px（手指可触控范围），通栏按钮至少60px
文本框大小为80~88px
弹框遮罩 深色遮罩20%~40%透明度
浅色遮罩40%~60%透明度
文本框之间的间距使用8的倍数，例如8px、40px等。
苹果手机的尺寸规范是要严格遵守的，而安卓手机由于品牌以及厂商等等的问题，尽管也有相应的尺寸规范，但相对自由很多，不同情况下可以设置不同的参数，正是因为此原因，谷歌新推出了Material Design设计语言，为安卓界面设计带来了革命性的历史变化，这里大家可以看看另一位酷友写的关于Material Design的文章，详细又深入。
275
Fiona云和月
Fiona云和月
杭州 | 设计爱好者
人像摄影（一）——美女合集了解一下！
人像摄影（一）——美女合集了解一下！
黑白文字闪现-小视频制作-还在看？滚学习学习！
黑白文字闪现-小视频制作-还在看？滚学习学习！
个性家居app设计，清新风
个性家居app设计，清新风
茶味app移动界面–原创设计-两版
茶味app移动界面–原创设计-两版
好色之徒，音乐app界面设计
好色之徒，音乐app界面设计
说点什么…
2000
添加表情评论
全部评论7
李xxx
李xxx 1年前
请问 平板的设计规范呢？
0
yaoyinhua
yaoyinhua 1年前
谢谢大神的分享
0
Fiona云和月
Fiona云和月 1年前
72可以了，需要用6plus的尺寸制作并切出来的3倍图
不吃辣椒
UI小白想问一个问题，通常项目时间比较赶，只能做出一套图，一般都是按照750X1134的6/6S 的来做，但是 PPI呢？72吗？ 切出的3倍图适用 6Plus吗？
0
不吃辣椒
不吃辣椒 1年前
UI小白想问一个问题，通常项目时间比较赶，只能做出一套图，一般都是按照750X1134的6/6S 的来做，但是 PPI呢？72吗？ 切出的3倍图适用 6Plus吗？
0
Fiona云和月
Fiona云和月 1年前
尺寸 整前面去 ？
设计小贱
能不能把分辨率和尺寸位置整整呢
0
设计小贱
设计小贱 1年前
能不能把分辨率和尺寸位置整整呢
0
天涯倦客星
天涯倦客星 1年前
受教了
0
没有更多评论了 写评论
Fiona云和月
Fiona云和月
杭州 | 设计爱好者
收录收藏夹
不要光收藏 要消化
更多收录此文章的收藏夹
移动版 关于我们 加入站酷 用户协议 企业服务 帮助中心 联系我们 中文 English
京ICP备11017824号-4 京ICP证130164号 京公网安备11010502000501号 网络文化经营许可证 京网文[2016]6173-844号 广播电视节目制作经营许可证（京）字第06990号
网上有害信息举报专区 不良信息举报电话：010-56538658 举报邮箱 [email protected] 联系电话：010-56538600 Copyright © 2006-2018 ZCOOL站酷
提示失败
提示成功