当前位置:首页 > 体育 >

ui设计尺寸一览表(ui界面设计标准尺寸)

来源:原点资讯(m.360kss.com)时间:2023-11-17 23:17:45作者:YD166手机阅读>>

在对界面的一些尺寸规范不是十分清楚的时候,往往凭借自己的感觉去绘制界面。

大家都知道移动端设备屏幕尺寸非常多。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920。近年来iPhone也加剧了:640×960, 640×1136, 750×1334, 1242×2208。

整理了一些UI设计尺寸规范,ui设计需要遵循一定的规范,才能使其成为用户都能理解的设计产品。

ui设计尺寸一览表,ui界面设计标准尺寸(1)

1、尺寸

设计图尺寸

ui设计尺寸一览表,ui界面设计标准尺寸(2)

UI组件布局

状态栏和导航栏:在 iPhone6/7/8设计中,状态栏的高度为20pt(40px)。导航栏的高度是44pt(88px)。在 iPhoneX 设计中,状态栏的高度为44pt(132px)。导航栏的高度也是44pt(132px)。

ui设计尺寸一览表,ui界面设计标准尺寸(3)

标签栏:iPhone6/7/8设计中,标签栏的高度为49pt(98px)。在iphone X 中为83pt(249px),通常我们会在 Tab栏图标之下加上10pt(20px/30px)的注释文字。

ui设计尺寸一览表,ui界面设计标准尺寸(4)

其中包含:34pt(102px)安全区域。

个人一般作图为:iPhone X@2 750*1624(@1 375*812)

状态栏:88PX

导航栏:88PX

标签栏:98PX

安全栏:68PX

2、字体

IOS设计中:

中文字体:PingFang SC

英文字体:SF UI Text 、SF UI Display

其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字

安卓设计中:

中文字体:思源黑体/ Noto

英文字体:Roboto

3、启动图标

设计师需要设计启动图标(1024x1024px)之后按照程序员的要求切出几十个不同尺寸的图标。比如,在手机中@3x情况下桌面图标尺寸为180x180px,在@2x情况下为120x120px。

ui设计尺寸一览表,ui界面设计标准尺寸(5)

规范始终是规范,并不灵活。我们要遵循设计规范,它能保证我们的设计不会出现较大的问题,最大限度保证产品的一致性。

(ps:如果文中有错误的地方,欢迎指正)

栏目热文

设备有虚电是怎么产生的(怎么判断是否是虚电)

设备有虚电是怎么产生的(怎么判断是否是虚电)

骑着电动车上路,一遇上坡,电量就掉格,下坡的时候,电量却又呈现“满血”状态,这样的情况相信很多人都遇到过。排除电池故障原...

2023-11-17 23:21:15查看全文 >>

虚电压怎么解决(虚电压怎么判断)

虚电压怎么解决(虚电压怎么判断)

电压低导致很多家用电器及工厂设备无法正常使用,影响工作生产,创稳今天就来帮大家分析下电压低的原因解决办法。电压低是什么原...

2023-11-17 23:17:45查看全文 >>

苹果手机虚电怎么解决(苹果手机虚电解决方法)

苹果手机虚电怎么解决(苹果手机虚电解决方法)

25分钟钱 电冲到51 用了10多分钟一下变 18 一下变8了 虚电 一半电 都用不到半小时,...

2023-11-17 22:54:37查看全文 >>

电路虚电怎么解决(怎么解决电路过电压)

电路虚电怎么解决(怎么解决电路过电压)

  锂电池虚电是指电池的电荷水平降低到较低的程度,接近或达到了电池的最低允许电压。在这种状态下,电池的电量已经非常低,无...

2023-11-17 22:54:33查看全文 >>

接电之后虚电什么原因(三相电虚电怎么解决)

接电之后虚电什么原因(三相电虚电怎么解决)

汽车电路故障的检修,有时分分钟就能搞定;有时费了大半天的功夫还是一头雾水;有时把所有能想到的故障部位,检查了好几遍,最后...

2023-11-17 22:42:47查看全文 >>

ui设计现在以什么尺寸为准(ui设计官网尺寸)

ui设计现在以什么尺寸为准(ui设计官网尺寸)

Android的设计规范及分辨率尺寸 一:设计规范(以720*1280px为准):注:所有的规范时基于320PPI的,要...

2023-11-17 23:06:31查看全文 >>

ui设计字号标准(ui设计字号怎么排)

ui设计字号标准(ui设计字号怎么排)

在开始着手设计手机app界面时,困扰着新人的除了不知道应该在界面中放什么以外,最突出的就是不知道元素应该使用的长宽数值,...

2023-11-17 23:15:41查看全文 >>

ui尺寸设置图解(ui如何制作2个尺寸)

ui尺寸设置图解(ui如何制作2个尺寸)

在上篇文章《基础科普!超全面的 UI 元素尺寸设置指南(上)》中介绍了设置 UI 元素尺寸的基础规范,及控件尺寸的定义。...

2023-11-17 22:46:01查看全文 >>

ui设计图最新尺寸(最新ui设计规范尺寸)

ui设计图最新尺寸(最新ui设计规范尺寸)

相信很多宝宝做设计的时候都会头疼尺寸的问题,尤其对于UI新手,其实并不复杂,关键是设计本身比较难把握,下面先看一下总结的...

2023-11-17 23:09:44查看全文 >>

ui设计长图一般多大(ui设计现在以什么尺寸为准)

ui设计长图一般多大(ui设计现在以什么尺寸为准)

Hello,大家好!我是柏小陌OK,一名UI设计师,小陌粗品,粗暴好用!今天和大家聊一聊不同工作阶段的UI设计师作品集应...

2023-11-17 23:07:52查看全文 >>

文档排行