您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

設(shè)計(jì)的骨骼(一)

 

在我們的生活中,設(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)線(xiàn)面》的一書(shū)中,將藝術(shù)的形式歸結(jié)為三種元素之間的構(gòu)成關(guān)系。
“依賴(lài)于對(duì)藝術(shù)單個(gè)的精神考察,這種元素分析師通向作品內(nèi)在律動(dòng)的橋梁 。”——瓦西里·康定斯基(Wassily  Kandinsky )《 點(diǎn)、線(xiàn)、面》
每個(gè)設(shè)計(jì)師總有一點(diǎn)職業(yè)病,有時(shí)候會(huì)被滿(mǎn)屏的信息淹沒(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),線(xiàn),面各自的特點(diǎn)

 

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

在幾何學(xué)的意義上點(diǎn)是可見(jiàn)的最小形式單元,是位置的表示形式。無(wú)所謂方向、大小、形狀。但所為設(shè)計(jì)構(gòu)成的點(diǎn)與幾何中的點(diǎn)是不同的。只有當(dāng)它與周?chē)剡M(jìn)行對(duì)比時(shí)才可知這個(gè)具有具體面積形象是否可以稱(chēng)之為“點(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)約的線(xiàn)條和少量的元素組合成了一種空靈的美感。

 


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

 

網(wǎng)站地址:http://www.iseokagenosato.jp/kotonohagusa/
 

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

 

圓形,平穩(wěn),在感情上是飽滿(mǎn)的,渾厚有力量的。
方形,除了平穩(wěn)外有端莊,大方感,在感情上是踏實(shí)的,可依靠的。
三角形或菱形:菱角分明,且有指向性,在感情上是偏倚的,有目的性的。菱形比三角形對(duì)稱(chēng),在平衡中尋求個(gè)性。其他不規(guī)則的圖形,顯得富有自己的個(gè)性,是獨(dú)立的,張揚(yáng)的。在規(guī)則的圖形里變得非常明顯。往往用于豐富畫(huà)面。


 

居中:平靜,穩(wěn)定,集中感
居上:不穩(wěn)定感
居下:畫(huà)面有沉淀,安靜的感覺(jué),但是不容易被人發(fā)現(xiàn)。
在頁(yè)面三分之二靠上時(shí):吸引人注意往往是視覺(jué)的焦點(diǎn)。


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




 

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

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





例如這個(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í)別。

 

二.線(xiàn)的運(yùn)用

如果說(shuō)點(diǎn)是靜止的,那么線(xiàn),就是點(diǎn)運(yùn)動(dòng)的軌跡。游離于點(diǎn)和形之間,它具有位置、長(zhǎng)度、寬度、方向、形狀和性格等屬性。
不同的線(xiàn)有不同的感情性格,線(xiàn)有很強(qiáng)的心理暗示作用。
直線(xiàn)好比男性,剛強(qiáng)有力量,曲線(xiàn)好比女性,柔和并且性感。
不同方向的線(xiàn)條和不同的排列方式也對(duì)用戶(hù)起了不同的引導(dǎo)作用





如上面所示左圖是瑞士航空公司的海報(bào)設(shè)計(jì),不同方向的蜿蜒的公路線(xiàn)條性感的交織在一起,使得畫(huà)面非常豐富。
中圖是一個(gè)電影海報(bào),曲線(xiàn)的指向型引導(dǎo)用戶(hù)的視覺(jué),這就是點(diǎn)和線(xiàn)的區(qū)分,線(xiàn)是帶有方向性的,有粗細(xì)的變化。
右圖是一張獲得紅點(diǎn)大獎(jiǎng)的呼吁節(jié)電的海報(bào),畫(huà)面中簡(jiǎn)潔的直線(xiàn)并帶有向下的方向感,即能引起關(guān)燈的共鳴也能將不插電這種概念表達(dá)出來(lái)。
線(xiàn)還有分割畫(huà)面的作用,線(xiàn)有連貫性,畫(huà)面因?yàn)樗姆指疃兊蒙鷦?dòng)有趣,對(duì)于閱讀順序有著決定性的作用。


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





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

 

三.面的運(yùn)用

面是線(xiàn)的移動(dòng)至終結(jié)而形成的,面有長(zhǎng)度、寬度,沒(méi)有厚度。
面的形態(tài)是多種多樣的,不同的形態(tài)的面,在視覺(jué)上表現(xiàn)不同的情感。
直線(xiàn)形的面具有直線(xiàn)所表現(xiàn)的心理特征,有安定、秩序感,男性的性格。
曲線(xiàn)形的面具有柔軟、輕松、飽滿(mǎn)、女性的象征。
不規(guī)則的面如:水和油墨,混合墨灑產(chǎn)生的偶然形等,比較自然生動(dòng),有人情味。





第一張圖的電影海報(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à)面中。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/di1894.html
“圖片技巧”讓你能夠成為使用設(shè)計(jì)語(yǔ)言表述出來(lái)的人
卡片式設(shè)計(jì)(類(lèi)metro風(fēng)格)探討
圖趣網(wǎng)微信
建議反饋
×