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

2.4 全站无线化

15年品牌升级之后，网站部分我们陆续从阿里妈妈官网到各产品网站，逐步实现无线化。通过每个个案不断积累经验，完善无线适配方案。

首先考虑是全站导航和登录体系在无线设备上的适配。全站导航起到网站地图的作用，贯穿阿里妈妈官网、旗下各产品网站、以及培训和客服等服务支持类站点等。用户通过网站地图，能够从妈妈官方跳转旗下任何产品和平台，也能从旗下任何产品、平台回到妈妈官网。网站地图展示了我们的品牌结构，在阿里妈妈品牌塑造的起步阶段，让用户有完整的认知起到比较重要的作用和意义。

根据我们的品牌结构，全站导航分为一二两级。在pc模式下，一二级导航有比较充分的空间排布，导航内部的层级关系也可以通过悬停出现下拉菜单的模式出现。

在无线端，没有悬停行为，同时需要考虑如何让多层级导航在移动页面上有清晰合理呈现。针对H5页面的导航方式，我们最终采用将全站导航利用抽屉原则收纳在顶部的菜单项中，并将一二级平铺展现。登录操作原理同上。而站点本身层级的导航(三级导航)则在页面中直接展现，方便用户快速切换。(图2.5)

(图2.5：无线适配方案)

2.5 轻量化，降低实现成本

在无线端设计过程中，我们有意使无线端更加轻量化，在精简内容的同时，在阅读情境下，考虑沉浸式的方式。

内容信息整合和精简： 部分页面从PC到无线做到内容精简处理，以运营类的资讯类为例，根据实效性，设定篇幅数量限制。考虑到陈旧的内容在无线情境下对用户会有干扰。

末端沉浸体验：在文章详情页面上，去除多层级导航，只保留返回操作，给予用户沉浸式的阅读环境。

降低前端实现成本，我们适配无线的目的，是为了解决用户在零碎时间通过无线设备了解阿里妈妈与阅读相关资讯的需求。因此整体的响应方案需要快速适配、简单实现。目前只提供pc、无线两种临界值。并少量利用弹性图片。在重点模块，如首页banner区域利用弹性图片(图片分层，不同断点比例不同)以聚焦重点;其他区域基本采用等比缩放适配和适当裁切机制。

(图2.6：内容信息整合和精简)

(图2.7：轻量化和沉浸式)

三、视觉风格升级

随着阿里妈妈整体网站品牌识别系统的完善，钻石展位的改版成为了品牌识别系统在网站中落地和应用的契机，因此在本次改版设计中， 遵循了品牌规范和风格定义，包括图像、色盘、插图、图标、字体等模块，以生活化、活力、温情营造出阿里妈妈品牌气质。同时本期也逐渐把妈妈吉祥物合理地融入设计中去。

(图3：视觉风格升级)