10款网页设计的精彩点评

发表于2016-03-23
评论0 1.2k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913

网页设计也是UI 设计的一个重要分支,它不仅需要设计,还需要和策划沟通,程序配合,更需要与运营挂钩在一起,这是一个非常综合的工种,是让玩家第一时间了解你游戏和软件的重要门面!


UI不分家,只有多看多学多了解,咱们UI设计狮才不会被未来的浪潮所淹没!


下面就进行10款精彩页面设计的欣赏和点评

枪战游戏网页

不知道这个枪战游戏是不是素材太厉害,slogan就用简单的两色、大小区分,没有什么特殊的排版之类的。人物表情就像电影主人公一样有故事,带着似有若无的微笑,坐在兵器库前方,面前罗列了一大堆枪,是男人都会被震撼吧!

让我惊讶的是,实际网页中,这些枪并不是按钮,人家就真的空了一整屏的位置让。。。你。。。看。。。看。。。霸气侧漏啊!

下方板块背景的整体感比之前收集的那个页面要好,几乎是纯黑,但在物品反光处还是细致的处理上金属质感。文字排版这家的页面基本上都是统一的,不再敷述。页面底部在排完一些厂商logo和许可证文字后,又空出很大一块用来做背景和头部呼应,老外真的好大方!

下面 是细节的大图

扁平化页面

风格很轻快,是一个旅游度假村宣传页面,色彩舒服,物件多采用复用的方法!

主视觉将整个度假村用地图的形式展现,远处有上,头顶蓝天白云,文字轻轻地飘在天上,仿佛来了这个度假村就能舒服的飞起来一样。

第二屏用简约的几个小图标,展示了这个度假村的活动内容,全部是绿色调的,配以纯白底色,清新感扑面而来。第二个板块大概是介绍露营路线?背景板块的折角、鼠标滚轮提示都做得很雅致。


再接下去的应该是景点介绍,每个地点都绘制了矢量配图,文字说明的排版上也非常注意间隔和颜色的把握。


战地之王的活动页

可能是用了火车一类的主题,主视觉用两列火车来分别代表两个阵营,中间一个美女背影,只微微露出侧脸,很有神秘感。

slogan部分文字相当多,用字体、大小、颜色区分开来,清晰有力。日期特别用了纯白色,在字号不大的情况下也相当显眼。

下方的版块以一条铁路为引导展开来。四周的活动内容虽然都是做成规整的六边形,但用底纹和颜色将不同类型的版块进行分类,外圈填充页面的六边形就用相互纹路有延续的金属底纹装饰,视觉上也相对弱化,不会喧宾夺主。

下去一个版块展示装备,背景用红色的烟雾来烘托战场的氛围感,但有一层纵向的底纹感觉有些太明显了,弱化些更好,不然有点晕。


篮球游戏的媒体活动页

主视觉背景直接用了篮球场地面的质感,超写实的一颗大篮球坐落在画面正中央,和slogan的直接结合感觉还挺有冲击力的,主题鲜明。slogan做成印刷的感觉,字的边缘故意做成摩擦掉的效果,很有真实感。但副标题的处理,认为可以更加优化一些,因为既然主标题和篮球构成了对称型的排版,副标题文字又较长,文字内容也比较有吸引力,完全可以居中放大一些,配合正负形等等处理方式,相比现在直接打字上去不做任何处理,和整个画面更和谐一些。

媒体部分由于logo色彩多种多样于是用了圆圈+白底,和篮球的圆形可以呼应没有问题。但文字部分也用了同样亮度的白色,就显得有些主次不分了,把相对不重要的那个内容弱化一些更妥当。


qq飞车精灵主题页

页面本身是动态的,整体色调是很符合“精灵”给人固定联想的绿色。

slogan设计得十分用心,集成了城堡、花草、藤蔓、跑道几种元素,来呼应“魔幻”、“精灵”、“飞车”的意境,并且结合得十分自然,元素虽多却毫无累赘,忽闪着来自丛林深处的亮光,在印入眼帘的第一瞬间就充满了灵动感。

背景用明暗对比营造出通透的空间感,加上与游戏人物的巧妙结合,使得整个画面都有了故事性。


AVA

因为一点进去就有一个弹窗挡着,可能一定要完成注册才能关闭,所以页面功能没办法尝试。首屏整体几乎全部采用红色,从背景到板块到按钮,无所不红只有文字用白色叠上斑驳的机理。背景滚滚硝烟,板块边缘的那一丝透过来的高光,还有右下角炸弹迸发出来的亮光,一切虽然只用了红色,但处理的非常通透,设计狮色彩把控的功力很强。。

第二屏就是比较沉稳的钢板灰,标题微微散发着的红光与第一屏相呼应,每个奖品设计成嵌在钢板上的感觉,标题与图片之中预留了足够的间距,干净有力。


棋牌游戏的活动页

主打宇宙-星座一类的构思,背景从头至尾用了一个星空的图案。slogan的设计有种迪士尼logo的感觉,bingo star用大字号的手写体,叠上强烈的金属质感,看上去很华丽,blingbling的。副标题刚好配合英文手写体空出来的几个位置排版,加上底板和椭圆外框,整体感不错,

如果是我的话不会用这么规整的椭圆,稍微做出笔锋的效果,让英文字母突出一部分来,感觉更加灵动一些。包括底下的活动步骤数字也是一样,非当下进行的步骤可以用封闭的椭圆,当下进行中的可以用开口的椭圆,对比更鲜明。

板块中的文字东放一堆西放一堆,不认识韩文不好判断对阅读和信息整合是否有影响,从表面上无法明显看出这些文字是要归属到哪个板块的。底部应该是活动规则的部分,每一条文字前都用了小星星来替代传统的点,这个小细节很喜欢。


Q萌路线的活动页

slogan虽然字体尖角也很多,但是做了圆圆的高光,就圆乎乎得很活泼,配色上也是活泼的糖果色为主。左上角的小副标题还做了有爱的小变形,细节很丰富。页面整体的元素质感都比较厚重,也有点小小的丛林风,很像那种可爱系的手游UI。

下方活动步骤利用草皮的设计,故意挖空一块,构思很巧。而活动内容用一根藤蔓由主视觉小人物牵着,蜿蜒伸展带出一系列不知名水果,从颜色和大小可以直观的判断出重要的活动。每一个活动“水果”内部的排版也是花了些心思的,从字的厚度、颜色、大小等等方面,见不同的信息区分开来,层级清晰,同时色彩也控制在与背景水果同色系的范围内,和谐不突兀,并没有为了强调而弄得整个页面都是重点、用色过多的情况。


樱花主题的活动页

整个页面粉粉的色调和背景深深浅浅的樱花,烘托出活动当下季节的特征(4月正是樱花盛开的时节)。主标题采用深红色书法手写体,副标题用一朵樱花引出,樱花的绿叶同时也和时间一栏的绿色相呼应。页面右上角两个按钮做成由清晰的花瓣衬托的形式,和页面整体感很强不会出戏,又从清晰度上和背景拉开距离。

下方的抽奖板块做成了精致的类似和果子的质感,边角都是柔柔的和樱花的气质很搭。每个小方块里的标题文字都是用和slogan同样的书法手写体,给人一种雅致的感觉。hover效果也很用心,用一片颜色和底板对比度高的花瓣托起小图标,表达清晰又精致。接下去的板块部分沿用了之前有圆度的边框,还特意设计了有樱花元素的小图标。板块、文字、按钮的配色都相当舒服,在一个粉粉的调子里千变万化又平衡统一,好厉害。


今天的分享到此结束,欢迎加入Gad腾讯游戏美术群,群号码:342981373

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台