今天我們講版式中如何運用對比制造秩序

▽

首先如何理解秩序，我們用點的示例放置，當展現在畫面中出現無序的形態時，會顯得沒有規律性，而以螺旋狀的方式放置時就明顯感受到了畫面的舒暢和秩序感。

兩者同樣以圓為形態，秩序感的形成卻截然相反。

秩序感的體現就像建筑和攝影中對于畫面布局的形態與物體之間的關聯起到微妙的動態變化。

在整個呈現過程中，我們就需要運用秩序里的大小對比、空間對比、粗細對比和顏色對比的關系。

我們用一個小案例來詮釋對比的作用

1.大小對比

首先運用大小對比，這是正常文案放置時的排版結構，文字的大小比例都是相等的。

我們將文字的主次進行了拆分、強化了大小關系，這時文字的比例從原來的大小相等到互相有了不同變化。

強化了對比后，我們看下效果，能明顯感受到對比后的閱讀邏輯性了有了一定提升。

2.空間對比

將主題中的文字放大并改變字體后弱化顯示，再將原有內容放置到前面，在四周增加一些裝飾信息作為點綴。

通過對比后的效果，可以看出主體內容得到了一定的空間層次，整體也顯得豐滿一些。

3.粗細對比

通過篩選出優先重要信息，將內容作出粗細之間的明顯區分，這樣的方式可以幫助用戶在閱讀畫面時有更好的著重點，也有了明顯的閱讀順序。

4.顏色對比

改變主題顏色或者一些需要強化記憶的文字，能讓整體的版式即顯得完整，又多了一些閱讀體驗感。

我們剛才通過了多種對比，可以看出秩序性在整個版式中的重要，規律的變化也從來都不是毫無邏輯的呈現。

示范案例

為了讓大家更容易理解和運用起來，我們再用一個案例來展現秩序性在版式中的使用方法。

首先填充紅色為背景色，將主標題文字放大，副標題縮小。

改變字體和顏色，利用英文拉開字間距放到主標題上形成了對比和顏色之間的關系。

再復制主標題文字放大移動到背景上，改變字體顏色形成為背景之上的層級

通過元素、圖形、背景肌理、素材等去強化與文字版式之間的空間層級關系。

這樣一來，不僅文字信息有了非常清晰的邏輯表達，畫面上也得到了視覺呈現的豐滿和秩序性的動態規律。

原文地址：修先森撩設計

作者：修先森

轉載請注明：學UI網》不會排版的來看看，如何運用對比制造秩序

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務