阿里设计师总结的钻石展位网站改版经验

2015年10月底我们完成了对钻石展位原有网页的升级改版，在此为这次改版收货的经验做一遍全面的梳理和沉淀。想知道阿里的设计师是如何寻找创意/优化视觉层级/选择配色…… 等等，进来学习就对了!

新版上线的地址为：http://zuanshi.taobao.com/ ， 欢迎大家点击浏览。

一、背景

钻石展位产品官方网站的改版，在需求层面，主要基于产品方向的部分变化，产品和运营内容需要新增和丰富化。同时结合用户和小二反馈，在旧版基础上优化体验，让站点内容管理和维护更便捷。

再者，随着2015年阿里妈妈品牌的升级;我们需要把品牌理念和品牌识别自然融入在网站中。

二、整体设计方向

2.1 全站统一的思路

阿里妈妈所有网站包括：阿里妈妈官网、旗下各产品网站、以及培训和客服等服务支持类站点等。钻石展位作为其中的产品网站之一，在设计优化中，需要从全站的角度思考，解决共性上的问题;同时根据业务特性解决个性问题。

钻石展位网站的共性问题包括站点结构、站点内容的梳理;品牌升级后整体视觉风格的优化统一;站点的无线适配方案等。

个性问题包括挖掘不同产品的利益点并通过精准的创意展现;不同产品承载的运营类内容量级不同而需要在设计模式和展现上精细化思考;共性问题则是通过品牌指南、设计规范和页面模版来解决，包括站点的首页、产品介绍页、案例结合页等，都已经有比较成熟的经验和沉淀;个性问题在规范基础上，根据各产品页面的实际需求量身定做开放性方案，统一而不失灵活性。(图2.1)

(图2.1：全站统一的设计思路)

2.2 产品利益点挖掘与创意展开

作为商业产品的官方网站，主要承载了三大块内容：1、产品操作平台的登录入口，这也是老用户使用频次最高的模块。2、产品利益点和详细介绍，是用户对产品了解的官方途径。对于新用户能够起到利益点刺激与引导使用产品，3、运营类培训与资讯的承载，通过定期更新和维护，方便新老用户获得帮助。

本次钻石展位的网站改版中，除登录入口外，二三两块我们都做了深入思考和优化。首先来讲解下利益点传达。所谓利益点，就是产品最能打动用户的价值和卖点，精准的利益点与用户诉求高度吻合。

从文案来说，应当易读易记，通俗简洁，使用户在短暂的一瞥中基本能感知到讲述的内容。文案需要说人话，撇弃以往那些冷冰冷但比较空洞的话语。

从创意来说，通过和产品及运营的反复讨论，确定了钻石展位的核心利益点在于“精准品牌营销”。所谓“精准品牌营销”，在于：一是钻石展位区别于其他产品最大的亮点是品牌。这里提到的品牌是指卖家通过钻展投放广告，不是推销单品，而是传达整体的信息。可以是品牌，可以是店铺，也可以是某一季的活动。

综上所述，最终确定创意点在于隐喻，以夜空繁星隐喻互联网世界中无数网店，钻石则隐喻了使用了钻石展位后脱颖而出的店家。

从调性来说，首页Banner采用了手绘的方法，在生活化、活力、温情的阿里妈妈站点气质中，更凸显出钻展自身品牌气质中的人性化。

(图2.2：草图设计阶段)

(图2.3：banner设计最终成品)

2.3 运营资讯类页面的优化

其次是运营类培训与咨讯的承载的优化设计。这种类型的页面，一般分为两个层级：第一层级是内容集合页，汇聚各种内容资讯，让用户浏览和寻找感兴趣的文章。第二层级是文章详情页，用户通过仔细阅读获得帮助。

我们首先优化的是，提高内容集合页面的信息承载量。即不通过翻页或多层级页面的形式，单页面展现出多的文章。让用户能够在单页面的浏览中就能发现目标。这在架构层级上，优化了原先多层级并混乱的状况;将用户寻找并阅读文章的步骤，缩短为2步。(图2.4)

(图2.4：左图为新设计，右图为旧的模版设计)

旧设计：页面的信息效率较低，不适合资讯较多，资讯需要进行分类的情境

新设计：提高展现效率，在优先级梳理、视觉层次和布局、内容扩展性上有精细化思考

其次，单页面的设计，需要在优先级梳理、视觉层级和布局、未来内容量的扩展性上做更多的推敲。做到整体信息量丰富但不混乱。“我要学习”案例根据内容重点、以及新老用户的不同面向，进行模块区分。同时考虑内容扩展性，部分模块利用虚拟空间，页内刷新，增加信息承载量。

最后，建议运营建立内容管理制度，陈旧过期的内容需要定期去除，以保证站点内容的有效性。定期的内容管理和维护才能从源头确保网站内容的品质和有效性。