設計流行趨勢 — Retro UI介紹

若是有在關注流行的朋友們應該有感受到,近年來在時尚界刮起了一陣復古熱潮,像是今年流行的Y2K、美式復古等,這股風潮也吹到了平面設計和介面設計上。復古風格大致可以分為兩個大方向,一個是偏向孟菲斯風格,最近類似的新名詞是Brutalism,運用鮮豔的色彩、重複圖形跟描邊塑造大膽鮮明的畫面風格,另一個則是偏高級精緻的,常見的搭配有漸層、幾何遮罩、細緻的字體與裝飾圖形。這篇文章會先介紹風格歷史,再透過案例分析該如何應用在UI介面上,最後分享適用於復古風格的字體。

什麼是孟菲斯風格?

孟菲斯(Memphis)是由一名義大利建築師埃托雷·索特薩斯(Ettore Sottsass)在1980 — 1987年間,帶領的一群青年設計師組成的義大利後現代主義設計集團,他們所開創的實驗性設計風格。 Memphis 有兩個含義,一個是埃及的一座古城,另一個是美國田納西州的以搖滾樂而著名的城市(貓王即誕生於此地),藉此名稱希望將傳統文明與流行文化相結合。主張豐盛過度的孟菲斯風格後期受到現代主義責難,孟菲斯因此沒落。

Memphis Group: Will Gompertz reviews show at MK Gallery in Milton Keynes

他們設計了一系列的傢俱、燈照、器皿,其中大量運用了幾何元素與鮮豔的色彩,看起來就像玩具一樣,十分搶眼,有些人說孟菲斯是Bauhaus 和 Fisher Price結合的產物。孟菲斯主義強調直觀的情緒感受,敢於想像並推翻陳舊,樂觀而無所畏懼。

孟菲斯風格的應用

近年來孟菲斯被廣泛應用在平面設計和 UI 上,其中擷取的精神是鮮豔的色彩、重複圖形、描邊,以及活潑的插圖運用,許多網站會為繪製的角色製作動畫,增加趣味性。

Notorious Nooch Co.
Panic Studio

用solid color繪製陰影也是常見的手法之一,可以運用 Figma 插件 oblique 快速製作長陰影效果,孟菲斯風格的插畫經常搭配飽滿且略微不規則的字體,部分網站會搭配明顯的格線做為分界(如下圖)。

Blir världen bättre?
GUMROAD
Mack & Pouya
Crumbskees — Phone

精緻復古風格應用

常見的搭配有漸層、幾何遮罩、細緻的字體,使用裝飾圖形(橢圓形與四芒星相當常見)與文字點綴,還有以路徑文字工具製作沿著幾何圖案的文字,在 Figma 上可以運用 arc 製作簡單的文字彎曲效果。

Beauty Center Booking App
Lugon — Classic Modern Homepage
Models Magazine — Landing Page
One Green Way
Howdy Design Family
Furniture landing page

復古字體推薦

  1. Brice

2. Kish

3. Bogam

4. Klose Slab

5. Scalter

6. Carneys Gallery

7. HATOLIE

8. tumb

9. Dofta

10. Rigeko

參考資料

什麼是孟菲斯風格?阿睿ARUI

Everything You Need To Know About MEMPHIS DESIGN

UI Design Trend 2022

--

--