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

▽

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

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

秩序感的體現(xiàn)就像建筑和攝影中對于畫面布局的形態(tài)與物體之間的關(guān)聯(lián)起到微妙的動態(tài)變化。

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

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

1.大小對比

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

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

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

2.空間對比

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

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

3.粗細對比

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

4.顏色對比

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

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

示范案例

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

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

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

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

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

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

原文地址：修先森撩設(shè)計

作者：修先森

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》不會排版的來看看，如何運用對比制造秩序

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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