并不能称为教程的分析-06期
上海/UI设计师/1年前/599浏览
版权
并不能称为教程的分析-06期
作为JRPG的爱好者，第一时间购入了
《暗喻幻想:ReFantazio》
（后续简称：
Meta
）
当中的一些设计，拿出来和大家一起聊聊。
如果有玩过的朋友，可以看看我们的想法是否有一致之处~
本内容会分为《上:界面篇》《下：字体篇》
从引入国内的采访中可以知晓，
本作的设计主旨是：
“主角的
【情感波动】
or
【想法】
视觉化”
使用了“科学上网”没搜到人（不懂日文），如果有哪位知晓可以留言区告知哈~
通常： 开发商 or 工作室都会制作：
匹配游戏风格的LOGO开场
通常起到：传递【设计特色 / 产品特点 / IP特色等.....】
我们从此处logo动画涉及,能
感知游戏设计+动效风格
- 直线+圆线+黑白+绿紫+mask+路径动画+晕染
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
大家是否也关注游戏的LOGO动画呢？(´･ω･`)?
💬
大家如果也有认为【LOGO呼应游戏本身】做的好的案例，欢迎留言ε=ε=ε=(~￣▽￣)~
UI作为美术生产中的印象载体之一，承担起了一部分玩家【初映象】的作用。
我们先举个🌰看看Meta在
【颜色+构图】
的初印象
- 在【视/效】感知上都容易让人产生关联
▼甚至都用了【用不同字体指代不同系统功能】的设计
▼扁平且破碎的UI，抖动破碎的边缘，昏暗朦胧的视觉印象，都在帮助玩家游玩同时，沉浸到游戏构建的世界中
💬
大家如果也有UI涉及高度匹配世界观orUI设计拯救了游戏的案例，欢迎留言ε=ε=ε=(~￣▽￣)~我自先来一个：┗|｀O′|┛ 嗷~~ ！！P5天下第1！P5天下第1！P5天下第1！！┗|｀O′|┛ 嗷~~
玩过
女神异闻录5（简称P5）
的话，应该能感受到
它在【面】设计上的比重
💬2016年上线后，国内涌现了非常多学习P5UI设计的项目
不同于P5，本作
Meta的UI设计更侧重的是【线】的设计
🌰：大家可以先来看下面2张图：
同样的交互需求下，【线】和【面】的占比不同，信息关注点也会不同
下面，我们从更多的图来看看，Meta【如何使用线做设计】
🌰：
先来看1个功能界面——《王者资质》
可以看到明显的
【线切割-形成面】，为了服务世界观包装【进度条】
被设计成皇冠的面
- 不直接表达出面，但看到后能脑补出来
- 回头看静态图，线越看越多........
💬
但作为【手游】满值状态是不可或缺的部分，很多时候也是导致设计臃肿的原因之一当然满值设计也是最容易达成【成就感】目标的手段之一如何平衡好【有 和 满】2个维度好难.........
1.1【倾斜】— 与文字配合，平衡画面权重
看了【王者资质】界面，应该能感受到：
【斜线/画面切割】和【线生成面】
📚斜线特点：能打破画面的平淡
接下来，同时引入与线配合的另一设计元素：
【字】
本作存在大量【文字和线】搭配使用的环境
游戏内有有
2类构图设计
【类型1】：
贴边放置，不影响到主要信息
💬
倾斜设计
，总容易带着
【科技风/赛车/运动类....】
刻板印象
- 《圣歌-Anthem》作为一款科幻机甲多人联机游戏（钢铁侠模拟器），UI同样采用了倾斜的设计
这里就不得不有个疑问：
💬 如何削弱：尖锐的菱形产生的科技感印象？
暗喻幻想的方式是：
隐藏&弱化边缘形状，感受到菱形，而不是看到菱形
- 【类型2】文字+图成为视觉中心
此类排版非常常见，就不做过多做解析
1.2【弧线】_第2特色
Meta
并非所有界面的分割都用
【倾斜直线】
💡
【弧线】也是本作分割的设计之一
▼
弧线设计在Meta中的集大成的功能：【智慧殿堂/阿卡德梅】
- 智慧殿堂的灵感来源【达芬奇】的【维特鲁威人】
- 本作UI的【线/圈】的灵感，认为应该来源于此，【线/圈】元素几乎贯穿所有界面中
P5中【圈】的设计让人印象深刻，但圈在实际的P5的界面设计中使用的并不多
更多停留在【平面+宣传】
在
动效模块
我们也能看到【弧线】在动效中的运用
💬在明日方舟的活动【沃伦姆德的薄暮】，我们也看到了【大弧线的设计】
1.3【散射式】——布局设计
本作保留了部分P5中特有的
【散射】
- 因为散射本身的夸张表现力，本作只有特殊界面，才使用该形式
▼系统主界面
用设计师自己的描述，这8个选项每个选项颜色不同，是模拟玩家在思考
“思考不同内容，情绪不同，选项的颜色也不同”
💬
通过飞机稿和实际游戏体验，最终版的设计不光是视觉冲击力强，确实更贴合游戏【背景设定】
但如果能【联动所有界面】都围绕【一个主旨】进行设计，其余的方案，也未必不是好的方案
▼战中切换转场
- 战中经典的操作盘散射设计 对比：
📌我先下1个
自己的定义
：暗喻幻想的界面设计
——
充满——商业性气息 的 复古时尚设计
——
将游戏界面当做【宣传海报】来设计
为什么这么说，我们通过一个简单的背景界面设计，来引入下这个话题
2.1界面中的网格式设计
看到界面的第一眼，就想到了【网格设计】+【Knolling风格】
▼▼▼做交互和设计的同学应该对下面这本书不会陌生~
而
Knolling风格
，则是以一种：
“ 把东西整理出来，以90度垂直方式重新排列组合 ”的方式
【想具体了解knolling由来，可以看下文】
Knolling refers to the practice of arranging similar objects in a precise, perpendicular manner. The goal of knolling is to create a sense of order and clarity in a space by aligning and organizing the objects within it
The term was coined by Andrew Kromelow
in the late 1980s
and later popularized by artist Tom Sachs. Kromelow was a janitor in Frank Gehry’s Santa Monica studio and had a habit of laying out
Knolling is a term coined by Andrew Kromelow in the late 1980s. Kromelow was a janitor in Frank Gehry’s Santa Monica studio at the time, and he came up with the concept of knolling as a way to organize the tools in the workshop when they were not in use. Kromelow observed that the tools in the workshop were often left in disarray, and he saw the potential for a more efficient and organized workspace by aligning and organizing the tools.
Kromelow’s colleague, artist Tom Sachs was intrigued by Kromelow’s method of organizing the tools. Sachs adopted the practice of knolling in his own studio and began incorporating it into his artwork. He has credited Kromelow as the inspiration for his use of knolling in his art.
▲摘抄自：https://knolling.org/
让我们回到文章，在微软菜单界面，▼看到【可视化网格】的其他运用环境
▼手游戏中运用最广的应该归属，明日方舟的UI
当网格 和 knolling亮着相结合，【初映象】还是让人觉得【意外/有趣】
💬当了解了这2个知识点，我们再回头去看【商店界面】的背景设定，是否会觉得是个有意思的设计
在我参与的项目预演初期，也曾和同事探讨过【knolling】类似的设计，那时候我们不清楚叫法，但是能归纳出1个名词叫【伴生物】.......希望以后能有机会继续尝试
2.2【复古海报设计】的感觉
第一印象，仿佛打开了【apple官网】
的
感觉，
放大局部细节，让人有一种【深挖内容细节】的感觉
如果游戏内允许or存在玩家滑动滚轮预览，我甚至觉得他们会做出【▼网页感的设计】
当然，回到游戏，这里我们能够看到
商业插画
的影子：
- 这也是为什么我在为它找【定义词】时，会认为本作的UI设计：充满商业性
- 视觉设计在强调1个概念【宣传/卖点】：无论是商店界面 or 角色展示
- 宣传：也是本作游戏的故事背景设定之一
我们还能在【做旧风格的宣传海报】中看到 类似的影子：
- 给人一种：文艺复兴时期/繁荣富足时代下的时尚感
💬这种设计方向的思路，对于氪金点或者商城设计，会是个不错的思考方向
【线 / 圈 / 构图】之后，让我们最后回到界面设计永远绕不开的1个环节【按钮设计】
它在界面的设计中是以【面】的元素存在
3.1饱和度
- 本作的设计也是一贯的使用了【高饱和色】，但在颜色饱和度上比P5缓和了很多.........
- 颜色虽然多，但颜色都保持在相对统一的饱和度和亮度之间
- 【画面最亮】大概率一定会是文字
💬有些东西真的不是都感学的，目前能亮瞎我眼睛的有2款游戏，【P5】和【ARMS】
可惜了当年一起打拳的同事，都已离开了公司，还是很怀念那段时光
3.2按钮记忆点
比较有意思的1点：
本作最有特色的按钮动画，一开始猜是【几张完整的图循环使用】，在录制了3s时间进入AE后发现
▼1秒30帧内，只有3张相同........剩余的是都不相同的图
甚至2S内都没有太多相同的图.........
然后发现→▼他们的做法是：将图片分成3层
【上：笔触层+ 中：块面层 + 下：改色笔触层】
通过对笔触的【位移+旋转+缩放】
最终组合成动画按钮
实际项目中只需要制定好这样的一个规则，TA写1个脚本就能实现
界面相关的就只写这些吧，游戏中其实还有很多有意思的设计，比如：得到新职业的动画表演，散乱在世界观下的【三角元素】，铁战车到达新地点的【观光点】等等等等.......
等大家自己去游戏里面体验吧。
下半篇会是【字体篇】，介绍游戏中用到的字体设计（内容相对较少的拉）
一晃年，这个系列也写到6了！我真是太棒了呢，只是上一篇是5年前了............
至于这5年，我参与的2个项目也都顺利上线，且新项目在发稿日时，取得了不错的成绩。
我也因为做新项目，转换了自己的职位，让自己能有更多的时间和不同的视角去设计和看待团队
也发现了很多非常有意思的事情
其实写这篇文章的初衷，主要是因为，我马上就要发【我这5年干了啥！】项目内容
但是由于公司保密协议，很多内容不能发，很多话也不能说，所以
我就打算把想说的话，写到这2偏文章中，当【文字篇】结束后，公司通过了对外发图的审核，到时候
大家也就能知道【我这5年干了啥！】怎么不写文章了！
这次，一定不会间隔很久了呢！！！！┗|｀O′|┛ 嗷~~
34
举报
声明
47
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
34登录即可同步推荐记录哦
47登录即可加入我的收藏
评论登录即可评论想法
分享分享