淺議UI設(shè)計(jì)中的風(fēng)格與表現(xiàn)

李時(shí)穎

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

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

中圖分類號(hào)：TP3? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）35-0204-03

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

1 概述

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

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

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

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

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

2.1 像素風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3 扁平化風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.5 極簡(jiǎn)風(fēng)格

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

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

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

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

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

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

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

2.6 3D風(fēng)格

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

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

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

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

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

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

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

3 結(jié)語

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

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

參考文獻(xiàn)：

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

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

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