前言 

康小铺是京小康推出的面向小B的社交电商产品，作为京东健康的战略合作平台，依托于强大的供应链，在探索中夯实商业基石。

在寻求增量的过程中，随着用户群体的多元化增长，相关诉求差异日益突出。我们决定在客户端-新增云仓版，并对工作台（个人中心）页面，进行了多维度的优化与升级。希望给用户带来更友好的使用体验。

 项目背景 

个人中心作为用户决策的核心场景，每一处改动可能会引起用户的体验浮动，我们多方采集了产品建议，针对用户群体的行为模型，用户心智差异表达，作为本次改版的设计出发点。

1.业务诉求

a.新增功能

服务对象的多元化诉求，是此次改版的原始驱动力。业务运营前期，选品成本与技术方面限制，运营策略未能满足全量用户的需求。专业化与个性化是增量用户的核心需求差异。

出于商业价值考虑，业务侧推出云仓功能，赋予此类用户更专业的身份与操作空间，释放供应链价值。

b.业务方向

康小铺的业务链路为“店主选品-分享用户-促成交易”，交易场景集中在C端。用户选品上架到自己的小铺，利用私域流量进行推广，C端用户达成交易。

以电商行业来看，b类用户也有购物需求，不管是定向定量采购，还是小量自购，还未触达b类自购场景，接下来的规划迭代中会完善这部分的场景。

2.设计体系呈待升级

产品的不同阶段，设计侧对业务的支持形态是不同的。早期开发以效率为主，采用了H5版向客户端的设计适配，原有的内容框架不足以满足业务发展，信息传达低效，缺乏统一性与灵活性。

在此次接手项目后，配合业务的阶段性战略，设计的重点开始聚焦核心与整体，持续完善每个细节。

 体验解析 

a.用户来源

增量用户的两类主要来源

· 邀请注册——是用户通过邀请h5页面跳转而来，

· 后台导入——是bd团队批量导入，a用户群对产品认知高于b类用户群

获客成本居高不下，做好新用户的承接转化十分重要。我们了解到的，我们的用户一部分是通过社交渠道注册，一部分是由运营团队后台导入。个人中心（工作台）页面作为康小铺APP的核心决策场景，我们需要在视觉上强化场景关联，降低认知成本。

b.用户心智

用户需求逐渐泛化，数据颗粒度太大的用户画像作用有限。细分用户人群，通过行为模型洞察用户，心智差异为我们提供了新的视角。 

· 个人店用户作为传统社交电商的b类用户代表，围绕私域流量，进行分享，由于私域流量的局限性，对商品品类有着部分倾向的。比如用户A主要做社区团购，为社群用户服务，选品倾向于水果生鲜类，对售后服务要求较高。

· 相比之下，云仓用户拥有着更专业的流量和商品运营能力。由此可见我们在个人店页面需要倾向于C类个人中心的购物习惯，云仓个人中心页面需要更为显著的数据呈现与成员管理呈现。

竞品分析-共性与差异化

设计趋近于同质化，行业共识造成了视觉表现层的部分雷同。差异化的本质是业务定位与服务对象，不能为了“差异”而“差异”。这是设计的共性与差异化。

保持对行业对高度关注，持续性的竞品分析是很有必要的。客观的设计迭代，同样需要与BI团队的深入合作。在细颗粒度数据不足的情况下，行业洞察，竞品分析有助于把握设计力度，降低设计试错成本。

· 已淘小铺为例，首屏视觉大版块的展示收益，激励用户创造价值，中部强视觉的承接用户，订单处于较弱的层级。

· 1688的业务复杂程度较高，个人中心页面在多次设计迭代中，其视觉表达逐渐精简，为视觉减负，提高流量分发效能。

结合自身的产品，在剥离变量的情况下，仅从表现层角度来看，淘小铺的直观收益，1688的精简化容器都与我们此次的设计目标一致。

 设计策略 

通过用户心智洞察与竞品分析，确定了设计的触发机制。设计与业务同步并达成共识，梳理出以下三个目标：

1.强化信息感知-优化容器结构，提高决策效能

2.构建心智场景-心智差异化表达

3.提升用户认同-体验走查，完善场景

强化信息感知

1.业务归类

不破不立，我们梳理出个人中心页面的功能点，根据现阶段的业务诉求与用户期望，对功能和信息做了优先级。

2.优化布局

聚焦业务触点，我们将内容高度压缩在首屏区域，同时为了避免信息赘余造成低效决策，我们重构了页面布局，打造全新的浏览动线，引导用户行为与业务期望契合。

3.基础框架升级

卡片式设计有助于内容分区塑造，我们优化了留白率，统一了多场景下的页边距、圆角、板块间距，提升承载信息的能力。

4.文字

原页面的文字层级过少，导致页面太平。此次我们梳理了文字大小阶梯，并且在字重、颜色多维度的拉大文字层级关系，让文字体系变得有章法可循。

5.图标

丰富图标的形式，业务图标采用了文字引导提升辨识度。重设二级图标，优化图标体积，并沉淀图标库，作为设计资产，复用在其他场景。

6.设计规范

更新设计规范文档，沉淀设计资产，为产品设计迭代增效，并为设计体系升级做铺垫。

构建心智场景

1.场景化拉新呈现

业务侧目标与用户心智差异，决定了我们在拉新模块的侧重点。

· 个店场景下突出利益点提升有效互动，利用拉新奖励为产品引流。

· 云仓场景下不必突出利益点，而是侧重拉新后的数据呈现与成员管理。

2.场景化配色策略

旧版本的颜色使用过于克制，导致页面单调，可扩展性差。

此次重新定义色彩体系，以品牌色为基础，拓展出黄色为辅助色，并且在克制的基础上“向前一步走”，为云仓场景新增了蓝色作为主题色。

为了避免头部视觉样式过于复杂，去除了底图的辅助元素，精简为渐变。页头的沉浸式表达，强调了场景差异，提升用户的身份感知。

数据看板

数据看板优先级呈现。根据不同用户对数据对敏感程度，在两个场景下做了差异化呈现，颗粒度较大的数据固定在头部，保证了页面的统一性。

提升用户认同

1.场景完善

用户在未登陆状态下，页面缩减的一些信息，减少干扰。以及优化数据看板在无数据状态下的呈现。重新设计懒加载骨架。

考虑到相当一部分用户使用小屏手机，页面内容展示需要大约1.5～2屏，我们补充了这部分场景的设计。下拉后导航栏色块固定，设置按钮消失，头像与昵称移至导航栏左侧。

2.前后端埋点

上线前沟通好埋点方案，围绕业务目标，观察各个板块的视觉引导效果，以及功能入口节点的点击事件，是否达到预期效果。根据数据反馈，为接下来的版本迭代做采集支撑，做好用户体验的持续性优化。

3.深色模式预研

Dark Mode能够减轻眼部负担，提升沉浸感。电商APP适配深色模式的设计难点在于，商品图居多，营销场景与深色沉浸的视觉冲突。目前淘宝与京东针对深色模式都已经做了相关适配。

参阅苹果与安卓的深色模式设计指导，确定适配准则。保证体验一致性，走查颜色对比度，更新色板，利用灰度色阶拉开文字的四个层级。

 结语 

体验提升是一个持续性的过程，这也是我们一直以来追求的目标。希望自己的一些坚持能够为我们的用户带来良好的使用体验，也希望这些思考能够给大家在工作中带来一些帮助。

再次谢谢你的观阅。

Powered by Froala Editor