怎样设计一个优惠信息卡片—Part3# 交互 # 设计思路

2017-03-17 10:40:00

Cover

摆放元素

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

配图

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

图片在卡片中不同位置示例

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

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

优惠类型

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

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

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

Coupons和Deals图标示例

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

描述&优惠来源

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

常见应用下载卡片排版

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

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

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

配图+简单描述+来源样式示例

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

无配图+简单描述+来源样式示例

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

使用说明

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

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

从内容本身来说，使用说明会根据不同电商、不同类型而略有不同，但并非每一条优惠信息的使用说明都不一样，并且对于用户来说，同一种类的优惠使用一次后往往就已经知道怎么使用了，因此使用说明的出现频率无需太高；
从信息密度去来说，前面提到本次设计会使用卡片来承载每一条优惠信息，因此卡片上的信息密度不宜过大，而添加一句话的使用说明对于卡片来说是增加了两行文案，要知道详细描述通常也是一句话，这里在排版上就会显得冲突，一个卡片上至少会显示三行文案，而且是英文文案，过多的信息会对用户浏览造成压力，也不利于用户高效率的找到自己想要的优惠信息；
从流程上来说，用户在浏览优惠信息时，首先是通过简单描述和详细描述来进行快速浏览，从而筛选出自己想要的优惠信息，而当用户的焦点聚焦到其想了解的优惠内容前提下，其才会去具体关注这个优惠怎样使用。

优惠卡片收起状态-最终样式

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

卡片展开状态设计

三种展开状态-demo示例

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

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

因此方案一在当前页面直接展开是不合适的，因为不能确定展开的高度，也就无法保证用户能快速去定位到下一条优惠内容，这样做会增加用户浏览时的操作成本。
方案二跳转新的页面看似合理，不过有一点需要注意的是，由于页面首屏的内容展示区域是固定的，当使用说明文案很短时，页面会过于空，这种设计方案不能兼容使用说明文案过短的情况。而且跳转新的页面势必还会增加一个返回的操作，这样用户在不同的优惠信息之间切换的成本会增加。
方案三是打开一个弹窗，由于弹窗本身的属性和样式，这样做看似会打断用户的浏览行为，但是我们要考虑在什么情况下弹窗才会出现。

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