如何使用动态排版使您的网站具有交互性？

动态排版是指动画的一种形式。 在这里，我们让文字变为现实。

我说的是文字，但它可以是任何东西——从一个字母到整个段落。 取决于您想通过该动作实现什么。 考虑到这一点，你的移动类型必须是深思熟虑和有意的。 你不能仅仅因为它的纯粹而让你的话语跳跃和繁荣。

好吧，你可以——但这种肤浅的使用不会产生同样的影响。

因为当您在网页设计中使用动态语言时，无论是通过创建徽标设计动画还是通过动态排版，您都在让设计向用户开放。

换句话说，您正在帮助用户忘记他们只是在点击屏幕，而是将您的网站呈现为可以响应的活生生的东西。 它可以微笑，告诉你下一步该做什么，当你点击正确的按钮时跳舞，当你成功时会爆炸成星星。

当用户可以与您的设计进行交互时，他们可能会决定在它上面花费更多时间，对它感到高兴，更全面地理解它，并最终对它产生亲和力。

https://dribbble.com/shots/14187210-Behance

交互元素改善网站体验的 5 种方式

提升审美

当您的网站给人留下第一印象时，美学就是一切。 如果您的网站看起来单调乏味且组合不佳，那么这种印象也会传递给您的品牌，从而使您的底线受到影响。

另一方面，如果一个网站看起来很漂亮，并且提供了大多数网站上没有多少人以前见过的功能——例如动态类型——那是一个巨大的胜利。

由于动力学类型也使美学更加生动，因此影响增加。 您现在拥有一个漂亮的网站，人们可以触摸、交谈、回复并从中获得反馈。

这是一个好的旧静态网站无法做到的。

让你脱颖而出

为了在数字世界留下不可磨灭的印记，你必须拥有其他人没有的东西。

无论出于什么难以理解的原因，没有大品牌从动力学类型可以做的事情中受益。 忘记大品牌吧，创业公司也对这个美丽奇迹的奇迹视而不见。

这是你可以罢工的地方。

在您的网站上加入微妙的、引人入胜的和品牌上的动态类型效果，以彰显您的独特体验。 向人们展示你能做什么。

人们会看着你的创新，看看你处理它的完美程度，以及它如何帮助你的企业传达信息，他们开始信任你。 他们会将您视为知道自己在做什么的人。 建立信任后，很快就会进行货币交易。

保持用户参与

互联网和社交媒体的整个前提都建立在参与之上。 您的内容必须为人们提供可以让他们与内容、创作者和平台保持互动的东西。

在您的网站上使用动态排版功能可以实现您梦寐以求的参与度。

您不是强迫他们阅读静态副本，而是为他们提供变形、变化、适应和执行的真人单词，以使用户旅程更易于理解和有趣。

改善视觉层次

视觉层次是指事物呈现给用户的组织顺序。 具有最大字体的文本最重要，然后是小于该字体的文本，以此类推。 同样，例如，明亮颜色的字体比灰色或浅蓝色字体更能吸引我们的注意力。

使用这些视觉提示，我们帮助人们以有组织的顺序引导他们的注意力到页面的各个部分。

移动类型在这里可以提供巨大的帮助。 代替静态提示，我们可以使用流畅的排版，让我们的字母和单词变成有助于引导用户注意力的图标和形状。

教育用户

当您启动一个新网站时，人们可能很难掌握它。 但交互式功能可以提供帮助。

根据一项内容营销研究，93% 的营销人员认为互动内容“在教育潜在客户方面非常有效”。

现在，这种交互式内容可以是任何东西——博客文章、视频、信息图，任何东西——但是当你通过移动类型在网站的各个区域引入移动时——导航、菜单、搜索栏，你可以命名它——你增加了教育和对新布局的十倍理解。

以下是动力学类型如何使您的网站具有交互性

1.让你的页面加载等待时间更有趣

https://dribbble.com/shots/6189182-Counter-01

我们都不喜欢需要永远加载的网页。 事实上，根据谷歌的说法，页面加载缓慢是某些网站跳出率高于其他网站的主要原因之一。

但是字体活动在这里可以提供帮助。

考虑一个页面，其中文本大小的变化会通知您剩余的等待时间。

随着字体从较小尺寸变为较大尺寸，它可以提醒用户他们可能需要等待多长时间。 虽然人们可能不会对页面加载时间做出积极回应，但当你告诉他们等待多久结束时，他们可能会停留更长时间。

通过使副本更有趣、动画更吸引人、效果更自然，您可以让等待时间变得更有趣。

2. 吸引用户注意并提示下一步

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

对于那些可能不太熟悉您的网站的人来说，找到用户旅程的下一步可能会有些混乱。

移动类型可以帮助您在正确的时间将用户的注意力吸引到网站的正确区域。 例如，在餐厅的数字菜单上移动类型可以帮助您在最终确定菜肴时将注意力引导到份量上。 或者，当您预订旅行时，内置日历上的动态排版可以帮助您确保选择了正确的日期。

当您使用户旅程更易于遵循和更可预测时，这表明您已经创建了一个大多数人都可以轻松理解的直观界面。

https://dribbble.com/shots/17559699-Move-On-Up

3.告诉人们应该关注什么

https://dribbble.com/shots/9287077-hop

可移动字体可以改善网站的另一个关键领域是您必须告诉人们应该关注什么。

想想我的服务页面。 虽然传统的静态页面可以完成其工作，但通过动态类型，您可以告诉人们哪个服务是您的主要产品，哪个是次要产品，依此类推。 通过这种方式，动态类型正在帮助您建立和推广您的利基市场。

除了移动之外，您还可以将类型转换为与您的服务相关的不同形状，以使您的信息更直观。 例如，如果您是作家，羽毛笔图标可以参考您作为编辑的技能，而灯泡符号可以表示创意咨询。

随着您副本中的不同字母变成这些新图标，它不仅看起来非常有趣和引人入胜，而且还展示了您的一些个性 - 在营销中，这（大部分）总是一个加分项。

https://dribbble.com/shots/13945869-My-Services

4. 让用户为状态改变或转换做好准备

https://dribbble.com/shots/11258557-Creative-Coding-5

电子商务或网络浏览体验充斥着转换。 你总是从 A 点到 B 点到 C 点等等。 硬切的过渡会带来令人厌烦的用户体验。 没有人喜欢从一个地方颠簸到另一个地方。 流畅、类似液体的排版有助于保持一切顺畅。

它让人们为即将到来的变化做好准备。 告诉他们做好准备。 帮助他们进入心态，为下一阶段的购物、下载或简单浏览做准备。

平稳过渡也能有效地留住用户的注意力。 与显示等待信号的静态页面不同，一些带有象征性动作的漂亮副本将受到每个人的欢迎，并有助于品牌氛围。

5. 强调网站的关键词、短语或区域

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

网站的大部分内容都是由文本组成的。 Web 副本、描述和 CTA 是一些示例。 当您决定使用动态类型时，您可以让这些文本元素变为动画。 突出您的核心信息变得更容易。

当您完成在线订单时，请考虑一下变成购物车图标的 CTA。 或者是一条错误消息，通过将自己变成悲伤的皱眉来表示失望。 或者，一个播客剧集列表，当您将鼠标悬停在其名称上时，每个标题都会变大。

作为运动设计的一部分，动态类型可以帮助您突出您想说的话。 让你的话语的力量加倍。 所以，有意识地使用它。

6. 成功完成任务时提供视觉反馈

https://dribbble.com/shots/16174668-KEEP-IT-UP

当用户与您的 UI 互动时，当他们知道自己做得对时会有所帮助。 错误消息、确认和其他形式的视觉反馈可帮助用户了解他们需要做什么。 加强用户操作有助于他们保持参与度，并增加他们完成必须做的事情的可能性。

动画排版是一种有效的视觉反馈形式。 它很快，保持体验的兴奋，并鼓励用户采取进一步的行动。

当您将其用于错误消息时，它尤其起着关键作用。 你希望人们再试一次，不要感到沮丧，并告诉他们到底出了什么问题。 因此，例如，当用户两次输入错误密码，而第三次将他们锁定在应用程序之外时，您可以包含一条动画错误消息，提醒他们这一事实，以便他们现在更加小心。

如您所见，您不必使用移动类型来淹没您的网站。 坦率地说，整个事情看起来会很奇怪，而且太过分了。 正如我一直说的，当你处理任何类型的动画时，都要更加微妙和深思熟虑。 当它改善了体验时就这样做，即使这样，也要保持效果轻盈流畅。

7.帮助设定品牌基调

https://dribbble.com/shots/17070314-SIMPLE

虽然动画文本可以帮助所有和任何行业，但它在某些行业比其他行业更有效。 以银行或保险为例。 您可以在那里为您的排版设置动画，但您必须非常低调。 因为如果你做得更多一点，它会让你的品牌形象受到打击。

但是想想时尚、生活方式、零售、房地产、儿童装备/衣服/玩具等等，健康剂量的动态类型让 UI 更有趣似乎更有意义。

虽然单独它不能建立您的整个品牌，但可以肯定地与其他工具一起作为一项重要资产。

外卖

有三种：

1. 有目的的。 不要只是因为它看起来很漂亮而这样做。 这样做是因为它有目的，然后让它变得美丽。
2. 节俭与你的移动类型。 这可能需要很多。 因此，仅将其添加到您有空间且效果最佳的 UI 区域。
3. 要清楚。 使用添加动画时不会失去可读性的字体样式。 此外，远离会混淆完美易读的字体样式的动画样式。