iT邦幫忙

2025 iThome 鐵人賽

DAY 9
0

Day 9
色彩與字體:確定配色方案、字體風格與整體氛圍
今天的工作是為遊戲網站建立完整的視覺識別系統,這是一個會影響玩家第一印象的關鍵步驟。無論我們的遊戲是翻牌記憶、迷宮挑戰還是跑酷闖關,色彩與字體的選擇都不僅僅是外觀的美化,更是引導玩家情緒、提升可讀性與互動體驗的核心。好的配色可以在第一秒抓住玩家的目光,營造出明確的氛圍,而適合的字體則能讓遊戲規則、分數和操作提示清晰易讀,減少學習成本並提升沉浸感。

  1. 配色方案規劃
    在選擇顏色時,需要先回想遊戲的核心情緒與主題定位,因為不同的色系會傳達完全不同的感受:
    主色:主色是整個網站的靈魂,會被大量運用在背景、主要按鈕與標題區塊。

如果遊戲走輕鬆可愛的方向,可以考慮馬卡龍色系,例如粉藍、薄荷綠、粉橘或奶油黃,這些顏色能帶來溫暖、柔和的感覺,降低挑戰遊戲帶來的壓力。若遊戲屬於動感競速或科幻風格,可以採用高對比霓虹色,例如電光藍、亮紫、黑灰背景的組合,營造出科技與速度感。若想營造溫馨療癒的氛圍,則可以使用大地色系,例如米白、奶茶棕、橄欖綠,給玩家一種溫柔且放鬆的環境。

輔助色:輔助色的角色是強調互動,例如「開始遊戲」、「重新挑戰」等按鈕,可以選擇與主色有對比但協調的顏色,例如亮黃色、珊瑚橘或亮綠色,以吸引玩家注意並引導操作。
背景色:背景應避免過於花俏,建議使用淺色或深色的單色基底,並與主色保持明顯對比,確保遊戲畫面與文字清晰呈現。

色彩比例:可以遵循60-30-10的設計原則——60% 主色(背景與主要區域)、30% 輔助色(次要區域)、10% 強調色(按鈕或分數),讓整個網站視覺層次分明又不雜亂。

  1. 字體風格設計
    字體的選擇會直接影響玩家閱讀遊戲規則、分數、提示訊息時的效率,因此必須兼顧美觀與可讀性:
    標題字體:標題通常用於首頁 Logo、遊戲名稱、分數排行榜等重點區域,建議選擇個性鮮明的無襯線字體(如 Poppins、Nunito、Quicksand),或帶有手寫、圓角效果的字體來營造可愛、活潑的氛圍。若遊戲是奇幻冒險類型,也可以考慮帶有裝飾感的字體,增加故事感。

內文字體:正文用於規則說明、操作提示或小按鈕,需以清晰為優先。建議選擇乾淨的無襯線字體,例如 Noto Sans、Roboto 或思源黑體,這些字體在不同螢幕尺寸下都能保持良好的可讀性。

字體搭配原則:整體最多使用兩款字體——一款負責標題、一款負責正文。過多字體會造成混亂。可以透過字重(粗體、細體)和字距的變化,創造層次感而不用增加字體種類。

  1. 氛圍與情緒呈現
    色彩與字體的搭配不只是美學問題,它們會在潛意識中影響玩家的情緒:
    如果想營造快節奏、競技感的體驗,可以使用高飽和亮色 + 粗體字,讓玩家感受到緊張和挑戰。
    如果希望帶給玩家放鬆療癒的感覺,則適合使用柔和漸層 + 圓潤字體,並搭配平滑的動畫過場,讓整個遊戲更親近溫柔。

可以建立一個情緒板Mood Board,將參考的網站配色、字體範例、插畫風格或圖片集中在一起,讓整個團隊快速對齊視覺方向,確保之後的 UI 設計與程式開發都有明確依據。

今日成果與後續應用
經過今天的討論與實驗,我們將確定一套完整的色彩系統(包含主色、輔助色、背景與強調色比例)、字體搭配方案(標題與內文分工)以及整體的氛圍描述。這些設定將成為接下來 UI 設計、動畫細節與網頁切版的基礎,也能在之後製作 LOGO、遊戲開始畫面與結算畫面時維持一致性。
雖然今天的任務看似美術環節,但它的影響範圍遍及整個遊戲體驗:當玩家進入網站的那一瞬間,這些顏色與字體便會默默傳達我們想要營造的情緒,並決定他們是否願意繼續探索與遊玩。


上一篇
Day 8 | 介面草圖
系列文
30天打造純前端互動小遊戲網站9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言