@大貓Addict ：如何解構好的作品呢？在我們的設計生涯中需要多看多想，當然要看很多的好作品來提高自己的審美，擴展自己的武器庫。那么當我們看到好的設計作品時怎么辦呢？大多數情況下我們都會選擇看過之后就沒有然后了。其實我更建議大家把好的作品保存下來，然后去思考這個作品為什么要這樣做。

也就是知其然，知其所以然，知道它為什么好，好在哪里，這樣的思考過程對自己的提高是很有幫助的。現在我以一組adidas的海報作品來進行解構，我們一起來看看這張海報為什么如此美觀大方。

就是這張海報作品，下面我們對其進行分析解構。

這個海報漂亮有兩個方面原因，第一個原因是選擇的底圖好看，細節足。第二個原因則是版式排的好看。

我們重點解構他版式排版這一塊。

首先從版式上來說，它里面的點元素相當于劃分的網格：

這樣大家可以看明白，除了四周的天頭地腳和左右頁邊距，這些小點將頁面劃分成了6*8的模塊網格，如下圖。

問：這樣柵格化就是為了文字排版？

答：對，網格系統服務于排版，但是字的精致程度和字號大小、行距字距也影響著版面的美觀。

我們來繼續分析，其中他的主標題，SEASON1，占據了兩個模塊網格的長度，下面的正文則占據了三個模塊網格的長度和一個模塊網格的高度，如下圖。

那么為什么一個占據兩個模塊，一個占據三個模塊呢？

因為要有長度對比跟疏密對比，可以看到主標題是采用了寬松型字距的。

問：其實這個按你那樣說不科學，為什么畫了網格英文幾行就卡著網格，右上和右下就不卡著。

答：我這個網格沒畫標準，只是從宏觀上分析別人的作品而已?；卮鹉氵@個問題，因為這個版面是按小點的中心對齊的，如下圖。

上下兩行都是在旁邊點元素的中心線上。明白了嘛？

另外網格不是一個死東西，是可以無限劃分的。

比如我現在是6*8的網格，我們還可以每個網格之間平分，變成12*16的網格。

但最終決定排版美不美觀的因素是什么？答案是審美，只有你的審美好你才能做出漂亮的設計，網格系統什么不過是輔助的工具而已。

比如一個畫家，就算給他一根樹枝，他也可以在地上畫出驚艷的畫作，但對于一個不會畫畫的人，就算給她全世界最豪華的畫材，他也畫不出好的作品。

繼續，我們詳細講一講這個版面中的網格。其實這個版面，一開始是可以從雙欄網格開始劃分的，如下圖：

一開始從雙欄劃分，比如小文字就占據了一欄，留白占據了一欄，而后每個欄又劃分成三份，能明白嘛？

右上角的LOGO也是占據了一個模塊網格的大小。

那我們來看上圖這個LOGO為什么沒按照模塊網格的長度來呢？這就是我說的網格是可以無限劃分的應用了。

再具體分析的話，就像圖上一樣，它其實是又把左側的網格對半分了一下，所以這個adidas的LOGO占據了一個半模塊網格的長度。網格不是很死工具，一切都在于靈活運用與審美上。那些說網格排出來的東西很死板的人根本就沒有深入的了解網格系統。

從宏觀上我們分析完了，再來看看，為什么好看，其實排的好不好看一個重要的原因是取決于字體的精致程度。

從圖上可以看出他用的字體是非常精致的。

字體名稱叫AdiHaus，是adidas的御用字體，所以用好字體也是關鍵。

但是這款字體網上并沒有資源可以下載，所以我用了一款比較相似的字體來做分析，

我用的字體名叫Avenir，也是著名的有幾何化特征的無襯線體之一。

上面是adidas的官方字，下面是我用的Avenir字體，如果對字體的敏感程度不夠，一定會認為這是一款字體。

兩款字體主要是細節上的不同，首先從字寬來說，我選的字體就沒有原來字體寬。另外筆畫細節的處理上也有所不同，比如下圖中對1的處理。

我們再來看看內文排版。

右邊是我模擬的。從圖上可以看出它文字層級關系分的十分明確。

如果要計算字號的話

我們可以看出，它主標題用的是40號字，內文用的是16號字，40÷16=2.5，所以它字號之間是2.5倍的關系。

再來看一下標題與內文的字重對比，標題采用的是Bold粗體，內文采用的是比Bold細一個等級的Demi體。

所以我們可以看出這么一個美觀的海報，里面包含了這么多東西，也正是這些，讓版面變得規整有序，美觀大方。

例子舉完了，這就是我看到好的作品時的分析解構方法，大家學會了嘛？

本文章版權歸 [ 視覺狀態設計研究所 ] 所有，歡迎關注它的微信公眾號：

「優設指南系列」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com