引导界面图标好大_游戏里那些图标和界面，原来是这么设计出来的？

UI设计最硬核的思维 就是功能

微信现在在做一种全面连接的功能，而游戏需要实现的是人机互动的功能。

实现并完善功能，是互联网、游戏、网站、渴望UI人才的根本原因。

如果说有电脑的世界是一片很大的面，那么可视化的操作，都是UI设计师需要负责的点。

UI设计并不只是单纯的把一张图，一段话打印到一张纸上，而应该是经过UI设计师本身深思熟虑后的呈现。

UI设计更多的是需要去思考，思考每一个元素，对功能的影响，让这些点在脑海中不断的组合，然后运作起来，在运作中体验整个过程的流畅性。如果有哪个环节不行，还得把它们打散，再重组，直至达成一个心中完美的环。

然后，才进行到把它们呈现出来的步骤。

---

从整体出发 围绕功能点的UI设计

这是给剑网三做过的一个每周日常的界面。这个界面，拥有很多的功能入口，初次拿到策划的UE需求，经历了一段时间的讨论和修改，把功能集中的界面拆分成几块，分步调整。

需要注意的点:

1.保证通用性
节省资源量，缓解游戏整体安装包的大小，节约用地面积是我们每个UI设计师惜墨如金的品质。 2.宣传指引
每天推荐玩家的日常活动，我们采取放大版面和字体来引导和方便玩家快速理解。 3.可视化
UI把很多文案内容转化成图像，这样一眼打开界面，玩家不需要很长时间的拖拽、下拉操作，就可以找到自己需要的功能。 4.一键操作
我们除了配图，更要对按钮有统一的部署和位置的编排，每个按钮对接的界面功能不同，表现形式和大小位置都要根据这个界面入口的功能去设计。 5.美观
这才是最难的点，大量的信息、按钮、内容，如何用交互的逻辑去把它们展示出来，并且方便使用，除了反复讨论、测试、反馈、修改...更需要坚持不断的学习。

这个界面制作的主要功能，就是日常任务内容的集中展示面板，玩家需要一眼就明了自己。需要完成的日常有哪些，为的是得到最终的奖励和经验。

实际运用中，玩家需要来到这样的一个地方做日常：

如果我们只是像一张海报一样，做给玩家看，那就是下面这种效果：

然而， 最后呈现的效果是这样：

为什么要这样设计？

有以下几点原因：

1.根据这个入口想表达的功能，类似一张名片的设计，醒目。
2.有剑网3清透，玉一样纯朴高级的质感。
3.用不同心理暗示的颜色去做区分，引导玩家。
4.并且对每个任务加上了注释的小标签。
5.点到为止。（要预留扩展性的空间）

分步骤梳理、突出主要功能，并且视觉优化这个功能。

在这样一种逻辑思维下，最终界面以图文结合的方式，以卡片的选择方式布局，满足最终功能。

如果说，界面是所有功能的集大成，是功能集合的面。

那么图标，就是单独功能的集中视觉传达，ui设计里的点。

任何一个游戏里的技能、物品、武器图标，都是带有自身功能的，设计做成可以传达给玩家的视觉图标，从图标自身出发，去引导使用操作。这些点，汇聚起来是一条完整的逻辑思路，可以帮助引导，玩家按照一定的规则达成目标。

比如，一套可以升级的挂件，图标虽然是同一个物品，但是质感、造型、色彩上，会有越来越华丽，给玩家带入一种升级的概念，这种概念串联起来，就是装备的升级功能。

由点到线，每套装备图标都会依照这样的标准进行制作，来满足功能。

带有扩展升级功能的图标（色彩升级 造型升级）

自己做过的一套技能图标示意：

武当、土黄色剑、八卦道家门派、施法

根据不同门派特色去思考功能设计，每个不一样的图标是战斗系统的功能入口展示，这个图标，可以运用到多个系统中，比如，主界面战斗、技能学习、 技能升级。这些模块都会放置这样一个技能图素。

那么它们每个图标的辨识度 整套图标的统一性以及与特效动作的配合，都需要在设计初期被考虑到。

天王、橘红色、战士、刀、马术攻击

由点到面，一个技能图标就是一个战斗系统的功能入口。

在对文案有细致的分析后，结合游戏风格和门派特色绘制出来适合的技能图标。并且，适配方形框（一般展示用界面）和圆型框（战斗界面多为圆形按钮）两种状态。

峨眉、女性门派、柔美、水系法术攻击

用按钮和文字框以及背景气氛图来制作红包领取的界面，这几个功能点串联起来就是引导玩家，领取礼品的功能点。

充满礼包的图片，并不是随意制作，结合领取框用红色喜庆的调子来，突出奖品的丰富性，心理和视觉暗示喜庆丰富的气氛，引导玩家的操作。

而时常会出现在游戏中，一些华丽的外表和不同的造型并且珍贵稀有的图标则是为了收集功能服务。

举例，剑侠世界手游中的秘籍图标，装备后会提升各种状态，也并不容易获取，那么它的视觉引导要求区别于普通图标，展示区域也会跟着放大，拥有更丰富的细节，去吸引玩家注意力，在复杂华丽的外表下，是有收集功能做支撑的。

UI设计服务于功能，即使图标这样小小的一个点，也需要承载整个游戏所赋予的各种功能需求，牵一发而动全身，对于设计师而言，做好每个点都不是一件轻松而简单的事情。

不良好的BUFF，给战斗带来紧张气氛 提醒玩家状态（为战斗功能服务）：

更多的例子，其实都可以按照这个思路去分析一下，每个设计表现所蕴含的意义。

有点到面，从一个图标，一个界面去细细分析。

游戏设计包罗万象
你怎么去传达给玩家你的心意？
你只能逐步去引导用户操作
这大概就是UI设计师的隐忍吧
明明想把字调整到大海报一样100号大小
却要在小小的角落里48个像素格子
去说自己想说的话
互联网的世界，在你看不到的地方
有这样的一群设计师
为你点亮一盏灯
那盏灯
是一个按钮
是一个界面
是一段文字
是一个UI设计师
最简单和最质朴的心愿
希望，服务到大家
照亮你人生一段需要陪伴的路

原文发布于西山居美术中心公众号，可点击查看原文：UI设计