在輕量化設計當道的當下，好久沒碰上復古風格的界面設計了。今天來和大家聊一聊，在做這套設計時的一些思考，希望對大家有所幫助。

往期作者干貨：

一、風格特征提煉

在調研之前，我們首先要確定復古風格的屬性，因為中西方的復古風格差異性是很大的。跟客戶溝通后，確定想要的是偏美式的復古風格，那咱們就按照這個方向去找參考。

1. 美式復古風設計

咱們先來看看美式復古風的設計是什么樣的：

不難發現，美式復古風的設計都是偏硬派的，線條感十足，文案/Logo 也是藝術性字體居多，配色更接近自然系配色，也稱大地色系。

2. 美式復古風機械

一種風格的形成絕不僅是平面設計，咱們也可以從別的領域去尋找靈感，比如工業機械類。

在那個年代，機械的主流造型審美和現在是有很大的差異的，和當代機械追求輕盈和流線感不同，他們更加喜歡機械的工業感。

比如老爺車，我們能直觀感受到工業帶來的硬核感，機械表面的鉚釘、外露的齒輪和機械結構、鑄鐵分割線，都在強化工業的硬派風格。

又比如 CCD 相機，沒有現在追求一體式的美感，反而喜歡用多種材質的拼接打造手感握捏的差異感。

3. 風格歸納

找了這么多參考，咱們來歸納一下風格特征：

圖形：機械感、硬核工業、鉚釘、分割線

配色：自然系配色、卡其色、灰調

材質：做舊、材質拼接、工業化

字體：襯線體、藝術體

二、風格嫁接

風格關鍵詞確定好了，接下來就是如何把提煉出來的視覺元素嫁接到界面中了。

首先是音樂播放頁，復古的造型很容易讓人聯想到黑膠唱片：

唱片機出來了，但發現專輯的圖片是不可控的，不同的圖形可能會影響到文案的識別。

好解決，咱們加一個硬一點的板子，然后再把灰調的配色加上，營造氛圍感。

氛圍感出來了，但細節精度感覺還是差點意思。現在畫面中都是大面塊，特別是下面的深色底板，雖然上面加了一些孔洞和分割線增加細節，但整體看起來還是比較單薄。

咱們找找參考：

能看到這張參考中，和我們的結構類似，唱片也被一塊板子覆蓋一部分，但人家的板子上也會有層次，所以看起來不會單薄。

咱們也用起來，在原來的基礎上再加一個層次，但要注意大小對比，周邊的空白也可以加一些英文裝飾。

這個方向差不多就敲定下來了，當然這個版本還是專輯圖為主，因此削弱了黑膠唱片的質感。咱們還可以根據提煉出來的其他視覺點再來一個皮膚，強化黑膠質感。

層次的對比不止體現在重點頁面，咱們做所有頁面都應該代入這個概念，就算是元素很少的簡單頁面，也可以用層次來豐富設計。

比如這個藍牙頁：

雖然在圖標外面加了一個層次，也加了機械接縫和倒角細節，但看起來就是很空

原因也很簡單，元素太少，留白面積太大，那如何解決這個問題呢？還是接著找參考

這是復古感的相機實體，我們看起來會覺得機體十分豐富，咱們拆解一下原因：

1. 機體整體使用上下不同材質拼接，做出面的層次
2. 機體上有很多邏輯、按鈕、鉚釘，填充點的層級

咱們也學學這個邏輯，先做頁面整體層次

增加頁面上下結構，做出顏色層次，整體看上去不會太單薄。

接下來繼續增加點的細節，來填充剩余的留白部分，注意增加細節時，不要用單一的元素復制粘貼，可以多找幾種小元素造型，比如出聲孔、旋鈕、分割線、刻度線等。

層次是不是豐富多了，最后要注意，咱們的機械層次交疊時，可以用陰影來營造空間關系。其次機械感的邊緣接縫處，也會有硬邊的高光，這些都是影響畫面精致度的細節。

最后來看看完成稿吧：

我整理了一份這個風格的視覺點歸納，供你挑選搭配使用，希望對你有所幫助。

歡迎關注作者的微信公眾號：「菜心設計鋪」