大家好，新年了，先祝大家新年快樂(lè)。這次分享一下自己學(xué)習(xí)道路上的小總結(jié)，僅此而已，以做紀(jì)念。希望能和大家多多交流。感謝。瑞思拜~

本次給大家?guī)?lái)一篇關(guān)于如何從0到1的建立一個(gè)符合自己產(chǎn)品調(diào)性的3D組件庫(kù)，以及如何運(yùn)用到日常的工作中去，并可以大幅度提升設(shè)計(jì)師產(chǎn)出的效率，起到降本增效的作用，還可以賦能給你的業(yè)務(wù)（盡量體現(xiàn)在匯報(bào)PPT中），讓你在寫年中年度總結(jié)的時(shí)候不會(huì)被問(wèn)到，“你的價(jià)值又在哪里呢？”這種不得不回答的問(wèn)題。雖然自己感覺還是做的不成熟，但是還是想分享給大家，自己也做一個(gè)沉淀，繼續(xù)努力。我想在你看完這篇文章并且可以做出嘗試以后，你和你的老板一定會(huì)喜歡。

一.首次升級(jí)改版

我們現(xiàn)在看到的無(wú)論是阿里云，華為云，騰訊云，金山云等等這些優(yōu)秀的云產(chǎn)品設(shè)計(jì)當(dāng)中，都在大量的使用3D建模渲染與2.5D風(fēng)格互相搭配的運(yùn)用。京東云官網(wǎng)也分別在4月和10月份各做了一次大的改版升級(jí)，很有幸都有參與到當(dāng)中，那么就先說(shuō)4月份的品牌站改版，以下的效果，用C4D的默認(rèn)渲染器完全可以做到。

1.早期2.5D的積累

這次的改版是第一次從2.5D風(fēng)格轉(zhuǎn)向3D風(fēng)格的探索性嘗試。再此之前，設(shè)計(jì)師們有著3年多的2.5D風(fēng)格組件庫(kù)的大量積累。面向新用戶以全新的面貌向用戶傳遞科技引領(lǐng)，助力全球產(chǎn)業(yè)數(shù)字化升級(jí)，推動(dòng)實(shí)體經(jīng)濟(jì)高質(zhì)量發(fā)展的使命。

早期同學(xué)們積累的2.5D組件庫(kù)。

第一次升級(jí)后的組件庫(kù)。

第二次升級(jí)后的組件庫(kù)。

2.組件庫(kù)及規(guī)范的建立

在3D規(guī)范的產(chǎn)出過(guò)程中，我們嚴(yán)格圍繞著新的設(shè)計(jì)策略「通用」和「差異」兩個(gè)點(diǎn)相互融合，以提煉設(shè)計(jì)通用的元素，差異以規(guī)范為基礎(chǔ)。根據(jù)不同的場(chǎng)景化的突出特點(diǎn)，3D及留白節(jié)奏的合理使用，突出3D的干脆，嚴(yán)謹(jǐn)，從而約束好網(wǎng)站的整體調(diào)性，讓用戶無(wú)論是在視覺感官體驗(yàn)上還是使用體驗(yàn)上都十分舒適。所以我們最后得到的四個(gè)關(guān)鍵詞即為：探索、開放不封閉、共生攻堅(jiān)和用戶信賴。

3.建立組件庫(kù)的四個(gè)維度

為了利用三維與二位的沖突感凸顯視覺表現(xiàn)的主體信息，強(qiáng)化是覺得一致性。表達(dá)出通透和呼吸的開放組合。因而我們映射到了色彩，質(zhì)感，字體，構(gòu)成四個(gè)維度上。

/1.色彩：

在色彩上以京東紅為底色，黑色代表著科技專業(yè)以及智慧未來(lái)。在規(guī)范出主色調(diào)的同時(shí)為了保持京東科技品牌調(diào)性的一致性規(guī)定了品牌的業(yè)務(wù)色及輔助色，同時(shí)也規(guī)范了使用顏色建議的搭配以及占比關(guān)系，作為設(shè)計(jì)師使用時(shí)的有效參考。

/2.字體：

在字體上，規(guī)定京東朗正體為品牌名稱級(jí)產(chǎn)品名稱字體，在樓層中的字體為方正蘭亭黑系列，英文字體為思源黑體。字體行高的1.5倍行距，段落間的上下間距為字號(hào)的1倍。

/3.構(gòu)成：

在構(gòu)成上，用高度概括簡(jiǎn)單干脆的幾何形式展現(xiàn)，既可以突出文字的信息層級(jí)，又渲染了整體的氣氛進(jìn)而增強(qiáng)了頁(yè)面層級(jí)更加清晰的效果，強(qiáng)化了嚴(yán)謹(jǐn)?shù)膸缀涡误w，讓用戶感受到秩序化。

/4.質(zhì)感：

在質(zhì)感上，三種不同的材質(zhì)——金屬材質(zhì)、發(fā)光材質(zhì)以及磨砂玻璃材質(zhì)。

4.渲染及模型參數(shù)

在規(guī)范好了基礎(chǔ)的四個(gè)關(guān)鍵點(diǎn)后，進(jìn)行了渲染的嘗試，最后投票確定了一套大家都認(rèn)可的效果。并且產(chǎn)出了預(yù)設(shè)工程文件，方便設(shè)計(jì)師建立白模且通過(guò)設(shè)計(jì)評(píng)審后直接導(dǎo)入進(jìn)行渲染。

5.動(dòng)畫的渲染及精靈圖的制作

為了滿足頁(yè)面中部分鼠標(biāo)移入移出的交互效果，我們渲染了動(dòng)效以及精靈圖的制作。關(guān)于精靈圖的制作，在之前的文章當(dāng)中我們有詳細(xì)的說(shuō)明和制作方法，這里就不再贅述。

以上就是我們的第一次3D視覺升級(jí)，這一次升級(jí)做的還是比較系統(tǒng)且完善的。從構(gòu)建組件的價(jià)值開始到設(shè)計(jì)策略——競(jìng)品分析——實(shí)現(xiàn)策略——規(guī)范要求——模型——顏色——質(zhì)感——構(gòu)成——渲染——?jiǎng)赢嫛獞?yīng)用場(chǎng)景和最后的開發(fā)上線。

第二次升級(jí)改版

那么到了10月份，為了更加貼合業(yè)務(wù)和升級(jí)產(chǎn)品調(diào)性。進(jìn)行了第二次的改版，這一次的改版我使用了新的OC渲染器以及在原有的基礎(chǔ)上做了完善和調(diào)整。

1.通用底座的新增

幸運(yùn)的是這一次改版我就順手了很多，還是老生常談規(guī)定了規(guī)范說(shuō)明、模型、品牌顏色、質(zhì)感、構(gòu)成方式等等。新增了對(duì)通用底座的規(guī)范。更加規(guī)范了使用。

2.HDR環(huán)境貼圖

由于使用了OC渲染器，對(duì)環(huán)境的設(shè)定以及HDR貼圖的使用變的十分重要，嘗試了很多效果。

3.燈光參數(shù)

至于打光，沒(méi)有做過(guò)度的布置。在環(huán)境亮度滿足的情況下，只用了2盞補(bǔ)光，并且做了參數(shù)的說(shuō)明。

4.組件配色占比

規(guī)定了每種顏色的占比參考。

5.組件渲染實(shí)例

下面看一些我們渲染出來(lái)的實(shí)例。以及我們優(yōu)秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部?jī)?nèi)容，希望能對(duì)大家的日常工作有一些幫助。很多地方還不成熟，會(huì)繼續(xù)沉淀把更好的東西分享給大家。瑞思拜。

文章來(lái)源：站酷   作者：秦能補(bǔ)拙
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)