淺議UI設計中的風格與表現

李時穎

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

關鍵詞：UI設計;視覺表現;風格

中圖分類號：TP3? ? ? ? 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

1 概述

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

隨著人類與互聯網以及電子產品的深度交互，UI界面除了具備最基本的表意、標識、引導等功能，不同UI設計呈現出的視覺風貌也開始變得越來越豐富多樣。UI界面作為互聯網產品的視覺呈現，極大地影響互聯網產品的形象特質。

在越加重視用戶體驗和產品差異化、多元化、個性化的“互聯網+”時代，探討UI設計的風格與視覺表現，是具備現實意義的。

本文就目前UI設計領域比較主流并且風格極為明確的像素風格、質感表現風格、扁平化風格、切面結構風格、極簡風格和3D立體6種風格進行梳理和探討，幫助讀者建立起較為全面的視野，并能夠迅速識別和理解每種風格最為核心的表現手法。

2 UI設計的風格與表現

2.1 像素風格

2.1.1 像素風格的主要特征

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

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

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

2.1.2 像素風格的表現要點

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

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

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

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

2.2 質感表現風格

2.2.1 質感表現風格的主要特征

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

質感表現一般也經常使用Photoshop作為主要設計工具，通過豐富的圖層混合模式與疊加模式、濾鏡等，可以模擬出豐富的質感效果。

在一些需要強調和展示材料美感、高級感、希望模擬較為逼真的觸覺體驗的設計情境中，比如科技類、制造行業的UI設計中，例如手機、電子產品、汽車等，恰當的質感表現風格的運用可以帶來較為強烈的具有現代感、科技感和產品精致度的視覺體驗。

2.2.2 質感表現風格的表現要點

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

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

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

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

2.3 扁平化風格

圖3所示是較為典型和常見的扁平化設計風格。

2.3.1 扁平化風格的主要特征

扁平化設計幾乎是目前互聯網領域以及平面設計領域中運用最廣泛的一種設計風格。扁平化從字面意義就能夠傳達出它的核心特征：弱化事物的空間和結構，將事物盡可能地平面化、圖案化。

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

2.3.2 扁平化風格的表現要點

扁平化設計在進行表現時，需要很好地將設計對象的視覺特征進行平面化的概括歸納，弱化結構變化，盡可能將對象的形體特征抽取出來表現為一種較為規整的，幾何化的圖形。

在光影處理方面，扁平化設計一般只表達2～3個明暗層次，往往用明暗、高光區分出基本的結構特征即可。

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

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

2.4 切面結構感風格

切面結構感風格是近幾年出現的一種視覺風格明確而獨特的圖像風格，如圖4所示。這種風格將設計對象的形體結構轉折概括表現為類似鉆石切面的樣式。

2.4.1 切面結構感風格的主要特征

通過一系列不規則多邊形作為結構的切面，利用切面相互組合表現對象的基本結構和體積。

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

2.4.2 切面結構感風格的表現要點

切面結構設計對設計對象的形態和結構要進行切面式的幾何分割。分割的方式非常重要，分割線的位置和塊面區域要符合結構的轉折變化關系，從而很好地表現事物的形體結構特征。

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

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

2.5 極簡風格

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

2.5.1 極簡風格的主要特征

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

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

2.5.2 極簡風格的表現要點

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

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

2.6 3D風格

3D風格也是近幾年非常流行的UI設計風格。如圖6所示。

2.6.1 3D風格的主要特征

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

2.6.2 3D風格的表現要點

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

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

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

3 結語

綜上所述，UI設計的風格表現多種多樣，不同的風格給產品帶來迥異的視覺印象。在具體的UI設計工作中，應當根據產品的定位、目標用戶的類型出發，從用戶體驗的角度出發，選擇合適的風格與表現手法。更好地從視覺體驗上塑造產品形象，為客戶服務。

此外，在全球文化多元碰撞融合的今天，本土設計師也應當從中華傳統文化中汲取更多營養和靈感，不斷探索與創造新的視覺表現。

參考文獻：

[1] 明鏡.UI設計中的視覺表現[J].計算機產品與流通，2020（8）：235.

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

【通聯編輯：代影】