朱小意　向云波

摘要：文章首先以德國藝術(shù)史學(xué)家雷德侯的“模件化”理論為導(dǎo)向，對用戶界面信息架構(gòu)現(xiàn)狀進行分析;其次通過對用戶界面的視覺界面、交互操作、用戶體驗三個方面進行研究，從用戶的角度出發(fā)，分析用戶在體驗過程中的功能需求，并對用戶界面信息架構(gòu)進行多層次研究，探討了基于模件化理論的用戶界面信息架構(gòu)設(shè)計價值;最后總結(jié)出用戶界面信息架構(gòu)設(shè)計的原則。通過文章的研究，以期為基于模件化理論的用戶界面信息架構(gòu)設(shè)計提供理論支撐和方法借鑒。

關(guān)鍵詞：模件化理論;用戶界面;信息架構(gòu)設(shè)計;用戶體驗

中圖分類號：TB472 文獻標(biāo)識碼：A

文章編碼：1672-7053（2021）11-0132-03

用戶界面是用戶和產(chǎn)品進行交互的主要途徑，當(dāng)今社會隨著移動互聯(lián)網(wǎng)和新時期信息科學(xué)技術(shù)的發(fā)展，用戶界面從主要以平板電腦為載體，擴展到各種移動終端、智能設(shè)備。用戶對用戶界面和體驗有了更加多的關(guān)注，使得用戶界面信息架構(gòu)設(shè)計更加需要加強。模件具有獨立性、組合性、重復(fù)性、置換性、適應(yīng)性的特點。“模件化”理論的應(yīng)用可以讓用戶界面信息架構(gòu)布局更加清晰，在模件化理論的基礎(chǔ)上創(chuàng)造出具有一定數(shù)量的、多樣性的組合布局方式，形成全新的創(chuàng)意性、獨特感的設(shè)計形態(tài)。從設(shè)計原則和設(shè)計形式研究模件化理論對用戶界面信息架構(gòu)產(chǎn)生的作用，能夠使設(shè)計師更加重視用戶視覺界面、交互操作及用戶體驗的合理性，在實踐工作中能將模件化理論運用到用戶界面信息架構(gòu)設(shè)計中，使得界面能夠更準(zhǔn)確、廣泛地詮釋和傳達信息內(nèi)容。

1模件化理論概述

模件系統(tǒng)分為五個層次：元素、模件、單元、序列和總集。在模件系統(tǒng)中，第一階層為元素。形式不同的元素經(jīng)過抽象、有意識的組合，產(chǎn)生形態(tài)不同的元素是構(gòu)成模件的基礎(chǔ);第二階層是模件，它是由元素組成的獨特母題，并且能通過復(fù)雜的結(jié)構(gòu)組合為裝飾單元;第三階層是將模件按一定秩序組成構(gòu)圖，即形成模件體系;第四階層是序列，由類似并且存在內(nèi)部關(guān)聯(lián)的單元會集形成。同類單元的形式、性能、體積、造型等各方面都具有秩序感、形式化的特征;第五階層是總集，展現(xiàn)了模件化理論的關(guān)鍵目標(biāo)，即大規(guī)模的生產(chǎn)。因而模件化理論在用戶界面信息架構(gòu)設(shè)計中運用相當(dāng)普遍。模件體系是以每個模件按照必要的準(zhǔn)則進行組裝而形成的復(fù)雜且有機結(jié)合的整體，是每個模件的思維及表達方式。模件系統(tǒng)具有寬泛的適應(yīng)領(lǐng)域，是一種能無限發(fā)展的非定形系統(tǒng)。模件系統(tǒng)既包合其本身的模件元素，也包括單元和序列，單位是經(jīng)過組裝的特征從模件中完成“模件”到“模件系統(tǒng)”的衍生過程，可以獲得增值和替換，即是有限到無限過程的紐帶和方法。總之，模件的根本就是交換的單元，而且能以有差別的方法組合成更大的單元。

2用戶界面信息架構(gòu)現(xiàn)存問題

用戶界面信息架構(gòu)設(shè)計指界面展現(xiàn)的全部信息內(nèi)容的構(gòu)成方式，其對界面結(jié)構(gòu)和用戶體驗有著至關(guān)重要的效能。目前用戶界面信息架構(gòu)設(shè)計在視覺界面、交互操作、用戶體驗等三個方面存在著一些相對應(yīng)的問題，需要進一步優(yōu)化來提高用戶界面的易操作性。

首先，在視覺界面方面。（1）網(wǎng)頁端和移動端界面存在太長的內(nèi)容寬度和太小的文字;在用戶視覺上會影響信息傳達的有效性;（2）在界面的按鈕規(guī)范上存在不明確的情況。頁面上的某些元素可以幫助用戶確定正在瀏覽的頁面，其他元素應(yīng)該盡可能清晰一致;

其次，在交互操作方面。（1）所有內(nèi)容全部平鋪在一個網(wǎng)頁界面上（如圖1），所有選項全部展開，雖然用戶可以創(chuàng)建功能概覽，但是仍然存在90%左右的按鍵用戶不經(jīng)常使用，就會給其添加認(rèn)知負(fù)擔(dān)。界面中信息內(nèi)容過多時可以使用滾動，此時需要在界面中使用有效的信息內(nèi)容來協(xié)助用戶建立上下文，為用戶解決滾動問題;（2）在彈窗框上面再設(shè)置彈窗。這樣容易打破用戶在使用過程中的心理模型。在用戶完成第二個彈窗上的操作時還是會回到原來的界面，給用戶產(chǎn)生了模糊性信息;

最后，在用戶體驗方面。（1）下拉菜單分類不清楚（如圖2）。例如，新版微信的用戶界面將“朋友圈”功能中點贊和評論收縮進了一個按鈕，用戶需要再點進去操作，從而影響用戶體驗;（2）頁面的表單元素過多。這樣影響了用戶邏輯交叉流暢性，增加了視覺空間設(shè)計負(fù)擔(dān);（3）界面的當(dāng)前位置不清楚（如圖3）。在每一個頁面上都會提供明確的標(biāo)題或者是頁面的名稱，當(dāng)網(wǎng)站層級和深度大于1級時，就需要考慮是否采用面包屑引擎進行導(dǎo)航，如果一個流程中有多種步驟，就會根據(jù)需求來顯示這些步驟。

3基于模件化理論的用戶界面信息架構(gòu)設(shè)計意義

信息架構(gòu)作為用戶界面的脊梁，它主要是歸納組織用戶界面信息內(nèi)容、建設(shè)信息架構(gòu)布局及設(shè)計，以及對用戶信息界面所呈現(xiàn)出來的各種科學(xué)技術(shù)方法和藝術(shù)手段。即把無秩序的信息進行歸納分類、篩選計劃，并形成一目了然的邏輯關(guān)系。它的重要性和關(guān)鍵目標(biāo)，是使得信息能夠被用戶理解和直接訪問。基于模件化理論的用戶界面信息架構(gòu)設(shè)計的重要性意義，旨在把藝術(shù)理論框架里的“模件化”體系與信息架設(shè)計的形式相互結(jié)合，具備了研究性和預(yù)見性，提供了一種新的闡釋和思索“模件化”的視域，從而使網(wǎng)頁端和移動端用戶界面信息架構(gòu)能更加栩栩如生，直接了當(dāng)?shù)卣宫F(xiàn)中國藝術(shù)中模件化制造的方法與技術(shù)，對用戶界面信息架構(gòu)設(shè)計具有非常重要的實際意義。模件化理論為用戶界面提供了設(shè)計思維，從移動端和網(wǎng)頁端用戶界面中發(fā)掘并剖析了“模件化”特點，將藝術(shù)中的“模件化”理論運用到用戶界面信息架構(gòu)的創(chuàng)新設(shè)計實踐中。

4基于模件化理論的用戶界面信息架構(gòu)設(shè)計原則

用戶界面信息架構(gòu)設(shè)計的核心是整理信息內(nèi)容活動的流程，在信息內(nèi)容的布局上，需要適應(yīng)使用者的行為習(xí)慣和思維邏輯，便于界面信息內(nèi)容可以正確無誤地傳遞;另外也要考量以提升用戶體驗為核心的交互性質(zhì)，為界面信息內(nèi)容設(shè)計有效的布局。早在1998年，馬里蘭大學(xué)教授本·施耐德曼博士獲得ACM CHI（美國計算機學(xué)會計算機人機交互終身成就獎）時，提出了“用戶界面設(shè)計的八大黃金法則”。

4.1統(tǒng)一性

統(tǒng)一性是模件化理論最大的特點，統(tǒng)一性可以幫助用戶快捷了解產(chǎn)品的使用環(huán)境，從而更簡便地完成目標(biāo)。在設(shè)計相似功能的菜單時，可以使用類似的圖形、圖表、色彩，從而使菜單的層次布局、用戶流程圖達成統(tǒng)一性。這種信息呈現(xiàn)方式的規(guī)范化，可以減輕用戶在使用界面過程中的認(rèn)知負(fù)擔(dān)，使用戶體驗更加流暢和易懂。

4.2增加通用性

用戶人群不同會存在個性化需求，可以豐富界面設(shè)計指導(dǎo)方式的要求，提高用戶信息架構(gòu)設(shè)計的質(zhì)量。例如，網(wǎng)頁端的磁鐵式信息架構(gòu)和移動端的快捷窗口設(shè)置，使用次數(shù)的增加，加強了用戶經(jīng)驗的積累，用戶能更敏捷地瀏覽和掌握界面。

4.3給予信息反饋提示

用戶在操作上首先要知道其所在位置和發(fā)生的事情，用戶在每次完成一個操作后，需要系統(tǒng)給出相對應(yīng)的反饋，之后用戶才能進行下一步的界面操作。反饋可以分為許多不同的類型，例如語音提示、觸摸式反饋等不同類型的形式。

4.4設(shè)計對話

如果用戶需要繼續(xù)執(zhí)行一連串的動作來實現(xiàn)目標(biāo)，就需要悉心地設(shè)計每一個被指引的流程。特別是在用戶界面的開始、進行中，以及用戶完成操作時的響應(yīng)。精良的指導(dǎo)性設(shè)計可以提高用戶的滿意度，從而減少用戶操作界面時的煩惱與緊張感。例如應(yīng)用程序的安裝流程，或者網(wǎng)絡(luò)上的購物流程等。

4.5避免錯誤操作

用戶不喜歡在操作界面時被提示“錯誤”，在設(shè)計時需要多重考量如何降低使用者犯錯誤的機率。用戶在界面使用過程中難以避免會錯誤出現(xiàn)，界面反饋需要在報錯的同時提供良好的解決方法，給予用戶簡潔、清晰的操作流程，以便于指引用戶方便快捷地分析及處理問題。例如在線表單設(shè)計，用紅色的線框作為標(biāo)記，來提醒用戶未填寫的表單信息。

4.6允許用戶撤銷操作

設(shè)計師和技術(shù)人員在系統(tǒng)開發(fā)過程中，需要設(shè)置顯著的方法，讓用戶恢復(fù)之前的操作。在單次操作、信息輸入或整個操作流程完成后，都需要讓系統(tǒng)允許進行返回的操作，這一功能減少了用戶的使用壓力，使用戶知道即使在操作失誤時，也可以使用撤銷功能，讓用戶更加放心地去探索界面的功能。

4.7用戶應(yīng)掌控控制權(quán)

在界面設(shè)計過程中需要仔細(xì)考量，如何能夠讓使用者主動地去研究和使用界面，而不是被動地接收界面信息。要讓使用者能夠清楚地了解界面的操作功能，在界面設(shè)計時依據(jù)用戶期待的使用方法去運行，從而獲取使用者的信賴和支持。為了使用戶能夠掌握界面，還需要清晰了解目前的環(huán)境和狀況、進程及接下來應(yīng)該怎樣做。

4.8減輕短時間記憶負(fù)擔(dān)

界面信息架構(gòu)設(shè)計應(yīng)在模件化理論的引導(dǎo)下，盡可能保持簡潔、簡單的信息層次結(jié)構(gòu)，讓用戶識別信息的時候不需要記憶信息。用戶界面信息架構(gòu)設(shè)計是高效交互設(shè)計師和uI設(shè)計師必須具備的基礎(chǔ)技能，用戶界面架構(gòu)更多的是各種功能模塊的重新排列組合，這一點突出了模件化理論在界面中的重要性。要想設(shè)計出卓越、高效、流暢的用戶界面信息架構(gòu)設(shè)計，不僅要符合及滿足八大用戶界面設(shè)計要求的黃金原則，還要具備一定的理論支撐。

5基于模件化理論的用戶界面信息架構(gòu)設(shè)計思路

模件系統(tǒng)是由元素、模件、單元、序列和總集等各部分組成，“元素”不存在模件化，需要通過增加組成方式后才能形成“模件”。按模件體系去分析，“元素”是每個功能模塊的基礎(chǔ)組成，而“模件”是這些元素的基本形式，其通過組合形成“單元”，在不同排列方法的組合下，形成多樣的用戶界面信息架構(gòu)布局，即模件系統(tǒng)中的“總集”。

5.1網(wǎng)頁端用戶界面信息架構(gòu)設(shè)計思路

信息層級概念在模件化理論里，大部分以扁平化的方式呈現(xiàn)，即隸屬功能是同一個層級信息的并列關(guān)系。使用者能通過產(chǎn)品界面的導(dǎo)航按鈕選擇自己想要理解的功能，二級導(dǎo)航和三級導(dǎo)航的設(shè)計可以減少頁面之間的跳轉(zhuǎn)次數(shù)，確保使用者能在有限的界面范圍完成操作過程。同時能夠?qū)⒂脩艚缑孀兊煤喗?、方便，是用戶界面信息架?gòu)設(shè)計中的關(guān)鍵方法。使用清楚明白的信息層級架構(gòu)關(guān)系和顯明的常用功能按鈕，可以方便使用者辨別與切換。

首先，在界面中最主要的是視覺因素，根據(jù)人的視覺流程習(xí)慣，為從上到下、從左至右。用戶更容易注意到信息橫向排列中首末的內(nèi)容，信息內(nèi)容豎向排列則會使用戶關(guān)注度逐漸遞減?？ㄆ叫畔⒓軜?gòu)是以每一個卡片來承載圖標(biāo)，用文字大小來區(qū)分信息層級、圖像及顏色等元素的模件。通過在用戶界面中重復(fù)組合的方式，來形成不同功能的單元。例如，谷歌網(wǎng)頁端界面的卡片式風(fēng)格，具有表面直觀而自然的立體感，卡片可以讓用戶直觀地感受到使用情景;其次，在交互操作方面，磁鐵式信息架構(gòu)是由基礎(chǔ)形狀承載國標(biāo)、文字為一個模件，在這個模件的基礎(chǔ)上添加數(shù)量，進行規(guī)整的排列組成的單元形式。例如微軟Windows10的動態(tài)磁貼，將應(yīng)用通知最新信息與圖標(biāo)相結(jié)合，提供一種更加高效的信息查閱方式。用戶無需打開應(yīng)用就能看到自己關(guān)注的最新信息，再根據(jù)自身需要，點擊進入應(yīng)用了解更詳細(xì)的內(nèi)容;最后，在用戶體驗方面，用戶體驗以簡潔、方便、易操作為基本模件元素，全方面的考量這些元素，使其組合成以“用戶為中心”的設(shè)計理念模件。模件在視覺界面、交互操作中的重復(fù)考量，組成了視覺界面用戶體驗的模件化以及交互操作中的模件化方式。例如Windows10的動態(tài)磁貼，其設(shè)計的大方塊比不規(guī)則小型圖標(biāo)更易被選擇和點擊，同時矩形更利于磁貼的移動、位置的擺放、大小縮放與任何形式的組合。具有高效炫酷的視覺和簡單易于操作的交互式用戶體驗，滿足“以用戶為中心”的信息架構(gòu)設(shè)計特點。

5.2移動端用戶界面信息架構(gòu)設(shè)計思路

移動端產(chǎn)品的用戶界面信息架構(gòu)設(shè)計，在視覺方面傾向扁平化設(shè)計趨勢，目的是能讓用戶在使用產(chǎn)品的過程中，可以簡潔方便地獲得界面信息內(nèi)容。視覺方面的扁平化和交互信息內(nèi)容的扁平化，都是以視覺元素和感覺因素為用戶服務(wù)。建立優(yōu)良的用戶體驗，主要形式是予以清楚、標(biāo)準(zhǔn)的組合方式來呈現(xiàn)界面信息內(nèi)容，在使用者和信息兩者之間建立有效信息傳達的紐帶。手機和Ipad等移動設(shè)備受操作空間的制約，需要對信息內(nèi)容的呈現(xiàn)進行更加清晰和靈活的布局。同時在用戶界面信息架構(gòu)設(shè)計中，需考量因屏幕大小的特點，而導(dǎo)致用戶操作體驗和視覺疲勞等影響因素。

首先，用戶界面在獲得了基礎(chǔ)“模件”體系和規(guī)劃了完整的信息篩選過程后，需要將界面元素進行視覺層面的優(yōu)化呈現(xiàn)。在移動終端，用戶界面信息架構(gòu)設(shè)計常見的視覺元素有色彩、文字大小、圖像位置、形態(tài)等。視覺上主要是遵從對圖形、圖像、色彩等這些元素高層次特點進行剖析，讓使用者感覺到界面使用過程更加易于操作、有效的信息內(nèi)容更加易于辨別，從而降低了用戶視覺干擾性和疲憊感;其次在交互操作方面，用戶界面在移動端的展現(xiàn)，依靠觸摸技術(shù)來實行交互性能，經(jīng)過各種各樣移動的手勢來呈現(xiàn)交互的方式。移動端用戶界面信息架構(gòu)設(shè)計能夠展現(xiàn)“模件化”理論交互的優(yōu)良特點，依據(jù)界面信息架構(gòu)的布局方式，可對不同信息內(nèi)容部分，設(shè)計相對應(yīng)的交互形態(tài)。比如快捷窗口式信息架構(gòu)，能使用戶便捷地跳轉(zhuǎn)至需求的內(nèi)容信息頁面;最后，在用戶體驗方面，“多點觸控”的使用方式，可以使用戶通過手指點擊屏幕來完成交互功能，是呈現(xiàn)“模件化”理論交互設(shè)計最重要的技術(shù)支持，為界面設(shè)計給予了更大的可操作空間。移動端設(shè)備所具有的屏幕特性及智能化、人性化的“多點觸控”功能，是區(qū)別于其他設(shè)備的主要特點之一。例如蘋果手機IOS系統(tǒng)的手勢操作，增加了用戶的操作興趣，提高了操作便捷性。

6結(jié)語

模件化理論的標(biāo)準(zhǔn)化與系統(tǒng)化的形式語言，是藝術(shù)想象力和科學(xué)思維的組合，隱藏著秩序與規(guī)律。模件化的設(shè)計構(gòu)思可以將有限的內(nèi)容進行無限的變化和組合。在信息化時代下的用戶界面信息架構(gòu)設(shè)計，其模件構(gòu)思行為大大提高了用戶體驗的效率。因此用戶界面設(shè)計師可以持續(xù)性地借助模件的力量，尋求設(shè)計上的突破與創(chuàng)新。