網(wǎng)站頁面布局的差異,可能會毀掉你的心血

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

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

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

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

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

廣告

聲明：本網(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)