- 相關推薦
網頁設計靈動布局之相對自由式示例
在網站設計中，簡潔的網頁設計可能使用了多種元素來襯托網站內容，但依然還能保持整潔有序的外觀。不過，極簡網站設計是以內容為核心，多余的東西統統扔掉。而簡潔網頁設計則使用了創意和美學元素，在一定程度上，這是可行的。
網頁設計靈動布局之相對自由式示例
前言
我們人類千人千面，但怎么長都不會偏離骨骼。因此，保持了內在的堅固恒久性，外表就一出戲，相對自由式的進行視覺想象編結。布局排版說來很容易，無非就是整理好網頁的元素清單，然后一一放上版面即可。其實就因為自由搭配的方式千差萬別，我們總為最好解決方案心懸一線，其實最后的結果又馬馬虎虎。
優秀的排版是構圖、圖片、配色、字體等各方協調的共同結果，設計其實是沒有規則可循，審美從來都不在約束內發生。要想讓整個版式內容豐富又充滿呼吸的空間，需要我們整個的思考方式都流動起來。
沒有邊界
一段文字和一張圖片，甚至一個圖標……在你進行布局的時候，由于你的素材并不是立刻手到擒來，你的布局總是喜歡用一個個矩形來代表一段文字或一張圖片，這本沒有錯，但這個做法也會讓你陷入“框架陷阱”。
就像這樣一個布局，只是畫出了一個大致的框架圖，也許你只是想說這只是框架，因為設計規劃前期很多素材還并不完善。
然而，很有可能你就會因此而將頁面設計成這樣
當然，你會說這樣其實并沒有什么不好，因為幾乎我們所有看到的扁平化網頁都是這個樣式，但可以肯定的是，這個網頁并沒有多少呼吸的空間，整個網頁都被信息所填滿，如果稍微改變一下布局的元素大小和位置，其實就會展示出不一樣的版面效果(下圖)，而很顯而易見后者的排版是更為靈活的。
邊界所造成的局限就是你的思維，你將會習慣在這個框架內去思考解決方案，如果你想要躲過這個陷阱，就是學會越過框架去思考。就算你做好了框架，也要認識到這不過是一個前期的不確定方向的試探，你完全可以改變框架的構造。
很多設計師自詡為美術民工，而覺得自己離藝術家這個范疇越來越遠，其本質的差別就是，工匠只是重復一項勞動，在創造之前它就已經知道了目標。比如設計網頁前，已經知道最終網頁做成什么樣，那么你的工作就僅僅是按部就班完成每個元素的對齊工作。而藝術家則是在事前并不知道結果，往往是一步一試探去尋找更加有效的解決方案，藝術創作類似于一種冒險。設計師其實是取乎其中，也就是兩個身份兼有的理想結合。
創造焦點
這么說也許有點夸張，但任何一件好的平面作品，一定是有焦點的。就像我們談到過，十字準星型的視覺結構習慣將焦點置于中心位置，要制造一個焦點的辦法有很多，簡言之，就是制造沖突。想象你在一個人群稀疏的大廳，突然有兩個人高聲爭論什么，這時引起了幾個人圍觀，這個情景就在原本安靜的人流中制造了一個關注焦點。同樣，在視覺領域也是如此，利用對比沖突應該是一種最有效的制造焦點的方式。
對于焦點的認識我們也不應局限于是一個“點”，它是一塊正吸引你的視線所投射的區域。它還可以分為實焦點和虛焦點，實焦點是在虛焦點之上更為精準的投射存在。
這個頁面設計中，字母與靜物交相融合的區域位于正中，成為虛焦點，而利用色彩的對比，那副黃色眼鏡又從虛焦點的區域突出出來成為實焦點
除了色彩，其他任何屬性都可以經由對比形成焦點，這時你要做的，就是注意焦點不應太多。也因此，除了焦點以外，設計中的其他元素都要保持一種相似性。
這里我們總結一下能用于進行對比屬性，這些屬性之間形成的對比越大，沖突越大。
空間：充滿-空置、積極活躍-消極被動、前進-后退、近-遠、二維-三維、封閉-開放
形式：簡單-復雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機形式、直線-曲線、對稱-非對稱、完整-破碎
結構：井井有條-混亂無序、排列成序-隨意放置、襯線字體-無襯線字體、機械-手工
紋理：細-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍
位置：頂部-底部、高-低、右-左、上-下、前-后、有節奏-隨意、單獨-分組、接近-遠離、中心-邊緣、整齊排列-互不關聯、內-外
方向：垂直-水平、垂直線-對角線、向前-向后、穩定-活動、內聚-分散、順時針方向-逆時針方向、凹形-凸形、正體字-斜體字
尺寸：大-小、長-短、窄-寬、擴大-收縮、深-淺
顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和(深色)-無色(素色)
密度：透明-晦暗、稠密-稀薄、液體-固體
重力：輕-重、穩定-不穩定
注：上述內容摘自《平面設計原理》一書
設計師在做設計時，其實并不會將這些規范提前設定在大腦中，而是經過經驗的積累而形成一種潛在的直覺，這份清單的意義并不是需要你記下它，而是瀏覽完后，在設計的任何場合的提醒。比如一份作品完成后，可以看看究竟焦點是否足夠吸引，哪些元素需要進一步調整。
焦點突出的前提是非焦點區域的元素盡量保持一致。制造沖突似乎手到擒來，但是要保持一致卻需要步步為營。
例如下圖頁面正中的圖案也是整個頁面的焦點所在
可以看到虛焦點區域是這個由手繪花朵、幾何圖案數字以及其他手繪圖案組成的這個圖案幾何體，實焦點卻是落在了最大的手繪花朵上。這時，手繪花朵的有機與相鄰的幾何形有了一個對比，這就是幾何形式與有機形式的對比。
最大的實心花朵的尺寸大小剛好和右下方手繪的大腦的尺寸相同，而它們之間也存在色彩與無色彩的對比。
三角的幾何形與數字的位置剛好都是三角。再仔細觀察整個彩繪花朵的材質和圖中的幾何形以及數字的材質都相同，而與手繪的大腦的繪畫材質有明顯的差別，它們彼此間相互對比，而彼此又有統一。
經過分析觀察，一個焦點的構造也沒有想象那么簡單。如果把對比和統一看作一個天平的兩極，那么所有元素間的關系都是在它們之間取值，此消彼長最后達到平衡。這完全可以看作是一種力學。
如果你的畫面中元素越多，越需要你加強整個畫面的統一的力量。
下面這個設計是由許多小插畫所聚合的一個頁面，一不小心就陷入凌亂，而設計師將這些插畫分為三塊內容，每塊內容用背景色分區，形成三個矩形，這是形狀的統一。這些插畫的材質和風格也統一，同時插畫的物體所展示的方向也都是往斜下方，也形成了一種統一。因此，你可以看到這個畫面的對比的力量相對較弱，焦點是左邊的矩形這一點沒有人懷疑，而這個焦點里的插畫可以看到是一件男士襯衫和女士襯衫，男女用品的形成了對比。這個對比相對而言并不十分強烈。
【網頁設計靈動布局之相對自由式示例】相關文章：
網頁設計的布局12-06
常見的網頁布局設計04-21
網頁設計中美麗的布局03-19
關于網頁設計布局的分析03-30
常見的網頁布局設計有哪些03-27
網頁設計實習心得范文示例03-31
網頁設計實習總結范文示例04-02
網頁設計要明確的那些布局細節12-20