多設備時代UI設計研究

陳瑩

【摘 要】本文針對多設備用戶界面設計做了研究，探討網站和應用程序APP的思維方式和設計方法，通過分析網站空間架構與多設備界面，介紹了不受設備種類影響的通用型界面設計方式。

【關鍵詞】多設備;多元性;界面設計

1前言

現今，我們生活中的信息終端設備不再只有PC機，除了智能手機和平板電腦，還有電視設備、游戲機、數字面板（廣告、車載導航等），未來還將有更多全新類型的設備產生，使得設備變得更多元。設計者需站在多元化的角度分析這些設備的多元性，設計出符合用戶體驗的不受設備種類影響的通用型界面。

2 空間架構和設備界面分析

（1）空間架構

網站或者應用程序APP都是由多個頁面、多種功能組成的復雜結構。“鏈接”讓頁面之間產生了相互聯系，使得頁面之間擁有垂直、水平、前后的空間立體結構。用戶是否能夠了解目前所處位置和移動的路徑脈絡與結構，是用戶對網站和應用程序“好不好用”的評判要素之一。因此通過空間立體的視角和理念進行觀察和設計，才能夠設計出好用、易用的網站和應用程序。

用戶瀏覽網站或者應用程序應了解四個要素才可以在頁面之間流暢切換移動，這四個要素分別是現在所處的頁面、該頁面內容、從哪里來到該頁面、該頁面可以前往哪個頁面。除了第三要素，其它要素都可使用網頁中的元素進行說明。因為用戶不一定從網站的主頁進入當前頁面，很可能是通過搜索引擎鏈接到當前頁面，而“從哪里來到該頁面”這一信息呈現需要給網頁元素添加“變化量”，或者運用“互動性”表達。因此，“前后關系”設計目標是用戶光憑直覺就能清楚移動脈絡。設計方法有以下兩種：第一，通過“視覺化”體現頁面的前后關系。直接的方法是直接顯示“從哪里來到該頁面”的信息內容。間接的方法是頁面移動后，網頁產生“變化元素”，移動后，將下一個頁面的視覺元素特征局部或全部替換，替換元素越多，說明移動越遠。第二，利用互動的表現形式呈現頁面的前后關系。所謂互動，指頁面對用戶操作有所反饋。當用戶從一個頁面移動到另一個頁面時，設計者利用簡單移動的效果或者動畫讓用戶了解移動的路徑和過程。這一方法比較適合運用在應用程序。

（2）設備界面

不同的設備尺寸、用途、輸入方式、用戶與畫面之間的距離或者畫面的方向等都有不同的特征，設備的多元性呈現出多種狀態。雖然設備具有多元性，但拋開軟件限制，影響界面設計的物理因素基本相同，包括屏幕尺寸、用戶和屏幕的距離、屏幕的方向、輸入方式四點。

屏幕尺寸的影響：每個設備的屏幕大小和形狀都是固定的，這是影響界面設計的重要因素之一。除了PC機可以調節瀏覽器的大小和形狀，其它設備幾乎都需要全屏方式瀏覽網頁，并且不能放大縮小。設備頁面越大，頁面所能放置的元素和信息就越多，界面設計就擁有較高的自由度。而智能手機這類屏幕較小的設備，幾乎沒有空間放置多余的元素。屏幕的形狀幾乎沒有正方屏，無論屏幕以橫為長還是以豎為長，界面的設計都必須與之相適應。換言之，不管橫豎都會對界面設計造成影響。這些網站和應用程序的特性與實用程度，都需要以屏幕大小和形狀為前提，受屏幕大小和形狀的限制。

用戶和屏幕距離的影響：用戶與屏幕之間的距離是影響所顯示信息量的重要因素。用戶與屏幕距離和信息量是成反比的。為了能夠增加信息量，可以提高分辨率。但在距離固定前提下，能夠顯示的信息量是有上限的，因為文字圖片縮得過小將導致閱讀困難。此外手持觸屏設備受手腕移動范圍的限制，用戶與屏幕距離較小，PC機用鼠標操作距離較遠，如果使用遙控器的設備則距離更遠。所以距離應限制在一定范圍呢，太近或者太遠都對閱讀有影響。因此設計的時候必須把用戶和屏幕距離的影響加入設計方案中考量。

屏幕方向性的影響：絕大多數設備都會產生縱橫兩種方向性，屏幕的方向性會影響畫面滾動的方向和網絡應用內容。屏幕長寬比越大，影響越顯著。在實際應用中，不同的應用內容應有其適合的屏幕滾動方向，例如通訊錄和歌曲等列表類的信息，適合以縱向的屏幕滾動方向顯示，而地圖比較適合橫向顯示（雖然縱橫都可以）。以屏幕方向為主的產品設計，會因為不同產品的特性和使用方式的差別，對設計也有影響。比如智能手機和平板電腦可以根據用戶需求改變屏幕方向，電視設備的屏幕則固定不變。

輸入方式造成的影響：鼠標和觸摸屏、遙控器等輸入工具是連接人與設備界面的起點，因此輸入方式直接影響了界面設計。輸入方式不同，界面的設計也應有不同設計。如果采用的是鼠標加鍵盤，界面設計自由度更高，可以更加精細;觸摸屏和遙控器這類輸入方式，元素的面積就必須放大，各區域之間的差異性就必須更加明顯，可點選和不可點選的元素設計得更具差異性。

3 符合用戶體驗的多設備UI設計

網站或者應用程序在擁有立體的空間架構的同時，更豐富、更具有互動性的界面是現在的主流，因此在設計階段，必須重視的是如何讓用戶理解或者體驗界面的設計。網站或者應用程序的立體結構是指水平、垂直、前后，就如同網站頁面里的上下左右前后的關系。

人類對于不同次元的概念無法全部理解，因此想要通過平面的事物了解立體實物比較困難。要想更具體的掌握網頁結構，可以將自己的想法繪制成圖。Wireframe（線框圖）或結構表等設計資料都可以表明與設計相關的所有事項，不論是網站的方向還是版面編排，都是記錄的內容之一，這些都是讓開發人員的理解統一的關鍵。

有時候雖然按照Wireframe制作，但是網站或應用程序的成品卻與想象完全不同，為了修補理想與現實之間的差異，可以通過模型來體現設計圖不能展現出來的部分，需要注意前后關系和互動性兩個問題。換言之，用模擬實物的方式體驗那些不實際體驗就不能夠理解的事情，這種方式對于網站或應用程序的設計非常有效。首先制作范本網頁，然后嘗試切換頁面，或者試著制作互動性的元素，就像建筑業先做模型一樣，可以幫助我們以立體的模式模擬網站或應用程序的最終成品。

只有在真機上進行測試，才能真正了解網絡服務方式。有的時候網絡服務在除PC機以外的設備，如智能手機、平板電腦或者電視等設備上運行會有相當大的 差異，最終不得不調整網頁設計、視覺設計方案。不斷反復制作測試用的局部或者原型，可以漸漸消除想象與實物之間的差異。首先可以從視覺設計的角度進行檢驗。字體、圖片的分辨率、設備屏幕的大小與觀看距離，都會影響到其在真機中呈現的外觀效果。其次，可以從互動性操作的角度進行驗證。設備的規格、JavaScript或者CSS的前端建置與功效，都會影響網絡服務的執行效率。還可以從輸入方式造成的物理制約方面進行驗證，即通過設備輸入方式、手持方式檢查操作性的優劣。營造印象的方式是從心理層面進行驗證。

4結語

雖然一些設計有著固定模式和方法，但是任何人都可能被某種因素影響而產生不同設計，以及產生設計效果現實與想象的差異，因為不同設備產生極大變化的問題在網站或應用程序的設計中是非常普遍的。本文在多設備的用戶界面基礎上梳理了思維方式和設計方法，設計不僅僅是視覺設計，應該還包含規劃，只有進行規劃設計，才能有效提高效率和產品品質。

參考文獻：

[1]王倩.介于多設備時代下的界面設計表現方式上的差異性[J].藝術科技，2016，29（09）：98.

[2]靜電.不一樣的UI設計師[M].電子工業出版社：北京，2017.

[3]薛文峰.移動互聯網軟件產品中的UI設計研究[J].包裝工程，2016，37（06）：45-48.

基金項目：

廣西壯族自治區教育廳項目：廣西本科高校特色專業及實驗實訓教學基地（中心）建設——電子信息工程）。

（作者單位：百色學院）