wpf 使子ui元素可视区域不超过父元素_对游戏UI设计的一点思考

UI决定了一个游戏的初体验，甚至决定了玩家的初始留存，甚至可以说决定了一个游戏的品质，虽然看起来是表象的，却是直指游戏核心的。简单讲，玩家认可一款游戏永远都是造型场景好，剧情好，画质棒；但是玩家骂一款游戏也很简单粗暴，平衡差，数值辣鸡。这说明一个什么问题呢？绝大部分玩家，还是偏感受型的，只要UI方面做得好，玩家就会觉得你至少是个有品质的游戏。但是数值相对是动态的，如果你的某个短期数值伤害了玩家，他就要骂你，很少有人真正的去从整体来分析一个游戏的数值和系统。因为玩家相对还是外行，玩一款游戏只是为了寻找乐趣，体验快感。

几年前，我们使用着难用的网站，玩着蹩脚的游戏，当时也还没有用户体验的概念，我们甚至觉得难用才是合理的，高大上的科技产品只有足够聪明才玩的会（现在当然会想这是什么逻辑……）。但是有没有想过，这是由很多客观原因决定的，比如当时的互联网环境，没有几款游戏可以玩，当时的电脑手机普及率低，当时人们的碎片时间没有像现在这样被大规模的互联网游戏和APP挤占。我们之所以可以忍受那么糟糕的设计，是因为我们别无选择，我们需要那个功能，即使再难用，我们也可以深入学习，直到我们把目的达到。但是现在不一样了，我们有各种各样好玩的设备，人们对于游戏体验的要求也相应的提高。这样的情况下，如果我们依然让玩家使用难看难用的UI设计，无疑是自掘坟墓了……

关于UI设计的一些原则

UI就是界面设计，很多人觉得界面设计只是界面的样式、美观程度，但其实这么理解是很片面的，对于游戏UI而言，好不好用（交互）和好不好看（视觉）都需要考虑周全。目前国内大的游戏公司里面分工会比较细，一般是有交互设计和视觉设计两个角色，共同完成UI的工作。小公司情况复杂，就不多说了。对于UI，笔者在这里总结了5个基本设计原则：

1、视觉流的引导

视觉流，就是我们在查看单个界面时的视觉流程。暂且先不考虑手势的热区范围，单从眼动轨迹来看，眼睛对于物体的关注本身是有一定的视觉规律的，比如最简单的从上到下从左到右的规律。一般而言，我们在设计页面的时候会尽量考虑人眼的视觉规律，比如最重要的功能不要放在视觉盲区范围内。但是在这里笔者要强调的是，眼睛的视觉流是可以通过对界面控件合理的层级罗列，恰当的布局来进行有效引导的。下图为《万象物语》的主界面，除了我们常见的把按钮沿四周摆放以外，它还特别的把旅途按钮摆到了右侧中间位置，另外还加了个闪动的特效，玩家的眼睛会不自觉的被吸引到这个特殊的按钮上，并且会忍不住想要点击进去看看。这个设计很好的把玩家拉到策划最想要玩家进入的游戏功能。

《万象物语》

2、相似相近原则

相似相近，就是“风格统一，同类相近”。

风格统一，要保证同一类图标外形上的一致，即使按钮因为字体长短而变得长短不一，但是至少从外形看起来是同一类的。如果按钮从外形上看不出来是同一类，可以参考《恋与制作人》（下文简称：恋与）主页面右侧图标群的做法，在每一个图标的文字下方增加同样的灰色渐变半透底图，这种由部分到整体的做法很好的保证了这些功能图标的一致性。如果你的游戏走的是3D真实风格，那么游戏里就一定不能出现一个二次元妹子，可以考虑增加异次元元素，但是一定要经过美术的专业处理，让整个游戏的画风不至于那么奇怪。《奇迹暖暖》里面有很多不同的服装风格，有古风的，现代的，西方的，中式的，日式的等等等等，但是做过统一化处理之后，一点违和感都没有。

同类相近，同一类型控件的位置要离的近一些，即使没有图案的框选，也能知道它们属于同一类按钮。《恋与》的主界面上的功能也很多，但并不让人觉得杂乱无章，同类功能的按钮都摆在一起，不同类型的按钮之间也没有出现相互干扰。最忌讳没有规律的乱摆控件，会造成玩家找不到可点击控件的困惑，还会对功能产生迷茫，不知道该干什么。

《恋与制作人》

3、色彩偏向和色彩层次

色彩偏向，在界面设计中，都应该有一个色彩的偏向，也就是主色调。在任何一个画面中，色彩都不宜过多，不同色系最好不要超过3种。这就好像穿衣服一样，除非是高级设计师，拥有很好的配色驾驭能力，很少犯错那种，一般人拍在身上的颜色越多越花哨，整个档次就越low。分享一个小技巧：在游戏界面中，可以使用黄金分割率来做出划分，主色调约占60%，辅助色占30%，突出色占10%。

色彩层次，在UI制作中，因为精确度要求很高，色彩的亮度和面积有个反比应用关系，这很重要，因为它直接决定了UI原色的主次关系问题。越亮的、纯度越高的颜色在使用面积上慎之又慎，否则就会造成喧宾夺主以及对玩家视觉上的折磨，为了达到视觉上的等同效应，亮度、冷暖不同的颜色也要在面积上进行微调。背景色经常表现为无彩色（黑、白、灰），或者低饱和度的色彩。总的来说，面积越小的颜色要越亮越纯，面积越大颜色就要增加灰度或者降低亮度，色彩的层次出来了整个界面的信息传递就会很舒服。《王者荣耀》的界面中色彩的层次感很明确，主色调是灰度很高的蓝色，辅助色分别是紫色青色黄色等，从色相上就把功能模块做出了划分，并且可点击区域的颜色有很高的亮度，这样的设计让玩家很容易识别功能。

《王者荣耀》

4、字体节奏

很多人会觉得游戏中画面最重要，字体是信息传递的辅助角色，这就错了，内容的可读性永远是排在首位的。我们在看图标的时候会发现很多图标的可辨识度并不是很高，但是一旦添加了字体，马上就可以理解功能。好的字体设计，形状和大小都会直接影响到玩家接收信息的速度。为什么说是字体节奏？同一个页面中，使用同一字号，同一类型的字体，会让信息的传达变得冗杂而费力。但是如果给字体在信息重要度的基础上增加点变化，马上节奏感就出来了，信息的层级也一目了然。所以根据不同的功能场景，使用不同的字体样式也是极为重要的。下图为《梦幻家园》里面的一个活动页面的字体设计，文字的节奏感做得很好，不同的功能文字大小不同，设计也有区分，甚至有数字的地方又会有加粗的强调。关于字体设计，笔者给一个小小的技巧：比如可以都是4的倍数，你的界面里面会出现12px，16px，20px，24px几种字号的字体。（说到这里，忍不住要吐槽一下，真的不是说给字体勾个边，加个斜体就是设计！）

《梦幻家园》

5、目标导向原则（这里只讲逻辑，没图）

目标导向，在游戏中，每一个界面都是具有相应目标功能的，玩法也好养成也罢，界面展示的信息必须是这个功能需要让玩家获的信息。要明确自己的目的，尽量不要为了目的以外的原因影响你的设计。除了这个界面功能最原始的目的，你每想要加一个东西的时候都要反复的问自己：加了额外的东西有什么好处？会不会引发某些问题？如果不加会有什么坏处？多个维度好好想想，优秀的设计都经得起反复推敲。比如，充值界面的左侧为什么一定要加个白无常？玩家会在充值的时候抽个空来欣赏你的立绘吗？另外同一张立绘在多个界面中反复使用，你是有多缺乏设计想法，一定要在每个页面中都加一张立绘来体现你有进行过设计。这样做的后果是：不仅降低了立绘本身的价值，也减慢了游戏资源的加载速度，并且让界面变得复杂不易识别，造成玩家的审美疲劳。

功能可视化，寸土寸金的界面里面，为什么要有几个完全相同的东西存在，既占地方又影响玩家理解。如果表示不同的功能，那么就应该在图标上也作出区分。举个我自己遇到的小例子，游戏的生产界面，所有物品摆在那里，同一个图案的图标在同一个页面里面摆了三次，并且没有相关图案和文字说明的引导，会让玩家很迷茫，完全不知道要怎么操作，其实我一个“所谓”的策划自己也搞了好久才明白是个什么操作。最后的调优方案是：增加指向箭头，对原料进行框选，对目标物品的显示进行排版上的调整。总结反思：策划制作好了游戏逻辑，不能把逻辑直接摆到玩家面前，这里面需要有一个功能可视化的过程。玩家并不关心你的生产过程是什么，他也并不能理解界面里面同一个图案的3个图标，为什么一个是配方，一个是图样，另一个是物品。你只需要告诉玩家我点击目标物品，凑够了原料和金钱，点制作能不能得到就可以了。

单一页面精简功能，同一个页面上可实现的功能最好不要超过三个，功能太多，玩家到了这个页面潜意识会特别烦躁。因为原本我到了一个页面得到想要的功能就可以了，你这样设计，让我对目标功能的需求产生了游离，于是我要想一下到底要做什么，也就是说你成功调动了玩家的选择困难症。

策划和美术的沟通

主要是提需求，美术最怕听到的一句话就是：没有要求，随便画。这看似策划对美术放低了要求，觉得我都不限制你了你还画不出来？但其实是策划把自己的工作量转交给了美术，因为策划每提出一份需求，都是有自己的使用场景的，这个使用场景不跟美术表达到位，美术是很难随便画一个出来的，因为很容易会发生策划不满意最后成品的车祸现场。比如我想要个塔的大背景图，那么这是什么样的塔，在哪里用，需要突出哪些部分，偏西式、中式还是日式，颜色是鲜艳一些还是沉稳一些，需要画几层？这些都是要事先考虑的。或者你可以给出一些关键词，收集相应的图片素材，让美术更好具象化，理解你的美术需求，使界面设计更加符合你的预期。

分享个我自己工作中的小例子，游戏内需要增加树洞生命力排行榜的三个图形称号，根据游戏的世界观，对树洞生命力提取相关关键词：树洞、生命力、历史名树、日本，最后找到了日本历史上有名的盆景，从中选出了三个名字：羽衣（800年）、吾妻松籁（200年）、小真弓（80年）。之后找到每种盆景相关的图片作为形状参考，又根据游戏内已有色彩找了好看的图片作为配色参考，最后提需求。