設(shè)計是藝術(shù)的延伸，藝術(shù)發(fā)展有自己的時間線，最近很多大熱的設(shè)計風(fēng)格在年齡上其實算是老奶奶了，本文根據(jù)時間脈絡(luò)梳理了一下這個設(shè)計風(fēng)格。

在做每一個項目或者產(chǎn)品時，都需要根據(jù)行業(yè)、用戶、場景等確定網(wǎng)頁或者系統(tǒng)的頁面設(shè)計，需要了解的有網(wǎng)頁設(shè)計風(fēng)格、主題色與配色、頁面元素等。

設(shè)計風(fēng)格也有潮流趨勢，你了解了每種設(shè)計風(fēng)格的含義與內(nèi)容后，才能夠結(jié)合業(yè)務(wù)來確定你的產(chǎn)品最終采取的方案。

設(shè)計是藝術(shù)的延伸，藝術(shù)發(fā)展有自己的時間線，最近很多大熱的設(shè)計風(fēng)格在年齡上其實算是老奶奶了，根據(jù)時間脈絡(luò)梳理一下這個設(shè)計風(fēng)格，形成全面的設(shè)計認(rèn)知，和公司的設(shè)計同事交流起來能夠得心應(yīng)手、語言相通，掌握一些設(shè)計的專業(yè)術(shù)語與良好審美，也算是產(chǎn)品的必修課。

一 、波普藝術(shù)

誕生時間：20世紀(jì)50年代中期

誕生地點：英國

藝術(shù)特點：明快突出的色彩、強烈的對比、很強的視覺沖擊、表現(xiàn)方式豐富。

【圖片來源】網(wǎng)絡(luò)

二、極簡藝術(shù)

誕生時間：1960年

藝術(shù)特點：追求極致簡約的呈現(xiàn)效果，并且不接受任何違反這一形態(tài)的任何事物，消除作品對觀者的壓迫力，追求形式上的簡單極致、思想上的優(yōu)雅。

【圖片來源】網(wǎng)絡(luò)：設(shè)計之家-網(wǎng)頁設(shè)計

三、孟菲斯藝術(shù)

誕生時間：1981年

誕生地點：意大利米蘭

藝術(shù)特點：構(gòu)圖上打破橫平豎直的線條，采用波形曲線，曲面和直線，平面的組合；在色彩上常常故意打破配色規(guī)律，喜歡用一些明快、風(fēng)趣、彩度高的明亮色調(diào)，特別是粉紅、粉綠等鮮艷的色彩；由點，線，面等細(xì)小的幾何形體做趣味的裝飾設(shè)計。反對當(dāng)時非常流行的極簡風(fēng)格和單調(diào)冷峻的現(xiàn)代主義。

【圖片來源】網(wǎng)絡(luò)

四、超寫實藝術(shù)

誕生時間：20世界末

誕生地點：美國

藝術(shù)特點：真實、場景化、空間感。

【圖片來源】網(wǎng)絡(luò)

五、蒸汽波藝術(shù)

誕生時間：2010年

誕生地點：最早興起于日本

藝術(shù)特點：常見元素：古典雕塑、（Lo-Fi）低保真效果、Windows95窗口樣式、綠色植物、文字（常見日語文字）。隨意、粗糙、制作蒸汽波作品無需畫技，把喜歡的元素拼貼在一起即可。

【圖片來源】素材來源于網(wǎng)絡(luò)，自己PS出來

六、MBE插畫風(fēng)格

誕生時間：2015年

誕生地點：法國設(shè)計師創(chuàng)建

藝術(shù)特點：圓潤、呆萌、可愛有趣、簡潔，演變自線框圖Q版卡通畫，多種插畫風(fēng)格中的一種。

【圖片來源】網(wǎng)絡(luò)

七、Low Poly風(fēng)格（低多邊形風(fēng)格）

誕生時間：1996年

藝術(shù)特點：立體、科技感、三角形，低細(xì)節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果，把多色元素，用三角形分割，每個小三角形的顏色，取自原多色元素的相應(yīng)位置。起源于三維游戲中的計算機建模。

【圖片來源】網(wǎng)絡(luò)

八、擬物化設(shè)計（skeuomorphism）

代表作品：iOS7.0以下，Android、以及iOS7.0以下時代的大部分app、錘子。

藝術(shù)特點：

• 界面：模擬真實物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等；
• 交互：人機交互也擬物化，模擬現(xiàn)實中的交互方式。傳達了豐富的人性化的感情，擬物化本身就是個約束，會限制功能本身的設(shè)計。

【圖片來源】網(wǎng)絡(luò)

九、扁平化設(shè)計

誕生時間：2008年

代表作品：iOS7.0及以上，微軟的Metro UI，Phone8，Windows8。

誕生地點：谷歌提出

藝術(shù)特點：核心意義是：去除冗余、厚重和繁雜的裝飾效果。具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設(shè)計元素上，則強調(diào)了抽象、極簡和符號化。簡單純色的簡單組合（iOS系）、單色極簡的抽象矩形色塊（微軟系）、大字體、光滑、現(xiàn)代感十足。

【圖片來源】網(wǎng)絡(luò)

十、長陰影設(shè)計（Long Shadow Design）

誕生時間：2013年

藝術(shù)特點：長陰影其實就是擴展了對象的投影，感覺是一種光線照射下的影子，通常采用角度為 45 度的投影，給對象添加了一份立體感。長陰影快速發(fā)展為流行的設(shè)計趨勢，并經(jīng)常被應(yīng)用到扁平設(shè)計方案的對象。

這些陰影特別之處在于它們也是扁平的，網(wǎng)頁設(shè)計師使用沒有陰影、漸變的顏色來生成陰影。目前，長陰影設(shè)計主要用于較小的對象和元素，如：圖標(biāo)。

【圖片來源】網(wǎng)絡(luò)

十一、3D風(fēng)格

藝術(shù)特點：少量3D效果增加網(wǎng)頁靈動性，在扁平化設(shè)計上，添加一些非扁平元素，給網(wǎng)站帶來了原本缺乏的維度感。

【圖片來源】網(wǎng)絡(luò)

十二、無邊框風(fēng)格

誕生時間：誕生時間不確定，2017年流行。

藝術(shù)特點：無邊框風(fēng)格是指那些避免使用各類邊框的網(wǎng)頁設(shè)計，這里的邊框是指任何類型的裝飾性容器，通過去掉這些裝飾性容器，加強基本內(nèi)容的設(shè)計感，比如：圖片質(zhì)量和排版布局，從而提升整體因無裝飾性容器的視覺表現(xiàn)。

【圖片來源】網(wǎng)絡(luò)

十三、黑板/現(xiàn)實桌面風(fēng)格

藝術(shù)特點：黑板或者現(xiàn)實桌面作為背景元素，不多見，但是設(shè)計的好的話，很出彩。

【圖片來源】網(wǎng)絡(luò)

十四、縱向分割

藝術(shù)特點：將屏幕一分為二甚至是多欄，在網(wǎng)頁設(shè)計中使用新鮮的分屏式設(shè)計可以方便呈現(xiàn)不同的信息，創(chuàng)造對比，同時劃分有效區(qū)域，方便用戶進行快速選擇和視覺聚焦。

【圖片來源】網(wǎng)絡(luò)：設(shè)計之家-網(wǎng)頁設(shè)計

十五、超級頭版

藝術(shù)特點：取代輪播幻燈片，在首頁上使用尺寸超大、迷人的精美Banner，而這個超級頭版匯聚了對產(chǎn)品的精華總結(jié)，從而將網(wǎng)站最重要的內(nèi)容展示給用戶。

【圖片來源】網(wǎng)絡(luò)

十六、像素藝術(shù)

藝術(shù)特點：強調(diào)的是一種風(fēng)格，具有清晰的輪廓、明快的色彩，不受約束的風(fēng)格。

【圖片來源】網(wǎng)絡(luò)

十七、極繁風(fēng)格

誕生時間：17~18世紀(jì)

代表作品：巴洛克、洛可可

藝術(shù)特點：重復(fù)的元素，填充整個頁面，裁剪和拼貼設(shè)計，大膽地運用色彩和圖案來完成百分百吸人眼球的設(shè)計。

【圖片來源】網(wǎng)絡(luò)

十八、歐普藝術(shù)

誕生時間：1955年

誕生地點：法國

藝術(shù)特點：被稱為“光效應(yīng)藝術(shù)”和“視幻藝術(shù)”，“會動”的幻覺圖片，內(nèi)容通常是線條、形狀、色彩的周期組合或特殊排列，利用垂直線、水平線、曲線的交錯，以及圓形、弧形、矩形等等形狀的并置，引起觀賞者的視覺錯覺，以強烈的刺激性和新奇感致勝。

【圖片來源】網(wǎng)絡(luò)

十九、抽象設(shè)計

誕生時間：20世紀(jì)初成為一種審美準(zhǔn)則。

藝術(shù)特點：美感內(nèi)容借由形體、線條、色彩的形式組合或結(jié)構(gòu)來表現(xiàn)。有時抽象藝術(shù)的主題是真實存在的，但由于過分風(fēng)格化、模糊化、重疊覆蓋或分解至基本的形式，以至于難以辨認(rèn)原貌。

【圖片來源】網(wǎng)絡(luò)

設(shè)計本身是一個歷史綿長的豐富的藝術(shù)表達世界之一，設(shè)計分為平面設(shè)計、環(huán)藝設(shè)計、工業(yè)設(shè)計、建筑設(shè)計、服裝設(shè)計、網(wǎng)頁設(shè)計等，設(shè)計風(fēng)格與形式取決于設(shè)計應(yīng)用的場景和藝術(shù)風(fēng)格本源，這個世界里的內(nèi)容極其豐富，抓住一條脈絡(luò)可以深挖下去，我們根據(jù)脈絡(luò)培養(yǎng)審美即可。

我們在進行產(chǎn)品建設(shè)中，網(wǎng)頁UI設(shè)計有集美貌與才華于一身的UI設(shè)計師來做，實現(xiàn)有集美貌與才華于一身的前端工程師來做。

但是作為產(chǎn)品汪，對于整體的頁面風(fēng)格還需要有一定的認(rèn)知，能夠根據(jù)UI設(shè)計師需要的設(shè)計需求來收集用戶需求與數(shù)據(jù)、應(yīng)用場景、產(chǎn)品本身特質(zhì)，在網(wǎng)頁設(shè)計上也不能一味追求潮流，而是要綜合自己產(chǎn)品的實際情況與行業(yè)產(chǎn)品氣質(zhì)進行選擇。

歡迎拍磚，一起進步。

本文由 @?花枝俏 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議