UI设计在当下来说已经是很为平常的了！很多大公司的招聘上都注明对于UI设计的需求~关于UI设计，我们一定要掌握的就是UI元素尺寸的一个设置~可能这对于很多UI设计师们来说是没有多上心留意的！但是掌握了这些UI元素尺寸的设置，确实能够帮助到自己的一个UI设计发展！那么，UI设计怎么设置元素尺寸？

一、设置界面的字号提示

文本的大小是很重要的，但是首先理解控制符再思考文字，就比较容易了，它们之间有一些有趣的联

并且在掌握控件和文字的同时掌握之后，才能进入后一步进行组件设计。

首先，我们知道 Android和 iOS程序都有不同的中英文字体，苹果用苹果电脑和苹果手机，安卓用思源黑体和

稍后我们主要以 iOS为例，安卓可以直接参考其字体大小来设定。

1.英文字体

Apple的官方推荐中，有一条比较完整的文字字号建议，但是请务必谨记，那些都是建议，而不需要在非正式的部分中应用。下面的图片是苹果的默认字体大小，请参阅我们翻译的 iOS规格124。

iOS12设计规范- iOS中文规范更新啦！

先把一种字型的字号划分出来，后面所有字体的字号设置都在那里面选。

用户界面中，通常根据最小字体大小两个标准进行设计，一是人眼的可见度，另一种是屏幕显示限制，最小字体为9pt。并且最大的字体大小，以iOS

在9-34中，理论上所有的整数都可以使用，但是我仍然推荐一些特定的习惯。以下是我在英文应用设计中会用到的字体字号列表，为了便于记忆，我将将字体拆分为三类，使用时直接复制即可。

题目：34,28,24,22,20：阅读，16,14,12:11,10,9

英语应用中，我们所用的字体大小取决于项目的复杂度。通常，大小会在五种以上，两种标题，两种读音，一种注解类字号，当然，我们还将用字数和颜色进一步划分，这里就不再赘述了。举个例子，我用以下五个字体大小的原型：

对于 iOS，大小小于20pt的 SF Pro文本，如果大于20pt，那么就用 SF Pro Display字体

数位字体等效为英文，但若有需要显示数据的要求，则最大尺寸由自己判断。

2.中文字体

英文字体与中文字体最大的区别是笔画数，许多中文的笔画和结构都异常复杂，如“嚷”、“喂”、“喂”等，因此，最小的尺寸不可能与英文相同。推

关于苹果公司的中文最大，因为苹果不像 SFpro字体那样丰富，字体大小太大，会产生正负形不协调的违和感，所以，最大字

以下是我建议在中文应用中使用的字体字体：

题目：28、24、22、20正文：18、16、14注释：12,11

在之前做的原型，应用这些字体字体。

中文字体的选择范围比英文小，而且，中文的重数要比英文少得多，我们做中文应用的排版要比英文简单得多。许多初学者天真地以为英文更容易设计，那完全是源于对英文的

3.文本边距

前文已经说完了字号的选择范围，这里我们要再谈一个问题，如何选择。

第一，合理的字体大小应用是与环境密切相关的，而这种联系最能体现在文本区域的边距上。要合理阅读的文章中应留白的段落，过分拥挤的文

由于我们之前已经讲过如何设置控件的大小，很多时候，在设置文本时，根据控件定义的高度结合边距来选择文本的字号，下面通

举例来说，我们定义了一个40pt高的按钮，当设置文本时，尝试将多种文字字号放置在其中，间距过大或间距太小都会使按钮显得不美观。

而且如果设置了24pt按钮，则得出结论为12pt。

键词与按钮的输入框相同，也以上下空格为主要参考。

字体字体的选择，除了其本身的定位(如标题或正文)外，是可以通过比较得到最佳结果的。只需花一点时间，像上面案例所示那样，复制一次设计元素，你

最后，前面讲到的关于字体字体的设置，结合控件规范，可以在下一节中确定组件的设计尺寸，缺一不

有必要进行更有针对性的练习，从而提高对控件和文字的熟练掌握。我们建议做更多的临摹简单的界面，并应用上述的元素尺寸，这样你很快就

二、界面图标的大小应该如何确定？

本节要说的是关于图标的大小，应该是最简单的，因为前面的内容中，应该已经习惯于使用4的倍数，在图标中同样遵循这一原则。这一规律可以从相关的图标

1.图标的重量

我们还是先讨论重量再设定具体尺寸。一般的 APP，通常都会包含很多图标，而这些图标，尺寸不会完全相同。按照

为什么图标的大小不同，与它们所代表的功能和权重是分不开的。在应用程序中，我们可以简单地将图标分为三个类别，表示不

最大：页面中的重要特性入口

中：底部导航栏的图标

最小：通用工具类图标

这当然是我简化过的逻辑，类似于淘宝、京东、携程这样的大型应用，也可以划分出更细致的权重类型。事实上，不同的权值对应着不同大小的图标，如果有3种权值，

2.图标大小

先划清重点，图标的大小，主要指应用程序中由图标占据的矩形区域，而非图标本身图形的区

设计具体图形时，首先确定矩形区域的尺寸，再制作参考线，然后进行设计。与其随意设计图标并相应缩放到

举例来说，设计快速入口，首先，我们所定义的组件被分成两行四列的卡片，每个入口的实际

因此，以下是我对矩形尺寸定义的建议：

最高：64,56,48中：中：44,36,32最小：28,24,20

按照图标所在区域的上下间距，从上面选择合理的大小即可，过程和字号设置相同，这里不再

同样要注意的是，在一套应用程序中，尽可能减少图标出现的大小，特别是对于新手，只需应用2-4组不同的尺寸，否则也会对视

三、UI组件设计

最后，先说说元件的尺寸是如何设定的。

先要知道组件是什么，它是一个包含了控件、文本、图标功能的集合。它既可作为独立的信息展示单位，也可完成复杂的业务流程，是应用

1.部件大小原则

元件的长宽有两种方式，一种是根据环境设定，一种是基于内容来调整。

首先，通过外部元件来确定元件的尺寸。举例来说，我们要设计一个头部的幻灯片组件，显示为左右可滚动。所以，我们首先要根据想要幻灯片在屏幕上的比重来设定高度，比如我们认为1/3屏幕的

其次，就是根据我们所添加的元素来决定宽和高。比如，在首页幻灯片下面，添加左右滚动的卡片，我们先设置内部控件的大小和文字大小，然后通过设定

当然，也有混合的定义，如一开始订宽、根据内容定高、像花瓣瀑布流的卡片、或定义好高来调整宽度。具体运用什么形式，

接下来将通过一些常见的组件用例来说明如何定义它们的大小。

2.动态卡片

动态卡是一种常用的组件，通常以卡片的形式出现。每个动态都占据内容区域的整列，也就是减去确定内边距16pt的长度，也就是说，宽度为375-3

3.编制清单

在一系列中，由高度相同的列表项组成，这些列表项的高度和宽度应从一开始就确定，如比较紧凑的风格我们采用48pt的，比较宽松的风格就采用64

4.班次介绍

我们在定义普通班次信息的大小时，也要根据内容来考虑。第一步，确定它是一个撑满屏幕的组件，即375pt宽，然后再填充相

此时可将上下内容拆分为3个不同的子模块，班次、时间、更多作业、班次及更多的作业采用固定高度44pt，时间则以设定内容边距的方式，最终得出的

5.瓷区

主流瓷片，其实也是由模组组合而成的，而像淘宝这类瓷片会有很多瓷片并列的状态，我们优先考虑的，是每个瓷片在屏幕上的比例，也就是先定义好瓷片的高

举例来说，一个瓷块，分为两行，总高度是280pt，上面模块高度是180pt，下面的模块高度是100pt，里面的元素再

要完成一个完整的组件，取决于其内容和周围环境，我们只需将前面几节中提到的参数设置分解，就很容易定义组件的实际尺寸。而且不论任何部件，都没有固定的

最后，在 UI设计中，有目的、有逻辑地设置参数，是设计 UI的关键！要真正掌握这些技能，就要多做巩固练习。我相信大家都能在此过程当中寻找到UI设计的乐趣~最后，学习UI设计，就来粤秀教育！推荐大家学习：30天学UI设计这个课程~