【精选案例】“腾讯书院”产品设计中的解构思维

编者按：

《腾讯网UED体验设计之旅》是腾讯网UED十年精华输出的干货型读物，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，解读了网媒用户分析与研究方法、门户网站未来体验设计、H5技术在移动端打开的触控世界、手绘原创设计、改版迭代方法、文字及信息图形化设计、媒体产品的交互设计、大项目设计管理方法等部分内容。

本次精选了《解构的含义》与大家分享，近期会分享《灵活的版式造就视觉盛宴》、《赛程魔方3D旋转界面》、《体育，在腾讯也在现场》、《响应式设计—“大家”栏目》这几个十分接地气的案例，让我们通过这些例子看看UED设计师们是如何成就优秀的用户体验！

解构的含义

百度百科对“解构”一词的定义为：

解构，或称为“结构分解”，是后结构主义提出的一种批评方法。是解构主义者德里达的一个术语。“解构”概念源于海德格尔《存在与时间》中的“deconstruction”一词，原意为分解、消解、拆解、揭示等，德里达在这个基础上补充了“消除”“反积淀”“问题化”等意思。

“分解、消除、拆解、揭示”，从语义上看，似乎跟我们的日常设计没有太大关联，但事实上，我们接触任何新事物都存在一个认知拆解的过程，只是我们并没有刻意地将它视为一种方法提炼出来。具体到设计领域，一旦我们能熟练地掌握解构思维，对于视觉表现力的提升便会大有裨益。

“腾讯书院”产品设计中的解构思维

如图1和图2所示是2013年“腾讯书院”产品页改版的例子，我们可以从这个例子当中了解到“解构”思维的神奇。

图1 “腾讯书院”早期版本（以线上版本为准）

图2 “腾讯书院”线上版本

“腾讯书院”是一档视频访谈类节目，由于采访的都是当下文化名人，所以在整体产品定位上力求打造高端、儒雅的形象。早期视觉主要以土黄色背景、虚化风景为素材（见图3），产品Logo也较为写实，在气质传达上与节目定位存在偏差。基于现状，我们决定对视觉重新设计。

图3 一些常见的文化类视觉表现手段

如何才能从现有的文化类视觉表现方法中跳出来是我们面临的首要挑战。这时就该我们的主角“解构”出场了。搜索引擎是一种非常好的解构工具，当我们接触到新的表现主题时，首先应该做的便是通过搜索引擎来寻找尽可能多的相关意象群，记录好关键词。这个过程其实也是一种自我头脑风暴的过程，可以尽情地发散，不管有用无用先记录下来再说。这个环节虽然耗时，但对后期的设计走向却起着关键作用。例如，我们要对“书院”进行解构，如图4所示是百度百科对“书院”的定义，如图5所示是我们对“书院”解构出的关键词。

图4 百度百科对“书院”的解释

图5 对“书院”解构出的关键词

当积累到自认为充足的关键词时，就可以开始归类关联了。把相关度较高的关07　主题型页面的键词用线连接起来，边连接边思考，把大脑中新闪现出的灵感逐步填补上去，把一些不太合适的关键词删掉，如图6所示。不一会儿，你会发现，好几个新的设计方案应运而生了，而且思维缜密细致，有可能连后期的实现效果都已经浮现在脑海中了。有没有发现，这一加一减的过程已经印证了我们前面提到的“分解、消除、拆解、揭示”。

图6 将关键词进行关联并再次发散

“四大发明”是中国文化最有代表性的东西，而且相比其他几种思路更加新奇。所以我们沿着这个思路继续深入解构（见图7），提炼出“印刷”这个新的关键词。接下来我们开始对提炼出的精要关键词进行视觉对应（见图8）。

图7 对“四大发明”深入解构

图8 关键词的视觉对应

解构到这一步，“腾讯书院”产品的视觉走向其实已经浮现出来了，做个归纳便能轻松得到如下结论（这些结论可以从多维度出发，前期越细致，后期实现越高效）。

意象选取：活字印刷、宋体字、拆散的笔画。

色彩：灰色、黑色，链接色可选用红色或橘色等。

材质：宣纸的纹理。

当确定整体视觉风格后，我们着手对产品的Logo进行二次设计。依据现有的风格设定，设计师尝试了几个版本（见图9），经过比较最终确定了方案D（见图10）。该方案围绕“印刷”这个视觉单元，采用老宋体字形，活字印刷式排版，技巧处理上借鉴了碑拓那种断壁残垣的效果，适当对笔画进行了切割整理，最终的Logo儒雅耐看，对产品气质有很好提升。

图9 “腾讯书院”Logo过程稿

图10 “腾讯书院”Logo最终版本

Logo确定之后，根据之前提炼出的视觉风格设定，我们在很短时间内便设计出了产品页的效果图，仅从视觉层面上来说，Logo与整体页面风格统一，儒雅协调，版式简洁，色彩清爽，飞舞的笔画与印刷的厚重相宜成趣，在文化类的页面视觉设计中做了较好的突破（见图11）。

图11 “腾讯书院”产品页主视觉

“腾讯书院”产品最终视觉效果在交互细节体验上也做了很多优化，但这不是我们本篇讨论的重点，就不再详述。

总结

通过腾讯书院改版的实例，我们可以总结出将解构思维应用在设计中的一些实用技巧。

查字典，利用搜索引擎。当接触到一个新的设计命题时，最好不要漫无目的地寻找素材，而是应该首先深入理解命题含义，通过身边有效的搜索工具快速定位产品视觉雏形。

大量筛选意象，整理归类。归类时注重思维的缜密，不断进行联想、丰富z细节，筛选出最具新意的思维单元，再进行深入解构。不断重复这个过程，直到明确出自己的设计风格定位。

设计风格定位要明确细致。意象选择、色彩、材质等，都是我们明确的要z点，不妨记录下来，为之后的Logo设计及产品页面设计打下基础。

通过这个实例的介绍，读者应该能够体会到，灵活掌握解构这种设计思维能够使设计变得高效很多，更重要的是，面对一些常规的设计主题时，设计师可以从容地选择从其他设计视角进行再设计，视觉创新变成了一件轻松有趣的事情。