在设计网站布局的主题时，我想到了我在设计时遇到的常见错误, 为了改变改正这些错误，我总结了一些方法。这些设计原则不仅涵盖设计方面，例如著陆页设计，还包括一般的工作流问题，这将使工作做得很好。 关注它们，您很快就会开始建立专业的网站布局。本文说说如何设计完美的 WooCommerce 独立站网页设计布局。
1 、把您的想法放在纸上
这似乎很明显，但我发现太多的设计师跳过这一步，直接进入 Photoshop 。 设计是解决问题的，在纸上画出您的想法，通过良好的布局和明确的层次结构来解决。 在开始放阴影之前，想想内容，布局和功能。
2 、开始绘制顶级框架
草绘基本电线将帮助您解决 UX 问题并构建布局。当我被要求建立一个专案的外观时，我做的第一件事是提出一个顶层框架，解决所有的设计问题。 框架是围绕内容的 UI，有助于执行操作并通过它进行导航。 它包括导航和元件，如侧栏和底部栏。
3 、新增一个网格到您的 PSD
它听起来很简单。 在开始 Photoshop 设计任何东西之前，您需要一个适当的网格。网格将帮助您构造不同部分的布局; 它将指导您完成特定的屏幕尺寸要求，并帮助您建立响应式模板，在间距和许多其他设计问题方面保持一致。
4 、选择网站布局颜色
使用有限的颜色和色调来防止视觉过载。在选择一组字型使用的过程中，您应该开始探索您将在 UI，背景和文字中使用什么颜色。在颜色方面，我建议使用有限的一组颜色和色调的一般多用户界面。
根据元素的功能，在 UI 上应用这些一致性很重要。想想 Facebook，Twitter，Quora 和 Vimeo 等网站的布局。除了 UI 之外，对于插图或图形细节不应有任何颜色限制，只要它们不干扰元件的功能。
5 、划分布局
站点的结构越简单，多用户越容易导航。您网站中的每个部分都需要讲述一个故事。布局需要帮助内容突出什么是该故事中最重要的部分。实际上，在一个页面上不应该有太多的呼叫，所以一切都应该推向最后的 “我能在这里做什么” 。
6 、注意细节
它可能是一个小的互动，一个意想不到的动画或审美触控，像一个按钮中的一个小梯度或围绕一个盒子在背景中的微妙的笔画。但总的来说，这种触控是必不可少的，也是自然的，如果您真的喜欢您做什么。如果您有更多关于 WordPress 网站设计/开发、印刷服务、品牌设计、营销推广、 WordPress APP/WordPress 微信开发、资料业务等相关需求，请登入跨飞独立站 WooCommerce 官网咨询。