带您了解酷炫的 FUI 图形设计风格

随着大数据行业的不断发展，数据可视化设计也越来越多的服务于政企的业务工作。在数据可视化设计当中不可或缺就是 FUI 的设计风格，无论是政企的用户还是设计师都对它十分青睐。为什么会如此受欢迎呢？让我们一起探讨FUI图形设计。

1.FUI的定义

相信许多同学对与“FUI”并不陌生，可能一提到这个词大家首先想到就是漫威和 DC 科幻电影中主角的操作场景，例如漫威电影中钢铁侠的操作界面：

由于大家长期受到科幻电影影响，一度认为 FUI 即为“科幻界面设计”，这个定义真的是正确的么？大家可以短暂思考一下，带着疑问继续阅读下面对 FUI 的定义，看是否和你想的一样。

A.定义

为了让大家更好的理解 “FUI” 的定义，我们将 “FUI” 这个词拆开分别进行简单解释。在 FUI 中：

“U”代表用户（User）

“I”代表界面（Interface）

“F”代表虚构的（Fiction）、未来的（Future）、幻想的（Fantasy）。

简单点来讲 FUI 就是：虚构的、未来的、幻想的用户界面。

相信读到这里大家已经对 FUI 有了初步的认识，“科幻界面”只是 FUI 中的分支，并不能完全解释 FUI 。对与“虚构、未来、幻想”三个词我们再做进一步分析解构：

a.虚构的

FUI 的专业术语是“虚构用户界面”，其中包含各种“虚构”的用户界面，即不真实，只是大胆的设想。例如人们大胆的设想宇宙飞船的界面设计，或者可穿戴的智能设备界面。

b.未来的

我们再回忆我们看过的科幻电影，在电影中它通常作为故事的一部分而创建。故事可以在不同的时间段进行设定，例如将来、当前或者过去。所以我们并不将 FUI 限制在“未来”用户界面，它的时间线是相对的。

不同时代的人们对于科幻电影的理解不一样，所以大家对于未来的定义也有所不同，例如早年的《星球大战》系列电影和《环太平洋》系列电影都属于科幻电影，但存在的时间线却有所不同，其中的界面设计风格也会因有所不同。

c.幻想的

关于“幻想”的用户界面，人们脑袋可能首先闪过一些夸张虚幻、为人耸听的画面。就像《神奇博士》中的神奇博士进入多玛姆的世界当中一样。

“幻想”这个词经常被用来描述哪些远离现实的事情，这些事情难以被实现。百度百科中对幻想的解释是“虚而不实的思想；没有道理的想象；无根据的看法或信念；以理想或愿望为依据，对还没有实现的事物有所象。”

关于“幻想”的用户界面也可以包括基于现实和真实技术的用户界面，因为人们在基于现实的基础幻想也属于幻想的范畴之内。例如宝马的概念设计中，我们依然能看到现代的汽车设计的雏形，但也突破了现有的汽车设计状态。

相信到这里大家已经对 FUI 的定义有一个较为清晰的概念，FUI 是虚构的、未来的、幻想的用户界面设计，即进行大胆的假设虚构用户界面，且并不受时间的限制的，远离现实的幻想用户界面。

2.风格介绍

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

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

a.军事风格

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

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

b.机甲风格

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

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

3.FUI的优势

相对于大众接受度更好的扁平化，数据可视化设计却对 FUI 的设计风格情有独钟，在笔者所接触得到的数据可视化的设计中，无论是实际的工作项目还是一些概念稿的设计都频繁用到 FUI 的设计风格。

到底是什么原因让市场对 FUI 接受程度如此之高呢？接下来我们从心理学、视觉、思维以及硬件几个角度作为切入点来进行分析。

A.物以希为贵

罗马人说：“物以希为贵。”因为在平时生活中极为罕见，则显得十分珍贵。例如大家平时的在玩游戏的时候，游戏中“限定”的虚拟商品总是能够比其它虚拟商品更加吸引玩家去购买，因为“限定”预示珍贵、与众不同，即使价格高一点，玩家也能够接受。例如最近王者荣耀中的新年限定皮肤，因为是“限定”，所以总是不断的勾引用户的钱包。

同样 FUI 的设计风格在整个设计行业属于一个小众的形式，我们在日常生活中难以接触到，毕竟我们的日常生活中不可能出现宇宙飞船或者炫酷的机架。面对当今扁平化设计的主流趋势，FUI 的设计风格会让用户耳目一新，接受程度会更高一些。例如在商品的展示中，同样是 New Balance 的鞋子，你那种形式的展示会让顾客更加愿意买单？

B.视觉优势

相对于当前流行的扁平化设计，FUI 可谓是在 UI 设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。

作为主流趋势的扁平化设计，无论是 Material Design 还是 iOS 都以深入人心，人们对扁平化的设计风格习以为常，已经很难在数据可视化的设计中进行视觉创新，而 FUI 的设计风格可以说是在数据可视化的设计中极具视觉优势。

FUI 区别于我们平时所接触的扁平化的设计，在视觉层面我们主要以色彩和图形两个方面进行分析。

色彩

a.背景

在背景的处理上常以深色的背景营造来营造强烈空间感，让用户感觉自己处在一个三维的空间当中，例如下图，我们能够感受到强烈的空间感，数据仪表盘处于一个具有纵深感的三维世界当中，视觉中心的数据显示器与背景形成了鲜明的对比。

b.配色简洁

在颜色的选择上，借鉴了军事设备中的配色准则，在残酷的战争中“快速、准确、直接”是最重要的，所以在军事设备上多以单一的冷色调为主，尽量避免多种色彩的使用，这样对于操作者而言更加简单。所以 FUI 的配色设计大多以冷色调为主，对比色通常作为辅助色用以反馈重要信息，例如在 007系列电影中的界面都是使用对比色反馈重要信息，如下图中的坐标信息都使用了红色作为突出重要信息的设计手段。

当然也有大量使用同类色的情况，例如 Sid Meier 中的飞船状态页面，着重表示当前的飞船的状态，这样在发生异常的状况下可以立马发现。

c.对比强烈

FUI 中的配色对比强烈，首先因为背景多以深色为主，强烈的对比能够有效的拉开页面中的空间感，例如钢铁侠中的史塔克战役中头盔的界面。

其次强烈的对比能够突出核心信息，更好的进行信息反馈。例如下图，强烈的对比能让我们一眼就能看到核心信息，以及当前的状态反馈

图形

FUI 的图形装饰元素可以说是极其丰富，形式感很强。在设计的细节当中使用大量的“异形”的图形元素，并辅以一定的装饰元素。例如下图：

a.军事风格

FUI 的设计大量借鉴了军事风格，其中也大量借鉴军事操控的平台的界面图形设计，这里借鉴军事风格的原因很简单，因为在众多的科幻、动作的故事题材中都是以军队或者其他超级团队来去对抗恶势力或者外星人入侵者，在界面设计上自然要延续其中军事风格。

细节上例如战斗机上的 HUD 瞄准界面中的图形多次被引用到飞船的操作界面上等等。

b.机甲元素的运用

大量异形元素的机架风格源于对机甲设计的灵感，并且在细节上使用大量的装饰元素。

在细节上例如边框和环形图的设计，相对于扁平化的设计，FUI 的设计风格显然更具视觉冲击力。

C.突破思维限制

FUI 是一个非常有趣的 UI 设计领域，是我们在日常现实生活之中无法探索的用户界面设计方式。在我们的日常工作中，通常普通设计师很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。

FUI 使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计，我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。

虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证，它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样。虚幻用户界面可以激励人们为未来创造技术。

D.硬件载体

在我们之前提到影视故事中设定的使用场景多为宇宙飞船的指挥舱或者驾驶舱、可穿戴式AR设备等等，但在现实生活现在多以配备“大屏”的指挥厅为主，相对于我们平时使用的移动设备和 PC 台式机，大屏的物理渲染尺寸更大，在比例上的差异也更大。如下图：

由于硬件设施的变更，扁平化的设计无法满足用户的需求，主要原因有：扁平化设计力求干净整洁，而在大屏中物理渲染尺寸的变大会显得画面格外空和呆板；其次是缺乏细节。而 FUI 的设计风格设计细节丰富，恰好可以补充其细节缺失的问题。

4.设计思路

设计样式 - 军事风格

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

接下来我们做一个简单的军事风格的进度条：

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

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

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

通过总结分析，我选用了最简单直白的结合图形作为设计元素进行设计，如下图：

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

设计样式 - 机甲风格

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

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

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

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

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

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

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

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

3.总结

数据可视化设计选择 FUI 的设计风格有着必然的原因，首先是 FUI 的设计风格属于一个小众的设计风格，在这个扁平化当道的时代更容易吸引用户的目光，接受程度高；其次是视觉冲击力强，设计细节丰富，军事风格和机甲风格的图形在视觉上更加新颖；再者是“大屏”作为视觉载体，物理渲染尺寸比例的变更使得扁平化设计在大屏上显得画面不饱满，缺乏细节，而 FUI 则恰好能够补充这些空白；最后 FUI 可以帮助我们突破思维限制，寻求更好的解决方案。

作者：姜正（海盐社）