Claudio Guglieri 在纽约广告公司 B-Reel 任职总监，他撰写了本网站设计培训指南，旨在帮助您了解设计网站布局的全过程。

开始讲述设计网站布局的主题之前，我想先分享自己多年从事设计工作中看到的一些常见错误，尤其是“网站设计培训”中所述的实习生和新手们的通病。

本文罗列了打造完美网站布局的步骤，旨在涵盖开始新项目前以及项目设计过程中的各项应知应会，适合数字广告公司内就职的所有网站设计师新人阅读。

以下原则不仅包含各种设计细节，还提供了常规工作流程，从而帮助您出色地完成工作。遵循这些原则，您很快就能上手，设计出专业的网站布局。

01. 先在纸上整理思绪

世界各处城市插图系列简笔

此条显然很重要，但是我经常发现一些设计师会跳过这步直接使用 Photoshop CS6 而不去思考他们需要解决的问题。设计的目的在于解决问题，而这些有待解决的问题无法通过渐变或阴影效果得到解决，而是需要完美的布局和清晰的结构。想一想内容、布局和功能，然后再开始上阴影效果。

02. 从顶层框架草图入手

草绘基本的框架将帮助你解决 UX 问题，并组织布局结构

如果我要做一个项目的外观和感觉，第一件事就是先建一个顶层框架，可解决所有设计问题。框架是指内容周围的 UI，有助于执行操作并进行浏览。其中包括导航和各类组件，例如边栏和底栏。

如果你从这点着手设计，则设计主页以外的部分时，布局内容将了然于心。

03. 为 PSD 添加网格

以 10 像素基线绘制的 978 网格示例

这步操作非常简单。在 Photoshop 中着手设计任何内容前，你需要创建一个合适的网格。这一步的道理众所周知，如果你没有这么做，我可以断言，最后的设计总是无法尽善尽美。

借助于网格，你能安排不同部分的布局结构；还能指导你按照特定屏幕尺寸要求进行设计，并能帮助你创建相应的模板，以便符合间距和其他设计问题。

04. 选择排版样式

根据常规经验，一个网站布局中所用字型最好不要超过两种

了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种，不过实际上，还需取决于你可用的色系。总之，所选字体需便于阅读大量文字，且与标题和操作相映成趣。大胆使用大字体，并在使用字型时保持整体一致性和生动感。

05. 选择主题颜色

使用有限的色阶和色调以免产生视觉疲劳

选完要使用的一系列字型后，你应开始研究 UI、背景和文本该用什么颜色。关于颜色，我建议在处理常规用户界面是用色及色调需简洁。

根据元素功能在设计 UI 时保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之类的网站布局。除 UI 外，插图或图形细节部分只要没有干扰组件功能的话，在用色方面也没什么限制。

06. 划分布局

网站结构越简单，用户浏览时就越方便

网站各个部分都需要发挥各自的作用。对于用户而言，每个部分都有各自存在的理由，并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上，一个页面并不需要太多调用按钮，因此每个内容都应推动到最终“我可以在此实现什么目的”。

思考一下，你可以为一个简单的目标构想到的最简单的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

07. 重新思考已建内容

我们真的还需要一个搜索按钮吗？在大多数情况下，答案是不。

作为设计人员，我们构建了用户浏览互联网的方式，需要采取多少步骤才能执行一个简单的操作以及网站的复杂性都是由我们来决定的。我们一直都在遵循一些设计模式和惯例，因为它们切实有效，但有时候只是因为没人有足够的时间进行衡量或者重新思考。重新思考组件上已建的交互模式，并看看是否可以进行改进，这点至关重要。

08. 自我挑战

我鼓励每位设计人员不要墨守成规，而是在每个项目上进行自我挑战。并非每个项目都要求创新，因此，需要我们自己决定是否要增加一些交互设计相关的内容。比如，各种自我挑战可能包括使用新的网格系统、创建新的组件，或者甚至包括一些小挑战，诸如避免混合模式或者避免使用特定的颜色。