下面將從 01、版式的組成；02、構(gòu)圖的平衡；03、設(shè)計(jì)的原則三個(gè)方面介紹版式設(shè)計(jì)的創(chuàng)作思路。

一、版式的組成

首先，找出以下示例圖中的版式組成元素，大而全的有幾種？

大體上圖中有以下四個(gè)主要組成元素：主體、文案、點(diǎn)綴元素、背景。

按照電視劇的角色安排，主體相當(dāng)于主角，視覺(jué)焦點(diǎn)自帶主角光環(huán)；文案相當(dāng)于配角，配角的作用是和主角搭戲的，有時(shí)候主角的臺(tái)詞需要從配角的口中說(shuō)出；點(diǎn)綴元素則相當(dāng)于群演，可有可無(wú)，可多可少，根據(jù)具體需要自由發(fā)揮，不過(guò)要注意群演的站位不能擋住 C 位；背景則相當(dāng)于場(chǎng)景道具，和主角的情感和劇情相稱(chēng)即可。

二、構(gòu)圖的平衡

設(shè)計(jì)中，平衡是實(shí)現(xiàn)統(tǒng)一的一條重要途徑。給人一種整體平衡的印象，版式平衡主要有 3 種分類(lèi)，分別是：對(duì)稱(chēng)平衡、非對(duì)稱(chēng)平衡和整體平衡（滿(mǎn)版平衡）。

1. 對(duì)稱(chēng)平衡

對(duì)稱(chēng)平衡是一種靜態(tài)的，可預(yù)見(jiàn)的，講求條理平衡的設(shè)計(jì)。對(duì)稱(chēng)構(gòu)圖相對(duì)比較易于創(chuàng)建，特點(diǎn)是穩(wěn)定，莊嚴(yán)，整齊，安寧，沉靜和古典。參考絕大多數(shù)的建筑都是采用的對(duì)稱(chēng)平衡設(shè)計(jì)。

2. 非對(duì)稱(chēng)平衡

非對(duì)稱(chēng)在不對(duì)等元素之間創(chuàng)設(shè)出新的秩序和平衡，非對(duì)稱(chēng)設(shè)計(jì)由于版式不可預(yù)見(jiàn)，所以空間是變化的。特點(diǎn)是動(dòng)態(tài)的，靈活的和富有活力。非對(duì)稱(chēng)構(gòu)圖比較多，常見(jiàn)的有以下 6 種構(gòu)圖形式：對(duì)角線(xiàn)構(gòu)圖；S 型構(gòu)圖；發(fā)射狀構(gòu)圖；中心構(gòu)圖；二分構(gòu)圖；形狀構(gòu)圖。

①對(duì)角線(xiàn)構(gòu)圖

文案擺放在版面的對(duì)角線(xiàn)方向，一方面避免了司空見(jiàn)慣的居中版面，一方面給中心主體留出了更多的創(chuàng)作空間;

另外中心的圖形也可以是對(duì)角線(xiàn)的設(shè)計(jì)，這樣會(huì)讓整個(gè)構(gòu)圖看起來(lái)比較平衡。

②發(fā)射狀構(gòu)圖

點(diǎn)綴元素圍繞中心的文案或者圖形發(fā)射，這樣的構(gòu)圖會(huì)讓中心的視覺(jué)容易聚焦，視覺(jué)沖擊感會(huì)更強(qiáng)烈。

像電商大促活動(dòng)，淘寶和京東等等會(huì)經(jīng)常用到使用發(fā)射性構(gòu)圖來(lái)營(yíng)造大促活動(dòng)的熱鬧火熱程度。許多電影海報(bào)也會(huì)采用這種構(gòu)圖，讓讀者主視覺(jué)聚焦。

③中心構(gòu)圖

這種構(gòu)圖方式是我們最為常見(jiàn)的構(gòu)圖之一，文案和主題居中頁(yè)面顯示，需要注意的是位于版心的主體要盡可能的出彩，利用設(shè)計(jì)技巧吸引讀者眼光，這樣才能避免平淡乏味。

④S 形構(gòu)圖

文案或者圖形放在線(xiàn)條轉(zhuǎn)折的地方，整體呈一個(gè) S 形。另外線(xiàn)條的起點(diǎn)和終點(diǎn)也同樣是讀者容易關(guān)注的地方，可以放一些重要的信息。這樣的構(gòu)圖靈活，有趣，而且可以引導(dǎo)用戶(hù)沿著 S 形軌跡閱讀信息。

⑤二分構(gòu)圖

文案和主體分開(kāi)，呈左右或者上下的構(gòu)圖形式，注意的是文案要采用對(duì)齊原則，這種構(gòu)圖方式也是比較容易創(chuàng)建的一種。

⑥形狀構(gòu)圖

主體和文案的組合形式可以是圓形，三角形，矩形等形狀構(gòu)圖。注意如果使用三角形構(gòu)圖，最好呈倒金字塔形結(jié)構(gòu)，這樣更符合讀者的閱讀順序，更加輕便引導(dǎo)用戶(hù)進(jìn)入下一個(gè)信息層。

3. 滿(mǎn)版平衡

整體平衡，是指圖片充滿(mǎn)整個(gè)版面，文案布局在上下， 左右，中部的位置，特點(diǎn)是主要以圖像為訴求，視覺(jué)傳達(dá)直觀(guān)而強(qiáng)烈。

滿(mǎn)版型構(gòu)圖，給人大方，舒展的感覺(jué)。注意:在設(shè)計(jì)的過(guò)程中，這種類(lèi)型的文字處理很容易顯得“嘈雜”，因此為了避免擁擠的空間，適當(dāng)刪減些文字。

三、設(shè)計(jì)原則

對(duì)構(gòu)圖形式了解后，我們還需要知道一些基本的設(shè)計(jì)原則，雖然這些原則我們可以在其他地方反復(fù)的看到，但是我在這里還是要再次強(qiáng)調(diào)，因?yàn)樗鼈兛梢詭椭覀冊(cè)诖蚱埔?guī)則之前，必須清楚規(guī)則是什么。另外需要注意一點(diǎn)就是，這幾個(gè)原則并不是獨(dú)立分開(kāi)的，而是可以同時(shí)考慮和結(jié)合。

1. 對(duì)比

缺乏對(duì)比，作品會(huì)變得平淡乏味并且不能有效地傳遞信息。艾美獎(jiǎng)設(shè)計(jì)師、Bind 公司創(chuàng)始人 Chris Do 說(shuō)過(guò) contract is king（對(duì)比至上），運(yùn)用好對(duì)比，可以在頁(yè)面上引導(dǎo)用戶(hù)的視覺(jué)，并且制造焦點(diǎn)。

1. 制造視覺(jué)焦點(diǎn)
2. 對(duì)比的效果要明顯
3. 對(duì)比的方式/大小/粗細(xì)/冷暖等

2. 對(duì)齊

任何元素都不能在版面上隨意安放，每一項(xiàng)都應(yīng)當(dāng)與頁(yè)面上的某個(gè)內(nèi)容存在某種視覺(jué)聯(lián)系。在版面上找到可以對(duì)齊的元素，盡管它們可能距離比較遠(yuǎn)。需要注意的地方就是避免同時(shí)使用多種對(duì)齊方式。

1. 元素切忌不要隨意擺放
2. 找到一條明確的對(duì)齊線(xiàn)
3. 避免使用多種對(duì)齊的方式

3. 親密性

同類(lèi)相近，異性相遠(yuǎn)，相關(guān)的元素距離靠近，歸類(lèi)到一起，成為一個(gè)視覺(jué)單位，而不是多個(gè)孤立分散的狀態(tài)，這樣有助于組織信息，減少混亂，讓結(jié)構(gòu)變得更清晰。根據(jù)文案內(nèi)容，進(jìn)行合理的分組與歸類(lèi)。

1. 劃分信息層級(jí)并分組
2. 同類(lèi)相近，異類(lèi)相遠(yuǎn)
3. 分組不宜過(guò)多

4. 重復(fù)

重復(fù)的目的是統(tǒng)一，并增強(qiáng)視覺(jué)效果。比如標(biāo)題都是同一個(gè)字體，但需注意的是，避免過(guò)多重復(fù)同一元素，這個(gè)度需要把握，并且過(guò)多重復(fù)會(huì)混淆重點(diǎn)，都是重點(diǎn)等于沒(méi)有重點(diǎn)。一般來(lái)說(shuō)，呈均勻的重復(fù)式圖案，是作為背景使用的。

1. 重復(fù)的目的是統(tǒng)一
2. 避免太多的重復(fù)一個(gè)元素
3. 過(guò)多的重復(fù)會(huì)混淆重點(diǎn)

5. 留白

留白是虛實(shí)空間對(duì)比的作用，適當(dāng)?shù)牧舭啄茏岉?yè)面具有呼吸感，讓讀者閱讀體驗(yàn)更輕松。大量視覺(jué)信息堆砌時(shí)，每個(gè)元素都要經(jīng)過(guò)眼睛掃描，大腦處理，當(dāng)找不到重點(diǎn)的時(shí)候用戶(hù)眼睛和大腦容易疲憊。在內(nèi)容比較多的情況下，盡量在視覺(jué)上減少視覺(jué)分組；另外，多利用負(fù)空間創(chuàng)作一些巧妙的負(fù)空間。

1. 虛實(shí)空間對(duì)比
2. 內(nèi)容多的時(shí)候減少視覺(jué)分組
3. 多利用負(fù)空間

6. 變化

一成不變的元素容易造成頁(yè)面的乏味無(wú)趣，版面也缺乏靈活感，如果將一些元素的位置、大小或者顏色進(jìn)行變化，打破版面呆板、平淡的格局，使得畫(huà)面非常有層次感，不失為打破格局的好方法。

1. 打破呆板的平淡的版式格局
2. 同質(zhì)中的不同即是變異元素
3. 有位置、大小或者顏色等變化

 

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者：解決師Blue

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(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ì)(yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)。