Project1

标题: 【UI界面新设计】——制作思路和因素的考虑及评定 [打印本页]

作者: 江辞 时间: 2012-7-23 05:14
标题: 【UI界面新设计】——制作思路和因素的考虑及评定
本帖最后由江辞于 2012-7-23 16:30 编辑

其实个人感觉游戏的UI界面应该是在最后才设计的，因为游戏的界面功能都是为了辅佐游戏的剧情和玩法，如果一开始就着手

设计UI界面可能又要面对之后多次的修改。

我只是按着自己的理解来谈谈像论坛里的原创游戏的UI界面要怎么设计（目测不会涉及脚本技术），之前我一直想学习设计UI，但是网

上的好多教程都是针对网页的或者实体产品的如手机，好少看到对于游戏的。好多东西我都是从游戏本身借鉴而来，大家可以交流

一下。这只是个人的心得体会，可能会错得十万八千里，慎看。

还有我好喜欢这个论坛哈哈。

在这帖子应该是讨论UI界面怎么去设计，不涉及怎么去绘制（如果硬要说的话就PS？）。

例图只是防止眼睛看了文字太多疲劳的- -+

目录：
新手向部分（初部完成）
一.右键菜单的设计——UI界面制作的基础，过程
二.对话框——根据第一部分总结出的思路制作的一个实例
三.战斗时的菜单——如何在确定菜单的[特性]下进行设计
彻底累趴下了。基础部分是结合实例讲的，我的表达能力一直不大好，大家要是有不明白的就回帖问吧。
进阶篇估计得等我元神恢复了再来更新。
之后要还活着可以再来写个如何绘制的美工向教程。

一.右键菜单的设计

从最基本的右键菜单开始，在确定下游戏的模式剧情玩法和关卡设计等等之后，我们可以设定出菜单所需的功能，像一般传统向的

RPG游戏（如仙剑），我们会这么设计：

1.物品——查看物品，使用物品
2.状态——查看状态
3.技能——查看技能，使用技能
4.装备——查看装备，替换装备，卸下装备
5.任务——查看任务
6.存储——存储档案

这个设计只是比较一般的情况，需要根据不同的游戏情况进行修改，不过在这里我们就这么设定好了。

有时候我们看游戏截图的菜单就可以看出其大致的游戏模式是怎么样的，所以如果希望自己的游戏与众不同自然也需要在UI界面的

设定上下点功夫。

对于这个右键菜单，我们设定了六个功能，现在我们可以开始考虑它们的共同性以及不同性。

共同性，就是每个菜单都有的一部分，如同数学里的交集（我在说什么- -+）。
很简单地，从想象?从其它游戏作品的参考中，我们可以确定出大致的框架：
就是标题栏和主体。（而XP,VX,VA默认窗口，可以理解为就只有主体。）

还需要一些在主体内的元素：选项框，描述框。
我们可以在PS用一张图把所有的元素先整合出来，一些设定如间距，颜色等记得保存。
我这里只先弄了单选的选择框，和几个描述用的边框……（懒- -+）

对于选项框来说，我们需要设定它的选择范围和选择状态，
也就是考虑，在这举个例子：[单选，多选，可输入]这三种情况。

对于描述框来说，我们则需要设定它的排版和如何描述。
我们需要确定在这描述图它的排版：[图片的边框，位置等，文字的大小，颜色，位置等，段落如何划分等]
还有如何描述即设定文字的大小（这里我建议先设定出标准大小，然后就可以在这基础上通过增大文字来表示强调，缩小文字表示它不
重要等），文字的颜色。
例如：普通文字，系统文字，大一号字体（在剧情对话作为提示的关键词）

其实在这会发现有遗落。那就是选项框和描述框它们其实是可以相互包含的，所以你又要设计出包含描述框的选

择框，已经包含选择框的描述框。

包含描述框的选择框：这里也很好考虑：对于选择框里的内容，我们要设定好：[可选择，已选择，不可选择]
包含选择框的描述框：参考原描述框的设定。

还有，如果支持鼠标操作的可能要考虑加入当鼠标划过的效果。

这里我们把六个功能的窗口都试着拆分开了，得出好多构成窗口的元素（哪里多了- -+）。

个人觉得这样子不仅可以做出比较统一整洁的UI界面，方便于我们之后的绘制，更重要的是，一旦设定好这些基础元素，之后对于

UI界面要有所修改都是比较方便的，至少不用全部重头来过。

不同性：暂略。（<-为毛窗口那么平淡无奇啊。）

但确定完所有的界面的共同性和不同性之后，我们就要一起考虑这两部分进行设计：
先设计出这六个窗口的框架：标题栏+一个大的描述框；

这时，在要对六个窗口进行设计时我发现自己忽略了一个能够选择当前在队伍里人物的选择框，
再者我们还可以需要一个选择是否的选择框。这两个选择框我们可以设定为跳出。

1.物品：选项框+当前持有的物品描述框——按下确定-跳出人物选择框
2.状态：跳出人物选择框——描述框
3.技能：跳出人物选择框——选项框+技能描述框
4.装备：跳出人物选择框——选项框+装备描述框
5.任务：描述框
6.储存：跳出是否选择框——确定存储

这些设定也不是很完善，不过大致意思就是这样。

我先用五分钟做了一个物品窗口的例子。其实从设计好的元素表拖来元素排版好就好了。

对于自己一个人制作的游戏，确实比较悲催了。不仅要考虑美工，还要会脚本。
我目前也只了解XP里的菜单如何制作，有些要列入考虑的问题，也只有你才知道脚本是怎么运作的才会去注意。
例如在XP里，我们要考虑，图标的大小，图标的X间距，Y间距。大图标大小，文本区域。（图中数值乱写的。）
以及物品多时下拉按钮改变亮度等这一系列的情况。
……

所以我说UI界面是最后才去绘制的。

总结一下？
呃。首先我们要确定出游戏所需要的功能，这里考虑自身的美工能力，脚本能力，时间精力各个方面。
把自己觉得有必要的功能先记下来。可以一边做游戏的其他部分时一边想。
然后考虑它们是否存在许多共同性，尝试着先把窗口的一些基本元素设计出来。
最后再逐一根据各个窗口的功能考虑设计排版以及实现。

二.对话框
根据第一部分总结出的方法，我们再设计对话框时就有一个方向了。
先设定好自己想要的功能，在这我设定：头像+名字+文字。

然后列出所有要考虑的因素。我写得很乱……

绘制出对话框就完了。用的都是第一部分的思路。

其实个人觉得对话框比较重要的是头像绘制风格的统一，看到各种画风乱入的实在是无感，以及图像大小也要有一个统一的设定。
就像电影里的分镜头，原来头像是肩部的，后来又变成只有脸部的，都会让人感觉奇怪的，所以选择素材时都要考虑好或者后期处理成一致的。
什么时候半身像，什么时候小头像，都是要考虑的。

三.战斗时的菜单
在设计这个的时候，我们可以开始来学着考虑菜单的一个因素：[快捷性]。

我们看这三种菜单，第一种是比较常见的单向一列菜单，但是如果在RM里只有键盘操作的话其实是很不友好的。
暂时再看后面两种菜单，五角星的好像看上去更华丽一些。
有时候面对不同的菜单时我们会不知道哪种比较好比较适合自己的游戏。

这时我们来考虑一下它们的快捷性问题。这里我参照程序设计课本里的树的权重来考虑：

以第一个菜单为例子，我们设定好它们的权重（也就是在一场战斗里，玩家可能会选择其操作的可能性），而这个数值自然是需要
你在游戏测试时得出了，游戏中小怪的战斗场数多少，BOSS战多少，各占怎样的比重，得出怎样的数值，这里也不多阐述了。
我先设定好这样的权重数值。

然后我们在求在这菜单中的各项路径数值。这里第一选项“攻击”作为默认选项，所以选定它为树的根，得出其它相对根的路径。

这样子我们就可以计算出这个菜单的快捷性系数是多少了：0+0.6*1+0.1*2+0.05*3+0.05*4=1.15
这个数值应该是更小越好对吧。当然这个数值也并非衡量一个菜单设计好坏的绝对标准。
我们还要考虑好多其它的因素……
但这种权重也可以运用到菜单整体的设计过程，就是这样的意思吧。

不过我们至少可以认识到，在我们了解到菜单需要怎样的特性之后，我们可以不用猜测的方法，
而是运用一种相对标准的算法去求得它们之间的数值差距，而来判断这是否是一个设计不错的菜单。

=进阶=
设定快捷键
设定菜单层级
设定引导操作
（附加地图的标注）
……

作者: 皮卡星 时间: 2012-7-23 06:48
UI呢，我也很喜欢设计UI，不过大部分都涉及脚本然后我的技术不足而放弃了囧
所以目前也没做多华丽的UI
然后我觉得LZ那种道具UI不是很适合RM
因为RM的图标只有24x24像素……除非你用Yanfly的那种方法把他放大
可是这样看起来有够蛋疼= =

作者: seagull 时间: 2012-7-23 12:12
感觉不错……之前为了做UI到处找教程基本找不到
最讨厌做UI了……现在仍在边做边纠结中……

作者: 江辞 时间: 2012-7-23 13:22

皮卡星发表于 2012-7-23 06:48
UI呢，我也很喜欢设计UI，不过大部分都涉及脚本然后我的技术不足而放弃了囧
所以目前也没做多华丽的UI
然后 ...

关于图像大小方面我确实没考虑，这个帖子主要是给一个UI制作的过程，和要怎么去考虑。
关于脚本方面，我也只知道XP要怎么写的，目测讲不清楚- -+

欢迎光临 Project1 (https://rpg.blue/)