Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Object 1
Topography
Scale
12
Segments
Brush (px)
Lightness
128
48
File Name
50%
2D-3D
3D World
2D Canvas
File Name
50%
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Insert a prompt,
upload an image,
or draw your model
Type here...
Gorest: AI驱动的游戏引擎
1分钟概览
项目总览
一键前往任意章节
界面设计
品牌设计
最终设计方案
品牌设计
全流程设计
设计目标
1
为Gorest的游戏引擎创造直观易懂的操作界面
2
依照现代审美重塑Gorest的品牌形象
设计方案
利用明确的分类机制与清晰的排版来防止用户的视觉负担过大
设置针对AI助手的干预机制，让用户掌有最终控制权
以赛博朋克美学塑造产品，但不失专业形象
精选成果
File Name
50%
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
3D Cube
Click to enlarge, Drag to apply
Tell me if you need any changes
Back
Type here...
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Object 1
Topography
Scale
12
Segments
Brush (px)
Lightness
128
48
File Name
50%
2D-3D
3D World
2D Canvas
成就与里程碑
150+版线框图
覆盖13+种创作功能
50+版Logo设计迭代
点击浏览全部设计
GO!
关于GOREST
Gorest 是一家初创公司。他们希望通过开发AI驱动的游戏引擎以降低游戏设计的技术门槛，赋能所有的游戏创作者。
Gorest 的 AI 技术能将2D的关卡平面图转化为可交互的3D白盒模型，供创作者直接用于测试。借助 Gorest，游戏创作者无需手工建模即可高效验证自己的创意，大幅提升效率。即便是技术背景较弱的独立开发者，也能借此打造出以往独自难以实现的复杂游戏。
设计需求
1
Gorest需要我来帮助他们打造他们的游戏引擎。他们需要为业余游戏创作者打造一个直观易用的引擎界面，但同时不能牺牲其专业功能的完整性。
2
此外，Gorest 正计划更新他们的Logo与品牌色调，他们认为现有的设计未能传达出符合现代感且以AI为核心的品牌形象。
界面设计的挑战
Gorest的游戏引擎功能繁多，使用起来容易给新用户带来压力。
13+ 个要囊括的功能 -
图层 | 导出文件 | 材质应用 | 自定义材质 | 生成3D建模 | 建模收集 | 图像上传 | Marks菜单 | 自定义Marks | 运行模拟 | 改变视角 | 墙面设置 | 地形设置
因此 ，我需要在设计时保证 1) 用户可以轻松地浏览引擎界面并迅速理解不同功能的排布，2) 一些包含AI、用户并不熟悉的功能需要有清晰的干预与修正机制，让用户对设计有最终的控制权
早期的低保真设计稿
品牌设计的挑战
Gorest 当前的 Logo 采用了世界树这个元素，以呼应其连接万物、贯通不同游戏的愿景。但该设计在观感上较为复古，现代感不足。
在追求更现代的外观的同时，Gorest也希望新的品牌形象能体现其最初的品牌愿景、并继续延用世界树这个核心要素。
在设计时，我需要 1) 探索将“世界树”的隐喻与现代风格相融合的方式，2) 调整Gorest的品牌色彩，在尽量保留原色的基础上，使其呈现更具技术感与游戏化的风格。
Gorest最初的Logo和色调（左），以及Gorest最初的网站配色
品牌设计
最终作品
界面设计
项目总览
在构思阶段时，我做出了多项重要的设计决策。这个章节种，我记录了在面对这些重要决定时的思考过程。
进行品牌设计时，我先构思了大量不同的设计方案，在通过互相之间的比对与筛选，确定了最优的设计方向。
经过多轮打磨迭代，我得以在以下章节呈现经过设计的Gorest游戏引擎。
属性面板
KEY
File Name
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Object 1
Topography 1
Texture 1
Wall
Thickness (m)
0.20
Height (m)
3.00
Color
FFE1E1
100%
50%
2D Canvas
2D-3D
3D World
收缩状态下不会遮住屏幕中央的画板
其位置与3D编辑模式下的位置不同
不能再2D编辑模式中看到3D相关属性
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Texture 1
Object 1
File Name
50%
2D-3D
3D World
2D Canvas
不同属性之间的分类更为明显
与3D模式界面的位置相同
可以在同一个界面中查看所有2D、3D属性
即使在收缩状态下也会轻微遮挡画布
工具面板
KEY
一些图标表达的意思相近，难以分辨
一些工具的使用场景并不广泛，在工具栏上会占据空间，例如橡皮与图片上传功能
图标与图标之间没有明显的分类，掌握不同工具更加困难，容易造成视觉疲劳
将功能重复的图标去除
仅保留了用处最为广泛的核心工具
此版本将不同工具进行分类，使用户学习起来更加轻松
起始页
高效利用了左侧面板的空间
Logo过大，容易被误解成一个装饰，而不是可以通往首页的按钮
对于剩余的货币数量缺少强调
Logo的大小遵循了设计常规
对剩余的货币数量更为强调
拥有通往个人账户页面的按钮
导出文件
File Name
New File
Duplicate
Export
2D Canvas
2D-3D
3D World
Layers
50%
File Name
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Insert a prompt,
upload an image,
or draw your model
Type here...
50%
Save to computer
File Name
Contents
All
Format
GLB
Save
有更多的面积来预览需要下载的内容
完成下载需要6个步骤
导出文件的工作流横跨了多达3个界面
File Name
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Type here...
50%
File Name
Location
Unreal
Format
Open on unreal
Export
导出钱无需额外的预览界面
完整导出文件仅需4个步骤
导出文件和编辑文件可以在一个界面上完成
打开的窗口过多，可能对用户造成视觉负担
初始设计
将Gorest的G与现代科技感进行融合
将白盒的概念进行联想
将白盒与AI的概念进行融合
直接对Gorest之前的Logo进行修改
将Gorest的G与世界树、现代科技的概念进行融合
对比与评估
基于白盒概念的Logo
PASS
与Gorest的现有产品高度相关
符合现代感审美
与Gorest的远景以及未来系列产品无关
基于AI概念的Logo
PASS
与Gorest的核心服务息息相关
与现有的AI服务的Logo太过相似
与Gorest的前进和品牌形象关联太弱
继续当下Logo的直接改动
PASS
与Gorest的远景高度相关
太过复杂，不利于快速记忆
难以让其具有现代感
将G字母与世界树的概念融合
ADOPTED
与Gorest的远景高度相关
具有现代感
简单但让人印象深刻
最终调整
PASS
PASS
PASS
ADOPTED
品牌色调
强调色1
PASS
绿色与棕色与世界树的元素高度关联
风格上过于复古怀旧，需要更多的现代感
强调色2
PASS
具有现代感，能联想到游戏
和Unreal以及Unity引擎的强调色过于接近
强调色3
ADOPTED
绿色与世界树的概念高度关联
亮蓝色赛博朋克风格十分契合，极具现代感
生成3D模型
KEY
材质应用
KEY
导出文件