您現在的位置是:首頁 > 攝影首頁攝影

如何讓你的設計帶有仙氣?打造頁面的空間感

由 設計樹 發表于 攝影2021-08-29
簡介背景、色塊、主體內容,輕鬆實現頁面的層次感,瞬間有了空間感

什麼變化能使畫面產生空間感

讓頁面自由呼吸——打造頁面的空間感

紙,或者頁面都是扁平的,但是作為觀眾,卻是立體的。充分打造頁面的空間感,形成自由的呼吸空間,不僅可以是頁面整體充滿張力,還能使觀眾如置身其間,任意翱翔,很好地實現頁面與觀眾之間的互動。

一、改造背景實現空間感

1:虛化背景

虛化背景借鑑了攝影中的淺景深效果,實現前清後蒙,突出前方清晰的 主體內容的同時,拉開前後內容的距離,實現空間感。

【景深】

如何讓你的設計帶有仙氣?打造頁面的空間感

景深是指在攝影機鏡頭或其他成像器前沿能夠取得清晰影象的成像所測 定的被攝物體前後距離範圍。在聚焦完成後,在焦點前後的範圍內都能 形成清晰的像,這一前一後的距離範圍,便叫做景深。

左圖:雖然背景頁面炫麗,但是各種的噪點嚴重影響了主題文字的閱讀性!且背景和文字的雜亂混合排版是的頁面整體很“平”。

右圖:虛化背景,加強了主題文字的識別性,保留背景效果的同時拉開了背景和主題之間的距離,實現了空間感。

【背摂虛化例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

2:融合背景

我選用了十分高大上的背景,已經很有空間感,我不想把它遮起來,這時候該怎麼辦呢?這時,我們就可以考慮講主題內容融合到背景中去,既有效的利用了背景,又使得整個頁面空間感十足。

如何讓你的設計帶有仙氣?打造頁面的空間感

左圖:背景的選擇很有場景感、故事感,但是由於文字的隨意擺放,不僅脫離了場景,而且活生生的把圖片壓扁了,讓人呼吸急促。

右圖:直接將文字置入背景中,與其融為一體,使得背景的圖片的空間得到了很好的釋放。

【背景融合例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

3:留白背景

背景的複雜性可能使我們很難對其進行改造,使主體融入其中,此時, 我們可以借鑑國畫中的留白手法,空出一塊新增主體。不僅沒有破壞背 景的空間感,同時因為留白區域的存在,使得主體的空間感更大頁面更 “舒暢”,呼吸感更強。

【留白】:留白可以留白使畫面構圖協調,減少構圖太滿給人的壓抑感。很自然地引導讀者把目光引向主體。

如何讓你的設計帶有仙氣?打造頁面的空間感

左圖:背景的感覺很好,清爽,但是建築居中,而我又想把文字居中,此時如果直接把文字貼上去,就會造成主題視覺的雜亂,頁面失去空間感。

右圖:對圖片進行簡單的處理,人為的製造留白空間,既突出主體,也讓頁面充滿空間感。

【背景留白例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

當然留白不是說真的一片慘白,可以是色塊,也可以是加紋理,唯一要求就是噪點少,不影響新增的內容。

二、新增元素實現空間感

1:新增色塊

把背景進行改造太困難,空間感不夠強?那麼給背景添加個“狗皮膏藥”吧。背景、色塊、主體內容,輕鬆實現頁面的層次感,瞬間有了空間感。

如何讓你的設計帶有仙氣?打造頁面的空間感

左圖:虛化背景,拉開了背景和主題的距離,但是空間感還是不夠強烈。

右圖:利用層疊色塊,即降低了背景對主體的干擾,同時打造了頁面的層次感,空間感更加強烈。

【新增色塊例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

2:打造細節

如何讓你的設計帶有仙氣?打造頁面的空間感

左圖:這是一個沒有修飾的按鈕,很平,很沒有空間感。

右圖:這也是一個扁平按鈕,但是它其實並不平,1PX的內陰影,輕微的漸變,加一點點的投影,空間感立馬顯現。

【不平的扁平風格例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

3:新增動感元素

如何讓一潭死水泛起漣漪?投一顆石子。如何讓死寂的頁面活泛?加入擁有動感的元素。

如何讓你的設計帶有仙氣?打造頁面的空間感

左圖:雖然頁面乾淨,主體也突出,但是空間感還是比較弱。

右圖:稍微新增飛舞的花瓣,就可以讓頁面活起來,同時充分利用近大遠小、近實遠虛的透視關係可以進一步加強頁面的空間感。

【動感例項】

如何讓你的設計帶有仙氣?打造頁面的空間感

總結

雖然我們面對的是一張白紙或者一個頁面,但是為了讓觀眾被內容所吸引,並且覺得舒暢,空間感就必不可少。以上列舉了幾種加強空間感的方法,當然他們可以混合使用,方法也不僅僅限於這些,歡迎大家提出更多的方法。