[ 平面理論教程 ] 詳細解析方框和方形元素在設計中的運用- 設計教程 - 骨子愛創意

教學主題: 詳細解析方框和方形元素在設計中的運用

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 詳細解析方框和方形元素在設計中的運用

這教學的重點為這幾點 [ 元素,設計,運用,解析,詳細,方框,下面,設計師,方形,利用 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

本文主要根據我在設計中的到的一些領悟得來的總結和規律，本文主要圍繞方框方形的作用、應用領域、類別三個大方面來發表觀點。

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

長輩常說做人需要方方正正，其實我們的設計也一樣，只有方正才能打好根基，屹立而不倒。比如我們身邊使用的電腦，冰箱 房屋架構等等，都離不開方形的支持雜誌中常常會讓方形元素融入進文字或者圖片中間，去突出或去修飾它們。隨着現在技術越來發達，設計師也會將雜誌中的一些元素，融入到網頁設計中去。讓網頁設計更加有新意。

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

作用

01：分割

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

下面設計作品 畫面中出現了多個文案信息，這麼多的信息集中在一個畫面中，如何讓它們

變得有主有次呢，為了讓用戶清晰的閱讀到每一個單獨的文案信息，所有設計師加入方框的

元素，利用大小對比的關係，有效的避免了內容的衝突和雜亂 。這裡的設計通過加方框的元素，使畫面中的文字也具有一定的強調作用。

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

02:強調

如何讓文字內容在眾多元素裡面突出。 要麼弱化其他，要麼強化自己，顯然下面設計中為

了讓用戶第一視覺就能看到表達的文字信息，所有設計師利用了方框的元素進行了強突出。

下面的海報設計，也是運用到了方框的元素，把用戶的視覺焦點聚焦了起來。既強調了重要信息也不丟失

畫面的美感和創意。

03：修飾

當我們的在設計一個海報，或者網站頁面中的一段文字的時候，有時候畫面太單薄，一些設計師會用其他的方式進行修飾，但是也有設計師利用方框，或許並不一定是完成的方框，有殘缺的 有截取了方框中的部分元素去作為一種修飾。這樣整個畫面一定會別具一格。下面來看設計案例吧。

下面是一組平面VI的作品，本來是一個平平淡淡的名片，但是設計師加方框的一角進行修飾，

瞬間這個作品變得十足的創意感覺了。

相同的處理方式。

下面網頁設計中，原本標題在大面積的留白中間，變得單薄，導致頁面的中心不穩定

所以設計師在標題上增加了方框的元素，進行輔助修飾作用 ，有效了豐富了標題的展示效果。

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

這裡使用色塊形式，主要出現的在網站布局方面，設計師利用方形的色塊讓網站變得生動創新，使網站在布局上面變得有節奏，有主次，邏輯清晰。下面我們來看看這些設計案例。

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

下面這個建築公司的首頁，採用了方形的元素進行大小層次感的相互結合起來

讓整個畫面變得極其有穩重感，讓原本網站上複雜而多的類容，變得條理清晰，乾淨簡潔。同時在畫面的板式創意也是獨裁新意。

05：信息引導的作用

在複雜而多的海報或者網站架構中，利用方框進行信息引導是非常有效而且新穎的表現方式

以下網站是左側一個男模特的網站，整個banner採用了紅色調，設計師為了讓用戶快速往下瀏覽，所有大膽的添加了紅色系的方框，有效的引導了用戶的視覺，從上而下的瀏覽，同時

使得整個畫面不會出現頭重腳輕的問題。上下得意均衡。另外這樣的處理讓整個版面設計

上更加新穎，使得作品脫穎而出。

右邊是阿迪達斯的一個品牌網站，設計師利用了方形的元素作為視覺引導，將用戶的視覺一步一步的從引導下去

了解他們的全部商品。

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

06：讓文字之間相關聯

下面海報設計，如果按照正常設計師的話，對於文案的處理方式，肯定會根據文案信息以及海報架構 進行分散拍版設計。這樣的處理方式，對海報的畫面要求會比較高，如果海報比較亂的話，哪么文案的識別性就會降低，哪么為了解決這些問題，設計師選擇了方框的元素，利用方框講文案信息關聯再一起。然後再利用方框的大小，根據文案內容的主次進行合理的組織分配。這樣不僅讓視覺上的到別具一格，而且也降低了畫面上其他的元素對文案內容的干擾。讓用戶第一視覺了解到海報需要傳達的信息。

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

下列海報設計中也利用了方框的元素，讓文案信息相聯組織在一起。通過改變方框的

大小，來突出文案信息的主次之分。視覺上給用戶是舒適的體驗，畫面也會讓人難以忘記。

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

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

應用

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

01：網頁板塊

方框方形元素，經常運用於網頁中的各大板塊，它們能夠有效的將網頁中的元素組織的整潔，調理清晰等，

那麼我門來看看下面一些案例是如何巧妙的運用方框已經方形元素

下面是一個旅行網頁。整個網站用了大面積的方形元素，利用這些方形的大小和改變長寬比例來錯列排版。

使得整個網頁信息分類明確，節奏感十足。

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

02：btn按鈕，搜索，表單 等

網頁中常見的按鈕，其實近幾年開始流行的幽靈按鈕(透明按鈕)就是大量借鑒了方框元素，當然實心按鈕

也採用了方形元素。下面我們來看下運用了這些元素的案列。

下面整個網頁色調明亮清新，除了漸變的背景就是內容。高飽和度的藍色背景里有點狀的世界地圖作為紋理點綴，使之不顯得單調。大小錯落的內容靠左對齊，下面設計師在按鈕上利用了框型的元素設計了幽靈按鈕，使得整個文字內容搭配更加通透。

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

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

下面網站是利用了方型/方框的元素，來設計了 表單和搜索框部分，表單部分讓原本複雜相互干擾的文案信息

變得調理清晰，畫面簡潔。搜索框部分視覺強化，引導用戶進行網站搜索獲取內容。

04:圖片

越來越多的圖片，為了讓他們展示的更有，告別單調。也結合了方框方形的元素。現在越來越多的方框/方形

元素出現在網站圖片中啦，可以說開啟啦一段新的潮流。那麼我們來看看這些精彩的案例。

下面案例是一個標準的圖文結合的設計案例，設計師為了讓圖片和文案左右兩邊的視覺平衡，於是加入了方框

/方形的元素與圖片進行結合。瞬間整個畫面變的富有設計感起來了。

下面案例圖片中設計師為了讓多張圖片進行統一 協調起來，也加入了方框的元素。

給用戶傳達了三塊內容的體系關係。讓原本簡約而優雅的畫面變得多姿多彩。

一個人物如何簡單的讓他在平面中變得有立體感?下面案例設計師採用了框型的元素，於人物結合起來，讓原本

沒有空間感，頭重腳輕點男士，變得穩重而富有層次，同時也抓住了用戶的視覺。讓原本平淡的頁面變得富有創意。

05: 文字

複雜的文案排版起來單調，過於平淡，無層次感?哪么我們來看看方框/方形是如何解決這些問題的。

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

下面案例中，設計師如何巧妙的利用方形元素，將banner 和內容兩塊鏈接，原本應該放置在banner 上的文字，也被放在了方形色塊上，不但在傳統的版式架構上得以突破，而且引導了用戶從上而下的閱讀信息。

下面案例中，banner中的文案只有一句話，搭配其他產品。設計師利用方框元素，將分散的文字

變成了整體，所以使得瓶子靠在文字上，更實，更安全，穩定。使得文案 產品兩者完美結合。

下面案例中，設計師利用方框元素，設計成一個圖形與文字進行結合起來。讓整個文字的疏密對比性加強

即使沒有圖片也能 瞬間提升整個畫面的創意。

文字這一塊就不多講啦，還有很多的運用，等待你們去發現。

04：Vi logo

方框方形的元素如果放在vi中結合，是不是很有趣～

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

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

類別

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

01：方框之間的結合

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

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

就目前流行的設計趨勢，這樣的方式以及慢慢開始常見啦。主要的作用是用來修飾過於單調的物體，豐富畫面的美感，以及左右平衡關係往往方框和方形之間會伴隨着圖片或文字一起出現。

03:用於標籤部分

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

04:大的方框/方形

大的方框/方形主要運用於海報之中，或者網頁的架構上。等較多的信息內容中。

主要作用在 起到畫面協調，強調 ，區分等等用途。

05:殘缺的方框/方形

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

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 詳細解析方框和方形元素在設計中的運用 這教學會喜歡

文章標題: 骨子愛創意- 詳細解析方框和方形元素在設計中的運用–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 元素,設計,運用,解析,詳細,方框,下面,設計師,方形,利用

本文永久連結 :詳細解析方框和方形元素在設計中的運用

本文轉載自 :VIA