网站布局的全过程：20步打造完美网站布局设计.pdfVIP

网站布局的全过程：20 步打造完美网站布局设计 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. 自我挑战 我鼓励每位设计人员不要墨守成规，而是在每个项目上进行自我挑战。并非每个项目都 要求创新，因此，需要我们自己决定是否要增加一些交互设计相关的内容。比如，各种自我 挑战可能包括使用新的网格系统、创建新的组件，或者甚至包括一些小挑战，诸如避免混合 模式或者避免使用