論移動界面信息可視化圖形設計

沈愈 蔡楊超

摘要：大數據時代下移動設備的廣泛使用沖擊著桌面端交互界面，用戶瀏覽時間的碎片性為移動界面設計迎來新的挑戰。文章對信息可視化圖形界面的研究與發展進行綜述，針對當前移動界面桌面化、冗雜化、單向性的特點，總結出精準性、直觀性、引導性、可交互性設計準則，以提高移動端的瀏覽效率，帶來愉悅的感官體驗。

關鍵詞：移動界面;界面設計;信息可視化;圖形設計

中國分類號：J524 文獻標識碼：A

文章編碼：1672-7053（2018）07-0149-02

伴隨移動互聯網的盛行及智能化的不斷推進，移動終端使用頻率大幅度上升，潛移默化地改變著人們的生活方式，現如今在地鐵、公交車，甚至人行道上“低頭一族”隨處可見，智能手機、平板電腦便是這類移動設備中的典型代表。本文主體以智能手機和平板電腦移動端界面信息可視化圖形設計為討論對象。

1 信息可視化圖形

仔細觀察用戶不難發現在與移動產品交互時有一共同特征：碎片性。時間的碎片性迫使用戶在短暫的時間內獲取信息并準確理解，提高瀏覽效率且留下深刻印象。用戶和產品之間交互過程中時間的碎片化，使得難以在短時間內有效地獲取信息。據此，那么問題來了，桌面端的交互界面在這狹小的空間內，短時間吸引用戶的眼球顯然存在阻隔。因此，針對移動端的界面信息圖形設計發揮著重要作用，其易讀性、趣味性等特點與移動終端匹配給用戶帶愉悅的體驗。

1）信息圖形化。所謂信息可視化圖形化設計是通過設計藝術的表現手法，將復雜的概念、羅列的文字信息以及龐大的數據以視覺化的語言，如圖形、地圖、表格等形式直觀化。它是建立在科學之上的藝術設計，涵蓋設計心理學、計算機科學、圖形學、設計學等學科。傳統的印刷媒介通常以圖形來發現、觀察和認知事物。在移動產品交互中，介于屏幕空間和用戶瀏覽時間碎片性的原因，比傳統媒介界面要求更高。可視化的圖形應簡潔明了，清晰易讀、互動性強特點，易于被用戶理解、使用和記憶。信息內容以深刻，創造性和有趣性的方式形象化，既可以表達感情又可以有效地傳遞信息。

2）信息可視化圖形的研究與發展。在文字出現之前圖形化的壁畫、巖刻等是人類早期信息交流的初步嘗試，以視覺化的圖形為呈現方式成為信息圖形化的起源。隨著逐步出現象形文、地圖繪制、信息圖表等，直到信息文明的今天，計算機領域信息以可視化的圖形界面為交流媒介。

英國科學家Willam Playfair于1786年出版的《The Commercialand Political Atlas》中首次出現數據型圖表，使用條狀圖和直方圖來描述18世紀英國經濟體系的詳細內容;1801年出版的《Statistical Breviary》第一次發表了關于面積圖形的介紹，兩本書中都使用可視化圖形來呈現數據信息。1 878年，James JosephSylvester第一次提出“圖形（Graphic）”概念，并繪制了用于表達化學鍵及其數學特性的圖表，使信息圖表具有“圖標”的視覺特征。爾維斯特提出的“圖形”概念是基于信息圖表并逐漸向“圖標”化演變[1]。計算機圖形化設計作為一門新興學科隨著計算機圖形學的誕生而得到了廣泛研究。1950年，第一臺圖形顯示器作為MIT旋風l號（Whirlwind l）計算機的附件誕生，該顯示器使用類似于示波器的陰極射線管（CRT）來顯示簡單的圖形。此時計算機圖形學處于準備和醞釀階段，稱之為“被動式”圖形學。到50年代末，MIT的林肯實驗室在“旋風”計算機上開發SAGE空中防御體系，第一次使用了具有指揮和控制功能的CRT顯示器，操作者可以用筆在屏幕上指出被確定的目標，預示著交互式計算機圖形學的誕生。1 962年，lvan E.Sutherland發表《Sketchpad：A Man Machine Graphical Communication System》一文，編寫了世界上第一個圖形化計算機程序標志著計算機圖形學的正式誕生，他被認為是“計算機圖像學之父”[2]。論文中首次使用了計算機圖形學“Computer Graphics”這個術語，證明了交互計算機圖形學是一個可行的、有用的研究領域，從而確定了計算機圖形學作為一個嶄新的科學分支的獨立地位。

現如今，我們使用的電腦桌面操作系統的圖形界面，無論是Macosx操作系統還是Windows操作系統，以及一部分Linux操作系統，例如Canonical公司的Ubuntu等，這些圖形界面和位圖顯示最早是由Xerox PARC提出并開發。Xerox PARC的工程師希望開發友好的用戶圖形界面把桌面概念應用到屏幕上。1 981年施樂公司推出“施樂之星（Xerox Star）”，采用位圖顯示、圖形界面、鼠標、窗口以及桌面概念。在此基礎上，1984年蘋果公司發布了—款具有圖形用戶界面的Maantosh廣泛應用到個人電腦上[3]。1 989年，StuartK.Card、Jock D.Mackinlay和George G.Robertson提出“信息可視化”這個概念[4]。此后信息可視化作為一個學科領域逐漸發展起來。

2 信息圖在移動客戶端界面中的應用現狀

移動產品界面信息的可視化直接影響到用戶的感官使用，友好的界面將給用戶帶來舒適的視覺享受，拉近人與產品之間的距離。以信息圖在移動端中的應用為考察對象存在桌面化、冗雜化、單向性的問題。

1）桌面化。桌面化包括兩方面：一為與移動端相對應的桌面端，主要為計算機瀏覽界面;二為如報紙、雜志等傳統媒介以桌面上閱覽的界面。在移動端界面以桌面端的圖形化呈現“瀏覽器所訪問的信息產品就等于計算機網頁原版”[5]，此種圖形設計方法是套用桌面形式，并未依據移動端具體的尺寸，空間小的個性特點再設計，而是以一張囊括了所有內容桌面化信息圖的形式呈現。因計算機屏幕、報紙、雜志的界面空間可以將長圖比較完整、準確的展現，而在移動端界面限于屏幕尺寸以及時間碎片性的原因，對桌面化信息圖細節的閱讀顯然較為困難。對“以用戶為中心”的人機交互強調用戶的體驗，提高用戶交互過程中的愉悅度，將桌面端的信息圖設計思路直接移植到移動端中顯然是不可取的，不僅降低用戶的閱覽效率，甚至會產生一定排斥感。

2）冗雜化。經過可視化圖形傳達的信息比文字、數據等原始信息更直觀，易被理解，但不排除產生一定的弊端。如信息堆砌的冗雜化，以完整的邏輯線索闡述，造成閱讀時間長信息傳達效率低的問題，而這些在注重高效率的移動時代是不能容忍的。冗雜的可視化內容，不分重點或者重點模糊讓受眾模棱兩可。在信息可視化過程中選取適當的信息源、表現形式和傳播渠道，明確受眾的訴求點。對理解信息、認識世界產生積極作用，而一旦陷入片面追求“可視化”的牢籠，冗雜的圖表和枯燥的形式讓用戶易產生厭倦和逆反心理。在內容不刪減的前提下，可以通過轉換信息編排方式，有選擇的呈現信息并突出重點提高傳達效率。

3）單向性。移動界面的單向性難以提高用戶愉悅度、交互過程中的體驗感。單向性包含兩方面：其一，信息展示的單向性。信息圖從頭到尾的閱覽形式，用戶手勢行為從上到下、左到右撥動，頁面切換按序翻動。在使用過程中并不能進行信息的反饋，單調而乏味;其二，交互流程的單向性。用戶參與交互所觸發的反饋基本只有“下一步”，缺乏動態的互動效果。例如：發光、旋轉、放大、立體化……，以及通過編程實現對可交互性的支持。

3 移動端信息可視化圖形設計要點

基于桌面端移植到移動端界面呈現出桌面化、冗雜化、單向性的弊端，針對移動端屏幕空間尺寸及用戶瀏覽的碎片性的特點，以精準性、直觀性、引導性、可交互性等為設計準則提高移動端的瀏覽體驗。

1）精準性。精準性是信息可視化圖形的首要條件。精準性能夠高效、清晰地傳達信息，縮短信息接收的時間。但圖形在表意上不像文字那樣清晰直接，甚至具有一定的模糊性，為信息在短時間內準確的傳遞增加了屏障。圖形化后的信息接收方是面對用戶不同的個體，因人腦對客觀事物認知的復雜性以及用戶特征因人而異，諸如生活經歷、教育程度、工作背景等差異，使得信息的接收方對圖形的理解不在同一層面，甚至會產生曲解。所以圖形表述要盡可能的精準，使用戶能夠最大化地、準確地把握。

2）直觀性。信息圖形化是讓復雜的數據、繁瑣的文字通過圖形語言以直觀的圖形方式呈現，來傳達基本意義、交互方式，具有通用性特點。針對于移動端信息圖形化的簡潔直觀性比桌面端更具滲透性和輻射性，能快速增加認知度為用戶留下深刻印象。圖形化設計中在遵循有限的屏幕空間前提下，盡可能以生動而形象、簡潔而直觀且富有藝術美感的圖形化形式語義表達，在短時間內讓用戶理解。因此，需要從認知心理學角度剖析，首先應合理安排圖形內容，劃分出視覺主次層次;其次圖形化信息不是凌亂地堆砌，要具有連貫性。

3）引導性。圖形導航清晰可靠，引導性是關鍵。“引導性設計”可根據不同的性質和方向拆分出不同的內容，讓用戶能主動選擇接收的信息，降低在同—頁面中塞八冗雜內容的風險。界面圖形的引導性設計是通過引導的手段，達到交互的結果，從而提高閱讀體驗的目的。

4）交互性。以動態的交互方式與用戶形成互動，依據用戶需求在交互過程中獲取信息，提高用戶參與感增強自主性，將數據、表格、文字轉換為直觀而形象的界面圖形及時獲得信息，多維呈現所需的信息，增加視覺趣味性，吸引注意力給予用戶驚喜與愉悅感，提高用戶體驗。例如：動態的登錄背景、圖片左右切換彈性動畫、手指滑過放大突出效果……，以及通過自定義生存可交互性。

5）美觀性。富有美感的信息圖可以吸引用戶的注意力，增強信息在短時間內的傳達效率。這對圖形界面的板式設計提出高要求，充分利用視覺藝術語言進行設計，主要分為字體、顏色、界面布局等內容。文字表述在信息圖形中起到易于理解的輔助性角色，需要考慮到字符大小、間距等版面布局以提高文字的易讀性。為達到具有美感的視覺效果，在遵循易讀性的前提下將文字圖形化設計，既突出信息傳遞的重點也帶來視覺沖擊感。在進行視覺體驗時，較之于文字和構圖布局，色彩最先進入視覺識別更具視覺沖擊力。美國視覺藝術心理學家布魯墨曾說：“色彩喚起各種情緒，表達感情，甚至影響我們正常的生理感受。”不同的色彩關系給人以冷暖、硬軟、前后等視覺感受與心理效應，構圖中有意識地運用色彩關系造就不同的美感效應。

4 結語

針對移動端界面空間以及用戶時間碎片性特點，圖形化的信息精準高，使用戶能夠最大化地、準確地把握;數據、文字通過圖形語言直觀性的表述，提高信息傳遞效率;通過引導的手段達到交互的結果，提高閱讀體驗的目的;以動態的效果集中用戶的注意力，多維度的呈現信息;強化界面圖形的視覺美感，通過文字、顏色、布局等呈現讓用戶感到有趣、新奇的感官體驗。

參考文獻

[1]柴源，基于信息可視化的圖形設計研究[D]，北京服裝學阮2014.

[2]（美）赫恩著，（美）巴克著，蔡士杰，宋繼強，蔡敏譯，計算機圖形學（第三版）[M]，北京：電子工業出版社， 2010.

[3]（美）沃爾特艾薩克森著，魏群等譯，史蒂夫喬布斯傳[M]，北京：中信出版社，2014，3.

[4]G Robertson，S.K.Card aHdj.D.Mackinlay.The Cognitive Co-processor forlnteractiveUserlnterfaces Proceeeding of the ACM SIGGRAPH symposium on User interfacesoftware and technology， T989： P0-8

[5]黃龍，基于交互與應用的移動終端信息產品設計類型研究[J]，包裝工程，2014 （06）.