交互设计师爬坑指南：一文搞定复杂单品模块设计

随着促销活动日益增多，相继应促销手段也逐渐变丰富起来。拼、秒杀、预售、好友助力砍价相继诞生，让普普单品模块，呈现在用户前也不再那么「单纯」了。而这些单品模块在设计过程，想必各位也是遇到过不少问题，今天跟大家起聊聊，这些复杂单品模块在交互阶段应该如何设计。

一、常规思路

我们普常规思路般都是，将促销玩法或者根据能够提供段接套用在常见普单品上，开始进排版了，亦或换表。大多关注放在了形层，很容易忽略信息层级表。并，针个单品，大家也不定愿意花时思考，而实上，单品模块才是转化要关键。论活动页多么花哨，最终落是在最基本单品身上。若按照这样思路。经过「精雕细琢」后，想必问题也接踵而来了。

二、会遇到的问题

根据以往血泪史，理了大部分我们容易遇到问题：

1. 浏览动混乱，不道从何看，单品模块一眼get不到重点。
2. 觉个信息都很要，不能舍弃，坑位大小有限，又放不下，放哪里都合适，好像又都不合适。
3. 信息厚重，整体没有节奏感。
4. 遇坑位大不同，息相同的个品计，容易忽略一致性则。
5. 异常状态较多时，极端况下（异常状态全部存）整层过于花哨。
6. 玩法释不清楚，看不懂，理有偏差。
7. 画了很多版，都那么，比如下图是我曾经个单品模块执（瞎）着（搞）。

如果以的问题，也遇到过类似或者同类的，我下面的方法会对日后起到一的帮，也我亲身作中，使用过的思。

三、设计技巧

第一步 明确内容

定位模块

先搞楚，这个模块是什么？玩法是什么？如上所提到「限量新品预售」，这些是决定该要呈现什么内容要素。

理需求

这里需求含用户需求和业务需求，比如我们常见业务招商需求，品要求品元素露出。用户需求，场景要考虑全。理后，要需求筛选，并不定个需求都是真需求，也要明确作为个「初露头」单品入口，应该展示哪些信息，而不是股脑全是。如此时信息很多，着急，后步骤会帮助你。

段支持

往往遇到，用户需要，或者我们希望展示，以前现有资，是法支持到。若法支持，探索是否有其他可以代替。

梳理状态

模块默认和异常会有多少状态。有时候，些促销玩法，表上，看起来不是很复杂，梳理后，可能个单品模块所有状态加起来有五六。

第二步 确定内容

信息打组

同类信息组合到一，价类：原价+划价、品信息：规+名称 等。

精简信息

避免信息级，内容臃肿的能，同类型的，是否以缩减成一种来表达？谈到点，想椰树椰汁，试问大家，有谁能得椰树椰汁瓶子上面的字写的什么吗？

梳理优先级，做取舍

该模块需要传递的信息做优先级梳理。以现有模块能承载的信息量，做删减。根据经验，三个优先级区域在一个模块已经是比饱满的状态。「少则空、满则溢」，当，个节要根据具情况具来看。

经过以上两个环节，想必即便不是设计师，也能够把思路放晰，结构想明白，此时可以开始排版了。到此，是不是能够设计出完全没问题，或者问题较少案呢？个来看，是要看经验是否充足，如是司，到此环节，应该不会有太大问题，而于新入小鲜，可能需要后步骤。

第三步 自查

自查

个模块是什么？业务需求是否满？用户需求是否满？信息级是否无误？是否有信息遗漏？版式是否合理（不臃肿、对应关系无误）？果自查，并没有现明显问题，但还是得哪里不舒服，到此时，果你已是「穷水尽」、「尽灯枯」，么就考虑是否有其他的展示形式，也就是前面所说的，替代的表达方式。

第四步 细节打磨

多版本试

这里提到的多版本试，保证优先级不变的基础之，试多种排版或布局形式。力争找到优方案。当输出多版本且无法从中抉择时，那就证明当任何一方案都存一的问题。

果经自查没有现问题，寻求身边同协助，一现问题所在。里有个小技巧给大家。先尽量用块来尝试内容局。用块排版的处是能够让你将精力聚焦在以信息优先级上，尽能避免受到其中的细节打扰。以最小成试错思路，帮你提升产出效率。

竞品对比

初稿之后，对比竞品，取补短。取并不一就照搬，家往往找到的案例几乎都完整的视觉稿，切记交互阶段不引入视觉元素，否则会「害人害己」，以自身的亲身历劝谏家，曾某模块用了视觉元素，到了视觉阶段，业务方坚持用交互稿中的样式，导致十分尴尬。对照竞品一了初稿之后，否则竞品会影响到自己的设产出。对于竞品的参考，这里建议家参考信息层级的处理方式、排版布局、状态划分。总之不参考其中的视觉元素。

第五步 快速迭代

范围用研

身边的同事，你的朋友都会成为你计产出的帮助者，行业内外均可，有候的建议会让你更加坚定你的计方案，有也会发现你发现不的问题，身往往在计的过程中，容易陷入的观点和认知，导致没有发现问题的所在。

第六步 沉淀经验

沉淀设计经验

上线后，验证设计方案最佳的办法就是看数据，但数据需要对，想是 A/B方案，才知道哪个方案最优，哪个方案有问题。而在实际工作中 A/B方案对于大，务上存在一定险，这里到的对，就只是相对的了。外研的户访谈结论，观客观，还是有一定意义帮助你沉淀对应模的设计经验的。

以上步，如果每一步都能够做「尽善尽美」，想必应该就不会遇开篇提的那些问题了。为了验证上面提的方法有用，简举个「活生生」的实例给大家。

四、实例对照

上图是一个限量预售模，规解，电商的往往都带有「促销」概念的，有一定优惠。而上图商，貌似我们没有感受到有优惠，没有优惠的产现在大电商中一定是有原因的。

从头来，这是一个什品？限量新品预，回上图，不知道大家是否有注「新品」息，「新品」在整体模块优先最低的域内，问，如果是扫视浏览，在一个内容丰的活动页，那些「追捧」新品的用户，可能就没注，进而这一部用户是不是就难抓住了？显问题出现在第一步，没有确品是什。

我们再看另一比较「失败」的案例，家先看下模块本身，先看否能理解这单品的含义，再阅读后文。

图的单品粉丝福利商品，玩法关注店就可享受比原价优惠的价格。什么他失败，首先，不知道家否能领会到按钮的关注预约指的什么？点击了之后去哪里呢？其次关注的单品还关注什么？预约又什么？其次，专享价我当看到的价格其他人不同的价格吗？我的特权吗？专享价比常价优惠了多少呢？此模块的信息的确很简洁，但基本什么都传达清楚。

我们尝试优化一下。

玩法我们已明确，能支持功能我们参照上图案例，我们看用户需求是什么：这是什么商品？与正常价优惠多少？我哪里可以享受优惠价？业务诉求，提升粉丝量，突出关注店铺。关于状态这里不赘述了。根据需求需要展示信息有：商品信息（商品图+名称+价格比）、关注信息。 如何展示？按照优先级，我们梳理成下图左侧，业务诉求突出关注，业务侧新，我们出右侧大致结构。

我们再按照信息打组，细化里内容，按照优先级，罗列如下，出下图：

然后我们再逐填充进去细节。此时，我们与业务了解到，此模块最终出现商品和品都是过招商渠，上线都是大爆品，如是熟知度很高，定程度上可以忽略商品名商品解释，进而我们到如下图：

此时模块没有刚才看起来那么厚，到此环节，玩法是能解释楚，后是在此基础上优化。自查环节上文已提到几个关键，大家可以自验证。后续细节打磨步骤需要大家在实工作，慢慢逐正了，我们这里不再赘述了。

结语

以上，是在实工作提取出来些小技巧和法，也许结看起来，可能你没用法也能画出来，甚至有更好案，然这也是可。任何法适用都是你遇到问题时，辅助出结论工具。

当然如果你在工作中对此类的问题有更好的方法和技巧，留言评论交流。虽章是定义在复杂的单模的设计上，但思路适于一些楼层，或他模上，还望对大在实际工作中有帮助，如有足，感谢指正。

欢迎关注作者的公众号：「未知素计」