交互设计实例:网易邮箱的如虎添翼设计

http://www.itjxue.com  2015-08-07 21:35  来源:未知  点击次数: 

   

地址链接:http://mimg.163.com/hd/all/100127_tiger/home.htm  

项目内容:网易邮箱计划在新的一年密集推出一批功能服务,为配合这几项新功能的发布,在新年到来之际,希望能将几个产品整合包装宣传,统一成系列宣传。于是,就诞生了“如虎添翼”计划。  

概念诞生:在团队头脑风暴的过程中,设计中心团队与产品部门的同事一起,提出了很多的有趣构思。建立在构思之上的,是明确的定位。讨论后,决定把繁琐的设计需求精简为几大要点:1、体现邮箱的活力和创新精神,2、迎合新年的气氛,3、使用户感觉亲切。围绕这三点,经过讨论——重整——再讨论的循环和几次筛选之后,“如虎添翼”的概念诞生了。“如虎添翼”既能把邮箱新增功能服务很好的整合在一起,也能呼应2010年是虎年的新年气氛。  

5双翅膀:“如虎添翼”的创意概念确定之后,把网易邮箱新增的功能按类型归纳整理,赋予了5对“翅膀”,分别为“开放之翼”、“海纳之翼”、“绿色之翼”、“灵犀之翼”、“随身之翼”,以下为设计分享:  

   

  1. 抽象的翅膀 如何将邮箱新增的功能这个抽象的概念体现为“翼”,是一个很大的难题。虽然近年国际上盛行抽象的不规则图形组合风格,但针对于特定的产品宣传,太过概念化的抽象构图用于推广宣传这一目的是晦涩难懂的。对于一个设计师来说,在视觉美观和画面中心思想之间的把握是非常重要的,尤其对于商业化的设计,应该把思考的重点转移到宣传的重点上来。
  2. 可爱的老虎 虽然主题是“如虎添翼”,但重点是网易邮箱而不是老虎,邮箱的元素是绝对不能忽略的。老虎是新年的象征,可爱的卡通形象能让人产生亲切感,让人对邮箱科技严肃的理解改观。这样,围绕信封和小老虎的故事就诞生了。(小老虎形象由DEMO同学设计完成)   
  3. 复杂的混搭 上文有提到过近年国际上盛行抽象图形风格,这种风格的特点是时尚、活力、视觉冲击力强,符合这次设计的需求。但值得注意的是,色彩运用、结构比例、疏密处理都需要保持画面的和谐,这种看似随意自由的风格其实更需要严谨的设计态度。认为元素堆砌越多画面就越丰富,其实是个误区,“元素混乱”和“风格混搭”是完全不能等同理解的。
  4. 中文的字体 中文字体的结构很复杂,它在画面的出现很容易破坏画面构图。所以字型的选择和编排就十分重要。简而化之的总结就是,让文字和画面的构图融合在一起,产生和谐流畅的律动。
  5. 统一的系列 每个主题都要突出各自的特点和宣传重点,却要保持为一个整体的系列,这是一个很大的挑战。设计的过程中需要互相对比调整,要领就是,画面构图必须保持一致,视觉重点元素必须保持风格统一。

“开放之翼”表达的是众多邮箱端口对外开放,功能多元丰富。  

“海纳之翼”海,宽广、无限;纳,容纳、包容;表现邮箱容量扩充。  

“绿色之翼”绿色、安全,一个干净清新的邮箱空间。  

“灵犀之翼”邮箱成为沟通的桥梁。  

“随身之翼”手机邮箱随时随地在身边,伴随同行。  

“如虎添翼”系列专题设计:  以上系列设计主要投放在163邮箱和126邮箱,考虑到邮箱的简洁格调,背景色处理都以清淡的颜色为主。专题页面设计更需要考虑新年期间的喜庆气氛,再加上网易公司的专用色,红色当然就是首选了。如何表现浓烈的中国农历新年气氛,又希望能摆脱铺天盖地的新年“俗”,用极简的构图加上局部细节衬托就是最好的处理方法。  

专题设计   

集邮中心设计   

如虎添翼之“西邮记”页面设计   

总结一些设计要点:  

  • 和谐  画面中所有的元素、色彩、点、线、面、的律动是和谐平衡的;  
  • 美感  使人产生好的感受,简洁≠简陋、华丽≠俗艳、可爱≠低龄;  
  • 细节  细节是设计精致的关键,每一个像素、每一条线,都是美感的体现;  
  • 内涵  设计应该是有思想和内涵,它所用的颜色、线条、形状、分割都应该有它的目的

(责任编辑:IT教学网)

更多