層次結(jié)構(gòu)是一個(gè)網(wǎng)站構(gòu)建的整體框架，但當(dāng)你進(jìn)入排版步驟，還必須建立相關(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)格，作為一個(gè)設(shè)計(jì)師，你的工作是合理的安排它們，明確規(guī)劃頁面層次。

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

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

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

 

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

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

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

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

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

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

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

長段落

 

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

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

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

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

兩個(gè)要牢記的重要事情是段落邊距和行高（每行之間的空間）。文本在段落的大小決定了這兩個(gè)值，因?yàn)榭瞻兹Q于大小。

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

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

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

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

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

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

概括

 

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

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

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

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

網(wǎng)站標(biāo)題：最佳網(wǎng)頁設(shè)計(jì)中的簡約主義和字體排版
鏈接分享：http://www.rwnh.cn/news8/43508.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、Google、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、App開發(fā)

廣告

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