Star Citizen Universe主界面包含新闻源、社区面板和未来 HUD 导航。

前端设计/HUD界面/社区

Star Citizen Universe

一个古老的社区网站,具有未来派的 HUD 面板、新闻源、社区专栏和导航结构。对我来说,这个界面将驾驶舱思维、太空冒险和早期的视觉方向联系起来。

节点 SCU-013 信号 在线 存档 界面/2013

30秒内破案

Star Citizen Universe

问题
一个古老的社区网站,具有未来派的 HUD 面板、新闻源、社区专栏和导航结构。对我来说,这个界面将驾驶舱思维、太空冒险和早期的视觉方向联系起来。
解决方案
具有前端、HUD 面板和配置文件界面的未来社区网站。设计拼贴展示了界面工作的方向。
角色和重点
前端、用户界面
状态
早期的 UI 方向
结果
HUD 拼贴、结构
时期2013
域名前端、社区、UI设计
前端/UI设计师
状态早期界面和社区设计

核心故事

早期HUD方向,个人迷恋

Star Citizen Universe显示了我自己的界面工作的早期方向:徽标、背景、面板、数据字段、个人资料屏幕和导航已经有意识地转向未来的 HUD 语言。

该案例将早期的前端和 UI 兴趣与 HUD 风格联系起来,现已扩展到产品组合中。

我个人关注《星际公民》,因为对我来说,它展示了当一个雄心勃勃的宇宙、一个高视觉酒吧和一个参与社区长期共同发展时会发生什么。规模、细节、技术创新和参与社区的结合强烈吸引着我。

个人动机

从驾驶舱梦想到数字宇宙

太空层之所以吸引我,是因为它将冒险和系统思维结合在一起:一个充满信息的驾驶舱、一个你必须理解的课程以及一个比直接屏幕更大的世界。这与我早期对喷气式飞机的兴趣有关,后来在《战地》和《安特罗皮亚》中也能看到这种兴趣。

本页面显然不是《星际公民》本身的作品。这是我自己围绕这种魅力所做的社区和界面工作,也是关于世界、社区和视觉质量如何相互加强的个人长期参考。

接口

HUD 从驾驶舱思考

屏幕、面板和数据字段被设计为具有清晰飞行员眼睛的可识别科幻环境的一部分。

结构

社区导航

该网站将个人资料信息、社区背景和导航组合成一个视觉上连贯的整体,为参与的会员提供空间。

视觉语言

技术性但可读性强

对比、线条和面板必须给人一种未来感,同时又不会使信息变得无法使用。

投资组合价值

长期参考

这个旧方向解释了为什么当前的投资组合界面在我的工作中感觉合乎逻辑,以及我对更大的数字世界的迷恋。

视觉基础

决定方向的部分

拼贴画、背景和身份共同设定了方向:深色数据层、青色细线、角标记和感觉像驾驶舱的界面。

来自Star Citizen Universe的其他前端设计拼贴。
额外的 UI 拼贴个人资料、社区和 HUD 片段作为主界面旁边的附加块图像。
Star Citizen Universe原创壁纸,带有科幻城市和人物。
自身背景为社区网站定下基调的原始背景。
原始Star Citizen Universe徽标。
标志SCU 徽标是一个可识别的社区标识。
《星际公民》的大气图像,包括船只、飞行员和夜间科幻环境。
游戏背景更广泛的大气图像支持 HUD 拼贴背后的科幻语言。

接口

一个全屏,然后是各个部分

个人资料页面首先显示整体。下面的卡片列出了导航、搜索、个人资料数据、列表和社区中最重要的部分。

01 / 简介页面

整个界面作为上下文

头像、网络 ID、船舶列表、个人资料操作、新公民和活动都汇集在一个连贯的驾驶舱视图中。

02 / 08 / 接口部分

部分接口

七个紧凑的地图使功能可读,而无需将概念图像呈现为成熟的最终作品。

02 / 导航

菜单作为驾驶舱条

相同的标签、活跃的发光和短青色角线使六条主要路线可扫描。

03 / 寻找会员

作为仪表板搜索

暗场、薄边缘和明亮动作遵循与 RSI 参考相同的紧凑过滤器逻辑。

04 / 会员表

会员作为一个活生生的网络

头像、地点、加入日期、帖子和状态都有固定的信息栏。

05 / 轮廓控制

一个节点中的身份和操作

网络 ID、位置、船舶和帐户操作共同构成一个清晰的个人控制面板。

06 / 论坛概况

没有视觉噪音的讨论

图标语言、类别、数字和最后活动在精简数据行中仍然可读。

07 / 论坛帖子

消息级别的对话

作者、排名、时间和内容在一个紧凑的消息模块中保持可识别的分离。

08 / 公会登记

团体有自己的签名

徽章、会员资格、语言和招聘状况使组织具有直接可比性。

在线社区

该界面属于真实的社区场所

Star Citizen Universe于 2013 年初在网上公开,作为一个英语粉丝社区,提供有关《星际公民》的新闻、成员简介和讨论。

界面分析

四种设计选择

拼贴画将界面不仅仅是一个单独的图像:作为更大宇宙中社区的结构、导航和视觉语言。

01

型材面板

个人信息和状态被放置在紧凑的面板中,适合科幻仪表板。

02

世界+社区

成员、角色和背景都被赋予了自己的位置,这样访问者就可以进入一个更大的宇宙,而不仅仅是看到一个单独的粉丝页面。

03

导航系统

该界面使用清晰的区域和可重复的框架来保持复杂信息的可扫描性。

04

长期参考

线条、对比度和技术细节使视觉语言易于识别,并展示了为什么不断发展的社区世界不断激励着我。

界面如图

HUD 语言的作用

该拼贴画汇集了我的前端、HUD 和社区思维:信息仍然可浏览,同时环境感觉很大且技术性强。

平视显示器

面板和数据字段

该拼贴画展示了带有科幻面板、个人资料信息和技术视觉语言的界面片段。

结构

社区背景

屏幕指向视觉系统中的导航、会员信息和社区组件。

设计选择

科技有氛围

黑暗的空间、清晰的线条和紧凑的信息相结合,给社区带来了自己的驾驶舱感觉。

效果

当前风格的先驱

这种旧的设计风格解释了为什么带有 HUD 线条和面板的组合界面非常适合我的工作。

前端设计 平视显示器界面 社区结构 型材面板 视觉层次 界面开发

下一个案例

HUD 到其他情况

从界面拼贴到社区、Webdevelopment和人工智能系统。