查看: 1738|回复: 0

【UI】钢铁侠Mark VII界面设计概念

[复制链接]

906

主题

954

帖子

3950

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3950

最佳新人

发表于 2018-12-7 17:12:42 | 显示全部楼层 |阅读模式
源作者: Jayse Hansen

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

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

13_3_c5a48db11c3dc4f.jpg


很多的元素是用AI设计,导出为PSD,然后导入AE制作动画,还有不少元素使用了C4D设计,然后导入到AE中进行制作,制作了一些面部高光和眼球中得反射,我尝试将HUD界面立体化。我认为电影中得Mark VI的设计风格有点扁平,因此在我的Mark VII中我让设计充满了深度感。
13_3_59923de900acba8.jpg
既然是立体化的界面,因此我努力让界面变得充满可读性。争取让界面的每个部分都具备功能性。
13_3_33629d1165c30e6.jpg
下面是Mark VII的设计简介。对比了各代HUD界面,我力求让我的Mark VII在迭代上更有迹可循。我的Mark VII更注重功能性。
13_3_1b6b6ffa0b10a8d.jpg
钢铁侠目标线系统
13_3_fccfef7f6bd8964.jpg

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

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


诊断器
13_3_34204d689a5140c.jpg
目标线界面

13_3_4d638ad27387751.jpg

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

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



飞行面板


注意看Tony,界面很具备深度感,全新设计。
13_3_5a35a614c17466d.jpg
目标线系统努力追求深度感和功能性,有点像镜头或瞄准镜。
13_3_1eeb872eaafc341.jpg
目标线HUD,功能全开模式

13_3_c65a417efb9d862.jpg
目标线系统解剖
13_3_39948990ebe344f.jpg
目标线系统的构建过程
13_3_310d0dc25f2ad56.jpg
目标线HUD系统解剖
13_3_7550d9f7ebacbf1.jpg
C4D构建的目标线HUD系统
13_3_b28de8e809ee99e.jpg
目标线HUD系统白色版
13_3_00f0d2b6b93f6dd.jpg

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

最开始打算构建全三维HUD界面。后来做了几个动画测试,测试后根据盔甲传感器系统,构建了更多细节视图。
13_3_61b9e251a257f73.jpg
同时还可视化了自控型微件
13_3_16d70aead8d430b.png
下面是地图微件

13_3_463e7f8f80fb8eb.jpg


13_3_517729d88dbef03.jpg


13_3_cca2eb59492cd93.jpg


关注galaxixv,官方微信公众号。
GALAXIX UE4 讨论学习群 140439020
UE4精英学习群  12762592
UNITY学习群   194092348
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


快速回复 返回顶部 返回列表