如何正确把玩APP？一个高级方法+两个实战案例帮你全面掌握！

大家都对 UED（用户体验设计）和 UCD（以用户为中心的设计）不陌生，我们在工作中也经常听到很多人在说要注重用户体验，设计师要站在用户的角度思考问题，以用户的需求为目标进行设计。

这篇文章，我们将通过天猫和寺库的对比，带大家一起更加深入地去理解用户体验。

我们先来一起回顾下用户体验要素的一些概念。

用户体验要素

首先就要说到《用户体验要素》这本书，书里用清晰的说明和生动的图形分析了以用户为中心的设计方法（UCD）来进行产品设计，要求设计人员关注于思路而不是工具或技术，从而使你的产品具备高质量体验的流程。

当人们提起用户体验要素时，就会说到用户体验要素的五个层和十个元素。

体验设计也是近两年来很流行的一个词。商业目的和用户体验是体验设计中必不可少的两个重要环节。这篇文章将通过实际的案例分析来给大家讲述一下用户体验在设计中的应用。

我们先来看一下用户体验的五个要素：

战略层、范围层、结构层、框架层、表现层这五个层级也是从概念到落地，从抽象到具体的一个过程。

我们平常也会听到这些专业术语，但是要如何才能把这些知识应用到实际中呢？我将通过对天猫及寺库的对比，带大家一起看一下这五个要素在工作中的映射。

我们先来了解一下天猫和寺库分别是什么样的产品。

天猫VS寺库

  1. 战略层

在分析产品之前，我们可以先从网上搜集一下这两个 APP 的相关数据，一个产品底层的战略信息我们无法完全清楚，但却可以从已有数据中进行分析。

以下的数据均来自艾瑞数据（https://data.iresearch.com.cn/Home.shtml）

数据对比

天猫用户群体

目标用户分析：

• 想购物却没有时间的用户；
• 用户想进行在线购物；
• 有相对较高的消费能力，注重品质和质量；
• 追求随时随地查看物品下单购买，方便快捷的购物体验的用户。

用户定位：

主打正品品牌销售、时尚销售，整个产品大而全，期望满足用户的大部分购物需求，主要面向的是一二线城市的用户。

寺库用户群体

目标用户分析：

• 一二线城市的用户；
• 追求时尚者；
• 收入较高的用户群体；
• 对奢侈品有需求，期望享受到购物环节中比较优质的待遇；
• 主要目标用户在 80 后和 90 后。

用户定位：

奢侈品电商，重新定位奢侈品消费，满足年轻且经济能力不错的群体，不做纯电商，线上线下同步，为有需求的用户提供高端服务链。

  2. 范围层

天猫注重品牌销售和用户的喜好，在意用户的注重购买体验，给用户提供优质的产品和服务。

首页「折扣」「聚划算」「天猫闪降」版块也可以刺激用户的购买，活动和种草墙被单独作为一个版块，目的是让用户可以找到更多想要购买的商品。从商业的角度来看在首页引入其他产品入驻可能是存在一定的平台费用或是销售分成。

△ 天猫部分功能框架

△ 寺库部分功能框架

对比：

天猫和寺库在很多地方都比较相似，因为都是线上电商，都会设立给用户推荐好物的版块，结构上也会有很多比较接近的。

天猫注重整个购物流程：

天猫会在首页设立很多版块去引导用户发现更多产品，以促进用户的消费，内置天猫超市和天猫国际两个体量也是非常大的，天猫整体「大而全」，会让用户觉得所有东西都可以在这里买到。

寺库注重打造产品的品质感：

寺库不追求用户在这里购买更多的东西，但是要让用户感受到在这里购买的每一件商品体验都是最好的。

  3. 结构层

天猫和寺库在购买逻辑上是比较相似的，在不同的地方由于产品的定位不同而产生一些差异。

天猫

天猫在浏览商品时会突出商品促销信息，代金券折扣、优惠券的信息会比较明显，并且会推荐比较多的相关产品，让用户多停留在页面上。

天猫的自营产品商品详情页是没有直接购买按钮的，可能的原因有：

• 为了让用户多购买自营产品，添加购物车后可以合并购买。
• 因为自营商品物流比较敏感，一般都是次日达，为了让用户多选购商品后再一起付款，减少物流压力，同一用户的订单可以一起派送。

△ 天猫购物流程

寺库

寺库和天猫相比，整个购买流程中多出门店自提一环，这也是它的特点之一。寺库的商品详情页的信息内容比较简单，也有猜你喜欢的推荐商品版块。可能是因为寺库的商品单价较高，所以会在页面上有一个版块是选择库票分期，应该也是与其他金融产品的合作。

在浏览商品时，寺库把分类单独放在一个 tab 里，是为了让有目的性的用户可以更容易找到自己想要的商品，而天猫的分类层级相对深一点，因为分类是一种固态的模式，天猫的产品种类非常多样，加上用户群体比较庞大，每一个人的购买习惯也不同，也是为了给用户更多的选择和浏览的空间。

△ 寺库购物流程

  4. 框架层

天猫在首页会根据用户最近浏览的物品去推测用户的喜好，推荐商品的篇幅占了很大一部分，为了向用户展示我们的产品种类是很多的，你想要的在我们这里都可以买到。天猫榜单和一些活动功能，让用户更直观了解天猫，很好地突出自己的特色。

寺库除了首页的一个分区域展示，还单独设计了一个详细的商品分类导航框架，这样设计更让用户觉得浏览时目的性更强。首页还增加了走进寺库版块，让用户更了解寺库是什么，服务十分周全。寺库的页面交互设计很用心，流畅的交互也让用户更加认可这个产品的品质。

商品详情页首屏没有什么差异，往下滑动两款 APP 都有的部分是：

• 商品信息
• 同店铺其他商品推荐
• 商品评价
• 图文详情
• 推荐购买

天猫对一个店铺其他商品的导流会更在意一些，同店铺其他商品的推荐花费了比较大的占比，评价上天猫还多一个问答版块，寺库则是主要把商品本身的介绍作为重点。

  5. 表现层

造成设计上差异的原因

天猫首页展示很多推荐内容，运用刺激用户点击的颜色，突出优惠和满减这样的设计主要针对没有目的性浏览的用户，会增加他在网站的停留时间，促进他浏览的欲望。

因为天猫的定位就是可以让更多的用户选择这个产品用来线上购物，同时也有相对品质感比较好的商品来满足不同需求的人群。

寺库不论是 banner 图还是页面其他内容，都不会把「促销」「折扣」这类信息作为重点展示，因为寺库的定位比较高端，竞争力不在商品的价格上，促销这类型的信息并不是它们最想展示的。

首页所有可点击区域都比较清晰，采用大量留白的手法，一屏展示的内容不会显得杂乱，便于已经有目的的用户来浏览。

天猫的商品详情页会把优惠信息放在商品图片上，是为了促进用户点击购买，告诉用户在我这里购买这个商品是很实惠的，价格、优惠券等信息也标红让其比较明显，因为用户在天猫上购物会比较在意价格的多少，所以在首屏展示的优惠、活动信息偏多。

寺库的商品详情给人一种简单、干净的感觉，没有太多复杂的介绍，优惠券和促销的信息也占比较小的比重，是因为寺库商品单笔价格都是比较高的，给用户展示的信息要能让用户觉得这个商品值这个价格，因此在这个页面上还是希望用户可以更多的关注商品本身，浏览的时候可以更顺畅不轻易地被其他信息干扰。

天猫和寺库在商品的展示上底部的功能都基本一致，除了天猫超市自营的产品没有加入购物车外，在页面的商品展示上都使用了比较大的区域，因为二者都是比较在意产品本身的展示，但是天猫去掉了顶栏来增加商品展示区域，目的是在商品有更多展示空间的情况下，也能把优惠和活动信息也显示全。寺库的顶栏则被保留用来显示品牌，目的是为了塑造产品整体的形象。

在功能点比较相似的情况下，天猫和寺库选择了两种展现方式，天猫的功能比较多，因此它们进行分类，将我的订单和工具版块分隔开，看上去也会更清晰。寺库则使用图标+icon 的形式展示一些功能，每一个功能点的留白依然比较多。除了顶部的个人订单信息部分，其他每一个功能点都使重要程度的差异不那么大的，页面上还有会员信息的 banner 图，是希望用户在关注自己的订单信息后还能够关注到会员信息。

即使是在页面逻辑和结构差不多的购物车页面，二者的设计风格依然很好地体现了各自的产品特征。天猫页面比较紧凑，能够展现出更多内容，寺库则保持大片留白的做法，不管是已加入购物车的产品还是推荐产品，每款商品都展示得很清楚，整体风格依然很简洁。这种差异也是由于两款产品的定位不同造成的。

表现层对比总结

两款 app 都是电商类的，在页面承载内容上有很多相似的地方，但是由于产品定位不同，在具体页面上的设计风格有很大的区别。

天猫类似淘宝，页面承载的产品种类很多。

天猫涉及多个领域，也连接着一些其他网站的功能。在消费者之中传播的很快，让大家都很比较信赖这个品牌。天猫需要用户在页面上停留更多时间，因此所展示内容的区域比较小，但是用户能看到的种类比较齐全，而且推荐的内容基本都是按照用户最近浏览的商品来进行推荐，更容易让用户找到自己想买的商品。

寺库页面风格是为了传达给用户精细、高端感，和天猫比起来体量较小。

寺库的页面层次比较清楚，首页下拉后都是以标题+大图的文章列表形式展示一个主题，所要展示的内容或者商品都是会占较大的空间，注重单个商品和品牌的塑造，让用户浏览一个商品时更容易沉浸到其中。

总结

通过对天猫和寺库的分析总结可以让我们明白，一个产品最后呈现到用户面前的视觉效果也是由最底层的战略目标就决定了的。

用户体验并不是一件简单的事情，真正研究用户体验要时刻学习和总结，作为设计师不能只站在表层来思考问题，在研究一个产品时需要学会分析产品的战略目标。在工作中也要和产品多沟通，学会站在产品的层面，找准产品的根基，了解这样做的目的是什么，然后在这个基础上去做更适合的设计，而不单单是一味地追求好看。