高级
1. You and me 2. Let me help you 3. Show me the money 4. There is no spoon

Company Logo
You and me
• 谁是谁？
– you. 用户 – me . 我们（产品）
•
Why you and me ?
如果活在世上不做有意义的事情， 那么不如死了！ -----《多杰语录》
- 这是一个免费教程,谨防受骗上当。 - 教程中所含插件，软件，都是和我的朋友借的，如有版权问题， 请联系朋友，与作者无关。 - 限于作者水平，教程中错误以ຫໍສະໝຸດ 遗漏之处，有本事你来打我啊！
Company Logo
Unity3d界面设计教程 --------- (NGUI、DaiKon)
by:邪让多杰
教程简介
初级
中级 高级
基础控件与操 作
实战:制作一套 完整的游戏界 面
?
声明
本教程使用软件：
•屏幕录像专家 •Unity3d游戏引擎 •DaiKonGUI插件 •NGUI插件 v4.0 •WPS套装 •Windows8系统 •土豪外星人M18x •基佬一个
准备
• 总体结构
– NGUI 统一的层管理，我们约定。基础背景0~1层。一级面板在2层。面板元素3~6层 二级 面板7~10层 。不能超过3级面板。 所有的界面做成在一次。统一调度。 好处：快速响应，结构清晰 坏处：内存消耗，开发麻烦 – Daikon-GUI 只用保持好面板层次关系就好。同样不能超过3级面板。 同一Panel下，一个层只能有一个控件
• 普通button • 图片button
基础控件
• 其他控件快速演示
– – – – – – – – – 拖拽控制器 only Daikon 选择框 列表框 进度条 大小控制器 only Daikon 富文本 only Daikon 滚动条 滑块 输入框
基础控件
• Tween 组件 在两个值之间随时间进行渐变，用于实现一些伴随时间的效果。 比如：淡入，淡出，移动，旋转，放大缩小等。
中级
1. 制作前的准备 2. 开始动手 3. 总结

Company Logo
准备
• 我们要做什么？
一个游戏界面
•
它包含什么？
– – – – – – – – – – – 登录 人物选择界面 加载 技能栏 任务栏 信息栏 装备栏 背包 活动信息栏 商店，功能店，任务对话框 剧情对话框
道理谁都懂，凡夫谈资，学者运用。 -----《多杰语录》
- 这是一个免费教程,谨防受骗上当。 - 教程中所含插件，软件，都是和我的朋友借的，如有版权问题， 请联系朋友，与作者无关。 - 限于作者水平，教程中错误以及遗漏之处，有本事你来打我啊！

Company Logo
初级
1. 2. 3. 4. 5.
– DF-GUI
• Tweens
– NGUI
• ITween
教程简介
初级
中级
高级
基础操作
实战:制作一套 完整的游戏界 面
?
声明
本教程使用软件：
•屏幕录像专家 •Unity3d游戏引擎 •DaiKonGUI插件 •NGUI插件 v4.0 •WPS套装 •Windows8系统 •土豪外星人M18x •基佬一个
准备
• 有哪些可用的元素？
– – – – – – – – 文本 按钮 选择框 输入框 下拉选框 进度条，滑块 滚动条 面板
• •
如何将这些面板组合成我们想要的？ 在使用NGUI 和 DF-GUI时，分别要注意什么？
– NGUI ： 多个物体可以属于同一层。层一定要弄好，不能混乱。 – DF-GUI： 层是独立的。在一个Panel下，一个层只对应一个控件 – both: 对齐方式一定要设定好，否则大乱
•
我有很多的魔法
– – – – 删除 组织 隐藏 转移
•
我的灵魂能力
– 思考
Thank you
by:邪让多杰
人物选择界面
• 角色列表面板
从外部获取数据，通过预制体，显示信息。 （动态列表方法，之后的动态列表均不讲解，与此处做法无差异。）
•
角色展现面板
界面与游戏的结合。
•
进入面板
按♂钮
教程简介
初级 中级
高级
基础操作
实战:制作一套 完整的游戏界 面
设计的艺术
声明
本教程使用软件：
•屏幕录像专家 •Unity3d游戏引擎 •DaiKonGUI插件 •NGUI插件 v4.0 •WPS套装 •Windows8系统 •土豪外星人M18x •基佬一个
– Ngui
• • • • 颜色： [FF0000] 内容 [-] (没有[-]时，作用域为之后的所有文本。 图片：需要自定义输入内容。 阴影 轮廓
基础控件
• Button ----- 按钮
用来接收玩家的功能操作的控件： – DaiKon
• Button自身集成了图片，文字
– Ngui 旧版本采用消息机制，新版本使用了委托的方式
Atlas 与 Font Panel 与 Label Button 其他控件 Tween

Company Logo
Atlas 与 Font
• Atlas ---- 图集
将多张零散的图片融合成为一张图，低碳环保。
•
Font ---- 字体
– 动态字体
• DF-GUI公开版本并没有动态字体，可以和作者要。
•
额外的任务----我们更好
– – 慎重专家建议。 挖掘客户数据
Show me the money
• Show me the money
最少的操作，完成最多的任务。没什么不可能。只有你不够了解。
•
我是大师，你懂吗？
对交互界面进行分等级展现，比如：
• 我有很少的时间进行游戏 • 我X小时后有事 • 我有大把的时间进行游戏
– Ngui
• Panel 常规面板
– 常规 – 静态 – 切割
• 选项卡要玩家单独实现
基础控件
• Label ----- 文本栏
用于显示文本信息，特殊功能： – DaiKon
• • • • • 颜色：[color #ffffff] 内容 [/color] 图片: [sprit "图片名称"] 渐变：可以在属性栏里设置渐变 阴影 描边
– 只有搞清楚我们与用户的关系，才能继续思考下去。这是思想的源泉。
•
我们要清楚什么问题?
– 需求
• 用户，想要看什么 • 我们，要告诉用户什么
– 资源
• 用户，用户需要付出什么 • 我们，能给用户带来什么
Let me help you
• 谁是谁？
– 用户是什么？
懒惰，盲从，业余，愚蠢，甚至对你带有偏见。
在玩家进入的时候，设置级别，级别决定了展现的内容，提醒的信息。甚至最后的闹 铃，很轻松的让玩家放心的进入您的游戏。
•
智能施法
程序员的麻烦，就是用户的信赖。 一个Button，如何才能处理更多的需求？
There is no spoon
• 我的法力无边
推荐书籍： – 《简约至上:交互式设计四策略》 – 《认知与设计:理解UI设计准则》 – 《亲爱的界面•让用户乐于使用、爱不释手》 – …………等等等等
使用标准的字体文件(.TTF)，能屈能伸份量大。 – 图集字体 将字体弄到图片里，根据坐标静态调用。好处可以使用各种效果，以及聊天表情。
基础控件
• Panel ----- 面板
运行在窗口中的面板，用于组织界面元素。 每一个Panel，都会让层从0开始。 – DaiKon
• Panel 常规面板 • Scroll Panel 滚动面板 • Tab Container 选项卡面板
过程的愉悦必定带来美好的结果。 享受过程尤为重要。 -----《多杰语录》
- 这是一个免费教程,谨防受骗上当。 - 教程中所含插件，软件，都是和我的朋友借的，如有版权问题， 请联系朋友，与作者无关。 - 限于作者水平，教程中错误以及遗漏之处，有本事你来打我啊！

Company Logo
•
你眼中的图
你想让用户看到的图
实际用户看到的图
Let me help you
• 返璞归真----让您简单
设计时，我们只有一个目的，让用户以最简单的方式实现他的需求。 任何与简单为敌的功能，都是坏的功能。
•
设计目的----让您习惯
传统是智慧的糟粕，但创新，需要传统的基石。 对于用户来说，学习新事物绝对是不可容忍的。 那么，我们只能基于用户已经存在的习惯，去让他处理更多的事物。 – PC 基于Window与Mac的习惯 – 移动平台。 基于用户的物理习惯