UI界面的尺寸规范
上周更了一篇关于Android系统界面设计的尺寸规范,有些小伙伴看了以后存在部分尺寸上的疑问,这次把这些地方简单的解释了一下,顺便把iOS系统规范也加上了,两者可以做一个对比。在这里我要强调的是这是移动端的样式规范,不是网页,不是网页,不是网页!
名词解释
1.DPI (Dots Per Inch)
点数密度。所表示的是每英寸所拥有的点数量。Android特有单位
DPI数值越高,即代表显示屏能够以越高的密度显示图像,从而得出,显示的密度越高,显示器显示的就越真实、越清晰。
也就是说屏幕放的越大,物理尺寸不会变,但是每英寸里所包含的像素块变大了,数量就相对变少了,成像就会失真。比如说买显示器的时候有些人会挑选分辨率高的,这样相同物理尺寸下画面会更加清晰。
下面放张图给大家解释一下:
这两张图的物理尺寸相同,但是第一张图包含的像素块明显大于第二章图,如果成像的话肯定是第一张图较清晰。
2.PPI(Pixels Per Inch)
像素密度,所表示的是每英寸所拥有的像素数量,iOS特有单位
PPI数值越高,即代表显示屏能够以越高的密度显示图像。 从而得出,显示的密度越高,显示器显示的就越真实、越清晰
这个概念类似于DPI,理解起来较为简单。
举例说明:
同样尺寸大小的屏幕,点数密度越高的成像就越清晰,一英寸里有多少个像素格PPI就等于多少。
3.视网膜屏幕(Retina screen):分辨率超过人眼识别极限的高分辨率屏幕
定义超过300PPI以上的屏幕称作视网膜屏幕
屏幕密度计算公式:
一、Android尺寸规范
分为两个方面:界面、图标
1.界面
(1)基本单位
DP:Android开发专用单位
以160 DPI屏幕为基准,称之为一倍图。1DP=1PX
计算公式:DP*DPI / 160 = PX
(2)主流尺寸及分辨率
实际开发中,主流尺寸是2倍图720 * 1280 以及3倍图 1080 * 1920,没有要求默认的是2倍图720 * 1280。
(3)安卓界面设计中控件的尺寸
2倍图中的尺寸图解
2倍图与3倍图之间的尺寸换算关系,3倍图是2倍图的1.5倍
(4)界面背景
一般情况下添加白色背景,也可以添加浅色背景,常用的颜色有#f5f5f5 #eeeeee #efeff4等
(5)分割规范
分割线:高度:必须1px ,颜色:#dddddd #cccccc #000000 (矩形)不透明度为10%
分割条(卡片间隙):高度:必须20px 颜色:#f5f5f5
列表高:高度100-120px
总结:
2.图标
(1)启动图标尺寸
Android图标最大尺寸为512px,圆角半径为90px。
一般会切两套图,一套圆角一套直角。
以2倍图为例
a.主屏幕中的APP图标96px
b.应用商店搜索中的APP图标96px
c.设置中的APP图标64px
(2)功能图标
a.导航栏中的图标。可点击区域最小48px
b.标签栏工具栏中的图标可点击区域64px
3.文字规范
种类、字号、间距、颜色
1)种类
Android官方默认字体:“思源黑体”
2)字号
注意!!!字号必须用偶数
导航栏:36-38px 主题 副标题
正文:28-34px 说明性文字
b标签栏:22-24px 提示性文字
(3)间距
字间距:默认
行间距:1.5倍
(4)颜色
主文:#333333
副文:#666666
提示文:#999999
二、 ios基本尺寸规范
尺寸规范、字体规范、iOS人机交互、Android和iOS的差异
1.尺寸规范
(1)界面
名词解释:
PPI:(ios特有)像素密度,所表示的是每英寸所拥有的像素数量
PPI数值越高,即代表显示屏越能够以高的密度显示图像。显示密度越高,显示器显示就越清晰、越真实。
视网膜屏幕:分辨率超过人眼识别极限的高分辨率屏幕
PPI计算公式:
画布尺寸
设备尺寸
开发中以iPhone6为基础(2倍图)
背景:颜色:#f5f5f5、#eeeeee、#efeff4
分割线:1px 不透明度10% #dddddd #cccccc #000000
分割条:20px
列表高:100-200px
2.图标
(1)启动图标:(Android的2倍)
1024*1024
圆角180p’x
(2)功能图标:
主屏幕中的图标:120px,圆角半径25px
默认搜索页显示的APP图标:40px ,圆角半径10px
导航栏中的图标44px
标签栏/工具栏中的图标44px
文字规范:(必须偶数,否则会边缘模糊)
种类:苹方(iOS官方字体)
下面以二倍图为例:
导航栏:36-38px (主题,副标题)
正文:28-34px (说明性文字)
标签栏:22-24px(提示性文字)
间距:字间距默认,行间距1.5
颜色:#333333 #666666 #999999
2.iOS人机交互指南
智能手机传感器 iOS交互
(1)智能手机传感器
摄像头、麦克风、GPS、电子罗盘、重力感应器、加速度传感器、光线传感器、距离传感器、气压传感器、三轴陀螺仪
手机传感器是硬件
(2)iOS交互指南
3D触碰、颜色、音频、认证、数据输入、拖放、手势、多任务处理、通知、截图
3D触碰
用手指按压图片可以实时预览拍摄时的场景
颜色:(仅供参考,可以自行创作)
红色:rgb(255,59,48)
橙色:rgb(255,149,0)
黄色:rgb(255,204,0)
绿色:rgb(76,217,100)
蓝绿色:rgb(90,200,250)
蓝色:rgb(0,122,255)
紫色:rgb(88,86,214)
粉色:rgb(255,45,85)
音频
断开耳机时音乐会自动断开,避免外放
认证
自动提取信息中的验证码、提供数字键盘、生物识别登陆(面容ID)等
数据输入
数据选择器(日期、地名)、从系统获取信息、通过值列表轻松导航、在文本字段中显示提示(颜色#999999)
手势
点击、滑动、双击、长按、拖拽、轻扫、捏合、摇晃
多任务处理
滑过、拆分视图、画中画
通知
可选择
截图
截图后在屏幕上出现缩略图
正文部分就到这里结束。
以上就是Android系统和iOS系统界面的一些样式规范,两者有区别但是功能都差不多,主要是为了让顾客在转换一个新的操作系统时不会觉得完全陌生。当然,无论是喜欢什么系统,在做界面的时候都还是要按着规矩来,功能不是可以随便添加的。
本人刚接触这行,懂得不是很多,写的也不是很详细,如果有什么疑惑欢迎评论留言,我们可以一起探讨,共同进步。最后感谢您的阅读!