今天我們講版式中如何運(yùn)用對(duì)比制造秩序
▽
首先如何理解秩序，我們用點(diǎn)的示例放置，當(dāng)展現(xiàn)在畫面中出現(xiàn)無(wú)序的形態(tài)時(shí)，會(huì)顯得沒有規(guī)律性，而以螺旋狀的方式放置時(shí)就明顯感受到了畫面的舒暢和秩序感。
兩者同樣以圓為形態(tài)，秩序感的形成卻截然相反。
秩序感的體現(xiàn)就像建筑和攝影中對(duì)于畫面布局的形態(tài)與物體之間的關(guān)聯(lián)起到微妙的動(dòng)態(tài)變化。
在整個(gè)呈現(xiàn)過(guò)程中，我們就需要運(yùn)用秩序里的大小對(duì)比、空間對(duì)比、粗細(xì)對(duì)比和顏色對(duì)比的關(guān)系。
我們用一個(gè)小案例來(lái)詮釋對(duì)比的作用
1.大小對(duì)比
首先運(yùn)用大小對(duì)比，這是正常文案放置時(shí)的排版結(jié)構(gòu)，文字的大小比例都是相等的。
我們將文字的主次進(jìn)行了拆分、強(qiáng)化了大小關(guān)系，這時(shí)文字的比例從原來(lái)的大小相等到互相有了不同變化。
強(qiáng)化了對(duì)比后，我們看下效果，能明顯感受到對(duì)比后的閱讀邏輯性了有了一定提升。
2.空間對(duì)比
將主題中的文字放大并改變字體后弱化顯示，再將原有內(nèi)容放置到前面，在四周增加一些裝飾信息作為點(diǎn)綴。
通過(guò)對(duì)比后的效果，可以看出主體內(nèi)容得到了一定的空間層次，整體也顯得豐滿一些。
3.粗細(xì)對(duì)比
通過(guò)篩選出優(yōu)先重要信息，將內(nèi)容作出粗細(xì)之間的明顯區(qū)分，這樣的方式可以幫助用戶在閱讀畫面時(shí)有更好的著重點(diǎn)，也有了明顯的閱讀順序。
4.顏色對(duì)比
改變主題顏色或者一些需要強(qiáng)化記憶的文字，能讓整體的版式即顯得完整，又多了一些閱讀體驗(yàn)感。
我們剛才通過(guò)了多種對(duì)比，可以看出秩序性在整個(gè)版式中的重要，規(guī)律的變化也從來(lái)都不是毫無(wú)邏輯的呈現(xiàn)。
示范案例
為了讓大家更容易理解和運(yùn)用起來(lái)，我們?cè)儆靡粋€(gè)案例來(lái)展現(xiàn)秩序性在版式中的使用方法。
首先填充紅色為背景色，將主標(biāo)題文字放大，副標(biāo)題縮小。
改變字體和顏色，利用英文拉開字間距放到主標(biāo)題上形成了對(duì)比和顏色之間的關(guān)系。
再?gòu)?fù)制主標(biāo)題文字放大移動(dòng)到背景上，改變字體顏色形成為背景之上的層級(jí)
通過(guò)元素、圖形、背景肌理、素材等去強(qiáng)化與文字版式之間的空間層級(jí)關(guān)系。
這樣一來(lái)，不僅文字信息有了非常清晰的邏輯表達(dá)，畫面上也得到了視覺呈現(xiàn)的豐滿和秩序性的動(dòng)態(tài)規(guī)律。
原文地址：修先森撩設(shè)計(jì)
作者：修先森
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》不會(huì)排版的來(lái)看看，如何運(yùn)用對(duì)比制造秩序
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)