交互设计师爬坑指南:一文搞定复杂单品模块设计 - 优设网 - UISDC

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

2018/10/18 9796评论区

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

一、常规思路

我们普通常规思路一般都是,将促销玩法或者根据能够提供的字段直接套用在常见的普通单品上,就开始进行排版了,亦或换种表达方式。大多关注点放在了形式层面,很容易忽略信息层级的表达。并且,针对一个单品,大家也不定愿意花时间思考,而实际上,单品模块才是转化的重要关键点。无论活动页面多么花哨,最终的落点还是在最基本的单品身上。若按照这样的思路。经过「精雕细琢」后,想必问题也就接踵而来了。

二、会遇到的问题

根据以往血泪史,整理了大部分我们容易遇到的问题:

  1. 浏览动线混乱,不知道从何看起,单品模块一眼get不到重点。
  2. 觉得每个信息都很重要,不能舍弃,但坑位大小有限,又放不下,放哪里都合适,但好像又都不合适。
  3. 信息厚重,整体没有节奏感。
  4. 遇到坑位大小不同,信息相同的两个单品设计时,容易忽略一致性原则。
  5. 异常状态较多时,极端情况下(异常状态全部存在)整个楼层过于花哨。
  6. 玩法解释不清楚,看不懂,理解有偏差。
  7. 画了很多版,但总都差那么一点点,比如下图是我曾经对一个单品模块的执(瞎)着(搞)。

如果以上的问题,你也遇到过类似或者同类的,我想下面的方法会对你日后起到一定的帮助,也是我亲身在工作中,使用过的思路。

三、设计技巧

第一步 明确内容

定位模块

先搞清楚,这个模块是什么?玩法是什么?如上面所提到的「限量新品预售」,这些是决定该要呈现什么内容的重要因素。

理清需求

这里的需求包含用户需求和业务需求,比如我们常见的业务招商需求,品牌方要求品牌元素的露出。用户的需求,场景要考虑全。理清后,要对需求筛选,并不一定每个需求都是真需求,且也要明确作为一个「初露头角」的单品入口,应该展示哪些信息,而不是一股脑的全是重点。如果此时信息很多,别着急,后面的步骤会帮助你。

字段支持

往往遇到,用户需要的,或者我们希望展示的,以当前现有的资源,是无法支持到的。若无法支持,探索是否有其他方式可以代替。

梳理状态

模块的默认和异常会有多少种状态。有时候,一些促销玩法,表面上,看起来不是很复杂,但梳理之后,可能一个单品模块的所有状态加起来就有五六种。

第二步 确定内容

信息打组

同类信息组合到一起,如价格类:原价+划线价、商品信息:规格+名称 等。

精简信息

避免信息层级过多,内容臃肿的可能,同类型的,是否可以缩减成一种来表达?谈到这点,想起了椰树椰汁,试问大家,有谁能记得椰树椰汁瓶子上面的字都写的什么吗?

梳理优先级,做取舍

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

经过以上两个环节,想必即便不是设计师,也能够把思路放清晰,结构想明白,此时就可以开始排版了。到此,是不是就能够设计出完全没问题,或者问题较少的方案呢?个人来看,还是要看经验是否充足,如果是老司机,到此环节,应该不会有太大的问题,而对于新入行的小鲜肉,可能还需要后面的步骤。

第三步 自查

自查

这个模块是什么?业务需求是否满足?用户需求是否满足?信息层级是否无误?是否有信息遗漏?版式是否合理(不臃肿、对应关系无误)?如果自查后,并没有发现明显问题,但还是觉得哪里不舒服,到此时,如果你已是「山穷水尽」、「油尽灯枯」,那么就考虑是否有其他的展示形式,也就是前面所说的,替代的表达方式。

第四步 细节打磨

多版本尝试

这里提到的多版本尝试,要保证优先级不变的基础之上,尝试多种排版或布局形式。力争找到最优方案。当你输出多个版本且无法从中抉择时,那就证明当前任何一个方案都存在一定的问题。

如果经过自查都没有发现问题,寻求身边同事协助,一起发现问题所在。这里有个小技巧给大家。先尽量用色块来尝试内容布局。用色块排版的好处是能够让你将精力聚焦在以信息优先级上,尽可能避免受到其中的细节打扰。以最小成本试错思路,会帮你提升产出效率。

竞品对比

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

第五步 快速迭代

小范围用研

身边的同事,你的朋友都会成为你设计产出的帮助者,行业内外均可,有时候他们的建议会让你更加坚定你的设计方案,有时也会发现你发现不到的问题,我们自身往往在设计的过程中,很容易陷入自己的观点和认知,导致没有发现问题的所在。

第六步 沉淀经验

沉淀设计经验

上线后,验证设计方案最佳的办法就是看数据,但数据需要对比,理想是能 A/B方案,才能知道哪个方案最优,哪个方案有问题。而在实际工作中 A/B方案对于大型活动,业务上存在一定风险,所以这里提到的对比,也就只能是相对的了。外加用研的用户访谈结论,主观加客观,还是有一定意义帮助你沉淀对应模块的设计经验的。

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

四、实例对照

上图是一个限量新品预售模块,常规理解下,电商的活动往往都带有「促销」概念的,有一定优惠。而上图商品,貌似我们没有感受到有优惠,没有优惠的产品出现在大型电商活动中一定是有原因的。

我们从头来看,这是一个什么单品?限量新品预售,我们回看上图,不知道大家是否有注意到「新品」信息,「新品」在整体模块优先级最低的区域内,试问,如果是扫视浏览,在一个内容丰富的活动页,那些「追捧」新品的用户,可能就没注意到,进而这一部分用户是不是就很难抓住了?很明显问题出现在第一步,没有明确单品是什么。

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

上图的单品是粉丝福利商品,玩法是关注店铺就可享受比原价优惠的价格。为什么说他失败,首先,不知道大家是否能领会到按钮上的关注和预约指的是什么?点击了之后是去哪里呢?其次关注的是单品还是关注什么?预约又是什么?其次,专享价是我当前看到的价格是和其他人不同的价格吗?是我的特权吗?专享价比正常价优惠了多少呢?此模块的信息的确很简洁,但最基本是什么都没有传达清楚。

我们尝试优化一下。

玩法我们已明确,能支持的功能我们参照上图案例,我们看用户需求是什么:这是什么商品?与正常价优惠多少?我点哪里可以享受优惠价?业务诉求,提升粉丝量,重点突出关注店铺。关于状态这里就不赘述了。根据需求需要展示的信息有:商品信息(商品图+名称+价格对比)、关注信息。 如何展示?按照优先级,我们梳理成下图左侧,但业务诉求重点突出关注,业务侧重点拉新,我们得出右侧大致结构。

我们再按照信息打组,细化里面的内容,按照优先级,罗列如下,得出下图:

然后我们再逐一填充进去细节。此时,我们与业务了解到,此模块最终出现的商品和品牌都是通过招商渠道,上线的都是大牌爆品,如果是熟知度很高的,一定程度上可以忽略商品名对商品的解释,进而我们得到如下图:

此时模块没有刚才看起来那么厚重,到此环节,玩法是能解释清楚,后面就是在此基础之上优化。自查环节上文已提到的几个关键点,大家可以自行验证。后续细节打磨的步骤就需要大家在实际工作中,慢慢逐一修正了,我们这里就不再赘述了。

结语

以上,是在实际工作中提取出来的一些小技巧和方法,也许结果看起来,可能你没用方法也能画出来,甚至有更好的方案,当然这也是可行的。任何方法适用的都是当你遇到问题时,辅助得出结论的工具。

当然如果你在工作中对此类型的问题有更好的方法和技巧,欢迎留言评论交流。虽文章是定义在复杂的单品模块的设计上,但思路也能适用于一些楼层,或其他模块上,还望能对大家在实际工作中有所帮助,如有不足,感谢指正。

欢迎关注作者的微信公众号:「未知素设计」

「让电商设计更卖货的方法」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/complex-commodity-module-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里