有爱的设计之旅---全民小镇交互设计总结
加入了量子工作室交互设计组的时候，正赶上红红火火的手游浪潮，回想组长让我负责的紧张不知所措，还有各位同事的热心帮助，作为一名初级设计师，很幸运能在这么多人的帮助下完成一个项目，有爱伴随整个设计过程，于是写写心得吧。
1.项目背景
2013年10月来到工作室，正好赶上工作室的第一批手游项目启动，当时命名都是全民系列手游，有全民飞机大战、全民小镇、全民精灵、欢乐西游、战争总动员等等。全民小镇是其中一款模拟经营+休闲社交类型的游戏，在当时国内还不算特别常见，玩法比较新颖。
在经过半年的艰苦研发后，在2014年4月公测上线后取得的不错的数据，之后每个月基本上出1个新版本，每个版本10个左右新的UI设计任务，其中会出1~2个新玩法和一些小的优化系统。
2.UI成员合作与分工
小镇的UI主要由交互设计师、视觉设计师和多媒体设计师共同完成，交互接过策划的需求文档进行游戏系统的交互设计，由视觉设计师出视觉稿，再由多媒体设计师在编辑器上进行UI合入，动画制作。幸运的是几位搭档都很有经验，在工作中向他们学到很多东西，大家紧密配合，高效完成设计。
3.交互的具体工作
在项目中负责的工作主要分以下几方面：
1.策划需求沟通
拿到策划的需求文档，阅读后了解了大致功能就可以去找策划同学沟通了，在沟通中需要了解的事情：1.策划希望达到的目的。2.有哪些交互上的难点需要解决3.有哪些地方因为设计的限制可以做调整。大家达到一致的预期后开始着手设计。
2.信息架构、界面流程梳理
信息架构和界面流程的梳理，主要用来统计功能数量、思考页面关系、同时也可以避免功能、页面状态的遗漏。
在刚开始实习的时候，组长和导师就对于强调整理框架与流程的重要性。但是在开始的单页面简单需求上体现的不明显，当我开始单独承接一些大的系统，有的需求文档长达70多页的时候，梳理信息框架和流程能够很快的对整个系统有一个清晰的思路。
例如下面的大航海系统中，将复杂的功能进行拆分重组之后，便可以归纳出一共需要5个大面板，每个面板下面各自还会分出一些功能和子面板。
梳理过后对各个面板的跳转流程进行整理，就可以对整个系统的使用方式有一个整体的设计思路了。
3.交互稿绘制
在交互稿的绘制阶段。主要考虑每个界面的入口、界面类型、界面布局、操作方式、反馈、状态变化、出场方式以及动画等8个方面。
入口：需要先与策划沟通功能的优先级来选择突出或隐藏，在后续迭代中，还要考虑和与原有设计的关联性，尤其在功能越来越多的情况下，将概念相近的系统进行一些合并可以防止不断加功能造成的UI臃肿。
界面类型：在绘制单个界面时，先要对界面类型进行定位，大致可以分出3种。
功能型的界面：力求玩家一眼就能看明白这个系统要做什么。通常通过界面的标题和底部的按钮文字说明这个界面的最终目的，这样玩家扫一眼便能大致了解这个界面要做的事情。倘若对理解性的评估过程中发现游戏概念不是特别好理解，就需要加入一句简单的描述文字帮助解释。在帮助玩家建立了目标后，玩家对于系统的把控感就建立起来了。
过渡界面：追求顺畅快速。玩家为了使用一个功能而进行的中间操作，例如选择道具数量、选择人物强化角色等。极致的体验是：玩家在顺利使用功能后并没有感觉到这个界面的存在，可以将它算作隐形界面去理解。如何做呢？1.一个界面只进行一个或者一类操作，如下图的选择车辆，只有1类点击车操作。2.操作步奏是符合现实逻辑的，比如我需要先选类型再选数量，而不能倒置过来，保证玩家心流不被打断。
展示界面：追求调动玩家情绪，激发玩家的情感如惊喜、愉悦、炫耀等等。在这些界面上元素、功能尽量少，图片精美并带有一定动画效果最好。
界面布局
通常会采用平面板式设计中一些组合、对齐的方法，将内容区域进行分块。通过经验来讲，手游内容区块控制在3个以内会比较合适，这样玩家的浏览次序便可以遵循从上到下、从左到右的简单顺序，更加容易读懂这个界面。超过4个区块容易造成阅读顺序的不顺畅和界面的杂乱。
在布局的视觉引导上，应当让用户视线停留在自己希望他停留的地方。
环绕式布局。游戏中常用的布局形式，即主要的场景放在屏幕中间，四周环绕UI，这里利用了视野边缘的理论，典型的现象是我们平时戴着很小的眼镜，但是却很少感觉到有眼镜框挡住了自己的视线,这是因为我们眼球中视觉的敏感程度是从中央到四周骤减的，因此，因此当我们的视觉焦点放在屏幕中央时，眼睛会感觉周围的UI是不存在的，从而增强沉浸感。如下图，玩家在体验游戏内容时，清晰观察到的只有中间那一块。
全屏界面布局：针对大的系统，游戏的主要玩法，通常会包含一些子界面，玩家会在这个系统中进行很多的操作，设计者会希望玩家沉浸其中，不会在这个从界面轻易离开。
因此，在这个布局中，尽量使用1个全屏主界面+若干弹窗子界面的形式来表示，从而给玩家清晰的从属关系和目的性，防止玩家轻易离开。
如幸福蛋界面，如果玩家在抽完扭蛋后给出了一个遮盖全屏的恭喜界面，玩家很容易认为此时自己已经跳出了系统，完成了抽幸福蛋这件事情，其实还是希望他继续抽奖的嘿嘿~所以用一个弹窗防止玩家的不经意离开。
弹窗布局：一种是大系统的子界面，功能型的界面，力求操作流畅，避免打断。另外一种是只有单一功能的小系统，比如订单、排行榜、一键完成。他们简单、有趣，如果需要体现他们的重要性，可以请视觉设计师沟通做特殊设计，让这个界面更有吸引力。
半屏布局：快速选择、切换的通道。比如选择车辆、选择好友等，与之前的界面有一定的关联性，需要同时存在在一个界面里进行对照的采用半屏布局形式。例如停车界面，我希望能看到停在哪个车位，同时希望能选车，因此半屏布局比较合适。
操作
因为不是一个重操作体验的游戏，游戏的操作方式尽量设计的简单粗暴，以点击为主，并且不断强化这个操作，避免长按、滑动等相对复杂的操作，降低游戏操作的接受门槛。
小镇出现在手游的初期，很多方式需要玩家去尝试学习，因此，采用一致的交互方式，使玩家形成习惯，当玩家形成了习惯后，就可以减少显示很多的文字解释和说明，做到化繁为简。
在游戏中将主要玩法入口统一为点击气泡，社交入口统一为点击玩家头像查看资料，并且在后续玩法中不断强化，玩家在看到气泡后，就会明白有东西可玩。看到头像时，就会了解可以点击查看资料。
状态变化、反馈与动画
主要考虑：空缺状态、一般状态、使用状态、完成状态、极限状态、错误操作状态、禁用状态的变化，在设计页面后，通过这几种状态的走查防止遗漏。
当缺少状态变化的反馈时，会考虑适当加入动画效果提升玩家的感知。如下面界面中，收菜后，获得物品的反馈不明显，于是需要加入飞蔬菜的动画来提示操作完成了。
4.关于平时积累
竞品的收集是很有必要的，平时会把一些好的游戏UI整套截图下来，并且按系统功能归纳好，在设计时便于及时研究竞品方案。有需要的同学也可以RTX我来要。
5.关于沟通
后续的工作主要以沟通跟进实现为主，这里也总结了一些沟通的方法：
小型CE：交互很多时候会受到各方面的挑战，一般都会有很长时间的讨论，当一个方案僵持不下的时候，小范围的用户测试可以帮助我们很快的做出决策。
同理心：作为交互设计师必须要具备的，在设计时考虑策划对这个系统设计的目的，视觉、动画如何展开表现，开发在实现中的成本，才能够更好的完成呈现。
设计思维的传播：这是设计师应当做好的事情，帮助其他岗位同事了解交互在工作中关心的问题，坚持的原则和方法：典型的的比如界面需要摆放的元素过多可以对一部分不重要的元素进行隐藏弱化，操作要一致玩家才容易理解等等。当项目组同事们在工作中能够考虑到设计的影响因素，大家的配合就更默契高效了。
积极的心态：因为都希望做的更好，各种撕逼在所难免，经验上争论后的结果都会比单独出方案要好，最后的结果好，那才是他好我也好。
多去了解些相关岗位的工作内容，特别是前台，可以适当的去了解一些开发引擎的功能如U3D、Cocos2D中的UI部分，这样才能预见到一些功能实现的成本，尽早沟通来确定方案。
6.未来手游交互设计的一些展望
手游的交互难点在于灵活性和考虑的因素多而复杂，可用性、美观度、动画表现、引擎限制、流程和操作对盈利的影响、玩家情绪、玩家的理解能力等等，需要在不同的维度下做权衡。目前对于设计方法的总结还需要更多的人去研究和分享呀。
经历了1年多轰轰烈烈的手游发展，公司内外的新手游在品质上都有很大的提升，尤其在U3D引擎普及后，UI动画的制作方面有了很大提升，未来可以添加更多的3D场景化UI、同时通过手机传感器如陀螺仪做一些有趣的细节，例如手机位置的改变可以造成3D UI的轻微移动来体现场景感等等。
我们在学生时期的学设计习中常常会被灌输一些诸如Less is more. Keep it simple&stupid.之类的设计原则，但是在游戏设计初期并非完全试用，一味的追求简单优雅而忽略用户对于游戏的理解能力也是不可取的。特别是这个游戏概念无法与现实社会产生联系的时候，也需要通过一些略显粗暴的文字说明来保证游戏的易用性，这需要一段时间的去培养玩家。随着手游的发展，这个现象会逐渐好转，对于那些优雅易用纯粹的界面，始终使我不懈努力的努力方向。
最后，当然要再次感谢下一起工作的同事们，一年多的时间交到了很多朋友，非常非常感谢大家对我的帮助，希望有爱能一直延续下去，也希望小镇越来越好~
加入了量子工作室交互设计组的时候，正赶上红红火火的手游浪潮，回想组长让我负责的紧张不知所措，还有各位同事的热心帮助，作为一名初级设计师，很幸运能在这么多人的帮助下完成一个项目，有爱伴随整个设计过程，于是写写心得吧。
1.项目背景
2013年10月来到工作室，正好赶上工作室的第一批手游项目启动，当时命名都是全民系列手游，有全民飞机大战、全民小镇、全民精灵、欢乐西游、战争总动员等等。全民小镇是其中一款模拟经营+休闲社交类型的游戏，在当时国内还不算特别常见，玩法比较新颖。
在经过半年的艰苦研发后，在2014年4月公测上线后取得的不错的数据，之后每个月基本上出1个新版本，每个版本10个左右新的UI设计任务，其中会出1~2个新玩法和一些小的优化系统。
2.UI成员合作与分工
小镇的UI主要由交互设计师、视觉设计师和多媒体设计师共同完成，交互接过策划的需求文档进行游戏系统的交互设计，由视觉设计师出视觉稿，再由多媒体设计师在编辑器上进行UI合入，动画制作。幸运的是几位搭档都很有经验，在工作中向他们学到很多东西，大家紧密配合，高效完成设计。
3.交互的具体工作
在项目中负责的工作主要分以下几方面：
1.策划需求沟通
拿到策划的需求文档，阅读后了解了大致功能就可以去找策划同学沟通了，在沟通中需要了解的事情：1.策划希望达到的目的。2.有哪些交互上的难点需要解决3.有哪些地方因为设计的限制可以做调整。大家达到一致的预期后开始着手设计。
2.信息架构、界面流程梳理
信息架构和界面流程的梳理，主要用来统计功能数量、思考页面关系、同时也可以避免功能、页面状态的遗漏。
在刚开始实习的时候，组长和导师就对于强调整理框架与流程的重要性。但是在开始的单页面简单需求上体现的不明显，当我开始单独承接一些大的系统，有的需求文档长达70多页的时候，梳理信息框架和流程能够很快的对整个系统有一个清晰的思路。
例如下面的大航海系统中，将复杂的功能进行拆分重组之后，便可以归纳出一共需要5个大面板，每个面板下面各自还会分出一些功能和子面板。
梳理过后对各个面板的跳转流程进行整理，就可以对整个系统的使用方式有一个整体的设计思路了。
3.交互稿绘制
在交互稿的绘制阶段。主要考虑每个界面的入口、界面类型、界面布局、操作方式、反馈、状态变化、出场方式以及动画等8个方面。
入口：需要先与策划沟通功能的优先级来选择突出或隐藏，在后续迭代中，还要考虑和与原有设计的关联性，尤其在功能越来越多的情况下，将概念相近的系统进行一些合并可以防止不断加功能造成的UI臃肿。
界面类型：在绘制单个界面时，先要对界面类型进行定位，大致可以分出3种。
功能型的界面：力求玩家一眼就能看明白这个系统要做什么。通常通过界面的标题和底部的按钮文字说明这个界面的最终目的，这样玩家扫一眼便能大致了解这个界面要做的事情。倘若对理解性的评估过程中发现游戏概念不是特别好理解，就需要加入一句简单的描述文字帮助解释。在帮助玩家建立了目标后，玩家对于系统的把控感就建立起来了。
过渡界面：追求顺畅快速。玩家为了使用一个功能而进行的中间操作，例如选择道具数量、选择人物强化角色等。极致的体验是：玩家在顺利使用功能后并没有感觉到这个界面的存在，可以将它算作隐形界面去理解。如何做呢？1.一个界面只进行一个或者一类操作，如下图的选择车辆，只有1类点击车操作。2.操作步奏是符合现实逻辑的，比如我需要先选类型再选数量，而不能倒置过来，保证玩家心流不被打断。
展示界面：追求调动玩家情绪，激发玩家的情感如惊喜、愉悦、炫耀等等。在这些界面上元素、功能尽量少，图片精美并带有一定动画效果最好。
界面布局
通常会采用平面板式设计中一些组合、对齐的方法，将内容区域进行分块。通过经验来讲，手游内容区块控制在3个以内会比较合适，这样玩家的浏览次序便可以遵循从上到下、从左到右的简单顺序，更加容易读懂这个界面。超过4个区块容易造成阅读顺序的不顺畅和界面的杂乱。
在布局的视觉引导上，应当让用户视线停留在自己希望他停留的地方。
环绕式布局。游戏中常用的布局形式，即主要的场景放在屏幕中间，四周环绕UI，这里利用了视野边缘的理论，典型的现象是我们平时戴着很小的眼镜，但是却很少感觉到有眼镜框挡住了自己的视线,这是因为我们眼球中视觉的敏感程度是从中央到四周骤减的，因此，因此当我们的视觉焦点放在屏幕中央时，眼睛会感觉周围的UI是不存在的，从而增强沉浸感。如下图，玩家在体验游戏内容时，清晰观察到的只有中间那一块。
全屏界面布局：针对大的系统，游戏的主要玩法，通常会包含一些子界面，玩家会在这个系统中进行很多的操作，设计者会希望玩家沉浸其中，不会在这个从界面轻易离开。
因此，在这个布局中，尽量使用1个全屏主界面+若干弹窗子界面的形式来表示，从而给玩家清晰的从属关系和目的性，防止玩家轻易离开。
如幸福蛋界面，如果玩家在抽完扭蛋后给出了一个遮盖全屏的恭喜界面，玩家很容易认为此时自己已经跳出了系统，完成了抽幸福蛋这件事情，其实还是希望他继续抽奖的嘿嘿~所以用一个弹窗防止玩家的不经意离开。
弹窗布局：一种是大系统的子界面，功能型的界面，力求操作流畅，避免打断。另外一种是只有单一功能的小系统，比如订单、排行榜、一键完成。他们简单、有趣，如果需要体现他们的重要性，可以请视觉设计师沟通做特殊设计，让这个界面更有吸引力。
半屏布局：快速选择、切换的通道。比如选择车辆、选择好友等，与之前的界面有一定的关联性，需要同时存在在一个界面里进行对照的采用半屏布局形式。例如停车界面，我希望能看到停在哪个车位，同时希望能选车，因此半屏布局比较合适。
操作
因为不是一个重操作体验的游戏，游戏的操作方式尽量设计的简单粗暴，以点击为主，并且不断强化这个操作，避免长按、滑动等相对复杂的操作，降低游戏操作的接受门槛。
小镇出现在手游的初期，很多方式需要玩家去尝试学习，因此，采用一致的交互方式，使玩家形成习惯，当玩家形成了习惯后，就可以减少显示很多的文字解释和说明，做到化繁为简。
在游戏中将主要玩法入口统一为点击气泡，社交入口统一为点击玩家头像查看资料，并且在后续玩法中不断强化，玩家在看到气泡后，就会明白有东西可玩。看到头像时，就会了解可以点击查看资料。
状态变化、反馈与动画
主要考虑：空缺状态、一般状态、使用状态、完成状态、极限状态、错误操作状态、禁用状态的变化，在设计页面后，通过这几种状态的走查防止遗漏。
当缺少状态变化的反馈时，会考虑适当加入动画效果提升玩家的感知。如下面界面中，收菜后，获得物品的反馈不明显，于是需要加入飞蔬菜的动画来提示操作完成了。
4.关于平时积累
竞品的收集是很有必要的，平时会把一些好的游戏UI整套截图下来，并且按系统功能归纳好，在设计时便于及时研究竞品方案。有需要的同学也可以RTX我来要。
5.关于沟通
后续的工作主要以沟通跟进实现为主，这里也总结了一些沟通的方法：
小型CE：交互很多时候会受到各方面的挑战，一般都会有很长时间的讨论，当一个方案僵持不下的时候，小范围的用户测试可以帮助我们很快的做出决策。
同理心：作为交互设计师必须要具备的，在设计时考虑策划对这个系统设计的目的，视觉、动画如何展开表现，开发在实现中的成本，才能够更好的完成呈现。
设计思维的传播：这是设计师应当做好的事情，帮助其他岗位同事了解交互在工作中关心的问题，坚持的原则和方法：典型的的比如界面需要摆放的元素过多可以对一部分不重要的元素进行隐藏弱化，操作要一致玩家才容易理解等等。当项目组同事们在工作中能够考虑到设计的影响因素，大家的配合就更默契高效了。
积极的心态：因为都希望做的更好，各种撕逼在所难免，经验上争论后的结果都会比单独出方案要好，最后的结果好，那才是他好我也好。
多去了解些相关岗位的工作内容，特别是前台，可以适当的去了解一些开发引擎的功能如U3D、Cocos2D中的UI部分，这样才能预见到一些功能实现的成本，尽早沟通来确定方案。
6.未来手游交互设计的一些展望
手游的交互难点在于灵活性和考虑的因素多而复杂，可用性、美观度、动画表现、引擎限制、流程和操作对盈利的影响、玩家情绪、玩家的理解能力等等，需要在不同的维度下做权衡。目前对于设计方法的总结还需要更多的人去研究和分享呀。
经历了1年多轰轰烈烈的手游发展，公司内外的新手游在品质上都有很大的提升，尤其在U3D引擎普及后，UI动画的制作方面有了很大提升，未来可以添加更多的3D场景化UI、同时通过手机传感器如陀螺仪做一些有趣的细节，例如手机位置的改变可以造成3D UI的轻微移动来体现场景感等等。
我们在学生时期的学设计习中常常会被灌输一些诸如Less is more. Keep it simple&stupid.之类的设计原则，但是在游戏设计初期并非完全试用，一味的追求简单优雅而忽略用户对于游戏的理解能力也是不可取的。特别是这个游戏概念无法与现实社会产生联系的时候，也需要通过一些略显粗暴的文字说明来保证游戏的易用性，这需要一段时间的去培养玩家。随着手游的发展，这个现象会逐渐好转，对于那些优雅易用纯粹的界面，始终使我不懈努力的努力方向。
最后，当然要再次感谢下一起工作的同事们，一年多的时间交到了很多朋友，非常非常感谢大家对我的帮助，希望有爱能一直延续下去，也希望小镇越来越好~