《龍族幻想》UI設計分享——以夥伴招募為例
在做遊戲內介面設計的時候,我們也希望能嘗試一些更具情景化,更有代入感的介面設計方向。
大多數遊戲公司,因為專案人員數量有限,崗位沒有太多細分,互動的部分一般是由策劃和UI設計師共同去做的,這就需要ui設計師本身有全流程的設計思維。
視覺的設計和包裝要服務於功能需求,介面的操作流程是否順暢,最終方案是否能夠落地實現等等,都需要在設計介面的時候考慮到。
話不多說~直接入正題~
先歸納下基本流程:
基本流程
- 分析需求(遊戲世界觀,使用者定位,競品分析,關鍵詞分析)
- 視覺框架概念(出風格草圖,確立大方向,建立統一視覺語言)
- 確定介面風格(打磨風格稿)
- 訂立規範(保障專案風格的統一,減少人員溝通成本)
確定風格後,來看下具體介面的設計流程:
具體流程
- 功能分析(確認功能玩法,操作流程,給介面資訊重要度分級,清晰邏輯關係)
- 細化設計(介面,圖示等細化)
- 輸出說明(字色標註,補充說明)
- 跟進實現效果(拼圖是否正確還原效果圖,遊戲實際操作時是否有問題,並及時調整)
上面每一個單獨點都有很多可延展開來說的東西,篇幅有限,所以這次我們先從龍族的招募介面為例,來說下介面具體的設計思路吧~
夥伴招募
最初期的版本方案
- 核心需求:貼合小說原著,進行有儀式感的夥伴招募。
- 包裝的背景:根據小說,路鳴澤像一個有上帝視角的角色,他具有操控他人夢境的能力,改變夢境的同時也能改變現實。
- 包裝細節:主題圍繞夢境;招募方式:開啟夢境&構築夢境。
上圖角色為網路素材
最初方案的問題是代入感不夠,遊戲特徵表現不足,還是比較普通的抽卡介面,顯得誠意不足,雖然從視覺製作到功能實現完畢,但反饋不夠好,所以全部推翻重做。
新方案
- 核心需求:增強代入感,儀式感,弱化傳統抽卡感。
- 在思考新風格的過程中,大家頭腦風暴,提出了很多有趣的設計點。我們從小說的故事背景中提取了一些可與招募系統關聯的情節和要素;比如跟路鳴澤簽訂電子契約、從城市電話廳撥打電話、卡塞爾學院的懸賞幫助論壇等等。最終以卡塞爾學院執行部,執行任務時招募專員進行展開設計。以“指紋求助”做為整個包裝的出發點,再逐漸豐滿整個設計的內容。
以下是當時頭腦風暴過程中的部分手稿草圖:
首先情景預想:貼合小說原著背景,在龍族小說中發生一些事件時,校長作為一個引導者,指引著大家前進的方向。他自身帶有集結成員的屬性。所以場景發生定位在校長昂熱的辦公室。
然後根據包裝總結一些關鍵詞:凌亂的辦公桌、電話、卡塞爾學院的學生證、堆疊的檔案、世界樹、混血種、龍紋、檔案袋、條形碼、指紋等元素。
最終呈現的夥伴招募效果如下:
招募首頁
選擇攜帶夥伴
求助指紋選擇
指紋輸入
召喚夥伴動畫
高階指紋效果
好的遊戲能引起玩家的情感共鳴,能讓玩家的情緒在該釋放的時候得到宣洩,介面設計也是一樣。
從故事背景,世界觀,場景,角色,武器等設計中提煉概括更有代入感,更能和玩家產生情感聯動。
設計的靈感可以從各種藝術形式中汲取。多玩好的遊戲,多看其他藝術領域的知識,提高審美和眼界。
只有持續的儲備和更新知識庫,才能在這個競爭激烈的行業拉長職業生命週期。
以上就是關於介面設計的一點淺見,感謝大家看到這裡~謝謝
來源:祖龍娛樂美術中心
原文:https://mp.weixin.qq.com/s/sYfP7mLpD-1KDM93jSZ6ww
相關文章
- 關於《龍族幻想》的系統以及簡單分析
- 大型多人線上推理覆盤 !《龍族幻想》靠什麼打動日本玩家
- 龍族
- UI設計培訓分享:UI設計師的設計思路UI
- 從文化到遊戲的轉身 《龍族幻想》系統拆分體驗總結遊戲
- golang設計模式-以kubernetes原始碼為例Golang設計模式原始碼
- 類設計方法:以五子棋為例
- UI設計培訓分享:UI設計師如何準備面試?UI面試
- UI設計培訓分享:ui設計師如何培養設計思維?UI
- 以賣單車為例形象理解23種設計模式設計模式
- UI培訓分享:如何成為一名優秀的UI設計師UI
- 如何自學UI設計?如何成為UI設計師?UI
- UI培訓教程分享:UI設計如何確定設計風格UI
- UI設計培訓教程分享:UI設計師的色彩使用技巧UI
- 《龍族》語錄
- 程式設計師專用徵婚啟事(以30歲為例)程式設計師
- 招募小夥伴和技術合夥人
- UI設計培訓分享:UI設計的職業發展路徑UI
- UI設計培訓分享:UI設計自學好還是報班好?UI
- ui設計教程分享:關於Logo設計要素UIGo
- UI培訓分享:如何提升自己的UI設計能力UI
- WeTest平臺產品&技術合作夥伴招募
- UI設計培訓分享:ui的字型怎麼正確設定?UI
- UI設計課程教程分享:Banner的設計和技巧UI
- UI培訓分享:學UI設計需要知道哪些事情?UI
- UI培訓教程分享:APP啟動頁UI介面設計UIAPP
- UI培訓教程分享:UI設計的分類有哪些?UI
- [分享]laravel自定義檔案系統,以企鵝家cos為例Laravel
- 分享個WIFI 一鍵配置原理-以ESP8266為例WiFi
- 大型專案研發經驗分享:以3A遊戲為例遊戲
- 營銷活動製作過程分享——以321大促為例
- UI設計培訓分享:UI設計師主要可以從事哪幾種工作UI
- UI設計培訓分享:ui設計的如何進行元件化和模組化?UI元件化
- 多位開發者以產品為例談三消遊戲的設計關鍵遊戲
- UI設計培訓分享:ui設計公司的團隊職位怎樣劃分?UI
- 以同程藝龍客服機器人為例,談談意圖識別和對話管理建設機器人
- UI設計培訓技術分享:配色秘籍UI
- UI設計教程學習分享:APP佈局UIAPP