網(wǎng)易的《黑潮之上》今天上線(xiàn)啦！骨頭這段時(shí)間研究了一下黑潮之上的美術(shù)風(fēng)格，發(fā)現(xiàn)他們項(xiàng)目組在場(chǎng)景化UI部分做的很不錯(cuò)，所以就這個(gè)特點(diǎn)和大家聊一聊他們?cè)趫?chǎng)景化UI設(shè)計(jì)哪些地方做得比較出彩。

Part? 1

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

1.玩法影響視覺(jué)語(yǔ)言

《黑潮之上》的美術(shù)風(fēng)格是由世界觀(guān)，玩法還有游戲調(diào)性綜合決定的。

Roguelike策略卡牌，結(jié)合了Roguelike玩法和多分支劇情的全新卡牌游戲。

世界觀(guān)：“黑潮作為人類(lèi)社會(huì)毀滅性打擊的災(zāi)難至今成因不明，于是名為“未來(lái)”的主角不斷輪回到第三次黑潮中企圖拯救世界，但都以失敗收?qǐng)?。最終未來(lái)釋放大招犧牲自己將將另一位少女艾爾莎傳送到了過(guò)去?！?br>

說(shuō)白了，《黑潮之上》其實(shí)就是一個(gè)美少女打牌游戲。

打過(guò)牌的大寶貝們當(dāng)然也知道，牌的外緣是有倒角噠！于是我們可以看到，游戲UI的視覺(jué)語(yǔ)言的外框設(shè)計(jì)也是如此。

2.五彩斑斕的黑

材質(zhì)決定了視覺(jué)的整體配色。這樣也可以很明顯和同類(lèi)競(jìng)品配色區(qū)分開(kāi)（比如方舟是黑色+藍(lán)色）

在這里順便放一張和方舟活動(dòng)UI的對(duì)比，大家就能看出來(lái)加強(qiáng)了鐳射風(fēng)格視覺(jué)之后其實(shí)更突出了《黑潮之上》本身的辨識(shí)度。

3.黑潮具象化：鐳射風(fēng)/蒸汽波風(fēng)格

由字面意思“黑潮”衍生出來(lái)的關(guān)鍵詞：黑色，潮水，異能，都市。配色也是運(yùn)用了黑色結(jié)合亮調(diào)子的鐳射風(fēng)格元素。

在《黑潮之上》我們可以看到近兩年非常火的蒸汽波風(fēng)格，鐳射風(fēng)格材質(zhì)的包裝。

從2017年開(kāi)始漸漸刮起的蒸汽波風(fēng)格，無(wú)論是展覽，還是T臺(tái)秀場(chǎng)，都開(kāi)始大量運(yùn)用。

包括最新的LOL女團(tuán)的海報(bào)中也大量運(yùn)用了這種鐳射風(fēng)格材質(zhì)。

4.視覺(jué)元素貫穿

五彩斑斕的黑視覺(jué)元素非常洗腦。

所以我們可以在游戲的系統(tǒng)UI中大量的看到它們。

從結(jié)算頁(yè)面

到各種彈出頁(yè)面

5.排版和構(gòu)圖

在排版上《黑潮之上》運(yùn)用了最近很流行的“BANNER化”的設(shè)計(jì)理念。整體更注重整個(gè)頁(yè)面的視覺(jué)效果。以英文為大標(biāo)題，背景扁平化，把整個(gè)頁(yè)面當(dāng)作海報(bào)宣傳來(lái)設(shè)計(jì)。

獲得角色這種強(qiáng)展示型界面層級(jí)感和元素更強(qiáng)，畢竟是和“氪金”有關(guān)的～

右側(cè)的英文標(biāo)題支撐起整個(gè)頁(yè)面。背景運(yùn)用了和海洋有關(guān)的“洋流”線(xiàn)框元素。注意看字體的比例和節(jié)奏感。

左側(cè)角色名稱(chēng)和小隊(duì)名稱(chēng)也都整合為視覺(jué)的一部分?？梢哉f(shuō)起到了整個(gè)頁(yè)面的“點(diǎn)睛之筆”的作用。

Part? 2

場(chǎng)景化UI

場(chǎng)景化UI不同類(lèi)型

場(chǎng)景化UI的特點(diǎn)主要是營(yíng)造出更強(qiáng)的空間感，讓玩家在體驗(yàn)游戲的時(shí)候可以快速帶入情境。

在這里大家可以牢記一個(gè)場(chǎng)景化的萬(wàn)用公式：

場(chǎng)景化的具體體現(xiàn)=以桌面（或某空間）為場(chǎng)景+主光源+物件之間相互有聯(lián)系+故事感表達(dá)。

我們找?guī)讉€(gè)做的比較好的例子。

1.桌面展示型UI

在我們的課程中，有給大家舉例場(chǎng)景化UI設(shè)計(jì)最常見(jiàn)的形式--桌面展示型。

這種場(chǎng)景化UI的核心要素就是運(yùn)用了在桌面展現(xiàn)我們很常見(jiàn)的物件，比如書(shū)本，雜志，菜單等，同時(shí)在背景和周?chē)奈锛鲆恍┢渌P(guān)聯(lián)物件的穿插關(guān)系。

商店畢竟是需要讓大家來(lái)氪金的，所以看的出相比其他頁(yè)面來(lái)說(shuō)做的更精致一些。整體的包裝更像是一本期刊雜志，每一頁(yè)好像都在和我們說(shuō)：“買(mǎi)它?。。　?/p>

背包UI相比章節(jié)UI，“紙”底框的面積展現(xiàn)得更大，這樣可以更突出物品以及物品狀態(tài)。

在這里大家注意，場(chǎng)景化設(shè)計(jì)也需要結(jié)合功能表現(xiàn)。比如背包UI底部有一個(gè)深顏色的頁(yè)簽層級(jí)，從整個(gè)畫(huà)面的黑白灰關(guān)系上加強(qiáng)了頁(yè)簽的存在感。

還有一個(gè)有點(diǎn)像檔案文件夾式的設(shè)計(jì)，這樣的設(shè)計(jì)更能和本身任務(wù)的包裝功能結(jié)合。

2.場(chǎng)景化UI：交互物件

郵箱UI設(shè)計(jì)

老二次元玩家應(yīng)該都對(duì)貓有著不可抗拒的抵抗力～在郵箱設(shè)計(jì)這塊把郵箱設(shè)計(jì)成了一個(gè)有點(diǎn)交互感的小郵筒，讓大家對(duì)于郵箱更有期待。

在這里，需要把郵筒想象為在場(chǎng)景里的物體。

在郵箱的設(shè)計(jì)這塊，之前還有另一款游戲《動(dòng)物森友會(huì)》有類(lèi)似有趣的交互設(shè)計(jì)。

抽卡UI設(shè)計(jì)

在抽卡這塊的設(shè)計(jì)，結(jié)合了現(xiàn)在很流行的盲盒機(jī)的形式。

包括從抽卡，到卡包從“抽卡機(jī)”出來(lái)，都參考和還原了現(xiàn)在的盲盒機(jī)的流程。

同時(shí)大家可以對(duì)比一下UI里的設(shè)計(jì)，游戲里的抽卡設(shè)計(jì)把熱銷(xiāo)主推的卡包設(shè)計(jì)成屏幕里的主海報(bào)，右側(cè)為切換其他的卡包的切換按鈕。

在咱們自己設(shè)計(jì)UI的時(shí)候，也是可以用這種觀(guān)察生活中物件的方法，巧妙地和UI設(shè)計(jì)結(jié)合起來(lái)。

從獲得卡包到獲得角色，大家注意看都有用同一個(gè)“五彩斑斕的黑”的視覺(jué)元素做貫穿。

3.場(chǎng)景化構(gòu)圖：組合構(gòu)圖

主UI界面/角色信息UI

主UI界面的包裝更像是角色的家，所以在場(chǎng)景展現(xiàn)上更突出了背景溫馨的氛圍。

為了讓右側(cè)的主UI模塊顯得不這么突兀，還用異型設(shè)計(jì)來(lái)增加了模塊之間的聯(lián)系。

角色信息頁(yè)面也運(yùn)用了場(chǎng)景化設(shè)計(jì)，整個(gè)場(chǎng)景更像是一個(gè)小的研究實(shí)驗(yàn)室。

備戰(zhàn)實(shí)運(yùn)用了全息投影的設(shè)計(jì)，科技感滿(mǎn)滿(mǎn)～

4.主游戲UI

剛才我們也了解到，《黑潮之上》其實(shí)是一個(gè)美少女打牌游戲。

所以我的卡組這里設(shè)計(jì)成了一個(gè)卡包。

注意看下方牌設(shè)計(jì)成了有弧度，更符合人們一手拿牌的視角。

場(chǎng)景UI中的光影運(yùn)用

光影在場(chǎng)景UI中就如同靈魂一般的存在。

在《黑潮之上》游戲中，有設(shè)定正常世界和異能世界。所以在設(shè)定上，正常世界的光都是極度凸顯溫暖和治愈的感受，異能世界更偏水下光的效果，偏冷。

1.什么是光影

所謂光影，就是光效和影子。

通過(guò)一張圖來(lái)認(rèn)識(shí)光影，只要是場(chǎng)景或者物體，必然受到光效的影響，同時(shí)在光照之下形成影子。

2.光的類(lèi)型

一般光分兩大類(lèi)，一種是自然光，另一種是人為光。

如上圖所示，常用到的光效分五種，分別為日光、夜晚、夕陽(yáng)、陰天和火光戰(zhàn)斗氣氛。

從主UI中，我們可以看到場(chǎng)景中的光線(xiàn)用的就是這種夕陽(yáng)光線(xiàn)。

我們通過(guò)觀(guān)察自然界中的夕陽(yáng)，這是最治愈的光線(xiàn)。

整體色溫是比較溫和，光的邊緣有偏橙色的交接光。

我們?nèi)粘Ｉ钪械呐_(tái)燈屬于“人造光”，也是一個(gè)運(yùn)用到我們的UI設(shè)計(jì)中很好的道具。

在這里科普一個(gè)關(guān)于色溫的小知識(shí)：

色溫是表示光線(xiàn)中包含顏色成分的一個(gè)計(jì)量單位。從理論上說(shuō)，黑體溫度指絕對(duì)黑體從絕對(duì)零度（－273℃）開(kāi)始加溫后所呈現(xiàn)的顏色。黑體在受熱后，逐漸由黑變紅，轉(zhuǎn)黃，發(fā)白，最后發(fā)出藍(lán)色光。當(dāng)加熱到一定的溫度，黑體發(fā)出的光所含的光譜成分，就稱(chēng)為這一溫度下的色溫，計(jì)量單位為“K”（開(kāi)爾文）

同時(shí)光也會(huì)傳遞出不同的心理感受，通常在生活中大家應(yīng)該很有體會(huì)～

光源色溫不同，帶來(lái)的感覺(jué)也不相同。高色溫光源照射下．如亮度不高就會(huì)給人們一種陰冷的感覺(jué)；低色溫光源照射下，亮度過(guò)高則會(huì)給人們一種悶熱的感覺(jué)。色溫越低，色調(diào)越暖（偏紅）；色溫越高，色調(diào)越冷（偏藍(lán)）。

3.光影的運(yùn)用

在這里咱們展開(kāi)來(lái)聊一聊場(chǎng)景UI中的光影，給大寶貝們剖析一下大廠(chǎng)的光影套路。

以章節(jié)UI為例，我們可以觀(guān)察到畫(huà)面中通過(guò)光影的表現(xiàn)，突出了桌面的空間感。

（1）首先先觀(guān)察下黑白關(guān)系，大家觀(guān)察一下畫(huà)面里光影的大致位置。

（2）得出一個(gè)大致這樣的一個(gè)光影的輪廓。同時(shí)我們可以觀(guān)察到輪廓形狀會(huì)起到一個(gè)視覺(jué)引導(dǎo)的作用。

（3）大家可以注意看看光影邊緣的位置，也是有虛實(shí)關(guān)系的。

“實(shí)”的部分為最需要讓大家注意到的部分，“虛”的部分為不太重要的邊界部分。

（4）光在整個(gè)頁(yè)面里的分布，可以清晰地看到光是有層次的。

標(biāo)注1的部分為畫(huà)面最亮的高亮區(qū)域和光斑，標(biāo)注2～標(biāo)注4的光是呈一個(gè)遞減的表現(xiàn)。

所以綜合來(lái)看，光影在整個(gè)界面里起到了突出視覺(jué)中心的作用，同時(shí)也讓本來(lái)較平的俯視角提升了立體感和空間感。

2020/11/19

葉子學(xué)堂讀書(shū)筆記

骨頭老師為大家復(fù)盤(pán)一下今日份知識(shí)點(diǎn)噢～

《黑潮之上》作為網(wǎng)易爸爸新上線(xiàn)的游戲，在美術(shù)表現(xiàn)方面下足了功夫：

1. 美術(shù)風(fēng)格受世界觀(guān)影響，提煉出屬于自己游戲調(diào)性的視覺(jué)元素貫穿，“黑潮”關(guān)鍵詞具象化；

2. 排版和構(gòu)圖“BANNER化”設(shè)計(jì)；

3. 場(chǎng)景化的具體體現(xiàn)=以桌面（或某空間）為場(chǎng)景+主光源+物件之間相互有聯(lián)系+故事感表達(dá)；

4. 光的類(lèi)型：一種是自然光，另一種是人為光，光也會(huì)傳遞出不同的心理感受；

5. 光影的運(yùn)用：確定黑白灰->光影的輪廓->光影輪廓的虛實(shí)->光的層次。

6. 光影在整個(gè)界面里起到了突出視覺(jué)中心的作用，同時(shí)也讓本來(lái)較平的俯視角提升了立體感和空間感。

總? ?結(jié)

總而言之，《黑潮之上》的美術(shù)包裝基本是通用UI用五彩斑斕的黑作為核心要素貫穿始終，同時(shí)在各種付費(fèi)點(diǎn)UI界面用心設(shè)計(jì)場(chǎng)景化，達(dá)到了辨識(shí)度和視覺(jué)效果的統(tǒng)一。

大家還有什么想要骨頭分析的游戲，可以在評(píng)論區(qū)留言！