亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當前位置:首頁 > 新聞資訊 > 建站知識
實戰(zhàn)干貨!?網(wǎng)頁設計中如何運用方框/方形元素?

2021-08-04

1969

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


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

作用

下面我們就來說下方形方框在網(wǎng)頁之中的運用。


01:分割

我們已知的分割的元素,主要是線和面 ,其實方形/方框也是具有分割的作用。在設計中運用的話會讓你的作品別具一格。


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




02:強調(diào)

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


03:修飾

當我們的在設計一個海報,或者網(wǎng)站頁面中的一段文字的時候,有時候畫面太單薄,一些設計師會用其他的方式進行修飾,但是也有設計師利用方框,不一定是完整的方框,這樣整個畫面一定會別具一格。下面來看設計案例吧。


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

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




04 :色塊對比讓版面變得有血有肉

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


下面是一家家具類的網(wǎng)站,設計師利用方塊的大小來做對比 。使得整個畫面中間的元素組織起來變得清晰有條理,讓用戶在視覺上變得有層次感, 使得整個版面變得簡約清晰。

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



05:信息引導的作用

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


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


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

下面一組時尚的海報設計,這里將文字利用方形的規(guī)律進行引導排版,讓用戶有順序的閱讀。


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

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


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

下列海報設計中也利用了方框的元素,讓文案信息相聯(lián)組織在一起。通過改變方框的大小,來突出文案信息的主次之分。視覺上給用戶舒適的體驗,畫面也會讓人難以忘記。




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


應用

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


01:網(wǎng)頁板塊

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


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


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

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


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


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


03:圖片

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

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




04:文字

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


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

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




05:VI logo

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


以下是1+手機的Logo ,通過結(jié)合了方框的一部分,兩邊的線條將用戶的視覺引導至+的圖形上去,即使在不了解這個品牌的用戶 也能夠快速的閱讀了解這是1+(個人見解)。


搭配整個畫面,大量的留白,左上-右下的視覺定律,讓畫面變得簡約而不簡單。


免費咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務 QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預約資深顧問

信息保護中,請放心填寫
關閉
免費獲取方案