干货-腾讯内部专题页面设计方法.ppt

1、专题页面设计方法,By:TGideas,授课目的,归纳一些设计形式 整理一些设计思路 总结一些设计方法 展示一些设计过程,专题页面设计方法,1. 专题页面定义,？,为什么要设计专题页面,专题页面设计方法,1. 专题页面定义,产品,诞 生,退 市,调 研,产品 立项,产品 开发,测 试,市场 预热,全面 传播,稳定 销售,持续 传播,营销推广,专题页面设计方法,1. 专题页面定义,产品,用户,营销推广,传 统 营 销,网 络 营 销,专题页面设计方法,1. 专题页面定义,产品,用户,用户层,互动平台层,产品资料落地层,平台网站,企业网站,品牌网站,广告活动网站,专题网站,专题页面设计方法,1.

2、专题页面定义,专题页面设计方法,1. 专题页面定义,个性原则 Individuality,趣味原则 Interesting,利益原则 Interests,互动原则 Interaction,专题页面设计方法,1. 专题页面定义,又称为minisite，指围绕某一主题事件或活动而单独开辟的独立网页或网站，如运营活动，礼品推送，版本介绍等,专题页面的定义,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,以物造行法,B.圆方三角,快速几何泼墨法,C.断臂之美,局部反常态法,D.欲擒故纵,留白视觉反常态法,E.乾坤大挪移,布局反常态法,F. 钉钉铆铆,装饰点睛法,快速打造专题页面形式感,A.

3、抄现实,以物造行法,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,借鉴生活中存在的实物,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,它可以变成网页吗？,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,案例欣赏,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,步骤归纳,减法,分块,加法,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,案例演示一,DNF黑钻专区,专题页面设计方法,2. 快速打造专题页面形式感,A.

4、抄现实,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,减法,简化钻面细节，保留外轮廓,分块,寻找内容安置空间,加法,加入页面内容,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,案例演示二,QQ飞车三周年专题,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,减法,去掉贺卡上的文字和图案,分块,为按钮寻找一屏展示区,加法,加入修饰元素，细节刻画,专题页面设计方法,2. 快速打造专题页面形式感,A.抄现实,小 结,将页面主题进行可视化设计，传达真实感受 页面主题易具象表现，且功能和内容较少，强调视觉表

5、现 对绘画造型有一定要求,B.圆方三角,快速几何泼墨法,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,圆,三角,方,做为自然界视觉三种基础形态，它们分别由直线、折线、弧线组成。,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,方：整齐、稳定、生硬 圆：可爱、柔软 三角：动感、尖锐,尝试一些简单的搭配组合,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,可以联想到什么？,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,案例演示,QQ西游愚人节活动,专题页面设计方法,2. 快速打

6、造专题页面形式感,B.圆方三角,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,愚人节,可爱,有趣,搞笑,活泼,刺激,陷阱,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,设计是一个理性思维+联想+运气的过程,专题页面设计方法,2. 快速打造专题页面形式感,B.圆方三角,C.断臂之美,局部反常态法,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2.

7、快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,设计师： greatstyle（韩国）,案例分析,QQ西游神秘站,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,专题页面设计方法,2. 快速打造专题页面形式感,C.断臂之美,D.欲擒故纵,留白视觉反常态法,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,客户的奸叫,这些都要首屏啊啊啊,热烈再热烈一点,没有重点，只有更重点,要大要大,要闪,这个这个这个要突出,要酷要炫要高调,专题页面设计方法,2. 快速打造

8、专题页面形式感,D.欲擒故纵,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,突出,我们该如何应对！,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,当我们听到突出、变大的需求的时候 第一反应是采用了加强法,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,不如我们反其道而行，来看看”空“境的别样风景,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,从建筑看满与空,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,从摄影看满与空,案例演示,QQ西游花祭专题,专题页面设

9、计方法,2. 快速打造专题页面形式感,D.欲擒故纵,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,需求分析：,1.这是一个内容适中的需求,5. 我们应该引导用户阅读和操作，如何完成”空”的表现。,2. 原来的游戏SLOGAN被勒令使用，希望玩家来纪念同时选出新的SLOGAN，参与者将获得礼物。,3. 调性哀伤，但虽然是祭是死去，却不能恐怖，并且要让人看到新的希望。,4. 选择凄美的调性，而空白、安静正好可以体现出这种哀伤的情怀。,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,减小一屏显示内容，制造一个空灵安静的祭奠气氛。,连贯性： 献花、选新SLOGAN、转发微

10、博、 祝福墙、四个标题改为花愿、 花种、花瓣、花祭，花祭主题贯穿全文 数字“1.2.3” 、虚线和箭头指示阅读,阅读疲劳： 文字稍微倾斜，打破太过规整死板 底部换色、聚焦,专题页面设计方法,2. 快速打造专题页面形式感,D.欲擒故纵,E.乾坤大挪移,布局反常态法,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,时间短！没创意！又要快速捕抓眼球,怎么办？,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,旋转,平移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,常规,旋转,平移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,旋转,

11、专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,整体旋转,背景旋转,内容旋转,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,整体旋转,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,背景旋转,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,内容旋转,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,信息内容旋转多少角度比较合适？,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,平移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,案例欣赏,专题页面设计方法,2. 快速打造专题页面形式

12、感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,案例演示一,御龙在天封测专题（旋转）,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,案例演示二,QQ西游装机专题（平移）,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤大挪移,专题页面设计方法,2. 快速打造专题页面形式感,E.乾坤

13、大挪移,F.钉钉铆铆,装饰点睛法,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,图片来源于网络，如有侵权，请告知删除,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,那页面中常见的装饰元素有哪些？,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,1.数字,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,2.英文,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,3.流行元素,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,冒泡,小星星,图标,相片,箭头,主题元素,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,如果感觉页面很平庸，不妨来点小装饰,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉铆铆,专题页面设计方法,2. 快速打造专题页面形式感,F.钉钉