淘宝店铺导航（小白必知悬浮导航的设计流程）

• 淘宝经验

淘宝店铺装修的时候有一个悬浮导航，好多人不清楚怎么装修，其实很简单。首先把悬浮导航模块拖到右边位置。

cfd0eecc35584deaaabd298eedda3777?from=pc

首先，可以调整悬浮导航的位置，不过有限，0-50像素之间。这个根据个人喜好或者店面装修版面去调整。

f54945f8b1c94a7bb598c21e13f92372?from=pc

然后在内容设置里我们可以看到悬浮导航的尺寸要求。

0c07255c7ecc4d1e94a29364b66853c9?from=pc

然后可以在PS里新建一个宽200像素,高600像素的文档，我们做的悬浮窗只要在这个范围内都是可以的。记得最好是透明背景的。

5a7410b92a4f4444a7e0a227319684d2?from=pc

悬浮导航的设计有一个最简单的思路，就是可以找一个你们店的模特图，抠出来放上去，或者是一个产品图也可以，我们拿一个女装来讲。如下图，先抠出模特图。

f61de85740364515b616ba39f2be9691?from=pc

然后我们画一个形状去遮住这个模特，一般新手会想用一个矩形，这个有点太普通也不好看，我们可以用一个带弧度的形状试试。

703396f6f46a46f3adf40aeafe91068c?from=pc

颜色自己随便调。尽量不要太亮。然后可以把我们店的LOGO跟分类给放上去，方便客户选择。当然你想放别的也随你，放上旺旺也可以。

378482f7bf6b4076a6224d75036f5f8c?from=pc

然后可以放上收藏或者关注。还可以再多复制一层放旁边，调整下透明度来丰富悬浮导航的效果。

f98ee36093af4945a6398ceaa10024fb?from=pc

可以复制一层矩形形状，CTRL+T，然后鼠标右键选择变形，用鼠标拖拉一下形状做一个小变化即可。

b182d3958da946be9da585c7d9acc26c?from=pc

最后再稍微调整下颜色，保存为PNG或者GIF格式的透明图片出来。

997d19c8d1914563845511d287987c0f?from=pc
9f87b998998a46c0b14133208cda359d?from=pc
33a09a4e365e4dd8bfee26fa7760d4b7?from=pc

这个悬浮导航不需要去转代码，直接打开你店铺装修页面。上传到我们之前拖过去的模块里。

2e8b5a4a07944b82ad9c6d54b889c909?from=pc

下面有一个添加热点，是可以给我们做好的悬浮导航做热点链接的。把对应的热点链接地址复制到对应位置就行。

f474f13290534814b3141856c5670bd2?from=pc

热点搞定后就可以点击确定并预览看一下效果，可以的话就可以直接发布了。

fd7b8302a65f4ad3aca70b3dee520d34?from=pc
赞 (1)
0

相关推荐

发表评论

登录后才能评论