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

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

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

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

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

（一）模件化理論

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

（二）個性化方式

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

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

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

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

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

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

（一）個性化色彩運用

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

（二）個性化圖標(biāo)運用

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

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

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

四、結(jié)語

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

參考文獻：

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

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

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

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

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