目前游戏UI的情况如何了,感觉学的人不是爸妈亲生的的感觉很多

2013年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第七
2012年7月 C/C++大版内专家分月排行榜第二2012年6月 C/C++大版内专家分月排行榜第二
2013年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第七
本帖子已过去太久远了,不再提供回复功能。我对游戏UI方面的一点杂谈~
很久没有发帖子了,距离上次发帖貌似有4个多月。。。(KUSO,工作忙啊!!)
&&&4个月时间基本都在研究&:游戏交互,游戏UI设计,等我们很多原画不感冒的区域。。。。
其实游戏美术在我看来远远不只是把画画好。画好画是一定的,修行慢慢来别急,但是游戏美术块很大,就像一个木桶里面装满了水,这个木桶就是游戏美术师的整体实力,原画这块板子很长,但是UI这块很短,同样你的水满不了多少,就是我们所说的短板!其实要把握整个游戏的美术基调光有原画真的远远不够,原画再牛逼,没有好的3D还原和UI展示以及动画的配合,再牛逼的原画也没有用。到时候只能团队起内讧。这不可取啊~毕竟真正玩家玩到的是游戏的内容,毕竟游戏产品才是我们最后呈现在玩家面前的东西嘛。说多了,大家都懂的!!
下面这个是我在做UI美术时经常会去注意的一些要点,这些要点的作用是在和动画,程序,策划等队友们沟通时经常会用到的一些点,我把这称为G点(哈哈)哈哈主要有8点,沟通时最怕砸不中对方的G点,这样会增加沟通成本,增加成本的事咱不干,所以拿出来分享一下这8个G点,这八点是我的队友们总结并告诉我的,并非我独创,但我有必要拿出来配上图,讲的更明白一下,可能还是有些笼统,细的东西在我们公司的UI部门里,这是个强大的部门,他们非常专业,现在也缺人,想进的联系我~(我跟他们老大很熟,好基友嘛哈哈)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
废话少说:
游戏界面应以简单,朴素为主,大家最忌讳就是各种菜单面板铺满天飞,各色文字很难阅读,分辨,颜色纷杂,毫无主次,令人眼花缭乱.
&你看到上面这种画面你想玩不
最终幻想14做的就很好,有很好的功能区域划分。
请对比上面某游戏和最终幻想14的游戏画面下方正中央的icon区域,你会发现一个有趣的现象,上面某游戏在icon周围外边框用了很抢眼的金黄色,还有龙头浮雕等元素,而最终幻想14做的很简约,(有人会说暗黑3不也有这些花纹嘛大哥~仔细看下人家UI上的背景花纹是处在暗色调里的好不,那个色调根本不抢icon的主角地位,你UI背景太亮了太抢icon的地位~~
就会造成UI界面过花呀) (抱歉我懒一下,手动度娘下暗黑三的UI吧)
游戏进入不超过3步。
&步数多了玩家每次就不想进这个游戏了。
在ios游戏上大多数游戏进入界面只需2-3步&~真的很快呦
对话框的深度不要超过3层
& 菜单层级在3-4层之间
不会太深太深阿拉会疼的~!开个玩笑太深会使用户找不到方向,用户玩这个游戏时绝对不会去找一个隐藏在4,5层弹窗里的功能的!!!
游戏的icon在缩小的时候清晰可见,减少文字的出现,尽量用图来说话,隐藏复杂性。
&游戏Dota2 的游戏界面&
主要看下排图标处文字信息较少
边缘剪影非常清晰。
绘制游戏中的icon的要点,1.让主题边缘清晰,2.主体在有限的空间里尽量饱满,3.色彩饱和,高对比。
4.不能太花,尽量简化内容,和边缘的复杂程度。(这些都是为了在icon缩小的情况下能很清晰的展现)
图一icon构图饱满
图二显得很孤独
适当的夸张变形有利于icon的饱满&
&绘制步骤可以以草图(主要解决2和4)------铺色(主要解决3)-------清晰边缘(主要解决1)
&& IOS上的APP
icon更讲究,这块咱能扯上一天!
明显区分功能数据
&信息分区的好处在于玩家想要去找同种属性的信息时不会去另外的区域去找,就像上图星际争霸2的UI一样,要控制这个单位行动你只会在最右边的选择单位行动区去找,而不会去什么地图区去找。
常用对话框之间的切换要在150毫秒到200毫秒之间
&这点切记针对的是常用UI,部分不常用的UI可以动下脑子,让他出现的时候可以有点意思。
举个例子吧,FF系列(最终幻想)里玩家对于查看自己信息,改变装备等属性菜单的切换都很快一定是在150毫秒到200毫秒之间&
但是进入战斗时的切换会稍微慢点,一般是一种较为动感的动画,1是要加载场景
2这种切换明显将RPG探索部分和战斗部分区分开。3是为进入战斗的感觉做一个铺垫,(呵呵,更不要说进入boss战前总得有一到两段长到爆的动画做铺垫)&
按钮的注意事项:
按钮的制作应当明显,让玩家能感觉到这个东西是能点击的。
部分按钮我们会期待玩家去点击,比如付费按钮(暗笑)这种按钮我们尽量要做的诱惑性强一些& 1.质感
3.动画特效
对于质感我要讲一下水晶按钮:
&对于上图和下图的对比你会更想去点那个按钮呢?
答案当然是上图了
上图的质感会让你联想到诱惑的美食:
人的食欲被质感无形中调动了起来,所以水晶按钮更具有诱惑你想去点的冲动。
而且按钮我们一定要做的是能按下去的感觉而不是平面的一张纸呦亲~
所以在按钮一般会做的有体积一些。
按钮色彩的选择:
这点主要还是要和游戏的整体风格搭调:(暗黑三被选中的按钮就用了红色,未选中的用了无色相,因为人家游戏UI整体的基调就是红黑两色,给你隐性的传达岩浆,地狱,恶魔等感觉。咋又拿暗黑三说事啊~
度娘下吧)
这里提到一点,我们注意以下两种按钮色彩给你传达的情感:
绿色相对于红色更能让人联想到前进的感觉,所以,像类似于next之类的前进感觉的按钮可以设置为绿色,而不会设置为红色。原理各位想想红绿灯就知道了。色彩在这里起到串联作用。
来吧,吐槽下图吧。
大部分游戏要有可让玩家反悔的选项,避免误操作给玩家带来的不便啊~
还有啊,返回键啊,取消键啊 什么的都是可容错属性啊~
&游戏UI风格要和游戏中的内容一致。
星际争霸的3个种族分别做了3种UI,每个种族的特征都在UI上有所体现
人族的UI采用的视觉元素为直线切割,给人硬朗的感觉,而且现代工业也是采用了这种切割,一些元素会用到人族原画上的元素。(此图请对比机枪和UI
上的元素)
星际争霸神族的配色采用黄色和蓝色的配色,高贵未来,神秘,采用的线条为曲线切割,带有未来流线感。
虫族的UI设计中采用暗棕色,有畸变生长的元素。
&&&&下图为我们以前做的忍者类再早前的版本,此版本的UI我可以说不丑还算简洁,但是问题在于他并不像个热血的忍者类游戏。感觉更像个冷冷的应用类游戏,并不能让玩家感觉到一进来就能想象成火影忍者得世界(好吧我承认是要山寨哪路多了)。
下图是后来这个忍者类游戏的版本,我们可以看到在UI的配色上有了主次,以及引入了一些忍者世界的一些视觉元素,比如展示框的边角处也用了手里剑等元素,UI底板用了木头的纹理,但是UI感觉有些像应用程序类的UI。UI传达出的信息有些正式,不够活泼。
下图是接下来再次进行修改后的这个游戏的UI界面,
在每个UI的展示上用了各种方法,比如上面的拉面店的UI我们把UI设计成类似于拉面菜单的样子,武器店用了类似于铁锁以及硬朗的外框等能让人联想到铁匠铺的元素,当然这些元素要符合第一个G点啦~
&主界面场景
武器店和拉面店
在文件大小允许的情况下我们可以在弹窗上适当的做些花样,使游戏更加活泼,记住前提是文件大小允许(问我怎么知道文件大小允许不允许?问程序去~)
再者,信息呈现的位置也要保持一致性。
同级菜单的部分按钮请保持位置一致,让玩家养成习惯。
重中之重啊& 先确定方向,再进行美化&
开始设计时一定要是画的是草稿啊亲,千万别画成成品啊,要不改动成本太大了。
这和我们做设计时是一样的,一定要先有样稿!
&美化的前提一定是不能让游戏卡&&这里一定要和程序策划沟通好!&
不得随意改变玩家习惯操作,这样会造成玩家难于上手
比如HP一般是绿色MP一般是蓝色
WASD的方向操作,E或者F为使用
美版PS3叉子键是确认
圆圈键是取消
叉子键是取消
圆圈是确认、
这需要很多游戏经验,所以,多玩游戏是必要条件。
可扩充功能边框的设计要点:1.重复性的简单背景,千万别把背景设计的过于花哨从而导致扩充功能时抓瞎。
2.功能区分层
dota2 这个区域在改变屏幕尺寸时会有遮盖!但不会对信息产生影响
在有游戏画面的界面中尽量使UI没有特别的重心,最好做到无形入化。
视觉元素的用法时要拿捏适度,不能因为视觉元素过多而影响游戏的体验,也不能因为没有视觉元素而降低游戏整体的传达。
下图为老版本的那个忍者游戏(因为游戏还没正式发布,所以我先不提真名,请谅解)&
在UI上有很大的缺陷
以上是我的一些经验,其实在UI这块还有很多细节,而我本人的能力有限,也只能先写这么多,大家多多包涵,有问题请直接指出或补充,互相学习。
&&&&&&&最后我再废话一点:游戏美术在团队中的作用其实是很大的这取决于我们的能力,这个能力绝对不止是在绘画上追求极致。&&
进入这行先试问自己真的喜欢游戏吗?还是只是喜欢绘画?这是不同的两条路,我并没说前者比后者牛逼,绝对没有,后者牛逼的照样屌!(啥破措辞啊)只是我选择的是前者,所以~走下去吧~~少年他气呦~~
TA的最新馆藏[转]&虽然这个话题感觉很大,也有点空,虎哥还是要来念叨念叨,尽量的讲的详细点,通俗易懂,学习方法总归是有的。
常常会听到这么一些忠告“多看 多想 多做”,这个我也很赞同,也是我经常会告诉新手的。
在我还是新人的时候,我更想得到 咋看 咋想 咋做的方法,那么我就凭自己10多年的设计经验,讲解给大家听,希望能帮助到一部分迷茫的人。
插图来自mixpanel团队
你有没有发现一个问题,每天都在看各种设计作品,真到自己做的时候,一下子全都忘记了,脑子短路傻逼了。之前看到那么多好的设计作品也都白看了,人家的还是人家的,跟你半毛钱的关系也没有。有没有这种感觉~?
所以今天要讲的是个人的一些经验,希望看过这篇文章的同学,看完之后有种豁然开朗的感受,找到学习方法或是解开多年心结。
强烈建议大家先准备一个小本子
问:干什么用了?
答:记录你每天学会的知识点。也可以理解为学习日记。
看到了什么好设计画一画。
想到了什么好点子,写一写。
做会了什么或是想要学点什么,都记录下来。
保证每天学会5个知识点,一个月就是5*30=150,一年就是12*150=1800(保守的算法,不要纠结一个月是31天还是30天)
UI设计要学的真的太多了,胆小懒惰 勿入,这是个坑~!~
问:5个知识点?我不知道要学什么?
答:你现在缺什么,你想学什么,工作中要用到的,或是找工作的时候,用人单位写的招聘要求,你看看你都有哪些不会的,这些都是可以学习的知识点和学习的方向。小到一像素的投影,一像素的高光,,这些都是要学习的知识点。
具体一点来说的话:
(这个弄清楚了,也是一个进步)
IOS的图标是多大的,我做多少像素的圆角了?
字体是做多大了?有没有想规范了?
按钮要做多大了才好点击了?
各个栏目的高度,间距又是多大比较合适了?
图层样式怎么用?
这些你都知道怎么搭配好看吗?(这些就够你研究很久了吧)
当然还有很多疑问,很多很多知识点,多看看上面这3篇文章。我这里就不说了。
之前开玩笑说,到新手区住上半年就什么都会了。半年的时间是有点长,但是要学的知识确实有这么多。每天都来学的话,半年还不一定你能学会了。所以要讲究方法。
要学什么,这个还是要从自己的实际情况出发,学以致用,是我们一直牢记在心的真理。
很多新人什么都想学,什么PS AI Flash Dreamweaver
,这么多你要到什么时候才是个头啊,Tiger做了10年设计了,都不敢说这些都精通。对于新人,还是老老实实的把Photoshop学扎实了再说吧。其它的再根据需要,一点点的积累。
量变达到质变的道理,相信大家都明白。但是坚持半年的话,你做的到吗?如果你觉得你可以,请到下面留言,我会监督你的~!。
(题外话)说到坚持半年,我真的做到了。学ui网上线后的半年时间里,一步一步,慢慢的积累起来,每天我都更新几篇好文章,自己先看一篇,觉得很不错就转载过来,也会心血来潮自己写上几篇。因为我相信“越努力,越幸运”。
现在的规模,来之不易,心血和汗水。在这里感谢大家的支持!让我们一起在阳光下奔跑,想想有点小激动~!!~
那么半年时间下来,你的小本子是不是都写的密密麻麻了。没事拿出来翻翻看,以后拿给比你还新的新人看,这是哥(姐)当年学习的时候积累的心得,密密麻麻的记录成长的过程,瞬间吓尿小学弟学妹。这是多么自豪的一件事。有没有·!!~
你可以这么记录(打个比方)
今天发现了一个很好的UI学习教程站
(这个也算是一个知识点,不要小看这个,改变你的命运,给你启发,也许就在这么不经意之间)
我今天知道了什么是传说中的布尔运算,看到一篇基础的教程《》,也认识了作者 金多多同学,我很开心。
群里的大神 Dbear教我图层样式高级混合,我收获很多,学会了镂空字的做法,哈哈
在上厕所的时候想明白了投影的做法,3个图层,先画一个圆,高斯模糊,复制2个,一个比一个小,降低透明度。
我发现一个经典的个人展示页面的版式,我要给画下来,下次如果需要的话,我就能马上用上这个版式设计。
今天看了老狼的教程学会了形状也能羽化,还有就是路径转形状的方法,好有用~!
我只是列举了几个例子,具体怎么记录,你自己随意,你记录的越详细越好,这是你自己的成长的过程。晒晒我几年前用过的的小本本~~!
很随意的记录了一些想法,和一些图形,虽然画的难看之极,只要我自己记得是什么就好~!
当然有人想问这个本子哪里有卖的,我是在好几年前在家乐福超市里买的,不过我在淘宝搜索了一下,也有很多卖的
咋看设计(如何找灵感)
这个怎么看设计,也就是培养审美的能力,首先你要知道什么好看,什么不好看。当你排斥那些不好看的设计的时候,你的品味就自然上升了。
再就是要知道去什么网站上看设计作品。看到不错的设计要采集下来。
这里主要说说如何找灵感,当你接到一个设计任务的时候,该如何去快速的执行,快速找到灵感。平时的素材采集和分类至关重要。在看看我的整理。
我的素材库,分的比较细,东西很多200多G素材。我可以在1分钟内快速的找到想要的。之前有人问我要素材库,其实这东西给你,你也不会用,不是你亲手整理的,你根本找不到放在什么文件夹里。
当然我也有苦衷,因为早期我没有规划好,导致现在资源太多,想仔细分类都难了,所以我强烈建议,趁你的素材库还不多的时候,一定要好好想想如何归类的问题。
设计师的素材资源库,就是你的财富,只有自己整理出来的才有价值。关键是你要记得东西放在哪里了,不要用的时候找不到了~!
我在这里重点推荐一篇我之前写过的一篇文章。也是我每次寻找灵感会去的地方,请点下面的图进去看看。记住这个放在
导航—&经验
咋想(如何去思考)
主要是分析你觉得好的设计作品:
是配色上吸引了你?
为什么这2个颜色搭配起来这么舒服了,我要赶紧截屏到PS里吸取它的颜色看看,整理到一个色彩搭配素材库里,下次我也这么干。
还是版式设计吸引眼球?
哇塞,这个圆形碉堡了,想法太好了。膜拜啊~!~赶紧保存下来
某一句广告语言打动了你,让你记忆犹新?
看看人家的广告语多好,下次要记得说服公司的策划人员给点有个性的能打动人心的标题文案。
细节处理的很有新意吗?
我擦,这个按钮的高光做的太好了,这是怎么做到的啊,我要好好研究下。找几个人讨论下,到群里问问大家。
背景烘托的很有档次吗?
这飘落的绿叶和花瓣是怎么做的,是用的素材还是自己画的,这素材哪里有,我去找找看。
字体变形,字体排版上很牛逼?
太美妙了,想法太好了,图形切割的也很有美感,bia ji 赶紧收藏了。
为什么排版上看着很舒服了?
我要好好看看,肯定有规律可循,颜色,间距,构图,字体,能想到的都想想
大腿都拍紫了也说不上来,就是感觉好~!
我的大腿啊~都青了!555
然后在换位思考一下,如果让你来,你会如何设计了,它的设计手法和细节的处理,你会不会?创意想法上有没有给你带来些什么灵感了~
咋做(如何去设计或是练习)
项目中锻炼是最快的提升的方法
临摹一些优秀的界面或是图标
参加一些比赛
如果你还是不知道怎么做,那就跟着大家一起做作业吧~!
有问题先自行搜索解决方法,实在搞不定了就问,如果是通过自己努力找到解决答案的话,会牢记在心,一辈子都不会忘记,学的会非常的扎实。
帮助别人解答问题,也是一个快速提高的方法,既帮助了他人,也让自己的知识累积的更加稳固。
最后希望大家在看完本站上任意一篇文章的时候,积极的在下面留言,说说你的感受,或是写下你的疑惑。我相信路过的人看到了也会帮你解答的。
大家互帮互助,从评论开始吧。希望大家都能参与进来,一些探讨,互相点评作业,会挑毛病也是一种学习的方法,说明你看的到问题所在。
当然有人给你的作业找出了错误或是建议,你应该很高兴,只有发现了自己的问题或是不足,才会提高,最怕的就是不知道自己的东西哪里有问题。
希望看过这篇文章的同学都能有所收获,我这一天的时间也花的值得。
作者:Tiger(虎哥)
谁的青春不迷茫?谁的职业路程更清晰?虎哥团队帮你来解答咨询②群 :
文章来源:
转载请注明: &
学UI就上学UI网!越努力,越幸运!
“学UI网 ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!
【特色推荐】
海量APP截图,让你灵感爆发!国内最好的APP截图站。
“” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?
【学UI网 原创文章 投稿邮箱:,也可以找各个群的管理】
你可能喜欢的:游戏UI设计师就业前景分析,游戏UI设计师怎么样?
游戏UI设计师就业前景分析,游戏UI设计师怎么样?
游戏UI设计师就业前景分析,游戏UI设计师怎么样?
浏览次数:900
浏览次数:395
浏览次数:685
浏览次数:633
浏览次数:678
如果你对以下课程意犹未尽,,查看全部课程
HTML5全栈开发
HTML5最新课程
156 人在学
c#编程概述
C#快速入门
简单又好玩
120 人在学
没有账号?
s后重新发送
已有账号?
已有账号?
验证码确认
话题标题:
400-877-8190
登录后反馈}

我要回帖

更多关于 ui设计是不是网页设计 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信