想想看你是怎樣在整個(gè)的網(wǎng)頁(yè)設(shè)計(jì)中使用的文本文字的——標(biāo)題，正文，導(dǎo)航元素等等。

但是，如何創(chuàng)建合適的層次結(jié)構(gòu)，以便可以讓每個(gè)文本元素順利的和下一個(gè)對(duì)接？今天，我們將逐步介紹如何構(gòu)建一個(gè)可用于幾乎任何設(shè)計(jì)項(xiàng)目的排版層次體系（我們會(huì)將提示與排版優(yōu)秀的例子組合說(shuō)明，以幫助你更直觀的看到效果以及收集一些靈感）。

1.制定空間的使用規(guī)則
與字體大小一樣重要的是如何利用它們之間的空間來(lái)提升整體網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)效果。確定空間的因素包括間距（或行高），縮進(jìn)（或不）和對(duì)齊等。
考慮到縮放文本所使用的刻度的間距比例。畫布的尺寸在這里也很重要。尺寸更大的畫布通過(guò)嚴(yán)格的間距可以比小尺寸的更具可讀性。
就像字體大小一樣，對(duì)于整個(gè)設(shè)計(jì)框架應(yīng)該預(yù)先設(shè)置間距規(guī)則。一致，干凈的間距雖然對(duì)于整體的網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)是一個(gè)小東西，但是對(duì)整體的設(shè)計(jì)來(lái)說(shuō)卻起著至關(guān)重要的作用。
2.設(shè)定粗體和斜體的應(yīng)用規(guī)則
盡管粗體和斜體不是不同類型的元素和大小，但它們?cè)谑褂蒙虾苤匾ㄏ胂笠幌?，如果每一個(gè)字都是粗體的話，設(shè)計(jì)會(huì)是什么樣子）。
所以，針對(duì)粗體和斜體的應(yīng)用規(guī)范指南就顯得尤為重要了。不是看尺寸或空間，而是要更多的考慮語(yǔ)境。 使用規(guī)范可以限定只用特殊單詞或短語(yǔ)（或特定的單詞或短語(yǔ)）才能做這種處理。濫用粗體和斜體是一個(gè)常見(jiàn)的錯(cuò)誤，所以，當(dāng)你在使用它的時(shí)候?qū)φw的網(wǎng)頁(yè)設(shè)計(jì)存在疑問(wèn)時(shí)，不要使用它。
3.創(chuàng)建一個(gè)“z”型文本區(qū)
通過(guò)科學(xué)的研究我們發(fā)現(xiàn)，常見(jiàn)的閱讀模式類似z的形狀。無(wú)論你是從左到右還是從右到左（翻轉(zhuǎn)z）的語(yǔ)言設(shè)計(jì)，用戶將從一個(gè)角落讀取到最后一行，然后再重新回到起始角落和重復(fù)圖案中的線條。
所以在屏幕上放置文本元素時(shí)，你可以使用這種習(xí)慣的閱讀方式?！皕”型設(shè)計(jì)也是為什么大多數(shù)品牌將標(biāo)志放在左上角的原因之一——這是眼睛閱讀或?yàn)g覽時(shí)的第一視覺(jué)點(diǎn)。
4.從舒適的文本主體開(kāi)始
在網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)始階段，你可能在標(biāo)題上就想要一個(gè)很庫(kù)的效果，但事實(shí)上，開(kāi)始的地方實(shí)際上應(yīng)該在中間的主體內(nèi)容位置。你首先要為主體的內(nèi)容文本選擇一個(gè)舒適的字體，大小和間距。
這么做是有原因的——最主要的其實(shí)是因?yàn)檫@是你設(shè)計(jì)中主要的文本內(nèi)容。無(wú)論你是建立網(wǎng)站還是制作宣傳冊(cè)，這個(gè)概念是一樣的。根據(jù)baymard研究所的數(shù)據(jù)，主體內(nèi)容理想的可讀性規(guī)則是在每行（或多列）之間介于50到60個(gè)字符之間。該指南還可以幫助你設(shè)置一個(gè)可讀取的文本比例，并記錄不同類型的字體，以幫助你確認(rèn)最好的搭配效果。
5.設(shè)置比例
一旦你知道主體內(nèi)容的設(shè)計(jì)外觀以后，你可以在設(shè)計(jì)中為所有其他的文本元素設(shè)置一個(gè)比例。忽略某些次要的文本塊很容易，你只需要列出項(xiàng)目中各種文字內(nèi)容不同的作用以及用途就行。
· 主體內(nèi)容；
· 大標(biāo)題；
· 小標(biāo)題；
· 說(shuō)明；
· 引用；
· 導(dǎo)航元素；
· 法律文本或免責(zé)聲明。
現(xiàn)在，創(chuàng)建一個(gè)適當(dāng)?shù)目s放比例，你可以指定每個(gè)元素的字體，大小范圍和使用情況（這也將在后續(xù)的css樣式中構(gòu)建你用于工作文檔的網(wǎng)站或樣式文件）。有多種方法可以規(guī)范你的尺度比例，但是個(gè)人覺(jué)得百分比可以是一個(gè)很好的起點(diǎn)。你還可以根據(jù)基準(zhǔn)網(wǎng)格或通過(guò)視覺(jué)的舒適程度來(lái)建立比例。
以下可以是一個(gè)簡(jiǎn)單比例應(yīng)用開(kāi)始：
· 大標(biāo)題延用主體大小的220%；
· 小標(biāo)題延用主體大小的150%；
· 導(dǎo)航元素延用主體大小的80%；
· 底部/法律文本信息延用主體大小的80%。
6.考慮大至最小值，以及從上到下順序
這個(gè)規(guī)則就非常簡(jiǎn)單了：大和最重要的文本應(yīng)該在頂部，當(dāng)你向下閱讀頁(yè)面或屏幕的時(shí)候，其他的文本內(nèi)容應(yīng)該逐級(jí)減小比例。
不過(guò)，這并不是說(shuō)你不能隨著時(shí)間的推移和一些設(shè)計(jì)的精巧度來(lái)破壞這個(gè)規(guī)則，但它始終是設(shè)計(jì)文本層次結(jié)構(gòu)的起點(diǎn)（誰(shuí)真的要滾動(dòng)到標(biāo)題的網(wǎng)頁(yè)的末尾，然后回到頂部開(kāi)始閱讀呢？）。
7.考慮視覺(jué)重量
當(dāng)在屏幕上瀏覽涉及到多大的文本元素時(shí)，尺寸并不是唯一的考慮因素。視覺(jué)重量同樣也很重要，這可能會(huì)影響你創(chuàng)建排版尺度的方式。
8.創(chuàng)建強(qiáng)調(diào)
有一些單詞或語(yǔ)句相較于頁(yè)面中其他的你會(huì)想要讓其更突出一點(diǎn)。通過(guò)在文字中添加符合強(qiáng)調(diào)元素可以使它脫穎而出，而不必調(diào)整實(shí)際的大小或字體。
常見(jiàn)的主調(diào)包括：
· 顏色；
· 下劃線；
· 突出；
· 在文本中添加按鈕或形狀；
在任何類型的層次結(jié)構(gòu)中添加強(qiáng)調(diào)元素的好處在于，它是一個(gè)立即可被關(guān)注的焦點(diǎn)。這些元素應(yīng)盡可能少地用于設(shè)計(jì)中以強(qiáng)調(diào)那些大影響和關(guān)鍵的要素。
9.使用“眼睛測(cè)試”
最后，每個(gè)規(guī)則都有一個(gè)例外（或兩個(gè)）。這就是為什么我們需要“眼睛測(cè)試”，只需看一下屏幕上的比例。文字的外觀和感覺(jué)如何？是否有邏輯性？是否能夠被用戶容易的閱讀？
如果你以任何的方式都感覺(jué)不到網(wǎng)站設(shè)計(jì)上的主體內(nèi)容以及強(qiáng)調(diào)的信息時(shí)，請(qǐng)考慮做適當(dāng)?shù)恼{(diào)整。根據(jù)你使用的字體和設(shè)計(jì)中的其他元素（從圖片到顏色到對(duì)比度），尺度也將需要你重新調(diào)整一下。這不僅僅是一個(gè)起點(diǎn)，當(dāng)你不確定你想做什么。
你也可以請(qǐng)不同的人對(duì)你的設(shè)計(jì)進(jìn)行查看。創(chuàng)建一個(gè)或兩個(gè)具有不同層次結(jié)構(gòu)的版本，以查看哪個(gè)版本獲得好響應(yīng)。網(wǎng)頁(yè)設(shè)計(jì)是一種視覺(jué)藝術(shù)，使用“眼睛測(cè)試”是一個(gè)不精確但相當(dāng)可靠的選項(xiàng)。
總結(jié)
一旦為網(wǎng)站建設(shè)項(xiàng)目設(shè)置層次結(jié)構(gòu)以后，你可以做的最好的事情就是記錄它。在為接下來(lái)整體項(xiàng)目的推進(jìn)建立標(biāo)準(zhǔn)規(guī)范或創(chuàng)建樣式文件。
對(duì)于較大規(guī)模的設(shè)計(jì)或品牌規(guī)劃，請(qǐng)將尺寸和規(guī)格書寫在樣式指南中。創(chuàng)建層次結(jié)構(gòu)需要在后端進(jìn)行一些工作，隨著后續(xù)項(xiàng)目的推進(jìn)，有更規(guī)范的指南可以使項(xiàng)目完成更快，更簡(jiǎn)單，更不用說(shuō)更一致。

分享標(biāo)題：網(wǎng)站頁(yè)面布局的差異,可能會(huì)毀掉你的心血
本文網(wǎng)址：http://www.rwnh.cn/news42/106542.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、小程序開(kāi)發(fā)、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

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