設(shè)計時用好這7個專業(yè)技巧,輕松構(gòu)建平衡的頁面布局

?無論你是做印刷(平面)設(shè)計還是線上(網(wǎng)站泼掠、電商怔软、UI等)設(shè)計,都需要使用一些常見的原則來確保頁面(或版面)的平衡性择镇。

image

不管是印刷小冊子抑或是app UI 設(shè)計挡逼,設(shè)計任何項目的主要目標(biāo)都是為了向受眾傳達清晰有效的信息。

頁面布局通常涉及很多元素的放置腻豌,重新排列和柵格化家坎,許多設(shè)計師都將這一過程隨機結(jié)合在一起,通常會創(chuàng)造出一些自我感覺良好的效果吝梅。雖然這可能會創(chuàng)造一些出色的頁面布局虱疏,但使用這種自由并毫無章法的方式更可能會導(dǎo)致頁面缺失視覺平衡性。

一個好的頁面構(gòu)成應(yīng)該既賞心悅目苏携,也能清楚地將關(guān)鍵信息傳達給目標(biāo)受眾做瞪。在此我將向大家介紹幾種技巧,以幫助一些不懂頁面布局技巧的設(shè)計師們在做設(shè)計時能夠輕松創(chuàng)建平衡的頁面布局兜叨。無論你應(yīng)用于哪方面的設(shè)計穿扳,這些方法都能很好地創(chuàng)造出平衡的布局衩侥。

01国旷、使用網(wǎng)格系統(tǒng)

image

讓頁面具有一定平衡性的最簡單方法之一莫過于使用網(wǎng)格系統(tǒng),網(wǎng)格系統(tǒng)可以說是印刷設(shè)計中唯一遺留下來的一種經(jīng)典布局方法茫死,自數(shù)字媒體發(fā)展起來的這些年以來跪但,網(wǎng)格系統(tǒng)已經(jīng)幫助設(shè)計師完成了許多線上設(shè)計工作,成功將網(wǎng)格系統(tǒng)的概念移植到數(shù)字媒體中峦萎。

通過使用網(wǎng)格系統(tǒng)來規(guī)劃頁面上不同元素的位置屡久,就可以創(chuàng)建并促進頁面中不同元素之間的連接。這可以產(chǎn)生很強的頁面平衡感爱榔,為受眾提供一個清晰的結(jié)構(gòu)參考被环。

這一點很重要,因為當(dāng)所有的頁面元素都具有互相連接的感覺時详幽,整體效果會讓受眾感覺更舒適筛欢,并幫助他們?yōu)g覽重要部分浸锨,即內(nèi)容。

02版姑、選一個焦點

image

創(chuàng)造平衡的頁面布局最有效的方法之一就是在布局中找到一個焦點柱搜,關(guān)于這個觀點有個最好的例證:在設(shè)計中常用到的大圖像,便是頁面中最大的單一焦點元素剥险。

一股強大的視覺效果可以強有力地吸引受眾進入頁面中聪蘸,也提供了一個很好的結(jié)構(gòu)元素,這時候可以圍繞它安排其他內(nèi)容表制。如果你有多個視覺元素健爬,用格式塔理論的鄰近原則將它們組合在一起,并用對齊原則對齊它們么介。

同樣的還有用標(biāo)題或者引文副標(biāo)題等方式作為一個焦點存在浑劳,一個好的標(biāo)題可以和大圖像一樣產(chǎn)生強大的視覺吸引力,并且以此為基點安排其他元素夭拌,最終達到頁面布局的平衡魔熏。

03、使用三分法則

image

創(chuàng)造平衡的頁面布局最有效的方法之一莫過于設(shè)計師們最喜歡的三分法則(或黃金比例法則)鸽扁。三分法則簡而言之就是蒜绽,將頁面垂直和水平分為三分之一,而網(wǎng)格線相交的點提供了現(xiàn)成的自然焦點桶现。

通過將關(guān)鍵元素與這四點對齊躲雅,便可獲得比頁面中心點更令人滿意的構(gòu)圖。本身三分法則不會神奇地為布局提供平衡骡和,但是通過擴展原理相赁,使用這個趨向于自然的焦點很容易實現(xiàn)平衡的頁面布局。

三分法則最常用的使用方法是將頁面的最重要元素放置在頁面的上部(或下部)三分之一處慰于,使主焦點對齊以匹配其中一個交點钮科。

04、使用留白

image

新手設(shè)計師通常會把頁面上的每一個空白都填充內(nèi)容婆赠,直到填滿每一個空白绵脯。更有經(jīng)驗的設(shè)計師則知道,有時候最好的設(shè)計就是把元素排除在外休里,而不是把它們固定其中蛆挫。留白也稱“負(fù)空間”,實際上妙黍,空間并不都是有色的悴侵,任何與焦點信息無關(guān)的空白空間都可以被歸類為“留白”。

在印刷媒體中拭嫁,利用留白的最常用方法是擴大頁邊距和間距可免。在網(wǎng)絡(luò)上筒繁,只要在元素周圍提供充足的呼吸空間,就可以使整體布局趨向合理和平衡巴元。

要想達到一個很好的留白效果毡咏,需要用一個清晰的布局把內(nèi)容固定好(如使用網(wǎng)格系統(tǒng)),否則隨意使用留白可能會導(dǎo)致頁面元素與元素之間相互脫節(jié)逮刨。

05呕缭、重復(fù)設(shè)計元素

image

重復(fù)是格式塔原則中的另一種原則,設(shè)計中使用重復(fù)原則可以達到很強的聯(lián)系性和平衡性修己。其思路是通過識別和再利用圖案進行設(shè)計處理并貫穿整個布局恢总,這樣可以為受眾提供一個參考,使不同的區(qū)域在感覺上是連通的睬愤,并且感覺是相同整體布局中的一部分片仿,頁面達到和諧、統(tǒng)一的視覺效果尤辱,并能加強給人的印象砂豌,也可以達到一種有規(guī)律的節(jié)奏感和形式美感。

06光督、使用層次結(jié)構(gòu)

image

實現(xiàn)頁面布局平衡的關(guān)鍵方法之一便是創(chuàng)造清晰的結(jié)構(gòu)和層次阳距,前面我們已經(jīng)談到了結(jié)構(gòu),但同時也要傳達出頁面上不同內(nèi)容的相對重要性结借。例如筐摘,標(biāo)題總是比正文內(nèi)容更占有視覺上的重要性。

看看構(gòu)成頁面的不同元素船老,并決定哪個元素是最重要的咖熟,并以此元素為基準(zhǔn)調(diào)整頁面上其余元素的層次關(guān)系,使其保持最重要柳畔。

07馍管、使用比例、對比和和諧

image

最后荸镊,比例的使用可以說是頁面布局設(shè)計中實現(xiàn)良好的視覺平衡的一個非常行之有效的方法咽斧,通過讓一些元素比其他元素更大堪置,就會出現(xiàn)秩序和層次感躬存。這有助于創(chuàng)建一個舒適的布局,因為受眾會自動首先查看布局中的較大元素舀锨,緊接著查看較小的元素岭洲。

這個原理也適用于增加對比度,通過對比將頁面上的元素隔離開來坎匿,會使眼睛首先關(guān)注該重要點盾剩。這就提供了一個方式吸引受眾關(guān)注到頁面雷激,并再次給出一個有用的結(jié)構(gòu)焦點來引導(dǎo)接下來的布局設(shè)計。

比例和對比度適用于一個元素時效果最好告私,使其與布局的其他部分脫穎而出屎暇。而使用和諧的原則,則能在判斷兩種以上的要素或部分與部分的相互關(guān)系時驻粟,給我們在感覺上和意識上是一種整體協(xié)調(diào)的關(guān)系根悼。

其實,再偉大的設(shè)計方法都是在最基本的設(shè)計基礎(chǔ)知識之上發(fā)展而來蜀撑,以上7種方法也都是設(shè)計構(gòu)成學(xué)中的基礎(chǔ)知識點挤巡。關(guān)鍵是需要溫故知新并且勤于練習(xí)和運用,才能穩(wěn)固地掌握并推陳出新酷麦。

本文由 茂趣創(chuàng)意/Cren 茂茂 原創(chuàng)內(nèi)容矿卑,轉(zhuǎn)載請注明作者和出處,謝謝你的合作沃饶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末母廷,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子糊肤,更是在濱河造成了極大的恐慌徘意,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轩褐,死亡現(xiàn)場離奇詭異椎咧,居然都是意外死亡,警方通過查閱死者的電腦和手機把介,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門勤讽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拗踢,你說我怎么就攤上這事脚牍。” “怎么了巢墅?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵诸狭,是天一觀的道長。 經(jīng)常有香客問我君纫,道長驯遇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任蓄髓,我火速辦了婚禮叉庐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘会喝。我一直安慰自己陡叠,他們只是感情好玩郊,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著枉阵,像睡著了一般译红。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兴溜,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天临庇,我揣著相機與錄音,去河邊找鬼昵慌。 笑死假夺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的斋攀。 我是一名探鬼主播已卷,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼淳蔼!你這毒婦竟也來了侧蘸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤鹉梨,失蹤者是張志新(化名)和其女友劉穎讳癌,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體存皂,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡晌坤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了旦袋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片骤菠。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖疤孕,靈堂內(nèi)的尸體忽然破棺而出商乎,到底是詐尸還是另有隱情,我是刑警寧澤祭阀,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布鹉戚,位于F島的核電站,受9級特大地震影響专控,放射性物質(zhì)發(fā)生泄漏抹凳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一踩官、第九天 我趴在偏房一處隱蔽的房頂上張望却桶。 院中可真熱鬧,春花似錦蔗牡、人聲如沸颖系。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嘁扼。三九已至,卻和暖如春黔攒,著一層夾襖步出監(jiān)牢的瞬間趁啸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工督惰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留不傅,地道東北人。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓赏胚,卻偏偏與公主長得像访娶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子觉阅,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,498評論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案崖疤? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,728評論 1 92
  • 一個有平衡感覺的組合,給人感到穩(wěn)定和美觀典勇。雖然其中有一些元素只起到聯(lián)絡(luò)節(jié)點的作用劫哼,可是這個組合卻可以足夠的吸引我們...
    Charles_UI閱讀 6,241評論 0 6
  • 那一天,老泥做了一個夢割笙,夢見自己花了一萬元在某幣網(wǎng)購買了代幣权烧,沒多久代幣蹭蹭蹭往上漲,收益上百倍伤溉,一不小心成了百萬...
    泥龍蝦閱讀 280評論 0 0
  • 拿著手機豪嚎,食指在屏幕,往上劃劃谈火,往下拉拉侈询。無聊嘛?我想我應(yīng)該是困了的糯耍,這種困死卻睡不著的滋味扔字,沒經(jīng)歷過的人真不能說...
    陌子家閱讀 153評論 0 0