WUZIQI — Gomoku
好看,本身就是理由
← 返回部落格

設計 · 調色

為什麼每塊棋盤都調三次色

從 ThemeTokens 出發,記錄我們如何為不同棋盤反覆校準底色、線色與棋子關係,讓五子棋介面保持安靜、清晰而不過度表現。

從棋盤底色、線色到棋子關係,ThemeTokens 把調色變成可回頭檢視的細小決定。

你有沒有遇過這樣的局面:明明看清了活三,落子前卻總覺得棋盤在搶你的注意力?線太重,底色太亮,黑白子像浮在螢幕上。五子棋的判斷已經足夠緊張,棋盤不該再製造第二層噪音。

ThemeTokens 先把顏色變成可重用的判斷

我們不是從「這塊棋盤好不好看」開始,而是從ThemeTokens開始。底色、線色、棋子對比、陰影、懸停態、最後一手標記,都先被拆成可命名的決定。

這樣做有一個好處:每次調整都不會只盯著單點。線色一變,黑子邊緣會變;底色一暖,白子的存在感也會變。棋盤是一組關係,不是一張背景圖。

第一次調色:在螢幕上看清底色與線

第一次調色很直接:打開棋盤,看它是否成立。底色要托住棋子,線要提供座標,交點要足夠明確,但不能像方格紙一樣壓到前景。

這裡最容易犯的錯,是把線調得過重。線一重,空棋盤會顯得俐落;可一旦落了十幾手,棋子、線、陰影疊在一起,局部會變髒。

一塊現代五子棋棋盤的底色、格線、黑白棋子與最後一手標記的細節對照
第一次調色看的是靜態關係:底色、線、棋子、標記能不能在同一塊棋盤上安靜共處。

我們會特別看邊路和角部。因為很多設計稿在中心很順眼,到了邊線卻顯得擁擠;而實戰裡,衝四、防四、追殺並不會只發生在漂亮的中心區域。

棋盤越安靜,判斷越清楚。

第二次調色:在一盤棋裡檢查節奏

第二次調色必須下棋。只看靜態圖,容易把棋盤調成一張好看的海報;真正的問題,要在第十五手、第三十手、勝負將分的時候出現。

比如最後一手標記。它必須被看見,因為復盤時你要迅速回到剛才的選擇;但它又不能像警告一樣刺眼,否則每一手都會把注意力拉回標記本身。

懸停態也是同樣的道理。預落子需要清楚,尤其在小螢幕上;可如果懸停影子過厚,棋盤會一直像在催促你落子。五子棋需要緊張,但介面不必緊張。

棋子對比不是越強越好

黑子和白子當然要清楚。問題在於,對比太強時,棋子會像貼在玻璃上,觸感反而消失。一塊打磨過的棋盤,應當讓棋子有重量,也有邊界。

白子尤其敏感。它需要從底色裡浮出來,卻不能亮到破壞整盤的平衡;黑子也不只是純粹的暗,它的邊緣、陰影和交點關係,決定了你能不能一眼數清連珠。

我會用一個很普通的測試:在中腹擺出一個活三和一個眠三,然後快速掃視。若第一眼只看到顏色衝突,而不是棋形差異,說明這次對比還沒有調好。

第三次調色:隔一段距離再回來

第三次調色最慢。它發生在一天之後,或換一台裝置之後,或在夜裡重新打開之後。很多顏色當下覺得精緻,隔一段距離看,才知道是不是耐看。

這一步會檢查環境。手機螢幕、平板、桌面瀏覽器,亮度和觀看距離都不同;中文、英文、日文介面的留白節奏也不同。棋盤要適應這些差異,但不能變成四種性格。

有些方案會在第三次被放棄。不是因為不好看,而是因為太會表現自己。好看,本身就是理由;但在五子棋裡,真正耐看的好看,往往懂得克制。

如果你也在調一塊棋盤,可以試這個順序:先看空盤,再下完整一局,最後隔天換裝置回頭檢視。不要急著保存第一眼最漂亮的版本。

標記與陰影只負責輕輕指路

最後一手、可落點、勝負提示,這些都屬於輔助層。輔助層的任務不是裝飾,而是指路;它們要在你需要時出現,在你思考時退開。

好看的棋盤,先學會退後。

三次調色,最終是在保護一手棋

回到開頭的那種局面:你在判斷對方的雙三威脅,下一手可能決定整盤棋。此時最好的棋盤,不會提醒你它用了多少層 token,也不會展示自己多麼特別。

它只是讓線保持清楚,讓棋子站穩,讓最後一手有位置,讓你的眼睛安靜下來。三次調色,調的不是顏色本身,而是顏色和判斷之間的距離。

下次打開棋盤時,可以留意一下自己最先看見什麼。如果先看見棋形,而不是介面,顏色就做對了一半。然後,試一局。


讀完了?打開 WUZIQI 試一局。