簡單有效的空間共享式網(wǎng)頁排版

越來越多的網(wǎng)頁內(nèi)容開始采取別具一格的排版設(shè)計,其中最典型的一種,就是讓文字布局橫跨不同的元素所處的區(qū)域,讓排版和其他的模塊共享空間。這種設(shè)計理念并不復(fù)雜,而這種趨勢也在網(wǎng)頁設(shè)計領(lǐng)域越來越熱。
這種設(shè)計手法非常容易識別,文字排版部分通常會從頁面的一個區(qū)域,延伸到另外一個模塊所在的區(qū)域,比如某個圖片上的文字內(nèi)容延伸到另外一個圖片或者彩色區(qū)塊當中,共享了其他組件的空間。這種設(shè)計所牽涉到的頁面圖層的實現(xiàn)方式會很有意思,因為它可以承載很多富有創(chuàng)造力的設(shè)計。所以,接下來我們一起來看看一些典型的設(shè)計手法:
空間共享式文字排版
這種空間共享式排版是一種相當容易識別的設(shè)計手法。實際上,在一些海報和明信片設(shè)計中,也可以采用這樣的設(shè)計。它的最典型的特征是,文字或者相似的元素橫跨多個圖層、模塊或者區(qū)塊。
從廣泛意義上來講,這個設(shè)計手法的核心概念是某個元素和其他的元素共享空間,橫跨不同區(qū)域,元素相互疊加。這種設(shè)計常常被視作為分屏設(shè)計的一種延伸。
許多跨區(qū)域的排版設(shè)計都非常明顯,但是也有比較微妙的,比如上面的網(wǎng)頁 Hometown Trolley 。右側(cè)文本部分伸出一條線,將用戶視覺引導(dǎo)到左側(cè)的圖像當中,如果你仔細觀察,還會發(fā)現(xiàn)左邊汽車的后視鏡從背景中突出并延伸到右側(cè)的文本區(qū)塊當中來。
如果設(shè)計得合理的話,這種設(shè)計手法能夠借助元素區(qū)域的疊加,有效的幫助用戶更好地了解內(nèi)容和信息。共享的區(qū)域成為了不同區(qū)塊和不同信息的連接。這種設(shè)計的另外一個好處在于,文本內(nèi)容可以更好的被承載,共享的模式就像是兩個相互連接的巨型卡片模塊。
圖片和文本的混排
漂亮的排版和精美的圖片總能相輔相成。許多設(shè)計師都喜歡在使用共享空間式排版的時候,采用垂直定向的圖片(不過由于各種屏幕的高寬比不同,這種技術(shù)使用的比例并不高。)。
空間共享式的排版設(shè)計能夠?qū)⒏鞣N元素的屬性淋漓盡致地呈現(xiàn)出來,還能確保整體設(shè)計在視覺上的愉悅感。文本字母可以橫跨圖片和留白,也可以在各個區(qū)域單獨地使用,合起來看和分開看都含有意義,就像視覺化的"雙關(guān)"。
而上面的 Square Apartments 就是這樣的設(shè)計,標題無論是合起來看,還是分開看,都具有意義。
這樣的設(shè)計有一個好處,由于文本需要跨越不同的區(qū)域,配色不用保持完全的統(tǒng)一,根據(jù)文字周圍的背景色進行調(diào)整,這樣的設(shè)計簡單而容易上手。難的地方在于文本內(nèi)容的分拆和合并的狀態(tài)下,表達的含義是否都合適。
大膽的字體選取
有趣而又獨樹一幟的字體,在跨越不同模塊的空間共享式布局下,能帶來獨特的視覺體驗。這樣的字體通常本身就可以很好地發(fā)揮強調(diào)的作用,即使橫跨多個不同的區(qū)域,也不會降低其作為焦點的地位。
如果你想沿著這個思路來設(shè)計,最好的做法是讓標題盡量長一點,選取足夠亮眼的字體,和字體色彩有足夠?qū)Ρ榷鹊膱D片和文本背景色,確保文本的良好可讀性。
可讀性是這種設(shè)計手法中最重要的點,通常情況下,文本部分會選擇黑色或者白色的字體,雖然許多用戶看起來可能會覺得簡單,但是要平衡圖片、背景和文本三個部分的配色體系,實際上還是挺麻煩的。
色塊和文本的搭配
圖片和文本的搭配是許多設(shè)計師的首選搭配方案,但是如果沒有圖片也同樣可以實現(xiàn)空間共享式的排版設(shè)計,使用色塊、幾何圖形和文本,是一樣的道理。
上方 Startup Lab 的網(wǎng)站就將色塊和文本以極其時尚的方式搭配起來,文字橫跨白色的背景和不同的色塊,合理的色彩對比讓整個視覺顯得微妙又舒服。
添加動效作為提示
使用空間共享式的排版,并不以為著你不能使用其他的設(shè)計手法,比如動效就可以與之很好的結(jié)合起來。使用動效、視差等特效能夠便于用戶理解你的設(shè)計,鼓勵用戶與頁面交互。
在頁面元素較多的時候,微妙的動效能夠更好的創(chuàng)建視覺焦點。
在上面的頁面當中,那個小的圓形LOGO會緩慢地轉(zhuǎn)動,在這個不對稱布局的頁面當中,它是當之無愧的視覺焦點。它很好地填補了圖片和文本之間的空白,讓整體設(shè)計更加完整和平衡,加上動畫效果,你會對這個品牌有印象深刻。
保持簡約
在絕大多數(shù)的情況下,簡約的設(shè)計還是非常有效的。雖然這是老生常談,但是它完美的規(guī)避了復(fù)雜設(shè)計所面臨的各種問題,高效直接的排版設(shè)計也更容易發(fā)揮作用。這個時候,一個簡單的空間共享式的排版就能夠讓用戶立刻注意到,并且發(fā)揮效果。
如果你不知道從何入手,可以嘗試使用最簡單的極簡布局框架,使用黑色的文本和白色的背景,就像上面Melville 這個也能,讓彩色的圖片成為視覺焦點。
結(jié)語在空間共享式的頁面中,排版設(shè)計和圖片的處理相對而言更加現(xiàn)代化,相比傳統(tǒng)的設(shè)計手法而言,其實并沒有復(fù)雜多少。這種設(shè)計手法讓頁面中常常被用戶忽略的元素和其他的元素有了更多的交集,讓頁面內(nèi)的元素"互動"了起
來。
相關(guān)文章
寶塔面板屏蔽 Censys的配置方法(防止源站 IP 泄露)
Censys 搜索引擎很強大,Censys 每天都會掃描 IPv4 地址空間,以搜索所有聯(lián)網(wǎng)設(shè)備并收集相關(guān)的信息,并返回一份有關(guān)資源(如設(shè)備、網(wǎng)站和證書)配置和部署信息的總體報告2025-03-01使用高防服務(wù)器或者高防CDN后為什么還會出現(xiàn)源站IP被打
近來站長們應(yīng)該基本都遇到過 DDOS 攻擊,特別是 CC,如果放任不管,會導(dǎo)致服務(wù)器資源緊張,導(dǎo)致用戶無法正常訪問,有時間就算接入了高防服務(wù)器,源站 IP 還是被打,網(wǎng)站打不2025-03-01- 當我們談?wù)摾@過CDN查找真實IP的時候,不得不提到SSL證書,它確實是我們尋找真實IP的一大利器,至于為什么SSL證書會導(dǎo)致源站IP泄露?很多人或許沒有深入了解這個問題,目前好2025-03-01
- 默認CloudFlare都是讓大家通過dns接入,但大家因為已經(jīng)習慣了dnspod等解析方式,那么cname就比較方便大家使用了,下面為大家分享一下cname的接入方法,需要的朋友可以參考下2025-02-20
- 是否需要高防服務(wù)器呢,最近很多網(wǎng)站遭受ddos與cc攻擊,雙11之際旅途云特為大家提供了性價比更高的高防服務(wù)器套餐需要的朋友可以咨詢2023-11-12
華為云優(yōu)惠券在哪里獲得?華為云優(yōu)惠券領(lǐng)取
在本篇文章里小編給大家整理的是關(guān)于華為云優(yōu)惠券領(lǐng)取的方法和入口,有此需要的朋友們可以領(lǐng)取下,希望對你有幫助。2020-03-12華為云優(yōu)惠券怎么用?華為云優(yōu)惠券使用方法
在本篇文章里小編給大家整理了關(guān)于華為云優(yōu)惠券使用方法和詳細步驟,有興趣的朋友們可以學習下。2020-03-12華為云優(yōu)惠券在哪能找到?華為云優(yōu)惠券領(lǐng)取教程
我們給大家?guī)砣绾斡脙?yōu)惠的方法購買華為云主機的方法以及給大家分享華為云的優(yōu)惠券和代金券,希望能夠幫助到大家。2020-02-26進行https證書申請安裝和tomcat https證書安裝的方法
對于https證書,想必大家已經(jīng)非常熟悉了,這是一種可以保護網(wǎng)站安全的證書,以https開頭的網(wǎng)站都是具有這一證書的網(wǎng)站。今天給大家介紹怎樣進行https證書申請安裝和tomcat2019-10-31- 庫店創(chuàng)始人鄭劍豪,原寺庫商城總經(jīng)理,2010年聚劃算創(chuàng)始團隊成員,5年時間幫助寺庫成功上市。庫店,是美國納斯達克上市企業(yè)寺庫旗下高品質(zhì)社交電商平臺,獲京東與LVMH集團旗下基2018-11-01