网页专题设计技巧:设计师应该营造活动气氛

文章描述:解析网页设计中的专题氛围设计.

《ideas》是腾讯互动娱乐系统设计团队TGideas针对各类游戏的视觉包装设计所输出的适用性研究期刊,希望与大家分享相关经验,以及游戏类课题的交流。

本期作者:Ggao、Zaneye

专题的氛围是必须的

By Zaneye

曾几何时,自己苦思冥想自认为集艺术与创意于一体的作品出炉了,却被需求方一口否绝!其实很大的原因是因为我们的设计思路跟需求方的想法方向上是不一致的,没有表达出他们想要的意境,也就是所谓的活动气氛,人家要喜庆你搞个很有艺术感的大灰调,要么就是页面过于平淡,人家一再要求你放大标题字,放大人物,其实那是因为页面缺乏视觉冲击力,少了点气势,少了点氛围。有时可能你觉得自己做得非常不错,自我很欣赏,但做设计并不能像放屁,自己觉得很爽,却熏倒周围一大片。我们不能只做自己喜欢的设计,商业设计也不只是纯艺术!

> 对于需求方一再强调的活动气氛,设计师应该如何去营造呢?

1、有个明确的活动标题!

沟通是必须的,了解并明确需求方的意图!确定主题方向,首先你得有个让玩家一眼就看得明白的大大的主题,千万别干把主题文字做得很小的事!可能你觉得那样看起来比较美观,但玩家看的挺揪心。

如上图所示,标题的凸显是一个活动专题页面的点睛之笔,一个有气势的标题能衬起整个专题的气氛,主标题一般都简短精辟,概括了整个活动的专题商业诉求。副标题一般是起解释说明的作用,描述该活动的利益点。所以在视觉处理上标题是要重点刻画的,将其拆分做一些形状、色彩、大小、字体、质感、排版的变化和突破是必不可少的。玩家善于扫描,且勤于扫描,却不勤于思考,且对小于24号的文字都是视而不见的。所以一定要让大标题吸引注玩家,让玩家感兴趣,才会去看那些小于24号的文字。

2、选用合适的素材及元素,点缀活动气氛

节日要有节日的元素,比赛要有比赛的元素。圆形和其它几何图形比较,具有圆滑的特点,让人感觉轻松、愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。但记得要使用加减法,不能乱堆一通,点到为止即可。

上面图1只是用了冠军杯作为主要元素去营造一种比赛气氛,素材并不新颖,但出来的效果却令人相当震撼。图2的素材是非常给力,所以营造的那种周年庆的气氛也十分犀利。玩家可能不用看文字就能明白这两个页面是干嘛的。毕竟图形比文字能更快速更有效的传达信息。

3、用合理的色调营造意境,设计有灵魂的作品

通俗点地说就是该喜庆的得喜庆,该火爆的还是得火爆,但这火候是掌在设计师手中的,当需求方给了个很山寨很暴力的页面给你参考时,你得明白,这是他想要的气氛,但不一定是他想要的画面,我们是设计师,不是美工,美工与设计师的区别其实跟裁缝与服装设计师的区别是一样一样的,这个你懂的。

何谓有灵魂的作品,请看下面几个作品:

非常简单的素材,却营造出了扣人心弦的气氛,就像画面里有个故事,有个影像,让玩家如同身临其境,陷入其中,完全抓住了玩家的眼球。其实这些作品无非是找到适合的元素,辅以合理统一的色调,运用眩光/实体/手绘/虚幻空间/平面构成等表现手法给玩家设计一个完美的陷阱,套住他们的心。

> 营造专题活动气氛并不只是“火/爆/热”

这种过火过爆过热的专题活动,不仅会让玩家感到不适,还会使游戏的品牌形象受损。

下面我们看一组对比:

通过对比,左边的专题页面总让人感觉少了些什么。那便是气势和气氛。

也许有点气氛却总让人想起街边小广告,简陋,设计缺少一些思考,缺少一些灵魂,像是拼图式的设计。气氛并不是你堆一堆东西上去就叫有气氛的,抛开可用性、易用性、识别性、安全性等不管,单是美观上就有些欠佳。游戏专题/线上活动可以说是游戏品牌推广最常见的手段,如何去了解并掌握用户心理,继而设计出紧扣玩家心弦的专题,即是我们一直在追求的。

时间: 2024-12-29 13:19:01

网页专题设计技巧:设计师应该营造活动气氛的相关文章

网页设计案例分享:网页专题设计技巧

文章描述:先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. 先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]  下一页

网页导航设计技巧:尽情拓展设计创意和思维的导航设计

文章描述:导航一般位于网页的中上部分,也是视觉中心的区域内.在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔! 导航是网页设计中不可缺少的部分,它是网站访问者获取所需内容的快速通道和途径.导航让网站的层次结构以一种有条理的方式清晰展示,并引导用户毫不 费力地找到并管理信息,达到有效传递.同时,导航一般位于网页的中上部分,也是视觉中心的区域内.在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔! 一个设计师在布局和整体规划网页设

网页图片设计技巧:制作清晰可见像素图片

文章描述:大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,在放大.缩?⑿笮楸弑涞母现亓耍蛘呤窃贏I里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变"糊了",这是我们双眼所不允许的,我们要让每一个像素 大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,在放大.缩小.旋转后虚边变的更严重了,或者是在AI里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变"糊了&q

网页设计技巧:网页表格设计技巧总结

一个好的表格应该以易于理解,简单明了的方式传递大量的信息.真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用.从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性. 表格信息通常是很乏味的 从某种意义上来说,的确如此.一个好的表格应该以易于理解,简单明了的方式传递大量的信息.真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用.从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性. 今天我们来看看提升表格功能和美观的几种方式.我们

网页导航设计技巧:图标导航设计趋势

文章描述:不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航. 不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航.这种导航的好处是节省空间,让界面更简洁. 图标式导航的案例 这是YouTube 的图标式导航(移动版): 这是Squarespace的图标式导航: AWARD的图标式导航不拘一格: 问题所在 问题在于,点击图标式导航之后,图标本身没有任何变化.也就是说:操作缺乏反馈. 按钮的状态

网页导航设计技巧:计网页导航的基本准则

文章描述:网页导航是设计网站时需要考虑的一个最重要的方面.网页导航的首要的目的是让访客在你的网站简单迅速地找到他们想要搜寻的内容.高效的导航可以引导浏览者在你的网站尝试搜寻其他内容.在本文中,我们将探讨一些设计网页导航的基本准则. 网页导航是设计网站时需要考虑的一个最重要的方面.网页导航的首要的目的是让访客在你的网站简单迅速地找到他们想要搜寻的内容.高效的导航可以引导浏览者在你的网站尝试搜寻其他内容.在本文中,我们将探讨一些设计网页导航的基本准则. 有效的网页导航 在设计网页导航时,你需要将以下

网页设计技巧剖析:专题页面设计传情达意

文章描述:推荐:如何设计"传情达意"的专题头图. xiaoning:相信大家在平时的工作中,经常会碰到专题的设计吧!而且大部分是时间紧任务重.专题不同于网站的常规页面,常规页面更侧重于内容的阅读及人机的交互,因此可读性.可用性是第一位的,装饰性次之. 而专题正好相反,它更侧重于通过气氛的渲染来"传情达意".首屏的头图在气氛的渲染中尤为重要. 我们知道了头图在专题设计中的重要性,那构成头图的主要元素又有哪些呢?它们有 文字.背景.色彩.布局这四种主要元素.下面就通过一

设计推广专题页面的设计技巧和表现手法

网页制作Webjx文章简介:网站推广专题页面的案例分析. 来公司刚好一年了,接触了不同的视觉需求这里做一个小分享. 首先我说一下阿里巴巴B2B视觉设计的分类,主要分为产品视觉和推广视觉,产品视觉锻炼人的逻辑思维能力/细节的处理/规范执行.推广视觉更加偏向展现层,对视觉表达的能力要求很高/培养色感/有效的提高视觉设计师的表现技巧.个人觉得只有纵向发展到达一定的深度才有基础对横向扩展,所以最基础的是视觉表现力提高. 产品视觉有任务型和浏览型两种,以上2张都属于浏览形页面,如我们经常接触的1688首页

专题页设计技巧浅谈

  先以CP设计的的这个奥运专题为例分析专题设计中常遇到的一些问题. 这个页面存在的问题很多,我们来一个个分析. 首先第一个问题首屏高度: 分析一下常见分辨率及浏览器下高度数据: 在window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584. Win7下是574.在window XP常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716.Win7下是706. 综合上面表中个分辨率及浏览器下的