网页游戏的项目设计方案分享

1 概述

• 示意图的阅读者为美术人员，因而需要着重表达的是信息显示
• 显示什么信息？
• 如何组织排列？
• 每条信息以何种方式呈现？
• 再配合一些适当的规则讲解，方便美术人员更准确理解示意图所要传达的信息

2 示意图输出

• 一个系统所涉及的所有界面都需要提供示意图

• 即使一个系统的几个界面很相似，也要尽量单独列出示意图，只做文字说明容易遗漏细节

• 同一个界面的多种状态，导出在同一张示意图中以方便对比

• 若界面尺寸过大、放在同一张示意图中不便于浏览时，可以分多张图导出

• 弹窗Alert类小窗口，与打开该弹窗的界面存在同一张示意图中

• 对于流程较复杂或界面较多的系统，需要给出界面流，表面各个界面之间的相互关系，以爬塔系统为例：

• 爬塔系统界面流

• 

3 界面入口

• 目前网页游戏中的界面入口主要有以下几种：

• 通过主UI功能图标

• 通过NPC/传送门等场景元素

• 通过某个界面内的按钮、链接

• 使用物品等

• 不同的入口，有时也会对界面样式有一定的影响。反过来，一个界面的样式有时也会对其入口有一定的限制。例如：

• 通过NPC打开的界面适合采用NPC对话框的形式

• 全屏界面中的按钮不适合再打开另一个全屏界面（除非按钮表达的是场景切换）

• 界面入口无法在示意图中体现，但它在设计界面时应该明确，并在文档中写明

• 除了主入口之外，还需列出是否可以通过关联系统打开、是否需要在其他界面额外增加入口等

• 比如称号、时装系统，除了主UI的入口按钮之外，还有人物界面上的入口按钮

4 界面尺寸与布局
4.1 尺寸
4.1.1 全屏界面

• 固定为1440*750

• 还需考虑到小屏幕用户的尺寸（最小支持到1024*768）以及其他UI元素（如主UI）占用的空间

• 因此画面的主要部分，应在大约1000*650的范围之内

• 全屏界面还有一些基本的通用元素，这些通用元素会对界面的显示区域有一定的布局影响，在示意图中需要把这部分添加进去。这些通用元素有：
  
  1.左上角的货币显示区域
  当这个系统涉及到货币、资源消耗时，需要显示
  2.中上方的界面标题
  若非特殊情况，都需要显示标题
  3.右上角的关闭按钮
  贴合操作习惯，全屏界面的右上角都需要有关闭按钮
  4.左下角的聊天框
  只要这个界面不是非常短暂的过度性、一次性界面，就应该显示
  5.右下角的的功能按钮
  此处显示的按钮数量根据该界面主要会用到的系统而定。通常有【人物】、【背包】、【技能】，以及固定需要显示的【返回】
  4.1.2 二级界面

• 一般的二级界面尺寸，需