49 高玉娇等 比较欠缺 这里根据手机游戏行业官方网站在设计 内容的独特性 网站内容与功能的可移植性与扩展 性 在网站信息架构方面 针对游戏内容与企业自身 内容 分析信息分类 信息分级以及信息组合架构 加 入用户自产生信息内容设计 建立快速信息交流与反 馈 交互设计方面 基于同侪效应 对用户社交行为

48 包装工程 PACKAGING ENGINEERING 高玉娇 覃京燕 王晓慧 北京科技大学 北京 100083 摘要 目的 基于手机游戏与网站设计的交互设计原则与用户体验研究成果 从信息架构 交互设计以及 视觉设计3个方面 探讨基于用户体验的手机游戏行业官方网站设计的方法与流程 方法 方法 对比分析国内 外手机游戏行业官方网站设计存在的弊端 并采用问卷调查的方法了解用户需求 结论 结论 信息架构方面 加入用户自产生信息内容设计 形成快速的信息交流与反馈 交互设计方面加入符合交互逻辑的合理动 效 交互行为及其相应操作 网站引导设计和及时有效的交互反馈 构建良好的用户体验 视觉设计方面兼 具扁平化与拟物化的双重特征和统一的品牌识别系统特征 关键词 手机游戏 官网设计 信息架构 交互设计 中图分类号 TB472 文献标识码 A 文章编号 1001-3563 2015 24-0048-04 Official Website Design for Mobile Phone Game Industry GAO Yu-jiao QIN Jing-yan WANG Xiao-hui University of Science & Technology Beijing Beijing 100083 China ABSTRACT From three aspects of information architecture interaction design and visual design based on the interactive design principles and user experience achievements of mobile phone game and website design it tries to explore the methods and process of official website design for mobile phone game industry official websites based on user experience. Firstly it uses the comparative analysis drawbacks of design in mobile phone game industry s official websites and using the questionnaire to survey the user s needs.secondly case study is used to support the design disciplines in interaction design and interface design.in Information architecture it adds user generated-information architecture design for a quick exchange of information and feedback.in the interaction design it adds the reasonable interaction workflow logic and dynamic effects gesture and behavior navigation design for the instant interaction and feedback to create a good user experience like self adaptive and mass customizations.the visual design selects the independent innovation with the unified style to combine flat and Hypostatization brand characteristics. KEY WORDS mobile game website design information architecture interaction design 2014 年智能手机已占到市场份额的 66% [1] 随着 种是以传统桌游为主 手游为辅助的官网设计 另外 智能手机的迅速普及 手机游戏行业在 2013 年之后即 一种是聚集了各种手游品牌 形成平台型的官网设 呈井喷式发展趋势 与此同时 国内外手游市场出现 计 总体而言 国内小型游戏公司由于缺乏品牌意 多样化的发展态势 与手游市场紧密配合的游戏官 识 游戏企业官网设计缺乏统一规划 网站信息架构 网的设计也迅速发展起来 目前手游官网有如下几 冗余杂乱 网站内容大部分是手游内容的简单复制与 种形式 一种是具有手游家族品牌的官网 拥有桌游 简单呈现 在跨平台的游戏内容的视觉设计 游戏交 到手游的全系列游戏门类的介绍及网络推广平台 一 互设计及用户体验 网站设计跨平台的适配性方面都 收稿日期 2015-08-06 基金项目 国家自然科学基金资助项目 71173012 北京科技大学本科教改重点项目 JG2013Z05 作者简介 第一作者 高玉娇 1991 女 河北人 北京科技大学研究生 主攻界面设计和视觉传达 通讯作者 覃京燕 1976 女 四川人 博士 北京科技大学教授 主要研究方向为交互设计 信息设计等

49 高玉娇等 比较欠缺 这里根据手机游戏行业官方网站在设计 内容的独特性 网站内容与功能的可移植性与扩展 性 在网站信息架构方面 针对游戏内容与企业自身 内容 分析信息分类 信息分级以及信息组合架构 加 入用户自产生信息内容设计 建立快速信息交流与反 馈 交互设计方面 基于同侪效应 对用户社交行为操 作以及用户网站版块的需求进行了分析 加入合理动 效 交互行为及其相应操作 网站引导设计和及时有 效的交互反馈 形成良好的用户体验 视觉设计方面 采用问卷调查和访谈的方法 发放问卷 150 份 回收 124 份 问卷回收率 82.6% 进行用户对网站类型与内 容的调研 通过笔者对原型 回声游戏网站 的设计 与开发 从信息架构 交互设计以及视觉设计 3 个方面 阐述设计理念 1 信息架构设计因素 1.1 条理清晰易于管理 目前游戏类门户官网冗长繁杂 信息分级模糊 轻量级的信息架构能够根据玩家的分类与差异性需 求 将信息合理分类 并根据用户体验环境与需求的 差异 进行定制推送信息 通过问卷调研 玩家最关 注的因素分布中 关注页面布局的有 112 人 关注内容 信息的有 103 人 关注更新速度的有 100 人 这是游戏 玩家较为关注的 其次才是视觉上的感官刺激 有 98 人 因此在网站架构设计上要设计足够的灵活性 方 便网站的信息更新迭代[2-3] 适应快速发展的手机移动 游戏行业的步伐 回声游戏的网站信息架构设计 见 图 1 从用户体验需求和企业发展等多角度出发 将信 息进行了星级划分 如主打板块为用户参与度较高的 论坛及社交板块 并制定出清晰 有条理 易于管理 的信息架构 1.2 加入用户自产生信息内容设计 目前国内腾讯 网易等游戏网站以 主打游戏展 示版块 为主 但通过对用户的调查得知 68%以上的 玩家对论坛及活动感兴趣 如查找攻略 玩家经验分 享以及 COSPLAY 活动通知等 其次是游戏基本信息 查找 游戏角色 武器装备等基本信息 此外 问卷 调研结果显示 用户反感 大量文字版块 90%的用户 图 1 信息架构 Fig.1 Information architecture 的首要关注点是标题 其次 83%的用户关注文字内容 信息 在网站架构信息组织中 应以用户为中心 如 便于用户查找信息 回声官网以用户关注度较高的 回声游戏从用户的需求出发 贴合用户的心智模型 需求板块 论坛 活动及游戏三大板块 为主 并将信

50 包 装 工 程 息设计进行图形化 图表化 标题化处理 通过信息组 织差异 体现不同级别页面在信息架构中的级别差 2 交互设计元素 异 网站主页界面图见图 2 传统的国内游戏官网中 用户所处位置为接受 者 网站的信息来源渠道单一 网站更新慢 用户反馈 2.1 加入合理动效 交互行为及其相应操作 机制不完善 网页衡量标准见图 3 通过调研得知用 动效设计越来越能够体现网站质量 并吸引新一 户对于评论版块参与度很高 作为迭代迅速的手机 代手机游戏玩家的注意力和好奇心[6] 游戏网站设计 游戏行业 用户参与可极大增加用户粘度 通过数据 中 动态因素居多的网页设计深受用户欢迎 目前手 分析 追踪用户需求 利用用户参与反馈的数据价值 机游戏官网交互设计多为静态视觉设计 或采用 flash 加入用户自产生信息内容设计 形成快速信息交流与 循环广告模式 见图 5 图片摘自三国杀和腾讯官网 反馈 回声游戏加入了社交平台端口 OSNS 以及 UGC 问卷调查数据显示 70%以上的用户对于过多的 乏味 用户自产生信息内容 模式 [4-5] 用户可以进行分享 的广告持比较反感的态度 研究表明 频繁闪烁的动 评论 上传等操作 用户评论输入框及用户登陆界面 画容易引起癫痫患者病症复发 游戏网站的交互设 见图 4 企业能够及时得到玩家反馈 同时能够让玩家 计需考虑用户心智模型 把握动效与信息传达效果的 的创意想法转变为游戏内容 有助于提升网站注册用 平衡 回声游戏加入 3D 引擎 直观展现最新游戏 同 户的转化率 拓宽品牌营销渠道 时 玩家可在网页端试玩游戏 用真实的产品打动用 户 而非自夸的平面广告轮播图的形式 大大提高了 用户参与度和移动端安装比率 回声游戏公司团队 成员介绍的交互设计中 增加交互式头像按钮的展示 效果 可激发用户的猎奇心理 见图 6 图 2 网站主页界面 Fig.2 Homepage interface design 图 5 国内网站广告截图 Fig.5 Domestic website advertising screenshot 图 3 网页衡量标准 Fig.3 The measure standard of website 图 6 团队介绍动效 Fig.6 Team performance 2.2 网站引导设计和及时有效的交互反馈 基于同侪效应 抓住用户的跟风心理 可进行引导 图 4 用户评论输入框及用户登陆界面 性交互设计 目前国内的游戏企业网站大部分采用文 Fig.4 The user comment box and user login interface 字连接形式 交互直白 反馈差 而一个大型的官方网

51 高玉娇等 站 直观 易理解 简洁的交互行为引导设计 可以让玩 家较快找到相关信息 增强信息传达效果 回声网站 首页进行新游戏和热门游戏的推荐 banner 图设计 采 用切换的模式 能够吸引用户的关注 并设立 了解更 多 的链接按钮 方便用户快速跳转页面 论坛版块 中 用户在未登录状态下 评论框处于不可编辑状态并 提示用户进行登录操作 指引用户完成评论体验 及时有效的交互反馈 是形成优秀用户体验的重 要元素 大部分的游戏企业网站用户的身份也处于 接受信息的角度 缺少交互接口 用户无法很好地参 与到网站中来 [7] 游戏官方网站大多加入了评论等窗 口 但玩家的评论得不到及时反馈 消耗了玩家的积 极性 回声游戏网站设计中开放的第三方账号登陆 平台 让用户参与到网站中来 进行上传多种形式的 资源攻略 视频 音频 图片 同时用户可以随时评 论 构建及时有效的交互反馈 3 视觉设计元素 图 7 网站色彩提取和使用规范设计 Fig.7 The website color extraction and use of design specification 和视觉压力 同时不利于用户快速查找信息 此外 通过问卷得知 手机游戏玩家多为 18~40 岁的年轻互 联网原住民一代 这中间又以 18~30 岁最为密集 比例 约为 72% 因此 文字应字数简短 精益求精 比例放 大从而适应快速阅读 跳读 使用与企业品牌相一致 的 统一的字体库 采用文字图形化的设计手法 适应 读图时代 来获取信息的特点[10] 基于用户的问卷调研 得知 90%的用户对标题比 较感兴趣 同时对于 73%的玩家来说 图片的吸引程 度远远大于文字 因此在文字设计上力求精简化 图 形化 整体化 在图形的设计上 保持简洁大气 色彩 鲜亮 动感活泼 语义明确都能够很好地衬托出企业 3.1 兼具扁平化与拟物化的双重特征 目前大部分游戏官网设计移植游戏设计的风格 不利于企业长期拓展玩家体验 推广游戏 例如推出 保卫萝卜 的游戏公司 官网背景直接采用游戏场景 图 这在游戏黄金时期 能够很好地起到宣传作用 处 于优势状态 但是当公司开发的游戏增多 将会导致 网站风格的大变身 削弱了玩家对企业官网的识别度 和忠诚度 同时 手机游戏开发迭代迅速 官网风格随 时更改 增加了网站的维护成本以及时间消耗[8] 因此 网站设计要极具品牌特征 形成与企业理念相符合的 网站风格 避免移植游戏风格 的形象和产品的高质量 3.3 独立创新 调查得知 目前国内外游戏行业的大部分网站采 用表单设计样式 即棋盘式布局 虽能很好利用空间 但呆板无趣 是用户对于游戏门户网站的反感因素中 最重要的因素之一 表单布局样式过于死板僵硬 无 创新 不能提升玩家视觉感官和视觉思维 创新 娱 乐是游戏的代名词 作为游戏官网的设计 要与沉稳 凝重的企业级官网相区分 可加入音效设计 创造出 活泼 有趣味的网站风格[11] 让用户在浏览过程中 激 发兴趣点 提高关注度 3.2 统一的品牌识别系统特征 目前的游戏门户类网站以及国内游戏官网 其界 面色彩繁杂 搭配不合理的现象比比皆是 [9] 通过对 用户的调研得知 70%以上的用户对网站的界面是否 美观和时尚很在意 色彩设计作为界面设计中最重要 的元素 是决定用户停留时间长短的重要因素之一 统一 规范的色彩标准 对于一个视觉感的游戏网站 有着不可忽视的地位 因此 色彩运用上应规范 标 准 根据企业的特征和 VISI 系统等制定网站主体色和 辅助色 见图 7 目前国内游戏门户网站大多页面冗长 文字繁 多 大小各异 在一定程度上给用户产生很大的心理 4 结语 这里对比研究了国内外手机游戏官网设计 通过 问卷调查分析了用户需求 对基于用户体验的手机游 戏行业官方网站设计原则进行了探讨 在信息架构设 计 交互设计和视觉设计三大方面提出了设计准则 信息架构加入用户自产生信息架构设计 增加大规模 客户定制 形成快速信息交流与反馈 交互设计加入 符合交互逻辑的合理动效 交互手势及行为引导设计 和及时有效的交互反馈 构建良好的用户体验 视觉 下转第 56 页

56 包 装 工 程 QIN Jing-yan.The New Rules in Digital Art[J].Creative and Design,2010,7(2):10. [5] 朱 晓 阳, 朱 华, 欧 永 和. 极 简 主 义 在 手 机 APP 启 动 图 标 设 计 中 的 运 用 [J]. 包 装 工 程,2014,35(8):15. ZHU Xiao-yang,ZHU Hua,OU Yong-he.Minimalism in the Phone APP Launch the Application of Icon Design[J].Packaging Engineering,2014,35(8):15. [6] 王 伟 伟. 传 统 文 化 设 计 元 素 提 取 模 型 研 究 与 应 用 [J]. 包 装 工 程,2014,35(6):73. WANG Wei-wei.Traditional Culture Design Elements Extraction Model Research and Application[J].Packaging Engineering,2014,35(6):73. [7] 覃 京 燕, 巫 濛, 徐 馨. 移 动 传 媒 中 基 于 线 上 社 会 关 系 网 络 (OSNS) 的 交 互 界 面 体 验 研 究 [J]. 现 代 传 播,2010(1): 162 163. QIN Jing-yan,WU Meng,XU Xin.Online Social Relation Network Based on Mobile Media(OSNS)Experience of Interactive Interface[J].Modern Communication,2010(1):162 163. [8] 周 杨, 张 宇 红. 情 感 化 设 计 中 的 记 忆 符 号 分 析 研 究 [J]. 包 装 工 程,2014,35(4):70. ZHOU Yang,ZHANG Yu-hong.Memory Symbol of Emotional Design Analysis[J].Packaging Engineering,2014,35(4):70. [9] 覃 京 燕, 陶 晋, 房 巍. 基 于 虚 拟 体 验 的 交 互 设 计 方 法 初 探 [C]. 北 京 : 清 华 大 学 出 版 社,2007. QIN Jing-yan,TAO Jin,FANG Wei.A Preliminary Study on the Interactive Design Method Based on Virtual Experience[C]. Beijing:Tsinghua University Press,2007. [10] 宋 礼 青, 李 世 国. 以 十 二 生 肖 为 主 题 的 APP 创 新 设 计 研 究 [J]. 包 装 工 程,2014,35(2):54. SONG Li-qing,LI Shi-guo.The Subject of Chinese Zodiac APP Innovation Design Research[J].Packaging Engineering, 2014,35(2):54. ( 上 接 第 51 页 ) 设 计 风 格 统 一, 独 立 创 新, 系 统 提 升 品 牌 价 值 参 考 文 献 [1] 袁 世 雄, 崔 康 元, 高 宇 航. 手 机 游 戏 市 场 分 析 [J]. 黑 龙 江 科 学,2014(4):269. YUAN Shi-xiong,CUI Kang-yuan,GAO Yu-hang.Analysis of Mobile Phone Game Market[J].Heilongjiang Science,2014 (4):269. [2] 袁 堂 青. 浅 谈 Web 信 息 架 构 设 计 [J]. 无 线 互 联 科 技,2014 (12):51. YUAN Tang-qing.Discussion on Web Information Architecture Design[J].Wireless Internet Technology,2014(12):51. [3] 周 玉 基, 裴 朝 军. 信 息 设 计 概 念 辨 析 [J]. 包 装 工 程,2014,35 (24):141. ZHOU Yu-ji,PEI Chao-jun.Analysis of the Concept of Information Design[J].Packaging Engineering,2014,35(24):141. [4] 赵 宇 翔, 范 哲, 朱 庆 华. 用 户 生 成 内 容 (UGC) 概 念 解 析 及 研 究 进 展 [J]. 中 国 图 书 馆 学 报,2012(5):68. ZHAO Yu-xiang,FAN Zhe,ZHU Qing-hua.Conceptualization and Research Progress on User-Generated Content[J]. Journal of Library Science in China,2012(5):68. [5] 覃 京 燕, 巫 濛, 徐 馨. 移 动 传 媒 中 基 于 线 上 社 会 关 系 网 络 (OSNS) 的 交 互 界 面 体 验 研 究 [J]. 现 代 传 播,2010(1): 162 163. QIN Jing-yan,WU Meng,XU Xin.Research on Interface Experience of Mobile Media Based on Online Social Relation Network(OSNS)[J].Modern Communication,2010(1):162 163. [6] SAFFER D. 交 互 设 计 指 南 [M]. 北 京 : 机 械 工 业 出 版 社,2010. SAFFER D.Designing for Interaction[M].Beijing:China Machine Press,2010. [7] 覃 京 燕. 体 验 经 济 下 的 交 互 式 体 验 设 计 [J]. 包 装 工 程,2007, 28(10):200. QIN Jing-yan.Research on Interactive Experience Design under Experience Economy[J].Packaging Engineering,2007, 28(10):200. [8] 严 屏, 韦 锦 城. 探 析 现 代 数 字 界 面 中 的 拟 物 化 风 格 与 扁 平 化 风 格 [J]. 包 装 工 程,2014,35(22):114. YAN Ping,WEI Jin-cheng.Analysis of the Physical Style and Flat Style in Modern Digital Interface[J].Packaging Engineering,2014,35(22):114. [9] 蒋 鑫. 色 彩 在 手 机 游 戏 界 面 中 的 应 用 策 略 研 究 [J]. 包 装 工 程,2014,35(24):115. JIANG Xin.Research on the Application Strategy of Color in the Mobile Phone Game Interface[J].Packaging Engineering, 2014,35(24):115. [10] 林 欢, 谭 浩, 赵 江 洪. 图 片 优 势 效 应 在 网 页 设 计 中 的 应 用 [J]. 包 装 工 程,2014,35(4):13. LIN Huan,TAN Hao,ZHAO Jiang-hong.Application of the Picture Superiority Effect in Web Design[J].Packaging Engineering,2014,35(4):13. [11] 覃 京 燕, 刘 碧 雨, 张 盈 盈. 游 戏 设 计 中 声 效 应 用 对 于 用 户 交 互 体 验 的 影 响 研 究, 包 装 工 程,2011,32(22):23 26. QIN Jing-yan,LIU Bi-yu,ZHANG Ying-ying.Effects of Sounds on User Interactive Experience in Game Design[J]. Packaging Engineering,2011,32(22):23 26.