程序员人生 网站导航

游戏交互设计入门

栏目:综合技术时间:2015-04-22 08:24:36

下面是学习的1点笔记。

游戏交互设计需要斟酌的3个问题 - 可用性,易用性,用户体验。


交互设计应当是在理解用户基础上以目标为导向的设计方法。


界面主要有两种功能:提供信息允许用户做某事


关于游戏UI设计师

定义:通过设计界面让游戏系统和玩家之间能够互动文娱的人。


要求

1.了解游戏,最少得是半个策划;

2.懂交互,让玩家界面操作无挫折感;

3.对细节有寻求,1像素偏差也要调;

4.要文娱,让最僵硬的东西也能舞蹈。


贴个招聘UI设计师的要求

职责描写:

1、 根据项目的策划案和相干制作规范,完成游戏界面风格的创意设计,参与具体页面的制作;
2、 完成游戏界面的设计,布局,及美化工作;
3、 对游戏产品界面的风格及用户体验提出改进意见;
4、 游戏的用户界面的设计及ICON、LOGO等元素设计;
5、 细化各类UI元素,将各类的细化元素切分保存,并利用UI编辑器对分类素材进行拼接;
6、 部份公司网站页面和各类网络广告的设计。

职位要求:
1、 精通Photoshop、Flash、Dreamweaver、CorelDraw等设计软件,熟习DIV+CSS者优先;
2、 对UI设计及制作有系统的理解,善于掌控整体风格进行设计;
3、 有良好的手绘基础和较强的图片材质效果处理能力,对色采搭配敏感;
4、 2年以上设计工作经验,有成熟作品,对交互设计有较深的理解和实践;
5、 工作主动,有责任心,能够承受工作压力,有良好的沟通能力和团队合作精神;
6、 大专以上学历,美术计算机平面设计、艺术设计等相干专业;
7、 有完全的游戏项目经验者优先;


需要自问

1.我需要向玩祖传达哪些信息?

2.玩家需要哪些功能?

3.需要突出哪些内容?

4.窗口处于何种环境中?


基本设计流程

1.流程图

* 知道每一个屏幕上需要按压哪些按钮;

*必须让玩家能够前进道下1个窗口中,并在大多数情况下能够回到之前的窗口。


方法:列出需要设计的所有屏幕列表,然后围绕这些屏幕创建流程图,从中能够明确它们彼此之间是如何相互协作的。1个例子以下。

Momonga流程图(from paladinstudios)


2.草图

在草图中可以列出真正需要的内容。


*.尽量将信息量和按钮减少到最低的数量;

*.明确每一个屏幕都有1个主要目的;

*.谨记屏幕流程处的所有情况;

*.删除任何重复的内容,除非真的有存在的必要;

*.斟酌到需要在多个屏幕上分割的内容,所以要尽量地紧缩信息量。


3.创建线框图

在线框图中不加任何修饰,也不留任何缺口。可以放到目标装备上进行测试。



*.使用1种能够支持所有装备分辨率的模板;

*.设计之前和程序员讨论如何真正落实行动;

*.全部进程都和程序员1起核实设计的可行性;

*.在Photoshop中卫游戏每个屏幕分组,并用线框图去填充这些屏幕。


4.创造设计

由设计师对UI进行设计


5.测试与迭代


游戏中新手指南的设计原则

1.只介绍与众不同的部份,约定俗成的地方不介绍;

2.内容尽可能不要超过3章;

3.在第1屏指引机上推出指引的按钮;

4.如果担心潜伏用户存在理解困惑,可以直接录制Vedio Tutorial。


反设计的情况

1.不管甚么类型的游戏都不该有超过3个类型的Button;

2.字体可以用美术,但是用不了美术的字体种类必须少,特别是中文;

3.设计UI的技能在于使得系统和玩法表现得更棒,而不是为了去限制和束缚系统的设计;

4.连个界面间的切换必须得有,但是不能过于复杂或轻浮;

5.用户体验是主观的,但是对UI来讲,长时间积累的用户习惯是客观的。


参考

论述手机游戏用户界面设计的8大步骤 - http://gamerboom.com/archives/53747

论述熟习感对电子游戏界面的重要性 - http://gamerboom.com/archives/60362

分析高收益手机游戏的美术设计特点 - http://gamerboom.com/archives/73534

保存功能性应是游戏UI设计重要斟酌因素 - http://gamerboom.com/archives/42939

以《愤怒的小鸟》为例解析游戏易用性标准 - http://gamerboom.com/archives/34351

部落冲突(COC)UI浅析 - http://blog.sina.com.cn/s/blog_86ba7be10102uybj.html

设计好1款iOS游戏UI的细节 - http://www.gameres.com/thread_213839_1_1.html

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐