UI界面的尺寸规范

article/2025/11/9 9:07:50

一、名词解释

1.DPI (Dots Per Inch): 点数密度。所表示的是每英寸所拥有的点数量。Android特有单位

DPI数值越高,即代表显示屏能够以越高的密度显示图像,从而得出,显示的密度越高,显示器显示的就越真实、越清晰

2.PPI(Pixels Per Inch)像素密度,所表示的是每英寸所拥有的像素数量,iOS特有单位

PPI数值越高,即代表显示屏能够以越高的密度显示图像。 从而得出,显示的密度越高,显示器显示的就越真实、越清晰

举例说明:

同样尺寸大小的屏幕,点数密度越高的成像就越清晰,一英寸里有多少个像素格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


http://chatgpt.dhexx.cn/article/CJ7c5sbh.shtml

相关文章

手机APP UI设计尺寸基础知识

从原理开始介绍一下移动端设计尺寸规范初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是…

手机设计尺寸 - iPhone界面尺寸

参考网址: http://www.qijishow.com/down/app-index.htm iPhone界面尺寸 设备分辨率PPI状态栏高度导航栏高度标签栏高度iPhone6 plus设计版 12422208 px401PPI60px132px146pxiPhone6 plus放大版 11252001 px401PPI54px132px146pxiPhone6 plus物理版 10801920 px401P…

安卓屏幕分辨率及UI尺寸详解

1、了解几个概念 (1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽高”,安卓手机屏幕常见的分辨率有480800、7201280、10801920等。7201280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。 &…

UI app界面的尺寸规范

UI界面的尺寸规范 上周更了一篇关于Android系统界面设计的尺寸规范,有些小伙伴看了以后存在部分尺寸上的疑问,这次把这些地方简单的解释了一下,顺便把iOS系统规范也加上了,两者可以做一个对比。在这里我要强调的是这是移动端的样…

Android 界面设计尺寸规范

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面…

手机端web/app界面设计尺寸规范

手机端web/app界面设计尺寸规范 移动端高清、多屏适配方案 背景 开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到页面高清的效…

Android界面尺寸规范

这样的手机又vivo智能收款机、三星Galaxy A5、华为荣耀等手机。 这样的手机屏幕尺寸是:5寸 即屏幕对角线是5英寸。 计算方法:1280平方+720平方=2156800,结果再开平方=1468.6048,再5,…

【移动端】手机界面的设计尺寸

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。 Android的常用逻辑分辨率: Android的常用逻辑分辨率:参考屏幕尺寸大全 360 * 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360 * 800 411 * 731 48…

移动界面尺寸!安卓720*1280界面尺寸规范参考

这样的手机又vivo智能收款机、三星Galaxy A5、华为荣耀等手机。 这样的手机屏幕尺寸是:5寸 即屏幕对角线是5英寸。 计算方法:1280平方+720平方=2156800,结果再开平方=1468.6048,再5&…

搭建nginx代理服务器

搭建nginx代理服务器 原理:1、在proxy-1的nginx.conf主配置文件后添加2、修改proxy-1的子配置文件3、修改存储服务器的一些配置4、启动服务测试: 原理: 通过代理服务器进行访问,减小web1和web2的负担 资源是不直接放在web1和web2下的&#x…

node.js搭建代理服务器实现跨域

node.js搭建代理服务器实现跨域 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境&…

apache 搭建ip代理服务器

前期准备 windows / LinuxApache 这里就不教如何安装apache了,需要的可以查询如何安装。 apache 配置 找到 httpd.conf 文件,apache的安装目录下 Apache2.4.39\conf\httpd.conf 找到下面几行配置,默认是注释了的,你需要把 # 号…

在CentOS 7上搭建代理服务器(Socks 5)

安装环境配置 1. yum install gcc 2. yum install openldap-devel 3. yum install pam-devel 4. yum install openssl-devel 安装Socks 5 wget http://jaist.dl.sourceforge.net/project/ss5/ss5/3.8.9-8/ss5-3.8.9-8.tar.gz 解压ss5-3.8.9-8.tar.gz tar -xzvf ss5-3.8.9…

10分钟搭建linux代理服务器

介绍 关于搭建代理服务器的方法,我也是刚刚接触,从网上找了一些能够行得通的方法来给大家做个分享: 这里我用的是Tinyproxy作为代理服务软件。这个东西很小,并没有几M。 tinyproxy最大的特点就是小,功能简单&#xff…

用nodejs搭建代理服务器步骤

前端开发者在工作中常常遇到跨域的问题,一般我们遇到跨域问题主要使用以下办法来解决: 1、jsonp 2、cors 3、配置代理服务器。 jsonp不是很灵活,只能发送get请求,不能发送psot请求,而cors虽然可以支持多种请求格式,…

关于腾讯云搭建代理服务器的详细过程

腾讯云的规定是一个账号一个地区只能有20个公网IP: 1)点击实例名 2)添加辅助网卡 3)绑定弹性公网ip 4)为辅助网卡绑定安全组 5)修改网卡配置文件 ### 复制eth0的网卡文件 ### [root@VM_1_62_centos ~]# cp /etc/sysconfig/network-scripts/ifcfg-eth{0,1} ### 修改eth1文…

使用腾讯云Ubuntu20.04搭建代理服务器

文章目录 安装配置文件位置云服务器开放端口 添加规则运行停止状态重启连接测试参考 安装 sudo apt-get install tinyproxy配置文件位置 /etc/tinyproxy.conf 或者 /etc/tinyproxy/tinyproxy.conf # 预设是8888 Port, 可以更改 Port 8888 # 将127.0.0.1改成你自己的IP All…

xray搭建代理服务器

xray 代理服务器配置 1.下载xray 2.执行 xattr -c /Users/mac/Downloads/Xray-macos-64.zip 3.配置 log:LogObject  waring 改成debug 2.InboundObject :  protocol:HTTP  settings 设置为如下,address和…

linux搭建代理服务器

最近在做某个项目时,由于机房环境是内网环境,但是有些服务(短信发送、email发送)需要访问外网交互,所以需要搭建代理服务器。 该服务器可以访问外网,所有的内网服务通过该代理服务器访问外网。简易示意图如…

Ubuntu 搭建代理服务器squid

目录 前言 工具准备 安装squid 修改配置文件 重新加载配置文件 查看squid的端口状态 为浏览器配置代理 前言 本来这次的测试是想在校园网环境下 实现无认证通过某个已认证的主机代理上网的! 可后来通过测试我发现只有主机通过校园网认证后才能访问校园网内(局域网)的主机…