手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >用户界面设计:传递春节情感的GUI设计
用户界面设计:传递春节情感的GUI设计
摘要:2012?你会想到什么?过去式?“世界末日”的代名词?哈,我们都走过去喽,不论是你想与不想,期待不期待,2013都平...

用户界面设计:传递春节情感的GUI设计1

2012?你会想到什么?过去式?“世界末日”的代名词?哈,我们都走过去喽,不论是你想与不想,期待不期待,2013都平安地到来啦,是不是很期待2013年的“重生”呢,是不是想好了要怎么过这个特殊的新年呢,大家想到了什么,团圆?春运?万物始发?为了这个“重生”的春节,除了梦想与期望,再来点温暖吧!

我在的gui小组为了传递这个温暖的春节,我们提前一个月去讨论这个结合品牌logo的春节gui设计,先来个头脑风暴吧,大伙儿发散思维,想法一下子有很多,这下可把大家的习俗都聊了一遍,这会你就会感叹中国的地大物博了,你也可以看到各地的习俗中都是非常重视春节的团聚,一家人过个年三十。其实在民间,传统意义上的春节是从腊月二十三,一直到正月十五。除夕夜之前,我们都会来装饰自己的家,有挂灯笼的、贴对联、剪窗花、大扫除等;元宵节,大伙儿都会去逛灯会,观看各式各样、美妙绝伦的灯笼。我们就把大家聊出来的一些关键词写在了白板上,有年夜饭、年画、打年糕、舞狮、烟花、财神、鞭炮对联、剪纸窗花等等;元宵节的关键词:猜灯谜、汤圆、灯笼、礼花烟花、月亮等。

春节剪影

用户界面设计:传递春节情感的GUI设计2

看着写出来的关键词,我们的脑袋里就蹦出了各种各样的过年场景。第一种场景就是:老式的瓦房上贴满有“年年有余”、“春节”等字样的年画,屋檐上挂满着红红的灯笼,小孩们结群伴友地在路上放着鞭炮,天空中烟花爆竹此起彼伏,一副热闹非凡的景象。第二种场景:除夕夜父母们终于盼回了在外拼搏的孩子们,大家一起围在桌边说说笑笑,叙述着各种思念,每个人脸上都绽放着幸福的花朵儿。接着想到元宵节到来啦:这一天,明亮的月亮高高地悬挂在星空中,夜空中绽放着五颜六色的烟花,春节场景里的小孩坐在爸爸的肩膀上提着花灯去赶灯会,夜空中绽放着五颜六色的烟花。描述完了春节和元宵的构想后,发现这样一系列的场景是有故事连接在一起的,而不是间断的,这样呈现出来给用户的就是有故事情节的,能让用户能够体会到真切实意、身临其近的感觉,就好像我们小时候是如何过元宵的场景,这样的春节logo是不是更具有亲切感、连续性、和认知性呢?

下面是一些当时的手绘线稿图。

线稿剪影

用户界面设计:传递春节情感的GUI设计3

讨论出上面描述的几个方案后,我们又分析了这些方案运用到实际效果中,给用户带去的感受,觉得春节方案一更适合,因为方案二更适用于除夕夜,短时间的烘托气氛,第一种方案更符合春节期间长时间的烘托。为了让前后场景能有连续性,让用户体验到亲切的感受,元宵节方案就是孩子提着灯笼坐在爸爸肩膀上逛街闹元宵。我们讨论出方案后,接下来就是上色喽,为了让气氛图应用到各平台,开始AI矢量设计,梓佑呢就给了我们一些意见,觉得用AI绘制出来的效果太锐利、硬朗,没有了手绘的感觉,而且质感效果在春节这个主题上会显得尖锐一些,正好梓佑找到了一张台湾的年画,我们看了这种年画(如下图),觉得这种年画给人古朴温馨、没有锐利的感觉,而且画面运用了藏青色、洋红色、青蓝色等颜色,整体感觉复古了许多,就像小朋友纯手绘画成的,显得有点儿粗糙,但感觉原汁原味。

蜡画元素

用户界面设计:传递春节情感的GUI设计4

接着我们在传统中国红的大色调基础上,加入了洋红、藏蓝等色调,使得整体画风偏手绘、古朴风格。春节呢是我们的传统节日,所以给人物穿上了唐装,加深了画面浓浓的中国味;房屋建筑上选用琉璃瓦房、石阶小路,因为这些呢是我们生活中经常看见的场景,即拉近了和用户之间的距离,又增添了亲切感。

用户界面设计:传递春节情感的GUI设计5

经过上面的一番取经后,我们在原先的质感上,用手绘板修改效果,接着加入腊画的一些元素和服装改造之后,春节和元宵效果图就此出炉啦。

用户界面设计:传递春节情感的GUI设计6

铛铛铛~~经过前端gg们的努力,页面上就出现了我们的春节图和元宵图啦 。在一淘首页页面上,logo区域背景色和窄版、宽版效果采用了响应式的设计,春节和元宵节区域背景色分别是红色和夜空藏蓝色,红色是不是很显得有过年气氛啦,再搭配上春节舞狮和烟火的造型,满满的,浓郁的春节气氛啊!我们在技术上加了烟花爆炸的动画效果,更加显得有生命力喽。

用户界面设计:传递春节情感的GUI设计7

其实在设计春节和元宵图之前,我们GUI小组已经小有几次设计成果,分别有圣诞节、元旦节、腊八节,下面放上2012年的几张气氛图让大家再次回忆下。

用户界面设计:传递春节情感的GUI设计8

其实在做这些节日logo之前,我们就列举出了一年中可以做的一些logo,包含了中国传统节日和西方传统节日,目前,除了传统节日外,很多是当时所发生的一些重大事情,就像以前发生的5.12大地震,还有与公司相关的重大事件(淘宝双11,双12),支付宝(年度账单),google(著名历史人物的诞辰、某天的某一重大发明)等。我们都知道节日文化是一个国家或一个民族在漫长的历史过程中形成和发展的民族文化,也是一种民族风俗和民族习惯。我们希望通过这些节日文化能让用户在如今纷繁的生活中了解 、 感受这些文化,在情感上达到一种共鸣。通过这次春节气氛图的创作过程,我们希望这会是一个延续的过程,每当你打开一淘首页或者其他平台页面时,你能感受到节日给你带来的关怀,也是我们给你准备的一份特殊的问候哦!当下一个节日到来的时候,又会呈现给你不一样的感受,不同的节日,不同的表达方式,每次给你带来的或许是一份缅怀、一份感动、一份记忆。..。..这都会让我们为之努力,给用户带来一个难忘的时光。

【用户界面设计:传递春节情感的GUI设计】相关文章:

网页设计中7个令人抓狂的错误

写给网页设计新手的10条实用法则

页面设计中的层次感

网页设计怎么都不会错的6条配色原则

网页设计的色彩思考

WEB页面设计和排版

页面设计细节总结

用户体验之网页板块设计

简洁网页设计你需知的6点技巧

国内有哪些非常有设计感的 App?

精品推荐
分类导航