基于模件化理論的用戶界面信息架構設計

朱小意　向云波

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

關鍵詞：模件化理論;用戶界面;信息架構設計;用戶體驗

中圖分類號：TB472 文獻標識碼：A

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

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

1模件化理論概述

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

2用戶界面信息架構現存問題

用戶界面信息架構設計指界面展現的全部信息內容的構成方式，其對界面結構和用戶體驗有著至關重要的效能。目前用戶界面信息架構設計在視覺界面、交互操作、用戶體驗等三個方面存在著一些相對應的問題，需要進一步優化來提高用戶界面的易操作性。

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

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

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

3基于模件化理論的用戶界面信息架構設計意義

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

4基于模件化理論的用戶界面信息架構設計原則

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

4.1統一性

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

4.2增加通用性

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

4.3給予信息反饋提示

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

4.4設計對話

如果用戶需要繼續執行一連串的動作來實現目標，就需要悉心地設計每一個被指引的流程。特別是在用戶界面的開始、進行中，以及用戶完成操作時的響應。精良的指導性設計可以提高用戶的滿意度，從而減少用戶操作界面時的煩惱與緊張感。例如應用程序的安裝流程，或者網絡上的購物流程等。

4.5避免錯誤操作

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

4.6允許用戶撤銷操作

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

4.7用戶應掌控控制權

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

4.8減輕短時間記憶負擔

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

5基于模件化理論的用戶界面信息架構設計思路

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

5.1網頁端用戶界面信息架構設計思路

信息層級概念在模件化理論里，大部分以扁平化的方式呈現，即隸屬功能是同一個層級信息的并列關系。使用者能通過產品界面的導航按鈕選擇自己想要理解的功能，二級導航和三級導航的設計可以減少頁面之間的跳轉次數，確保使用者能在有限的界面范圍完成操作過程。同時能夠將用戶界面變得簡捷、方便，是用戶界面信息架構設計中的關鍵方法。使用清楚明白的信息層級架構關系和顯明的常用功能按鈕，可以方便使用者辨別與切換。

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

5.2移動端用戶界面信息架構設計思路

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

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

6結語

模件化理論的標準化與系統化的形式語言，是藝術想象力和科學思維的組合，隱藏著秩序與規律。模件化的設計構思可以將有限的內容進行無限的變化和組合。在信息化時代下的用戶界面信息架構設計，其模件構思行為大大提高了用戶體驗的效率。因此用戶界面設計師可以持續性地借助模件的力量，尋求設計上的突破與創新。