2.6

docs/mconline/55-交互设计教程/0-制作UI需要准备的内容.md

@@ -0,0 +1,63 @@
+# 制作UI需要准备的内容
+
+## 准备工具
+
+### 我的世界开发工作台（MC Studio）
+
+**【官方下载地址为：[https://mc.163.com/dev/](https://mc.163.com/dev/)】**
+
+这是一款可以帮助我们可视化编辑游戏界面的辅助软件，它能实时导入我们绘制的素材在软件内编辑，把很多以前只能在代码或者其他软件里面调整的界面直接显示在游戏界面内，方便创作者更加直观的看到自己绘制的界面效果。
+
+<img src="./images/0_1.png"/>
+
+- **我的世界开发工作台（MC Studio）界面编辑器的主界面。**
+
+#### 工具栏
+
+<img src="./images/0_2.png"/>
+
+综合了各种界面控件类型的工具，我们只需要根据自己需要的功能，点击上面的图标就会自动添加一个相应的功能按钮到界面中。
+
+#### 界面文件列表
+
+<img src="./images/0_3.png"/>
+
+想要在界面编辑器内操作，必须要有一个界面文件，可以是新创建，也可以导入json格式的界面文件进来编辑。
+
+### **控件结构**
+
+<img src="./images/0_4.png" />
+
+这个功能主要是为了让我们创建出来的东西更加直观，也方便查找和修改。控件的结构排列会影响游戏内的使用，需要创作者认真排列。
+
+### **界面属性**
+
+<img src="./images/0_5.png" />
+
+详细调整每个界面的属性，创作者既可以选择直接用鼠标直接拖动对应控件进行位置调整，也可以选中控件后在右边的属性栏进行详细数值的调整。
+
+### **界面属性**
+
+<img src="./images/0_6.png">
+
+主要用于存储玩家自己创建的界面图片，方便玩家更快的选择到需要的图片进行修改和使用。
+
+
+
+
+
+## 图片编辑软件
+
+这里主要推荐电脑上两款比较常用的软件，其他图片处理软件，只要是自己习惯用的，即使在手机也可以使用类似的软件达到想要的效果。
+
+### PhotoShop
+
+<img src="./images/0_7.png">
+
+目前主流的图片处理软件， 不止是绘制像素图案，更多的是图片的处理相对其他软件来说更加的方便。
+
+### Aseprite
+
+<img src="./images/0_8.png">
+
+专门用于绘制像素贴图的一款软件，主打就是像素图片的绘制，相对PS更加容易上手，且更适合图形的绘制。

docs/mconline/55-交互设计教程/1-典型的UI定位及举例.md

@@ -0,0 +1,55 @@
+# 典型的UI定位及举例
+
+## 高频查看但无交互
+
+顾名思义这类UI玩家需要高频率的去关注，但是不用去进行操作，这类一般都是用于实时显示与玩家相关的各类数值有关的内容，这类UI需要保证玩家可以很方便就查看不会被遮挡，并且不会产生混淆，通常需要动态更新内容。
+
+### 血条/饥饿值
+
+原版的血条和饥饿值就是最典型的需要高频查看，但是不需要玩家进行交互的内容，玩家需要快速了解自身的状态。
+
+![img](./images/1_1.png)
+
+### 装备耐久度
+
+直观反映装备的耐久数值，原版仅用类似进度条的方法显示，有开发者通过获取装备耐久值显示在屏幕的其他位置更加直观的展示了装备的具体耐久度数值。
+
+![img](./images/1_2.png)
+
+### 小地图
+
+这个属于模组内容，可以帮助玩家更好的探索世界，通过小地图玩家可以更加直观的知道自己所处的位置，方便玩家进行探索。
+
+![img](./images/1_3.png)
+
+## 高频查看和交互
+
+玩家需要直观的看到内容，并且对内容进行交互，这类内容通常在UI里面占比不大，而且主要是集中在方便点击的区域。
+
+### 快捷物品栏
+
+快捷物品栏就是原版一个非常典型的高查看和交互的区域，玩家需要经常通过查看物品栏来快速确定接下来的目标，常用的道具也会放在快速物品栏内便于切换
+
+![img](./images/1_4.png)
+
+### 组件一级按钮
+
+操作按键，需要玩家大量的点击进行人物控制，同时玩家也可以根据按键反馈来判断人物当前的状态，部分模组也是用了按钮UI来释放技能，让玩家更加方便操作
+
+![img](./images/1_5.png)
+
+## 低频查看及交互
+
+偶尔需要进行查看的内容，大多是通过一级菜单进入的二级菜单按钮，多用于背包及和其他物品交互后打开的UI界面
+
+### 游戏设置按钮
+
+游戏设置就是很常见的低查看按钮，玩家通常只有在需要进行游戏设置时才会点击，点击后就进入全屏UI模式无法操作人物，所以玩家不会大量的去点击按钮操作。
+
+![img](./images/1_6.png)
+
+### 背包按钮
+
+背包也是点击快捷物品栏旁的按钮后进入背包，打开背包UI时玩家不可操作游戏角色，以便进入背包模式后玩家可以更加方便和专注的调整背包内物品
+
+![img](./images/1_7.png)

docs/mconline/55-交互设计教程/10-需要注意的点.md

@@ -0,0 +1,29 @@
+# 需要注意的点
+
+## 使用九宫格制作自适应的内容
+
+九宫格是绘制UI经常会使用的方法，九宫格的好处有：
+
+- 绘制简单，但是需要一定的想象力，需要在绘制时就考虑清楚使用九宫格后会是什么样子。
+
+- 大小可以随意拉伸，边缘会随着长宽进行变化。
+
+- 图片分辨率小，占用内存少。
+
+我的世界原版就有大量的UI内容是运用九宫格的方式进行制作的，九宫格只需要设置好四个边缘的像素，就可以自适应屏幕，非常的方便后期修改以及素材复用
+
+![img](./images/10_1.png)
+
+## 表现出明显的像素感
+
+因为游戏的本体UI界面是16x16的分辨率，过高的分辨率导致像素感缺失对于玩家来说是比较突兀的。
+
+手绘的像素UI，推荐绘制的分辨率不要超过32x32，超过以后像素感就没有那么强了，并且可能因为看起过于圆滑的UI导致整体的UI风格和原版脱节。
+
+![img](./images/10_2.png)
+
+## 注意屏幕的安全区
+
+尽量不要把UI或者关闭按钮设置在屏幕的边缘而且把按钮设置的非常的小，因为部分屏幕存在一个安全区的概念，尤其是曲面屏更常见。安全区就是手机为了防止玩家触碰边缘进行误操作，而专门设置的一块区域，这块区域点击时是无效的。
+
+所以在设计按钮位置时，尽量离屏幕边缘区域有一定的距离，以防按钮在部分机型上无法被点击。

docs/mconline/55-交互设计教程/11-UI设计跟主题元素的结合.md

@@ -0,0 +1,27 @@
+# UI设计跟主题元素的结合
+
+## 卡通休闲风格
+
+在第七章的时候讨论过，卡通休闲风格要怎么去表现，卡通风格其实就是饱和度提高，然后纹理尽量简约，不要有过多的复杂纹路。
+
+### UI设计风格
+
+我们这里拿原版的背包栏做一个例子
+
+![img](./images/11_1.png)
+
+我们并没有对这个UI进行修改，仅仅只是换了一个颜色，而右边改成暖色饱和度相对灰色来说较高的一种橙红色，给人的感觉就会比原版的物品栏框更加的卡通。
+
+如果想要更加进一步的区别原版的UI，可以做更大的一些调整，比如修改一下边框，在空白处添加一些木头纹理
+
+![img](./images/11_2.png)
+
+当然，如果想要强调个人风格，你甚至可以在放人物纸娃娃的区域，画上一些主观性很强的像素画来添加一些气氛
+
+![img](./images/11_3.png)
+
+以上只是原版的材质绘制的一些小技巧，在自定义UI里面我们设计时可以更加的大胆，做一些看起来不是那么方方正正的东西在上面
+
+![img](./images/11_4.png)
+
+上面是根据材质的风格制作的一款偏卡通简约风格的材质包，通过绘制一些简单的图案修改了整个材质的质感

docs/mconline/55-交互设计教程/12-Demo纹理包下载.md

@@ -0,0 +1,16 @@
+# Demo纹理包下载
+
+## 示例下载
+
+点击下载[交互设计教程教学纹理包](https://g79.gdl.netease.com/FancyUiPack.zip)。
+
+下载后解压，根据下方路径：
+
+```
+-FancyUiPack
+--FancyUiBeh
+--FancyUiRes
+```
+
+使用我的世界开发工作台[基岩版组件导入功能](../10-addon教程/第18章：打包导出你的作品/课程01.包体的结构和导入.md) ，选择 **【FancyUiPack】** 文件夹，即可在游戏内看到效果。
+

docs/mconline/55-交互设计教程/2-UI常见用例.md

@@ -0,0 +1,77 @@
+# UI常见用例
+
+## 按钮
+
+我们通常说的按钮是指某一个点击以后有反馈的UI，比如确定按钮就是一个很常见的按钮功能使用方式。但其实UI内大部分的交互都是由不同的按钮组件组成，并非是只有给与用户反馈的按钮才是按钮组件，所以我们需要根据不同的场景去选择性使用按钮功能。
+
+### 默认：无操作时按钮外观
+
+按钮在没有任何操作时的外观，如果按钮无法填写文字时，就需要按钮本身的图案有足够的识别度，其他人可以通过按钮的图案就能大致理解按钮的功能是什么。
+
+![img](./images/2_1.png)
+
+原版的按钮使用颜色和绘制方式使这个按钮看起来像是凸出来的感觉，可以很容易的让人联想到这个图片是可以点击的。
+
+
+
+### 按下：按下后按钮外观反馈
+
+按钮在按下时需要给到用户交互反馈，常见的有更改按钮的颜色和大小。按下时需要和常规时按钮做出较为明显的区别。
+
+![img](./images/2_2.png)
+
+原版的按钮按下后，周围描边颜色变为白色，同时原按钮的灰白色变成绿色更加显眼，颜色绘制也由凸起变成下凹，可以看出按下的按钮图标上方的边缘是暗色，下半部是亮色和常规时按钮是相反的颜色，这样在视觉上就会给人一种凹陷的感觉。
+
+### 高亮：区别其他同类按钮外观（针对鼠标操作）
+
+高亮一般用于反馈用户鼠标目前悬停所在的按钮模块，高亮的同时提醒用户此处按钮是处于可以点击交互的状态，高亮需要做一个明显区别于默认按钮外观，但同样需要区别按下按钮外观。
+
+![img](./images/2_3.png)
+
+原版的按钮鼠标悬停在上方时会显示与按下同样颜色的绿色，基本与按下一样，区别在于高亮的绘制方式为按钮的边缘上方亮色而下方为暗色，这样给用户的视觉效果就还是凸起的感觉，这样可以较为合理的区分高亮和按下按钮的外观效果。
+
+### 禁用：不可使用按钮
+
+提示玩家此按钮不可交互，一般禁用按钮的颜色都是尽量接近背景色，与可点击的按钮相比更加的不起眼，同时禁用的按钮鼠标悬浮在上方不会有任何的高亮反馈，点击时也没有任何的交互反馈。
+
+![img](./images/2_4.png)
+
+原版的禁用内容就采用了接近背景深灰色的浅灰，相对可点击的按钮更加不起眼。同时部分禁用内容作了下凹的绘制方法，更加区分和普通的可点击按钮，让用户一眼就能明白哪个按钮是可点击哪个按钮是不可点击的。
+
+## 文本
+
+文本是美化排版和丰富内容所必须的内容，当图片无法清晰的传达所有需要的信息时，这时候就需要用到文字来补充图片无法展示的信息，所以文本在UI里面是不可缺少的一部分，下面就让我们来看看有哪些基础的文本使用方法吧。
+
+### 富文本的使用
+
+单纯的文本阅读起来是较为枯燥的，所以可以在文本当中穿插一些图片，包括一些跳转链接帮助用户更加方便阅读和理解。
+
+![img](./images/2_5.png)
+
+原版的游戏指南就把UI图标直接显示在文字中间，这样比文字更加容易让玩家理解。
+
+### 字体/字号的选择
+
+通常字体和字号我们使用默认大小即可，一般没有特殊的必要不需要额外设置字体的大小，字体如果需要做出大小差异，最好不要超过2倍左右的大小区别，不然会造成较大文字过于醒目而较小的文字被忽略。
+
+### 文字排版设计
+
+任何文字不经过排版都是不便于阅读的，最简单的排版就是进行换行，把标题和内容作区分，之间没有什么关联的大段落进行隔断处理。
+
+![img](./images/2_6.png)
+
+## 滚动列表
+
+![img](./images/2_7.png)
+
+### 暗示可滑动
+
+滚动列表的长度不应当刚好显示全部内容，需要有部分显示半截内容，如滑动框的长度不应该显示8行物品，而应该显示7行半物品。这样用户通过半截内容就可以自然的联想到通过下滑屏幕来观看未显示全的内容。
+
+## 词缀（Tips）
+
+![img](./images/2_8.png)
+
+### 提升设计美观程度
+
+通常Tips都是不可见的，玩家只有通过点击特定的UI才会显示我们想要知道的信息，并且在显示一段时间或者点击其他UI的时候就会隐藏不会阻挡玩家观察主要的UI内容，因为在UI内显示大量的文字说明是非常影响美观程度的，所以在很多需要文字说明但是不需要长期显示在UI上的信息，我们都可以考虑制作成Tips来简化UI，提升UI的美观程度。

docs/mconline/55-交互设计教程/3-UX设计应注意的几点.md

@@ -0,0 +1,47 @@
+# UX设计应注意的几点
+
+## 注意内容
+
+我们需要在设计UI的时候同时考虑到UX的设计，UX即为即用户体验，因为我们所有的UI都是面向用户的，只有做到相对合理才能提升用户的游戏体验。
+
+### 减少一级界面UI数量
+
+我的世界是拥有大量衍生模组的游戏，所以开发者要在一级界面上尽量保持整洁，把一些不需要实时显示和查看评率不高的UI界面放入二级或三级UI内，一级UI尽量做到最简介才能拥有更好的组件适配性。如果每个开发者都把自己的UI全部放在一级界面上，那么玩家只需要加几个组件就会导致整个屏幕都是不同的UI。
+
+![img](./images/3_1.png)
+
+<center>（负面例子)</center>
+
+组件<怪异录>在UI设计中就较好的考虑到了这一点，所以把一级界面也隐藏了起来，玩家只有在手持怪异录时一级菜单才会从物品栏处弹出。怪异录虽然界面简单，但是因为是一款偏RPG风格的组件，玩家的血量只靠原版红心是无法完美显示的，所以他们在尽量减少界面UI的前提下，在原版血条的位置给玩家增加了简易的血条饥饿条，更方便玩家显示大数值的血量。同时他们考虑到了和其他组件的兼容，预留了指令，玩家可以通过输入指令来隐藏怪异录的血量显示，这样就最大程度的不会和其他组件冲突。
+
+![img](./images/3_2.png)
+
+### 菜单界面尽量保持同一位置
+
+很典型的就是关闭按钮，如果你一级菜单的关闭按钮在左边，而你二级菜单的关闭按钮突然变到右边，三级菜单的按钮跑到屏幕中间，这样用户在点击按钮的时候就需要整个屏幕到处点击了，无疑是增加用户点击的难度。
+
+### 减少需要大量使用操作的步骤
+
+能一步达成的设计，不要用很多步骤去完成。比如你的组件传送是通过UI来传送的，而且玩家会经常使用到这个传送功能，那么你就不要把传送界面放到三级或者四级界面，不要让玩家需要先打开主界面UI，然后在一堆分类中找到传送分类，再在一堆传送点内通过搜索按钮输入坐标名字去找到自己想要传送的地点进行操作。我们应该在一级菜单或者二级菜单下直接找到需要的传送功能，并且通过玩家设置传送点的时间和使用的频率来判断传送点的显示顺序，这样可以帮助玩家快速找到想要的传送目标。
+
+### 考虑不同端的操作习惯
+
+电脑端和移动端的操作习惯是有很大不同的。
+
+电脑端游戏玩家主要是依靠键盘进行操作，而移动端大部分是依靠手指点击屏幕。
+
+而电脑端的玩家显示器更加的大，所以可以支持更多的UI显示，而移动端则需要尽量的避免过多的UI显示在屏幕上导致玩家误触。
+
+电脑端的模组需要在UI上标注按键盘上的什么键可以直接打开UI，而手机则不需要。但是电脑版需要和原版按键进行区分，不能占用到原版按键所使用的键。
+
+## 统一的UX标准的好处
+
+### 降低玩家学习成本
+
+这里举一个最简单的例子，电脑端上一般都是以WASD作为控制方向键，基本上所有的3D游戏都是这样控制角色的移动，而空格键就是跳跃。所以大部分的基础操作玩家都不需要再次重新学习，玩家只需要根据原有的经验去学习游戏所特有的一部分按键既可以快速上手掌握游戏的玩法。
+
+移动端也是这样，所有的moba类游戏技能都是在右边，这样所有擅长这类游戏的玩家，不管到了哪个moba手游，都可以快速的上手，他们需要理解的只是英雄之间的差异，并不需要再次去熟悉最基础的操作。
+
+而我们设计UI时也一定要遵循一定的设计标准，比如在手游我的世界中，最常见的就是打开背包行为，玩家只需要点击一下快捷背包键就可以打开背包。
+
+如果我们设计成需要先把物品栏里面的背包放置在地上在打开背包，这样繁琐的步骤无疑是打破了大部分玩家的常识习惯，大部分的玩家下意识的寻找打开背包的按钮，但是无法找到，部分人也许会因为没有办法按照常规的操作打开背包去怀疑是否是作者制作的内容出现了BUG。

docs/mconline/55-交互设计教程/4-手机端的UX设计标准.md

@@ -0,0 +1,73 @@
+# 手机端的UX设计标准
+
+## 手机屏幕区域的定位
+
+![img](./images/4_1.png)
+
+大部分手机都是长方形的屏幕，所以我做了一个比较直观的区域划分图，下面我就根据这个区域划分逐步的讲解一下有关区域的UI设计的一些案例
+
+### 中间：高频查看，无交互
+
+中间区域，这块一般是用来显示游戏画面的，除非是展开式UI，比如玩家背包之类的UI，通常长期显示的UI是不会放置在正中心的，这块区域的UI设计时尽量要做到不会遮挡玩家视线，同时不会影响到玩家操作。
+
+### 中上/下：高频查看低频交互
+
+中下区域因为有快捷物品栏的存在，玩家需要经常检索物品栏内的道具情况，所以查看的频率较高，而且物品之间的切换，所以玩家也较为习惯于点击中下方的内容，一些低频交互的UI可以显示在物品栏的附近，方便玩家查看和点击使用。
+
+### 左右下角：高频交互
+
+左右下角主要是移动按钮和跳跃按钮，以手机玩家的习惯，左右下角相对来说是最高频率使用的UI，尤其是右下角，只有跳跃按键一个，不过需要注意玩家在创造模式下飞行是会额外出现升降按钮的，如果不考虑进去可能会导致按键重叠冲突。
+
+### 左右上角：高频查看低交互
+
+手游的左上角是聊天框，右上角目前只有一个跑步和移动状态的切换，所以左右上角都是较为空闲的，而且左右上角也在玩家手指操控的上方，既不会被手指挡住，又不会被其他原版的UI挡住，所以非常适合放一些高频率查看，但是低频率交互的内容，比如小地图，玩家状态信息显示栏之类的UI。
+
+
+
+## 常见UI推荐放置位置
+
+### 一级菜单按钮：右侧偏上边缘
+
+原版右侧的上方是没有什么按钮，只需要注意不要和切换运动模式按钮重叠即可，而且由于玩家相对移动按钮，其实右侧的跳跃按钮点击频率并不是那么高，所以可以更加方便的进行较为复杂的按键操作。
+
+但是注意右侧中间偏下位置还是比较容易误触的，所以尽量在中间偏上的位置放置一级菜单按钮为优。
+
+### 玩家属性信息：左上/快捷物品栏上方
+
+玩家的基础属性数值是需要经常查看的，比如血量饥饿值，这种必须要放在玩家可以随时看到的地方，按照玩家的习惯，放在原版的血量位置是最合理的，但是这块区域只适合放一些简单的如血条之类的小型UI，如果UI的高度过高会遮挡很大一部分的游戏视角。所以如果需要制作一个大的属性显示框，那么可以考虑放在左上角，拥有更大的位置的同时，也不会遮挡太多重要的游戏视野。
+
+### 小地图：右上/左上
+
+小地图相对来说是需要占位面积较大的一类UI内容，而且玩家查看的频率也较高，所以需要显示在方便查看的位置，而屏幕的左右上角就非常适合这一类的UI显示，既没有大量的原版的UI遮挡，有不会被误操作
+
+但是相对较大的占位面积类UI我们最好提供一个可以隐藏收起的UI功能，在玩家点击时这个UI可以隐藏起来。
+
+### 技能按钮：跳跃键的四周
+
+很多具有RPG元素的组件都有技能设定，在手机屏幕上最合适的就是跳跃键的附近，可以参考moba游戏，做在跳跃键的旁边，也可以简单一些，做在跳跃键上方一些。
+
+同样是高频交互区域，跳跃键相对来说不需要长时间点击控制，而移动按钮是需要长时间点击控制的，所以这类需要点击的技能更推荐放置在跳跃键的右下角区域。
+
+### 设置按钮：中上
+
+设置按钮玩家大部分情况下并不会随时点击，所以可以放置在一个比较醒目，但是不容易误触到的地方，而原版的设置按钮也是在中上，这样玩家只要进行原版菜单操作就一定会注意到组件的设置按钮并点击查看。
+
+
+
+## 常见需要注意的问题
+
+### 常见的手机分辨率和适配方法
+
+首先我们可以在我的世界开发者工作台里面进行各种分辨率的测试，善用里面的预设分辨率和自定义分辨率，尽量多测试几种极端屏幕比例。
+
+### 异形屏的适配
+
+常见的异形屏有刘海、转孔屏。
+
+### 允许玩家动态调整按钮的位置
+
+这个可以在设置里面加一个自定义按钮位置，这样可以方便各种按键习惯的玩家挑战自己所需要的按钮位置，也方便玩家添加多个组件UI位置调整，不至于冲突。
+
+### 向大众手游学习（降低玩家的学习成本）
+
+这边推荐学习的手游一定要足够大众，这样玩家操作习惯可以更快的适应，如果可以尽量找3D的手游，去学习他们的按键布置，比如前段时间大伙的射击吃鸡游戏，上面的按键布置，包括按键大小分布都有很多可以借鉴学习的地方。

docs/mconline/55-交互设计教程/5-电脑端的UX设计标准.md

@@ -0,0 +1,75 @@
+# 电脑端的UX设计标准
+
+## 屏幕不同区域的不同定位
+
+![img](./images/5_1.png)
+
+电脑版玩家相对手游玩家区域划分的更加随意，无论是高频查看还是低频查看，只要这块有添加新的UI，玩家就会注意到。也能很快的适应把某块低频查看区域变成高频查看区域的改变。所以开发者只要在不遮挡原版UI的前提下，整个屏幕都是可以进行UI布置的。
+
+### 中间：高频查看
+
+中间是玩家会去高频率看的区域，因为玩家主要的视觉中心都是在正中心，所以正中心不适合做特别大范围的常驻不透明UI，这类UI会完全的遮挡住玩家的游戏视野，导致玩家无法看清前方的游戏内容。
+
+### 中下/上：高频查看
+
+中下是快捷物品栏和血量显示的地方，玩家会经常查看以确认自身状态，所以这块是玩家习惯进行查看的区域，如果有和玩家属性相关且需要玩家高频查看的内容，可以放在这块区域。
+
+中上区域也是玩家比较容易注意到的区域，这块区域在原版一般是用来显示BOSS血条的，所以中上这块区域很适合显示一些小体量的游戏信息。
+
+### 左/右下角：高频/低频查看
+
+游戏的左下角是聊天框，如果是联机模式会经常有信息弹出，所以玩家会较为平凡的查看左下角内容，此处不宜做大范围遮挡的UI，可能会导致玩家无法获取最新的聊天信息。
+
+右下角目前仅用作显示声音，大部分玩家都不会开启，所以查看的频率并不是很高，较为适合开发者用来放置一些不需要时刻查看的菜单按钮。
+
+### 左右上角：低频查看
+
+左右上角以原版来说是没有什么太多内容的，右上角会在玩家被buff影响后增加一些buff图标需要注意一下。左右上角很适合添加一些较大范围的UI，而且这些UI不会过分的遮挡住玩家的游戏内容。
+
+## 常见UI推荐放置位置
+
+### 一级菜单按钮：右下左下
+
+左下和右下都是原版UI相对使用较少的区域，相比于左下，右下更加适合添加一些彩蛋按钮显示在那里。
+
+电脑的菜单图标最好可以直接在图标上留下对应的按键，这样玩家可以直接通过图标就能了解到按什么键就能打开想要的UI界面。
+
+### 玩家属性信息：左上/快捷物品栏上方
+
+玩家的属性信息也是属于需要玩家高频查看的内容，所以属性信息最好放置在玩家会经常查看的区域，较为复杂的属性合集可以放置在左上角，左上角相对快捷物品栏上方可以放置更加复杂的图案也不会挡住视线。
+
+### 小地图：右上/左上
+
+小地图占位面积较大，通常是放置比较空白的区域，而右上左上都是非常不错的位置，方便玩家随时查看自身位置又不会照成过多的遮挡。
+
+### 技能按钮：左侧/快捷物品栏上方
+
+左侧相对右侧更适合是因为右侧可能会被buff图标遮挡，而左侧仅有聊天框，并且可以调整聊天框高度，所以并不会遮挡住技能图标。
+
+快捷物品栏上方也是可以放置技能图标的，和左侧一样，都是玩家会经常关注的区域，所以可以更好的观察技能冷却时间等信息。
+
+## 常见需要注意的问题
+
+### 不同分辨率的适配
+
+电脑端大部分人游戏都是实用窗口化游戏，而窗口是可以进行拉伸的，所以电脑是可能出现任何比例的游戏窗口的，我们在定位一个UI位置时最好是以当前屏幕长宽进行定位。
+
+图标的大小不建议随着不同分辨率进行大小缩放，如果随着大小可能会导致图案被压缩拉伸到失真，应该让图标随着窗口进行重新排列，比如大屏幕时是一排图标，小屏幕是自适应成两排图标。
+
+### 我的世界原版的按键绑定（需要避开）
+
+我的世界原版已经占用了不少按键，除非功能覆盖，比如我们希望玩家打开背包后不是打开原版的背包UI，而是打开我们组件的背包UI，这样我们可以进行按键覆盖，大部分情况下我们的按键都应该和原版的按键不冲突。
+
+### 推荐的自定义按键交互绑定
+
+技能按键推荐：技能属于需要高频率去点击的按键，应该尽量距离ASDW方向键近一些，这样可以方便玩家进行操作，比如R/T/G/H/Z/X/C/V。
+
+一些功能菜单键，这类按键玩家并不需要频繁的操作，所以这类按键我们应该尽量设置在较远的距离，而且尽量和长按的按钮相隔一个按键，这样可以防止玩家误触。所以有关功能菜单键我们推荐U/I/O/P/J/K/L/N/M。
+
+### HUD界面不要使用鼠标操作
+
+在端游里面，HUD界面内容都是由按键操作，在HUD界面尽量不要设计需要鼠标点击才能进行点击的操作，GUI内的操作则可以使用鼠标操作。
+
+### 像常见的游戏学习（降低玩家的学习成本）
+
+电脑端上可以参考的成熟作品非常多，只需要根据自己组件的类型选择成熟的大型端游进行学习即可达到一个不错的设计效果。

docs/mconline/55-交互设计教程/6-工具的使用.md

@@ -0,0 +1,84 @@
+---
+front: https://nie.res.netease.com/r/pic/20220408/42506aab-a899-4d62-b2c9-ea0a68d6480c.png
+hard: 入门
+time: 15分钟
+selection: true
+---
+
+# 工具的使用
+
+## 常用功能
+
+因为Photosthop后期处理图片更加方便，虽然看似功能很多很复杂但其实绘制像素图片只需要掌握其中极少部分即可，那么我这边就给简单的说一下绘制像素UI可能会用到的功能。
+
+### 像素网格的开启/关闭
+
+像素网格在视图-显示-像素网格内关闭或开启
+
+![img](./images/6_1.png)
+
+可以看出来开启了像素网格后每个像素之间就会有一条一条的白线做为区分，很多新手会觉得这是一种不错的辅助方式，但其实这些细线会导致颜色出现一些差异，比如这两个圆圈同样是纯黑色绘制的，但是左边开启了像素网格后的黑色圆圈，明显别右边关闭像素网格的圆圈看起来会更加灰一些。这样很容易导致视觉错误让绘制出来的图案比预想中的颜色要偏差一些。
+
+### 像素图片缩放
+
+像素图片的缩放也是一个比较多新手会碰到的问题，如何使用PS进行无损的缩放，可以使用缩放模式中的 **邻近插值** 。
+
+#### 缩放时使用插值：邻近
+
+很多新手使用图片缩放时，直接使用默认模式，把16*16的像素放大到64*64以后边缘就会进行虚化，看着整个图片都非常的模糊。
+
+![img](./images/6_2.png)
+
+
+
+其实只需要在缩放的时候选择邻近，这样缩放出来的图片就不会被虚化边缘了。
+
+<img src="./images/6_3.png" alt="img" style="zoom:120%;" />
+
+![img](./images/6_4.png)
+
+同理，在放大整个图形大小时，如果不想图片被虚化边缘，重新采样处也要改成邻近
+
+<img src="./images/6_5.png" alt="img" style="zoom: 200%;" />
+
+### 快速导出图片
+
+当我们做UI时，会有大量的图层，每个图层都独立导出会非常麻烦，这时我们只要找到图层框，右键点击我们想要导出的内容，并选择快速导出为PNG，这样导出的图片，是不会有多余的透明内容
+
+![img](./images/6_6.png)
+
+使用整体导出功能导出后的图片
+
+<img src="./images/6_7.png" alt="img" style="zoom:150%;" />
+
+使用图层独立导出的图片
+
+<img src="./images/6_8.png" alt="img" style="zoom:210%;" />
+
+### 使用辅助线切割
+
+有时我们绘制UI时需要对齐其他UI来使UI看着更整齐，PS有自带吸附功能，但是仅仅使用吸附功能并不能自动匹配所有的边缘，所以这个时候我们可能就需要制作辅助线
+
+CTRL+R打开标尺，这时你的PS因多了下面这两条标尺。
+
+<img src="./images/6_9.png" alt="img" style="zoom:120%;" />
+
+用鼠标点击标尺并拖动，就能直接拖出来一条辅助线了，辅助线并不会被导出，他只会在PS内辅助你对齐图片。
+
+<img src="./images/6_10.png" alt="img" style="zoom:120%;" />
+
+### 改变颜色属性
+
+绘制像素内容时，常用的功能有 **图像-调整-亮度/对比度**  以及  **色相/饱和度** 。
+
+#### 亮度/对比度
+
+亮度是调整整体颜色的明度，亮度越高，这个颜色就看起来越明亮。
+
+对比度是调整整体颜色的对比，对比度越高，白色会越白，黑色会越黑，整体对比会越明显。
+
+#### 色相/饱和度
+
+色相就是改变颜色，比如红色改变色相后可以变成蓝色，也可以变成绿色。
+
+饱和度是指颜色的纯度，饱和度越高的颜色看起来越鲜艳。

docs/mconline/55-交互设计教程/7-美术概念介绍.md

@@ -0,0 +1,84 @@
+---
+front: https://nie.res.netease.com/r/pic/20220408/c1b0e183-0ec9-45ae-ba3e-5fa906326d95.png
+hard: 入门
+time: 10分钟
+selection: true
+---
+
+# 美术概念介绍
+
+## 美术概念
+
+这章会大概介绍一下绘制像素时会碰到的一些内容，此章较为偏美术方面的，对于如何绘制一个原创的精美UI是非常重要的。
+
+### 色相
+
+色相简单概况就是我们平常说的颜色，用户看到的颜色是什么样的取决于颜色的色相，除了黑白灰以外的颜色都是具有色相属性的。
+
+而要讲色相主要是想和大家拓展一下冷色和暖色概念，比如色相中蓝色、紫色之类的我们一般称之为冷色，这类颜色用户看到会感觉到比较凉爽。而相对的黄色、红色这类颜色我们称之为暖色，这类颜色用户看到会觉得比较温暖。
+
+我们需要注意绘制UI时，尽量保证不要冷暖色混搭，而是保持一个整体的颜色风格，这样可以让你的画面看起来更加的整体。
+
+![img](./images/7_1.png)
+
+### 饱和度
+
+饱和度也就是常说的颜色的鲜艳程度，饱和度越高颜色看起来就越鲜艳，饱和度为零颜色就是黑白灰三种颜色。
+
+饱和度越高的作品也就越鲜艳，也越容易被人被注意到。
+
+但是初学时期在绘制UI时饱和度建议尽量取较低饱和度的颜色，这样就算颜色使用的比较杂，绘制技巧和颜色的使用也没掌握很好，最少在饱和度不高的情况下画面看起来不会过于杂乱。
+
+![img](./images/7_2.png)
+
+### 颜色明度
+
+明度这个也很好理解，就是亮度，一个颜色的明度越高这个颜色看起来就越亮，一个颜色明度越低看起来就越暗，任何颜色亮度最高时都是白色，亮度最低时都是黑色。
+
+绘制UI时也要把握明度之间的对比，根据风格决定明度之间的对比，像素因为需要有一定的衔接性，所以明度对比不会过大，但是之间的明度对比也是肉眼可见有变化的，而不是几乎不可见的明度变化。
+
+![img](./images/7_3.png)
+
+### 纹理复杂度
+
+我们通常称之为分辨率，一个面分辨率越高，那么这个面可以绘制的内容就x越复杂，原版是一个面16x16个像素，一些绘制比较写实的材质可以达到64x64像素，甚至一些让玩家完全看不出来像素感的纹理可以达到1024x1024分辨率。
+
+材质的纹理复杂程度主要是由两个元素影响的，一是颜色数量，颜色越多纹理看起来就越发的复杂。还有就是绘制的结构，只需要数种不同的颜色，通过一些绘制的技巧就能绘制出来非常复杂的材质纹理。
+
+根据自己的材质风格来确定复杂程度，越写实的材质就越复杂，越卡通的复杂度就尽量的简化。
+
+![img](./images/7_4.png)
+
+Jakob.z的方块概念材质材质，材质饱和度较高，但是纹理复杂度较低，看着就非常卡通风。
+
+![img](./images/7_5.png)
+
+Yuushya绘制的16x材质包，相对复杂程度就高很多。
+
+## 常见风格
+
+### 卡通风格
+
+通常会是饱和度较高，明度也较高，纹理的复杂程度较低，这样组合起来给人看起来就会非常的卡通。
+
+![img](./images/7_6.png)
+
+### 古风风格
+
+我们说的古风通常指中国风风格的材质，中国风材质可选的范围非常大，你可以选择饱和度高纹理复杂的纹样。也可以选择饱和度低纹理复杂度较低的水墨风格。
+
+古风风格主要取决于你的绘制形式，以及元素的展示。
+
+![img](./images/7_7.png)
+
+### 科技风格
+
+科技风格主要是偏冷色，一般是高对比度，材质的纹理也较为复杂，科技主要是黑色、蓝色。冷色可以给人一种冰冷的感觉，同时大量的黑色作为底色，加上一些蓝色作为点缀，就会给人一种非常科技的感觉。
+
+<img src="./images/7_8.png" alt="img" style="zoom:120%;" />
+
+### 中世纪风格
+
+中世纪风格一般情况下都是以欧洲为背景，中世纪材质我们想要表现就需要较为复杂的纹理，通过绘制较为复杂的结构让玩家感觉到真实感。同时这个风格我们会尽力降低饱和度，较低的饱和度会让玩家更有真实感。
+
+<img src="./images/7_9.png" alt="img" style="zoom:100%;" />

docs/mconline/55-交互设计教程/8-规范设计.md

@@ -0,0 +1,50 @@
+---
+front: https://nie.res.netease.com/r/pic/20220408/82d22891-db41-49ab-9f75-695db1b83f27.png
+hard: 入门
+time: 5分钟
+selection: true
+---
+
+# 规范设计
+
+## 设计的统一性
+
+在设计UI时，设计的统一非常的重要，这里的尺寸有图标的尺寸，图标之间的间隔，文字的大小，颜色之间的合理性，下面就来一起看看有哪些比较需要注意到的内容。
+
+### 图片尺寸大小x
+
+如果想要让玩家感受到比较明显的像素感，这里推荐的分辨率是不超过32x32大小的一个图标，因为如果达到64x64就会变得比较写实了，相对的像素感就会大幅度减弱。
+
+如果你确定了自己的分辨率，就尽量保持这个分辨率进行绘制，比如你绘制了16x分辨率的UI，然后你的物品图标全部是用32x绘制，这样在其他人看起来就是非常不协调的，给人一种很强的拼接感。
+
+![img](./images/8_1.png)
+
+### 各个图片的间隔
+
+每个图片之间的间隔需要有统一的规范，才能让UI看起来更加的整齐舒服。根据图片的功能决定图片之间的间隔，背包的物品栏，之间间隔不宜过大，不然会导致玩家拖动物品时较为麻烦。
+
+技能UI之间的间隔需要相隔较远，不然容易误触其他技能。
+
+![img](./images/8_2.png)
+
+### 颜色的含义
+
+颜色的运用在我们生活中随处可见，很多时候我们甚至不需要看内容，我们只是通过背景文字颜色我们就能大概猜到想要表达什么。
+
+比如红绿灯，就是在潜移默化的告诉我们，绿色代表着一种确定、安全、可通行。而黄色则代表需要注意、有一些提醒的意思。而红色则代表禁止，警告的意思。
+
+生活中类似的例子有很多，所以我们本能的也对部分颜色有较为潜意识的理解。
+
+![img](./images/8_3.png)
+
+#### 带有明快清新绿色代表确定
+
+大部分创作者在绘制UI的确定按钮或者类似功能的按钮时都是选择绿色或者接近的颜色，因为绿色相对其他颜色更加的明快，相对灰色白色也更加容易注意到。
+
+#### 带有警告性质的红色代表取消
+
+红色大部分情况下都有一种警告的意味在里面，大部分能看到红色都会仔细观察一下红色的内容里面有什么。所以红色很适合用做一些需要谨慎操作的UI背景色。
+
+#### 灰色的代表无效
+
+灰色在大部分背景下都是存在感较低的颜色，尤其是越接近背景色的灰色越容易被忽略。这样也是在提示玩家，这里有一个按钮，但是它并没有生效。

docs/mconline/55-交互设计教程/9-UI效果.md

@@ -0,0 +1,37 @@
+# UI效果
+
+UI效果主要是为了给玩家一个视觉反馈，在玩家和UI交互时提供更好的体验效果。
+
+## UI动画
+
+UI动画是体现UI高级感所必须要有的，如果所有的UI都是直接显示/关闭，那么就会看着非常生硬，相反如果有一些过度的动画，就能让整个组件的品质提升非常多，在UI层面上就给人一种不简单的感觉。
+
+<img src="./images/9_1.gif" alt="Image from Gyazo" style="zoom:130%;" />
+
+### 点击效果
+
+点击效果就是给与玩家点击UI时的反馈，常见的点击效果有
+
+点击时图片使用代码控制图片的进行一个微小的缩小，这样可以给用户一种按钮进行下压的感觉。
+
+点击图片时，切换一个点击颜色的贴图，比如原按钮时白色的，点击时按钮就变成绿色的，进行一个反馈。
+
+### 移动效果
+
+部分UI并不需要一直展示在玩家的主菜单，比如原版的背包，而玩家点击背包按钮时仔细观察就能发现，背包并不是突然打开的，而是从下往上快速弹出的。这就是一种移动动画，他能把原本看起来比较死板的界面开启变得更加有活力，生动有趣。
+
+### 渐隐/显效果
+
+这也是常用的UI效果，通过代码控制UI的透明度来达成逐渐显现和组件隐去的效果，这种适合用于背包GUI、或者距离边缘较远的UI内容，如果距离边缘较远使用移动效果，可能会给玩家一个很繁琐的感觉，所以使用调整透明度的动画效果可能会更加合理舒服。
+
+## UI音效
+
+UI音效也是一个提高高级感的方法，点击按钮的音效应该要尽量的简单，识别度高，甚至可以直接使用原版的音效
+
+### 点击音效
+
+点击音效是最常用的反馈音效，通常我们在创建按钮时会有一个默认的按钮点击音效，这个音效我们也可以替换成更加有趣的音效，比如我们点击自己创建的背包按钮，发出的是原版的箱子音效，这样比原版的点击音效或许更能给人耳目一新的感觉
+
+### 无效音效
+
+这类音效主要是反馈给玩家，此处不可点击，并且UI也不会产生变化，以此提醒玩家此处点击时无效的。