2020-2-6 前端达人
作者通过以进度条的设计深入浅出的讲解关于FUI的设计思路。虽然FUI设计看起来很复杂，只要找准规律，从一些作品中总结分析细节，再运用到我们的设计中。想要了解的小伙伴可以尝试一下。
前言
看到上期小伙伴想了解一下 FUI 的设计教程，所以这次再次和大家聊一下关于 FUI 的设计风格，我们以“进度条”的设计教程为例，深入浅出的聊一下关于 FUI 的设计思路，因为主要设计思路的延展，所以不会出现具体的数据参数，小伙伴们要谅解啊。
目录
1.风格介绍
2.设计思路
3.总结
1.风格介绍
关于 FUI 的定义，阅读过我上一篇文章的小伙伴可能对 FUI 的定义有了一个较为清晰的定义，即 FUI 是：虚构的、未来的、幻想的用户界面。
接下来我会向大家简单介绍一下 FUI 主要的两大设计风格：军事风格和机甲风格（也可以叫做机械风格）。
1.军事风格
军事风格的特点在于：“直接明了”。因为在残酷的战争中时间就是生命，士兵必须保证“快速、准确、直接”才能保证战斗的胜利，所以会尽量避免与操作业务无关的。你也可以理解为当下最前沿的的设计理念“less is more。”例如下图，在界面设计中几乎都是利用简单的几何设计语言完成。
2.机甲风格
机甲风格相对于军事风格的最大特点就是：“具有一定的装饰图形元素，或多或少。”机甲风格最大的特点便是具有机械或者机甲风格的装饰元素，其中多为异形元素。其灵感来源于工业设计，从机械和机甲的工业设计语言中提取图形元素，在运用到界面设计上。如下图，异形的机甲风格让机器人的头部设计显得更加统一，如果换成当前流行的扁平化设计，可能就显得有点奇怪了。
机甲风格的发展归功于科幻题材故事的发展，为人们打开脑洞，畅想更多的可能性。在设计上激发了 FUI 的诞生，无论是赛博朋克、废土题材、还是漫威、DC宇宙中的科幻影视作品中我们都能看到机甲风格的界面设计。
2.设计思路
设计样式 – 军事风格
我们从以上的设计风格中抓去我们需要的关键词进行示例设计，首先我们看军事风格的关键词是“直接明了、快速、准确、直接，”我们转换成我们平时的设计语言就是：“极简风格，”这样是不是更好理解了。例如图例中，页面整体十分统计，利用简洁几何语言进行设计。
接下来我们做一个简单的军事风格的进度条：第一步，找参考！！！这一步很重要，很多同学都很容易就忽视这一点，一心一意的闭门造车，绝不借鉴学习其它优秀作品。这里向大家推荐 HUDS + GUIS 设计公司，这里有我们许多我们耳熟能详的影视作品中的 FUI 设计。
第二步，临摹，临摹可以说是学习他人技巧的最快方式，从中我们可以学习到许多设计中的细节，日后我们可以运用到自己的设计当中。我借鉴临摹了下面的进度条样式。
我们可以放入界面当中感受一下视觉效果：
设计样式 – 机甲风格
我们再来进阶一下，设计一个机甲元素的的进度条。
机甲风格看似装饰图形复杂，设计难度复杂，但其实我们只需要掌握好 – “提炼元素”这项技能就能完美应对机甲风格的设计。
我们再回顾对创意设计的定义：是把再简单不过的东西或想法不断延伸给予的另一种表现方式。这里我们可以理解为将机甲元素进行提炼总结，延伸到弹框设计当中。例如下图，漂亮的小姐姐一秒钟变机械美女，就是通过对机械元素延展到模特身上。
第一步，照一张你喜欢的不错的参考，这里你可以找成熟的界面设计作品，也可以找一张不错的关于机甲风格的参考，以便于自己进行元素提取。这里我们以大家熟悉的高达为例：
我们从中提取我们需要的图形，如下图：
最后我们我们需要仔细思考将图形进行组合，多尝试几次他们的组合方式。这里我对提取的元素进行了二次加工，将图形一和图形四进行了结合，打破固有的组合规律，让图形看起来更加生动。
最后我们可以放入界面当中感受一下视觉效果：
3.总结
FUI 的设计看起来复杂，难以下手，但其实也是有规律可循，我们可以从作品中理性的去分析其中的设计细节，提炼总结，最终再落实到实际的设计作品当中。当然最好你能先了解一下它的设计理念以及发展，就像 FUI 是“虚构的、未来的、幻想的界面设计”一样。
---来自姜正
转载自简书
作者：极创设计
链接：https://www.jianshu.com/p/77665c771153
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务