如何使用動態排版使您的網站具有交互性？

動態排版是指動畫的一種形式。 在這裡，我們讓文字變為現實。

我說的是文字，但它可以是任何東西——從一個字母到整個段落。 取決於您想通過該動作實現什麼。 考慮到這一點，你的移動類型必須是深思熟慮和有意的。 你不能僅僅因為它的純粹而讓你的話語跳躍和繁榮。

好吧，你可以——但這種膚淺的使用不會產生同樣的影響。

因為當您在網頁設計中使用動態語言時，無論是通過創建徽標設計動畫還是通過動態排版，您都在讓設計向用戶開放。

換句話說，您正在幫助用戶忘記他們只是在點擊屏幕，而是將您的網站呈現為可以響應的活生生的東西。 它可以微笑，告訴你下一步該做什麼，當你點擊正確的按鈕時跳舞，當你成功時會爆炸成星星。

當用戶可以與您的設計進行交互時，他們可能會決定在它上面花費更多時間，對它感到高興，更全面地理解它，並最終對它產生親和力。

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. 要清楚。 使用添加動畫時不會失去可讀性的字體樣式。 此外，遠離會混淆完美易讀的字體樣式的動畫樣式。