審美 VS 科學——用科學定義設計

林洋

YMFE 資深工程師，負責去哪兒網 Hybrid（Hy） 、React Native（QRN）等移動端方案架構、開發和推進，專註於移動前端，著眼於工程流程化。

在去年的文章《寫給應屆生的職業規劃建議》里，提及了「作為一個前端，最該學習的兩個方面是產品和設計」的觀點，而在這篇文章中，筆者就來談一談設計，談一談偏重邏輯思維的工程師怎麼有效地學習和運用設計。

筆者所在的團隊從去年系半年開始，成立設計小組，逐步開始負責團隊產品的 UI/UE 設計 ，以求讓團隊產品更為易用。

前言到此為止，接下來要進入正題，而正題的第一點，就是——互聯網產品中設計的重要性。

α. 設計之重

從蘋果的崛起，大家充分認識到設計的重要性 —— 擁有優秀設計的產品，是不需要說明書的。不管從工業設計還是視覺設計上，蘋果都給人一種美輪美奐的感覺。雖然如此，但是很多人仍舊認為設計是錦上添花的事情，只要產品功能完善，一切就無可阻擋。可是，雖然從巴萊特定律（80/20法則）來看，設計很有可能在產品的20%部分，但是殊不知，在大家都能完成了 80% 時，這 20% 仍會輕於鴻毛嗎？

年初螞蟻金服的 See Conf 中，螞蟻的演講人提出一個非常新穎的觀點 —— 互聯網逐步會「消失」 。當然這裡的「消失」並不是「滅亡」的意思，而是 互聯網將和我們的世界充分融合，人們將從 Connect the Internet 到 Use the Internet，再在 Enjoy the Internet，而現在所處的階段就是從 Use the Internet 到 Enjoy the Internet 的過程中，讓用戶更容易、更便捷地使用，從而享受互聯網帶來的一切。進一步，從用戶的視角來看，人機交互 將是實現這個目標的重中之重，而 設計 則是 人機交互 的重中之重。

不管觀點如何，歷史總可以給我們答案。當一個事物從勝到極勝的過程中，細節絕對是決定成敗的最關鍵因素，而 設計才能將產品細節體現得更為突出 。互聯網發展到現在，甚至有人說「互聯網已經是傳統行業」的時候，要更進一步的發展，忠於用戶體驗的設計絕對是必不可少的。

β. 無設計的開發過程

著眼現在，在很多前端需求的開發過程中，是 無設計的，主要的是以下兩種情況：

沒有 UI/UE 圖，工程師自己對著需求擼代碼，設計隨遇而安。有 UI/UE 圖，但是由於工程師對設計不理解，還原得很「糟糕」。其中，第二種情況尤其突出。這裡的「糟糕」是帶雙引號的，並不是指工程師還原 UI/UE 圖還原得不到位，而更多的是說當工程師將 UI/UE 圖還原至很高的程度以後，實際效果並不像設計圖上所展現的那樣美觀。這裡往往是因為工程師對設計不理解，從而帶來一些實現上的細節差異，造成了實際效果差別巨大。

雖然，這兩種情況，可以通過規範相關的開發、評審流程來避免，但是有些時候，不可避免因為業務、產品變更頻繁、頁面複雜或者人力問題，造成此類情況。因此，如果工程師懂一些設計，那麼這些問題，雖然可能不會完全避免，但是也足以讓影響儘可能地變小。

但是，對一個理科出身、擅長邏輯思維、平時天天擼代碼的、甚至毫無審美可言的工程師來說，如何 理解設計，學習設計，並在實際中 運用所學的設計知識，看起來是一項 不可能完成的任務。但是事實真的如此嗎？

γ. 審美 VS 科學

什麼是 審美？欣賞、品味或領會事物及藝術品的美。每個人都有審美的，雖然有差別，但是很多時候，例如去景區旅遊、去博物館欣賞藝術品，大家對美的評判其實是很相近的。但是為什麼有很多工程師，硬要說自己沒有審美呢？

其實，沒有審美 並不是 沒有評判美的能力，更多的是 他們找不到不美的原因，找不到原因，就不能修復缺陷，就不能讓產品變得更美。

什麼是 科學？科學是一個建立在可檢驗的解釋和對客觀事物的形式、組織等進行預測的有序的知識的系統。而最基礎的自然科學，則是工程師心裡「最高的信仰」，就像「給我一個支點，我能撬動地球」一樣，給工程師一個規則，什麼事都可以做到最好。

這就好辦了，用科學的方法定義一下「美」，把提煉出來的「公式」給工程師，工程師就能讓產品「美美噠」了。那麼科學和審美碰撞的效果究竟是什麼？

團隊內，一些人參加了年初的 See Conf，有一位小夥伴聽完以後，竟然有「朝聞道，夕死可矣」的感受。原因是在《Ant Design 3.0 背後的故事》里，他看到了身為一個不是科班出身卻非常喜歡設計的技術工程師的價值。

「Ant Design 認為，一切看似自然的事物在背後都是有數學/物理規律可循的。映射到我們的設計中，從自然的數理規律中尋找啟發，理性的看待我們設計決策的過程，將設計結果、影響結果的變數、以及他們之間的規律發掘出來，就是我們的方向。而這個理性思考，感性表達的過程和我們團隊的技術基因也是非常匹配的。」

這句話，是筆者非常贊同的，並深深被其打動。人類一貫是用科學來定義方法，然後按方法來執行具體的行動，而按照所謂的「感覺」來行事的，一貫被認為是「不靠譜」的。當然，筆者不是指設計師做設計都是靠感覺的，他們有一套設計科學，包括配色、溝通等很多專業性的理論基礎，但是，對於一個沒有設計基礎的工程師來講，他的感覺很大概率是偏離方向的。

同時，科學也讓設計理論更為確定，更容易被人接受。就像中醫，筆者相信中醫是一門確定性非常強的醫學，否則中國古代不可能出現那麼多像貞觀之治一般的鼎盛時代，但是由於中醫的很多理論都沒有科學基礎，所以才被大眾所質疑。設計也一樣，「因為這個規則，所以這樣做更好」肯定比「我覺得這樣比較好」要更有說服力。

Ant Design 3.0 的設計價值觀是「確定」和「自然」，從自然中提取出「美」，然後用確定的科學規則來描述它，最終形成一套準確的設計規範，這樣才更有價值。下面是個很「自然」的例子。

什麼樣的字型大小，用戶看得最舒服？從圖中可以看到，在人和屏幕距離一定的時候，人觀看文字的視線角度（a），決定了人的舒適程度。有機構和團隊做過研究，當大於 0.3 度時的閱讀效率是最好的。同時我們在操作電腦時，一般來說眼睛距離電腦屏幕的平均值大概會在 50 厘米(2.45 inch)左右。這就算出來，字體應有的高度大於 12 px，再根據屏幕的 PPI，可以算出字型大小為 14px 時，77% 的用戶最為舒服，而這個字型大小，就成為 Ant Design 3.0 的主字型大小。

當你有一個主字型大小的時候，其他字型大小又怎麼算出來的呢？

14是主字型大小，而 2.71828 和 5 又是怎麼來的？

2.71828 其實是就數學課中學到的自然常數，也可以稱她為歐拉數，是一個超越數（無限不循環小數），和 π 稱兄道弟。5 的來源更為神奇。有國外大神建議，參考音律的規則，令字階呈現出一種自然的節奏感。最終通過實驗驗證出來的最合適的數值是 5，而 5 聲音階是很多古典樂遵循的規律，比如宮、商、角、徵、羽。Amazing！ 你有沒有感受到自然之美，一個追尋著科學的真理，讓處女座都生不出絲毫厭惡之心的規則，對於工程師來說，是多麼美妙啊。

不僅僅是字型大小，包括行高，包括字間距，包括排版，包括顏色，都可以用很自然的規則去定義它們。同時也不僅僅是螞蟻金服，蘋果的設計一直很自然，從擬物到偏平，雖然每次升級是都會被人吐槽，但是用習慣了都會覺得很舒服。從 Google 的新 Logo，到騰信的獨創字體，都很自然，同時也都很確定。

給你一個支點，你能撬動地球；給你一個確定的科學規則，你是否能產出足夠美的產品呢？

δ. 設計不只是美

設計不只是美，美只是設計的第一步，它讓用戶在使用時，尤其是第一次使用時，至少可以有個好的印象。而設計的最終目的其實是為了更好地、更準確地傳達信息，讓用戶更方便、更容易的接受信息，從而讓產品能解決用戶的問題。

因此，設計追求的是卓越的用戶體驗，不僅僅是感官的體驗還有使用的體驗。使用的體驗或許更為重要，但是它要在感覺體驗的基礎上完成，才能讓體驗相輔相成，讓設計更為完整。

用戶體驗的核心是 研究用戶在特定產品的場景下的思維和行為模式，然後利用研究的結論，創造出適應用戶、讓用戶感覺舒服的產品。一個優秀的用戶體驗，會將產品設計成符合用戶的思維行為習慣；而一個卓越的用戶體驗，會基於用戶本身的思維行為習慣創造出符合產品特性的設計，並引導用戶進行使用。

因此，理解產品，才能做出好的設計；理解產品並理解好的設計，工程師才能更好地對產品進行開發。但是工程師如何去學習設計呢？上文說過，設計是一個門包含眾多的理論，不可能面面俱到地去學。這時，我們應該選取比較容易但效果足夠好的東西去學，那就是設計的基本原則。

ε. 無原則，不科學

既然談到了科學，那麼就應該談一談規則、原則。所有科學，基本上都是建立在確定的規則上的，而設計也一樣。

左側是一個讓處女座發狂的「放蕩不羈」的設計，而右側則是符合設計原則的。或許有人會覺得左側的設計體現的是自由、奔放，體現出舞蹈的多樣性，但是不管如何自由，讓用戶不能快速地獲取信息，這就是個壞的設計。那麼，到底什麼是設計的原則呢？

在《寫給大家看的設計書》中，Robin 提出了設計的四大基本原則：對齊、重複、對比、親密性。每一個優秀的設計作品通常都遵守這四大基本原則，互聯網設計也不例外。

親密性：彼此相關的應當靠近，歸組在一起。 如果多個項目相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個獨立的元素，這有助於信息組織，減少混亂，為讀者提供清晰的結構。對齊：任何東西都不能在頁面上隨意安放。 每個元素都應當與頁面上的另一個元素有某種視覺聯繫。這樣能建立一種清晰、精巧而且清爽的外觀。重複：讓設計中的視覺要素在整個作品中重複出現。 可以重複顏色、形狀、材質、空間關係、線寬、字體、大小和圖片，等等。這樣一來，技能增加條理性，還可以加強統一性。對比：避免頁面上的元素太過相似。 如果元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就乾脆讓它們截然不同。這四項基本原則非常基礎，就像數學中的加減乘除一般，對於一個工程師，這些很容易學會並理解。

可是，作為工程師，為什麼要學呢？學這麼點又有什麼用呢？很簡單的原因，雖然學習這些很基本的東西，並不能讓你真正可以進行設計，但是它能在你無設計的開發過程中，不再用感覺來嘗試修復「審美的不足」，而用科學的方法去發現並解決問題。雖然它也許只能做巴萊特定律中 80% 里的東西，但它可以以很小的成本，規避一些很常見的錯誤，讓工程師少走幾次彎路，少改幾次代碼。筆者覺得這樣就足夠了。

如果作為工程師的你，真的下定決心學習設計，那麼閱讀《寫給大家看的設計書》是個不錯的選擇。

ζ. 寫在最後

其實設計小組的成員並不是純粹的設計師，他們更像 體驗工程師，把優秀的體驗真正實現在項目中。最後還是那句話：

作為一個前端，最該學習的兩個方面是產品和設計 。學習產品思維，會幫助你從用戶的角度審查你開發的產品，找出用戶體驗不優、交互不好的地方；而學習設計，則幫助你分析不優的地方的原因，並找出解決方案。

最後，感謝董文博、張文傑、田琦、侯情緣這些 YMFE 交互設計小組的成員們給這篇文章提供了這麼多很有價值的內容。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！