2-手游界面设计硬性及建议性规范

手游界面设计之

硬性及建议性规范

用户体验部庞汇

2014-5

1.前言

2.各种规范

①分辨率

②控件——文字、窗口、按钮、其他

③部件——输入项、二次确认、反馈提示、手势 ④系统——登录、设置、新手引导 ⑤动画与音效

3.反思

硬性规范

建议性规范

•手游上线质量标准

•

底线，必须遵守，一定要做到 •保证良好体验的最下限 •统一玩家体验，专业、规范

•通过经验总结出来的建议 •合理，但不一定是最佳 •效率、快速上手 •交互手册，辅助设计 •

领域互通，知识共享

前言

名词解释：什么是硬性规范，什么是建议性规范

①How to use？

要你何用？

●刚接手手游设计的时候，告诉你禁忌与界限

●版本发布前夕跑查

硬性规范

建议性规范●刚接手手游设计的时候，给你启发●效率优先、快速定夺

①

1.

屏幕适配，无四周黑边情况（允许图案填充）

2. 横屏游戏若无法旋转，则保留

home键/Android功能栏在右侧的横屏模式3. 游戏界面资源等比放大或缩小，不出现变形压缩的情况

关于分辨率

首先，要与策划和程序沟通主推平台、引擎、实现方式、技术困难、etc

2:3

240*320 768*1024 1536*2048

3:4

320*480 640*960

3:5

480*800 1280*768

9:16

540*960 640*1136 720*1280 1080*1920

安卓机中

最常见的低端机分辨率：320*480 最常见的中端机分辨率：480*800 最常见的高端机分辨率：1280*720 苹果系统分辨率

iPhone 5 5s 5c ：640*1136 iPhone 4 4s ：640*960

iPad ：1024*768 2048*1536

放大容易缩小难

其他因素：黑条面积、设备用户基数、主流设备

必须保留原比例

应按照960*640基础尺寸进行设计，

避免在大尺寸设计后无法适配小尺寸的问题。

①

分辨率

如何适配多种设备？

如何进行多种设备适配？

方式一：利用“黑条”填充

按照640*960的尺寸，等比放大或缩小，适配在不同的分辨率手机下，左右或上下多出的部分用图案填充

常见做法：

制作用于适配的上下左右四处填充图案（也可只制作上、左两处，程序写翻转的方式实现），理论上只会出现上下或者左右两种情况

*须考虑“黑条”与游戏各界面的融合程度，建议以暗色或暗纹处理，不易过亮。

*横屏游戏效果不太好

屏幕适配，无四周黑边情况

960*640

①分辨率如何适配多种设备？

如何进行多种设备适配？

方式二：利用锚点自动适配

1.场景渲染时特殊处理，按照最大长宽，在上下左

右四处多绘制一定区域的图片，当进行适配时，

以该图片显示。

2.程序处理，将界面设定基准点，如右图：

界面控件以最近基点定位（图中红点位置）

①分辨率选择什么分辨率进行原型及正式资源设计？如何适配多种设备？

关于分辨率

1. 按照960*640基础尺寸进行设计

2. 通过“黑条”填充或锚点自动适配的方式进行分辨率适配

3.与策划程序沟通确认，制定界面原型及资源制作的分辨率及适配方式

①分辨率关于安卓系统

关于安卓系统

1.功能栏平时隐藏，滑动可呼出

2.安卓设备中返回按钮：相当于关闭当前界面；在游戏主

界面（首页）中返回功能为退出游戏，需二次确认

②

Part 0 所有控件通用规范

1. 在高分辨率设备下无明显锯齿模糊

2. 所有切图资源尺寸为偶数

3. 资源拉伸没有变形情况（圆角、图案）

4. 所有界面中同类功能/系统资源须复用

2,4,6,8,10…

…

Part 1 文字规范

字体字色

字号

字号

1.字体最小不低于16px（不计算描边、阴影等效果）

2.字号不可超过4种

3.所有可编辑字体为偶数，例如：16px、20px、22px 标题-28px、正文-24px、

辅助信息-20px ，补充文字-18px

字号

影响到字号选择的因素：

1.界面平均信息量

2.字形——若使用字形本身较粗（如华康海报）字号需相应变大

3.界面风格

字体

1.字体种类不可超过4种

2.涉及字体须在授权范围内

3.采用特殊字体时，生僻字须显示正常（尤其是中文繁体）

文字在程序中的使用：

①使用系统默认字体利：节省资源、多语言适配简单弊：效果单一不美观

IOS中默认简体中文：常州华文Heiti SC

在设计时可选用“黑体-简"或"Heti SC"，并设置为”细体“、”浑厚“是与IOS的实际效果最接近的

英文及数字字体：_H_Helvetica

Android设备默认字体:中文DroidSansFallback、英文DroidSans

②载入对应的字体库

利：效果美观

弊：安装包较大，多语言

若使用非默认字体（系统自带字体）需在字体授权

前提将整包加载入程序，缺点为字体本身较大（一

般为4-12MB）

注：华康部分字体生僻字无法正常显示，需仔细审

核，生僻字由默认字体替换显示

若产品要求多语言版本，请注意该字体各个字符最

小字号情况下的识别度，尤其审核该字体的英文字

母是否易读

③使用字体图片

利：效果最好，较字体库可能小些

弊：制作艰难，维护痛苦

将字体输出为图片，由程序载入（请参考G2）。优

点是，图片可制作出各种渐变描边的效果，在字体

数量不多的情况下，可能比第二种方法小一些。

缺点是，制作过程中，设计、拼界面的工作量都会

比前两种实现方法大许多，并且非常不便于维护。

在制作多语言版本时也需要