黄色国产一区,天堂网av免费,成人欧美一区二区三区男男,久久13p,玖玖视频二区,超碰碰人人,亚洲日韩欧美国产,亚洲成人无码视频

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

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

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

阿里巴巴設(shè)計(jì)官方認(rèn)證 MCN 機(jī)構(gòu)

SUXA 深圳體驗(yàn)設(shè)計(jì)協(xié)會(huì)華東分會(huì)

全球服務(wù)設(shè)計(jì)共創(chuàng)節(jié)城市站發(fā)起者

轉(zhuǎn)自：Design with CloudAI

編輯：劉麗

共 3954 字，預(yù)計(jì)閱讀 10 分鐘

近期我們將思考沉淀后的一些項(xiàng)目分享大家，以系列文章的形式。從支撐 to B/G 設(shè)計(jì)基調(diào)的 “設(shè)計(jì)語(yǔ)言構(gòu)建” ，到 to B/G 產(chǎn)品門(mén)戶網(wǎng)站煥新升級(jí)，再到云產(chǎn)品營(yíng)銷(xiāo)活動(dòng)案例解析落地，將最終思考總結(jié)輸出給大家。

感謝我們的設(shè)計(jì)師小伙伴們，一起 “康康” 吧～希望這次系列文章能夠幫助大家深刻認(rèn)知 各個(gè)維度的設(shè)計(jì)驅(qū)動(dòng)與設(shè)計(jì)價(jià)值體現(xiàn)。

京東科技集團(tuán)是京東集團(tuán)旗下專注于以技術(shù)為產(chǎn)業(yè)服務(wù)的業(yè)務(wù)子集團(tuán)，致力于為企業(yè)、金融機(jī)構(gòu)、政府等各類(lèi)客戶提供全價(jià)值鏈的技術(shù)性產(chǎn)品與解決方案。我們擁有著依托人工智能、大數(shù)據(jù)、云計(jì)算、物聯(lián)網(wǎng)等前沿科技能力，京東科技集團(tuán)打造出了面向不同行業(yè)的產(chǎn)品和解決方案，以此幫助全社會(huì)各行業(yè)、企業(yè)降低供應(yīng)鏈成本，提升運(yùn)營(yíng)效率。

品牌的建立

隨著京東科技品牌設(shè)計(jì)語(yǔ)言的確立，品牌站也隨之應(yīng)運(yùn)而生。

那么這次設(shè)計(jì)語(yǔ)言的全面升級(jí)也是基于之前為期 2 年多的 2.5D 設(shè)計(jì)風(fēng)格的探索和升級(jí)。全面升級(jí)為 3D 風(fēng)格，以全新的面貌向用戶傳遞我們的使命：科技引領(lǐng)，助力全球產(chǎn)業(yè)數(shù)字化升級(jí)，推動(dòng)實(shí)體經(jīng)濟(jì)高質(zhì)量發(fā)展。

我們的目標(biāo)

通過(guò)系統(tǒng)化的視覺(jué)符號(hào)，將京東科技的品牌文化，服務(wù)宗旨和業(yè)務(wù)成品等傳遞給大眾，強(qiáng)化品牌形象，并使品牌更加具有獨(dú)特的記憶。

3D 設(shè)計(jì)語(yǔ)言規(guī)范

在設(shè)計(jì)探索的過(guò)程中我們制定并產(chǎn)出了一份 3D 視覺(jué)語(yǔ)言使用規(guī)范。

該規(guī)范是完全符合京東科技品牌設(shè)計(jì)語(yǔ)言視覺(jué)升級(jí)的 3D 組件規(guī)范，以通透、呼吸、開(kāi)放組合的方式體現(xiàn) “傳遞·增強(qiáng)” 的品牌價(jià)值及核心理念，圍繞品牌設(shè)計(jì)語(yǔ)言 “探索、開(kāi)放不封閉、共生共建、用戶信賴” 傳遞品牌價(jià)值，強(qiáng)化用戶的認(rèn)知，了解品牌故事，為各項(xiàng)業(yè)務(wù)助力引流。

在下面的內(nèi)容中我會(huì)詳細(xì)的給大家介紹本次品牌升級(jí)中，每個(gè)模塊的具體內(nèi)容，以及如何運(yùn)用到品牌站的視覺(jué)設(shè)計(jì)表現(xiàn)當(dāng)中去。

設(shè)計(jì)策略

設(shè)計(jì)策略歸納為「通用」和「差異」兩個(gè)點(diǎn)相融合。

「通用」提煉設(shè)計(jì)通用元素。

「差異」以規(guī)范為基礎(chǔ)。

根據(jù)所屬業(yè)務(wù)不同的產(chǎn)品差異提煉出通用的設(shè)計(jì)元素，在風(fēng)格一致性下又體現(xiàn)差異化，突出不同業(yè)務(wù)的亮點(diǎn)。

同時(shí)通過(guò)對(duì)友商競(jìng)品分析中提煉的核心關(guān)鍵詞，設(shè)計(jì)風(fēng)格以及產(chǎn)品亮點(diǎn)的匯總對(duì)比分析，也校對(duì)我們的設(shè)計(jì)策略進(jìn)行了進(jìn)一步的梳理與整合。

在植根于場(chǎng)景化的關(guān)鍵節(jié)點(diǎn)，通過(guò)對(duì) 3D 及留白的合理使用，又突出 3D 的干脆，嚴(yán)謹(jǐn)，構(gòu)成了整個(gè)網(wǎng)站的風(fēng)格，通過(guò)留白的使用來(lái)突出內(nèi)容重點(diǎn)，讓用戶的視覺(jué)感有節(jié)奏且舒適。

所以我們得到的四個(gè)關(guān)鍵詞即為：探索、開(kāi)放不封閉、共生共建、用戶信賴。

四個(gè)維度

正是有著 “通透” 、 “呼吸” 、 “開(kāi)放組合” 、 “打破次元壁的層次感” 這些特性，利用三維與二位的沖突感來(lái)突出我們想表現(xiàn)的主體信息，目的是強(qiáng)化和傳達(dá)在視覺(jué)上的一致性。

因此我們映射了色、質(zhì)、字、構(gòu)四個(gè)維度，也是從這四個(gè)維度來(lái)介紹本次品牌站帶來(lái)的全新視覺(jué)升級(jí)。

Part 1 :色彩

在色彩上，顏色以京東紅為底色，晧告我們的來(lái)處，傳承京東品牌的赤誠(chéng)之心，而充滿智慧感的黑色，指明了我們前進(jìn)的目標(biāo)，讓科技成通往美好未來(lái)的引擎，紅色主體為京東的象征，黑色代表著科技、專業(yè)、智慧、未來(lái)。

在給出品牌色色彩規(guī)范建議的同時(shí)，為了保持京東科技品牌調(diào)性的一致，我們也規(guī)定了品牌主色、業(yè)務(wù)色、輔助色。與此同時(shí)也規(guī)范了使用顏色建議的的搭配以及占比關(guān)系，作為設(shè)計(jì)師使用時(shí)的有效參考。

1.以品牌形象宣傳為主的畫(huà)面中，建議以京東紅的調(diào)性為基調(diào)，其他圖片或文字等元素可以適當(dāng)?shù)倪x用黑白灰色調(diào)。

2.以業(yè)務(wù)宣傳為主的畫(huà)面中，畫(huà)面色彩基調(diào)可以調(diào)整為業(yè)務(wù)色基調(diào)，但是必須保證輔助圖形中出現(xiàn)紅色。

當(dāng)然，輔助色的篩選以及材質(zhì)的使用比例也進(jìn)行了嚴(yán)格的規(guī)定和把控。同時(shí)，為了應(yīng)對(duì)不同業(yè)務(wù)場(chǎng)景下需要不同的配色，做了標(biāo)準(zhǔn)的輔助顏色以及相應(yīng)的材質(zhì)球供設(shè)計(jì)師們選擇與使用，減少自己調(diào)整顏色及材質(zhì)效果的時(shí)間，提升效率和敏捷度。

Part 2:字體

在字體上，為了使品牌視覺(jué)形象更加統(tǒng)一，規(guī)定京東朗正體為品牌名稱級(jí)產(chǎn)品名稱字體，在樓層中建議的字體為方正蘭亭黑系列，英文字體為思源黑體。建議使用字體行高的 1.5 倍行距，段落間的上下間距為字號(hào)的1倍。

Part 3:構(gòu)成

在構(gòu)成上，依然緊緊的與我們的 “共生共建” 相契合，傳達(dá)融合、創(chuàng)新、合作的理念給我們的用戶，用高度概括簡(jiǎn)單干脆的集合形式展現(xiàn)。既可以突出文字的信息層級(jí)，又渲染了整體的氛圍，進(jìn)而增強(qiáng)了頁(yè)面層級(jí)更加清晰的效果。強(qiáng)化???????????????????????????????????????????????????嚴(yán)謹(jǐn)?shù)膸缀误w，讓用戶感受到秩序化，用戶提升信任感是我們最大的目標(biāo)。

運(yùn)用到 ICON 配圖構(gòu)成方式時(shí)，主要圖形必要使用，輔助圖形需根據(jù)業(yè)務(wù)主題對(duì)應(yīng)。展開(kāi)的解釋就是 “共生共建” 的主元素，高度概括，強(qiáng)化 “嚴(yán)謹(jǐn)“ 和 “秩序感” 。 “融合創(chuàng)新” 的輔助元素，映射業(yè)務(wù)場(chǎng)景，一目了然。

Part 4:質(zhì)感

在質(zhì)感上采用了 3 種不同的材質(zhì) —— 金屬材質(zhì)、發(fā)光材質(zhì)以及磨砂玻璃材質(zhì)。我們賦予每一種材質(zhì)不同的定義和能量。

在探索幾何的嚴(yán)謹(jǐn)和秩序化的同時(shí)，不得不提及金屬感。金屬感是以在環(huán)境光下呈現(xiàn)出詭秘的反射，這種反常規(guī)的強(qiáng)反光質(zhì)感所帶來(lái)的違和，在傳統(tǒng)科技感上增加強(qiáng)烈反差感。

類(lèi)玻璃柔光材質(zhì)磨砂玻璃的使用，正與我們探索和研究未知事物的從模糊到真實(shí)的理念屬性不謀而合，正是這種虛實(shí)結(jié)合的奇妙，這種輕盈通透的視覺(jué)感受帶給用戶，營(yíng)造出來(lái)的 “未來(lái)感” “科技感” 十足的場(chǎng)景體驗(yàn)，可以十分恰當(dāng)?shù)年U述科技智能的概念。

渲染及模型參數(shù)

規(guī)范好材質(zhì)球的預(yù)設(shè)后，我們嘗試了一些效果實(shí)現(xiàn)，并且放到了不同頁(yè)面上進(jìn)行了嘗試和對(duì)比。同時(shí)進(jìn)行團(tuán)隊(duì)內(nèi)的投票，進(jìn)而確定模板化的燈光級(jí)渲染參數(shù)。

當(dāng)然，我們對(duì)模型的建模要求一定是 “干脆” 和 “嚴(yán)謹(jǐn)” 的，不可以堆砌素材，不可隨意增加新材質(zhì)，不可隨意增加新的燈光，不可隨意更換渲染器。

我們非常在意設(shè)計(jì)的原創(chuàng)性，這是一個(gè)設(shè)計(jì)團(tuán)隊(duì)必不可少的。包括單體模型的圓角，倒角，動(dòng)畫(huà)曲線，分段數(shù)參數(shù)。以及標(biāo)準(zhǔn)攝像機(jī)視圖下的等角視圖都做了詳細(xì)的規(guī)定。從而產(chǎn)出了預(yù)設(shè)工程文件模板供設(shè)計(jì)師直接使用和產(chǎn)出。

3D 模型 ICON 動(dòng)畫(huà)

具體應(yīng)用到品牌站的使用場(chǎng)景上，我們對(duì)每一個(gè)樓層之間的關(guān)系做了多次的分析、對(duì)比、梳理和調(diào)整。在業(yè)務(wù)領(lǐng)域部分的入口處使用，并且做了鼠標(biāo)移入移出的動(dòng)效，底色的黑紅漸變色的變化以及模型的動(dòng)畫(huà)。

在設(shè)計(jì)并輸出移入移出動(dòng)效時(shí)，我們也遇到了技術(shù)上的問(wèn)題。單純渲染出來(lái)的動(dòng)效，文件太大，會(huì)導(dǎo)致網(wǎng)站首次加載的過(guò)慢，參考分析了友商的網(wǎng)站后發(fā)現(xiàn)，精靈圖（雪碧圖）這種方式可以非常好的幫助我們解決這個(gè)問(wèn)題。

常規(guī)的動(dòng)畫(huà)需求中，常見(jiàn)的流程是設(shè)計(jì)師用 Adobe After Effect 制作動(dòng)畫(huà)，我們這里用 C4D 制作的動(dòng)畫(huà)，然后導(dǎo)出為序列幀。

序列幀就是一張張圖片，快速連續(xù)播放即可成為動(dòng)畫(huà)。人眼識(shí)別只要不低于 24 幀 /s 的情況下，視覺(jué)上是不會(huì)感受到卡頓的。但是在 H5 或者 Web 中直接播放序列幀會(huì)對(duì)網(wǎng)絡(luò)性能不是很友好，會(huì)造成卡頓或者丟幀，所以，通常的情況下會(huì)拼成一張大圖，配合開(kāi)發(fā)循環(huán)播放。即「精靈圖」或者「雪碧圖」（Sprite image）

圖片來(lái)源于網(wǎng)絡(luò)

精靈圖既可以用 PS、Sketch、Figma 這些圖像處理工具進(jìn)行手動(dòng)的拼接，也可以使用專門(mén)的制作工具。在拼完之后，根據(jù)動(dòng)畫(huà)的時(shí)長(zhǎng)、幀率、尺寸等參數(shù)寫(xiě)入響應(yīng)的代碼，比較常見(jiàn)的是使用 CSS 代碼來(lái)使用。

這里我們使用了一個(gè) AE 的腳本叫做 CSS - Sprite - Exporter .jsx ，可以幫助我們快速得到我們需要的精靈圖。做好的精靈圖如圖，如果你做成豎條的也可以，我們這里配合文章效果故做成橫版。在使用效果上是完全沒(méi)有任何區(qū)別的。

在瀏覽器預(yù)覽中你也會(huì)看到右側(cè)的預(yù)覽代碼，可一并提交給開(kāi)發(fā)老師。

3D 模型首屏 Banner

為了整體網(wǎng)站的調(diào)性和視覺(jué)的統(tǒng)一性，在首屏的 Banner 部分也使用了 C4D 渲染大場(chǎng)景。作為輪播 Banner ，給用戶傳遞的品牌信息十分重要，讓用戶一眼就能了解到我們是一家科技公司，傳達(dá)哪些理念和使命，我們能為用戶做些什么，帶來(lái)哪些價(jià)值。