本文來(lái)自俊敏設(shè)計(jì)師的分享，雖然不是針對(duì)PPT的教程，但排版設(shè)計(jì)中方形元素的運(yùn)用在PPT排版學(xué)習(xí)中同樣適用，設(shè)計(jì)無(wú)界限，轉(zhuǎn)載過(guò)來(lái)和大家一起學(xué)習(xí)。
常常聽見大神說(shuō)設(shè)計(jì)不需要方方正正的，這樣會(huì)顯得死板，沒有創(chuàng)意。LOW…等等，其實(shí)不然~ 在我認(rèn)為每一種元素，只要在對(duì)的環(huán)境中，去運(yùn)用。相信會(huì)出現(xiàn)讓人耳目一新的效果。長(zhǎng)輩常說(shuō)做人需要方方正正，其實(shí)我們的設(shè)計(jì)也一樣，只有方正才能打好根基，屹立而不倒。比如我們身邊使用的電腦，冰箱 房屋架構(gòu)等等，都離不開方形的支持雜志中常常會(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ō)下方形方框在設(shè)計(jì)中的運(yùn)用。
方框在設(shè)計(jì)中的作用
01：分割?
我們已知的分割的元素，主要是線 和 面 ，其實(shí)方形/方框也是具有分割的作用。在設(shè)計(jì)中運(yùn)用的話會(huì)讓你的作品別具一格。
下面設(shè)計(jì)作品 畫面中出現(xiàn)了多個(gè)文案信息，這么多的信息集中在一個(gè)畫面中，如何讓它們
變得有主有次呢，為了讓用戶清晰的閱讀到每一個(gè)單獨(dú)的文案信息，所有設(shè)計(jì)師加入方框的
元素，利用大小對(duì)比的關(guān)系，有效的避免了內(nèi)容的沖突和雜亂 。這里的設(shè)計(jì)通過(guò)加方框的元素，使畫面中的文字也具有一定的強(qiáng)調(diào)作用。
這塊設(shè)計(jì)也是具有相同的處理方式
02:強(qiáng)調(diào)
如何讓文字內(nèi)容在眾多元素里面突出。 要么弱化其他，要么強(qiáng)化自己，顯然下面設(shè)計(jì)中為了讓用戶第一視覺就能看到表達(dá)的文字信息，所有設(shè)計(jì)師利用了方框的元素進(jìn)行了強(qiáng)突出。
下面的海報(bào)設(shè)計(jì)，也是運(yùn)用到了方框的元素，把用戶的視覺焦點(diǎn)聚焦了起來(lái)。既強(qiáng)調(diào)了重要信息也不丟失畫面的美感和創(chuàng)意。
03：修飾
當(dāng)我們的在設(shè)計(jì)一個(gè)海報(bào)，或者網(wǎng)站頁(yè)面中的一段文字的時(shí)候，有時(shí)候畫面太單薄，一些設(shè)計(jì)師會(huì)用其他的方式進(jìn)行修飾，但是也有設(shè)計(jì)師利用方框，或許并不一定是完成的方框，有殘缺的 有截取了方框中的部分元素去作為一種修飾。這樣整個(gè)畫面一定會(huì)別具一格。下面來(lái)看設(shè)計(jì)案例吧。
下面是一組平面VI的作品，本來(lái)是一個(gè)平平淡淡的名片，但是設(shè)計(jì)師加方框的一角進(jìn)行修飾，瞬間這個(gè)作品變得十足的創(chuàng)意感覺了。
相同的處理方式。
下面網(wǎng)頁(yè)設(shè)計(jì)中，原本標(biāo)題在大面積的留白中間，變得單薄，導(dǎo)致頁(yè)面的中心不穩(wěn)定，所以設(shè)計(jì)師在標(biāo)題上增加了方框的元素，進(jìn)行輔助修飾作用 ，有效了豐富了標(biāo)題的展示效果。
04 ：色塊對(duì)比讓版面變得有血有肉
這里使用色塊形式，主要出現(xiàn)的在網(wǎng)站布局方面，設(shè)計(jì)師利用方形的色塊讓網(wǎng)站變得生動(dòng)創(chuàng)新，使網(wǎng)站在布局上面變得有節(jié)奏，有主次，邏輯清晰。下面我們來(lái)看看這些設(shè)計(jì)案例。下面是一家家具類的網(wǎng)站，設(shè)計(jì)師利用方塊的大小來(lái)做對(duì)比 。使得整個(gè)畫面中間的元素組織起來(lái)變得清晰 有條理，讓用戶在視覺上變得有層次感， 使得整個(gè)版面變得簡(jiǎn)約清晰。
下面這個(gè)建筑公司的首頁(yè)，采用了方形的元素進(jìn)行大小層次感的相互結(jié)合起來(lái)讓整個(gè)畫面變得極其有穩(wěn)重感，讓原本網(wǎng)站上復(fù)雜而多的類容，變得條理清晰，干凈簡(jiǎn)潔。同時(shí)在畫面的板式創(chuàng)意也是獨(dú)裁新意。
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ì)師為了讓用戶快速往下瀏覽，所有大膽的添加了紅色系的方框，有效的引導(dǎo)了用戶的視覺，從上而下的瀏覽，同時(shí)
使得整個(gè)畫面不會(huì)出現(xiàn)頭重腳輕的問(wèn)題。上下得意均衡。另外這樣的處理讓整個(gè)版面設(shè)計(jì)上更加新穎，使得作品脫穎而出。右邊是阿迪達(dá)斯的一個(gè)品牌網(wǎng)站，設(shè)計(jì)師利用了方形的元素作為視覺引導(dǎo)，將用戶的視覺一步一步的從引導(dǎo)下去了解他們的全部商品。
下面一組時(shí)尚的海報(bào)設(shè)計(jì),這里將文字利用方形的規(guī)律進(jìn)行引導(dǎo)排版，讓用戶有順序的閱讀。
06：讓文字之間相關(guān)聯(lián)
下面海報(bào)設(shè)計(jì)，如果按照正常設(shè)計(jì)師的話，對(duì)于文案的處理方式，肯定會(huì)根據(jù)文案信息以及海報(bào)架構(gòu) 進(jìn)行分散拍版設(shè)計(jì)。這樣的處理方式，對(duì)海報(bào)的畫面要求會(huì)比較高，如果海報(bào)比較亂的話，哪么文案的識(shí)別性就會(huì)降低，哪么為了解決這些問(wèn)題，設(shè)計(jì)師選擇了方框的元素，利用方框講文案信息關(guān)聯(lián)再一起。然后再利用方框的大小，根據(jù)文案內(nèi)容的主次進(jìn)行合理的組織分配。這樣不僅讓視覺上的到別具一格，而且也降低了畫面上其他的元素對(duì)文案內(nèi)容的干擾。讓用戶第一視覺了解到海報(bào)需要傳達(dá)的信息。
下列海報(bào)設(shè)計(jì)中也利用了方框的元素，讓文案信息相聯(lián)組織在一起。通過(guò)改變方框的大小，來(lái)突出文案信息的主次之分。視覺上給用戶是舒適的體驗(yàn)，畫面也會(huì)讓人難以忘記。
如果我們?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)～
方框在設(shè)計(jì)中的應(yīng)用
上訴講到了方框元素的作用，哪么我們來(lái)說(shuō)說(shuō)方框 方形元素經(jīng)常運(yùn)用在那些地方。
01：網(wǎng)頁(yè)板塊?
方框方形元素，經(jīng)常運(yùn)用于網(wǎng)頁(yè)中的各大板塊，它們能夠有效的將網(wǎng)頁(yè)中的元素組織的整潔，調(diào)理清晰等，那么我門來(lái)看看下面一些案例是如何巧妙的運(yùn)用方框已經(jīng)方形元素。下面是一個(gè)旅行網(wǎng)頁(yè)。整個(gè)網(wǎng)站用了大面積的方形元素，利用這些方形的大小和改變長(zhǎng)寬比例來(lái)錯(cuò)列排版。使得整個(gè)網(wǎng)頁(yè)信息分類明確，節(jié)奏感十足。
一些商城網(wǎng)站也融入了方形的元素，有效的管理和整合了各類商品信息。同時(shí)也利于網(wǎng)站適配不同端口設(shè)備展示
02：btn按鈕，搜索，表單 等
網(wǎng)頁(yè)中常見的按鈕，其實(shí)近幾年開始流行的幽靈按鈕（透明按鈕）就是大量借鑒了方框元素，當(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)容搭配更加通透。
這個(gè)網(wǎng)站使用了視頻作為背景，訪問(wèn)者只需要通過(guò)變化的背景就可以明白組織的工作流程。通過(guò)調(diào)色之后的背景視頻并不影響前景的Logo、設(shè)計(jì)師利用了框型的元素設(shè)計(jì)了幽靈按鈕使得整個(gè)網(wǎng)站顯得巧妙而優(yōu)雅。
下面是網(wǎng)站中一段引導(dǎo)語(yǔ)，采用淺灰色的背景加上文字在一起，加上一定的留白，整個(gè)畫面顯得潔凈而優(yōu)雅。 ? 設(shè)計(jì)師在這里采用方形元素來(lái)設(shè)計(jì)了實(shí)心按鈕，使用戶對(duì)新頁(yè)面起到了引導(dǎo)作用。
下面網(wǎng)站是利用了方型/方框的元素，來(lái)設(shè)計(jì)了 表單和搜索框部分，表單部分讓原本復(fù)雜相互干擾的文案信息變得調(diào)理清晰，畫面簡(jiǎn)潔。搜索框部分視覺強(qiáng)化，引導(dǎo)用戶進(jìn)行網(wǎng)站搜索獲取內(nèi)容。
03:圖片
越來(lái)越多的圖片，為了讓他們展示的更有，告別單調(diào)。也結(jié)合了方框方形的元素?，F(xiàn)在越來(lái)越多的方框/方形元素出現(xiàn)在網(wǎng)站圖片中啦，可以說(shuō)開啟啦一段新的潮流。那么我們來(lái)看看這些精彩的案例。
下面案例是一個(gè)標(biāo)準(zhǔn)的圖文結(jié)合的設(shè)計(jì)案例，設(shè)計(jì)師為了讓圖片和文案左右兩邊的視覺平衡，于是加入了方框/方形的元素與圖片進(jìn)行結(jié)合。瞬間整個(gè)畫面變的富有設(shè)計(jì)感起來(lái)了。
下面案例圖片中設(shè)計(jì)師為了讓多張圖片進(jìn)行統(tǒng)一 協(xié)調(diào)起來(lái)，也加入了方框的元素。給用戶傳達(dá)了三塊內(nèi)容的體系關(guān)系。讓原本簡(jiǎn)約而優(yōu)雅的畫面變得多姿多彩。
一個(gè)人物如何簡(jiǎn)單的讓他在平面中變得有立體感？下面案例設(shè)計(jì)師采用了框型的元素，于人物結(jié)合起來(lái)，讓原本沒有空間感，頭重腳輕點(diǎn)男士，變得穩(wěn)重而富有層次，同時(shí)也抓住了用戶的視覺。讓原本平淡的頁(yè)面變得富有創(chuàng)意。
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è)計(jì)師如何巧妙的利用方形元素，將banner 和內(nèi)容兩塊鏈接，原本應(yīng)該放置在banner 上的文字，也被放在了方形色塊上，不但在傳統(tǒng)的版式架構(gòu)上得以突破，而且引導(dǎo)了用戶從上而下的閱讀信息。
下面案例中，banner中的文案只有一句話，搭配其他產(chǎn)品。設(shè)計(jì)師利用方框元素，將分散的文字變成了整體，所以使得瓶子靠在文字上，更實(shí)，更安全，穩(wěn)定。使得文案 產(chǎn)品兩者完美結(jié)合。
下面案例中，設(shè)計(jì)師利用方框元素，設(shè)計(jì)成一個(gè)圖形與文字進(jìn)行結(jié)合起來(lái)。讓整個(gè)文字的疏密對(duì)比性加強(qiáng)，即使沒有圖片也能 瞬間提升整個(gè)畫面的創(chuàng)意。
文字這一塊就不多講啦，還有很多的運(yùn)用，等待你們?nèi)グl(fā)現(xiàn)。
05：Vi logo
方框方形的元素如果放在vi中結(jié)合，是不是很有趣～以下是1+手機(jī)的logo ，logo本身就是簡(jiǎn)約。通過(guò)結(jié)合了方框的一部分，通過(guò)兩邊的線條將用戶的視覺引導(dǎo)至＋的圖形上去，即使在不了解這個(gè)品牌的用戶 也能夠快速的閱讀了解這是1＋（這是我個(gè)人的見解。）
搭配整個(gè)畫面，大量的留白，左上－右下的視覺定律，讓畫面變得簡(jiǎn)約而不簡(jiǎn)單。
方框在設(shè)計(jì)中的類別?
這里我就不做細(xì)的分析啦～主要在于大家的靈活運(yùn)用
01：方框之間的結(jié)合
方框/方框之間的結(jié)合，一般主要是用于在復(fù)雜而多的文案內(nèi)容中間起到相互關(guān)聯(lián)的作用。讓彼此更加的緊密
03:方形與方框之間的結(jié)合
就目前流行的設(shè)計(jì)趨勢(shì)，這樣的方式以及慢慢開始常見啦。主要的作用是用來(lái)修飾過(guò)于單調(diào)的物體，豐富畫面的美感，以及左右平衡關(guān)系往往方框和方形之間會(huì)伴隨著圖片或文字一起出現(xiàn)。
04:用于標(biāo)簽部分
表單按鈕之類的就不做舉例子啦，大家都知道～
05:大的方框／方形
大的方框/方形主要運(yùn)用于海報(bào)之中，或者網(wǎng)頁(yè)的架構(gòu)上。等較多的信息內(nèi)容中。主要作用在 起到畫面協(xié)調(diào)，強(qiáng)調(diào) ，區(qū)分等等用途。
06:殘缺的方框／方形
這類元素往往結(jié)合文案一起展示，主要作用通過(guò)方框的線條將用戶的視覺中心指引到作者想要表達(dá)的內(nèi)容，往往也會(huì)起到或者文案修復(fù)的作用。
如果對(duì)你們有用如果想贊，請(qǐng)深贊~
來(lái)源：http://www.zcool.com.cn/article/ZNDQwMzQ0.html
鄂公網(wǎng)安備 42050602000108號(hào)
GOOD