用導演思維中的分鏡手法談UI創作

導言：隨著現在遊戲行業精品化的趨勢越演越烈，對於我們UI設計師而言，要求相應的也越來越高，這裡舉例以電影為藍本，那麼在電影抵達其最終效果的過程中，最重要的事情就是發現一種想法，並在整個製作過程中徹底貫徹它。肯·丹西格將這種想法稱為“導演思維” 那麼對於我們UI來說也是一樣，同樣需要傳達給玩家一種想法並且貫穿始終，這也就是我們想說的：

UI設計中的導演思維。

遊戲相對於電影來說,都是作為視覺和聲音的混合藝術,怎麼讓遊戲能夠和電影一樣具有更強的代入感和沉侵感?

這篇文章是從鏡頭的角度出發,研究多角度的分鏡和豐富具有創意的構圖能讓視覺效果以及整體遊戲體驗帶來怎樣的動感和變化。


比如當我們體驗死亡擱淺時，大片鯨魚擱淺海灘 那種大全景給我們孤獨、寂寥的感覺，隨著鏡頭緩緩的往上抬.天空漸漸浮現遊戲logo 相信這一幕給了玩家很大的震撼。


再比如journey中的開頭，當小人慢慢走上山坡-鏡頭拉遠 聖山 孤獨 神聖 荒漠 氛圍一下就出來了。

這裡舉例所運用的都是在電影中常用的大遠景鏡頭，通常用於表現整體的環境氛圍，地貌狀況、等狀況...

其實在一些遊戲中為了加強玩家的代入感，也已經在UI中運用到這種大遠景切換的效果來加強代入感。


百聞牌中就用遠景的升降鏡頭的方式讓玩家很好的帶入進遊戲，彷彿直接置身於這個場景當中

01. 背景前提：遊戲鏡頭語言的趨勢

對於遊戲而言，不同的鏡頭視角都可以表達不同氛圍、情緒和畫面張力。

隨著大型遊戲越來越強調情緒的表達，表現更多的沉浸感。在鏡頭語言和視覺效果上針對現在的流行趨勢和以往相比出現了很大的不同。


“我們想呈現感同身受的恐怖，彷彿是你自己與殭屍近身遭遇，而只有這種視角才能辦到”


其實這裡所運用到的原理就是鏡頭越接近角色玩家代入角色的感覺就越多所看到現在越來越多的遊戲都開始運用這種越肩視角的故事性鏡頭。

02.故事性鏡頭對UI的影響

實際中圍繞著突顯故事性表達的趨勢上，離角色越來越近的鏡頭語言對我們UI設計和視覺設計語言又有什麼影響呢

這裡我們以戰神舉例

傳統遊戲視角中，UI處在整個遊戲畫面的外圍，利用UI視覺上武器造型的關聯性來體現故事性，整體畫面視角多為遠景，這樣的方式體現了以一殺百奎爺的凶悍，奎爺這時候還是一個“神” 它所向披靡，所以遊戲設定了海量敵人 大量大範圍的攻擊 所以把鏡頭拉遠，以帶來整個戰場的廣視角 。而UI是遊離於畫面之外的，以一種“控制器”的形勢出現。奎爺在畫面中也顯得很小，玩家更像在操作玩具或者木偶，而非扮演角色

玩家與“遊戲”本身還是具有一定的距離感。那麼在UI設計中我們會更加偏向用相關視覺元素或者造型來側面輔助來體現遊戲的世界觀和文化表達，比如戰神中的奎爺的斧子造型元素。


在新一代的戰神4中講述的則是更為人性化的故事，更多體現了奎爺做為“人”或者說一個“好父親”的一面。

所以江湖人稱“戰神與他年邁的老父親”。為了這個故事性的表達，遊戲採用了越肩視角加一鏡到底的方式，這樣的做法使我們可以像看電影一樣對奎爺進行細緻入微的觀察，也使玩家更加親近角色。


UI上為了整體遊戲的代入感和故事性，也相應的採用扁平化，半透明，弱對比去進行設計，儘量在視覺化的範圍內不破壞整體畫面感，玩家能夠更多的帶入奎爺的內心世界，體驗到奎爺的視角感受。


但同時也帶來的一定的弊端，那就是玩家的視野受限，非常不容易看到身後的敵人。

為了解決這個問題就需要從UI層面就能給玩家進行預警，以防被繞後攻擊。可以看到在角色周圍有很多這種提示性的箭頭，箭頭的變色表現為敵人靠近危險預警。同時聲音的提示和輔助也是特別有效的方式之一。在戰神中“兒子”還會用語音不停地跟玩家互動，用聲音與UI相結合的方式來以提示身後敵人的情況。


這方面死亡擱淺則做的更為巧妙，提示與指向等功能性UI通過與世界觀本身物件互動來表現，降低了對整體畫面的干擾，進一步強化了遊戲的沉浸感。


其實聲音也好，融入世界觀的互動式道具也好，為了應和未來的趨勢，達到更好地遊戲互動體驗。我們設計師關注的將不止是鏡頭語言或者視覺UI層面單一維度的表現，更強調從多維度多方向協同作戰去體現整體故事性的表達。

03. UI中常見的幾種鏡頭角度及運用範圍

接下來講一下設計的實際案例中，不同的鏡頭角度和設計原理是怎樣的。

平視：遊戲中最為常規的視角型別，這也是我們在設計ui中較為常用的視角  這種平行視角與玩家的整體感受相親，資訊層級化表達也較為清晰 ，所以也是最常見的運用範圍最廣的，這裡就不過多贅述了。


俯視：特點是視角在人物頭部或主體的頂部以上，層次和視野比較清晰。常用在策略類遊戲 或者需要玩家做出理性、客觀的指令時。使玩家有上帝視角的感受或者運籌帷幄之感。接下來用實際的案例看看這種視角給玩家所帶來的感受。


仰視：特點是視點在畫面人物的腰部或主體的下半部以下。形象顯得高大。給玩家整體感受是對方和玩傢俱有一定的地位或者階級差異，具有一定的崇拜或者重視之感。

04. 鏡頭的運動方式以及UI中的運用

其實鏡頭的運動方式萬變不離其宗，都是通過以下幾個基本原理來進行排列組合的運用。

拉鏡頭


推鏡頭


跟鏡頭（《小飛俠》故事板）


搖鏡頭


升降鏡頭（《歲月的童話》故事板）


組和鏡頭（《紅の豬》故事板）


說了以上基本原理，下面我們直接來看看在實際的UI設計中怎麼去運用這些鏡頭運動的方法的？

《全境封鎖》中，就通過鏡頭的運動來聚焦角色換裝的部位

玩家在視覺體驗上也會更加集中，代入感更強，能夠聚焦到最有用的資訊層級上。


開場中主角下飛機低視角鏡頭跟著人物鏡頭的運動，使cg轉場和畫面及UI表現過渡的非常自然。


通過推鏡頭進一步直觀的感受到換裝的差別以及資訊層級


進一步的往主角聚焦部位推鏡頭 增加體驗感


鏡頭推拉來切換換裝的資訊層級和焦點


死亡擱淺中的升降鏡頭


平安京中人物跟隨推鏡頭向外景切換推鏡頭


DISORDER切換資訊層級的鏡頭運動


P5中有名的鏡頭跟隨主角與UI結合的典範



以上不同的案例表現看的出，

通過鏡頭基本運動原理之間的組合和運用，可以極強的增加了玩家對於整體視覺表現和遊戲互動上的代入感。

希望從鏡頭運動的角度上能夠帶給大家更多的靈感，創作出更多的可能性。

結語

以上我們從鏡頭的角度以及運動方式的維度去進行了鏡頭的分析和講解。

相信大家應該可以看得出來，在越來越講究精品化路線的今天，設計好一個系統介面已經不單單是視覺或者互動層面去進行單方面的創作了，而是需要我們設計師更加具備導演思維，能夠從全域性的角度更高的維度去進行整體的包裝和設計。

同時對我們的團隊要求也更加全面，更多的是需要我們VX動效、TA、3D場景，人物模型,音效等多維度的同學共同為了精品化，故事化的道路進行協同化的作戰，而這也使身為設計師的我們需要思考的更加全面，能夠更多的站在全域性的角度去深挖整體的概念想法以及基礎原理，通過多方面的協同和創作來進行整體方向上的推進。

在這裡列舉了以鏡頭的運用為整體故事性表達所帶來的作用，希望能給大家在未來的創作中帶來一定的靈感和方向，謝謝大家。

（部分圖片來自網路）

編輯：hulk yoli
來源：光子設計師原創
原地址：https://mp.weixin.qq.com/s/HAgpvSiQ8DWsrmAhcH70jg