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

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

圖片的排列組合

距離感

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

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

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

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

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

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

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

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

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

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

而接下來的兩個(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ī)律的突變。如音樂快慢激烈緩柔、美術(shù)韻律、文學(xué)作品鋪墊高潮結(jié)尾等。在版式的處理上，節(jié)奏也是一個(gè)重要的元素。

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

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

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

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

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

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

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

圖7（b） 場景化的排布方式—散落的明信片

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

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

引導(dǎo)性

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

圖片與文字的相輔相成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖解的傳達(dá)

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

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

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

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

圖17黑眼圈專題

“DIOR迷醉東京”案例分析：一場櫻花飛舞的視覺盛宴

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

網(wǎng)頁名稱：超實(shí)用的版式設(shè)計(jì)技巧全方位總結(jié)
文章出自：http://muchs.cn/news2/170602.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)