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