本篇主要介紹騰訊工業(yè)云平臺 WeMake 首頁主視覺及二級頁視覺部分的設(shè)計(jì)內(nèi)容，重點(diǎn)講解了工業(yè)平臺從 1.0 到 2.0 的視覺迭代過程和使用的方法。

設(shè)計(jì)背景

1. WeMake 平臺介紹

騰訊云工業(yè)云 wemake 平臺是騰訊產(chǎn)業(yè)互聯(lián)網(wǎng)的重要組成部分，致力于為企業(yè)提供端到端的云服務(wù)，覆蓋設(shè)計(jì)、研發(fā)、生產(chǎn)、銷售等環(huán)節(jié)；
提供工業(yè) APP 應(yīng)用市場，提供有行業(yè)競爭力的 APP 市場。在工業(yè)互聯(lián)網(wǎng)場景，騰訊云提供了工業(yè)能力底座，構(gòu)建出面向數(shù)據(jù)智能、物聯(lián)網(wǎng)、工業(yè) AI、5G、協(xié)同辦公等中臺能力。

2. 設(shè)計(jì)回溯

此次設(shè)計(jì)升級主要目的為基于 1.0 的視覺基礎(chǔ)上探索工業(yè)云的設(shè)計(jì)方向和提升平臺的整體視覺效果以及規(guī)范標(biāo)準(zhǔn)化落地。

根據(jù)煙臺工業(yè)云 1.0 的頁面進(jìn)行視覺探索，煙臺工業(yè)云設(shè)計(jì)于 2019 年初，也是對于產(chǎn)業(yè)互聯(lián)網(wǎng)中的工業(yè)互聯(lián)網(wǎng)平臺進(jìn)行的初步探索，而此次升級則是更深入的探索工業(yè)互聯(lián)網(wǎng)平臺的視覺方向可能與視覺提升的探究。工業(yè)項(xiàng)目的時(shí)間是耗時(shí)很長的，打通數(shù)據(jù)與功能需要經(jīng)歷時(shí)間的驗(yàn)證，但是本次視覺設(shè)計(jì)的使命是探究更前沿的設(shè)計(jì)趨勢，可以保持平臺在長久穩(wěn)定的狀態(tài)。

3. 設(shè)計(jì)思路

通過 1.0 平臺的經(jīng)驗(yàn)，進(jìn)行 2.0 視覺風(fēng)格的遞進(jìn)升級。1.0 的探索階段視覺上以素材為主來深化工業(yè)平臺的整體形象，在 3D 塑造方面也提供了一個(gè)方向性探索，那么 2.0 視覺風(fēng)格也是以 3D 視覺的深化來進(jìn)行了。除了在視覺層次上的提升外，也希望在視覺系統(tǒng)化和規(guī)范化上有新的進(jìn)展，以便平臺搭建完成后續(xù)的運(yùn)營工作的順利開展。

設(shè)計(jì)分析

平臺設(shè)計(jì)中，首先的設(shè)計(jì)重點(diǎn)是平臺首頁的視覺升級；首頁的視覺表現(xiàn)就像是兩個(gè)人相識，和見面第一印象一樣重要。那么關(guān)鍵因素也是要給對方留下深刻印象和特點(diǎn)。

1. 發(fā)現(xiàn)設(shè)計(jì)問題

發(fā)現(xiàn)問題是早期設(shè)計(jì)分析中很重要的一個(gè)環(huán)節(jié)，為了更系統(tǒng)、全面的發(fā)現(xiàn)問題，在分析過程中采用了對應(yīng)產(chǎn)品 5 個(gè)層次的方法。如下圖：

而集中在視覺表現(xiàn)層的主要問題如下：

• 視覺感受偏灰，智能化體現(xiàn)不足
• 版面過于死板，首頁視覺精細(xì)度不夠
• 顏色搭配過于單調(diào)
• 工業(yè)平臺特色不夠突出

2. 確立首頁優(yōu)化目標(biāo)

通過發(fā)現(xiàn)的界面問題的分析，確立首頁優(yōu)化的目標(biāo)。從現(xiàn)有的問題中，我們要形成新的視覺感受，那么就要確定解決目前問題的設(shè)計(jì)目標(biāo)。為了塑造 wemake 的工業(yè)制造的平臺，設(shè)立的設(shè)計(jì)目標(biāo)分別是深入品牌、強(qiáng)化智能、突出行業(yè)。

3. 用戶分析

工業(yè)平臺的用戶集中在企業(yè)決策人瀏覽和運(yùn)營方使用人員使用。此類用戶特點(diǎn)是年齡基本在 30 以上，更偏好沉穩(wěn)的科技風(fēng)。設(shè)計(jì)中，我們需要給用戶傳遞的是“安全”、“信賴”、“價(jià)值”、“沉穩(wěn)” 。

• 安全：安全是工業(yè)云平臺的基礎(chǔ)，注重?cái)?shù)據(jù)安全性和平臺安全性是首要目標(biāo)，也是用戶最看重的基本要求。
• 信賴：平臺需要傳遞給用戶值得信賴的感受；其可以拆解為品牌影響力和產(chǎn)品影響力。
• 價(jià)值：平臺需要傳遞給客戶最大的價(jià)值是功能和體驗(yàn)上的高效性。
• 沉穩(wěn)：平臺需要在風(fēng)格上傳遞沉穩(wěn)的感受。

4. 設(shè)計(jì)關(guān)鍵詞

頭腦風(fēng)暴

通過用戶分析及結(jié)合產(chǎn)品功能特點(diǎn)，梳理設(shè)計(jì)關(guān)鍵詞：以“智能”“制造”發(fā)散擴(kuò)展，展現(xiàn)騰訊云技術(shù)能力“數(shù)字化”“AI”等 ；展現(xiàn)行業(yè)特性“安全”“穩(wěn)定” 等。

關(guān)鍵詞提煉

通過一系列的關(guān)鍵詞和行業(yè)特性，我們從工業(yè)數(shù)字化生產(chǎn)的核心“智造” 作為第一個(gè)關(guān)鍵詞 ；從決策鏈路和用戶分析我們總結(jié)了第二個(gè)關(guān)鍵詞“安全”；基于平臺工業(yè)生態(tài)搭建的愿景和定位，我們總結(jié)了第三個(gè)關(guān)鍵詞“鏈接”。

情緒版

情緒版的目的是輔助展現(xiàn)最終視覺表達(dá)效果，幫助設(shè)計(jì)師找到合適的視覺演進(jìn)方向。此次項(xiàng)目中情緒版關(guān)鍵詞“工業(yè)”找出工業(yè)生產(chǎn)和制造的實(shí)際場景，感受實(shí)際的工業(yè)行業(yè)氛圍，“數(shù)字化”側(cè)重智能視覺的展現(xiàn)，抓住情緒版中點(diǎn)線面、空間以及色彩的智慧智能化表達(dá)。

主視覺風(fēng)格設(shè)定

1. 主視覺風(fēng)格設(shè)定

主視覺設(shè)定思路：工業(yè)元素為基礎(chǔ)，增加數(shù)字化元素表達(dá)。banner 主視覺以主體型+背景的形式統(tǒng)一化表達(dá)；搭建平臺統(tǒng)一化視覺基礎(chǔ)；調(diào)節(jié)不同主圖形來表達(dá)不同二級頁內(nèi)容。

視覺轉(zhuǎn)換

我們通過解構(gòu)的手法來拆解視覺元素和進(jìn)行視覺轉(zhuǎn)換；視覺轉(zhuǎn)換是很重要的一個(gè)步驟，通過設(shè)計(jì)分析的結(jié)論要通過視覺轉(zhuǎn)換來完成視覺的表達(dá)。也就是將關(guān)鍵詞轉(zhuǎn)換為材質(zhì)質(zhì)感顏色等視覺呈現(xiàn)上的關(guān)鍵詞。例如“工業(yè)”的關(guān)鍵詞轉(zhuǎn)化為材質(zhì)，可以考慮到大部分工業(yè)的場景中視覺最多的會是金屬和水泥，也就是這兩種材質(zhì)會在視覺上關(guān)聯(lián)關(guān)鍵詞。運(yùn)用這種方法進(jìn)行逐步推導(dǎo)轉(zhuǎn)化。

通過視覺轉(zhuǎn)換，先確定顏色和比例，為整體視覺奠定基礎(chǔ)基調(diào)。

視覺表現(xiàn)形式

在確定材質(zhì)顏色后，還需要確定視覺表現(xiàn)形式；需要從眾多的視覺表現(xiàn)形式中尋找分析其特點(diǎn)并結(jié)合產(chǎn)品特點(diǎn)找尋合適的表現(xiàn)形式。

視覺元素

質(zhì)感、顏色、形式確定后，那么最主要的“形”的選取也是很重要的；形也可以總結(jié)為視覺元素，是視覺的實(shí)際組成部分，不同的視覺元素經(jīng)過設(shè)計(jì)師大腦對于美學(xué)的排列組合形成了最終的視覺呈現(xiàn)形式。舉例“機(jī)械臂” 既能展示“機(jī)械”的元素關(guān)鍵詞，也可以表現(xiàn)工業(yè)機(jī)械的材質(zhì)，也可以表現(xiàn)現(xiàn)代工業(yè)的智能化。

2. 視覺探索

在進(jìn)行視覺執(zhí)行的過程中，必然不是一蹴而就的，而也是演進(jìn)的調(diào)整的。視覺元素的呈現(xiàn)比例和主次層級也需要不斷探索對比而演進(jìn)的。工業(yè)的視覺探索過程就是在不斷的調(diào)校中進(jìn)行的。

我們最先介入設(shè)計(jì)的時(shí)候會以互聯(lián)網(wǎng)化的思維進(jìn)行，重點(diǎn)突出智能化主體，但就會缺少明顯的行業(yè)特性，不能完全滿足設(shè)計(jì)目標(biāo)；下一個(gè)階段便是融入工業(yè)場景，將更多的工業(yè)元素融入到背景中；再下一個(gè)階段是考慮平臺的屬性，需要更加宏觀的視角，而不僅僅是側(cè)重在細(xì)微場景中，所以采用更大的區(qū)域工業(yè)場景來展現(xiàn)平臺屬性，并嘗試平行透視來展現(xiàn)宏觀場景。最終在融合了品牌和多元素下形成了最終的精細(xì)化主視覺。

3. 主視覺方案

最終的主視覺方案貫穿“l(fā)ess is more”的理念，通過減少草案中視覺內(nèi)容，集中展現(xiàn)各視覺元素的方式，使最終方案更突出。并且在進(jìn)行視覺探索后，進(jìn)行整體的視覺感受的調(diào)整：弱化調(diào)節(jié)強(qiáng)烈的工業(yè)場景感受，強(qiáng)化智能化數(shù)字平臺感受，添加了虛擬化數(shù)字界面的設(shè)計(jì)。

主視覺設(shè)計(jì)元素和色彩搭配按照之前分析的顏色和元素進(jìn)行執(zhí)行。

視覺對比

以下是 1.0 和 2.0 的主視覺對比?？偨Y(jié)一下，比較重要的改進(jìn)點(diǎn)是工業(yè)顏色的調(diào)整，使其更符合工業(yè)行業(yè)的特性，并在主視覺上深入細(xì)節(jié)設(shè)計(jì)。

視覺延伸與規(guī)范

作為平臺的設(shè)計(jì)，很重要的一點(diǎn)便是考慮平臺的視覺統(tǒng)一化設(shè)計(jì)，也是在主視覺完成后需要完善的重點(diǎn)內(nèi)容。

1. 視覺統(tǒng)一化

統(tǒng)一化幾乎是所有平臺最基礎(chǔ)的目標(biāo)也是最難以執(zhí)行好的設(shè)計(jì)目標(biāo)，我們經(jīng)常會頭疼于如何將視覺統(tǒng)一化。那么最簡單的方法便是在最開始設(shè)計(jì)的時(shí)候?qū)⒔y(tǒng)一化考慮在內(nèi)。視覺統(tǒng)一化的一大難點(diǎn)是差異化與統(tǒng)一元素的協(xié)調(diào)性；既要完成視覺的統(tǒng)一表達(dá)，又要有差異化表達(dá)。那么在進(jìn)行工業(yè)平臺二級頁面主視覺統(tǒng)一化的時(shí)候，我們的設(shè)計(jì)思路是保留一致的基礎(chǔ)背景和主體元素，然后加入不同頁面差異點(diǎn)的視覺元素，最終形成可以統(tǒng)一化的視覺表達(dá)。

在進(jìn)行視覺執(zhí)行的時(shí)候，需要光感、空間感。材質(zhì)質(zhì)感統(tǒng)一；突出特性元素。

2. 設(shè)計(jì)延展策略

作為平臺，其視覺的是具有很強(qiáng)的豐富性的，如何形成統(tǒng)一的視覺體系，并提高視覺效果與執(zhí)行效率也是要考慮的重要難題。那么在思考這部分的時(shí)候，我們的策略是建立素材庫來滿足不同的多維需求。在 3D 模型可以復(fù)用的情況下，既可以滿足統(tǒng)一性需求，也可以提高執(zhí)行效率。但是素材也是需要長期積累而成的。

3. 視覺規(guī)范化

在視覺建立的過程中也要考慮到視覺規(guī)范化，也就是統(tǒng)一的視覺表達(dá)與規(guī)范的視覺語言呈現(xiàn)，在后續(xù)的設(shè)計(jì)協(xié)作以及設(shè)計(jì)復(fù)用時(shí)，提供有效的參考。

結(jié)語

平臺類視覺迭代的過程中，除了要考慮執(zhí)行層的內(nèi)容還需要規(guī)劃平臺整體視覺風(fēng)格甚至是設(shè)計(jì)語言。設(shè)計(jì)過程中不僅僅要專注于視覺層面的執(zhí)行和推導(dǎo)，也要考慮到最終視覺感受的整體感；最終也是需要精細(xì)化調(diào)整不同關(guān)鍵詞的比例來達(dá)到最終平衡的視覺效果。

優(yōu)設(shè)推薦關(guān)注“騰訊設(shè)計(jì)”官方公眾號，第一時(shí)間獲取騰訊的設(shè)計(jì)方法論