基于模件化理論的用戶(hù)界面信息架構(gòu)設(shè)計(jì)

朱小意　向云波

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

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

中圖分類(lèi)號(hào)：TB472 文獻(xiàn)標(biāo)識(shí)碼：A

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

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

1模件化理論概述

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

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

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

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

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

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

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

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

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

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

4.1統(tǒng)一性

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

4.2增加通用性

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

4.3給予信息反饋提示

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

4.4設(shè)計(jì)對(duì)話(huà)

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

4.5避免錯(cuò)誤操作

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

4.6允許用戶(hù)撤銷(xiāo)操作

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

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

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

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

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

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

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

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

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

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

5.2移動(dòng)端用戶(hù)界面信息架構(gòu)設(shè)計(jì)思路

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

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

6結(jié)語(yǔ)

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