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

　　一 設(shè)計(jì)原則

　　1、設(shè)計(jì)思考

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

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

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

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

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

　　2、設(shè)計(jì)原則

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

　　科技

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

　　虛實(shí)結(jié)合

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

　　秩序

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

　　多場景

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

　　二 視覺傳達(dá)

　　1、顏色應(yīng)用

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

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

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

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

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

　　3、光影表達(dá)

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

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

　　1、柵格規(guī)范

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

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

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

　　京東云3D和2.5D icon使用等角空間柵格系統(tǒng)：該系統(tǒng)是以8x8的平面網(wǎng)格按照等角透視映射到空間內(nèi)形成的空間網(wǎng)格系統(tǒng)。安全區(qū)域?yàn)橐粋€單元格寬度圍成的區(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)圖、中后臺場景。

　　四 場景與實(shí)踐

　　1、構(gòu)成方式

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

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

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

  今天的分享就到這里了，想了解更多關(guān)于京東開店需要多少錢、京東商家入駐需要什么條件和費(fèi)用等內(nèi)容，敬請關(guān)注火蝠電商代運(yùn)營官網(wǎng)。