1. Home
  2. /
  3. 網頁設計
  4. /
  5. ​網頁設計中如何運用方框/方形元素?

​網頁設計中如何運用方框/方形元素?

常常聽見大神說設計不需要方方正正的,這樣會顯得死板,沒有創意。LOW…等等,其實不然,我認為每一種元素,只要在對的環境中,去運用。相信會出現讓人耳目一新的效果。 比如我們身邊使用的電腦,冰箱房屋架構等等,都離不開方形的支持。雜誌中常常會讓方形元素融入進文字或者圖片中間,去突出或去修飾它們。隨著現在技術越來發達,設計師也會將雜誌中的一些元素,融入到網頁設計中去。讓網頁設計更加有新意。

作用

下面我們就來說下方形方框在網頁之中的運用。

01:分割

我們已知的分割的元素,主要是線和麵,其實方形/方框也是具有分割的作用。在設計中運用的話會讓你的作品別具一格。
下面設計作品畫面中出現了多個文案信息,這麼多的信息集中在一個畫面中,如何讓它們變得有主有次呢,為了讓用戶清晰的閱讀到每一個單獨的文案信息,所以設計師加入方框的元素,利用大小對比的關係,有效的避免了內容的衝突和雜亂。這裡的設計通過加方框的元素,使畫面中的文字也具有一定的強調作用。


這塊設計也是具有相同的處理方式:

02:強調

如何讓文字內容在眾多元素裡面突出。要弱化其他,要強化自己,顯然下面設計中為了讓用戶第一視覺就能看到表達的文字信息,所以設計師利用了方框的元素進行了強突出。 下面的海報設計,也是運用到了方框的元素,把用戶的視覺焦點聚焦了起來。既強調了重要信息也不丟失畫面的美感和創意。

03:修飾

當我們的在設計一個海報,或者網站頁面中的一段文字的時候,有時候畫面太單薄,一些設計師會用其他的方式進行修飾,但是也有設計師利用方框,不一定是完整的方框,這樣整個畫面一定會別具一格。下面來看設計案例吧。
下面是一組平面VI的作品,本來是一個平平淡淡的名片,但是設計師加方框的一角進行修飾,瞬間這個作品變得創意十足了。

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

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

設計師利用方形的色塊讓網站變得生動創新,使網站在佈局上面變得有節奏,有主次,邏輯清晰。下面我們來看看這些設計案例。
下面是一家家具類的網站,設計師利用方塊的大小來做對比。使得整個畫面中間的元素組織起來變得清晰有條理,讓用戶在視覺上變得有層次感, 使得整個版面變得簡約清晰。

 

下面這個建築公司的首頁,採用了方形的元素進行大小層次感的相互結合起來,讓整個畫面變得極其有穩重感,讓原本網站上複雜而多的類容,變得條理清晰,乾淨簡潔。同時在畫面的版式也是獨裁新意。

05:信息引導的作用

在復雜而多的海報或者網站架構中,利用方框進行信息引導是非常有效而且新穎的表現方式。
以下網站是左側一個男模特的網站,整個banner採用了紅色調,設計師為了讓用戶快速往下瀏覽,所有大膽的添加了紅色系的方框,有效的引導了用戶的視覺,從上而下的瀏覽,同時使得整個畫面不會出現頭重腳輕的問題。另外這樣的處理讓整個版面設計上更加新穎,使得作品脫穎而出。
右邊是阿迪達斯的一個品牌網站,設計師利用了方形的元素作為視覺引導,將用戶的視覺一步一步的從引導下去,了解他們的全部商品。

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

06:讓文字之間相關聯

下面海報設計,如果按照正常設計師的話,對於文案的處理方式,肯定會根據文案信息以及海報架構進行分散排版設計。這樣的處理方式,對海報的畫面要求會比較高,如果海報比較亂的話,哪麼文案的識別性就會降低,為了解決這些問題,設計師選擇了方框的元素,利用方框講文案信息關聯再一起。然後再利用方框的大小,根據文案內容的主次進行合理的組織分配。這樣不僅讓視覺上的到別具一格,而且也降低了畫面上其他的元素對文案內容的干擾。讓用戶第一視覺了解到海報需要傳達的信息。 下列海報設計中也利用了方框的元素,讓文案信息相聯組織在一起。通過改變方框的大小,來突出文案信息的主次之分。視覺上給用戶舒適的體驗,畫面也會讓人難以忘記。 如果我們在設計中充分利用上述幾個表現方式,相信我們的設計一定會脫穎而出。所以設計優秀的作品並不難,難的是你去發現優秀作品的規律。當然還有很多點值得我們去發現~

應用

上訴講到了方框元素的作用,哪麼我們來說說方框方形元素經常運用在那些地方。

01:網頁板塊

方框方形元素,經常運用於網頁中的各大板塊,它們能夠有效的將網頁中的元素變得條理清晰等,那麼我們來看看下面一些案例是如何巧妙的運用方框。
下面是一個旅行網頁。整個網站用了大面積的方形元素,利用這些方形的大小和改變長寬比例來錯列排版,使得整個網頁信息分類明確,節奏感十足。

一些商城網站也融入了方形的元素,有效的管理和整合了各類商品信息,同時也利於網站適配不同端口設備展示:


如果我們在設計中充分利用上述幾個表現方式,相信我們的設計一定會脫穎而出。所以設計優秀的作品並不難,難的是你去發現優秀作品的規律。當然還有很多點值得我們去發現~

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

網頁中常見的按鈕,其實近幾年開始流行的幽靈按鈕(透明按鈕)就是大量借鑒了方框元素,當然實心按鈕也採用了方形元素。下面我們來看下運用了這些元素的案列。
下面整個網頁色調明亮清新,除了漸變的背景就是內容。高飽和度的藍色背景裡有點狀的世界地圖作為紋理點綴,使之不顯得單調。
大小錯落的內容靠左對齊,下面設計師在按鈕上利用了框型的元素設計了幽靈按鈕,使得整個文字內容搭配更加通透。

這個網站使用了視頻作為背景,訪問者只需要通過變化的背景就可以明白組織的工作流程。通過調色之後的背景視頻並不影響前景的Logo、設計師利用了框型的元素設計了幽靈按鈕,使得整個網站顯得巧妙而優雅。


下面是網站中一段引導語,採用淺灰色的背景加上文字在一起,加上一定的留白,整個畫面顯得潔淨而優雅。設計師在這裡採用方形元素來設計了實心按鈕,使用戶對新頁面起到了引導作用。

下面網站是利用了方型/方框的元素,來設計了表單和搜索框部分,表單部分讓原本複雜相互干擾的文案信息變得條理清晰,畫面簡潔。搜索框部分視覺強化,引導用戶進入網站搜索獲取內容。

03:圖片

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

下面案例圖片中設計師為了讓多張圖片進行統一協調起來,也加入了方框的元素,給用戶傳達了三塊內容的體系關係,讓原本簡約而優雅的畫面變得多姿多彩。


一個人物如何簡單的讓他在平面中變得有立體感?下面案例設計師採用了框型的元素,與人物結合起來,讓原本沒有空間感,頭重腳輕的男士,變得穩重而富有層次,同時也抓住了用戶的視覺。讓原本平淡的頁面變得富有創意。

 

04:文字

複雜的文案排版起來單調,過於平淡,無層次感?哪麼我們來看看方框/方形是如何解決這些問題的。 下面案例中,設計師在這段文案進行設計排版的時候,如果素材有限不能放圖片,如何才能讓它們變得富有設計感,左右平衡呢?於是設計師將左邊的文字與方框元素結合起來,輕鬆的解決了這個問題。 下面案例中,設計師如何巧妙的利用方形元素,將banner 和內容兩塊連接呢?原本應該放置在banner 上的文字,被放在了方形色塊上,不但在傳統的版式架構上得以突破,而且引導了用戶從上而下的閱讀信息。 下面案例中,banner中的文案只有一句話,搭配其他產品。設計師利用方框元素,將分散的文字變成了整體,所以使瓶子靠在文字上,給人更安全穩定的感覺。   下面案例中,設計師利用方框元素,將一個圖形與文字進行結合起來,讓整個文字的疏密對比性加強,即使沒有圖片也能瞬間提升整個畫面的創意。 文字這一塊就不多講啦,還有很多的運用,等待你們去發現。

05:VI logo

方框方形的元素如果放在VI 中結合,是不是很有趣~
以下是1+手機的Logo ,通過結合了方框的一部分,兩邊的線條將用戶的視覺引導至+的圖形上去,即使在不了解這個品牌的用戶也能夠快速的閱讀了解這是1+(個人見解)。
搭配整個畫面,大量的留白,左上-右下的視覺定律,讓畫面變得簡約而不簡單。

 

類別

這裡我就不做細的分析啦~主要在於大家的靈活運用。

01:方框之間的結合

方框/方框之間的結合,一般主要是用在復雜而多的文案內容中間,起到相互關聯的作用,讓彼此更加的緊密。

 

02:方形與方框之間的結合

這樣的方式開始流行了,主要的作用是用來修飾過於單調的物體,豐富畫面的美感,以及平衡左右關係。往往方框和方形之間會伴隨著圖片或文字一起出現。

03:用於標籤部分

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

04:大的方框/方形

大的方框/方形主要運用於海報之中,或者網頁的架構上等較多的信息內容中。 主要作用在起到畫面協調,強調,區分等等用途。

05:殘缺的方框/方形

這類元素往往結合文案一起展示,主要通過方框的線條將用戶的視覺中心指引到作者想要表達的內容。