李時穎

摘要：該文主要探討UI設(shè)計中的風(fēng)格營造與表現(xiàn)方法，通過列舉不同風(fēng)格的UI設(shè)計的樣式，梳理UI設(shè)計的可能設(shè)計方向，并通過探討不同風(fēng)格的主要表現(xiàn)方法和要點嘗試總結(jié)出基本的表現(xiàn)技巧。

關(guān)鍵詞：UI設(shè)計;視覺表現(xiàn);風(fēng)格

中圖分類號：TP3? ? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2020）35-0204-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1 概述

在全球互聯(lián)網(wǎng)產(chǎn)品、數(shù)字媒體被廣泛使用的信息時代，UI界面已成為互聯(lián)網(wǎng)傳播中最具影響力的內(nèi)容之一。UI設(shè)計伴隨著各種電子產(chǎn)品以及互聯(lián)網(wǎng)服務(wù)與我們發(fā)生著極為密切的連接。

隨著人類與互聯(lián)網(wǎng)以及電子產(chǎn)品的深度交互，UI界面除了具備最基本的表意、標(biāo)識、引導(dǎo)等功能，不同UI設(shè)計呈現(xiàn)出的視覺風(fēng)貌也開始變得越來越豐富多樣。UI界面作為互聯(lián)網(wǎng)產(chǎn)品的視覺呈現(xiàn)，極大地影響互聯(lián)網(wǎng)產(chǎn)品的形象特質(zhì)。

在越加重視用戶體驗和產(chǎn)品差異化、多元化、個性化的“互聯(lián)網(wǎng)+”時代，探討UI設(shè)計的風(fēng)格與視覺表現(xiàn)，是具備現(xiàn)實意義的。

本文就目前UI設(shè)計領(lǐng)域比較主流并且風(fēng)格極為明確的像素風(fēng)格、質(zhì)感表現(xiàn)風(fēng)格、扁平化風(fēng)格、切面結(jié)構(gòu)風(fēng)格、極簡風(fēng)格和3D立體6種風(fēng)格進行梳理和探討，幫助讀者建立起較為全面的視野，并能夠迅速識別和理解每種風(fēng)格最為核心的表現(xiàn)手法。

2 UI設(shè)計的風(fēng)格與表現(xiàn)

2.1 像素風(fēng)格

2.1.1 像素風(fēng)格的主要特征

像素風(fēng)格最明顯的特征是模擬低像素圖像的顆粒感效果，圖像由肉眼可見的像素小方格組成，并且在圖像邊緣會出現(xiàn)鋸齒狀的輪廓線。如圖1所示。

像素風(fēng)格在早期受制于網(wǎng)絡(luò)技術(shù)，圖像分辨率在傳播和顯示時受到限制，可以說早期互聯(lián)網(wǎng)中傳播的圖像基本是低像素的。但隨著軟、硬件技術(shù)的不斷發(fā)展，高清圖像的傳播和顯示早已成為主流，低像素圖像反而由于獨特的視覺效果成為一種特殊的有復(fù)古和懷舊感的視覺風(fēng)格得到保留，并在數(shù)字插畫和游戲美術(shù)領(lǐng)域得以廣泛運用。

像素風(fēng)格由于大顆粒的粗糙感帶來一種類似馬賽克拼貼的效果，從而具有鮮明而獨特的風(fēng)格，像素風(fēng)有一種偏向可愛、和裝飾感強的視覺印象。并且由于早期的電子游戲往往都是低像素畫質(zhì)，因而像素風(fēng)格帶有明顯的復(fù)古情調(diào)。

2.1.2 像素風(fēng)格的表現(xiàn)要點

在設(shè)計像素風(fēng)格的UI作品時，一般會使用位圖工具比如Photoshop作為主要工具，放大畫布到出現(xiàn)明顯的像素格，以格子為基本的單位進行繪制。

像素風(fēng)格由于大顆粒感所以難以表現(xiàn)精細的事物，在設(shè)計時要通過歸納和取舍保留對象最核心的要素和基本特征。保證設(shè)計具有良好的可辨識度。

像素風(fēng)格由于在形狀上具有明顯粗糙感，要想提升設(shè)計的視覺精致度，就要在顏色配置上精致一些。通過調(diào)整像素格配色的微妙變化來提升視覺層次。

像素風(fēng)格在使用時要平衡好畫面的整體和細節(jié)的關(guān)系。整體感強則辨識度高，但缺乏細節(jié)則容易讓設(shè)計變得單調(diào)粗糙;相反細節(jié)豐富則精致度高，但破壞了整體感就會讓設(shè)計對象變花不容易被辨識。

2.2 質(zhì)感表現(xiàn)風(fēng)格

2.2.1 質(zhì)感表現(xiàn)風(fēng)格的主要特征

質(zhì)感表現(xiàn)有時也被稱為擬物風(fēng)格;這種風(fēng)格是在設(shè)計中盡可能較為真實地模擬和還原事物的材料和質(zhì)感，比如木質(zhì)感、金屬感、玻璃感、云霧感、液態(tài)感等，從而讓圖像具備接近真實物體的質(zhì)地。如圖2所示。

質(zhì)感表現(xiàn)一般也經(jīng)常使用Photoshop作為主要設(shè)計工具，通過豐富的圖層混合模式與疊加模式、濾鏡等，可以模擬出豐富的質(zhì)感效果。

在一些需要強調(diào)和展示材料美感、高級感、希望模擬較為逼真的觸覺體驗的設(shè)計情境中，比如科技類、制造行業(yè)的UI設(shè)計中，例如手機、電子產(chǎn)品、汽車等，恰當(dāng)?shù)馁|(zhì)感表現(xiàn)風(fēng)格的運用可以帶來較為強烈的具有現(xiàn)代感、科技感和產(chǎn)品精致度的視覺體驗。

2.2.2 質(zhì)感表現(xiàn)風(fēng)格的表現(xiàn)要點

質(zhì)感表現(xiàn)風(fēng)格常常借助強調(diào)和表現(xiàn)設(shè)計對象材質(zhì)的光影細節(jié)的特征來呈現(xiàn)：比如金屬風(fēng)格的營造，金屬作為一種堅硬并且高度反光的材質(zhì)，在光影規(guī)律上有非常明顯的特征，比如相對而言形狀往往較為規(guī)則并且強烈的高光、較為清晰的明暗層次塑造出來的光澤感。

木質(zhì)感的表現(xiàn)與金屬就非常不同，木質(zhì)感往往不具備金屬的高光澤度，而往往需要通過模擬表面紋理的規(guī)律和變化來呈現(xiàn)質(zhì)感。

玻璃質(zhì)感與金屬感同屬高硬度和高光澤度材質(zhì)，但玻璃感的光影規(guī)律與金屬不同，玻璃質(zhì)感通常要表現(xiàn)明顯的投射效果以呈現(xiàn)出通透感。

因而在進行質(zhì)感表現(xiàn)時，需要認真觀察材質(zhì)的主要特征，從光澤度、光影規(guī)律、表面顆粒度、花紋圖案肌理等方面進行切入、模擬和呈現(xiàn)質(zhì)感效果。

2.3 扁平化風(fēng)格

圖3所示是較為典型和常見的扁平化設(shè)計風(fēng)格。

2.3.1 扁平化風(fēng)格的主要特征

扁平化設(shè)計幾乎是目前互聯(lián)網(wǎng)領(lǐng)域以及平面設(shè)計領(lǐng)域中運用最廣泛的一種設(shè)計風(fēng)格。扁平化從字面意義就能夠傳達出它的核心特征：弱化事物的空間和結(jié)構(gòu)，將事物盡可能地平面化、圖案化。

扁平化設(shè)計由于圖案感很強，能夠帶來一種非常鮮明、極具辨識度的視覺效果，非常有利于在互聯(lián)網(wǎng)中進行傳播和顯示。但是由于大量及廣泛的運用和傳播，也使得扁平化設(shè)計成為一種較為普遍化的設(shè)計風(fēng)格，容易引起審美疲勞。

2.3.2 扁平化風(fēng)格的表現(xiàn)要點

扁平化設(shè)計在進行表現(xiàn)時，需要很好地將設(shè)計對象的視覺特征進行平面化的概括歸納，弱化結(jié)構(gòu)變化，盡可能將對象的形體特征抽取出來表現(xiàn)為一種較為規(guī)整的，幾何化的圖形。

在光影處理方面，扁平化設(shè)計一般只表達2～3個明暗層次，往往用明暗、高光區(qū)分出基本的結(jié)構(gòu)特征即可。

扁平化設(shè)計較為概括和明確，常常以較為明亮，純度適中的色彩營造出明快的視覺效果，增強視覺表現(xiàn)力。

在扁平化設(shè)計應(yīng)用普遍的今天，很多設(shè)計師也嘗試在細節(jié)方面打破原來的表現(xiàn)規(guī)律，賦予扁平化一些新鮮的樣式，比如增強扁平化圖案的投影讓它更為明顯地浮出在背景之上增強空間的層次效果等。

2.4 切面結(jié)構(gòu)感風(fēng)格

切面結(jié)構(gòu)感風(fēng)格是近幾年出現(xiàn)的一種視覺風(fēng)格明確而獨特的圖像風(fēng)格，如圖4所示。這種風(fēng)格將設(shè)計對象的形體結(jié)構(gòu)轉(zhuǎn)折概括表現(xiàn)為類似鉆石切面的樣式。

2.4.1 切面結(jié)構(gòu)感風(fēng)格的主要特征

通過一系列不規(guī)則多邊形作為結(jié)構(gòu)的切面，利用切面相互組合表現(xiàn)對象的基本結(jié)構(gòu)和體積。

切面結(jié)構(gòu)的視覺形式帶來一種體塊感很強的視覺印象。但因為具有明顯的概括性和幾何感，這種風(fēng)格在加強了結(jié)構(gòu)感的同時兼具現(xiàn)代感和明快利落的優(yōu)點。體塊組合立體感很足，又有非常強的力量感。

2.4.2 切面結(jié)構(gòu)感風(fēng)格的表現(xiàn)要點

切面結(jié)構(gòu)設(shè)計對設(shè)計對象的形態(tài)和結(jié)構(gòu)要進行切面式的幾何分割。分割的方式非常重要，分割線的位置和塊面區(qū)域要符合結(jié)構(gòu)的轉(zhuǎn)折變化關(guān)系，從而很好地表現(xiàn)事物的形體結(jié)構(gòu)特征。

切面的大小和數(shù)量也要合適，切面太少、太大會缺少形體的轉(zhuǎn)折變化，切面太多太小則可能顯得過于瑣碎。

切面風(fēng)格由于是一種立體感很強的視覺形式，因而色彩的明暗關(guān)系同時也很重要，色彩的素描關(guān)系要符合結(jié)構(gòu)的光影規(guī)律以很好地突出設(shè)計對象的塊面感和立體感。同時在色彩選擇上需要避免過于花哨模糊了素描關(guān)系從而趨向于平面裝飾化。

2.5 極簡風(fēng)格

極簡風(fēng)格在近幾年的設(shè)計界廣受歡迎，從室內(nèi)設(shè)計、服裝設(shè)計到平面設(shè)計領(lǐng)域都有它的蹤影。極簡風(fēng)格遵循“少即是多”的原則，擯棄一切不必要的元素和裝飾，力求用最簡化的形式滿足核心設(shè)計需求。如圖5所示。

2.5.1 極簡風(fēng)格的主要特征

極簡風(fēng)格由于擯棄了幾乎所有的裝飾，直接將最重要的最核心的東西簡單直接地呈現(xiàn)給受眾，因此顯得主次分明，主題得到最大限度的強調(diào)。

極簡風(fēng)格能夠給人以直接、坦率、冷靜的視覺印象，因為主體絕對明確而具有直達人心的力量感。使用得當(dāng)具備一種現(xiàn)代主義的高級感。

2.5.2 極簡風(fēng)格的表現(xiàn)要點

極簡主義在設(shè)計時往往就確定主和次兩個視覺層級，主要的視覺層級以絕對優(yōu)勢凸顯在背景之上，可以是明確的明暗對比、色相對比、飽和度對比或大小、疏密對比。通過反差極大的設(shè)計要素之間的視覺張力凸顯主體物。

極簡主義在設(shè)計時要通過對視覺元素的合理選擇與配置突出設(shè)計感和力量感，使主體無論是在色彩還是在空間上都要非常鮮明、具有很好的量感，如果缺乏有張力的視覺元素，設(shè)計則有可能因為過于簡單而顯得單調(diào)無力。

2.6 3D風(fēng)格

3D風(fēng)格也是近幾年非常流行的UI設(shè)計風(fēng)格。如圖6所示。

2.6.1 3D風(fēng)格的主要特征

3D風(fēng)格常常通過多個元素在空間上的分布與組織，通過疊壓、透視等空間表現(xiàn)技巧帶來一種空間感很強，層次豐富的視覺效果。適合表現(xiàn)較為復(fù)雜的場景、展示某種流程或者傳達事物之間的關(guān)系。

2.6.2 3D風(fēng)格的表現(xiàn)要點

3D風(fēng)格有自己適用的設(shè)計場合，擅長表現(xiàn)復(fù)雜的事物，在設(shè)計時，先梳理出設(shè)計對象的內(nèi)在秩序，再通過大小、遠近、疏密、疊壓等空間關(guān)系將設(shè)計對象的內(nèi)在秩序表現(xiàn)為視覺形象。

3D風(fēng)格往往需要在一個不大的平面尺寸中展現(xiàn)豐富的空間層次，因而設(shè)計元素往往變得瑣碎，要在設(shè)計時盡可能通過空間分布和組織突出設(shè)計元素的內(nèi)在關(guān)系和秩序從而避免造成凌亂的感覺。

3D風(fēng)格的背景往往比較簡單，以突出主要元素的空間位置和層次關(guān)系，色彩上也盡可能簡單有秩序，有良好的層級感和引導(dǎo)性，避免增加視覺負擔(dān)。

3 結(jié)語

綜上所述，UI設(shè)計的風(fēng)格表現(xiàn)多種多樣，不同的風(fēng)格給產(chǎn)品帶來迥異的視覺印象。在具體的UI設(shè)計工作中，應(yīng)當(dāng)根據(jù)產(chǎn)品的定位、目標(biāo)用戶的類型出發(fā)，從用戶體驗的角度出發(fā)，選擇合適的風(fēng)格與表現(xiàn)手法。更好地從視覺體驗上塑造產(chǎn)品形象，為客戶服務(wù)。

此外，在全球文化多元碰撞融合的今天，本土設(shè)計師也應(yīng)當(dāng)從中華傳統(tǒng)文化中汲取更多營養(yǎng)和靈感，不斷探索與創(chuàng)造新的視覺表現(xiàn)。

參考文獻：

[1] 明鏡.UI設(shè)計中的視覺表現(xiàn)[J].計算機產(chǎn)品與流通，2020（8）：235.

[2] 鄧朝暉.UI設(shè)計中的配色及應(yīng)用[J].電腦編程技巧與維護，2020（1）：140-141，152.

【通聯(lián)編輯：代影】