▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，助力全球 1 億設(shè)計師成長

轉(zhuǎn)自：阿里云設(shè)計中心

編輯：章欣怡

共 2353 字 29 圖  預(yù)計閱讀 6 分鐘

“數(shù)學(xué)科學(xué)所展現(xiàn)出的秩序、對稱和限制，正是美的最佳范式?！?/span>—— 亞里士多德

Part 1

設(shè)計規(guī)則

我們將秩序拆解，使用三個柵格維度來定義——空間柵格、基礎(chǔ)柵格和混合柵格。

空間柵格 - 三維空間秩序

在阿里云設(shè)計的計算世界中，最核心的是秩序在空間中的體現(xiàn)，也就是空間柵格（Space Grid - The grid in three-dimensional）。

空間柵格用來約束設(shè)計在三維空間中的 一致性 和 統(tǒng)一性。它被運用在 云產(chǎn)品形象設(shè)計、營銷活動設(shè)計、互動網(wǎng)頁設(shè)計 等多種設(shè)計場景中。

在云產(chǎn)品形象設(shè)計中，為了保證所有產(chǎn)品形象透視的一致，以及后續(xù)對產(chǎn)品模型的靈活復(fù)用，我們規(guī)范了網(wǎng)格結(jié)構(gòu)、模型尺寸和模型布局。

可以看到如上案例，我們將網(wǎng)格由平面轉(zhuǎn)換到立體，將等角視圖作為攝像機的投射方式，以保證所有物體都具有秩序感且便于拼接組合。

那么，我們是如何詳細(xì)的去定義空間柵格規(guī)則的呢？以下是幾個核心點：

從平面到空間

空間柵格從平面柵格推導(dǎo)而來，它經(jīng)歷了從平面到立體的轉(zhuǎn)換。在平面的使用場景，它規(guī)定了文字、分欄、行距，而在空間中，它規(guī)范了格局的大小、模型復(fù)雜度、模型尺寸和布局。

分欄與排列

在空間刪格之中，分欄和行數(shù)決定了模型的構(gòu)成。你可以選擇等分空間，并在同一產(chǎn)品系列中保持這種構(gòu)成方式。

網(wǎng)格結(jié)構(gòu)

網(wǎng)格在不同場景的應(yīng)用中不盡相同，它取決于使用場景的大小、需要展示模型的體量、模型的尺寸以及場景中不同模型的應(yīng)用特征。在云產(chǎn)品形象的規(guī)范中，我們使用了一致的立方體結(jié)構(gòu)，保證模型規(guī)范化輸出。

可視范圍

模型的核心線都需要基于空間刪格，利用這些形狀為基線，模型更易于保持一致。

網(wǎng)格邊距

模型常有不規(guī)則型的出現(xiàn)，為適應(yīng)不同應(yīng)用，常會距離網(wǎng)格邊界留一些空間作為邊距。

基礎(chǔ)柵格 - 空間底層秩序

平面柵格是設(shè)計中構(gòu)建秩序的最基礎(chǔ)的方式，它的使用場景包含但不限于：頁面布局、組件構(gòu)成、標(biāo)識、插畫等。

不論是平面還是立體的空間，使用柵格不僅可以賦予其有節(jié)奏的秩序感，可以更高效且有序的完成視覺元素的結(jié)構(gòu)搭建。也可以合理的指導(dǎo)更大范圍上頁面整體設(shè)計的布局，亦或挖掘和拓展出具有節(jié)奏感視覺創(chuàng)意。

基礎(chǔ)序列

柵格序列的基礎(chǔ)為 2 的 X 平方（X 大于等于 2），即最小數(shù)字單位為 4。基礎(chǔ)序列為 2 的平方數(shù)。擴充序列基于基礎(chǔ)序列，在 8-48 之間，每一級通過額外增加 4 來進(jìn)行有序擴充，從而更好的應(yīng)對電腦端及移動端的更多細(xì)分場景。更大的平方序列則用于較大顯示尺寸場景，如智能大屏或者大面積的墻面噴繪等。

基礎(chǔ)單元

最小平面的幾何單元為一個邊長為 4 像素的正方單元?；A(chǔ)單元的不同組合方式形成了頁面中不同元素之間的排布邏輯 - 行、列、卡片、表格、填充區(qū)域、白邊區(qū)域等。

拓展樣式

在創(chuàng)意類的視覺場景中，基礎(chǔ)柵格同樣由正方形單元構(gòu)成，也可由其他基礎(chǔ)圖形構(gòu)成單元，如三角形或圓形。以下為方形柵格用于插畫場景的案例：

混合柵格 - 創(chuàng)意空間秩序

除了在頁面以及云產(chǎn)品設(shè)計中規(guī)范化使用的基礎(chǔ)柵格和空間柵格，我們還嘗試了一種創(chuàng)意層面的表現(xiàn)形式，也就是營銷與網(wǎng)站配圖設(shè)計中 “混合柵格” 的使用。

為什么叫 “混合” 柵格？因為除了三維空間中基礎(chǔ)的空間秩序切割，還融入了平面設(shè)計里的 “秩序線”。混合柵格不僅幫助我們的配圖設(shè)計更具有阿里云的特色，也幫助我們對幾十上百款同類型的 banner 進(jìn)行更好的拓展。

空間網(wǎng)格結(jié)構(gòu)

在創(chuàng)意設(shè)計的空間結(jié)構(gòu)中，為了保證所有圖片透視的一致性，我們較多的選擇了與產(chǎn)品設(shè)計一致的等角視圖（也存在俯視圖、側(cè)視圖等具有秩序感的方式）。在角度確定的基礎(chǔ)上，我們將空間等分，并將核心圖形以及裝飾元素可以出現(xiàn)的范圍固定下來。

圖形可視范圍

為了保證圖片在頁面上運用時，不影響頁面文字的透出。我們通常把 keyline 固定在圖片右側(cè)，并保證所有圖片中的核心模型都放置在 keyline 的范圍中，長寬高在空間中盡可能保持一致。

融入空間的秩序線

除了三維空間的結(jié)構(gòu)線，我們將二維空間的幾何線也融入到設(shè)計之中，以體現(xiàn)阿里云設(shè)計的秩序感。它可作為底板的裝飾線條出現(xiàn)，也可作為劃分空間的裝飾元素出現(xiàn)。我們通常使用 45°、60° 和 90° 作為秩序線的常用角度，相同圖片內(nèi)的元素均按照同一個角度去擺放。

Part 2

業(yè)務(wù)應(yīng)用

秩序的設(shè)計觀點已經(jīng)非常廣泛的應(yīng)用在了各類業(yè)務(wù)中，以下是幾個經(jīng)典案例。

阿里云首頁

阿里云前臺設(shè)計對秩序的應(yīng)用包含了頁面樓層、模塊配圖、圖標(biāo)等，整體保證了官網(wǎng)的設(shè)計質(zhì)量。

阿里云海外品牌

阿里云海外傳播設(shè)計，從版式和風(fēng)格的層面體現(xiàn) “秩序” 的關(guān)鍵詞。

阿里云營銷設(shè)計

營銷設(shè)計同樣是秩序關(guān)鍵詞的最佳實踐，從大型促銷到日常營銷，版頭都應(yīng)用了創(chuàng)意的空間秩序。

以上，便是阿里云進(jìn)化設(shè)計語言，設(shè)計觀點中 “秩序” 這一關(guān)鍵詞的詳細(xì)解析。

Part 3

持續(xù)進(jìn)行中

進(jìn)化設(shè)計語言誕生于技術(shù)的迭代和需求的演化，我們也會不斷的完善與補充它，讓設(shè)計語言和我們提出的進(jìn)化設(shè)計論一樣，在快速更迭的時代中，強化意識、消解沖擊。