游戏UI设计师的段位思考

“腾讯游戏学院”授权发布

作者简介：李莉，腾讯互娱NBA产品中心UI设计师，拥有8年游戏UI设计经验，参与了《NBA2KOL》 、《王牌NBA》 、《NBA2KOL2》等产品的设计研发工作。

交互设计简介

交互设计概念：

• 以人的需求为导向
• 让产品与用户建立某种关系
• 理解用户的期望
• 降低使用门槛
• 让产品更易用
  

交互设计的影响：

• 用户对产品的印象，同时也会影响用户对品牌的看法。
• 好的交互设计会给市场带来增值、会提高用户对品牌的忠诚度、会促进销量。
• 给公司业务带来良性循环。
  

交互在产品流程中的定位

一个产品是怎么诞生的呢？从方到圆都有一个过程。


交互设计(UX)和UI设计主要是体现在需求设计和需求开发阶段。

交互设计师(UX)和UI设计师是设计思维与设计技能领域的共同协作。这个概念界限上比较模糊。这里我再来画个图，来说明下这二者的关系。


UI：User Interface 用户界面

UI设计师，会更侧重用户界面的设计，用户模型、需求分析等等一般不用参与，等交互设计师把这些工作都搞定了，完成了一个设计原型之后，UI设计师再对页面的细节进行设计和优化，并且制定界面规则，所以UI设计师的工作会更偏向视觉。所以现在一般所说的UI设计师，也是指GUI设计师，就是图形界面设计师。

UE or UX： User Experience 用户体验

用户在使用产品过程中的主观感受。包括行为、情感、成就、品牌影响等方面。一个好的用户体验，不仅要有好的效果展示，还要符合用户的习惯。

Google对交互设计职位的描述

交互设计就是把复杂的任务简单化，让世界各地的用户觉得你的设计直观、可用、易用。为了达到这个目标，在整个设计中都要与设计师、调研员、工程师、产品经理进行很好的协作。每个阶段都要预测用户需求，给团队提建议，最终保证产品让用户眼前一亮。

• 会UI的交互, 产品原型会更加规范和美观。
• 会交互的UI，具体设计的时候就会更加关注用户需求和用户体验。
  

总结：交互设计UX是用户对产品的主观感受。界面设计UI是产品中使用的视觉元素是什么，放在哪里，如何工作。

视觉交互的段位思考

现在UI设计师需要掌握的技能很多，比如插画、C4D、动效、界面设计、交互，甚至还有产品和运营，这样反而无法聚焦。 最后梳理了想法，总结了UI设计师的3个阶段。


1.交互的第一阶段，就是排版。

这是手机游戏《王牌NBA》的球探系统：


视觉设计第一版


初拿到策划的交互线框图，是单纯的把策划需要的内容进行了简单的美术排版和美化，起初会觉得策划交互图是定了的东西，都是经过反复思考的，美术要做的就是把内容排好版，但只知道排版，你的工作很快就会遇到瓶颈。

总结：在设计的初级阶段，拿到交互原型后，转化成整齐美观的界面。如果有一定的项目经验会更好。了解各个平台的特性和设计规范，多练习设计思维，基本上就是把策划给的线框稿简单排版，把规范内的按钮组件换掉等。

2.交互的第二阶段，找出策划文档有问题的地方。


仔细阅读交互文档后会多出很多不同的观点，在这个过程中需要把自己带入情景，当自己是个用户，不断的自问和追问策划的交互方案，发现问题，分解问题然后解决问题。

重新思考策划的交互方案：

进入界面后因为没有标题很难一眼发现进入的是哪个界面。

内容重复的信息很多，拥有和消耗这类描述出现2次，可以精简一点。如果不能再精简，就通过设计让它看上去再简单一点。

ICON是可以点击的，什么会对需要点击的目标进行干扰。

返回按钮的位置很尴尬，不是一个通用的位置。

视觉设计第二版


设计看上去稍微整体了一些，优化了标题头和返回按钮的位置。

在手机游戏中，系统比较多，为了减轻用户的学习成本，好多设计需要做到通用性 。这是为什么呢？之前看过一本书叫做《慢思考》，这本书介绍的是大脑在超载时代的思考学。其中讲到大脑分为三种脑：

慢而成熟的思考脑。思考脑的运转速度很慢，它需要持续的投入注意力，保持专注，所以要消耗很多能量，容易感觉疲劳。思考脑一次只能处理一件事，所以它的工作机制有点类似串行处理。

快而原始的反射脑。它的速度很快，处理问题完全是自发的，无意识的。常常被称作是刺激驱动系统。这套脑系统能够同时处理多个输入信号，它消耗的能量不多，而且快的像闪电。因为它工作时会找捷径，包括先天的和后天的。

时刻等待空闲的储存脑，为思考脑产生的想法服务的配备。思考脑的信息的分类存储。特点是要在休息时才能工作，比如睡眠，出门休闲等。保存方式是以联想为主。研究表明，长者需要想起一件事情，不是记忆力衰退，而是数据库庞大，检索时间长。思考脑和存储脑互为平衡，一个工作时，一个休息。所以阶段性的休息很重要。

好多按钮和功能要做到通用性是利用反射脑的特点，因为可以减轻用户的负担，让用户快速的解决问题，把更多的精力投入到需要思考的事情中。回到调整后的界面，对重复的内容进行了弱化，让视线更集中于中间需要点击的ICON按钮，但是也只是细化了设计，调整了视觉上的主次关系，还是缺少些感觉。

总结：在设计的中级阶段，尽可能的超越原型，从产品逻辑和用户体验进行梳理，设计出视觉大气成熟、易用的界面。有了一定的项目基础，汇总已有设计的优缺点和设计规律。一些特定的界面和常用的功能设计，需要了解功能背后的技术知识和产品策略。掌握更多的信息对于做出正确的设计决策和扩展眼界非常有帮助。总结的方法一定要运用到自己的设计中去，实践很重要。

3.交互的第三阶段，除了会梳理逻辑和使用流程，还要有Sense。

视觉设计第三版


继续优化美术设计，之前的版本过于严肃，设计没有趣味点。设计上利用不规则的的形状，丰富的色彩，来刺激玩家。

球探角色从一个爷们换成了一个妹子，探索的内容进行了拓展。之前的需求比较单一，不能满足玩家多样化的需求，所以在交互上支持了左右滑动，这样可以展示更多内容，让玩家有更多选择。

重复的信息和程序讨论后进行了优化。去掉重复描述，用ICON代替了文字，数字表现：/前面是消耗，/后面是余额。在余额不足时候字体显示红色，提示玩家。

单一的背景改为了3D动态背景，强了商业化需要的氛围。满足运营需求，丰富抽奖类型和产出需求等。

如果仅仅靠逻辑，很容易把一些不该去掉的东西给去掉了。逻辑正确保证了用户在使用过程中不产生困惑，能顺利完成任务。但是否能给用户留下好的印象，就是一些逻辑之外的东西了。关注用户体验和情感，能帮助你超脱策划文档本身，直接去思考问题的本质。

总结：在设计的高级阶段，需要超越需求。拿到需求从产品的运营策划角度去宏观把控，抓住用户的痛点、爽点，整个产品的需求是不是流畅统一，最终能满足用户的期望和目标。

了解了产品设计的过程，发现每个过程都是和用户相关的，不可以主观臆断。交互设计的初衷就是解决用户的问题。

在这个创新的年代，视觉UI不仅要做好美化界面的风格，让用户有新鲜的视觉体验，还要了解产品在产出过程中的关键节点，与策划和程序做好配合，产出设计新颖，又爽快体验的UI设计。服务好用户，让用户在体验产品时感觉到舒适。

经验分享

平时要注重记录笔记，不论是体验的总结，还是项目的总结或者概念收集。从生活到工作再到爱好，这会帮助我们有更多的思考，更多的进步。总结成笔记能够很好地避免你看完或者做完一件事情后，直接忘了过程结果。让思考过程留下印记，每一次回顾都会有不同的收获。

建立自己的素材库：交互模板控件有千千万万，要做好项目分类。在工作实践过程中归纳提取，形成自己的一套交互模板，能够在很大程度上提升自己的工作效率。设计的过程中注意交互规范的使用，能提高工作效率，确保产品交互设计的一致性，节约资源，体现整体性的思考。

这里有几个偏向视觉交互的网站分享给大家：

1. https://www.uplabs.com/

一个很好地为设计师打造的资源推荐社区，上面汇集了很多前端设计作品，还有大量的android和iOS UI这样的资源。

2. http://collectui.com/

可以在制作APP的时候快速找到资源参考。左侧列表栏做了很好的分类。

3. https://www.siteinspire.com/

灵感匮乏的时候，可以浏览。

4. https://onepagelove.com/

这个网站汇集了很多优秀单页，也有很多模板和资源，有20多种基于行业的分类。

5. https://resourcecards.com/

这个网站提供优秀且丰富的各种资源，可以说是设计师网址导航。