游戏软件的用户界面设计

moleritwt

看spy最近再说UI设计，我也来发一篇最简单地~~！


前言：本人经验不够丰富，仅仅是总结前人经验及自学过程，希望能给看到此文的人些许的帮助，并欢迎指正！
一、       定义
用户界面（UI—User Interface）
图形用户界面 (GUI —Graphical User Interface)
用户界面是带有屏幕产品的最重要的组成部分，衡量标准：用户友好度
用户界面的例子
电视的用户界面（最简单）
（参考一）
CCTV1的图标，新闻联播的图标（有些在屏幕下方有新闻介绍滚动条）
WINDOWS用户界面（我的桌面，背景是我的目标）

（参考二）
WORD用户界面（标准软件，图形化表现需求不高）
（参考三）
某游戏界面
（参考四）
二、       界面设计
我们把界面设计分几个设计方向：界面的内容设计部分、界面的交互设计部分、界面的美观设计部分三个部分
1.       界面的内容设计部分
(一)抽离设计要素
列举出界面的设计元素，用户需求的哪些信息？设计者需要表现哪些信息？希望用户能够获得哪些信息？（以登陆界面为例）
（例一）
我们来分析QQ的登陆界面（上图并未全部分析，仅做参考）
1）WINDOWS窗口的传统，左上角窗口图标、名称，右上角最小、最大（向下还原）、关闭。（这是WINDOWS系统下的习惯设计方式，如果，你需要设计的软件是运行在该操作系统下，并具有窗口的特性，尽可能按照用户习惯设计。）
2）表现QQ的版本及所属集团，再配合些相关的宣传介绍，例如，很多游戏登陆时候的某些展现特性的文字描述或图片等。登陆界面也是用户了解产品的一个很重要的窗口，那么，把一些新特性展示给用户，可以引导用户在第一时间希望接触这些新特性。
3）登陆用的账号输入、密码输入以及相关的获得账号、密码等信息。除了有账号密码的输入外，提供给需要申请账号及忘记密码的用户一个快捷入口也能增加用户友好度。
4）希望用户可以选择登陆状态。QQ给用户提供可登陆前即可选择登陆状态，方便某些不想上线就给好友提示的用户，以及可以选择自动登陆。
5）登陆按钮，比不可少的原件。
(二)元素归类
1）必不可少的原件—基础原件
2）提供用户方便的原件—扩展原件
3）展示信息用原件—附加原件
小结：
那么，账号、密码，登陆，退出（关闭），这些是每个登陆窗口的基础原件，缺少属于重大错误，或者说属于低级错误；申请账号、忘记密码、选择登陆状态等是扩展原件，这些是方便用户操作的设计，当用户的操作成为习惯的时候，甚至也可以转换成基础原件。特性描述、宣传等属于附加原件，希望通过附加原件达到什么目的，但是，要考虑用户的接受程度，避免适得其反。
       PS：这仅仅是比较简单的界面，也需要根据不同情况具体分析
(三)排版的设计
元素抽离后，我们怎么摆放这些原件？
我们需要以原件之间的关联性、和视觉传达感官、以及用户习惯为主。
以及设计者在该界面表述的重点是什么，登陆界面着重在账号密码输入（其他重点自行分析）
（例二）
（例三）
原件的关联性，比较简单，如果，有关联的原件没有任何规律可循的摆放，势必操作很麻烦，降低用户友好度
按照中国人的阅读习惯是从左到右，从上到下，所以视觉表现也要遵循这个原则。
用户习惯主要是避免全新的界面给用户造成学习上的接受困难，从而导致友好度降低。
2.       界面的交互设计部分
提到一个名词，人机交互，它是一门很高深的学问，人机交互与人机界面不是同一个概念，但有着很紧密联系，所以，我只能在这里简单说一下界面的交互部分的设计。
用户只能通过界面和操作来了解产品、认知产品，那我把通过界面的用户操作称为界面的交互，那么这部分设计有哪些可以总结的东西。。。
(一)认知
用户对界面上的信息的认知，尽可能让用户在第一时间了解设计者所表述的信息。
文字表述
想让用户清晰的了解设计者的语言信息，那么，首先，文字表述必须要简洁清晰，至少用户理解的意思不会相差太远，如果与用户的理解偏差比较大，如果出现几次，那么用户对该游戏就会失去很多信心。当然，人与人的对事物的理解也是有很大偏差的，那么尽可能满足大多数的人的预期诉求
图片表述
图片也是一样，需要尽可能满足用户的预期诉求，但这个需要美术人员的配合，但设计者需要表述清楚，大概用什么图形表述，比如任务图标，在地图中一般用“？”来提示用户对疑问的探索，那么在个人任务栏中用信纸、卷轴等来展现任务的日志性。现实生活中积累自己形象化某些抽象的东西，有助于很好的用图像表述，不过，这个基本策划人员需求不大，游戏里面可参考的借用的东西很多，况且也是平面美术具体实现。。。
(二)操作
若界面很复杂，就需要给予用户一定的指引，如提示、指引等。若一层界面不足以表述所有的信息，需要以层级展示，这时候需要注意，尽可能在用户操作3次以内，达到用户的目标。
可扩展性，用户的习惯多种多样，如果可以提供给玩家自行控制界面的表现形式，可以满足更多的人，才是WINDOWS操作系统下的最优选择，如WORD的工具栏的可调节性
（例四）
小结：配合鼠标键盘等输入设备的方便性，快捷健的使用等还涉及到人机交互的东西，针对界面的交互主要就记得两点就好了：1、表述清楚你要表述的信息；2、让用户能够很容易通过简单的操作达到目的。
（例五）
3.       美观设计部分
因为主要都是美工的工作，这部分就不多说了
了解下颜色的搭配，排版的合理美观性等就可以了，有专门的UI美术设计师。。。

欢迎指正~~

spy

没有图。。。。

xbox361

图挂啦

suquan77

……我整个人都未经允许不可引用了……

Ross

恩，看到康辉
其他就被54了...

Ross

这充分说明CCTV的强大啊...

moleritwt

这回应该可以了，我这是能看到的~，重新改了下图片的连接~~！不好意思~

spy

。。。。我穿越了么？

你可以试试看把图存出来，用一个回帖集中都上传上来，再编辑顶楼的帖子挨个填到gameres的图片地址

bigpear

spy，你穿越了啊~~恭喜恭喜，给大家介绍一下经验啊！看哪里还有漏洞可以穿啊！

kissbtk

好贴啊，多谢LZ宝贵的经验分享，这种资料貌似很难查到，只有公司前辈的经验总结中能找出