編者按：今天給大家安利一本好書，是騰訊網UED十年精華輸出的干貨型讀物，先節選一小段，關于版式設計的，既有騰訊同學的實戰經驗，也有大量的基礎術語科普，非常不錯 >>>

在信息化社會的浪潮中，快節奏的生活讓人們開始學會選擇性關注。如何在紛繁的信息中引導用戶？有沒有科學的方法？這是當今設計師所面臨的問題。界面版式的構成是信息傳播的橋梁，也是視覺傳達的重要手段。科學的編排技術，以及實用性與藝術性的合理運用，才能成就更快、更準確的信息傳遞。時尚頻道作為騰訊網中更強調視覺呈現的頻道，在運營的過程中通常有非常鮮明的案例。本節我們就從這些案例中剖析一些方式，來感受版面設計中的科學性和趣味性。

圖片的排列組合

距離感

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

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

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

而街拍的部分則運用大小不一的圖片排布，通過主次關系的區分，突出獨家看點的內容，同時圖片的間距相同，代表它們仍然是從屬于一個大環境下的平級內容，親密度是相同的（見圖2）。

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

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

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

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

圖3（a） 兩個層級的對稱排布（圖片由尤目YVMIN品牌授權使用）

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

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

圖4（a） 獨特的菱形排布（圖片由尤目YVMIN品牌授權使用）

圖4（b） 獨特的菱形排布

節奏感

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

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

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

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

圖5 有重復規律的擺放（圖片由尤目YVMIN品牌授權使用）

圖6 在重復規律中加入不同要素

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

圖7（a） 場景化的排布方式——老海報拼貼

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

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

圖8 用顏色來體現節奏

引導性

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

圖片與文字的相輔相成

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

圖9 用圖片排版實現引導性

圖10?用時間軸實現引導性

圖11 圖與其說明文字的對應關系要明確

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

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

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

文字的組合呈現

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

圖13 對于需要重點展示的文字進行單獨的視覺化處理

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

圖14 以問答形式呈現文字

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

圖15 運用引號突出重點文字

圖解的傳達

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

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

圖16 對數據的圖形化處理

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

圖17黑眼圈專題

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

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

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

圖18 封面設計

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

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

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

圖19 專訪頁面設計（人物圖片由尤目YVMIN品牌授權使用）

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

圖20 后臺細節頁面設計（圖為展示DEMO）

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

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

圖21 整體界面的呈現

總結

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

本次精選了《靈活的版式造就視覺盛宴》與大家分享，近期還將分享《賽程魔方3D旋轉界面》、《體育，在騰訊也在現場》、《響應式設計—“大家”欄目》這幾個生動案例，讓我們通過這些例子看看UED設計師們如何成就優秀的用戶體驗！

近距離感受專業設計師的教程戳下：

一秒讓文本變身的實用方法！
《經驗分享！超實用的文本處理技巧》

平面排版苦手必備！方法簡單有效！
《平面排版時，教你突出中文美感的幾種方法》

圖文排版的年度最佳教程！木有之一！
《超全面教程！給照片添加文字有哪10個高大上的方法？》

投稿者：博文視點

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量95萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：