如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素發(fā)布者：本站     時(shí)間：2021-12-20 12:12:28

當你欣賞下面這些案例時(shí)，留意一下他們如何以及為何使用矩形或正方形元素，會(huì )使得你思路大開(kāi)。此處列舉的方塊元素，被用來(lái)對齊、組織、裝飾、排列頁(yè)面上的方與圓。在設計中使用方塊元素有很多方法和原因。讓我們來(lái)詳細了解一下。

使用方塊布局的目的是什么?

或許這對你而言有點(diǎn)哲學(xué)和理論化，我們來(lái)看看別人選擇方塊布局的原因。(順便提一句，我所指的方塊也包括矩形，有些案例也使用矩形。)使用這種元素有兩大原因。首先也是最重要的，它有助于組織內容。其次，它也能打造特殊的樣式。它們是展現內心渴望和需求的完美元素。

看看Dennis Adelmann的作品集，顯而易見(jiàn)，方塊元素被用來(lái)組織排列他的作品。這是組織排列任意數量?jì)热莸暮?jiǎn)單途徑，讓事物保持簡(jiǎn)潔。

Dennisadelmann

如何創(chuàng )意的使用<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中的方塊元素,PS教程,

不過(guò)再看看We Love Noise這個(gè)網(wǎng)站，它就完全不同!是的，到處都是方塊，移動(dòng)鼠標時(shí)還有個(gè)有趣的動(dòng)畫(huà)效果。不過(guò)除了組織內容之外，你會(huì )發(fā)現方塊元素也成為了設計風(fēng)格的一部分。它是這種風(fēng)格關(guān)鍵的決定性元素。

Welovenoise

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

怎樣用好它們?

我不覺(jué)得使用方塊元素是什么難事。尤其是網(wǎng)頁(yè)，自從誕生之初就開(kāi)始使用方塊形狀來(lái)設計界面。但是你若想更有效地使用它，請遵循以下幾個(gè)步驟。

制定希望達成的目標

根據你所要達成的目標，頁(yè)面和區塊會(huì )有很大的不同。一旦你確定了，方塊元素就能幫助你完成目標。你是用它來(lái)組織內容?還是想為頁(yè)面增添一點(diǎn)樂(lè )趣?

看看Paper and Paint。他們使用方塊元素保持頁(yè)面井井有條，并且突出了頁(yè)面特有的流動(dòng)性。隨著(zhù)鼠標向下滾動(dòng)，每個(gè)方塊中的不同內容都在進(jìn)行著(zhù)視覺(jué)差滾動(dòng)——這是個(gè)非?？岬男Ч總€(gè)方塊都向你講述獨特的故事，匯聚成整個(gè)頁(yè)面。這些方塊元素的作用，就是保持各部分對齊，形成一種整潔的時(shí)尚，同時(shí)也為各個(gè)頁(yè)面營(yíng)造不同的故事氛圍。

Paperandpaint

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

Anthonyjohngroup

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

Anthony John Group使用方塊來(lái)展示他們創(chuàng )作的各個(gè)項目，還有關(guān)鍵的公司信息，比如“幕后團隊”。主頁(yè)的規劃與構建很棒，但也結合緊密。很明顯，他們致力于創(chuàng )造像這個(gè)頁(yè)面一樣優(yōu)雅的高端建筑設計，如果沒(méi)有這些方塊，可達不到這樣的效果。

使用方塊來(lái)組織內容

既然了解了你所追求的目標——盡管那幾乎就是整合現有的信息——你會(huì )接觸到內容組織的。你得把內容編成目錄。要如何在各個(gè)方塊中組織信息——某些方塊內容會(huì )比其他的更多嗎?這對組織內容很有幫助，你會(huì )來(lái)回擺弄，看看哪些有用哪些沒(méi)用，發(fā)現哪些內容太多，哪些內容太少。我保證這不是什么高超技巧，實(shí)際上它不太需要憑直覺(jué)，大多時(shí)候都很簡(jiǎn)單——坐下來(lái)去完成它就是了。

Blocklevel

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

注意到上面這個(gè)網(wǎng)站沒(méi)有，Block Level，方塊和方塊中的圖標就是全部了，只有圖標。這就是我所指的組織內容，Block Level的設計者故意在每個(gè)方塊中只留下一個(gè)圖標。下一步就是要考慮如何將調整過(guò)的內容放在令人愉悅的設計中，這正是我們下面要講的。

調整這些方塊，或者干脆不動(dòng)它!

既然組織內容的工作讓你了解一組組信息看起來(lái)是什么樣，你就要思考應該怎么處理這些方塊。這是讓你打磨內容塊大小的一步，可能你希望它們都保持一致——又或者你決定讓它們錯落雜亂排布。這還是得取決于你的具體目標。

從Nedd中可以看出，方塊元素都非常巨大，它們有著(zhù)近似的寬度和相等的高度，讓網(wǎng)站看起來(lái)井井有條。我希望你注意的是，雖然這是偏向于內容組織的用法，網(wǎng)站的樣式仍然非常有趣輕快，這主要得益于它的顏色、矢量元素、圓形的應用、字體等等。

Nedd

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

另一方面，我們還有像Banana Café這樣元素散亂的網(wǎng)站——如果你想，也可以這樣優(yōu)美地亂序排列。這個(gè)網(wǎng)站看起來(lái)也很好玩，得益于它的字體、顏色的選用等等。方塊的這種特殊用法其實(shí)沒(méi)什么，只是一種特定的設計手段。

Bananacafe

如何創(chuàng )意的使用網(wǎng)頁(yè)設計中的方塊元素,PS教程,

點(diǎn)綴樣式

有千萬(wàn)種設計方法，可以為你下個(gè)項目中的方塊元素打造特殊風(fēng)格。你可以將它們與其他元素自由組合，比如圓形，或者采用貫穿始終的矩形或正方形來(lái)營(yíng)造網(wǎng)站的視覺(jué)焦點(diǎn)。最后兩個(gè)例子中，你會(huì )再次見(jiàn)識如何將方塊良好地應用于設計中，希望對你有所啟發(fā)，并能在你下個(gè)項目中發(fā)揮作用。