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

設計背景

1. WeMake 平臺介紹

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

2. 設計回溯

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

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

3. 設計思路

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

設計分析

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

1. 發(fā)現(xiàn)設計問題

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

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

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

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

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

3. 用戶分析

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

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

4. 設計關(guān)鍵詞

頭腦風暴

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

關(guān)鍵詞提煉

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

情緒版

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

主視覺風格設定

1. 主視覺風格設定

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

視覺轉(zhuǎn)換

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

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

視覺表現(xiàn)形式

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

視覺元素

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

2. 視覺探索

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

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

3. 主視覺方案

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

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

視覺對比

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

視覺延伸與規(guī)范

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

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

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

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

2. 設計延展策略

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

3. 視覺規(guī)范化

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

結(jié)語

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

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