手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南

首先我们要知道组件是什么，它是一个包含了控件、文字、图标的功能合集。可以是一个独立的信息展示单元，也可以完成一个复杂的操作流，是学习 App 设计中最重要的环节。

1. 组件的尺寸原则

定义组件的长和宽，方式有两种，一种是根据环境制定，一种是根据内容调节。

第一种，即通过外部的元素来确定组件的尺寸。例如我们要设计一个头部的幻灯片组件，以左右可以滚动的形式展现。那么我们首先要根据想要幻灯片在屏幕中的占比来制定高度，例如我们觉得大致要有屏幕 1/3 的比例，那么可以设定高度为 220pt（664除3），而根据上下对齐的原则，左右就由屏幕宽减去左右内边距 16pt 即可。

第二种，是根据我们里面添加的元素来确定宽和高。例如在首页幻灯片下方，添加左右滚动的卡片，那么我们先设定里面的控件和文字尺寸，然后再通过制定内边距的形式确定组件的尺寸。

当然，也有混合的定义方式，如一开始订好宽，根据内容设定高，像花瓣瀑布流的卡片，或者定义好高来调节宽。具体使用什么形式，就要因地制宜了。

下面会通过几个常见的组件案例，来演示如何定义它们的尺寸的。

2. 动态卡片

动态卡片是很常用的组件，通常以卡片的形式展现。每条动态通常占据内容区域的整列，即左右减去制定好的内边距 16pt，那么就是 375-32 = 343pt 的宽。而高度，就要根据里面所包含的元素了，如下图所示。

3. 设置列表

设置列表中，由高度相同的列表项组成，它们的高和宽应该是根据设计的风格一开始就制定好，如比较紧凑的风格我们采用 48pt 的高，比较宽松的风格就采用 64pt 的高。然后我们再排列内部的元素，进行水平居中。

4. 班次信息

常见的班次信息，我们在定义它尺寸时，也是根据内容来考虑的。首先确认它是一个撑满屏幕的组件即 375pt 宽，再填入对应的字段内容。

这时候可以将上下的内容拆分成3个不同的子模块，班次、时间、更多操作，班次和更多操作采用固定高度 44pt 的方式，时间则根据内容设置边距的方式，最后得到的高度总和，就是班次信息组件的高度。

5. 瓷片区

主流的瓷片区，其实也由子模块组合而成，而如淘宝这类会有很多瓷片区并列的状态，我们优先要考虑的，是每个瓷片区在屏幕中的占比，也就是先定义好瓷片区的高度，再拆分内容的子模块。

例如划分为两行的瓷片区，总高度为 280pt，上方的模块高度为 180pt，下方的模块高度为 100pt，里面的元素，再根据这个内容区域进行排版。

完成一个完整的组件，是根据它的内容和周围的环境决定，我们只要感觉前面几个部分所说的参数设置进行分解，就可以很轻松的定义出组件的实际尺寸。而无论任何组件，它们都没有固定的尺寸值，需要大家不断的练习掌握制定的思路。之后再设计完整的页面，或整套应用时，就能大大提升效率和设计质量。

总结

有目的和逻辑性的对参数进行设置，是 UI 设计中最重要的一环！想要真正掌握它们，就一定要多做练习进行巩固。相信任何人都可以在这个过程中发现 UI 设计的乐趣。

图片素材作者：Timo Kuilder

以上就是我们汇总的超全面的UI元素尺寸设置指南，希望大家喜欢，请继续关注脚本之家。

最新评论