## ##

        實(shí)用的手游設(shè)計(jì)小技巧

        2018-03-19 13:42:30 閱讀 255791 本文來(lái)源: 周倩茹 網(wǎng)易UEDC
        分享至:

        近年來(lái)一直在做卡牌類游戲項(xiàng)目,有幸接觸到游戲UI設(shè)計(jì)。在工作過(guò)程中漸漸感悟出的一些對(duì)工作有幫助的設(shè)計(jì)技巧,整理出來(lái)和大家一起交流:)


        明確美術(shù)風(fēng)格


        游戲的本質(zhì)是娛樂(lè)消遣,希望玩家在沉浸時(shí)能獲取到愉悅感與成就感。除了核心的體驗(yàn)與玩法,美術(shù)部分則是決定我們是否感興趣的第一印象。合適的美術(shù)風(fēng)格大致可以總結(jié)以下一些規(guī)律。

        20180319113854651.jpg

        每種風(fēng)格都有自己的語(yǔ)言


        根據(jù)每種游戲的屬性與IP,我們能對(duì)游戲整體美術(shù)有個(gè)大體的印象與分類,在整體概念的基礎(chǔ)上,然后由框架到內(nèi)容細(xì)節(jié)逐步搭建。


        1、符合目標(biāo)玩家審美

        通常在做風(fēng)格探索時(shí),我們會(huì)先根據(jù)目標(biāo)用戶群的普遍印象,推斷出大致貼合的風(fēng)格。如果拿到一款玩家定位是二次元群體的游戲,那么美術(shù)風(fēng)格可分為明快/絢麗。

        如圖的同一角色,比起初稿,每行后2張?jiān)谠煨蜕夏槻扛佬停误w更纖細(xì),服裝更輕便,整體設(shè)定更契合日系A(chǔ)CG文化的印象。

        20180319114052419.jpg


        2、設(shè)計(jì)不能自相違背

        在構(gòu)建風(fēng)格時(shí),不能出現(xiàn)與時(shí)代相悖的設(shè)計(jì)。如是古代武俠(不含穿越)的主題,畫(huà)面盡量不要采用近現(xiàn)代制造產(chǎn)物。

        舉個(gè)例子,武俠游戲中“公告”入口需要設(shè)計(jì)一個(gè)圖標(biāo),比起我們?cè)贏PPUI中常見(jiàn)的擴(kuò)音器,反而卷軸、銅鈴或公告板這類古代物件會(huì)更合適。

        當(dāng)再具體到某個(gè)國(guó)家的古代背景時(shí),建議設(shè)計(jì)師最好事先閱讀相關(guān)資料影像抓準(zhǔn)特征。如上圖游戲定義為日本平安時(shí)代,畫(huà)面可運(yùn)用該國(guó)典型元素,浮世繪、鳥(niǎo)居、達(dá)摩玩具等。

        20180319114338131.jpg


        3、依托知名IP

        在已有的世界觀基礎(chǔ)上延伸,做設(shè)計(jì)時(shí)會(huì)更有據(jù)可依,這也一定程度的減少了前期時(shí)收集資料的范圍。

        如圖《火影忍者》手游,在場(chǎng)景和控件方面貼合原作,里面出現(xiàn)過(guò)的物品、紋理都能合理的運(yùn)用。

        20180319114511291.jpg


        4、突破固有印象,打造風(fēng)格差異

        大家是否注意到,往前推20年,在那時(shí)玩家能很快從屏幕畫(huà)面分辨出一些主流游戲的名字,而如今似乎不行。

        現(xiàn)今主流的美術(shù)風(fēng)格大致如此,游戲題材又不盡相同。在畫(huà)面上另辟蹊徑,近年來(lái)也是越來(lái)越多的游戲設(shè)計(jì)者們的考慮之一了。

        20180319114631587.jpg


        5、構(gòu)建世界觀,升華無(wú)瑕疵設(shè)計(jì)

        無(wú)瑕疵可以理解為繪畫(huà)本身的高品質(zhì)和對(duì)整體游戲背景故事的詮釋,畫(huà)面上要體現(xiàn)我們的故事,細(xì)節(jié)設(shè)計(jì)既要符合邏輯,又需要有不同于其他游戲的亮點(diǎn)和特色。

        如上圖《爐石傳說(shuō)》是一個(gè)屬于艾澤拉斯(游戲魔獸世界中的地圖)的卡牌游戲,不管是牌桌的特有風(fēng)格還是桌角上的裝飾,每個(gè)細(xì)節(jié)都給予玩家完美詮釋。

        20180319114802309.jpg


        做易上手的UI設(shè)計(jì)


        UI是玩家了解虛擬世界的窗口。通常情況下,玩家僅僅只想看這個(gè)世界,沒(méi)那么在意窗口,所以不需要過(guò)度讓人感覺(jué)到它們的存在。對(duì)玩家來(lái)說(shuō),好的氛圍體驗(yàn)應(yīng)是舒適、并且伴隨成就感的。

        而作為設(shè)計(jì)師角度,你應(yīng)該考慮到的是什么設(shè)計(jì)能在整體上直接帶來(lái)更舒適的體驗(yàn),以及什么顏色和元素能間接幫助你達(dá)到這些目標(biāo)。


        6、減弱UI本身的質(zhì)感

        用半透明,或者簡(jiǎn)單線條、細(xì)框,輕薄扁平的設(shè)計(jì),盡量露出游戲畫(huà)面,只需要在一些實(shí)時(shí)顯示數(shù)據(jù),具有引導(dǎo)性功能的區(qū)域強(qiáng)化即可。

        游戲的核心在于玩法,UI只是烘托氛圍,作為引導(dǎo)操作的輔助,某些情況下簡(jiǎn)化比復(fù)雜更合適,華麗的UI反而畫(huà)蛇添足。

        20180319115124056.jpg


        7、徹底融入環(huán)境

        變色龍是世界上最偉大的爬行動(dòng)物之一,當(dāng)把這種偽裝方式搬到畫(huà)面上時(shí),也能把UI設(shè)計(jì)成和游戲一樣的環(huán)境,采用相同的光源、框架元素與質(zhì)感,甚至連繪畫(huà)筆觸都嚴(yán)格保持統(tǒng)一。

        “爐石傳說(shuō)”依舊是個(gè)很好的例子,每一處設(shè)計(jì)都彰顯著創(chuàng)作者們的匠心和自信。

        20180319115501939.jpg


        8、簡(jiǎn)潔明了

        由于手機(jī)屏幕的局限性,如果游戲很棒,但難以控制會(huì)成為玩家的一大門檻。

        主要操作的按鈕位置,應(yīng)放置在單手操作時(shí)大拇指能方便點(diǎn)選區(qū)域,且按鈕間隔不低于單指最小移動(dòng)距離。

        20180319115608724.jpg


        9、圖標(biāo)信息傳達(dá)

        圖標(biāo)的設(shè)計(jì)應(yīng)該遵循 易用性 > 美觀 這一原理。優(yōu)先信息傳達(dá),其次再考慮形態(tài)、顏色、統(tǒng)一性等。符合玩家常規(guī)圖形識(shí)別習(xí)慣,用最直接的符號(hào)或者語(yǔ)言表達(dá)出按鍵的功能用途。

        如圖“好友”一詞,為兩人(及以上)關(guān)系的描述,圖中前三圖標(biāo)設(shè)計(jì)符合常規(guī)識(shí)別。而后三圖標(biāo)中“碰杯”這一概念定義模糊,腦內(nèi)需要轉(zhuǎn)個(gè)彎才能理解,但有文字作輔助,所以不會(huì)產(chǎn)生歧義。沒(méi)有文字做輔助的圖標(biāo),表達(dá)不如圖文相加清晰。

        20180319115722840.jpg


        10、高頻使用按鈕統(tǒng)一辨識(shí)度

        返回、關(guān)閉等高頻使用的按鈕保證高辨識(shí)度。

        這類控件的是設(shè)計(jì)師容易忽略的細(xì)節(jié),但由于使用頻率較高,在界面的位置和樣式要統(tǒng)一,形態(tài)越簡(jiǎn)單越好。

        需要注意趣味化設(shè)計(jì)的全局的適配性。如圖2彈窗右側(cè)的關(guān)閉按鈕,在需要營(yíng)造氛圍的活動(dòng)頁(yè)面上,就出現(xiàn)了與裝飾掛件相似的錯(cuò)覺(jué)。

        20180319115900939.jpg


        11、氣氛渲染

        活動(dòng)、結(jié)果、任務(wù)等需要給予必要的圖形特效提示。

        活動(dòng)頁(yè)是游戲促活和變現(xiàn)的重要途徑之一,結(jié)果頁(yè)是玩家獲得成就感的節(jié)點(diǎn),比起游戲內(nèi)的常規(guī)彈窗設(shè)計(jì),把想要最直接呈現(xiàn)的部分放大呈現(xiàn),用圖像營(yíng)造氛圍會(huì)更有渲染力。

        20180319120017090.jpg


        12、榮譽(yù)遞進(jìn)

        不同等級(jí)、屬性的角色裝備、武器等需要有遞進(jìn)的區(qū)別,只變數(shù)值不變視效給人刺激不夠,且進(jìn)階需要依照一定規(guī)律。

        如表達(dá)等級(jí),可從材質(zhì)由銅至金,形態(tài)由簡(jiǎn)單至復(fù)雜,特效從無(wú)至發(fā)光來(lái)表達(dá)。

        20180319120122186.jpg

        20180319120210901.jpg

        如果表示由強(qiáng)轉(zhuǎn)弱的變化,可依照不同視覺(jué)等級(jí)來(lái)傳達(dá)差異


        13、關(guān)卡遞進(jìn)

        注意關(guān)卡氛圍營(yíng)造,普通關(guān)卡和總部以及開(kāi)始的地圖和后續(xù)等級(jí)的地圖可以通過(guò)色彩形態(tài)變化經(jīng)營(yíng)更加緊張、刺激的效果,讓玩家更為投入情節(jié)有沖關(guān)的暢快刺激。

        20180319120406439.jpg


        14、數(shù)據(jù)遞進(jìn)

        戰(zhàn)斗數(shù)據(jù)重復(fù)疊加,增加打擊感,能讓玩家在游戲中體驗(yàn)到暢快。

        如圖普通傷害與暴擊傷害在數(shù)字大小與色值上明顯區(qū)分,普通技能與必殺技在光效也可以從單個(gè)遞進(jìn)到多個(gè)疊加。

        20180319120505576.jpg


        15、字體合理運(yùn)用

        游戲的字體最好不要超過(guò)3種。

        在帶有社交性質(zhì)的聊天界面里,對(duì)話字體盡量采用易于辨認(rèn)的樣式,越接近原生字體辨識(shí)度越高。

        要注意特殊情況,有些游戲需要特殊用字體來(lái)烘托氛圍,針對(duì)這類情況建議在字體上盡量選擇字形較細(xì)、形狀較規(guī)整的特殊字體。

        20180319120603531.jpg


        16、適當(dāng)舒展空間

        在線游戲沒(méi)有暫停功能,需要根據(jù)玩家的操作進(jìn)行即使反饋,功能需要擺放在明顯的區(qū)域,而功能過(guò)多時(shí),這對(duì)畫(huà)面美觀造成了一定影響。

        如需要對(duì)場(chǎng)景截圖,或是獲得某個(gè)稀有物品、稀有成就時(shí),適當(dāng)運(yùn)用操作對(duì)畫(huà)面簡(jiǎn)化和收起,更能完善在游戲過(guò)程中的體驗(yàn)。

        20180319120659202.jpg


        最后說(shuō)幾句


        游戲設(shè)計(jì)是一份很有趣的工作,過(guò)程中能閃現(xiàn)出很多設(shè)計(jì)師們高超的創(chuàng)意。而游戲這項(xiàng)綜合藝術(shù)從美術(shù)風(fēng)格到設(shè)計(jì)實(shí)用性還有很多內(nèi)容值得探索,作為從業(yè)者對(duì)精品追求是不斷努力的目標(biāo),感謝閱讀共同學(xué)習(xí)進(jìn)步。


        20180319133823557.png

        撰文 ? 周倩茹 
        圖片 ? 網(wǎng)絡(luò)
        責(zé)任編輯:大同

        認(rèn)可我的創(chuàng)作,就鼓勵(lì)一下吧

        0人打賞
        分享至:

        聯(lián)系客服

        故障反饋