移动端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站酷
提示失败
提示成功

阅读更多

没有更多推荐了,返回首页