天天看點

動效如何構成連接配接 篇肆

我們在上篇中提到的一個示例似乎表明“直接的型體轉換”是一種比較直覺且易于了解的連接配接。也就是我們把連接配接進行細化之後,其中的直接聯系概念。

動效如何構成連接配接 篇肆

但在實際項目中,能夠設計成直接聯系的連接配接方式并不多。因為它的要求相對比較“苛刻”。

首先需要規劃好兩個産生直接聯系的控件之間的型體差别。如果差别比較大,就會産生引擎落地的困難。

産生聯系的兩個控件,如果都是普通的矩形,可能還比較簡單一些。但如果,比如說是一個三角形變成一個圓形,可能就需要額外的開發成本,也可能會有更大的性能損耗。而這個功能完全可以用間接聯系的方式去做。直接聯系的方式相比之下就會顯得不夠經濟。

其次,需要顧及到界面發生變化時的頁面布局關系。包括前後界面中各個元素的排布和空間布置關系。

如果産生聯系的前後兩個界面(嚴格來說有可能是同一個界面,為了描述友善,這裡就當它們是兩個界面)中的控件位置是固定的,那麼對界面布局的影響不大。但隻要有其中一個的位置相對不固定,就是一種動态适應的設計方法,需要額外的設計方案與程式邏輯方案。這些都是額外的開發成本。如果這個聯系不足夠重要,也就不值得相應的投入。

最後就是這種運動形式是否擁有足夠的可擴充性。以及這種可擴充性在落地時是否足夠經濟。

可擴充性其實與第二個條件相關。如果控件屬于動态位置設計,那麼相對來說可擴充性要強一些。反之就是特例,為一個特例專門花費功夫制作複雜的轉換效果,也依然需要看這個效果是不是足夠重要。

事實上你會發現。實際項目中能夠滿足三個條件的情況并不多見。這也是為啥直接聯系在遊戲項目裡不是占大多數的情況。甚至于一些巧妙的直接聯系設計會被驚歎。

舉個例子來說,我們在之前的文章中列舉過的《刺客信條:起源》的一個例子,就屬于直接連接配接效果,如下圖所示:

動效如何構成連接配接 篇肆

在這個效果中,裝備圖示被點選後會移動到旁邊一點的位置,然後漸次展開附屬的其他控件。與此同時,前一個界面進行縱深後退動作。加上選中态的白框細膩的動态效果,整個切換效果非常的順滑舒适。

我們對照前面提到的三個條件來看的話,它全都是符合的。

在類似的情況下,我們也可嘗試用這種形式來設計直接聯系動效。

比如說這樣的布局:

動效如何構成連接配接 篇肆

這裡的每個圖示被點選後都移動到同一個位置,此例為界面的中央。這樣的話,每個圖示都會有不同的起點。需要設定它們在移動過程中的運動曲線。不管是動效去挨個制作每個圖示的移動,還是讓程式去用邏輯計算的方式,都有不小的實作成本。

是以事情還是要回到設計動效的初衷:這個地方是否足夠重要。

運用直接聯系的好處不僅在于能讓玩家直接且明确的看到操作前後的界面框體之間的關系,更能創造出視覺上的沖擊力。就像我們現實中的各種直接聯系一樣。

你去書架上拿一本書到手上打開。在你的眼裡,這是一個連續的動作和畫面。你會看到書被從一排書裡拿到你的手上,然後被你的手翻開。這是一個一鏡到底的畫面。你非常明白這個畫面講述的是一個什麼功能:如何拿到書并翻開書。

但與現實不同的是,遊戲界面裡的直接聯系,因為能做到現實中無法做到的事,效果會更加令人驚訝。

比如在遊戲畫面中,我們可以操作抽象的圖形讓它發生變化,可以随意穿梭空間乃至時間直接到另外的畫面中去。這些在現實中見不到的,或者做不到的事情,被連續的畫面講述時,觀衆的驚訝程度不難被想象出來。

這種形式的界面往往會多出現在使用3D界面,或者場景化界面的遊戲中,比如下圖所示的《小小大星球3》中進入關卡的流程操作:

動效如何構成連接配接 篇肆

在3D界面應用得極為普遍的遊戲《全境封鎖2》中,二手手遊交易平台也可見這類直接穿梭的界面與畫面結合的例子,如下圖所示的進入地圖界面和下下圖所示的人物裝備界面:

動效如何構成連接配接 篇肆
動效如何構成連接配接 篇肆

這些做法,利用3D空間的縱深去模拟現實中物件之間的縱深層級關系,進而使界面之間的連接配接關系變得更加直覺易懂,同時也做到了現實中無法做到的抽象物體轉換效果。就會讓玩家感覺到非常強的視覺沖擊力,同時也提升了界面的可了解程度。

但是,這種“奇觀“隻有在”被需要“時才被設計出來。另外,因為實作成本的問題,一般會選擇用更“經濟”的方式去實作常用功能。“經濟”其實也是動效好用的其中一層意義。

例如上面例子的情況,我們就可以在《看門狗2》中看到一個不錯的直接聯系解決方案:

動效如何構成連接配接 篇肆

第一層級的技能切換時,會有圖形間的間接聯系動态,它們的狀态非常了然。

利用不同的狀态,将技能樹的不同部分的選中态以動态形式展現,當選中某一個技能時,它也會有不同的狀态:不可更新、可更新和不足以更新。

動效如何構成連接配接 篇肆