在談到設(shè)計我們需要考慮文本從一個設(shè)計師的角度來看。文本必須清晰可讀而擬合好網(wǎng)站的風(fēng)格。但它也必須與一個層次的內(nèi)容。
標(biāo)題和間距
網(wǎng)頁設(shè)計的**實踐:極簡主義和排版
建立層次結(jié)構(gòu)是一個網(wǎng)站的“大局”的成分。但是當(dāng)你進入排版,你還必須創(chuàng)建層次結(jié)構(gòu)相關(guān)的特定頁面上的文本。在這篇文章中,我們將創(chuàng)建關(guān)系你的標(biāo)題和解釋如何使用空白使漫長的段落視覺易于消化。
Web內(nèi)容通常集中在幾個不同的文本元素。標(biāo)題從H1-H6,但大多數(shù)網(wǎng)站只使用H1-H4最多。不管有多少使用標(biāo)題樣式,這是你的工作作為一個設(shè)計師工藝顯然是他們這樣的層次結(jié)構(gòu)。
文本之間的空間很重要,因為它有助于定義頁面內(nèi)容本身。當(dāng)用戶找到一個新的頭,他們希望認識到如果切換到一個全新的主題內(nèi)容或如果它是在現(xiàn)有的主題。正確的組合的大小、顏色和風(fēng)格的標(biāo)題文本有助于為用戶創(chuàng)建正確的預(yù)期。
負空間之間的文本顯示頁面內(nèi)容是相關(guān)的。頭和足夠的空間被視為更占主導(dǎo)地位而頭接近段落被視為通過上下文相關(guān)的。底部邊緣后段顯示的文本行之間的關(guān)系,他們屬于這個層次結(jié)構(gòu)。一切回到制作內(nèi)容的層次結(jié)構(gòu)在視覺上區(qū)分文本在頁面上。
標(biāo)題的關(guān)系
每個標(biāo)題應(yīng)該反映它自己的獨特風(fēng)格,也補充了其他風(fēng)格的文本在頁面上。與實踐制作的頭變得更容易,但空白值通常不管標(biāo)題樣式表現(xiàn)相同。
廣場使用傳統(tǒng)啟動主頁布局與大量的圖像和文本塊。標(biāo)題是一個特別有趣的設(shè)計,因為他們從超大的無限小。然而,大小并不重要一樣關(guān)系到其他頁面上的文本。
注意,在上面的截圖大小標(biāo)題使用額外間距上方和下方的文本。這些小節(jié)標(biāo)題視覺傳達某種意義上的“自己”,自然也一起為更大的內(nèi)存塊的小標(biāo)題和段落。
每個內(nèi)部使用小標(biāo)題文本塊小得多。這些內(nèi)部標(biāo)題段落文本大小一樣,但他們脫穎而出粗體文本&顏色深一點的顏色。視覺,它是清澈的,這些粗體行文本仍然是標(biāo)題(只是低視覺圖騰柱)。
標(biāo)題和段落之間的空間還定義了標(biāo)題段落所屬。類似地,您應(yīng)該插入小標(biāo)題和大標(biāo)題之間的足夠的空間。再次,負空間定義層次結(jié)構(gòu)在視覺設(shè)計和排版。
解釋的免費Web UI設(shè)計**實踐指導(dǎo),記住這些點在制作頁面標(biāo)題:
網(wǎng)頁設(shè)計的**實踐:極簡主義和排版
視覺層次結(jié)構(gòu)應(yīng)該明顯通過使用空間,大小,顏色,和/或文本樣式。這應(yīng)該是可見即使站3 - 5英尺遠監(jiān)視器。您還可以使用5秒高斯模糊測試檢查的層次結(jié)構(gòu)。
保持每個小標(biāo)題接近它的**個孩子。
簡練的頭在靠近傳達思想更快更清楚。
冗長的段落
網(wǎng)頁設(shè)計的**實踐:極簡主義和排版
話題的上下文空白,周圍存在的問題如何設(shè)計常見的段落。公司、可靠和發(fā)現(xiàn)幾乎無處不在,段落是每個網(wǎng)站內(nèi)容策略的支柱。
但是內(nèi)容是如何編寫基于內(nèi)容的樣式不同。例如,一個在線新聞雜志將比一個較小的園藝博客使用不同的段落樣式。的內(nèi)容,內(nèi)容的長度,和水平的細節(jié)所有樣式的段落時發(fā)揮作用。
試圖用足夠大的文本設(shè)計清晰可讀3英尺遠的屏幕。文字大小非常類似于空白,它通常是更好的設(shè)計比小。然而,適度克制。
如果文本大小太大,那么它會占用更多的屏幕空間和需要更多的滾動。但如果太小了可以是不可讀,或游客會經(jīng)歷困難與垂直的節(jié)奏,因為他們把他們的眼睛從相間。
兩個重要的事情要記住段利潤率和行高(每一行之間的空間)。大小的文本段落中規(guī)定這兩個值因為白色空間取決于大小。
媒介是一個在線的博客平臺,段設(shè)計。文本是酥、可讀性和間隔的**。段設(shè)計顯示,行高值必須足夠大以連接到下一行,沒有過度的感覺。
推薦2016年網(wǎng)頁設(shè)計趨勢的電子書,這里有一些很好的經(jīng)驗法則:
網(wǎng)頁設(shè)計的**實踐:極簡主義和排版
. 避免犯行高的比一個典型的行文本。
. 創(chuàng)建統(tǒng)一的em字體單位是**的大小在所有瀏覽器。
. 行高通常應(yīng)略大于字體大小。
. 試的字體大小1 em結(jié)合行高為1.5 - 1.75 em。
. 段落間距可以棘手但這是一個重要的話題,特別是對于文字的網(wǎng)站。段底部邊緣應(yīng)該比一個典型的行文本。底段的利潤率應(yīng)該足夠大,你可以直觀地判斷一段已經(jīng)結(jié)束。
一旦你找到一個網(wǎng)站的文本大小,它變得更容易玩行高值間距和算出利潤。這里的目標(biāo)是清晰和結(jié)構(gòu)。每一個新的段落毫無疑問應(yīng)該是顯而易見的。關(guān)鍵是成比例的空間之間的文本塊。
如前所述,一般安全“太多”空白,而不是不夠。避免使用海量的空間或者你會得到一個非常淺的內(nèi)容密度。保持足夠的頁面上的內(nèi)容很有趣,但與其說這是壓倒性的。
了解更多關(guān)于設(shè)計內(nèi)容在網(wǎng)絡(luò)接口,查看這段如何設(shè)計**的段落。
負空間在字體設(shè)計直接影響到整體構(gòu)成和較小的頁面元素在同一時間。在設(shè)計排版時,上下文是國王。
段落中發(fā)現(xiàn)的頁面可能需要更大的利潤率比段落在側(cè)邊欄中找到。連接頭的流暢與額外的填充,但鏈接頁腳可以用很少的填充看起來整齊。沒有堅實的規(guī)則,只有記住的**實踐。
還記得,排版之前,連同自己的層次結(jié)構(gòu)就像頁面結(jié)構(gòu)。大量的練習(xí)將**的方式來提高你的眼睛快速識別空間值,**適合任何給定的web項目。
與空間設(shè)計時,記住,作為審美質(zhì)量需要后座空間作為設(shè)計工具�？臻g創(chuàng)建關(guān)系,定義層次結(jié)構(gòu),強調(diào)內(nèi)容——時總是牢記這些考慮如何減少視覺干擾。
原文鏈接出處：廣州網(wǎng)頁設(shè)計http://www.ewpv.com，如需轉(zhuǎn)載，請保留源地址，謝謝！
資訊來源：http://www.ewpv.com
|
您當(dāng)前的位置: 首頁 > 行業(yè)資訊
