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

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

筆者所在的團隊從去年系半年開始，成立設計小組，逐步開始負責團隊產品的 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% 裏的東西，但它能夠以很小的成本，規避一些很常見的錯誤，讓工程師少走幾回彎路，少改幾回代碼。筆者以爲這樣就足夠了。

若是做爲工程師的你，真的下定決心學習設計，那麼閱讀《寫給你們看的設計書》是個不錯的選擇。

ζ. 寫在最後

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

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

對於團隊的交互設計發展，咱們準備像成熟的設計團隊通常，並模仿他們，構建本身的設計體系 —— Youth Design。咱們要不斷地 擁抱將來，不斷探索將來的交互形式，吸取前沿的設計理念的同時，對科學保持保持敬畏，用科學的態度保持設計產品的肯定性。固然，身爲 Qunar 人，咱們必需要 立足青春，讓咱們的設計真正被年輕人喜歡。

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