第222期：高级晋阶┃高逼格魔方的实操教学

| 有 | 赞 | 小 | 报 |

剖析实战案例，玩转微电商

有赞小报：剖析实战案例，玩转微电商

本文作者：镊子（有赞小报河南省特约记者）

作者微信号：hitler737

文章来源：镊子的有赞小报专栏

魔方打造大牌店铺，开启高逼格的晋阶之路

也许，这篇文章是很小的一部分受众可以拿来直接用的帖子，但我相信通过举一反三挖掘出更多玩法！

       我知道很多有赞商城的店家都是天猫店、淘宝店铺的延伸，也有一些这类的阿里系客户在刚刚跟我接触的时候总是抱怨有赞的店铺模板有些单调，总是做不出天猫大牌的感觉，而自己又想让自己的店铺风格统一，甚至微信和淘宝的店铺一模一样，毕竟很多老客户习惯了淘宝的布局，哎呦我这小暴脾气~分分钟用有赞给你做出一家天猫店信不信！

先来看案例效果！大家自行搜索雅鹿天猫旗舰店无限版查看布局排版，傻傻分不清楚哦~

雅鹿羽绒服官方微商城

接着，我来说下怎么用魔方做出不一样的店铺装修

一、导航/分类模块的魔方应用

错误案例：

①、之前的装修中，虽然较为正确的使用了魔方，但是由于图片的布局和排版整理安全按照魔方的【代码思维】（本人将没有变通使用，生搬有赞组件的思维方式称之为【代码思维】）进行装修，导致拼接感非常的强

②、分类中规中矩，四四方方对策排版略显单调

解决方案：

①、魔方的拼接是图片间的无缝连接，图片图片之间是直接拼合在一起的，所以，要打破这种拼接感，就给你的图片认为的做个边框或者间隙吧。

制作方法：

1、图片制作完成后选择混合选项--描边--内部--像素1，描边颜色根据图片的色彩确定，一般都是明配暗原则，如图

2、做好的图片放在实现预留的画布中进行排版等待切割。如图所示

3、使用切片工具进行等比例切分，保存为web格式，一定要进行等比例切分哦~否则魔方可能会出现因尺寸不一而导致系统缩放拼接不了的情景

4、选择划分魔方布局进行上传即可。

布局上可以耍一个小心眼，如果不想完全等比例划分，可以稍微不均匀分配一下图片的排版比例，但是要保证引导点击的图片被完全切割在相应分类内，如上图所示，品牌男装团为了避免客户点击该图最右无连接反应，则加一个点击进入的引导框，客户点击无反应自动会点击引导框进行跳转，屡试不爽，百发百中

这样做出来的排版布局层次分明，主题突出，可以有效解决错误案例中存在的两个问题

二、产品布局解决方案

如果你嫌弃有赞的产品瀑布流过于通用化，太单调，想用自己的图片风格做瀑布流，完全可以看下图的切割方式

其中：1、2作为对称的铺垫引导图，我们1做了标头无连接，2、引向产品分类页。巧妙的做了自己的瀑布流排版，切图方式依然是ps切片工具里的切片划分，掌握技巧后，半分钟切完图松松搞定。

三、活动页按钮制作

其实这个疑问也有赞小报冒出过，效果图与魔方切图一起来讲一下

制作按钮不要走偏激路线，先不管有赞到底有没有按钮，有没有差价啥啥的，直接用ps把自己心中的页面做出来，然后切图，按钮可以用ps工具里的斜面和浮雕以及内阴影来实现简单的立体效果，或者直接把按钮背景调整成浅灰色，给人没有任何添加图的错觉，怎么样，你上次是不是点击了我的按钮没发现其实就是两张图片吧？！

四、巧用魔方做分配页的分组导航，先来看下效果

https://wap.koudaitong.com/v2/showcase/feature?alias=sumz48g5

做这个的目的是魔方天猫的页面分类展示，有赞其实也有一个比较类似的组件，就是商品分组，可以实现4个商品分组的产品在同一页面进行展示，但是微页面的分类却不能直接实现，可以通过魔方的方式巧妙代替，如上图所示。将四个分类导航等分切图，并通过在所示页面的导航上添加色条进行区别其他页面，来进行展示，把图片大小控制在50K以内，其余黑色地方则用辅助空白和页面颜色代替，做成4个分类导航的微页面，然后进行串联，即可实现同一页面切换展示的效果。

怎样，魔方够强大么？赶紧打开你的店铺试试手吧，用魔方打造一家超牛逼的，让人捉摸不透的却又欲罢不能的店铺出来吧！这里镊子抛砖引玉，希望大家能回复自己的店铺链接和期望效果图，我看到会回复您解决方案

最后，鸣谢河南有赞拍档--疾风文化的案例支持和方案支持（点击查看）

想探讨更多有赞玩法，请加我微信：hitler737 一起约起来哦

| 有 | 赞 | 小 | 报 |

剖析实战案例，玩转微电商

| 有料 | 有趣 |

有赞小报文章和教程均由作者授权发布

版权一律归原作者所有

转载授权、商务合作、加入有赞小报编辑部

联系邮箱：yifa@youzan.com

希望大家加好友一起玩转微商城

学习了，不错！

横拉条幅有更新哦~~

感谢分享，赞一个

优惠卷轮播怎么做到的？

季小样 发表于 2015-12-2 23:17
优惠卷轮播怎么做到的？

看今天的小报，223期哦~~

赞赞赞

赞一个     

魔方有缝隙怎么办啊

功能强大，学习了