因為我本身的專業是用戶經驗(User Experience)與人因工程(Human Factors Engineering)的關係,在遊玩中注意到了目前遊戲在交互設計上可以改善的地方,相較於前一篇文章主要專註在遊戲好不好玩這種比較主觀的遊玩感想上,這一篇文章主要想透過啟發式評估(Heuristic evalution)和設計準則的方式較客觀來的評估一些我所遇到的用戶介面和交互設計上的問題並提議可能的解決之道,所以如果你是想知道遊戲好不好玩值不值得玩則完全可以忽略這一篇(不嫌棄的話也可以看我寫的上一篇)。另外遊戲中的Bug並不在此文的討論範圍內,那些屬於功能性、應該會慢慢加入部分也不討論(比方說魔石使排序選項之類的)。
要先說的一點是我畢竟不是設計此遊戲的人,遊戲在介面交互設計時可能遇到的困難與決策我也無從得知,所以這篇文章也是僅表示我個人的看法。因為本文比較具專業性質,所以署個名以示負責
Steven (Jen-Tse) Dong | LinkedIn
用戶介面
我覺得這個遊戲的用戶介面設的非常漂亮,不僅僅是品質還包含整個UI的色系搭配和與使用了共通的設計語言(design language),所以整體有著很高的完成度。然而或許是因為在開發的時候主要是用模擬器在電腦上運行,所以有一些部分,包含按鈕的位置、字體大小、交互模式等事實上並不適合在手機上以手指操作。
(附帶一提,這邊有個有趣的理論,1995年時在日立(Hitachi)的研究員Masaaki Kurosu和KaoriKashimura發現了Aesthetic–usability effect(美感-易用姓現象),如果一樣事物有著很好的美感,那用戶也會覺得用起來比較容易)
這邊先說明一下一個App在實體手機上和在模擬器上運行的幾個很大的不同。第一是輸入方式不同,模擬器一般是用游標,手機則是手指,相對於游標,手指是很難精確的點擊到很小的目標,這不只是手指是用面而非點來進行點擊,也是因為手指本身會屏蔽部分屏幕,所以如果一個按鈕比手指指尖來的小時,手指就會在點擊時完全屏蔽住按鈕,用戶自然也就很難判斷有沒有正確的點擊到。其次是姿勢的不同,模擬器不存在姿勢問題,但手機卻會因為是單手還是雙手使用,是用左手還是右手,手有多大等因素而影到點擊的順暢度,如果有個按鈕被擺放在手機的最上緣或最下緣,在單手使用下就會變的很難點擊,除此之外還有手機這個實體本身的因素,手機本身多長多寬多厚,手機本身的屏幕設計(曲面或平面,有沒有瀏海等),用戶有沒有裝保護殼等等,這些都會讓本來在模擬器里看來很好操作的設計變的不合理。
底部靠近畫面邊緣的按鈕
這一點在Discord上已經有不少人反應了,官方也已經說會修正,不過還是說明一下為什麼這會是一個問題。現在的手機多半都會在底部加入手勢操作,比方說iPhone是回到桌面,三星是Android的三個按鈕和Samsung Pay,所以如果不在底下留空間遊戲中的按鈕就會和手機系統的手勢操作重疊,而一般來說系統的優先度要高過遊戲,所以就會發生誤觸的狀況,這不僅是點擊還包含左右滑動,因此在商城頁面尤其嚴重。除此之外,由於iPhone是圓角(我是用iPhone),而且很多人包含我都有給iPhone裝保護殼,這使得手指在點擊四個角落時會因為外殼而被往內推一些,導致點擊點向內偏移,一些手指較租的人就會點不穩。
一般來說在手機介面設計上會儘可能避免把可交互項目貼在畫面邊緣而會加上一圈border,因為你很難知道每支手機的屏幕設計帶來的影響,比方說iPhone的圓角和三星手機的曲面屏幕等等都可能影響體驗。這裡貼兩張我分別從iPhone截屏因格瑪的預言和GBF畫面後塞進Figma iPhone 12 Pro里樣子,可以看到因格瑪的畫面因為滿版要漂亮很多,但也由於滿版導致底部按鈕和手勢操作重疊,相較之下GBF就預留了上下的黑邊做為緩衝。

按鈕的大小
。2012年MIT Touch Lab(麻省理工學院觸覺實驗室)的研究指出一般人的食指寬度是1.6-2cm之間(45-57px,不過這必須要對現在流行的高解析度屏幕進行換算),如果按鈕的寬度大於這個寬度那用戶就可以在觸摸時看到按鈕的邊緣,也就可以大幅減少錯誤。不過這只是設計習慣,實際上有很多其他因素,不過按鈕越小點擊確實會越困難。Lee & Zhai (2009)在The performance of touch screen soft buttons一文中建議最小要10mm (1公分),而Jin, Plocher, & Kiff (2007)的Touch Screen User Interfaces for Older Adults: Button Size and Spacing文中建議對年長者的按鈕最小是11.43mm,兩個按鈕間則建議間隔 3.17 – 12.7 mm。現在比較常看到的設計準則為高度最少11mm,間隔10mm,從這點來看西格瑪的按鈕都偏小,特別是共斗消息,不只是小而且還把前往和清除採用上下排列,非常容易點錯,強烈建議如果空間不夠至少排成左右。

字體的大小
目前iOS的設計規範是如果是作為主體的文本,必須要被閱讀的字體建議在17pt以上,而如果是中文本由於筆畫複雜最好再大一些,從下面這一張圖可以看出來因格瑪的預言的字體明顯比iOS標準頁面的字體要小了一些,和GBF比起也稍小一些,這一點會影響到閱讀,建議適當的放大字體。另外主畫面按鈕的文本非常小,不過由於其是伴隨著圖標所以文本本身是作為輔助,小一點倒也無訪,但由於畫面的按鈕實在太多,所以在玩家熟悉各種圖標之前仍然會需要仰仗文本,這時在閱讀上就會較為困難了,同樣的也建議稍微把字體改大一些。

畫面拖動
在電腦遊戲中拖拉畫面是很常見的模式,因為可以透過滑鼠碰觸窗口邊框來進行自動捲動,而對於像是Google Maps 這種需要手動拖拉的介面則提供了很自由縮放的功能讓人可以快速的在畫面上的不同區域移動。但在手機上這一點就不太友善了,這一點體現在在浮空島頁面,為了在不同的功能中移動玩家必須要不斷的拖拉屏幕(而且不知為何我覺得觸摸反應沒有很靈敏),這會浪費玩家的時間。而可移動式的冒險地圖也容易出現對象放置太過邊緣的問題,比方說6-50這個關卡浮空島的圖標都跑到其他按鈕下面了。不過這邊我就不給建議了,這跟遊戲的所想帶來的整體氛圍營造有關,效率導向的設計不一樣定是最好的。

信息架構(Information Architecture, 俗稱IA)
在上面四個問題之上,另外還有信息架構(Information Architecture, 俗稱IA)上的問題。
在遊戲的”冒險”這個主畫面上,我們就算不算左邊儲值活動的那一列和中間的主地圖,整個畫面也有26個按鈕。當然,可以點擊的地方很多並不一定是個問題,比方說魔晶總數的那個加號會導向到課金頁面,而課金頁面目前有其他辦法可以前往,該額外的按鈕僅是個額外的進入點。比較大的問題為了塞進這麼多的按鈕而使得每個按鈕都變得很小,且這些按鈕之間的層級性與關連性並不明確,導致玩家容易困惑而必須去閱讀按鈕上的文本來尋找特定的功能。IA中很重要的一個概念就是把同類型、同層級的信息放在一起以增加搜索效率(findability),我玩到現在有注意到一些我覺得在信息架構上可以改善的部分。
第一個是主選的按鈕擺放邏輯,下面圖中的左右排按鈕,紅色是常駐型,不會消失的按鈕,紅色則是會隨著時間而消失更替的按鈕,用戶經驗的其中一個法則就是如果能不改變一個按鈕的位置就不要改變,因此可以考慮重新排列這些按鈕,把會更動的放一邊,不會變動的放另一邊。除此之外部分重要的按鈕,比方說背包目前是被隱藏起來的,這裡也應該考慮到按鈕使用頻度與重要性來決定要預設顯是哪個按鈕和顯示幾個按鈕。另外,下方的星級冒險和世界地圖本身與換面中央的遊戲地圖關聯性較高,所以可以考慮向上移動,這樣可以更清楚的展示這些按鈕與其功能的關聯性。

第二個部分則是有些部分看似沒有好好的集成,比方說大師的饋贈商店的部分,目前只能由大師的饋贈前往,但頁面設計卻是一般商片頁面,所以這裡建議可以把該項加進去以方便往返。
第三個部分是升星與時空神廟,這個遊戲鼓勵玩家進行升降星所以我覺得沒有必要刻意把兩者分開,可以直接把升星的頁面集成進時空神廟之中即可。不過這點可能開發商有所考量,未來可能會加入新功能所以就當我隨便說說的。
第四是課金相關還動信息的部分,目前遊戲中很多課金頁面都是獨立出來的,反而從課金頁面是進不去那些活動頁面。這裡也建議可以在把與課金有關的活動頁面鏈接加入到課金頁面中,把所有相關連信息都集成在一起,這樣也方便玩家查看。
第五個部分是關於魔石使頁面,雖然目前有三個頁面但技能頁面實際上並沒有任何的交互項目,畢竟這個遊戲技能不用另外升純粹跟等級,所以可以考慮把技能圖標放到升級頁面上,比方說名字下方或左右直排,這樣也可以方便玩家在計算技能數值時可以同時看到角色數值,方便計算
最後的一個建議是關於內部幫助,也就是教學文檔的問題,純粹是個人感受。
這個遊戲的教學方面目前是半隱藏狀態,只有在看板娘與浮空島頁面上出現,但該教學並不包含如何使用遊戲中的其他功能與模式,這些內容都必須要到各自的頁面中點擊左上角的驚嘆號觀看。遊戲教學這種東西很微妙,很多人看過一次就不會再看第二次,如果第一次看時內容太多很多人也會傾向跳過不看自己摸索,所以一般來說會建議準備兩個版本,一種是簡易版的,附上圖片或是用overlay的方式來說明(目前已經有了),另一種則是更詳細的說明,並將之集中在一起讓玩家查閱,類似說明書,這樣當玩家對某些功能有疑問時馬上就知道要去哪裡找答案(我就是在說你,大師的饋贈),之所以要集中也是因為如此可以提供更完整的內容,比方說附上圖片甚至影片說明,也可以加入跨模式/系統的說明,用文內索引讓玩家在不同頁面中跳轉以理解不同系統間如何互相影響。
總結
打完之後發現這篇超級長,我也不知道為啥打這麼長,純吋是一開始遊戲中有玩家問券我覺得如果只是打個幾行太過敷衍所以就打算花點時間分析一下。本文的目的不是要下指導棋,大概只是一種職業病吧,希望官方有機會看到,也歡迎大家提出自己的看法。