WEB游戏界面的设计细节问题

2016-02-17 02:58 4 1 收藏

下面是个WEB游戏界面的设计细节问题教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 平面设计 】

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

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

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

3.布局跟文案很重要;

WEB游戏界面的设计细节问题,PS教程,图老师教程网

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

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

WEB游戏界面的设计细节问题,PS教程,图老师教程网

点击查看原始大小

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

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

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

1.什么游戏?

2.什么语种?

3.什么主题?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

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

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

三、布局跟文案很重要

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

举例(练习作品):

WEB游戏界面的设计细节问题,PS教程,图老师教程网

文案突出型

WEB游戏界面的设计细节问题,PS教程,图老师教程网

结构突出型

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

最后重复:

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

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

3.布局跟文案很重要;

来源:http://www.tulaoshi.com/n/20160217/1577866.html

延伸阅读
VC界面的实现 作者:wwei 下载源代码 微软C++开发工具VC++由于其界面友好,实用而被许多软件开发者所模仿,但是直接用MFC来实现VC界面不仅要耗费大量时间,而且在实现类似VC工具条停靠,拉伸算法,菜单项和工具条按钮自定义功能时,由于涉及到很多关于 MFC 本身实现的细节问题很容易使程...
商务Web应用程序的设计常常被人们所忽视。我看到许多程序,它们既不符合商业目标,也不满足用户需求,它们有很差的用户体验,并造成了商业利润的损失。更夸张的是,有些设计师根本没有参与整个程序的开发流程,而是把全部职责都推给了开发人员。 对于擅长前端和后台技术的工程师来说,他们缺乏设计能力,很难完成这项艰巨的任务。不满意的消费...
标签: PS PS基础
做这个游戏的周期比较长,整理了部分资料,我觉得来我blog的应该都是写设计师,程序的同学比较少,所以就先不发类结构了,还没整理,先整理下设计部分。   抽时间整理了下游戏的程序部分架构和部分类的分析,贴图:
产品经理说:给它加上这个,这个,还有这个。设计师无奈摊手:就巴掌那么大的地方,怎么可能把这么多功能一股脑塞进去?这就考验到设计师的界面隐藏功夫了,特别是信息过载的今天,这个完全是必备技,今天腾讯的 Viconia 同学分享了他的隐藏技能总结,从入门到必杀都有,来学习吧。 一句话总结:你刚好不经意地出现,而这正是隐藏的意义...
为了赶上互联网发展的步伐,我们所开发的Web应用要具有优良的品质,充当着用户界面的角色,及捕获企业所提供特殊服务、产品的目标用户的责任。只有它的设计满足客户的基本需求,具有简单、响应式、易使用的界面才能满足上述的目标。因此,设计者必须使用最好的Web开发与设计技巧,同时要注意几个注意事项,比如空白区域、UI加载速度优化、信息...

经验教程

263

收藏

73
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部