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

芮喆鵬

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

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

中圖分類號(hào)：TP39 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2018）04-0207-03

1 介紹

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

2 項(xiàng)目背景

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

3 界面信息

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

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

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

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

4.1 信息排版和空間感

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

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

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

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

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

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

4.2 界面切換

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

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

4.3 色彩運(yùn)用

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

4.4 邏輯架構(gòu)

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

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

5 動(dòng)畫制作

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

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

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

5.2 導(dǎo)向性

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

6 程序輸出

6.1 輸出方式

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

6.2 實(shí)現(xiàn)測(cè)試

程序的實(shí)現(xiàn)最終需要在大屏幕進(jìn)行測(cè)試。因?yàn)榍捌诔绦蜉敵鰞?nèi)容正確，實(shí)現(xiàn)程序的時(shí)候也并沒有大障礙，以至于在最終測(cè)試上沒有很大的過錯(cuò)，《運(yùn)營重構(gòu)》和《IOT》已經(jīng)成功于2017年3月份在巴塞羅那展上出展。

7 結(jié)語

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

參考文獻(xiàn)

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