起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識在網(wǎng)頁設計中，如何運用方框/方形元素？
如何讓方正方框/方形元素不死板有創(chuàng)意？今天這篇好文總結了超多的設計方法和實戰(zhàn)案例，建議閱讀。
常常聽見大神說設計不需要方方正正的，這樣會顯得死板，沒有創(chuàng)意。LOW……其實不然，我認為每一種元素，只要在對的環(huán)境中，去運用。相信會出現(xiàn)讓人耳目一新的效果。
比如我們身邊使用的電腦，冰箱 房屋架構等等，都離不開方形的支持。雜志中常常會讓方形元素融入進文字或者圖片中間，去突出或去修飾它們。隨著現(xiàn)在技術越來發(fā)達，設計師也會將雜志中的一些元素，融入到網(wǎng)頁設計中去。讓網(wǎng)頁設計更加有新意。
作用
下面我們就來說下方形方框在網(wǎng)頁之中的運用。
01 分割
我們已知的分割的元素，主要是線和面 ，其實方形/方框也是具有分割的作用。在設計中運用的話會讓你的作品別具一格。
下面設計作品畫面中出現(xiàn)了多個文案信息，這么多的信息集中在一個畫面中，如何讓它們變得有主有次呢，為了讓用戶清晰的閱讀到每一個單獨的文案信息，所以設計師加入方框的元素，利用大小對比的關系，有效的避免了內(nèi)容的沖突和雜亂 。這里的設計通過加方框的元素，使畫面中的文字也具有一定的強調(diào)作用。
這塊設計也是具有相同的處理方式：
02 強調(diào)
如何讓文字內(nèi)容在眾多元素里面突出。 要么弱化其他，要么強化自己，顯然下面設計中為了讓用戶第一視覺就能看到表達的文字信息，所以設計師利用了方框的元素進行了強突出。
下面的海報設計，也是運用到了方框的元素，把用戶的視覺焦點聚焦了起來。既強調(diào)了重要信息也不丟失畫面的美感和創(chuàng)意。
03 修飾
當我們的在設計一個海報，或者網(wǎng)站頁面中的一段文字的時候，有時候畫面太單薄，一些設計師會用其他的方式進行修飾，但是也有設計師利用方框，不一定是完整的方框，這樣整個畫面一定會別具一格。下面來看設計案例吧。
下面是一組平面VI的作品，本來是一個平平淡淡的名片，但是設計師加方框的一角進行修飾，瞬間這個作品變得創(chuàng)意十足了。
下面網(wǎng)頁設計中，原本標題在大面積的留白中間，變得單薄，導致頁面的中心不穩(wěn)定，所以設計師在標題上增加了方框的元素，進行輔助修飾作用 ，有效了豐富了標題的展示效果。
04 色塊對比讓版面變得有血有肉
設計師利用方形的色塊讓網(wǎng)站變得生動創(chuàng)新，使網(wǎng)站在布局上面變得有節(jié)奏，有主次，邏輯清晰。下面我們來看看這些設計案例。
下面是一家家具類的網(wǎng)站，設計師利用方塊的大小來做對比 。使得整個畫面中間的元素組織起來變得清晰有條理，讓用戶在視覺上變得有層次感， 使得整個版面變得簡約清晰。
下面這個建筑公司的首頁，采用了方形的元素進行大小層次感的相互結合起來，讓整個畫面變得極其有穩(wěn)重感，讓原本網(wǎng)站上復雜而多的類容，變得條理清晰，干凈簡潔。同時在畫面的版式也是獨裁新意。
05 信息引導的作用
在復雜而多的海報或者網(wǎng)站架構中，利用方框進行信息引導是非常有效而且新穎的表現(xiàn)方式。
以下網(wǎng)站是左側一個男模特的網(wǎng)站，整個banner采用了紅色調(diào)，設計師為了讓用戶快速往下瀏覽，所有大膽的添加了紅色系的方框，有效的引導了用戶的視覺，從上而下的瀏覽，同時使得整個畫面不會出現(xiàn)頭重腳輕的問題。另外這樣的處理讓整個版面設計上更加新穎，使得作品脫穎而出。
右邊是阿迪達斯的一個品牌網(wǎng)站，設計師利用了方形的元素作為視覺引導，將用戶的視覺一步一步的從引導下去，了解他們的全部商品。
下面一組時尚的海報設計，這里將文字利用方形的規(guī)律進行引導排版，讓用戶有順序的閱讀。
06 讓文字之間相關聯(lián)
下面海報設計，如果按照正常設計師的話，對于文案的處理方式，肯定會根據(jù)文案信息以及海報架構進行分散排版設計。
這樣的處理方式，對海報的畫面要求會比較高，如果海報比較亂的話，哪么文案的識別性就會降低，為了解決這些問題，設計師選擇了方框的元素，利用方框講文案信息關聯(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é)奏感十足。
一些商城網(wǎng)站也融入了方形的元素，有效的管理和整合了各類商品信息，同時也利于網(wǎng)站適配不同端口設備展示：
02 btn按鈕，搜索，表單 等
網(wǎng)頁中常見的按鈕，其實近幾年開始流行的幽靈按鈕（透明按鈕）就是大量借鑒了方框元素，當然實心按鈕也采用了方形元素。下面我們來看下運用了這些元素的案列。
下面整個網(wǎng)頁色調(diào)明亮清新，除了漸變的背景就是內(nèi)容。高飽和度的藍色背景里有點狀的世界地圖作為紋理點綴，使之不顯得單調(diào)。
大小錯落的內(nèi)容靠左對齊，下面設計師在按鈕上利用了框型的元素設計了幽靈按鈕，使得整個文字內(nèi)容搭配更加通透。
這個網(wǎng)站使用了視頻作為背景，訪問者只需要通過變化的背景就可以明白組織的工作流程。通過調(diào)色之后的背景視頻并不影響前景的Logo、設計師利用了框型的元素設計了幽靈按鈕，使得整個網(wǎng)站顯得巧妙而優(yōu)雅。
下面是網(wǎng)站中一段引導語，采用淺灰色的背景加上文字在一起，加上一定的留白，整個畫面顯得潔凈而優(yōu)雅。設計師在這里采用方形元素來設計了實心按鈕，使用戶對新頁面起到了引導作用。
下面網(wǎng)站是利用了方型/方框的元素，來設計了 表單和搜索框部分，表單部分讓原本復雜相互干擾的文案信息變得條理清晰，畫面簡潔。搜索框部分視覺強化，引導用戶進入網(wǎng)站搜索獲取內(nèi)容。
03 圖片
現(xiàn)在越來越多的方框/方形元素出現(xiàn)在網(wǎng)站圖片中，下面案例是一個標準的圖文結合的設計案例，設計師為了讓圖片和文案左右兩邊的視覺平衡，于是加入了方框/方形的元素與圖片進行結合。瞬間整個畫面變的富有設計感起來了。
下面案例圖片中設計師為了讓多張圖片進行統(tǒng)一 協(xié)調(diào)起來，也加入了方框的元素，給用戶傳達了三塊內(nèi)容的體系關系，讓原本簡約而優(yōu)雅的畫面變得多姿多彩。
一個人物如何簡單的讓他在平面中變得有立體感？下面案例設計師采用了框型的元素，與人物結合起來，讓原本沒有空間感，頭重腳輕的男士，變得穩(wěn)重而富有層次，同時也抓住了用戶的視覺。讓原本平淡的頁面變得富有創(chuàng)意。
04 文字
復雜的文案排版起來單調(diào)，過于平淡，無層次感？哪么我們來看看方框/方形是如何解決這些問題的。
下面案例中，設計師在這段文案進行設計排版的時候，如果素材有限不能放圖片，如何才能讓它們變得富有設計感，左右平衡呢？于是設計師將左邊的文字與方框元素結合起來，輕松的解決了這個問題。
下面案例中，設計師如何巧妙的利用方形元素，將banner 和內(nèi)容兩塊連接呢？原本應該放置在banner 上的文字，被放在了方形色塊上，不但在傳統(tǒng)的版式架構上得以突破，而且引導了用戶從上而下的閱讀信息。
下面案例中，banner中的文案只有一句話，搭配其他產(chǎn)品。設計師利用方框元素，將分散的文字變成了整體，所以使瓶子靠在文字上，給人更安全穩(wěn)定的感覺。
下面案例中，設計師利用方框元素，將一個圖形與文字進行結合起來，讓整個文字的疏密對比性加強，即使沒有圖片也能 瞬間提升整個畫面的創(chuàng)意。
文字這一塊就不多講啦，還有很多的運用，等待你們?nèi)グl(fā)現(xiàn)。
05 VI logo
方框方形的元素如果放在VI 中結合，是不是很有趣～
以下是1+手機的Logo ，通過結合了方框的一部分，兩邊的線條將用戶的視覺引導至＋的圖形上去，即使在不了解這個品牌的用戶 也能夠快速的閱讀了解這是1＋（個人見解）。
搭配整個畫面，大量的留白，左上－右下的視覺定律，讓畫面變得簡約而不簡單。
類別
這里我就不做細的分析啦～主要在于大家的靈活運用。
01 方框之間的結合
方框/方框之間的結合，一般主要是用在復雜而多的文案內(nèi)容中間，起到相互關聯(lián)的作用，讓彼此更加的緊密。
02 方形與方框之間的結合
這樣的方式開始流行了，主要的作用是用來修飾過于單調(diào)的物體，豐富畫面的美感，以及平衡左右關系。往往方框和方形之間會伴隨著圖片或文字一起出現(xiàn)。
03 用于標簽部分
表單按鈕之類的就不做舉例子啦，大家都知道～
04 大的方框／方形
大的方框/方形主要運用于海報之中，或者網(wǎng)頁的架構上等較多的信息內(nèi)容中。
主要作用在 起到畫面協(xié)調(diào)，強調(diào) ，區(qū)分等等用途。
05 殘缺的方框／方形
這類元素往往結合文案一起展示，主要通過方框的線條將用戶的視覺中心指引到作者想要表達的內(nèi)容。
作者：俊敏
來源：微信公眾號「WEB」，ID：web-deisgn
本文由 @俊敏 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
- 目前還沒評論，等你發(fā)揮！
