網頁設計，web design，又稱為Web UI design，WUI design，WUI，是根據企業希望向瀏覽者傳遞的信息包括產品、服務、理念、文化，進行網站功能策劃，然后進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對于提升企業的互聯網品牌形象至關重要。

網頁設計中的破圖3法

什么是破?

破：行話“破畫面”。

是打破規矩與常見的一種設計技巧，它類似于平面構成中的變異處理。

破圖的作用

• 讓人眼前一亮
• 有吸引人的視覺焦點
• 打破條框的約束
• 增加畫面層次

今天我要分享的目錄有

一、破圖的2種應用

二、破圖的3種方法

點破

大破

小破

_____________________________________________________________________

破的二種應用：

一破：破常規

打破一些常見的設計形式，或整體，或細節。這些都可是“破圖”的常用方式。

二破：破細節

在視覺元素與版式的局部，圖像與文字的局部等，做一些突破性的處理，用于加強細節表現力、提高整體視覺的沖擊力。

破圖3種方法：

1. 點破
2. 大破
3. 小破

1、點破

點破，是設計眼前一亮作品的開始。一個立意不同的點子，能更好的引導用戶體驗與眾不同的視覺設計，直觀且討巧的抓住用戶的眼球，使之印象深刻，真正起到視覺傳達的目的性。

點，指的是設計切入點。

破，指的是前期對需求、對目的的整理和分析，通過求異的設計出發點，找到與眾不同的表現形式，從而點出整體風格的第一步。

左圖：某國外礦泉水的產品專題頁設計

點破視覺的切入點就是：地表深處的礦物質水。通過突出產品優勢，明確告訴用戶產品的與眾不同之處是什么?設計師通過整體頁面設計，直觀的讓用戶了解到產品的來源(深挖地表深處幾千米礦物質水而成);

右圖：中國的衛龍辣條天貓官網設計

點破視覺的切入點就是：

老鄉，加入我們一起搶辣條吧。頁面里各種“綱領性”的文案，鬼畜風的gif動效，滿屏清新脫俗的大字報風格，讓人感覺瞬間穿越回了60年代。“老鄉，加入我們雙11搶辣條，”模仿了史上最成功的廣告，再加上一句親切的承諾：“全村包郵”。從文案策劃到視覺表現都非常不錯，打破了雙11來臨前各種店鋪，翻新式的促銷設計。

_____________________________________________________________________

點破在設計中怎么用?

下面介紹3種常見的處理手法：

1.故事的場景化

看圖1:

酒類網站：點破視覺的切入點就是：設計師以霓虹燈管與造型各異的裝飾元素為主，直奔主題;斑駁的肌理背景哄托出墻面的質感與灑吧的氛圍感;霓虹燈光的裝飾元素擴大出現，形成獨特風格;帶有漸變的大字母與清晰的產品拍攝，讓用戶細細品味產品特色;霓虹光的變化，是這個網站的特色之處，也是設計師抓住了最本質元素的體現;

2頁面的故事性

看圖2:

宣傳官網設計

點破視覺的切入點就是：(利用視覺滾動技術還原漢堡從到封裝再到體驗店的過程)

頁面視覺營造出一個歡快有趣的漢堡世界。

看圖3:

windows一代一代的變化史

點破視覺的切入點就是(以時間的角度還原變化的時間)

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

3.文案的畫面感

看圖4

銀泰3周年慶預熱會場設計

文案以“泰給力 5折封頂不留余力”為主，給人一種即將上演的價格戰一樣“驚心動魄”。設計師也正好通過對文案的深度詮釋，把整體設計構思出一種一種“引爆”的緊張感;

大破

• 大破是對常見設計，常見手法的另類思考。
• 大，指的是從整體上做大幅度的風格設計。
• 破，指的是打破傳統的排版和布局。

下面介紹3種常見的處理手法：

1.破布局

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

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

看圖2：整體的布局雖然沒有圖1做那么大的破處理，還是隱約能看出規矩的方框元素，但是在方框以外的裝飾元素就打破了傳統布局的表現;

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

破布局的3種方式

(扔掉死板的方框)

(自由放置)

(加入裝飾路徑)

_____________________________________________________________________

1.柵格式

柵格，就是通過對信息的整理和分級，利用網格的組合與分離，合并與折分，大小與顏色等的設計形式，對要傳遞的信息進行層級分類，最后實現對規矩的布局樣式進行打破。

從上述的4個案例中我們不難發現，打破布局的規律之一就是(扔掉死板的方框)

要點：

打破傳統布局的方框印象，利用網格的多變實現對從前橫平豎直布局的破;布局的樣式并非只有直線、方框。并非只有規矩的放置;利用柵格處理時，需要控制好每個柵格間的結構劃分，從而更好的分清信息的主次關系和柵格塊的大小對比;

2.自由式

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

從上述的4個案例中我們不難發現，打破布局的規律之二就是(自由放置)

要點：

自由式的排版布局更適合于信息量比較小的專題單頁中;例如：產品官網首頁、時尚類的單品頁等;自由式的排版并非是無規律，在整體中求變化，在變化中尋求對齊和統一;

3、路徑式

路徑是最為自由形式之一，現階段的設計常見到的有s型、z型、斜線型等。路徑式的布局與自由式類似，但是路徑式更多的是，通過在布局中加入具有引導性的線形裝飾元素，讓頁面更加的有設計感。

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

要點：

• 路徑式的應用也僅適用于信息量不大的專題或者單頁設計中;
• 路徑式的元素出現僅僅是裝飾而非主要，切誤喧賓奪主;
• 關于利用路徑的作用，更多的是用于視覺引導，而非無意添加;

2.破角度

打破常見圖像出現的角度，可以使圖像的表現力更有沖擊力。在以強調速度和動感的需求中，獨特且標新立異的視角往往是打破畫面的利器之一。

要點：

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

3.破色彩

色彩，無疑是第一時間吸引用戶眼球的設計語言。在以扁平化風格為主的現在，類似的排版越來越多，作品也越來越同類化。嘗試鮮亮的顏色和漸變色，也是打破畫面簡單的處理技巧。

要點：

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

小破，指的是對細節或者邊角的打破處理方式，它打破了條框以內的某個角，使人物或者商品破出畫面的某個邊。

下面介紹3種常見的處理手法：

1.破個角

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

要點：

1. 破一處，遠比破多處，視覺效果更集中;
2. 破個角的作用可以加強畫面的真實感;
3. 破個角的處理方式常用于一些人物的設計中;

2.破出去

讓設計元素部分或者完整部分破出規矩的位置，給人視覺的舒服感;

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

要點：

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

3、破層次

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

要點：

1. 常見的幾種玩法是主體元素壓在前面、壓在上面，使主要元素有種跳出畫面的感覺;
2. 打破層次的元素不要過多，一個視覺點應只有一處最好，起到聚集視線的作用;

最后

對我來說，破圖不僅是設計的一種處理技巧。破圖更像是一種扔掉各種瓶頸，突破心境不斷突破自我的一種設計執念。

再回顧一下

破圖的作用：

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

破圖的3種方法：

1、點破

點破，是設計眼前一亮作品的開始。一個立意不同的點子，能更好的引導用戶體驗與眾不同的視覺設計，直觀且討巧的抓住用戶的眼球，使之印象深刻，真正起到視覺傳達的目的性。

2、大破

大，指的是從整體上做大幅度的風格設計。

破，指的是打破傳統的排版和布局。

3、小破

小破，指的是對細節或者邊角的打破處理方式，它打破了條框以內的某個角，使人物或者商品破出畫面的某個邊。

文章標題：網頁設計中的破圖3法
網頁URL：http://www.js-pz168.com/news15/162465.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、定制網站、建站公司、靜態網站、Google、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯