木子素材 首页 大神 UI设计 查看内容

大厂如何做设计?来看腾讯出品的 Q 设计语言

2020-6-24 00:07| 发布者: admin| 查看: 375| 评论: 0

摘要: 已过弱冠之年的QQ不仅传递用户的信息与情感,更缩短了亿万用户的社交距离。而QQ的演进同样面临挑战,任何一个海量用户平台的进化都需谨小慎微,丰富娱乐化的社交场景日趋复杂,后浪在展现自我与社交表达的平台也有更 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

已过弱冠之年的QQ不仅传递用户的信息与情感,更缩短了亿万用户的社交距离。而QQ的演进同样面临挑战,任何一个海量用户平台的进化都需谨小慎微,丰富娱乐化的社交场景日趋复杂,后浪在展现自我与社交表达的平台也有更多的选择,因此QQ需要担当起连接用户与未来的桥梁。

大厂如何做设计?来看腾讯出品的 Q 设计语言

Q语言是什么?

人与人通过语言进行交流,而用户与QQ的体验互动我们认为也是通过一种语言进行交流,也即Q语言。为了让用户在连接未来的桥梁上通行无阻,Q语言不仅要保持一致与高效性,更需要具备打动用户的独特魅力,另外考虑到QQ在亿万用户的影响力,也应该肩负起积极正向的社会责任感。基于这些因素我们为Q语言设定了三个基本目标:统一体验,基因体现,社交向善。

大厂如何做设计?来看腾讯出品的 Q 设计语言

1. 统一体验

QQ作为一个社交平台,会容纳多样性的功能与体验,为了降低用户在不同场景功能下的学习成本,并提升易用性,统一体验是提升平台易用性的关键基础。同时有助于提升各角色间的协作效率。

2. 基因体现

当今同质化的社交应用越来越多,QQ作为横跨多时期多平台的社交应用,一方面需紧贴时代趋势,在众多应用中脱颖而出,另一方面有足够的历史底蕴,应强化自身基因特征,提升整体品牌认知。

3. 社交向善

社交应用会融入琳琅满目的娱乐化规则与玩法,但吸引年轻人的不应只是单纯娱乐消费,需要考虑社交娱乐的本质初心,QQ更倡导用户在一个积极健康,安全贴心,触动情感的环境进行社交,并最终导人向善。

用户洞察

用户年龄结构,兴趣偏好,生活环境与方式的变化与发展也促使我们有更深入的用户洞察。

大厂如何做设计?来看腾讯出品的 Q 设计语言

1. 高效娱乐

伴随信息传播便利性提升,用户需要更高浓度的信息和更快的娱乐方式。用户时间愈加宝贵,偏向消费耗时较短的短视频、信息流等内容,希望更快找到喜欢的内容,以及更高浓度的内容。

2. 兴趣细分

互联网使用场景更细分,兴趣爱好更加细分深入。各种兴趣圈、游戏圈、粉丝圈等年轻用户基于互联网衍生出来的圈子,需要有更细分深入的功能场景去承载。线上和线下联动是细分圈子持续活跃的关键。

3. 社交压力

互联网信息传播的扩散效应,以及社会的复杂性给用户带来更多社交压力,原创越来越少。可以通过丰富的形象建立和维护体系增强用户的社交动力,引导产生更多原创内容和互动。

有生机的设计语言

基于对用户的洞察,我们倡导Q语言的设计理念要能围绕社交有效性,社交广度与深度,社交动力等维度,打造一个积极向上充满生命力的社交生态体系,也即生机。生机的理念承载乐观活力与积极延续,具备有序和精致的特点,也象征万物发展所蕴含的生命力。

大厂如何做设计?来看腾讯出品的 Q 设计语言

在生机的理念支撑下,我们对设计制定了几个原则,用于权衡和度量在QQ平台上的设计优劣。

设计原则

1. 活力灵动

对年轻人有吸引力,传递积极乐观情感,有怦然心动的感觉。

大厂如何做设计?来看腾讯出品的 Q 设计语言

2. 亲和自然

体验过程犹如与朋友打交道,亲和自然,懂我所想。

大厂如何做设计?来看腾讯出品的 Q 设计语言

3. 自我有范

能无压力表达与展现自我,满足不同人群的个性诉求。

大厂如何做设计?来看腾讯出品的 Q 设计语言

Q语言也对界面元素重新定义,保持延续性,低门槛,高效清晰的同时力求绽放生机。

1. 色彩

QQ色彩体系是年轻充满活力的,整体的色彩让视觉感受到轻松愉悦,同时遵循着Q语言的设计原则。通过色彩的性质的表现力能让交互层级更加的分明,并且让用户拥有更多个性化的想象空间。

大厂如何做设计?来看腾讯出品的 Q 设计语言

十二色环里结合使用场景去除两个阅读性较差的色相,选取出十款充满生机和赋有想象力的颜色。每一个颜色对应的渐变色,轻质感打造亲和自然的精致品质,可用于图标和业务logo在QQ界面上的呈现。

大厂如何做设计?来看腾讯出品的 Q 设计语言

2. 图标

QQ图标体系是年轻充满活力的,通过从造型层,色彩质感层,语义层和内核层的四维思考,给用户带来年轻生机的视觉体验。同时,QQ图形体系遵循着严格的绘制规则,保证QQ图形体系的严谨、规范、一致。

大厂如何做设计?来看腾讯出品的 Q 设计语言

外形:形象源于生活,符合自然匹配;

色彩/质感:颜色多元自然,材质自然真实;

语义:挖掘年轻文化,关注背后内涵;

内核:传递快乐情绪,引导积极向上。

大厂如何做设计?来看腾讯出品的 Q 设计语言

大厂如何做设计?来看腾讯出品的 Q 设计语言

3. 交互行为

随着社交场景的丰富性与碎片化逐步提升,用户一方面对交互行为与任务流程的效率有更高要求,另一方面对社交场景体验过程中的娱乐与趣味性有更多的期望。因此交互方式应该能更好的支持多任务场景,为用户提供更便捷和精准的操作并能适当在操作反馈上带来幽默和惊喜感。

鼓励手势操作

相较于在有限的屏幕尺寸范围内增加更多操作入口,引入符合直觉且有预期的手势操作可以减轻视图内UI界面的复杂度,提升信息内容的展示效率,并且有助于用户提高交互行为过程的操作效率,良好的手势操作应该能满足:

  • 便捷高效完成任务;
  • 有预期并准确执行操作;
  • 通过手势扩展信息视图的可交互性;
  • 适当带来意外的惊喜感。

大厂如何做设计?来看腾讯出品的 Q 设计语言

大厂如何做设计?来看腾讯出品的 Q 设计语言

大厂如何做设计?来看腾讯出品的 Q 设计语言

有利于多线程任务设计

QQ为用户提供通讯社交,内容消费,娱乐办公等丰富能力,也提高了任务流程并行体验的迫切性与可行性。在对复杂场景的体验设计环节中,应该为临时任务事件,沉浸式任务事件及其之间的并发场景进行轻量及高效的多线程任务体验设计。

在复杂场景中设计时也要考虑到:分支任务的体验足够轻量,为多个沉浸式任务提供并行与交替的交互方式。

大厂如何做设计?来看腾讯出品的 Q 设计语言

大厂如何做设计?来看腾讯出品的 Q 设计语言

4. 文案

界面文案是引导用户行为的直接形式,合适的文案不仅要能帮助用户高效达成目标,也要在达意的前提下让用户有如朋友般互相尊重与有同理心的正向感受。Q语言的用语文案需要符合以下原则:

清晰易懂善解人意

QQ用户所覆盖的年龄,群体范围面广,文案的使用应力求通俗易懂,避免产生歧义。为了指引用户更顺利完成任务,也应多考虑语法和描述的一致性,降低用户记忆成本。

大厂如何做设计?来看腾讯出品的 Q 设计语言

符合年轻人文化基因

文案应以朋友的态度,自然友好地与用户对话。在娱乐场景中,文案应与年轻人生活圈接轨,能体现用户时尚潮流的文化基因,有适当趣味性和保持新鲜感。此外也需考虑不同用户的立场与角度,避免传递过分玩笑、轻浮与夸大等感觉。

大厂如何做设计?来看腾讯出品的 Q 设计语言

赋予积极导向

文案在传递信息时,不应只是简单地引导要素与功能,还应勾勒出积极体验的愿景,为目标赋予意义。此外,当用户遭受挫败时,文案也应承担起弥补挫败感的角色,关心用户并帮助解决困难。

大厂如何做设计?来看腾讯出品的 Q 设计语言

5. 控件

控件是信息的容器并承载了用户的行为过程,而构建平台级产品的控件也面临一致性,维护成本的难题,Q语言要求控件的设计需要有系统化思维,意味着要能让团队能以更小的成本进行不同场景不同版本进行有规律性的差异化设计。

大厂如何做设计?来看腾讯出品的 Q 设计语言

QQ不仅为用户带来多样化的内容,也需要面对用户复杂多变的场景,而Q语言体系下的控件一方面要适应用户场景带来最合适体验,另一方面需要优化设计迭代流程并降低设计成本。

大厂如何做设计?来看腾讯出品的 Q 设计语言

6. 品牌核心价值

围绕生机的理念和QQ品牌策略,品牌核心价值也进行了升级。QQ未来的线上或线下活动也会围绕品牌核心价值来展开,而这些活动也可以体现,演绎丰满和强化品牌核心价值。

大厂如何做设计?来看腾讯出品的 Q 设计语言

生趣

QQ围绕社交有效性、社交广度与深度、社交动力等维度,打造一个积极向上充满生命力的社交生态体系。生机的理念承载乐观活力与积极延续,具备有序和精致的特点,也象征万物发展所蕴含的生命力。

个性

QQ能提供给用户种类繁多的个性化定制服务,多元化的沟通是QQ的核心优势,近几年QQ推动多元化生活方式,扩大产品边界,用户在QQ内有更多玩法。

陪伴

QQ企鹅是伴随很多用户成长的玩伴,是用户成长道路上的精神伴侣,是用户在创业奋斗时,辛勤工作时互相支持互相鼓励的好朋友。

大厂如何做设计?来看腾讯出品的 Q 设计语言

QQ是连接人与人的一种方式,而Q语言是连接用户与QQ的互动体验,生机充满活力的体验也更契合QQ平台与品牌的整体理念,为用户带来更丰富多样化的可能性,也请期待QQ团队未来在社交领域带来更多用户价值与创新。

Q语言官方网站:Q Design Language

大厂如何做设计?来看腾讯出品的 Q 设计语言

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×