作為設(shè)計師，我們經(jīng)常需要做產(chǎn)品的視覺風(fēng)格定義。那么什么是視覺風(fēng)格，具體又要怎么定義？我隨便在群里問了下這個問題，好像大多都比較模糊，更別說設(shè)計行業(yè)外的人了。

借這個問題，我想來聊聊我的理解，希望對大家有所啟發(fā)。

對于不同的領(lǐng)域或產(chǎn)品來說，視覺風(fēng)格的定義、要素以及設(shè)計方法，可能也是完全不同的。

一、什么是視覺風(fēng)格？

在理解"視覺風(fēng)格"這個詞之前，我們先把它拆開來看，先嘗試理解下什么是"風(fēng)格"。

"風(fēng)格" ，是一個相對抽象的概念，指的是一種在作品或創(chuàng)作中表現(xiàn)出來的獨特方式或特征。

相較與"視覺風(fēng)格"，它通常是一個更廣泛的概念，可以應(yīng)用于多個領(lǐng)域，包括藝術(shù)、設(shè)計、文學(xué)、音樂等，具體體現(xiàn)在內(nèi)容、形式、技巧、表現(xiàn)等方式上。

"視覺風(fēng)格" 是風(fēng)格的一個具體領(lǐng)域，通常用在藝術(shù)、設(shè)計和多媒體上，比如我們常說的插畫風(fēng)、攝影風(fēng)、平面風(fēng)、網(wǎng)頁風(fēng)、OS 系統(tǒng)風(fēng)格等。

視覺風(fēng)格強調(diào)了視覺元素和視覺方面的獨特性，如顏色、構(gòu)圖、圖案、排版、字體、動畫等。通過這些視覺要素，創(chuàng)造出一種獨特的視覺外觀，帶給用戶情感上的感受。

一個成熟的視覺風(fēng)格，往往會給人帶來一種特定的感覺，并與特定的產(chǎn)品產(chǎn)生關(guān)聯(lián)，形成心理印記，從而因為風(fēng)格而記住它，所以視覺風(fēng)格在產(chǎn)品設(shè)計中重要性不言而喻。

我們把話題再聚焦一點，今天主要聊聊互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格。

二、如何拆解視覺風(fēng)格？

當我們體驗到一個產(chǎn)品或者看到一張圖后，從哪些角度去拆解出它的風(fēng)格特征呢？

一般可以從作品中的色彩、排版、質(zhì)感、字體、動畫、圖案、構(gòu)圖等等設(shè)計要素進行分析，看看這些視覺元素組合關(guān)系和比重。

講到這里，在我們視覺設(shè)計領(lǐng)域的最新趨勢下，通常用六個字 "形、色、字、構(gòu)、質(zhì)、動" 來制定視覺風(fēng)格帶給人的感受。

其實我在看作品集的時候，一般也是從這些角度去分析作品的專業(yè)度，然后再結(jié)合業(yè)務(wù)場景，看做的視覺方案能否有效解決業(yè)務(wù)問題。

另外，平時提到的審美練習(xí)，講究一個多看多分析，去思考設(shè)計背后的原理，組合方式。多去研究美的東西的特點，看細一些，也可以嘗試從以上這些角度去拆解一套視覺設(shè)計。

對視覺風(fēng)格有了理解，平時也知道從哪些角度去看一張圖了，那么接下來就需要多去了解一些比較常見的視覺設(shè)計風(fēng)格，了解具體的表現(xiàn)手法。

三、常見的視覺風(fēng)格有哪些？

當把視覺風(fēng)格聚焦到 APP 和網(wǎng)頁設(shè)計等互聯(lián)網(wǎng)產(chǎn)品時，風(fēng)格其實也有很多，說一些比較常見的。

1. 蘋果風(fēng)（Apple Design）

以毛玻璃材質(zhì)為特點，絲滑的動態(tài)效果，輕擬物的質(zhì)感。蘋果的設(shè)計強調(diào)平滑的曲線和圓潤的邊緣，常常使用明亮的顏色，注重圖像和照片的質(zhì)量。

iOS 17 風(fēng)格

mac os

iPad os

iwatch os

2. 扁平化設(shè)計（Flat Design）

扁平設(shè)計是一種簡化的設(shè)計風(fēng)格，通常會用明亮的顏色、清晰的圖標和簡化的界面元素。我印象中有一小段時間，這個風(fēng)格很流行，微軟是最早將這種設(shè)計風(fēng)格應(yīng)用于其界面的公司之一。

在平面設(shè)計中，所有元素都應(yīng)該有它存在的價值，哪怕裝飾元素也是如此。如果某個方面沒有任何功能用途，就會分散用戶的注意力。這就是扁平化設(shè)計簡約本質(zhì)的原因。

然而，僅僅因為它缺乏任何華麗的設(shè)計并不意味著這種風(fēng)格很無聊。明亮、對比鮮明的顏色能輕松吸引注意力并引導(dǎo)用戶的視線。

有些設(shè)計師可能會覺得這種風(fēng)格過于樸素，就給它增加了一些其他細節(jié)，比如長投影就是那個時期出來的。

來源：aiki007

當然上面這套長投影，年代比較久遠了一點，下面這套作品的扁平風(fēng)格上就更現(xiàn)代一些。

來源：Mike | Creative Mints

3. 材質(zhì)設(shè)計（Material Design）

材質(zhì)設(shè)計是由 Google 推出的一種設(shè)計風(fēng)格，強調(diào)實際材質(zhì)和動畫效果。它為應(yīng)用帶來層次感和現(xiàn)實感，同時提供了良好的用戶體驗。完整的設(shè)計組件，可以參考官方地址： https://m3.material.io

在這套風(fēng)格中，能看出來也是趨向于扁平化的，顏色在使用上飽和度也沒有很高，質(zhì)感也很克制，讓用戶更聚焦在內(nèi)容上。

4. 抽象藝術(shù)風(fēng)格（Abstract and Artistic Styles）

這種風(fēng)格常用在海報設(shè)計中，以吸引特定用戶或傳達創(chuàng)新的形象。這些風(fēng)格可能包括不尋常的圖形、顏色和排版。

這個風(fēng)格我印象最深的就是 Behance 上的一個老哥做的 365 天挑戰(zhàn)，每天一張腦洞海報，幾乎每一張都是精品。如果沒看過的也可以去圍觀下，我把地址也放上，ins 上還在更新。

1. https://www.behance.net/katro16
2. https://www.instagram.com/baugasm

5. 極簡主義（Minimalism）

極簡主義設(shè)計注重簡潔和內(nèi)容集中，通常使用簡化的元素和無冗余的界面。它適用于需要用戶專注于核心任務(wù)的應(yīng)用。

這種設(shè)計通常會用到大面積的留白，以及黑白灰的顏色搭配，高質(zhì)量的大圖，使得整個設(shè)計具備很強的高級感。

這個風(fēng)格我以前也有專門寫過文章《Behance 首頁推薦的作品集為什么這么高級？我們能從中學(xué)到什么？》。

來源：Shaban Iddrisu?

來源： https://www.awwwards.com/sites/brainbox-ai

來源：Huy Phan

來源：Hannes Ahremark

6. 新擬物主義（neumorphism）

這種設(shè)計風(fēng)格，通過使用逼真的陰影和光線效果來模擬物理世界中的物體，同時保持扁平化和簡約的設(shè)計。

這種風(fēng)格曾經(jīng)內(nèi)風(fēng)靡了一陣子，現(xiàn)在好像又見得比較少了。

我其實對這種風(fēng)格不是太感冒，原因是這種質(zhì)感似乎顯得有些多余，還會占用一部分內(nèi)容空間，信息利用率不高。它的設(shè)計樣式也做的比較搶內(nèi)容，美觀度上我個人也不是太喜歡。

關(guān)于這種風(fēng)格設(shè)計，之前也寫過文章《新擬物化會是 2020 年的 UI 設(shè)計趨勢嗎？》

來源：Devanta Ebison

來源：Ceptari Tyas

來源：Sèrgi Mi

來源：Filip Legierski

來源:https://www.interaction-design.org

之前 QQ 的小世界第一版出來的時候也用到了這個風(fēng)格趨勢，給人眼前一亮的感覺。

即使是新擬物風(fēng)格，其中也是可以做一些不同發(fā)揮的，這里也可以一起看下他們當時做的方案對比，體會下不同風(fēng)格的側(cè)重點

7. 科技和未來主義（Tech and Futuristic Styles）

科技和未來主義設(shè)計風(fēng)格使用高科技元素、光效和動態(tài)效果，以突出創(chuàng)新和前瞻性。這種風(fēng)格在科技、游戲和科幻類應(yīng)用中常見。

比如現(xiàn)在的 HMI，HUD，數(shù)據(jù)可視化設(shè)計，風(fēng)格都被設(shè)計的有很強的科技感，會用到很多偏科技感的光效，藍色，以深色居多。

來源：Logan Gan

來源：Romanov

來源：Stefan Grimm

來源：Stanislav Hristov

來源：Breaking bad

8. 插畫風(fēng)格（Illustration style）

這種風(fēng)格通常會用到大面積的插畫設(shè)計，有比較強的親和力。

既然用到了插畫，在顏色的使用上相對會更大膽一些，顏色飽和度比較高。

這種風(fēng)格在網(wǎng)頁設(shè)計，天氣設(shè)計，手機壁紙，冥想類應(yīng)用中很常見，我自己也曾經(jīng)設(shè)計過這種插畫風(fēng)格的壁紙和天氣。

我之前畫的幾張壁紙

來源：Mike | Creative Mints

來源：Mike | Creative Mints

來源：Bogdan Falin

來源：Moatasem Abbas Kharraz

來源：Zak Steele-Eklund

9. 2D+3D

這種風(fēng)格是一種 2D 結(jié)合 3D 的形式，現(xiàn)如今在做風(fēng)格化設(shè)計的時候特別搶眼。

核心設(shè)計方法就是把一些內(nèi)容用 2D 的形式去展現(xiàn)，把一些需要強調(diào)的圖片，例如商品，模型做成 3D 來表現(xiàn)。

在未來隨著 vision pro 的發(fā)布，空間計算的不斷成熟，相信這種設(shè)計風(fēng)格趨勢會越來越多。

來源：Cosmin Capitanu

來源：Cosmin Capitanu

來源：Mike | Creative Mints

來源：Mike | Creative Mints

來源：Lay

10. 自然和有機風(fēng)格（Natural and Organic Styles）

自然和有機的設(shè)計風(fēng)格使用大自然的元素、有機形狀和自然紋理，以傳達溫暖和人性化的感覺。

這種風(fēng)格適用于健康、環(huán)保和戶外應(yīng)用。

來源：Oyolloo

大家在一些包裝樣機中，經(jīng)常會看到一些帶樹葉投影的風(fēng)格，這種投影給人一種現(xiàn)實生活的感覺，自然溫暖。

來源：beehouse studio

11. 草圖和手繪風(fēng)格（Sketch and Hand-Drawn Styles）

草圖和手繪的設(shè)計風(fēng)格比較強調(diào)創(chuàng)意、親近感和個性化。這種風(fēng)格在博客、藝術(shù)和小眾應(yīng)用中流行。

其風(fēng)格特點容易看出來，帶有卡通式的描邊和硬投影，顏色使用上飽和度比較高

來源：ZhaoWei

來源：Joseph Ash Sakula

來源：Sajon

來源：creativemarket

在 dribbble 上有一位設(shè)計師叫：Sulton handaya，特別擅長這類風(fēng)格，在他的主頁有非常多這種風(fēng)格的作品，通過把一類風(fēng)格做到頂尖，給人留下深刻印象，建立了屬于自己的風(fēng)格標簽。

12. 品牌自定義風(fēng)格（ Brand Custom Styles）

現(xiàn)在很多應(yīng)用選擇采用自由品牌的設(shè)計風(fēng)格，以突出其獨特性和品牌標識。

這個風(fēng)格方向，其實也是現(xiàn)在主流的設(shè)計方式，依據(jù)公司產(chǎn)品調(diào)性和品牌特征，提取品牌超級符號，包括顏色、造型、動效、排版等等進行延展，保證其品牌風(fēng)格的獨特性，具備很強的識別度和記憶點。

這里也放 2 個比較經(jīng)典的例子。

一個是 kakao，我經(jīng)常講這個例子，這個案例就是從項目的目標開始，以滿足用戶的個性化閱讀需求。

作為一個提供閱讀的平臺，他們找到了一個以"紙"為錨點的超級符號，并以此延展到圖標、動效、造型、色彩、插圖等等視覺細節(jié)上。

另一個案例是航空公司的風(fēng)格設(shè)計案例，作品巧妙的找到飛機窗戶的造型作為符號，像我這樣經(jīng)常坐飛機的人，看到這樣的橢圓形很自然的就和飛機聯(lián)系上了。這種鏈接關(guān)系很自然，可以給用戶留下深刻印象。

結(jié)語

視覺風(fēng)格是一系列設(shè)計準則和規(guī)范，用于確保用戶界面的各個方面都與品牌或項目的整體風(fēng)格和形象保持一致。

這有助于用戶識別和記憶界面，提高用戶體驗，同時也增強了品牌的識別度和專業(yè)性。

設(shè)計風(fēng)格是一個輪回，所以設(shè)計趨勢我們需要去關(guān)注，但不可以盲目選用，還需要結(jié)合我們自身產(chǎn)品想要傳達的理念，滿足用戶的訴求。

寫到凌晨 1 點多了，再寫下去篇幅又太長，就此打住，下篇繼續(xù)寫常見的視覺風(fēng)格推導(dǎo)方法以及一些優(yōu)秀案例推薦。

全文完，既然看到這里了，如果覺得不錯，隨手點個贊和"在看"吧。

作者：彩云譯設(shè)計