網(wǎng)站設(shè)計(jì)的排版概論發(fā)布者：本站     時(shí)間：2019-11-13 10:11:24

排版是網(wǎng)站設(shè)計(jì)系統(tǒng)中最重要的方面之一，要盡早建立起來(lái)，要考慮通過字體與用戶交流的信息有多少。類型可以占任何給定屏幕的85-90%。網(wǎng)站設(shè)計(jì)的排版通常是你需要掌握的基本組件之一，因?yàn)樗枰c其他元素如圖標(biāo)和UI控件協(xié)調(diào)工作。你的線條高度甚至?xí)绊懺S多其他的結(jié)構(gòu)元素，比如間距和網(wǎng)格。以下是你需要仔細(xì)考慮的幾個(gè)關(guān)鍵方面。

選擇字體

在選擇字體時(shí)要考慮很多因素，特別是在屏幕上使用的時(shí)候。您可能還需要與品牌/營(yíng)銷團(tuán)隊(duì)進(jìn)行跨職能合作，以適應(yīng)您的品牌的字體，并確定如何將它們?nèi)谌肽南到y(tǒng)。字體可以是另一個(gè)觸點(diǎn)，幫助你在整個(gè)數(shù)字體驗(yàn)中微妙地傳達(dá)正確的基調(diào)和個(gè)性。如果你的品牌有一個(gè)非常獨(dú)特的字體，不適合擴(kuò)大閱讀或小尺寸，你可以選擇保留它的顯示大小元素，如標(biāo)題，使用不太頻繁。在這種情況下，您可能想要將它與一個(gè)更清晰的字體配對(duì)，以顯示更小的字體。如果性能是一個(gè)關(guān)鍵目標(biāo)，那么許多網(wǎng)站設(shè)計(jì)系統(tǒng)將經(jīng)常利用不同平臺(tái)的系統(tǒng)/本機(jī)字體堆棧來(lái)避免加載網(wǎng)站設(shè)計(jì)體（如Shopify Polaris系統(tǒng)所示）。當(dāng)然，您也可以決定處理這些事情，這取決于您的系統(tǒng)是否需要支持產(chǎn)品或營(yíng)銷網(wǎng)站（品牌個(gè)性可能是更高的優(yōu)先級(jí)）。在做決定時(shí)要考慮很多因素，但在個(gè)性、表現(xiàn)和屏幕可讀性之間找到適當(dāng)?shù)钠胶馐莻€(gè)好主意。

選擇字體權(quán)重和樣式

考慮在最復(fù)雜的屏幕中創(chuàng)建簡(jiǎn)潔的層次結(jié)構(gòu)需要多少權(quán)重或變量，在什么情況下使用加粗的版本和壓縮的版本是有意義的？保持這個(gè)字體變體列表的簡(jiǎn)短通常是有好處的，因?yàn)榧虞d整個(gè)字體家族的每個(gè)部分可能不是很有效（而且獲得許可的成本更高）。您在UI中使用特定樣式的頻率是多少？例如，如果您有一個(gè)或兩個(gè)非常小的斜體應(yīng)用程序，請(qǐng)考慮權(quán)衡加載額外的webfont和利用瀏覽器呈現(xiàn)的斜體的利弊。此外，尋找機(jī)會(huì)，您可以通過增加類型大小而不是添加額外的字體權(quán)重來(lái)實(shí)現(xiàn)對(duì)層次結(jié)構(gòu)的相同效果。

字體大小、行高和響應(yīng)能力

一旦你知道了你使用的字體，這可能是你花費(fèi)最多時(shí)間的地方。字體大小和行高是密切相關(guān)的，并且通常會(huì)受到設(shè)計(jì)中使用的一些底層網(wǎng)格的影響。許多網(wǎng)站設(shè)計(jì)師會(huì)從建立基本字體大?。ㄍǔＪ亲畛Ｓ玫淖煮w大?。╅_始，然后從中確定合適的行高。以1.5x字體大小的行高作為起點(diǎn)是一個(gè)普遍的經(jīng)驗(yàn)法則。許多網(wǎng)站設(shè)計(jì)師會(huì)使用行高作為基礎(chǔ)來(lái)建立一個(gè)基礎(chǔ)的基線網(wǎng)格，所有的尺寸都被映射到這個(gè)基線網(wǎng)格中，或者平均地劃分到這個(gè)基線網(wǎng)格中。這里的系統(tǒng)方法將幫助您定義系統(tǒng)的其他特征，如圖標(biāo)大小、空白、填充和間距值，以及UI組件的一般大小。

當(dāng)您開始處理這些字體和行高匹配時(shí)，還要考慮需要多少大小，以及哪些大小將映射到特定的權(quán)重或樣式。確保您適應(yīng)了所有需要的應(yīng)用程序，包括從幫助文本和表單標(biāo)簽、正文副本和副標(biāo)題到標(biāo)題的所有內(nèi)容。

您還需要定義這些大小如何跨不同的設(shè)備和視口尺寸工作，通常，設(shè)備之間最大的尺寸差異發(fā)生在更大的顯示器尺寸上。你的方法也可能受到你選擇的類型單位的影響，從px到rems, ems，甚至vh/vw單位（基于視口寬度或高度的流體單位）。從技術(shù)角度看，這些值中的許多將被編碼成易于使用的令牌或變量系統(tǒng)，而不是硬編碼，以使它們更容易維護(hù)。

這里有一些排印深度指導(dǎo)，讓你開始：

一個(gè)為更快的網(wǎng)站設(shè)計(jì)-網(wǎng)站開發(fā)切換創(chuàng)建一個(gè)可訪問的和和諧的排版系統(tǒng)的框架

Priyanka Godbole指導(dǎo)您如何審核排版，確定基本字體大小、標(biāo)題大小、權(quán)重和行高。這10步的過程用于建立印刷系統(tǒng)的PracticeFusion的電子健康記錄是適用的，如果你是從零開始，或如果你是完善現(xiàn)有的系統(tǒng)。

版式設(shè)計(jì)系統(tǒng)

Dan Mall對(duì)網(wǎng)站設(shè)計(jì)系統(tǒng)中現(xiàn)有的排版分類感到失望，他探索了使設(shè)計(jì)系統(tǒng)中的排版更加可預(yù)測(cè)和直觀的不同方法。他提倡使用一個(gè)數(shù)字系統(tǒng)進(jìn)行規(guī)范的預(yù)置，每個(gè)預(yù)置都包含各種屬性的組合——大小、主導(dǎo)、重量——這是系統(tǒng)所需要的。這使得在預(yù)設(shè)級(jí)別的任何更改都可以系統(tǒng)地應(yīng)用于繼承該樣式的任何組件。

創(chuàng)建您的設(shè)計(jì)系統(tǒng)，第1部分：排版

排版可以說(shuō)是任何網(wǎng)站設(shè)計(jì)中最重要的部分，當(dāng)我們想到網(wǎng)站的內(nèi)容時(shí)，我們想到的是文字。Sebastiano Guerriero詳細(xì)介紹了如何使用CSS全局設(shè)置排版設(shè)計(jì)系統(tǒng)。從選擇正確的字體系列到創(chuàng)建由變量控制的模塊類型比例，本指南將帶您了解為設(shè)計(jì)系統(tǒng)創(chuàng)建一組和諧的值的基本原理。

數(shù)學(xué)網(wǎng)絡(luò)排版

你的數(shù)學(xué)教授是對(duì)的，你應(yīng)該在課堂上多注意聽講！Brent Jackson帶領(lǐng)我們?cè)O(shè)計(jì)更好的網(wǎng)頁(yè)排版系統(tǒng)。通過將你的排版系統(tǒng)建立在數(shù)學(xué)的基礎(chǔ)上，你可以在保持一致的閱讀體驗(yàn)的同時(shí)降低復(fù)雜性。從你的口袋到巨大的桌面顯示器，網(wǎng)絡(luò)無(wú)處不在，這意味著你的類型系統(tǒng)需要在一致性和靈活性之間取得平衡，Brent的文章向我們介紹了為每個(gè)設(shè)備設(shè)計(jì)CSS類型系統(tǒng)的基本原理。

更有意義的排版

蒂姆?布朗（Tim Brown）向我們展示了一個(gè)使用模塊化秤從type構(gòu)建網(wǎng)站設(shè)計(jì)體驗(yàn)的例子，并解釋了他為什么使用特定的數(shù)字作為他的秤。這包括選擇特定的比例，使用第二個(gè)基數(shù)來(lái)開發(fā)一個(gè)雙鏈模塊比例，并將比例的數(shù)字應(yīng)用于特定的CSS測(cè)量。他還研究了確定線高和線間距的戰(zhàn)術(shù)。