怎样设计一个优惠信息卡片—Part3# 交互 # 设计思路
Cover
摆放元素
这个阶段说白了，就是画原型图的阶段，把之前确定好的信息、功能根据不同的状态去摆放。这个阶段的交互设计，在设计的过程中就要考虑视觉因素了。
配图
前面说到配图是存在有和没有两种情况的，而结合优惠券和折扣这两种类型的优惠内容，就存在 有图优惠券、无图优惠券、有图折扣、无图折扣 四种情况，这就需要四种样式去承载了。
图片在卡片中不同位置示例
在所有的元素中，配图显然是最显眼的，有图和没图对用户的感官刺激是完全不一样的。不论放在卡片的哪个位置，图片都会很快吸引用户的视觉焦点，如果放的位置不对，很容易让用户忽略其他的信息。
考虑到用户的浏览顺序是从上至下，从左至右，因此配图这种最本来就很抢眼的元素最好放在卡片的上部，避免其出现在卡片的其他位置而干扰用户对顶部信息的阅读，打乱用户的浏览顺序。
优惠类型
优惠券和折扣的区别在于，优惠券是带优惠码的，而折扣没有优惠码。优惠码是需要用户在购物的某个流程中输入的，这个根据不同的电商是不一样的。因此是有必要对二者进行一个区分的。
在对比多个优惠券和折扣信息后发现，折扣的简单描述内容比较统一，全部都是“XX% OFF”，也就是都是“打多少多少折”，而优惠券的大多是“Rs.XXX OFF”，也有少部分是“XX% OFF”，二者在简单描述的文案内容上其实并没有很明显的区分。
如果在这个基础上像CouponRaja的做法那样，只是靠Coupon和Deal这两个文案去区分，其实对用户来说的区别并不大。
Coupons和Deals图标示例
因此这时候比较好的一种处理方式是将Coupon和Deal图形化，通过不同的图标去区分。图形化的icon相比于文字，阅读成本更低，不过需要注意的就是icon一定要通俗易懂，避免过于复杂。
描述&优惠来源
之后就应该将优惠的描述展示给用户了，考虑到描述有简单描述和详细描述两种，显然让用户先看到简单描述更为直接。
常见应用下载卡片排版
而优惠来源在应用商店里面的体现就是一个个应用，通常情况下应用icon是和下载按钮绑定在一起的。而在优惠卡片上，我们就要考虑带有下载功能的这个主要按钮其定位在哪里。换个角度，也就是去思考用户在什么情况下会去点击这个按钮去进行下载。
在普通页面，用户也许被应用的icon直接吸引，从而点击了下载按钮。而在优惠页，显然我们不希望这样，我们更希望用户是因为被优惠内容吸引而去进行下载。如果用户在优惠页还是因为应用icon而进行下载，那就没有达到靠优惠内容带发行的这个业务目标。这里的下载按钮应该对应的是整个卡片的优惠内容，而不单单是优惠来源的那个应用。
因此在优惠卡片上，反而需要将应用icon与下载按钮分开，并且去弱化应用本身的信息，也就是要去缩小应用icon的视觉占比。
配图+简单描述+来源 样式示例
因此结合描述内容，就有了以上的信息排列效果。由于简单描述的文案不会特别长，因此右边空出来的区域就可以摆放应用信息，让用户在第一时间快速了解到优惠的大致内容及对应来源。
无配图+简单描述+来源 样式示例
同时为了避免无配图情况下优惠卡片过于单调，这里在设计上给简单描述和应用信息增加了一个背景色，做突出强调作用，使用户在没有配图的情况下也能快速定位优惠信息。
使用说明
前面说过，使用说明的文案通常都会非常的长，因此其在默认状态下肯定是需要被隐藏的，问题在于在默认状态下，是将其完全隐藏至保留一个展开按钮，还是说像网页端通用的做法，保留第一句话，省略后面的内容，并添加一个点击后可以阅读全部的按钮。
这里的取舍我是从三个方面去分析
从内容本身来说，使用说明会根据不同电商、不同类型而略有不同，但并非每一条优惠信息的使用说明都不一样，并且对于用户来说，同一种类的优惠使用一次后往往就已经知道怎么使用了，因此使用说明的出现频率无需太高；
从信息密度去来说，前面提到本次设计会使用卡片来承载每一条优惠信息，因此卡片上的信息密度不宜过大，而添加一句话的使用说明对于卡片来说是增加了两行文案，要知道详细描述通常也是一句话，这里在排版上就会显得冲突，一个卡片上至少会显示三行文案，而且是英文文案，过多的信息会对用户浏览造成压力，也不利于用户高效率的找到自己想要的优惠信息；
从流程上来说，用户在浏览优惠信息时，首先是通过简单描述和详细描述来进行快速浏览，从而筛选出自己想要的优惠信息，而当用户的焦点聚焦到其想了解的优惠内容前提下，其才会去具体关注这个优惠怎样使用。
优惠卡片收起状态-最终样式
因此最终的设计是在卡片收起状态下将使用说明完全因隐藏，只保留一个展开按钮，点击后可以激活卡片的展开状态。在展开按钮右侧，也就是浏览卡片时最后浏览的区域放置主要功能按钮，让用户在完成浏览任务后能关注到下载按钮。
卡片展开状态设计
三种展开状态-demo示例
卡片的展开状态有三种处理方式，一是 在当前页面直接展开 （上图左），二是 跳转新的页面 （上图中），三是 打开一个弹窗 （上图右）。
首先明确卡片展开状态下，除了显示全部的使用说明之外，还需要增加分享和保存功能。前面也提到，若是优惠券的话还需要同时将优惠码暴露给用户。 因此这个时候卡片的信息是最饱和的，特别是当使用说明文案长度不确定的情况下，有可能是超出屏幕可承载的高度，需要去上下滑动浏览的。
因此方案一在当前页面直接展开是不合适的，因为不能确定展开的高度，也就无法保证用户能快速去定位到下一条优惠内容，这样做会增加用户浏览时的操作成本。
方案二跳转新的页面看似合理，不过有一点需要注意的是，由于页面首屏的内容展示区域是固定的，当使用说明文案很短时，页面会过于空，这种设计方案不能兼容使用说明文案过短的情况。而且跳转新的页面势必还会增加一个返回的操作，这样用户在不同的优惠信息之间切换的成本会增加。
方案三是打开一个弹窗，由于弹窗本身的属性和样式，这样做看似会打断用户的浏览行为，但是我们要考虑在什么情况下弹窗才会出现。
当用户对某一条优惠内容感兴趣的时候，想要去了解更多的信息，这时候用户才有动机去点击展开按钮，卡片才会由收起状态变为展开状态。此时用户是专注于这条优惠内容信息本身的，弹窗对于这时的用户来说应该是很好地帮助其去聚焦信息，而非打断他的浏览行为。
优惠卡片展开状态-最终样式
因此最终的设计方案是采用了弹出弹窗的交互方式去实现卡片展开后的效果。
配图卡片展开-demo示例
无配图卡片展开-demo示例
并通过动效去衔接整个变化过程，使切换过程更加自然。
在分享和保存功能上，最终是决定将两个功能合并为一个功能，避免按钮过多，强化分享。
总结
通过这一个小小的优惠券卡片，我自己是对“ 界面上的每一个设计都应该是有根据的 ”这个观点深有体会，每一处设计都要有依据才经得起推销。
比如交互的原型图上的信息摆放顺序是根据用户浏览顺序制定的，再比如UI的设计稿上元素之间的间距是为了方便安卓机型适配都取4的倍数，这些细节都应该有强有力的依据，经得起推敲。
文章有些啰嗦，能坚持看完的真心感谢，当然其中肯定有你认同和不认同的地方，欢迎在公共号与我留言进行交流。
作者 线框仔_Wave
关键字：产品经理, 设计师, 卡片
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！