多設(shè)備時代UI設(shè)計研究

陳瑩

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

【關(guān)鍵詞】多設(shè)備;多元性;界面設(shè)計

1前言

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

2 空間架構(gòu)和設(shè)備界面分析

（1）空間架構(gòu)

網(wǎng)站或者應(yīng)用程序APP都是由多個頁面、多種功能組成的復(fù)雜結(jié)構(gòu)?！版溄印弊岉撁嬷g產(chǎn)生了相互聯(lián)系，使得頁面之間擁有垂直、水平、前后的空間立體結(jié)構(gòu)。用戶是否能夠了解目前所處位置和移動的路徑脈絡(luò)與結(jié)構(gòu)，是用戶對網(wǎng)站和應(yīng)用程序“好不好用”的評判要素之一。因此通過空間立體的視角和理念進行觀察和設(shè)計，才能夠設(shè)計出好用、易用的網(wǎng)站和應(yīng)用程序。

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

（2）設(shè)備界面

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

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

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

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

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

3 符合用戶體驗的多設(shè)備UI設(shè)計

網(wǎng)站或者應(yīng)用程序在擁有立體的空間架構(gòu)的同時，更豐富、更具有互動性的界面是現(xiàn)在的主流，因此在設(shè)計階段，必須重視的是如何讓用戶理解或者體驗界面的設(shè)計。網(wǎng)站或者應(yīng)用程序的立體結(jié)構(gòu)是指水平、垂直、前后，就如同網(wǎng)站頁面里的上下左右前后的關(guān)系。

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

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

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

4結(jié)語

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

參考文獻：

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

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

[3]薛文峰.移動互聯(lián)網(wǎng)軟件產(chǎn)品中的UI設(shè)計研究[J].包裝工程，2016，37（06）：45-48.

基金項目：

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

（作者單位：百色學院）