成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

一篇文章告訴你如何把握設(shè)計(jì)的骨骼之美!

作者:
2017-11-07
8659

“依賴于對(duì)藝術(shù)單個(gè)的精神考察,這種元素分析師通向作品內(nèi)在律動(dòng)的橋梁 ?!薄呶骼铩た刀ㄋ够╓assily Kandinsky )《 點(diǎn)、線、面》

在我們的生活中,設(shè)計(jì)無(wú)處不在,比如地鐵里的大廣告牌,櫥窗里擺放的衣服,高樓大廈的LED展位,甚至手機(jī)里的某個(gè)應(yīng)用界面等,通常在大家眼里,好的設(shè)計(jì)就是即有創(chuàng)意又大膽,并沒(méi)有什么規(guī)律可循,但其實(shí)設(shè)計(jì)和繪畫(huà)不同的在于,繪畫(huà)可以展露 個(gè)性,而設(shè)計(jì)的核心卻是體現(xiàn)秩序的美感,它不是來(lái)自個(gè)人,而是來(lái)自于社會(huì),好比建筑群的設(shè)計(jì)構(gòu)成,不只是一個(gè)華麗的皮囊,而是有血有肉的,它的骨骼就是設(shè)計(jì)的根本。每個(gè)設(shè)計(jì)抽象出來(lái)都是一些元素的構(gòu)成。

康定斯基曾經(jīng)在《點(diǎn)線面》的一書(shū)中,將藝術(shù)的形式歸結(jié)為三種元素之間的構(gòu)成關(guān)系。

“依賴于對(duì)藝術(shù)單個(gè)的精神考察,這種元素分析師通向作品內(nèi)在律動(dòng)的橋梁 ?!薄呶骼铩た刀ㄋ够╓assily Kandinsky )《 點(diǎn)、線、面》

每個(gè)設(shè)計(jì)師總有一點(diǎn)職業(yè)病,有時(shí)候會(huì)被滿屏的信息淹沒(méi),有時(shí)候會(huì)為一個(gè)像素的間距而糾結(jié),但只需靜下心來(lái),從設(shè)計(jì)的根本出發(fā),不看那些裝飾和顏色還有材質(zhì),只從平面構(gòu)成出發(fā)重新解構(gòu)你的設(shè)計(jì),也許會(huì)有不一樣的啟發(fā)和看到那一點(diǎn)點(diǎn)瑕疵所在。

我們先回顧一下平面設(shè)計(jì)中的點(diǎn),線,面各自的特點(diǎn)。

一、點(diǎn)的運(yùn)用

在幾何學(xué)的意義上點(diǎn)是可見(jiàn)的最小形式單元,是位置的表示形式。無(wú)所謂方向、大小、形狀。但所為設(shè)計(jì)構(gòu)成的點(diǎn)與幾何中的點(diǎn)是不同的。只有當(dāng)它與周圍要素進(jìn)行對(duì)比時(shí)才可知這個(gè)具有具體面積形象是否可以稱之為”點(diǎn)”。

康定斯基認(rèn)為從內(nèi)在性的角度來(lái)看,點(diǎn)是最簡(jiǎn)潔的形態(tài)。

舉個(gè)例子,下面的網(wǎng)站是一個(gè)日本傳統(tǒng)的24節(jié)氣網(wǎng)站,站點(diǎn)設(shè)計(jì)也非常的傳統(tǒng),用非常簡(jiǎn)約的線條和少量的元素組合成了一種空靈的美感。

01.jpg

看起來(lái)都是文字和線條的交接,看起來(lái)并沒(méi)有所謂的點(diǎn)的組成,但實(shí)際上一些文字在視覺(jué)里起到了點(diǎn)的作用,如下圖所示,右側(cè)標(biāo)題作為視覺(jué)中心,緊密的排列起來(lái)的文字形成了一個(gè)矩形視覺(jué)焦點(diǎn),而左側(cè)的小文起到平衡視覺(jué)的作用。

02.jpg

1.不同形狀的點(diǎn)往往給人以不同的視覺(jué)心理感受

03.jpg

圓形,平穩(wěn),在感情上是飽滿的,渾厚有力量的。

方形,除了平穩(wěn)外有端莊,大方感,在感情上是踏實(shí)的,可依靠的。

三角形或菱形:菱角分明,且有指向性,在感情上是偏倚的,有目的性的。菱形比三角形對(duì)稱,在平衡中尋求個(gè)性。其他不規(guī)則的圖形,顯得富有自己的個(gè)性,是獨(dú)立的,張揚(yáng)的。在規(guī)則的圖形里變得非常明顯。往往用于豐富畫(huà)面。

04.jpg

居中:平靜,穩(wěn)定,集中感

居上:不穩(wěn)定感

居下:畫(huà)面有沉淀,安靜的感覺(jué),但是不容易被人發(fā)現(xiàn)。

在頁(yè)面三分之二靠上時(shí):吸引人注意往往是視覺(jué)的焦點(diǎn)。

還是舉日本節(jié)氣網(wǎng)站這個(gè)例子,進(jìn)入某個(gè)節(jié)氣后首先映入眼簾的是正中央的節(jié)氣信息,第一時(shí)間讓用戶看到最想知道的內(nèi)容,正中央圓角矩形的設(shè)計(jì),隱喻傳統(tǒng)印章,安靜且舒適。而內(nèi)容相對(duì)而言在視線的偏上方從純色背景到高清大圖設(shè)的背景設(shè)計(jì)上非常有層次感也不會(huì)覺(jué)得枯燥。

05.jpg

2.當(dāng)畫(huà)面中有不同大小的點(diǎn)時(shí),大的點(diǎn)是焦點(diǎn)。而點(diǎn)不同的排列方式也會(huì)產(chǎn)生不同的視覺(jué)心理感受

當(dāng)一個(gè)畫(huà)面中有很多零散的點(diǎn)分布時(shí),用戶的視線會(huì)來(lái)回游移,而設(shè)計(jì)的目的就是如何讓他們?cè)诓灰?guī)則中不顯得凌亂。

06.jpg

例如這個(gè)站點(diǎn)畫(huà)面里有三個(gè)較大的點(diǎn),大的點(diǎn)往往吸引人的注意,并且這三個(gè)點(diǎn)形成了一個(gè)視覺(jué)上的三角形,相對(duì)來(lái)說(shuō)是比較穩(wěn)定的。三角形的位置在頁(yè)面的三分之 二靠上,正好在視覺(jué)焦點(diǎn)的位置。也說(shuō)明了當(dāng)你的視覺(jué)元素非常多時(shí),把想要突出的內(nèi)容放在偏上或者居中的位置,才容易被識(shí)別。

二、線的運(yùn)用

如果說(shuō)點(diǎn)是靜止的,那么線,就是點(diǎn)運(yùn)動(dòng)的軌跡。游離于點(diǎn)和形之間,它具有位置、長(zhǎng)度、寬度、方向、形狀和性格等屬性。

不同的線有不同的感情性格,線有很強(qiáng)的心理暗示作用。

直線好比男性,剛強(qiáng)有力量,曲線好比女性,柔和并且性感。

07.jpg

不同方向的線條和不同的排列方式也對(duì)用戶起了不同的引導(dǎo)作用

如上面所示左圖是瑞士航空公司的海報(bào)設(shè)計(jì),不同方向的蜿蜒的公路線條性感的交織在一起,使得畫(huà)面非常豐富。

中圖是一個(gè)電影海報(bào),曲線的指向型引導(dǎo)用戶的視覺(jué),這就是點(diǎn)和線的區(qū)分,線是帶有方向性的,有粗細(xì)的變化。

右圖是一張獲得紅點(diǎn)大獎(jiǎng)的呼吁節(jié)電的海報(bào),畫(huà)面中簡(jiǎn)潔的直線并帶有向下的方向感,即能引起關(guān)燈的共鳴也能將不插電這種概念表達(dá)出來(lái)。

線還有分割畫(huà)面的作用,線有連貫性,畫(huà)面因?yàn)樗姆指疃兊蒙鷦?dòng)有趣,對(duì)于閱讀順序有著決定性的作用。

再如下圖的網(wǎng)頁(yè)用中央的一根直線將頁(yè)面劃分為左右文字信息和數(shù)據(jù)可視化的兩個(gè)部分。

08.jpg

再如下圖版式設(shè)計(jì)中的曲線運(yùn)用,貫穿整個(gè)頁(yè)面,打破了整齊的文字排版,打破了乏味的基調(diào)。

09.jpg

三、面的運(yùn)用

面是線的移動(dòng)至終結(jié)而形成的,面有長(zhǎng)度、寬度,沒(méi)有厚度。

面的形態(tài)是多種多樣的,不同的形態(tài)的面,在視覺(jué)上表現(xiàn)不同的情感。

直線形的面具有直線所表現(xiàn)的心理特征,有安定、秩序感,男性的性格。

曲線形的面具有柔軟、輕松、飽滿、女性的象征。

不規(guī)則的面如:水和油墨,混合墨灑產(chǎn)生的偶然形等,比較自然生動(dòng),有人情味。

10.jpg

第一張圖的電影海報(bào)中用三角形的面來(lái)切割畫(huà)面,視覺(jué)上非常有秩序感且穩(wěn)定。

用大的幾何圖形來(lái)做設(shè)計(jì)能把視覺(jué)集中到圖形上,是切割畫(huà)面內(nèi)容最好的方式。

第二張圖中的不規(guī)則的面切割畫(huà)面讓頁(yè)面整體比較活潑可愛(ài),和畫(huà)面的品牌牛奶的氣質(zhì)非常吻合,這樣的不規(guī)則元素被穿插在整個(gè)畫(huà)面中。

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

說(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ì):

11.jpg

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

12.jpg

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

這個(gè)雜志內(nèi)頁(yè)的設(shè)計(jì)中,通過(guò)將信息文字的組合,將非常的多的文字大致分成了10個(gè)元素,黑色表示元素,藍(lán)色區(qū)域即使留白,我們可以叫它虛空間相同的元素緊密且整齊的排列在一起。形成了秩序美,虛實(shí)空間的結(jié)合也是非常和諧的。一個(gè)畫(huà)面中的元素種類越少,傳達(dá)的信息更準(zhǔn)確。

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

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

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

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

13.jpg

14.jpg

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è)畫(huà)面中最關(guān)鍵的內(nèi)容,所以將其放在了頁(yè)面的右上角的交接點(diǎn)。

15.jpg

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

16.jpg

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è)完整的圖形,使得畫(huà)面非常有層次感,不失為打破格局的好方法。

17.jpg

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é)上就弱了許多。

18.jpg

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

19.jpg

20.jpg

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

21.jpg

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

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

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

22.jpg

我們?cè)趤?lái)看下面的一組圖,這是原研哉給《無(wú)印良品》設(shè)計(jì)的海報(bào),畫(huà)面中的三個(gè)元素非常清晰可見(jiàn),用最簡(jiǎn)潔的語(yǔ)言比傳達(dá)出了純樸、簡(jiǎn)潔、環(huán)保、以人為本的理念。

畫(huà)面中以地平線的形式打造了一個(gè)巨大的空間感,一個(gè)小小的人影站立與地平線上顯得非常渺小,正是這樣的對(duì)比使得虛無(wú)的感覺(jué)被描述的淋漓盡致。

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

23.jpg

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),讓人可以沉浸在閱讀的氛圍里。這樣的方式也是一種留白。

24.jpg

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

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

25.jpg

卡片化的設(shè)計(jì)終于在google之后風(fēng)靡開(kāi)來(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ǔ)言去豐富

0
0
分享到:

0

喜歡他,就推薦他上首頁(yè)吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)