Shopify网站设计的基础是主题，因此，选择一个好的主题是很重要的，我认为主题分为两类，一类是大主题，功能全、自定义程度高，你只要进行减法就可以，一类是特定主题，比如专门针对手工的、服装的、工具的，这一类主题一般有明显的行业属性，对行业需求了解也比较深刻，对新手友好度高。其实可定制化程度高，哪里都可以修改，对新手来说，反而很困惑很干扰。
选择好主题进入前台以后我们会发现它分两个部分，一个是Theme Setting，一个是Theme
Template，我们可以将Theme Setting理解为全局设置，Theme Template理解为局部设计。
我一般会从Theme Setting入手，主要完成以下几项的设置（每个主题设置和内容略有不同）
Theme Setting
General/Layout
包括网站的底色、宽度等一些全局设置
Font或Typography
网站的字体是影响网站风格的一个很重要因素，使用最好不要超过3种，个人常用的字体推荐：Poppins/Roboto/Helvetica/Montserrat/
Raleway/Oswald，查看竞品网站字体的工具——Font finder（Chrome插件）
Color
我一般建议黑白灰为主，选择一到两个主题色做强调，网页取色工具——ColorPick Eyedropper(Chrome插件)
Header/Menu
现在主题一般都会内置几种Header样式，在这里选择你觉得适合的样式， 稍后在Template进行设计，同时在这里完成Logo和Favicon的设置。
Favicon就是我们看到的浏览器标签页上的小图标
Footer同理，在这里选择样式
Theme Template
我一般是按照上述顺序来设计，除了先做Header和Footer，其他部分就是按照主题页的顺序来做。
Header
为什么先做Header？是为了网站总体架构，你只有知道整个架构，了解产品结构，才能很有把握的进行网站设计。我认为Header分两种类型，产品丰富型和产品单一型，产品类别多，就用Header这里充分展示并分门别类，使用mega menu可以迅速实现，比如下面这种
还有一种，产品本身比较单一，或者类目是根据属性划分的，比如只卖T恤，但是又只有圆领、V领等分类，那么Menu这里除了增加Home、Shop以后，可以增加About
Us、Contact Us、Order Track等关键信息。这里包含了非常多的后台工作，比如Page页面和Collection，所以我说做Header的时候是我们理清自己网站的方向、特点、产品类目等关键信息的过程。
所有必要信息和帮助信息的集合，增加客户信任感的重要部分，让客户知道他遇到任何问题都可以在Footer找到对应解决方案。
例如Legal pages（Privacy policy、Refund policy、Shipping policy、Terms of Service），
Customer Service（Customer Service、About Us、Contact Us、Order Track、FAQ），Newsletter，社交平台，支付方式，货币转换，语言切换，回到顶部按钮，即时聊天工具。
Footer完成以后，其实整个网站的基础和框架已经建设完成了。至少我们现在对整个网站的定位非常清晰。
Main Page/Section
接下来我一般会开始设计主页，先做主页能迅速增强你的信心，而且有利于你理清对产品的定位，以及产品展示形式。主页我一般不会超过6个Section，将我们网站的产品、服务和内容清晰展示给客户即可。
这时候可以利用图片网站https://www.pexels.com和设计网站https://www.canva.com/来迅速制作海报和Banner，有质感的海报或图片放上去，我们网站的风格就已经成型了。
其他部分
接下来就按照主题的这个顺序来设计即可，但是我一般会先做Collcetion pages和Collection list，然后去做Product
Page，其实这里还是从大到小的概念，Product page是我们最重要也是最详细的页面，我一般会放在最后去优化，前面所有的设计会让你在这里更为自信，得心应手。
这几个部分我们可能也要不停的切换Theme Setting和Theme Template来设置，因为这里全局和局部都涉及到，如果设计过程中发现想修改的地方在这个部分找不到，那就换到另一个部分去，包括Cart和Checkout页面也是一样。
最后，检查所有Page页面的显示是否正常，有些主题的Page页面也可以自定义Heading，我们可以在这里增加图片或者促销信息等内容。
最后在完善所有的Popup、Newsletter、Social Media、Currency、Language等内容。
所有建设工作完成以后，我们一定要切换到手机模式进行浏览，可以看到这个选项在设计页面的右上角。
Shopify主题都是做了手机页面自适应的，但是我们一定要去检查，包括图片显示、字体大小、模块显示是否符合预期和手机浏览习惯，可以模仿自己是客户，对整个页面进行浏览和测试。
最后，自己走通一遍流程，看整个加购、结账页面是否还有需要优化的地方。
网站设计是一个不断优化的过程，我们在运营过程中也会不断做调整，也会做A/B Test，只要始终记得自己的核心目标，产品基础，一切设计都是为这些服务的。
相关文章
