2.6

docs/mconline/40-美术教程/4.UI教程/01.UI的基本概念.md

@@ -0,0 +1,28 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/1_1.50a37da0.png
+hard: 入门
+time: 5分钟
+---
+
+# UI的基本概念
+
+
+
+#### TAG：UI 概念
+
+#### 作者：上古之石
+
+
+
+#### UI的基本概念
+
+UI设计广义上可以简单理解为对用户界面进行设计，是对软件的人机交互、操作逻辑、界面美观的整体设计。从工作内容上来分，一般分为图形设计、交互设计和用户测试这三分类。
+
+![1_1](./images/1_1.png)
+
+
+
+UI设计不仅仅是从事美术绘画，更需要对软件使用者、使用环境和使用方法进行定位，简单来说UI设计就是不断为用户设计视觉效果使之达到满意的过程。
+
+在MC中，UI界面的美观和趣味性可以很好的让玩家有一种浸入式的体验。
+

docs/mconline/40-美术教程/4.UI教程/02.UI的制作工具介绍及选择.md

@@ -0,0 +1,31 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/2_1.adb83915.png
+hard: 入门
+time: 5分钟
+---
+
+# UI的制作工具介绍及选择
+
+
+
+#### TAG：UI 制作工具
+
+#### 作者：上古之石
+
+
+
+#### UI的制作工具介绍及选择
+
+了解基本概念后，我们开始认识一下目前最常见的Minecraft UI 界面设计软件。
+
+![](./images/2_1.png)
+
+
+
+MCStudio界面编辑器：是我的世界中国版单独研发，专门针对游戏内UI制作的便捷开发软件。MCStudio不仅仅包含了UI界面设计，还包括直接导入MC后游戏内的预览测试等等。可以很好的实机测试和修改，十分适合新手上手使用。
+
+![](./images/2_2.png)
+
+
+
+PS：Photoshop常用于各类专业设计。针对于UI界面的平面贴图设计也是能有很大帮助的，但是PS无法直接制作UI软件，所以只能作为辅助贴图。

docs/mconline/40-美术教程/4.UI教程/03.UI制作的规划及基本方法.md

@@ -0,0 +1,52 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/3_1.ab492eaf.png
+hard: 入门
+time: 10分钟
+selection: true
+---
+
+# UI制作的规划及基本方法
+
+
+
+#### TAG：UI 制作规划
+
+#### 作者：上古之石
+
+
+
+#### UI制作的规划及基本方法
+
+接下来我们一起来看看UI设计应该注意的3大规划和注意事项：
+
+#### 一：设计要保持一致性
+
+在实际的UI设计过程中，需要对人机交互具有一定的理解。那么我们要以玩家体验为中心，在界面设计时，应该简洁、直观，让玩家在接触玩法后，对界面上所对应的功能一目了然，让操作简单明了是最好的。
+
+![](./images/3_1.png)
+
+
+
+#### 二、设计准确性
+
+在设计界面时应该尽量使用搭配一致的标记、颜色等，并且显示信息的含义应该非常明确。
+
+![](./images/3_2.png)
+
+
+
+#### 三、设计布局合理化
+
+合理的布局会给玩家带来便利，玩家在玩游戏或者是浏览页面时，基本都是遵循自上而下、从左至右的习惯。所以我们在设计界面的时候，要避免功能按键排列过于分散，造成玩家鼠标或虚拟摇杆移动距离过远过长的弊端。要多做“减法”运算，将不常用的按键功能区隐藏，保持界面的简洁。
+
+![](./images/3_3.png)
+
+
+
+这样的排版距离过远，容易分散视觉焦点，看得人晕头转向。
+
+![](./images/3_4.png)
+
+这样根据人体习惯来排版，对视角就能达到很好的交互效果。
+
+所以游戏UI界面设计很需要认真的思考和构思。

docs/mconline/40-美术教程/4.UI教程/04.图标制作方法及规范、游戏内运用.md

@@ -0,0 +1,47 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/4_1.0d097818.png
+hard: 进阶
+time: 20分钟
+---
+
+# 图标制作方法及规范、游戏内运用
+
+
+
+#### TAG：UI 制作方法 游戏运用
+
+#### 作者：上古之石
+
+
+
+#### 图标制作方法及规范、游戏内运用
+
+![](./images/4_1.png)
+
+
+
+然后将绘制好的贴图导入到界面编辑的资源管理界面。
+
+![](./images/4_2.png)
+
+
+
+接下来需要新建一个背景图片作为面板底部。Ps：一定要先选中上一级的图层再点击添加图片噢。
+
+![](./images/4_3.png)
+
+
+
+可以看到我们获得了一个没有图片的图片图层。
+
+![](./images/4_4.png)
+
+
+
+接下来只需要把导入的图标贴图直接拖到图片层替换即可。
+
+![](./images/4_5.png)
+
+
+
+这样就可以直接看到游戏内图标的效果了，是不是很厉害。所以图标制作好后，我们一定要多做测试，从尺寸开始规范化，这样后期修改的次数会大大减少，提高效率。

docs/mconline/40-美术教程/4.UI教程/05.字体制作方法及规范、游戏内运用.md

@@ -0,0 +1,79 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/5_1.ab84a7ba.png
+hard: 进阶
+time: 15分钟
+---
+
+# 字体制作方法及规范、游戏内运用
+
+
+
+#### TAG：字体 制作方法 游戏运用
+
+#### 作者：上古之石
+
+
+
+#### 字体制作方法及规范、游戏内运用
+
+字体设计是平面设计中绕不开的话题，因为好的UI、平面设计师必须要掌握如何进行合理的字体设计，或者是在不同的地方设计出不同的，符合需求的字体。同理于游戏内也是一样的，这是一套可以通用的理解思路。
+
+![](./images/5_1.png)
+
+
+
+#### 第一、标题文字的排版
+
+如果你排版设计的文字不够吸引用户和玩家，或者让他们看这字体的设计觉得很累，没有精神看下去，那就需要观察是不是文字之间的排版有问题，段落与段落间过于跳跃性。一般来说，你的眼睛会首先看到大标题，然后就自然地回车到左边开始阅读。
+
+![](./images/5_2.png)
+
+
+
+#### 第二、文字的断节
+
+文字的断节设计具有一定的两面性，如果用得好可以体现硬朗和线条感，如果用不好就是崩塌式的失败。只有合适的字体合适的裂变效果才可以达到恰当的视觉感受。
+
+![](./images/5_3.png)
+
+
+
+#### 第三、图形化
+
+有时候过于图形化的设计，会让文字本身的辨识度降低，但适当的图形设计就会让整体的辨识度提升很大的空间。合理化的图形化和融合度是最难的。
+
+![](./images/5_4.png)
+
+
+
+文字设计是一个有着框架规范却又设计自由的部分，它和ICON有着差不多的设计思路。天马行空的设计和构思必须都要有一个基础规范的框架，在基础的规范下进行设计，就会给人杂而不乱的感觉，这一点需要大家牢记。
+
+所以在游戏中，由于文字所承载的功能。我们需要考虑，玩家对于游戏游玩的时候是否能看清楚，这些图标的用法和这些按钮的实用性。
+
+
+
+也就是在游戏中，我们需要考虑对文字的阅读型，参照上面的概念，我们来对游戏内的文字效果进行一个简单的排版。
+
+![](./images/5_5.png)
+
+
+
+在文字排版中我们可以看到，大小合适的logo文字，正好作为了整个菜单的主要部分。
+
+![](./images/5_6.png)
+
+
+
+将所有匹配信息都放在了中间的部分，同时给到分段均匀的设计。
+
+![](./images/5_7.png)
+
+
+
+然后我们看到最后部分 下意识的从左往右阅读就可以直接看到道具商店。
+
+![](./images/5_8.png)
+
+
+
+所有的字体设计中，只有logo是单独排版，其余的都是简洁且统一的效果，这样就不会给玩家杂乱的视觉感受。

docs/mconline/40-美术教程/4.UI教程/06.UI界面的制作方法及规范、游戏内运用.md

@@ -0,0 +1,71 @@
+---
+front: https://mc.res.netease.com/pc/zt/20201109161633/mc-dev/assets/img/6_1.4f0e1f91.png
+hard: 进阶
+time: 10分钟
+---
+
+# UI界面的制作方法及规范、游戏内运用
+
+
+
+#### TAG：界面 制作方法 游戏运用
+
+#### 作者：上古之石
+
+
+
+#### UI界面的制作方法及规范、游戏内运用
+
+那么将上述图标和文字的基本规范和运用都理解了之后，接下来我们来看重点的界面排版设计。UI界面是整体布局的重中之重，这和玩家的实际游戏时长息息相关。
+
+![](./images/6_1.png)
+
+
+
+所以在制作UI界面时，一定要跟材质包制作时一样，先给它定型风格，再来定制颜色基调。确定好了之后，再开始绘制时一定不会大范围的选错颜色了。
+
+![](./images/6_2.png)
+
+
+
+对于UI界面的排版规格，我们可以参考字体的排版方式。
+
+首先，千万不要跳跃式排版。
+
+例如如果输入框和发送键距离过于远，那会有很不人性化的交互感觉。正常状态下比较推荐放在距离比较近的位置。
+
+![](./images/6_3.png)
+
+
+
+我们可以在MCStudio中直接设置一下按钮按下前后的效果，这样就会给人真实的点击感觉。
+
+![](./images/6_4.png)
+
+
+
+所以一个合理的UI界面是需要结合图标文字、以及实体交互一起才能完成。比如这个药水的合成台。
+
+![](./images/6_5.png)
+
+
+
+它优化了原版的不足，将药水界面设计变得合理化。能明确的看出药品放置和输出的材料位置。
+
+![](./images/6_6.png)
+
+
+
+通过它的主题也能让大家很好的理解该玩法是属于科幻类的界面设计
+
+![](./images/6_7.png)
+
+
+
+并且也抛弃了原本的分割，改成了条纹的文字线排序，这样的设计干净也简洁，主次关系清晰。
+
+![](./images/6_8.png)
+
+
+
+通过以上学习，我们可以看到好的UI界面是需要好的构思和布局的，只要我们多多练习和理解，一定也能排列出属于我们自己的UI界面~