遊戲界面動效基礎理論 3/3 風格化

風格指的是在整體上呈現出的具有代表性的獨特面貌。這一概念適用於一切視覺化的美術作品、藝術品、電影、遊戲等等。對於遊戲界面來說,其特有的風格是被刻意設計出來的。遊戲界面的設計需要根據不同遊戲的不同世界觀,去進行特有的美術風格設計。這些設計來源於遊戲世界觀的文字描述,以及相關的美術資料,包括但不限於遊戲原畫、場景等資料。通過提煉這些材料,析出遊戲界面可用的美術元素,色彩,特有的排版方式等。對這些元素進行有機的組合後就能形成一款遊戲特有的遊戲界面設計風格。

而界面動效的設計需要以此為基礎,除瞭延續界面設計本身要表現的特有風格之外,還需要在動作和節奏上吻合其特有的風貌和功能特點。比如在偏卡通類型的遊戲中,常常可以看到彈動的動效,因為彈動動作往往更能表現卡通風格中精力充沛,富有彈性的精神特質;而在科技感風格遊戲裡,則有比較多閃動、切變的動效,這些動作特點也常常是人們對高科技類事物的特有印象;在魔幻類的遊戲裡,則常見偏寫實、體現重量的動畫設計,因為往往這類遊戲的美術和世界觀是基於歐洲中世紀的觀感特點構建的,那個時代的物品有一種特有的材質感,偏向寫實而厚重的動作設計更能貼合這種美術印象;在偏重現代時尚概念的遊戲中,則有比較多柔順、輕盈的動效,因為這種動作特點更加能夠體現現代感設計中偏向簡約的美術特點,等等。

如下圖的遊戲《Averangers》中的界面動效,它的窗口入畫的動畫就是一種彈動效果。這個遊戲的美術和界面設計都屬於美式卡通風格。這種美術風格使人聯想到美式漫畫和美式卡通動畫中充滿視覺沖擊力的藝術表現形式,彈動的動作特點正好可以體現這種形式。

下圖的遊戲《LineStage》界面裡,消耗代幣的形式動畫中,代幣飄蕩的效果就顯然不同於現實中紙片的飄蕩效果。這段動畫被設計成每個運動加速快,每個運動減速也快的的運動效果。呈現出一種類似卡通動畫中常見的“勁道”的動畫效果,呈現出“精力充沛”特點。跟line friends 這個IP所要體現的風貌是一致的。

下圖的遊戲《精英危機》的界面出現動畫,與前兩者有著顯著的差別。很明顯的是一種科技感的動畫風格。原因主要在於它所用的閃動效果,這種效果的特點是圖形和顏色都有短時間內的快速變化,與前兩者通過對單個元素運動曲線調整以形成效果的設計所不同,它是一種通過圖形元素的快速變化來形成的一種動畫風格。

在這些示例中,我們能明顯的感知到不同的動效風格。它們之所以有不同風格上的觀感,首先一個最主要的原因在於其界面設計在風格上的巨大差異。其次在於對動態效果的不同維度的控制上,有的是運用動畫元素的運動曲線去設計出特別的加速和減速運動,有些是通過不同元素的組合切變。但它們的設計目的最終都是為瞭契合遊戲界面設計的既有風貌,是靜態圖形的一種邏輯上的延伸和功能上的完善。因此我們可以將動效風格定義為:延續瞭遊戲整體美術觀感的,符合界面內在邏輯設計的,具備代表性的獨特動態設計效果。

遊戲界面的動效需要被整體性的看待。單獨的控件動畫不足以構成一款遊戲的動效風格。這個整體的最小單元至少應該是由同一個畫面內多個控件動畫構成。更大的單元甚至是由多個有邏輯連接的畫面中的動效構成的有機組合。一個能表現出獨特風貌的動效,必定有幾個重要的組成部分,這些部分互相影響,有機組合在一起,共同影響著一個動效對外展示出的風貌。

綜合來看,影響動效風格的因素,主要有以下幾個部分:

第一,靜態視覺元素。它們是動態效果的基礎,它們的風格很大程度上決定瞭動效的風格。

靜態的視覺元素是動效建立的基礎,無米不以成炊,靜態視覺元素是制作動效的米,米是什麼成色,很大程度上決定瞭最終動效的樣貌。

因此,不同的動效看起來之所以不同,最大的影響因素在於它們“皮相”的不同。一個以純線條和純色圖形為基礎制作的動效與以具象化的美術元素為基礎制作的動效會有顯著的風格差異,即使它們除瞭圖形元素外其他的動態設計都完全相同。

如下圖一所示的遊戲《掠食》中的tip提示動效和圖二所示的遊戲《羞辱》中的tip提示動效。兩者的動態方式及其相似,都有很多閃動,和基於元素間邏輯關系的動態設計。可以說是幾乎相同的動態設計手法。但我們依然會在感受上認為這是兩種風格的動效。主要原因就是組成這兩個動效的基本美術元素在風格上有很大的差異:前者的設計圖形是由大量平直的線條和塊面組成;後者則由偏向歐式的圖形,字體以及殘破材質構成。

可見,即便動態的演繹方式都極其相似,但如果基於不同的美術元素,動效整體依然可以呈現出不同的風貌。

視覺元素的風格決定瞭動效風格這點其實體現瞭動效的本質。它本身就是遊戲視覺元素的一部分,或者說是遊戲界面設計的一種延伸。可操作的遊戲界面本身應該被看作一個整體,不管是設計稿也好,動效的設計也好,本質上都是為瞭形成最終那個可操作界面的一個工作程序,人為割裂的看待後被定義的所謂界面設計概念和動效設計概念其實都隻是這一整個整體的有機組成部分。因此動效必然是視覺風貌某種維度上的延伸設計,但這不意味著兩者有高下與主次之分。他們同屬一個風格維度,互相牽扯和影響。動效設計師的關註點應該放在界面設計上,不僅需要關註它所表現出的風格特點,更應該瞭解清楚它所要表現的信息,所要達成的目的,即功能目的。這才是這項工作的終極目的。

第二,伴隨元素。

伴隨元素指的是主圖形運動過程中出現的那些轉瞬即逝的、充滿變化的圖形。整體動效結束後這些元素會消失或者保持待機循環。它們在某些情況下是動態設計的有機組成部分,可以為整體動效潤色,並輔助動態設計形成更細分的動效風格。

在前文所述第一點的基礎上,基於整體元素的動態變化,在其過程裡的伴隨元素會使不同動效間有更加細膩的差別,也就形成瞭不同的細分風格。比如兩個同樣是彈動動畫的動效,一個隻有圓形本體的動畫,另一個則另外設計瞭帶有噴濺效果的伴隨元素(動森的動效風格)。這兩個動畫就可以看作是卡通風格中的細分化風格。

遊戲《精英危機》(下圖)中的界面展開動效裡有很多閃動的效果,這種效果使這種展開動畫效果有很強烈的科技感。這種閃動效果的展開過程可以理解為多個伴隨元素的短暫交替出現組合而成。這種短暫出現又最終消失的圖形元素就是一種典型的伴隨元素。試想,把這裡的伴隨元素去掉,或者替換為別的形式,那麼這個界面的展開動效就會有完全不同的風貌。因此它們在這裡可以說是這種動態設計能形成獨特風格的核心元素。

遊戲《命運2》(下圖)的新物品提示動畫裡也是用伴隨元素來增強它的獨特風貌的。它的展開過程可以極簡化的理解為一個中心擴張式的動畫。這款遊戲的界面設計風格是極簡扁平的,大多數界面元素用到的都是點、線、面這些元素。如果沒有更多獨特性的圖形做額外的修飾,這種界面設計風格很容易泯然眾人。事實上設計師通過在界面中應用獨有的圖形元素避免瞭這樣的問題。同理,以這樣比較普適性的圖形設計為基礎去設計動效時,如果沒有獨有性的伴隨元素,動效的風格也很容易泯然眾人。因此,我們可以在擴張式動畫的那一段裡看到,動態設計師利用瞭X型放射線的出現消失動畫來充當瞭伴隨元素的效果。這種效果不僅契合靜態圖形本身的風格,也在這個風格基礎上做瞭合理延伸,並作出瞭獨特的風貌,形成自己的風格。

就我們剛提到的扁平化的界面設計容易風格同質化的問題而言,在不同遊戲中,基於類似的扁平化設計去做出不同風格的動效設計也是一個難點。

但借助於獨特的伴隨元素設計,可以很巧妙的解決這個問題。在遊戲《死亡擱淺》(下圖)中就有活生生的例子。這個頁面刷新動效巧妙利用瞭一個半透多邊形的伴隨元素,不僅起到“頁面刷新”的提示作用,它還被設計為最終“歸宿”在底部按鈕上,更加上瞭一層指示器的功能,這就在動效風格層面與交互引導層面起到瞭雙重作用。這種巧妙的伴隨元素使用方式是促成這款遊戲的界面動態設計效果擁有獨特風格特點的很重要的一部分。

第三,結構次序。

動效風格需要由組成該動效的諸多動畫單元進行特有次序的組合才得以形成。不同的動畫出場順序組合構成瞭不同的節奏感,即便出場順序相同,但出場間隔不同,也會形成不同的節奏感,這就導致最終的風格差異。多個動態元素的的排佈順序、時間間隔、持續時間會綜合影響動態觀感,這種觀感通常稱之為動效節奏。特有的動效節奏是特有動效風格的組成部分。

界面動效設計的結構次序設計應該遵循的原則是邏輯自洽、功能決定。

邏輯自洽指的是有特定設計結構的元素,需要以其結構邏輯為依據進行動態的演繹。整個界面的動態演繹也應以界面內元素的結構為依據,而不應該出現邏輯不自然的動作。這點保證瞭動態元素在其所構建的世界內的存在性更加合理。也順延保證瞭界面動效整體的合理性。

功能決定指的是動態演繹的各個部分的出場順序,應該主要由界面設計中所傳達的功能性為依據,進行先後排序。不管是單一控件內的各個組成部分還是整個界面內的各個控件,都應遵照這一原則。這一原則是保證“動效體現功能性”這一設計理念的一部分。

如下圖所示的遊戲《CYBERPUNK 2077》中的“信譽值增長”提示控件動畫,就運用瞭復雜的動態元素次序動畫。整體上可以粗略劃分為“預載入”、“展開”、“循環”和“收起”四個階段。

理論上來說,提示性的tip類動效一般不需要做這麼復雜的結構和持續時長。我們往往會將它們設計成以盡量短的時間內完成入場動畫,幾秒鐘的循環動畫結束後迅速退場的形態。

但此例中的tip卻較為特別,首要原因大概在於這是一款第一人稱視角的遊戲,它的局內畫面需要隨著玩傢的視角和方向隨時發生變化,也就說它的畫面極其多變,視覺信息多且雜。這種畫面內如果有提示性質的界面,就需要設計成強存在感或曰強提示性,否則極易被畫面內的視覺信息淹沒。

就像這段動畫所展示的那樣,需要有一個“預載入”的動畫,讓玩傢的註意力暫時轉移到畫面的這個角落,仿佛我們在機場或車站聽到廣播消息那樣,在正式信息前會聽到輕柔的“噔、噔、噔”提示音,既不產生驚嚇,又適當打斷當前的註意力,告訴你“有消息”。這段預載入的動作也需要有個過渡,讓它和後續的內容有柔和的銜接關系,促使玩傢的視線被自然的引入到接下來的“廣播”之中,這就是“展開”的意義。而“循環”就是給玩傢閱讀的時間。接著就是完成任務後的“收起”。這個結構符合我們所說的邏輯自洽,也符合它之所以存在的功能決定,而先後次序的安排又契合體驗設計原則,整體幹凈整齊。

在下圖所示的《底特律變人》的線索掃描動效中,我們可以看到相似的設計理念,即動效是對功能邏輯的解釋,而因為掃描和結果呈現之間的邏輯關系,這段動效中的掃描動畫和結果信息顯示必然是先後關系,加上一些富有科技感的伴隨元素的使用,如熒光的藍色方框元素,像顯微鏡鏡框的元素等,讓整個畫面表現出很強的高科技質感。

如果兩個界面功能相似,結構相似,以它們為基礎,會不會設計出相似的動效風格?答案是肯定的。但結構次序是風格之上的,比風格更加重要的需要去傳達的信息。因為我們必須保證界面運行的首要目的是易用性,而非藝術性。並且我們可以利用這種特點,在界面規劃的初始階段,如策劃階段或者交互設計階段,就去尋找一種符合需求的,能更準確傳達自己遊戲中特有功能的界面設計方案,以此來做出特異性。

通過適當控制動效設計中對邏輯結構的交代程度和功能決定程度,也可以做出完全不同的動態風格。比如在故事性強的畫面中,就可以多利用鏡頭語言交代場景內物體的出入場次序和一定程度的視覺沖擊力,而在功能性強的畫面中,就可以更多應用待機循環的動態效果,傳達出更近似靜態設計稿的風格特性。

在動效設計中,動態元素的組合次序對動效的整體效果而言是一個非常基礎的因素,它不僅決定瞭動效呈現的風貌,還直接決定瞭動效的節奏感。動效的節奏感是一個很豐富的課題,我會專辟一文對此進行討論。但簡單的說,設計師如果能夠註重分析界面中信息的表達次序,能夠深刻理解界面所要傳達的信息和要實現的功能,就基本上掌握瞭一半的動效節奏感設計。

第四,運動曲線

在動效的組成元素中,運動曲線(經過特定的次序組合後)會極大影響整體動效的風格。

運動曲線是什麼呢?

以一個隻有兩個關鍵幀的動畫為例,從初始幀(A)到結束幀(B),時間間隔相同的情況下,如果將這段動畫設計為出發速度較快但結束速度較慢,則這段動畫會使物體顯得靈動;如果出發速度較慢,到B之前逐漸加速至最快然後漸漸停下,則這段動畫顯得物體會較為粗重。這種感受來自我們對現實物理世界中物體運動認知的實際經驗。在現實中,質量較輕的物體會有更小的慣性,在相同加速度情況下,加速會比較快,停下來的也會比較快,而較重的物體則都相反。它們的物理特征決定瞭特定的運動規律,反過來為某物體設計特定的運動規律也可以給人造成該物體擁有特定物理特征的印象。運動曲線就是控制物體運動規律的表象特征的一個工具。

當動畫被設計為相應的運動規律時,觀感自然會被映射到我們對現實物體觀察所得的經驗上。這種速度上有變化的運動規律,在動畫制作軟件裡就直接對應瞭運動曲線功能。我們以AE中的“值”曲線為例來簡單的看看不同運動曲線對同一個圖形運動觀感的影響:

第一個是普通的緩入緩出曲線

這個曲線表示物體的運動速度從零緩慢加速至一個速度,而後再緩慢減速至零速。到達中間點的極速前,物體的加速度和減速度都保持恒定。它的運動曲線如下圖所示:

實際效果如下圖所示,小黃球從左側移動到右側,並沒有用勻速運動,而是一種緩入緩出。為瞭觀察舒適,該動畫的開頭和結尾添加瞭漸入漸出效果,下同。

而如果我們想要讓圖形的運動表現得更加靈動時,往往會用到第二種運動曲線:急動慢停。這種曲線表示物體會很快加速並運動至接近預定位置,然後放緩速度直至停下,其曲線如下圖所示:

實際效果如下圖所示,小球從左側移動到右側時,在最開始的階段有一個加速度極快的運動過程,但在開頭的加速度之後並沒有增加新的加速度,而是在臨近停下來之前已經降速極多。它的速度一直在遞減一直到停下來為止,就好像受到某種恒定的阻力。

在這種運動曲線的基礎上,稍微進行細化後可以讓圖形的運動更加靈動:在開始一幀的後邊,接近總運動時間長度上黃金分割的時間點上插入一幀,然後將它的值調整為接近時間終點的值,並將運動曲線調整得更順滑,如下圖所示:

實際效果如下圖所示。可以看到,在這種運動曲線裡,小黃球會有更快的初始“反應速度”。由於跟上一個運動的總時長相等,兩種情況下小黃球運動到終點時的時間實際上是一致的,但此處的小球總體運動狀態顯然要靈動得多。這種感覺實際上是由這種運動曲線帶給它更快的初始“反應速度(加速度)”有關。我們在曲線上為它增加的一個關鍵幀,為它加速到極速的過程縮短瞭時間,也就意味著運動初始階段的加速度更快,就有一種觀感上的“反應速度更快”的感受,這也是這種運動給人更“靈動”的原因之一。

這種曲線的應用場景非常廣泛,比如下圖我在“Syn”項目中的界面動效上對這種運動曲線的應用,右側的面板的切換就多處運用瞭這種曲線。

這種曲線的第三種變體則是:慢動急停。如下圖所示,它的特征是將加速階段時間延長,即用很小的加速度將物體加速到極速,然後在很短時間內停下。這種曲線有一種為物體在最終停下之前積攢力量的特征。因此多用於表現撞擊類,具備強視覺沖擊力的動畫。

以小球的橫向運動為例的話,這種曲線的運動效果如下所示:

不僅是位移屬性,這種曲線應用在多種屬性上時能為物體賦予更多的運動含義。比如把它應用在物體的縮放上時,就可以制作出如下圖所示的“物體從眼前的畫外摔入畫面中央”的效果。如果是從大到小的變化,則運動曲線的方向會發生變化,但它的總體變化趨勢與剛才的典型圖示是一致的。

其動畫效果如下圖所示:

在此基礎上,對這個摔入的運動曲線做一些細微的調整,比如加入一個回彈效果,就會讓這個撞擊有更真實的感受,運動曲線如下圖所示。

實際效果如下所示:

甚至,還可以配合這個動畫,在整個畫面上加上鏡頭晃動的效果,這個撞擊的力量感就更加強烈瞭,如下圖所示。

其動畫效果如下圖所示:

應用這種曲線,可以制作出如下圖所示的開場動畫效果,這也是我在另外一個項目中的實例應用。圖中的盾牌就被設計成具有很大質量的物體,它從空中落下時利用這種曲線緩慢的加速但迅速的減速的特點,可以充分表現這種重量感。因此在應用瞭這種動作曲線後無疑具有很強的視覺沖擊力。

這種曲線更典型的應用場景正如下圖所示,這是我在另一個項目中的實際案例。這個畫面中,中央logo附屬的兩個美術字的入場動畫,就是一種典型的砸入動畫,這種動畫如果想表現速度以及砸到畫面背景上時的沖擊力,這種運動曲線就會是一個非常好的選擇。

這種曲線的第三種變體則是:慢動慢停。如下圖所示,它的特征是加速階段和減速階段都很長,但在整個運動的中間階段是速度最大的階段,也是值變化曲線最陡峭的階段。這種曲線所表現出的運動特征是整體靈活,但啟動與停止優雅。在一些特定的次序組合中,容易給人順滑流暢的感覺。被很多基於平面化設計的動效所應用。由於經常被用在時尚、現代風格的設計中,使它有比較強烈的時尚風格。所以也可以多用於想要表現此類風格的場景中。

它的動畫效果如下圖所示:

如下圖中,是我在實際項目中應用瞭這一曲線所做的一個列表類頁面的入場動效。畫面中人物和它們所屬的姓名條的展開動作,都運用瞭這種運動曲線。配合這種組合次序的設計,整個入場動畫流暢順滑,且貼合視覺設計所展現的現代與競技風格。

事實上,動效的風格因為運動的曲線不同而營造出的不同風格,不僅僅是在同一動效中廣泛應用同一種曲線的結果。有時候需要因應具體的情況,去對這些曲線進行一些小的修改或者有目的的排列組合,才能得到自己想要表現的效果。

比如我們可以在慢動慢停曲線的基礎上,為它增加一些小的細節。如預備動作和反彈動作。這樣就產生瞭一個新的變種曲線預備反彈。該曲線如下圖所示。

在啟動階段增加一個關鍵幀,幀的值要低於初始值,時間點接近於即將加速到極速的位置。同樣的,在它的鏡像位置也增加一幀,這幀的值要高於最終值,時間點位於剛從極大速降回極小值時。

應用在位移屬性上,它的效果就如下圖所示:

可以看到,小球在往右運動之前,會有一個緩慢的向左的運動,在停下來之前也有一個向右一點點的“過界”,然後緩慢向左運動一點後停下。這段運動過程中,小球有預備和回彈的動作,就給人以更加生動,貼近現實的感受。如果把預備和回彈的值變化調大,小球的運動會表現得更加誇張,整個動畫就會更偏向卡通化的風格。一個小的時間變化或者值的變化,就是這麼真切的影響著動畫的風格特點。

如果我們在這段動畫的基礎上做進一步的修改,比如在右側放置一個障礙物,讓小球最終不是停到右側,而是撞擊在障礙物上回彈呢?這段運動曲線又該做怎樣的修改?

這次我們先看最終的動畫效果,如下圖所示:

忽略右側障礙物的互動動作,我們隻觀察小球的運動,可以分析出這樣的運動特點:

它在開始撞擊之前,有一個預備動作,緩慢向左運動,然後急速向右撞擊障礙物。撞擊的一瞬間,運動方向即時調轉,然後向左運動至緩慢停下。那麼就需要它的運動在X軸上的值變化曲線為如下所示:

這段動畫總共有五個關鍵幀,為方便敘述,我們以從左到右的順序把它們按照數字命名。從1到2之間,是小球向左的一個預備動作,這段動作表現得很緩慢,因此是一個持續時間長,但值變化短的曲線。在曲線圖中,小球如果向左,那麼值就會向下,因此這是一段普通的緩入緩出曲線。但在2上,值發生瞭一個轉折,這表明小球結束瞭預備動作,以最大的力度向右開始沖擊,到3點時速度達到最大。但這個過程中加速是逐漸衰減的,因此也是一個緩入緩出的曲線。3點上同樣發生瞭曲線轉折,而且是180°的轉折,因為此時小球撞擊瞭障礙物,速度方向完全翻轉,翻轉後原先的向右沖擊的能量被障礙物完全傳導成向左的能量,因此這一階段是一個初始點加速極大,但結尾處加速衰減為零的運動過程,所以在3、4、5之間的運動是一段快動慢停曲線的變種。

可見,想要表現某種運動形態,有時候需要多種曲線的組合和一些細微的修飾。這些很小的變化就能讓物體的運動形態發生巨大的變化,而動效的運動形態的不同,傳達出的含義也不同,風格的差異也就逐漸累積出來瞭。

而且有時候單個物體的運動要更加復雜一些,不同於我們為瞭說明一個問題,而隻是像以上的示例那樣隻展示單一維度(平面X軸)。有時候它們的運動是在二維上甚至三維上的多種運動曲線的組合,下圖所示的如鐘擺運動,如果將它看成X軸的橫向循環動作和Y軸的縱向循環動作來看的話,就會清晰很多,也好控制很多。

比如將它的縱向運動隱藏,X軸運動本質上是如下圖所示這樣的:

而本質上,這個運動的曲線可能是如下圖所示的二維綜合曲線,紅色為X軸,綠色為Y軸:

這就意味著,運動曲線幾乎在每個維度上都對物體的運動特征有著影響,維度越多,我們可調節物體運動特點的方式也越多,它們所能表現的風格特點也就越多。

運動曲線在實際工作中被應用在很多軟件中,尤其是Unity和UE4這類引擎中。運動曲線都是以“值”曲線的形式存在的,它們的含義高度一致,這也是本文隻以AE中的“值”曲線去討論它的原因。在AE中還能將值曲線切換為速度曲線,這兩種曲線是物體同一運動在圖表上的不同形式的表現,但它們的形態含義並不相同,在實際工作中需要註意研究和區分。

因為運動曲線的巨大作用,我們在為某個項目制定動效制作規范時,就很依賴對其中通用型控件的運動曲線的控制。有時候可能會精確到時間區間和曲線的樣式。在這樣的基礎上,仔細規劃某些固定搭配的界面元素的出現次序,也可以進一步規范整個項目的動態效果風格的一致性。

利用上文提到的幾個因素,我們可以基於實際情況,為各自的項目設計出風格化的動效設計。

但需要註意的一點是,“風格化”並不擁有無限的邊界。如同設計動效一樣的邏輯,我們不會為界面的每個細節設計動效,要看必要性。在風格化設計上也是如此,它也不一定需要處處存在。除瞭一些特定的項目之外,大部分的遊戲項目基本上遵循“風格化元素隻出現在關鍵點位”的設計原則。也即絕大部分界面中出現的動效設計,均為普適性的設計。

主要的原因在遊戲界面設計的整體節奏設計(如下圖所示)。一款遊戲的所有界面,或者說界面設計系統,應該根據具體功能特點劃分出整體上節奏趨勢,可以簡單理解成全局視角上的有輕有重的視覺設計。這種設計特點延伸到動效設計中時,使我們不得不考慮動效上的風格化點位對這種整體節奏設計上的影響。

最終我們會發現,動效上的風格點位,和靜態視覺設計上的視覺重點是完全重合的。這再次表明:動態設計的全局節奏跟靜態設計的全局節奏是一脈相承的。

在這種情況下,以最小的成本計,動效的設計,乃至於動效風格化的設計也將需要遵循這一原則,隻針對特定交互點位進行“點睛”,而其他的大部分“不那麼重要”的界面部分,就隻需要通用型的設計即可。這也就是動效風格化設計的最小邊界。

在此基礎上,風格設計可以得到一定程度的擴展。從而適應具體的需要。

比如在一些極為風格化的遊戲中,它們的“通用型”風格設計,則是一種已經套用瞭一定風格元素的設計,比如《死亡擱淺》這樣的某一類型科技感界面設計風格,它的基本動作(通用型)都是一種高頻閃爍的樣式,這顯然難以被應用到別的項目裡而不被認出是《死亡擱淺》的特性。

又比如說遊戲《黑帝斯》,它是一款風格化非常重的遊戲。不管是美術風格,還是構建在此基礎上的動特效設計。但我們照樣可以找到通用型的動態設計,不過這需要花點功夫:

這個形式的彈窗,其展開動作是符合常識的,但更重要的是符合其交互結構,因此整個的伸展形式是從左到右,期間增加的一些個性化的遮罩設計,乃至特定的曲線設計,都可認為是該遊戲自身已經有瞭風格化設計之後的一種“通用型”設計。但是這種展開形式以及其表現出的節奏感,則是放之四海而皆準的泛“通用型”設計瞭。

不過,美術風格別具一格的遊戲也可以用非風格化的“通用型”設計填補“非重點點位”的界面空白。這也是大部分遊戲所遵循的設計邏輯。

在《花亦山心之月》這類系統特別龐雜的遊戲裡,大量使用的就是泛通用型的風格設計,隻在關鍵的幾個位置用瞭“點睛”的方法設計出風格特點。

這個彈窗的展開形式和節奏,與上文中《黑帝斯》類似框體的展開,在本質上並無大的不同。它們的區別更多的是美術設計、伴隨元素、結構次序和動作曲線設計。而在《花》的這些元素中,動作曲線的設計可以認為是泛通用型的一個典型事例。如果將整個彈窗的動畫節奏和結構抽離,賦予另外一個設計風格完全不同的遊戲界面上,有可能我們並看不出來有什麼不合適。

總結來看,遊戲界面的動效風格,主要由遊戲界面的設計風格,動效中各個元素的動態次序,動態中的伴隨元素以及諸多底層運動曲線共同決定。這其中,遊戲界面的設計風格甚至遊戲的整體美術風格,都決定瞭界面動效的風格取向,並從根本上決定著動效的風格。而要設計出動效的特定風格,就需要運用合適的動態次序、伴隨元素並熟練運用運動曲線。

另外,在規范和統一整個項目的動效風格時,這幾個維度都是切入口,可以通過規范特定的運動曲線,特定的元素動態次序與特定的伴隨元素使用方式,來制定有效且切實可行的遊戲項目動效制作規范。

綜上,為本篇全部內容。

歡迎點擊下方名片關註本號


往期推薦:

赞(0)