UI app界面的尺寸规范

时间:2024-02-17 16:44:29

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系统界面的一些样式规范,两者有区别但是功能都差不多,主要是为了让顾客在转换一个新的操作系统时不会觉得完全陌生。当然,无论是喜欢什么系统,在做界面的时候都还是要按着规矩来,功能不是可以随便添加的。
本人刚接触这行,懂得不是很多,写的也不是很详细,如果有什么疑惑欢迎评论留言,我们可以一起探讨,共同进步。最后感谢您的阅读!