手机UI设计基础-尺寸&单位

时间：2023-10-09 11:54:01 | 来源：网站运营

时间：2023-10-09 11:54:01 来源：网站运营

手机UI设计基础-尺寸&单位：初入移动端开发和UI设计的童鞋可能对UI尺寸和单位特头痛，孟春觉得分享一下手机APP/Web UI尺寸和单位的经验是有价值的。

一、iPhone机型

1、分辨率手机屏幕的分辨率各种尺寸五花八门，特别是安卓手机厂商众多，引起更众多的分辨率，480×800, 480×854, 540×960, 720×1280, 1080×1920,2k屏。iPhone的分辨率也不落伍，640×960, 640×1136, 750×1334, 1242×2208，一看确实比较晕菜。

千万不要被这么多的分辨率吓晕了，其实手机APP和移动端web UI尺寸是有兼容的方案的。


2、屏幕尺寸

屏幕大小的物理尺寸，屏幕对角线长度衡量。

单位：英寸，1英寸 = 2.54厘米


3、像素密度(PPI)像素密度(Pixels Per Inch)，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。

4、逻辑分辨率与物理分辨率物理像素(px)是硬件所支持的最高像素，逻辑像素(pt)是软件所达到的像素。

iPhone各种机型物理分辨率(px)与逻辑分辨率(pt)转换规律：


iPhone 1代/3Gs 1pt = 1px

iPhone 4s 1pt = 2px

iPhone 5s 1pt = 2px

iPhone 6s 1pt = 2px

iPhone 6 plus 1pt = 3px


如何适配不同iPhone机型？

1、采用哪种分辨率设计？

2、需要多少套标注？

3、需要提供多少套切图？


加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？

一个基本思路是：

1、选择一种尺寸作为设计和开发基准；

2、定义一套适配规则，自动适配剩下两种尺寸；

3、特殊适配效果给出设计效果。


第一步，视觉设计阶段，设计师按宽度750px(iPhone 6)做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局(auto layout)，方便后续适配到其它尺寸。第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。


更详细见 iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？


二、安装APP UI 尺寸

dp：Android开发中用于描述模块间布局大小的单位

sp：和dp一样，只是用于描述字体大小的单位

dpi：测量空间点密度的单位，单位英寸上点的个数，同iPhone的PPI


Android的xxhdpi机型是安卓机中市场占有率最高的机型，因此设计的时候，我们可以用1080px宽作为通用尺寸，在app中按比例缩放显示，比较特殊的地方在另外设计适配相应机型的图片。

三、移动端Web UI 尺寸

1、Android、iPhone尺寸的统一。

在head中加入viewport代码


viewport参数说明：

width=device-width 页面宽度=设备宽度；

initial-scale=1.0 初始化比例1:1，即1dp=1pt=1px，px单位的尺寸使用逻辑分辨率的尺寸，入iphone4s逻辑分辨率宽度是320pt，iphone 4s web页面宽为320px，屏幕分辨率为1920×1080的安卓手机，屏幕宽为360dp，web页面宽为360px；

即借助H5的viewport参数，我们可以使px单位尺寸等价于dp、pt来使用。为兼容各种类型的手机屏幕，我们可以设置页面最大宽度为640px，设计效果图的时候可以按640px宽设计来统一页面效果，图标使用矢量图或字体图标的方式，在不同屏幕分辨率下都可以显示得清晰，部分图片需要适配不同尺寸的屏幕，可另外设计。


转自手机UI设计基础-尺寸&单位 - 推酷