分享

我对游戏UI方面的一点杂谈~

 文档集成 2014-05-19

  

 

      很久没有发帖子了,距离上次发帖貌似有4个多月。。。(KUSO,工作忙啊!!)

   4个月时间基本都在研究 :游戏交互,游戏UI设计,等我们很多原画不感冒的区域。。。。

   其实游戏美术在我看来远远不只是把画画好。画好画是一定的,修行慢慢来别急,但是游戏美术块很大,就像一个木桶里面装满了水,这个木桶就是游戏美术师的整体实力,原画这块板子很长,但是UI这块很短,同样你的水满不了多少,就是我们所说的短板!其实要把握整个游戏的美术基调光有原画真的远远不够,原画再牛逼,没有好的3D还原和UI展示以及动画的配合,再牛逼的原画也没有用。到时候只能团队起内讧。这不可取啊~毕竟真正玩家玩到的是游戏的内容,毕竟游戏产品才是我们最后呈现在玩家面前的东西嘛。说多了,大家都懂的!!

 

     下面这个是我在做UI美术时经常会去注意的一些要点,这些要点的作用是在和动画,程序,策划等队友们沟通时经常会用到的一些点,我把这称为G点(哈哈)哈哈主要有8点,沟通时最怕砸不中对方的G点,这样会增加沟通成本,增加成本的事咱不干,所以拿出来分享一下这8个G点,这八点是我的队友们总结并告诉我的,并非我独创,但我有必要拿出来配上图,讲的更明白一下,可能还是有些笼统,细的东西在我们公司的UI部门里,这是个强大的部门,他们非常专业,现在也缺人,想进的联系我~(我跟他们老大很熟,好基友嘛哈哈)

 

                                      废话少说:

 

G點一.      简单  

游戏界面应以简单,朴素为主,大家最忌讳就是各种菜单面板铺满天飞,各色文字很难阅读,分辨,颜色纷杂,毫无主次,令人眼花缭乱.

 

我对游戏UI方面的一点杂谈~

 

 你看到上面这种画面你想玩不

 

我对游戏UI方面的一点杂谈~


最终幻想14做的就很好,有很好的功能区域划分。

 

请对比上面某游戏和最终幻想14的游戏画面下方正中央的icon区域,你会发现一个有趣的现象,上面某游戏在icon周围外边框用了很抢眼的金黄色,还有龙头浮雕等元素,而最终幻想14做的很简约,(有人会说暗黑3不也有这些花纹嘛大哥~仔细看下人家UI上的背景花纹是处在暗色调里的好不,那个色调根本不抢icon的主角地位,你UI背景太亮了太抢icon的地位~~ 就会造成UI界面过花呀) (抱歉我懒一下,手动度娘下暗黑三的UI吧)

 

 

游戏进入不超过3步。

 步数多了玩家每次就不想进这个游戏了。

在ios游戏上大多数游戏进入界面只需2-3步 ~真的很快呦

 

 

对话框的深度不要超过3

 

 我对游戏UI方面的一点杂谈~

 

  菜单层级在3-4层之间 不会太深太深阿拉会疼的~!开个玩笑太深会使用户找不到方向,用户玩这个游戏时绝对不会去找一个隐藏在4,5层弹窗里的功能的!!!

 

 

G點二.      友善 

游戏的icon在缩小的时候清晰可见,减少文字的出现,尽量用图来说话,隐藏复杂性

 

 游戏Dota2 的游戏界面  主要看下排图标处文字信息较少

 

 

 我对游戏UI方面的一点杂谈~

 

Dota2 中的icon 边缘剪影非常清晰。

 我对游戏UI方面的一点杂谈~

绘制游戏中的icon的要点,1.让主题边缘清晰,2.主体在有限的空间里尽量饱满,3.色彩饱和,高对比。 4.不能太花,尽量简化内容,和边缘的复杂程度。(这些都是为了在icon缩小的情况下能很清晰的展现)

 

 我对游戏UI方面的一点杂谈~

 

 

 

     (图二)

图一icon构图饱满 图二显得很孤独

 我对游戏UI方面的一点杂谈~

 

      适当的夸张变形有利于icon饱满 

 我对游戏UI方面的一点杂谈~

 

 

    绘制步骤可以以草图(主要解决24------铺色(主要解决3-------清晰边缘(主要解决1

   IOS上的APP icon更讲究,这块咱能扯上一天!

 

 

明显区分功能数据

 

 

 我对游戏UI方面的一点杂谈~

 信息分区的好处在于玩家想要去找同种属性的信息时不会去另外的区域去找,就像上图星际争霸2的UI一样,要控制这个单位行动你只会在最右边的选择单位行动区去找,而不会去什么地图区去找。

 

 

常用对话框之间的切换要在150毫秒到200毫秒之间

 

 这点切记针对的是常用UI,部分不常用的UI可以动下脑子,让他出现的时候可以有点意思。

举个例子吧,FF系列(最终幻想)里玩家对于查看自己信息,改变装备等属性菜单的切换都很快一定是在150毫秒到200毫秒之间  但是进入战斗时的切换会稍微慢点,一般是一种较为动感的动画,1是要加载场景 2这种切换明显将RPG探索部分和战斗部分区分开。3是为进入战斗的感觉做一个铺垫,(呵呵,更不要说进入boss战前总得有一到两段长到爆的动画做铺垫) 

 

按钮的注意事项:

     按钮的制作应当明显,让玩家能感觉到这个东西是能点击的。

     部分按钮我们会期待玩家去点击,比如付费按钮(暗笑)这种按钮我们尽量要做的诱惑性强一些  1.质感 2.色彩 3.动画特效

 

对于质感我要讲一下水晶按钮

  

 我对游戏UI方面的一点杂谈~

     对于上图和下图的对比你会更想去点那个按钮呢?

     答案当然是上图了

     上图的质感会让你联想到诱惑的美食:

我对游戏UI方面的一点杂谈~

 

     人的食欲被质感无形中调动了起来,所以水晶按钮更具有诱惑你想去点的冲动。

 

     而且按钮我们一定要做的是能按下去的感觉而不是平面的一张纸呦亲~ 所以在按钮一般会做的有体积一些。

 

按钮色彩的选择:

      这点主要还是要和游戏的整体风格搭调:(暗黑三被选中的按钮就用了红色,未选中的用了无色相,因为人家游戏UI整体的基调就是红黑两色,给你隐性的传达岩浆,地狱,恶魔等感觉。咋又拿暗黑三说事啊~ 度娘下吧)

      这里提到一点,我们注意以下两种按钮色彩给你传达的情感:

 

 

 我对游戏UI方面的一点杂谈~

绿色相对于红色更能让人联想到前进的感觉,所以,像类似于next之类的前进感觉的按钮可以设置为绿色,而不会设置为红色。原理各位想想红绿灯就知道了。色彩在这里起到串联作用。

 

 

 

 

 

 

来吧,吐槽下图吧。

 
我对游戏UI方面的一点杂谈~

 

 

G點三.      可容错 

大部分游戏要有可让玩家反悔的选项,避免误操作给玩家带来的不便啊~

我对游戏UI方面的一点杂谈~

 

    还有啊,返回键啊,取消键啊 什么的都是可容错属性啊~



 

 

G點四.      一致性 

 游戏UI风格要和游戏中的内容一致。

 

 

 

    星际争霸的3个种族分别做了3UI,每个种族的特征都在UI上有所体现

我对游戏UI方面的一点杂谈~
         

 

 

 

 

 

人族的UI采用的视觉元素为直线切割,给人硬朗的感觉,而且现代工业也是采用了这种切割,一些元素会用到人族原画上的元素。(此图请对比机枪和UI 上的元素)

我对游戏UI方面的一点杂谈~

 

 

 

星际争霸神族的配色采用黄色和蓝色的配色,高贵未来,神秘,采用的线条为曲线切割,带有未来流线感。

 我对游戏UI方面的一点杂谈~

 

 

 

    虫族的UI设计中采用暗棕色,有畸变生长的元素。

我对游戏UI方面的一点杂谈~

 

  

 

 

 

 

    下图为我们以前做的忍者类再早前的版本,此版本的UI我可以说不丑还算简洁,但是问题在于他并不像个热血的忍者类游戏。感觉更像个冷冷的应用类游戏,并不能让玩家感觉到一进来就能想象成火影忍者得世界(好吧我承认是要山寨哪路多了)。

我对游戏UI方面的一点杂谈~

 

 

 

 

下图是后来这个忍者类游戏的版本,我们可以看到在UI的配色上有了主次,以及引入了一些忍者世界的一些视觉元素,比如展示框的边角处也用了手里剑等元素,UI底板用了木头的纹理,但是UI感觉有些像应用程序类的UI。UI传达出的信息有些正式,不够活泼。

我对游戏UI方面的一点杂谈~

 

 

 

下图是接下来再次进行修改后的这个游戏UI界面, 在每个UI的展示上用了各种方法,比如上面的拉面店的UI我们把UI设计成类似于拉面菜单的样子,武器店用了类似于铁锁以及硬朗的外框等能让人联想到铁匠铺的元素,当然这些元素要符合第一个G点啦~

我对游戏UI方面的一点杂谈~ 主界面场景

我对游戏UI方面的一点杂谈~武器店和拉面店

我对游戏UI方面的一点杂谈~

在文件大小允许的情况下我们可以在弹窗上适当的做些花样,使游戏更加活泼,记住前提是文件大小允许(问我怎么知道文件大小允许不允许?问程序去~)

 


 

再者,信息呈现的位置也要保持一致性。

 

          同级菜单的部分按钮请保持位置一致,让玩家养成习惯。

我对游戏UI方面的一点杂谈~

 

G點五.      功能优先 

重中之重啊  先确定方向,再进行美化 

开始设计时一定要是画的是草稿啊亲,千万别画成成品啊,要不改动成本太大了。

这和我们做设计时是一样的,一定要先有样稿!

 

 

 美化的前提一定是不能让游戏卡  这里一定要和程序策划沟通好! 

 

G點六.      习惯 

不得随意改变玩家习惯操作,这样会造成玩家难于上手

比如HP一般是绿色MP一般是蓝色

WASD的方向操作,E或者F为使用

美版PS3叉子键是确认 圆圈键是取消

日版PS3 叉子键是取消 圆圈是确认、

 

等等 。。。。

这需要很多游戏经验,所以,多玩游戏是必要条件。

 

G點七.      可扩充

 

   可扩充功能边框的设计要点:1.重复性的简单背景,千万别把背景设计的过于花哨从而导致扩充功能时抓瞎。 2.功能区分层

我对游戏UI方面的一点杂谈~

dota2 这个区域在改变屏幕尺寸时会有遮盖!但不会对信息产生影响

 

 

 

 

G點八.      视觉完美 

在有游戏画面的界面中尽量使UI没有特别的重心,最好做到无形入化。

 

 

 

UI设计  视觉元素的用法时要拿捏适度,不能因为视觉元素过多而影响游戏的体验,也不能因为没有视觉元素而降低游戏整体的传达。

 

 

下图为老版本的那个忍者游戏(因为游戏还没正式发布,所以我先不提真名,请谅解)  UI上有很大的缺陷

我对游戏UI方面的一点杂谈~

我对游戏UI方面的一点杂谈~
我对游戏UI方面的一点杂谈~

 

 

  以上是我的一些经验,其实在UI这块还有很多细节,而我本人的能力有限,也只能先写这么多,大家多多包涵,有问题请直接指出或补充,互相学习。

 

 

 

       最后我再废话一点:游戏美术在团队中的作用其实是很大的这取决于我们的能力,这个能力绝对不止是在绘画上追求极致。   进入这行先试问自己真的喜欢游戏吗?还是只是喜欢绘画?这是不同的两条路,我并没说前者比后者牛逼,绝对没有,后者牛逼的照样屌!(啥破措辞啊)只是我选择的是前者,所以~走下去吧~~少年他气呦~~


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多