想想看你是怎樣在整個的網(wǎng)頁設計中使用的文本文字的——標題，正文，導航元素等等。

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

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

當前名稱：網(wǎng)站頁面布局的差異,可能會毀掉你的心血
分享路徑：http://jinyejixie.com/news/106542.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、App設計、移動網(wǎng)站建設、網(wǎng)站內鏈、微信公眾號、手機網(wǎng)站建設

廣告

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