一、何為版面率

我們都知道一個版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區域，也是我們頁面內容的擺放空間。下圖中灰色塊的區域就是此頁面的版心。

知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點講就是版面的利用率。

上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。

版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時版心即整個版面，版面利用率為100%。空版就是版面利用率為0%的。從滿版到空版之間的版面率是遞減的關系。

二、版面率對畫面氣質的影響

說完版面率的概念我們再來說一說版面率對畫面氣質的影響。

一般來說版面率越高，視覺張力就越大，版面也會更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會更有格調。

上圖中高版面率的海報相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。

畫冊中也是一樣的，上圖是我早些年做的一個案例。同樣的內容跟圖片，只是版面的利用率不同，我們可以發現右邊低版面率的作品更安靜和典雅。

版面率的高低能夠影響版面的氣質，所以我們實際工作中也要根據項目的氣質分配合適的版面率。比方說典雅氣質的項目我們就要用低版面率版面，如果用高版面率顯然是與項目本身的氣質相悖的。

三、留白率

說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負空間。

頁面中去除內容后的空間就是負空間，如下面這個頁面。

圖中灰色塊代表圖和文字信息等內容，除去這些圖片和文字后，頁面中的其他空間都可以看作是負空間，也就是留白。當然，留白并不一定是白色，所有除去頁面內容后的空間都是負空間，如上圖右側案例，黑色部分即此頁面的留白。

負空間的多少即是留白的多少。留白的多少我們可以用留白率來表示，如上圖，負空間小的留白肯定少，留白率就低。負空間大的的留白肯定多，留白率就高。

留白率就是版面留白的多少，實際上與版面率的概念差不多，如下。

空版留白最多，滿版留白最少。當然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當作留白來看待。

四、留白率對畫面的影響

上面說來留白率跟版面率也有一定的關聯，所以他們對畫面氣質的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。

通過這幾個作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強。而留白多的更雅致，更安靜典雅，更有格調跟品質感，但親和力稍弱。

五、案例演示

下面進行案例演示吧，首先看一看文案。

這一步我們需要把文案的層級關系拉開，大中小區分的明顯一點。這個文案的層級關系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。

首先我們做一個有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？

首先版面率要大，其次留白要小，讓版面中的信息緊湊一點。

上圖就是對版面的布局，可以看到圖片是出血版的，沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。

布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。

上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低，如下。

做完了留白少版面率高的，我們再來做一個典雅一點的。

根據本篇文章的內容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？

一定是低版面率和較多留白的版面更能體現典雅與安靜感。所以我們在版面安排上要使其留白更多，同時版面率要小一點。下圖就是一個基本布局。

最后我們再根據版面布局置入圖片微調一下就可以了，如下。

總結

版面率跟留白率都能夠影響版面的氣質，我們做項目的時候具體問題具體分析，根據項目氣質去設定版面率跟留白率的大小。

大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點。

主要講解的是平面設計基礎理論知識與實際用法，后期會講一些高階的設計思維。

本章節適合設計小白和需要填補設計基礎的設計師學習閱讀。 

目錄

1、理解、提取與布置

2、貼近與遠離

3、排列與對齊

4、視線移動方向

5、組織與重復

1、理解、提取與布置

理解、提取與布置指的是根據設計的意圖來進行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優先級排列出來，最后再根據排列好的信息按個人美感和美學理念擺放到平面中。

1.1 理解部分

當收到一個海報設計需求時，我們不是要馬上動手去做，而是要去思考需要設計的海報受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 

下面我就簡單介紹一下設計思維及方法，首先要設置定一個需求【現代美術館，需要設計一個簡潔大方的海報】。根據這個需求在進行具體的思維延伸。

1.1.1 海報的受眾群體

當我們收到設計需求時，要考慮海報的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經歷均不同，要根據不同的受眾做合適的設計。當我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風格來展示海報了。

對于現代美術館需要一個簡潔大方的海報，這個需求所涵蓋的年齡區間比較大，基本上所有人都可以參觀美術館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。

意思就是不要加入柔美的線條（除非展品的構成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現形式，用最容易讓人理解的表象形式來處理就可以了。

1.1.2 怎么展示海報

現代美術館，需要設計一個簡潔大方的海報這個需求，可以根據主關鍵詞“現代”和“美術館”，次關鍵字“簡潔”和“大方”來推斷要采用哪種設計語言。“現代”的表現形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術館”只要在圖片的處理上讓主題與圖片串聯共通就可以了。

簡潔大方的設計需求可以采用直線（字有時也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時也要注意禁止添加太多顏色（如撞色）。

1.1.3 運用理解部分生成原型

根據前面的分析大概有了個原型，分為上下構圖。上部分是美術館的部分場景圖片，下部分是具體的內容信息部分。所有要素均以現代感、簡潔干練、配色不復雜、線性、整潔、清爽、專業、無太多情緒為基礎進行設計的。

以上就是“信息的整理”中的“理解部分”，當設計師收到需求時，不要馬上著手去做。先思考采用哪種表現形式（視覺語言）更適合需求，分析后再去做設計，這樣才能準確表達具體的需求，也能做出更符合需求的設計。

1.2 提取部分

提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優先級排列出來。我們只需要根據優先級進行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來再排列優先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個過程就叫“提取信息部分”。

1.3 布置部分 

把提取并排列好優先級的信息規整好，就可以布置在平面上了。用之前設計好的原型套用已提取好的信息就可以了。特別要注意重要的內容放大，不重要的內容弱化。

* 要點

理解：首先要理解作品的受眾群體、要怎么展現、目的是什么。

提取：其次要明確作品內容中什么是最重要的、根據優先級排序。

布置：最后把排列好的信息加以布置，重要的內容放大，不重要的內容弱化。

2、貼近與遠離

貼近和遠離的概念也是比較好理解的。與格式塔視知覺的親密性與遠離性是一個道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會講。

2.1 貼近和遠離的 基礎概念

貼近是指同類要素擺放在一起會呈現出一種共通性或產生某種規則，而遠離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規則。

當把同類要素（男人女人）放到一起，會覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會覺得他們毫無關系。

我們把這種概念應用在平面設計上，如下圖所示。

相同的要素擺放在一起會有一定的共同性，相反分開擺放則看上去沒有關聯。

貼近與遠離基礎概念的實際案例

2.2 貼近和遠離的 進階概念

把同類要素放到一起有種井然有序的感覺。如果要處理較為規整傳統的版式時，可以考慮多將要素放到一起形成規則。另外把同類要素分開擺放，會感到沒有共通性和規律規則，但是能為平面增加節奏感和沖擊力。

貼近與遠離進階概念的實際案例

其次遠離能使平面產生留白，通過留白也能使平面具有關聯性。

雖然說遠離能使要素看上去沒有共同性和規則，但如果要素處在一個平面中，利用留白呈現出一種關聯性。這就像吵架的夫妻一樣，同在一個床上，女的偏床左側，男的偏床右側，呈現一種遠離性。但他倆還是處在“床”這個平面中，也會呈現一種關聯性。

貼近與遠離進階概念的實際案例

* 要點

同類要素貼近擺放在一起相互關聯，同類要素遠離擺放相互排斥。

同類要素貼近擺放在一起平面有規則，同類要素遠離擺放增添節奏。

留白也能使要素有一定的關聯性。

3、排列與對齊

排列與對齊的概念比較簡單，也很容易理解。轉化一下思維，把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。

3.1 排列

排列是指將要素按照一定的規則進行布置，使平面達到一種平衡與和諧。道理與收拾屋子一樣，雜亂無章的屋子會讓人感到不舒服且很壓抑。整理的井然有序的屋子會讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規矩整齊。收拾屋子的方法就是“規則”，用規則的方法來排列就叫“布置”。

排列的目的是讓平面變得有序和規則，當平面達到有序和規則就會呈現出一種舒適感，好比自然中的和諧。

3.2 對齊

對齊也可以理解為將要素按照一定的規則進行布置，使平面達到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎上進行操作的。先將要素按照一定規則進行排列，然后再將要素進行對齊。排列是畫一個大體的框架，而對齊是做框架里的精細操作。

排列與對齊的實際案例

* 要點

排列與對齊的目的是讓平面變得有序和規則，當平面達到有序和規則就會呈現出一種舒適感。

把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。

4、視線移動方向

設計書籍或排版布局時，要考慮通過設計讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動的，所以在設計時要考慮到這一基本原則。閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

視線的移動方向分為三個知識點，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。

隨便補充一下啊，我讀過的設計文獻中提到的閱讀方法只有“Z字視線移動方向”，而沒有“T字視線移動方向”。有一種學習方法叫“T型閱讀法”，與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點。

4.1 橫排閱讀

橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的，大家現在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時視線是從上至下【由左至右】依次閱讀的，如圖所示。

懂得了橫向排列的方式來閱讀文章會有什么用呢？由于人們的閱讀習慣，一般情況下閱讀讀物，都會遵循從左到右閱讀文章的方式，這也就間接影響了文章內容的重要性。采用橫向排列的方式進行排版布局，重要的內容要放在最左面，也就是最方便引導人們視線方向的地方。

如果不把重要的內容放在視線方向的地方，讀者不僅閱讀作品時會感到很吃力（可讀性），而且會不理解作品是什么含義，視線也隨之錯亂，作品也會失去原本的含義。

橫排閱讀的實際案例

4.2 豎排閱讀

橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時視線是從上至下【由右至左】依次閱讀的，如圖所示。

一定要注意，豎向排列方式內容區在平面的最右面，與橫向排列方式不同。這個規定就像地球為什么是圓的的道理一樣。

豎排閱讀的實際案例

* 要點

閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

不要打破規則，一切以引導讀者視線為主。

5、組織與重復

按照一定規則構成布局來編排要素，能使種類繁多的要素顯得整潔有序。

5.1 組織

沒有共通性的雜亂圖形匯聚一起會造成視線混亂，讀者注意力會被分散，也會降低理解力。將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。

組織規則的實際案例

5.2 重復

這里的重復不是指復制粘貼，而是元素上的重復構成。例如重復相同的格式，風格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風格統一的要素做修飾，讓排版符合流水式，視線清晰自然。

重復規則也可以應用在平面中、元素中、要素中、形狀中等，靈活運用重復能使平面具有統一性，也能制造趣味性，增加讀者對作品的印象。

重復規則的實際案例

* 要點

將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。

靈活運用重復能使平面具有統一性，也能制造趣味性，增加讀者對作品的印象。

色彩作為視覺感知的先覺條件，在很大程度上決定了作品的好壞以及給觀者留下什么樣的印象，人們感知到的即是通過色彩所傳遞出的情感，色彩作為一門獨立的學科，在基于其理論體系之上衍生出了眾多的搭配方法和技巧，在遵循色彩構成的原理之上可以更好的幫助我們對色彩有深入的認知和使用，對于色彩而言，除了要了解基本的構成之外，在使用的過程中更重要的是要對色相，明度，飽和度有敏銳的觀察里和視覺感知力，通過三者不斷的變化和調整把控使色彩更加具有情感，讓視覺感知更加的舒適并滿足我們的實際的需求；

袋鼠云：可視化大屏打造智能數據方案全閉環

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

編者按：距熱情似火的618國民年中購物節已經不到兩個月時間，去年京東商城最終以累計下單金額高達1199億元（行業口徑）的戰績收官。而記者了解到每年借著“京東618”“雙11”這兩股全民消費熱潮的新零售品牌遠遠不止淘寶與京東兩家，已成為了整個產業鏈方方面面品牌的推廣盛宴。

因此，每年的618購物節參與的企業數量可謂“蕓蕓之眾”，這場一年比一年盛大的狂歡節也對支撐其后的運算資源、網絡平臺、存儲與挖掘大數據提出了更高更嚴苛的要求。針對各家的技術資源體系、技術運維團隊、大數據智能技術水平也成為了企業高管的“第一關注”。

而記者采訪了多家新零售企業的CIO,提及如何更好地應對即將到來的今年“618”，他們大多表示：“增加服務器及運算資源、優化技術架構提高冗余、完成即時大數據挖掘分析是今年的三大要務。”的確，在保證全民購物節完美的用戶操作體驗之外，對自身企業在這場沒有硝煙的商戰中獲得的寶貴數據充分分析并加以利用也成為了CIO們所考量的重點，讓精準營銷落地同時指導未來的市場規劃。

如何更好的挖掘大型項目節點中企業獲得的巨量數據？如何將挖掘數據中的信息得以簡明有效的呈現，最終迅速指導市場策略？記者在618前夕走訪了國內新銳的數據智能解決方案企業——袋鼠云。

袋鼠云這家在去年完成6000萬人民幣A輪融資的數據智能新銳公司，在今年動作頻頻，完善提升自身數據智能產品線研發的同時，也在今年大量引入高端人才，全面完善數據智能整體品牌價值。

記者在采訪中了解到，袋鼠云致力于打造從企業數據資源規劃與獲取、數據質量分析與提升、數據整體建模與數據資產管理、數字化標簽引擎建立、數字指標體系梳理與計算、數據應用規劃與實現、數據可視化大屏呈現等全閉環的企業智能數據解決方案。最終以數據為最可靠的技術基礎，通過袋鼠云的數據內容策劃團隊的有效建模，配以令人印象深刻的專業視覺設計，通過可視化大屏將簡明有效且具沖擊力的數據內容呈現在領導或者客戶面前。

袋鼠云這家在去年完成6000萬人民幣A輪融資的數據智能新銳公司，在今年動作頻頻，完善提升自身數據智能產品線研發的同時，也在今年大量引入高端人才，全面完善數據智能整體品牌價值。

記者在采訪中了解到，袋鼠云致力于打造從企業數據資源規劃與獲取、數據質量分析與提升、數據整體建模與數據資產管理、數字化標簽引擎建立、數字指標體系梳理與計算、數據應用規劃與實現、數據可視化大屏呈現等全閉環的企業智能數據解決方案。最終以數據為最可靠的技術基礎，通過袋鼠云的數據內容策劃團隊的有效建模，配以令人印象深刻的專業視覺設計，通過可視化大屏將簡明有效且具沖擊力的數據內容呈現在領導或者客戶面前。

袋鼠云CEO在采訪中向記者介紹了典型客戶“中國茅臺”可視化大屏項目實施情況，他告訴記者：“世界第一白酒品牌“中國茅臺”之所以選擇袋鼠云建設數據可視化大屏項目，主要是基于要解決全面打造企業數據中臺以及將中國茅臺品牌能力直觀生動地呈現給領導與參觀客戶。”

“基于此，袋鼠云為他們從數據管理與應用方式方法上改變思路， 有些甚至是全新的角度與理念，目的也是為了讓‘中國茅臺’的企業數據價值更好的被利用。”他告訴記者：“因為茅臺品牌社會面很廣，袋鼠云后期基于數據，提供的諸如輿情分析系統、反黃牛數據系統等富有社會成效的定制功能，獲得客戶的高度認可。”

數據智能（DI）不僅僅是把數據放在一起，而是要聚集產生化學反應。“中國茅臺”這個客戶應用就很典型，他繼續向記者介紹:“我們給客戶的數據分析與決策都是動態的，實時監控大屏即時展現茅臺酒的交易總額是多少？哪個地區的茅臺酒目前是銷量最高的？哪些客戶最熱衷于他們的產品？這些動態的數據分析結果都能實時呈現在展會現場的可視化大屏幕上。另外茅臺做的可視化大屏，也直觀地體現了茅臺用戶群體的年輕化趨勢，這和我們之前想象中茅臺的消費者較高年齡層的情況不一樣。這次可視化大屏解決方案幫助茅臺更清晰地了解了自己的終端用戶，要知道以前客戶數據分散在經銷商、渠道商那里，到底誰喝了茅臺酒，茅臺集團是無法獲知的。”

而實時采集數據，實時處理分析數據也是袋鼠云口中的“一大門檻”。記者了解到，類似袋鼠云這樣的從數據采集--數據存儲--數據應用--數據呈現整體打造閉環的數據智能解決方案服務商在行業里具有很大優勢。在中國茅臺的典型方案中這一點就展露無遺。他向記者介紹：“中國茅臺選擇過去傳統服務商時，手機端與電腦端的開發商是不同的，因此移動端和PC端后臺數據沒有打通，形成了非即時的數據孤島。而采用了袋鼠云“全域”智能數據解決方案后，所有的標準制定都是相同的，數據得以深入而全面的加工。而精準營銷、反黃牛、打標簽、輿情監測、秒殺系統等等富有成效的模型都是基于企業數據的被統一聯結并做出實時分析結果。”

記者談到實時數據可視化這個部分時，袋鼠云CEO顯得自信滿滿。他告訴記者：“數據的實時性采集非常重要，“袋鼠云”實現了TB級別甚至是PB級別的大數據進行實時處理，實現秒級反饋是最基本的要求。”他繼續告訴記者：“這得益于袋鼠云的技術團隊多數來自于阿里云，針對業務暴增、惡劣環境等極端情況下的峰值保障應急處理的技術與能力具有相當的經驗。”記者還了解到，袋鼠云現在的技術團隊都曾經歷過“天貓雙11”等等大型活動，并協助茅臺、百草味、秒錢、申通E等多家公司順利完成了大促護航等工作。

記者觀察：一方面基于人才技術優勢打造團隊“硬氣功”，另一方面深化客戶項目落地可視化效果的“軟實力”，在袋鼠云眼中一個睥睨新業界的發展藍圖已清晰可見。

藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

版式設計中的簡約設計

藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

LOGO設計——國外設計欣賞

國外的logo設計

@乘與九設計：學習版式設計就是學習如何處理信息重點，因為在任何設計中，最重要的信息需要首先被注意到，然后是次要信息。下面介紹幾種適用性強的區分層次的手法給大家。

在開始設計之前，關鍵要先梳理好哪些是重點信息，哪些是次要信息。接著就是要講重點放在什么位置，是標題，內容，還是圖片。這些信息的重點就是版式的層次結構。一旦確立好層次結構，接下來就是靠常用的視覺形式來處理即可，例如通過字距，筆畫粗細，顏色，以及字體等等。方法如下：

1.  添加垂直空白空間

“色彩，這是一種多么深刻而神秘的語言啊！”的確，不同的色調能夠調動不同的情緒和反映，能夠影響用戶對于品牌的感知。簡單說來，色彩可以造就不同的設計。與此同時，研究表明，色彩能夠強化品牌認知度（高達80%），加深用戶印象，讓你的作品在同類中脫穎而出。

滑屏的交互形式自從在 H5 中流行起來，便廣泛應用在產品宣傳、廣告、招聘和活動運營等場景中，作為微信朋友圈廣告慣用的形式，其影響力更是得到了強化與放大。如今滑屏H5可謂玲瑯滿目，數不盡數。

作為一個 UI工程師，接過很多類似的項目，也曾寫過滑屏的插件，在經歷了不同的需求的“洗禮”并踩過若干個坑之后，不禁反問自己：應該如何面對每一次類似的需求，在已有的經驗下如何做到體驗更好？如何節省工作量提率？面對性能優秀的 iOS 與性能良莠不齊的 Android 平臺，又如何做到體驗統一與性能最優？