这些内容，其实本是我的学习笔记，是学习了相关知识之后对手游UI设计的一些底层的思考总结，现在整理成文章放出来。希望能跟看到的人起到一点思维的碰撞，交流一下想法。

作为有理想的手游视觉设计师，自然是要不断关注业界动态，跟上时代的步伐，一路打怪升级不断更新装备，最终成为游戏视觉设计界最能打的崽！

啊，这个素材好有感觉，先收集了！！哇塞，关注的大佬又出了新作品，非常奈斯，i了i了！！我的天~新出的那款游戏界面风格好棒！这肯定是未来几年的设计新风向！！

燃鹅，玩家群体不断演变分化，新风格新效果层出不穷，每天面对如此多的新信息和变化，弱小卑微如我们即使多么的积极上进，似乎时间永远都不够用~~

太阳底下没有新鲜事，设计也一样。很多时候，我们在提升过程中被海量新的信息冲击得无所适从，是因为我们走着走着就忘了为什么而出发，甚至一开始就没有明确出发的目的。无论是多新颖的创意、多炫酷的手法、多特别的风格，最终都应该是为界面视觉设计的目标服务的。

手游界面设计的两件事：功能交互和情感体验

游戏界面视觉设计目标到底是什么？或者说，我们在做游戏界面视觉设计的时候是在做什么？在我看来，游戏界面视觉设计就是利用人类视觉规律和人文认知，因势利导，达到传达和引导的目的。

关于用户引导这块有兴趣深入学习的童鞋可以去了解下福格行为模型的相关知识

那么归根结底，游戏界面视觉设计目标就是做好两件事情：一是完整清晰地表达功能交互信息，二是制造丰满立体的情感体验。两者互相促成，缺一不可。

游戏UI视觉设计就像带小朋友放风筝，那个小朋友就是玩家，无论在什么地方放，什么风向，放什么类型的风筝，都是为了让放风筝的小朋友开心。如果ta喜欢人多，就去广场上放，如果他喜欢自然就去郊外放（情感体验）；至于风筝的造型，当然是挑小朋友喜欢的卡通形象啦（情感体验）。除了这些，我们还要照顾小朋友能不能把这风筝放起来放得高，必要的时候搭把手给些指引（功能交互）。

第一件事：功能交互

在功能交互这一块，通常会有专门的交互设计师，但是界面视觉设计师作为把效果落地产出的一方，工作内容必然会有对画面效果与交互操作两者兼顾平衡的思考过程，这就需要界面视觉设计师对交互也得有一定程度的认知。

想起刚入行当萌新那会，把弹窗关闭按钮设计得过于优美突出，气得主美当场抽出四十米长刀。

界面基础信息在作用上可以分两类，输出以及输入。输出就是让玩家知道这界面是什么？可以做什么？内容包括各种图文信息；输入就是让玩家决定怎么做，内容包括各种选择项以及按钮。

视觉设计要做的就是弄清功能意图和交互逻辑，根据信息的重要及相关程度，对信息进行筛选分层，合理地分配视觉权重，并做好视觉引导，一些重要的信息就要用视觉手段让它更突出。最后要做到让整个版面输出信息清晰有主次，输入模块排布合理方便操作。

第二件事：情感体验

我们无论在谈论小说、影视作品还是游戏中都经常提到“代入感”一词，意指读者、观众或玩家产生一种自己代替了小说或游戏之中的人物而产生的一种身临其境的感觉。这种“代入感”正是来自我们需要制造的立体的情感体验。

人不是数据机器，玩家在玩游戏时一定是带着情感需要的。那些优秀的游戏界面是怎样满足玩家这种需要的呢？就是画面中一系列精心安排，来自各个方位但意图一致的情感暗示，共同创造了这种情感体验。

情感是一种非理性的东西，我们应该怎样面对它？怎样才能让它变得相对可控地来为我们的设计效果服务呢？要运用它的力量，就要对它有合理的认识。可以从以下三个维度上去认知：情感方向、内容元素、形式构成。

1、情感方向

既然我们需要打造一份情感体验，那就肯定有个目标的方向，情感方向是我们设计一个图的所有动作的目标方向。情感可以用关键词来概括，譬如：轻松、热血、刺激、恐怖、神秘、温暖等，通常一份完整的情感体验是由一种主情感和若干的次级情感所组成。

(图片采自网络)

2、内容元素

情感是虚的东西，想要被传递出去，就需要一些实在的东西作为表现介质，这些被用来表现情感的东西就是具体的视觉内容。那么，我们在需要表现某种情感的时候，怎么决定用什么内容呢？这里就涉及到另外一个概念——意像。

人的情感是会因为某种记忆而依附于某种物品、形状、纹理或者颜色上。这种物品、形状、纹理或者颜色，可以称之为意像。反过来说，意像就是被投射了人类情感的普通自然视觉元素。设计创作就是找到一系列合适的意像来充当内容，去勾起观众对某组情感的记忆，从而完成一次立体情感体验的打造。

譬如我们要做一个过年主题的图，可以用到的意像就有：舞狮、爆竹、对联、红包、窗花剪纸、红黄色等。圣诞主题的意像：圣诞老人、雪橇、圣诞树、袜子、冰雪、红绿白色等。恐怖主题的意像：阴暗的场景、斑驳的墙、鲜血、锐利的形状等。

意像取材必须是受众脑子里已经存在的元素，他们所能理解的元素，他们是生活环境里所能认知到的元素。需要注意的是，很多意像是有时代或者圈层局限性的。譬如：七零后的人对大哥大的感觉，那就是土豪的象征，高逼格的佐证。但零零后对着大哥大可没有这份情感。再举个例子：红白机给八零后男生的情感就是童年和欢乐，但是零零后的童年和欢乐的意像估计会是手机和ipad。红黄配色对大部分中国人来说是喜庆的颜色，但是对老外来说就未必了。

同时也有些意像是有相当程度的共通性的。比如说粉红色表达的是一种温馨格调，除了常见的表达情人节，也可以表达母亲节或者友谊之类的情感。

也就是说我们设计的时候所用的意像可以分为两类：一是核心意像，二是外延意像。

核心意像就是跟主题密切相关的文化元素，玩家看到这个意像就会想到某种情感。外延意像就是泛相关文化元素，多种风格都可以通用，只看该元素用户不会特定想到该情感，但是用在该风格里也不会让人有违和感。

3、形式构成

我们定好了情感方向和找到了足够多了的情感意像，是不是就可以做出一个足够好的视觉画面了呢？并不是。

画面不是内容的堆砌，一个画面就像一台戏，谁是主角谁是配角，应该有什么龙套，用什么舞台背景都有讲究，这种讲究的法则就是形式构成。可能有些童鞋对形式构成一脸懵，但这是个很大的话题，没法在一篇文章里非常细致地去说清楚。 在这里可以拿音乐举个例子，如果说画面里的各种意像是歌词，那形式构成就是纯音乐旋律。 内容元素是皮肉，形式构成就是骨架，不能直接看见，但一直在背后起着作用。

我一直秉承一个观点，一个设计师只有对形式构成有了理解，才算真正入了设计的大门，遗憾的是我工作多年接触到的很多设计师对此了解不多，都是在凭经验在设计。

最后再总结一下，界面视觉设计最根本的工作内容。第一，合理地运用视觉原理对界面信息进行主次分配；第二，巧妙地运用投射了感情的元素去进行氛围营造。

这两者在设计中也不是泾渭分明的，各个部分的界面信息本身也可以包装成各种意像，承载着表达情感的任务。

弄清楚了界面视觉设计的根本目标，但是怎么运用到实际设计中呢？很多时候我们看过了或者收集到非常多好的作品参考，但自己水平并没有因此而得到提高，因为我们没有把收集到的东西内化到自己的知识框架里。总结出这个框架可以有效地解决这个问题，它主要可以从两个方向发挥作用，素材收集和产出设计。

它可以作为整个界面视觉设计知识大厦的地基。有了它，当我觉得一个东西很酷的时候，就能分析它是哪些部分吸引了我，然后按照对应的分类收入自己的素材库。而当需要做设计方案的时候，不是马上把软件打开去画，而是根据这个框架，把思路理清楚。然后拿出平时积累的素材库，找到自己需要的意像，然后才是动手做。

当然，这个框架只是类似心法的东西，至于更具体的技法操作和画面效果实现，还得需要平时多学多练从而做到灵活地临场变通。兵无常势，水无常形。能因敌变化而取胜者，谓之神。愿大家能在设计中达到那个境界，共勉。