LV. 4
GP 74

【情報】開發者工作者:界面重製這件事

樓主 鈷鉻明 cvrunmin0
GP41 BP-
原標題:Why Do We UI Like We UI?   原文

總結
在這一年半的時間裏,我們一直在努力優化遊戲UI來讓它使用主題和背景,同時也趁着這些機會來改善它們的功能性。

這是一個很很很長的過程,Warframe有接近200個界面,我們也經常為了支持新內容而做更多界面,所以這需要段長時間來走完這段旅程。我們開始的時候有131個界面需要重做,現在還有70個,差不多是時候來講講為什麼我們在做這件事,以及我們在重做界面時考慮到了什麼。

驅動我們的選擇
這是我們收到的最常見的意見類型:

     1. 給我們多點資訊吧
     2. 這界面太花了

這基本上就是將我們拉向相反方向的兩股力量,在很少見的情況下你可以找到兩全其美的解決方案,但通常這是兩個互相矛盾的目標。

我們為了嘗試完成這不可能的事(try and cirle this square)而作出了個折中方案,就是利用不同的漸進式披露(progressive disclosure),實際操作下就是我們把更多資訊放在了滾動和點擊之後。

技能界面
舉個例子,一起來看看技能界面。我選了這個,因為我還記得那時候更改時,有很多失望的天農,我也想像到你們一部分仍然如此,所以這是個好例子來講講為什麼我們這樣做。

UX(使用者經驗)一個常見手段就是當它是個對話,這個例子上玩家點擊技能,就像在問:「Chroma的技能是什麼?」,而我們的答覆就是給你們展示每個技能的圖示丶數值丶完整描述丶它們如何被Mod影響等等。在一個對話中,我們的回應應該差不多是「這些就是他的技能了,你想知道更多嗎?」然後玩家就講哪個技能想了解更多。舊界面就像一個試算表,對於熟練玩家來說可以是個非常有用且強大的工具,但對還在摸索的來說就太花了。



新版本主要跟隨對話結構,展示6個選項來讓你選哪個你想知道:被動丶技能還是提示,同時在正中間用西洋鏡展示該Warframe的故事。

這有增加更多資訊嗎?
透過每次顯示一個技能,我們能夠為每個技能增加一段視頻來比之前的圖片更好的說明技能,更改前技能描述因文字空間不足而極短,現在如果你看看Guass的技能,它的描述比以前我們能寫的更詳細了點。給數值的空間也是同樣道理,這曾是放置技能強化數值的主要障礙,新版本也允許有個空間來並排顯示 舊>新數值,以前你還得按按鈕來看變動。新增的提示則可以將原本只能在維基上看到的協同效應和技能怪處暴露給玩家。


提示框

早前我提到過把UX看作對話,往上拓展上去,這並非總是同一段對話。只有新用Chroma的玩家才會問「Chroma的技能是什麼?」,但當馴龍師進入技能界面時,他更像是問「我放的Mod怎樣影響了我的Chroma?」無可否認地,現在不能一眼看完數值影響的界面給出來的回答更麻煩了,於是我們做的就是將這個對話直接搬遷到升級界面,從而移除你在界面間來來回回的需要。

移到提示框方案最大的得益就是獲得更高的可重用性。以往如果我們要在升級界面中放技能數值的話,我們需要重寫一整個獨立設計和代碼方案,但也塞不入這有限的空間。現在數值在提示框裏了,我們就能放到商店丶軍械庫,甚至是在教程介紹裏你選擇你第一個戰甲時的界面。
(譯註:本段作者用portabe來形容tooltips的好處,但根據後面內容,可重用性reusability更為符合,故譯者改用可重用性)


這些如何套用到未來界面

將這些過往決定拓展到未來上,你能夠想像到這些方案將會影響那些如軍械庫的東西。現在你選擇武器時你可以看到他的圖標丶名字丶等級丶晶體以及極化次數或已精通圖標。我們還沒有做新設計,所以我不能說這就是實際變更,但我能想像我們將不再在格子顯示晶體或者極化數,取而代之放在提示框中,然後這個提示框還有如催化劑丶特殊功能連接器丶段位需求丶武器描述丶數值這些現在不顯示的資訊。武器描述和數值這兩個是現在你點擊看到的,嗯再說一次,增加更多資訊同時將一些資訊隱藏在玩家動作之後是我們基本的方案。

但就算這簡單的例子也衍生其他問題。舉個例子,藏起極化次數似乎沒什麼問題,這更多用在比賽目的,所以不是很時間敏感,但隱藏晶體卻是個大問題,無論懸浮在武器上或搜尋來選擇N專武器都很麻煩,晶體好在它只會在安裝後顯示,所以它不參與到雜亂的東西,於是有個觀點說要保留它,就算它與其他東西背道而馳,我說「哈哈」。這就是我不是很細微的說法去指出這裏沒有有個能解決所有遇到的問題的解決方案,而我們嘗試保持分析每一個方案,我們也知道有你們在我們出錯時提醒我們。

所以這就是主要的東西引導很多我們正做的事,但我也想講講一些其他小而重要的東西。

一致性

隨着這些年我們很多的系統和很多的界面,我們不是總是為相似的挑戰提出同樣的方案,這意味着界面間一些很基本的東西,例如如何顯示一個元素以及資訊並不一致。

點擊顯示新界面
資訊在右
資訊在上
資訊在上也在右
資訊在元素內
網格橫向堆疊

我們已經在將幾乎所有界面改為網格在左,細節在右,例子如很多上面的已重做的界面,我們正努力透過重製界面來移除這和其他不一致性,雖然不是總是成功。

為什麼物品標籤是個設定?還有為什麼默認關閉?

說實話,我有時候也問自己這個問題。我們的邏輯是90%的物品有個很具識別性的圖標,我們看過一些我們同輩遊戲的設計,而沒一個有物品標籤的,它們大部分有更小的丶不太獨特的圖標,所以我們很放心地移除了標籤。當然我說90%,剩下的10%不是太好,顯然的例子是遺物圖標和武器部件圖標,後者我們已打算在角落放置對應武器圖標,雖說它在願望清單中,但這個任務一直被推遲。而遺物已經總是強制顯示標籤。

這是不是一個好方案?這可不可以幫助界面保持整潔?說實話我們不能說準。我個人玩的時候並不顯示標籤而我不會錯過它們,但當我們找到一個情況是會非常容易出錯時(如最近的航宇電設報廢界面),我們會強制顯示標籤的。

為什麼新銳捷號UI用「按住確定」?
這是另一樣在銳捷號UI嘗試的新東西,確定彈出框是準確的,但它們確實有壞處,例如在極化Revenant時:

這告訴我即將發生什麼,但是這也隱藏了我做了什麼,我看不到我極化了哪個格和我選了哪個極性,我發現我會因恐懼自己選錯極性而取消。按住確定可以保留上下文,當你按住時,你會看到你選了哪個格哪個極性。

另一個壞處就是當彈出框太多時玩家不再讀它們。如果你只會在很罕有的情況下看到,你會傾向留意它說什麼。我收到一個請求(現在兩個了),希望能在同一個格裏極化同一個極性時彈出一個特別的對話框,這其實已經在遊戲好幾年了,但因這是茫茫對話框海中其中一個,玩家不會注意到。

這是否意味着我們會推展「按住確定」到所有地方?老實說我也不知道。大部分會依賴你下面的回應,所以我會想寫這篇,我希望你們能理解為什麼我們這樣做,但最終我們為你而做,所以希望你們理解我們的理據後指引我們走上正確的路。

最後我想分享一些我們正在做的,這些是複雜的,所以不要期望它們會很快上線,但它們在做了。

世界狀態面板

我們不打算重做這個,多數會加上主題,修正一些問題如mod如何以拉扯圖像顯示,或如何在入侵和突擊版面滾來滾去讓滾動條大發雷霆。我們正將資源無人機移入面板標籤,從而讓你能一眼看到它們在哪和狀態。


段位測驗

測驗前和測驗後界面也會獲得重製,例如早前在Devstream預覽過的新段位徽章,我們也增加了按鈕來直接從界面中進入練習,同時還有解釋什麼是段位和新玩家為什麼會想要的提示。

任務結算

我們對任務結算界面做了一些改動。第一,將mod和物品部分合併成一個網格,並將第一眼看到的物品數從6個提升到10個。集團和物品經驗也會放在一起,成為一個顯示專精丶內蘊等的進度部分。

數據統計則移到獨立部分,同時新增一些如治療數丶控場時間和傷害阻擋數,我們也為任務中做了什麼加入了特別的識別,例如你可能找到獲得集團徽章丶復活你的隊友或者在銳捷號中撲滅很多次火,我們希望這能識別你有對隊伍做出貢獻,輸出最高不是唯一的指標。

最後我們加了點玩意來展示你整個隊伍。



最後你看完了!

當我們到達10頁的最後一頁,需要消化的資訊堪比Grendel胃量。我們最初提過,UX一個常見的方案就是當他是對話(玩家點擊技能是在問「Chroma的技能是什麼」),又例如這個開發者工作坊,玩家可能在問「DE是如何接近他們的UI設計的」,而現在你有答案了!很多Warframe基因已經透過玩家反映和實際上怎樣被用(數據!)而進化了。我們會利用這兩條柱來繼續我們的200界面旅程。

更新:

我已經讀了所有回覆,而我在週末繼續檢閱,現在先說說我看到的一些常見的:

物品標籤:你們小部分說得很好,就算大部分物品有獨特圖標,那些沒有的(遺物和Prime部件)是很重要的物品,尤其是交易,也有些好論點講述當沒有把名字拍到臉上時是多難分辨圖標。

任務結算:會有如其他網格那樣有物品數量的,這個模擬界面只是為了展示能放10個東西的空間,還有標題和其他東西。這還是WIP的,當它上線時通常會有改動。這兩部分中會有排列,所以當獲得內蘊時會排到最頂,如果你在做Simaris日常任務,Simaris聲望會排前,但如果你只是隨便掃了點東西,它會排後面。希望加上這個6個欄位足夠顯示在任務中獲得的重要的東西。

這兩個UI的設定:這不是很可行,我說過我們有將近200個界面,同時兼顧新舊界面的工作量對我們開發隊伍來說並不可能。


文章縮圖:
41
-
LV. 28
GP 2k
2 樓 M870被rushB enderhim
GP2 BP-
我覺得你修界面之前是不是應該把那坨bug修一修

怎麼今年的bug加起來好像比前幾年還多
2
-
LV. 1
GP 69
3 樓 dsausage dsausage2
GP7 BP-
自從介面改成主題化之後我就有個強烈感覺
現在DE的UI設計 重視視覺美觀>>>實用度

最簡單的例子就是遺物開完挑獎品
舊版一眼就能看出哪個金哪個銀 新版就改成小小的一條顏色
畫面變好看 但是辨識度卻遠不如舊版
文字標籤也是被罵了才放回去

然後Railjack的介面也是很令人搖頭
電設升級頁面點下去根本一堆看起來一樣的磁磚 圖形毫無辨識度

然後到底是誰覺得拆東西要一個一個拆的設計很棒的 拜託把他開除掉
明明就已經有現成的新介面能用了 (交易、模擬室那個 一次可以選一堆物品的)
偏偏又要搞個新的 既難用又不統一....

殘骸要一個一個移過去才顯示數值也就算了
每次順序還會不一樣 我的老天鵝
導致同等級的殘骸如果有好幾個 就變成每拆一個都要全部重新再逐個檢查數值..
7
-
LV. 44
GP 1k
4 樓 銀刃 dex0123
GP5 BP-
遺物系統差不多該要想個辦法了吧

照這麼出下去到時候就會出現同一個遺物在Z57金跟S88銅這種編號了,就算現在有搜尋系統
現在一打開遺物部件光找到想到要肝的部件的目標遺物有哪些就頭痛了
更不用說肝完遺物還沒出部件,要去農遺物的時候還要找遺物的出處
看到只有防禦攔截出就想直接下線
5
-
未登入的勇者,要加入 5 樓的討論嗎?
板務人員:

2586 筆精華,昨天 更新
一個月內新增 19
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】