首頁  >  文章  >  web前端  >  文字排版的四大原則是什麼?

文字排版的四大原則是什麼?

青灯夜游
青灯夜游原創
2020-07-17 12:06:0021550瀏覽

四大原則:1、親密原則;如果元素之間是有關係的,那麼他們應該在視覺上也相關。 2、對齊原則;專案中的每一個元素都要確保和其它元素具有某種對齊關係。 3.重複原則;設計元素要學會重複使用,讓設計更有統一性與一致性,強化使用者的使用印象。 3、對比原則。

文字排版的四大原則是什麼?

文字排版是一個設計師的基本功,它決定了整個頁面的風格傾向,也是最能體現設計細節的地方。

文字排版的四大原則

#原則一:親密性

#如果元素之間是有關係的,那麼他們應該在視覺上也相關。

如果內容之間是相關的,或者理解的意思上是存在關聯的,那麼在排版的時候就應該讓他們彼此靠近。就像我們參加聚會總會找自己比較熟悉的人一起一樣,相關性強的要在視覺上距離較近。

文字排版的四大原則是什麼?

▲你會很容易發現紅框中的元素是彼此相關的,因為他們靠得很近。你不會認為紅框中的內容是跟左邊的大圖相關。

文字排版的四大原則是什麼?

▲我們可以輕鬆分辨圖片底下的文字和圖片是相關的,只看圖片就可以猜想到它們在表達相同的信息,而且很輕鬆能夠知道,標題和它旁邊的內容文字是對應的。

原則二:對齊

文字排版的四大原則是什麼?

#▲對齊分為:左對齊、居中對齊、右對齊。

a、對於大段落的文字,一個頁面不要出現多種對齊方式,那樣會顯得頁面很亂,沒有規律可循。最好只使用一種對齊方式(全部左對齊、全部右對齊、或全部居中對齊)。但通常情況下不會使用居中對齊,除非你對版式設計已經非常熟練。而對於只有一行的文字訊息,排版可以靈活一些,尋找一個參考進行對齊。

文字排版的四大原則是什麼?

▲左對齊的排版,在頁面中顯得非常規整、簡潔,視覺上也很舒服。而對於只有一行顯示的大標題,可以根據版面進行彈性調整,但也不是沒有章法,和頁面中的元素依然保持了對齊的關係。

文字排版的四大原則是什麼?

▲如果一定要用居中對齊,那麼將整段的文字看作一個整體(如圖中紅框),整體再進行左對齊或右對齊。這樣依然可以保持畫面的統一性和協調性。

b、專案中的每一個元素都要確保和其它元素具有某種對齊關係。就像人無法脫離社會而生活,頁面中的元素也不能脫離頁面而存在,每個元素和其它元素之間都要存在某種對齊關係。

文字排版的四大原則是什麼?

▲看似隨意擺放的文字,也與其他元素有一定的對齊關係。

要注意的是:很多設計師剛開始設計的時候,為了突出主題,正文使用左對齊,而對應的標題往往使用居中對齊,這裡是錯誤的,和內文直接相關的標題一定要避免與內文採用不同的對齊方式!

文字排版的四大原則是什麼?

▲知道了規則之後,也可以學著打破規則(如紅框),如果頁面中的對齊顯得太刻意,可以適當打破這種呆板的感覺。即使是打破常規,也應有理有據,靈活運用。

原則三:重複

設計元素要學會重複使用,讓設計更有統一性與一致性,強化使用者的使用印象,同時也有利於設計師提高效率。

可以重複使用的元素有很多:字體、顏色、留白、符號、版式、線條...,重複使用的元素不一定完全一致,但一定存在某種聯繫,這裡跟模組化設計思維有異曲同工之處。

文字排版的四大原則是什麼?

(試著找右圖中有哪些元素是重複使用的)

▲但要注意,一個元素不要太多地進行重複,例如你一個頁面全部用一個顏色的文字或色塊,會很難找到重點在哪裡,如果只用一種主色,頁面也未免顯得太過單調無聊。要學會變換著使用這項原則。

原則四:對比

對比會讓頁面更具吸引力,避免元素太過相似,同時拉開視覺層級,製造焦點。常見對比:大小對比、顏色對比、疏密對比、文字和留白對比、虛實對比,粗細對比等。

a、對比的重點是一定要大膽強烈!千萬不要畏縮縮!不要拿28px的文字和29px的文字做對比,大小太過相似。文字要增加對比最好以4的倍數遞增,一般增加4的2倍,也就是8px為佳。現在很多APP使用的是流行的大標題,可以適當地大一些,增加視覺對比。

文字排版的四大原則是什麼?

▲不完全相同的元素就要有對比效果,既然要對比就要讓它們截然不同,做到一目了然降低用戶篩選資訊的成本。

b、不要害怕讓一些項很小,這樣不僅便於與其他項形成對比,也能有更大的留白空間突出重點內容。如果讀者沒興趣,你字放多大他都不會去看,如果他有興趣,你字很小也會去閱讀,設計中常常會遇到客戶讓我們把字體再大點,logo再大點,就怕別人看不到,搞得很多設計師苦惱又沒辦法,以後就直接拿這項原則砸過去,有理有據。 (不過實在不行該慫還得慫,畢竟飯碗比較重要)

tips:

除非是標題或裝飾文字,否則不要使用特殊字體,要確保內容的清晰易讀。特別是大段的文字要盡量使用基礎的字體,例如黑體或宋體,這樣閱讀起來才不會費勁。

更多相關知識,請造訪:PHP中文網

以上是文字排版的四大原則是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn