规避低龄化设计腾讯内部课件

1、 目录：一. 规避低龄化原因二. 低龄化设计的特征三. 规避低龄化的方法目录：一. 规避低龄化原因业界产品视觉趋势公司重点业务视觉风格与品牌战略BU业务品牌方向规避低龄化设计腾讯内部课件业界产品视觉趋势 - 欧美系一. 规避低龄化原因特色：欧美系的新老牌网站视觉共同点：结构清晰、用色柔和、简洁清爽传达给用户国际化稳定 、专业、的品牌理念业界产品视觉趋势 - 欧美系一. 规避低龄化原因特色：一. 规避低龄化原因特色：更符合亚洲人审美的韩系站点整体色彩明快时尚感强。Header区为设计重点，以品牌色彩的高饱和色作为导航背景，对整个页面的色彩起到统领作用；资讯内容区域使用适宜阅读灰色线框进行模块的分

2、割细节质感 柔和细腻。排版留白适中、疏密结合传达出深刻的品牌的印象与良好的阅读体验业界产品视觉趋势 - 韩系一. 规避低龄化原因特色：业界产品视觉趋势 - 韩系业界产品视觉趋势 - 国内一. 规避低龄化原因特色：近期老三大门户网易、新浪、搜狐的相继改版中，可以看出国内站点也愈加重视用户体验。不约而同的将改版重点转移到宽屏（1024）显示上，结构排版也比以往清晰许多。业界产品视觉趋势 - 国内一. 规避低龄化原因特色：业界产品视觉趋势 - 总结一. 规避低龄化原因整体趋势整体排版结构清晰，适量的留白将交互设计更好的融入视觉导航区可作为站点的设计亮点资讯内容区弱化修饰整体有品牌视觉，同时传达给 用

3、户时尚轻松的阅读体验业界产品视觉趋势 - 总结一. 规避低龄化原因整体趋势一. 规避低龄化原因业界产品视觉趋势公司重点业务视觉风格与品牌战略BU业务品牌方向规避低龄化设计腾讯内部课件公司目前业务 QQ.com 旧版一. 规避低龄化原因问题：和国内传统三大门户视觉传达的感受差不多，整页密集的蓝色链接。Header区频道Icon风格和当时的QQ.com Logo相映成趣给人低龄化的感觉公司目前业务 QQ.com 旧版一. 规避低龄化原因问题公司目前业务 QQ.com 新版一. 规避低龄化原因特色：默认风格清爽、舒适，排版清晰合理。整体传达给用户大气、中性的门户感。同时，提供多种风格定义，满足个性化

4、需求公司目前业务 QQ.com 新版一. 规避低龄化原因特色公司目前业务 TM2008一. 规避低龄化原因特色：整体采用清爽、时尚、精致的视觉风格自然照片与精致绚丽的图形元素、玻璃质感结合，也有效的提升了整体的时尚感。公司目前业务 TM2008一. 规避低龄化原因特色：公司目前业务 QQmail 旧版一. 规避低龄化原因问题：整体设计粗糙，配色也过于强烈用户体验也有待提升公司目前业务 QQmail 旧版一. 规避低龄化原因问题公司目前业务 QQmail 新版一. 规避低龄化原因特色：简约、清晰的视觉设计，保证流畅的用户体验给人稳定易用的良好印象.同时多套风格主题选择，又满足了不同个性化需求的用

5、户。公司目前业务 QQmail 新版一. 规避低龄化原因特色公司目前业务 Qshop 旧版一. 规避低龄化原因问题：早期QQ系列网站，大多以QQ形象为logo的元素网站大面积使用了圆角、纯色设计细节，整体给人可爱的感觉公司目前业务 Qshop 旧版一. 规避低龄化原因问题：公司目前业务 拍拍 新版一. 规避低龄化原因特色：整体色彩清爽，配以时尚的商品图片。传达出年轻、时尚的氛围公司目前业务 拍拍 新版一. 规避低龄化原因特色：公司目前业务 总结一. 规避低龄化原因比起早期产品大量使用QQ的卡通风格应用，现阶段公司产品普遍采用大方、清爽、时尚、国际化的视觉风格公司目前业务 总结一. 规避低龄化原

6、因比起早期产品大量使公司品牌战略一. 规避低龄化原因大回响 大影响QQ.COMTM2008QQmail从这些成功改版的产品中不难看出，我们未来的产品设计将迎接更广、更挑剔的用户群，“提升易用性、国际化、舒适、精致、时尚”将是我们的设计趋势公司品牌战略一. 规避低龄化原因大回响 大影响QQ.COMT一. 规避低龄化原因业界产品视觉趋势公司重点业务视觉风格与品牌战略BU业务品牌方向规避低龄化设计腾讯内部课件BU产品品牌方向 QQ空间一. 规避低龄化原因品牌方向：中国最大的在线时尚生活平台，是目前国内用户最多，人气最旺的Web2.0中文社区。口号“我的生活，我的时尚” BU产品品牌方向 QQ空间一.

7、 规避低龄化原因品牌方向：BU产品品牌方向 - QQShow一. 规避低龄化原因品牌方向：以QQ秀购买和红钻付费为营收基础，大力发展跨产品合作与对外合作，寻找QQ秀的更多出口。视觉上具体表现为新的抽向的logo和紫色品牌色的确立，杂志化和平面化的图文混排风格以及更加前卫的交互形式。BU产品品牌方向 - QQShow一. 规避低龄化原因品牌方BU产品品牌方向 QQ VIP一. 规避低龄化原因品牌方向：会员的vision:为QQ高端用户提供无处不在、个性化的特权体验、社群生活服务。 满足用户的特权、身份、体验、自我归属情感需求的服务，可以说我们就是“QQ的物业服务”。BU产品品牌方向 QQ VIP

8、一. 规避低龄化原因品牌方BU产品品牌方向 - QQMusic一. 规避低龄化原因品牌方向：QQ音乐网的vision: QQ音乐网是一个正版在线音乐试听网站，为QQ用户提供海量的优质音乐免费在线试听，还有第一手的新歌、发片信息，让您始终位于流行音乐最前端。 QQ音乐网的其他特点还有 QQ音乐网同时也是QQ音乐播放器的官方下载网站，以及以音乐增值服务为主的绿钻官网入口。BU产品品牌方向 - QQMusic一. 规避低龄化原因品牌二. 举例低龄化设计的特征A+B概念，低龄化的设计的特征 规避低龄化设计腾讯内部课件二. 举例低龄化设计的特征A+B 概念Logo模块文字控件A 基本结构色彩质感造型图形

9、元素B 视觉表现二. 举例低龄化设计的特征A+B 概念LogoA 基本结构色二. 举例低龄化设计的特征A 基本结构导航模块Logo造型可爱 色彩高饱和度不规则的造型+可爱的字体可爱的大卡通图标修饰，边框复杂的样式二. 举例低龄化设计的特征A 基本结构导航模块Logo造型可二. 举例低龄化设计的特征A 基本结构广告模块不规则的边框.“趣味”的动画转场方式二. 举例低龄化设计的特征A 基本结构广告模块不规则的边框.二. 举例低龄化设计的特征A 基本结构整体排版不规则的整体排版，突出趣味感二. 举例低龄化设计的特征A 基本结构整体排版不规则的整体排二. 举例低龄化设计的特征A 基本结构控件丰富的色彩

10、，突出的操作按钮二. 举例低龄化设计的特征A 基本结构控件丰富的色彩，突出的二. 举例低龄化设计的特征A 基本结构字体边缘圆角大，笔画不规则的字体们二. 举例低龄化设计的特征A 基本结构字体边缘圆角大，笔画不二. 举例低龄化设计的特征B 视觉表现B字体色彩质感低龄人群普遍喜欢五彩缤纷、色泽鲜艳的颜色，高饱和度的明亮的颜色的搭配，一般偏爱对比强烈、鲜艳的色彩二. 举例低龄化设计的特征B 视觉表现B字体色彩质感低龄人群二. 举例低龄化设计的特征B 视觉表现可爱的卡通形象造型图形元素二. 举例低龄化设计的特征B 视觉表现可爱的卡通形象造型图形三.规避低龄化的方法BU内四大业务网站的低龄化设计与规避方

11、法视觉风格指引低龄化对产品经历的建议规避低龄化设计腾讯内部课件BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法新版旧版整体布局不清晰 ，像素感元素过时整体风格柔和又富细节，传达出时尚 、清爽的视觉氛围。BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法LOGO：解决方法：旧版logo造型与色彩过于卡通，通过调整色彩与质感来 增强时尚感示例：BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法按钮：解决方法：按钮色彩过于饱和，质感较过时，通过调整色彩与

12、丰富质感来增强时尚感示例：BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法模块：解决方法：像素感较强，给人不精致的感觉。可以通过柔和渐变、磨砂质感、矢量圆角等细节来提升整体品质感示例：BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法图形元素：解决方法：图形元素过于卡通可爱，优化图形元素、配合页面风格进行调整示例：BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方法Loading：解决方法：图

13、形元素过于卡通可爱，优化图形元素与色彩质感示例：BU内四大业务网站的低龄化设计 QQ空间三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法导航：问题：颜色过于饱和，质感的表现细节不倒位解决方法：使用饱和度较低的颜色，并对光照和质感进行深入的刻画，加入更加时尚的表现手法，例如，投影，光影和透明示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法Logo区：问题：大量出现描线和单色填充的卡通手法，具后期效果刻画较简单和直接解决方法：抽像和简练的logo设计，与更细腻的光影刻画，与更多时尚表现元素，例如：

14、场景化的表现示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法按钮：问题：饱和度高，线条直接，立体感过于强烈，并出现了卡通造型的示意图形解决方法：紧跟UI业内潮流，模仿真实物理质感的刻画，加入类如光影纹理与半透明效果的表现，尽可能使用抽像的业内标准表达来促进可用性示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法Banner ：问题：固定banner的承载外框显得粗糙和直接，圆滚滚的水晶质感是可爱的代名词；卡通的QQ秀形像作为主体让画面缺乏细节解决方法

15、：设计前卫简洁的承载外框；内容排版多向潮流杂志的感觉靠近，如非特殊情况，尽可能地使用时尚人物或潮物作为画面主体示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法Title装饰：问题：作为portal类的title装饰显得繁锁和多余，并且使用具像的卡通人物和物品显得幼稚解决方法：简单清晰的表达才是portal类title应该的形式，如果需要重点装饰，可以考虑更加时尚和简洁的表现方法，还应该多使用英文来突出QQ秀的时尚气息示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站目前存在的低龄化设计 Q

16、Q秀三.规避低龄化的方法弹出对话框：问题：卡通形像的使用和简单鲜艳的配色过于可爱解决方法：使用通用图示和更加抽像的图形，并且细化质感的刻画细节。示例：BU内四大业务网站目前存在的低龄化设计 QQ秀三.规避低BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法文字排版：问题：冗余而粗糙的质感与不考究的排版，直接影响品牌形像解决方法：尽可能地简练地排版，如果要进行艺术排版，需进行细心的变形与质感刻画示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法非框架内活动页面：问题：泛滥的风格（包括字体与图形），和过于浓艳的色彩，卡

17、通形像和QQ秀的大面积使用，直接体现低龄风格解决方法：注意整活动页面由始至终的风格统一，多使用渐变色和低饱和色，花更多的时间去寻找和组织素材示例：BU内四大业务网站的低龄化设计 QQ秀三.规避低龄化的方法BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法导航：解决方法：目前导航质感过于卡通，改变高光和渐变的质感。 示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法按钮：解决方法：目前站点按钮质感比较卡通，部分按钮依然有红毛形象， 去掉红毛形象，优化按钮圆角以及质感 示例：BU内四大业务网站的低龄化设计 QQ会员

18、三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法广告语：解决方法：老站点我们更多是利用红毛作为主体，带出各种口号，之后的设计可以尽量用真人结合页面，让整个站点更加中性示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法Icon：解决方法：会员站点的icon多数是用红毛做主体，去掉红毛，找到更加中性的替代物，icon去掉水晶效果。示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法细节质感：解决方法：老站点很多承载图片或者文

19、字的框，质感和表现手法都可以进行改进。示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法Banner：解决方法：各种标题性banner，需要减少红毛公仔的运用，已经表现形式中性化。示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法活动页面：解决方法：尽量杜绝使用公仔做主体，真人和公仔的结合可以继续沿用，字体和排版也需要注意。示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方法字

20、体：解决方法：避免使用圆角过于夸张，形式过于可爱的字体，在质感和颜色上也同样注意，用更加中性的方式来表达主题示例：BU内四大业务网站的低龄化设计 QQ会员三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方法模块：解决方法：尽量用人物形象带代替QQ形象。示例：BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方法浮出层：解决方法：用中性icon带代替QQ形象。 。示例：BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方法广告：解决方法：人物形

21、象可以沿用，但是字体的设计可以质感一些示例：BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方法按钮：解决方法：按钮质感可以再丰富些，符合音乐产品风格。示例：BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方法Icon：解决方法：现在有些icon的设计偏向卡通，需要设计得中性些。示例：BU内四大业务网站的低龄化设计 QQ音乐三.规避低龄化的方三.规避低龄化的方法BU内四大业务网站的低龄化设计与规避方法视觉风格指引低龄化对产品经历的建议规避低龄化设计腾讯内部课件规避

22、低龄化设计 视觉风格指引三.规避低龄化的方法 造型 避免有意突出“可爱”风格，大量圆润无序的细节，非常规透视以及夸张本体比例 质感 避免试用柔软并且剔透的质感，如：塑胶、蜡笔、水彩等 色彩 避免高亮，高饱和度的色彩，偏向可爱风格的配色 构图 避免构图过于夸张不规则 字体 避免边缘圆角大，笔画不规则 图片素材的选用 避免幼稚、卡通的可爱素材，建议采用真人图片增强时尚互动感规避低龄化设计 视觉风格指引三.规避低龄化的方法设计风格指引-Qzone三.规避低龄化的方法 我的生活，我的时尚！Keywords：品牌色： 蓝色；强调色:橙黄色 ；银灰色基调背景 细节强调：高亮橙色叠加光影质感字体：雅黑字体 ； 90垂直渐变 ； 模块：3px圆角； 1px边框 标题字体：微软雅黑 富有层次感的银灰色基调背景品牌主色：蓝