移动端UI设计尺寸规范

Posted candywu-blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端UI设计尺寸规范相关的知识,希望对你有一定的参考价值。

一、概念:

1.屏幕大小:指屏幕对角线长度,单位是英寸

2.像素:组成图像的最小点,一个相对大小单位,同屏幕里越小越清晰

3.屏幕像素密度(ppi)=像素总数/屏幕大小(英寸)

4.视网膜屏幕原理:当手机距离你约25-30厘米,如果手机ppi达到300以上,你的眼睛将无法分辨出像素点

5.dpi:平面设计/印刷技术单位,值越大,表明打印机精度越高

   dpi=ppi

二、android屏幕尺寸规范化

1.程序开发统一使用虚拟尺寸单位:dp/dip(除文字外其他)、sp(文字)

2.px~dp转换:

Ldpi:px-->dp   除以0.75

          dp-->px   乘以0.75

Mdpi:px-->dp   除以1

          dp-->px   乘以1

Hdpi:px-->dp   除以1.5

          dp-->px   乘以1.5

XHdpi:px-->dp   除以2

          dp-->px   乘以2

XXHdpi:px-->dp   除以3

          dp-->px   乘以3

XXXHdpi:px-->dp   除以4

          dp-->px   乘以4

3.基准间距原则:

(1)组件最小间距为8dp或10dp,排版/文字最小间隔建议4dp

(2)组件尺寸建议能被4整除

(3)组件尺寸建议为偶数(单数容易出现锯齿)

4.48触摸定律:48dp是物理尺寸大约为9mm左右,是一个用户手指能够准确舒服触摸的最小尺寸

5.常见组件尺寸:

状态栏:24dp

操作栏:44/48dp

侧边导航:286/304dp

悬浮操作按钮:56dp

操作栏+TAB:36+33dp/44+40dp

底栏:44/48dp

6.Android常用字号/行距/颜色:

技术分享图片

 

以上是关于移动端UI设计尺寸规范的主要内容,如果未能解决你的问题,请参考以下文章

移动端H5页面的设计稿尺寸大小规范

移动端网页设计尺寸标准

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

移动端界面设计尺寸规范

怎样规范设计移动端APP的UI

移动端UI设计的PPI,逻辑像素,作图尺寸及适配