「糟糕的設計師」、「普通的設計師」、「好的設計師」，有專業的設計師來講解一下這張圖嗎？

12-04

1和2的區別是什麼？為什麼能說明問題？
2和3的區別是什麼？為什麼能說明問題？
圖中的線條有什麼含義？
方塊、圓形、三角形分別有什麼含義？
25pt有什麼含義？
背景為什麼是黑色的？
圖中的英文用的是什麼字體？

這副圖核心的觀點是：優秀的設計師如何對齊不同形狀的元素
這裡有個進階版教程，你可以把上面的三個形狀理解為下面案例中的物體（點擊看大圖）

內容來自 BeforeAfter平面設計教程
.

只是為了說明物理上的統一性不代表觀感上的統一性。

問題一：1和2的區別是什麼？為什麼能說明問題？
區別是等間距的測量，是按物理上的水平測量還是按視覺上的等間距測量。

問題二：2和3的區別是什麼？為什麼能說明問題？
區別是按物理上的等尺寸繪製還是視覺上的等尺寸繪製，10*10的矩形看上去會比10*10的圓形大的。

補充：很多時候會以加背景框的方式，讓各種不同類型和規則的 icon 看上去統一，和諧。

問題三：圖中的線條有什麼含義？
那些線條只是參考線而已，讓你肉眼可以看到他們是等高的或不等高的。

問題四：方塊、圓形、三角形分別有什麼含義？
這三個圖形是用來做舉這個例子的典型形狀。也是最簡化的形狀，一條邊，三條邊，四條邊。

問題五：25pt有什麼含義？
沒毛含義，只是給的一個參考尺寸，你可以寫20pt，25px，隨意的。

問題六：背景為什麼是黑色的？
沒毛含義，用個暖色，冷色背景就不能說明問題了？非要用中性色？任意對比度不太差，看著舒服的前景背景色都行啊。

補充：圖二的淺灰是用來分隔圖1和圖3。

問題七：圖中的英文用的是什麼字體？
自行搜索：字體下載-求字體網提供中文和英文字體庫下載、識別與預覽服務，找字體的好幫手或其他字體識別工具。

補充：這張圖只能說明一個設計師扣細節的程度，不能說明一個設計師的好壞，決定設計水平的的因素多了去了。像素眼，強迫症是很多很多很多設計師具有的品質。如果作者僅僅是表達一個設計中的小技巧的話，那更說明不了什麼了。

再補充一下，同樣的，顏色也可以決定視覺上的統一性。比如法國國旗顏色比例，藍：白：紅＝30：33：37。

以上純屬經驗扯蛋，不負責任的啊。

我班門弄斧，不請自來，借題發揮一下。

這是我在帶新人的時候常講的——每一個設計細節都是有緣由的。因為設計是有目的的創造，是為達到某種目的所進行的一系列思考和所採取的手段。

╮(︶︿︶)...咳咳！就算沒有，你也得編個冠冕堂皇的理由出來吶，不然怎麼說服別人啊……

好了，先不裝逼，我回答問題。

背景為什麼是黑色的？

這不是重點。
背景沒必要搶鏡，所以用無彩色即可，而且醬紫更顯逼格，另外背景色要與前景的主體顏色形成較為鮮明的對比。中間那塊用了較淺的顏色只是為了把BD、AD、GD三個模塊區分開來，同樣因為他不是重點所以只是提高了那一塊的明度，色相併沒有做變化。

圖中的英文用的是什麼字體？

這不是重點。
英文字體屬於無襯線字體，選它因為他沒有那麼多細節修飾，能讓你更好地把注意力集中在重點上，當然也為了簡約的現代感。

雖然我說這些都不是重點，但你可以嘗試著用五顏六色的背景和圖形，搭配哥特字體去看看效果，絕對是一股濃郁的鄉村非主流殺馬特氣息，時尚時尚最時尚！
一個字——視覺的簡約是為了內容為王。

圖中的線條有什麼含義？

這也不是重點。
線條是參考線，方便你看出三個圖形的位置及大小關係。

25pt有什麼含義？

這依然不是重點。
數字表示兩條平行參考線之間的距離，讓你知道三個圖形之間的距離關係。

雖然我說這些都不是重點，但你可以嘗試著去掉他們，看看是否能輕易地看出圖形之間的位置和大小關係。
一個字——標註是為了令信息一目了然。

方塊、圓形、三角形分別有什麼含義？

額……說實話我沒看懂這個問題想問什麼，我回答另一個問題：

為什麼選用正方形、圓形、正三角形來闡述問題？

1、他們的邊存在差異，分別是豎直的直線、曲線、傾斜的直線；
2、他們形狀各異且相差較大。

⊙︿⊙……好像有點廢話，請先不要打我，聽我解釋完。

1和2的區別是什麼？

區別：圖2中三角形向左移動了一點點（作者把點與點的間距改為點與線的間距）
緣由：為了讓視覺上三者間距更接近

2和3的區別是什麼？

區別：圖3中圓形和三角形面積稍微增大了一點點
緣由：為了讓視覺上三者大小更接近

為什麼能說明問題？

額……還是沒看懂這個問題想問什麼，我回答另一個問題：

這個組圖能說明什麼問題？

我們用「重心」去感覺物體之間的距離，用「飽滿程度」去感覺物體的大小。
形狀、顏色、方向……都影響著我們所感知到的間距、大小、重量、遠近……

舉幾個例子
兩個面積相同、顏色相同的圓形和正方形，哪個看起來更大呢？

兩個面積相同、顏色不同的圓形，那個看起來更大呢？

兩條長度相同、相互垂直的線段，哪條看起來更長呢？

具體場景的運用請參照 @董宏遠的答案

總結：人類視覺認知事物的方式是感性的或者說是相對的，並不一定所見即所得，大腦會對搜集到的信息進行一系列複雜的處理。

複雜的意思就是——我也不了解。冏rz
這涉及到很多深奧的神經科學和心理學知識，我就不獻醜了，就舉幾個例子。
像醬紫：

或者醬紫：

或者醬紫：

視覺設計追求的是視覺效果，它是一種主觀感受，而不是絕對的像素、色相、明暗或者其他，所以設計師做設計的時候應該明確設計的根本目的，綜合考慮各種因素，找到一個最佳的平衡點，給用戶更好的體驗。

這又引出了另外一個話題——設計師與死美工。
設計師知道別人為什麼那麼做、自己為什麼這麼做，而死美工不求甚解、人云亦云，只曉得「照虎畫貓」，埋頭骨幹卻不知所以。所以！請無視我的言論，自己獨立思考。

題外話：
你們有沒有發現圖作者並沒有把三組圖形對齊？哈哈哈……

當然，這不重要，因為他們離得太遠，只有喪心病狂的人才會發現。
我的像素眼無意中發現了它（我真的不是處女座），然後我將其解讀為作者留下的彩蛋，歐耶~
請叫我「善良的美男子」╮(╯▽╰)╭
此處應該有掌聲……

圖一嚴格遵照了圖標的實際尺寸和間距同等大小的原則，但是由於圖標外形有很大區別，所以人的眼睛並不覺得圖標是等大小等間距。

圖二嚴格遵照了圖標同等大小的原則，根據圖標的外形特點調整了圖標的間距，使人的眼睛看上去圖標的間距好像是一樣的。

圖三並沒有嚴格遵照圖標的物理大小和間距同等大小，但是根據圖標的外形特點調整了圖標的間距和大小，使人的眼睛看上去圖標的間距是一樣的，圖標的體量感是一致的。

（不過「糟糕的設計師、普通的設計師、好的設計師」一定不是這麼來鑒別的吧……^_^）

哈哈，感覺題主的問題有點兒偏了吧，背景、字體、數字啥的應該不是重點，不過我喜歡題主對每個細節都好奇的態度～

說說我個人的理解（主要是從交互設計的角度），我覺得原圖作者很好地說明了：

糟糕的設計師在設計時憑藉直覺和記憶，處理設計的時候通常抱著理所當然的態度，或者生硬地套用學到的設計原理，對問題本身缺乏深入的思考；

普通的設計師在設計的時候能夠對問題進行理性的分析，透過問題的表面得出問題的更深層次的要素，並且以分析得出的結論為導向進行設計；

好的設計師不但能夠抓住問題的核心和本質，具有很強的理性分析能力和邏輯分析能力，還能在理性和邏輯的基礎上根據不同的情景和對象靈活變通，把問題放在更大的系統中去考慮，在遵從理性和理論的基礎上，又能夠充分發揮自己的主觀能動性，達到理性和靈性的平衡。

感覺這幅圖的意思是，好的設計師是從觀眾的感覺出發的，而不只是遵從教條標準。

三個圖形排列想達到的效果是讓觀眾感覺平衡，大小相同，距離相同。

壞的設計師把這個意圖轉化成三個圖形間空隙相同，高度寬度相同，但實際上方形面積更大，三角形重心偏下，從觀眾視角看並沒有覺得平衡。

好的設計師只是把參考線作為框架，實際上依據觀眾的感覺做了調整，而非嚴格遵循尺寸上的相等。從效果上看三個圖形大小更接近，距離上也真正產生了「等距」的感覺，達到了視覺上平衡的效果。

告訴我們學習設計理論的重要性。

視覺平衡的理論是非常初級的東西。

很多人說1是太教條了。其實不是，1連教條都沒看過怎麼會教條呢？

很多時候，做設計還是先從教條開始學習的比較好。沒學會走就開始學跑是要摔跤的。

這張圖只能說明壞的設計普通的設計好的設計還不足以區別設計師的好壞

好的設計師發現問題，普通設計師能按照經驗和總結去解決問題，糟糕的設計師只能製造問題。

這句話在設計圈通用。

字體課第一講就說的這個.... 全包結構視覺上會膨脹所以類似國類字體會比其他字體小一點，這樣區分設計師太離譜……沒有價值，一切結果優先，不是數據分析師