橙光游戏的资源在逐渐向手机版倾斜，但是目前为止并没有非常适合手机版使用的UI，上次UI设计比赛有很多优秀作品，可惜基本只适用于网页版。
这个并不算是教程，只是为即将开始的《橙光游戏手机版UI制作比赛》准备的设计指南，希望以此来提高手机版玩家的用户体验。
想让一套UI既能适应网页版，也能在手机上有良好的效果并不困难，只要遵循以下几点规则即可。

1.按钮
1.1按钮尺寸：按钮尺寸不宜太小，判断一套UI是否适合手机有个最简单的方法，将网页版960x540的界面缩小至40%（已经比iphone5的屏幕还要大一点点了），看看效果如何？
↓手机上大概这么大，可以自己用手指点击屏幕试试。

下面用一些图片对比说明一下。
横条按钮↓尺寸过小，不容易点中

横条按钮↓OK

竖条按钮↓尺寸过小，不容易点中

竖条按钮↓OK

圆形按钮↓尺寸过小，不容易点中

圆形按钮↓Ok

不规则按钮↓只要够大就OK

1.2按钮距离：按钮之间不宜间距过近，以免玩家误点
↓间距过近

↓OK

↓间距过近

↓OK

1.3注意事项：按钮字体不要用镂空的png图片
如下面这套UI，当点击圆中间的空白部分时，是没有任何反应的，只有点到灰色环形或里面的灰色文字时才能选中。

↓下面这套UI同样，如果不小心点到文字的空白处，不会有任何反应，只有点到黑字才会发现按钮的变化。

解决办法：镂空部分填充白色，然后设置白色的透明度为1%，这样肉眼是无法识别的，但是却能轻易选中了。

1.4注意事项：不要有鼠标指向显示文字的设计
比如下面这套UI，开始菜单是这样的↓

鼠标指上去后会变成这样↓

现在站上有非常多的UI是类似的设计，这样问题就出现了——手机上没有鼠标指向这一过程，所以鼠标指上去的效果在手机上永远也看不见。哪个按钮是什么功能，就只能靠猜了。
如果不是对橙光游戏非常了解的玩家，是不会立刻知道哪个按钮是做什么的。即使知道，这种莫名其妙的感觉也会令人不舒服。
以上举的都是开始菜单的例子，游戏菜单，游戏设置里的按钮也是一样的准则。现在素材库里的UI，游戏菜单和游戏设置的按钮都太小了，在手机上很难点选。

2.字体大小
↓如下字体在手机上玩简直就是灾难，自己试试就知道看不到5分钟就会出现眼酸头晕的症状

↓那么怎样才能在手机上阅读的舒服呢？大概要这么大

↓这套小清新UI是使用频率很高的一套，硬伤也是字太小

↓那么怎样才能在手机上阅读的舒服呢？大概要这么大

所以你知道了，现在站上常见的对话框尺寸，只适合放两行字。
不要过于依赖手机默认字体，因为很多游戏转换成手机默认字体后，字是大了，但是全部出对话框了，甚至把
对话框右边的菜单UI都遮挡住，非常难看。为什么即使这样大多数盒子玩家还是会把字体转换成默认的？因为
即使难看成这样，至少能看，比游戏自带的小字强多了。

综合以上举几个例子来看看：
↓按钮太小，间距太近，造成点选困难。文字太小，文字颜色不清晰，造成阅读困难。在手机盒子里玩体验不好。

↓怎么进入游戏？竟然是左下角那丛花……不用鼠标满屏幕划是永远不会知道的。

↓怎么进入游戏？右下角的花，颜色还那么不显眼……

↓不用想了，这字在手机上就是一个个小黑点

翻了一些首页游戏，不忍心再翻了……各位橙光作者，你们用手机下载自己的游戏玩过么？
也考虑一下手机玩家的感受吧。

4.有头像的和无头像的要分开打包成两套UI
比如下面这套UI，左边的装饰（如果是头像也一样）占了比较大的面积，手机版会自动在右边也空出这么大的地方来，文字就只能被挤在中间了，加上手机版本来就需要大字号，所以一次显示不了几个字。

总结
在适合手机版的UI里，我们可以追求的是：精致的边框、底纹、配色；务必遵守的是：大字、大按钮（看不清，点不中再漂亮也白扯了）；禁止使用的是：鼠标指上去按钮会换图的设计。

===================END===================

沙发！

坐坐~~

好帖！收藏！

前排