充满未来和科幻的界面设计fui在国内还没有起步在国外早起相当成熟-凯发旗舰

2017-12-03 02:56 author: chris song

所谓fui可以是幻想界面（fantasy user interfaces）、科幻界面(fictional user interfaces）、假界面(fake user interfaces）、未来主义界面(futuristic user interfaces）、电影界面 (film user interfaces）的简称。不管f代表什么，都是代表了未来和科幻的意义。

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

温馨提示：本文论点需要大量酷炫精美图片作例证，所以移动设备浏览可能消耗不少流量。

《钢铁侠》中的fui

《普罗米修斯》中的大屏幕墙

《复仇者联盟》中的fui

还有《逆时营救》中的fui

《攻壳机动队》中的fui

《钢铁侠》中的fui

在我们的年代我们可能终生都无法得见我们这个年代的fui变成现实。但我们看到了五六十年代科幻电影里的神奇之物变成了现实：安德的游戏寓言了ipad，星球大战则给了好多战斗机灵感，少数派报告里出现了leap motion和空气投影的技术。所以科幻电影就像一艘巨大的外星飞船降临到我们百般聊赖的现实生活，令人着迷和眩晕。fui主要的目的就是在电影或游戏中展示科技的发达，比如钢铁侠的hud fui。当然你可能会说，这些fui就是瞎编呗，但是说的容易做得难，要知道让八只触手的外星生物或者斯塔克土豪顺利地操作什么钢铁盔甲或者一艘从超人老家来的飞船并让观众相信这些都是真的还是蛮难的：需要以用户（不一定是地球用户）为中心设计。

fui字典

这里还要向您解释几个名词：

1、ui是什么？ui就是user interface，用户界面。目前我们国内妇孺皆知的职业，过年也不用担心家里人问我是干嘛的了。用户界面的视觉设计师被称为ui设计师。ui指的是一切界面，那么外星材料介质应该也算其中的一种屏幕对吧？

2、motion graphic是什么？mg可以理解为动态图形，我们的fui一定要动起来才更加炫酷。当然在做fui的动态图形时不仅要酷炫，还要符合该程序的功能。在fui里的mg可以使用c4d或ae等软件完成。电影会先录下演员的操作，再加入mg到画面上。所以在演员操作前就应该与导演沟通好how does fui works。

3、hud是什么？hud是head up display，就是运用在航空器上的飞行辅助仪器。飞行员在战斗机上一秒不停观察窗外的情况（不观察很容易被敌机击落啊），手上又要操作那些复杂的按钮，虽然我这辈子可能永远无法理解那些按钮是干嘛的。那这样不会很忙吗？一会儿看看窗外一会儿低头操作，所以为了让飞行员也像开黑一样方便，军方设计了head up display系统，就是把信息用激光或者dlp技术投射在飞行员面前的玻璃上。当然这种技术很快也被游戏领域学习，我们玩得很多游戏都有hud设计，从最早的pong游戏开始到现在很多的vr游戏和穿戴设备。很多汽车厂商也开始了hud的应用了，但hud仍然大部分以游戏和电影出现。很多设计师也以hud设计指代fui设计。

4、dlp投影是什么？digital light processing。指的就是在屏幕上投射到屏幕的技术。这个技术是美国德州仪器的专利技术，hud主流使用的技术就是这个。

5、fui使用的工具是什么？很遗憾地告诉你，fui的设计工具并不来自未来，而是我们熟悉的ps，ai，ae，c4d等软件，是他们组成了看似复杂无章人类无从下手的界面，是他们在奥创袭击钢铁侠时帮助钢铁侠扭转了局面....除了这些常见的软件之外也有需要完成真实可交互的fui的需求，那就需要像openframework和cinder或processing来做了。

fui的分工

director 导演并不止一人，而是方方面面有各类的导演。一般好莱坞负责和fui直接面对面打交道的是特效导演。国内情况类似。

fui designer一般fui是以工作室来为单位承包的。那么工作室一般都是特效工作室，fui设计师有点像graphic designer一样承办平面方面的设计，比如按钮和数据的平面设计。那么这样的设计通常也是有ai等平面软件完成的。在好莱坞越来越多有ui designer background的设计师加入了fui设计团队，那么就会诞生出很多交互更可信的界面来。

mg designer 一般mg designer多为动效师出身，他们把平面视觉元素用c4d或者ae等软件与演员的表演串联起来，形成了完整的画面。这些软件对平面信息都有加强，比如可以设置叠色和发光等效果，增强画面炫丽的感觉。

specialists 专家团队是一个真正硬科幻的核心。外星人的语言需要聘请语言学家来指导，可交互界面需要聘请软件交互设计师来指导。好的电影是不会有明显bug的。国内的影视剧也在努力，我看到很多电视剧最后的人员名单里有一些专家时我就感到很欣慰。但是fui目前在国内的发展确实比较缓慢。

fui的设计分类

hud头显fui

《蜘蛛侠》中的hud

钢铁侠的盔甲、战争机器的盔甲、蜘蛛侠（钢铁侠老板送的）的盔甲，这些在高智能ai控制下的超级英雄们要借助hud看清对手，然后帮助瞄准，然后轻松ko一下外星怪物什么的。所以hud作为第一视角当然是fui设计的第一门类啦。一般来说头显里面应该有些什么呢？飞行的时候起码应该有飞机的那套吧？垂直高度、水平、目的地距离、盔甲内湿度、电量。如果剧情需要，我们还可以增加：电子邮箱、电话、浏览器（不然你以为他们怎么搜索怪物的资料？当然是google一下了）这些功能。如果怪物在对面，我们还可以给超级英雄们提供这些服务：对手的损坏程度、我方盔甲损坏程度、武器库、子弹数量、暴走模式（很中二的蜘蛛侠就有一个暴走模式开关）。当然盔甲有一个siri一样的ai角色可以和主角对话，否则不够drama。如果必要时ai的形象也可以出现在我们的头显上。不过我自己而言，重要的是电影出现画面时主角的脸不要被fui挡住。

大屏幕fui

大屏幕是指墙体上的大型屏幕设计。在故事情节中指挥中心里的角色想了解剧情的推进必须借助于超大的屏幕。在大屏幕中除了一些实时画面外还有帮助指挥官和观众理解状况的说明，这种说明一般以fui窗体的形式出现。比如在银翼杀手2049中，就有这样的fui。注：大屏幕主要功能是显示，不是操作。所以主要以数据图表为组成部分，交互很少。交互一般会给一个镜头给大屏幕底下的一群工作人员。

各类手持设备fui

手持设备其实和我们现实中使用的尺寸差不多：手机型，平板电脑型，大号平板电脑型手持设备。虽然尺寸类似，但科幻世界中的设备无疑可以做到极致：真正的全面屏，全息投影，薄到不像话。一般在电影拍摄时fui界面都是以真正的透明玻璃或者干脆无实物的状态来表演。在我们加入特效时演员已经录制完成电影了。所以我们需要考虑操作的便利性和合理性来配合演员的操作：人类手指食指点击区域的平均值是7mm，而如果是绿巨人这个量级的用户那么我们可能需要把按钮设计的尽量大一点才更加科学。如果我们的用户是那种开挂的外星人那么可能左右手都可以同时操作非常复杂的界面。同时外星人由于智力普遍比人类强，所以也可能界面和按钮比人类界面复杂很多倍，这样观众会更觉得外星人的智慧之高。如果我们在创作一个光速飞船的控制板，那么飞船或者屏幕中的图像占黄金比例1/3就ok，旁边应该是一些状态数据；比如飞船的热量、位置、坐标、气压、各个舱的安全程度这些。同时还需要有可操作面板，如：飞船的电源，氧气阀门，助推器开关，连线地球通话等功能。但是操作上不要有太强的重复感，除了按钮之外还可以设计如开关，滑动开关，圆形控制器灯。如果剧情需要我们具体操作一个功能，那么为了说明还有其他的功能，可以设计界面导航和面包屑导航。

电脑fui

我们说的电脑就是我们目前的微型计算机computer。在电影里我想没有赞助哪家也不希望出现被咬开的苹果或者dell的logo。界面自然也是如此。我们需要设计一个独立的os，一个不同于大家常见的windows或者苹果系统，这个系统的性质如果是比如fbi或者神盾局的绝密系统的话，那么即使是普通电脑的画面也会出现一些我们电脑中不常见的东西：dna图谱，绝密档案库字样，输入密码之类的。

桌面虚拟实景fui

halo-wars-2 by toroskose

桌面虚拟实景的操作员通常比较鸡贼。从攻壳机动队里的老头子或者是战狼2里的指挥官，都是不负责出生入死的，他们在虚拟实景面前拖着下巴思考晚饭的盒饭是什么。桌面虚拟实景表达的概念就是通过激光投射等技术投射在桌子上的虚拟场景沙盘模型。在这种设计中我们必须借助一些3d软件才能完成这部分地形设计。通常需要考虑这些领导没事儿干喊一句：拉近点儿这种馊主意。虚拟实景不仅可以根据你的手来回放大缩小，还可以旋转，显示主角的位置和敌人的数量等。在一些情况下我们还要显示等高线来表示高度。等高线越密集说明海拔越高。

dna图谱类fui

《gnosis》 by vladislav lysenco