每个设计师都应该知道的19种印刷技巧

所有网络信息中超过90％由文本组成。尽管设计人员花费大量时间来确定页面的图形，界面和样式，但是选择理想的版式需要等量的时间。特别是在移动设备方面，移动Web 的版式需要特别注意，因为它面临两个主要挑战-可用空间和版式大小。本文将向您介绍具有丰富用户体验的19个版式技巧，以解锁令人印象深刻的UI到您的移动Web设计。

给一些空间

移动字体并不是要在屏幕上排列字母，而是要以一种使用户可读的方式排列它们。正确利用空白，并在字母，行和段落之间留出足够的空间，以便用户无需放大即可正确阅读内容。

额外提示：紧缩

直到我从UI设计的角度了解它的重要性之前，紧缩并不是该列表的一部分。因此，从第一个技巧中我们知道提供空间是必要的，但Kerning却将其提升了一个等级。字距调整是一种调整字符之间提供的间距以使内容突出并易于阅读的艺术。字距调整有3种类型，一种可以选择。

尽管在上图中是可见的，但是关于这些各种类型的字距调整之间的区别还有更多的了解。好奇？从此博客“紧缩：不要收紧你的风格”中阅读它。

适当的字体大小

您可以将桌面字体的大小保持在14像素，但是在移动设备中进行更改时，根据设备的分辨率，它可能会导致内容变小或变大。检查所有分辨率下的字体大小，并使用媒体查询，以便可以在所有不同分辨率的手持设备上读取移动Web的排版。

使用正确的测量单位

对于移动网络的字体大小，排版不使用点（pt）。而是使用ems或rems。对于大多数设计人员而言，这是首选，因为这些单元基于百分比而不是任何静态大小，因此使内容具有可伸缩性。

选择对比色

更好的对比度确保更好的可读性。在考虑移动网络排版的颜色时，请考虑明暗之间的比较。如果页面背景为深色，请使用明亮的字体。例如，黑色背景上的白色字体，反之亦然。

确保更好的可读性

今天有许多免费且令人兴奋的字体，但是如果您打算在内容中使用它们，则应检查每个字母，以确保所使用的字体和大小使这些内容可读。如果读者无法理解您的内容，那么使用那些漂亮的字体是没有意义的。

正确对齐文本

对齐是移动Web排版的重要因素。人脑喜欢在小屏幕上以块状阅读文本。通常，文本左对齐，这意味着该块的右侧有一个参差不齐的边缘。正确调整它，并确保您使用的是“对齐”对齐，它不会导致空白不一致。

设置领先

移动网络中的排版要求始终如一的引导（行与行之间的空间）。如果内容太小，则内容太多，很难跟踪下一行的结尾和下一行的开头。如果太大，将导致不必要的空格。确保不要中断管路的顺畅流动。

找到你的甜蜜点

所有字体都有一个优点。字体大小和开头的组合可确保最佳的可读性，并减少由浏览器的默认抗锯齿引起的变形。尝试使用您正在使用的字体并找到最合适的位置。

空白空间利用

空格通常是可用的。如果是CTA或可单击的链接，请使用空格，以便可以使用索引或拇指来区分和单击它们。由于用户没有像在台式机中那样使用鼠标，因此拇指或食指被视为光标，其厚度约为一毫米。考虑一下并有效利用空白。

考虑屏幕宽度

在移动网络上设计字体时，您必须考虑人们如何阅读文字。通常，移动设备中有两种宽度：垂直和水平。因此，在设计版式时，请同时考虑两个宽度并相应地设置对齐方式和间距。

使您的字体与众不同

您的移动网页的版式应具有独特的功能，无论是外观，颜色还是其他效果。特别是，在要用户阅读的内容中，请仔细选择标题的字体，以使它们与众不同。

检查缩放比例

检查不同分辨率的不同移动设备中的内容。另外，放大和缩小以确保您的移动网络排版可以缩放并适合整个屏幕宽度。您的内容必须具有响应能力，并且您必须对其进行测试并编写媒体查询，以防任何特定分辨率出现问题。

考虑功能性

移动网站中有许多文本元素，允许用户执行某些操作，例如发送消息或拨打电话。移动网络的版式应谨慎设计，以确保用户了解特定文本实际上是CTA或执行某些功能。

页面文本过多吗？

如果您的页面内容繁琐，例如博客或新闻文章，则只需很少的交互。用户的主要目的是阅读并确保相应设计移动网络的版式。

页面互动量大吗？

如果您的页面涉及更多的悬停，并且单击操作以及输入，编辑等，请相应地调整文本。确保字体大小不小于18px，以便用户可以理解，一旦单击或悬停在文本上，便应该执行某些操作。

响应式网页设计

如前所述，在移动网络排版期间应避免像素。它们具有固定尺寸标准。请改用em或rem。它们基于百分比和可伸缩性。在具有不同分辨率的移动设备上查看内容时，它们会相应地调整其大小。请记住，自适应网页的文本内容应可扩展，并根据屏幕宽度自动调整其大小。您可以使用LambdaTest执行响应式测试。只需单击一下，您就可以在44种不同分辨率的移动设备上检查网站的响应速度。

配对多种字体

在设计移动Web的版式时，可以为标题和段落，标签等组合不同的字体。但是请确保它们相互匹配。混合使用阿尔及利亚标题和漫画无MS段落是一个坏主意。

字体重量：重还是轻？

与台式机相比，移动字体相对较小。当涉及它们的功能时，必须小心使其可读或可点击。决定字体粗细的关键是实验。尽管当前移动网络的大胆和大字体印刷是一种趋势，但您应使用多种字体粗细并在不同分辨率下测试应用程序，以确保在任何地方都不会出现中断。

注意背景

如前所述，如果背景是静态且单色的，则可以使用相反对比度的字体颜色。但是，当背景是图像或视频时，理想的选择是尝试使用不同的颜色，然后检查哪种颜色合适，并使内容可读。

排版是一种精致的工艺。设计师经常花一生来提高他们的印刷技巧。随着每一种新字体带来新挑战，我们确信，当您下次设计新的移动网页时，上述移动版式提示将很方便。另外，请记住执行跨浏览器兼容性测试，以确保您使用的字体或样式在所有浏览器中都能正常工作。LambdaTest可用于在2000多种不同的浏览器及其版本上执行跨浏览器兼容性测试。确保所有必需的浏览器都支持字体，并为您的用户提供应有的丰富用户体验。

最初发表在LambdaTest

最初由Arnab Roy Chowdhury撰写