干货-腾讯内部专题页面设计方法
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
专题页面设计方法
By:TGideas
授课目的
• 归纳一些设计形式
• 整理一些设计思路
• 总结一些设计方法 • 展示一些设计过程
专题页面设计方法
1. 专题页面定义
为什么要设计专题页面
专题页面设计方法
1. 专题页面定义
营销推广 产品
诞 生 调 研 产品 立项 产品 开发 测 试 市场 预热 全面 传播 稳定 销售 持续 传播
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
当我们听到突出、变大的需求的时候 不如我们反其道而行，来看看”空“境的别样风景
第一反应是采用了加强法
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
从建筑看满与空
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
3. 延展思考
延展思考
专题页面设计方法
3. 延展思考
说出你的感受：
专题页面设计方法
3. 延展思考
设计的文化层次模型
专题页面设计方法
3. 延展思考
设计不是一种技能，而是捕捉事物本质的感 觉能力与洞察能力。
—原研哉
2. 快速打造专题页面形式感
C.断臂之美
案例分析
QQ西游神秘站
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
D.欲擒故纵
留白视觉反常态法
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
这些都要首屏啊啊啊
热烈再热烈一点
要酷要炫要高调
专题页面设计方法
2. 快速打造专题页面形式感
快速打造专题页面形式感
A.抄现实
以物造行法
B.圆方三角
快速几何泼墨法
C.断臂之美
局部反常态法
D.欲擒故纵
留白视觉反常态法
E.乾坤大挪移
布局反常态法
F. 钉钉铆铆
装饰点睛法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
A.抄现实
以物造行法
专题页面设计方法
整体旋转
背景旋转
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
整体旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
背景旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
信息内容旋转多少角度比较合适？
从摄影看满与空
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
案例演示
QQ西游花祭专题
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
需求分析：
1.这是一个内容适中的需求 2. 原来的游戏SLOGAN被勒令使用，希望玩家来纪念 同时选出新的SLOGAN，参与者将获得礼物。
3. 调性哀伤，但虽然是祭是死去，却不能恐怖，并且
退 市
专题页面设计方法
1. 专题页面定义
用户
传 网 营销推广
统 营 销
络 营 销
产品
专题页面设计方法
1. 专题页面定义
用户 …………………………………………………………
平台网站 用户层
互动平台层
…………………………………………………………
企业网站 品牌网站
广告活动网站
专题网站
产品资料落地层
产品
专题页面设计方法
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
F.钉钉铆铆
装饰点睛法
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
图片来源于网络，如有侵权，请告知删除
专题页面设计方法
B.圆方三角
可以联想到什么？ 尝试一些简单的搭配组合
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
案例演示
QQ西游愚人节活动
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
时间短！没创意！又要快速捕抓眼球,怎么办？
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
常规
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
专题页面设计方法
ቤተ መጻሕፍቲ ባይዱ
2. 快速打造专题页面形式感
E.乾坤大挪移
可爱 ……
活泼
有趣
愚人节
搞笑
陷阱
……
刺激
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
设计是一个理性思维+联想+运气的过程
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
C.断臂之美
局部反常态法
专题页面设计方法
2. 快速打造专题页面形式感
案例演示一
御龙在天封测专题（旋转）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例演示二
QQ西游装机专题（平移）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
2. 快速打造专题页面形式感
F.钉钉铆铆
那页面中常见的装饰元素有哪些？
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
1.数字
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
2.英文
专题页面设计方法
2. 快速打造专题页面形式感
要让人看到新的希望。 4. 选择凄美的调性，而空白、安静正好可以体现出这 种哀伤的情怀。 5. 我们应该引导用户阅读和操作，如何完成”空”的
表现。
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
阅读疲劳： 连贯性： • 减小一屏显示内容，制造一个空灵安静的祭奠气氛。 • 文字稍微倾斜，打破太过规整死板 献花、选新SLOGAN、转发微博、 祝福墙、四个标题改为
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
3.流行元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
冒泡
小星星
图标
相片
箭头
主题元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
如果感觉页面很平庸，不妨来点小装饰
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例演示二
QQ飞车三周年专题
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
去掉贺卡上的文字和图案
分块
为按钮寻找一屏展示区
加法
加入修饰元素，细节刻画
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
小 结
• 将页面主题进行可视化设计，传达真实感受 • 页面主题易具象表现，且功能和内容较少，强调视觉表现 • 对绘画造型有一定要求
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
设计师： greatstyle（韩国）
专题页面设计方法
1. 专题页面定义
专题页面设计方法
1. 专题页面定义
个性原则
Individuality
互动原则
Interaction
趣味原则
Interesting
利益原则
Interests
专题页面设计方法
1. 专题页面定义
专题页面的定义
又称为minisite，指围绕某一主题事件或活动而单 独开辟的独立网页或网站，如运营活动，礼品推 送，版本介绍等
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
B.圆方三角
快速几何泼墨法
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
圆
三角
方
做为自然界视觉三种基础形态，它们分别由直线、折线、弧线组成。 • 方：整齐、稳定、生硬 • 圆：可爱、柔软 • 三角：动感、尖锐
专题页面设计方法
2. 快速打造专题页面形式感
这个这个这个要突出
客户的奸叫
要闪
没有重点，只有更重点
要大要大
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
突出
我们该如何应对！
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
步骤归纳
减法
分块
加法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例演示一
DNF黑钻专区
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
简化钻面细节，保留外轮廓
分块
寻找内容安置空间
加法
加入页面内容
专题页面设计方法
2. 快速打造专题页面形式感
花愿、 • 底部换色、聚焦 花种、花瓣、花祭，花祭主题贯穿全文 • 数字“1.2.3” 、虚线和箭头指示阅读
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
E.乾坤大挪移
布局反常态法
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
3. 延展思考
设计就是解决问题！
专题页面设计方法
3. 延展思考
专题页面设计方法
3. 延展思考
抛砖引玉，欢迎大家总结自己的 设计方法一起探讨！
Q&A
2. 快速打造专题页面形式感
A.抄现实
借鉴生活中存在的实物
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
它可以变成网页吗？
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
By:TGideas
授课目的
• 归纳一些设计形式
• 整理一些设计思路
• 总结一些设计方法 • 展示一些设计过程
专题页面设计方法
1. 专题页面定义
为什么要设计专题页面
专题页面设计方法
1. 专题页面定义
营销推广 产品
诞 生 调 研 产品 立项 产品 开发 测 试 市场 预热 全面 传播 稳定 销售 持续 传播
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
当我们听到突出、变大的需求的时候 不如我们反其道而行，来看看”空“境的别样风景
第一反应是采用了加强法
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
从建筑看满与空
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
3. 延展思考
延展思考
专题页面设计方法
3. 延展思考
说出你的感受：
专题页面设计方法
3. 延展思考
设计的文化层次模型
专题页面设计方法
3. 延展思考
设计不是一种技能，而是捕捉事物本质的感 觉能力与洞察能力。
—原研哉
2. 快速打造专题页面形式感
C.断臂之美
案例分析
QQ西游神秘站
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
D.欲擒故纵
留白视觉反常态法
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
这些都要首屏啊啊啊
热烈再热烈一点
要酷要炫要高调
专题页面设计方法
2. 快速打造专题页面形式感
快速打造专题页面形式感
A.抄现实
以物造行法
B.圆方三角
快速几何泼墨法
C.断臂之美
局部反常态法
D.欲擒故纵
留白视觉反常态法
E.乾坤大挪移
布局反常态法
F. 钉钉铆铆
装饰点睛法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
A.抄现实
以物造行法
专题页面设计方法
整体旋转
背景旋转
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
整体旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
背景旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
信息内容旋转多少角度比较合适？
从摄影看满与空
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
案例演示
QQ西游花祭专题
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
需求分析：
1.这是一个内容适中的需求 2. 原来的游戏SLOGAN被勒令使用，希望玩家来纪念 同时选出新的SLOGAN，参与者将获得礼物。
3. 调性哀伤，但虽然是祭是死去，却不能恐怖，并且
退 市
专题页面设计方法
1. 专题页面定义
用户
传 网 营销推广
统 营 销
络 营 销
产品
专题页面设计方法
1. 专题页面定义
用户 …………………………………………………………
平台网站 用户层
互动平台层
…………………………………………………………
企业网站 品牌网站
广告活动网站
专题网站
产品资料落地层
产品
专题页面设计方法
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
F.钉钉铆铆
装饰点睛法
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
图片来源于网络，如有侵权，请告知删除
专题页面设计方法
B.圆方三角
可以联想到什么？ 尝试一些简单的搭配组合
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
案例演示
QQ西游愚人节活动
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
时间短！没创意！又要快速捕抓眼球,怎么办？
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
常规
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
专题页面设计方法
ቤተ መጻሕፍቲ ባይዱ
2. 快速打造专题页面形式感
E.乾坤大挪移
可爱 ……
活泼
有趣
愚人节
搞笑
陷阱
……
刺激
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
设计是一个理性思维+联想+运气的过程
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
C.断臂之美
局部反常态法
专题页面设计方法
2. 快速打造专题页面形式感
案例演示一
御龙在天封测专题（旋转）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例演示二
QQ西游装机专题（平移）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
2. 快速打造专题页面形式感
F.钉钉铆铆
那页面中常见的装饰元素有哪些？
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
1.数字
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
2.英文
专题页面设计方法
2. 快速打造专题页面形式感
要让人看到新的希望。 4. 选择凄美的调性，而空白、安静正好可以体现出这 种哀伤的情怀。 5. 我们应该引导用户阅读和操作，如何完成”空”的
表现。
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
阅读疲劳： 连贯性： • 减小一屏显示内容，制造一个空灵安静的祭奠气氛。 • 文字稍微倾斜，打破太过规整死板 献花、选新SLOGAN、转发微博、 祝福墙、四个标题改为
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
3.流行元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
冒泡
小星星
图标
相片
箭头
主题元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
如果感觉页面很平庸，不妨来点小装饰
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例演示二
QQ飞车三周年专题
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
去掉贺卡上的文字和图案
分块
为按钮寻找一屏展示区
加法
加入修饰元素，细节刻画
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
小 结
• 将页面主题进行可视化设计，传达真实感受 • 页面主题易具象表现，且功能和内容较少，强调视觉表现 • 对绘画造型有一定要求
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
设计师： greatstyle（韩国）
专题页面设计方法
1. 专题页面定义
专题页面设计方法
1. 专题页面定义
个性原则
Individuality
互动原则
Interaction
趣味原则
Interesting
利益原则
Interests
专题页面设计方法
1. 专题页面定义
专题页面的定义
又称为minisite，指围绕某一主题事件或活动而单 独开辟的独立网页或网站，如运营活动，礼品推 送，版本介绍等
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
B.圆方三角
快速几何泼墨法
专题页面设计方法
2. 快速打造专题页面形式感
B.圆方三角
圆
三角
方
做为自然界视觉三种基础形态，它们分别由直线、折线、弧线组成。 • 方：整齐、稳定、生硬 • 圆：可爱、柔软 • 三角：动感、尖锐
专题页面设计方法
2. 快速打造专题页面形式感
这个这个这个要突出
客户的奸叫
要闪
没有重点，只有更重点
要大要大
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
突出
我们该如何应对！
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
步骤归纳
减法
分块
加法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例演示一
DNF黑钻专区
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
简化钻面细节，保留外轮廓
分块
寻找内容安置空间
加法
加入页面内容
专题页面设计方法
2. 快速打造专题页面形式感
花愿、 • 底部换色、聚焦 花种、花瓣、花祭，花祭主题贯穿全文 • 数字“1.2.3” 、虚线和箭头指示阅读
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
E.乾坤大挪移
布局反常态法
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
3. 延展思考
设计就是解决问题！
专题页面设计方法
3. 延展思考
专题页面设计方法
3. 延展思考
抛砖引玉，欢迎大家总结自己的 设计方法一起探讨！
Q&A
2. 快速打造专题页面形式感
A.抄现实
借鉴生活中存在的实物
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
它可以变成网页吗？
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实