2022-06-02 分類: 網站建設
網頁設計,web design,又稱為Web UI design,WUI design,WUI,是根據(jù)企業(yè)希望向瀏覽者傳遞的信息包括產品、服務、理念、文化,進行網站功能策劃,然后進行的頁面設計美化工作。作為企業(yè)對外宣傳物料的其中一種,精美的網頁設計,對于提升企業(yè)的互聯(lián)網品牌形象至關重要。
什么是破?
破:行話“破畫面”。
是打破規(guī)矩與常見的一種設計技巧,它類似于平面構成中的變異處理。
破圖的作用
今天我要分享的目錄有
一、破圖的2種應用
二、破圖的3種方法
點破
大破
小破
_____________________________________________________________________
破的二種應用:
一破:破常規(guī)
打破一些常見的設計形式,或整體,或細節(jié)。這些都可是“破圖”的常用方式。
二破:破細節(jié)
在視覺元素與版式的局部,圖像與文字的局部等,做一些突破性的處理,用于加強細節(jié)表現(xiàn)力、提高整體視覺的沖擊力。
破圖3種方法:
1、點破
點破,是設計眼前一亮作品的開始。一個立意不同的點子,能更好的引導用戶體驗與眾不同的視覺設計,直觀且討巧的抓住用戶的眼球,使之印象深刻,真正起到視覺傳達的目的性。
點,指的是設計切入點。
破,指的是前期對需求、對目的的整理和分析,通過求異的設計出發(fā)點,找到與眾不同的表現(xiàn)形式,從而點出整體風格的第一步。
左圖:某國外礦泉水的產品專題頁設計
點破視覺的切入點就是:地表深處的礦物質水。通過突出產品優(yōu)勢,明確告訴用戶產品的與眾不同之處是什么?設計師通過整體頁面設計,直觀的讓用戶了解到產品的來源(深挖地表深處幾千米礦物質水而成);
右圖:中國的衛(wèi)龍辣條天貓官網設計
點破視覺的切入點就是:
老鄉(xiāng),加入我們一起搶辣條吧。頁面里各種“綱領性”的文案,鬼畜風的gif動效,滿屏清新脫俗的大字報風格,讓人感覺瞬間穿越回了60年代?!袄相l(xiāng),加入我們雙11搶辣條,”模仿了史上最成功的廣告,再加上一句親切的承諾:“全村包郵”。從文案策劃到視覺表現(xiàn)都非常不錯,打破了雙11來臨前各種店鋪,翻新式的促銷設計。
_____________________________________________________________________
點破在設計中怎么用?
下面介紹3種常見的處理手法:
1.故事的場景化
看圖1:
酒類網站:點破視覺的切入點就是:設計師以霓虹燈管與造型各異的裝飾元素為主,直奔主題;斑駁的肌理背景哄托出墻面的質感與灑吧的氛圍感;霓虹燈光的裝飾元素擴大出現(xiàn),形成獨特風格;帶有漸變的大字母與清晰的產品拍攝,讓用戶細細品味產品特色;霓虹光的變化,是這個網站的特色之處,也是設計師抓住了最本質元素的體現(xiàn);
2頁面的故事性
看圖2:
宣傳官網設計
點破視覺的切入點就是:(利用視覺滾動技術還原漢堡從到封裝再到體驗店的過程)
頁面視覺營造出一個歡快有趣的漢堡世界。
看圖3:
windows一代一代的變化史
點破視覺的切入點就是(以時間的角度還原變化的時間)
從1985年到產品蛋生 再到 藍屏的DOS界面(PS:當時學校用的還是win還有版本的選擇,那會的機箱還是橫著放的),到win95的時候 微軟發(fā)布了第一代操作系統(tǒng) WIN95 ,深灰色的開始菜單設計 豎著的主機箱!1998年的時候 增加了光驅和QUICK一款音頻、視頻的軟件;到2001年的WINXP——再到2015的WIN10 扁平處理;
3.文案的畫面感
看圖4
銀泰3周年慶預熱會場設計
文案以“泰給力 5折封頂不留余力”為主,給人一種即將上演的價格戰(zhàn)一樣“驚心動魄”。設計師也正好通過對文案的深度詮釋,把整體設計構思出一種一種“引爆”的緊張感;
大破
下面介紹3種常見的處理手法:
1.破布局
網頁設計中的布局樣式,在2013年前大部分都以中規(guī)中矩、模版化的方框風格為主。給人比較呆板和約束的感覺。而在此之后的幾年間,逐漸的以卡片式、大色塊、扁平化的設計趨勢為主,在整體的布局樣式上打破早前的“方框和規(guī)矩的印象”,給人感覺更加靈活和多變。
看圖1:整體布局以一條曲折蜿蜒的公路為主,打破傳統(tǒng)布局中的條框感;
看圖2:整體的布局雖然沒有圖1做那么大的破處理,還是隱約能看出規(guī)矩的方框元素,但是在方框以外的裝飾元素就打破了傳統(tǒng)布局的表現(xiàn);
看圖3:打破傳統(tǒng)的多列式、方框式的布局樣子,整體布局以衣服的輪廓為主,合理安排了各種信息;
破布局的3種方式
(扔掉死板的方框)
(自由放置)
(加入裝飾路徑)
_____________________________________________________________________
1.柵格式
柵格,就是通過對信息的整理和分級,利用網格的組合與分離,合并與折分,大小與顏色等的設計形式,對要傳遞的信息進行層級分類,最后實現(xiàn)對規(guī)矩的布局樣式進行打破。
從上述的4個案例中我們不難發(fā)現(xiàn),打破布局的規(guī)律之一就是(扔掉死板的方框)
要點:
打破傳統(tǒng)布局的方框印象,利用網格的多變實現(xiàn)對從前橫平豎直布局的破;布局的樣式并非只有直線、方框。并非只有規(guī)矩的放置;利用柵格處理時,需要控制好每個柵格間的結構劃分,從而更好的分清信息的主次關系和柵格塊的大小對比;
2.自由式
如果說柵格式是種理性突破橫平豎直布局的方式,那么自由式的布局,就是感性破布局的自由排版方式之一。
從上述的4個案例中我們不難發(fā)現(xiàn),打破布局的規(guī)律之二就是(自由放置)
要點:
自由式的排版布局更適合于信息量比較小的專題單頁中;例如:產品官網首頁、時尚類的單品頁等;自由式的排版并非是無規(guī)律,在整體中求變化,在變化中尋求對齊和統(tǒng)一;
3、路徑式
路徑是最為自由形式之一,現(xiàn)階段的設計常見到的有s型、z型、斜線型等。路徑式的布局與自由式類似,但是路徑式更多的是,通過在布局中加入具有引導性的線形裝飾元素,讓頁面更加的有設計感。
從上述的案例中我們不難發(fā)現(xiàn),破布局的規(guī)律之三就是(加入裝飾元素)
要點:
2.破角度
打破常見圖像出現(xiàn)的角度,可以使圖像的表現(xiàn)力更有沖擊力。在以強調速度和動感的需求中,獨特且標新立異的視角往往是打破畫面的利器之一。
要點:
3.破色彩
色彩,無疑是第一時間吸引用戶眼球的設計語言。在以扁平化風格為主的現(xiàn)在,類似的排版越來越多,作品也越來越同類化。嘗試鮮亮的顏色和漸變色,也是打破畫面簡單的處理技巧。
要點:
小破,指的是對細節(jié)或者邊角的打破處理方式,它打破了條框以內的某個角,使人物或者商品破出畫面的某個邊。
下面介紹3種常見的處理手法:
1.破個角
破角的處理,使人有種呼之欲出的視覺印象;它更像是扔掉了那些條條框框,去用力打破某個邊角的方式。它使元素更加靈活的呈現(xiàn),也使畫面細節(jié)更加的到位;
要點:
2.破出去
讓設計元素部分或者完整部分破出規(guī)矩的位置,給人視覺的舒服感;
試想如果將某元素置入到某矩形內,就會給一種很憋氣感受。而如果讓元素破出某個形狀后,就繪給個猶如”打開天窗說亮話“的通透感。
要點:
3、破層次
打破層次的作用就是讓主體元素置于視覺前,使得人物、產品更加的突出、更有視覺沖擊力,也使主體元素有種近在咫尺的視覺體驗。
要點:
最后
對我來說,破圖不僅是設計的一種處理技巧。破圖更像是一種扔掉各種瓶頸,突破心境不斷突破自我的一種設計執(zhí)念。
再回顧一下
破圖的作用:
破圖的3種方法:
1、點破
點破,是設計眼前一亮作品的開始。一個立意不同的點子,能更好的引導用戶體驗與眾不同的視覺設計,直觀且討巧的抓住用戶的眼球,使之印象深刻,真正起到視覺傳達的目的性。
2、大破
大,指的是從整體上做大幅度的風格設計。
破,指的是打破傳統(tǒng)的排版和布局。
3、小破
小破,指的是對細節(jié)或者邊角的打破處理方式,它打破了條框以內的某個角,使人物或者商品破出畫面的某個邊。
文章標題:網頁設計中的破圖3法
網頁URL:http://m.rwnh.cn/news15/162465.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供關鍵詞優(yōu)化、定制網站、建站公司、靜態(tài)網站、Google、移動網站建設
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內容