今天我們講版式中如何運(yùn)用對比制造秩序

▽

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

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

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

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

我們用一個(gè)小案例來詮釋對比的作用

1.大小對比

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

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

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

2.空間對比

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

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

3.粗細(xì)對比

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

4.顏色對比

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

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

示范案例

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

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

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

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

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

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

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

作者：修先森

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

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

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

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