带您了解酷炫的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.未来的

c.幻想的

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

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

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

2.风格介绍

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

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

a.军事风格

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

b.机甲风格

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

3.FUI的优势

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

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

A.物以希为贵

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

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

B.视觉优势

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

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

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

色彩

a.背景

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

b.配色简洁

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

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

c.对比强烈

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

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

图形

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

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

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

b.机甲元素的运用

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

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

C.突破思维限制

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

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

D.硬件载体

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

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

4.设计思路

设计样式-军事风格

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

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

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

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

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

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

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

设计样式-机甲风格

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

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

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

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

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

我们从中提取我们需要的图形,如下图:

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

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

3.总结

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

THE END
1.图形设计的概念是什么?图形设计是一个视觉传达的过程,它使用视觉符号、图形、文字、色彩等多种元素来创造和设计视觉内容。图形https://www.jiaoyubao.cn/wen/73a4963f460e455c9b64455210305fed.html
2.谈现代平面设计中图形创意的艺术意境的研究论文成功的平面广告作品不仅要有鲜明的时代特征,还要充分融入良好的文化底蕴,使观赏者体验不同的视觉冲击效果,体现产品个性,总之,需要创作者在设计过程中不断创新,用图形充分表达文字概念,形成良好宣传效果。 参考文献: [1]孟春玲.中国“传统图形创意设计”在现代平面设计中的运用研究[D].2010年.湖南师范大学 https://mip.wenshubang.com/yishuleibiyelunwen/856235.html
3.《品牌设计法则》读书笔记北宋“济南刘家功夫针铺”的标志,包含了“白兔持杵捣药”的图形识别和品牌名称,“认门前白兔儿为记”,作为门店识别符号。 第一个受法律保护的现代概念品牌是英国威廉·巴斯酿造公司的Bass(巴斯)。 第一个应用品牌视觉识别系统是德国电器公司。 消费大众,即消费市场的想象社群,这群人虽然彼此并不相识,却有相似的审https://www.jianshu.com/p/abd4a7fb15b5
4.VI包含元素解析:详细解读VI设计中常见的元素与符号标志和标识在VI设计中具有不同的概念和功能。标志是一个独立的图形元素,通常以图标的形式存在,用于代表品牌的身份和形象。标志可以是一个简洁而具有辨识度的形象,能够在不同的媒体和平台上使用。而标识则是一个包含文字和图形元素的设计,用于识别和表示特定的品牌、企业或组织。标识通过文字和图形的结合来传达品牌的https://www.rhtimes.com/brand/packing-design11831.html
5.视觉传达设计专业所有专业知识都在这儿了在中国与世界上很多国家,视觉传达设计一词被等同于平面设计,在大学专业划分里,这也是平面设计方向的学科而广于图形设计。视觉传达设计的设计师一般也称为平面设计师,并且与工业设计师、服装设计师、网页设计师和IT工作者有区别。 一、专业由来 很多人认为艺术设计(视觉传达)就是“平面设计”、“图形设计”,这样的认https://maimai.cn/article/detail?fid=279527866&efid=jBYtdPZtGpWe0QH8GrjyPA
6.手绘设计软件有哪些?应用领域有哪些?3. CG/电影概念设计 如今我们看到好莱坞各式各样的大片,都是先有这些图片再有3 d模型啊~ 4.平面设计/图形设计/图案设计/插图/漫画 图案设计包括许多,如字体、图形、排版、摄影、资料、海报设计等都可以用到手绘技巧哦~ 5.比赛 这个游戏需要很多手绘,人物,场景,道具等。许多实践者都是艺术院校的科班生~特别情景https://www.yutu.cn/news_35716.html
7.新媒体背景下视觉传达设计特征及趋势2.视觉传达设计的概念与特征 “视觉传达设计”于20世纪中叶开始进入我们的视野,是人们为了达到一定目的而进行的一种有计划的设计。信息传递大约有三分之二是依靠视觉传达来实现的,因而视觉传达的设计非常重要且必要,直接决定了人们信息传递的效率。视觉传达设计是以视觉信号为根本传导形式来传递事物的内容,因为它在各个https://www.dangbaotoutiao.com/rhfz/c_121818.html
8.第一部分设计的基础概念和基础理论艺术设计既不同于借助概念逻辑思维,又不同于借助艺术形象的形象思维,艺术形象思维是再现现实世界的人物和现象,艺术设计思维体现想象的形象,但是这些形象在现实世界中并没有直接的类似物。艺术设计和技术设计都是商品的设计,商品设计调节以商品为中介的社会关系,所以说,艺术设计和技术设计都具有社会性。http://www.360doc.com/content/11/0325/16/6442249_104542732.shtml
9.《图形设计》课程教学大纲1.具有明确指向的设计概念。 2.具有明确语意的图形设计。 3.由概念到设计的转换途径。 [教学重点与难点] 重点:设计概念到图形化的表达。(也是难点) 第6章 图形设计的拓展 [教学目的与要求] 了解并掌握图形设计在具体设计中的拓展途径。 [教学内容] https://kcsz.zwu.edu.cn/b2/38/c6444a176696/page.htm
10.轴对称图形的研究关键词:轴对称;轴对称图形;教学设计 生活中,我们身边有各种各样的轴对称图形,而在数学学习中,学生在学习轴对称这一知识时总会遇到各种各样的问题,尤其是一部分形象思维不敏感的同学,在观察、寻找轴对称图形和画一个轴对称图形的对称轴时感到无从下手。现行的小学数学教材对轴对称图形这一概念的描述和呈现方式存在https://www.fx361.com/page/2020/0704/6825931.shtml
11.几何图形在设计中的表达与应用未来趋势:几何图形在设计领域中的应用将会继续扩展,未来可能会出现更多创新的几何图形设计方式和应用场景,为设计带来更多可能性。 几何图形作为设计中重要的元素之一,具有丰富的表达方式和应用场景。通过几何图形的简洁、规则和对称特点,设计师可以创造出具有现代感和美感的设计作品,表达出抽象的概念和情感。希望本文所探http://www.youlipin.com/article/5458.html
12.图形创意设计图形设计训练,就是帮助学生打破局限,从对每个问题的不同解决方法中获知解决问题的各种潜在因素和设计方案的多样性,鼓励用概念来发展技巧,冲破传统的习惯性的思维方法,摆脱简单的对与错这样的作业答案,让学生直接面对各种各样的开族式问题,主动自觉地去寻求多样化的解决方案,为学生创造性的发展开辟一个新天地。 https://baike.sogou.com/v174456057.htm?fromTitle=%E5%9B%BE%E5%BD%A2%E5%88%9B%E6%84%8F%E8%AE%BE%E8%AE%A1&ch=ch.bk.amb