棋盤上已有幾顆子,你正沿著一條斜線數空位。若格線比棋子還醒目,目光會先被一排排方格截住,再回頭尋找棋子之間的聯繫。線畫得清楚,未必就讓局面更容易看清。
線指向哪裡
表格的線用來分隔單元,提醒你這邊和那邊屬於不同的格子。棋盤的線承擔另一件事:它組成座標系,把視線引向交叉點。棋子落在線的相遇處,方格只是這些線圍出的空白。
常用的五子棋棋盤有 15 路、225 個交叉點,棋子下在交叉點上;17 路和 19 路的棋盤也有人使用。路數改變了可落子的位置數量,卻沒有改變線的職責:幫你找到位置,而非把棋面切成一格格容器。維基百科「五子棋」列出了這些棋盤用法。
座標也依附於交叉點。15 路棋盤的縱路從 A 到 O、橫路從 1 到 15,中央的星位「天元」是 H8;盤上共有五個星位,見台灣連珠協會五子棋術語。你報出 H8,指的是兩條路相交的落點,不是 H 列裡的一個方框。
方格太顯眼時
想像橫向三顆黑子,中間隔著一個空點,右邊還有一顆。你需要順著同一條路看過去,判斷空點兩側能否接成一段;若每個方格都有濃重的邊框,視線就更容易停在空白方格的輪廓上。這樣的停頓很短,卻會在每次尋找延伸方向時重複。格線加粗後,交叉點未必更明確。四條粗線圍出的白地會變得像一個個獨立格子,棋子則像擺在格子角上的標記。你仍能辨認落點,只是每看一眼,都得先越過格子的秩序,才能讀到棋子的排列。
五子棋的形狀沿橫、豎、斜方向展開:相鄰、間隔、兩端是否留有空點,都會影響你對下一手的判斷。線可以提示方向,但若它先占據視覺中心,正在變化的棋形反而退到後面。檢查棋盤時,不妨先擺出幾種留有空點的局面,而非只看一張空盤。
木面上的細線
實體棋盤提供了另一種觀看經驗。日本碁盤有一種太刀盛り做法:工匠用日本刀的刀尖沿直尺在木面上拖出線,細到幾乎只是一道痕;黒木碁石店介紹這種工藝時,也提到它能襯出木材的紋理與色澤。線於是落在木面裡,沒有把木面蓋成一張表。
這裡起作用的不只有線的粗細。木紋在格線之間繼續延伸,顏色也有細微的起伏,於是畫面裡的結構並非全由黑線提供。你看得到路,也仍然看得到承托棋子的木面;兩者不會爭著成為唯一的圖案。
螢幕無法照搬刀痕或木紋,也沒有必要把材質照片鋪在盤底。值得借鑑的是分工:線有足夠的存在感,能帶你找到交點;底面保留一點層次,不必讓每條線獨自承擔整張棋盤的結構。裝飾若妨礙讀子,就應退開。
線負責指路,棋子負責呈現局面
純色螢幕的誘惑
網頁棋盤常從一塊純色底面開始,再疊上一組等距線條。空盤看起來整齊,但底色沒有紋理可供眼睛停留,線便成了畫面裡最密集的結構。為了讓空盤上的路更清楚,設計時很容易繼續加深線色。
問題往往要等棋子落下才顯現。黑白棋子本應是局面裡最醒目的變化,深色格線卻會穿過它們之間的空處,把許多細小的黑色片段鋪滿全盤。你從一顆子看向下一顆子時,眼睛會反覆碰到這些片段。
因此,空盤不能獨自決定線色。讓一條直線快要連成五子,再擺一組斜向且留有間隔的棋形,看看你是否能一眼沿著棋子走完那條路。若線比未完成的棋形先被看見,就有理由把它往後放。
一像素的實際寬度
寫下 CSS 的 1px,並不能保證每塊螢幕都畫出觀感相同的線。裝置像素比DPR為 2 時,這個寬度對應兩個物理像素;在 DPR 為 1.25 或 1.5 的螢幕上,它對應的是非整數個物理像素。線的位置、瀏覽器的繪製方式,也會影響邊緣如何分配。於是同一套樣式在手機上可能邊緣乾淨,到了筆記型電腦上卻像一條稍寬的灰帶。反鋸齒會用相鄰像素過渡邊緣,淺線尤其可能顯得模糊;單純把顏色加深,又可能讓它重新壓過棋子。寬度和明暗應放在實際裝置上一起看。
測試時,留意直線與斜線經過的交點是否同樣容易找到,也留意縮放後有沒有某些路忽深忽淺。截圖能幫你並排比較,但最好仍在目標尺寸上看一局棋。像素的帳算到最後,檢驗的還是眼睛能否穩定地讀到落點。
把最強的對比留給棋子
畫面需要明度層級:棋子最強,格線次之,星位更輕。棋子是每手都會改變的資訊,必須從底面和線條中清楚地顯現;格線保持可循即可。星位幫助你認出方位,不必像額外落下的棋子那樣顯眼。
這並不等於一味調淡格線。如果你得靠近螢幕才能分辨交叉點,線就退得太遠了;若遠遠看去先見到完整的網格,線又可能過重。調整時可以先固定棋子的樣子,再逐步改變線與底面的差別。
可辨識性還有明確的底線可參考。W3C WAI 對 WCAG 2.1 非文字對比度的說明指出,承擔必要圖形資訊的部分與相鄰顏色至少需要 3:1 的對比度。這是辨認資訊的要求,不是讓所有線條都達到同一種觀感的配方;也不能只靠削弱格線,就略過對棋子可見性的檢查。
在一局棋裡檢驗
開局時棋子稀疏,你會頻繁尋找中心與附近的交點;中盤以後,目光更多沿著已有棋子判斷延伸方向。同一張棋盤要照顧這兩種時刻。只在開局看線夠不夠清楚,容易忽略中盤時網格對棋形的干擾。可以給自己留一個簡單的觀察順序:先找下一手可能落在哪裡,再看一條尚未連完的斜線,最後掃一眼全盤。若第一步總要猜交點,就提高線的可辨度;若第二步總被方格截斷,就減輕線的存在感。調整應針對遇到的問題,而非追求某個固定的線寬。
一張好用的棋盤,空著時能交代位置,落子後也願意讓出視線。你最後記住的應是那幾顆子如何相連、哪裡還留著空點,而非格線畫得多麼整齊。線完成指引之後,注意力就可以回到這一手棋。
看清落點以後,把注意力還給棋形