遊戲圖示的設計跟其它應用的圖示設計有何不同?

遊資網發表於2019-03-26
知識分享人:洋芋君

遊戲圖示的設計跟其它應用的圖示設計有何不同?
深度遊戲迷,獨立遊戲愛好者/開發者

寫在作答之前。

在看過各位答主的答案過後,感覺題主的提問和大家對於問題的理解有點歧義:即 遊戲圖示是指應用程式入口的圖示?還是指遊戲程式中的,作為圖形控制元件存在的圖示?

各個回答顯然不妥,因為他們都屬於圖示設計的範疇。這裡乾脆我就二合一,根據自身這幾年積累的經驗來回答一下這個問題,希望答案能夠幫助到答主和者所有對遊戲設計感興趣的同行們。

關於圖示:

在探討遊戲圖示之前,首先我們要去大致瞭解一下什麼是“圖示”(icon)。

根據維基百科的定義,我們現在所談論到的“圖示”(icon),廣義上一般是指計算機圖形互動介面中的一種象形圖(Pictogram)或者表意字(ideogram)。無論它是一種怎樣的形態,其目的都是為了是幫助使用者更好的更方便的熟悉和使用複雜的計算機系統。

計算機行業的不斷髮展,導致了人機互動行為也變得多型化。而圖示作為圖形使用者介面的控制元件之一,其定義在現在看來,提供便利性的“目的”似乎已經不足以描述他了。從產品品牌效應、使用者的體驗感知、再到創作者想要傳達的文化內涵,或者是其他更多的資訊,已經讓小小的圖示變得越來越具有使命感。

嚴格來說,遊戲(程式)是隸屬於軟體這個大分支的。不過因為其特殊的目的性,已經被大家廣泛的認為是“第九藝術”,而非單純的計算機軟體。既然是軟體,其圖示的設計也就不應該和其他普通的軟體對立開來看待。從產品的角度來說,一個完整的軟體產品設計,不僅僅包含了應用程式入口圖示的設計,更有非常多的圖形互動介面圖示(控制元件)設計。同時,它們的所被賦予的“使命”是不同的。它們既要遵循既定的設計規範(美學程度上的和開發環境規範上的),還要符合產品本身的價值所在。

進一步瞭解:

讓我們先看一下各位答主都注重的“應用程式圖示”吧。

作為軟體的門面和入口,應用程式圖示自然要為軟體品牌本身而承擔更多的責任。所以在設計功能性上,它獨立於軟體本身(不需要從互動體驗層面考慮,更多的是從品牌和內容上考慮),且要貼合受眾(易識別,有特點)。

題外話:相信各位射擊屍童鞋,在給應用程式圖示進行設計的時候非常糾結和頭疼。Boss和產品們要求可能會千變萬化,不斷的推翻重來足以讓你再幹幾個難忘的通宵。化妝品的市場有多大多深,那麼應用程式圖示設計的坑也有多大多深

普通商業應用程式的圖示設計,一般都會包含有強烈的商業品牌元素(包含品牌Logo,顏色,造型等等,甚至是多者的糅合),最簡單粗暴的例子就是微信支付和支付寶。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

遊戲圖示的設計跟其它應用的圖示設計有何不同?

作為國內兩大移動支付應用,其特點鮮明的圖示已經成為了一種能讓人產生條件反射的設計,即使它變形成其他形狀。以上圖片來自 Iconfont-阿里巴巴向量圖示庫

此外還有Instagram的相機,Facebook的“F”,Adobe Photoshop 那標誌性的“Ps”等等,相信在座的各位可以舉出更多的例子。

不管各位舉出了多少例子,他們應該都有一個共同點:無論這些產品怎樣更新換代,品牌的核心視覺元素都是不會輕易做出改變的。這是因為適當視覺上的刺激可以直接引起大腦聯想:當一個品牌的核心視覺元素合理的出現在入口圖示上的時候,大腦的直覺就會告訴你關於這個軟體程式的一切。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
從左至右分別為ins,facebook和ps的仿製圖示,圖片來源於easyicon.net

所以一款合格的應用程式圖示設計,應該圍繞品牌的標誌性或者核心的視覺元素來進行設計。遊戲的應用程式圖示也亦如此。

不過在繼續往下討論之前,有一些細節要稍微提一下:

下面三幅圖,分別展示了暗黑破壞神3 在各個遊戲平臺上的入口表現形式:

遊戲圖示的設計跟其它應用的圖示設計有何不同?
Switch版本的暗黑破壞神3 永恆之戰版(最左上) ,其使用含有Diablo頭顱的圖片作為了遊戲的入口。圖片來源於網路

遊戲圖示的設計跟其它應用的圖示設計有何不同?
PlayStation版本的暗黑破壞神3 奪魂之鐮正在下載中。您可以看到圖片裡有馬薩伊爾和他的標誌性的雙鐮。圖片來源於網路

遊戲圖示的設計跟其它應用的圖示設計有何不同?
圖片來自PC平臺的Diablo 3應用程式圖示 (暗黑破壞神3)二者的顏色區別,可以讓所有暗黑3玩家迅速聯想到 Diablo的赤色地獄怒火 以及馬薩伊爾的冰冷靈魂之藍

從上面的對比圖可以看出來,不同平臺對於遊戲應用程式的入口設計標準要求不一,一般主機平臺(PlayStation,Nintendo Switch,Xbox等等),出於美觀的需求,往往會使用符合設計標準的遊戲的發行封面圖片作為入口。而部分掌機、PC、iOS等裝置,則會要求開發者必須使用符合操作平臺標準的圖示來作為程式入口。  遊戲入口的設計標準隨平臺變動而變動,可以是封面圖片,也可以是圖示。而圖片(image)和圖示(icon)的本質區別,除了程式層面屬性的不同外,個人認為在於前者是一種具象的表現,後者是抽象的表達。設計行外人,通常會把圖片和圖示混為一談,這裡務必請大家區分開來。後文著重討論的內容,都將以“圖示”作為重點。

遊戲應用程式圖示的核心的設計視覺元素,相對於普通應用程式來說,是大同的。小異之處在於遊戲本身的品牌表達會更為開放,因為遊戲程式本身注重感性表達,訴說或感受,而普通應用程式則理性一些,其更注重功能,服務體驗和價值。

題外話:從某種程度上來說,拋開能力差異,遊戲介面設計師的設計壓力應該會遠遠小於商業軟體介面設計師,因為遊戲介面設計起來,更感性,更隨意一些...

下面是我挑選的一些應用程式的圖示範例,截選自俺的iPhone ,OS:iOS12:

遊戲圖示的設計跟其它應用的圖示設計有何不同?


這裡就不單獨介紹每個程式了,基本上大家都知道,不知道的自行搜尋。

除了我列舉到的,基本常用的應用程式圖示,基本都取自於品牌Logo或者是Logo的變種,用色更是脫不開各個品牌經典的規範色。iOS一些原生APP(例如Facetime ,訊息,聯絡人等等)不在本次討論範疇內,因為他們實際上是屬於“軟體內部”的圖示。總的來說就是十分嚴肅。

下面是一些遊戲應用程式圖示的例子,擷取自俺的電腦,OS:Win10,size:256*256 px

遊戲圖示的設計跟其它應用的圖示設計有何不同?

從上至下,從左至右分別為:

  • 巫師1  (The Witcher),遊戲圖示選用了獵魔人狼派的標誌性紋章作為圖示的主體
  • 上古卷軸5 天際 (The Elder Scrolls V  - Skyrim),圖示中的logo是帝國(遊戲中極為重要的勢力)的象徵
  • 守望先鋒(OverWatch),圖示中採用了守望先鋒組織(遊戲中設定的一個特工組織)的Logo
  • 旁觀者(Beholder),遊戲圖示中,那個回頭邪魅一笑的人,是主人公卡爾的形象
  • 地獄廚房(Overcooked),圖示中大鼻子小眼睛的胖子形象,源於遊戲中的玩家預設廚師形象
  • 人類:一敗塗地(Humn:Fall Flat),圖示選用了 Level1 的莊園場景,其典型的軟綿綿小人雕塑是此遊戲最大的亮點
  • 英雄薩姆3(Serious Sam 3),玩過遊戲的都知道,圖示中是Sam的標誌性武器之一:末日炸彈,同時也是Sam 的專屬Logo
  • 我的世界(Minecraft),圖示採用了遊戲中最為常見的土塊作為背景
  • 安琪拉之歌(Aquaria),圖示的中的形象是遊戲主角Naija妹子的側臉頭像


大家對比之前的應用程式圖示也會發現,遊戲圖示的用色,形狀可以說是五花八門。但是這並不會影響到玩家對於遊戲內容的感受。相反,玩過相應遊戲玩家反而能夠輕易的指出圖示的元素出自哪裡。整體感覺輕鬆活潑.

什麼?你要對比iOS的遊戲圖示麼?沒問題:

遊戲圖示的設計跟其它應用的圖示設計有何不同?
這裡也在不逐一介紹各個遊戲了,以免有廣告之嫌

總之,遊戲應用程式入口圖示選擇表達方式的來源也是多樣化的,靈活的它既可以是源於品牌Logo本身,也可以取自遊戲的實際內容。

此外,在迭代更新方面,遊戲應用程式圖示相較與普通應用程式圖示來說,其形式上也會更加隨意一些。

Instagram的程式圖示變遷(2012~2016),體現了介面設計界由擬物化到扁平化風格變化的趨勢,但是不管怎麼變化,相機的元素不可少。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
圖片來源於極客公園 geekpark.net

商業化的應用程式圖示設計,在設計時必須走在行業前沿。除了應付符合平臺最新的設計規範外,與時俱新的設計風格變化,會讓使用者感知到產品是在不斷成長和成熟的。最明顯的例子當屬iOS6及之前版本 到 iOS7 和之後的過渡:擬物風格(2007~2012)向扁平風格(2013 至今)發展,幾乎也在一瞬間,各大廠商也紛紛做出了屬於“時代變遷”的設計風格調整。而反觀遊戲的應用程式圖示設計,除了低位到高位的變化外(模糊到清晰),鮮有被設計潮流風格主導的情況發生。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

左邊展示了雲霄飛車大亨(RollerCoaster Tycoon 1999 ~ 2005)歷代的圖示變化,右邊,則展示了狙擊精英(Sniper Elite 1998 ~ 2017)系列的歷代圖示變化:

遊戲圖示的設計跟其它應用的圖示設計有何不同?

這兩個圖示放在一起,玩家用腳後跟都能知道這是啥遊戲(Fallout  1997  /  Fallout 4  2015)無論是核戰還是嗶嗶小子,都是輻射系列題材的經典體現。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

相對保守的,無主之地三部曲(Borderlands 2009 /  Borderlands2 2012 / Borderlands: The Pre-Sequel 2014)則統一採用了貫穿所有故事線的 The Vault (外星寶藏)的Logo作為遊戲圖示核心元素。

這也就是我前面所說的遊戲本身的品牌的開放性:不同版本之間圖示設計可以是連續的,也可以是破碎的。

相反的,如果在應用程式圖示設計的時候不能圍繞這個核心思想來進行設計,那麼給遊戲品牌帶來的影響也會是非常大的。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
安卓端  傳奇類遊戲的 應用程式圖示搜尋結果(部分截圖) 來源於某安卓市場

經典網遊《傳奇》,作為一款在老一代網民心中“不可磨滅”的網咖必玩神作,至今已經成為了各大國內遊戲開發商的必打的“情懷牌”,許多廠商紛紛推出了各自各具特色的類傳奇遊戲。圖示的內容沒有一個不體現傳奇經典元素:屠龍刀、麻痺戒指、PC端經典的“龍”字icon造型等等。可笑的是,這些元素確實是來自遊戲本體麼?這些內容上的同質化的遊戲,大多沒有能夠真正體現“自己版本”所獨特的遊戲元素。(能指望這些打著情懷牌圈錢的換皮遊戲有什麼精彩突出的內容呢?)面對海量的同質化內容的競爭對手,各大開發者無奈的只能在遊戲應用圖示上再打上自家的運營平臺Logo來強調區別。

題外話:低質量的應用程式圖示是各個介面設計師難以忍受的:模糊的的畫素邊緣、失真的摳圖以及蹩腳的合成、詭異的圖示配色.....看到就想嘔吐。大眾審美水平提升任重道遠....請各位老闆和產品/策劃們,放下你們卑微的審美和不著邊際的拍腦瓜想法,讓專業的設計師來完成圖示設計....也請各位偽設計師(懂PS,懂拖素材合成的美工)不斷提升自己的審美和美術素養,讓自己變得更有價值...

遊戲圖示的設計跟其它應用的圖示設計有何不同?
遊戲圖示來源於某安卓市場,圖示內容與文章無關,僅供觀賞

環視現今國內外的一些遊戲市場,大量同質化低質量的遊戲充斥其中。這些遊戲大多自身是缺乏靈魂的,也就是所謂的沒有一個核心元素能夠支撐一個遊戲內容皮囊,卻又想要在寸土寸金的螢幕中博得使用者的眼球,只能靠無所謂的不明真相的帥哥,爆乳顏美的美女(可能或者根本不會在遊戲中出現的元素),甚至是“借用”知名遊戲的經典元素,來作為“核心內容了”。玩家也許會被誤導誘惑下載進入遊戲,從而來給這些遊戲“增量”。從大眾非硬核玩家角度來說(這也是玩家群體中比例佔有最大的一部分),Who TM Care,玩的爽就行。

這裡套用下面 遊研社的回答再好不過了:

遊戲圖示的設計跟其它應用的圖示設計有何不同?

可能多是策略型別的遊戲,COC火起來了,其他廠商跟風,表面上大家覺得似乎側臉怒吼是潮流,實際上,COC那個經典的黃頭髮大鬍子蠻兵的形象是每個COC玩家牢記在心的:玩家先通過遊戲知悉了這個經典常用兵種,退出遊戲後玩家看到圖示,這一個形象立馬就會反饋回玩家腦子中,知覺會告訴玩家這是什麼角色,再配合廠商的洗腦廣告宣傳(連線至B站,多P,廣告中無時不刻出現黃鬍子蠻兵的形象),一提到黃鬍子蠻兵,玩家便會容易聯想到COC遊戲本身。但是其他遊戲圖示內容能100%確定都和遊戲內容實際內容有關麼?COC做到的完美閉合反饋環,也許到了其他遊戲中,就只能成為一個斷掉的點。反饋環無法閉合,也就是大家所說的“沒抄到點子上”。

從遊戲從業者的角度來說,不良的應用程式圖示設計,就像像長在身上的良性腫瘤,不痛不癢,也許只有碰到了才會感覺不舒服或者難受、也許有一天腫瘤會惡變,成為是遊戲品牌發展中的慢性殺手,終有一天會成為品牌形象崩塌,壓死駱駝的最後一根稻草。

綜上

  • 遊戲和普通應用程式的入口圖示設計,都是和產品品牌內容本身相輔相成互不分離的(閉合反饋環)....內容的體驗會反饋至圖示,圖示的視覺內容進一步加強了使用者/玩家對於產品/遊戲的認知和記憶。
  • 無論遊戲還是普通應用程式,其自身充盈的內容都會是圖示良好設計的必要條件。
  • 普通商業應用程式的圖示風格往往是整個商業設計領域、視覺設計潮流的風向標;而遊戲應用程式的圖示設計則更注重於自身的情感訴求表達或者感受,基本不會受到外界的影響。
  • 遊戲沾上了“藝術”二字後,少了一些嚴肅性,多一些活潑性。圖示設計亦如此。
  • 同質化的產品或遊戲,想要在應用程式圖示設計上做功夫,不如先在內容上做功夫。一切以點選率/曝光率為主要目標的應用圖示設計,都是剝離了產品本身的流氓設計,背後必定是一個虛無膨脹的遊戲/產品泡沫。真正充實的遊戲/好用的產品,無需糾結拿任何遊戲核心元素/品牌視覺元素來作為圖示設計主體,它的每一根毛髮,從內到外都散發著產品自己的思想和感情,都能深深抓住玩家/使用者的內心。正所謂酒香不怕巷子深也....


下面,我們把目光投在大部分答主都忽略的,圖形介面控制元件層面的“圖示”之上。

圖示作為圖形介面(Graphical User Interface)的重要組成部分。其自身的意義和價值,以及綜合設計難度,都大於前文所講的“應用程式入口圖示”。每當使用者開啟遊戲/普通應用程式,圖示就開始潛移默化的影響著每一個看到它的人。 上文我們提到過,應用程式入口圖示的設計模式與遊戲與普通應用程式相比是“大同小異”的。相對來說的話,圖形介面的圖示設計模式則可稱得上是“小同大異”了。

小同

因為二者同屬於軟體大家庭,所以用“小同”來形容在合適不過,我認為從設計層面來看,小同”可以濃縮概括為兩個要點:

  • 一致性
  • 易識別性


一致性,是指相同功能型別的圖示都要遵循既定的設計規則。這個規則包含但不限於造型風格、用色、佈局大小以及型別劃分。通常我們都會稱某應用程式內的系列圖示為“一套圖示”,這裡的“一套”,即是一致性的體現。

題外話:通常來說,一致性的規則如何訂製,都是由產品誕生前(或者版本迭代前)最初的定位規劃主導的,也就是說,不管是遊戲還是普通程式,只要風格定奪好,在版本計劃內一般是不會出現一致性規則變動的。(推翻重來不算,那叫重新立項好麼?那位設計師你坐下,我知道你連續加班很辛苦,但這也是為了我們公司著想嘛....哎喲,打人啦.....!)

遊戲圖示的設計跟其它應用的圖示設計有何不同?

Tumblr 的iOS端應用截圖,位於資訊卡片上的圖示(綠色框內,線性圖示)和底部導航欄中的圖示(黃色框內,形狀圖示)儘管二者的大小,風格上都不相同,但是各自功能體系內,卻是一致的

遊戲圖示的設計跟其它應用的圖示設計有何不同?

塞爾達傳說- 荒野之息(The Legend of Zelda - Breath of the Wild)的揹包介面的截圖,圖中的道具導航欄圖示(黃框)和道具欄的道具圖示(綠框)互相風格差異懸殊,但是各自風格卻一致

遊戲圖示的設計跟其它應用的圖示設計有何不同?

魔獸世界(World of WarCraft)巨集編輯器圖示選擇頁面的截圖合集。玩過魔獸的童鞋應該能做到看圖示識技能/道具了,看似複雜的遊戲圖示其實規則定義十分的明確嚴謹,譬如奧術紫,邪能綠,冰霜藍等等,而且圖示用色幅度適中:即使圖示排列凌亂,整體看上去用色範圍不會跳躍太多

遊戲圖示的設計跟其它應用的圖示設計有何不同?

關於一致性最極端的例子,莫過於老羅之前在Smartisan OS上瘋狂的為第三方app重繪圖示的事件了...為了追求作業系統內的圖示的一致性,老羅“發揮”了極值的工匠精神,將一大批第三方APP應用入口圖示重製,與自身系統的圖示進行強制風格匹配。圖片來源於bbs.smartisan.com

在一致性的基礎上,圖示還需要達成易識別性。易識別性則是指圖示要儘量抽象概括出所要擔任的功能職責,最好能讓使用者做到“看到即聯想,聯想即預期”。如果圖示的功能職責比較複雜或者相似,那麼則可能還需要形狀,顏色,文字、動畫等等因素配合,甚至是犧牲部分一致性,來最儘可能的提升認知容錯率/降低認知成本。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
圖片截選自《無盡空間2》(Endless Space 2)。作為4X遊戲的代表作,功能複雜是其一大特點,如何給複雜遊戲名詞找一個恰當的圖示是一大難點。

題外話:兩個要點七個字雖然簡單,但是完全展開講的話,恐怕可以專門出一本書,某種程度上,它可以說是檢驗介面設計師設計素養是否過硬的重要標準:若果一個介面設計師童鞋前來面試,成套的圖示類作品比較多,且兩個要素把握的很好,那麼一般素質過硬沒得跑。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

恐怖遊戲《層層恐懼》(Layers of Fear)的遊戲介面截圖。從左到右,分別展示了可開啟物件/正在開啟物件/物件可調查三種狀態的圖示變化。中間沒有任何文字說明和動畫,玩家僅僅靠圖示造型變化,就很容易的意識到自己正在執行什麼操作,從而讓注意力更多的集中在遊戲氛圍中。

題外話:一味的使用抽象概括的圖示,拒絕變通,有些時候反而會弄巧成拙;該加示例就加示例,該寫說明就寫說明,沒有人會因為笨拙的圖示而嘲笑設計,只會因為繁瑣複雜的產品而放棄使用。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

Photoshop的裁切系列工具(虛線左側)屬於複雜功能,其圖示的表達也會略顯複雜,這就需要文字的提示。如果將文字提示去掉(虛線右側),相對於畫筆工具來說,新使用者便會覺得更難以理解。

在我第一次玩 《無人深空》(No Man's Sky)的時候,遊戲畫面突然就卡在了 “初始化”的介面上,我嘗試按了鍵盤大部分按鍵以及點選滑鼠都無反應(要知道這可是104分之1的概率 .... 笑),無奈之下只能Alt+F4強退。在隨後著手解決問題的過程中,我發現了一些有趣的Steam評論,截圖如下:

遊戲圖示的設計跟其它應用的圖示設計有何不同?

原來那個一閃一閃的圖示 是要告訴大家按“E”啊。可能遊戲設計者是想增強遊戲中輔助AI角色程式初始化的氛圍,但是卻忘記了設計初衷——方便玩家更快的上手遊戲。與其這麼做作的表達,不如直接加一行小字(按E初始化系統)更直截了當。

此外還有一個小趣聞分享一下:國產端遊《尋仙》剛開放內測那會兒(大概是08年左右),我和朋友一起肝過一段時間。遊戲中有一個擺攤系統,玩家可以將自己未繫結的道具通過放進攤位來出售。在遊戲中,有一種叫做“養生晶”的重要道具,是衝陣營聲望必交的材料,供不應求,價格昂貴。而另外一種道具是“珍珠”,則是怪物掉落的垃圾品質賣錢道具。不知道是不是官方的疏忽,兩個道具採用的圖示居然一模一樣,加上游戲一些互動設計上的缺陷,這就給某些奸商鑽了空子——奸商們在一排道具欄中,放入養生晶,然後插入幾顆珍珠,手快的粗心玩家掃貨時一不小心,就會倒黴的通過高價買走這些垃圾...後來官方的修復方法讓我大跌眼鏡,不是更換圖示優化互動,而是修改了遊戲規則——給每個可出售道具設定一個價格閾值:垃圾品質的道具永遠定不出過分的高價...

總而言之,無論是遊戲還是普通應用程式,輕視了上述兩點的圖示設計都談不上好的設計,輕則會讓使用者/玩家感到不快,重則提升使用者/玩家的認知成本、誤導使用者/玩家,甚至導致使用者/玩家的流失。

這裡單獨要一點指出:上述兩個特性嚴格來說應該放在使用者體驗的大範疇內,拌著互動設計來講最合適不過在,因為遊戲/普通應用軟體的開發過程中,圖示的設計很大程度上會受到它們的影響,但是這裡篇幅有限,就不再多做陳述。感興趣的同學可以通過各大產品設計論壇網站找到自己想要的乾貨。

大異


When people play games, they have an experience. It is this experience that the designer cares about. Without the experience, the game is worthless.

當人們開始玩遊戲時,就會產生體驗。遊戲設計師所關注的就是這種體驗。拋開這種體驗不談,遊戲將變得毫無價值。

——The Art of Game Design, By Jesse Schell

上面一句話摘自《遊戲設計藝術》。這是個人比較認同的遊戲設計理念之一。玩家玩遊戲,目的就是為了獲得各種不同的“體驗”:它們可以是緊張的合作、對抗博弈(Moba類遊戲)、可以是幻想世界的沉浸式感受(各類RPG遊戲),可以是純粹的自我放鬆與發洩(各種休閒小遊戲),也可以是各種現實生活難以體驗的快感等等。(當然還有跟多關於遊戲的定義,但是我這裡著重強調的是“體驗”)

遊戲可以抽象看做是一種體驗過程量化的產物,遊戲產生體驗,但又不是體驗本身。遊戲設計的一切目的,包括圖示設計,都會圍繞這種獨特的“體驗”來進行。就單論藝術性而言,遊戲與普通應用程式可能確實談不上“大異”。而體驗上的差異化,我認為是導致“大異”的主因。所以遊戲圖示的設計,需要考慮的東西可比應用程式圖示設計來的更多更雜,甚至不同型別的遊戲,圖示的設計差異也會非常巨大。

下面列舉的,是我認為普通應用程式圖示設計時會較少考慮的要點。這裡使用“較少”二字,是因為他們在普通應用程式圖示設計領域,是作為食物增味劑的存在——可以沒有,有的話更有味道,放多了就會破壞本味。但是在遊戲圖示設計領域卻如頓頓不能少的餐桌主食。

  • 氛圍渲染
  • 行為激發


這兩點並不是互相獨立的,在實際的設計過程中(無論二者是誰),二者可能多少會存在互相影響的情況。

在接下來的討論中,都有一個大的前提,那就是不能脫離應用/遊戲所帶來的實際體驗本身單獨談論圖示。一個圖示帶來體驗作用,是整個體驗環的一節,所有單獨取出的談論,都是不合理的。

『氛圍渲染』

對於普通應用程式來說,氛圍渲染的目的都很單純:增加軟體活力、提升軟體應用親和度,一定程度上還可以看成是針對細分使用者的服務體驗優化。它們渲染的程度一般較低,比較常見的例子便是“換膚”。(雖然有些偏題,但是作為圖示作為圖形介面的元件之一,不得不提)這裡所指的“換膚”,不是說改變介面配色了事(這裡是指軟體為了適配工作環境的而改變介面的行為,比如Photoshop黑白灰多種工作介面顏色的選擇等等),而是指帶有明顯感情表交流目的的介面重製。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

應用程式的換膚,是為了能讓使用者感受到了產品的活力,增加些許親和度,在一定程度上,也可以說是針對細分使用者的典型操作。

遊戲圖示的設計跟其它應用的圖示設計有何不同?

介面改變,圖示也必須要隨著做出相應改變。春節臨近,手機淘寶的底部導航欄圖示也變得更有“年味”

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自iOS 騰訊QQ的換膚介面

產生某種體驗不是普通應用的主要目的,所以其圖示也不會嘗試通過情感渲染去“改善”“某種體驗”:使用者也很難會從一套換膚的操作中獲得獨特的“體驗”,畢竟受制於軟體應用自身的功能範疇。比如上圖, 即使手機QQ推出了王者榮耀的皮膚,換上了精美的遊戲圖示,也改變不了它是社交軟體的事實,它所帶來的“體驗”,或者是使用者選擇它的理由,只能說是背後遊戲所帶來的“體驗”的一種情感轉移,而非真的來自皮膚(圖示)本身,畢竟你不可能對著皮膚(圖示)平白無故的感受到Moba遊戲的快感(或者是面對豬隊友的憤怒)。

而遊戲圖示的功能職責則不一樣,他們通常都會潛移默化的進行氛圍渲染,來改變玩家的“某種體驗”。這種渲染的目的可以是增強,可以是削弱。具體要看遊戲的型別以及遊戲設計者期望的“體驗”。

我認為下面三點,是能否成功“渲染”情感到玩家心裡的重點:

  • 美術風格的選擇
  • 附加效果的強弱
  • 設計規則開放程度


遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自遊戲《符石守護者》(Runestone Keeper)它是一款魔幻風格的Rogue Like 遊戲,玩法有點類似“掃雷”它的遊戲介面(圖示)整體顏色偏向低明度(黑暗,緊張),容易帶來情緒的壓迫感。圖示的造型充滿魔法元素,種種因素聯絡在一起,契合了遊戲自身的風格。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《星露穀物語》(Stardew Valley)

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《星露穀物語》(Stardew Valley)的收集展示介面,星露穀物語作為一款休閒養成類遊戲,用色自然不可能偏暗偏灰,高純度和明度的遊戲介面(圖示)會讓人感受到愉悅與活潑

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《奧日與黑暗森林》(Ori And The Blind Forest)。玩過遊戲的玩家應該都有印象,在Ori的技能樹中,凡是被啟用的技能圖示都會燃起“靈魂之光”,這比單純的改變一下圖示顏色狀態要更有視覺衝擊力和“生命的活力”

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《保利橋》Poly Bridge

《保利橋》這款遊戲整體風格清新休閒,所以用色純度整體稍低,3D模型採用的是簡潔的低分面風格,遊戲的圖示也沒有美術造型上“過分”的渲染,更沒有冒火冒光的強烈特效,清新和諧。畢竟整個遊戲的重心在於研究、試驗橋樑的建造體驗。玩家的注意力應當時刻處於畫面中部的橋樑建造介面,任何多餘的圖示視覺效果都容易搶走這種珍貴的注意力。

橋樑建造>建造道具=橋樑資訊>建造功能>系統功能>其他

按照上面玩家投入注意力的大到小比重排列來看,大家可以清晰的感受到介面(圖示)上的圖示風格層次變化。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《保利橋》Poly Bridge的橋樑建造介面

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《挺進地牢》(Enter the Gungeon)

《挺進地牢》是一款Rogue Like風格的彈幕射擊遊戲,遊戲講述了帝國士兵、獵人、罪犯、飛行員、電腦人以及子彈仔六個性格能力迥異的角色, 想要尋找神祕地牢中一把能“殺死過去”的槍的,改變自己失敗過去的故事。遊戲的核心內容是各式各樣的效果差異巨大的槍支和能提供豐富效果加成的神奇道具。它的圖示道具設計的亮點在於一改平時遊戲中道具圖示中規中矩的佈局:各種槍支道具有大有小,有高有低,甚至排列順序也沒有太多講究,當你拿到很多槍支時,你的介面展示是這樣的:

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《挺進地牢》(Enter the Gungeon)的槍支揹包介面

這種打破設計規則的細節設計,一定程度上可以使玩家體會到一種“槍支多樣,火力豐富,趣味性高,收集感強”的感受,倘若所有的槍支都要框死在一個固定大小的道具格子中,這種“體驗”會被大大的削弱。

對於不是強調畫面光影,鏡頭效果等強視覺空間元素的遊戲,畫素風格是不錯的選擇,它不僅可以節省大量的螢幕上的空間資源,還可以提供一種“詼諧”“趣味性濃厚”的感覺。而寫實的美術風格,往往會有真實、嚴肅的、貼近生活的、代入感強烈的效果。如果期望遊戲能產生類似的體驗,選擇寫實風沒有錯。

題外話:就拿塞爾達傳說-荒野之息為例子,如果玩家烹飪出來的食物,是“扁平化的”,那麼此時此刻玩家心裡的感受會如何呢?

遊戲圖示的設計跟其它應用的圖示設計有何不同?
圖片僅供參考

實際在遊戲開發過程中,各式各樣的風格混搭,會產生不同的體驗效果,就好像調製雞尾酒一樣。遊戲的策劃以及美術正是利用這一點,根據實際的“體驗”傳達需求,來將不同的美術風格效果組合。這也就是為什麼“遊戲介面(圖示)眼花繚亂,風格各異”的原因之一。

『行為激發』

一般來說,圖示行為激發可能不是獨立個體的行為,有些時候他們會伴隨介面的一些對應變化才能產生。
對於普通應用程式的圖示設計,設計師童鞋經常會聽到這樣的話“要大要鮮豔”“要突出要響亮”云云。

已經停止運營的社交應用 Path 主介面。圖中演示的是使用者點選新增分享內容按鈕時所展現的內容,我們可以很明顯的看到底部導航欄,那個突出的紅色“+”圖示,與周圍普通的導航圖示有明顯的風格區別。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自迅雷X的主介面,大家可以明顯感受到各個圖示他們狀態的區別,這些狀態的變化會激使用者做出相應的行為

圖示狀態的變化,可以說是最簡單的一種行為激發模式:可以點的、當前選中的、需要吸引眼球的重點功能的圖示視覺突出,其他不符合當前功能邏輯的、次要的則視覺弱化。

普通應用程式圖示的這種設計,背後的目的僅在於於(產品們)想要激發使用者的某種行為,來引導使用者,或者迫使使用者學習,從而更好的讓使用者熟悉和了解當前應用產品的功能與服務。

遊戲圖示的行為激發出發點則有點複雜,不同的遊戲所期望激發的玩家行為也不同。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
圖片來自遊戲《看火人》(Firewatch)

《看火人》是一款典型的探索敘事風格遊戲,遊戲故事圍繞著一個新上的任火警瞭望員,與一個人火警瞭望員主管Delilah兩人展開,主角手中的對講機是故事推進的重要道具。整個遊戲的重點在於人物對話以及場景互動。所以遊戲的介面(圖示)可以說是做到了“極簡”。當互動事件發生的時候,遊戲圖示會在顯眼的位置出現(畫面中心)。進而告訴玩家下一步會發生什麼,或者讓玩家思考“我該如何做”。

遊戲圖示的設計跟其它應用的圖示設計有何不同?
截圖自《深海迷航》(subnautica)遊戲介面。圖片中黃色框體的圖示,是玩家收到了無線電訊號後才會出現的圖示。

《深海迷航》是第一人稱一款沙盒探索冒險建造遊戲,主角在一場宇宙飛船墜毀事故中倖存下來,故事圍繞著環境探索,事故原因調查展開,進而一步步引導玩家解開所在外星球不為人知的祕密。推動整個遊戲故事線的重要資訊來源,便是遊戲中的無線電。每當玩家達成一定的遊戲探索程式後,無線電圖示就會明顯的展示在介面的右側,來告訴玩家“您有新的無線電訊息”。這也是整個遊戲能推動玩家前往未知區域探索的動機重要起因。

相對於普通應用程式來說,這種行為的激發更多目的是讓玩家去產生或者獲得“體驗”,從而推動遊戲流的前進,或者是用於改變玩家的行為目的等。


綜上

  • 無論是遊戲圖示還是普通應用程式圖示,一致性與易識別性都是不能忽視的重點
  • 普通應用程式的圖示設計,是以使用者為核心,功能服務服務體驗為主體的設計
  • 遊戲圖示的設計,是以遊戲設計的期望“體驗”的過程為核心,玩家的實際“體驗”為主體的設計


寫在最後

實際上,這個問題在回答的時候我仍感到有一些“心有餘而力不足”。因為圖示這種東西,從圖形介面中單獨拖出來講真的很難。所以部分的回答,如果在題目改為“遊戲介面的設計與普通應用介面設計有何不同”,會輕鬆很多。此外,在些碼字的過程中,一些積攢的關於遊戲設計上的吐槽也被壓下來了,一個是因為偏題,再一個是內容太多。等有機會我都會整理並且分享給大家。

最後,感謝谷歌為我提供快速高效的資訊獲取方式(某度去死)。

感謝一下平時的自己,要不是偷偷攢的私房錢送給G胖,姨夫以及太郎,哪有那麼多的遊戲可玩(此時我的背後傳來了憤怒的聲音)...

作者:洋芋君
來源:康石石
地址:https://mp.weixin.qq.com/s/hoWc_nqt2E_oh4TH6d2ZGw

相關文章