如何做好复古风格的UI设计？实操案例+要点总结来了！

在轻量化设计当道的当下，好久没碰上复古风格的界面设计了。今天来和大家聊一聊，在做这套设计时的一些思考，希望对大家有所帮助。

往期作者干货：

一、风格特征提炼

在调研之前，我们首先要确定复古风格的属性，因为中西方的复古风格差异性是很大的。跟客户沟通后，确定想要的是偏美式的复古风格，那咱们就按照这个方向去找参考。

1. 美式复古风设计

咱们先来看看美式复古风的设计是什么样的：

不难发现，美式复古风的设计都是偏硬派的，线条感十足，文案/Logo 也是艺术性字体居多，配色更接近自然系配色，也称大地色系。

2. 美式复古风机械

一种风格的形成绝不仅是平面设计，咱们也可以从别的领域去寻找灵感，比如工业机械类。

在那个年代，机械的主流造型审美和现在是有很大的差异的，和当代机械追求轻盈和流线感不同，他们更加喜欢机械的工业感。

比如老爷车，我们能直观感受到工业带来的硬核感，机械表面的铆钉、外露的齿轮和机械结构、铸铁分割线，都在强化工业的硬派风格。

又比如 CCD 相机，没有现在追求一体式的美感，反而喜欢用多种材质的拼接打造手感握捏的差异感。

3. 风格归纳

找了这么多参考，咱们来归纳一下风格特征：

图形：机械感、硬核工业、铆钉、分割线

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

材质：做旧、材质拼接、工业化

字体：衬线体、艺术体

二、风格嫁接

风格关键词确定好了，接下来就是如何把提炼出来的视觉元素嫁接到界面中了。

首先是音乐播放页，复古的造型很容易让人联想到黑胶唱片：

唱片机出来了，但发现专辑的图片是不可控的，不同的图形可能会影响到文案的识别。

好解决，咱们加一个硬一点的板子，然后再把灰调的配色加上，营造氛围感。

氛围感出来了，但细节精度感觉还是差点意思。现在画面中都是大面块，特别是下面的深色底板，虽然上面加了一些孔洞和分割线增加细节，但整体看起来还是比较单薄。

咱们找找参考：

能看到这张参考中，和我们的结构类似，唱片也被一块板子覆盖一部分，但人家的板子上也会有层次，所以看起来不会单薄。

咱们也用起来，在原来的基础上再加一个层次，但要注意大小对比，周边的空白也可以加一些英文装饰。

这个方向差不多就敲定下来了，当然这个版本还是专辑图为主，因此削弱了黑胶唱片的质感。咱们还可以根据提炼出来的其他视觉点再来一个皮肤，强化黑胶质感。

层次的对比不止体现在重点页面，咱们做所有页面都应该代入这个概念，就算是元素很少的简单页面，也可以用层次来丰富设计。

比如这个蓝牙页：

虽然在图标外面加了一个层次，也加了机械接缝和倒角细节，但看起来就是很空

原因也很简单，元素太少，留白面积太大，那如何解决这个问题呢？还是接着找参考

这是复古感的相机实体，我们看起来会觉得机体十分丰富，咱们拆解一下原因：

1. 机体整体使用上下不同材质拼接，做出面的层次
2. 机体上有很多逻辑、按钮、铆钉，填充点的层级

咱们也学学这个逻辑，先做页面整体层次

增加页面上下结构，做出颜色层次，整体看上去不会太单薄。

接下来继续增加点的细节，来填充剩余的留白部分，注意增加细节时，不要用单一的元素复制粘贴，可以多找几种小元素造型，比如出声孔、旋钮、分割线、刻度线等。

层次是不是丰富多了，最后要注意，咱们的机械层次交叠时，可以用阴影来营造空间关系。其次机械感的边缘接缝处，也会有硬边的高光，这些都是影响画面精致度的细节。

最后来看看完成稿吧：

我整理了一份这个风格的视觉点归纳，供你挑选搭配使用，希望对你有所帮助。

欢迎关注作者的微信公众号：「菜心设计铺」