@百度MUX?：上一篇文章中，我們重新回顧了點(diǎn)、線、面三個(gè)設(shè)計(jì)構(gòu)成要素，接下來(lái)我要帶領(lǐng)大家來(lái)看看它們是如何利用它們的關(guān)系交織在一幅幅畫面中，形成一個(gè)賦予生命的脈絡(luò)的，設(shè)計(jì)師手中的畫筆就是描繪美好的開始。

第一篇回顧：
點(diǎn)線面的運(yùn)用！設(shè)計(jì)的骨骼(一)

說(shuō)到它們的關(guān)系，不得不提的是版式設(shè)計(jì)。

四．版式設(shè)計(jì)中的點(diǎn)線面構(gòu)成

1.通過(guò)組合簡(jiǎn)化版面

點(diǎn)線面的構(gòu)成關(guān)系，即是版式設(shè)計(jì)，三個(gè)要素不同的組合方式，可以產(chǎn)生不同的版面設(shè)計(jì)效果，重要的是掌握信息內(nèi)容或者需求的重點(diǎn)是什么，將它們用平面構(gòu)成的方法，清晰的表現(xiàn)出來(lái)。

優(yōu)秀的版式設(shè)計(jì)是通過(guò)元素的組合簡(jiǎn)化版面的內(nèi)容，建立鮮明的秩序感覺(jué)。例如雜志的設(shè)計(jì)

某雜志內(nèi)頁(yè)

編排整齊

這個(gè)雜志內(nèi)頁(yè)的設(shè)計(jì)中，通過(guò)將信息文字的組合，將非常的多的文字大致分成了10個(gè)元素，黑色表示元素，藍(lán)色區(qū)域即使留白，我們可以叫它虛空間

相同的元素緊密且整齊的排列在一起。形成了秩序美，虛實(shí)空間的結(jié)合也是非常和諧的。一個(gè)畫面中的元素種類越少，傳達(dá)的信息更準(zhǔn)確。

2.利用四個(gè)邊元素的延續(xù)擴(kuò)大版面

不要讓虛空間把你的版面框住，跳出框，會(huì)讓人有更多想像的空間。

用好頁(yè)面的四邊，對(duì)于版面的設(shè)計(jì)是很重要的，如果頁(yè)面的元素任意一個(gè)接近邊緣，虛空間就會(huì)被放大，如上面的例子，雜志的封面邊緣只露出了字母的一個(gè)角，但卻讓整個(gè)畫面被放大，視覺(jué)的擴(kuò)大讓頁(yè)面顯得很大氣。

也可以利用元素的延續(xù)性，讓版面有一定的關(guān)聯(lián)，例如上圖中的左側(cè)圖片采用延伸到右頁(yè)的方式，讓兩個(gè)頁(yè)面感覺(jué)上是一個(gè)整體，打破了四方的邊框。

3.四個(gè)焦點(diǎn)法則

當(dāng)一個(gè)矩形或者正方形被水平和垂直的分成三份后，結(jié)構(gòu)中的四個(gè)焦點(diǎn)是最吸引人的四個(gè)點(diǎn)，設(shè)計(jì)師可以實(shí)用位置和距離，來(lái)決定哪些點(diǎn)在層級(jí)上是最重要的。

下圖是日本的食品網(wǎng)站設(shè)計(jì)，其中豆子形狀的信息框是整個(gè)畫面中最關(guān)鍵的內(nèi)容，所以將其放在了頁(yè)面的右上角的交接點(diǎn)。

下圖的網(wǎng)頁(yè)設(shè)計(jì)，左下角的交點(diǎn)上是畫面中最大的視覺(jué)元素，所以非常的引人注目，即便看不懂韓文也能一眼便能看出來(lái)是一個(gè)物流公司的網(wǎng)站。

4.利用交錯(cuò)和重疊打破平淡

元素的重復(fù)構(gòu)成使設(shè)計(jì)產(chǎn)生安定、整齊、規(guī)律的統(tǒng)一。但重復(fù)構(gòu)成的視覺(jué)感受有時(shí)容易顯的呆板、平淡、缺乏趣味性的變化，故此，我們?cè)诎婷嬷锌砂才乓恍┙诲e(cuò)與重疊，打破版面呆板、平淡的格局。

例如下面的海報(bào)設(shè)計(jì)中，利用字體形狀顏色的重疊產(chǎn)生豐富的色彩，第二張海報(bào)用交錯(cuò)的照片拼成了一個(gè)完整的圖形，使得畫面非常有層次感，不失為打破格局的好方法。

5.對(duì)比越強(qiáng)烈視覺(jué)沖擊力越強(qiáng)

對(duì)比是版面設(shè)計(jì)中常用的手法，無(wú)論字與字，形與形，無(wú)處不在，或者多種關(guān)系交融在一起。有主次廣西，大小，長(zhǎng)短，疏密，動(dòng)靜，黑白，剛?cè)幔搶?shí)等方式，彼此參透，相互并存。

如下圖，幾種比較重要的對(duì)比關(guān)系交織在一起，背景黑色和白色的文字對(duì)比，黃色的圓形的大小對(duì)比，文字長(zhǎng)短疏密的對(duì)比，折線和模特臉部曲線的對(duì)比，交織在一起，形成了很強(qiáng)的視覺(jué)沖擊力。我們可以看一旦去掉其中一種對(duì)比，例如黑白對(duì)比以后，視覺(jué)上就弱了許多。

在比如naver網(wǎng)站的設(shè)計(jì)，左上角的色塊與其他的色塊成了明顯的對(duì)比，它在整個(gè)頁(yè)面中的作用相當(dāng)于一個(gè)面的存在，所以十分醒目。

值得順便一提的是，韓國(guó)的設(shè)計(jì)中對(duì)元素的把握總是比較到位的，哪怕是一個(gè)搜索框，就是一個(gè)點(diǎn)線面的組合關(guān)系。

6.在秩序中融入變異元素，能活躍頁(yè)面，并突出焦點(diǎn)

同質(zhì)中的不同，即是變異元素，在同質(zhì)元素充滿屏幕時(shí)，難免乏味很難獲得沖擊力，想要快速打破格局的方法就是將某個(gè)元素變異處理。

例如圖中的網(wǎng)站首頁(yè)中，有兩種元素組成，在重復(fù)的矢量圖形中，插入了幾個(gè)照片，里面的照片就是變異元素，這種視覺(jué)上的對(duì)比使得一堆圖形變得活潑起來(lái)，并且容易被記住。

我們?cè)趤?lái)看下面的一組圖，這是原研哉給《無(wú)印良品》設(shè)計(jì)的海報(bào)，畫面中的三個(gè)元素非常清晰可見(jiàn)，用最簡(jiǎn)潔的語(yǔ)言比傳達(dá)出了純樸、簡(jiǎn)潔、環(huán)保、以人為本的理念。畫面中以地平線的形式打造了一個(gè)巨大的空間感，一個(gè)小小的人影站立與地平線上顯得非常渺小，正是這樣的對(duì)比使得虛無(wú)的感覺(jué)被描述的淋漓盡致。

究其根源是什么造成的視覺(jué)美感？正是虛實(shí)空間對(duì)比的作用，也就是所謂的留白。這就是最后一點(diǎn)在整個(gè)構(gòu)成關(guān)系中很重要的一部分，留白。

7.敢于留白也要慎于留白

留白好比音樂(lè)中的休止符，有種此時(shí)無(wú)聲省有聲的效果，它不僅能引發(fā)觀眾的聯(lián)想，更能起到戲劇般的效果，如果敢于運(yùn)用白，能達(dá)到一種更好的信息傳達(dá)并從精神層面引起觀眾的共鳴，這是它獨(dú)特的魅力所在。

在現(xiàn)在信息爆炸的時(shí)代，白變成了一種更高尚的美，讓現(xiàn)代人能釋放壓力并享受這樣的美感。

信息設(shè)計(jì)中它的好處是顯而易見(jiàn)的。在網(wǎng)頁(yè)設(shè)計(jì)中比較典型的例子是豆瓣，文字的間距和每個(gè)模塊之間靠留白來(lái)區(qū)分，不會(huì)靠得特別近，它得虛實(shí)空間是比較對(duì)稱得。所以無(wú)需添加過(guò)多的修飾。

豆瓣的閱讀中心除了正文的文字內(nèi)容以外，其余的圖標(biāo)被盡量的放在頁(yè)面的邊緣，或者只保留圖形，這樣的目的是純粹的突出文章本身，而將一些輔助的信息收起來(lái)，讓人可以沉浸在閱讀的氛圍里。這樣的方式也是一種留白。

ios7系統(tǒng)的界面設(shè)計(jì)同樣也以留白來(lái)處理信息之間的層級(jí)關(guān)系，極細(xì)的線在界面中顯得非常精致，它的設(shè)計(jì)是一種“純粹極簡(jiǎn)的演繹”。

界面中點(diǎn)線面的元素合理的排布，無(wú)不體現(xiàn)了設(shè)計(jì)師的匠心所在。摒棄了過(guò)多無(wú)用的設(shè)計(jì)才是能深入人心的。

再看看更多其他網(wǎng)站一些細(xì)小的留白設(shè)計(jì)，比如google的卡片設(shè)計(jì)

卡片化的設(shè)計(jì)終于在google之后風(fēng)靡開來(lái)自于生活中類似名片，賀卡等便攜又輕巧的設(shè)計(jì)，卡片中標(biāo)題與摘要之間，摘要與說(shuō)明文字之間的間隙較大，圖片與其他內(nèi)容間也比較疏離，同樣以信息為本的設(shè)計(jì)靠留白來(lái)分割內(nèi)容之間的關(guān)系，是最近比較流行的設(shè)計(jì)趨勢(shì)，留白的關(guān)鍵在于大面積虛空間的襯托將實(shí)體最純粹的展現(xiàn)出來(lái)，而卡片越來(lái)越趨向這種純粹的形式。

點(diǎn)線面的構(gòu)成在設(shè)計(jì)中實(shí)際是一套科學(xué)的方法論，它還有非常多的奧秘，以上7點(diǎn)只是粗略的談到一些在平常設(shè)計(jì)中發(fā)現(xiàn)的規(guī)律，不能一一將它的科學(xué)美展現(xiàn)出來(lái)。

設(shè)計(jì)不是盲人摸象憑著感覺(jué)去描繪，而是要把握它的骨骼，知道它的結(jié)構(gòu)所在，再用表情語(yǔ)言去豐富它，才能做到傳達(dá)出設(shè)計(jì)之美，信息之美。

原文地址：mux.baidu

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：