手游如何做UI设计？

小篱

　　GameRes游资网授权发布 文 / 铭匠游戏的李达

　　之前一直做互动设计，在UI上有一些积累。

　　转战手游后发现，有着标准、互动方式、用户行为等等与常规大屏UI设计的不同，但是在设计流程，思考方式上是一样的。

　　以目前项目中一个界面为例(未完成版本)来说一下我们的方法和思路，像点击范围，纹路优先级，字号等大家都知道的就不说了。

　　步骤1.了解功能需求

　　位置：屏幕下方不超过160像素高度

　　数量：4个单位

　　功能：每个单位包括头像显示，能量需求数量和种类

　　(1-3个，两种)，必杀按钮。

　　状态：头像选中状态，未选中状态；必杀可用状态，不可用状态。

　　以上听起来是不是非常的复杂？用一个图示来概括就是这样的

　　步骤2. 接下来我们会画一些草图，做些图形延展

　　这一个步骤主要是对图形，筐体做的一些草图讨论，草图大概画了20多张，这个阶段会比较随意，基本想到什么都会画下来，目的是记录和想法发散。

　　步骤3. 由于我们的游戏是中式美术风格，首先选用的是一个棱型结构，出了一版效果草图如下。

　　问题出来了，棱型结构在能量球的摆放上很别扭，棱型在空间上有很多浪费，并且没有可点击的感觉。

　　步骤4.于是我们尝试了圆形结构，圆形相比之下有吸引点击的小优势。

　　接下来面临1个单位有2个可点击范围的问题，我们思考了一下是切割一个圆形单位，还是把两个单位组合成在一起。

　　于是我们对图形做了一系列的拆解组合草图，重点尝试了一下太极的组合方法。

　　步骤5. 在这一步发现圆形比较能解决我们的问题，区域也节约了很多，但是在用户操作上还是很繁琐，选择人物和发动必杀会很麻烦，点击位置也小，不会很舒服。

　　于是我们尝试加入点击以外的操作方式-拖动。当满足必杀条件时，把头像拖到战场上就可以发动。这样在视觉上就简单多了，只有一个头像和能量球来体现。

　　以上的画面就简洁多了，但是如何让用户去拖动按钮来发动必杀，这个仅在用户指引上教肯定是不够的。如果在可发动必杀的头像上加一个箭头，又会破坏画面上的协调，显得很闹腾。

　　所以，我们再给加入一个条件，当满足必杀条件时，按住头像就出现箭头提示，如下图

　　这就是我们在游戏战斗画面里下方头像部分UI设计的过程

　　在功能布局都没问题了以后，还会再有一次美化和风格统一的步骤，最终UI在游戏测试后再更新吧。

　　上面说了一大堆，结论很简单，在满足功能需求后作减法，手机游戏就那么点地儿，寸土寸金，减法作的好，就解决了一大半，可以给色彩和视觉平衡更大的发挥空间。

ali403

参与过这个游戏2次评测  UI除了美术风格算是有特色，哪里谈的上交互

w2sft

个人觉的这美术有点难看。

《英雄对决》

GOODLUCK！

良心话，文章里示例的UI真丑~~

我个人的UI经验很直接---花钱去找真正的大神来做，多简单的事。。。

鞋带

马克下，回家慢慢看