圖片的排列組合

距離感

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

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

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

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

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

這里也運用了數(shù)學上的兩個理論，對稱與等比。

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

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

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

而接下來的兩個例子則更加討巧，如圖4（a）和圖4（b）所示，圖片尺寸雖然只有一個層級，但卻因為菱形的分割顯得靈動獨特。

節(jié)奏感

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

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

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

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

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

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

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


 
 
 

圖9 用圖片排版實現(xiàn)引導性

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

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

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

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

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

而如圖15所示的引號的運用，也達到了突出重點內(nèi)容的效果，且增強了整體氛圍的代入感。

圖解的傳達

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

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

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

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

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

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

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

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

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

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

圖20 后臺細節(jié)頁面設(shè)計（圖為展示DEMO）

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

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

總結(jié)

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

引導性

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

圖片與文字的相輔相成

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