網(wǎng)頁(yè)設(shè)計(jì)，web design，又稱為Web UI design，WUI design，WUI，是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息包括產(chǎn)品、服務(wù)、理念、文化，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

網(wǎng)頁(yè)設(shè)計(jì)中的破圖3法

什么是破?

破：行話“破畫面”。

是打破規(guī)矩與常見(jiàn)的一種設(shè)計(jì)技巧，它類似于平面構(gòu)成中的變異處理。

破圖的作用

• 讓人眼前一亮
• 有吸引人的視覺(jué)焦點(diǎn)
• 打破條框的約束
• 增加畫面層次

今天我要分享的目錄有

一、破圖的2種應(yīng)用

二、破圖的3種方法

點(diǎn)破

大破

小破

_____________________________________________________________________

破的二種應(yīng)用：

一破：破常規(guī)

打破一些常見(jiàn)的設(shè)計(jì)形式，或整體，或細(xì)節(jié)。這些都可是“破圖”的常用方式。

二破：破細(xì)節(jié)

在視覺(jué)元素與版式的局部，圖像與文字的局部等，做一些突破性的處理，用于加強(qiáng)細(xì)節(jié)表現(xiàn)力、提高整體視覺(jué)的沖擊力。

破圖3種方法：

1. 點(diǎn)破
2. 大破
3. 小破

1、點(diǎn)破

點(diǎn)破，是設(shè)計(jì)眼前一亮作品的開始。一個(gè)立意不同的點(diǎn)子，能更好的引導(dǎo)用戶體驗(yàn)與眾不同的視覺(jué)設(shè)計(jì)，直觀且討巧的抓住用戶的眼球，使之印象深刻，真正起到視覺(jué)傳達(dá)的目的性。

點(diǎn)，指的是設(shè)計(jì)切入點(diǎn)。

破，指的是前期對(duì)需求、對(duì)目的的整理和分析，通過(guò)求異的設(shè)計(jì)出發(fā)點(diǎn)，找到與眾不同的表現(xiàn)形式，從而點(diǎn)出整體風(fēng)格的第一步。

左圖：某國(guó)外礦泉水的產(chǎn)品專題頁(yè)設(shè)計(jì)

點(diǎn)破視覺(jué)的切入點(diǎn)就是：地表深處的礦物質(zhì)水。通過(guò)突出產(chǎn)品優(yōu)勢(shì)，明確告訴用戶產(chǎn)品的與眾不同之處是什么?設(shè)計(jì)師通過(guò)整體頁(yè)面設(shè)計(jì)，直觀的讓用戶了解到產(chǎn)品的來(lái)源(深挖地表深處幾千米礦物質(zhì)水而成);

右圖：中國(guó)的衛(wèi)龍辣條天貓官網(wǎng)設(shè)計(jì)

點(diǎn)破視覺(jué)的切入點(diǎn)就是：

老鄉(xiāng)，加入我們一起搶辣條吧。頁(yè)面里各種“綱領(lǐng)性”的文案，鬼畜風(fēng)的gif動(dòng)效，滿屏清新脫俗的大字報(bào)風(fēng)格，讓人感覺(jué)瞬間穿越回了60年代?！袄相l(xiāng)，加入我們雙11搶辣條，”模仿了史上最成功的廣告，再加上一句親切的承諾：“全村包郵”。從文案策劃到視覺(jué)表現(xiàn)都非常不錯(cuò)，打破了雙11來(lái)臨前各種店鋪，翻新式的促銷設(shè)計(jì)。

_____________________________________________________________________

點(diǎn)破在設(shè)計(jì)中怎么用?

下面介紹3種常見(jiàn)的處理手法：

1.故事的場(chǎng)景化

看圖1:

酒類網(wǎng)站：點(diǎn)破視覺(jué)的切入點(diǎn)就是：設(shè)計(jì)師以霓虹燈管與造型各異的裝飾元素為主，直奔主題;斑駁的肌理背景哄托出墻面的質(zhì)感與灑吧的氛圍感;霓虹燈光的裝飾元素?cái)U(kuò)大出現(xiàn)，形成獨(dú)特風(fēng)格;帶有漸變的大字母與清晰的產(chǎn)品拍攝，讓用戶細(xì)細(xì)品味產(chǎn)品特色;霓虹光的變化，是這個(gè)網(wǎng)站的特色之處，也是設(shè)計(jì)師抓住了最本質(zhì)元素的體現(xiàn);

2頁(yè)面的故事性

看圖2:

宣傳官網(wǎng)設(shè)計(jì)

點(diǎn)破視覺(jué)的切入點(diǎn)就是：(利用視覺(jué)滾動(dòng)技術(shù)還原漢堡從到封裝再到體驗(yàn)店的過(guò)程)

頁(yè)面視覺(jué)營(yíng)造出一個(gè)歡快有趣的漢堡世界。

看圖3:

windows一代一代的變化史

點(diǎn)破視覺(jué)的切入點(diǎn)就是(以時(shí)間的角度還原變化的時(shí)間)

從1985年到產(chǎn)品蛋生 再到 藍(lán)屏的DOS界面(PS:當(dāng)時(shí)學(xué)校用的還是win還有版本的選擇，那會(huì)的機(jī)箱還是橫著放的)，到win95的時(shí)候 微軟發(fā)布了第一代操作系統(tǒng) WIN95 ，深灰色的開始菜單設(shè)計(jì) 豎著的主機(jī)箱!1998年的時(shí)候 增加了光驅(qū)和QUICK一款音頻、視頻的軟件;到2001年的WINXP——再到2015的WIN10 扁平處理;

3.文案的畫面感

看圖4

銀泰3周年慶預(yù)熱會(huì)場(chǎng)設(shè)計(jì)

文案以“泰給力 5折封頂不留余力”為主，給人一種即將上演的價(jià)格戰(zhàn)一樣“驚心動(dòng)魄”。設(shè)計(jì)師也正好通過(guò)對(duì)文案的深度詮釋，把整體設(shè)計(jì)構(gòu)思出一種一種“引爆”的緊張感;

大破

• 大破是對(duì)常見(jiàn)設(shè)計(jì)，常見(jiàn)手法的另類思考。
• 大，指的是從整體上做大幅度的風(fēng)格設(shè)計(jì)。
• 破，指的是打破傳統(tǒng)的排版和布局。

下面介紹3種常見(jiàn)的處理手法：

1.破布局

網(wǎng)頁(yè)設(shè)計(jì)中的布局樣式，在2013年前大部分都以中規(guī)中矩、模版化的方框風(fēng)格為主。給人比較呆板和約束的感覺(jué)。而在此之后的幾年間，逐漸的以卡片式、大色塊、扁平化的設(shè)計(jì)趨勢(shì)為主，在整體的布局樣式上打破早前的“方框和規(guī)矩的印象”，給人感覺(jué)更加靈活和多變。

看圖1：整體布局以一條曲折蜿蜒的公路為主，打破傳統(tǒng)布局中的條框感;

看圖2：整體的布局雖然沒(méi)有圖1做那么大的破處理，還是隱約能看出規(guī)矩的方框元素，但是在方框以外的裝飾元素就打破了傳統(tǒng)布局的表現(xiàn);

看圖3：打破傳統(tǒng)的多列式、方框式的布局樣子，整體布局以衣服的輪廓為主，合理安排了各種信息;

破布局的3種方式

(扔掉死板的方框)

(自由放置)

(加入裝飾路徑)

_____________________________________________________________________

1.柵格式

柵格，就是通過(guò)對(duì)信息的整理和分級(jí)，利用網(wǎng)格的組合與分離，合并與折分，大小與顏色等的設(shè)計(jì)形式，對(duì)要傳遞的信息進(jìn)行層級(jí)分類，最后實(shí)現(xiàn)對(duì)規(guī)矩的布局樣式進(jìn)行打破。

從上述的4個(gè)案例中我們不難發(fā)現(xiàn)，打破布局的規(guī)律之一就是(扔掉死板的方框)

要點(diǎn)：

打破傳統(tǒng)布局的方框印象，利用網(wǎng)格的多變實(shí)現(xiàn)對(duì)從前橫平豎直布局的破;布局的樣式并非只有直線、方框。并非只有規(guī)矩的放置;利用柵格處理時(shí)，需要控制好每個(gè)柵格間的結(jié)構(gòu)劃分，從而更好的分清信息的主次關(guān)系和柵格塊的大小對(duì)比;

2.自由式

如果說(shuō)柵格式是種理性突破橫平豎直布局的方式，那么自由式的布局，就是感性破布局的自由排版方式之一。

從上述的4個(gè)案例中我們不難發(fā)現(xiàn)，打破布局的規(guī)律之二就是(自由放置)

要點(diǎn)：

自由式的排版布局更適合于信息量比較小的專題單頁(yè)中;例如：產(chǎn)品官網(wǎng)首頁(yè)、時(shí)尚類的單品頁(yè)等;自由式的排版并非是無(wú)規(guī)律，在整體中求變化，在變化中尋求對(duì)齊和統(tǒng)一;

3、路徑式

路徑是最為自由形式之一，現(xiàn)階段的設(shè)計(jì)常見(jiàn)到的有s型、z型、斜線型等。路徑式的布局與自由式類似，但是路徑式更多的是，通過(guò)在布局中加入具有引導(dǎo)性的線形裝飾元素，讓頁(yè)面更加的有設(shè)計(jì)感。

從上述的案例中我們不難發(fā)現(xiàn)，破布局的規(guī)律之三就是(加入裝飾元素)

要點(diǎn)：

• 路徑式的應(yīng)用也僅適用于信息量不大的專題或者單頁(yè)設(shè)計(jì)中;
• 路徑式的元素出現(xiàn)僅僅是裝飾而非主要，切誤喧賓奪主;
• 關(guān)于利用路徑的作用，更多的是用于視覺(jué)引導(dǎo)，而非無(wú)意添加;

2.破角度

打破常見(jiàn)圖像出現(xiàn)的角度，可以使圖像的表現(xiàn)力更有沖擊力。在以強(qiáng)調(diào)速度和動(dòng)感的需求中，獨(dú)特且標(biāo)新立異的視角往往是打破畫面的利器之一。

要點(diǎn)：

1. 不一樣的俯視、平視、仰視等角度都可以讓圖像呈現(xiàn)的方式更加的新鮮化;
2. 在以圖像為主的視覺(jué)中，打破圖像出現(xiàn)的常規(guī)角度后，其實(shí)也是讓作品眼前一亮的另一種方式;

3.破色彩

色彩，無(wú)疑是第一時(shí)間吸引用戶眼球的設(shè)計(jì)語(yǔ)言。在以扁平化風(fēng)格為主的現(xiàn)在，類似的排版越來(lái)越多，作品也越來(lái)越同類化。嘗試鮮亮的顏色和漸變色，也是打破畫面簡(jiǎn)單的處理技巧。

要點(diǎn)：

• 大膽的去嘗試使用不同的顏色，但一定要確保他們和你想要表達(dá)的內(nèi)容和諧一致，不能沖突。
• 鮮艷并不是刺眼;要點(diǎn)：

小破，指的是對(duì)細(xì)節(jié)或者邊角的打破處理方式，它打破了條框以內(nèi)的某個(gè)角，使人物或者商品破出畫面的某個(gè)邊。

下面介紹3種常見(jiàn)的處理手法：

1.破個(gè)角

破角的處理，使人有種呼之欲出的視覺(jué)印象;它更像是扔掉了那些條條框框，去用力打破某個(gè)邊角的方式。它使元素更加靈活的呈現(xiàn)，也使畫面細(xì)節(jié)更加的到位;

要點(diǎn)：

1. 破一處，遠(yuǎn)比破多處，視覺(jué)效果更集中;
2. 破個(gè)角的作用可以加強(qiáng)畫面的真實(shí)感;
3. 破個(gè)角的處理方式常用于一些人物的設(shè)計(jì)中;

2.破出去

讓設(shè)計(jì)元素部分或者完整部分破出規(guī)矩的位置，給人視覺(jué)的舒服感;

試想如果將某元素置入到某矩形內(nèi)，就會(huì)給一種很憋氣感受。而如果讓元素破出某個(gè)形狀后，就繪給個(gè)猶如”打開天窗說(shuō)亮話“的通透感。

要點(diǎn)：

1. 元素的部分突破會(huì)有一種敞快感，像是打開了天窗一樣透氣;
2. 元素的整體突破出條條框框后，給人一種自由的、靈活的感覺(jué);

3、破層次

打破層次的作用就是讓主體元素置于視覺(jué)前，使得人物、產(chǎn)品更加的突出、更有視覺(jué)沖擊力，也使主體元素有種近在咫尺的視覺(jué)體驗(yàn)。

要點(diǎn)：

1. 常見(jiàn)的幾種玩法是主體元素壓在前面、壓在上面，使主要元素有種跳出畫面的感覺(jué);
2. 打破層次的元素不要過(guò)多，一個(gè)視覺(jué)點(diǎn)應(yīng)只有一處最好，起到聚集視線的作用;

最后

對(duì)我來(lái)說(shuō)，破圖不僅是設(shè)計(jì)的一種處理技巧。破圖更像是一種扔掉各種瓶頸，突破心境不斷突破自我的一種設(shè)計(jì)執(zhí)念。

再回顧一下

破圖的作用：

1. 讓人眼前一亮
2. 有吸引人的視覺(jué)焦點(diǎn)
3. 打破條框的約束
4. 增加畫面層次

破圖的3種方法：

1、點(diǎn)破

點(diǎn)破，是設(shè)計(jì)眼前一亮作品的開始。一個(gè)立意不同的點(diǎn)子，能更好的引導(dǎo)用戶體驗(yàn)與眾不同的視覺(jué)設(shè)計(jì)，直觀且討巧的抓住用戶的眼球，使之印象深刻，真正起到視覺(jué)傳達(dá)的目的性。

2、大破

大，指的是從整體上做大幅度的風(fēng)格設(shè)計(jì)。

破，指的是打破傳統(tǒng)的排版和布局。

3、小破

小破，指的是對(duì)細(xì)節(jié)或者邊角的打破處理方式，它打破了條框以內(nèi)的某個(gè)角，使人物或者商品破出畫面的某個(gè)邊。

海淘科技不僅提供，文章下載，點(diǎn)擊：網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)中的破圖3法。而且提供搜索引擎seo推廣文章和網(wǎng)站建設(shè)服務(wù)。