Molecule 個人檔案:Taty Bernardo

基本上,Taty Bernardo 是讓這個網站持續運作的核心人物。但她靠的不是東修西補,而是用聰明才智來修改程式碼。正因為有她在,大家才能瀏覽夢想世界的相關內容,像是那些有趣的文章與指南 (請容我們自誇一下)。接下來,我們將會請她聊聊從巴西搬到英國的經歷,講述她差點考上醫學院的過程,以及她是如何想出這些令人眼睛為之一亮的網頁設計的。

妳好,Taty!妳在 Media Molecule 的工作是什麼呢?

Taty Bernardo 的相片,就像森林裡的女巫

Taty Bernardo 的相片,就像森林裡的女巫

我是 Taty,我是網站團隊的一員。剛開始,我是 Media Molecule 的資深網站設計師,但我覺得自己現在既是網站設計師,也是個網站開發工程師。我以前更像是個開發人員,後來,我開始對網站設計感興趣,現在我結合兩者的知識來解決眼前的問題。我負責處理許多設計對話,以及許多 indreams 動畫、設計,還有部落格文章之類的相關需求。感覺有點奇怪。因為我幫忙設計的網頁大概都在介紹自己。這真的很不可思議。

所以妳每天的工作內容是什麼?妳每天都要忙什麼事情呢?

跟社群團隊和其他 Media Molecule 團隊溝通,討論我們能在網站上放些什麼,創新和改進網站,就是我每天的工作。舉例來說,如果某些頁面或文章的點閱率沒那麼高,我就會修改一下文章排版或更新網頁設計,藉此來吸引更多人。我還記得當初的 Ancient Dangers:蝙蝠傳,我們知道這個遊戲很重要,所以,當時我們有討論要如何讓《Ancient Dangers》的網頁脫穎而出。然後,我們就開始選擇可用的資產並想出有趣的設計。

我們在網站中創作 亞特的夢境Media Molecule 原創 的區段時,我們想凸顯《亞特的夢境》是個音樂遊戲,所以就以音樂為主題設計網頁,我們加入了一些音符,甚至還加了一些遊戲內的音樂。

不過,也有些工作和設計沒什麼關係,像是在遇到問題時,我就要修復錯誤並整理程式碼。可能不太需要創意,但這些工作更為重要。

妳通常會使用什麼方法來設計網頁呢?

Taty 設計的新版活動日曆影像。

Taty 設計的新版活動日曆影像。

我每次都會特別注意設計是否符合客戶的品牌形象。我認為 Dreams Universe 的形象就是創新,有一種閃閃發光的感覺,運用了很多紫色,接下來就要以紫色為主題,尋找適合的圖示和按鈕設計。理解品牌形象以及人們對該品牌的需求,對網站設計來說很有幫助,這方法能讓我們將網站設計得更加有趣。

我常會參考多數網頁設計成品進行設計,因為現在很多網站都採用平面的精簡設計,網頁上最好不要有很多選單、動圖和其他元素閃來閃去。不過,最重要的是,網站一定要方便使用。這樣方便閱讀嗎?能不能搭配螢幕助讀程式之類的工具?一定要將這些方面納入考量。

要如何取捨,讓網頁看起來有趣,又能方便使用和瀏覽?

其實我們有很多「業界標準」,簡單來說,就是很多網站都在使用且效果很好的東西。但對我來說,我不喜歡受規則束縛,我想試著發揮創意,從大處著眼,然後從小處著手;思考如何在手機和其他平台上呈現,還有要怎麼呈現給有視覺障礙或其他障礙的人。如果行不通,有什麼方法可以彌補?

要取得平衡其實不容易,有時也意味著無法把所有想做的超棒點子都放進去。但是,網站能不能簡單使用和瀏覽,這點更加重要。

《亞特的夢境》網站區段的影像,展示了 Taty 加入的音符設計。

《亞特的夢境》網站區段的影像,展示了 Taty 加入的音符設計。

妳覺得自己設計過最吸睛 (或最有趣) 的網站是哪個網站?

這個問題可不好回答,因為我來 Media Molecule 應徵時,提出了很多 indreams 和其他網站的設計。這些設計其實都不太實際,因為很多我提出的設計雖然很酷,但實踐起來很困難,有些點子甚至完全不可能設計出來。

來到 Media Molecule 之前,我做過一種互動型日曆,每天按一下不同的按鈕,就會有一個小小的動畫角色出來跳個舞或做其他動作。我覺得很有趣,也很吸睛,我做得也非常開心,因為互動性很高。

我們最近發佈了最新版本的 indreams 網站,裡面使用的就是妳的設計。新版網站裡最讓妳引以為傲的是什麼?

那肯定是簡化了尋找內容的過程。我們討論了很多次,討論要如何分類網站內容,要為每個類別取什麼名字,真的很難,不過,最終我們把網站像樂高一樣徹底分解重組,讓它變得更酷。

我們也非常幸運,有一些使用者願意幫我們測試新版網站,他們在設計過程中給了我們很多幫助。我們讓使用者們用用看新舊版本的網站,當我們看到他們使用新版網站能更快地找到資訊時,這讓我們非常滿足。在此之前,網站上也有很多超酷的內容,但有時得經過五、六個選單才能找到,現在頂多兩個選單就能找到了。

Taty 設計的新版活動日曆。

Taty 設計的新版活動日曆。

妳為什麼會踏入網站設計這個領域,又是為什麼會應徵 Media Molecule 呢?

我到了上大學的年紀時,我的家人想讓我去學醫,不過,其實我很討厭生物學。所以我選擇學習遊戲設計,還在巴西拿到了學位,當時有幸幫一個臉書的賓果遊戲做了品保。然後我在巴西的一間設計公司當了遊戲設計師。

後來我搬到了英國,當時遊戲設計師的工作有點難找。但我還是想要留在遊戲產業裡,所以我就轉向了我的另一個興趣,就是網站設計。到了英國後,我就從網站的品保分析師做起,然後當上網站開發工程師,最後就成為了網站設計師。我在遊戲產業待了 13 年了,但我做過很多不同的工作,這個產業對我來說還是很有新鮮感的。

Indreams 這個網站有一部分無法與遊戲分割。這一點會讓妳的工作比以前更複雜嗎?畢竟妳要確保程式碼在網站和遊戲中都不會出問題。

網站上《Ancient Dangers:蝙蝠傳》區段的影像,由 Taty 設計。

網站上《Ancient Dangers:蝙蝠傳》區段的影像,由 Taty 設計。

在前一份工作中,我負責的大多是行銷網站,其實重點就只是吸引大家買我們宣傳的遊戲,主要就是展示預告片、遊戲截圖和相關資產。而 indreams 的重點比較是要做出和 Dreams Universe 體驗相符的設計,我們會積極地和伺服器團隊溝通,確保我們能加入他們推出的新功能。或者,我們想把遊戲裡的記分板放到網站中,那我們要怎麼把這些東西移植過來,同時還要能產生相同的效果,這就不容易了,因為 Dreams Universe 使用的是控制器,而不是鍵盤和滑鼠。用控制器玩遊戲和用鍵盤和滑鼠瀏覽網站完全是兩回事。兩者都行得通,但遊戲裡的控制方式顯然無法運用在網站上。

我認為把遊戲的 UI 移植到網站上,還要保持一致,這確實有點難度。雖然兩者的環境是一樣的,但兩者的互動方式還是有所不同。我覺得那是我在設計 indreams 時遇到的最大挑戰。

針對遊戲與網站的不同之處,妳是怎麼設計的呢?還有,妳是怎麼決定那些部分要借鑑呢?舉例來說,遊戲內的圖示和瀏覽夢想導覽都照搬到網站上,但其他設計都不同。

對啊,我們確實把一些東西從遊戲照搬到了網站上,像是記分板。我們得確保遊戲和網站的記分板長得一模一樣,不然使用者會很困惑。我們的終極目標就是讓大家在瀏覽網站時也像在瀏覽 Dreams Universe 一樣,當然不可能完全一樣,但我們儘量做到盡善盡美。

像是篩選功能,我覺得網站的篩選功能還需要改善,因為和遊戲裡面的篩選功能還是有些差異。但我們很滿意網站的首頁,首頁完全重現了在夢想世界中瀏覽的感覺,因為創作清單的樣式和瀏覽時的感覺一模一樣,只不過把控制器換成了鍵盤和滑鼠。

活動清單的影像,由 Taty 設計。

活動清單的影像,由 Taty 設計。

因為這是個指南網站,裡面一定要有符合遊戲情境的元素,那樣很棒,因為這樣我們就能借鑑遊戲的設計和風格。雖然不是所有東西都能借鑑,有時候某些特效 (例如發光效果) 就不太適合用在網站上。當我們遇到網站特有的限制時,我們想的是如何用類似的方式呈現。所以在 indreams 的設計上,許多與遊戲搭配的元素只是感覺起來差不多,有點相輔相成的感覺。

至於網站上的文件存放處,也就是我們存放所有資源和指南的地方,此處的設計就比較自由了,因為文件網頁不太需要與遊戲相配合。我們還是需要確保文件風格與我們的品牌形象相符,但是不需要結合遊戲體驗。

Media Molecule 員工的桌子上似乎都放著很多有趣的東西。妳的桌子上現在擺著什麼呢?

我桌子上有超多東西。我有好多泡泡瑪特公仔。我桌上至少有三個,背後還放了五、六個。有一個是長著向日葵頭部的寶寶,還有一隻在吃草莓的可愛小羊。真的超級可愛!我想想還有什麼。還有一個陸行鳥日曆公仔,全年都可以用,只要轉一下寫有數字的方塊就能改變日期。現在的日期是錯的,不要理它。

我今年冬天去了日本,然後買了很多我不需要的東西回來。其中一個是美少女戰士紙膠帶架,每個人都該買一個。我還在日本買了一個杯墊,上面是卡比獸吃甜甜圈的圖案,還有貓咪造型的膠帶切割器。還有很多很多,我的桌子很大。

日本嗎?妳在那邊做過最有趣的事是什麼?

我個人最喜歡的是去參觀吉卜力工作室主題遊樂園。我真的很喜歡這個遊樂園,因為跟傳統的遊樂園很不一樣。那裡的遊樂設施不多,也沒有要大排長龍的景點,比較像是探索吉卜力電影中的場景,他們重現了所有的場景。我也有幸去了超級任天堂世界,也是一次很難忘的經驗。不過,超級任天堂世界就是比較傳統的主題遊樂園,花了很多時間排隊,就沒那麼有趣了。

總結一下,說說妳最喜歡哪些 Dreams Universe 遊戲吧,有什麼想推薦給大家的遊戲嗎?

一排排的毛絨玩具。Taty 的美夢成真了。

一排排的毛絨玩具。Taty 的美夢成真了。

這個問題有點難呢。我沒太多時間玩 Dreams Universe 的遊戲,而且新遊戲推出的速度非常快,所以我有點跟不上了。不過,有個遊戲讓我印象很深刻,我之所以會記得,是因為 Jen [Simpkins] 在 Twitter 上提過,看到後我就覺得「我一定要玩」。就是 Deh Plushies,作者是 Yah_DehllCaptain_MorganElca_Gaming

超多可愛的動物食物毛絨玩具!我們最喜歡鬆餅貓咪和菠蘿麵包烏龜。

超多可愛的動物食物毛絨玩具!我們最喜歡鬆餅貓咪和菠蘿麵包烏龜。

看文章的大家看不到,但我背後的辦公室裡有超多毛絨玩具。超級多毛絨玩具。我可能有毛絨玩具癖。所以將毛絨玩具和 Dreams Universe 結合在一起的遊戲深得我心。非常適合我,某種意義上,毛絨玩具就是我的代名詞。如果我開店的話...我不會賣我的毛絨玩具。但如果我必須開一間店的話,我會想像自己開一間毛絨玩具店。我很喜歡其中的風格和設計,他們真的把毛絨玩具設計得非常獨特,又很真實。

說真的,沒有這種商店簡直是對荷包的恩賜。

說真的,沒有這種商店簡直是對荷包的恩賜。

裡面有很多獨特又有創意的食物動物。我記得有貓跟龍。好像還有麻糬。我最喜歡的是壽司貓咪。我記得裡面有超多不同的動物,像是漢堡貓咪,也很可愛,還有一個義大利麵做的巴哥犬也很可愛。有何不可呢?我覺得我之所以這麼喜歡這款遊戲,就是因為它滿足了我的願望,因為我會樂意下半輩子都住在毛絨玩具店裡。

Dreams Universe 使用者指南目前仍在持續開發。請持續關注後續更新,我們會隨時間新增更多學習資源。