酷炫的 FUI 图形设计【百科全说】

作者（姜正）通过以进度条的设计深入浅出的讲解关于FUI的设计思路。虽然FUI设计看起来很复杂，只要找准规律，从一些作品中总结分析细节，再运用到我们的设计中。想要了解的小伙伴可以尝试一下。

前言

看到上期小伙伴想了解一下 FUI 的设计教程，所以这次再次和大家聊一下关于 FUI 的设计风格，我们以“进度条”的设计教程为例，深入浅出的聊一下关于 FUI 的设计思路，因为主要设计思路的延展，所以不会出现具体的数据参数，小伙伴们要谅解啊。

关于 FUI 的一些冷知识可以阅读我上一篇文章《数据可视化为什么偏爱FUI》

1.风格介绍

关于 FUI 的定义，阅读过我上一篇文章的小伙伴可能对 FUI 的定义有了一个较为清晰的定义，即 FUI 是：虚构的、未来的、幻想的用户界面。

图片源自 HUDS+GUIS

我们仔细阅读关键词：“虚构的、未来的、幻想的。”从对 FUI 关键词上我们进行粗略的分析可以得出这么一条简单的结论：FUI 的设计不依据现实为基础的界面设计，为设计师留有巨大的想象空间。所以朋友们，请把脑洞开大一点吧，不受到当前的技术和硬件载体的制约，FUI 本身就是一种创新发明。

接下来我会向大家简单介绍一下 FUI 主要的两大设计风格：军事风格和机甲风格（也可以叫做机械风格）。

1.军事风格

军事风格的特点在于：“直接明了”。因为在残酷的战争中时间就是生命，士兵必须保证“快速、准确、直接”才能保证战斗的胜利，所以会尽量避免与操作业务无关的。你也可以理解为当下最前沿的的设计理念“less is more。”例如下图，在界面设计中几乎都是利用简单的几何设计语言完成。

图片源自 HUDS+GUIS

军事风格成为 FUI 的主流设计形式有着必然的原因。首先简单的从我们熟知的影视作品中来讲，在诸多科幻动作为主的故事题材的影视作品中，正义的一方都有军队的支持，其中不可避免的会出现的许多设备的界面；再则随着科技的发展，许多高科技都会用运用到军事设备的研发上，精密的结构线和反复数据让我们觉得其中的科技含量很高。

图片源自 HUDS+GUIS

2.机甲风格

机甲风格相对于军事风格的最大特点就是：“具有一定的装饰图形元素，或多或少。”机甲风格最大的特点便是具有机械或者机甲风格的装饰元素，其中多为异形元素。其灵感来源于工业设计，从机械和机甲的工业设计语言中提取图形元素，在运用到界面设计上。如下图，异形的机甲风格让机器人的头部设计显得更加统一，如果换成当前流行的扁平化设计，可能就显得有点奇怪了。

图片源自behance

机甲风格的发展归功于科幻题材故事的发展，为人们打开脑洞，畅想更多的可能性。在设计上激发了 FUI 的诞生，无论是赛博朋克、废土题材、还是漫威、DC宇宙中的科幻影视作品中我们都能看到机甲风格的界面设计。

图片源自 HUDS+GUIS

2.设计思路

设计样式 – 军事风格

我们从以上的设计风格中抓去我们需要的关键词进行示例设计，首先我们看军事风格的关键词是“直接明了、快速、准确、直接，”我们转换成我们平时的设计语言就是：“极简风格，”这样是不是更好理解了。例如图例中，页面整体十分统计，利用简洁几何语言进行设计。

图片源自 HUDS+GUIS

接下来我们做一个简单的军事风格的进度条：第一步，找参考！！！这一步很重要，很多同学都很容易就忽视这一点，一心一意的闭门造车，绝不借鉴学习其它优秀作品。这里向大家推荐 HUDS + GUIS 设计公司，这里有我们许多我们耳熟能详的影视作品中的 FUI 设计。

第二步，临摹，临摹可以说是学习他人技巧的最快方式，从中我们可以学习到许多设计中的细节，日后我们可以运用到自己的设计当中。我借鉴临摹了下面的进度条样式。

第三部，修改细节，举一反三。临摹就一定是是抄袭么？当然不是！创意设计，是把再简单不过的东西或想法不断延伸给予的另一种表现方式（百科），所以我们可以通过对设计组件内部进行重新组合或者修改其中的细节参数来达到自己在设计的目的。通过总结分析，我选用了最简单直白的结合图形作为设计元素进行设计，如下图：

我们可以放入界面当中感受一下视觉效果：

设计样式 – 机甲风格

我们再来进阶一下，设计一个机甲元素的的进度条。

机甲风格看似装饰图形复杂，设计难度复杂，但其实我们只需要掌握好 – “提炼元素”这项技能就能完美应对机甲风格的设计。

我们再回顾对创意设计的定义：是把再简单不过的东西或想法不断延伸给予的另一种表现方式。这里我们可以理解为将机甲元素进行提炼总结，延伸到弹框设计当中。例如下图，漂亮的小姐姐一秒钟变机械美女，就是通过对机械元素延展到模特身上。

图片源自花瓣

第一步，照一张你喜欢的不错的参考，这里你可以找成熟的界面设计作品，也可以找一张不错的关于机甲风格的参考，以便于自己进行元素提取。这里我们以大家熟悉的高达为例：

图片源自花瓣

第二部就是元素组合，我们需要提取了我们可能需要的元素，就像我们设计时面对自己手机素材一样，这个时候我们不要急于立马去设计，要仔细思考其设计形式，元素的位置安排。我们还是以以高达为例，途中我圈出了我可能用到的图形元素。

图片源自花瓣

我们从中提取我们需要的图形，如下图：

最后我们我们需要仔细思考将图形进行组合，多尝试几次他们的组合方式。这里我对提取的元素进行了二次加工，将图形一和图形四进行了结合，打破固有的组合规律，让图形看起来更加生动。

最后我们可以放入界面当中感受一下视觉效果：

3.总结

FUI 的设计看起来复杂，难以下手，但其实也是有规律可循，我们可以从作品中理性的去分析其中的设计细节，提炼总结，最终再落实到实际的设计作品当中。当然最好你能先了解一下它的设计理念以及发展，就像 FUI 是“虚构的、未来的、幻想的界面设计”一样。

海盐社（公众号）

作者：姜正

酷炫的 FUI 图形设计

前言

目录

1.风格介绍

1.军事风格

2.机甲风格

2.设计思路

设计样式 – 军事风格

设计样式 – 机甲风格

3.总结

相关推荐