08月30, 2019

充满未来和科幻的界面设计FUI

所谓FUI可以是幻想界面(Fantasy User Interfaces)、科幻界面(Fictional User Interfaces)、假界面(Fake User Interfaces)、未来主义界面(Futuristic User Interfaces)、电影界面 (Film User Interfaces)的简称。不管F代表什么,都是代表了未来和科幻的意义。

概念太深奥了?或许我们先来一打图片就更容易理解

《钢铁侠》中的FUI alt

《复仇者联盟》中的FUI alt alt


钢铁侠Mark VII界面设计概念

翻译自国外,非本人设计

为了给已经存在的Mark VI HUD界面设计一些新的元素(Mark VI HUD界面由设计师Stephen Lawes设计),我尝试了自我挑战,意图设计出全新、升级版的钢铁侠HUD界面,为托尼斯塔克先生量身打造最时新的界面——Mark VII

在设计之前,我做了大量研究:书籍、影像、飞行器仿真界面都成为了我研究的对象。为了设计这个HUD界面,我画满了3个笔记本,用来储存创意。 alt

很多的元素是用AI设计,导出为PSD,然后导入AE制作动画,还有不少元素使用了C4D设计,然后导入到AE中进行制作,制作了一些面部高光和眼球中得反射,我尝试将HUD界面立体化。我认为电影中得Mark VI的设计风格有点扁平,因此在我的Mark VII中我让设计充满了深度感。

alt

既然是立体化的界面,因此我努力让界面变得充满可读性。争取让界面的每个部分都具备功能性。

alt

钢铁侠目标线系统

盔甲诊断器是整个HUD界面中主要的信息来源,跟上一代HUD一样,我把这个部分放置在了头部上方——盔甲诊断器已经成为了钢铁侠的象征。在其中的菜单中放置了武器、盔甲状态、生理状态等信息——但是添加了圆形子菜单。

下图橙色的圆形图表可以用文本和图形的形式告诉斯塔克盔甲每个部分的状态。但是这个界面可能有点视觉复杂。因此在其他界面中,斯塔克可以较为简略的搞懂盔甲状态。也可以观察到盔甲各个部分是否接合紧密。

alt 诊断器

alt目标线界面

alt

战斗模式 - 盔甲诊断+飞行功能

一切都要清晰易读,极具功能性,这是我的设计理念

alt 飞行面板

注意看Tony,界面很具备深度感,全新设计。

alt

目标线HUD,功能全开模式

alt 目标线系统解剖

alt

2种模式——二维的合成光圈,或者3维的细节视图 alt

同时还可视化了自控型微件 alt

alt 地图微件

alt


本文原址

https://www.ui.cn/detail/21273.html

本文链接:http://blog.zjamt.cn/post/FUI.html

-- EOF --

Comments