干货-腾讯内部专题页面设计方法
腾讯的产品设计及用户体验(ppt 41页)
– “对手机邮件客户端，需要一些协议级底层研究， 最少流量的状态同步，向Blackberry看齐”
7
产品设计—交互界面：少即是多
• 做得越多越不好，我们需要经常告诫自己，是不是做得太多了？ • 用户价值不会因为是统一了（大而全）而体现的，而是每一个单项是否能真正赢
• 光标定位：之前的点"回复"时光标focus到正文的问题改好了,但却没有注意到点" 转发"时光标,反而应是在"收件人"处而不是正文处, 因为一般总要填写转发人, 而回 复(包括回复全部)则是直接输入内容.
23
交互设计—符合用户习惯与预期
• 类Outlook客户端操作，但比它做得更优秀
– 先字母排序，再优先显示最近联系人，减少键盘操作。这么细的体验，但一旦用上，就 觉得别的同类产品很粗糙了！
– 能用标准控件的，不自己画控件
（一个button，就有focused,selected, up/down,enabled/disabled,tab顺序等多种状态要画和处理，不容易的 ，而且要考虑浏览器兼容）
– 能用文字的，不用图片（加图片是要申请的） – 保持尽可能少的格式式样
• 维持统一
– 就算字体和行间距等小细节都应该关注到 – 英文字体 Tahoma
VS
24
交互设计—符合用户习惯与预期
• 兼容客户端邮件菜单习惯
– 在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右键则不能。
• 不要随意去掉用户正在使用的功能
– 原来mail在做出了“HTML方式查看”后，去掉了“打开”功能
• 符合用户预期，点击其他地方，WEBQQ的浮动窗口隐藏到固定位置
腾讯QQ界面分析
腾讯QQ界面分析伴随着电脑的慢慢普及，人们的聊天的方式也越来越多样化，但是平时我们绝大部分现在正在用的正是腾讯公司的软件QQ，这款软件不仅方便了我们的聊天方式，而且她大大的丰富了我们的交际方式和范围。
对待如此熟悉的一款软件，现在我来主要分析它优美的界面：下边从界面中的交互功能与图标、色彩、导航、窗口和聊天功能创意上的对比方面分析一下腾讯公司的软件QQ。
1、交互功能的进一步广泛20世纪80年代后期，两个国际机构开始把“用户界面设计”作为计算机科学的正式课程，这标志着人们开始重视系统的“可用性”和“用户体验”。
交互设计由IDEO的一位创始人比尔.莫格里奇（bill Moggridge）提出的，当时命名为“软面（soft face）”，后更名为“Interactive Design”。
比如，在腾讯软件QQ的登录界面中，最能体现交互功能的就是“记住密码”功能，表明腾讯公司现在越来越注意与用户之间的交流。
登录成功之后，又会发现交互功能的多次运用，每个用户可以根据自己的喜好更改图表的显示与否和各种图表的位置，更改“我的资料”也是交互功能的运用，每个人可以自行更改自己的各种信息。
同样的，用户还可以更改皮肤，这是人性化越来越明显的象征。
2、图标设计理念图标就是制造方用简单的图的形式让用户了解软件最基本的意义，是具有明确指代含义的计算机图形，界面中的图标是功能标识。
狭义上说是应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。
图标的设计理念有三点：⑴察表象，抓特点。
⑵此及彼，开联想。
⑶析寓意，字表达。
腾讯QQ登录成功后界面中，可以看到很多图标，一系列的图标大小都是相同的，样式丰富，但不繁杂。
如“QQ邮箱”图标是一个冷灰色小信封，让人能一目了然，知道这是什么工具。
又如“查找”图标是一个放大镜的样式，用户自然会想到“搜寻”、“寻找”，用户也能更好运用。
3、色彩以蓝白色为主人类对于不同的色彩会产生不同的生理反应，这一点已经通过科学的实验得到了证实。
页面设计方案
页面设计方案随着互联网的普及和发展，页面设计的重要性越来越凸显出来。
一个好的页面设计方案不仅可以提升用户体验，还能增加网站的可用性和吸引力。
本文将从页面布局、颜色搭配和交互设计等方面，探讨一个完善的页面设计方案。
一、页面布局页面布局是一个页面设计的基础，合理的页面布局可以使信息结构清晰、有序。
在页面布局中，需要考虑以下几个方面：1.1 导航栏的设计导航栏是一个网站的重要组成部分，它负责引导用户浏览网站的不同页面。
一个好的导航栏设计应该简洁明了，让用户一目了然地找到自己想要的功能或页面。
可以将导航栏固定在页面的顶部或侧边，使用户在任何时候都可以方便地进行导航。
1.2 内容展示区域的设计在页面布局中，内容展示区域是承载网站主要信息的地方。
在设计内容展示区域时，可以采用分栏布局或瀑布流布局。
分栏布局可以使信息分类清晰，同时也方便用户的浏览。
而瀑布流布局则可以增加页面的动感和吸引力，适合展示图片或多媒体内容。
二、颜色搭配颜色搭配是页面设计中一个重要的方面，不同的颜色可以传递出不同的情绪和氛围。
在选择颜色搭配时，可以参考以下几点：2.1 与品牌形象的一致性如果有品牌形象的要求，页面设计的颜色搭配应与品牌形象保持一致。
这样可以增加用户的辨识度，并加强品牌的形象感。
2.2 注意色彩的对比度在页面设计中，色彩的对比度可以提升页面的可读性和易用性。
可以使用相对明亮的颜色来突出重要的信息，让用户更容易注意到。
2.3 避免颜色的过度使用在页面设计中，过多的颜色使用不仅容易让用户感到混乱，还可能影响页面的可视性。
因此，应该避免使用过多的颜色，保持页面简洁清爽。
三、交互设计交互设计是页面设计中至关重要的一环，它直接关系到用户的操作和体验。
在交互设计中，需要注意以下几个方面：3.1 易用性一个好的交互设计应该能够使用户的操作更加轻松和顺畅。
可以采用一些常见的交互模式，如下拉菜单、按钮等，让用户能够直观地进行操作。
3.2 响应速度在页面设计中，页面的响应速度是用户体验的重要因素之一。
专题页的构成
专题页的构成专题页是一个网页，通常用于展示特定主题或事件的相关信息。
一个专题页可以包含许多不同的元素，但以下三个方面是构成专题页的基本要素：1.页面头部页面头部是专题页的顶部部分，通常包括网站的标志、导航栏、搜索栏和页眉等元素。
这部分还可以显示一些额外的信息，例如当前用户的登录状态或面包屑导航等。
在页面头部中，网站的标志是一个重要的元素。
它应该清晰、简洁地显示网站名称或品牌标志，并应处于页面的左上角或右上角等显眼位置。
导航栏是一个方便用户浏览网站不同页面的工具。
它应该包括网站的主要页面和栏目，以便用户快速找到所需的信息。
搜索栏可以让用户快速搜索网站上的内容。
它通常包括一个搜索按钮和一个文本框，用户可以在文本框中输入他们想要搜索的关键词或短语。
页眉是页面头部的另一个重要元素。
它通常包括网站的名称、主题或相关信息的简短描述。
页眉应该与网站的主题和内容相符合，以吸引用户的注意力。
2.页面主体页面主体是专题页的主要内容区域，通常包括以下元素：(1)标题：页面主体的顶部应该有一个简洁而引人注目的标题，以概括该页面的主题或事件。
标题应该具有吸引力和可读性，以便吸引用户的注意力。
(2)图片和视频：在页面主体中，可以包含图片和视频等多媒体元素，以增加页面的视觉效果和吸引力。
这些元素可以是静态的或动态的，具体取决于所需的效果和内容。
(3)文本内容：页面主体中的文本内容应该是该页面主题或事件的相关信息。
它可以是关于该主题或事件的背景信息、详细描述、相关文章或评论等。
文本内容应该清晰、简洁、易于理解和具有可读性。
(4)交互元素：在页面主体中，可以包含一些交互元素，例如表单、按钮、链接等，以增加用户的参与度和互动性。
这些元素可以是单独的表单或按钮，也可以是与文本内容相关的链接或注释等。
3.页面底部页面底部是专题页的底部部分，通常包括版权信息、联系方式和附加信息等元素。
这部分还可以添加一些相关的链接或社交媒体图标等元素。
专题页设计技巧
专题页面设计技巧一直在学习各种页面的设计，尤其是专题页面的制作，看到一篇文章，有很多关于专题设计的技巧，根据原文，摘录了一些。
先记下来，和大家分享。
专题设计需要了解1、专题头图设计，实际效果宽度1600PX时是最好的展示。
2、首屏高度为600px，这是大多数用户第一屏能够看到的区域。
3、优秀的头图是专题设计的灵魂。
4、首先设计风格，先在纸上或是大脑中勾勒一个大概的轮廓。
有些专题没有具象的视觉元素，那么就从专题的文字入手，如果实在不带感，可以将一些与专题相关的元素先拼凑在画布上，然后尝试各种组合，寻找灵感。
5、头图构图：需要考虑如何巧妙的与下面的内容衔接，而且尺寸更大，细节更多，构图也可以变化。
如果只是千篇一律的采用规则的构图，会让专题显得单调呆板，和视觉效果不好。
（例如可以用圆弧形的割头图）6、精美的视觉元素是构成优秀头图的重要元素，其中另一个重点就是大标题。
大标题需要花费专门的精力制作字体的变形和特效。
7、专题内容区的设计：可以继承头图中的视觉元素。
8、内容是基本，是想要传达给用户的核心，所以内容应该清晰，布局合理。
9、为了后续的制作方便，可以以5px的倍数进行间隔区分，个别情况例外，只要间距在视觉上保持规整即可。
10、特色模块，视觉突出。
但是要做到突出而不突兀。
谨记：追求卓越，成功自然尾随而至。
专题设计技巧：1、1024*768分辨率下，首屏高度为584px；1440*900分辨率下，首屏高度为：716px。
两条首屏线：580px；710px。
注意首屏高度。
将最主要信息显示在580px 范围之内。
2、检验一个专题头图标题是否显眼其中的一个方法就是将网页去色，站在远处看看标题是否还看得清。
专题的标题要足够醒目，要与整个页面有最大的对比度。
Title是页面的视觉焦点要足够显眼。
大小：主次画面对比，避免通体平均明暗：看看去色后设计稿的样子是否还足够显眼。
3、掌控你页面里面的光，让内容在同一个光环境里面。
腾讯的设计规范
隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。
火龙果 整理
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779（+21） 779（+21） 783(+17) 781(+19)
说明： 比如1024×768下IE7.0的可视面积是（1024-21）×（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800×600：779×432 最广泛使用的一屏大小是IE6下1024×768 ：1003×600
火龙果 整理
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，与腾讯网首页统一尺寸。
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
2. 应用场景
火龙果 整理
强表现方式：
• 加大搜索框的显示，输入框内采用大字体（14号） • 突出搜索button的表现，更直观，更有点击欲
• 位置放在页头的中间并明显标示
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
腾讯网首页设计分析
~网页分析之腾讯网
指导老师：王 珺 小组成员：车顺星 王璐琳 孙朝阳
腾讯网，是中国主要综合类门
户网站，和新浪网、搜狐网、 网易网并称为“中国四大门 户”。该类网站以新闻信息、 娱乐资讯等信息为主。
一：腾讯网页面布局
• • • •
网页整体布局 造型与风格 网页边空设计 网页背景
• 秩序与统一 • 平稳与稳定 • 信息主次分明
腾讯网首页的广告设计
• 位置得当，内容简洁。
四：从腾讯网首页看未来门户网首页设计趋势
旧 页 面 2
旧页面3
目前腾讯网首页
分析
• 首页遵循着极简的设计理念，页面逐渐简约化，
符合目前主流的网页审美设计。
• 排版和颜色设计更加新颖独特，富有生机与活力。
• 搜索框，排版等方面改动，网页设计人性化趋势
发展。
放映结束， 感谢观看，谢谢。
3/8/2013
• 网格型布局 • 造型风格<矩形>
分析
• 1：综合类门户网信息量 庞大，但腾讯网首页设计， 排版合理，信息主次分明。
3：网格型布局：使网页信息 严谨、理性分割，使页面 整齐、条理，同时美化页 面。 4：矩形页面设计，给用户带 来平方，便于用户快 速检索信息。
网页空白
分析：腾讯网首页在页面四周留白，提高提高 可读性。
二：腾讯网色彩设计
分析
• 页面以白色为背景，使图像和文字更加醒目。 • 以时事新闻中“两会”为导航栏顶部背景，符合 腾讯网“门户网站”性质。
文字色彩
• 易于识别 • 增加美感
三：细节决定成败
• 腾讯网首页的设计右栏宽度是600px，整体版 面的宽度是960px，两者之间的比例是0.630。
腾讯-项目管理内部PPT-干货分享
计划
WBS 工作分解结构 任务排序
甘特图 （项目推进计划） 风险管理 影响力/发生效率
收尾
执行与控制
项目交付/总结
How：立项申请 Kick-off meeting
变更管理
项目管理Tips
• 多问5次为什么，了解干系人在乎的Need；
• 每件任务的责任人只有一个；
• 尽可能的让团队成员了解全貌，特别是需要协同合作的工作任务； • 当有外部供应商或合作伙伴介入时，对接机制和沟通机制很重要；
干系人分析
高
令其满意
重点管理
权 力
监督
随时告知
低
利益
高
干系人权力/利益方格示例图
干系人分析
分析有哪些 干系人
分析干系人 需求
分析其权力 /影响力
分析其态度 /利益
管理方案
How：怎么立项？
立项申请
《立项申请书》要点：
Kick-off meeting
参与 人员
管理层代表 项目经理及团队
主题
要生产的产品，或者准备提供的服务。
项目目标的标准：SMART
具体性 Specific
可衡量性 Measurable
可实现性 Achievable
现实可行性 Realistic
时限性
Time-Bound
对细节作出描述
可以通过定性或者定量的方式对目标进行衡量 目标应该是可实现的 在各种限制因素下，目标应具备可行性 在指定的时间内实现目标
项目目标 PM正式授权
•
• •
项目背景分析
项目目的 项目目标
•
• •
初步范围说明
项目里程碑 项目组织结构
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
客户的奸叫
要闪
没有重点，只有更重点
要大要大
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
突出
我们该如何应对！
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
1. 专题页面定义
专题页面设计方法
1. 专题页面定义
个性原则
Individuality
互动原则
Interaction
趣味原则
Interesting
利益原则
Interests
专题页面设计方法
1. 专题页面定义
专题页面的定义
又称为minisite，指围绕某一主题事件或活动而单 独开辟的独立网页或网站，如运营活动，礼品推 送，版本介绍等
2. 快速打造专题页面形式感
A.抄现实
借鉴生活中存在的实物
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
它可以变成网页吗？
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例欣赏
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
从摄影看满与空
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
案例演示
QQ西游花祭专题
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
需求分析：
1.这是一个内容适中的需求 2. 原来的游戏SLOGAN被勒令使用，希望玩家来纪念 同时选出新的SLOGAN，参与者将获得礼物。
3. 调性哀伤，但虽然是祭是死去，却不能恐怖，并且
A.抄现实
案例演示二
QQ飞车三周年专题
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
去掉贺卡上的文字和图案
分块
为按钮寻找一屏展示区
加法
加入修饰元素，细节刻画
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
小 结
• 将页面主题进行可视化设计，传达真实感受 • 页面主题易具象表现，且功能和内容较少，强调视觉表现 • 对绘画造型有一定要求
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
3. 延展思考
延展思考
专题页面设计方法
3. 延展思考
说出你的感受：
专题页面设计方法
3. 延展思考
设计的文化层次模型
专题页面设计方法
3. 延展思考
设计不是一种技能，而是捕捉事物本质的感 觉能力与洞察能力。
—原研哉
整体旋转
背景旋转
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
整体旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
背景旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
内容旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
信息内容旋转多少角度比较合适？
专题页面设计方法
2. 快速打造专题页面形式感
快速打造专题页面形式感
A.抄现实
以物造行法
B.圆方三角
快速几何泼墨法
C.断臂之美
局部反常态法
D.欲擒故纵
留白视觉反常态法
E.乾坤大挪移
布局反常态法
F. 钉钉铆铆
装饰点睛法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
A.抄现实
以物造行法
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
那页面中常见的装饰元素有哪些？
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
1.数字
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
2.英文
专题页面设计方法
2. 快速打造专题页面形式感
步骤归纳
减法
分块
加法
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
案例演示一
DNF黑钻专区
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
专题页面设计方法
2. 快速打造专题页面形式感
A.抄现实
减法
简化钻面细节，保留外轮廓
分块
寻找内容安置空间
加法
加入页面内容
专题页面设计方法
2. 快速打造专题页面形式感
花愿、 • 底部换色、聚焦 花种、花瓣、花祭，花祭主题贯穿全文 • 数字“1.2.3” 、虚线和箭头指示阅读
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
E.乾坤大挪移
布局反常态法
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
设计师： greatstyle（韩国）
专题页面设计方法
案例演示一
御龙在天封测专题（旋转）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
案例演示二
QQ西游装机专题（平移）
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
时间短！没创意！又要快速捕抓眼球,怎么办？
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
常规
旋转
平移
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
旋转
专题页面设计方法
2. 快速打造专题页面形式感
E.乾坤大挪移
专题页面设计方法
3. 延展思考
设计就是解决问题！
专题页面设计方法
3. 延展思考
专题页面设计方法
3. 延展思考
抛砖引玉，欢迎大家总结自己的 设计方法一起探讨！
Q&A
2. 快速打造专题页面形式感
C.断臂之美
案例分析
QQ西游神秘站
专题页面设计方法
2. 快速打造专题页面形式感
C.断臂之美
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
D.欲擒故纵
留白视觉反常态法
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
这些都要首屏啊啊啊
热烈再热烈一点
要酷要炫要高调
要让人看到新的希望。 4. 选择凄美的调性，而空白、安静正好可以体现出这 种哀伤的情怀。 5. 我们应该引导用户阅读和操作，如何完成”空”的
表现。
专题页面设计方法
2. 快速打造专题页面形式感
D.欲擒故纵
阅读疲劳： 连贯性： • 减小一屏显示内容，制造一个空灵安静的祭奠气氛。 • 文字稍微倾斜，打破太过规整死板 献花、选新SLOGAN、转发微博、 祝福墙、四个标题改为
专题页面设计方法
By:TGideas
授课目的
• 归纳一些设计形式
• 整理一些设计思路
• 总结一些设计方法 • 展示一些设计过程
专题页面设计方法
1. 专题页面定义
为什么要设计专题页面
专题页面设计方法
1. 专题页面定义
营销推广 产品
诞 生 调 研 产品 立项 产品 开发 测 试 市场 预热 全面 传播 稳定 销售 持续 传播
F.钉钉铆铆
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
3.流行元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
冒泡
小星星
图标
相片
箭头
主题元素
专题页面设计方法
2. 快速打造专题页面形式感
F.钉钉铆铆
如果感觉页面很平庸，不妨来点小装饰
专题页面设计方法
2. 快速打造专题页面形式感
专题页面设计方法