页游项目统筹指南分享

_指南来自前一样缓页游项目,代号WG006,现就正式营业近2年,。
正文写于该项目的立项的新,所用图片源于于该种之示意图或又已上线项目的示意图、截图。
立出于看了iOS和Material
Design的Guideline,心血来潮,便尝试了结束整理了平海,
揭晓之前剔除了部分提到「内部秘密」的图纸,并调动格式为适应markdown。
如您正看到本文,欢迎指出其中的不足之处。

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 二级界面
  • 诚如的二级界面尺寸,需要控制在900*550底限量里边
  • 要此节目需要时与外二级界面一同打开,需要考虑少单界面的到底增幅

比如背包界面与人选界面、邮件列表与邮件内容

4.2 布局-信息列表

  • 收件箱里之邮件、背包界面的物料、人物界面的侠客切页,等等,所有的音讯整合,都得以用作是一个消息列表。
  • 这种列表都需要考虑分组办法、排序规则、默认值、筛选了滤等
4.2.1 信息分组
  • 怎么信息而归为同样看似,归类的基于是呀,相关联的的有的在职位上尽量靠近。
  • 组与组内的程序关系如何,更主要之信息组应该更醒目
4.2.2 排序规则
  • 事先按什么排序、再比如什么排序,一般至少列2-3个排序条件,最后再用唯一的主键ID来排,不克让程序按照接收信息的先后顺序来随便排序。
4.2.3 默认值
  • 在显示各种消息经常,需要考虑默认值。
  • 默认的取舍

照关卡界面:最初显示第一单切页,之后显得上次关闭时所当的切页,开启新区域时拿默认切页设为新切页,再次打开界面后,再记录关闭界面所于的切页。

  • 每个元素的默认状态

专程是头像、模型等数码资源,在未加载到数时,如何展示。例如在物品图标未加载时,在图标框内显示一个永恒的菊花转loading动画

4.2.4 筛选过滤
  • 当信息列表中发出于多种类时,需要考虑是不是需要筛选或者过滤,筛选过滤规则是呀

依背包里比如物品类、侠客谱以侠客品质

4.3 状态差异

  • 一个界面通常发生各种不同的状态,需要列出各种状态的示意图
  • 一旦状态变化比较少、比较简单,可以经过简单的仿描述。
  • 第一的状态差异有:不同之操作状态、不同阶段的状态、不同玩家时期的状态、不同玩家视角的状态
4.3.1 不同操作状态
  • 根本是于拖拽中状态下,需要精心考虑关联元素的状态
4.3.2 不同玩家时期的状态
  • 着重是借助随着玩家等级、VIP等级之类的成才状态的成形,界面有怎样不同的状态
  • 以考虑玩家时期的状态时,第一双眼状态的界面表现还关键,而美术的效用图通常习惯以最后状态(或充满状态)来设计,可能会见促成第一肉眼状态大无漂亮,在核对美术效果图不时,需要格外注意这点
4.3.3 不同玩家视角的状态
  • 玩家视角,与玩家时期不同,视角是可变换的,而一代是不可逆的,例如
  • 公会会长与普通会员
  • 跨服竞技的参赛选手观众
  • 派战时底己方信息和敌方信息
4.3.4 不同等级的状态
  • 是因为网本身规则所呈现的例外等级,也是极度要紧而却容易忽视的状态示意
  • 各种满级状态
  • 有各种限制标准时的状态
    • 免解锁的关卡、未念的技能等
  • 一个流程各个阶段的状态,例如
    • 武装打:未选择装备、选中装备、打造中、打造好后。
  • 一个系统内不同时空等的差状态
    • 华山论剑:比赛开始前、准备时、战斗中、一车轮结束下同样车轮开始前、整届比赛由完等。

华山论剑系统的状态,结合了不同之视角.png

5 操作/事件

  • 设想各一个界面元素、控件,是否发生积极操作还是点事件。
  • 玩家主动通过鼠标和键盘发起是知难而进操作,
  • 程序及满足特定条件时自动触发的是触发事件。

5.1 主动操作

5.1.1 鼠标操作
  • 悬停
  • 艾时,可点击元素还待发出hover态
  • 消更详尽说明的因素(头像等图标、不完全的亲笔等),显示有hint提示
  • 单击
  • 在意时鼠标松开时才触发,对新手客户端程序员,文档里好额外提醒一下:“release时接触、而休down”
  • 双击
  • 出双击操作时,要特别注意对该构件单击事件之遮掩,通常是被单击事件加延时(0.1s)触发。
  • 拖拽
  • 在意设定拖拽触发的极小去(约8px),以免在单击时不小心点
  • 顾考虑落点判断规则,是觉得鼠标指针进入目标区域、还是拖拽元素整个或有进入目标区域
  • 长按
  • 购商品调整数量时,通过抬高论操作而数字很快生成
  • 除去上述这种在玩乐、软件中早已习以为常的操作方法,尽量避免使用长准
  • 滚轮
  • 一般不用专门说明,可以滚动的地方先后要掌握之
5.1.2 键盘操作
  • 重在为ESC(关闭界面、取消操作)、Enter
  • ↓←↑→方向键移动
  • 外组成部分快捷键

5.2 触发事件

  • 点事件的结果反馈,在设计时屡屡容易忽略,需要特别注意
  • 消极/自动触发的一对波
  • 每当倒计时了时
  • Calendar(控制各种系统开启、关闭、持续时间的一个总控系统)触发时
  • 其余一些电动行为就时

6 Hint

  • 列有界面被有所需要Hint的地方,包括一个Hint的异状态
  • 如果与存活的Hint格式差异比较坏,需要被美术为供新的效益图
  • 特别注意在新加品种类时,要考虑相应之物品Hint是否如再设计。
  • 譬如图纸类物品Hint需列有图的资料,宝石类物品Hint列出宝石属性,
    尽量避免全因策划手工填写在验证字段里,低效且易出错

宝石类物品Hint

7 关联界面改动

  • 亟需考虑一个系是否会见影响至另外系统的界面,常见的发生:
  • 打仗相关界面
    • 筹战斗的网,都得考虑战斗界面是否用变更,例如

世界BOSS系统需要充实额外的BOSS血条模式
基本上批次战斗需追加批次显示

  • 尤为是一对以交火规则本身也许没例外变化的系统,但关系战斗的系,也要考虑一下整个战斗的历程,例如

研究系统的战结算框需要考虑平局的状况
华山论剑系统要考虑观战界面与观摩时结算框
擂台系统的连胜buff,需要在战斗界面里显示
跨服系统要在玩家名后加上服务器标识
勿被超过了战斗的系,跳了按钮要灰显或是隐藏

  • 角色界面
    • 增产的主帅/侠客养成系统,需要考虑是无是要于角色界面增加进口
    • 设长了进口按钮,还要考虑自己角色界面与查看他人界面的条条框框差异
  • 别养成界面
    • 在新增渠道体系不时,需考虑生是否用以该渠道关联的养成系统受益涉及的沟渠入口
    • 备战/实力比
      • 增产养成系统时常,都如对应之长
  • CDbar
    • 诚如也每天有频繁、且产生CD限制的水渠类系,都得考虑一下
  • 飞入提示
    • 每个系统多考虑一下,有没有来什么要之唤醒。

8 控件使用

8.1 复选框&单选框&下拉菜单

复选框&单选框&下拉菜单

  • 足而且选择多单选项时,毫无疑问是使用多选框
  • 入选项就发生一定量桩,且是个别个相反的价值经常,也使用一个复选框

譬如说 使用/不利用、开启/关闭,这种简单只相反的选项时,使用一个复选框

  • 采取银两/使用元宝,这种毫无相反的值经常,则答应运用2只单选框选项
  • 而只能挑一个抉择时,使用单选框
  • 下拉菜单通常作为单选框的同等种植变种
    • 如果选数目不稳定、选项数目比较多,或者界面空间少时,用下拉菜单代替单选框

8.2 按钮&超链接

按钮&超链接

  • 越链接和准钮能的效应几乎是当的——点击执行操作。区别只是在表现形式上。
  • 示意图中承诺考虑何时使用按钮、何时使用超过链接。而不克都为此按钮、完全给美术去控制。
  • 一般而言状态下,按钮代表是又核心之要功用;而超链接则相对次要一些。

8.3 可编制的公文框&普通文书

然编制的文书&框普通文书

  • 大部情下,用到的且是日常文书
  • 只有当那些需要输入、可编制地方,才见面使到但是编制的文本框
  • 每当示意图中,不可知为了见文产生背景、或是其他目的,随意地动用可编制的文本框控件来代表普通的公文。

9 界面文案与书

9.1 文案

  • 简:尽可能简短,去丢多余的、修饰性的字
  • 准:描述清楚,避免错别字
  • 结:用玩家的言语、不要用程序员的语言
  • 集合:除了名词统一,还要各种符号、大小写、半角全角等
  • 筹:利用好字,它为是界面设计的一致有的
  • 如界面很亏欠,可以考虑就此有些说明性文字作为填充
  • 一些情况下字数统一好叫界面更整齐(中文汉字更会表达这点)

不过修改文案字数的改变

9.2 字体

9.2.1 Size&Family
  • 次第支持的无锯齿字体为:宋体12、宋体14、宋体16、黑体18
  • 切莫便利用艺术字之地方,都承诺下上述几栽字体
9.2.2 Color
  • 示意图中的文一般不用五彩。但在表达以下含义时,需动相应的颜料
  • 证文字:绿色

  • 错误提示文字:红色

  • 超链接文字:蓝色

  • 按照人转变的字:紫色

10 其他通用设计标准

10.1 搜索框

  • 寻框中要来默认文字,默认文字应用不同的颜料(灰色)
  • 默认文字根据不同之搜索框有所不同
  • 当搜索框获取鼠标焦点后,清除默认文字,等待用户输入文字。
  • 倘用户并未输入外文字时错过焦点,则文本框中回复默认文字

  • 要用户输入文字后再错过焦点,则文本框中还显示用户输入的亲笔

10.2 可排序表格

  • 对好排序的表格列,
  • 列标题需而点击,且产生3态效果。
  • 根据目前排序状态显示正序或逆序的图标
  • 假如有差不多列可排序,则排序时需要考虑有列的排序规则,最后点击的排于排序中存有再胜之先行级。例如

市面界面商品列表.png

  1. 默认: order by 总价 ASC,…sortid
  2. 这时先期点品质:order by 品质 DESC, 总价 ASC,…sortid
  3. 再点 单价:order by 单价 ASC, 品质 DESC, 总价 ASC,…sortid
  4. 再点 总价:order by 总价 DESC, 单价 ASC, 品质 DESC,…sortid

10.3 日期&时间

  • 默认的日期显示格式,统一啊YYYY-MM-DD
  • 于是四个数表示年、两员数表示月与有限号数表示日的。日期有因连字符 (-)
    分隔。
  • 默认的工夫显示格式,统一啊HH:MI:SS
  • 据此单薄各项数表示小时、两个数表示分钟与个别员数表示秒。时间有因假冒号 (:)
    分隔。

√应该用 2013-08-01 12:45:01
×而不是 2013-8-1 12:45:1

10.4 倒计时

10.4.1 完整显示
  • 完显示“时”、“分”、“秒”的倒计时格,统一吗H:MI:SS
  • 但是根据实际的设定情况,确定倒计时中是不是用“时”、“分”
10.4.2 分阶段显示
  • 如若倒计时受到界面限制,可依据剩余时间显示不同的精度
时间段 显示格式1 显示格式2
小于1分钟 剩余N秒 剩余0分M秒
小于1小时 剩余N分钟 剩余N分M秒
小于1天 剩余N小时 剩余N小时M分
大于1天 剩余N天 剩余N天M小时

10.5 消耗显示

耗费显示

  • 尽量用操作消耗直接排于按钮旁,已排有消耗多少的操作,一律不要花肯定提示。
  • 淘货币时,显示格式为:货币名称×货币数据
  • 满足是因此白色,不饱用红
  • 点击货币链接,打开货币来源界面
  • 耗物品常,显示格式为:物品名称×消耗物品数量(剩余物品数量)
  • 品名称为品质色
  • 括号内之剩下数量,满足用白色,不满足用红
  • 点击物品名称链接,打开物品来界面

11 相关美术需求

11.1 动画需求

  • 最主要依靠操作反馈动画、界面内的切换过渡动画。
  • 若是当筹划示意图的又,就既想明白了相关动画,需要提前和UI先说明、并且于UI制作过程遭到注意检查。以免由于UI布局的更动造成原本的卡通片模式不适用,
  • 而一个界面的动画大靠实际的UI表现,可每当UI设计之前先盖列出哪些地方需要来动画来强调或是过渡,让UI设计时可同步考虑。

11.2 图标

  • 界面被涉及的图标,如果当提交程序开发时,UI来不及完成整个图标,需要督促UI先提供一个临时之版为供程序制作
  • 即版本的严重性目的是规定图标的尺码、以及做方法
  • 仍是否要程序叠加颜色、裁切等

11.3 其他美术需求

  • 原画、场景、3D模型等
  • 由于当时仿佛美术资源做周期比较丰富,务必尽早提出

12 最后

指南还多但是同一种参考思路,只要来若的理由就是可以打破常规

还多我在「游戏/交互设计」副本中之捡到的战利品

  • 实例分析——界面设计的思想过程
  • 界面被的动效与特效
  • 不等门类的系,不同之界面设计侧重点
  • 哪些以跟撕哔之征中战胜程序、美术和老板。

相关文章