當(dāng)你欣賞下面這些案例時(shí)，留意一下他們?nèi)绾我约盀楹问褂镁匦位蛘叫卧兀瑫?huì)使得你思路大開。此處列舉的方塊元素，被用來對(duì)齊、組織、裝飾、排列頁(yè)面上的方與圓。在設(shè)計(jì)中使用方塊元素有很多方法和原因。我們來詳細(xì)了解一下。
使用方塊布局的目的是什么？或許這對(duì)你而言有點(diǎn)哲學(xué)和理論化，我們來看看別人選擇方塊布局的原因。（順便提一句，我所指的方塊也包括矩形，有些案例也使用矩形。）使用這種元素有兩大原因。首先也是最重要的，它有助于組織內(nèi)容。其次，它也能打造特殊的樣式。它們是展現(xiàn)內(nèi)心渴望和需求的完美元素。
看看DennisAdelmann的作品集，顯而易見，方塊元素被用來組織排列他的作品。這是組織排列任意數(shù)量?jī)?nèi)容的簡(jiǎn)單途徑，讓事物保持簡(jiǎn)潔。
不過再看看WeLoveNoise這個(gè)網(wǎng)站，它就完全不同！是的，到處都是方塊，移動(dòng)鼠標(biāo)時(shí)還有個(gè)有趣的動(dòng)畫效果。不過除了組織內(nèi)容之外，你會(huì)發(fā)現(xiàn)方塊元素也成為了設(shè)計(jì)風(fēng)格的一部分。它是這種風(fēng)格關(guān)鍵的決定性元素。
怎樣用好它們？我不覺得使用方塊元素是什么難事。尤其是網(wǎng)頁(yè)，自從誕生之初就開始使用方塊形狀來設(shè)計(jì)界面。但是你若想更有效地使用它，請(qǐng)遵循以下幾個(gè)步驟。
制定希望達(dá)成的目標(biāo)根據(jù)你所要達(dá)成的目標(biāo)，頁(yè)面和區(qū)塊會(huì)有很大的不同。一旦你確定了，方塊元素就能幫助你完成目標(biāo)。你是用它來組織內(nèi)容？還是想為頁(yè)面增添一點(diǎn)樂趣？
看看PaperandPaint。他們使用方塊元素保持頁(yè)面井井有條，并且突出了頁(yè)面特有的流動(dòng)性。隨著鼠標(biāo)向下滾動(dòng)，每個(gè)方塊中的不同內(nèi)容都在進(jìn)行著視覺差滾動(dòng)——這是個(gè)非常酷的效果——每個(gè)方塊都向你講述獨(dú)特的故事，匯聚成整個(gè)頁(yè)面。這些方塊元素的作用，就是保持各部分對(duì)齊，形成一種整潔的時(shí)尚，同時(shí)也為各個(gè)頁(yè)面營(yíng)造不同的故事氛圍。
AnthonyJohnGroup使用方塊來展示他們創(chuàng)作的各個(gè)項(xiàng)目，還有關(guān)鍵的公司信息，比如“幕后團(tuán)隊(duì)”。主頁(yè)的規(guī)劃與構(gòu)建很棒，但也結(jié)合緊密。很明顯，他們致力于創(chuàng)造像這個(gè)頁(yè)面一樣優(yōu)雅的高端建筑設(shè)計(jì)，如果沒有這些方塊，可達(dá)不到這樣的效果。
使用方塊來組織內(nèi)容既然了解了你所追求的目標(biāo)——盡管那幾乎就是整合現(xiàn)有的信息——你會(huì)接觸到內(nèi)容組織的。你得把內(nèi)容編成目錄。要如何在各個(gè)方塊中組織信息——某些方塊內(nèi)容會(huì)比其他的更多嗎？這對(duì)組織內(nèi)容很有幫助，你會(huì)來回?cái)[弄，看看哪些有用哪些沒用，發(fā)現(xiàn)哪些內(nèi)容太多，哪些內(nèi)容太少。我保證這不是什么高超技巧，實(shí)際上它不太需要憑直覺，大多時(shí)候都很簡(jiǎn)單——坐下來去完成它就是了。
注意到上面這個(gè)網(wǎng)站沒有，BlockLevel，方塊和方塊中的圖標(biāo)就是全部了，只有圖標(biāo)。這就是我所指的組織內(nèi)容，BlockLevel的設(shè)計(jì)者故意在每個(gè)方塊中只留下一個(gè)圖標(biāo)。下一步就是要考慮如何將調(diào)整過的內(nèi)容放在令人愉悅的設(shè)計(jì)中，這正是我們下面要講的。
調(diào)整這些方塊，或者干脆不動(dòng)它！既然組織內(nèi)容的工作讓你了解一組組信息看起來是什么樣，你就要思考應(yīng)該怎么處理這些方塊。這是讓你打磨內(nèi)容塊大小的一步，可能你希望它們都保持一致——又或者你決定讓它們錯(cuò)落雜亂排布。這還是得取決于你的具體目標(biāo)。
從Nedd中可以看出，方塊元素都非常巨大，它們有著近似的寬度和相等的高度，讓網(wǎng)站看起來井井有條。我希望你注意的是，雖然這是偏向于內(nèi)容組織的用法，網(wǎng)站的樣式仍然非常有趣輕快，這主要得益于它的顏色、矢量元素、圓形的應(yīng)用、字體等等。
另一方面，我們還有像BananaCafé這樣元素散亂的網(wǎng)站——如果你想，也可以這樣優(yōu)美地亂序排列。這個(gè)網(wǎng)站看起來也很好玩，得益于它的字體、顏色的選用等等。方塊的這種特殊用法其實(shí)沒什么，只是一種特定的設(shè)計(jì)手段。
點(diǎn)綴樣式有千萬種設(shè)計(jì)方法，可以為你下個(gè)項(xiàng)目中的方塊元素打造特殊風(fēng)格。你可以將它們與其他元素自由組合，比如圓形，或者采用貫穿始終的矩形或正方形來營(yíng)造網(wǎng)站的視覺焦點(diǎn)。最后兩個(gè)例子中，你會(huì)再次見識(shí)如何將方塊良好地應(yīng)用于設(shè)計(jì)中，希望對(duì)你有所啟發(fā)，并能在你下個(gè)項(xiàng)目中發(fā)揮作用。
JanFinnesand用了全屏的寬度與高度來放置方塊，每一塊都有特殊作用，大多展示了他以往的項(xiàng)目案例。充滿整個(gè)瀏覽器窗口的方塊造就了一件非常酷的設(shè)計(jì)。
這家公司無處不用方塊！主頁(yè)上可以看到，他們也展示不同的案例。通過不同尺寸的正方形引導(dǎo)用戶視線。我最喜歡的一點(diǎn)是，他們用兩個(gè)正方形來組成一張更大的圖片，但每一張都指向一個(gè)獨(dú)特的項(xiàng)目——我覺得這很酷。
譯者：十萬個(gè)為什么；via：譯言網(wǎng)
推薦閱讀
廣告創(chuàng)意是更好的向特定的人群傳遞特定的信息，讓他們產(chǎn)生特定的消費(fèi)行動(dòng)的行為。目標(biāo)分為營(yíng)銷目標(biāo)和傳播目標(biāo)。目標(biāo)受眾找到使用你產(chǎn)品的主力消費(fèi)群，他們有哪些特性，>>>詳細(xì)閱讀
本文標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中的方塊元素
地址：http://www.geekbao.cn/a/blog/20140108/292443.html
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示