江苏龙网

  1. 首页 > 资讯 > 科技 > >

##电商活动卡片式设计思考( 二 )


下图以事业部楼层为例进行了说明：
##电商活动卡片式设计思考
本文插图

图4：【组合内容卡片】示例
事业部楼层通常以业务维度划分 ， 将相关内容组合起来 。 图中的时尚就是一个事业部楼层 ， 其中存在会场、品牌、单品等元素 ， 这些元素共同构成了一个事业部模块 。 在这样的场景下 ， 我们通常将这些模块打包在1个卡片容器里 ， 保证一个事业部相关信息的【简洁性】与【独立性】 。
场景三：【单一内容卡片】与【组合内容卡片】互相嵌套
嵌套场景中 ， 内容层级较为复杂 ， 一般都会存在多个小卡片和1个大卡片 。 这也是大促中最为常见的一种 ， 如果处理不好 ， 就很容易出现“多层嵌套 ， 层级复杂”的情况 。
下图以曾经输出的秒杀楼层为例进行了说明 。
（该例子信息层级较复杂 ， 卡片元素较多 ， 并不是最佳范例；优化思路我们将在下文中介绍）
##电商活动卡片式设计思考
本文插图

图5：【单一内容卡片】与【组合内容卡片】互相嵌套示例
其中 ， 每个秒杀商品作为【单一内容卡片】存在 ， 当所有的秒杀商品组合起来 ， 并且增加tab的时候 ， 还需要有更大的容器将单品和tab都包裹起来 ， 这就是【组合内容卡片】 。
五、活动卡片基础设计原则
基于活动常见的卡片式设计应用场景 ， 我们归纳了设计中需要遵循的原则 。
内容层面：保持简洁 ， 减少嵌套
在【单一内容卡片】或者【组合内容卡片】场景下 ， 信息一般都不会过于复杂 ， 保持信息简洁并不是很困难 。 但是碰到【单一内容卡片】与【组合内容卡片】嵌套时 ， 往往问题较多 。 这也是我们在之前的项目中 ， 出现问题最多的一类场景 。 我们建议嵌套层级一定要尽可能少 ， 否则整个页面将会非常复杂 。
下面以上文的秒杀楼层为例 ， 说明如何进行简化 。
##电商活动卡片式设计思考
本文插图

图6：【秒杀楼层】层级简化后
在上图中 ， 秒杀中的单品作为【单一内容卡片】存在 ， 而整个楼层作为【组合内容卡片】存在 。 通过“保留必要的【整体容器大卡片】+【独立内容小卡片】 ， 去掉其他层级卡片”的方式 ， 保证最多2级的嵌套关系 ， 减少卡片倒角的使用 ， 最后达到简化层级的目的 。
视觉层面：元素统一 ， 减少装饰
视觉在卡片式设计中 ， 会用到许多的装饰和元素 ， 例如卡片的内容形态、卡片内容的颜色、投影效果等 ， 这些内容共同组成了卡片最终的展示样式 。 卡片的圆角、卡片内字体的粗细与字号、卡片里的间距等作为基础的参考值 ， 对整体页面的风格都具有不小的影响 。
我们最终期望的是卡片与卡内的元素形成合理的比例规则 ， 并在整个页面中保持统一 。 有了这个目标 ， 就可以更好的指导之后的工作了 。 圆角的大小差异化呈现出不同的视觉感受和风格差异 ， 在实际运用过程中 ， 也会出现各种大小的模块 。 在设计时 ， 需要考虑产品风格或气质是适合大圆角还是小圆角 。 在间距方面 ， 更多的采用大模块里的分隔线方式来替代一个个的小模块 ， 以达到减少层级的目的 。
##电商活动卡片式设计思考
本文插图

##电商活动卡片式设计思考
本文插图

图7：采用分隔线简化层级
视觉在执行时 ， 往往喜欢加很多装饰性的元素 。 比如卡片的投影 ， 通过前后颜色的设定 ， 让内容与背景之间产生视觉空间感 。 但在大促活动中 ， 最重要的就是保证卡片内容的清晰 。 活动信息本身已经非常丰富了 ， 如果增加卡片的空间感 ， 会导致整个页面视觉非常臃肿 ， 于是我们统一做了减法 ， 去掉了不必要的装饰内容 。


推荐阅读


上一篇：「阿豚精选」买手机就是买CPU，选高端U准没错，简单又可靠的选购思路

下一篇：『数码先声』电商“淘汰”了实体店？马云却表示，电商将“消失”，它将会崛起