讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧
No.1 背景介紹
(一)專案背景
《普通話小鎮》是以教育部、國務院扶貧辦、國家語言推普脫貧攻堅行動計劃為指導,《普通話1000句》為內容核心,語文出版社與騰訊遊戲聯合出品,騰訊遊戲追夢計劃與暢遊共同研發,騰訊遊戲發行線設計中心負責美術設計的一款推廣普通話公益遊戲。“小鎮養成”為玩法載體,且具有工具性、遊戲性、跨界性三大特徵,旨在通過寓教於樂的方式,激發普通話能力相對薄弱的人群學習普通話的興趣,提升學習語言的教育質量,從而提高職業技能和就業能力,助力推普脫貧攻堅行動。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/31d9f5c4ff766c5d215631bdf1525bcde3e065c90a791ea84333423444d6a7c6.jpg)
(二)專案挑戰
作為一款多方異地合作的產品,我們會面臨諸多問題,並且專案製作時間緊,任務重,我們要如何在短期內打造磨合出一款品質符合預期的功能遊戲?作為遊戲美術製作的團隊又將面臨什麼挑戰呢?
首先,使用者群體特殊,缺乏該使用者群的審美研究和行為研究。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/3f051a5ce37bb91e6d38e4619dbbccea603ee99939618d55b038bab4c2170abe.jpg)
其次,開發團隊處於風格與技術探索階段,當前版本美術效果未達預期。且疫情期間異地合作,溝通成本高。
通過對1.0版本的體驗分析,我們發現當前的美術品質未達預期,仍有調優空間。具體表現在,美術風格表現力不足,缺乏遊戲趣味性等等。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/113813326779907899028684e17db5d6c84f99d8e92fba01129ae36a05975d01.jpg)
1.0版本遊戲畫面
那麼,發行線設計中心後續就將從使用者群體的需求著手,提升整體美術品質,期望能為《普通話小鎮》打造出兼具工具性與遊戲性的遊戲畫面。
No.2 解決策略及方法
如何滿足特殊使用者的審美訴求?
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/3107287b1e376ecab757ad676c688265688c972023944005dac8f5a2c6e5d0cf.jpg)
(一)風格分析
為了探尋合適的風格,我們分別從造型、顏色、質感三方面對1.0版本,市面上幾款類似的休閒類產品以及學習教材的美術風格進行了分析,希望初步得出結論,制定設計目標。
-取巧的Low-poly風格
對於極為重視色彩與光影搭配的Low-poly風格,在手機端遊戲市場中還是有大放異彩的作品參考。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/7c47a51c893ccaa624f98277eb8a77aa1ed5966cd51e75bc03aeafc7d3eec3e0.jpg)
《紀念碑谷》遊戲畫面
《普通話小鎮》的1.0版本,整體美術設計同為“小清新的Low-poly”風格,但能較明顯的感知到功能性建築的主體造型和顏色表現上讓產品在基礎識別性和遊戲趣味上稍顯不足。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/db0a34a6bdf672a3d316ced4c84eb22e8ef77199b05b943c550f37685e944715.jpg)
《普通話小鎮》1.0版本建築及角色效果
- 造型:功能主體建築設計缺乏概括性,輪廓剪影較複雜,識別性偏低。
- 顏色:用色比較單薄,明暗對比偏弱。
- 質感:顏色平塗,偏2D紙片感,體積感不強。
在此基礎上進行美術資源的優化與品質提升,挑戰難度不大。但是考慮到使用者人群特殊性,他們是否喜好風格更為自然與寫實的產品?這種“簡單”的、高度概括的遊戲畫面,是否能夠符合這批使用者的喜好?這還需要進一步驗證。
-品質優秀的商業化風格
《board kings》和《家國夢》這2款遊戲的商業化美術風格普適性較高,相對更加迎合大眾審美。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/1a2951d199456aafcf67a30fe1e157bae2dce64fbfee1b171927a3ebb8db2cc6.jpg)
《board kings》遊戲畫面
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/b272150e71b878b7ab7da272e39dd259697e71955e9467c626a1deca7cb6297b.jpg)
《家國夢》遊戲畫面
- 造型:主體建築輪廓剪影突出,主次明顯,造型整體偏Q。
- 顏色:明亮多彩系配色為主要的基調,增加活潑感。
- 質感:避免了過度厚重的寫實風格質感,有部分材質體現細節,增加建築的體積感。
經過初步分析,商業化美術風格作為較主流的大眾風格,對於使用者來說,接受度應該是較高的。同時,此種風格也比較容易輸出較高的美術品質,挑戰難度並不是很大,但我們需要進一步思考如何與市面上的同型別風格遊戲產品做出差異化。
-具備獨立性的傳統教科書插畫風格
《普通話小鎮》是以語文出版社普通話學習教材《普通話1000句》為內容藍本,依據教材中的生活、工作、學習等7個場景來設計遊戲關卡。書中配圖豐富,色調柔和,設計了各種對話情景的場景內容,讓讀者閱讀起來很舒服,能更有效的進行知識吸收。這對我們在美術風格探索上也有一定的指導作用。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/776c45e97a6baab6a177bc5c02c7f50b48b3a0ad0ed417c49086c30c98045003.jpg)
《普通話1000句》教材插圖
造型:圓潤簡潔
顏色:色調舒適柔和
質感:水彩風格,手繪感強
那我們遊戲內的美術是否可以吸收類似手繪偏插畫的風格,設計出一個具有獨立性且融合傳統教科書的風格呢?這樣能與市面上同型別產品的風格做出差異,但對於頻繁接觸的商業化風格和遊戲的我們,偏獨立向的美術風格還需要深度嘗試,挑戰難度偏大。
初步結論:
通過對1.0版本美術風格的覆盤以及競品美術風格分析,我們初步得出一個結論,摒棄Low-poly風格,選擇《普通話1000句》教材的美術風格來區別於傳統市面的產品。在我們還未進一步對目標使用者進行深入考察分析時,設計中心決定對非商業化,偏獨立向的繪本教科書風格進行第一輪的美術風格嘗試。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/045393954d82ed0686ce5d1fc988adfc5f0e5d46e24d3dd4207a84af6058800d.jpg)
場景+主體建築風格設計嘗試
整體的場景造型設計上嘗試突出主體建築,滿足其功能性;色彩傾向上明度接近《普通話1000句》教材,根據故事情景選擇主色調,搭配點綴適量暖色;材質表現上結合手繪的表現形式以及加入了顆粒質感。
(二)使用者分析
由於使用者的特殊性,設計中心主動發起調研需求,在騰訊集團公共事務部、騰訊文化和內容公共事務部的協調支援下,推動深圳扶貧協作和交流辦公室、教育部語文出版社等單位指導《普通話小鎮》團隊深入目標使用者人群,進行訪談了解,就使用者的需求、產品設計(包含使用者體驗以及美術風格探索)、宣發渠道等方面進行了專項調研。
-使用者畫像
此次調研,我們將目標使用者按照年齡高低劃分為兩大類別以及四個群體。通過調研發現其實真實的使用者人群並不是我們最初理解的大山裡的“貧困”使用者,他們有基本的普通話交流能力,且當地普通話普及率較高,初步具備普通話交流的語言環境。他們大多想要外出務工,希望進一步提升普通話水平,獲得更好的工作機會,實現脫貧。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/99b16d0af2fbc6473e0bd258161b21a87b8d2b4b5e07ac49aa0947fb887fceea.jpg)
-美術用研
為了更好的驗證這群特殊使用者對遊戲美術風格的審美偏好,設計中心前期分別對角色、場景以及單體建築輸出了相應的美術調研素材。
男性/女性角色:統一服飾,讓使用者從畫風,頭身比,面部的差異去選擇角色的喜好。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/a2e3d9e0637dbee642652b45fd3782c240a23fa5ba4598ac4a0cd6c97abc62cd.jpg)
黃圈部分為使用者傾向風格
遊戲內棋盤場景也輸出了不同視角及顏色飽和度供使用者選擇。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/f3a8b3a3a0da2a947f88586fe00b9087d1548ca3e0cfd113b2b3c2c33d845228.jpg)
黃圈部分為使用者傾向風格
主體功能性建築也分別輸出了Low-ploy風格,繪本教科書風格以及偏商業化的風格。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/3733f8c80cf0703d567e33221dbaee8ab5dc8bf61bc217a7465ea76a9497674a.jpg)
黃圈部分為使用者傾向風格
核心結論:
綜上所述,我們發現目標使用者群體還是傾向於商業產品的美術風格,與一線城市主流使用者的審美還是比較一致,可能這也得益於《王者榮耀》的普及。反之《普通話1000句》繪本教科書的偏獨立遊戲向的手繪風格就顯得比較小眾了。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/45a3fe8d7163c6b3ec802d23a5651904c1de04b7df85caad35013a4e644cf358.jpg)
-行為用研
通過調研發現,部分使用者會認為1.0版本作為工具不太好用,作為遊戲又相對無趣。所以在後續的設計中,我們需要提高易用性,增加樂趣性,並不斷的平衡工具感和遊戲感。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/bc82b25b38e0b2f0edf1f1a225234817287afe3f165b66911212eb0589a0b65d.jpg)
(三)重新設定設計目標
通過對不同美術風格和目標使用者的深入分析後,我們將重新規劃設計目標,放棄最初主觀判斷的偏獨立繪本的教科書風格,融合Low-poly和教科書的特點,實現具有差異性的偏Q版的“商業化”風格,同時在後續設計上也要儘量增加易用性和樂趣性。
-造型:
輪廓方塊感強,敦實飽滿;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/aef343bf3e50a367bb3f8625fadfb1a1c99ea312747be9ee392d94da4194ed7f.jpg)
明確易懂,細節概括,符合大眾認知,貼近真實功能;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/2b414faac879469986c4f67b8a0519c67b0305823de0db853fc2ab516ad02bf3.jpg)
主體建築個性誇張,突出標誌性物件,適當增添趣味性;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/8f70b44819224d757e01391e8f34fd47be7f62eb4a88c1181b3a1c188d2114d5.jpg)
-顏色
明亮多彩的配色為主要基調;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/4d8554057569c7600bb6bae462c93ea1cb4c76d8310dfe62071b414a5798c840.jpg)
-材質
適當新增肌理紋樣;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/abfd9a1e008be19c6aab6ed530e6e7233916a7232057b589e62eb76fccfece8d.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/519cd825df960914770498e14801126aefb26cf1d7f810b8e0f5ef248632592a.jpg)
-層次
主體建築、道路、地表需要按照格式塔原理有明顯的層次劃分;
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/72e34412a85d1bb7b4a7eb886b119e6deabed942b5a9e0e4536326857997738b.jpg)
-最終效果展示
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/eac25a7b84b683ce0f481ebdae2f01edc691d3ed51c6ec5ffe8381848f739e62.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/7acc5c1cde36287a52ca002eaff6cd6a8343933950f8a12255f93d3bb3eb3280.jpg)
角色&吉祥物
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/c3d082c085795f8595c7c1315bbc9b934506dfb42397f64e60332fed679213b0.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/3736481cc1402bda52938380a43ef81aaa1b1eb7b61c40ca90cd22f2bc818289.jpg)
棋盤建築
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/7e6e7c537fe8bb5929c84b65ae0e7a403ab822aac102e5deb0daa1a69d431f0d.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/11f585930e278e9bac7f4403d6d6e08f814b823de053966ea9f05cf5d33ea509.jpg)
UI介面
如何進一步提升美術品質?
經過多次風格嘗試和實地調研,我們逐步解決了遊戲內角色場景以及UI的風格的問題。接下來要進一步提升整體品質,其中一步就需要重點解決缺乏情感化體驗的問題。1.0版本整體體驗都比較偏工具應用,為了增強它的遊戲性,使之寓教於樂,我們對其改造的主要方案之一就是進行情感化包裝,營造一種遊戲體驗沉浸感的氛圍,將學習工具與遊戲性跨界融合。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/c7d715b28cebf356cebeae469435ab7349cd198665b45265f2bb281e6146eb0c.jpg)
案例一:三大答題系統情感化設計包裝
考考你、評測以及競賽系統在遊戲內都屬於答題玩法。從題目型別到整體流程都較為相似,如果在視覺包裝上也大同小異,那會讓玩家感到單調乏味,且會對三種型別的答題模式缺少清晰的認知。實際上,三大系統在功能上定位各不相同,是一種從輕鬆到正式的進階模式,所以這樣的感受也需要在視覺包裝上有所體現。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/4b2fc3f6e45f6870a1ae59d9c6712fd1a87befef85c3ffaecb70034627a12727.jpg)
-考考你——趣味題卡(彈窗)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/7d062b726bfe26f91d3d1fc2eed0a8f6755df87e5dc91c0558c728a6382509dd.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/46a27f1e6168a93bb9902b8d588fd32e1a0d12d6778e20a61cbe700ae0cc6d89.gif)
-評測系統——模擬教室內普通答題場景(全屏)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/b8685bcdb2b33182245c2e25148be3646d46509b24af4384b1234242a186f0ab.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/461e5c8f80cbf9f02b34faa1c549a3259708b00522e479e049929cdd11354712.gif)
-競賽系統——模擬教室內機考場景(全屏)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/30b6e8b927d490a759bbea82b2af4ec2b2e0ef4501f93dfd1b7fa1cb92684cb5.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/39038ebf8ea0db63bdbedcd6cf73b6327647193cb20390446c38b1a9f4983a88.gif)
案例二:收集系統情感化設計包裝
收集也是遊戲中的一個重要系統。為了體現收藏氛圍,我們將視覺包裝為圖書館書櫃的感覺。希望在保證功能易用的同時能讓玩家感受到收集的珍貴感,從而進一步激發其收集慾望。
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/8030ee0bc9743378c258e99a493c28b0257905a839ee1e1f33582bec6aab15ed.jpg)
![讓更多可愛的人被聽見——《普通話小鎮》美術設計回顧](https://i.iter01.com/images/26a678ab38f026eac0bae20e352d9cd6e98b739c5db98170d76d2c6eab96e5f1.gif)
No.3 成果反饋
《普通話小鎮》於11月5日正式上線,遊戲上線後,獲得教育部領導點贊認可,使用者對於美術品質以及遊戲的整體體驗給予了較大的肯定,口碑峰值9.4分,並獲得2020年金鑽獎最佳功能遊戲。在此感謝教育部語文出版社以及合作伙伴們的努力和幫助,大家共同為國家推普攻堅行動獻上一份綿薄之力。
來源:騰訊遊戲學院
原文:https://mp.weixin.qq.com/s/C4eareDSOuMJmM44lhoAVg
相關文章
- 小鎮青年的人設和現實
- 《普通話小鎮》定檔!11月5日全平臺正式上線
- 土味情話戀愛話術小程式原始碼原始碼
- 回顧2022,展望2023,一個普通98年程式設計師的自述和分享程式設計師
- 做好網站後如何讓這個網站被更多的人瀏覽檢視?網站
- 言值||如何讓自己成為一個說話聲音動聽的人
- PHP回顧之socket程式設計PHP程式設計
- PHP回顧之多程式程式設計PHP程式設計
- 美顏美妝SDK技術,讓美麗觸手可及
- CSS被設計為一種“寬容“的語言,卻讓更多人認為它不是程式設計CSS程式設計
- 騰訊天美GDC分享:《王者榮耀》8年音訊設計回顧音訊
- 設計模式回顧——單例模式(C++)設計模式單例C++
- 小愛音響mini開箱圖賞 會說話的人工智慧音響人工智慧
- 讓你聽見的 HTML5HTML
- 回顧·如何打造主動對話式AIAI
- UI設計培訓技術分享:搞定萌萌噠可愛圖示UI
- 回顧2016年 | 掘金技術徵文
- 2017 前端技術發展回顧前端
- 我的2020回顧——技術篇
- 《QQ飛車手遊》UI設計升級回顧UI
- 普通話篇
- 人工智慧的人文主義,如何讓AI更有愛人工智慧AI
- AI時代下普通小程式設計師的想法AI程式設計師
- 融雲任傑:啟用組織生命力 讓聽見炮火的人做決策 | TGO專訪Go
- 回顧·智慧導購對話機器人實踐機器人
- 回顧
- SAP產品增強技術回顧
- 讓你的Hybrid App聽懂你的話(Android篇)APPAndroid
- YouGov:全球31%的人認為會說普通話是一項重要資產Go
- 《怪物獵人:世界》武器設計大賽最佳賞的設計歷程回顧
- 如何讓你的“寶藏遊戲”被更多人翻牌了遊戲
- 計算機網路教材回顧計算機網路
- Linux 網路開發常見面試題回顧Linux面試題
- 回顧2020,那些讓玩家燃起希望的“星星之火”
- 科大訊飛:讓世界聽見AI的聲音AI
- 羅姆(ROHM)第4代:技術回顧
- 《地心朋克》美術設計記錄
- CRI TechSummit LIVE回顧:哪個課題是你的最愛?MIT