浅谈游戏WEB设计的一些细节问题

标签: 游戏 web 设计 | 发表时间:2011-08-30 10:28 | 作者:Lyson Guan
出处:http://ucdchina.com/rss/all

本期特约:海外美术团队 Lyson

1.浏览器的差别跟用户分辨率差别是我们首先考虑的问题;

2.游戏页面设计,需贴主题、游戏背景等主线关系;

3.布局跟文案很重要;

一、浏览器的差别跟用户分辨率差别是我们首先考虑的问题;

首先在这里想要再次为新人提下,现在霸占互联网最小分辨率的还会是1024用户(特别是中国),加之IE、FF主流浏览器的比例,由此特地整理了一个解说小图。

web尺寸

点击查看原始大小

在这张示意图上我们能比较清晰的看出一个网页在1024分辨率显示器下的效果。由此我们在很早之前就定下一条不成文的规定,那就是网页的核心内容宽度,最大绝对不超过980.预留的一点点的空间,给用户“透气”。

但往往是我们还是很容易就把画面给“填满”,原因就是游戏网页设计,早期它逃不开功能模块框架的边缘修饰,这种修饰还是不规则形态,

(这时候会像有些平房驻地,外头非要弄点其他东西来扩建,不愿意占用已经规划好的区域一样的道理。)

所以在此提醒同学们一定要学会“卡位”别“超界”

二、游戏页面设计,需贴主题、游戏背景等主线关系;

主题、游戏背景,这两个核心问题,设计师们一定要定位好,我们别拿什么就直接做,我们需要过滤的东西有很多~!

1.什么游戏?

2.什么语种?

3.什么主题?

4.文档、布局(WORD/VISIO/AxureRP)?

5.头脑风暴完的创意、色彩,是否贴近游戏背景跟本次主题?

 

三、布局跟文案很重要

每次的设计,设计师们最头疼的事情就是这两样,为什么呢?因为这两个元素直接音响到了最后效果,在特殊情况下,比重达到50% – 80%;可以抹杀很多创意表现。

举例(练习作品):

 

文案突出型

文案突出型

 

结构突出型

结构突出型

我个人在做图的时候习惯的会总结归纳以上提到的问题,从而一步步过滤,最后在纸上画结构。(当然在这过程中肯定还有其他的内容,只是在这篇文章就不细提了)

最后重复:

1.浏览器的差别跟用户分辨率差别是我们首先考虑的问题;

2.游戏页面设计,需贴主题、游戏背景等主线关系;

3.布局跟文案很重要;

源地址:http://www.gameued.com/visual-design/web-design-detai.html

相关 [游戏 web 设计] 推荐:

Web设计师能从游戏中学到些什么

- Guan - 所有文章 - UCD大社区
Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

浅谈游戏WEB设计的一些细节问题

- Guan - 所有文章 - UCD大社区
本期特约:海外美术团队 Lyson. 1.浏览器的差别跟用户分辨率差别是我们首先考虑的问题;. 2.游戏页面设计,需贴主题、游戏背景等主线关系;. 一、浏览器的差别跟用户分辨率差别是我们首先考虑的问题;. 首先在这里想要再次为新人提下,现在霸占互联网最小分辨率的还会是1024用户(特别是中国),加之IE、FF主流浏览器的比例,由此特地整理了一个解说小图.

Web设计师能从游戏中学到些什么

- Dexter.Yy - B3 bohemia's - 坚持创新,给设计多一点乐趣
‘在《上古卷轴》中,图标装饰了“滚动条”. ’——本来之前推荐过原文,但是这句翻译太亮了. Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

Web设计师能从游戏中学到些什么 - UCD大社区

- Kenji Kee - ucdchina.com
Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

Web设计精确点滴

- 安淡名 - 所有文章 - UCD大社区
这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度. 当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:.

Web app设计浅谈

- Jason - 网易用户体验设计中心博客
HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中. Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.