層次結(jié)構(gòu)是一個網(wǎng)站構(gòu)建的整體框架，但當(dāng)你進入排版步驟，還必須建立相關(guān)的頁面上特定的文本層次。在這一塊，我們將解釋如何才能使文本同頁眉或者網(wǎng)站標(biāo)題相呼應(yīng)，以及如何使用的空白，使冗長的段落在視覺上變得易于消化。

標(biāo)題同間距的關(guān)系

網(wǎng)頁文本通常圍繞一組不同的文本元素。標(biāo)題的范圍從H1-H6，但大多數(shù)網(wǎng)站使用H1-H4最多。無論使用多少種標(biāo)題風(fēng)格，作為一個設(shè)計師，你的工作是合理的安排它們，明確規(guī)劃頁面層次。

文字之間的空間是很重要的，因為它有助于定義頁面內(nèi)容本身。當(dāng)用戶發(fā)現(xiàn)一個新的標(biāo)題，他們期望能夠馬上識別內(nèi)容是一個獨立的專題，還是現(xiàn)有專題中的一個小部分。大小，顏色和標(biāo)題文本的樣式的正確組合有助于為用戶創(chuàng)造正確的預(yù)期。

文字之間的負空間（一個藝術(shù)上的特殊名詞，指的是一張圖畫或照片中，畫面主體之外的空間部分）顯示頁面內(nèi)容如何相關(guān)。占用大量空間的篇頭通常被認為更占優(yōu)勢，而靠近段落的標(biāo)題則被認為更需要通過文本解釋。段后底部頁邊顯示文本行以及它們在層次結(jié)構(gòu)中屬于之間的關(guān)系。這一切都涉及各具特色的文本之間的視覺上分辨。

標(biāo)題之間的關(guān)系

 

每個標(biāo)題都應(yīng)該反映自己獨特的風(fēng)格，同時也需要同頁面上的其他風(fēng)格互補。華麗或者輝煌的標(biāo)題會非常容易吸引人，但是無論是那種標(biāo)題樣式，留白都非常重要。

Square就采用了一個傳統(tǒng)的啟動界面，包含了大量的圖像和文本塊。標(biāo)題設(shè)計是一個非常有趣的部分，因為標(biāo)題可大可小字體多樣。然而，相比于大小，標(biāo)題同其他文字的關(guān)系更加重要。

注意上面截圖中大標(biāo)題的使用和文本中行距的使用，每一個章節(jié)的標(biāo)題在視覺上都有一種獨特點，但也能自然的組合在一起，形成更大的小標(biāo)題和段落塊。

每個內(nèi)部功能塊使用小得多副標(biāo)題文本。這些內(nèi)部小標(biāo)題在字體大小上同一般的段落文本并無差別，但是它們通過加粗和不同的字體顏色來突出自己。視覺上，這些清晰加粗或者加下劃線的文本非常醒目（只比視覺的焦點弱一點）。

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::3標(biāo)題和段落之間的間距還明確了哪些段落屬于哪個小標(biāo)題。同樣，大標(biāo)題和小標(biāo)題之間也應(yīng)該預(yù)留足夠的空間。其次，負空間同樣會影響視覺設(shè)計和排版層次。

正如Web UI Design Best Practices說明，創(chuàng)建頁面標(biāo)題時，請記住以下幾點：

• 一個視覺層次應(yīng)通過利用空間，大小，顏色，文字樣式等元素來創(chuàng)建，使其變得易讀。哪怕站在從監(jiān)視器3-5英尺遠的地方，應(yīng)該是可見的。你還可以使用5-second Gaussian blur test測試，以檢查的層次結(jié)構(gòu)。
• 保持每個小標(biāo)題靠近它的第一個子段落。
• 用更精辟的標(biāo)題更快速，清晰地傳達思想。

長段落

 

就文本留白這個話題，其實就基于如何圍繞常用的段落設(shè)計的問題。牢固，可靠，幾乎無處不在，段落是每一個網(wǎng)站的內(nèi)容戰(zhàn)略的支柱。

但是，內(nèi)容如何置入是取決于內(nèi)容的風(fēng)格而言的。舉個例子，一個在線的新聞雜志會比一個小的園藝博客使用更多的不同種類的段落。段落的內(nèi)容量，內(nèi)容長度和詳細程度在進行排版設(shè)計時都需要被考慮。

試著用足夠大的文字設(shè)計，使文字哪怕跟屏幕相距3英尺遠也是可讀易讀的。文字大小是同空白空間是非常相似的，通常大的比小的好。但是，在實踐中仍然需要適度和因地制宜。

如果文本尺寸過大，那么它會是占用更多的屏幕空間，需要更多的卷軸。但是，如果它太小也可能是不可讀的，當(dāng)游覽者的目光從一行跳躍到另一行的時候，他們會覺得很難找到一種垂直的閱讀節(jié)奏。

兩個要牢記的重要事情是段落邊距和行高（每行之間的空間）。文本在段落的大小決定了這兩個值，因為空白取決于大小。

行使設(shè)計權(quán)利的網(wǎng)絡(luò)博客平臺就是一種處理媒介，其中的文字是清晰的，可讀的并且相互之間有足夠的空間距離。正如博客中的段落設(shè)計向我們展示的，行高必須足夠大，這樣連接的下一行才不會讓人覺得過剩。

?根據(jù)Web Design Trends 2016 ebook推薦，這里有一些簡單上手的規(guī)則可以遵循：

• 避免使該行高度大于文本的常規(guī)行高度
• 使用em font unit字體單位非常適合在所有瀏覽器建立統(tǒng)一字體大小
• 行高度經(jīng)常是比字體大一點點
• 嘗試用1EM的字體大小和1.5em-1.75em的行高組合

處理段落間距可能會非常棘手，但它是一個非常重要的課題，特別是對文字為主的網(wǎng)站來說。底部段落邊距，應(yīng)該比文本的常規(guī)行大得多。底部段邊距應(yīng)該足夠大，這樣就可以直觀地確定一個段落已經(jīng)結(jié)束。

一旦文字的大小被確定，找出合適的行高和間距就比較容易了，搭配組合就能發(fā)揮更大的價值。這樣做的目的在于闡釋清楚和搭建結(jié)構(gòu)，每一個新的段落都應(yīng)該是顯而易見的，沒有任何疑問的。達到這種效果的關(guān)鍵在于對每個文本塊之前比例空間的把握。

正如前面提到的，如果空的太多往往比空的不夠來的安全。盡可能的避免使用過多的空間，或者你也可以盡量使內(nèi)容密度變得小一點。保持頁面中有足夠的內(nèi)容，并且保證所有的內(nèi)容都是有趣的，不在多在于精，使其具有一種壓倒性。

概括

 

文字本身的內(nèi)容如果不合適，會同時對整體組合和小的元素產(chǎn)生負面影響。所以文字排版時，內(nèi)容為王。

頁面中的段落邊距可能需要比在側(cè)邊欄中的段落更大。標(biāo)題鏈接需要設(shè)置的看起來微胖線條流暢，但在頁腳的鏈接就需要減少填充，盡量整潔。但是記住，排版設(shè)計本身并沒有什么固定的規(guī)定，只有實踐才是最好的方法。

同樣要記住的是，排版必須跟著自身的風(fēng)格結(jié)構(gòu)（例如網(wǎng)頁結(jié)構(gòu)）來設(shè)計，大量的實踐將是提高你的眼界和經(jīng)驗的好方式，它可以使你切實了解如何在特定的web空間中進行設(shè)置排版，做出最合適的設(shè)計。

當(dāng)涉及到空間設(shè)計，請記住，空間首先是一個設(shè)計工具，其次才是一種美學(xué)素養(yǎng)?？臻g創(chuàng)造層次關(guān)系，定義層次結(jié)構(gòu)，并強調(diào)內(nèi)容。

當(dāng)前名稱：最佳網(wǎng)頁設(shè)計中的簡約主義和字體排版
本文網(wǎng)址：http://jinyejixie.com/news/43508.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、品牌網(wǎng)站制作、手機網(wǎng)站建設(shè)、定制開發(fā)、云服務(wù)器、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)