设计网站并不困难，只需避免一些常见的错误。在这篇文章中，我们将介绍14个需要采取的设计细节，以达到完美的网站布局。

这些步骤不仅包括设计方面，还包括一般工作流程提示。在此页面上，我们将探讨如何使用设计工作流程中的关键步骤。

1.了解设计的目的

在开始工作之前，您需要知道您正在设计的是什么。除了网站的描述，你需要知道网站的目的是什么。以新闻网站为例，目标是什么？是制作尽可能多的广告展示还是提供最佳阅读体验？这些目标将如何衡量？

2.尽早与客户分享设计

当提出一个交互概念或设计“外观和感觉”时，需要确保和客户都能尽快达成一致。在与客户分享概念之前，避免在概念上花费太多时间。

一旦最初的概念得到批准，就可以开始生产了。但是在提出第一个概念之后，如果客户不喜欢它，应该收集足够的反馈来设计出第二个更合适的概念。

3.首先解决布局

这似乎很明显，但我经常发现，设计师在试图解决问题之前，就直接投入到工作中。设计是为了解决问题，而这些问题不能通过渐变或阴影来解决，而是通过良好的布局和清晰的层次结构来解决。

4.开始勾画一个UX草图

一个基本的线框图将帮助构建布局，当我被要求为网站布局创建一个外观和感觉时，我要做的第一件事就是想出一个顶层框架来解决所有的设计问题。框架是围绕内容的UI，它帮助用户执行操作并在其中导航，它包括导航和像边栏和底部栏这样的组件。

网站设计草图

5.添加一个网格

在开始设计任何东西之前，需要添加一个适当的网格。网格将帮助构建不同部分的布局，它将指导您完成特定的屏幕大小要求，并帮助创建响应性模板，因此在间距和许多其他设计问题上保持一致。

网站设计网格

6.选择字体

经验法则是在网站布局中使用不超过两种不同的字体，探索不同的字体和颜色是项目发现阶段的一部分。一般来说，建议在一个网站中不要使用超过两种不同的字体，尽管这取决于它的性质。

网站设计字体

7.选择主题颜色

在选择一组字体的过程中，应该开始研究在界面、背景和文本中使用什么颜色。

根据每个元素的功能，在整个网站布局中一致地应用这些元素非常重要。想想微博、知乎和Vimeo等网站的布局。除了UI之外，对于插图或图形细节不应该有任何颜色限制，只要它们不影响组件的功能。

网站设计颜色

8.简化布局

简单的布局更容易导航，站点的结构越简单，就越容易导航，布局应该帮助内容突出该故事中最重要的部分。

简洁的网站设计布局

9.细化每个组件

对待每一个组件都要像对待设计竞赛一样，如果你注意到每一个组成部分，那么整体就会比它各部分的总和还要多。每一个组件都需要设计得好像它可以独立成为有史以来最好的组件一样。有时候，设计师会把网站的某些部分留到最后才去做。

网站组件

10.让客户了解你的解决方案

经常与客户沟通的目标之一是在展示工作时避免意外， 通过这样做，您会发现他们要么同意您的结论，要么在您演练过程中的某个时候指出您可能没有考虑到的缺陷或其他变体。

11.动作

在设计互动体验时，动作是必不可少的。没有任何一种设计可以单独或作为静态比较来判断，每个组件都是由它与系统的关系来定义的，而这种关系需要恰当地传递运动。运动可以演示布局中对内容或交互状态的动态效果，出于第二个目的，我建议将设计进一步引入原型设计。

12.搜索按钮图标

搜索按钮过时了吗？我们真的还需要一个搜索按钮吗？在大多数情况下，答案是否定的。作为设计师，我们塑造用户浏览互联网的方式，这取决于我们决定一个简单的行动将采取多少步骤，以及我们的网站将有多高效。

13.注意细节

注意细节这句话最近被过度使用，但在最终产品中并不总是可见。根据项目背后的概念，“关注细节”可能意味着不同的事情。

它可以是一个小的互动，一个意想不到的动画，或者一个美学上的触摸，比如按钮上的一个小渐变，或者在背景框周围的一个微妙的笔触。但总的来说，这种接触是必不可少的。

14.整理设计文件

这是最重要的建议之一，无论使用什么设计工具。无论项目的大小和设计人员的数量如何，都需要保持文件的整洁。这样可以更容易地导出不同的部分，加快设计过程，并与其他设计人员协作。