以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://wsd.tencent.com/20......%BE%8E-2.html

发现闪屏之美

作者:yanerli  |   发布: (编辑)kent.zhu   |   时间:2012-07-18 17:11:56 文字大小:- +

每逢节日到来,当你打开QQ浏览器,发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀,呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口,也是传递节日祝福的桥梁。在不同的节日传达不同的人文关怀,变换不同的表现形式,无论是为你带来一秒静静的感动,或是纯净的莞尔一笑,我们都希望闪屏的氛围能给用户带来一个美好的心情,一段温暖的时光。

 

节日闪屏的构成要素

品牌logo+口号Slogan+闪屏图案Graph

在这里,节日闪屏有两种构成方式:

1、以手机屏幕的最小边为边长的正方形非全屏的闪屏,其余部分靠色彩来填充,节省空间,突出代表性事物,表达简单明了;

 第二种:以屏幕的最长边为边长的正方形全屏的闪屏,全屏让视觉效果更鲜明,色彩和氛围更具感染力。

了解节日文化背景,重视情感共鸣

节日文化是一种历史沉淀,是一个国家或民族在漫长的历史过程中形成的民族文化、风俗和习惯。我们不仅要关注节日文化,更应该关注的是用户对节日文化的理解。相同的成长经历,相同的背景,对节日的看法和理解相同,站在用户的视角,说用户想说的话,创造用户的故事,让用户受到感染,达到和用户的情感共鸣。

了解用户群

不同年龄层对文化的理解不同,感受也不同,那我们浏览器的用户是哪些人群呢?

上图所示,浏览器的用户群是一个非常年轻的群体,关键词总结如下:

故事情节和节日氛围

故事情节是支撑画面的灵魂,趣味性固然能引起注意,但是我们还是要根据节日氛围来打造合理的故事情节:愚人节可以是诙谐的生动有趣的;情人节自然是浪漫的爱意弥漫的;清明节应该是肃穆的充满怀念的。浓郁的节日氛围将会拉近和用户的距离,此时需注意节日的季节和画面的时节相对应,这样更容易产生共鸣。

清明节的印象大概已经定格在“清明时节雨纷纷,路上行人欲断魂”,看看网上的图片,清明节都是千篇一律的水墨来表现“牧童遥指杏花村”,对于我们年轻的用户群,究竟什么样的氛围和情节能打动用户呢?

正值这个清明时节,刚好是草长莺飞,春寒料峭,春雨纷飞,这样一个诗一样的季节,我们打造的氛围也偏向了这样一个文艺的路线,于是想到的关键词是春雨、怀念、伤感。

雨的氛围确定了,故事情节我们还是确定为“雨中的思念”,远远的雨巷中,陈旧的石板路被雨冲洗着,两旁的年代久远的院墙诉说着古老,屋檐上滴滴答答的雨声似乎传递着遥远的思念。

首先汇出我们绘制想象中的场景,还是先用简化素描的形式勾勒出场景的大体轮廓;

 

然后晕染出淡淡的丁香色,此时再填上画面的主角:丁香一样的少女、淅淅沥沥的春雨……

最终效果如下:

盛夏炙热的阳光下,画面定格在高考倒计时紧张的氛围中。阳光、黑板、课本、空无一人的教室,把你拉回到那段回忆中。

还记得圣诞时期待收到礼物的心情吗?大雪纷飞,冰天雪地,但心里却暖暖的。

由代表性事物入手,从主题中提炼色彩

如果想要主题鲜明,最好的方法莫过于直接列举关键要素,由关键要素提炼色彩:

表现设计闪屏的视觉风格的技巧

1.    首先用简化素描来表达

用简化素描来表达基本的故事情节,设计思想简单明了,更能提高效率;在设定视觉风格之前,都使用简化素描将故事情节描绘数张,以备挑选。简化素描可在纸上进行,也可直接临摹照片形象,只要略勾勒出轮廓、神态即可。

2.    用简单的方法模拟不同流派的视觉风格

从美术巨匠的作品得到灵感,模拟不同流派的视觉风格,这样不仅能提升艺术品质,更让我们追随历史的足迹感受艺术的熏陶,让工作也变得更加有乐趣;

下图是超现实主义代表胡安.米罗的《哈里昆的狂欢》:单纯朴素被简化的形体、轻松明亮的色彩,童心、古怪、具有幽默感,经过简化而得出抽象的形体。

 

值得学习的还有历史上的很多名家巨匠:

 

比如立体主义的创始人毕加索,将对象的分割与重组,表达真实感受;追随感觉的浪漫主义画家约翰.康斯特布尔;简化事物,强调个性化色彩的马蒂斯,模仿这些名家的作品,更会一步步接近经典的秘密。

现在,让我们来模拟野兽派画家马蒂斯的《红色中的和谐》,注意模拟风格的特点是简化对象并强调个性化色彩,原作如下:

具体步骤如下:

 

 

 节日闪屏的发展方向

闪屏不应该仅仅只作为单方面传递信息给用户,还需要得到用户的反馈,和用户互动,才能实现与用户更深层次的交流,增加用户对产品的情感依赖。

更多
打印  |  相关话题:UED团队设计分享   |  类别:设计之外  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买