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

陳瑩

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

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

1前言

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

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

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

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

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

（2）設(shè)備界面

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

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

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

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

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

3 符合用戶體驗(yàn)的多設(shè)備UI設(shè)計(jì)

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

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

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

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

4結(jié)語

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

參考文獻(xiàn)：

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

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

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

基金項(xiàng)目：

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

（作者單位：百色學(xué)院）