字体导出电脑免费 零基础UI入门指南4：了解移动终端的相关规格（带有材料包装）

学习软件并不意味着您可以合理地输出接口。就像写作一样，能够用笔写作是两种不同的事情：掌握写作技巧，写作想法和语法措辞。

学习设计时，您必须掌握相关领域的标准，这些规格与软件技能无关。不要只是将软件学习放在首位，而是要同等地关注基本UI标准的学习。

本章主要分享与移动UI相关的基本规范性常识，因此新手不会成为可以无意识地做事的“专业巨型婴儿”。

以前的评论：

零基础UI（i）的入门：分析UI设计和就业状况的概念

从零基金会学习UI的第一本也是最早的文章“设计说明|从零基金会学习UI设计”，从那以后已经有很多年了，UI设计师的功能，工具和知识系统已经体验了很多经验。变革与创新。

阅读文章>

零基础UI（2）的入门：设计师的技能要求（带有学前班的必需材料）

我们打算启动一个新系列，并输出完整的UI零基础学习指南。

阅读文章>

零基础UI（III）入门：开始使用UI设计软件

我们打算启动一个新系列，并输出完整的UI零基础学习指南。

阅读文章>

UI规格是什么

1。规格类型排序

许多人知道有学习UI的规格，例如Apple和Android。但是，大多数人不知道这些规范是什么，它们是什么以及它们的作用，意义和内容。

术语规范可以解释为针对某个行业或行为的定性信息提供。它不是数学定理，而是人为的条件，规则，限制和限制。

在担任UI设计师时，掌握规格意味着要掌握接口设计的必要条件，规则，限制和限制，并确保您所制造的物品可用，而不是没有真正价值的飞机汇票。

与职业相关的标准不仅称为Apple和Android标准，还包括几种需要我们理解的标准。

我将它们分为以下类型：

计算机规格是指计算机字段中的一些基本常识。设计师还必须掌握一些知识，例如图像形成，图形文件格式，字体显示原理等。

硬件规格主要是指硬件特性对设计的影响。例如，电容屏幕和电阻屏幕之间的操作差异，视网膜屏幕的显示逻辑和低拆分屏幕，折叠屏幕的操作和适应方法。

系统规范是由不同软件系统开发人员提出的规范原则。系统级规范从硬件基础系统（例如Windows，Mac OS，Android）到某些开源框架或软件系统，例如AntDesign，Element，Element，等等。

视觉和互动规范是视觉和互动领域中的一些必要规则和限制。例如，视觉统一，最小点击区域的要求等。

我们将在随后的共享中稍微添加这两种类型的规格，本文将围绕前三个。

2。学习规范的方法

每个人都应该知道学习规范的重要性。也许您准备上大学了。但是我必须首先将冷水倒在盆地上，也就是说，学习规格不像软件那样舒适。

无论规格是什么方向，它们都可以分为两个主要类别，即规则和建议。

规则是指坚硬的法规，也就是说，无论规范是什么，它都不是由产品，设计或开发个人意愿转移的。例如，在非视网膜屏幕上，您不需要模糊笔触就不需要文本显示，也不能在iOS系统下用薄空制定Android字体。

这种类型的规范是最容易掌握的，因为确定规范已死，只需遵循此标准即可。无论有多少规格，您都会通过记录所有笔记并根据需要查看它们来完成。

建议是行业或官员建议您这样做，但是如果您太固执并且有自己的小情绪并且不想这样做怎么办...我该怎么办？当然，只要您需要做！

例如，建议使用8的倍数设置元素大小（实际上，官方设计不完全符合它）。实际上，对于设计师来说，您想使用它吗？...用于实际的设计过程和项目实施。它会产生什么决定性影响？

不好的是建议。建议的规范是大多数规格。我们翻译的iOS版本可以稍后获得。只要您阅读它，您就会发现涵盖了这些几个页面，其中大多数是建议，它们根本没有直接指导的指南。

新手天真地认为，只要您学习系统规格，例如iOS规范或Android规范，您就会知道该界面的设计。实际上，这根本不存在。规范中的大量建议，宏观，形而上学和模棱两可，应害怕在设计师创建和开发中过渡性干扰，并保留足够的弹性空间。

您要如何解释和实施这些建议取决于您对当前项目的经验和理解，并且没有完全正确的结论。

因此，您需要学习的第一件事标准化学习是要区分哪些是规则，哪些是建议。记住规则并记住它们，并将其背后的原因视为一个问题...

顺便说一句，如果所有设计细节都可以通过规格确定并标准化，那么UI设计师应该做什么？将它们直接写入程序并在主要AI中生成它们是足够的。

基本规范的识字

1。屏幕和分辨率

首先，UI设计器生产的内容显示在电子屏幕上，是数字图形，而不是要打印和绘制的三维世界对象。因此，屏幕显示规则确定图形的显示方式。

电子屏幕成像的基本原理是完整的屏幕由几个像素点组成。屏幕分辨率的参数，例如1920*1080，请参阅此屏幕XY轴中包含的像素数。

像素点是图像显示的最小单元（通道不计数）。每个像素点可以显示颜色。我们看到的电子图像是从这些颜色的“小点”中组装而成的。

随着技术的进步，屏幕分辨率越来越高，并且添加子像素渲染技术使我们看到的图形越来越清晰。

发布iPhone 4后，它带来了“视网膜屏幕”技术。 3GS使用320*480，而4使用640*960，像素密度加倍，总体积增加了4（2*2）次。然后到iPhone X，屏幕密度再次翻了一番，总音量是原始的9（3*3）倍。

然后出现了问题。这些值之间的区别是如此之大。我们应该将哪个参数用作创建画布的标准？在实际项目中，我们是否必须为每个尺寸制作一组？

在这里，我们不会进行过度专业的技术普遍化。每个人都应该记住一件事。在iOS和Android开发中，没有“像素”单位。

Apple使用的长度单元称为PT，Android为DP和SP。无需担心这些单元的具体含义。从本质上讲字体导出电脑免费，它们只是符号和向量单元，没有区别。

该单元的值是它可以统一数值系统并将其应用于任何密度的任何屏幕。系统将自动完成屏幕上实际显示像素的转换和显示。

例如，我们在iOS中创建了一个长度和宽度为44pt的图标，因此它将是3GS中的1：1显示状态，即44px。如果是在iPhone 4中，那就是1：2，即88px，在iPhone X中，是1：3，132px。

转换的次数是多少次，转换基础是什么，您不需要在早期阶段进入。只要您知道PT中给出的值无所不能，程序员使用本机来编写代码，并且系统还基于此单元来计算像素值。

我们在无花果/草图/XD中创建的画布实际上是基于PT（向量）。如果我们想输出具有不同屏幕密度的图像，则可以在导出面板中选择导出1倍，2x和3倍的宏伟元素。

2。矢量和位图

我们上面提到的是，PT，DP和SP基本上是同一件事，并且该单元是可选的。主要原因是向量和位图之间的主要差异。它们是计算机字段中两种最重要的图像类型。

简而言之，向量图是通过代码绘制的数字。例如，如果代码指定一个圆，则系统将根据圆形显示规则对其进行解析。位图是记录每个像素区域内显示颜色的每个像素的格式。

因此，如果您在向量和位图格式中分别绘制一个圆圈，那么您将继续扩大，并且您会发现向量的边缘仍然光滑，而位图圆圈的边缘具有不同深度的“锯齿状牙齿”。

造成这种差异的原因是，对于系统，它解析了向量文件并接受我要“绘制圆”的指令。无论是放大还是减少，它都以圆形显示。分析位图时，它只会在位图中显示像素颜色信息，并显示与包含的像素颜色信息一样多。

因此，可以随意缩放矢量图形而没有任何显示问题。由于位图中包含的颜色信息是固定的，因此无法支持无损扩增。

在矢量世界中，没有特定的测量单位。图和图之间的大小关系是比例关系，而不是大小。它仅根据我们的显示需求将其转换为像素。因此，PT，DP或sp之间没有本质上的区别。

由于可以随意缩放向量，因此位图还需要什么？

向量不是万能的。记录图形的信息非常有限，适用于具有清晰几何关系和简单颜色的图形，例如图标，文本和平面插图。

复杂的不规则图像或包含梯度和投影元素，无法使用向量完成。例如，必须记录照片或位图以正常显示。

对向量和位图的理解涉及项目的各个方面，有必要慢慢了解它们的差异和用法场景，包括切割出口格式，Lottie Animation Logic，Font Icon应用程序限制等。

3。图像文件格式

图像文件格式，即，在计算机中记录的单个图像的文件格式类型和文件后缀。根据向量和位图之间的差异，它也可以分为两个主要类别。

首先，让我们谈谈矢量格式。 UI涉及的主要内容是SVG和PDF。在iOS规范中，向量格式图形导出到PDF，而SVG则在Android中使用。至于他们之间的具体差异，有兴趣的学生可以自己找到他们。

除矢量格式外，还有几个位图，它们具有自己的适用场景，我们将分别介绍。

4。了解颜色模式

颜色是一门非常复杂的科学。在详细学习颜色匹配之前，您应该首先了解颜色 - 颜色模式的基本规范。

颜色模式是一种用于描述和记录颜色的方法，但是在不同的情况下，方法是不同的。为什么我们需要使用不同的方法来解释颜色？

首先，最早的系统研究必须从大自然开始。我们总结了色彩的基本定律，该定律由色相，饱和度和亮度组成，即HSB颜色模式。

HSB是描述自然界所有颜色的一种方法。但是，随着人类工业和化学技术的改进以及颜色屏幕的发明，颜色的需求和应用变得越来越广泛。

在专业的染色和印刷场中，已经形成了一种系统，该系统结合了四种颜料，即青色，洋红色，黄色和黑色，作为基础知识和混合其他颜色，这就是我们经常称之为CMYK模型的颜色。

在电子屏幕中，每个像素由三种不同的发光二极管（红色，绿色和蓝色）的光强度组成，以形成一种颜色字体导出电脑免费，称为RGB模式。

在设计软件中，通常会自动使用不同的颜色模式转换，并且每种颜色都会源自其他模式的相应颜色值，例如PS颜色检测器面板。

根据显示原则，无论您创建哪种颜色模式，都必须将屏幕上看到的颜色转换为RGB显示。

了解这些模式是不够的，它们只是最基本的概念。在实际设备中，即使他们使用RGB电子屏幕显示出相同的颜色值，颜色也可能差异很大。

这种差异将引起非常重大的干扰和对UI设计过程的影响。例如，如果您在公司的计算机上制作的颜色将放置在手机，客户，PPT甚至家用计算机上，则可能完全不同。

UI设计人员的设计内容有两个主要原因：

硬件规格是显示本身的电路板，显示面板，晶体管和过程级别的总和。不同的技术解决方案和成本不可避免地会导致伽玛，色域和亮度的差异，并最终导致显示效果的差异。这个问题在互联网上很常见。

更令人讨厌的是，在屏幕上的不同软件中，相同的颜色设置可以显示不同的颜色……这是颜色配置文件引起的差异。

颜色配置文件（ICC，也称为颜色说明文件）是用于告诉系统如何显示颜色的规范。任何系统或监视器都将加载此规范以显示颜色，这等同于叠加“滤镜”一层。它的重要功能是确保不同的设备（包括印刷设备）和环境保持相同颜色信息的一致性。

但是，不仅有一个颜色配置文件。不同的制造商和标准将根据相关需求制定不同的配置文件，并且可以在与计算机相关的设置中找到。

常规软件显示内容遵循系统的颜色配置，但是我们使用的专业软件可以独立配制。是否是PS，无花果，草图。如果要保持不同的设计软件和系统的颜色一致，则必须记住将其颜色配置文件设置为同一颜色。

3。计算机字体

在这一部分中，我们将讨论如何显示文本的规范，而不是应如何设置字体参数的规范。

文本对我们人类来说是有价值的且内容丰富的，但是对于计算机来说，任何文本只是计算机的固定编码字符串。该计算机通过读取文本编码提供相应的文本信息。

世界上有许多语言和字符，每个文化中的字符都需要为相关编码制定，因此不仅有一种类型的文本编码。例如，最早的ASCII编码计算机仅记录上下情况下的少数符号和数值。这显然无法满足成千上万的中国字体。

因此，有不同的文本编码规则，例如GBK，Unicode和UTF-8，以提供文本显示的识别基础。除系统外，任何软件，应用程序或网页都可以指定编码类型，例如HTML代码中标头的编码规范。

使用文本编码，计算机可以识别要输出的文本。但是，您如何决定此文本是什么样的？

目前，我们将讨论字体文件。常见的字体文件包括TTF，OTF，TTC等。在这里，我们无需特别注意不同字体文件格式的差异。只要我们知道一件事，字体图形样式就会记录在这些文件中。

我们可以使用一些字体工具打开或创建字体文件（下图是FontCreator），您可以看到每个字体实际上都是独立的向量图形，并且还包含相应的编码。

因此，显示字体的计算机逻辑实际上是读取数据中文本的编码的过程，然后使用此编码从指定的字体文件检索相应的图形，然后显示图形。

如果在此过程中的正面和背面之间存在不匹配，则会出现问题。第一件事是编码。如果软件使用编码和系统不一致，并且如果不匹配相应的文本信息，则将被弄乱。我相信，在线体验和脱机单人游戏的学生在国外。

如果要显示相应的字体样式，通常必须读取本地字体库文件，如果您不安装，则无法显示。 Apple，Android和其他设备无法随机指定其他字体的原因是该字体文件无法在设备上显示。

此外，中国环境中存在非常容易的问题。有很多中国字体文件，大多数中国字体文件仅覆盖一小部分，而其他字体则缺少，从而导致指定的默认字体或在同一文本中简单地变为空白。

Figma在Web版本中使用的字体插件是为了确保浏览器可以平稳处理文本编码并调用本地字体库，否则将不使用中文并正常显示中文。

最后，字体文件只是一个矢量图形，包含几个相应的编码，因此您要添加的任何向量图形，即使它不是真实的文本。

在UI的应用程序方案中，还有另一种非常普遍的做法，即将项目使用的向量图标材料合并为单个字体文件，以便前端可以通过设置相应的字体来使用这些图标。与我们常见的表情符号表达式类似，Apple的官方SF符号也是字体文件，但放置了不同的图形。

结论

以上是您必须了解UI的规范的第一部分。基于空间限制，并且由于它是最初的整体识字阶段，因此某些知识点不会完全扩展，并且将来将通过独立共享提供。

在下一篇文章中，我们将开始解释Apple和Android系统的规格以及相应的适应原理。

这个系列非常累人。记住喜欢，阅读和转发！活动水平越高，我更新频率〜