中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)表現(xiàn)手法

2014-02-04    分類: 網(wǎng)站建設(shè)

不是什么新東西,也沒(méi)那么好為人師,最初本來(lái)就是寫(xiě)給非設(shè)計(jì)部門的同事讓他們稍微了解。后期傳上來(lái)考慮受眾不同,更換了表述

這些理論很多大神都有分享過(guò),只不過(guò)我是新瓶裝舊酒,多包裝了一下,加入了一些新的案例和自己的見(jiàn)解而已。水平有限,不代表就是真理。有什么不妥地方,也可以指出多探討。

設(shè)計(jì)的理論有很多,這只是其中個(gè)人覺(jué)得基礎(chǔ)中的基礎(chǔ),最有代表性的四條而已,并未有以偏概全的意思,設(shè)計(jì)之域,豈可寥寥概括。未來(lái),有機(jī)會(huì)我再進(jìn)行補(bǔ)充與延展。
一,設(shè)計(jì)常見(jiàn)手法之對(duì)比

木有對(duì)比就木有傷害,木見(jiàn)過(guò)大海,不知海之闊,未見(jiàn)過(guò)蒼穹,不知空之廣。沒(méi)見(jiàn)過(guò)其他人做得好的,不知道自己做得有多齪……
對(duì)比作為設(shè)計(jì)最常見(jiàn)的手法,(本PPT也有用到)其實(shí)用性是很強(qiáng)的。
因?yàn)槠邢蓿≒S:飛來(lái)一腳把我踹飛:明明是你懶編不下去好么)暫且只描述下字體。
以下啪啦啪啦省略五千字……看圖就好
好了,我們繼續(xù)下個(gè)……

什么!內(nèi)誰(shuí)說(shuō)的只看圖看不懂的……
一定要我解釋么。。。
其實(shí)字體粗細(xì)對(duì)比太常見(jiàn)了。設(shè)計(jì)就是規(guī)則中加入一點(diǎn)變化,無(wú)非就只注意的一點(diǎn)是,若是要某段話有粗細(xì)對(duì)比,最恰當(dāng)?shù)氖址ㄟ€是使用同一種字體的粗細(xì)效果,但一般中文字體較少,英文的Amsipro,nexa(ps:我會(huì)告訴你這個(gè)就是ppt用的英文字體么),Zona Pro,Gotham就擁有2種或以上的不同效果。大標(biāo)題我們?yōu)榱孙@眼通常都是加粗使用,小部分描述才使用纖細(xì)的。
這樣即保持字體上的統(tǒng)一,減少多余元素,又讓字體不至于太平淡缺乏變化。這樣看起來(lái)才更像是相親相愛(ài)的一家人……
另外,也不僅僅是只有字體才有大小對(duì)比,網(wǎng)頁(yè)上各個(gè)元素之間,也存在大小的對(duì)比,對(duì)比越夸張?jiān)綇?qiáng)烈。其效果……嗯,這又是一個(gè)另外的故事了。
關(guān)于字型對(duì)比,其實(shí)這個(gè)也沒(méi)什么好說(shuō)的,主要是在于不同場(chǎng)合怎么去使用這些不同的字體。
偏文藝范的畫(huà)面(明信片,攝影集排版組合)用手寫(xiě)體,各類電子產(chǎn)品(包含手機(jī))適合標(biāo)題用纖細(xì)字體,若是化妝品,婚紗影樓,女性用品一類的就是襯線體,中國(guó)風(fēng)的,游戲?qū)n},要做出氣勢(shì)的就是毛筆字體,嬰童少兒相關(guān)的才用到圓角字體(因?yàn)樾『⒆尤菀资軅耨R的,所以一切玩具和小孩子用的東西大多都是塑料的,圓圓鈍鈍的,所以引申到設(shè)計(jì)表現(xiàn)形式上,也是相應(yīng)的感覺(jué))
關(guān)于字體的疏密,其實(shí)是最不好拿捏的一環(huán)了,大品牌官方banner上常有,如果沒(méi)有拉開(kāi)距離有留白,整張圖都失去尿性。
但其實(shí)大眾能接受并且看得更多的還是相對(duì)緊密點(diǎn)的字體。為什么?很簡(jiǎn)單,因?yàn)橥ǔ7歉叨似放?,給過(guò)來(lái)的slogan就沒(méi)有一個(gè)不是文字多且密集的。
在這種情況下。。。你拉開(kāi)個(gè)毛線的距離……你以為人人都有這文采能想出簡(jiǎn)短干練,而又讓人印象深刻的廣告語(yǔ)?。?br/>說(shuō)的就是你,來(lái)自25世紀(jì)顛覆人類思想升華人類靈魂堪稱千年難得一現(xiàn)道德楷模精神品質(zhì)規(guī)范并且技巧已入臻境的偉大設(shè)計(jì)師某某。
關(guān)于色彩,其實(shí)還是秉承設(shè)計(jì)的原理就是簡(jiǎn)潔而不簡(jiǎn)單,要和整體更加和諧搭配,同時(shí)顯簡(jiǎn)潔的同時(shí),還能讓人感覺(jué)有細(xì)節(jié)。你可以看到我選取的這個(gè)例子中,標(biāo)題的顏色,裝飾的彩帶,頁(yè)面的logo和某個(gè)文字都是同樣的色系。增加了畫(huà)面色彩不單調(diào)的同時(shí),其又統(tǒng)一簡(jiǎn)練。
關(guān)于方向,在設(shè)計(jì)過(guò)程中,你要做這個(gè)效果不僅僅是因?yàn)榭吹狡渌说淖髌防镉眠^(guò)這樣的豎排形式覺(jué)得好看才使用,更多是為了讓你的構(gòu)圖更加和諧恰當(dāng),可以看到左側(cè)就是一個(gè)豎長(zhǎng)的衣架效果。在這種情況下,設(shè)計(jì)師才想到用豎排的效果去填補(bǔ)右側(cè)的空間。
當(dāng)有一天,你能為你任意某一處細(xì)節(jié)的設(shè)計(jì)都找到一個(gè)合理的解釋的時(shí)候,你的設(shè)計(jì)才算真正入門。

二,設(shè)計(jì)常見(jiàn)手法之重復(fù)

高手是怎么來(lái)的?把一件事情重復(fù)一萬(wàn)遍就好了。
一口氣吃不成一個(gè)胖子,黃裳就算發(fā)明練成九陰神功,等到天下無(wú)敵也要在山洞里修煉個(gè)幾十年不是?
重復(fù)不僅僅是一個(gè)手法更多是一種精神。反復(fù)去推敲,反復(fù)去打磨,反反復(fù)復(fù)去調(diào)整直至更好一點(diǎn)點(diǎn)。下圖你看人家手法是很簡(jiǎn)單,看一眼就懂個(gè)大概,一個(gè)形式左邊右邊重復(fù)去使用,一個(gè)在左邊一個(gè)在右邊。但是要把細(xì)節(jié)做到這樣的程度。其實(shí)更多是在電腦屏幕面前反復(fù)修改的效果。
我們看到的很多成套系的廣告,也大部分都是一個(gè)idea換一個(gè)不同人物或者場(chǎng)景或文案去進(jìn)行合成不同畫(huà)面。

其中最經(jīng)典的也是點(diǎn)線面的重復(fù)(形狀版式的重復(fù)之前有講述過(guò),這次就不復(fù)述了)

點(diǎn)的重復(fù)常見(jiàn)于自然界當(dāng)中,在設(shè)計(jì)手法中,除了下圖的制作成背景,也有作為頁(yè)面上一些風(fēng)沙,雨雪,飄飛,火花去增加畫(huà)面中的細(xì)節(jié)和質(zhì)感。很多抽絲的效果也是可以通過(guò)在圖案里設(shè)置小點(diǎn)而制作出來(lái),這也是很多點(diǎn)重復(fù)的效果。

線在設(shè)計(jì)中大部分是以圖案底紋而存在,VI整套設(shè)計(jì)當(dāng)中,一個(gè)有逼格的由幾條線組成的圖形+背景色,就足以撐起整個(gè)設(shè)計(jì)的氣場(chǎng)。

點(diǎn)和線集合重復(fù)起來(lái),都可以構(gòu)成面。狹義中的點(diǎn)線面是我們所看到的這些圖案,線條,但廣義的點(diǎn)線面可以引申到一個(gè)畫(huà)面中的方方面面。

以下圖片最基本的構(gòu)成就是點(diǎn)線面,但卻是幾個(gè)基礎(chǔ)元素不同形式的反復(fù)使用與演變。但這個(gè)功夫是我沒(méi)辦法總結(jié)出規(guī)律來(lái)的……你知道原理和執(zhí)行做出來(lái)是兩回事,要耍出來(lái)是真要有藝術(shù)細(xì)胞和突出起來(lái)的靈感的……在這個(gè)領(lǐng)域我做出來(lái)的點(diǎn)線面設(shè)計(jì)相對(duì)而言是比較初級(jí)的效果。所以只能初略提提,還望諒解。

62a6585be215a8012060c83e3691.jpg

在設(shè)計(jì)常見(jiàn)手法當(dāng)中,其實(shí)最值得一提的就是排列,這也是大部分非科班設(shè)計(jì)唯一不多能把控了解理論后只要花點(diǎn)時(shí)間就能輕松掌握的了。

關(guān)于字體的排列也是老生常談了。但不可否認(rèn),凡是出色的設(shè)計(jì),在這個(gè)最基礎(chǔ)的運(yùn)用過(guò)程中,幾乎不會(huì)出錯(cuò)。
只是文字越多的情況越考驗(yàn)一個(gè)設(shè)計(jì)師的文字駕馭能力。當(dāng)你不會(huì)排版的時(shí)候,把所有東西都規(guī)規(guī)矩矩排列在這或左或中或右?guī)讉€(gè)位置而不去想著做多少標(biāo)新立異的排版總不會(huì)錯(cuò)。雖然原理是簡(jiǎn)單了點(diǎn),但是實(shí)際要能做到能hold住這么多元素并且做大氣也是不簡(jiǎn)單的事情。

當(dāng)你自覺(jué)已經(jīng)超脫常規(guī)排版的限制,也不妨試試這樣的。
1.把文字圖像圖形化,如左圖一,感覺(jué)像碗里飄出來(lái)的煙氣
2.讓文字沿著某個(gè)畫(huà)面邊緣輪廓排列,如左下圖
3.讓文字形成傾斜角度,如中間圖
4.讓文字形成3D立體效果排列,如右下圖

說(shuō)到排列,就不得不提起柵格,這里有兩種形式,當(dāng)你要做圖像之間有間隙的設(shè)計(jì)就類似左圖,留下中間隔開(kāi)圖片的空間,若是不需要,其實(shí)是可以更為簡(jiǎn)化形成更簡(jiǎn)單的柵格。具體內(nèi)容因?yàn)楹芫们耙呀?jīng)提到過(guò)就不詳敘了。

uehtml就是柵格化設(shè)計(jì)后的效果,網(wǎng)頁(yè)中的板塊設(shè)置都是經(jīng)過(guò)計(jì)算后的整數(shù)。一般柵格多用于平臺(tái)型網(wǎng)站,或者需要自適應(yīng)效果的頁(yè)面。

在合成圖當(dāng)中,畫(huà)面中每一個(gè)合成的元素的位置也其實(shí)是根據(jù)現(xiàn)實(shí)中真實(shí)的方位來(lái)進(jìn)行排列的。比例都是正常的比例,畫(huà)面中的有些元素稍微做過(guò)了,或者位置不對(duì),其實(shí)都會(huì)或多或少讓人感覺(jué)不自然。
但其實(shí)這也是很多設(shè)計(jì)師剛開(kāi)始接觸設(shè)計(jì)一兩年常做不到位的地方,抓不準(zhǔn)正確的位置與角度。具體怎么做到。。。不用問(wèn)我,問(wèn)杰克……

好了,以上講了很多大路貨,接下來(lái)說(shuō)點(diǎn)特別的。
設(shè)計(jì)常見(jiàn)手法之親近
其實(shí)很多設(shè)計(jì)并非你表面上看到的那樣簡(jiǎn)單,之所以呈現(xiàn)在你的視角里是自然而然的,其中和設(shè)計(jì)師對(duì)規(guī)則的掌握密不可分。
有時(shí)候,要做出好設(shè)計(jì)全憑的就是一種習(xí)慣。強(qiáng)制性讓自己去做符合這些規(guī)則的設(shè)計(jì)。
不僅要靠平時(shí)大量去看去收藏好的東西,去實(shí)踐去利用,日積月累。自己也要懂得去分析去判斷。他人的哪里有亮點(diǎn),好,好在哪里,不足之處又在哪里,多思考多總結(jié)。
在下圖的設(shè)計(jì)中,作圖如博弈,高手落子,一筆一畫(huà)都是蘊(yùn)藏著這些規(guī)律的。當(dāng)然,并非說(shuō)不能做出突破,超越常規(guī)的東西。但在與很多人還未到能沉淀到能獨(dú)創(chuàng)出處于自己的大招的地步。那么所做的東西其實(shí)都是略散,缺乏完整度的,那還不如一般的套路。
但你看人家無(wú)論是左側(cè)排也好右側(cè)排也好,一樣玩很6,你說(shuō)他難道就不是創(chuàng)新?難到就做得不好?只是他把一個(gè)簡(jiǎn)單的原理做到了極致。
當(dāng)你察覺(jué)到這些設(shè)計(jì)背后的東西,那可能就是你設(shè)計(jì)之路新的開(kāi)始。
親近從字面上的意思非常好理解,兩個(gè)人興趣愛(ài)好相同,喜歡的東西差不多,有很多東西不謀而合比較接近,雖然距離遙遠(yuǎn),雖然從前形同陌路,但如今卻一見(jiàn)如故,這就是親近的感覺(jué)。
因?yàn)轭愃?,因?yàn)橹就篮?,所以不論天涯海角,都有著似有似無(wú)的聯(lián)系,如那天上的風(fēng)箏,不管飛多高,那手中都有一根線在牽引。如那花果山的孫猴子,不論你怎么上床下跳,都逃不出如來(lái)佛祖的手心。
當(dāng)你理解了這一步,不是你去進(jìn)行設(shè)計(jì),而是不知不覺(jué)有個(gè)東西在牽引著你,呼喚著你,你會(huì)發(fā)現(xiàn),原來(lái)最正確最恰當(dāng)?shù)哪菞l路,就在那里,就看你來(lái)得早,還是來(lái)得遲。所謂文章本天成,妙手偶得之。就是如此。

很多人都知道扁平化的好,都接觸過(guò)扁平化的設(shè)計(jì)。
但其實(shí)所有扁平化設(shè)計(jì)都建立在一個(gè)基礎(chǔ)之上,若是缺乏這個(gè)基礎(chǔ),盲目去做,那效果~
喜愛(ài)扁平化設(shè)計(jì)的你,可曾問(wèn)過(guò)自己,你的圖標(biāo)都是統(tǒng)一像素的么?
你對(duì)字體的選用,大小間距的把控都到位了么?
你選用的圖片能支撐起整個(gè)畫(huà)面么?能讓你的設(shè)計(jì)更加有亮點(diǎn)還是因?yàn)檫^(guò)于放大暴露出更多不足?你的排版布局是具有創(chuàng)造力的還是規(guī)整的?
是的,扁平化設(shè)計(jì)不需要你做太多的光效質(zhì)感,但是更需要你在其他細(xì)節(jié)上下功夫。
如下圖,
看上去舒適美觀的背后,是對(duì)圖片色彩的嚴(yán)格把控。每一個(gè)板塊,你都能從下一個(gè)板塊找到相對(duì)應(yīng)的色彩。
例:第一屏男一身上的衣服與最下邊一屏的女子褲子色調(diào)般配,男一的褲子與中間一屏男二衣服顏色是般配的,同時(shí)也接近女子身上蓋的毯子的顏色。更不用提畫(huà)面中都是有顏色相接近的木質(zhì)家具或地板。
因?yàn)樯剩x圖的親近,讓你更容易感覺(jué)到這些都是一致的,是同一個(gè)品牌所傳遞的東西。因?yàn)闇p少了其他無(wú)關(guān)的色彩,只有在畫(huà)面中出現(xiàn)過(guò)的色彩,簡(jiǎn)潔而不簡(jiǎn)單的效果就這么出來(lái)了。

4d1b585c7962a801219c77e01ba2.jpg

這里我多說(shuō)兩句。在國(guó)外,網(wǎng)頁(yè)設(shè)計(jì)是一整套系的設(shè)計(jì)思路的延展。在前期產(chǎn)品拍攝這個(gè)環(huán)節(jié),大概就已經(jīng)具備照片所要表達(dá)的風(fēng)格與修圖后的色調(diào)了。(甚至攝影師的薪資,公司在攝影上的投入還超越設(shè)計(jì))
在這樣的環(huán)境下交給設(shè)計(jì)制作才能一氣呵成。從制作的結(jié)果來(lái)看,其設(shè)計(jì)感與調(diào)性,品質(zhì)感遠(yuǎn)勝于國(guó)內(nèi)大多數(shù)設(shè)計(jì)。
當(dāng)然這也并非完全是技能不如。
在國(guó)內(nèi)的話。。。客戶提供的圖片本身low或者根本就是各路攝影圖片的拼湊而并非一套系,在產(chǎn)品素材上并未花費(fèi)多少錢??蛻艏南M谠O(shè)計(jì)去解決這個(gè)素材不足的問(wèn)題。
當(dāng)然,我說(shuō)的是大部分,現(xiàn)在部分電商商家已經(jīng)重視起攝影這個(gè)環(huán)節(jié)了,但是更多的企業(yè)家卻不夠了解。
在這種情況下去做扁平……就像人家用飛機(jī)坦克你用彈弓。。。是有能用一些素材網(wǎng)上圖片來(lái)提升檔次的。。。但圖片效果的真實(shí)性與合理度嘛……所以你對(duì)設(shè)計(jì)的追求就只是把東西做得美不需要太貼切就好了么?
當(dāng)然。能在一切限制條件下發(fā)揮出來(lái)把設(shè)計(jì)做好的,那絕對(duì)是真愛(ài)。
上面幾張圖若是國(guó)外設(shè)計(jì)師,從攝影師給的素材庫(kù)里拖拖,稍微修下就好了。而國(guó)內(nèi)設(shè)計(jì)要做接近的效果。就這3張圖,要色調(diào)一致,都是差不多人物膚質(zhì)的,服裝也接近的效果,一天還未必能找到。 (當(dāng)然,只限于有追求的,普通設(shè)計(jì)不會(huì)想幾張選圖我還搞這么嚴(yán)密,有?。┧?,人家花費(fèi)一天時(shí)間鍛煉到的“設(shè)計(jì)”的技巧,可能你要近2天時(shí)間。(因?yàn)榇蟀胩旎ㄙM(fèi)在找圖上了)
回到正題,除了色彩之外,最常見(jiàn)的還是各個(gè)元素,位置之間的親近。設(shè)計(jì)的有趣之處就在于此。你設(shè)定了很多小的東西,很多人看不大出,等到揭曉答案的環(huán)節(jié),才有人恍然大悟,原來(lái)如此。當(dāng)你看到以下兩個(gè)例子的時(shí)候,你看著排得很大氣,但是你知道是怎么才能排出來(lái)的么?

ad70585cd66ca801219c77efd132.jpg

再來(lái)一個(gè)更加貼近網(wǎng)頁(yè)的案例吧。來(lái)自內(nèi)啥……然后你會(huì)感慨,尼瑪,這滿滿都是套路丫。。。當(dāng)然,要你去原創(chuàng),你確定你行?因?yàn)樵O(shè)計(jì)這門學(xué)問(wèn),絕對(duì)不止我今天講述的這些,除了以上這些定律外,作品的高度,是無(wú)數(shù)個(gè)因素成就的結(jié)果。并非你單獨(dú)掌控某一種定律就能完全做出來(lái)的。如果沒(méi)有遠(yuǎn)超你動(dòng)手能力的審美水平,沒(méi)有日積月累培養(yǎng)起來(lái)的設(shè)計(jì)意識(shí),沒(méi)有對(duì)圖片素材的嚴(yán)格挑選,不選到適合的圖片不罷手的精神,對(duì)細(xì)節(jié)的執(zhí)著追求,沒(méi)有大毅力,沒(méi)有夢(mèng)想,我今天說(shuō)再多的規(guī)則,就算你能理解,也是絕對(duì)做不出來(lái)這樣的設(shè)計(jì)來(lái)的。

最后這個(gè)算是我給內(nèi)部同事的作業(yè)。聽(tīng)完我以上的分析,再來(lái)看看下圖,你能找到它其中用了我今天說(shuō)的多少種手法么?它們又是在哪里呢?


END

其實(shí)一直想做這么一件事情,就是將設(shè)計(jì)語(yǔ)言平實(shí)化,通俗化,推廣傳播給普通人,消除與客戶之間的代溝。也為自己未來(lái)做設(shè)計(jì)使用的一些手法提供依據(jù)。因?yàn)榇蟛糠肿约阂恢倍荚谟?,真的不想一遍又一遍去向客戶去解釋,我為什么要這樣去設(shè)計(jì)。
希望每個(gè)人也不要都小瞧了這些最基礎(chǔ)的定律, 知道容易,行很難。有多少人還停留在知道,但是沒(méi)養(yǎng)成習(xí)慣,總是做不到位的程度呢?
其實(shí)就拿我來(lái)說(shuō),也是總戒不掉少用一些字體。因?yàn)楦杏X(jué)都好的情況下難取舍。所以共勉之。

網(wǎng)站名稱:網(wǎng)頁(yè)設(shè)計(jì)常見(jiàn)表現(xiàn)手法
URL鏈接:http://m.rwnh.cn/news/18824.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、電子商務(wù)定制網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
新和县| 信阳市| 巴林右旗| 曲水县| 天门市| 揭阳市| 武鸣县| 东明县| 昌吉市| 奉节县| 嘉义市| 鹤庆县| 石台县| 阳高县| 萨嘎县| 庆安县| 友谊县| 永宁县| 长岭县| 聂荣县| 滨海县| 云南省| 开平市| 林州市| 沙湾县| 洮南市| 墨脱县| 吴堡县| 郁南县| 公主岭市| 黄大仙区| 顺平县| 郁南县| 乌恰县| 米泉市| 高唐县| 彭州市| 新源县| 图们市| 喀什市| 嘉禾县|