这两周一直在试着做ShopBop的Redesign，因为，就在上个月我在Shopbop上买了个包，然后我就实在是看不下去他们的app了。 不知道个人判断是否正确，由于Shopbop的整个应用打开速度就奇慢，跳转速度也慢，可能并不是因为其服务器在外国的原因，感觉更多的原因是因为整个app似乎是基于Html5实现的而不是原生的感觉。

排除技术问题，整个app用起来的感觉就让人有点别扭，不顺畅，在app上购物的感觉也让人有种不放心的感觉。 因此，我就打算来试着做一个Redesign。

用户：

• 喜欢海淘的女性
• 对品牌有追求的女性
• 时常想要浏览外国时尚品牌产品咨询的女性。
• 通过其他平台了解到某个产品，只是具有针对性目的的在Shopbop上购买产品的用户。
• 给朋友送礼的女性/男性
• 喜欢在移动端购买的年轻用户。

整个app的想要达成的就是帮助用户发现更多的国外优质商品，并且放心的完成一次海外购。

用户流程

App 使用流程

用户购物流程：

设计中遇到的问题：

信息架构

Shopbop乍看上去有一堆的分类，层级似乎很多，但是在手机端我们要做到并不是面面俱到，而是将核心内容保留，帮助用户尽快的完成他们购买任务，因此在梳理Shopbop的信息结构的时候，即便官网上看上去有一堆的功能门类，但仔细看会发现最主要的几大类也就是：

• 服装
• 鞋履
• 包袋
• 配饰
• 品牌

因此在内容上Shopbop的分类主要就是这五种。

而在实体店，我们也可以看到基本上服装店也会将不同的品类归类放在同一区域。

在Shopbop的app上，内容的分类同功能的分类基本都是在一个层级上的，Shopbop将所有的功能和类别都塞到了左边的抽提栏里，这就造成了每次要切换的时候就很不方便，发现内容的渠道也很有限。

因此我将功能解构成以下几项父级：

• 主页
• 专题
• 分类
• 购物袋
• 我的

在这里要注意的是，父级与子级的包含与被包含关系是否成立；子级与子级间的互斥/排他性是否成立；子级与子级间又是否具有相关性。

主页

在“主页”的下面将服装，鞋履，包袋，配饰，和品牌这几大类的内容嵌入作为子集，便于让用户发现更多的相关内容，比如： 新品速递，热门推荐，折扣推荐，个性推荐。 通过这几种渠道帮助用户更快更好的发现优质内容，找到喜欢的产品。

另外，每个区块的商品展示都基本采用了，宣传图+泳道的展示方式。用尽可能小的空间放置多商品。

专题

“专题”是我新开辟出来的一个功能，可以看到shopbop在主页上有一个分类是“杂志造型”面就包含了“专题”和“每日造型”这两子集，这一块专门开辟给到编辑，让用户通过高质量的专题发现他们的需求。

分类

“分类”这个功能，虽说我们的分类不能满足所有用户的心里需求，他们这也是他们发现产品的一种方式。

由于Shopbop的分类非常细致，在类别里还套有类别，因此，就拿连衣裙这个类别来说，连衣裙还可以细分为，全天礼服裙，精彩约会装，这种带有场景式的分类，因此，没有将所有的分类都放在一个页面，而是在点击“连衣裙”之后，再进入细分，这样虽然要多点两次，但整个操作过程还是较为顺畅。

（这里的全部分类都是依照Shopbop的原本分类，没有改过,个人认为，可能这些类别很多都不符合用户的心里模式，但是就比如说“全天礼服裙，精彩约会装”这种分类，很适合作为场景着装分类，是一个很好的切入点。）

在“品牌”整个分类里，基本比较难以区分，因此，简易的添加了“热门品牌”这个标签，在“全部”里用户可以搜索到自己想找的牌子，而如果是自己比较喜欢的牌子，则可以收藏，并之后再我喜欢的品牌中找到入口。

购物袋

让我们来回想一次在例如Zara之类的线上服装店购物成功时的场景：

浏览商品-找到想买的商品（确认商品尺寸）-将商品放入购物篮（或拿在手上）- 去收银柜台 - 服务员告知总价-确认付款（刷卡/现金）-付款成功 -拿到收据

购物袋里面可能会有多件或者只有一件商品，但是最后要走的流程都是一样的。

因此将线下的整个购物流程搬到先上来也要尽量保持一致，符合用户的长期购物习惯：

浏览商品主页-加入购物车/直接购买-选择商品属性

结账流程：

确认总金额，提交订单（提交给结账员，确认总价）- 付款（信用卡）-支付成功- 订单详情（收据）

以上当然是一次成功的购物体验，但是生活中的购物也常常会出现问题，比如刷卡刷不出来要换张卡，比如，我一开始放在购物袋里的东西后来不想要了，再比如，在支付的最后一刻，我退缩了，不想买了。这些等等都是有可能的，因此要将这些线上可能产生的问题都想到。 再外加线上是快递的形式，因此地址的变更也是要时常面对的问题

• 信用卡

假设我是新订户，第一次提交订单的时候可能没有填写信用卡信息，因此在确认支付这一步骤的时候如没有填写则无法支付，那这时候应该在该页面直接给到用户连接，让用户去补充完整信息，而不是到“我的”页面下的“信用卡信息”这栏里去填写完后再来支付。 同样的道理适用于地址填写。

我的

在我的界面，提供用户个人购物记录以及信息的修改：

• 我的订单
• 行用卡
• 地址管理
• 喜欢（品牌/商品）
• 评论

信息框架

底部导航

在这里我依然采用了，底部导航栏的方式，将主要功能放在底部，便于用户直达，而将分类单独开辟出一个页面，归于分类这个功能标签下。 这样做相较于原本的抽提栏好在：

• 将内容分类同功能区别开
• 能让用户在几个常用的界面之间频繁的切换
• 能够通过不同的渠道帮助用户去发现更多的产品

搜索功能

对于很多电商平台来说，搜索功能是非常重要的一个功能，因此虽说app可能有分类功能，但是用户在购买的时候，用户心理可能都是带着目的性来的，比如我想买一条鱼尾的连衣裙，而普通的电商app可能永远没有办法将每一个用户心智里的分类全都包含进去，因此搜索功能在这里就显得格外重要了。

搜索功能放在哪？就成了一个非常重要的问题。

一开始我设计了两个方案，一个是将搜索栏折叠起来放在右上角，用户想要搜索的时候就可以点击，另一个方案就是将整个搜索框显示出来，最后选择了第二个方案。原因如下：

• 将整个搜索框放置出来显然比一个搜索按键更加的明显。
• 如之前所述，很多用户来Shopbop购物都是有针对性的，都有自己心里的一个分类名，或者特定的产品名，因此强调搜索栏是很有必要的。
• 另外我在主页上不仅有搜索功能，在分类页面上也添加了搜索功能，让搜索功能尽可能的易于发现和使用。

如何帮助用户顺利的完成一次购物

除了之前提到结账时线上和线下结账时的异同点之外，还要注意的是线上和线下最大的体验区别：

• 不能试衣服，因此会造成尺寸问题
• 对衣服有其他各种问题，找不到人问，只有一台机器。

因此在电商app的时候，一定要想的周全，方方面面的都要告知用户，打消他们的杂念。

• 是否可退换货
• 是否包邮，如果不包邮，邮费是多少
• 商品尺寸，面料

这些最最基本的信息都要在第一时间给到用户，另外由于这是海外购，国内外尺码的定义不同，还要通过尺码表来给到用户一个参照。

另外，在结算的时候shopbop会有礼盒包装盒的费用，因此要向用户阐明清楚其作用，以及税收和税费的问题，这些都在结算的时候告知清楚。

产品整体风格：

Shopbop是一款较为中高端的海外购电商，因此，在确定整体风格的时候，在研究了原本的网站和app的整体风格后，个人认为有几个关键词：

• 简约
• 干净
• 大气
• 黑白色为主

因此我尝试着想要使用Complexion design，这也算是UI界的新风尚了把，很适合Shopbop，以黑白色为主色调，橙色为强调色（accent color） 。

黑色边框的矩形盒子作为一个基本 元素贯穿整个app.

在设计“我的”页面的时候，最常见的可能就是列表形式了，由于想要采取一些视觉上的突破，我想试着用矩形盒子做个打破，但是出来的整体效果并不显著，看上去有点low…虽然看久了我也就会有习惯的错觉，但不可否决的是的确有点低端。。。与产品气质不符因此我决定放弃，试着用列表和区块来重新设计。

这三个页面放在一起，从整体上看还是列表布局更加的合理，干净。

原型（Prototype）

用墨刀做了整个app的低保真和高保真原型，感兴趣的话可以扫码查看。

低保真

高保真