2017版“我的淘宝”设计，可能是迄今为止最懂你的

基础布局由工具标题栏、内容区、核心行动点 3 部分组合而成。其中，标题栏和核心行动点样式保持严格一致，内容区则提供布局模版满足业务个性化的业务诉求。基础布局整体遵循中心线对齐规则，保证用户从上至下浏览页面时视觉线不分散。

顺势而为的视觉互动

我们在内容显性化表达的诉求基础上，尝试了进一步的视觉互动设计。动效在界面展示中起着强视觉吸引的作用，但过多以及不恰当的运动方式会使用户浏览页面时视线混乱。如果顺着用户操作手势进行动效设计，也就是“顺势而为”，则让过程更为自然与恰当，也符合操作预期。

我的淘宝头部采用了多层级视觉差效果，用户在手指滑动页面时，不同元素根据移动距离进行不同的动效过程，用户名与标题自然转换。整个动效过程用户自主操控，同时也增加了界面的使用趣味。

另一个“顺势”是时间上的顺势，适时告诉用户关注什么。业务卡片的内容会跟随时间不断更新，比如淘气值卡片，在每月 8 号左右会进行数值更新。为了“顺势”告知到用户，当用户向下滑动页面查看业务卡片内容时，对应的淘气值会进行数字翻动与箭头变化的微动效，适时吸引到用户告知淘气值的数值变化。

写在最后

我的淘宝 2017 版历时半年对“工具与用户”的思考、梳理和设计终于上线落地。通过“去中心化的工具内容化设计”的设计理念让“正确的用户”在“恰当的场景”轻易的发现“适合的服务”。一切都是为了更懂用户。从目前数据来看，用户使用内容化工具相较纯工具入口形式，DAU提升1~ 5 倍不等。结合舆情反馈，去中心化的工具内容化设计方向理念是一个不错的尝试。

整个落地过程虽然繁琐无比(因为我的淘宝是一个工具阵地，任何一个工具的业务方都不是我们自己)，我们需要和每一个接入的工具业务方商讨后订立落地类型、跟进设计规范的执行、审核最后的工具内容化设计后的产出效果。但是，我们一点一点定义好了清晰的设计规范和流程以便后续工具场景的顺利接入。

后续，我们也有许多需要继续完善的地方。如何让正确的用户在准确的场景轻易的发现适合的服务工具，这需要我们算法的不断完善，也需要我们不断从人群场景、发现场景、个性化场景反思产品的后续。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!