超實(shí)用的版式設(shè)計(jì)技巧全方位總結(jié)

2015-12-07

2749

在信息化社會(huì)的浪潮中，快節(jié)奏的生活讓人們開(kāi)始學(xué)會(huì)選擇性關(guān)注。如何在紛繁的信息中引導(dǎo)用戶(hù)？有沒(méi)有科學(xué)的方法？這是當(dāng)今設(shè)計(jì)師所面臨的問(wèn)題。界面版式的構(gòu)成是信息傳播的橋梁，也是視覺(jué)傳達(dá)的重要手段?？茖W(xué)的編排技術(shù)，以及實(shí)用性與藝術(shù)性的合理運(yùn)用，才能成就更快、更準(zhǔn)確的信息傳遞。時(shí)尚頻道作為騰訊網(wǎng)中更強(qiáng)調(diào)視覺(jué)呈現(xiàn)的頻道，在運(yùn)營(yíng)的過(guò)程中通常有非常鮮明的案例。本節(jié)我們就從這些案例中剖析一些方式，來(lái)感受版面設(shè)計(jì)中的科學(xué)性和趣味性。

圖片的排列組合

距離感

“距離”在心理上表示親近的程度，親近度減弱則表示變遠(yuǎn)，親近度增強(qiáng)則表示變近。在排版設(shè)計(jì)中，同樣也可以用距離的遠(yuǎn)近表現(xiàn)各部分內(nèi)容之間的親密程度。例如，通過(guò)調(diào)整各部分內(nèi)容的間距，來(lái)表現(xiàn)各部分內(nèi)容之間的關(guān)聯(lián)性。但需要注意的是，過(guò)多不同的距離設(shè)定反而會(huì)違背區(qū)分其關(guān)聯(lián)性的初衷。

接下來(lái)我們來(lái)看一下時(shí)裝周秀場(chǎng)專(zhuān)題界面秀場(chǎng)圖的展示部分。由于每場(chǎng)大秀為相同的層級(jí)關(guān)系，所以其圖片排布采用了相同的距離來(lái)展現(xiàn)。利用距離進(jìn)行明確的組別劃分，將一類(lèi)的圖片進(jìn)行整合，同時(shí)也緩解了圖片繁多的壓迫感。同時(shí)每場(chǎng)秀的權(quán)重是平等的，所以運(yùn)用了相同尺寸的圖片平鋪設(shè)計(jì)，利用了組合圖片的反復(fù) 效果，帶給用戶(hù)信息充足而又凝練的印象（見(jiàn)圖1）。

圖1 相同的排布距離且相同尺寸的示例（圖片由尤目YVMIN品牌授權(quán)使用）

而街拍的部分則運(yùn)用大小不一的圖片排布，通過(guò)主次關(guān)系的區(qū)分，突出獨(dú)家看點(diǎn)的內(nèi)容，同時(shí)圖片的間距相同，代表它們?nèi)匀皇菑膶儆谝粋€(gè)大環(huán)境下的平級(jí)內(nèi)容，親密度是相同的（見(jiàn)圖2）。

圖2 相同的排布距離但不同尺寸的示例

這里也運(yùn)用了數(shù)學(xué)上的兩個(gè)理論，對(duì)稱(chēng)與等比。

對(duì)稱(chēng)構(gòu)圖有左右對(duì)稱(chēng)與上下對(duì)稱(chēng)等形式。對(duì)稱(chēng)的構(gòu)圖方式能夠給用戶(hù)帶來(lái)一種整齊安定的印象。在基本的對(duì)稱(chēng)形式上加入一些微妙的變化，也會(huì)給用戶(hù)帶來(lái)驚喜，就如同此案例在對(duì)稱(chēng)的基礎(chǔ)上進(jìn)行了垂直翻轉(zhuǎn)的處理。在設(shè)計(jì)此版塊的前期，需求方提出此版塊的內(nèi)容為自動(dòng)調(diào)取，均為正方圖。因此我們運(yùn)用了等比縮放的圖片處理，減少了后期維護(hù)的工作成本，調(diào)取一張圖片后，簡(jiǎn)單的JavaScript代碼即可實(shí)現(xiàn)將其運(yùn)用在任何位置，并保證其達(dá)到要求的呈現(xiàn)質(zhì)量。同時(shí)，通過(guò)圖片大小的不同，明確了圖片之間的主次關(guān)系。為避免尺寸類(lèi)型過(guò)多帶來(lái)的雜亂感，我們只設(shè)置了大、中、小三個(gè)層級(jí)的尺寸，并調(diào)整了其平衡關(guān)系。

由此可以推導(dǎo)更多的呈現(xiàn)形式，把這種等比遞進(jìn)展現(xiàn)的方式運(yùn)用在單品摳圖的排布方式上也會(huì)有不錯(cuò)的效果，其對(duì)稱(chēng)和縮放的原理是一致的。如同下面兩個(gè)例子，如圖3（a）和圖3（b）所示，雖然呈現(xiàn)的形式為摳圖的單品，但其尺寸的層級(jí)實(shí)則僅為兩個(gè)層級(jí)，同時(shí)版式的排布也采用了對(duì)稱(chēng)的形式，因此還是有規(guī)律可循的。

圖3（a）兩個(gè)層級(jí)的對(duì)稱(chēng)排布（圖片由尤目YVMIN品牌授權(quán)使用）

圖3（b）兩個(gè)層級(jí)的對(duì)稱(chēng)排布（圖片由尤目YVMIN品牌授權(quán)使用）

而接下來(lái)的兩個(gè)例子則更加討巧，如圖4（a）和圖4（b）所示，圖片尺寸雖然只有一個(gè)層級(jí)，但卻因?yàn)榱庑蔚姆指铒@得靈動(dòng)獨(dú)特。

圖4（a）獨(dú)特的菱形排布（圖片由尤目YVMIN品牌授權(quán)使用）

圖4（b）獨(dú)特的菱形排布

節(jié)奏感

節(jié)奏是指在自然、社會(huì)和人的活動(dòng)中，與韻律結(jié)伴而行的有規(guī)律的突變。如音樂(lè)快慢激烈緩柔、美術(shù)韻律、文學(xué)作品鋪墊高潮結(jié)尾等。在版式的處理上，節(jié)奏也是一個(gè)重要的元素。

通過(guò)重復(fù)有規(guī)律的形式，可以讓用戶(hù)感受到某種節(jié)奏。就如同下面的例子，圖片的排布始終遵循著“上下上下”的擺放原則，靈動(dòng)且有規(guī)律可循（見(jiàn)圖5）。

同時(shí)，由于這個(gè)例子運(yùn)用的圖片形狀為矩形，因此我們又要引申一個(gè)數(shù)學(xué)的規(guī)則：黃金比例。黃金比例是一個(gè)定義為（ -1）/2的無(wú)理數(shù)，它被運(yùn)用的層面相當(dāng)廣闊，例如數(shù)學(xué)、物理、建筑、美術(shù)甚至音樂(lè)。這個(gè)古老的數(shù)學(xué)方法所擁有的魔力在實(shí)際中屢屢發(fā)揮著我們意想不到的作用。按照1∶1.618的黃金比例構(gòu)成的矩形，也被認(rèn)為是最理想的矩形比例。一種廣為流傳的說(shuō)法是，比黃金比例更細(xì)長(zhǎng)的矩形是一種端正的、女性的圖形；與之相反，隨著它逐漸趨向于正方形，這個(gè)矩形就會(huì)變得更加男性化。這作為一種設(shè)計(jì)參考，還是值得借鑒和嘗試的。

接著來(lái)說(shuō)節(jié)奏的應(yīng)用。除了規(guī)則的形式重復(fù)以外，如果在一系列節(jié)奏中加入某些不同的要素，那么構(gòu)圖就會(huì)發(fā)生變化，這個(gè)與其他部分不同的要素就會(huì)成為頁(yè)面中的重點(diǎn)內(nèi)容，構(gòu)圖也會(huì)變得更加生動(dòng)靈活（見(jiàn)圖6）。

圖5 有重復(fù)規(guī)律的擺放（圖片由尤目YVMIN品牌授權(quán)使用）

圖6 在重復(fù)規(guī)律中加入不同要素

當(dāng)然還有一種更為隨性的版式節(jié)奏，即場(chǎng)景化的排布方式。如同美國(guó)20世紀(jì)50年代的老海報(bào)拼貼，如圖7（a）所示，或者散落在桌面的明信片排布，如圖7（b）所示，顯得更為隨意自然。

圖7（a）場(chǎng)景化的排布方式——老海報(bào)拼貼

圖7（b）場(chǎng)景化的排布方式—散落的明信片

同時(shí)，用顏色來(lái)體現(xiàn)節(jié)奏則突破了單純排版的想法，以更加直觀的手段帶給用戶(hù)明確的感知，并掌握其中的規(guī)則。正如接下來(lái)的例子（見(jiàn)圖8），雖然呈現(xiàn)的內(nèi)容信息量不小，但6種顏色明確了其中的節(jié)奏規(guī)律，將內(nèi)容進(jìn)行了整合。

圖8 用顏色來(lái)體現(xiàn)節(jié)奏

引導(dǎo)性

說(shuō)到引導(dǎo)性，比圖片排版（見(jiàn)圖9）更加直觀的是時(shí)間軸的運(yùn)用（見(jiàn)圖10）。突出每個(gè)節(jié)點(diǎn)，結(jié)合之前提到過(guò)的距離和節(jié)奏的方法，呈現(xiàn)更加新穎躍動(dòng)的排版形式。

圖片與文字的相輔相成

在排版的過(guò)程中，圖片與文本的組合方式也是重要的問(wèn)題。必須要有意識(shí)地避免將圖片的美觀與文字的易讀性相互消解，兩者之間的配合非常重要。作為說(shuō)明圖片內(nèi)容的文字，它與它所說(shuō)明的部位的對(duì)應(yīng)關(guān)系必須是明確的（見(jiàn)圖11）。一方面要避免圖片與其文字說(shuō)明的距離過(guò)遠(yuǎn)，另一方面還應(yīng)該盡量將某圖片的文字說(shuō) 明與容易引起誤解的圖片拉開(kāi)距離。

圖9 用圖片排版實(shí)現(xiàn)引導(dǎo)性

圖10 用時(shí)間軸實(shí)現(xiàn)引導(dǎo)性

圖11 圖與其說(shuō)明文字的對(duì)應(yīng)關(guān)系要明確

當(dāng)然，如果所有內(nèi)容都被過(guò)度統(tǒng)一化地進(jìn)行了處理，則有時(shí)會(huì)起到相反的作用。在圖片的排版過(guò)程中，整齊中加入變化是一個(gè)不錯(cuò)的選擇。

另外，不要用圖片將文字切斷，這樣會(huì)損壞文字的可讀性。如果在整段的文字中插入圖片，那么閱讀的視線(xiàn)就會(huì)被打斷，用戶(hù)往往不知應(yīng)該從什么地方繼續(xù)下去。而對(duì)于圖片中插入的文字，選用容易辨識(shí)的顏色是很重要的。通常最好的選擇是白色或黑色。如果選用與圖片同色系的顏色，就會(huì)不易辨識(shí)。同時(shí)，應(yīng)該盡量將文字放置在不影響圖片效果的位置上（見(jiàn)圖12）。

圖12 圖片和文字互不影響效果

文字的組合呈現(xiàn)

文字的目的是使內(nèi)容能夠被讀懂。在文字的排版中，易讀性是需要重點(diǎn)考慮的問(wèn)題。為了明確表現(xiàn)出不同內(nèi)容之間的差別，最基本的處理方式就是改變文字的字號(hào)或者顏色。對(duì)于需要重點(diǎn)展示的文字，可進(jìn)行單獨(dú)的視覺(jué)化處理。例如，在圖13中，圖片下方的兩行文字為正文采訪(fǎng)內(nèi)容的重點(diǎn)導(dǎo)讀，不僅變化了顏色，還對(duì) 其進(jìn)行了斜體處理，讓用戶(hù)在閱讀之前就能預(yù)估一下正文是不是自己感興趣的內(nèi)容，從而決定是否閱讀全文。

圖13 對(duì)于需要重點(diǎn)展示的文字進(jìn)行單獨(dú)的視覺(jué)化處理

如圖14所示的問(wèn)答形式則以icon引領(lǐng)，再次遵循之前提到的節(jié)奏法則，用戶(hù)可以直觀地了解到要閱讀文章的時(shí)間成本，層級(jí)關(guān)系也一目了然。

圖14 以問(wèn)答形式呈現(xiàn)文字

而如圖15所示的引號(hào)的運(yùn)用，也達(dá)到了突出重點(diǎn)內(nèi)容的效果，且增強(qiáng)了整體氛圍的代入感。

圖15 運(yùn)用引號(hào)突出重點(diǎn)文字

圖解的傳達(dá)

即便是傳遞相同的信息，單純的文字表現(xiàn)方式與夾雜了視覺(jué)要素的表現(xiàn)方式也會(huì)帶給用戶(hù)不同的印象。如果通過(guò)單純的文字表現(xiàn)無(wú)法讓讀者迅速理解信息，則可以通過(guò)視覺(jué)化的處理使內(nèi)容變得易于把握。那些用文字方式表現(xiàn)時(shí)顯得冗長(zhǎng)的說(shuō)明，一旦換成視覺(jué)化的表現(xiàn)方式就會(huì)馬上清晰明了。圖解起到了凝縮信息內(nèi)容、增加圖像比重的作用。

如圖16所示，將數(shù)據(jù)分別用不同的顏色以量化形式呈現(xiàn)，能夠便于讀者直觀地理解其中的內(nèi)容。圖中對(duì)復(fù)雜的內(nèi)容進(jìn)行了合理整合，按照大類(lèi)別逐個(gè)進(jìn)行了分析。并且運(yùn)用了圓餅圖、長(zhǎng)條圖、曲線(xiàn)圖的變形，來(lái)實(shí)現(xiàn)其視覺(jué)傳達(dá)的目的。對(duì)于通過(guò)顏色區(qū)分各部分的應(yīng)用，需采用對(duì)比鮮明、同色系或?qū)Ρ壬档奶幚?，以?色的明暗來(lái)區(qū)分其中的差別。

圖16 對(duì)數(shù)據(jù)的圖形化處理

如圖17所示是對(duì)黑眼圈的專(zhuān)題描述，如果單純用文字描述，則用戶(hù)將很難理解氛圍和場(chǎng)景。用熊貓擬人化體現(xiàn)，在增加了趣味性的同時(shí)，還讓用戶(hù)在輕松愉快的氛圍中了解了所表述的內(nèi)容。

圖17黑眼圈專(zhuān)題

“DIOR迷醉東京”案例分析：一場(chǎng)櫻花飛舞的視覺(jué)盛宴

該項(xiàng)目的最初需求是要有日本氣息的DIOR潮流感。承載的內(nèi)容為迪奧精神-2015東京大秀的獨(dú)家專(zhuān)訪(fǎng)，以及現(xiàn)場(chǎng)圖片推送，其中包括訪(fǎng)談、點(diǎn)評(píng)、圖片信息展示的功能。

了解了情境之后，如何用科學(xué)的方法進(jìn)行設(shè)計(jì)呢？首先就是主題的突出，由于秀場(chǎng)位于日本東京，所以日式的元素必不可少。由此進(jìn)行發(fā)散，提煉出關(guān)鍵詞櫻花、折扇、禪意。因此封面氣氛以大面積櫻花鋪底營(yíng)造，主題僅對(duì)文字進(jìn)行排列，以襯線(xiàn)體的英文與中文組合，放大所要重點(diǎn)突出的內(nèi)容“迷醉東京”及 “DIOR”，并在保證英文識(shí)別度的基礎(chǔ)上，對(duì)其進(jìn)行切割，運(yùn)用距離與節(jié)奏的方法，體現(xiàn)主題的主次關(guān)系。線(xiàn)描櫻花的處理則是基于禪意對(duì)于圓滿(mǎn)的追求，運(yùn)用點(diǎn)、線(xiàn)、面的基本組合原理，搭建視覺(jué)中心的完整性。兩側(cè)日文“DIOR”的點(diǎn)綴，在細(xì)節(jié)處強(qiáng)調(diào)日式東方的氣息，不搶鏡也加分。引導(dǎo)進(jìn)度條以折扇的形狀作為引導(dǎo)，運(yùn)用之前談到的時(shí)間軸的引導(dǎo)方法，保證用戶(hù)在瀏覽的過(guò)程中掌握閱讀的進(jìn)度，對(duì)自己的瀏覽有心理預(yù)估（見(jiàn)圖18）。

圖18 封面設(shè)計(jì)

內(nèi)部?jī)?nèi)頁(yè)更多承載的是信息的輸出，因此應(yīng)避免大面積的氛圍強(qiáng)調(diào)。為保證基調(diào)性的統(tǒng)一，我們以禪意的麻布質(zhì)感鋪底，兩側(cè)僅放出櫻花盛放枝頭的延伸，與封面氛圍呼應(yīng)。關(guān)于內(nèi)容信息如何良好輸出，這里以專(zhuān)訪(fǎng)頁(yè)面和后臺(tái)細(xì)節(jié)為例簡(jiǎn)單分析一下。

首先看專(zhuān)訪(fǎng)頁(yè)面（見(jiàn)圖19），由于界面中需承載著專(zhuān)訪(fǎng)人物、主打妝容作品、好友寄語(yǔ)及專(zhuān)訪(fǎng)對(duì)話(huà)四大內(nèi)容，因此如何處理它們之間的邏輯關(guān)系則是首要問(wèn) 題。首先，抓住核心主體，即為專(zhuān)訪(fǎng)人物Peter，而所有的內(nèi)容承載都以他為中心進(jìn)行展開(kāi)，因此在視覺(jué)比重上他的圖片也被著重強(qiáng)調(diào)，其主打的妝容作品圍繞在周?chē)∮谥黧w。這里運(yùn)用了不同的形狀，從而使間隔看上去更大。

這里拋棄了方圖的處理方式而運(yùn)用了圓圖的處理方式，在信息量大的排版中，巧妙營(yíng)造了透氣效果。好友寄語(yǔ)部分以便簽變形的形式體現(xiàn)，區(qū)別于主體的功能性，作為輔助性功能點(diǎn)綴。最后則是專(zhuān)訪(fǎng)對(duì)話(huà)內(nèi)容的呈現(xiàn)，由于權(quán)重較高，同樣留有較大的布局處理。問(wèn)答的形式運(yùn)用了之前提到過(guò)的文字排版法則，用不同的顏色區(qū)分不同層級(jí)的內(nèi)容，營(yíng)造閱讀的節(jié)奏感。

圖19 專(zhuān)訪(fǎng)頁(yè)面設(shè)計(jì)（人物圖片由尤目YVMIN品牌授權(quán)使用）

后臺(tái)細(xì)節(jié)頁(yè)面（見(jiàn)圖20）同樣運(yùn)用了對(duì)稱(chēng)與等比的法則。但在此對(duì)稱(chēng)的設(shè)計(jì)中，運(yùn)用了不規(guī)則的處理方式，以發(fā)散的形式呈現(xiàn)圖片的排版，營(yíng)造若有若無(wú)的動(dòng)感。同樣，為方便需求方的自動(dòng)調(diào)取，圖片仍采取等比的處理方式，降低維護(hù)成本。圖片的尺寸僅設(shè)置了大、中、小三個(gè)層級(jí)，調(diào)解了其平衡關(guān)系的同時(shí)又有規(guī)律可循。

圖20 后臺(tái)細(xì)節(jié)頁(yè)面設(shè)計(jì)（圖為展示DEMO）

對(duì)于整體界面的呈現(xiàn)，設(shè)計(jì)師進(jìn)行了有目的性的留白，迎合禪意的主旨。留白的目的是減輕用戶(hù)瀏覽的壓迫感，賦予界面構(gòu)成以變化感，讓其得到更多的擴(kuò)展空間，從而達(dá)到寧?kù)o的氛圍營(yíng)造效果。背景點(diǎn)與線(xiàn)的搭配，在功能上對(duì)相似內(nèi)容進(jìn)行了分類(lèi)統(tǒng)一，同時(shí)建立界面版式的平衡感。頁(yè)面的主體內(nèi)容在1000px之內(nèi)，保證了寬窄屏用戶(hù)的無(wú)損瀏覽，但對(duì)于大屏用戶(hù)的瀏覽體驗(yàn)，就會(huì)顯得過(guò)于寡淡，所以在頁(yè)面1000px以外，對(duì)日文“DIOR”進(jìn)行了拆分排版，力求該用戶(hù)人群瀏覽的視覺(jué)美感。

同時(shí)，此項(xiàng)目也配以HTML5的響應(yīng)式設(shè)計(jì)，保證了移動(dòng)端用戶(hù)的瀏覽需求，其設(shè)計(jì)氛圍與PC端視覺(jué)統(tǒng)一，但對(duì)復(fù)雜元素進(jìn)行了拆分與刪減，更加明確信息的主體，利用移動(dòng)端自身的優(yōu)勢(shì)增加了滿(mǎn)屏大圖的展示，在強(qiáng)調(diào)視覺(jué)效果的同時(shí)也便于用戶(hù)細(xì)致瀏覽。通篇界面櫻花花瓣緩緩飛舞，所營(yíng)造的氣息自然撲面而來(lái) （見(jiàn)圖21）。

圖21 整體界面的呈現(xiàn)

總結(jié)

總結(jié)本小節(jié)的內(nèi)容可以看到，一切的版面設(shè)計(jì)都是基于內(nèi)容的存在，體現(xiàn)內(nèi)容的主題思想，用視覺(jué)化的手段增強(qiáng)讀者的注意力與理解力，以科學(xué)的方式實(shí)現(xiàn)層級(jí)遞進(jìn)的效果。大視覺(jué)、小細(xì)節(jié)，一個(gè)都不能少。

關(guān)注我們：在查找公眾號(hào)中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)
本文來(lái)自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞：廣州網(wǎng)頁(yè)設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,移動(dòng)網(wǎng)站建設(shè)