亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識(shí)
簡單有效的空間共享式網(wǎng)頁排版

2017-06-19

2542

 越來越多的網(wǎng)頁內(nèi)容開始采取別具一格的排版設(shè)計(jì),其中最典型的一種,就是讓文字布局橫跨不同的元素所處的區(qū)域,讓排版和其他的模塊共享空間。這種設(shè)計(jì)理念并不復(fù)雜,而這種趨勢也在網(wǎng)頁設(shè)計(jì)領(lǐng)域越來越熱。


  這種設(shè)計(jì)手法非常容易識(shí)別,文字排版部分通常會(huì)從頁面的一個(gè)區(qū)域,延伸到另外一個(gè)模塊所在的區(qū)域,比如某個(gè)圖片上的文字內(nèi)容延伸到另外一個(gè)圖片或者彩色區(qū)塊當(dāng)中,共享了其他組件的空間。這種設(shè)計(jì)所牽涉到的頁面圖層的實(shí)現(xiàn)方式會(huì)很有意思,因?yàn)樗梢猿休d很多富有創(chuàng)造力的設(shè)計(jì)。所以,接下來廣州網(wǎng)站建設(shè)帶你一起來看看一些典型的設(shè)計(jì)手法:


  空間共享式文字排版
  這種空間共享式排版是一種相當(dāng)容易識(shí)別的設(shè)計(jì)手法。實(shí)際上,在一些海報(bào)和明信片設(shè)計(jì)中,也可以采用這樣的設(shè)計(jì)。它的最典型的特征是,文字或者相似的元素橫跨多個(gè)圖層、模塊或者區(qū)塊。
  從廣泛意義上來講,這個(gè)設(shè)計(jì)手法的核心概念是某個(gè)元素和其他的元素共享空間,橫跨不同區(qū)域,元素相互疊加。這種設(shè)計(jì)常常被視作為分屏設(shè)計(jì)的一種延伸。
  許多跨區(qū)域的排版設(shè)計(jì)都非常明顯,但是也有比較微妙的,比如上面的網(wǎng)頁 Hometown Trolley 。右側(cè)文本部分伸出一條線,將用戶視覺引導(dǎo)到左側(cè)的圖像當(dāng)中,如果你仔細(xì)觀察,還會(huì)發(fā)現(xiàn)左邊汽車的后視鏡從背景中突出并延伸到右側(cè)的文本區(qū)塊當(dāng)中來。
  如果設(shè)計(jì)得合理的話,這種設(shè)計(jì)手法能夠借助元素區(qū)域的疊加,有效的幫助用戶更好地了解內(nèi)容和信息。共享的區(qū)域成為了不同區(qū)塊和不同信息的連接。這種設(shè)計(jì)的另外一個(gè)好處在于,文本內(nèi)容可以更好的被承載,共享的模式就像是兩個(gè)相互連接的巨型卡片模塊。


      圖片和文本的混排

  漂亮的排版和精美的圖片總能相輔相成。許多設(shè)計(jì)師都喜歡在使用共享空間式排版的時(shí)候,采用垂直定向的圖片(不過由于各種屏幕的高寬比不同,這種技術(shù)使用的比例并不高。)。
  空間共享式的排版設(shè)計(jì)能夠?qū)⒏鞣N元素的屬性淋漓盡致地呈現(xiàn)出來,還能確保整體設(shè)計(jì)在視覺上的愉悅感。文本字母可以橫跨圖片和留白,也可以在各個(gè)區(qū)域單獨(dú)地使用,合起來看和分開看都含有意義,就像視覺化的“雙關(guān)”。
  而上面的 Square Apartments 就是這樣的設(shè)計(jì),標(biāo)題無論是合起來看,還是分開看,都具有意義。
  這樣的設(shè)計(jì)有一個(gè)好處,由于文本需要跨越不同的區(qū)域,配色不用保持完全的統(tǒng)一,根據(jù)文字周圍的背景色進(jìn)行調(diào)整,這樣的設(shè)計(jì)簡單而容易上手。難的地方在于文本內(nèi)容的分拆和合并的狀態(tài)下,表達(dá)的含義是否都合適。


      大膽的字體選取

  有趣而又獨(dú)樹一幟的字體,在跨越不同模塊的空間共享式布局下,能帶來獨(dú)特的視覺體驗(yàn)。這樣的字體通常本身就可以很好地發(fā)揮強(qiáng)調(diào)的作用,即使橫跨多個(gè)不同的區(qū)域,也不會(huì)降低其作為焦點(diǎn)的地位。
  如果你想沿著這個(gè)思路來設(shè)計(jì),最好的做法是讓標(biāo)題盡量長一點(diǎn),選取足夠亮眼的字體,和字體色彩有足夠?qū)Ρ榷鹊膱D片和文本背景色,確保文本的良好可讀性。
  可讀性是這種設(shè)計(jì)手法中最重要的點(diǎn),通常情況下,文本部分會(huì)選擇黑色或者白色的字體,雖然許多用戶看起來可能會(huì)覺得簡單,但是要平衡圖片、背景和文本三個(gè)部分的配色體系,實(shí)際上還是挺麻煩的。


      色塊和文本的搭配

  圖片和文本的搭配是許多設(shè)計(jì)師的首選搭配方案,但是如果沒有圖片也同樣可以實(shí)現(xiàn)空間共享式的排版設(shè)計(jì),使用色塊、幾何圖形和文本,是一樣的道理。
  上方 Startup Lab 的網(wǎng)站就將色塊和文本以極其時(shí)尚的方式搭配起來,文字橫跨白色的背景和不同的色塊,合理的色彩對(duì)比讓整個(gè)視覺顯得微妙又舒服。


      添加動(dòng)效作為提示

  使用空間共享式的排版,并不以為著你不能使用其他的設(shè)計(jì)手法,比如動(dòng)效就可以與之很好的結(jié)合起來。使用動(dòng)效、視差等特效能夠便于用戶理解你的設(shè)計(jì),鼓勵(lì)用戶與頁面交互。
  在頁面元素較多的時(shí)候,微妙的動(dòng)效能夠更好的創(chuàng)建視覺焦點(diǎn)。
  在上面的頁面當(dāng)中,那個(gè)小的圓形LOGO會(huì)緩慢地轉(zhuǎn)動(dòng),在這個(gè)不對(duì)稱布局的頁面當(dāng)中,它是當(dāng)之無愧的視覺焦點(diǎn)。它很好地填補(bǔ)了圖片和文本之間的空白,讓整體設(shè)計(jì)更加完整和平衡,加上動(dòng)畫效果,你會(huì)對(duì)這個(gè)品牌有印象深刻。


      保持簡約

  在絕大多數(shù)的情況下,簡約的設(shè)計(jì)還是非常有效的。雖然這是老生常談,但是它完美的規(guī)避了復(fù)雜設(shè)計(jì)所面臨的各種問題,高效直接的排版設(shè)計(jì)也更容易發(fā)揮作用。這個(gè)時(shí)候,一個(gè)簡單的空間共享式的排版就能夠讓用戶立刻注意到,并且發(fā)揮效果。
  如果你不知道從何入手,可以嘗試使用最簡單的極簡布局框架,使用黑色的文本和白色的背景,就像上面Melville 這個(gè)也能,讓彩色的圖片成為視覺焦點(diǎn)。


      結(jié)語

  在空間共享式的頁面中,排版設(shè)計(jì)和圖片的處理相對(duì)而言更加現(xiàn)代化,相比傳統(tǒng)的設(shè)計(jì)手法而言,其實(shí)并沒有復(fù)雜多少。這種設(shè)計(jì)手法讓頁面中常常被用戶忽略的元素和其他的元素有了更多的交集,讓頁面內(nèi)的元素“互動(dòng)”了起來。


本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天科技

標(biāo)簽:縱天,廣州網(wǎng)站建設(shè),廣州網(wǎng)頁設(shè)計(jì),廣州網(wǎng)站設(shè)計(jì)

免費(fèi)咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項(xiàng)目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請(qǐng)放心填寫
關(guān)閉
免費(fèi)獲取方案