Cyberpunk 賽博龐克元素
渲染打造 Z 世代玩家的科幻世界

Acer Planet 9 App 電競社交平台

Year of Completion 2022

#Social Medoa #Gaming #UIUX Design

專案背景

對既有產品進行使用流程翻新，
以 Cyberpunk 賽博龐克科幻元素渲染的視覺風格為介面基調，
打造年輕玩家的世界

了解目標族群
找出適合的視覺語言

Planet 9 的設定為電競社交 App，目標族群為現在的 GenZ 世代，考量族群年齡與遊戲時的情境，我們針對玩家經常使用的社交平台、常用產品做視覺的分析，幫助我們感受App的視覺風格。

在思考的過程中，經由蒐集資料，了解各種關於 Cyberpunk 的定義與解釋，並再次收斂與整理，考慮玩家脈絡，最終以 Urbanism、Synthwave 和 Futurism 為關鍵視覺發展方向。並根據上述發展出 Moodboard，表現我們對於 Cyberpunk 的視覺感受。

探索 Cyberpunk 風格
呈現視覺語言細節

視覺語言確立

風格凝聚

簡化元素收斂視覺方向

在這個階段，我們將目前已有的概念和視覺元素進一步簡化，更明確地呈現 Cyberpunk 的視覺特徵。將整體產品的視覺關鍵字設定為：迷幻．晦暗．霓虹光。同時，透過收斂視覺方向，選擇最適合的顏色和字體，並且確定了整體風格。讓設計更加一致且易於辨識。

優化既有 UX 流程的完整度與細緻度

與開發團隊平行作業，在不影響功能時程的情況下，以更高層次的系統性視角將跨功能相關聯的 UX Patterns 整併，以維持操作模式的一致性，並協助補足互動流程中的邊角情境（corner cases）。

Acer

Planet 9 電競社交平台

設計亮點

除了強調風格
也兼顧資訊閱讀性

利用渲染色彩與雜訊背景，在重點頁面建立產品風格，並以主色彩引導使用者作出重點互動。

設計亮點

以色階做出區塊間隔

除了以字級區分外，也利用不同色階的深色背景做出區塊間隔辨識。

設計亮點

搭配適宜深色背景的字體
提供清晰易讀的介面

SF Pro Display 清晰易讀，適合在深色背景上顯示，考量產品的文字和圖標元素較多，因此利用不同的字級字重，讓繁複的文字有層級感，減少視覺干擾，利於使用者分辨閱讀重點。