魔方·图库—全链路设计实践之路,CDX,视觉

魔方·图库—全链路设计实践之路

关于“全链路”

全链路设计自从被提出一直在讨论，我们理解“全链路”为一种思维方式，一种以用户价值为中心基于自身的专业属性向前一步，让专业产生价值的思维方式；思维方式是抽象的，这次分享我们希望通过对设计师职能边界、思维边界、执行边界的探索，通过体验设计思维和方法进行的优化，通过产品从零到一的全链路实践，跟大家探讨。

一、前言

“魔方”是由滴滴创意设计中心（CDX）联合效能平台（EP）部门发起设计效率平台，致力于协作效率提升、产品设计资产的管理与保护、设计团队精英化升级，助力公司快速发展。

“把简单的事情想复杂，可以发现新领域；把复杂的现象简单化，可以发现新的定律”，“更简单的工作”是魔方的愿景，我们希望魔方系列产品给用户带来简单、直接、高效工作体验，并能真正为使用者带来工作上的便捷和效率上的提升。魔方项目一期包含：图库、规范、SCO、设计板、组件代码化等子产品。本文主要和大家聊聊魔方·图库项目从零到一的诞生过程，也希望能将项目中的收获和启发与大家一起分享。

二、魔方·图库

2.1项目背景

1重复购买行为造成公司预算浪费

2繁琐的备案流程导致公司图片版权类风险逐年上升

3设计资源利用率低，无法沉淀/共享和资源价值最大化

4多渠道不同流程的图片获取渠道获取成本高

2.2产品介绍

魔方·图库（以下简称图库）集合了3.7亿张创意图片，实现了公司级图片的集中化管理能够精细化把控预算，实现了图片的即买即用和自动备案。图库由两部分构成，一是滴滴的自有图库，内容来自公司内部自生产，如各业务线拍摄的图片、滴滴设计师设计的内容；二是第三方图库平台，包括站酷海洛、视觉中国、全景，以合作（API数据接口）的形式引入内容。

2.3产品分析

产品分析是产品设计前的必经之路，包含同类/竞品分析（主要指三方平台分析）、用户分析、需求分析等。目的是希望明确产品目标及产品定位，清晰知道要做什么和产品要解决哪些问题。

2.3.1第三方平台图库分析

站酷海洛、视觉中国、全景网三家图库是国内创意图片领域领先的三大平台，也是设计师进行创意设计时使用最多的几个平台，每个平台都有自身的特点定位及不同的体验流程。

第三方图库特点：

1）站酷海洛：高质量的矢量插画较多、RF图库、性价比高

2）视觉中国：图片质量高，图片资源丰富，价格高、RM/RF图库

3）全景网：图片丰富，生活化照片优势明显、价格中等、RM/RF图库

（什么是RM/RF图片？RM (Rights-managed) 图片，指“版权管理类图片”，特点为按照具体用途收费，使用周期一般为一年。RF (Royalty-free) 图片，指“免版税图片”，特点为按照图片大小收费，一次购买终身使用）

第三方体验流程：

通过对体验流程的分析就会发现主要的区别在于购买流程不同，导致用户使用成本增加，这也是我们主要解决的问题之一。

2.3.2用户调研

在项目初期，对图库的用户：设计师、非设计部门有使用图片素材的同学，包括品牌创意、体验设计、市场、运营等人员进行调研，他们都遇到不同程度的问题：

设计创意者遇到的问题：

1）图片素材的搜索效率低，经常耗费大量时间在找图片上；

2）经常在多个素材平台间反复切换网页，非常麻烦；

3）不同的素材平台购买流程不同，使他们形成很大的使用负担；

4）公司内部图片购买的备案流程繁琐、麻烦，浪费很多时间；

5）由于公司业务需要，对出行行业相关素材需求量非常大

6）……

非设计人员遇到的问题：

1）在哪里找图，有没有快速找图的方法；

2）怎么购买，买完能直接使用吗；

3）不同的用途使用边界是什么；

4）有没有已经买过的图可以使用；

5）公司内部怎么备案，图片的预算哪里出；

6）……

2.4分析总结

基于调研结果，结合公司历史购图数据的分析，梳理出当前不同维度遇到的痛点和相应的解决方案的目标及产品框架。

3.体验设计

3.1主流程

在前期的分析中三家图库在购买之前的主流程保持一致，都可以归纳为：登陆→搜索→找图这样的线性流程，主要的差异还是在选择用途→购买→支付环节，同时我们要考虑加入自动备案的刚性取向。因此，我们定义产品主流程时优先考虑标准化购买流程，基于此对于流程中各个第三方不一致的地方产出方案基础方案并推动共识达成。

3.2关注并强化核心功能

对于图库来说，搜索、图片展示、购买、备案、管理是其最主要的功能模块，因此在图库的设计中进行重点思考。

1）一切从搜索框开始

图库作为一个搜索为中心的资源聚合类工具产品，对于用户的价值还是能够快速的找图，交互设计的思路也一直以随时响应用户诉求为目标。从首页的搜索→列表页→详情页→个人中心，我们希望用户随时可搜，搜f完即用；在产品的首页设计之初，一直在考虑是否要在图库首页显示有多少图库源（第三方和自有图库信息）。从设计者角度讲，告知用户源的概念会有两个好处：一是可以清晰让用户知道图库接入的平台有哪些；二是可以从侧面反映初图库团队一直在更新优化和迭代。不过经过反复推敲结合对真实场景的思考和调研，最后决定放弃图库源的展示，因为从用户使用图库的目的角度来说，找到合适的图片素材是他们最关心的而并不在乎素材从属哪个平台，因此，忽略源显示的概念是希望用户将注意力始终集中在素材搜索上，而不是平台上。

2）优先展示“已购图片”

魔方图库的核心优势是什么？是我们一直在思考的问题。没有魔方图库大家还能正常的使用图片吗？答案是肯定的，不管是对流程的梳理，还是备案的自动化，都是效率层面的优化，对于用户来说我们部门没有预算也想用图怎么办？这个场地第三方是不能够满足的，同时这个问题的解决方案才是图库的核心价值。优先展示已购图片的策略，就通过产品策略提高图片的复用率，来达到节省预算的目的：只要是滴滴的同学在第三方图库购买过的图片，在魔方图库进行相关关键词的搜索时，已购图片就会优先展示，节约购图费用。

3）相似图片展示逻辑

经常使用图库的同学肯定会用到一个功能，就是相似图搜索，这个功能可以快速的匹配与当前图片相似度极高的图片，省去大量的找图时间成本。但是，国内图库这部分的功能做的比较弱，展示数量受限，因此，在魔方·图库的设计中就进行图片展示的优化思考，通过关键词的相似度匹配可以查看300 张相似图，搜索素材更加高效。

4）自动备案流程的引入

备案的目的是为了在图片发生版权纠纷时有据可依，是公司法务部门的必备流程。魔方图库之前的流程需求是用图者去公司内网OA备案，而在考虑图库产品流程时，为了保证体验的统一及完整性，我们把加入到购买流程中，实现备案流程自动化，既保证了法务的强需求，又不打断用户的购图流程，体验感更佳。

5）重新梳理“图片用途”的命名规则

购买图片的本质是购买用途。第三方图库中很多新媒体、展示pop等图片用途界定不清晰，用户在购买使用时易产生误解和疑问，因此我们将图片用户的名称以用户更易理解的、清晰的方式告知用户，如我们将新媒体调整为“微博/微信/H5”等。

6）强大的后台统计管控系统

让大家更方便的用图是魔方的基础能力，而图片的管控是公司层面的强需求，因此，我们在图库功能上增加了管理功能，管理者可以实时看到图片的使用情况，如下载者，图片使用用户、图片到期时间等一系列精细化管控的信息。不仅能够更好的助力图片管理，而且可以有效避免法律风险的发生。

3.3视觉体系建设（魔方系列产品）

1) 品牌关键词

魔方产品体系肯定不仅仅是点对点解决问题，而是站在更高维度发现面的，共性的问题给予解决追求最高的效率及最大化的价值。基于前期的分析及对魔方整体产品的思考，在魔方风格定义中，我们希望能加入与滴滴品牌强关联的元素，对于内部用户增强魔方产品的归属感。同时，由于产品的定位，梳理出品牌关键词

2) 品牌色定义

不同的色彩能带给人以不同的感受，色彩是用户潜意识作出决定的最大、最直接的触发器，直接影响着用户的行为，色彩与品牌风格的定义有着最大最直接的关系。品牌色的选择我们以滴滴品牌色为基础，增强饱和度与对比，在保证用户看到橘色引发滴滴品牌联系的同时，增强视觉引导。同时严格控制品牌色在页面中出行的比例，保证用户对品牌色的敏感度。

3）设计原则及UIkit制定

魔方系列产品涉及到不同的定位及功能，在进行设计时优先保证统一性，然后以内容的最优展示位基础，聚焦于页面结构，保证内容与功能的最优可视效果。

1、功能结构展示清晰，内容主次分明，清晰引导用户

2、组件化思维，合并相似功能样式，提升协同开发效率

2、控制配色数量及用色比例，保证用户认知的统一性。

3、简化装饰，文字是最直接的告白，重视字体细节，减少学习成本

5、使用空间及线分割内容，尽量避免块面分割，保证页面的通透及整体性。

4）组件化和栅格系统

魔方采用了组件化的设计方式，组件是完整独立的，具有很高的灵活性和可复用性，这种设计方式大大的降低了后期的设计成本，并最高程度上保证了设计体验的一致性，便于多设计师的工作配合；

对于开发而言，方便修改和开发，提高系统性能，降低后期开发成本。

栅格系统的建设与使用在提高了页面的统一性，同时也有助于后期多团队开发的维护，同时也提高与开发配合的工作效率

4.量化价值

数据分析量化价值，节省预算是图库的核心目标之一，通过对最近几个月的数据观察，每年能够为公司节省可观的预算（具体数据保密）。

从公司维度搭建了完善的自动备案流程，减少了法律风险。

滴滴内部产生的优质设计资源复用率提升了810%

图库之前找图用图的时间一般为20分钟，现在即买即用，对使用效率有个质的提升。

同时，魔方系列产品累计用户：12w ，覆盖了公司所有业务线及80%的公司同学。

5.产品迭代

产品自7.13号上线到9.25号都处在产品搭建状态不断的丰富内容,完了自有图库、站酷海洛、视觉中国、全景网的搭建与引入；9.25之后处于产品运营阶段，主要目标为继续优化体验与产品的落地推广，让更多的同学使用图库；希望明年自有图库部分作为一个亮点模块持续优化，不仅只支持图片类的资源共享，更多格式，引入更丰富的设计资源沉淀，为用户创造价值，为用图者提供更好的体验。

三、我们在思考

魔方·图库从产品设计到基础资源及功能搭建完成经历了5个月的时间，从数据上来看结果是非常正向的，感谢小伙伴们的辛苦付出，也感谢合作方的大力支持。

全链路设计的实践过程一直在探索中，我们希望通过魔方系列产品总结出可被落地的，可被复制的方法或思维分享给大家，欢迎探讨。

来源：CDX