京東云產(chǎn)品形象，是將京東云的產(chǎn)品和服務(wù)進(jìn)行視覺化、規(guī)范化、系統(tǒng)化的設(shè)計，從而實現(xiàn)更直觀的視覺傳達(dá)?；诓煌a(chǎn)品和服務(wù)的特征與特點，結(jié)合京東云品牌風(fēng)格與及企業(yè)理念，全新定義了統(tǒng)一的設(shè)計原則、視覺傳達(dá)（顏色、質(zhì)感）、構(gòu)成規(guī)則（柵格、尺寸），在抽象與現(xiàn)實中找到平衡點，使傳達(dá)更簡單、更直接。

一 設(shè)計原則

1、設(shè)計思考

云產(chǎn)品的形象設(shè)計中有兩個很大的難題，一是如何將不是日常生活常見的云主機(jī)、服務(wù)器等形象符合大眾認(rèn)知的表現(xiàn)出來？二是如何更好地區(qū)分某些看起來類似的產(chǎn)品和服務(wù)？所以對于表現(xiàn)形式的選擇至關(guān)重要。

首先是要體現(xiàn)出創(chuàng)新的科技感和未來感；

還要在認(rèn)知中基于現(xiàn)實，結(jié)合想象，在抽象與現(xiàn)實中找到平衡點；

建立統(tǒng)一的設(shè)計規(guī)則，保證風(fēng)格的一致性；

一種風(fēng)格可能無法滿足京東云業(yè)務(wù)體系中所有場景下的設(shè)計需求，所以采用3D、2.5D、線性icon這3種設(shè)計風(fēng)格。

2、設(shè)計原則

通過基于實際應(yīng)用場景的設(shè)計思考，確定了這4個設(shè)計原則，并以簡單的幾何形體作為設(shè)計原子，盡可能的用簡潔的視覺符號表達(dá)產(chǎn)品的功能含義。

?

科技

京東云產(chǎn)品形象設(shè)計符合京東云的品牌定位，整體風(fēng)格以科技感和創(chuàng)新性為基礎(chǔ)。

虛實結(jié)合

所有產(chǎn)品形象包括 3D、2.5D 和線性 icon 的設(shè)計，均基于現(xiàn)實中的幾何形態(tài)，通過設(shè)計表達(dá)其抽象的功能語義，使所有的產(chǎn)品形象呈現(xiàn)虛實結(jié)合的科技感。

秩序

以創(chuàng)意幾何形體作為設(shè)計原子，嚴(yán)格按照統(tǒng)一的秩序和規(guī)則創(chuàng)造美的產(chǎn)品形態(tài)，并盡可能用簡潔的視覺符號表達(dá)產(chǎn)品最核心的功能含義。

多場景

建立統(tǒng)一的設(shè)計規(guī)范系統(tǒng)，適應(yīng)京東云業(yè)務(wù)體系下的多種應(yīng)用場景。

二 視覺傳達(dá)

1、顏色應(yīng)用

京東云產(chǎn)品形象的視覺表達(dá)與品牌色的運用息息相關(guān)，品牌色作為主色或者輔助色，貫穿于3D、2.5D、2D產(chǎn)品設(shè)計，及UI設(shè)計中。

輔助色主要是中性色系，在不同應(yīng)用場景的色彩設(shè)計中，依照各自的設(shè)計規(guī)范，與品牌色以不同比例相結(jié)合，保證既符合各種場景的設(shè)計需求又有相同的品牌基因。

2、質(zhì)感表達(dá)

質(zhì)感的表達(dá)在京東云3D、2.5D、2D產(chǎn)品設(shè)計，及場景化設(shè)計中應(yīng)該是風(fēng)格一致的。京東云產(chǎn)品應(yīng)有的質(zhì)感與產(chǎn)品設(shè)計理念是一致的，將虛擬產(chǎn)品和服務(wù)實體化，因此它既有虛擬產(chǎn)品“流動”“通透”的特點，也有實體科技產(chǎn)品“穩(wěn)定”“堅固”的特點，二者也互相連接、互相影響。

設(shè)計中通常使用：不透明·金屬、不透明·磨砂、透明玻璃、發(fā)光材質(zhì)。

3、光影表達(dá)

光影與材質(zhì)相結(jié)合，在京東云3D和2.5D設(shè)計中表達(dá)相同風(fēng)格的視覺效果。我們希望呈現(xiàn)的光影效果是實體光影與虛擬光影相結(jié)合，以表達(dá)產(chǎn)品本身的形態(tài)特點為主，因此不拘泥于真實產(chǎn)品的布光和投影。不使用過于明顯的布光方向，避免過于實體化。多用懸浮投影打造虛實結(jié)合的氛圍。

三 構(gòu)成與規(guī)范

1、柵格規(guī)范

京東云產(chǎn)品形象設(shè)計遵循一致的柵格規(guī)范，以保證不同類別icon在設(shè)計時視覺上的風(fēng)格一致性。2D和線性icon設(shè)計時遵循平面柵格系統(tǒng)，3D和2.5D icon設(shè)計時遵循等角空間柵格系統(tǒng)。

柵格系統(tǒng)的組成：空間網(wǎng)格、安全區(qū)域、主體物范圍線。

京東云2D和線性icon使用平面柵格系統(tǒng)：該系統(tǒng)以16x16的網(wǎng)格為基礎(chǔ)，在平面內(nèi)形成網(wǎng)格系統(tǒng)。安全區(qū)域為一個單元格寬度圍成的區(qū)域。

京東云3D和2.5D icon使用等角空間柵格系統(tǒng)：該系統(tǒng)是以8x8的平面網(wǎng)格按照等角透視映射到空間內(nèi)形成的空間網(wǎng)格系統(tǒng)。安全區(qū)域為一個單元格寬度圍成的區(qū)域。

2、尺寸體系

京東云產(chǎn)品系列包括線性icon、2D icon、2.5D icon、3D icon，他們共同構(gòu)成京東云產(chǎn)品形象，其中線性icon、3D icon 和 2.5D icon 是云產(chǎn)品形象的構(gòu)成部分。

3D icon 主要應(yīng)用于官網(wǎng)首頁、營銷活動；2.5D icon 主要應(yīng)用于官網(wǎng)產(chǎn)品詳情頁Banner、店鋪詳情頁、產(chǎn)品優(yōu)勢表達(dá)、產(chǎn)品宣傳長圖；2D icon 一般用于官網(wǎng)前臺的描述性配圖；線性 icon 主要應(yīng)用于官網(wǎng)產(chǎn)品架構(gòu)圖、中后臺場景。

四 場景與實踐

1、構(gòu)成方式

原子設(shè)計（Atomic Design）理論最初用于界面設(shè)計，把界面按照一定的組織規(guī)律，盡可能拆解成有相互關(guān)系和層次的元素、模塊、組織，形成一套有一定層次和規(guī)律的設(shè)計系統(tǒng)。

京東云的業(yè)務(wù)所涉及到的視覺設(shè)計體系，也可以通過原子化設(shè)計理論建立。以京東云的風(fēng)格定義和設(shè)計基調(diào)，將設(shè)計元素不斷拆解，形成系統(tǒng)的、有規(guī)律的設(shè)計體系。3D和2.5D的banner均按照這個理論進(jìn)行設(shè)計。

2、京東云產(chǎn)品形象體系

京東云產(chǎn)品形象的主要構(gòu)成部分是線性icon、3D icon 和 2.5D icon 。3D和2.5D icon 是場景化banner的主要構(gòu)成組件。線性icon 主要用于京東云控制臺和京東云產(chǎn)品架構(gòu)圖。2D icon 一般用于官網(wǎng)前臺的描述性配圖。

京東云產(chǎn)品形象體系

京東云產(chǎn)品形象在業(yè)務(wù)中的應(yīng)用

五 總結(jié)

京東云產(chǎn)品形象體系包含3D、2.5D和線性icon，其建立于京東云的業(yè)務(wù)體系在場景中的應(yīng)用實踐中，是視覺化、規(guī)范化、系統(tǒng)化的設(shè)計，具有高度統(tǒng)一的設(shè)計原則，即科技、虛實結(jié)合、秩序、多場景。同時，在構(gòu)建產(chǎn)品語義及其應(yīng)用的過程中形成了統(tǒng)一的設(shè)計規(guī)范體系，從顏色質(zhì)感到構(gòu)成規(guī)則，既遵循嚴(yán)謹(jǐn)?shù)囊?guī)律，又具備設(shè)計的靈活性，使得京東云產(chǎn)品形象設(shè)計體系具備獨特的設(shè)計風(fēng)格和廣泛的應(yīng)用性。

?