最走心的(of)網頁設計建議，幫你設計出(out)更加優秀的(of)網頁排版

排版是(yes)設計師同用(use)戶溝通的(of)一(one)種方式。在(exist)數字産品設計當中，界面的(of)視覺和(and)可讀性對于(At)用(use)戶體驗的(of)影響是(yes)極爲(for)巨大(big)的(of)。曾經有一(one)位著名的(of)平面設計師曾經說過：“排版設計不(No)僅僅是(yes)可見的(of)，而且是(yes)可被聽見的(of)。你創建出(out)一(one)個(indivual)宏大(big)的(of)場景，那麽演員就可以(by)在(exist)此登場表演了(Got it)。”排版能夠呈現情緒、營造氛圍、傳遞精神，所以(by)優秀的(of)排版能夠爲(for)設計發聲。今天的(of)文章爲(for)你提供一(one)些排版設計上(superior)的(of)小建議，雖不(No)複雜，但是(yes)也需要(want)你仔細揣摩，才能用(use)好。

層次讓排版發揮作(do)用(use)

想要(want)創建出(out)能被用(use)戶感知到(arrive)的(of)、令人(people)愉悅的(of)設計，設計作(do)品應該擁有良好的(of)組織結構和(and)清晰的(of)導航模式。而設計師可以(by)通過建立視覺層次結構來(Come)明确整體的(of)結構，視覺元素在(exist)這(this)個(indivual)框架下被組織起來(Come)，用(use)戶則可以(by)更爲(for)清楚地(land)感知其中的(of)内容。

視覺層次可以(by)被分爲(for)不(No)同的(of)部分，其中隻與文本元素相關的(of)部分被稱爲(for)排版層次。排版層次是(yes)通過将文本内容劃分爲(for)标題、副标題、正文等不(No)同的(of)類型，從而讓文本各司其職，具備良好的(of)層次。不(No)同的(of)文本類型使用(use)不(No)同的(of)大(big)小、字體、色彩來(Come)顯示，從而區分出(out)彼此。

清晰的(of)層次結構讓文本具備良好的(of)可讀性。此外，文本中的(of)關鍵部分還能高亮顯示，從而吸引用(use)戶的(of)注意力，甚至關聯到(arrive)特定的(of)交互和(and)操作(do)上(superior)去。

兼顧到(arrive)上(superior)下文場景和(and)用(use)戶

當你在(exist)爲(for)特定部分的(of)文本選取字體的(of)時(hour)候，需要(want)考慮它所處的(of)環境，所在(exist)部分的(of)特征。每種字體都有其特定的(of)功能、适合的(of)場景和(and)情緒，有的(of)友好，有的(of)有趣，有的(of)嚴肅，有的(of)看起來(Come)很商業，所以(by)字體和(and)情緒要(want)保持一(one)緻。

在(exist)你選取字體之前，要(want)清楚産品這(this)個(indivual)部分的(of)特征，了(Got it)解客戶的(of)目标，以(by)及目标受衆的(of)需求和(and)偏好。字體的(of)視覺效果會直接影響用(use)戶從你的(of)産品中所獲得的(of)第一(one)印象。如果這(this)種字體不(No)符合産品當前内容的(of)情緒，會在(exist)用(use)戶那邊産生(born)誤會的(of)。如果是(yes)一(one)個(indivual)相對嚴肅的(of)商業網站，在(exist)其中采用(use)有趣或者拙稚的(of)字體，用(use)戶會對這(this)個(indivual)企業和(and)服務産生(born)質疑。如果是(yes)針對青少年或者年輕人(people)，太過于(At)正式、沉悶的(of)字體，則會讓頁面看起來(Come)很無聊。

深入關注移動端的(of)排版

設計師常常會試圖使用(use)實驗性的(of)布局，來(Come)讓設計看起來(Come)更加原創。但是(yes)這(this)樣非常規的(of)排版布局遷移到(arrive)移動端設備上(superior)，就不(No)一(one)定具備良好的(of)可用(use)性了(Got it)。移動端屏幕太小，難以(by)适配過于(At)獨特的(of)設計，這(this)種限制會使得設計師難以(by)兼顧到(arrive)功能和(and)視覺。設計師需要(want)特别注意移動端排版布局的(of)細節，從字體尺寸到(arrive)間距和(and)縮進，這(this)些細節對于(At)整體效果的(of)影響是(yes)非常明顯的(of)。

與桌面端的(of)設計相比，移動端的(of)排版更難以(by)達到(arrive)良好的(of)識别率。在(exist)小屏幕上(superior)，字體首先要(want)控制到(arrive)一(one)個(indivual)相對較大(big)的(of)尺寸，這(this)樣不(No)會因爲(for)難以(by)識别而造成混亂。但是(yes)太大(big)的(of)字體又會讓設計看起來(Come)不(No)夠優雅。同時(hour)，設計師還要(want)特别注意内容的(of)對比度，因爲(for)移動端設備周遭的(of)環境常常會特别的(of)複雜，如果對比度不(No)夠好，用(use)戶閱讀困難，對視力的(of)損害就不(No)可避免了(Got it)。

此外，設計師還需要(want)考慮排版布局的(of)功能性。如果文本中存在(exist)可點擊的(of)内容，設計師需要(want)确保它們(them)能夠且易于(At)被點擊到(arrive)，還不(No)能誤觸其他(he)的(of)地(land)方。

通盤考慮移動端排版的(of)全部細節，設計師才能爲(for)用(use)戶帶來(Come)有價值的(of)産品。

極簡主義的(of)設計不(No)是(yes)沒有道理的(of)

在(exist)不(No)久前，許多設計師還會在(exist)一(one)套設計當中使用(use)大(big)量的(of)不(No)同的(of)字體與樣式，這(this)樣的(of)設計之下，排版布局中充斥着大(big)量令人(people)分心的(of)細節，難以(by)營造一(one)緻的(of)、合理的(of)情緒和(and)氛圍。

經驗豐富的(of)設計師，通常會在(exist)整個(indivual)排版布局中，沿用(use) 2 到(arrive) 3 種字體，确保了(Got it)文本元素之間的(of)對比度，還節省了(Got it)設計成本，确保了(Got it)整體的(of)平衡，以(by)及信息傳遞的(of)準确性。在(exist)字體樣式上(superior)，設計師也會對粗體、斜體這(this)樣的(of)效果保持克制，對真正重要(want)的(of)部分進行強調，避免混亂。

除此之外，文案内容也需要(want)足夠的(of)簡明，不(No)要(want)讓無效信息幹擾用(use)戶。

呼吸感很重要(want)

字母之間的(of)間距，行間距和(and)字間距，是(yes)可讀性的(of)主要(want)影響因素。調整間距和(and)留白，是(yes)排版設計中的(of)重要(want)環節，也是(yes)控制整個(indivual)布局呼吸感的(of)關鍵。

缺乏留白，或者間距控制不(No)好，最終會影響内容的(of)可讀性：字母難以(by)辨析，單詞看不(No)清楚，視覺上(superior)不(No)夠舒适，每行和(and)每個(indivual)段落看起來(Come)不(No)夠舒服，都會影響整體的(of)統一(one)性和(and)内容的(of)閱讀體驗。有密有疏，疏密有緻，才有呼吸感。

像科學家一(one)樣排版，像藝術家一(one)樣定制

排版是(yes)一(one)個(indivual)涉及到(arrive)許多規則和(and)條例的(of)複雜學科，隻有充分掌握了(Got it)這(this)些規則，才能作(do)出(out)足夠幹淨、整饬的(of)排版。但是(yes)這(this)還不(No)夠。客戶總是(yes)需要(want)一(one)定的(of)原創性，希望你能通過排版布局傳遞去情感，而這(this)些是(yes)排版規則無法幫你實現的(of)。

作(do)爲(for)設計師，你的(of)靈魂中是(yes)應該有藝術的(of)特質。想象力和(and)對沒的(of)感知，能夠爲(for)你的(of)設計賦予原創性和(and)獨特性。在(exist)嚴格的(of)規則和(and)獨特的(of)構思之間，找到(arrive)平衡點，你會發現自己的(of)能力已經超出(out)了(Got it)你的(of)客戶和(and)你自己的(of)意料。

彩色排版需要(want)深思熟慮

有人(people)認爲(for)，成熟的(of)排版設計中沒有色彩的(of)位置，但是(yes)也有人(people)認爲(for)色彩是(yes)視覺設計的(of)必需品，哪怕是(yes)傳統的(of)排版設計，也必須具備。不(No)過，在(exist)實際排版設計當中，色彩的(of)出(out)場比例并不(No)低，所以(by)這(this)種情況不(No)應忽略。

色彩在(exist)排版設計當中，不(No)僅可以(by)強化視覺，而且能夠爲(for)UI增加情感因素，吸引用(use)戶的(of)注意力，強化趣味感。不(No)過，用(use)色本沒問題，但是(yes)色彩一(one)定要(want)控制好。色彩多而混亂的(of)失敗案例多不(No)勝數，在(exist)排版中用(use)色一(one)定要(want)深思熟慮。下面是(yes)排版設計中用(use)色的(of)一(one)些技巧：

• 構成對比。在(exist)排版中用(use)色很容易造成混亂，讓内容難以(by)辨認。主要(want)控制好文本和(and)背景之間的(of)對比度。

• 不(No)要(want)使用(use)太多色彩。太多顔色很容易讓整個(indivual)UI變得更加混亂。

• 讓配色協調。配色是(yes)設計的(of)基本功，善用(use)色輪和(and)成熟的(of)配色方案。

• 小心使用(use)特效。文本上(superior)盡量少用(use)特效，絕大(big)多數情況下，特效并不(No)會讓文本的(of)視覺效果更好。

  
  

  了(Got it)解排版的(of)基礎知識

  
  

  也許這(this)麽說有點直白，但是(yes)确實有很多設計師壓根不(No)了(Got it)解排版設計的(of)基本知識。他(he)們(them)大(big)多依靠各種工具中自帶的(of)排版工具來(Come)做排版布局，他(he)們(them)隻需要(want)在(exist)選取自己的(of)時(hour)候調動自己的(of)審美知識就可以(by)，而排版個(indivual)諸多規則他(he)們(them)并不(No)确知，隻是(yes)基于(At)經驗，似是(yes)而非地(land)“有所了(Got it)解”而已。不(No)了(Got it)解排版知識，設計師是(yes)無法發揮出(out)排版的(of)真正潛力的(of)，這(this)也是(yes)爲(for)什麽同樣的(of)素材在(exist)别的(of)設計師的(of)排布之下，就是(yes)要(want)比自己做的(of)來(Come)得漂亮。基礎知識很重要(want)，這(this)并非是(yes)一(one)句空話。那些看起來(Come)很枯燥的(of)字體設計書籍，當中蘊藏着幹貨。學好排版的(of)基礎知識絕對是(yes)磨刀不(No)誤砍柴功。