阿里巴巴全球旺铺装修教程

阿里巴巴全球旺铺装修设计思路整合

操作方法

（01）尺寸定格局1.  首先我们来学习的第一步是整个旺铺首页究竟是什么尺寸比较合适，背景和每个板块之间能够和谐融合，不会出现错位。

（02）2.  首页整个屏幕的宽度为1920像素，比这个像素小的设计，在某些高分辨率的显示器两边会出现不完全不协调现象，首页高度随自己做的旺铺而定。

（03）3.   标题栏宽度为990像素，高度在100-200像素自由设计

（04）4.   导航栏宽度为990像素，高度为33像素，请不要加大减小像素导致版面不协调。

（05）5.   导航下面可以插入自定义内容，宽度仍然为990像素，在这个自定义内容板块就是我们发挥设计思维的地方了，这里可以放入代码和gif图像使旺铺效果更佳。

（06）思维定风格1.  知道以上旺铺的尺寸我们可以开始设计我们的旺铺了，首先要知道一个旺铺的色调很重要，直接影响视觉体验，所以我们务必要去结合自身产品特色和出口国家网站风格去定格自己的色调，日韩的追求细腻、华丽、绚丽网页风格；欧美追求简洁明了的网站风格，快速的导航设置则对他们比较重要。在这里我们首先要注意到一个细节,就是外国人和中国人的审美观念的不一致，外国人讲究实在的东西，喜欢讲究快速明朗、简单大方的网页结构，请忘掉

（07）素材定主体1.    巧妇难为无米之炊，没有好的素材，再多的想法都是凭空想象，首先，我会去找第一张素材，旺铺首页的背景大图，这张素材务必要高像素、清晰。因为在1920像素下，小图片无法做清晰。接下来去找相关的一些人物、图标、banner背景、字体等需要用到的素材.

（08）设计定效果1.    打开photoshop，使用一个1920宽像素的文件进行设计排版，使用已经拉好参考线的模版制作。

（09）2.  制作顶部标题，标题尽可能简洁整齐，无需放置太多素材，因为顶部标题是第一视觉，太多东西会把下面的主体部分抢占视觉，一般放置logo、标题、联系方式均可。

（10）3.   接下来制作导航条，发挥想象、参考国外网站、结合色调，搭配背景，醒目的导航设置是买家喜欢的。

（11）4.  下面制作第一屏主体大图，这里务必突出公司优势，让客户第一眼充分了解你，你做什么产品，其实一般客户进入旺铺首页前是在产品页浏览然后进入，既然对产品有兴趣，他只有两个目的，第一查看更多产品，第二了解公司实力，我们在首页一定要把公司的优势展示出来，。如大图放置产品图片，背景则不要太花色、太抢眼，可以用实色适当遮盖一下或者模糊背景，我们要定格的目光是产品，底部背景只是起到衬托视觉的作用，潜意识会告诉客人我的第一眼是看到产品和文字。如背景直接是效果图，我们可以适当模糊产品外的地方，把突出的产品抢占目光。

（12）5.   下面是一个公司的优势展示，这里的板块已经是第二屏了，这里我们可以用几个点来放置内容，清晰、明了。无需太多图片素材，尽量以文字和图标元素为主，当客人看完第一屏产品后，看到第二屏需要适当的歇一下，转移下思维，先来了解下公司。

（13）6.  下面是第三屏，这里我们可以放置产品的分类，产品分类尽可能展示我们的所有产品分类，让客人一目了然。

（14）7.   当客人再看完产品分类后，我们再做一个Why choose us?直接告诉客人为什么要选我，我有什么不同之处。

（15）8.  接下来做一个公司的展示，当客人看完产品分类，以及你公司的优势，想必客人已经对你有50%的了解，我们这里开始可以加强客人的信任感，让客人有再往下看的动作。公司场地，车间，办公室都可以展示出来，客人看完上面只是文字与产品的图片，一定会想看下工厂究竟长什么样的，这里直接加分！

（16）9.   公司介绍下面再放置一些客人的合照、展会照片、以表示真实性，让信任感再度提升。

（17）10.   到这里，客人了解的已经比较多了，下面放置一个多语言国旗和联系方式（旺旺、邮箱直接点击联系）让客人可以变换自己的语言和马上联系你，促进营销，多语言国旗的代码以及旺旺在线联系的代码可下载。

（18）11.   这里放置一个滚动的产品展示，让简洁的网站马上可以生动起来，滚动的产品，每个图片都有独自的超链接，避免全部产品点击到一个链接。

（19）12.  再下面是产品的展示，结合每个产品单独配一张banner海报，把产品效果图和产品图结合展示。

（20）13.  网站底部，我们需要做一个网站导航以及联系方式，增加整个首页的统一感，更加专业。而且这里的加的产品图片可以变动的，大家都知道装修后台限制了很多格式和代码，gif是不能上传的，我们怎样做上去呢，有两个方法的，第一做好gif图片，把后缀改成.jpg在装修后台上传；第二是在阿里外贸圈论坛里发贴的时候上传gif图片，复制图片网址，然后在旺铺里面使用。

（21）总结以上设计步骤，整个首页排版以及设计都完成了，接下来需要用到ps里面的切片工具，把每一部分都切开来，加入自定义的超链接，整个旺铺就大功告成了。

特别提示

旺铺设计思路仅供参考，请结合自身产品构思