如何规范UI设计界面尺寸，常见的ui界面布局分类

对于数字化产品而言，UI设计非常重要，今天带大家一起看看如何规范UI设计界面尺寸，常见的ui界面布局分类。

常见的UI界面布局分类：

1.列表布局

列表布局是在界面中以列表的形式显示各种信息的布局形式。常见的列表布局包括通信、电子商务、新闻和我们媒体。应用程序下载等应用程序软件，一般优先考虑多种选择，通过滑动列表浏览各种信息。其显示效果水平清晰，浏览方便。

2.展示布局

显示界面UI设计中常用的图标或图片的形式。常见的显示应用程序包括电子商务、金融和其他应用程序。以电子商务为例。在商品搜索过程中，通过列出商品图片和基本信息，过多的商品通过显示更方便用户操作和查看信息。

3.九宫格布局

九宫格布局通常以三个垂直和多个水平的形式显示图标或图片，通常显示应用程序功能或分类。整体数量趋于固定，水平三方便浏览，垂直多方便扩展和滑动。通过简单的界面显示常用的功能和常用的导航选择。

4.弹出式布局

弹出式布局通常用于界面中的广告或类别选择。弹出式广告介绍不多。类别选择的弹出通常在电子商务应用程序中通过弹出选项卡选择商品类型。常用的弹出界面主要是辅助功能，方便用户操作。

5.选项卡布局

选项卡布局一般通过图片进行选项内容，然后选项卡下方有固定的图片信息。常见的有电影票应用程序。电子商务应用程序很常见。通过图片显示内容，并在下面注明具体细节等。或者使用选项卡图片进行产品显示，并在下面用文字描述细节。

6.多界面布局

一些功能丰富的应用程序界面布局也相对丰富。通过功能导航，可分为多个界面进行布局。每个界面也可以结合多种形式，根据每个界面的功能或显示内容选择不同的布局形式。

如何规范UI设计界面尺寸：

1.像素密度-PPI

像素密度是指显示屏每英寸长度排列的像素点数。PPI越高，屏幕显示效果越好。由于像素密度翻了一番，Retina屏幕比普通屏幕清晰得多。

2.计量单位

IOS和Android平台都定义了自己的像素计量单位。IOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

单位之间的转换关系随倍率而变化：

1倍:1pt=1dp=1px(mdpi.iPhone3gs)；

1.5倍:1pt=1dp=1.5px(hdpi)；

2倍:1pt=1dp=2px(xhdpi.iPhone4s/5/6)；

3倍:1pt=1dp=3px(xxhdpi.iPhone6)；

4倍:1pt=1dp=4px(xxxhdpi)；

该单位决定了我们的思维方式。在设计和开发过程中，应尽量使用逻辑像素尺寸来思考界面。在设计安卓应用程序时，一些设计师喜欢将画布设置为1080×1920，而另一些设计师喜欢将画布设置为720×1280。给出的界面元素尺寸不统一。安卓的最小点击区域尺寸为48x48dp，这意味着在xhdpi设备上，按钮尺寸至少为96x96px。在xxhdpi设备144x144px。

无论画布有多大，我们都设计了基准倍率的界面风格，开发人员所需的单位都是逻辑像素。因此，为了确保准确和高效的沟通，双方都需要描述和理解界面的逻辑像素大小，无论是在标记切图还是日常沟通，不要说底部标签栏的高度是96像素，我是按照xhdpi做的，所以掌握以上知识很重要，和下游的前端后者开发工程师的沟通更重要，记得最后还要进行多轮的UI设计走查，才能确保最终成品和设计稿的高度还原，从而保证项目质量。