多媒體運用界面的信息邏輯體現(xiàn)

芮喆鵬

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

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

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

1 介紹

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

2 項目背景

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

3 界面信息

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

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

4 界面設(shè)計的重要法則

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

4.1 信息排版和空間感

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

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

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

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

簡潔：是清晰，典雅和經(jīng)濟化的視覺設(shè)計[2]。

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

4.2 界面切換

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

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

4.3 色彩運用

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

4.4 邏輯架構(gòu)

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

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

5 動畫制作

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

5.1 節(jié)奏點與元素出現(xiàn)方式

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

5.2 導(dǎo)向性

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

6 程序輸出

6.1 輸出方式

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

6.2 實現(xiàn)測試

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

7 結(jié)語

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

參考文獻

[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.