本篇主要介紹騰訊工業雲平台 WeMake 首頁主視覺及二級頁視覺部分的設計內容,重點講解了工業平台從 1.0 到 2.0 的視覺迭代過程和使用的方法。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

設計背景

1. WeMake 平台介紹

騰訊雲工業雲 wemake 平台是騰訊產業互聯網的重要組成部分,致力于為企業提供端到端的雲服務,覆蓋設計、研發、生產、銷售等環節;提供工業 APP 應用市。  ┬行幸稻赫ΦAPP 市場。在工業互聯網場景,騰訊雲提供了工業能力底座,構建出面向數據智能、物聯網、工業 AI、5G、協同辦公等中台能力。

2. 設計回溯

此次設計升級主要目的為基于 1.0 的視覺基礎上探索工業雲的設計方向和提升平台的整體視覺效果以及規範標準化落地。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

根據煙台工業雲 1.0 的頁面進行視覺探索,煙台工業雲設計于 2019 年初,也是對于產業互聯網中的工業互聯網平台進行的初步探索,而此次升級則是更深入的探索工業互聯網平台的視覺方向可能與視覺提升的探究。工業項目的時間是耗時很長的,打通數據與功能需要經歷時間的驗證,但是本次視覺設計的使命是探究更前沿的設計趨勢,可以保持平台在長久穩定的狀態。

3. 設計思路

通過 1.0 平台的經驗,進行 2.0 視覺風格的遞進升級。1.0 的探索階段視覺上以素材為主來深化工業平台的整體形象,在 3D 塑造方面也提供了一個方向性探索,那麼 2.0 視覺風格也是以 3D 視覺的深化來進行了。除了在視覺層次上的提升外,也希望在視覺系統化和規範化上有新的進展,以便平台搭建完成後續的運營工作的順利開展。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

設計分析

平台設計中,首先的設計重點是平台首頁的視覺升級;首頁的視覺表現就像是兩個人相識,和見面第一印象一樣重要。那麼關鍵因素也是要給對方留下深刻印象和特點。

1. 發現設計問題

發現問題是早期設計分析中很重要的一個環節,為了更系統、全面的發現問題,在分析過程中采用了對應產品 5 個層次的方法。如下圖︰

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

而集中在視覺表現層的主要問題如下︰

  • 視覺感受偏灰,智能化體現不足
  • 版面過于死板,首頁視覺精細度不夠
  • 顏色搭配過于單調
  • 工業平台特色不夠突出
2. 確立首頁優化目標

通過發現的界面問題的分析,確立首頁優化的目標。從現有的問題中,我們要形成新的視覺感受,那麼就要確定解決目前問題的設計目標。為了塑造 wemake 的工業制造的平台,設立的設計目標分別是深入品牌、強化智能、突出行業。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

3. 用戶分析

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

  • 安全︰安全是工業雲平台的基。  厥蒞踩 院推教 踩 允鞘滓 勘,也是用戶最看重的基本要求。
  • 信賴︰平台需要傳遞給用戶值得信賴的感受;其可以拆解為品牌影響力和產品影響力。
  • 價值︰平台需要傳遞給客戶最大的價值是功能和體驗上的高效性。
  • 沉穩︰平台需要在風格上傳遞沉穩的感受。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

4. 設計關鍵詞

頭腦風暴

通過用戶分析及結合產品功能特點,梳理設計關鍵詞︰以“智能”“制造”發散擴展,展現騰訊雲技術能力“數字化”“AI”等 ;展現行業特性“安全”“穩定” 等。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

關鍵詞提煉

通過一系列的關鍵詞和行業特性,我們從工業數字化生產的核心“智造” 作為第一個關鍵詞 ;從決策鏈路和用戶分析我們總結了第二個關鍵詞“安全”;基于平台工業生態搭建的願景和定位,我們總結了第三個關鍵詞“鏈接”。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

情緒版

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

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

主視覺風格設定

1. 主視覺風格設定

主視覺設定思路︰工業元素為基。 黽郵只  乇澩。banner 主視覺以主體型+背景的形式統一化表達;搭建平台統一化視覺基。壞鶻誆煌 魍夾衛幢澩鋝煌 兌襯諶。

視覺轉換

我們通過解構的手法來拆解視覺元素和進行視覺轉換;視覺轉換是很重要的一個步驟,通過設計分析的結論要通過視覺轉換來完成視覺的表達。也就是將關鍵詞轉換為材質質感顏色等視覺呈現上的關鍵詞。例如“工業”的關鍵詞轉化為材質,可以考慮到大部分工業的場景中視覺最多的會是金屬和水泥,也就是這兩種材質會在視覺上關聯關鍵詞。運用這種方法進行逐步推導轉化。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

通過視覺轉換,先確定顏色和比例,為整體視覺奠定基礎基調。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

視覺表現形式

在確定材質顏色後,還需要確定視覺表現形式;需要從眾多的視覺表現形式中尋找分析其特點並結合產品特點找尋合適的表現形式。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

視覺元素

質感、顏色、形式確定後,那麼最主要的“形”的選取也是很重要的;形也可以總結為視覺元素,是視覺的實際組成部分,不同的視覺元素經過設計師大腦對于美學的排列組合形成了最終的視覺呈現形式。舉例“機械臂” 既能展示“機械”的元素關鍵詞,也可以表現工業機械的材質,也可以表現現代工業的智能化。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

2. 視覺探索

在進行視覺執行的過程中,必然不是一蹴而就的,而也是演進的調整的。視覺元素的呈現比例和主次層級也需要不斷探索對比而演進的。工業的視覺探索過程就是在不斷的調校中進行的。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

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

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

3. 主視覺方案

最終的主視覺方案貫穿“less is more”的理念,通過減少草案中視覺內容,集中展現各視覺元素的方式,使最終方案更突出。並且在進行視覺探索後,進行整體的視覺感受的調整︰弱化調節強烈的工業場景感受,強化智能化數字平台感受,添加了虛擬化數字界面的設計。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

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

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

視覺對比

以下是 1.0 和 2.0 的主視覺對比。總結一下,比較重要的改進點是工業顏色的調整,使其更符合工業行業的特性,並在主視覺上深入細節設計。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

視覺延伸與規範

作為平台的設計,很重要的一點便是考慮平台的視覺統一化設計,也是在主視覺完成後需要完善的重點內容。

1. 視覺統一化

統一化幾乎是所有平台最基礎的目標也是最難以執行好的設計目標,我們經常會頭疼于如何將視覺統一化。那麼最簡單的方法便是在最開始設計的時候將統一化考慮在內。視覺統一化的一大難點是差異化與統一元素的協調性;既要完成視覺的統一表達,又要有差異化表達。那麼在進行工業平台二級頁面主視覺統一化的時候,我們的設計思路是保留一致的基礎背景和主體元素,然後加入不同頁面差異點的視覺元素,最終形成可以統一化的視覺表達。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

在進行視覺執行的時候,需要光感、空間感。材質質感統一;突出特性元素。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

2. 設計延展策略

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

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

3. 視覺規範化

在視覺建立的過程中也要考慮到視覺規範化,也就是統一的視覺表達與規範的視覺語言呈現,在後續的設計協作以及設計復用時,提供有效的參考。

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

結語

平台類視覺迭代的過程中,除了要考慮執行層的內容還需要規劃平台整體視覺風格甚至是設計語言。設計過程中不僅僅要專注于視覺層面的執行和推導,也要考慮到最終視覺感受的整體感;最終也是需要精細化調整不同關鍵詞的比例來達到最終平衡的視覺效果。

儒墨堂推薦關注“騰訊設計”官方公眾號,第一時間獲取騰訊的設計方法論

大廠是如何做視覺設計的?來看騰訊實戰案例的完整流程!

點贊 44
收藏 147
繼續閱讀相關资讯

發表評論 已發布 5

還可以輸入 800 個字
 
 
載入中....
5 收藏