SEE Conf大會精彩回顧

1月6日，首屆螞蟻金服體驗科技大會 SEE Conf 2018 在杭州成功召開。SEE = Seeking Experience & Engineering，意為探索用戶體驗與工程實踐。這場SEE Conf大會由螞蟻金服集團舉辦，每年 1-2 次，包括專業(yè)分享、產(chǎn)品展臺、Workshop 等內(nèi)容。我們希望通過 SEE Conf，能與業(yè)界同行一起分享交流體驗科技的當(dāng)前進展，一起探討切磋體驗科技的未來發(fā)展，共同努力促進體驗設(shè)計與技術(shù)的開放，讓生態(tài)繁榮共贏。

在剛剛落下帷幕的首屆螞蟻金服體驗科技大會 SEE Conf 2018 上，十幾位講師及特邀嘉賓為大家?guī)砹艘粓鲶w驗科技的分享盛宴。無論是設(shè)計規(guī)范背后的數(shù)理規(guī)律，還是數(shù)據(jù)可視化對未來的宏大藍(lán)圖，以及圓桌嘉賓最后對體驗科技的暢聊等等，相信都讓所有人印象深刻。此外，本次大會有近 500 位參會者到場參與此次體驗科技盛宴，1800 余人在線收看直播。

在大會當(dāng)天，首個分享話題是《Ant Design 3.0 背后的故事（附演講視頻，鏈接復(fù)制至瀏覽器打開 http://v.youku.com/v_show/id_XMzMwMTI4NjIyNA==.html?spm=a2h3j.8428770.3416059.1）》，由 Ant Design 負(fù)責(zé)人它山帶來。螞蟻設(shè)計語言背后細(xì)節(jié)以及數(shù)理邏輯的首次揭秘，讓參會者驚嘆不已。分享以 Ant Design 3.0 的正式發(fā)布收尾，非常精彩。本文為演講人它山在活動結(jié)束后的總結(jié)和思考，快來一睹為快吧！

▲Ant Design 負(fù)責(zé)人 它山

Ant Design 3.0 背后的故事

作者：Ant Design 負(fù)責(zé)人它山

（附演講視頻，鏈接復(fù)制至瀏覽器打開 http://v.youku.com/v_show/id_XMzMwMTI4NjIyNA==.html?spm=a2h3j.8428770.3416059.1）

上周六參加了咱們首屆螞蟻體驗科技大會，并且有幸成為第一個開場的主講人。在會后感受到了很多設(shè)計師和工程師同學(xué)對于設(shè)計體系以及 3.0 設(shè)計語言的興趣以及熱情，深受感動。說實話在過去有蠻久一段時間，因為這類產(chǎn)品不太容易被太多人所感知，因此也常常會被大家誤解成是比較枯燥且單一的領(lǐng)域。體驗技術(shù)部 UED 從 14 年底成立到現(xiàn)在已經(jīng) 3 年多了，期間我們的設(shè)計師和工程師一直默默的耕耘在企業(yè)級產(chǎn)品這片土壤上，在潛心積累經(jīng)驗的同時也讓我們逐漸的沉下心去探索設(shè)計最本源的東西。希望通過這一次的對外發(fā)聲，可以讓企業(yè)級產(chǎn)品的這一個領(lǐng)域被更多人所關(guān)注，當(dāng)然如果你來自其他的領(lǐng)域，也希望這樣的內(nèi)容可以對你有所啟發(fā)。

1 月 6 日當(dāng)天，我們還對外正式發(fā)布了 Ant Design 3.0，正式將 Ant Design 從 UI 組件庫的概念升級至面向企業(yè)級的設(shè)計體系的概念。這篇文章也會分成兩個部分，依次為大家介紹我們的設(shè)計體系以及設(shè)計語言 3.0 的『自然之美』。

設(shè)計體系

#基本概念

說起設(shè)計體系的前身我想大家應(yīng)該都不陌生，英文叫 style guide，通常我們稱之為設(shè)計規(guī)范。一個團隊或是產(chǎn)品的主設(shè)計師常常會基于團隊當(dāng)下的設(shè)計習(xí)慣產(chǎn)出這類的文檔。內(nèi)容通常包含了字體、顏色、按鈕、圖標(biāo)、常用的組件、甚至是頁面框架，交互原則等。在過去很長一段時間里，我們用它來解決產(chǎn)出物的一致性，提升設(shè)計的效率。

然而這種形式并不能實質(zhì)性的解決問題。當(dāng)產(chǎn)品開始不斷的迭代更新、團隊人員的加入或者離開、外部技術(shù)的變革、用戶使用習(xí)慣的變化等等這些情況發(fā)生的時候，基于當(dāng)下設(shè)計現(xiàn)狀以及習(xí)慣的靜態(tài)內(nèi)容就難以應(yīng)對。隨著時間的推移，設(shè)計產(chǎn)出的不確定性就會越來越高。

因此我們需要一種新的更具包容性和多元化的思路，可以幫助我們將不確定性控制在一定范圍內(nèi)，從而真正的釋放重復(fù)勞動，讓更多的設(shè)計者有機會去觸及更好的產(chǎn)品體驗，這就是設(shè)計體系。

那么，什么是設(shè)計體系呢？我個人最早接觸到設(shè)計體系的概念來自 Brad Frost 的一本書，書名叫 Atomic Design（作者很 open，這本電子書可以在線直接閱讀http://atomicdesign.bradfrost.com/ 本文所有鏈接請復(fù)制至瀏覽器打開）。他提出的模塊化思路以及原子級的模塊抽象的方法啟發(fā)了后來非常多的設(shè)計師以及團隊（比如 GE 的 predix design system）。目前在網(wǎng)絡(luò)上關(guān)于這個概念的解釋也是非常多的，其中有一種類型的解釋是我個人比較認(rèn)同的，提出者認(rèn)為設(shè)計體系是一個具包容性且充滿生命力的東西。包容性指的是從組件庫到設(shè)計語言到設(shè)計方法等所有和產(chǎn)品設(shè)計相關(guān)的方面。而生命力指的是它并非靜態(tài)的內(nèi)容，而是可以應(yīng)對不斷變化的環(huán)境，是一個不斷進化的過程。

當(dāng)然，設(shè)計體系的最終極目標(biāo)依然是為了實現(xiàn)更好的用戶體驗。而為了這一目標(biāo)，我們需要先建立起一個強大的基礎(chǔ)設(shè)施來解決可控性以及效率的問題。目前在網(wǎng)絡(luò)上的多數(shù)有關(guān)于設(shè)計體系的專題文章基本上也都是集中在這兩塊做解讀，而在螞蟻我們的設(shè)計體系已經(jīng)往前探出了一小步。

#關(guān)于螞蟻企業(yè)級產(chǎn)品

在開始進一步介紹我們的設(shè)計體系之前我想先介紹一下我們所服務(wù)的產(chǎn)品，冰山圖大家應(yīng)該腦子里都能聯(lián)想的起來（我這里就不貼了）。一說起螞蟻金服，相信很多人對支付寶錢包、芝麻信用、網(wǎng)商銀行、春節(jié)紅包、螞蟻森林這些應(yīng)用并不陌生。這些在我們螞蟻的整個產(chǎn)品體系中，屬于水面以上的部分。而 Ant Design 所服務(wù)的企業(yè)級產(chǎn)品更多的是屬于水面以下的部分，這是一個非常龐大且復(fù)雜的產(chǎn)品網(wǎng)。功能囊括了資金、運維、研發(fā)、安全、風(fēng)控、效能管理、渠道管理等所有維持我們前臺業(yè)務(wù)快速高效安全穩(wěn)定運行的模塊。

總結(jié)一下，我們的企業(yè)級產(chǎn)品有這樣幾個特點：

• 首先，這類產(chǎn)品往往量級非常大且功能復(fù)雜，咱們整個螞蟻的企業(yè)級產(chǎn)品加起來有上千個之多。
  
• 其次，這類產(chǎn)品項目變動非常頻繁，且并發(fā)很多，需要設(shè)計師甚至開發(fā)們隨時快速的做出響應(yīng)。
  
• 第三，產(chǎn)品間往往有較高的關(guān)聯(lián)性，因此對于一致性的要求也較高。
  
• 第四、這類產(chǎn)品往往存在蠻多共性，可以通過抽象，提取出一些非常有價值的模式。這對于我們從事這一領(lǐng)域的設(shè)計師而言是無疑一片巨大的沃土。
  
• 第五、這類產(chǎn)品的使用者大多具備很強的專業(yè)性，設(shè)計師在設(shè)計的時候比較難快速的建立起用戶同理心，并且在市面上可以參照的競品以及用戶心智模型都是非常少見的。因此，了解用戶的訴求就變得格外的重要。
  
• 最后、開放的趨勢。隨著越來越多的企業(yè)級產(chǎn)品成熟并對外開放（比如：螞蟻金融云），我們堅信在未來在這一個領(lǐng)域?qū)τ诋a(chǎn)品體驗的要求會越來越高。
  

面對這樣一個龐大且復(fù)雜的產(chǎn)品背景，我們 30 幾個人的設(shè)計團隊要實現(xiàn) better UX 的終極目標(biāo)就必須依靠設(shè)計體系的思路。當(dāng)然也是借助設(shè)計體系，我們的團隊目前已經(jīng)支撐了螞蟻內(nèi)部大約 800 個以上的企業(yè)級產(chǎn)品（這個數(shù)字不包括開源項目服務(wù)的那一部分集團以及外部的數(shù)字），其中有大約 10% 的產(chǎn)品正在通過我們體驗策略逐漸地提升用戶體驗。

Ant Design System

那么我們的設(shè)計體系是怎樣構(gòu)成的呢？讓我們一起來看一下這一張大圖。

• Efficiency—高效
  這部分對應(yīng)的是我們的設(shè)計資產(chǎn)。設(shè)計資產(chǎn)除了基礎(chǔ)組件庫以及 pro 組件庫（UI 資產(chǎn)）之外，還包涵設(shè)計資源、技術(shù)文檔以及我們的設(shè)計資源。這部分是我們整個設(shè)計體系的起點同時也是基礎(chǔ)。
• Consistency—可控性
  Consistency 是將不確定性控制在一定范圍內(nèi)的思路，這一部分交給我們的設(shè)計語言。
• Better UX—更好的體驗
  與之對應(yīng)的是體驗策略，包涵了設(shè)計流程方法、度量體系、體驗運營等等。

設(shè)計語言、設(shè)計資產(chǎn)以及體驗策略是我們設(shè)計體系最核心的三塊內(nèi)容，分別對應(yīng)的解決設(shè)計體系中的 Consistency、Efficiency 以及 Better UX 的目標(biāo)。當(dāng)然這還是不夠的，我們還需要一個多元化并且具備活力的團隊來維持系統(tǒng)的健康運作，并且在過程中又可能進一步迸發(fā)出提升效率的產(chǎn)品概念，這就是工具化。（這一塊目前我們正在發(fā)力中，所以我要暫時先買個關(guān)子。）

#團隊模型

前面我們有提到過一個設(shè)計體系對應(yīng)的需要有一個團隊去維持它的運作。大家都知道，我們的體驗技術(shù)部本身就是是一個集合了工程師和設(shè)計師的多元化的大團隊。針對設(shè)計體系，我們有一個大約十幾個人的核心團隊（System Operation Team），由工程師和設(shè)計師組成，合力維護著整個體系最為核心的三塊內(nèi)容。在這過程中我們還兼顧著 PD 以及運營的職責(zé)。

核心小組并不是完全脫離業(yè)務(wù)線的工作的。絕多數(shù)的設(shè)計師和工程師同時還會有有一半以上的經(jīng)歷參與在具體的產(chǎn)品設(shè)計中，這樣的方式可以保證我們所沉淀的設(shè)計模式始終來自于實際的場景，同時新產(chǎn)生的內(nèi)容可以快速的在實際場景中的得以驗證。

此外，在核心團隊之外，所有業(yè)務(wù)線的設(shè)計師也會組成一個一個的分舵，我們有定期的團隊溝通機制，內(nèi)部開放的設(shè)計資產(chǎn)池以及小組間的合作項目來保證核心團隊同業(yè)務(wù)團隊的緊密性。核心團隊的成員也并非是固定不變的，除了幾個關(guān)鍵人員之外，定期會有人員的流入和流出，目的是保證團隊的活性，這也是維持設(shè)計體系生命力的一種方式。

#設(shè)計資產(chǎn)

設(shè)計資產(chǎn)是我們整個設(shè)計體系的起點，也是設(shè)計和技術(shù)結(jié)合最為緊密的一個部分。除了 design+coding 的 UI 資產(chǎn)之外，還包涵了與之對應(yīng)的設(shè)計文檔、技術(shù)文檔，以及助力設(shè)計提效的各類資源包。設(shè)計資產(chǎn)是以 『模塊化』為核心思路展開的。 在過去的一年里，我們在 Atomic Design 以及 GE predix design 的啟發(fā)上，形成了符合我們自己特點的 E (examples)、T (template)、C（components）、G（global styles） 的抽象思路。

目前大家在 Ant Design 網(wǎng)站上所感知到的基礎(chǔ)組件以及 Ant Design Pro 這兩塊內(nèi)容都是基于 ETCG 的思路一步一步抽象出來的，這些內(nèi)容是我們團隊在企業(yè)級業(yè)務(wù)場景中抽象出來的最為穩(wěn)定以及復(fù)用程度最高的部分。然而這只是我們的設(shè)計體系對外的內(nèi)容，在內(nèi)部從產(chǎn)品層到業(yè)務(wù)層，我們都不斷在積累穩(wěn)定且高復(fù)用的模塊, 通過開放的內(nèi)部資產(chǎn)池以及靈活的溝通機制確保和開方的內(nèi)容之間的緊密聯(lián)系，于此同時在外部借由開源社區(qū)的力量，令整個 UI 資產(chǎn)的小生態(tài)始終保持活力。

#體驗策略

體驗策略是我們在設(shè)計資產(chǎn)的基礎(chǔ)之上往前走的一小步，體驗策略的核心思路是以任務(wù)為導(dǎo)向的。在這一思路的帶領(lǐng)下，我們主要通過四個方面去構(gòu)建體驗策略。

• 流程與方法：在產(chǎn)品前期就開始大量的推行用戶體驗地圖，確保用戶需求能夠在產(chǎn)品前期就明確被整個團隊所感知。
  
• 度量體系：著重于 task sucess 核心任務(wù)進行度量。
  
• 運營活動：當(dāng)然體驗不是設(shè)計師一種角色的事，我們還會通過?體驗一起造?活動將產(chǎn)品的各方人員 involve 進來，共同關(guān)注產(chǎn)品體驗發(fā)掘產(chǎn)品問題。
  
• 最佳實踐：是體驗策略的最終目標(biāo)，過程中產(chǎn)出模塊化的解決方案可以反哺給 UI 資產(chǎn)，而核心流程與方法再沉淀之后又可以幫助到更多的產(chǎn)品。

#設(shè)計語言

服務(wù)可控性的設(shè)計語言，在理想情況下應(yīng)該和設(shè)計資產(chǎn)以及體驗策略都有很密切的關(guān)聯(lián)性。在目前這個階段，由于我們的設(shè)計資產(chǎn)跑的相對更快，因此 3.0 的設(shè)計語言和設(shè)計資產(chǎn)的關(guān)系會顯得更為緊密。

自然之美

Ant Design 設(shè)計語言的核心是設(shè)計價值觀，設(shè)計價值觀影響到設(shè)計的各類場景，產(chǎn)生與之對應(yīng)的原則、視覺呈現(xiàn)方式、交互模式等內(nèi)容。

Ant Design 的設(shè)計價值觀，從 1.0 版本的時候就已經(jīng)有開始提及，最初的版本是微小、確定以及幸福感，分別指代我們的細(xì)節(jié)微創(chuàng)新、模塊化思路以及在研發(fā)體驗上的追求。隨著體系的成型，3.0 我們在保留 『確定』的基礎(chǔ)上，又發(fā)掘出了『自然』。新的這一個價值對 web 界面的視覺基礎(chǔ)有很大的啟發(fā)，可以說 3.0 的整個視覺呈現(xiàn)都是基于『自然』而來的。

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

在『自然』這個新的價值觀的驅(qū)動下，3.0 我們一共開展了字體、布局以及色彩三方面的探索。由于篇幅的關(guān)系，我會著重為大家展示我們在字體設(shè)計上的一整個推導(dǎo)過程，并在最后對另外兩個課題做簡單的介紹。

#字階和行高

字體是 UI 設(shè)計中一個非常基礎(chǔ)的話題。設(shè)計師在字體設(shè)計過程中需要關(guān)注非常多的方面，比如字體家族、主字體、字階、行高、字重、行間距、字間距等等。3.0 在字體領(lǐng)域上我們著重解決的是三個問題：主字體、字階段以及行高。這三者之間在設(shè)計決策時還存在一個遞進關(guān)系。接下來就讓我們一起用提問的方式來看一下我們的推導(dǎo)過程。

我們的第一個問題是：多大的主字號是自然的？

在 3.0 之前的設(shè)計中，我們的主字體定義的是 12px，這個決策基本上是基于我們在企業(yè)級設(shè)計場景中的經(jīng)驗來定的。那么 3.0 我們是怎樣做的呢 ？讓我們來看一下這張圖。

肉眼到物體之間的距離，物體的高度以及這個三角形的角度，構(gòu)成了一個三角函數(shù)的關(guān)系。而公式中的 h 的值和我們要解決的核心問題『主字號』有著很大的關(guān)系。關(guān)于這個 a 的角度，有機構(gòu)和團隊做過研究，當(dāng)大于 0.3 度時的閱讀效率是最好的。同時我們在操作電腦時，一般來說眼睛距離電腦屏幕的平均值大概會在 50 厘米左右。然而，公式中的距離和高度的單位都是厘米，字體的單位是 pixel。因此我們還需要將二者之間做一輪轉(zhuǎn)換，完成轉(zhuǎn)換所需的兩個數(shù)值分別是 2.45（cm 到 inch）和 PPI（inch 到 pixel）。

我們假定 PPI 為 120。通過計算便可以得出在顯示器的 PPI 為 120 的情況下，理論上大于 12px 的字體能夠滿足用戶的最佳閱讀效率。基于這樣的思路，確定主流 PPI 的范圍，就很容易鎖定主字體的大小了。根據(jù)網(wǎng)絡(luò)上的數(shù)據(jù)來源，我們發(fā)現(xiàn)只有大約 37.6% 的顯示器 PPI 是小于 120 的，而 PPI 在 120－140 的顯示器的占比大約為 40%。換句話說 12px 的字體只能滿足 37.6% 用戶的閱讀體驗，但如果我們將字體放大到 14px，就可以保證大約 77% 的顯示器用戶處于比較好的閱讀體驗。因此在 3.0 我們將主字號進行了升級，從原本的 12px 調(diào)整至 14px。

在這個問題的解答過程中，我們遵循的規(guī)律是一個三角函數(shù)，決定這個三角函數(shù)結(jié)果的變量分別是 a 角度、d 距離、以及顯示設(shè)備的 PPI。 根據(jù)這樣的思路我們同樣可以非常簡單的推導(dǎo)出手機客戶端的主字體大小。

我們現(xiàn)在有了一顆 14px 的字體種子，把它種到土里，是否能像豆苗一樣發(fā)芽并長出一系列自然的字階呢？這就是我們接下來的第二個問題（聽起來很天馬行空，但我們決定挑戰(zhàn)下）。

Robet Bringhurst 在他的字體樣式元素一書中有提出過，定義有規(guī)律的字階是構(gòu)建設(shè)計秩序感的基礎(chǔ)。同時他又提出經(jīng)典的字階和古典音階具備韻律上的相似性。在這個思想的基礎(chǔ)之上，有個叫做 Spencer 的人提出了一個冪函數(shù)的字體計算公式。用圖形化來表達(dá)就是這樣的。有了這一個公式，讓一粒 14px 的字體種子種發(fā)芽的想法就變得不是那么的天馬行空了。

f0 我們可以理解成為起始字號，也就是主字體，我們前面有推導(dǎo)出來為 14px。r 的值決定了這條曲線的趨勢，可以理解成字階的生長一個趨勢。這個數(shù)值的啟發(fā)來源于自然常數(shù) e，這是一個無理數(shù)，大約等于 2.71828。n 則代表了我們?nèi)绾卧谇€上取對應(yīng)的數(shù)字，決定這個數(shù)值大小的關(guān)鍵在于我們希望相鄰的兩個字號之間的差距是大還是小。Spencer 在他的文章中有提到過，建議 n 在選擇上可以參考音律的規(guī)則，比如說 3 音階、4 音階、5 音階、7音階等等，這樣可以令字階呈現(xiàn)出一種自然的節(jié)奏感。在做了大量的頁面落地試驗之后我們將這個數(shù)值定成 5。映射到音樂的世界中，正好是 5 音階。5 聲音階是很多古典樂遵循的規(guī)律，比如我國古代的宮商角徵羽。

我們將三個數(shù)值代入到前面公式之后，可以得到一組關(guān)于字階的原始數(shù)組。它們是基于 14px 的字體，以自然常數(shù)的生長律，同時用 5 聲音階的單元切分方式得出來的。

在第二個問題的解決過程，字階的規(guī)律是一個冪函數(shù)。決定這個冪函數(shù)結(jié)果的變量是起始字號、生長律以及單元等分的次數(shù)。目前我們只取了曲線上的 10 個字號作為默認(rèn)的字階，當(dāng)設(shè)計對字體有更大的要求的時候，同樣可以基于這個規(guī)律快速鎖定我們想要的字號。

OK，有了字階，我們就可以進一步推導(dǎo)第三個問題：多大的行高是自然的？

行高大家都知道指的是一個字體外框的肉眼不可見的部分。在 Ant Design 的第一版行高計算思路中，我們用字體乘一個固定的倍數(shù)去定義行高。但在實際設(shè)計中，我們發(fā)現(xiàn)這樣的方式會有一個問題，當(dāng)字體越大，行高也會越來越大。在字體 2.0 的時候，我們在字階上做了一個分水嶺，超過某一個字號的字體行高一律乘以一倍。但以上這兩種做法會增加我們在排版布局層面的規(guī)則復(fù)雜度，同時不便于計算和記憶。在 3.0 這個階段，我們決定嘗試用『自然』來解決這一問題。首先，我們需要定義出行高的計算規(guī)律，除了字階的計算公式之外，我們還有另外兩個信息的輸入：

• 設(shè)計師希望字體高度和行高之間能從靜態(tài)黃金比出發(fā)。
  
• 但是基于設(shè)計經(jīng)驗，同時不給布局造成壓力，我們希望行高的增長速度能夠隨著字體的增長逐漸趨向于緩慢，并且最終不要超過 1 倍。
  

借由這樣的思路。我們在字號的基礎(chǔ)之上將增長率做了一個自然律反相的負(fù)增長，從而定義了行高的計算公式。根據(jù)這一公式，同樣的我們得到了一組原始的行高數(shù)組。

現(xiàn)在我們擁有了兩組基于 14px 的原始字號。

基于上面這兩組字號，我們還需要微調(diào)讓它們可以進一步落地應(yīng)用，這兩個原則分別為：偶數(shù)原則和簡化記憶原則。經(jīng)過調(diào)整之后，右邊這一組字號就是這一次的字體 3.0。所有的字體以及行高都符合偶數(shù)原則，并且行高和字體之間都相差 8，更加便于記憶。

現(xiàn)在，我們將這 10 個字號帶行高從小到大依次進行排列，每一個字號之間的間隔都為 16px。然后，我們將之前兩個版本的字號帶行高按照同樣的間隔排列。讓我們看一下三個版本之間的差別。可以明顯的感受到第三個版本的字體排列起來更為自然，同時更有秩序感。

當(dāng)然，新的字號還需要進一步落地到實際頁面中進行可行性驗證。大家都知道實際的設(shè)計過程中有非常多的因素會影響我們設(shè)計對于一個頁面結(jié)果的判斷，為了讓字體更好的被感知，我們通過去色去圖形的方式來加強字體的被感知度。設(shè)計師用這樣的方式一共反復(fù)嘗試了近 200 多張頁面的設(shè)計，覆蓋了后臺大部分類型的場景。得到的結(jié)果是：

• 新的字階在落地中可以實現(xiàn)更為和諧的界面結(jié)果。
  
• 設(shè)計師在使用這一套字階的時候明顯感覺到設(shè)計決策的過程變的輕松很多。
  
• 不同的設(shè)計師產(chǎn)出頁面一致性都比以前有了明顯的提升。
  

總結(jié)一下：整個字體的推導(dǎo)過程就是發(fā)掘結(jié)果和變量間的規(guī)律的過程，并且自然的數(shù)理規(guī)律在這當(dāng)中起到了很大的作用。借由這樣的過程，我們將原本感性的設(shè)計思考通過理性的方式呈現(xiàn)出來，讓設(shè)計者可以更為自信的去應(yīng)對不斷發(fā)生的變化，這就是可控性。

#布局與色彩

同樣，布局 3.0 也是基于和字體相似的思路完成的。啟發(fā)來自法國建筑大師柯布西耶的模度一書。柯布西耶受到斐波那契雙數(shù)組的啟發(fā)通過對人體黃金比例關(guān)系的拿捏定義出紅藍(lán)表雙數(shù)組用于建筑領(lǐng)域的空間布局。同樣的，我們將斐波那契雙數(shù)組的思路映射到 web 布局研究中，得到了布局設(shè)計的雙數(shù)組，幫助我們的設(shè)計師在布局設(shè)計決策中更好的實現(xiàn)動態(tài)的秩序感。這一次發(fā)布的 pro 的空間布局設(shè)計，就是基于這部分的結(jié)論產(chǎn)出的。進一步了解 3.0 的布局可以到https://ant.design/docs/spec/layout-cn。

色彩 3.0 的思路和字體以及布局略微有些許不同。因為色彩相對于字體以及布局來說更加會偏向與感性，但色彩的背后也是有數(shù)理規(guī)律可循的。定義 3.0 的色彩我們主要分成了兩個部分。在第一階段，我們的設(shè)計師從自然中去選擇 12 個主色，進一步定義了 3.0 的色環(huán)。第二階段是基于主色去進一步的定義色彩的明暗變化，在這一個過程中，我們通過搭建三維模擬空間的方式，通過大量觀察和調(diào)試，掌握了不同顏色在自然光照下對應(yīng)的 HSB 的變化規(guī)律，最終形成了我們 3.0 的色板。我們的工程師將設(shè)計師發(fā)現(xiàn)的數(shù)理規(guī)律通過代碼的方式實現(xiàn)出來，讓設(shè)計師可以跳出12色的框架進行色彩的決策，只需定義合理的主色便可以得到一系列自然的色彩變化，從而簡化了傳統(tǒng)的色彩決策過程。和之前兩個版本的色板相比較，3.0 的色板更加符合我們?nèi)庋蹖ι首兓淖匀徽J(rèn)知，并且能夠令界面整體更為明亮和愉悅。進一步了解我們的色板可以到https://ant.design/docs/spec/colors-cn。

最后想說的是，設(shè)計語言服務(wù)的可控性并不等于限制。基于可控性這一目標(biāo)，我們將原本設(shè)計團隊中核心設(shè)計師的個人經(jīng)驗理性的釋放出來，形成易理解、可傳承的知識，再反哺回團隊的時候就能在很大程度上批量的提升設(shè)計產(chǎn)出的質(zhì)量，同時也能讓不同程度的設(shè)計者在設(shè)計決策的時候能更加自信，繼而保證我們的設(shè)計下限不斷的被提升。但是在一個充滿生命力且不斷進化的設(shè)計體系中，好的設(shè)計永遠(yuǎn)是沒有上限的。不論是字體、布局還是顏色，甚至是未來的圖形化、動效等領(lǐng)域，Ant Design 始終會堅持往前探索的態(tài)度，努力的越做越好。

結(jié)語

Ant Design 3.0 的發(fā)布推出了全面升級的設(shè)計體系的概念。但對于我們來說，在追求企業(yè)級產(chǎn)品的 Better UX 這一終極目標(biāo)上才剛剛邁出了第一步。未來還有很長的路要走，我們的設(shè)計資產(chǎn)在未來能否真正的敲開行業(yè)解決方案的大門從而服務(wù)更多的人，企業(yè)級體驗策略是否可以沉淀出越來越多的最佳實踐，在反哺設(shè)計資產(chǎn)的同時又能夠推動設(shè)計語言的進一步升級，此外還有前面我們提到的產(chǎn)品化等等……

嗯，我想一切才剛剛開始。但想起來總覺得有那么一點小激動。

總結(jié)

以上是生活随笔為你收集整理的大会 | SEE Conf：Ant Design 3.0 背后的故事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。