前端时间接触了一个涉及电商优惠的需求，简单说就是收集印度各个电商的优惠内容（优惠券或者折扣）然后再统一提供给用户。因此，如何让用户能够快速、高效的找到自己想要的优惠信息是本次设计的重点。在最终的设计方案中，由于一条优惠内容包含的信息量比较大，相比于列表的样式，最终决定用卡片的样式去承载优惠信息。因此优惠信息卡片是一个很重要组成部分，其承载了主要的优惠信息及相关功能。 

首先明确一点，界面中的卡片是作为信息及功能的载体，去呈现给用户的。界面上的每一个设计都应该是有根据的，不能拍脑袋想当然，因此卡片上的信息和功能，作为一个个元素，其存在和摆放都应该是有原因的。

回顾这次设计，我个人总结把设计卡片的过程分为三个部分：汇总元素、筛选元素、摆放元素。 

———————————————

汇总元素

这个阶段其实就是你作为交互设计师，去吃透PRD的阶段。 

首先要去收集这个卡片上可能呈现的所有信息及功能，无论是PRD里面说明的，还是从交互的角度出发觉得需要在任务流程中提供给用户的，都需要先一一列举出来。 

PRD中列举出的信息有：标题、使用说明、对应的应用信息（icon+名称）、配图（banner），功能有：主要按钮（下载&打开&领码）。但是这些对用户来说足够了么？ 

题外话：“作为一个交互，接到PRD时最好都保持着一颗怀疑而又探索的心，因为你要知道产品是拥有修改需求的先手权的，完全跟着PRD走你会很被动，也体现不出一个交互的价值。” 

抱着这种心态，我就去当地的一些优惠券提供网站逛了一圈。 主要有两个：CouponRaja、Grabon。

https://www.couponraja.in/    /    http://www.grabon.in

以CouponRaja上的优惠内容为例，可以看到一条完整的优惠内容竟然需要包含这么多元素：描述（简单描述&详细描述）、优惠类型、优惠来源、配图、使用说明、适用品类&品牌、次要信息、主要功能按钮、次要功能按钮。 

而为什么PRD中的优惠信息只有那点呢？这里我想主要应该是产品经理考虑到商务运营在扒取内容和运营的工作量，所以只保留了最基本的信息。 

所以这时候交互应该考虑的是： 

1.就目前的信息，对用户来说信息量够不够； 

2.如果够，该怎么展示，如果不够，还需要哪些信息，然后怎么展示。 

但是够不够不是拍脑袋说了算。由于做的是移动端的内容，肯定是不能把网页端所有的内容都全部弄过来的，要有取舍。这里我们就要从信息最饱和的情况下去分析每条信息的作用，才能去决定保留哪些信息。 

描述

描述可以说是所有元素中最重要的一个了，因为其往往负责最先向用户传达该优惠信息的核心。 

以CouponRaja上的为例，可以看到描述有两个，一个简单的一个详细的：左边的“Rs.300 OFF-300卢比折"扣和中间的“Flat Rs. 300 OFF on minimum purchase of Rs.999-最低购买满999卢比后享受300卢比折扣"。 

左边的简单描述和右边的详细描述对比，看上去有点重复，但其实非常有利于用户快速聚焦信息，高效的找到自己想要的优惠内容。 

就好比你上淘宝，看到“50元优惠券”或者“5折促销”，而详细描述则是“满200减50”或者“适用于男装类产品”。那么很明显，先告诉用户“减50块钱"对用户的吸引度是大于告诉用户“你满了200我才给你减50”。

让用户先阅读单独的利益信息能瞬间勾起用户的消费欲望，而先阅读带上条件的利益信息，则会让用户提前知道了你的门槛。因此简单描述的权重是大于详细描述的，因为先利益后条件的信息展示顺序是比较符合商业目标和浏览逻辑的。 

毕竟在快速浏览信息的过程中，一句话的信息量对用户来说还是略大，而一个数字和一个单词的组合对用户的吸引力则非常直接。

因此在优惠描述这里，将其拆分成简单描述和详细描述是有依据和道理的。 

优惠类型

优惠类型是包括折扣（DEAL）和优惠券（COUPON）两种的，负责告诉用户当前的优惠内容的类型，是可以直接去买买买享受折扣，还是说需要领取一个优惠券。 

类型这里比较特殊，它虽然是一种信息，但它的表达方式却可以不仅仅局限于文字，也可以通过图形去表达，这个后面会细说。 

优惠来源

来源自然不用说，肯定是需要的。比如这张100元优惠券是京东的、天猫超市周末全场8折，如果没写清楚那用户怎么知道这个优惠可以在哪里使用。 

配图

配图可以理解为当前优惠内容的一个banner，往往是配合热门推荐的优惠内容一起使用，用图片去吸引用户的注意力，不过并不是所有的优惠内容都会有配图。 

使用说明

某些情况下，优惠是需要满足某些特定的条件才能使用的，比如特点的时间、特点的商品种类以及某些限制。 

像饿了么这种外卖平台，商户都会有详细的优惠使用说明，有时候你会发现你明明达到了满减的金额，却没有减掉对应的钱，就是因为你的购物车里面有一些不符合满减条件的商品，而印度电商的优惠使用说明往往比这个还要复杂。使用说明的存在就是负责将这些复杂的使用规则、使用限制告诉给用户。 

适用品类&品牌

适用品类&品牌也应该算是使用说明的一种，比如告诉你这个优惠券可以在以下男士运用品牌使用：阿迪、耐克、匡威、新百伦等，负责对优惠内容的使用说明做进一步补充。 

次要信息

次要信息可能包括很多，比如过期时间、优惠券真实性、最近被使用时间等。这些信息对用户来说可有可无，并不是决定性的信息，只是其中有一条比较特殊，那就是过期时间。因为会有这么一个场景：比如在淘宝中看到一个很实惠的优惠券，明天就到期了，觉得不用就亏了，然后马上就花掉了。这是一个潜在的消费心理，特别是印度用户，是很贪小便宜的，所以过期时间相对来说是比较有价值的。 

主要功能按钮&次要功能按钮

对用户来说，每一条优惠内容最重要的功能就是领取这个优惠。而领取这个最终的目的，根据业务目标的不同，会衍生出很多不同的到达路径，比如点击按钮后要求注册&登录以拉新增用户或提高日活。因此根据路径的不同，反映到主要功能按钮上的点击反馈上也会不一样。 

而次要功能一般是分享、收藏、发送到手机&邮箱、添加到卡券包等主路径延伸场景，其都不影响用户完成主路径的操作，不是必备功能。 

优惠码

在所有的优惠券信息中，有一条隐藏信息比较特殊，就是优惠码。通常情况下只有优惠券会包含优惠码，这是由于印度当前电商环境所决定的，和国内淘宝、京东之类电商平台的优惠券有所不同。 

优惠码在网页端通常是不直接露出的，需要用户付出一定的操作成本才会出现，因为如果直接露出，那用户来了复制了优惠码就走，对新增注册、日活、合作导量等业务目标都没有任何帮助。当存在优惠码的情况下，主要功能按钮就需要直接提示用户领取优惠码，刺激用户点击。 

———————————————

分析完所有元素后，接下来就是要根据自身产品的业务目标，去决定留下哪些元素。 

由于自身的产品是一个应用商店，所有的需求最终导向的目的都应该是通过内容刺激用户下载，提高日活、留存以及发行系数。 

因此对于优惠内容，在暴露给用户的过程中，应该做到最高效、最直接的传达，以刺激用户因为被优惠内容吸引，产生消费冲动从而生产下载行为。 

———————————————

筛选元素

筛选的过程其实就已经是设计的过程了，但这时候的设计更偏向于分析，而非直接画原型图。 

由于做的是移动端的应用商店，在有限的屏幕空间下，这么多的优惠信息是不适合一次全部展现给用户的，这样会造成单个卡片上的信息密度过高，影响用户的阅读效率，甚至产生焦躁感。所以我们就要去思考怎样将这些信息友好地传达给用户。

状态处理

在所有的优惠信息的取舍中，首先要重点说一下使用说明（包括适用品类&品牌）这条信息，因为其往往是所有优惠信息中文案最长的。而且由于并不是所有人都会首先关注使用说明这条信息，因此其并不适合一次性全部展示出来。 

在其的交互处理上，需要做一个折叠处理，类似应用商店中应用详情的处理方式。

这样的交互方式就会造成卡片有两种展示状态：收起和展开。

而卡片式设计的好处之一就是，卡片收起和展开的动作在用户感知层面上是非常自然的，特别是在安卓系统上。利用收起和展开两种状态，可以在不同的场景下呈现给用户不同数量的元素。

接下来要做的就是确定在不同状态下，哪些信息不是影响用户判断的主要信息。 

信息处理

描述、类型、优惠来源不用多说，这些信息的文字量少，用户阅读成本低，是必须保留的信息。而配图是针对推荐优惠内容的，因此也需要保留。 

使用说明（包括适用品类&品牌）上面说过，需要保留，但是需要做折叠处理。而次要信息由于比较杂、碎 ，其中唯一值得保留的就是过期时间。 

对于优惠码，由于只有优惠券才有优惠码，折扣是没有的，因此这里要特殊处理。 

首先就是考虑在移动端上，优惠码要不要直接暴露给用户。

出于用户体验的角度，当然是不要像网页端那样对用户隐藏是最友好的。但是从业务角度出发，如果用户获取优惠码非常容易，不用付出任何成本的话，那对增加下载量是没有任何帮助的。 

而从优惠码内容本身角度出发考虑，首先明确优惠码说到底只是一串随机的字符，当用户有消费欲望的时候优惠码才对其有用，而且由于目前产品还没有账号体系，暂时没有注册新增方面的业务目标，所以当用户对此条优惠内容感兴趣的时候再把优惠码告诉他是最合适的。 

那么这就牵扯到另一个问题，什么时候才是用户对此条优惠内容感兴趣的时候呢？ 

先想回想一下自己作为一个用户，从看一条优惠内容到对它感兴趣这个过程。 

1.“哇，这有一个50元的优惠券”——简单描述 

2.“原来满200元后就可以用这个优惠券减掉50元了”——详细描述 

3.“它是哪家的呢，原来是Amazon的”——优惠来源 

4.“该怎么用呢，原来是在付款的时候输入优惠码就可以了”——使用说明 

5.“男装系列通用诶，后天就过期了”——次要信息

可以发现，当用户开始关注优惠来源的时候，就可以判断说他已经想继续了解这个优惠内容的详细信息了。那么如何在用户的操作上体现这个判断呢？ 

所有的优惠内容信息看上去只需要浏览就够了，不涉及操作，但有一个信息比较特殊，那就是前面提到过的使用说明。 

使用说明一般情况下文案时比较长的，不适合在默认情况下就把其露出，目前在处理类似情况的一种通用做法就是只留一行或两行文案，再给一个展开按钮。因此可以说在操作上，当用户想要查看详细的使用说明的时候，就可以判断说这个用户想继续了解这个优惠内容，这个时候就可以把优惠码暴露给用户了。 

功能处理

主要功能按钮在应用商店中，对应的功能就是下载，结合优惠内容，其可以通过文案去刺激用户消费下载，需要保留。 

而在网页端的其他次要功能按钮，由于和移动端的使用场景不一样，加上目前所做的产品还没有账号体系，类似收藏等功能都无法实现，因此不能照搬过来。 

若以增加下载量这个业务目标为准，那么有一个下载功能已经足够了。但是再往深一步想，在整个任务流程的末端，系统除了提供下载功能之外，还有没有存在其他功能的必要以丰富使用场景？

即用户在我们的平台看到优惠内容并产生下载行为之后，还有没有其他潜在的需求，或者说还有没有别的功能可以达到我们其他的业务目标？ 

这里要大概说一下我们用户人群的特点，由于做的主要是印度市场，印度人民能歌善舞就不用说了，在生活中，印度人是非常喜欢在各种社交平台去分享的，特别是晒自拍，其中主要是分享给朋友。 而且在之前的几次用户调研中我们发现了一个非常有趣的现象，就是许多用户的手机里面会有很多截图，有应用的截图、网页的截图、游戏的截图等等等等。 

那么结合我们这次的需求，当用户在看到中意的优惠内容后，是有分享给好友的动机的，“他可能会告诉好友这里可以领京东的双十一图书优惠券”，因此这时候他就需要一个分享功能，而分享是可以满足带新增这个业务目标的。 

同时，由于暂时没有收藏功能，那么如何满足用户收藏优惠内容这个潜在需求。这里我想到的是增加一个保存图片的功能，将当前优惠内容存到手机上，省去用户截屏这个操作。

但这两个次要功能的存在都要有一个前提，就是不能影响主要按钮的操作，要避免用户因为这两个功能而不去点击主要功能按钮去产生下载。

因此这里的交互处理是，结合卡片收起和展开两种状态，在卡片收起时不展示次要功能，只有在卡片展开后再将所有功能都暴露出来。 

确定好卡片的状态以及需要展示的信息和功能之后，接下来要做的就是把这些信息组合并呈现出来。

———————————————

摆放元素

这个阶段说白了，就是画原型图的阶段，把之前确定好的信息、功能根据不同的状态去摆放。这个阶段的交互设计，在设计的过程中就要考虑视觉因素了。 

配图

前面说到配图是存在有和没有两种情况的，而结合优惠券和折扣这两种类型的优惠内容，就存在有图优惠券、无图优惠券、有图折扣、无图折扣四种情况，这就需要四种样式去承载了。 

在所有的元素中，配图显然是最显眼的，有图和没图对用户的感官刺激是完全不一样的。不论放在卡片的哪个位置，图片都会很快吸引用户的视觉焦点，如果放的位置不对，很容易让用户忽略其他的信息。

考虑到用户的浏览顺序是从上至下，从左至右，因此配图这种最本来就很抢眼的元素最好放在卡片的上部，避免其出现在卡片的其他位置而干扰用户对顶部信息的阅读，打乱用户的浏览顺序。 

优惠类型

优惠券和折扣的区别在于，优惠券是带优惠码的，而折扣没有优惠码。优惠码是需要用户在购物的某个流程中输入的，这个根据不同的电商是不一样的。因此是有必要对二者进行一个区分的。 

在对比多个优惠券和折扣信息后发现，折扣的简单描述内容比较统一，全部都是“XX% OFF”，也就是都是“打多少多少折”，而优惠券的大多是“Rs.XXX OFF”，也有少部分是“XX% OFF”，二者在简单描述的文案内容上其实并没有很明显的区分。

如果在这个基础上像CouponRaja的做法那样，只是靠Coupon和Deal这两个文案去区分，其实对用户来说的区别并不大。 

因此这时候比较好的一种处理方式是将Coupon和Deal图形化，通过不同的图标去区分。图形化的icon相比于文字，阅读成本更低，不过需要注意的就是icon一定要通俗易懂，避免过于复杂。 

描述&优惠来源

之后就应该将优惠的描述展示给用户了，考虑到描述有简单描述和详细描述两种，显然让用户先看到简单描述更为直接。 

而优惠来源在应用商店里面的体现就是一个个应用，通常情况下应用icon是和下载按钮绑定在一起的。而在优惠卡片上，我们就要考虑带有下载功能的这个主要按钮其定位在哪里。换个角度，也就是去思考用户在什么情况下会去点击这个按钮去进行下载。 

在普通页面，用户也许被应用的icon直接吸引，从而点击了下载按钮。而在优惠页，显然我们不希望这样，我们更希望用户是因为被优惠内容吸引而去进行下载。如果用户在优惠页还是因为应用icon而进行下载，那就没有达到靠优惠内容带发行的这个业务目标。这里的下载按钮应该对应的是整个卡片的优惠内容，而不单单是优惠来源的那个应用。

因此在优惠卡片上，反而需要将应用icon与下载按钮分开，并且去弱化应用本身的信息，也就是要去缩小应用icon的视觉占比。 

因此结合描述内容，就有了以上的信息排列效果。由于简单描述的文案不会特别长，因此右边空出来的区域就可以摆放应用信息，让用户在第一时间快速了解到优惠的大致内容及对应来源。 

同时为了避免无配图情况下优惠卡片过于单调，这里在设计上给简单描述和应用信息增加了一个背景色，做突出强调作用，使用户在没有配图的情况下也能快速定位优惠信息。

使用说明

前面说过，使用说明的文案通常都会非常的长，因此其在默认状态下肯定是需要被隐藏的，问题在于在默认状态下，是将其完全隐藏至保留一个展开按钮，还是说像网页端通用的做法，保留第一句话，省略后面的内容，并添加一个点击后可以阅读全部的按钮。 

这里的取舍我是从三个方面去分析 ：

从内容本身来说，使用说明会根据不同电商、不同类型而略有不同，但并非每一条优惠信息的使用说明都不一样，并且对于用户来说，同一种类的优惠使用一次后往往就已经知道怎么使用了，因此使用说明的出现频率无需太高； 

从信息密度去来说，前面提到本次设计会使用卡片来承载每一条优惠信息，因此卡片上的信息密度不宜过大，而添加一句话的使用说明对于卡片来说是增加了两行文案，要知道详细描述通常也是一句话，这里在排版上就会显得冲突，一个卡片上至少会显示三行文案，而且是英文文案，过多的信息会对用户浏览造成压力，也不利于用户高效率的找到自己想要的优惠信息；

从流程上来说，用户在浏览优惠信息时，首先是通过简单描述和详细描述来进行快速浏览，从而筛选出自己想要的优惠信息，而当用户的焦点聚焦到其想了解的优惠内容前提下，其才会去具体关注这个优惠怎样使用。 

因此最终的设计是在卡片收起状态下将使用说明完全因隐藏，只保留一个展开按钮，点击后可以激活卡片的展开状态。在展开按钮右侧，也就是浏览卡片时最后浏览的区域放置主要功能按钮，让用户在完成浏览任务后能关注到下载按钮。 

卡片展开状态设计

卡片的展开状态有三种处理方式，一是在当前页面直接展开（上图左），二是跳转新的页面（上图中），三是打开一个弹窗（上图右）。 

首先明确卡片展开状态下，除了显示全部的使用说明之外，还需要增加分享和保存功能。前面也提到，若是优惠券的话还需要同时将优惠码暴露给用户。 因此这个时候卡片的信息是最饱和的，特别是当使用说明文案长度不确定的情况下，有可能是超出屏幕可承载的高度，需要去上下滑动浏览的。 

因此方案一在当前页面直接展开是不合适的，因为不能确定展开的高度，也就无法保证用户能快速去定位到下一条优惠内容，这样做会增加用户浏览时的操作成本。 

方案二跳转新的页面看似合理，不过有一点需要注意的是，由于页面首屏的内容展示区域是固定的，当使用说明文案很短时，页面会过于空，这种设计方案不能兼容使用说明文案过短的情况。而且跳转新的页面势必还会增加一个返回的操作，这样用户在不同的优惠信息之间切换的成本会增加。 

方案三是打开一个弹窗，由于弹窗本身的属性和样式，这样做看似会打断用户的浏览行为，但是我们要考虑在什么情况下弹窗才会出现。 

当用户对某一条优惠内容感兴趣的时候，想要去了解更多的信息，这时候用户才有动机去点击展开按钮，卡片才会由收起状态变为展开状态。此时用户是专注于这条优惠内容信息本身的，弹窗对于这时的用户来说应该是很好地帮助其去聚焦信息，而非打断他的浏览行为。

因此最终的设计方案是采用了弹出弹窗的交互方式去实现卡片展开后的效果。 

并通过动效去衔接整个变化过程，使切换过程更加自然。 

在分享和保存功能上，最终是决定将两个功能合并为一个功能，避免按钮过多，强化分享。 

———————————————

总结

通过这一个小小的优惠券卡片，我自己是对“界面上的每一个设计都应该是有根据的”这个观点深有体会，每一处设计都要有依据才经得起推销。 

比如交互的原型图上的信息摆放顺序是根据用户浏览顺序制定的，再比如UI的设计稿上元素之间的间距是为了方便安卓机型适配都取4的倍数，这些细节都应该有强有力的依据，经得起推敲。 

文章有些啰嗦，能坚持看完的真心感谢，当然其中肯定有你认同和不认同的地方，欢迎在评论区与我进行交流。