【金点子帖】关于游戏UI布局的分析，来讨论一下

spy

和大家讨论一下关于游戏中的界面设计技巧，尤其是在布局排版上。

在设计领域里存在一个单词：Eyetracking。意为视觉轨迹，主要是为了分析如何提高页面表述效率的问题，用于杂志排版、网页设计、海报推广等等各种领域。

最近在分析现在这款产品的UI操作规范问题，正好旧事新提，反思一下游戏的UI布局情况。


例如英文的yahoo（http://www.yahoo.com/）和中文的yahoo（http://www.yahoo.com.cn）两个页面的布局是迥然不同的。

一个是把内容定位在一页内（1280的标准分辨率），而一个是要向下滚动3.5次。

一个是充分利用页面索引和搜索功能，而另一个是体现大而全，并且利用表单格式用于集中用户注意力。


大家来讨论一下，这两种布局的优点和缺点如何？以及为什么他们会这么做呢？


现在你使用的windows也有这个问题，右上方是鼠标轨迹最短的地方，所以X放在这里，但是为什么“开始”会在左下？鼠标距离最长呢？（这个问题个人的答案是因为视觉轨迹反而最短）


其次，在游戏中为什么聊天要放置在左下，小地图要放在右上呢？星际和魔兽把地图放在左下的原因又是什么？



这个讨论涉及到了很多的东西，包括操作习惯，操作路径，视觉习惯，视觉盲区，阅读习惯，文化习惯等等。慢慢聊吧……



这是以前画的一款游戏的主UI操作区域划分，注解文字删除掉了。。。供参考


其实发帖也是有这样的小技巧的，个人认为，中国人的阅读习惯是跳跃型，这和亚洲语系文字注重前后关联的特性是相关的，所以中国的文字更适合以点来描述事情。所以我一般写帖子会空出很多错行，方便别人阅读。 [em15]

spy

2月13日补充：

楼下有些同学说聊天框放在左下是因为和键盘接近，这点个人觉得不同。我觉得原因是左下是因为视觉最容易集中，与“开始”的存在目的一样。

再补充提一个问题：为什么很多人的QQ都放在右上角呢？




[em5]

测试人员甲

针对yahoo的页面而言，表示老外善于利用索引查找自己需要的有效资源？国人善于圈养？

测试人员甲

聊天在左下的原因个人感觉之一是左下离键盘的字母区域最近。之二明天再想

妖狼

测试人员甲: Re:【金点子帖】关于游戏UI布局的分析，来讨论一下

聊天在左下的原因个人感觉之一是左下离键盘的字母区域最近。之二明天再想

这个没看懂，请人解惑

测试人员甲

聊天需要打字。聊天框在屏幕左下角，屏幕左下角和键盘的之间距离最近的是键盘的字母区域。视线在这两点间切换的距离最短。

测试人员甲

spy: Re: 【金点子帖】关于游戏UI布局的分析，来讨论一下

其实吧。。。。这个讨论涉及到了很多的东西，包括操作习惯，操作路径，视觉习惯，视觉盲区，阅读习惯，文化...

对的，如果真的列出很多现在常规的UI界面设计初衷的话，怕是很庞大的工作。

妖狼

应该是现有键盘，后有聊天区域吧？那为什么不把聊天放在屏幕的中间下方，而要放在坐下？要知道小键盘输入数字远比大区域数字键盘要方便的多，而且很多也是把聊天放在中间的，比如我现在在打字，输入框就在屏幕的中间下方，这样我的视觉感触最为舒适。
游戏里将聊天内容显示区域就是聊天显示框放在侧面我理解，是为了不占据游戏画面，不会造成用户游戏视觉焦点的长期分散。但又为什么几乎大部分游戏把聊天显示框放在左侧呢？而且是左下侧，而不是左上侧，右下侧或右上侧。
另外聊天输入框都是在中下或左下，而没人放右下或坐上，中上，右上呢？我不觉得这和键盘的位置有关，毕竟我们输入网址的时候，不会把页面缩小到能把网址输入框挪到中下或左下的位置，也就是说页面的网址输入框的中上或左上，或右上的位置并没有影响到我们对输入产生困难。
谁解惑？

妖狼

鄙视下楼主，楼主趁我回帖的时候编辑帖子了！

bal

我只想说一件事。。。UO才是个经典范例。。