橙光游戏提供素材吧 关注:218贴子:1,785
  • 11回复贴,共1

【教程】橙光游戏手机版UI设计指南

只看楼主收藏回复

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


1楼2015-11-08 17:45回复
    1.按钮
    1.1按钮尺寸:按钮尺寸不宜太小,判断一套UI是否适合手机有个最简单的方法,将网页版960x540的界面缩小至40%(已经比iphone5的屏幕还要大一点点了),看看效果如何?
    ↓手机上大概这么大,可以自己用手指点击屏幕试试。

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


    2楼2015-11-08 17:45
    回复
      横条按钮↓OK

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

      竖条按钮↓OK

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

      圆形按钮↓Ok

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


      3楼2015-11-08 17:45
      回复
        1.2按钮距离:按钮之间不宜间距过近,以免玩家误点
        ↓间距过近

        ↓OK

        ↓间距过近

        ↓OK


        4楼2015-11-08 17:46
        回复
          1.3注意事项:按钮字体不要用镂空的png图片
          如下面这套UI,当点击圆中间的空白部分时,是没有任何反应的,只有点到灰色环形或里面的灰色文字时才能选中。

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

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


          5楼2015-11-08 17:47
          回复
            1.4注意事项:不要有鼠标指向显示文字的设计
            比如下面这套UI,开始菜单是这样的↓

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

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


            6楼2015-11-08 17:47
            回复
              2.字体大小
              ↓如下字体在手机上玩简直就是灾难,自己试试就知道看不到5分钟就会出现眼酸头晕的症状

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

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

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

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


              7楼2015-11-08 17:48
              回复
                综合以上举几个例子来看看:
                ↓按钮太小,间距太近,造成点选困难。文字太小,文字颜色不清晰,造成阅读困难。在手机盒子里玩体验不好。

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

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

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

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


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

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


                  10楼2015-11-08 17:49
                  回复
                    ===================END===================


                    11楼2015-11-08 17:49
                    收起回复
                      好!


                      来自Android客户端12楼2016-08-02 11:34
                      回复