英魂之刃口袋版UI设计流程分享
这篇文章把UI设计大致的工作流程梳理一遍，主要了解游戏设计过程中，交互的重要性。
首先自我介绍下，80后从小就喜欢玩游戏，看动漫，游戏从黑白俄罗斯方块开始，到今天手游满街都经历了。02年开始自学FLASH，04年进入设计公司，从事网页设计，平面，软件APP,动画等设计相关工作，直到08年进入网龙公司，开始设计网页游戏，目前在网龙公司，负者英魂之刃主UI设计，项目初期至今5年了。今天想和大家分享下，游戏UI设计经验；希望大家可以看的懂，很少写，望多多包含！
项目背景
英魂之刃是由网龙公司开发，由腾讯公司独家代理的全球首款微端类DOTA对战网游，改编的手机端英魂之刃。
UI设计流程
上图从左到右就UI设计流程，由策划提出需求-交互设计-再到UI，一步步直到最后程序完成。
以我的了解，很多公司不设专门的交互设计师，而由策划完成相关工作。在我的团队里，初期也没有交互设计师，主要交互是由UI这边主要负责。
我认为设计师在工作中需要清楚了解设计的目的，尤其是你做的不是大众化产品，不能以个人认知、很强的主题性风格来确定目标，比如主界面设计，界面需要什么样的形式(主城形式)(平台形式)？不同的形式会产生是干扰的效果还是更好的体验感？按钮要多大才合适？在这种产品的UI设计时，设计师需要从头参与，而且到了设计环节时，设计师基本上已经心里有数了。
在视觉设计开始之前，界面的的交互策划与设计是很重要的前置步骤，对最终的用户体验有很大的影响。
初期主风格讨论
游戏初期与策划，项目负责人讨论游戏主界面以什么样的形式来设计，初期大家是想以DOTA传奇的方式设计游戏主界面，又希望在主界面上可以有最新英雄推送展示，根据需求，我提出了几个方案：
1. 3D主城（早期主流游戏，通过与NPC对话，接受对应的任务，进行战斗体验，）在单机游戏到网游戏传奇，也有长期的用户体验，证实了这样的方式玩家可以接受
2. 2D主城（在手机上这种方式的游戏进期比较多）在PC上，早期的网页游戏或FLASH小游戏都有类似的做法，也有长期的用户体验，证实了这样的方式玩家可以接受
3. 平台主界面（早期的对站平台，如浩方平台）英雄联盟就以(浩方平台+游戏元素，设计出独立的游戏对战平台）英雄联盟已这样的设计形式，也在市场上玩家也得到了认可。英雄联盟也不是最早的，只是这款游戏比较多人知道。
各平台的优点
1. 图1.3D主城:它向我们展示了游戏角色设计，游戏场景设计，玩家可以直观的了解游戏风格，优点：游戏带入感强，缺点是需要找到对应的NPC，接受任务，（这里缺点是指，时间上没有直接点击来的快速）（缺点当玩家同时在线人数多时，机器配的差的朋友，也许会很卡，同时多人在线出线卡顿等不好的效果）。
2. 图3.2D主城：十分有趣的设计方式展示。优点：游戏带入感强，少了3D主城寻找NPC接任务的过程，可直接快速找到入口，进入游戏战斗。（要说缺点的话，就是不可以直接快速找到对应的入口）
3. 图3.平台界面：可在屏幕上快速找到入口，体验游戏。（缺点少了游戏带入感）
讨论结果
取舍，最终决定以第三个方案设计，（突出推送英雄，导航清晰，以平台式搭建，浩方平台）
游戏设计
初期确定界面布局分布，然后在确定主色调，之后就可以开始设计风格
上面的图是完成后的效果图
游戏功能：上图从1到5，重要程度来分，（需求游戏主界面，以推送英雄为主，）
1. 游戏英雄占满整屏，作为主视觉；
2. 玩家手拿着手机，左右两边上下滑动与点击，大拇指是最舒适的感觉，这里把主功能入在屏幕右手边；
3. 至于导航为什么放下面，（从PC开始，很多早期游戏如：暗黑破坏神2，魔兽世界等RPG游戏，大多数技能，背包，等等功能放在屏幕下方）（大家可以想想把金币放到屏幕下方，大家会不会觉得怪怪的，一些习惯我们不需要去创新）再说界面上也没有更好的地方摆放了，功能较多；
4. 人物信息，与金币等信息，放在左上，（这些从街机游戏开始，就是放在左上)
5. 排行榜上下滑动，这里没想太多，很多游戏都这样放，也没有更好的地方就放到这里。
完成以上的分析后，界面布局就也定下来了，之后就是界面风格设计了。
题外话
怎么做交互是对的？
只要了解一个事物为什么而来，在去分析它是否合理，这里我的经验是找到游戏的原点，在针对在市场上的效果，来判断游戏交互设计是否合理，如果习惯已经养成，在合理的条件下，不需要去挑战。
这里打个比方，键盘上的按键分布，用户都是需要学习成本，一旦用户习惯了，我们需要去改变按键的分布，那用户学习成本就会增加，这样是不合理的，要是你的创意可以得到更好的体验，也有足够的实力让市场接受，那可以去尝试创新。
风格设计
英魂之刃在PC上已经运营有一段时间了，为了让英魂之刃的玩家对英魂手游不会产生陌生感，这里颜色上还是采用了英魂之刃的蓝色系。（由于手机很多玩家，把屏幕亮度调的比较暗，所以手游上的色调，会比PC亮）
题外话
这里说说PC这里，PC这边是比较早期设计的交互，由于玩家已经习惯了交互体验，在后期改版上，交互上没有做太大的改动，主要改变了模板（当然要做大的改动，需要最少一年到二年时间，各方面考虑周全，再预热，要是直接改动，玩家又要新的学习成本，这里会导致玩家不习惯（小部分功能，优化到是可以））
模板设计
在主风格确定下来后，设计二级界面，
图1.头部导航模板：游戏标题放在顶部，很好理解玩家现在所在的位置，以下所有的内容，都属于这个分类，（左上返回，大多数游戏都这样，所有软件系统都左上）
图2.二级分页：二级分类设计左边，主要考虑手指操作习惯；
图3.三级分页
图4.内容区域内
图5与图6
这里说下，在这次设计上，把模块边上的颜色提亮，是为了区明显区分二级分页与内容区域的区别，为了方便后期出现，各种界面可能性，（左测导航要是没有区别开，后期信息多时，界面就会主次不分）
基础弹框设计
弹出框，（所有游戏网站等等，交互上没有什么特殊的，只要考虑按钮大小，手指点击会不会合理就行）
按钮分为主次，主要的按钮用亮色系，次要的就用比主铵钮弱就行
图2.普通弹出框
图3.特殊奖励弹出框
活动弹框设计
弹出活动框设计，考虑手机界面小，尽量让内容区域大些。在这里设计过程，确定主题元素设计，所占用的区域与风格后，把留下来的空间都做为内容区域。
图1，标题分页（与二级界面统一，标题放在顶部）
图2.二级分页（与二级界面统一）
图3，内容区域（与二级界面统一）
图4基础框架
图5，主题（加入活动元素）
设计时预留后期活动边框，设计元素时会占用的区域，确定活动设计元素会占用的区域。
以此内推，这里游戏基本模板都已经出来了。
设计注意事项
凡是设计一个新的界面，设计师尽量去理解，为什么要这么设计？他们为什么由来？只有了解了，界面才不会因为交互没做好，导致反复修改，增加工作量，没有过多的时间设计细节等等。因为所有设计配色等细节都是大量时间设计出来的。改多了，游戏进度就会影响，导致最后顾虑不了细节，必须在规定时间内提交。
游戏需要统一性，只有在所有界面统一后，才可以针对主次去优化。
游戏界面
资源
需求游戏需要控制包的大小，UI的资源需要控制，自适应大小。
英魂之刃PC网页版当初结合了网页设计，与程序讨论一些效果，在网页上实现不了，但在游戏上大量效果用样式写出来。经过过几年的配合，这样的设计方式在英魂项目已经成熟。
这里游戏采用大量的色块，与线条设计，尽量以程序代码可以实现，除非非要用到图片资源，尽量在设计过程，去掉部分材质等。
图片资源问题
如一像素的边，在自适应后，在不同平台用统一资源，会拉伸，变糊等，这里是可以用程序写出一像素的线，程序可以对线做出左中右，上中下等渐变效果。在扁平的风格上，大多可以用程序写样式，类似，CSS那样，资源三宫，九宫拼接等，不一定要图片资源。要是一些卡通风格游戏，就没法这样设计了，大多数卡通风格，采用了拟物设计，UI都是有材质风格感强的界面，那些大面积都有不同的渐变细节，所以那些游戏没法这样，可以到时可以，（但没那些必要，因为程序写的界面也有缺点，缺点就是改风格时，程序工作量大）（要是图片资源，部分可以快速替换）
资源这块，我下次会专门，针对资源这块，做一个分享
程序合对界面
大多数公司，程序配出来的界面都会与示意图，有差异，如间距，拉伸，因为设计细节精确到像素，所以程序这块要是没有跟进好，游戏效果会大打折扣，这些还是需要耐心。
到这里游戏开发差不多，就可以开始测试了。
优化设计
游戏优化也可以说，游戏界面设计正式的设计。
所有界面功能，都以模板快速套用开发。但大多界面只能做到有功能，不出彩也没有什么创意。所以需要针对游戏的主要界面，进行设计，这里花费的时间较多。（一个创意，需要的元素，或者需要动态效果，光效等等）
如所有游戏图标类型统一设计，考虑造型代表的意义，图标的质感。 另外常见主要界面，匹配界面，房间界面，选人界面，战斗界面，结算界面。从主到次，细节一步步优化下去。时间周期根据配备人员而定。
优化内容，我会找个小图标，给大家分享。
总结
为什么UI出现风格改动？
1.策划，交互，有没有考虑好导致最终体验不好，界面调整导致修改量大，界面没能做到完整，导致重新设计。
2.游戏看久了，不好看，做的太丑改，为什么太丑？技术不行，时间不够等等原因。。。
为什么后期内容太多？
前期没有考虑清楚，导致后期修改
为什么游戏上线不够高大上？
优化做了吗？为什么没做？（时间不够）（为什么修改太多，前期没有考虑好）
以上所有问题都有可能出现，我们可以做的只是把可能出现的问题，尽量排除。这里前期交互上要多考虑。
游戏为什么讨论？
讨论为了更好的做好交互，这能保证少犯错误
游戏为什么这么设计？
在设计过程中需要所有细节，围绕着主体去设计，布局合理突出主体。多参考竞品了解为什么他们会这么做？怎么由来？对还是错？
模板怎么设计？
多设计几张界面，在统一去看是否出现重复，保证风格统一模板一致，要选择取舍。当设计好一个界面，发现在设计下一个模板时有更好的方法，或统一时需要取舍。
界面为什么要优化
在前期所有的铺垫，就是为了最后的设计。在所有基础都稳固后，针对界面进行设计，一个创意可能需要，原画，3D，光效等团队配合完成，这里要是在前期基础不稳时，花了大量的时间去设计，最后只会徒劳。
游戏需要团队，个人能力有限，想做也是空想，没有团队的配合，再好的创意也实现不了。
如果条件允许，其实优化与模板可以一起设计，这样开发时间会缩短，成本上会加大。
我整理了一份游戏的开发标准选择，把游戏分几个级别，每一级别的流程等，等下次有空在放出来。
如果没有交互设计师，交互是策划来做，还是UI更合适？
1.策划有个玩法，也找到了同一类型的游戏功能，做为参考，UI设计师根据需求把视觉效果设计出来。
2.当UI看到需求后，在了解游戏功能后，根据视觉布局设计出不一样的布局，但同样可以表达这个效果，再与策划讨论最终方案。
最后不管团队是否有交互设计师，UI都需要全程把控拿出来多讨论（不管怎样，所有的建议都是参考，合理的分析建议，最终一致通过的都是对的）
这可以保证少错。避免不必要的修改。
