基于多元质感的游戏系统界面设计研究与实践

摘要

本文认为基于微软的FluentDesignSystem的质感化设计，是继拟物化、扁平化界面思想之后的一种新的设计发展趋势。多元质感的体验单元是游戏系统界面的体验范式。论文结合理论构架，分析设计目标，梳理并积淀游戏系统的界面设计方法，构建一套自洽游戏系统体验单元，并深入分析和应用游戏系统界面的质感要素。　　首先，本文采用文献研究和案例分析方法，研究了用户界面的拟物化，是一种信息物化的自然性；扁平化是代表信息爆炸的高效性；而质感化的界面思想代表了信息体验的流畅性。论文还重点探讨了用户界面的发展背景和趋势，总结了用户界面的审美趋势、情感诉求等发展背景，并提出了拟物化、扁平化和质感化的设计发展趋势。用户界面从拟物化、扁平化到质感化，也是从关注信息本身的设计风格和设计语言，上升为注重用户体验的设计体系的过程。　　然后，本文在《游戏系统界面的多元质感要素问卷调查》研究中，验证与分析能够提升用户体验的多元要素。提出多元质感是以质感表达为出发点的多元体验设计体系，注重现实与虚拟世界的模拟和映射，在模拟事物的形态“拟形”和映射事物给人的感觉“拟意”中使用户产生共鸣体验。并提出多元质感的设计方法，即构建信息界面、信息布局、信息交互、信息反馈和信息适配的用户界面体验范式。在信息界面中，通过材质表现统一调性的风格化；在信息布局中，通过深度和时效表现真实空间的沉浸感；在信息交互中，通过语义来增强现实的象征式；在信息反馈中，通过光效和动画来渲染气质的表现力；在信息适配中，通过比例来实现形式自洽的拓展性。　　最后，本文通过设计实践，阐述实习项目的实践经历、交互设计流程，并且结合项目案例分析论述多元质感在游戏系统界面的应用，再通过用户研究数据进行验证反馈。多元质感作为新趋势下游戏系统界面的范式参考，也是最基本的用户体验单元。本课题中作者在网易实习项目《StormArena》(中文名风暴对决)在加拿大服和国内上线。其出色的界面设计品质也在腾讯游戏学院的行业共建中成为范例。多元质感的设计体系在互联网产品逐渐同质化的环境中，为追求多元个性化，在界面设计过程中提供必要的界面沉浸感，品牌辨识度和自适应性，也为构建更为流畅和质感的信息体验提供理论和实践参考。

目录

声明

第 1 章 绪 论

1.1 选题研究意义

1.2 选题研究背景

1.3 选题研究国内外现状

1.4 选题来源

1.5 论文研究的主要内容、研究思路与框架

1.6 论文研究的创新点

1.7 本章小结

第 2 章 用户界面的概述及发展趋势

2.1 用户界面的定义及发展概述

2.2 拟物化——信息物化的自然性

2.2.1 拟物化风格定义和发展历程

2.2.2 拟物化风格小结

2.3 扁平化——信息爆炸的高效性

2.3.1 扁平化风格定义和发展历程

2.3.2 扁平化风格小结

2.4质感化——信息体验的流畅性

2.4.1质感化的定义和发展背景

2.4.2质感化界面思想的发展历程和现状

2.5 游戏系统界面的概述

2.5.1 游戏系统概念

2.5.2 游戏系统的分类和作用

2.5.3 游戏系统的重要性

2.5.4 本课题中游戏系统界面概况

2.6 界面的发展背景和趋势总结

2.6.1 界面的发展背景分析

2.6.2 界面的发展趋势总结

2.7 本章小结

第 3 章 游戏系统界面中多元质感的要素研究

3.1 游戏系统界面的质感要素用户研究

3.1.1 用户研究的问卷调查概述

3.1.2 质感要素的五点量法分析

3.2 游戏系统界面中质感要素的竞品分析

3.2.1 信息界面中材质要素分析

3.2.2 信息布局中深度、时效要素分析

3.2.3 信息交互中语义要素分析

3.2.4 信息反馈中光效、动画要素分析

3.2.5 信息适配中比例要素分析

3.3 多元质感在游戏系统界面设计概念与方法

3.3.1 多元质感的在游戏系统界面的概念

3.3.2 多元质感在游戏系统界面的设计方法

3.4 本章小结

第 4 章 多元质感在游戏系统界面的设计实践

4.1 设计实践流程概述

4.2 新手训练关系统的设计流程

4.2.1 设计需求与分析

4.2.2 交互线框图设计及迭代

4.2.3 高保真设计及迭代

4.2.4 动效设计及迭代

4.3 抽奖系统的设计流程

4.4 排行榜系统的设计流程

4.5 模式选择系统的设计流程

4.5.1 相关用户研究的数据及分析

4.5.2 设计迭代过程

4.6 段位等级系统的迭代流程

4.6.1 相关用户研究的数据及分析

4.6.2 设计迭代过程

4.7 项目小结

第 5 章 设计总结与展望

5.1设计总结

5.2设计展望

参考文献

附录A：游戏系统界面的多元质感要素的问卷调查

附录 B：课题项目网易《Storm Arena》的海外宣发图

附录C：展板

致 谢