探析模件化理論與個性化方式在界面設計中的運用

摘要：界面設計是產品和用戶之間重要的溝通橋梁，服務于人際交互的設計領域。本文從德國藝術史學家雷德侯的模件化理論以及個性化方式入手，對界面設計案例進行分析，針對模件化理論在界面框架布局中的運用和個性化方式在界面視覺上的運用現狀進行研究，提出目前界面設計需要解決的問題，最后總結出界面設計的方法，希望能為現階段界面設計帶來新的思路。

關鍵詞：模件化理論 個性化 界面設計

德國藝術史學家雷德侯探討的模件化理論框架體系是一種以模件為基本單位，以模件的設計思維和技術為根本的理論指導所形成的藝術設計和創造，即《萬物》理論中的“模件化”。書中雷德侯所謂的自動化模件生產是以國際上標準化原材料和零部件為主要依據設計組成各類物品的自動化生產管理系統，可以進行大量的預制原材料和零部件，以不同的形式完全地組合在一起形成新的模件，即用有限的原材料或零部件進行設計與生產，成為各種形式變化很大、多樣的模塊和單元。[1]本文從界面設計原則和設計形式入手，探討模件化理論和個性化方式在界面設計中的運用，使設計師更重視個性化視覺界面、模件化布局、用戶體驗的合理性，能有意識地運用模件化理論和個性化表達方式進行界面設計的實踐活動。

一、模件化理論與個性化方式概述

（一）模件化理論

中國人在其生產形式上善用標準模塊疊加組合，人們出于對于感性思維和理性思維這對矛盾的平衡，將預制零件以不同方式組合裝配創造出多種多樣的單元，得到了千變萬化的效果，在雷德侯《萬物》這本書中，它們即被稱為“模件”。他用西方的思想把中國傳統的美學文化分析和表達了出來，提出了“模件化系統”的概念，論述了中國傳統美學文化在其生產模式中的主要模件化特征。雷德侯關于模件化的描述說明了中國藝術家本身并非像他們的西方同行那樣，不是追求對大自然的真正再現，而是追求通過探究和制作來進行模仿，直接有效地從一種創造到制作成千上萬乃至于無限數量的大型藝術品。他敘述了模件的理念和思想如何貫通中國古代官本位的傳統文化、中國的宗教以及有利于個人自由的思想。[1]總而言之，模件化的根本就在于將單元進行互換，并且它們可以用不同的形式組合和拼湊成一個更大的單元。

（二）個性化方式

個性化指的是非大眾化的事物，在大眾的基礎上增加獨特的創意，擁有自身特殊的需求、獨具一格的品位、與眾不同的視覺效果，也稱為“定制化”，在界面設計中是指為了適應特定的個體需求所提供的服務或商品，通過界面設計的個性化方式可以提升顧客的滿意度、用戶點擊率，改進網站廣告等。滿足服務人群的個性化是整體社交媒介及其產品體系的關鍵要素。比如網頁界面設計中的個性化是為用戶所創立的元素，它可以讓瀏覽痕跡被記錄下來，當用戶剛剛離開一個網站以后，網頁就有可能根據這些數據來算出用戶的需求和偏好，其設計初衷是思考如何充分利用個性化方式的界面設計賦予產品一種更好的功能與形式，使得產品本身具有豐富的感受與情緒，滿足用戶的基本生理要求和更多層次的心理需要，提升用戶體驗感。

二、模件化理論在界面框架布局的運用現狀

基于模件化理論的用戶界面扁平化設計過程是為了營造高效的信息層級理念，將用戶界面變得簡捷方便是其關鍵的邏輯思維。在用戶界面框架布局中圖片排版、文字對齊方式、圖標位置會影響界面節奏感，為了提高用戶高效的操作性與優良的體驗感，界面設計需要更好地進行模塊區分，幫助用戶在內容繁多的界面中歸納整理信息，易于用戶理解并有效獲取信息。目前界面設計運用標簽系統設計、網站導航、站點地圖等形式。標簽系統設計由標題和文字組成模件應用在各大網頁之中，比如用戶使用百度網頁搜索某個關鍵詞會出現很多詞條，好的標簽系統設計要符合用戶一致的使用方法，能夠正確表述目標或內容。導航設計包含導航條、超鏈接、按鈕和其他可點擊的項目為模件，很多產品界面會使用導航設計來傳達信息，比如縱向導航、橫向導航、選項卡式導航及下拉式導航等。網站站點地圖，是一張能讓用戶隨時瀏覽網站的頁面列表，能夠準確地反映和顯示出一個站點所有頁面之間的層次關系，是鏈接到網站所有內容的一個存儲器。

另外，網頁端常見的界面框架布局有國字形、POP型、口型、T型等結構。例如，國字形網頁布局一般將網站的LOGO和導航欄、BANNER等信息放置最頂部，網站的主要內容居中心位置，左側放置菜單，客服信息和友情鏈接居右側排列，公司信息和版權信息放置網站底部。這些布局方式都可以看作模件化通過不同的組合排列方式運用在不同的網頁界面設計布局中。而在移動端用戶界面中常見的布局有宮格式、列表式、圖表信息布局、標簽布局和瀑布式等形式。宮格式界面布局中圖標和文字的大小有一定的規范，設計師將每一個格子作為一個模件進行新的組合。以“飛豬旅游App”為例，其主界面采用宮格式布局，每一個功能模塊以圓矩形承載圖標、文字大小相同。內容頁采用列表式布局，信息層級具有清晰性，可展示較多的標題和信息內容，其界面布局使用長方形承載圖像、文字、圖標為一個模塊，按照上下方式層級排列，使用不同的色彩區分每一個功能模塊。

三、個性化方式在界面設計中的運用現狀

界面設計中將每個板塊中的一個功能模塊看作模件，界面排列和架構都是將不同的圖標、文字、線框等空間進行組合排列，恰當地運用了構圖、母題和控件形狀的模件化體系。在界面設計的過程中，設計師根據目標用戶群體需求在界面設計的基礎上進行個性化設計，從個性化色彩、個性化圖標及個性化界面等三個方面打造出全新的界面設計。

（一）個性化色彩運用

在當今移動互聯網迅速發展的背景下，手機中的信息越來越密集，用戶容易出現視覺疲勞，色彩作為信息傳達過程中的重要載體之一影響用戶出現不同的視覺感受。[2]界面設計中個性化的顏色搭配能使內容繁雜的界面整理信息和歸納內容，界面中的顏色搭配影響到用戶的使用體驗和視覺感官，不同用戶群體對于色彩的感知不同，界面設計色彩需要根據用戶群體的差異性進行設計。根據使用者年齡、教育背景以及使用場景等因素的不同，設計師應在色彩方面依據產品定位以及目標用戶群體的特征來分析問題。例如，“網易云”移動端的界面設計整體以紅色為主，中度留白、簡潔明快，信息傳達迅速，符合產品的整體調性。在多變和較為復雜的使用場景下，產品的界面設計越需要簡潔以及整合性，用紅色主色調加白色輔助色的界面設計可以給用戶干凈舒適的視覺感受。在界面內容繁多的狀態下，輔助色使用白色的背景可以給用戶帶來整個產品更加清晰干凈的視覺感受，能適當緩解用戶在視覺上所產生的壓力，更好地突出產品界面中的信息內容，符合用戶特別需求的個性化設計特征。

（二）個性化圖標運用

界面設計中的圖標設計是利用圖形元素的象征意義來設計的。好的圖形設計能替代文字進行表達，幫助人們更好地理解與溝通。不同的產品界面設計根據其定位以及用戶群體的不同，其中的圖標設計也不盡相同。用戶能夠通過不同的圖標設計產生不同的視覺感受以及情緒。體現了界面設計中圖標設計個性化表達的作用?；ヂ摼W產品中圖標是關鍵的元素之一，它不僅可以體現出這款產品的調性，同時也能使用戶快速識別。例如網易云移動端，圖標設計采用扁平化設計風格，多由簡明抽象的幾何符號組合而成，圖形采用簡練的表達方式，具有高效的易讀性及簡潔性。同時，點、線、面結合保持了所有線框粗細以及線面占比的一致性，斷線小細節的設計體現了產品年輕有活力的定位，顏色以紅色為主，富有個性化的同時，保證了產品視覺上的統一。啟動圖標的設計整體以“音樂符號”和圓形為主，這種設計手法可以帶給用戶一種先入為主的感覺，從而加深用戶對產品的印象。再通過將音樂音符融入其中，詮釋產品的主題結合熱情時尚的紅色為底色，在呼應音樂主題的同時，表現年輕化、多元化及個性化。

（三）個性化界面設計

為了實現更加高效準確、方便快捷和沉浸式的用戶體驗，設計師對界面設計完成了從“擬物化”到“扁平化”的成功轉型。設計師尋求簡捷高效和沉浸式的用戶體驗，整體視覺界面采用了扁平化風格，給用戶帶來層次分明的舒適感。[3]界面設計中圖片排版、文字對齊方式、圖標位置顯得整個畫面節奏具有呼吸感。例如，“網易云”音樂產品界面整體視覺風格簡潔清晰，控件多使用卡片加列表的形式，使得整個畫面節奏具有呼吸感，同時給予卡片適當的投影效果，使布局空間更加層級分明，結構劃分板塊更加明確，列表則使信息條理清晰?？ㄆ浇Y構可以根據功能將界面分割成不同的模塊，很好地平衡頁面的文字以及圖片信息，從而做到信息整合，達到視覺統一，更好地進行模塊區分，個性化的顏色搭配幫助用戶在內容繁多的界面中歸納整理信息和內容，從而易于用戶理解并高效地進行操作。

四、結語

設計師在進行界面設計時必須注意優化信息層級，減少用戶點擊頁面的次數，注意用戶體驗和交互功能的合理性表達。在界面設計布局中使用模件化設計思維有利于更加合理地對頁面進行布局，設計師利用個性化的表達通過與不同視覺元素形成新的藝術風格和設計方式。隨著設計領域發展越來越成熟，界面個性化設計顯得日趨重要，將模件化理論與個性化方式運用于界面設計中以達到引導用戶感知和行為的目的，可以使用戶在體驗中達到高效獲取信息的效果。

參考文獻：

[1]王德巖.觸摸中國藝術的基點——評《萬物——中國藝術中的模件化和規?；a》[J].藝術設計研究，2012（03）：108-110.

[2]周宇.UI界面設計的個性化表達[D].天津美術學院，2020.

[3]蘇毅.格式塔心理學視知覺理論在UI扁平化設計中的應用[J].長沙大學學報，2019（01）：119-124.

（作者簡介：朱小意，女，碩士研究生在讀，云南師范大學，研究方向：設計歷史與理論）

（責任編輯 劉月嬌）