2022-1-16 濤濤
大家好，新年了，先祝大家新年快樂。這次分享一下自己學(xué)習(xí)道路上的小總結(jié)，僅此而已，以做紀(jì)念。希望能和大家多多交流。感謝。瑞思拜~
本次給大家?guī)硪黄P(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ì)被問到，“你的價(jià)值又在哪里呢？”這種不得不回答的問題。雖然自己感覺還是做的不成熟，但是還是想分享給大家，自己也做一個(gè)沉淀，繼續(xù)努力。我想在你看完這篇文章并且可以做出嘗試以后，你和你的老板一定會(huì)喜歡。
一.首次升級(jí)改版
我們現(xiàn)在看到的無論是阿里云，華為云，騰訊云，金山云等等這些優(yōu)秀的云產(chǎn)品設(shè)計(jì)當(dāng)中，都在大量的使用3D建模渲染與2.5D風(fēng)格互相搭配的運(yùn)用。京東云官網(wǎng)也分別在4月和10月份各做了一次大的改版升級(jí)，很有幸都有參與到當(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)格組件庫(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)出過程中，我們嚴(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)性，讓用戶無論是在視覺感官體驗(yàn)上還是使用體驗(yàn)上都十分舒適。所以我們最后得到的四個(gè)關(guān)鍵詞即為：探索、開放不封閉、共生攻堅(jiān)和用戶信賴。
3.建立組件庫(kù)的四個(gè)維度
為了利用三維與二位的沖突感凸顯視覺表現(xiàn)的主體信息，強(qiáng)化是覺得一致性。表達(dá)出通透和呼吸的開放組合。因而我們映射到了色彩，質(zhì)感，字體，構(gòu)成四個(gè)維度上。
/1.色彩：
在色彩上以京東紅為底色，黑色代表著科技專業(yè)以及智慧未來。在規(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ì)師建立白模且通過設(shè)計(jì)評(píng)審后直接導(dǎo)入進(jìn)行渲染。
5.動(dòng)畫的渲染及精靈圖的制作
為了滿足頁(yè)面中部分鼠標(biāo)移入移出的交互效果，我們渲染了動(dòng)效以及精靈圖的制作。關(guān)于精靈圖的制作，在之前的文章當(dāng)中我們有詳細(xì)的說明和制作方法，這里就不再贅述。
以上就是我們的第一次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ī)范說明、模型、品牌顏色、質(zhì)感、構(gòu)成方式等等。新增了對(duì)通用底座的規(guī)范。更加規(guī)范了使用。
2.HDR環(huán)境貼圖
由于使用了OC渲染器，對(duì)環(huán)境的設(shè)定以及HDR貼圖的使用變的十分重要，嘗試了很多效果。
3.燈光參數(shù)
至于打光，沒有做過度的布置。在環(huán)境亮度滿足的情況下，只用了2盞補(bǔ)光，并且做了參數(shù)的說明。
4.組件配色占比
規(guī)定了每種顏色的占比參考。
5.組件渲染實(shí)例
下面看一些我們渲染出來的實(shí)例。以及我們優(yōu)秀的小伙伴建模并渲染的Banner。
那么以上就是本文的全部?jī)?nèi)容，希望能對(duì)大家的日常工作有一些幫助。很多地方還不成熟，會(huì)繼續(xù)沉淀把更好的東西分享給大家。瑞思拜。
文章來源：站酷 作者：秦能補(bǔ)拙
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn