如何選擇虛擬寵物螢幕版面配置:復古 LCD 還是現代混搭風?
在設計虛擬寵物介面時,如果核心體驗僅需少量一目了然的像素場景與少許操作,請選擇復古 LCD 版面配置。若玩家需要閱讀變動的詳細資訊、瀏覽多項活動,或在不同尺寸的螢幕上使用該介面,則應選擇現代混搭風。如果兩種特性都不可或缺,可在保留充滿像素風格的寵物場景之餘,於周圍搭配具彈性、易於閱讀的狀態與控制介面。決策時,可先將最常見的操作任務繪製在螢幕上,並在支援的最小尺寸下測試該任務。
這兩種風格在實務上的意義
復古 LCD 版面配置將螢幕視為一個精簡的小舞台。寵物、少數狀態圖示以及少量控制項共用一個固定的視覺畫框。像素藝術、有限的調色盤以及對顯示資訊的刻意克制,營造出鮮明的視覺特色。當核心循環很簡單時,這種風格非常有效:看見寵物、了解其當前狀態、選擇一項行動。
現代混搭風則保留了部分邊框式、像素化的呈現方式,但為輔助資訊提供了更多空間。寵物依然可以是視覺焦點,而標籤、選單、設定和次要細節則採用可縮放文字與傳統介面控制元件。它還可以隨著螢幕空間的變化重新排列元素。響應式介面通常會重新定位、調整大小或重排內容以適應不同的視窗大小,而不是單純等比例放大所有元素(微軟響應式設計指引)。
請將「混搭風」視為一種設計選擇,而非所有裝置或功能都會自動完美適配的保證。版面配置仍需要明確的決策:哪些內容要保持顯示、哪些要收進選單,以及在可用空間緊繃時該如何表現。
從玩家重複進行的任務開始
將玩家最常執行的任務寫成簡短的流程:例如,注意到需求、開啟相關動作、做出選擇,並確認結果。在顯示畫框內勾勒出該流程的草圖。如果該流程在不需要微小標籤、重疊符號或頻繁切換選單的情況下就能清楚呈現,那麼復古 LCD 的配置可能就已足夠。
接下來,列出必須一眼看懂的資訊,以及可以留到詳細檢視中查看的資訊。寵物的姿勢與幾個清晰的指示圖示應放在主畫面;較長的描述、收藏或設定選項則可能更適合放在混搭風的次要面板中。這種劃分是設計上的取捨,而非放諸四海皆準的規則:正確的分組方式取決於遊戲中的實際活動與語彙。
計算有實質意義的選擇,而非裝飾性圖示。五個各自會開啟另一個選單的圖示,所帶來的操作負擔可能比三個帶有標籤的動作按鈕還要多。如果玩家必須反覆進出層層巢狀選單才能完成核心任務,請在添加更多螢幕裝飾之前,先增加版面空間或簡化任務。
當限制有助於體驗時,選擇復古 LCD
如果像素藝術是預期視覺風格的核心、寵物在小尺寸下仍清晰可辨,且常用操作少到可以直接顯示或選取,那麼復古版面配置會是非常合適的選擇。其受限的舞台能讓寵物及其狀態顯得協調一致。它也為設計設定了清晰的邊界:次要系統無法在未經取捨的情況下擠占主場景。
請確認關鍵狀態是否無需依賴細微的色彩變化即可分辨。除了顏色之外,也應善用辨識度高的形狀、姿勢、標籤或圖案。在灰階模式以及實際渲染大小下測試螢幕。在設計畫布上放大檢視時顯得可愛的 Sprite,在正式推出的版面中可能會變成一團模糊不清的像素點。
如果每增加一個新功能,就必須多塞一個微小的狀態標記或縮寫,那麼這種風格就不再適用。如果玩家需要閱讀圖例才能看懂主畫面,或者寵物為了給不斷增加的儀表板讓出空間而被縮小,這代表精簡的畫框可能承載了過多負荷。
當資訊量或螢幕大小不一時,選擇混搭風
當寵物場景需要與清晰易讀的狀態文字、多種活動選項或詳細檢視並存時,混搭風會非常實用。它也能更有效地適應不同的視窗大小:微軟的指引中提到,在較大的螢幕上可將單欄介面重排為多欄,並在較小的視窗中減少中繼資料的顯示。請有選擇性地套用這一原則:額外的空間可以用來展示實用細節,但不應該讓寵物與數個同樣顯眼的面板爭奪注意力。
請先定義窄螢幕下的排版。保留寵物、最重要的狀態以及主要動作;將次要資訊移至命名明確的面板或選單中。對於較寬的螢幕,可以展示輔助細節,或在場景旁放置清單。保持操作的順序和名稱一致,以免版面配置的改變讓相同的任務感覺像是另一套系統。
不要為了填滿大螢幕而單純放大整個復古畫面結構。這可能會留下尷尬的空白,或者讓控制元件相距過遠而難以操作。相反地,應該決定哪些部分需要放大、哪些部分應保持為獨立的場景,以及哪些補充資訊確實有所助益。Material Design 的版面配置指引同樣將版面描述為能適應輸入方式、裝置與螢幕元素,並具備響應式邊距、欄位與區域的設計(認識版面配置 (Understanding Layout))。
使用快速決策評分表
針對目前的設計,將下列每項敘述評為「是」、「部分符合」或「否」。這是一份實用的檢查清單,而非經嚴格驗證的評分工具。
- 主要的寵物互動任務可以透過一組精簡的可見選項完成。
- 寵物及其重要狀態在預期的最小顯示尺寸下依然清晰。
- 在主要互動過程中,大多數輔助資訊都是非必要的。
- 介面需要在不同的螢幕尺寸上呈現顯著不同數量的資訊。
- 玩家需要查看文字標籤或描述,而這些內容在復古畫框中會顯得過於擁擠。
- 寵物場景應與選單及狀態細節在視覺上保持區隔。
若前三項多為「是」,則偏向選擇復古為主的版面配置。若對多變資訊或易讀標籤的需求為「是」,則偏向選擇混搭風。如果答案各半,可以製作一個原型:採用固定的像素藝術寵物視窗,並搭配獨立且更簡潔的狀態與動作區域。這樣既能保留場景特色,又能讓輔助介面具備自適應能力。
在定案前進行原型製作與驗證
針對每個認真考慮的方案各製作一個具代表性的畫面,並使用相同的寵物、狀態與任務。納入資訊量最繁重的日常狀態,而非僅僅是最簡潔的閒置畫面。邀請幾位不熟悉該設計草圖的人來識別寵物的當前狀態並完成核心任務。記錄他們在何處猶豫、誤讀符號或忽略了某個操作;根據觀察到的問題調整版面,切勿盲目假設該風格本身能解決所有問題。
在最小目標尺寸、較寬尺寸,以及文字放大(若介面支援)的情況下進行測試。若該體驗支援鍵盤操作,請檢查鍵盤焦點,並確保玩家在切換控制元件時焦點依然清晰可見。對於使用指標操作的 Web 介面,WCAG 2.2 的 AA 等級標準規定目標尺寸至少需達 24 × 24 CSS 像素(特定例外情況除外);其 AAA 等級的「焦點外觀」(Focus Appearance) 標準亦規定了 3:1 的對比度以及焦點指示器的最小面積(W3C 的 WCAG 2.2 概述)。這些標準是很好的檢查基準,但無法直接決定哪種視覺風格才適合您的遊戲。
最後,確認文字在背景場景襯托下依然清晰可讀、已選取與未啟用的控制元件在外觀上有明顯差異,並且在無色彩輔助時螢幕仍能傳達其層級結構。如果復古原型通過了這些檢驗,並且能直接流暢地支援重複性任務,請保留其極簡限制。如果它反覆迫使文字標籤變得過於擁擠或操作遭到隱藏,請採用混搭風,並在最具價值的地方保留復古處理:例如寵物場景本身、其邊框,或是一組熟悉的視覺線索。
