独立游戏不重视UI设计的后果有多灾难？
作者：kaveil饼
链接：独立游戏不重视UI设计的后果有多灾难？
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
一句话概括：很严重，轻则STEAM上吃差评，重则游戏无法进行，玩家申请退款。
答案说完了，下面是一些UI设计上的要点，如果小伙伴们有自己做独立游戏，且不知道UI怎么设计的，可以参考一下，希望能对大家有所帮助。
我之前是做页游和微信小游戏的，公司对UI这一块比许多单机都要严格得多。
毕竟单机可以通过游戏性来赢得客户，小游戏就纯靠用户冲动消费，UI做不好，导致用户充值麻烦，那可就是重大开发事故了。
不止绩效，年终奖都得扣光。
也因此，一个合格的UI，对我们来说至少得满足以下几点：
- 便捷性
- 易用性
- 包容性
- 美观性
重要程度从上至下，便捷性优先级是最高的，美观度是最次的，所有的条件都满足后，才会考虑美观度。
恰恰绝大多数独立游戏的UI，甚至连美观度都做不到，更别提其他的了。
便捷性
每个设计师对于UI都有自己不同的看法，对于我们而言，便捷性的核心理念就是：
以用户为中心，优先贴合用户习惯、认知以及使用场景。
作为一个UI设计师，你必须预判到用户每一次的操作，把用户的核心需求作为第一优先，然后通过引导把用户错误行为扭转到正确的场合里。
当用户遇到困境时，需要在显眼位置提出引导或者解决方案。
这一点做得最好的独立游戏是《朝露：境界旅程》，或者它的UI设计得不是很美观，但在用户便捷性上，即便是育碧、2k这种大厂都不一定能比得上。
这游戏的内容，乍一眼看上去玩家都得疯掉，战斗里面乱七八糟的东西太多了。
又是什么姿态啦，又有技能啦，又有心得啦，三个大系统，好不容易完事了，道具又是一个全新的机制……
加上各种各样的BUFF、流派。
放别的游戏公司里，上面的功能单独拎出一个就能做一款3A大作，我丝毫没有夸张。
这么多机制融合在一款游戏里面，绝对是灾难性的。
但是它的UI引导就做得非常强。
有哪里不懂没关系，鼠标指上去，跟个点读机一样，哪里不会点哪里。
一连串的UI图标，记不住没关系，上面有快捷键，鼠标指上去有名称显示。一次不记得，鼠标按多两次我也知道图书是T，地图是M了。
人物头像上有三个条，按理说玩家应该不难猜到谁对应谁，绿色血条、蓝色魔法值，黄色集中值呗。
那是你玩的游戏多了。
第一次接触游戏的玩家怎么办？好办，我们也加上说明。
看起来很傻不是吗？
谁不知道什么叫生命值？
技术都得骂你给他找事……但就是这么个功能引导，说不定就能给你挽回一个流失的玩家。
同样的，界面下方呼出菜单里面，所有可使用的物品，都会在当前菜单里面弹出说明。
能用Toast的就不用Tips，能用Tips的就不用弹出层……
说到这里我们稍微科普下一些UI常用术语：
- 页面 Page
这是一个完整的页面，玩家可以通过路由索引到其他页面。
比如加载界面、开始菜单、游戏界面等。
每一个都是一个独立的页面，玩家跳转页面后会终止前一个页面的进程。
- 叠加层 / 全屏弹出层 / 暂停菜单 Overlay
例如黑猴里面的这个界面，就是叠加层，它在游戏主场景里面弹出，暂时阻断（也可以设计成不阻断）游戏进程，方便玩家进行一些操作。
绝大多数游戏都会把指引做成帮助文档，塞到叠加层里面，让玩家可以在里面查看。
但很显然，这会让玩家多了很多操作步骤。
能一次操作完成的，就不要让玩家分两次甚至多次操作去做。这是UI设计中，必须牢记的一点。
当然阻断自然有阻断的作用，我不是说黑猴这个不好，毕竟动作游戏，你不阻断进程，玩家一边看说明一边又要注意怪物来偷袭，这就得不偿失了。
具体条件还得具体分析不是吗？
但是一些独立游戏甚至连个BUFF是干啥的都不说，那就真的太折磨玩家了。
比如我非常喜欢的一款游戏《地府有点忙》，他们就喜欢搞这种幺蛾子，你说他设计没考虑到玩家不懂BUFF有啥用嘛，那不是，他们专门开了个档案馆，供玩家查询词条。
你要说他贴心吧，他为了设计上的拟真度，把档案馆做成了一个功能建筑，丢到主城里。
合着我游戏里就只能凭记忆呗？
要不要先来一场词条功能考试，及格了才能让玩家进行游戏？
跟B站新手考试那样。
- 弹出层 Modal
跟全屏弹出层差不多，也会阻断游戏，一般用来处理一些必要的提示或者选项。
例如打造时提示是否消耗材料打造的二次确认框，或者是获得重要物品时需要玩家确认的弹窗。
比如黑猴里第一次打到广智后，解锁变身功能时候弹出的简要说明。
这点也很重要，许多独立游戏就没有制作这方面的引导，功能解锁就解锁了，玩家玩几把就熟了，我省点事……
呵呵。
- 弹出提示 / 指引 Tips
就是鼠标悬停后弹出的那个东西，不一定就是提示，包括查看装备时，弹出的装备说明；查看技能时弹出的技能以及关联BUFF这类都算。
这也是最能够提升玩家体验的一个功能。
把所有关联的Tips做好，能减轻玩家记忆负担和操作负担。
《杀戮尖塔》的玩家应该很有体会，查看卡牌的时候，会在旁边列出所有这张卡牌提到词条的Tips，方便玩家直观的理解整个卡牌作用。
如果《杀戮尖塔》的词条说明也让玩家去百科里面查……
那乐子可就大了。
- 轻提示 Toast
跟前面说到的Tips差不多，区别在于Tips是玩家主动触发， Toast是被动触发。
我上面框起来的这些都算是Toast，是在不影响玩家游戏的同时，根据条件触发的提示。
这也很重要，很多独立游戏获得装备就是提示一个获得的物品名称，或者干脆不提示，打完BOSS你自己进背包里面看。
因为做这个比较麻烦，别看UI画几笔，技术那边排版排到死去活来，有时候技术就会偷懒，这种时候我们需要跟技术耐心沟通，告诉他们这些提示的重要性。
这里还有一个很容易出设计BUG的地方，就是同时获得多个物品的时候怎么办？
因为是轻提示，不能像《崩坏：星穹铁道》那样弹个Modal。
物品一多的时候，挨个弹会很影响玩家体验，放在一起一堆弹嘛又容易漏掉信息，这个就要设计师提前预见了。
剩下的消息条、气泡层这些独游用的较少，就先不说了，感兴趣的小伙伴可以去找对应的UI设计课程看看。
易用性
易用性和便捷性差不多，很多新手设计师容易搞混这两者之间的区别。
便捷性的要求是贴合用户习惯，易用性则是从操作方式，辨识度，交互反馈等多方面入手，尽可能降低用户理解成本，避免过于繁琐的操作步骤，实现清晰明了的操作反馈。
比如《幻想三国志5》的这个改动就很好，虽然是一款回合制游戏，却使用了动作类游戏的快捷键操作，代替传统回合制的指令盘。
这种方式玩家无论吃药或者是放技能，都可以直接使用快捷键选取，把原本的鼠标移动-点击菜单-选择技能-移动到敌人身上-确认释放的繁琐步骤。缩减成鼠标移动到敌人身上-按下快捷键-确认释放这个简略步骤。
极大减轻了玩家操作负担。
当然这种操作方式会影响到游戏玩法，需要和策划沟通确认。但我们也可以在不改变传统玩法的情况下，做出一些辅助变动。
例如使用快捷键呼出菜单，直接吸附在鼠标位置敌人身上，把原先的选取菜单才去点击敌人过程颠倒过了，这样同样可以省略一些步骤。
辨识度则是直接影响到用户体验的一个重要环节。
同样是背包管理自走棋玩法，为什么《背包乱斗：福西法的宝藏》一目了然，而《背包闯江湖》则显得乱七八糟呢？
因为《背包闯江湖》在UI设计上的问题很大。
《背包闯江湖》的所有物品相对于格子而言，大小不一，有些超出格子，有些又小得离谱。图像跟背包混在一起，导致玩家一眼看上去重心在哪都不知道。
反观《背包乱斗：福西法的宝藏》，背包装备上之后，原本的图像变成半透明，额外增加了一个格子的画面，让每一个方格清楚可辨。
物品图像有黑色描边，可以清楚的跟背包和其他图像区分开。
物品拿起的时候增加一个格子虚影，像俄罗斯方块那样，玩家一眼就能辨别出这是个什么形状的物品。背包闯江湖也有这个设计，但他很偷懒的使用了图像外发光功能。
小伙伴们可以想想，是格子容易辨识，还是一个不规则的外发光容易辨识呢？
这就是UI设计上的辨识度，细节决定成败。
《苏丹的游戏》UI好看吗？不可否认他们的UI做得非常精美，足可见画师功底。
可一个好的画师并不一定就是好的UI设计师，画师讲究画面构图，UI除了构图外，还得考虑用户能不能一眼就能找出自己想要的东西在哪。
如果不行。
那就砍画面，这点没得商量。
回到苏丹的游戏来，他们问题就在于太花了，一眼看上去文字信息被图像干扰的几乎看不到。
你设计师是视力好，但你置近视的玩家，色弱的玩家于何地？
这些精美的底图已经对文字信息造成影响，作为一个以文字为主的游戏，更不应该这么设计。
《杀死影子》的UI就完全不一样，你一眼看上去就简单几笔，一点设计感都没有。
年代感呢？侦探风呢？为什么全是扁平化？
但是人家足够清晰一目了然。
虽然也有许多乱七八糟的线索便签，但是叠加的时候加了投影；
直接使用纯黑色背景，避免图像干扰；
文字太小看不到没关系，鼠标滚轮可以缩放。
这样的UI你可以说没有太明显的设计风格，但毫无疑问他就是能融入到游戏里去。
……
交互反馈也是UI上很重要的一个环节。
用户点击了鼠标，是否要有一个点击的反馈？万一游戏卡了呢？万一鼠标坏了呢？
《吸血鬼幸存者》的UI是不是特别简陋？但简陋不代表人家设计差。他们所有可交互的地方都有多个状态。
能点击的地方，鼠标放上去会变色，选中之后会有选中框，甚至包括滚动条都是有选中和长按状态的。
而不能点击的地方鼠标放上去没有任何反馈。
这样用户可以快速的分辨出哪里是可点击区域，哪里是不可点击区域，哪里是我卡了鼠标点上去没反应。
包容性
兼顾不同人群，适配各类屏幕，考虑色弱色盲，做到易读易懂。
这就是包容性。
适配，在独立游戏里是最难做到的，毕竟游戏屏幕除了主流的16:9，还有16:10的笔记本电脑，21:9的宽屏，32:9的超宽带鱼屏……
比如上面这张《亰都幻都 -樱花幻舞-》的大黑边截图，就是螃蟹叔
7680*2160分辨率带鱼屏下效果，大厂游戏都会在这上面翻车。
独游开发者上哪去搞那么多屏幕？
这还算好的，16:10屏幕是真要命，比如我玩《封神演义之黄飞虎归周》的时候，最左边的英雄就是无法使用道具的。
因为他们做了一个鼠标hover效果，悬停在角色身上时，角色会放大并后退，这样方便玩家识别操作的是哪名角色，也容易让玩家点选到吸附在角色身上的功能按钮。
设计思路是没问题的。
问题出在屏幕适配上，就没考虑16:10的屏幕本来人就显示不完全了，再往后退就完全没法点击到。
所以UI设计的时候，必须提前预见这一块问题，即便程序没法做适配，自己没有设备去测试适配，也要从源头上避免这种现象出现。
放在手机上也一样，需要留出刘海屏的出血边。
这是一张微信小游戏的截图，可以看到红框位置空了一大截没有内容，为什么？
因为要防苹果手机的刘海呀。
蓝框位置是微信的悬浮按钮，可以看到「福利待领取」这个提示直接把游戏里的体力槽给盖了。但是没办法，谁叫人家系统层级高呢！
好在PC游戏没有手机游戏那么麻烦，没有这么多奇形怪状的屏幕。
……
除了适配性，我们还要考虑到不同层次的用户。
- 不是每一个用户都有耐心；
- 不是每一个用户都对这类型的游戏很熟悉；
- 不是每一个用户都很聪明……
你不能默认用户看到一个爆炸图标就联想到暴击。
你也不能默认用户会按ESC键退出界面。
早期的《大江湖之苍龙与白鸟》也是一个经典反例：他们的UI非常精美，美术上是完全没问题的。
但是他们早期的设计是玩家在野外不能存档，所以当玩家习惯性的按ESC键，想要打开角色菜单……然后傻眼了。
没反应啊。
游戏卡了还是咋回事？
因为他们ESC绑定的是这么个菜单，我这还是后来改动后的，好了很多。但依然找不到哪里可以打开角色菜单，因为这个菜单在屏幕右上角，点击那个图书才是。
如果你玩了黑猴，再回来玩《大江湖之苍龙与白鸟》，就会发现哪哪都别扭。
所以说我们设计上就要把用户当傻子看待，尽可能耐心的、不怕麻烦的为他们设计好一切指引。
美观性
美观性就不用说了，这是许多UI设计师都在追求的东西。
什么样的UI才叫好看？
首先你得一致，视觉风格和控件样式、交互反馈、字体样式、动态效果等元素保持统一。
这里给个明显反例，《阴三国谋论》的playtest测试版本，这UI简直就是灾难性的。
字体大小不统一，大的极大，小的看都看不清。
字体样式不统一，有行书有宋体，还加了个干扰视线的描边。
图表颜色采用高饱和度……
总之就是我想找个能夸的地方都做不到。
用他们的新旧版本做了个比对，这样看上去更直观一些。特别是在小屏幕的情况下，如果文字没有明显与背景区分，那么对于用户而言，不亚于体检测视力。
……
一般来说，PC上的UI是最好设计的，因为不需要考虑不同设备的缩放，按1080p设计，2k分辨率直接×2，4k分辨率直接×4就行。
不像手机什么乱七八糟的都有。
正常情况下，假设我们是1920×1080的画布，96dpi，那么字体该用多少号合适？
- 小字13~14px；
- 中号字16px；
- 大号字20/24px；
- 特殊设计字体视情况而定。
你可以有不同的大小设计，不一定按照上面的来。
但请记住除了小字可以用到13px外，其它的字体大小都是双数，这样缩放和技术做UI元素定位的时候方便一些。
字体选择上，尽量使用中黑体（思源黑体之类的中粗字形），或者中圆体。
这是一个比较万能的字体，玩家容易识别，美观度也足够，而且百搭，不管你是现代风格还是武侠游戏，都可以轻松适配。
如果需要使用到宋体或者隶书这类，也请选择中宋，选择字型笔画粗细维持一致的隶书，以免造成玩家阅读困难——如果你不想让玩家看到如下图那样的情形，最好放弃使用飘逸的行书草书。
这就是我们在字体选择上需要做出的考虑。
……
UI要学会适当做减法，不是画的时候觉得一个组件很精美，这就是一个好的UI组件。
实际上要放到全局里面去看，水墨风为什么容易脏？
这是设计师最容易踩的坑，别人用的水墨那么好看，为什么到我手上就糊成一团了？
大家是不是经常有这样的感觉，明明立绘很好看，明明水墨风很飘逸，为什么组合在一起就觉得画面乱七八糟，脏兮兮的？
因为边界模糊，所有元素糊在一起，层次不够分明。水墨风UI天生就带有这个DeBuff，加上各种斑驳墨点，飘逸的线条，直接抢了视觉效果，让玩家分不清主次。
这种时候我们就需要做减法。
把那些看起来很漂亮的设计元素去掉，让它们发挥原有的作用。
UI是绿叶，是用来衬托红花的，不是来喧宾夺主的。
我们再来看一个例子：《江湖十一》的大地图虽然一般，但它UI就很到位。
当你没有办法掌握一些高深的UI绘制技巧的时候，最直接的办法是什么？
答案就是扁平化，它拥有简单易识别的图像，以及极高的适应性，放在任何风格的游戏里都能适配上。
就像高考前语文老师教我们的作文技巧：如果你没有把握冲高分，就老老实实写议论文。议论文不求惊艳，但求稳妥，下限高，不容易翻车跑题。
UI也是一样，如果你不能驾驭风格浮夸的UI，那么就老老实实扁平化，至少能保证你UI的美观度在及格线上。
色彩搭配也是一个非常重要的课题。
很多新手喜欢直接拉色条，弄一个高饱和度的纯色或者渐变色，UI元素也尽可能的华丽。
诚然这份UI单独拎出来是很好看，但它不合群啊！我们要的不是个人英雄主义，我们要的是融入整体。
适当的场合我们就应该给它降低一些饱和度。
之前有小伙伴说我的这一套UI看起来不像是独游，更像是商业化游戏，感觉设计上很高级。
实际并没有高级到哪去，论设计元素我就是随便划拉了几个色条，并没有上面的仙侠游戏UI那么多设计感。
但是因为饱和度没那么高的缘故，玩家能够一眼识别得出哪里是主，哪里是次。
亮色和暗色看起来都在同一层次上，这就够了。
可能有小伙伴会问，我不知道饱和度要多少合适呀……
其实也挺简单，我们打开PhotoShop的拾色器，用红色线条把它分成四等分：
如图，四等分的左上角——也就是蓝色方框的区域，都是UI取色的安全范围。
这里指的是UI的主色调，特殊设计另说，比如按钮上的高光，要表现出来肯定得用高饱和度或者高亮度。
UI设计上的小技巧还有很多，全写出来估计大家也没耐心看完，我也就收着点写了。
其实只需要遵循一个原则：站在用户的角度思考，以用户为中心。
这就够了！
这里其实有一个蠢办法，你在不确定自己设计是否OK的情况下，那么不妨在设计完成后，拿给一个不玩游戏的人看。
如果连他都看懂，那你这套UI就是成功的。
有时候设计就是这么简单粗暴~