設計師必看!如何將色彩正確運用到遊戲中?
色彩心理:
色相環是由原色、二次色和三次色組合而成。色相環中的三原色是由紅、黃、藍,在環中形成一個等邊三角形。二次色是橙、紫、綠,處在三原色之間,形成另一個等邊三角形。三次色紅橙、黃橙、黃綠、藍綠、藍紫和紅紫六色,三次色是由原色和二次色混合而成。右邊的圖片是色相,明度,飽和度之間的關係。同類色30度,對比色120度,互補色180度,鄰近色90度。
色彩情緒:
想要喚起情緒,色彩是有效的方式,下面的場景同一個構圖,運用不同的色彩搭配營造出截然不同的色彩氛圍,也會給人一種不同的心裡感受。
品牌效應:
《超級瑪麗》經典的藍色天空,橘色的瓷磚背景色彩互補,辨識度很高,瑪麗紅色帽子,白色手套,紅色上衣搭配藍色褲子,形成鮮明的對比,經典的配色,有很明顯的品牌辨識度。
《超級肉肉哥》這個遊戲中通過收集繃帶,完成異空間解鎖,使用血紅的肉塊兒作為主角,運用飽和度極高的形象,搭配不同場景的顏色的場景,都與主角顏色形成強對比。
《樂克樂克》女性向的一款休閒遊戲,橘黃主色調,顏色鮮豔,操作簡單,畫風可愛。
《太鼓達人》鼓的配色,場景的顏色,鮮豔豐富,整體高飽和的色調,凸顯出熱烈,熱鬧,歡快的場景。
《陰陽師百聞牌》以冷色調為主,大量的深藍深綠和少量橙色黃色,有種東方壁畫的感覺,介面邊框大多是是降低透明度的藍紫色,配合著淡淡的金色,簡潔又清新,畫面精緻,冷紫色的畫面有明顯的品牌效應。
《冰汽時代》硬核寫實的遊戲,畫面的色彩對比相對會弱一些,視覺上更接近現實。
品牌顏色
視覺層級:
色彩讓層次在視覺上更清楚,像繪畫和電影,導引視點集中在重要的東西上。
《地獄邊緣Limbo》以明度作為焦點
《明日方舟》有色和無色進行搭配將重點資訊用色彩來標識
《機動都市阿爾法》以飽和度作為焦點
進度感:
色彩可以給玩家一種進度感,一種時間或空間改變的感覺。
《風之旅人》利用漸變的場景顏色變化來表達角色的情感變化
《幾何沖沖衝》背景是以彩虹色做排序,而這個設計還有另一個目的就是讓遊戲關卡區分度更大。
主題烘托:
關卡主題賦予顏色
在不同的關卡之間改變背景顏色在視覺上會更有區分感,而且玩家能更容易感受到遊戲的深度和變化。《Smash Hit》這款遊戲就是這樣。
裝備道具品質:
顏色區分裝備等級
從暗黑開始,裝備檔次就按照顏色來區分了,灰白藍金暗綠。目的是讓玩家直接瞭解裝備的檔次,避免在一地裝備的時候無法區分。
色彩心理:
HUE通過收集顏色,進行解密
有的關卡牽涉到快速辨色能力,在短時間內需要辨別出這是什麼顏色,並切換到相同顏色即為通關。
《刺客信條》這款遊戲 血腥動作 刺殺 敵人 目標紅色設定 紅色給人希望(顏色決定情緒氛圍)
還有暖色調和冷色調分別給人的感受是不一樣的:
暖色調:溫暖,溫馨,熱烈,積極,活躍,興奮,明快,生動的感覺。
冷色調:寒冷,陰冷,冰涼,涼爽,穩重,冷靜,安逸的靜態印象。
黃金比例:
日本的設計師馬裡佩也針對色彩的配色提出比例原則 75%、25%與 5%的配色比例方式 ,這個原則跟上面說的一致,兩個顏色各佔75%和25%,剩下的用5%的過渡色來做畫面的協調色,使得主次分明。
舉例說明:
我們在接到一個案子的時候,應根據產品目標來進行判定,比如說產品定位,視覺定位,前期的概念是什麼樣的,目標使用者是哪種型別的。。。等等
明確產品的定位之後,我們開始定關鍵詞,中國風,仙俠,飄逸,等等。
根據關鍵詞總結出主題,色調,元素的相關內容。
然後開始找資料,定下色彩風格意向版,意向背景圖從端遊、影視劇、攝影照片來確定遊戲風格的大基調。
最後的實現的樣子:
《權力的遊戲》深藍色和暗金配色新增紅色戰爭象徵意義的顏色,體現了中世紀戰爭硬朗的概念
《第五人格》配色藍灰色調,加上暗黃色的燭光,營造一種緊張壓抑恐怖的心理。
《陰陽師百聞牌》冷色調為主,降低透明度的藍紫色,配合淡淡的金色,簡潔又清新,充滿了東方特點,夢幻。
《第五人格》注重恐怖,緊張,在陰暗的色調中,活動介面燈光采用鮮明的色彩,不僅體現了節日的氛圍,同時也將恐怖的心理傳遞給玩家。
《刺客信條》色彩運用在裝備品質框上,在深藍色調中,品質色醒目突出,重點聚焦。
《戰歌競技場》抽卡介面,採用扭蛋的形式,在冷棕色調中,暖色的運用舒適,不會太搶眼,介面重點突出,並且生動活潑,沉浸感,代入感十足。
《傳奇》紅色直接切入主題和金色的標題搭配,在加上花瓣飄灑的效果,使中國風介面的形式感宛如真實存在的,把空間關係和氛圍都體現出來。
感謝閱讀!
來源:老司機UI CLUB
原文:https://mp.weixin.qq.com/s/6FkyR8zxWKfLokOGpWsdTg
相關文章
- 如何為Logo搭配正確色彩Go
- 如何在網頁設計中正確應用色彩?網頁
- 老闆該如何正確的犒賞程式設計師程式設計師
- 遊戲色彩101(入門必看)遊戲
- 如何將golang的併發程式設計運用到實際開發Golang程式設計
- 正規化篇 - 如何把函數語言程式設計合理運用到日常工作中函數程式設計
- 【UX設計】如何為你的遊戲選擇正確的字型?UX遊戲
- 如何將斐波那契數列應用到排版設計中
- 好程式設計師Web前端中的js能運用到哪些方面程式設計師Web前端JS
- 3A遊戲的必備工藝! 天美是如何將動作捕捉運用到遊戲中的?遊戲
- UI設計中色彩運用應該注意哪些問題UI
- 程式設計師正確看程式碼的方式程式設計師
- 程式設計師計算私活薪資的正確方式程式設計師
- 將DDD應用到資料庫設計中 - lazypro資料庫
- 程式設計師必看的書-Ruby程式設計師程式設計師
- 程式設計師必看的書程式設計師
- 如何正確的開始用 Go 程式設計Go程式設計
- 如何培養正確的原型設計思維?原型
- 遊戲設計裡的那些色彩應用遊戲設計
- 程式設計師玩連連看的正確姿勢程式設計師
- 趣圖:和程式設計師交流的正確姿勢程式設計師
- 程式設計師必看的書之Java程式設計師程式設計師Java
- 如何將網站的易用性設計運用於遊戲網站遊戲
- ETL、ELT區別以及如何正確運用
- 【UI設計師】你真的瞭解色彩嗎?UI
- 程式設計師必看的書(六)程式設計師
- 程式設計師必看的書(七)程式設計師
- 程式設計師必看的書(八)程式設計師
- 程式設計師必看的書(四)程式設計師
- 程式設計師必看的書(五)程式設計師
- 程式設計師必看的書(九)程式設計師
- 程式設計師必看的書(十)程式設計師
- 程式設計師必看的書(二)程式設計師
- 程式設計師必看的書(三)程式設計師
- 程式設計師必看的書(十二)程式設計師
- 網站設計中網頁色彩靈活運用的重要性網站網頁
- 好程式設計師前端教程-MVC框架的正確構建程式設計師前端MVC框架
- 如何正確讀取RTI中enum