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

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

Jul 17, 2020 pm 12:06 PM
原則

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

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

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

文字排版的四大原則

#原則一:親密性

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

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

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

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

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

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

原則二:對齊

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

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

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

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

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

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

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

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

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

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

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

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

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

原則三:重複

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

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

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

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

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

原則四:對比

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

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

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

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

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

tips:

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

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

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

什麼是使用效果?您如何使用它執行副作用? 什麼是使用效果?您如何使用它執行副作用? Mar 19, 2025 pm 03:58 PM

本文討論了React中的使用效應,這是一種用於管理副作用的鉤子,例如數據獲取和功能組件中的DOM操縱。它解釋了用法,常見的副作用和清理,以防止記憶洩漏等問題。

反應和解算法如何起作用? 反應和解算法如何起作用? Mar 18, 2025 pm 01:58 PM

本文解釋了React的對帳算法,該算法通過比較虛擬DOM樹有效地更新DOM。它討論了性能優勢,優化技術以及對用戶體驗的影響。

JavaScript中的高階功能是什麼?如何使用它們來編寫更簡潔和可重複使用的代碼? JavaScript中的高階功能是什麼?如何使用它們來編寫更簡潔和可重複使用的代碼? Mar 18, 2025 pm 01:44 PM

JavaScript中的高階功能通過抽象,常見模式和優化技術增強代碼簡潔性,可重複性,模塊化和性能。

咖哩如何在JavaScript中起作用,其好處是什麼? 咖哩如何在JavaScript中起作用,其好處是什麼? Mar 18, 2025 pm 01:45 PM

本文討論了JavaScript中的咖哩,這是一種將多重題材函數轉換為單詞彙函數序列的技術。它探討了咖哩的實施,諸如部分應用和實際用途之類的好處,增強代碼閱讀

什麼是Usecontext?您如何使用它在組件之間共享狀態? 什麼是Usecontext?您如何使用它在組件之間共享狀態? Mar 19, 2025 pm 03:59 PM

本文解釋了React中的UseContext,該文章通過避免道具鑽探簡化了狀態管理。它討論了通過減少的重新租賃者進行集中國家和績效改善之類的好處。

如何使用Connect()將React組件連接到Redux Store? 如何使用Connect()將React組件連接到Redux Store? Mar 21, 2025 pm 06:23 PM

文章討論了使用Connect()將React組件連接到Redux Store,解釋了MapStateToprops,MapDispatchToprops和性能影響。

您如何防止事件處理程序中的默認行為? 您如何防止事件處理程序中的默認行為? Mar 19, 2025 pm 04:10 PM

文章討論了使用DestrestDefault()方法在事件處理程序中預防默認行為,其好處(例如增強的用戶體驗)以及諸如可訪問性問題之類的潛在問題。

受控和不受控制的組件的優點和缺點是什麼? 受控和不受控制的組件的優點和缺點是什麼? Mar 19, 2025 pm 04:16 PM

本文討論了React中受控和不受控制的組件的優勢和缺點,重點是可預測性,性能和用例等方面。它建議在選擇之間選擇因素。

See all articles