摘要：界面設(shè)計(jì)是產(chǎn)品和用戶之間重要的溝通橋梁，服務(wù)于人際交互的設(shè)計(jì)領(lǐng)域。本文從德國(guó)藝術(shù)史學(xué)家雷德侯的模件化理論以及個(gè)性化方式入手，對(duì)界面設(shè)計(jì)案例進(jìn)行分析，針對(duì)模件化理論在界面框架布局中的運(yùn)用和個(gè)性化方式在界面視覺(jué)上的運(yùn)用現(xiàn)狀進(jìn)行研究，提出目前界面設(shè)計(jì)需要解決的問(wèn)題，最后總結(jié)出界面設(shè)計(jì)的方法，希望能為現(xiàn)階段界面設(shè)計(jì)帶來(lái)新的思路。

關(guān)鍵詞：模件化理論 個(gè)性化 界面設(shè)計(jì)

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

一、模件化理論與個(gè)性化方式概述

（一）模件化理論

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

（二）個(gè)性化方式

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

二、模件化理論在界面框架布局的運(yùn)用現(xiàn)狀

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

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

三、個(gè)性化方式在界面設(shè)計(jì)中的運(yùn)用現(xiàn)狀

界面設(shè)計(jì)中將每個(gè)板塊中的一個(gè)功能模塊看作模件，界面排列和架構(gòu)都是將不同的圖標(biāo)、文字、線框等空間進(jìn)行組合排列，恰當(dāng)?shù)剡\(yùn)用了構(gòu)圖、母題和控件形狀的模件化體系。在界面設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師根據(jù)目標(biāo)用戶群體需求在界面設(shè)計(jì)的基礎(chǔ)上進(jìn)行個(gè)性化設(shè)計(jì)，從個(gè)性化色彩、個(gè)性化圖標(biāo)及個(gè)性化界面等三個(gè)方面打造出全新的界面設(shè)計(jì)。

（一）個(gè)性化色彩運(yùn)用

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

（二）個(gè)性化圖標(biāo)運(yùn)用

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

（三）個(gè)性化界面設(shè)計(jì)

為了實(shí)現(xiàn)更加高效準(zhǔn)確、方便快捷和沉浸式的用戶體驗(yàn)，設(shè)計(jì)師對(duì)界面設(shè)計(jì)完成了從“擬物化”到“扁平化”的成功轉(zhuǎn)型。設(shè)計(jì)師尋求簡(jiǎn)捷高效和沉浸式的用戶體驗(yàn)，整體視覺(jué)界面采用了扁平化風(fēng)格，給用戶帶來(lái)層次分明的舒適感。[3]界面設(shè)計(jì)中圖片排版、文字對(duì)齊方式、圖標(biāo)位置顯得整個(gè)畫面節(jié)奏具有呼吸感。例如，“網(wǎng)易云”音樂(lè)產(chǎn)品界面整體視覺(jué)風(fēng)格簡(jiǎn)潔清晰，控件多使用卡片加列表的形式，使得整個(gè)畫面節(jié)奏具有呼吸感，同時(shí)給予卡片適當(dāng)?shù)耐队靶Ч?，使布局空間更加層級(jí)分明，結(jié)構(gòu)劃分板塊更加明確，列表則使信息條理清晰。卡片式結(jié)構(gòu)可以根據(jù)功能將界面分割成不同的模塊，很好地平衡頁(yè)面的文字以及圖片信息，從而做到信息整合，達(dá)到視覺(jué)統(tǒng)一，更好地進(jìn)行模塊區(qū)分，個(gè)性化的顏色搭配幫助用戶在內(nèi)容繁多的界面中歸納整理信息和內(nèi)容，從而易于用戶理解并高效地進(jìn)行操作。

四、結(jié)語(yǔ)

設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)必須注意優(yōu)化信息層級(jí)，減少用戶點(diǎn)擊頁(yè)面的次數(shù)，注意用戶體驗(yàn)和交互功能的合理性表達(dá)。在界面設(shè)計(jì)布局中使用模件化設(shè)計(jì)思維有利于更加合理地對(duì)頁(yè)面進(jìn)行布局，設(shè)計(jì)師利用個(gè)性化的表達(dá)通過(guò)與不同視覺(jué)元素形成新的藝術(shù)風(fēng)格和設(shè)計(jì)方式。隨著設(shè)計(jì)領(lǐng)域發(fā)展越來(lái)越成熟，界面?zhèn)€性化設(shè)計(jì)顯得日趨重要，將模件化理論與個(gè)性化方式運(yùn)用于界面設(shè)計(jì)中以達(dá)到引導(dǎo)用戶感知和行為的目的，可以使用戶在體驗(yàn)中達(dá)到高效獲取信息的效果。

參考文獻(xiàn)：

[1]王德巖.觸摸中國(guó)藝術(shù)的基點(diǎn)——評(píng)《萬(wàn)物——中國(guó)藝術(shù)中的模件化和規(guī)?；a(chǎn)》[J].藝術(shù)設(shè)計(jì)研究，2012（03）：108-110.

[2]周宇.UI界面設(shè)計(jì)的個(gè)性化表達(dá)[D].天津美術(shù)學(xué)院，2020.

[3]蘇毅.格式塔心理學(xué)視知覺(jué)理論在UI扁平化設(shè)計(jì)中的應(yīng)用[J].長(zhǎng)沙大學(xué)學(xué)報(bào)，2019（01）：119-124.

（作者簡(jiǎn)介：朱小意，女，碩士研究生在讀，云南師范大學(xué)，研究方向：設(shè)計(jì)歷史與理論）

（責(zé)任編輯 劉月嬌）