小屋創作

日誌2020-05-11 19:30

不穿裙子的便利商店 遊戲開發日誌vol.5

作者:黑水銀


開發日誌vol.5 遊戲介面與功能架構測試 ( 下 )



大家好! 我是不穿裙子的便利商店的企劃 麻痺

距離上次開發日誌的發文間隔了有一段時間,為什麼呢?


因為我們「不穿裙子的便利商店」即將推出集資啦!

但是在正式集資之前想再收集一下大家對於便利商店的一些意見,還請大家幫忙填寫問卷喔!

同時也成立了新的粉絲專頁專注公佈不穿裙子的便利商店未來的更新訊息。


點讚關注新的粉絲專頁,避免遺漏掉最新最即時的遊戲製作動向喔!



廣告打到這裡,事不宜遲馬上開始進入原先的主題。




那麼確定好色系和雛型功能沒問題後,就要配合主畫面開始設計整體的UI

依照色彩印象與理念,大量使用藍與白,配合漸層效果。

試圖製造出具有質感的簡易風,一來是方便商品呈現,二是可以讓文字訊息與ICON在排列時更有放置空間。

商品研發介面設計

後來發現分類只有單純的文字整體太過單調,所以後來又加上了分類對應的icon增加畫面的豐富度。


將原先的文字縮小,並在上方放上代表對應商品屬性的icon

商品改良的介面也是使用相同的色系與理念去製作。

改良系統介面設計

不過後來發現商品的圖示縮太小會有強烈的視覺鋸齒感,所以加上了黑邊。


加上黑邊後,商品的鋸齒感大幅改善,同時也更立體了。

商品研發出來的卡片,也針對整體版面配置做了調整,將商品等級放置到了左上角,把商品分類的圖示換成了icon,整體的色系也配合主畫面做更換。

商品屬性介面

商品進貨介面


員工排班介面




然而當設計進度來到中期時,主畫面的店內擺設開始多樣化,讓整體感覺陷入憂鬱的寒色調。

擴大設施數量後的主畫面設計


雖然過程使用過深藍色去重新襯托畫面,但很快被自己否決了,畢竟大量的白底,讓反差變得更大。

索性就把原先的主色給更改了,重新換上褐色或咖啡系列做為主力,可以容易讓人聯想木紋風或硬質。

研發介面更換主色,並加上縫線的元素。

並嘗試加入縫線與花紋的元素後,稍微讓便利店的整體介面有了生氣,或許這就是有些店家會在室內種植物的原因吧。


改良介面更換主色,並加上花紋的元素。

最後將生硬的灰白底,變更為淡色系,讓褐色看來不孤單,很多時候咖啡色的濃厚感幾乎獨樹一方。


商品進貨介面也使用相同的主色和元素做更動。


看到這裡可以發現比起原先的介面配色,新的介面配色甚至是昨日銷售的介面都顯得更有活力朝氣。

昨日銷售系統介面


此做法,可以讓子分類的橫框標題,更輕易的搭配不同色彩,讓玩家能更直覺的獲取遊戲訊息。

而當這個做法被團隊採用後,幾乎定位後面接著要完成的美術走向。



進入遊戲畫面後,玩家將長時間待在主畫面操作遊戲系統,尤其是會消耗行動點的商品研發。

因為行動點會推進遊戲進程,所以考慮讓玩家停留在商品管理時,能記得研發和進貨這兩個重要程序,當然這點得與程式設計師相互配合,才能讓玩家體驗更順暢,包括研發商品後的動畫點擊、關閉與確認的使用認知和防呆措施、提示等。


這些都是會影響UI與icon的設計條件,所以大多時候我會先以較簡易的管理者模式進行模板測試,直到操作上能符合預期的範疇前,這些原件都是很容易會被替換的。

舉例上方欄位這種簡單的數據呈現,也嘗試過不使用較為一般的橫向排列。


而是進行整合數據,讓金錢、人氣、整潔、治安的數字位置和資訊是能一眼得知的狀態。

在行動點的表示上,則不採用數字化設計,直覺的圖示增減能避免與狀態欄的數字搞混等…

經過越多次的討論與檢測,介面將會繼續不斷更新,不論是使用遮罩框、貼紙、發光到特效的呈現,皆是為了考量玩家在視覺與操作能簡潔明確。



在設計「不穿裙子的便利商店」 遊戲LOGO時…

第一件想到的事情即是「企業識別用的CIS」,就是希望讓服裝、店面或是設備都要一套的系統。

但作為一款遊戲不用到如此複雜的設計,但仍希望以此為方向去掌控文字的方針。

按照原先遊戲內容的主體色調,我將主色調整成橘藍色系,往輕鬆、跳動、活力的方向去設計。

並配合遊戲製作人可能會喜歡的形式做出以下三款選擇:

三個不同形式的遊戲LOGO

最上面的LOGO:調式排列

其實這就像原檔一樣,先打出一排文來試著變化或排列,包含調整字體粗度、顏色等。

用這方式能確定主觀上認為的「便利店」原貌。

接著再往不穿裙子的主題上發想,讓主軸文字有色彩變化,讓其稍微活潑。

實際上不穿裙子是個過於直覺的表述,背後沒有理念來進行具體變化。

所以不管如何都讓我有「襯底」的想法,所以圖像化的LOGO就被排除在外了。

右邊的LOGO:主色調是橘紅

在發想的草稿中,字體變化最接近圖像的狀態。

並且想要以招牌的方式去設計。 例如:星O克、麥噹噹那類的

不過沒有適當的主題,所以最後就運用主色系加黑框來讓文字濃縮在一起。

左邊的LOGO:臺灣的便利商店

這個的參考就很明顯了,主要就是從全家、7–11、OK等台灣的便利店進行參考變化。

畢竟遊戲內主要元素都是以台灣特色下去設計的。

總體來說,文字數量在沒有簡化的情況下,就考慮在遊戲可能會出現在招牌的LOGO形式,大致上會比較像商店街門口那種掛牌的設計概念。



整體遊戲目前還在開發的階段,而在這過程中無非會繼續讓程式系統、介面操作、美術圖像都還會持續修正。

就像遇見BUG要修改一樣,當回饋評價或遊玩體驗不太好時,我們就要去更新和解決這些問題。

團隊總是再拿捏,如何讓玩家好上手又覺得玩的順,是否有圖示設計是不懂、不適合的情況會發生。

包含劇本的對話與動態表達,節奏上能否更融洽的成為大家心目中的經營遊戲。

將來的理念與體驗的提升,特效動畫、畫面互動等優化動作皆是我們持續努力的目標。



那麼謝謝大家這次也看到了最後,這次的開發日誌是否也能大家感到滿意?

每次在撰寫開發日誌並且整理過去時間開發的素材與討論資料時,總是在想著要怎麼介紹與說明,才能展現出哪些內容才最能大家理解我們的遊戲與我們想呈現給各位玩家的東西。

這是我第一次撰寫開發日誌,希望目前為止揭露的情報與訊息能讓大家對我們的遊戲充滿期待與繼續關注我們。

接下來每兩週我們也會定期的更新開發日誌,但相比前面三篇開發日誌,接下來的開發日至內容篇幅會比較短,同時會較為偏向我們更新了哪些內容、修正了哪些內容的方向。

再次感謝看到這裡的大家,我是負責企劃的 麻痺 我們下次見!






6

2

LINE 分享

相關創作

不穿裙子的便利商店 遊戲開發日誌Vol.8

不穿裙子的便利商店 遊戲開發日誌vol.3

不穿裙子的便利商店 遊戲開發日誌vol.6

留言

開啟 APP

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

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