作為設(shè)計(jì)師，我們經(jīng)常需要做產(chǎn)品的視覺風(fēng)格定義。那么什么是視覺風(fēng)格，具體又要怎么定義？我隨便在群里問了下這個問題，好像大多都比較模糊，更別說設(shè)計(jì)行業(yè)外的人了。
借這個問題，我想來聊聊我的理解，希望對大家有所啟發(fā)。
對于不同的領(lǐng)域或產(chǎn)品來說，視覺風(fēng)格的定義、要素以及設(shè)計(jì)方法，可能也是完全不同的。
在理解“視覺風(fēng)格”這個詞之前，我們先把它拆開來看，先嘗試?yán)斫庀率裁词?ldquo;風(fēng)格”。
"風(fēng)格" ，是一個相對抽象的概念，指的是一種在作品或創(chuàng)作中表現(xiàn)出來的獨(dú)特方式或特征。
相較與“視覺風(fēng)格“，它通常是一個更廣泛的概念，可以應(yīng)用于多個領(lǐng)域，包括藝術(shù)、設(shè)計(jì)、文學(xué)、音樂等，具體體現(xiàn)在內(nèi)容、形式、技巧、表現(xiàn)等方式上。
"視覺風(fēng)格" 是風(fēng)格的一個具體領(lǐng)域，通常用在藝術(shù)、設(shè)計(jì)和多媒體上，比如我們常說的插畫風(fēng)、攝影風(fēng)、平面風(fēng)、網(wǎng)頁風(fēng)、OS 系統(tǒng)風(fēng)格等。
視覺風(fēng)格強(qiáng)調(diào)了視覺元素和視覺方面的獨(dú)特性，如顏色、構(gòu)圖、圖案、排版、字體、動畫等。通過這些視覺要素，創(chuàng)造出一種獨(dú)特的視覺外觀，帶給用戶情感上的感受。
一個成熟的視覺風(fēng)格，往往會給人帶來一種特定的感覺，并與特定的產(chǎn)品產(chǎn)生關(guān)聯(lián)，形成心理印記，從而因?yàn)轱L(fēng)格而記住它，所以視覺風(fēng)格在產(chǎn)品設(shè)計(jì)中重要性不言而喻。
我們把話題再聚焦一點(diǎn)，今天主要聊聊互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格。
當(dāng)我們體驗(yàn)到一個產(chǎn)品或者看到一張圖后，從哪些角度去拆解出它的風(fēng)格特征呢？
一般可以從作品中的色彩、排版、質(zhì)感、字體、動畫、圖案、構(gòu)圖等等設(shè)計(jì)要素進(jìn)行分析，看看這些視覺元素組合關(guān)系和比重。
講到這里，在我們視覺設(shè)計(jì)領(lǐng)域的最新趨勢下，通常用六個字 ”形、色、字、構(gòu)、質(zhì)、動“ 來制定視覺風(fēng)格帶給人的感受。
其實(shí)我在看作品集的時候，一般也是從這些角度去分析作品的專業(yè)度，然后再結(jié)合業(yè)務(wù)場景，看做的視覺方案能否有效解決業(yè)務(wù)問題。
另外，平時提到的審美練習(xí)，講究一個多看多分析，去思考設(shè)計(jì)背后的原理，組合方式。多去研究美的東西的特點(diǎn)，看細(xì)一些，也可以嘗試從以上這些角度去拆解一套視覺設(shè)計(jì)。
當(dāng)把視覺風(fēng)格聚焦到 APP 和網(wǎng)頁設(shè)計(jì)等互聯(lián)網(wǎng)產(chǎn)品時，風(fēng)格其實(shí)也有很多，說一些比較常見的。
1. 蘋果風(fēng)（Apple Design）
以毛玻璃材質(zhì)為特點(diǎn)，絲滑的動態(tài)效果，輕擬物的質(zhì)感。蘋果的設(shè)計(jì)強(qiáng)調(diào)平滑的曲線和圓潤的邊緣，常常使用明亮的顏色，注重圖像和照片的質(zhì)量。
毛玻璃材質(zhì)是貫穿蘋果設(shè)計(jì)中的設(shè)計(jì)語言，關(guān)于這一點(diǎn)我以前也專門寫過文章：
扁平設(shè)計(jì)是一種簡化的設(shè)計(jì)風(fēng)格，通常會用明亮的顏色、清晰的圖標(biāo)和簡化的界面元素。我印象中有一小段時間，這個風(fēng)格很流行，微軟是最早將這種設(shè)計(jì)風(fēng)格應(yīng)用于其界面的公司之一。
在平面設(shè)計(jì)中，所有元素都應(yīng)該有它存在的價值，哪怕裝飾元素也是如此。如果某個方面沒有任何功能用途，就會分散用戶的注意力。這就是扁平化設(shè)計(jì)簡約本質(zhì)的原因。
然而，僅僅因?yàn)樗狈θ魏稳A麗的設(shè)計(jì)并不意味著這種風(fēng)格很無聊。明亮、對比鮮明的顏色能輕松吸引注意力并引導(dǎo)用戶的視線。
有些設(shè)計(jì)師可能會覺得這種風(fēng)格過于樸素，就給它增加了一些其他細(xì)節(jié)，比如長投影就是那個時期出來的。
當(dāng)然上面這套長投影，年代比較久遠(yuǎn)了一點(diǎn)，下面這套作品的扁平風(fēng)格上就更現(xiàn)代一些。
材質(zhì)設(shè)計(jì)是由 Google 推出的一種設(shè)計(jì)風(fēng)格，強(qiáng)調(diào)實(shí)際材質(zhì)和動畫效果。它為應(yīng)用帶來層次感和現(xiàn)實(shí)感，同時提供了良好的用戶體驗(yàn)。完整的設(shè)計(jì)組件，可以參考官方地址： https://m3.material.io
在這套風(fēng)格中，能看出來也是趨向于扁平化的，顏色在使用上飽和度也沒有很高，質(zhì)感也很克制，讓用戶更聚焦在內(nèi)容上。
這種風(fēng)格常用在海報(bào)設(shè)計(jì)中，以吸引特定用戶或傳達(dá)創(chuàng)新的形象。這些風(fēng)格可能包括不尋常的圖形、顏色和排版。
這個風(fēng)格我印象最深的就是 Behance 上的一個老哥做的 365 天挑戰(zhàn)，每天一張腦洞海報(bào)，幾乎每一張都是精品。如果沒看過的也可以去圍觀下，我把地址也放上，ins 上還在更新。
- https://www.behance.net/katro16
- https://www.instagram.com/baugasm
極簡主義設(shè)計(jì)注重簡潔和內(nèi)容集中，通常使用簡化的元素和無冗余的界面。它適用于需要用戶專注于核心任務(wù)的應(yīng)用。
這種設(shè)計(jì)通常會用到大面積的留白，以及黑白灰的顏色搭配，高質(zhì)量的大圖，使得整個設(shè)計(jì)具備很強(qiáng)的高級感。
這個風(fēng)格我以前也有專門寫過文章《Behance 首頁推薦的作品集為什么這么高級？我們能從中學(xué)到什么？》。
來源： https://www.awwwards.com/sites/brainbox-ai
這種設(shè)計(jì)風(fēng)格，通過使用逼真的陰影和光線效果來模擬物理世界中的物體，同時保持扁平化和簡約的設(shè)計(jì)。
這種風(fēng)格曾經(jīng)內(nèi)風(fēng)靡了一陣子，現(xiàn)在好像又見得比較少了。
我其實(shí)對這種風(fēng)格不是太感冒，原因是這種質(zhì)感似乎顯得有些多余，還會占用一部分內(nèi)容空間，信息利用率不高。它的設(shè)計(jì)樣式也做的比較搶內(nèi)容，美觀度上我個人也不是太喜歡。
關(guān)于這種風(fēng)格設(shè)計(jì)，之前也寫過文章《新擬物化會是 2020 年的 UI 設(shè)計(jì)趨勢嗎？》
來源:https://www.interaction-design.org
之前 QQ 的小世界第一版出來的時候也用到了這個風(fēng)格趨勢，給人眼前一亮的感覺。
即使是新擬物風(fēng)格，其中也是可以做一些不同發(fā)揮的，這里也可以一起看下他們當(dāng)時做的方案對比，體會下不同風(fēng)格的側(cè)重點(diǎn)
科技和未來主義設(shè)計(jì)風(fēng)格使用高科技元素、光效和動態(tài)效果，以突出創(chuàng)新和前瞻性。這種風(fēng)格在科技、游戲和科幻類應(yīng)用中常見。
比如現(xiàn)在的 HMI，HUD，數(shù)據(jù)可視化設(shè)計(jì)，風(fēng)格都被設(shè)計(jì)的有很強(qiáng)的科技感，會用到很多偏科技感的光效，藍(lán)色，以深色居多。
這種風(fēng)格通常會用到大面積的插畫設(shè)計(jì)，有比較強(qiáng)的親和力。
既然用到了插畫，在顏色的使用上相對會更大膽一些，顏色飽和度比較高。
這種風(fēng)格在網(wǎng)頁設(shè)計(jì)，天氣設(shè)計(jì)，手機(jī)壁紙，冥想類應(yīng)用中很常見，我自己也曾經(jīng)設(shè)計(jì)過這種插畫風(fēng)格的壁紙和天氣。
我之前畫的幾張壁紙
來源：Moatasem Abbas Kharraz
這種風(fēng)格是一種 2D 結(jié)合 3D 的形式，現(xiàn)如今在做風(fēng)格化設(shè)計(jì)的時候特別搶眼。
核心設(shè)計(jì)方法就是把一些內(nèi)容用 2D 的形式去展現(xiàn)，把一些需要強(qiáng)調(diào)的圖片，例如商品，模型做成 3D 來表現(xiàn)。
在未來隨著 vision pro 的發(fā)布，空間計(jì)算的不斷成熟，相信這種設(shè)計(jì)風(fēng)格趨勢會越來越多。
自然和有機(jī)的設(shè)計(jì)風(fēng)格使用大自然的元素、有機(jī)形狀和自然紋理，以傳達(dá)溫暖和人性化的感覺。
這種風(fēng)格適用于健康、環(huán)保和戶外應(yīng)用。
大家在一些包裝樣機(jī)中，經(jīng)常會看到一些帶樹葉投影的風(fēng)格，這種投影給人一種現(xiàn)實(shí)生活的感覺，自然溫暖。
草圖和手繪的設(shè)計(jì)風(fēng)格比較強(qiáng)調(diào)創(chuàng)意、親近感和個性化。這種風(fēng)格在博客、藝術(shù)和小眾應(yīng)用中流行。
其風(fēng)格特點(diǎn)容易看出來，帶有卡通式的描邊和硬投影，顏色使用上飽和度比較高
在 dribbble 上有一位設(shè)計(jì)師叫：Sulton handaya，特別擅長這類風(fēng)格，在他的主頁有非常多這種風(fēng)格的作品，通過把一類風(fēng)格做到頂尖，給人留下深刻印象，建立了屬于自己的風(fēng)格標(biāo)簽。
現(xiàn)在很多應(yīng)用選擇采用自由品牌的設(shè)計(jì)風(fēng)格，以突出其獨(dú)特性和品牌標(biāo)識。
這個風(fēng)格方向，其實(shí)也是現(xiàn)在主流的設(shè)計(jì)方式，依據(jù)公司產(chǎn)品調(diào)性和品牌特征，提取品牌超級符號，包括顏色、造型、動效、排版等等進(jìn)行延展，保證其品牌風(fēng)格的獨(dú)特性，具備很強(qiáng)的識別度和記憶點(diǎn)。
這里也放 2 個比較經(jīng)典的例子。
一個是 kakao，我經(jīng)常講這個例子，這個案例就是從項(xiàng)目的目標(biāo)開始，以滿足用戶的個性化閱讀需求。
作為一個提供閱讀的平臺，他們找到了一個以“紙”為錨點(diǎn)的超級符號，并以此延展到圖標(biāo)、動效、造型、色彩、插圖等等視覺細(xì)節(jié)上。
另一個案例是航空公司的風(fēng)格設(shè)計(jì)案例，作品巧妙的找到飛機(jī)窗戶的造型作為符號，像我這樣經(jīng)常坐飛機(jī)的人，看到這樣的橢圓形很自然的就和飛機(jī)聯(lián)系上了。這種鏈接關(guān)系很自然，可以給用戶留下深刻印象。
視覺風(fēng)格是一系列設(shè)計(jì)準(zhǔn)則和規(guī)范，用于確保用戶界面的各個方面都與品牌或項(xiàng)目的整體風(fēng)格和形象保持一致。
這有助于用戶識別和記憶界面，提高用戶體驗(yàn)，同時也增強(qiáng)了品牌的識別度和專業(yè)性。
設(shè)計(jì)風(fēng)格是一個輪回，所以設(shè)計(jì)趨勢我們需要去關(guān)注，但不可以盲目選用，還需要結(jié)合我們自身產(chǎn)品想要傳達(dá)的理念，滿足用戶的訴求。
