火学网学员服务电话:400-882-1988
2014年上海Adobe双证培训

展示广告知识树项目总结

作者:上海火学网  发布时间:2013-03-28  来源:上海火学网

   随着展示广告以及钻展系统的不断完善和发展,有很多的知识需要及时的更新和发布。无论是对内还是对外,单靠组织培训会和小二的服务,已经难以满足不断膨胀的咨询需求。因此,需求方需要制作一个能够集中展示这些知识点的页面,能够较为新颖的形式查看这些内容同时又可以方便后续的信息更新和编辑。

  前期思考

  设计之前,需求方给出了多达50多页的内容点,并要求在页面上一一呈现出来。面对如此大量的信息,又有后期更新维护的要求,我们的初步的结论是通过TMS做成minisite的形式。然而,现在线上所存在的minisite形式上比较单一,尽管可以有效放置很多信息,但呈现的方式过于简单,阅读起来比较枯燥。因此,本次的页面设计,希望加强一些图形化的语言来丰富信息的传递,使用户在轻松愉快的氛围中浏览页面内容。

展示广告知识树项目总结

 

  

  设计目标

  • 使用户可以方便的找到内容点

  • 表现出轻松愉快的氛围

  • 较为新颖的表现形式

  设计过程:

  概念整理

  对应此次项目的主题“知识树”,在具体执行之前搜集了一些供参考的概念资料,主要围绕“树”,“符号”,“信息”

  

展示广告知识树项目总结

 

  配色

  

展示广告知识树项目总结

 

  布局

  区别以往单一的页面表现形式,我们尝试使用视差效果来表现。(http://ux.etao.com/posts/618关于视差的介绍可以看下这篇文章哦)

  

展示广告知识树项目总结

 

  根据下面的流程开始进行设计:

  

展示广告知识树项目总结

 

  内容分析

  根据需求内容来确定每个板块的构思

  从需求文档了解到内容主要围绕展示广告的几个知识点进行,分别是:钻展服务,营销策划,店铺运营,年度规划,客户服务5块内容。结合字面意思以及产品本身的特点大致归纳出各个要点的主要特性和侧重点。

  

展示广告知识树项目总结

 

  匹配图形

  内容分析之后,我们对内容已经有了大概的认识,接下来是构思合适的图形与之匹配。

  

展示广告知识树项目总结

 

  优化图形

  经过反复的调整和匹配,确定了最终需要展示的图形,进一步优化。在这个过程中,同时需要考虑在视差滚动时贴图层需要展现的物件。当然为页面控件添加交互行为的样式也是必不可少的一步。

  

展示广告知识树项目总结

 

  前端优化

  到这里基本的视觉工作已经完成,当然最后需要和前端有效沟通配合,及时调整页面效果。

  最终效果

  

展示广告知识树项目总结

 

  项目总结:

  页面最后呈现的效果应该说还是在预期之内的,整体风格统一连贯,实现了简单的视差效果,使画面有有了一定的动感。较之单一的页面还是有很多打动人的地方。

  个人在项目中也学到了很多,首先,做好一个视差效果的页面,不仅仅视觉设计一方面的事情,在设计之初就应该与前端沟通自己的想法,讨论一些需要呈现的效果或动画,以及一些需要注意的事项。最好是多去了解一些新的前端技术在页面上的应用;其次,这类页面的内容更抽象化,需要寻找一种与之匹配的图形,用图形来传递内容。这就要求对图形做进一步的推敲和拿捏。最后,作为设计师,要打破陈规,多做一些创新的尝试!

更多

更多上海计算机信息请访问:上海计算机培训网 计算机论坛
上海计算机培训咨询电话:021-51601797
课程搜索:
免责声明
① 由于各方面情况不断调整与变化,火学网所提供的所有考试信息仅供参考,请考生以权威部门公布的正式信息为准。
② 本站注明稿件来源为其他媒体的文/图等稿件均为转载稿,本站转载出于非商业性的教育和科研之目的,并不意味着 赞同其观点或证实其内容的真实性。如转载稿涉及版权等问题,请作者在两周内速来电或来函联系。
③ 凡本站注明“稿件来源:上海火学网”的所有文字、图片和音视频稿件,版权均属本网所有,任何媒体、网站或个 人未经本网协议授权不得转载、链接、转贴或以其他方式复制发表。已经本站协议授权的媒体、网站,在下载使用时必 须注明“稿件来源:上海火学网”,违者本站将依法追究责任。
上海商业平面设计全能就业培训班
上海复旦网院CAD+3DSmax效果图设计认证培训
论坛话题