探索科技-腾讯电脑管家设计总结

本周同时为大家转载一篇非常好的设计总结，希望大家能从中学到知识~

（本文由腾讯桌面安全产品部-DNA设计中心-天箭设计组全体成员撰写，未经授权严禁转载）

导语

历经8年的沉淀，电脑管家从无到有，逐步成长。对于日趋稳定的用户认知，如何从内而外的改变自己、寻求突破是电脑管家团队不断探索的问题。经过2017年的反复思考、磨砺，2018年电脑管家纯净版应运而生。我们从自身减法做起，净心、轻装、革新突破，从产品性能、界面体验到全新功能，每一步都谨慎思考，以期革新品牌的价值。

设计背景

项目初期设计联合产品进行了充分的研究和分析：对内，我们组织了多场研讨会，邀请同事、专家、用户一起探讨对管家未来的期望。对外，我们分析了《安全产品用户画像》、《管家品牌形象创意工作坊》、《管家版本数据分析》、《国内外竞品分析》，总结目前PC安全市场的发展和趋势。

通过对这些研究的总结提炼，我们发现了一些共性需求。比如内部用户反复提及的轻便、智能，外部用户的轻量、纯净，以及国内外竞品的轻净、纯粹等等。伴随市场趋势，PC安全软件用户的核心诉求发生了变化，相对功能的全面、内容的丰富，用户更加在乎和苛求的是产品带来的整体感知，比如是否轻量、是否快速、是否纯净。综合内外部访谈、线上数据、用户反馈和调研、竞品分析等研究结论，管家项目团队共同推导出这次改版的核心方向：轻、快、净。

设计理念

明确了轻、快、净的产品调性之后，如何进行设计表达是团队遇到的一大难题。设计初期围绕轻、快、净我们进行了多轮脑暴，从各个领域发散可以传达语义的设计元素。从轻快净的直观感受出发，先后推导出自然力量、新能源、新科技、星空、物理粒子、生物细胞、抽象几何等7个理念。

在具体理念的抉择上我们再度陷入困惑，反复纠结哪个方向能更好的进行品牌调性的传达和表现。为更科学的筛选衡量，我们联合用研对7个理念与产品属性进行量化匹配，并对其相关关系进行分析，以确定最符合管家产品本身及本次新产品调性的设计理念。

首先，从产品属性出发提炼电脑管家的4个属性关键词：安全、专业、高效、工具。运用正交设计法、邀请20位专家对16组品牌属性组合打分，并利用SPSS进行量化分析，得出管家4个产品属性的重要性公式：“Y=35.3%安全+23.5%专业+23.5%高效+17.7%工具”。之后，邀请设计师对7个理念与产品4个属性进行匹配度评分，将平均得分代入产品属性公式，得出最终的各理念综合得分。根据结果可以看出：“新科技”与产品4个属性之间的关系强度最高，最能体现管家产品调性。

除此之外，我们对7个理念之间的关联性进行分析。通过Delphi法进行量化赋值，基于赋值使用Gephi绘制出各设计理念的神经网络图。可以看到，“新科技”位于神经网络中心，与其他主题有着最多的强关系，能够体现多元的产品内涵。

综合以上可以发现，“新科技”不仅能较好的体现产品属性，并能体现出较多元的产品内涵。是一个理想的，多元化的设计理念的选择。“新科技”可以在“轻快净”的基础上强化管家专业性的品牌形象，也可以很好的延伸电脑管家上一版“探索未来”的品牌感知。

围绕“新科技”这一词语我们进行了关键词分析。在新浪官网统计网站统计中，“科技”在7天内的全网搜索热度达到90.3，7天内全网新系数量级达到三百万，热度指数保持稳步高走趋势。通过全网平台数据可直观看出，近一周内关键词“科技”在全网形成的讨论及相关资讯的热度很高，信息量级很大，是网民热议的话题之一。此外，从国内两大社交平台微博微信的热度指数也可看出，关键词“科技”的热度量级一直维持在较高水平。从全网整体来看，当用户搜索或讨论关键词“科技”相关话题时，情绪也非常正面。综上，“新科技”全网相关话题热度高且持续、全网声量大且时效性高，全网整体情感倾向正面积极，非常适合做为本次改版的设计方向。

新科技的应用-交互

一、交互框架

确定了设计理念，接下来就要围绕“新科技”展开设计过程。首先我们要考量的是如何将新科技的理念落地到交互层面。基于轻快净，新版管家需要在体验的轻量、简化，操作的便捷性上着重发力，这与新科技的可持续、高效等特征非常切合。接下来，交互框架的优化就通过可持续、提升效率、通用性三个维度展开。

1.可持续-框架可拓展

电脑管家12.0版本以及之前，都是采用了上下结构的界面布局。原有底部tab的形式，在扩展性上一直存在着问题。新版管家期望增加新的功能，未来管家也有更多功能需求。从可持续的角度出发，左右结构可以容纳未来的更多扩展可能，颠覆了以往的界面布局，能够承载更多的导航内容。

2.提升效率-聚焦核心能力、减少等待焦虑

在安全产品的发展历程中，经历了从无到有，从有到多的过程。但前期研究发现，相对繁杂的功能信息推荐，用户更愿意接受的是高效精简、清晰明朗。新版管家从提升效率的角度出发，首先对页面内容进行了精简，收敛了原有的内容推荐，突出核心功能操作，是整体布局更加聚焦。

鉴于管家的4大核心能力扫描都需要一定的时间，如何在等待时间不变的基础上让用户感知更快是本次改版面对的又一大难题。既然等待是必然的，设计的重点就在减少用户的等待焦虑感，让用户愉快的等待。过去的管家扫描动画采用的是比较常规的功能或数字展示，相对重复无趣，用户长时间的观看会失去耐心。新版设计围绕“新科技”的主题引入不同的趣味动画，通过具象、场景化的表现，吸引用户的注意，让等待的过程更有趣。同时也保留了详情入口，有需要的用户也可以查看具体的扫描进度。

3.通用性-各平台保持统一、减少转化成本

在电脑管家项目规划的初期，就明确了管家会同步发展海外市场，适配mac平台的思路。从统一性的层面上考虑，采用左右框架结构能更好的融合国内外安全软件的布局样式，将未来功能的维护成本降到最低。

二、交互细节

基于可持续、提升效率、通用性三个设计维度确认交互框架之后，针对新科技的关键要素“高效”我们也进一步深入思考：如何更加高效的传递给用户有价值的信息？接下来，我们就基于有效信息的7±2法则对各页面信息排布进行了统一分析和优化。

有效信息： 7±2法则

美国心理学家米勒（George A. Miller）教授1956年发表论文提出：人类加工信息的能力是有限制的，短时记忆的容量为7±2，即一般为7并在5~9之间波动。这就是神奇的7±2效应。综合自身功能属性和安全运营推广需要，管家各个页面所需展示的信息较多，如何对信息进行筛选和展示就是交互设计的重点。新版管家的各模块遵循7±2法则，对信息展示做尽可能的精简。

1.首页

旧版管家首页基于商业化的项目目标增加了许多精准内容推荐区域，整体信息数量合计为6+7；新版管家围绕轻快净的产品目标，聚焦功能本身，精简各界面首页辅助信息，弱化运营，最多展示4+2个信息内容。

2.结果页

在结果页设计中，改版前界面顶部展示当前状态，下部左侧通过图表展示具体结果、右侧展示推荐功能，页面整体分区为3个部分，信息展示为3+1*N+3。版后将结果展示简化到上部状态区，下部仅保留推荐功能，页面信息分区为2部分，信息内容精简为3+3。

3.工具箱

针对旧版工具箱不好找的问题，新版管家工具箱也进行了信息结构的调整，除增加搜索功能外，重点在于信息的重组。改版前由于历史结构问题，工具箱整体分区为4个部分，头部状态区、中部左侧导航、右侧内容、顶部tab区，整体信息内容分散，3+5+5*N的大信息量更让用户迷茫。改版后，整体分区为2个部分，左侧tab区、右侧导航、内容区。信息量级调整为5+N，配合搜索，让工具箱的查找流程更简单、高效。

新科技的应用-视觉

交互设计确定的同时，我们同步展开视觉关键词的推导。新科技是一个抽象的词汇，具体如何表现呢？经过反复思考，我们通过设计语义+联想图片的方式进行提炼。

从设计语义上分析，“新科技”可以联想到轻、净，代表未来世界的发展趋势，比如一些科幻场景中出现的干净、纯粹空间。此外，“新科技”可以传递出高效和专业，例如未来世界所拥有的高精尖设备、新能源的使用。最后，“新科技”也是对管家品牌的延续和升华，可以继续打造探索未来的品牌理念。

基于我们对于“新科技”的理解、参考联想图片，提炼出关键词：纯净、未来、科幻、快速、专业……视觉设计以此展开。

1.主界面

颜色方面，管家品牌色从7.0到12.0都以蓝色为主，在饱和度和色相上逐渐趋于明朗和纯净；在科技配色选择上，我们搜集大量风格图片，发现大多以蓝色为主色调，配合紫色、绿色等点缀色传递前卫、先锋感。结合管家品牌色和科技色，我们对新版管家主题色彩重新定义，在蓝色的基础上引入紫色渐变，在延续管家的品牌的基础上凸显科技主题。

基于最新的品牌配色区间，结合新版管家的交互结构，最终输出主界面视觉效果如下。在界面整体配比上，左侧颜色区域只占界面的15%，是管家历史版本中最低值，最大程度的将空间留给功能本身，体现视觉效果上的轻快、纯净感。

2.主图形

新版电脑管家有5大核心功能，每个功能需要一个切合主题&功能特征的主图形，以形成系列化设计，传递新科技的理念。在主图的方向选择上我们反复推导和自我推翻，前期经历了多次尝试，包括自然元素的风、云、水、电；新能源的太阳能、风能、海洋能、生物能、核能；天体物理的宇宙射线、电磁波、黑洞、粒子等等。

在多轮探索成为飞机稿，团队几近脑力憔悴之时，突然灵光一现提到近期热播的央视纪录片《大国重器2》。大国重器既是科技能力的体现，又是国人智慧的梦想，这个主题与新版管家“新科技”的设计理念非常切合。这一概念提出后，获得大家一致认同，团队开始搜集大量大国重器的相关图片。

针对电脑管家的5个功能，我们分别筛选了符合特征的5个大国重器主题。分别是：首页体检-北斗防护、病毒查杀-靶向治疗、垃圾清理-太行涡扇、电脑加速-疾速穿越、权限管理-相控雷达。通过对各主题元素的提炼、拆解、抽象、重组，最终决定采用以抽象几何概括表达主体，配合虚实光影、颜色渐变，将符合各个功能的主图渲染出来。同时，以主图为基础，延伸出各功能扫描动画，通过有趣的机器分解过程吸引用户的注意，缓解等待的焦虑。

3.空白页

除了各功能主图形，管家还有一些状态结果页是触达用户的机会平台：如加载、空白、断网等等。基于品牌精神的改变，为了更全面的传递“新科技”的设计理念，我们对空白页面也进行了重新设计。

各空白页延伸新科技的设计理念，以探索星际之旅为故事背景展开，提炼各页面设计关键词。

加载页：平行隧道、疾速穿越、前进，通过小火箭循环穿越的动画代表加载过程；

空白页：黑洞、粒子、吸入，虚无，以黑洞的概念传递空洞未知的状态；

断网页：卫星、信号、银河、故障，采用具象的太空异常场景表达失去网络连接的问题。

4.主题

主题皮肤是管家用户呼声很高的一个模块，为了更好的延续“新科技”的设计理念，针对管家新版主题我们专门展开了设计研究。根据新浪公开平台数据我们可以看到，围绕关键词“科技”相关性最强的，共同出现频次最高的五大关键词为：人工智能，创新，黑科技，安全和明星。每个联想词的衍生词又包括了未来、大数据、趋势、发展、中国、脑洞等15个词语。

根据提取到的15个联想关键词，结合新版的整体风格，我们为每个词选取了4张设计效果图供用户进行选择。累积投放10w管家大盘用户，回收115份有效问卷，得出了占比最高的一些关键图片。并对这些图片进行分析，总结提炼关键设计元素如下。

概括来看，“新科技”的设计表现可以通过虚实结合的光影效果、强烈的色彩明暗对比、抽象图形以展现探索未知带来的的神秘感受。结合调研结果，我们对主题的设计元素以及视觉偏好进行了整理和罗列。

同时，我们为主题设计赋予了一个故事场景。我们将管家比拟为科学家G博士，对于功成名就（版本量大）的他来说，探索未知世界更能吸引他，整个主题的设计围绕G博士的星际探索展开。

结合元素的推导和故事线，最终得出6套主题皮肤。配色以深色为主，保证左侧Tab栏的信息能够准确识别，营造一种科技和神秘感。在众多限制下，做出尽可能多的可能性来适应不同用户的选择。

以上，通过蓝白的科技基调，大国重器的系列主图形，简约的图标设计、星际探索主题皮肤，共同打造出主界面的设计，以“新科技”为主题，传递纯净、科技探索未来的设计理念。

5.安装

基于之前的视觉风格推导和元素提取，新版管家安装流程也同步进行了改版。以“新科技”为出发点，采用穿越时空的故事来传达管家新征程的开始，得到团队成员的一致认可。

安装流程从小火箭发射开始，在穿越星际中完成下载和安装。小火箭的飞行的速度越来越快，代表一起冒险、一起探索未知的世界。最终穿越星空，到达新的管家，开始全新起航。

6.猎鹰全景防御

新版实时防护正式更名为猎鹰全景防御系统，设计上希望能够传递出更强的安全感知。实时防护的改版，围绕“新科技”的设计理念，从交互、主图形、动画3个维度进行了优化。

改版前的界面每个防护中心有单独的图形和按钮，顶部还有整体的信息提示符号，信息相对复杂。在新版本中，我们用一个主图形来表现三重防护，主wording和防护层的具体信息排列在右侧，使整个浏览方式更符合用户阅读习惯。

为了提升管家主防的科技感及安全性能，整体界面效果以深色调渲染，配合蓝色、绿色点缀突出安全能力。主图形设计中，以核心区域的鹰代表了系统核心防护，底部的六边形加蜂格结构象征应用接入防护，外圈的圆环代表网络边界防护。三个图形整合构成一个防护系统，对应管家的三大安全防护能力。

在最终的动画效果中，主动画将三大图形结合在一起，配合界面打开逐层展开，寓意着管家时时刻刻、从内到外保护用户的隐私和安全。右侧选择不同的功能模块时，左侧的主图动画也会对应高亮，代表不同的防护层级。

7.品牌拓展

除界面相关的设计之外，为了进一步扩展品牌理念，营造“新科技”的设计氛围，我们还针对新版管家的应用场景进行了全新包装。以“新科技”为核心，整体构思运用了穿越的概念，通过“新科技”的隧道代表管家全新起航。整体颜色继承管家品牌蓝色，运用少量的黄绿互补、对比，提升画面氛围。“新科技”的理念还将应用到新版管家的各个场景，更多设计亟待探索。

设计总结

2018电脑管家经过磨砺、预研、尝试、挑战、优化，不断完善前行。无论是性能的优化、功能的创新、还是界面的升级，都凝聚着电脑管家所有团队成员的思考和努力。新版管家围绕新科技的设计理念，力图给用户营造一个纯净、轻量、快速的电脑环境。感谢管家项目团队中产品、开发、测试、运营、设计同学的共同付出。2018，电脑管家期望与你一起，探索未来无限可能。

腾讯安全-电脑管家设计团队：

原文始发于微信公众号（彩云译设计）：探索科技-腾讯电脑管家设计总结