阿里巴巴1688(PC+无线)双首页全新改版

前言

阿里巴巴副总裁、阿里巴巴中国内贸事业部（CBU）联席总经理汪海（花名七公）从提出五大战略到B2B 3.0——营销时代的开启，力推八大矩阵让中小企业生意更轻松。升级后的1688平台将通过商家成长体系、数据体系、营销体系、广告体系、开放平台、交易支付体系、物流体系、金融体系等八大矩阵打造数字商业基础设置，帮助中小企业去实现线下交易线上化、线下营销线上化。

http://www.aliued.cn/wp-content/uploads/2017/12/1688双首页全新改版Pr稿.mp4

升级B类业务认知 聚焦用户全链路体验

1688迎来了一个新的开端，从过去定义的B2B平台下沉到B2B的基础设施。1688网站首页以及1688主客首页（以下简称双首页），是各个业务触达买家最重要的窗口，在新的业务背景下，通过双首页改版让买家更清晰的感知我们B类业务。1688正在从一个消费品导向的市场走向全行业繁荣的大市场。从各个垂直行业的发展情况来看，消费品（如服装、百货、家居等）的在线交易日趋增长，但非消费品（工业品和原材料等）信息化的程度都还不够，交易规模的增长空间巨大。而且对非消费品用户来说，整个1688双首页给人的感觉，就是一个消费品批发市场，导购维度和内容维度都有着强烈的消费品特征，跟B2C、C2C的网站没有足够明确的差异，因此双首页改版业务上就是要透传1688市场的全行业化，促进非消的数字化，进而实现交易和数据的沉淀。

随着1688产品负责人放翁推进买家核身业务的展开，买家核实的身份规模越来越大，为我们提供了买家服务精细化的前提。买家核身把买家分为网商、微商、生产加工企业等身份，根据买家在1688的行为数据计算偏好类目，我们通过买家身份和行为的交叉分层明确买家的画像，分析其全链路需求差异性特征，进而为实现人、货、场的个性化匹配提供保障，让买家进入1688双首页可直达自己预期的场景及内容，个性化实现双首页认知与分流的双重价值。

PC和无线双端统一

PC和无线双端在内容和逻辑上保持了一致性。在B类场景下，大部分买家（主要还是工作场景）在PC端，在无线端比较碎片化，可以选品、支付或是一些零碎的审批流，从过往的数据来看，PC和无线的买家交叉比例远没有C端高。这一次的改版在内容层面打通，在买家的个性化偏好数据收集及处理方面，底层的数据也打通。在买家可识别状态下，如果买家是纯粹的某种偏好，那么这个买家无论是在PC首页还是无线首页，都将看到个性化的首页。其他情况同此规则，我们不再是以完全割裂的方式为用户服务，同时以相同的逻辑和规则重构了PC和无线两端的用户Landing场。

PC和无线在产品体验上也存在端的差异性。PC端可用于展示内容的物理空间大，因此，在PC端更多采用了全面铺开内容让买家浏览选择的方式，在无线端只展示和买家最相关的内容，尽量收起相关性不高或者相关性不明确的内容。比如，对于进口、伙拼、淘货源、跨境专供、微供货源等场景化业务，在PC端是全部铺开，通过排序个性化实现内容和买家的相关性，在无线端，只展示最相关的一个场景，其他场景需要用户滑动查看。此外，对于同样的内容，比如说询价单，在PC端是完整展示所有内容及附件的，在无线端只能展示最有价值的信息，无法全部呈现给买家。充分考虑了端的特性以及场景的特性，把简单留给买家，把复杂留给平台。

双首页改版是B类人、货、场重构中非常重要的一部分

阿里国际用户体验事业部-内贸B2BUED-用户体验设计部负责人汪方进在对外分享的时候说，国内当下不缺设计执行者，但对于如何站在买家的角度去洞察体验设计机会点，用创新的设计体验方案去说服业务方，争取技术资源保障的人才是很稀缺的。前几年我们还是停留在从行业或者货源切入，来为买家提供服务的层面，比如说从行业切入，搭建服装市场、工业品市场、百货市场、原材料市场等；从货源切入，做了产地一手货项目“源头好货”；展会货源“云展会”；专业市场货源“云市场”等。今年我们逐步构建了新的人、货、场，尝试从买家身份切入，来为每一类细分买家提供货源和服务。例如，服务跨境店主的跨境专供业务、服务于微商的微供业务、服务于淘宝卖家的淘货源业务等等，理想情况下，我们是可以从买家身份切入来构建人货场，并且体现在双首页。例如，当一个买家是淘宝店主的时候，我们的首页就应该是淘宝卖家专属的首页，而不是从首页点击“淘货源”才能进入到淘货源首页。

这个是我们未来长期的方向，短期内由于各种局限性，需要有一个过渡方案。以刚才的淘宝店主为例，现阶段我们的运营能力，对淘宝店主需求的了解，1688平台货源本身的局限性等各种因素导致，我们无法依靠淘货源这一个业务来承载淘宝店主的需求。虽然现在还没到针对各个身份的用户做独立首页的阶段，但是，我们可以从消费品和非消费品这种大的维度切入，针对各自的特性提供有差异的服务，为消费品用户打造一个专属首页；为非消费品用户打造一个专属首页；为综合偏好或无明确偏好用户提供一个通用版首页，迈出为各类人重构一个单独的Landing场的第一步，也是人货场重构的一小步。

首页改版从来都是一个系统工程，背后涉及到很多角色的协同，双首页的改版就更是一个浩大的工程了，这一次的PC和无线联动，实现同步升级，也是史无前例。

双首页改版背后的几点设计思考

阿里国际用户体验事业部-内贸B2BUED-首页PM何成龙提出基于B类买家视角下的全新设计理念——聚焦买家全链路、还原B类真实场景。我们基于该设计理念，研究B类买家人群多角色全链路、专业高效、目标明确等特征，归纳总结出了三个形象标签——商务范儿、简洁大方、高效直达。通过对这三个形象标签的深入研究，在设计表现手法上从色彩、材质、动效、场景等多个角度，模拟真实空间层级和材质应用，通过质感和动效，在有限的平面中做出一定的空间层次，打造一体化的设计体系，整体形成具有B类特色的页面组。

色彩的应用：整体色彩上我们传递——“色彩是沉稳的“概念。区别于C类产品大跨度色域的色彩运用，针对之前所整理的B类用户的三个形象标签，B类产品在色彩运用上更需要克制，因此我们用小跨度色域的色彩做微渐变丰富整张页面；由于低纯度低饱和度的颜色对用户情绪影响最小从而能突显整体画面的高级感，我们将高纯度高饱和度的色彩以点缀的方式加入页面当中，例如标签的设计；需要大面积使用色彩的部分则采用纯度更低的沉稳色平衡画面，例如新人卡片中，绯红色与金色的运用；在PC页面中，用不带色彩偏向性的灰色同样为了降低色彩带来的情绪干扰。

轻渐变、材质化的UI风格：进入视觉设计初期，多名设计师对门洞icon进行了视觉风格的探索；最终决定将第一排门洞icon与第二排行业icon做分隔，并按照本次首页的设定，以“阿里橙”与“非消蓝”的品牌色做业务门洞的色彩区分，同时弱化行业门洞；在业务门洞的icon造型上我们传递——“造型是稳重的”概念，针对每个业务特征用轻微的空间质感图形体现B类特色场景化设计，具有业务特色的质感图形在Y轴上以前后立体化结构的呈现方式配合整体页面动效；当某业务上新时，这样的结构方式更遵循自然的动效法则，能摆脱传统NEW标，做出动效亮点渲染活动气氛。

模块的合理布局：由于此次改版的设定，不同偏好的用户会看到不同的首页，不同首页中的业务模块也按照首页的不同属性有对应的增减。内容的不断变化，导致隔断设计的模块位置总会不合适，且考虑到后续变化和上线以后运营内容的增减，最终还是把所有模块都按一个个独立卡片的形式排列设计，遵循“川”字设计规则，所有视觉流都保持3格划分，将来无论内容怎么增减都不会影响视觉流布局；这样的设计方式也能最大程度上保证组件的可复用性。为了避免结构单一给用户带来疲倦感，我们针对部分业务模块在视觉上用错落的灰白格方式代替栅格线的使用营造整体呼吸感。

动效体系化构建：此次新版页面中所运用到的动效原则都是保持一致的，均呈现一定程度的空间层级运动轨迹。例如：转场切换动画摒弃原有的平移效果，用细腻而含蓄的空间纵深感衬托信息层级关系；当用户左右滑动切换身份卡片时，tab切换会有一个从内到外的颜色扩散以及icon弹跳效果，这些动画均基于整张页面多维空间的体系化构建设计。

动效场景化：Loading动画以传送带、包裹箱这类电商常见的物品和1688数字为基础图形，当用户下拉页面时，动画会跟随用户手势放大，与用户产生互动，当用户释放手势后，出现刷新动画，1688四个字母会随着包裹箱的推移做出跳跃与Y轴旋转的动作，模拟真实流水线传送货品的效果，体现传输的场景化特征。

整体风格的去卡通化：基于商务范儿、简洁大方、高效直达的特点，我们将阿牛等一些偏卡通的应用场景以符号化的呈现方式代替，削弱页面整体的卡通感；例如专属身份页面阿牛形象的符号化体现，包括新人专享的卡片设计等。

双首页改版背后的算法、技术和运营策略升级

个性化算法升级，更精准的识别用户偏好

​以前的个性化算法对非消用户的特性考虑的比较少，天然的就会将流量导向消费品内容，新的个性化算法更多的融入了非消用户的行为特征。比如说，非消用户现阶段的在线交易人数相对而言并不高，但是非消用户浏览商品详情页的人数还是比较高的，这就说明对非消商品有了解或者潜在购买需求的人比较多，但是真正最后走到了购买这一步的人比较少，针对这个现状，这一次的改版增加了商品详情页的长浏览维度，如果一个用户浏览了一个商品的详情页，并且是看到了商品详情页的底部，那么这个行为就会被记录下来，作为判断用户喜好的一个指标。

技术优化

CBU技术部-体验技术-买家&开放的前端负责人重鱼根据首页现有情况提出四点要求提升运营效率、加强首页容灾能力、提升首页性能、新增监控报警，以保障首页的效率和稳定。 ​​ ​高效运营，结合集团内部工具ocms、jdata等完善的技术体系，实现对首页的高效运营，运营人员只需通过开发人员配置的jdata资源投放位投放运营数据，投放后可在测试页面查看页面效果，检查无误后通知审核人员发布一次静态页面即可完成首页内容的更新，同时jdata提供的聚合功能让运营人员只需关注自己运营的内容，相互之间不会干扰，防止出错，最后通过数据聚合的方式整理到一个接口返回，整套运营流程都是可视化的操作，操作方便快捷。同时ocms工具本身也提供了页面级别的可视化操作，运营编辑页面配置，保存实时查看页面效果，最后审核通过后发布页面； 同时为了实现首页的数据化运营，结合业务数据打点需求，使用集团aplus数据采集和分析工具对用户的行为进行布点分析，对首页所有的链接、模块曝光等作了spm打点、黄金令箭打点统计，运营人员可直接访问数据报表和基础的数据统计分析结果，做到更加精准的数据分析，展示用户最关注和想要的内容。

​​容灾容错，为了防止页面数据出现错误或者后端接口挂掉造成的页面空白问题，首页做了较多的兜底方案来保证页面的正常展示，异步接口数据如果获取失败页面会优先获取localstorage数据，localstorage数据无则获取cdn兜底数据，cdn兜底数据无则会获取前端本地的静态数据，而且这些兜底数据也具有可运营性，定期更换确保首页内容展示准确无误的内容；针对新版提供了用户核身功能，针对核身后的结果个性化展示相关内容，同时提供了非消版本、消费品版本、默认版本的快速切换入口，防止出现数据展示不准确问题。

​​性能优化，页面的性能优化方案基本同业内一样，无非是从页面资源的整合，图片的压缩、数据lazyload等方面进行优化处理，1688首页也主要是从这几个维度来优化，代码层通过style combine将页面请求的静态资源整合为一个请求，降低代码体积；针对首页用户浏览器分析，80%用户使用chrome浏览器，所以对图片资源的进行了极致优化，所有图片支持webp格式，同时指定请求图片的大小从服务端拉取准确的展示图片，同时针对retina屏幕对图片清晰度做了合理优化，部分图片请求了页面展示2倍大小的图。首页只有首屏数据直出，其他楼层和模块数据都使用了懒加载方式，同时页面对数据加载时的loading状态和坑位预先处理实现了较好的过渡体验。

​​监控报警，首页的稳定性非常重要，所以针对首页做了单独的监控和错误报警机制，结合集团前端页面健康度检测监控工具retcode，对首页性能、核心接口、js脚本做了监控，一旦超出定义好的监控标准或者错误监控，平台会立即通过钉钉、邮件以及电话的报警通知，开发人员第一时间投入解决线上问题。

**数据化运营****

​从规范机制、检测工具、数据月报三个维度展开。我们设定好详细的运营规范、设计规范及奖惩机制，保证运营内容的质量；给小二添加检测工具，保证运营内容链接的准确性；内部通过数据月报的形式曝光首页每个区块的数据情况。通过这三个维度相互作用提升双首页的运营质量，提升买家对双首页的依赖性。双首页承载了太多业务，内容又需要千人千面，这对运营提出极高的要求，为了搭建足够多的场景就需要耗费极大的人力。为了解决这个问题，我们利用中台产品化落地，从前台展示到后台运维，从设计到开发都依赖于我们中台产品化，即保障业务的落地，也保障业务的质量。

总结

“升级B类业务认知、聚焦买家全链路体验”，双首页改版是B类业务发展后的一个缩影，让天下没有难做的生意一直在我们心中，我们也一直在业务、产品、运营、设计、技术探索与创新的路上，每次改版都是我们前进的脚印，感谢您与我们共同见证。