在20世紀(jì)的大規(guī)模生產(chǎn)時(shí)代，設(shè)計(jì)師往往最終只被允許給出一種直觀的形狀。但在21世紀(jì)的數(shù)字時(shí)代，形態(tài)、形式、顏色等等都可以針對(duì)每個(gè)用戶進(jìn)行定制與優(yōu)化。在這個(gè)時(shí)代，硬是要定義出一個(gè)‘最佳形狀’是一件不太現(xiàn)實(shí)的事情，因此我們需要的是由算法編寫出的最佳設(shè)計(jì)系統(tǒng)。如果增強(qiáng)現(xiàn)實(shí)技術(shù)或虛擬現(xiàn)實(shí)技術(shù)將成為我們接觸數(shù)字世界的主要方式，那么設(shè)計(jì)的方式將會(huì)發(fā)生巨大的變化——從大規(guī)模生產(chǎn)模式變成大規(guī)模個(gè)性化。

——Takram

擁有一個(gè)完善的設(shè)計(jì)系統(tǒng)是所有正在或即將要做設(shè)計(jì)系統(tǒng)和設(shè)計(jì)語(yǔ)言的設(shè)計(jì)師與開(kāi)發(fā)者的目標(biāo)，B-Design 設(shè)計(jì)系統(tǒng)語(yǔ)言層建立了有關(guān)顏色、字體、icon、柵格、版式、間距、數(shù)據(jù)可視化等指南，組件層提供30+不同的組件，包括它們的不同狀態(tài)，形成的模式，以及應(yīng)用的產(chǎn)品。該篇文章聚焦B-Design視覺(jué)的形成與應(yīng)用。

① B-Design的語(yǔ)言產(chǎn)生

1. 視覺(jué)風(fēng)格

B-Design 的設(shè)計(jì)原則為：簡(jiǎn)單、專業(yè)、包容

在視覺(jué)上，關(guān)鍵詞為：簡(jiǎn)潔（減少線的使用，空間留白呼吸），風(fēng)格靈動(dòng)（呼吸色、虛實(shí)），品牌強(qiáng)化（多品牌色）?；诙鄻踊漠a(chǎn)品組合、龐大的用戶群體，我們希望這個(gè)設(shè)計(jì)系統(tǒng)在整體的視覺(jué)表現(xiàn)上是開(kāi)放、包容的，傳達(dá)品質(zhì)感、高級(jí)感。

# 色彩體系

印第安納大學(xué)一個(gè)研究：在雜貨店的環(huán)境中，如果你只有文字，而且沒(méi)有可識(shí)別的包裝，無(wú)論是形狀還是顏色，只要有人用它來(lái)選擇你的品牌，大約需要8秒的時(shí)間；如果你有一個(gè)可辨別的顏色，需要6秒；如果你有一個(gè)可辨別的顏色和形狀，需要2秒。

不管是線下還是線上的設(shè)計(jì)，色彩與形狀是作為區(qū)分不同公司或品牌基因識(shí)別最強(qiáng)的2塊而存在。全球范圍內(nèi)，如果要你說(shuō)出IBM Design Language的色彩和Google Material的色彩是什么，熟知的人會(huì)立即說(shuō)出：IBM Design Language的色彩是藍(lán)色+深灰色（注意：不僅僅只有藍(lán)色），Material Design的顏色是一個(gè)神奇的紫色，并且暗黑模式下的紫色也非常具備自己特色。

B-Design在色彩上也進(jìn)行了很多的挖掘與沉淀，一方面突出BDesign的品牌，另一方面兼顧其服務(wù)的行業(yè)及產(chǎn)品特色，主要沉淀以下幾點(diǎn)：

標(biāo)準(zhǔn)色 Standard Color

B-Design提供冷暖2色代表，橙色作為暖色系中最溫暖的顏色，歡快活力，積極向上，藍(lán)色穩(wěn)定，和平，自信，有點(diǎn)活躍的同時(shí)不至于太死板，建立企業(yè)服務(wù)產(chǎn)品的可靠性與穩(wěn)定。

呼吸色 Breathing Color

呼吸是機(jī)體與外界環(huán)境之間氣體交換的過(guò)程，是我們賴以生存的介質(zhì)。

B-Design的呼吸色「Breathing Color」，靈活，流動(dòng)性強(qiáng)，帶入科技與智慧感，在繁忙的數(shù)字世界、人機(jī)交互過(guò)程中，鼓勵(lì)正念（mindfulness）和交流（communication），也傳達(dá)其不斷的思考性（thinking）。讓品牌與界面呼吸起來(lái) 。

呼吸色作為B-Design設(shè)計(jì)最核心的特色之一，應(yīng)用在卡片中，大背景，品牌氛圍等場(chǎng)景中。

冷暖融合漸變與呼吸感的風(fēng)格，共同構(gòu)成了B-Design靈活而又統(tǒng)一的視覺(jué)體系

同時(shí)，阿里云設(shè)計(jì)中心內(nèi)部GDS（Generative Design Studios），開(kāi)發(fā)了一個(gè)B-Design呼吸色彩工具，可以自定義調(diào)整顏色、動(dòng)態(tài)類型，呼吸頻率等。

漸變色 Gradient Color

B-Design藍(lán)，漸變色應(yīng)用在導(dǎo)航、高亮卡片、數(shù)據(jù)圖表中

帶有行業(yè)屬性的色彩應(yīng)用

無(wú)障礙色 Accessibility Color

在遵循阿里云XConsole無(wú)障礙體系時(shí)，B-Design色彩增加了2個(gè)細(xì)節(jié)：一是核心色的色彩的acs值都為5.5或5.6，誤差不大于0.1，再以統(tǒng)一的acs值往亮和暗色調(diào)整，確保整體顏色色卡在橫向和縱向上和諧統(tǒng)一。二是淺色與暗黑顏色為一套，在light mode下，色彩主要集中在50到100之間，在dark mode下，色彩使用在10-60.

# 虛實(shí)-毛玻璃

虛實(shí)作為阿里云設(shè)計(jì)語(yǔ)言的一個(gè)風(fēng)格語(yǔ)義點(diǎn)，在B-Design這類主關(guān)注用戶界面的設(shè)計(jì)上，主要體現(xiàn)為材質(zhì)毛玻璃Frosted Glass。

在物理世界中，毛玻璃做為物理元素，是清晰與寫實(shí)、熱鬧與安靜，虛實(shí)與聚焦。

在用戶界面中，一點(diǎn)點(diǎn)參數(shù)化調(diào)整就能快速展現(xiàn)界面空間感，創(chuàng)建視覺(jué)層次結(jié)構(gòu)，增加自然精心的細(xì)節(jié)。在多復(fù)雜內(nèi)容中能讓用戶全面感知與處理信息，有效傳達(dá)信息，讓信息可閱讀、易閱讀。

時(shí)代的變遷，技術(shù)的發(fā)展，性能的提升，造就今日磨砂的設(shè)計(jì)，我們能清晰感受到材質(zhì)美學(xué)在商業(yè)環(huán)境中的意義。

UI 中，毛玻璃是一種輕量級(jí)的設(shè)計(jì)元素，作輔助/支撐使用，應(yīng)用在pictogram與插畫設(shè)計(jì)中，也應(yīng)用在2級(jí)3級(jí)導(dǎo)航、鼠標(biāo)hover展示內(nèi)容中。

B-Design的毛玻璃與呼吸色是融合在一起的。我們期望在后續(xù)的技術(shù)及設(shè)計(jì)進(jìn)程中，可以再進(jìn)步一些：用戶可以自定義毛玻璃參數(shù)，比如背景模糊與飽和度，賦予色彩，色彩的漸變，不透明度，光影、薄厚、噪點(diǎn)等。

# 圓角與陰影

B-Design使用了圓角與陰影的設(shè)計(jì)風(fēng)格。圓角，代表友好、親和力，整體貫穿在B-Design的組件、按鈕、卡片中。陰影，與毛玻璃材質(zhì)一樣，可以創(chuàng)建視覺(jué)層次結(jié)構(gòu)，提供多種陰影層次的設(shè)計(jì)供用戶選擇。

在企業(yè)級(jí)產(chǎn)品設(shè)計(jì)中，我們采用了2-4-8-16-32px的可根據(jù)場(chǎng)景精細(xì)程度選擇合適數(shù)值的圓角

2.組件與規(guī)范

組件設(shè)計(jì)上，靈動(dòng)多樣極致，擺脫B類設(shè)計(jì)固有的枯燥、嚴(yán)肅，刻板印象提供更加靈動(dòng)的視覺(jué)語(yǔ)言，靈活的頁(yè)面框架，細(xì)膩的微動(dòng)效。并從淺色拓展到暗黑及手機(jī)端。

值得一提的是，我們的數(shù)據(jù)可視化設(shè)計(jì)，通過(guò)對(duì)B端產(chǎn)品的整理和總結(jié)，確定了五個(gè)設(shè)計(jì)原則：誠(chéng)實(shí)性、正確性、倒金字塔結(jié)構(gòu)邏輯、一致性&擴(kuò)展性、美觀度。形成了一套可參考的數(shù)據(jù)可視化專業(yè)指南，最終達(dá)到可快速靈活運(yùn)用于產(chǎn)品設(shè)計(jì)中。

② B-Design的設(shè)計(jì)應(yīng)用

我們的場(chǎng)景來(lái)自于阿里云不同業(yè)務(wù)及這些業(yè)務(wù)中提煉出的共性和特點(diǎn)。從核心設(shè)計(jì)語(yǔ)言建立基礎(chǔ)通用模版設(shè)計(jì)的同時(shí)，也輸出面向各行各業(yè)帶有自己強(qiáng)烈業(yè)務(wù)屬性的設(shè)計(jì)。

目前，我們共賦能了3大領(lǐng)域，6+行業(yè)，10+產(chǎn)品。

行業(yè)SaaS

面向垂直行業(yè)，如零售、工業(yè)、金融等

通用SaaS

面向企業(yè)辦公、ERP、CRM等企業(yè)通用領(lǐng)域

云化工具

面向開(kāi)發(fā)運(yùn)維等工具類場(chǎng)景

B-Design的不同行業(yè)/場(chǎng)景/產(chǎn)品設(shè)計(jì)實(shí)踐為企業(yè)建立開(kāi)箱即用的體驗(yàn)設(shè)計(jì)方案。從文章開(kāi)篇前言中“從大規(guī)模生產(chǎn)模式變成大規(guī)模個(gè)性化”，我們可以看到B-Design即提供企業(yè)服務(wù)通用設(shè)計(jì)，也提供行業(yè)通用設(shè)計(jì)，無(wú)設(shè)計(jì)能力的中小企業(yè)或獨(dú)立開(kāi)發(fā)者，可以使用B-Design快速地搭建自己網(wǎng)站。另一方面，允許用戶定制化的設(shè)計(jì)，即云計(jì)算生態(tài)下的各個(gè)行業(yè)開(kāi)發(fā)者，設(shè)計(jì)師，都可以參與B-Design的共創(chuàng)，利用B-Design的風(fēng)格建立屬于自己的設(shè)計(jì)模板，設(shè)計(jì)規(guī)范甚至是設(shè)計(jì)系統(tǒng)。

讓B-Design更具活力、更靈活、更具吸引力和更有意義。

③ 做好的設(shè)計(jì)

在《The Technium》這本書中提到：

傳言巴勃羅·畢加索(Pablo Picasso)曾這樣說(shuō)過(guò):“計(jì)算機(jī)的問(wèn)題在于它只給你結(jié)果?！?/p>

這些數(shù)據(jù)驅(qū)動(dòng)的龐大關(guān)聯(lián)系統(tǒng)會(huì)給出很多結(jié)果——當(dāng)然它們都是好的——但這也是它們唯一能給我們的東西。

“給我們好答案”正是超級(jí)電腦所做的事情。在云計(jì)算的未來(lái)世界，完美的答案將成為一種商品。

雖然上句話針對(duì)計(jì)算機(jī)及人工智能快速發(fā)展下越來(lái)越多的設(shè)計(jì)被AI進(jìn)行快速設(shè)計(jì)與生成，計(jì)算機(jī)需要“給我們好的答案”。但反觀越來(lái)越多的設(shè)計(jì)語(yǔ)言與設(shè)計(jì)系統(tǒng)產(chǎn)生，或急于求成，或質(zhì)量不佳，B-Design還是希望能借由技術(shù)與設(shè)計(jì)的手創(chuàng)造舒適的體驗(yàn)，美觀的視覺(jué)，為產(chǎn)品增值。好的設(shè)計(jì)會(huì)越來(lái)越成為我們的核心競(jìng)爭(zhēng)力。我們不僅僅要“好的答案”，更需要“好的設(shè)計(jì)”，以成就“好的商業(yè)”。

原文來(lái)自微信公眾號(hào)：AlibabaDesign