制作網(wǎng)站網(wǎng)頁設(shè)計(jì)最佳實(shí)踐:極簡主義排版

2022-06-13    分類: 網(wǎng)站建設(shè)


制作網(wǎng)站網(wǎng)頁設(shè)計(jì)好實(shí)踐:極簡主義排版

在談?wù)撛O(shè)計(jì)時(shí),我們需要從設(shè)計(jì)師的角度考慮文本。文本必須清晰可讀,同時(shí)適合網(wǎng)站的風(fēng)格。但它也必須與內(nèi)容的層次結(jié)構(gòu)相關(guān)。

構(gòu)建層次結(jié)構(gòu)是網(wǎng)站組成的“大局”。但是當(dāng)您轉(zhuǎn)向排版時(shí),您還必須創(chuàng)建與頁面上特定文本相關(guān)的層次結(jié)構(gòu)。在這篇文章中,我們將解釋如何使用標(biāo)題創(chuàng)建關(guān)系,以及如何使用空格來使冗長的段落可視化。制作網(wǎng)站網(wǎng)頁實(shí)踐:極簡主義排版。


標(biāo)題和間距

Web內(nèi)容通常只關(guān)注幾個(gè)不同的文本元素。標(biāo)題范圍從H1-H6,但大多數(shù)網(wǎng)站最多只使用H1-H4。無論使用多少標(biāo)題樣式,作為一個(gè)設(shè)計(jì)師,他們的工作,以使層次結(jié)構(gòu)清晰建立。

文本之間的空格很重要,因?yàn)樗兄诙x頁面內(nèi)容本身。當(dāng)用戶找到新標(biāo)題時(shí),他們希望能夠識(shí)別內(nèi)容是否切換到全新主題,或者是否在現(xiàn)有主題內(nèi)。標(biāo)題文本的大小,顏色和樣式的正確組合有助于為用戶創(chuàng)造正確的期望。

文本之間的空白表示頁面內(nèi)容如何相關(guān)。具有大量空間的標(biāo)題被視為更顯著,而靠近段落的標(biāo)題被視為通過上下文相關(guān)。段落后的底部邊距顯示文本行與它們?cè)趯哟谓Y(jié)構(gòu)中所處的位置之間的關(guān)系。這一切都涉及到制作內(nèi)容的層次結(jié)構(gòu),以在視覺上區(qū)分頁面上的文本。才藝多,專業(yè)網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、logo設(shè)計(jì)、品牌設(shè)計(jì)、印刷等產(chǎn)品服務(wù),新上線企業(yè)VI設(shè)計(jì)套餐和網(wǎng)站營銷推廣系統(tǒng)(強(qiáng)),歡迎新老顧客前來咨詢!

標(biāo)題關(guān)系


每個(gè)標(biāo)題應(yīng)該反映它自己獨(dú)特的風(fēng)格,這也補(bǔ)充了頁面上的其他樣式的文字。制作精采標(biāo)題通過練習(xí)變得更容易,但是空格值通常應(yīng)該相同,不管標(biāo)題樣式。

Square使用傳統(tǒng)的初始首頁布局,包含大量圖像和文字塊。標(biāo)題是設(shè)計(jì)的一個(gè)特別有趣的部分,因?yàn)樗鼈兊姆秶鷱某蟮綗o窮小。然而,大小并不像頁面上與其他文本的關(guān)系那么重要。

請(qǐng)注意,在上面的屏幕截圖中,大標(biāo)題如何在文本上方和下方使用額外的間距。這些部分標(biāo)題在視覺上傳達(dá)了“自己”的感覺,但也自然地組合成更大的副標(biāo)題和段落的塊。

每個(gè)內(nèi)部塊使用小得多的子標(biāo)題文本。這些內(nèi)部頭部與段落文本大小相同,但它們以粗體文本和較深的顏色突出顯示。視覺上,這些粗體的文本行仍然是標(biāo)題(只是在視覺圖騰柱上較低)是非常清楚的。

標(biāo)題和段落之間的空間量還定義哪些段落屬于哪些標(biāo)題。同樣,你應(yīng)該在較小的頭部和較大的頭部之間插入大量的空間。再次,負(fù)空間在視覺設(shè)計(jì)和排版中定義層次。

文本清晰可讀

通過使用空間,大小,顏色和/或文本樣式,可以看到視覺層次結(jié)構(gòu)。即使站在距離顯示器3-5英尺的位置,這應(yīng)該是可見的。您還可以使用5秒高斯模糊測(cè)試來檢查層次結(jié)構(gòu)。

嘗試設(shè)計(jì)足夠大的文本,使其清晰可讀的距離屏幕3英尺。文本大小非常類似于白色空間,通常更好地設(shè)計(jì)大于較小。然而,運(yùn)動(dòng)溫和和克制。如果文字大小太大,則會(huì)占用更多的屏幕空間,需要更多的滾動(dòng)。但如果它太小,它可能是不可讀的,或訪問者將遇到困難與垂直節(jié)奏,因?yàn)樗麄円苿?dòng)他們的眼睛從線到線。

要記住的兩個(gè)重要的事情是段落邊距和行高(每行之間的空格)。段落中的文本大小決定了這兩個(gè)值,因?yàn)榭瞻讌^(qū)域取決于大小。

文章標(biāo)題:制作網(wǎng)站網(wǎng)頁設(shè)計(jì)最佳實(shí)踐:極簡主義排版
當(dāng)前URL:http://www.muchs.cn/news39/166689.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站排名、定制網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

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

網(wǎng)站優(yōu)化排名