多媒體運用界面的信息邏輯體現

芮喆鵬

摘要：本文通過設計法則、多媒體交互運用、綜合論點論據分析揭露如何運用平面設計、界面設計、動畫效果和交互應用法則，并相輔相成，制作出巴塞羅那展多媒體界面交互運用。技術難點是如何把復雜的信息邏輯通過多媒體界面設計和動畫工程變得更清晰更能讓用戶接受。通過與客戶溝通，軟件Adobe Photoshop，Adobe Illustrator和Adobe After Effect運用，進行界面設計，信息刪選，信息流動畫構思，界面信息的邏輯被良好地體現了出來。

關鍵詞：多媒體運用；用戶界面設計；動畫工程；巴塞羅那展；信息邏輯

中圖分類號：TP39 文獻標識碼：A 文章編號：1007-9416（2018）04-0207-03

1 介紹

在如今互聯網發達的世界中，工程師已經走向了更高的多媒體平臺——互聯網/人機智能交互/多媒體運用。面對這種前沿平臺的實現中，界面設計師和交互工程師都開始迎接當代最新任務。于是，本文通過對巴塞羅那展中興交互媒體的分析，闡明如何使用界面設計和交互體驗法則，更好地體現當代多媒體運用的展示效果。主要的技術難點是如何把復雜的信息量通過多媒體界面設計和動畫效果變得更清晰更能讓用戶接受。通過對于本論文的閱讀，可以知道如何通過Adobe Photoshop，Adobe Illustrator、Adobe After Effect和Unity3d軟件來體現良好的信息邏輯設計。

2 項目背景

在實現界面設計與交互程序前，先要理解計算機交互界面中的信息。中興是中國最大的通信設備上市公司。在巴塞羅那展中，我主要負責《運營重構》的部分，順利做完《運營重構》之后，去輔助《IOT》交互界面的設計與程序動畫。實現該項目用到了Adobe Photoshop、Adobe Illustrator、Adobe After Effect和Unity3d軟件，Adobe Photoshop和Adobe Illustrator是用于用戶交互界面設計，Adobe After Effect用于用戶界面動畫預演，最后Unity3d是負責最終實現，我主要負責交互界面設計、動畫預演和程序內容的輸出。我負責的兩個板塊都被投放于國際巴塞羅那展的展覽中。

3 界面信息

《運營重構》的信息份量重，需要刪減整合與規劃。當我拿到中興客戶的ppt看信息量的時候，覺得信息多而復雜，很難通過多量的信息內容抓住信息重點。如果界面中的信息都是重點，那就沒有了信息權衡性或突出選擇性。因此在真正交互界面開始前，我首先要求客戶篩選信息，抓出界面中的信息重點，從而能有效提高界面和交互設計。

《IOT》的信息量相對較少，但同時也要遵循邏輯。《IOT》方的信息量比較均衡，所以創意構想和元素背景優化也相對容易掌控。

4 界面設計的重要法則

在開始討論界面設計發展的時候，首先要定義界面設計。使用者界面設計是使用者與系統的連接點，很大程度上決定了系統的有用性和效率性[1]。界面設計在實用性上和使用者體驗上也是更為看中的。在新媒體與互聯網方面，界面設計格外來的重要，它有更多的設計原則與定律，比如一致性、回饋性等。多數該設計的法則都是從使用者角度出發。

4.1 信息排版和空間感

設計工程師需要通過理解信息的邏輯性，根據邏輯架構進行界面設計。圖2界面的設計邏輯架構與圖1客戶給的信息結構一致。雖然客戶給到的信息量龐大，但通過分類后，相似信息種類的信息放在了相同的圖案中。從給到的眾多信息到界面美化和空間感的匹配，在這個轉化的過程中，需要設計工程師根據原有框架的邏輯性進行思考然后對元素和空間進行美型優化。在信息展現的同時，不能缺乏平面設計中對于空間透視感，美感方面的想象。在思量界面設計的同時，也需要考慮相關邏輯性，客戶需求等因素。

圖2界面運用了三大通用法則和諧，平衡與簡潔。在《Visual Design Principles for Usable Interfaces》發表文中，一共有三種視覺傳達法則能有益于所有的設計領域：和諧、平衡與簡潔。

和諧：是能把許多不同視覺元素用思考過的合并模式弄成一個有序令人舒適的視覺效果。

平衡：是把不同視覺元素通過令人愉悅的和諧法則設計出一種舒適和穩定的設計。

簡潔：是清晰，典雅和經濟化的視覺設計[2]。

在原有信息量不能動的前提下，通過視覺元素的優化，空間透視的變化，構成一個和諧的空間。為了實現畫面的平衡感，把重要的信息放在了畫面的中部與下部分，通過左中右的透視設計，設計出了令人愉悅的視覺感。在簡潔方面，我方不斷要求客戶盡量減少原來信息圖紙中的信息量，下圖中的信息量已大被減少，以便突出了畫面中三個框中的主體要素。這是一個多內容但是畫面不失美感與空間結構，并清晰表明信息邏輯的例子。

4.2 界面切換

界面與界面之間需要有邏輯切換。圖1的左下方本來屬于該界面的元素，因為考慮到agile， intelligent和open屬于重要按鈕，該圖1畫面的信息量已經超負荷，所以決定把三個重要按鈕放在圖3界面中，而圖2界面變成屏保界面。當沒用戶觸碰該系統時，屏幕顯示圖2的狀態，當點擊畫面的時候，圖3畫面則出現，用戶可以點擊按鈕跳轉到不同的畫面。

與此同時，運用設計通用法則簡潔。相比上圖2的信息容載量，圖3的信息大量減少，只有按鈕名字 Agile（敏捷）， Intelligent （智能）和Open（開放），以及Zero Touch Evolution（零距離觸摸演化）的標題。三個按鈕分別會對應連接其他三個界面。該界面可以采取更多的平面設計技巧去完善視覺效果，從背景景深，到按鈕大小、炫酷程度以及背景流星動畫等效果，可以看出此界面的設計大方與大膽。該界面設計時運用了由近至遠的構圖概念，豐富了創意空間的展現。因此，少量的內容信息不會給視覺設計師太多的枷鎖。

4.3 色彩運用

多媒體運用界面中，色彩運用是界面信息設計的成敗關鍵。國外刊物《information visualisation using vision to think》的Ben Shneiderman中提到顏色是最有效的視覺顯示屬性，然后她能幫助有效快速地做出決定。因此整個畫面的顏色是遵從客戶建議的科技藍，而相對應需要突出按鈕可以是它的對比色調——黃色。比如，從圖4界面中可以看出整個畫面的傾向性為下部分的黃色按鈕，能夠吸引用戶去點擊它。

4.4 邏輯架構

界面把控的時候容易走進邏輯架構的誤區。很多設計師在拿到IT客戶給的信息量時，會被大量的信息量所困惑。因此部分人會因為信息量的雜亂，而在排版設計上失控。根據界面設計經驗，IT行業的工程師不愿改掉原本信息的邏輯性，更加強調了上下不能動，左右可以調整位置。因為信息的上下有階級或等級關系，隨意改變會嚴重破壞信息的邏輯框架結構。

視覺設計不能改變原有信息界面的上下邏輯。從圖5、圖6可以看出視覺設計并沒有改變Central-DC中的畫面信息和邏輯架構。與此同時，根據客戶需求Domain-DC和Edge-DC的信息成分被虛化，為了重點突出中心區域的重要性。該界面的創意是把信息放于云里，形成三維立體的空間感，不讓畫面信息格局變沉悶。

5 動畫制作

在完成了交互界面設計之后，我們要把設計出的元素放入adobe after effect中制作真實程序的動畫預演。通過界面的動畫預演來進行真實交互程序的效果呈現。好的界面動畫效果，可以理清用戶對界面信息的理解，比如畫面元素出現的次序。

5.1 節奏點與元素出現方式

所有界面中的元素呈現，需要掌控動畫的節奏點。根據前輩專家的分析，所有畫面元素的呈現不能超過3秒鐘，3秒鐘之后用戶可以清晰看到畫面中的信息內容。每個元素的出現方式以彈跳為主，1秒一共25幀，圖7圖8顯示跳出幀率一共8幀，第一幀大小為0，第五幀的時候元素大小的120%，第八幀大小為100%，與此同時加上模糊動畫的效果，給元素的出現動畫增加活力。

5.2 導向性

界面元素的呈現次序決定了界面信息的邏輯性體現。圖9中所有元素的起初出現次序是由上到下、由遠及近，該界面中最重要的部分是虛線部分，光點掃過的地方才會由灰色虛線變為藍色虛線。兩個光點起初從最上方的GSO開始出發，會掃過每一個元素比如SDN-O，NFV-O，VNFN和DC-Controller等。光點邊每掃過一個元素塊，邊掃亮虛線的意義是只有一一激活每個流程圖上的元素，最前排的云狀圖形的Metro點才能被激活。通過導向性動畫，用戶能夠清晰明白畫面信息中的邏輯走向。

6 程序輸出

6.1 輸出方式

動畫預演中的所有元素需要逐一輸出給程序編程。比如下圖中需要輸出的元素有標題，每個icon，文字敘述，藍色框，背景視頻，并且所有的輸出都是以序列幀的png圖片格式保存，而且都必須是循環動畫序列幀，可以讓程序與動畫預演的效果一致。輸出方式正確才能確保畫面信息邏輯呈現方式準確無誤。

6.2 實現測試

程序的實現最終需要在大屏幕進行測試。因為前期程序輸出內容正確，實現程序的時候也并沒有大障礙，以至于在最終測試上沒有很大的過錯，《運營重構》和《IOT》已經成功于2017年3月份在巴塞羅那展上出展。

7 結語

巴塞羅那展的多媒體交互界面程序《運營重構》和《IOT》，由信息分析，界面交互設計，動畫預演到程序內容輸出，都由本人順利完成。其中的主要技術難點依舊是如何把復雜的信息可視化，簡單化，美觀化和人性化。本人的創意設計思維都是以人為本，以客戶為中心出發，每個界面都滿足了中興客戶的需求，理解界面信息邏輯，從而能夠相對高效高質量地完成界面設計，動畫預演以及最后的程序輸出。

參考文獻

[1]Tsichritzis， D C， Office Automation： Concepts and Tools[M].Berlin：Springer，1985.

[2]Watzman S， ‘Visual Design Principles for Usable Interfaces[J]. in Julie A. J （ed.）， The Human-Computer Interaction Handbook， CRC Press， Boca Raton， Fla，2012.

[3]Shneiderman， B， Information visualization using vision to think， Morgan Kaufmann Publisher， San Francisco， California，1999.