特邀專欄:遊戲圖標的設計跟其它應用的圖標設計有何不同?

2021-02-25 康石石


「知識的價值在於分享」,一直是康石石個人信奉的一句話,也是指引康石石個人實踐的座右銘。其實,知識所蘊含的「廣度」遠遠不止於學術體系之內,它還包含有人生經驗所積攢的豐厚閱歷,與看待世界、分析世界、認知世界的角度與深度。

自2018年8月20日,康石石將特邀藝術設計各領域中的佼佼者,在康石石平臺之上分享對藝術留學生「專業深造、視野開拓、思維開化」卓有助益的精品內容,並於一周七日之內,無休止更新。

希望康石石能將自己為藝術留學生開設的公眾號由媒介轉化為平臺,誠邀更多優秀者一同分享自己的世界。同時,康石石也希望:大家不僅僅知道的是藝術留學界有康石石這麼個人,更知道,或清晰:原來在康石石公眾號內的自己每天都在進步,都能進步

知識分享人:洋芋君

寫在作答之前。

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

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

關於圖標:


在探討遊戲圖標之前,首先我們要去大致了解一下什麼是「圖標」(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胖,姨夫以及太郎,哪有那麼多的遊戲可玩(此時我的背後傳來了憤怒的聲音)...

關註標星康石石

優化你的藝術留學閱讀時間

更多藝術留學品集創作建議,可通過以下方式,與康石石取得聯繫:


聯繫方式很簡單

長按下方二維碼

希望康石石能幫到每一名藝術生

無論藝術留學,還是藝術設計,或是認知世界

相關焦點

  • 經驗分享:10個超讚的圖標設計技巧
    在 Windows Vista 裡面,圖標會在作業系統間有不同的光源,但每一個單元的圖標是一致的。「圖標的另一個重要方面就是圖標擁有民族特色.不同國家的文化傳統,環境和手勢等都會有所不同.」(ps:我也是,當有實物照片時,你就能更好的掌握圖標的細節,質感、紋理等.生活中要注意觀察,我每到一個地方都會仔細觀察,看有沒有好玩的物體,結構,紋理等可以為我的設計服務,然後拍照)
  • 純正乾貨:圖標設計的三點最基本規範你會?
    圖標設計的規範涵蓋顏色、符號的表達、線條的運用等等。
  • 『Fresh推廣』【環保&創意&獎品】節能圖標設計大賽
    哎哎哎,你知不知道最近Fresh環保協會有個圖標設計比賽啊?因為它,是非一般的圖標設計比賽。例如,在電燈開關隔壁貼一張主題鮮明的圖標;或者,在水龍頭隔壁的一張創新性的圖標。或者,在圖書館裡一張要我們安靜的圖標。遺憾的是,學校本來的圖標已經殘破陳舊,不夠鮮明也起不到吸引人,提醒人的效果。所以,騷年!!!!!!
  • 獨家分享:「谷歌風」插畫主題圖標設計谷歌風
    本期分享者:KQY-白卡 (優設基礎訓練營學員)本期主持人:@楊洋XHM1、如何根據實際情況來確立製作風格2、著手製作前如何理清層級關係 3、繪製圖標需要注意的關鍵點4、聯繫人、時鐘、天氣圖標的繪製要點5、相機、電話圖標的繪製要點 6、燈光、上傳圖標的繪製要點 7、信息、瀏覽器圖標的繪製要點
  • 像家一樣:房屋周圍的剪貼畫和21種樣式的圖標
    此外,該套件還將幫助用戶體驗設計師和圖形設計師,他們正在尋找 用於應用程式,網站和登錄頁面的家用圖標。圖形以21種設計風格呈現,從詳細的彩色插圖和裝飾圖片到超級簡約的圖標。在這裡,您會發現各種象形圖和剪貼畫圖像,它們涉及各種房屋對象和用品,家具,器皿和廚具,家用電器,室內元素以及通常與家庭生活相關的許多其他視覺效果。
  • 微軟團隊下功夫了:Windows 10新圖標流出
    、日曆、計算器、相冊等程序圖標都換了新模樣。其他更換新圖標的應用程式包括天氣應用程式、GroovMusic、Microsoft 紙牌、Movies & TV 以及 Microsoft Forms,它們都使用了 Fluent Design 語言,
  • 史上首創:2020東京奧運會將使用動態圖標
    在奧運會的視覺設計項目上,東京再開先河。此次東京奧組委一共公布了奧運會33個競技項目的50個圖標和帕運會22個項目的23個圖標,這73個圖標的形象由日本設計師廣村正彰(Masaaki Hiromura)完成,並由日本動態設計師井口皓太(KotaIguchi)製作了動畫效果,以完整的動作模式來展示每個運動項目。
  • 箭頭符號:一個最常見卻不容忽視的圖標
    如果我們可以像潘多拉星球上的那維族人一樣可以通過辮子上的神經元交流,那麼也就不會有那麼多誤解與紛爭,也就不需要那麼多複雜的語言了。作為語言的不同形式,圖形相較於文字也有著不可否認的優勢。比如它像音樂一樣沒有國界的限制,它在傳達信息時更加直觀、具體。自從2007年iPhone橫空出世之後,智慧型手機的普及讓App逐漸逐漸取代了網址的作為網際網路入口的作用。
  • 亞馬遜App新圖標引群嘲,網友:這是希特勒的鬍子?
    據英國《鏡報》(Mirror)1月26日報導,美國電商亞馬遜日前在部分地區的IOS商店中,啟用了新的APP圖標,這引發了不少外國網友的嘲笑和質疑。不少人對新的設計感到不滿,他們認為新的圖標看上去很像希特勒的鬍子。
  • P圖神器Instagram換新圖標了!實在是醜爆了!
    當時我就震驚了,因為自從iOS7推出後,許多app都配合著改變成扁平化設計的圖標,然而Instagram卻一直沿用著懷舊的老圖標——棕色寶麗來相機圖標。> < 但今天說換就換~沒有一點點防備!寶寶心裡還沒準備好呢!據悉,Instagram的新圖標是設計師們花了九個月的時間設計出來的。新
  • 粉絲投稿:IOS9系統無需越獄完美隱藏桌面應用圖標教程
    很多朋友有隱藏桌面應用的圖標希望,有的是為了把不用的圖標隱藏後整齊美觀好看,有的是為了隱私不想讓別人看到,但是我們也知道蘋果原生是不帶這個功能的。所以很多人會選擇越獄去實現這個功能,但是有的人不想越獄,或者越獄後不想安裝插件來實現怎麼辦呢?今天就給大家提供一個在IOS9下無需越獄隱藏桌面應用圖標的方法:很簡單,幾步就行。
  • 新版Windows 10體驗:新開始菜單配合重繪圖標讓系統煥然一新
    有外媒就對新系統版本進行了簡單的體驗,首先是開始菜單變得更加簡潔,具體來說,應用列表的圖標Logo移除了實色色塊,改為和當前菜單背景一體的透明化,而配合日曆、郵件、Edge、Office的新圖標後,顯得更為美觀。對於這樣的設計,體驗者表示,減少開始菜單中平鋪圖標界面的顏色會有些許簡化,讓用戶更容易瀏覽經常會使用的應用程式。
  • 早上醒來,你被Instagram的新圖標醜哭了嗎?
    不僅如此,相信大家幾天前就發現了,Instagram的內部設計也改變了,變成了黑白色。講真,第一次發現內部設計改變成黑白的時候,我以為是誰去世了而Instagram在表示默哀。我就想問問,之前的設計有什麼不對嗎?難道你們也要走性冷淡風?
  • 蘋果表情符號的製作:這些小圖標是怎麼來的?
    後來,作為蘋果的全職員工,我甚至還自己又設計了一些。那是在2008年的夏天,距離我拿到羅德島設計學院(RISD)圖形設計碩士學位還有一年。就在那個夏天,我獲得了蘋果實習生的資格,有幸得以跟我渴望遇見的一支團隊共事。負責iPhone設計的也是這支團隊;這部神奇的設備一年前剛剛在舊金山的Macworld Expo嶄露頭角。
  • 蘋果又在中國遭官司:App Store圖標撞臉天貓商家
    KON認為,蘋果公司銷售的iPhone、iPad等系列電子產品中,其App Store圖標(iOS11版本)圖案與原告創作的美術作品主要內容、結構、圖形布局等主要元素幾乎完全一致。要求判令蘋果公司立即停止侵犯原告著作權的行為,即停止銷售含有圖標的電子產品,並在全國性媒體上公開賠禮道歉、消除影響,同時還要求判令被告賠償原告相應經濟損失。
  • Iconfinder 推出免費圖標:預防冠狀病毒傳播
    ▵優設品牌號,旗下新品及內測邀請碼資格均在此號,關注推送掌握動態,有機會第一時間獲取
  • Instagram耗時9個月的新圖標,卻糟了全世界小清新自拍狂的吐槽
    Instagram的設計總監Ian Spalter在Medium上發表文章說了他們改變圖標的初衷。在整體上他們希望是保留了原有經典的同時,還體現出變化。於是相機的形態留了下來,一個有復古感的色彩、迷人的鏡頭、左上角是彩虹的圖標徹底扁平了起來。。。
  • 【萌萌噠】手繪天津建築圖標,全猜中證明你是天津人!
    近期,天津網友@D_Wong先森繪製了一些天津建築物的小圖標得到網友的關注,簡單的幾筆不僅表現天津標誌性建築的特點,而且還
  • Win20驚豔設計:這才是Win10該有的樣子
    Windows 10被吐槽的地方很多,無論UI界面設計還是功能特性,都有很多完全可以做得更好的地方,也不斷有網友給微軟獻計獻策,打造自己心目中的概念設計
  • 蘋果手機:月亮圖標是幹什麼的?用處原來這麼大,真是長見識了
    蘋果手機月亮圖標是幹嘛的?用處原來這麼大,可惜今天才會用過蘋果手機的都知道,手機裡面一些功能都是用圖標代替,導致很多人忽略了裡面的一些用途。那麼到底這個月亮圖標有什麼作用呢?下面就帶大家一起來了解一下,帶你們一起漲知識!