英文原文：Pro tips: 20 steps to the perfect website layout，编译：蝶月猋欢@yeeyan

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

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

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

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

00. 先在纸上整理思绪

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

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

 

01. 从顶层框架草图入手

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

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

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

02. 为 PSD 添加网格

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

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

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

03. 选择排版样式

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

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

04. 选择主题颜色

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

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

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

05. 划分布局

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

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

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

06. 重新思考已建内容

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

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

07. 自我挑战

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

08. 注意细节

正在进行的游戏项目：细节视图

这条也算是老生常谈了，但并非始终在成品中得到应用。根据项目的概念，“关注点”也会有所不同。

可以注重小型交互、意想不到的动画或审美感受，例如按钮上的小渐变或是背景盒子周围的微妙笔画之类。但是总的来说，如果你乐在其中，这种感受非常重要，而且非常自然。

09. 认真对待每个组件，就当参加设计比赛

注重每个组件，一加一大于二

我必须承认这并不是我首创的理论。过去曾在 Fantasy Interactive 上听到这种说法，当时我就震惊了，这句话如此明确中肯。每个组件都需单独设计，使其卓绝超凡。有时候，设计师会将一些部分归为最不重要的内容，最终并不会对其引起重视。

10. 提高设计作品清晰度

避免出现像素模糊的现象，尝试正确设置笔触效果和背景之间的对比度或背景颜色

除美学考量之外，有些共同的问题需要予以避免，从而创造出一个干净正确的作品。尝试提高设计清晰度时应注意以下几点：梯度条带、模糊的边缘、字体渲染选项（部分字体取决于字体大小，最好在特定的渲染模式下查看）以及与背景融合的笔触效果。

以上列出了一些基本注意事项，但实际上需要注意的问题还有很多。务必以整体视角检查设计，看看是不是都非常完美，然后再单独分析每个组件还有什么问题。

11. 整理 PSD

如果你通过 Photoshop 进行设计，那么这点至关重要（结合网格使用）。无论项目有多大，有多少设计师参与其中，你都需要保证文件干净。这样就能保证不同部分都能轻松导出，从而提高设计流程的速度，并能处理与其他设计师共享的文件。

12. 设计最好的情况，但为最坏的情况做准备

谨记不同设备和尺寸大小上如何让你的设计发挥作用

作为设计师，我们的工作就是通过不同的限制解决问题。网页设计过程中，会遇到各种限制，包括概念和技术问题以及内容相关的问题。

我们需要创建一个网站，其不仅可以在理想状态下运行，同时也可以在最糟糕的环境下运行。例如，用户可使用相当小的屏幕查看网站，此时网站上的内容看起来支离破碎。

但是，鉴于我们展示设计作品的目的，我个人强烈建议为其创建最佳环境。因此我们将要显示最理想的内容量，同时以最佳浏览器尺寸进行展示，也就是用户最常用的环境。

13. 沉迷于设计，因爱生恨

如果你钻研设计，我保证你已经干过这种事。只要完成一项设计就会倍感自豪，设计已经成为生活的一部分了。还会截图，与其他设备比较，将其设为桌面背景，甚至打印出来挂在墙上。

整个过程中，我达到某个临界点，最终产生厌恶；我开始发现各种缺点和错误，然后进行修改。不喜欢自己以前的设计是成熟的表现，也就是说，你最终发现自己的问题。

14. 与客户交流前避免浪费太多时间设计概念

提交交互概念或设计外观与体验时，你需要确保你和客户尽快同步。初始概念通过审核后，你可以稍作放松，然后开始设计。

但是如果提交后初始概念后，并未深得客户的欢心，你就应该收集各种反馈，以便第二次提交的概念方案能够符合客户的要求。

15. 和你的开发者成为好友

纽约广告公司 HUGE 的 Rafael Mumme 就设计师如何更好地与开发者合作的提出的建议，请访问 www.netmagazine.com/opinions/20-things-drive-web-developers-crazy

开发者创意十足，而且热爱自己的工作，和你一样。但是他们并非总是在项目一开始就参与其中，而且大多时候，他们都是在概念设计敲定之后才开始参与设计的，因此他们的创意工作就遭到了抹杀。这种流程是错误的；一些非常优秀的想法都是开发团队提出的。分享你的概念，你会惊喜地发现他们会把它变成更加美观、更加便于设计。

16. 展示：说明时请将受众想象为四岁儿童

展示作品和设计作品一样重要。使用错误的展示方式，可能会埋没优秀的设计或者使其惨遭淘汰。谨记，受众第一次看到你的设计时，并不了解你了然于心的各个重点。

17. 肯定自己的创意，但不要成为其奴隶

了解何时宣传自己的创意，或是了解团队或客户何时会产生分歧，这里存在一个小小的临界点。作为设计师，你需要坚信自己的设计，但是你也应乐于接受他人意见，快速改变自己的创意以及展开后续调整。不要忘记条条大路通罗马。

18. 开发过程中跟进设计

如果您在广告公司中工作，你必须明白，虽然你刚刚完成的一个项目已经投入开发，你不得不参加另一个新项目的设计，这是家常便饭。大家普遍认为 PSD 和样式表提交后就万事大吉了，这是不对的，其实一切还刚刚开始。

如果你真的关心自己的设计和交互理念是否完全贯彻，可以实时与开发者友人沟通，并尽量提供帮助，以便达到至臻至美的效果。

19. 逐步正在设计的作品

与大家分享样式表和正在设计的组件

作为设计团队的一员，我们不仅希望看到最终的成品，同时也想看一看正在设计的作品。有时候，出于种种原因，项目最优秀的部分可能会被忽略，然后一直存放在归档文件夹中。项目完成并获得客户/制作方认可后，可以着手进行改善，如有可能，可以创建案例研究，分析设计中的作品以及最终并未采用的作品。这有助于帮助拓宽团队知识，同时你也能收集宝贵的反馈意见。

 

Claudio Guglieri 目前在纽约国际电子广告公司 B-Reel 就任艺术总监。之

前在 Fantasy Interactive 任艺术总监，负责领导和制作客户端交互体验，如 Google、EA CNN、Nikelodeon、History Channel、Range Roverand Microsoft。如有任何问题，可 @claudioguglieri。

有关更多网页设计贴士，请参阅以下文章：

l 网页设计培训：顶在线工具

l 30 个网页设计秘密，提高你的技能

l 40 个 HTML 5 完美范例