移动端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 举报邮箱 jubao@zcool.com.cn 联系电话：010-56538600 Copyright © 2006-2018 ZCOOL站酷
提示失败
提示成功

移动端APP~最新UI界面设计规范(转载)相关推荐

pc端ui图片尺寸_PC端UI界面设计规范分享共同来学习_ui设计
如果你也是从事UI界面设计工作的话,那么,必然会接触到PC端的相关的设计,对于这部分内容,我们必须要掌握住PC端UI界面设计规范的知识,如果你已经准备好的话,下面就让我们一起学习下吧. 1.PC端是什 ...
最新UI界面漫画小程序源码，带后台支持流量主，24小时全自动更新！
前言今天给大家带来一款漫画小程序源码,带后台支持流量主,24小时自动更新,亲测可用,小程序UI我简单的修改了一下,漫画24小时自动更新,免维护,支持流量主,搭建宣传一波等裂变即可! 安装教程准备工 ...
最新UI界面很简洁的方盒子iApp源码+适合做工具箱
正文: 分享一个UI界面很简洁的方盒子iapp源码,非常适合拿来做工具箱的,这个UI源码已经很久的了,在网上看到的,就拿出来再分享一下吧! 程序: wwxjes.lanzoup.com/ishUo0k ...
最新UI界面漫画小程序源码,带后台支持流量主,全自动更新
小程序截图: 源码介绍: 这是一款微信漫画小程序源码,全天24小时自动更新漫画,不需要自己手动更新,漫画资源超多,附详细搭建教程,亲测可用UI我简单的修改了一下,带演示视频,需要看演示的可以联系网站客 ...
iOS Hacker 使用Reveal分析App的UI界面
Reveal 1.5.1 1. 首先在手机上安装Reveal Loader 2. ls -l /Library/RHRevealLoader, 如果没有这个目录就新建 3. 在OSX打开Reveal, ...
【安卓开发】天气预报app的UI界面（包含全部代码）
全部代码https://gitee.com/Cutele/weather-forecast-v1 增加了发送短信等功能 b站视频链接主页面写的闪退了,就不记录了. 主要是借助适配器显示自己想要显示的 ...
手机APP界面设计规范：如何定义视觉规范
25学堂|APP设计|网页设计师加油站首页 APP界面设计 APP设计模板 APP产品秀 UI设计干货 APP图标 Html5CSS3 APP设计教程优秀设计 APP创业当前位置: 首页 > ...
移动端UI界面设计之-注册登录
注册登录是移动端UI界面设计中最基础的板块之一,界面看似简单,但是想设计一个让人眼前一亮的注册登录界面并非易事.今天,小编将和大家一起来聊聊移动端UI界面设计之-登录注册那些事.希望能对设计的朋友有所 ...
APP的UI设计原则及UI界面适配步骤
本文转载自http://www.cyzone.cn/a/20140619/259323.html 从最初的AppStore仅有不到500个APP,到现在,据统计APP近几年增加的数量已经超过3000, ...

移动端APP~最新UI界面设计规范(转载)

移动端APP~最新UI界面设计规范(转载)相关推荐

最新文章

热门文章