如何打造豐富 充滿呼吸感的網頁設計布局

2021-08-07 20:11:47 字數 2641 閱讀 1970

人類千人千面,但怎麼長都不會偏離骨骼。因此,保持了內在的堅固恆久性,外表就一齣戲,相對自由式的進行視覺想象編結。布局排版說來很容易,無 非就是整理好網頁的元素清單,然後一一放上版面即可。其實就因為自由搭配的方式千差萬別,我們總為最好解決方案心懸一線,其實最後的結果又馬馬虎虎。

優秀的排版是構圖、、配色、字型等各方協調的共同結果,設計其實是沒有規則可循,審美從來都不在約束內發生。要想讓整個版式內容豐富又充滿呼吸的空間,需要我們整個的思考方式都流動起來。

沒有邊界

一段文字和一張,甚至乙個圖示……在你進行布局的時候,由於你的素材並不是立刻手到擒來,你的布局總是喜歡用乙個個矩形來代表一段文字或一張,這本沒有錯,但這個做法也會讓你陷入「框架陷阱」。

就像這樣乙個布局,只是畫出了乙個大致的框架圖,也許你只是想說這只是框架,因為設計規劃前期很多素材還並不完善。

然而,很有可能你就會因此而將頁面設計成這樣

當然,你會說這樣其實並沒有什麼不好,因為幾乎我們所有看到的扁平化網頁都是這個樣式,但可以肯定的是,這個網頁並沒有多少呼吸的空間,整 個網頁都被資訊所填滿,如果稍微改變一下布局的元素大小和位置,其實就會展示出不一樣的版面效果(下圖),而很顯而易見後者的排版是更為靈活的。

邊界所造成的侷限就是你的思維,你將會習慣在這個框架內去思考解決方案,如果你想要躲過這個陷阱,就是學會越過框架去思考。就算你做好了框架,也要認識到這不過是乙個前期的不確定方向的試探,你完全可以改變框架的構造。

很多設計師自詡為美術民工,而覺得自己離藝術家這個範疇越來越遠,其本質的差別就是,工匠只是重複一項勞動,在創造之前它就已經知道了目標。比如設 計網頁前,已經知道最終網頁做成什麼樣,那麼你的工作就僅僅是按部就班完成每個元素的對齊工作。而藝術家則是在事前並不知道結果,往往是一步一試探去尋找 更加有效的解決方案,藝術創作類似於一種冒險。設計師其實是取乎其中,也就是兩個身份兼有的理想結合。

創造焦點

這麼說也許有點誇張,但任何一件好的平面作品,一定是有焦點的。就像我們談到過,十字準星型的視覺結構習慣將焦點置於中心位置,要製造乙個焦點的辦 法有很多,簡言之,就是製造衝突。想象你在乙個人群稀疏的大廳,突然有兩個人高聲爭論什麼,這時引起了幾個人圍觀,這個情景就在原本安靜的**中製造了一 個關注焦點。同樣,在視覺領域也是如此,利用對比衝突應該是一種最有效的製造焦點的方式。

對於焦點的認識我們也不應侷限於是乙個「點」,它是一塊正吸引你的視線所投射的區域。它還可以分為實焦點和虛焦點,實焦點是在虛焦點之上更為精準的投射存在。

這個頁面設計中,字母與靜物交相融合的區域位於正中,成為虛焦點,而利用色彩的對比,那副黃色眼鏡又從虛焦點的區域突出出來成為實焦點

除了色彩,其他任何屬性都可以經由對比形成焦點,這時你要做的,就是注意焦點不應太多。也因此,除了焦點以外,設計中的其他元素都要保持一種相似性。

這裡我們總結一下能用於進行對比屬性,這些屬性之間形成的對比越大,衝突越大。

設計師在做設計時,其實並不會將這些規範提前設定在大腦中,而是經過經驗的積累而形成一種潛在的直覺,這份清單的意義並不是需要你記下它,而是瀏覽完後,在設計的任何場合的提醒。比如乙份作品完成後,可以看看究竟焦點是否足夠吸引,哪些元素需要進一步調整。

焦點突出的前提是非焦點區域的元素盡量保持一致。製造衝突似乎手到擒來,但是要保持一致卻需要步步為營。

例如下圖頁面正中的圖案也是整個頁面的焦點所在

可以看到虛焦點區域是這個由手繪花朵、幾何圖案數字以及其他手繪圖案組成的這個圖案幾何體,實焦點卻是落在了最大的手繪花朵上。這時,手繪花朵的有機與相鄰的幾何形有了乙個對比,這就是幾何形式與有機形式的對比。

最大的實心花朵的尺寸大小剛好和右下方手繪的大腦的尺寸相同,而它們之間也存在色彩與無色彩的對比。

三角的幾何形與數字的位置剛好都是三角。再仔細觀察整個彩繪花朵的材質和圖中的幾何形以及數字的材質都相同,而與手繪的大腦的繪畫材質有明顯的差別,它們彼此間相互對比,而彼此又有統一。

經過分析觀察,乙個焦點的構造也沒有想象那麼簡單。如果把對比和統一看作乙個天平的兩極,那麼所有元素間的關係都是在它們之間取值,此消彼長最後達到平衡。這完全可以看作是一種力學。

如果你的畫面中元素越多,越需要你加強整個畫面的統一的力量。

下面這個設計是由許多小插畫所聚合的乙個頁面,一不小心就陷入凌亂,而設計師將這些插畫分為三塊內容,每塊內容用背景色分割槽,形成三個矩形,這是形 狀的統一。這些插畫的材質和風格也統一,同時插畫的物體所展示的方向也都是往斜下方,也形成了一種統一。因此,你可以看到這個畫面的對比的力量相對較弱, 焦點是左邊的矩形這一點沒有人懷疑,而這個焦點裡的插畫可以看到是一件男士襯衫和女士襯衫,男女用品的形成了對比。這個對比相對而言並不十分強烈。

靈動本身是乙個極富感染力的詞彙,也許源於此很多人以為這就需要煞費苦心,其實往往越用力越欲速而不達,只要明確了設計的目標,你就只需要跟隨目標 而進入過程。這裡不得不提及,很多看似簡單的可操作性的技巧都未必能真正幫到你,比如「運用**比例就能獲得最佳效果」「非對稱布局一定比對稱布局更具動 感」「乙個頁面的色彩不得超過三種顏色」「字型用藍色閱讀體驗不佳」……類似這樣的經驗總結之所以會誤導你的原因,並非它本身不正確,而是由於它並沒有為 初學者提供乙個外部環境,他們只給出了基於他們設計現場裡出現的問題的解決方案,而換個環境就未必適合你。

設計最好玩的是,永遠沒有標準答案。一件即使被稱為大師的傑作也等待有人能突破它,或許我們也應該放棄「突破」這個競技式的思維表達,而應該說,不同的人應該演繹不同的風格。

做**找靈度創想

13229979395

[email protected]

聯絡人:許小姐

如何用時間 精力管理打造豐富高效的一天

在快速發展的當代,越來越多的 it 從業者們壓力與日俱增,但是這些繁忙真的創造了對等的價值嗎?答案也許是否定的。只有掌握了時間 精力的管理,才能在最短的時間內完成一天的工作,實現6點下班的 夢想 才會有大量的時間可以用來高效的提公升自己。拒絕低效和疲倦,自己的人生由自己來定義!本場 chat 首先會...

GoGoKid打造豐富的教學內容,強化學員學習效果

gogokid教研團隊發現,每週上課頻次更高 更規律的孩子,在英語能力 學習習慣等方面的表現,都要好於其他孩子。學習語言需要大量且連貫的輸入,才能構建出完整的知識體系,而時斷時續的學習,則會將知識體系塑造的如同乳酪一般,看似完整,實則內部充滿漏洞,且隨著 知識乳酪 的增大,漏洞會也會變得越來越多。g...

如何打造社群人設

乙個優質的人設可以在社群運營中發揮很大的作用,將產品擬人化,強化產品在使用者心中的地位,提高使用者對產品的好感,增強使用者的使用體驗感。一 打造人設的必要性 乙個社群只有成員和成員之間 成員和運營人員之間建立朋友的關係,才會產生對彼此的信任感,通過乙個人設的打造,明確企業或產品在使用者心中的地位,讓...