夏令营补给 02 | 如何设计一个优秀的用户界面,让玩家眼前一亮?

学习委员

2021-08-10414次浏览

0评论

5收藏

2点赞

分享

《我的世界》高校开发者夏令营进行中!为了让大家更系统地学习,除课堂知识外,学习委员还将联合发发菌,为大家投放额外的干货补给。本期为第2期。

最近有开发者问:“怎样才能让自己的模组给玩家带来更好的用户体验呢?”

学习委员悄悄告诉大家,秘诀就是——设计一个优秀的用户界面!话不多说,一起来看看怎么操作吧~

用户界面设计,又称UI设计,是对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计不仅仅需要从事美术绘画,更需要对软件使用者、使用环境和使用方法进行定位;从工作内容上来分,一般分为图形设计、交互设计和用户测试这三类。

了解了基本概念,后我们来认识一下目前最常见Minecraft UI界面设计软件吧!

MCStudio界面编辑器

是我的世界中国版单独研发,专门针对游戏内UI制作的便捷开发软件。MCStudio不仅仅包含了UI界面设计,还包括了直接导入MC后游戏内的预览测试等等,可以很好地进行实机测试和修改

总的来说,就是十分适合新手上手使用哦!(〃'▽'〃)

Photoshop

简称PS,常用于各类专业设计的软件,可以极大地帮助对UI界面的平面贴图设计

但是PS只能作为贴图辅助哦,是无法直接制作UI软件的..(。•ˇ‸ˇ•。)…

接下来我们一起来看看UI设计应该注意的3大规划注意事项吧~

一、设计要保持一致性

在实际的UI设计过程中,需要对人机交互具有一定的理解。所以我们要以玩家体验为中心,在界面设计时,应该简洁、直观,让玩家在接触玩法后,对界面上所对应的功能一目了然

二、设计准确性

在设计界面时应该尽量使用搭配一致标记、颜色等。

三、设计布局合理化

合理的布局会给玩家带来便利,玩家在玩游戏或者是浏览页面时,基本都是遵循自上而下、从左至右的习惯,所以我们在设计界面的时候,要避免功能按键排列过于分散,造成玩家鼠标或虚拟摇杆移动距离过远、过长的弊端。

学习笔记

这样的排版距离过远,容易分散视觉焦点,让人看得晕头转向。

而这样根据人体习惯来排版,在视觉上就能达到很好的交互效果

了解完UI的基础知识,现在我们就来动手制作吧~

图标制作

首先我们需要打开MCStudio中的界面模板

绘制好的贴图导入到界面编辑资源管理界面

接下来我们需要新建一个背景图片作为面板底部

现在我们获得了一个没有图片的图片图层

然后只需要把导入的图标贴图直接拖到图片层替换就可以啦!

字体制作

字体设计也是平面设计中绕不开的话题。一位优秀的UI、平面设计师必须要掌握如何进行合理的字体设计,或者是在不同的地方设计出不同的、符合需求的字体。

学习笔记

文字设计是一个有着框架规范却又设计自由的部分,它和ICON有着差不多的设计思路。大家要牢记,天马行空的设计和构思必须都要有一个基础规范的框架,在基础的规范下进行设计,就会给人杂而不乱的感觉。

一、标题文字的排版

如果你排版设计的文字不够吸引用户和玩家,或者让他们看这字体的设计觉得很累,没有精神看下去,那就需要观察是不是文字之间的排版有问题,段落与段落间是否太过于跳跃

一般来说,你的眼睛会首先看到大标题,然后就自然地回到左边开始阅读~

二、文字的断节

文字的断节设计具有一定的两面性,如果用得好可以体现硬朗和线条感,如果用不好就是崩塌式的失败。只有合适的字体合适的裂变效果才可以达到恰当的视觉感受。 

三、图形化

有时候过于图形化的设计,会让文字本身的辨识度降低,但适当的图形设计就会让整体的辨识度提升很大的空间。

合理的图形化和融合是最难的,开发者们要多多尝试才能把握好其中的度哦!

由于游戏中的文字承载着许多功能,我们不仅需要考虑玩家在玩游戏的时候是否能看清楚这些文字,还要思考这些图标的用法和这些按钮的实用性,也就是说,在游戏中,我们需要充分考虑文字的可阅读性~

参照上面的概念,我们来对游戏内的文字效果进行一个简单的排版

文字排版中我们可以看到,大小合适的logo文字,正好作为整个菜单的主要部分

将所有匹配信息都放在了中间的部分,同时给到分段均匀的设计。

然后我们看到最后部分,下意识的从左往右阅读就可以直接看到道具商店

所有的字体设计中,只有logo是单独排版,其余的都是简洁且统一的效果,这样就不会给玩家杂乱的视觉感受~

UI界面制作

理解了图标和文字的基本规范和运用之后,我们要开始学习今天的重点啦——界面排版设计!

UI界面是整体布局的重中之重,这和玩家的实际游戏时长息息相关。

所以在制作UI界面时,一定要与制作材质包一样,先定型风格,再定制颜色基调(确定好了之后,再开始绘制就一定不会大范围的选错颜色了。)

对于UI界面的排版规格,我们同样可以参考字体的排版方式~

首先,千万不要跳跃式排版

例如,正常状态下推荐把输入框与发送框放在距离比较近的位置,因为如果输入框和发送键距离过于远,那会有很不人性化的交互感觉。

在MCStudio中设置按钮按下前后的效果这样就会给人一种更真实点击感觉

所以说,一个合理的UI界面是需要结合图标文字、以及实体交互一起才能完成的。

学习笔记

以这个药水的合成台作为例子,为大家讲解一个合理的UI界面是如何完成的。

它优化了原版的不足,将药水界面设计变得合理化:能明确看出药品放置和输出的材料位置

通过它的主题,也能让大家很好地理解该玩法是属于科幻类的界面设计

同时它抛弃了原本的分割,改成了条纹的文字线排序,这样的设计干净也简洁,主次关系清晰

通过上面的学习,我们可以看到,好的UI界面是需要好的构思和布局的,只要我们多多练习和理解,一定也能排列出属于我们自己的UI界面~٩(๑>◡<๑)۶

感谢上古之石团队为本期课程提供的专业指导!

今天的教学到此结束啦~趁着刚学的知识还热乎快快给你的模组做一个简洁又好看的UI界面吧!

(本文来源于公众号“我的世界Minecraft开发者”,作者发发菌)


网易游戏学院官方讨论QQ群:780916962
欢迎各位同学加群,与众多游戏爱好者一同学习交流~

评论 0

0/1000
网易游学APP
为热爱赋能
扫描二维码下载APP