排版

排版可以喚起一種感覺,回憶一個品牌,或者營造一種氛圍。考慮一下 FedEx 標誌的大膽(帶有一個偷偷摸摸的隱藏箭頭!)或紐約時報刊頭的經典黑色字體風格。在編輯排版方面考慮您最喜歡的雜誌的佈局。考慮如何在手機上的不同應用程式中使用不同的字體。但是,當排版很差時,排版可能會令人不快、分散注意力,甚至難以閱讀。考慮一下您上一次被應用程式中的草率類型所迷惑,被標牌誤導,或者難以理解難以辨認的小冊子或包裝產品。

仔細想想,排版的藝術和科學是所有交流的基礎,例如徽標、廣告文案、雜誌和報紙標題,或書籍章節標題。讓我們更多地討論為什麼排版很重要。

文章大綱
什麼是排版?
排版的重要性是什麼?
各種排版元素
您網站的排版提示
Strikingly的呈現
結論

什麼是排版?

在學習這門課程之前,排版更多的是滾動下拉菜單,直到我們找到一種看起來可行的字體。然而,事實證明,它的意義遠不止於此。排列字體、字體含義字母和字元的藝術和技術被稱為排版。重要的是要注意,它不僅僅是字母和字元的設計;這些字母和字元的排列也是必不可少的。這是指在單行和整個頁面或整個作品中選擇磅值、行長和間距。

排版的重要性是什麼?

排版不僅僅是選擇漂亮的字體;它是 UI 設計不可或缺的一部分。良好的排版將創建強大的視覺層次,為網站提供圖形平衡,並為產品設定整體基調。應該透過排版來指導和通知用戶,提高可讀性和可訪問性,同時提供積極的用戶體驗。讓我們更深入地瞭解為什麼排版如此重要。

排版增強品牌認知度

良好的排版不僅會改善您網站的個性,而且您的訪問者會下意識地開始將您網站上的字體與您的品牌聯繫起來。獨特、一致的排版將幫助您建立強大的用戶追隨者,與您的用戶建立信任,並推動您的品牌向前發展。

決定受排版的影響

排版對使用者如何消化和感知排版文本傳達的資訊有重大影響。強化文本資訊的強字體比不支援文本資訊的弱字體更有說服力。

讀者被字體所吸引

良好的排版可能意味著訪問者在您的網站上停留一分鐘或半小時之間的差異。您的網站必須在視覺上具有刺激性和令人難忘,並且排版起著重要作用。

各種排版元素

要開始排版,您必須首先掌握排版圖形設計的八個基本要素。

1.字體和字體

關於字體和字體之間的區別存在一些誤解,許多人將兩者混淆。字體是一種排版設計風格,包括各種大小和重量的各種字元,而字體是文本字元的圖形表示。字體是一系列相關字體,而字體是構成字體的粗細、寬度和樣式。Serif、sans-serif 和裝飾字體是三種最常見的字體。一個好的設計師永遠不會使用超過三種字體——並將裝飾字體保持在最低限度——以保持介面整潔和流線型。大多數 UI 設計師會將襯線字體與無襯線字體配對,例如將襯線字體用於主體文本,將無襯線字體用於標題,反之亦然。

2.對比

對比,如層次結構,有助於向讀者傳達您希望強調的想法或資訊。透過關注對比度,您可以使您的排版文本更有趣、更有意義和引人注目。大多數設計師嘗試不同的字體、顏色、樣式和大小來創造影響和打破頁面。

3. 一致性

保持字體一致以避免混亂和混亂的介面至關重要。在交流資訊時,使用相同的字體樣式至關重要,這樣您的讀者才能理解他們正在閱讀的內容並開始注意到一種模式。雖然在某種程度上嘗試層次結構級別是可以接受的,但最好建立並堅持一致的字體層次結構(一種一致的字體用於標題,另一種用於副標題)。

4.空白

白色空間,也稱為“負空間”,是文本或圖形周圍的空間。它經常被忽視為一個很好的排版元素。用戶不會注意到它,但正確使用空格可確保介面整潔且文本可讀。空白可以引起人們對文本的注意,並創造一種美觀的整體體驗。空白通常由邊距、填充或沒有文本或圖形的區域表示。

5.對齊

統一和組合文本、圖形和圖像以確保每個元素之間的空間、大小和距離相等的過程稱為對齊。許多 UI 設計師使用邊距來確保他們的徽標、標題和正文都對齊。在調整用戶介面時,最好牢記行業標準。對於從左到右閱讀的讀者來說,將文本右對齊會顯得違反直覺。

在Strikingly添加圖片和影片

圖片取自Strikingly產品

6. 顏色

顏色是排版中最令人興奮的元素之一。這是設計師可以發揮創意並將介面提升到新水準的地方。另一方面,文本顏色不應掉以輕心。正確設定字體顏色可以使文本脫穎而出並傳達資訊的基調——但是,錯誤的做法可能會導致介面混亂,文本與網站顏色發生衝突。顏色包括三個主要成分:色度、色調和飽和度。一個好的設計師會知道如何平衡這三個元素,以使文本具有視覺吸引力和可讀性,即使對於那些有視覺障礙的人也是如此。設計師會經常透過以灰度(無顏色)查看文本並在文本與背景顏色相比太暗或太亮時進行調整來測試這一點。

7. 層次結構

最重要的排版原則之一是層次結構。排版層次結構旨在區分應首先注意和閱讀的突出副本和標準文本副本。在社交媒體引起的注意力短暫的時代,鼓勵設計師簡潔並創建允許用戶快速消費必要資訊的字體。

在Strikingly鏈接社群媒體

圖片取自Strikingly產品

大小、顏色、對比度和對齊方式都可以用來創建層次結構。例如,如果您有一行以紅色感嘆號圖示開頭且比前一個副本大的副本,則這是對讀者的視覺提示,它是號召性用語。大小是排版層次結構中最常見的示例:標題應始終大於子標題和標準文本。

您網站的排版提示

現在我們已經介紹了排版的基礎知識,讓我們繼續為您的介面選擇字體。當有這麼多不同的字體和字體可供選擇時,很容易不知所措。做出正確的決定不僅僅是看什麼看起來不錯。這裡有幾點需要考慮:

A.當訪問者第一次訪問您的網站時,您希望他們有什麼情緒?你想讓你的環境更受歡迎嗎?您希望網站是高檔的、吸引人的、有趣的還是嚴肅的?排版必須反映品牌或產品的個性。面對這一挑戰,定義品牌的核心特徵並開始收集反映這些特徵的字體是一個很好的起點。從那裡,您可以開始注意到一種模式。

B.考慮字體如何補充資訊的語氣也很重要。如果您想傳達嚴肅或重要的資訊,請選擇一種不那麼風格化或裝飾性的字體,該字體清晰易讀,可以減少分心。

在Strikingly進行字體設計

圖片取自Strikingly產品

C.不要吝嗇功能
功能與外觀一樣重要:沒有什麼比一個看起來不錯但完全難以辨認的網站更糟糕的了,導致你點擊錯誤的按鈕或走錯路,因為說明不清楚。在決定在您的介面中包含哪些字體時,將樣式、美學和聲音放在一邊,並考慮字體是否清晰、可讀和可訪問。有沒有辦法不費力地閱讀文本?角色之間有足夠的區別嗎?

D.考慮績效
許多設計師忽略了選擇與網路流覽器相容的字體的重要性。廣泛使用的字體庫(例如Google Fonts)提供了可以在流覽器中完美呈現的基於 Web 的字體檔案。專業提示:下載網路字體時,切勿下載超出您需要的字元集。這樣可以避免體重增加!

E.得到啟發
如果你不確定從哪裡開始,看看其他人在做什麼。注意你周圍看到的字體。你看到任何重複的模式嗎?你能識別出好的和壞的排版例子嗎?在社交媒體上關注排版主題標籤或在Pinterest上研究排版將使您對可用的內容有一個很好的瞭解。您還可以從這八種排版趨勢中獲得一些想法。

F.留出一些時間進行測試
確定介面使用哪種字體的最佳方法是什麼?測試,測試,再測試!從真實用戶那裡收集有用的回饋將更好地理解什麼有效,什麼無效,什麼是易讀的,什麼感覺違反直覺或笨拙。

Strikingly的呈現

Strikingly 是一個免費的網站構建器,允許用戶設計自己的網站。聽起來很複雜,不是嗎?不用擔心。Strikingly學習起來非常簡單,即使那些沒有 Web 開發經驗的人也會覺得它很有趣。Strikingly 包括供網頁設計師添加和編輯排版的工具以及海量模板。可用的各種字體和文本顏色會讓您大吃一驚。您可以使用Strikingly來操縱排版周圍的空間,並創建符合良好排版設計項目的具有視覺吸引力的文本。您可以混合和匹配樣式來創建排版,使您的品牌脫穎而出。

Strikingly的海量模板

圖片取自Strikingly產品

結論

排版經常被忽視,但它是用戶介面設計的重要組成部分。如果你掌握了排版,你將成為一名出色的 UI 設計師!如果您不確定從哪裡開始,請訪問您最喜歡的網站並開始記錄他們選擇的字體。