嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

B端設(shè)計(jì)師·如何從0到1建立3D規(guī)范及組件庫

2022-1-16 濤濤

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

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

一.首次升級改版

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

1.早期2.5D的積累

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

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

第一次升級后的組件庫。

第二次升級后的組件庫。

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

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

3.建立組件庫的四個維度

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

/1.色彩：

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

/2.字體：

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

/3.構(gòu)成：

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

/4.質(zhì)感：

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

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

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

5.動畫的渲染及精靈圖的制作

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

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

第二次升級改版

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