網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?
發(fā)布時(shí)間:2021-12-18 09:51 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

如何讓方正方框/方形元素不死板有創(chuàng)意?今天這篇好文總結(jié)了超多的設(shè)計(jì)方法和實(shí)戰(zhàn)案例,建議閱讀。

常常聽(tīng)見(jiàn)大神說(shuō)設(shè)計(jì)不需要方方正正的,這樣會(huì)顯得死板,沒(méi)有創(chuàng)意。LOW…等等,其實(shí)不然,我認(rèn)為每一種元素,只要在對(duì)的環(huán)境中,去運(yùn)用。相信會(huì)出現(xiàn)讓人耳目一新的效果。

比如我們身邊使用的電腦,冰箱 房屋架構(gòu)等等,都離不開(kāi)方形的支持。雜志中常常會(huì)讓方形元素融入進(jìn)文字或者圖片中間,去突出或去修飾它們。隨著現(xiàn)在技術(shù)越來(lái)發(fā)達(dá),設(shè)計(jì)師也會(huì)將雜志中的一些元素,融入到網(wǎng)頁(yè)設(shè)計(jì)中去。讓網(wǎng)頁(yè)設(shè)計(jì)更加有新意。


作用


下面我們就來(lái)說(shuō)下方形方框在網(wǎng)頁(yè)之中的運(yùn)用。


01:分割


我們已知的分割的元素,主要是線(xiàn)和面 ,其實(shí)方形/方框也是具有分割的作用。在設(shè)計(jì)中運(yùn)用的話(huà)會(huì)讓你的作品別具一格。

下面設(shè)計(jì)作品畫(huà)面中出現(xiàn)了多個(gè)文案信息,這么多的信息集中在一個(gè)畫(huà)面中,如何讓它們變得有主有次呢,為了讓用戶(hù)清晰的閱讀到每一個(gè)單獨(dú)的文案信息,所以設(shè)計(jì)師加入方框的元素,利用大小對(duì)比的關(guān)系,有效的避免了內(nèi)容的沖突和雜亂 。這里的設(shè)計(jì)通過(guò)加方框的元素,使畫(huà)面中的文字也具有一定的強(qiáng)調(diào)作用。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

這塊設(shè)計(jì)也是具有相同的處理方式:

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


02:強(qiáng)調(diào)


如何讓文字內(nèi)容在眾多元素里面突出。 要么弱化其他,要么強(qiáng)化自己,顯然下面設(shè)計(jì)中為了讓用戶(hù)第一視覺(jué)就能看到表達(dá)的文字信息,所以設(shè)計(jì)師利用了方框的元素進(jìn)行了強(qiáng)突出。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面的海報(bào)設(shè)計(jì),也是運(yùn)用到了方框的元素,把用戶(hù)的視覺(jué)焦點(diǎn)聚焦了起來(lái)。既強(qiáng)調(diào)了重要信息也不丟失畫(huà)面的美感和創(chuàng)意。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


03:修飾


當(dāng)我們的在設(shè)計(jì)一個(gè)海報(bào),或者網(wǎng)站頁(yè)面中的一段文字的時(shí)候,有時(shí)候畫(huà)面太單薄,一些設(shè)計(jì)師會(huì)用其他的方式進(jìn)行修飾,但是也有設(shè)計(jì)師利用方框,不一定是完整的方框,這樣整個(gè)畫(huà)面一定會(huì)別具一格。下面來(lái)看設(shè)計(jì)案例吧。

下面是一組平面VI的作品,本來(lái)是一個(gè)平平淡淡的名片,但是設(shè)計(jì)師加方框的一角進(jìn)行修飾,瞬間這個(gè)作品變得創(chuàng)意十足了。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面網(wǎng)頁(yè)設(shè)計(jì)中,原本標(biāo)題在大面積的留白中間,變得單薄,導(dǎo)致頁(yè)面的中心不穩(wěn)定,所以設(shè)計(jì)師在標(biāo)題上增加了方框的元素,進(jìn)行輔助修飾作用 ,有效了豐富了標(biāo)題的展示效果。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


04 :色塊對(duì)比讓版面變得有血有肉


設(shè)計(jì)師利用方形的色塊讓網(wǎng)站變得生動(dòng)創(chuàng)新,使網(wǎng)站在布局上面變得有節(jié)奏,有主次,邏輯清晰。下面我們來(lái)看看這些設(shè)計(jì)案例。

下面是一家家具類(lèi)的網(wǎng)站,設(shè)計(jì)師利用方塊的大小來(lái)做對(duì)比 。使得整個(gè)畫(huà)面中間的元素組織起來(lái)變得清晰有條理,讓用戶(hù)在視覺(jué)上變得有層次感, 使得整個(gè)版面變得簡(jiǎn)約清晰。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面這個(gè)建筑公司的首頁(yè),采用了方形的元素進(jìn)行大小層次感的相互結(jié)合起來(lái),讓整個(gè)畫(huà)面變得極其有穩(wěn)重感,讓原本網(wǎng)站上復(fù)雜而多的類(lèi)容,變得條理清晰,干凈簡(jiǎn)潔。同時(shí)在畫(huà)面的版式也是獨(dú)裁新意。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


05:信息引導(dǎo)的作用


在復(fù)雜而多的海報(bào)或者網(wǎng)站架構(gòu)中,利用方框進(jìn)行信息引導(dǎo)是非常有效而且新穎的表現(xiàn)方式。

以下網(wǎng)站是左側(cè)一個(gè)男模特的網(wǎng)站,整個(gè)banner采用了紅色調(diào),設(shè)計(jì)師為了讓用戶(hù)快速往下瀏覽,所有大膽的添加了紅色系的方框,有效的引導(dǎo)了用戶(hù)的視覺(jué),從上而下的瀏覽,同時(shí)使得整個(gè)畫(huà)面不會(huì)出現(xiàn)頭重腳輕的問(wèn)題。另外這樣的處理讓整個(gè)版面設(shè)計(jì)上更加新穎,使得作品脫穎而出。

右邊是阿迪達(dá)斯的一個(gè)品牌網(wǎng)站,設(shè)計(jì)師利用了方形的元素作為視覺(jué)引導(dǎo),將用戶(hù)的視覺(jué)一步一步的從引導(dǎo)下去,了解他們的全部商品。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面一組時(shí)尚的海報(bào)設(shè)計(jì),這里將文字利用方形的規(guī)律進(jìn)行引導(dǎo)排版,讓用戶(hù)有順序的閱讀。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


06:讓文字之間相關(guān)聯(lián)


下面海報(bào)設(shè)計(jì),如果按照正常設(shè)計(jì)師的話(huà),對(duì)于文案的處理方式,肯定會(huì)根據(jù)文案信息以及海報(bào)架構(gòu)進(jìn)行分散排版設(shè)計(jì)。

這樣的處理方式,對(duì)海報(bào)的畫(huà)面要求會(huì)比較高,如果海報(bào)比較亂的話(huà),哪么文案的識(shí)別性就會(huì)降低,為了解決這些問(wèn)題,設(shè)計(jì)師選擇了方框的元素,利用方框講文案信息關(guān)聯(lián)再一起。然后再利用方框的大小,根據(jù)文案內(nèi)容的主次進(jìn)行合理的組織分配。這樣不僅讓視覺(jué)上的到別具一格,而且也降低了畫(huà)面上其他的元素對(duì)文案內(nèi)容的干擾。讓用戶(hù)第一視覺(jué)了解到海報(bào)需要傳達(dá)的信息。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下列海報(bào)設(shè)計(jì)中也利用了方框的元素,讓文案信息相聯(lián)組織在一起。通過(guò)改變方框的大小,來(lái)突出文案信息的主次之分。視覺(jué)上給用戶(hù)舒適的體驗(yàn),畫(huà)面也會(huì)讓人難以忘記。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

如果我們?cè)谠O(shè)計(jì)中充分利用上述幾個(gè)表現(xiàn)方式,相信我們的設(shè)計(jì)一定會(huì)脫穎而出。所以設(shè)計(jì)優(yōu)秀的作品并不難,難的是你去發(fā)現(xiàn)優(yōu)秀作品的規(guī)律。當(dāng)然還有很多點(diǎn)值得我們?nèi)グl(fā)現(xiàn)~


應(yīng)用


上訴講到了方框元素的作用,哪么我們來(lái)說(shuō)說(shuō)方框 方形元素經(jīng)常運(yùn)用在那些地方。


01:網(wǎng)頁(yè)板塊


 方框方形元素,經(jīng)常運(yùn)用于網(wǎng)頁(yè)中的各大板塊,它們能夠有效的將網(wǎng)頁(yè)中的元素變得條理清晰等,那么我們來(lái)看看下面一些案例是如何巧妙的運(yùn)用方框。

下面是一個(gè)旅行網(wǎng)頁(yè)。整個(gè)網(wǎng)站用了大面積的方形元素,利用這些方形的大小和改變長(zhǎng)寬比例來(lái)錯(cuò)列排版,使得整個(gè)網(wǎng)頁(yè)信息分類(lèi)明確,節(jié)奏感十足。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

一些商城網(wǎng)站也融入了方形的元素,有效的管理和整合了各類(lèi)商品信息,同時(shí)也利于網(wǎng)站適配不同端口設(shè)備展示:

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


02:btn按鈕,搜索,表單 等


網(wǎng)頁(yè)中常見(jiàn)的按鈕,其實(shí)近幾年開(kāi)始流行的幽靈按鈕(透明按鈕)就是大量借鑒了方框元素,當(dāng)然實(shí)心按鈕也采用了方形元素。下面我們來(lái)看下運(yùn)用了這些元素的案列。

下面整個(gè)網(wǎng)頁(yè)色調(diào)明亮清新,除了漸變的背景就是內(nèi)容。高飽和度的藍(lán)色背景里有點(diǎn)狀的世界地圖作為紋理點(diǎn)綴,使之不顯得單調(diào)。

大小錯(cuò)落的內(nèi)容靠左對(duì)齊,下面設(shè)計(jì)師在按鈕上利用了框型的元素設(shè)計(jì)了幽靈按鈕,使得整個(gè)文字內(nèi)容搭配更加通透。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

這個(gè)網(wǎng)站使用了視頻作為背景,訪(fǎng)問(wèn)者只需要通過(guò)變化的背景就可以明白組織的工作流程。通過(guò)調(diào)色之后的背景視頻并不影響前景的Logo、設(shè)計(jì)師利用了框型的元素設(shè)計(jì)了幽靈按鈕,使得整個(gè)網(wǎng)站顯得巧妙而優(yōu)雅。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面是網(wǎng)站中一段引導(dǎo)語(yǔ),采用淺灰色的背景加上文字在一起,加上一定的留白,整個(gè)畫(huà)面顯得潔凈而優(yōu)雅。設(shè)計(jì)師在這里采用方形元素來(lái)設(shè)計(jì)了實(shí)心按鈕,使用戶(hù)對(duì)新頁(yè)面起到了引導(dǎo)作用。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面網(wǎng)站是利用了方型/方框的元素,來(lái)設(shè)計(jì)了 表單和搜索框部分,表單部分讓原本復(fù)雜相互干擾的文案信息變得條理清晰,畫(huà)面簡(jiǎn)潔。搜索框部分視覺(jué)強(qiáng)化,引導(dǎo)用戶(hù)進(jìn)入網(wǎng)站搜索獲取內(nèi)容。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


03:圖片


現(xiàn)在越來(lái)越多的方框/方形元素出現(xiàn)在網(wǎng)站圖片中,下面案例是一個(gè)標(biāo)準(zhǔn)的圖文結(jié)合的設(shè)計(jì)案例,設(shè)計(jì)師為了讓圖片和文案左右兩邊的視覺(jué)平衡,于是加入了方框/方形的元素與圖片進(jìn)行結(jié)合。瞬間整個(gè)畫(huà)面變的富有設(shè)計(jì)感起來(lái)了。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面案例圖片中設(shè)計(jì)師為了讓多張圖片進(jìn)行統(tǒng)一 協(xié)調(diào)起來(lái),也加入了方框的元素,給用戶(hù)傳達(dá)了三塊內(nèi)容的體系關(guān)系,讓原本簡(jiǎn)約而優(yōu)雅的畫(huà)面變得多姿多彩。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

一個(gè)人物如何簡(jiǎn)單的讓他在平面中變得有立體感?下面案例設(shè)計(jì)師采用了框型的元素,與人物結(jié)合起來(lái),讓原本沒(méi)有空間感,頭重腳輕的男士,變得穩(wěn)重而富有層次,同時(shí)也抓住了用戶(hù)的視覺(jué)。讓原本平淡的頁(yè)面變得富有創(chuàng)意。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


04:文字


復(fù)雜的文案排版起來(lái)單調(diào),過(guò)于平淡,無(wú)層次感?哪么我們來(lái)看看方框/方形是如何解決這些問(wèn)題的。

下面案例中,設(shè)計(jì)師在這段文案進(jìn)行設(shè)計(jì)排版的時(shí)候,如果素材有限不能放圖片,如何才能讓它們變得富有設(shè)計(jì)感,左右平衡呢?于是設(shè)計(jì)師將左邊的文字與方框元素結(jié)合起來(lái),輕松的解決了這個(gè)問(wèn)題。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面案例中,設(shè)計(jì)師如何巧妙的利用方形元素,將banner 和內(nèi)容兩塊連接呢?原本應(yīng)該放置在banner 上的文字,被放在了方形色塊上,不但在傳統(tǒng)的版式架構(gòu)上得以突破,而且引導(dǎo)了用戶(hù)從上而下的閱讀信息。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面案例中,banner中的文案只有一句話(huà),搭配其他產(chǎn)品。設(shè)計(jì)師利用方框元素,將分散的文字變成了整體,所以使瓶子靠在文字上,給人更安全穩(wěn)定的感覺(jué)。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

下面案例中,設(shè)計(jì)師利用方框元素,將一個(gè)圖形與文字進(jìn)行結(jié)合起來(lái),讓整個(gè)文字的疏密對(duì)比性加強(qiáng),即使沒(méi)有圖片也能 瞬間提升整個(gè)畫(huà)面的創(chuàng)意。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

文字這一塊就不多講啦,還有很多的運(yùn)用,等待你們?nèi)グl(fā)現(xiàn)。


05:VI logo


方框方形的元素如果放在VI 中結(jié)合,是不是很有趣~

以下是1+手機(jī)的Logo ,通過(guò)結(jié)合了方框的一部分,兩邊的線(xiàn)條將用戶(hù)的視覺(jué)引導(dǎo)至+的圖形上去,即使在不了解這個(gè)品牌的用戶(hù) 也能夠快速的閱讀了解這是1+(個(gè)人見(jiàn)解)。

搭配整個(gè)畫(huà)面,大量的留白,左上-右下的視覺(jué)定律,讓畫(huà)面變得簡(jiǎn)約而不簡(jiǎn)單。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


類(lèi)別


這里我就不做細(xì)的分析啦~主要在于大家的靈活運(yùn)用。


01:方框之間的結(jié)合


方框/方框之間的結(jié)合,一般主要是用在復(fù)雜而多的文案內(nèi)容中間,起到相互關(guān)聯(lián)的作用,讓彼此更加的緊密。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?  


02:方形與方框之間的結(jié)合


這樣的方式開(kāi)始流行了,主要的作用是用來(lái)修飾過(guò)于單調(diào)的物體,豐富畫(huà)面的美感,以及平衡左右關(guān)系。往往方框和方形之間會(huì)伴隨著圖片或文字一起出現(xiàn)。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


03:用于標(biāo)簽部分


實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

表單按鈕之類(lèi)的就不做舉例子啦,大家都知道~


04:大的方框/方形


大的方框/方形主要運(yùn)用于海報(bào)之中,或者網(wǎng)頁(yè)的架構(gòu)上等較多的信息內(nèi)容中。

主要作用在 起到畫(huà)面協(xié)調(diào),強(qiáng)調(diào) ,區(qū)分等等用途。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?


05:殘缺的方框/方形


這類(lèi)元素往往結(jié)合文案一起展示,主要通過(guò)方框的線(xiàn)條將用戶(hù)的視覺(jué)中心指引到作者想要表達(dá)的內(nèi)容。

實(shí)戰(zhàn)干貨!?網(wǎng)頁(yè)設(shè)計(jì)中如何運(yùn)用方框/方形元素?

HTML基礎(chǔ)視頻教程
我要自學(xué)網(wǎng)商城 ¥30 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC