教你打造完美网站页面布局

《教你打造完美网站页面布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、教你打造完美网站页面布局ClaudioGuglieri在纽约广告公司B-Reel任职总监，他撰写了本网站设计培训指南，旨在帮助您了解设计网站布局的全过程。开始讲述设计网站布局的主题之前，我想先分享自己多年从事设计工作中看到的一些常见错误，尤其是“网站设计培训”中所述的实习生和新手们的通病。本文罗列了打造完美网站布局的步骤，旨在涵盖开始新项目前以及项目设计过程中的各项应知应会，适合数字广告公司内就职的所有网站设计师新人阅读。以下原则不仅包含各种设计细节，还提供了常规工作流程，从而帮助您出色地完成工作。遵循这些原则，您很快就能上手，设计出专业的网站布局。00.先在纸上整理思绪世界各处城市

2、插图系列简笔此条显然很重要，但是我经常发现一些设计师会跳过这步直接使用PhotoshopCS6而不去思考他们需要解决的问题。设计的目的在于解决问题，而这些有待解决的问题无法通过渐变或阴影效果得到解决，而是需要完美的布局和清晰的结构。想一想内容、布局和功能，然后再开始上阴影效果。01.从顶层框架草图入手草绘基本的框架将帮助你解决UX问题，并组织布局结构如果我要做一个项目的外观和感觉，第一件事就是先建一个顶层框架，可解决所有设计问题。框架是指内容周围的UI，有助于执行操作并进行浏览。其中包括导航和各类组件，例如边栏和底栏。如果你从这点着手设计，则设计主页以外的部分时，布局内容将了然于心。

3、02.为PSD添加网格以10像素基线绘制的978网格示例这步操作非常简单。在Photoshop中着手设计任何内容前，你需要创建一个合适的网格。这一步的道理众所周知，如果你没有这么做，我可以断言，最后的设计总是无法尽善尽美。借助于网格，你能安排不同部分的布局结构;还能指导你按照特定屏幕尺寸要求进行设计，并能帮助你创建相应的模板，以便符合间距和其他设计问题。03.选择排版样式根据常规经验，一个网站布局中所用字型最好不要超过两种了解不同的字型和配色是项目开发阶段的工作。我建议一个网站中所用字型不要超过两种，不过实际上，还需取决于你可用的色系。总之，所选字体需便于阅读大量文字，且与标题和操作

4、相映成趣。大胆使用大字体，并在使用字型时保持整体一致性和生动感。04.选择主题颜色使用有限的色阶和色调以免产生视觉疲劳选完要使用的一系列字型后，你应开始研究UI、背景和文本该用什么颜色。关于颜色，我建议在处理常规用户界面是用色及色调需简洁。根据元素功能在设计UI时保持一致性非常重要。想想Facebook、Twitter、Quora和Vimeo之类的网站布局。除UI外，插图或图形细节部分只要没有干扰组件功能的话，在用色方面也没什么限制。05.划分布局网站结构越简单，用户浏览时就越方便网站各个部分都需要发挥各自的作用。对于用户而言，每个部分都有各自存在的理由，并能得到相应的最终结果。布局

5、需要帮助强调其内容着重显示该部分最重要的信息。实际上，一个页面并不需要太多调用按钮，因此每个内容都应推动到最终“我可以在此实现什么目的”。思考一下，你可以为一个简单的目标构想到的最简单的布局，并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。06.重新思考已建内容我们真的还需要一个搜索按钮吗?在大多数情况下，答案是不。作为设计人员，我们构建了用户浏览互联网的方式，需要采取多少步骤才能执行一个简单的操作以及网站的复杂性都是由我们来决定的。我们一直都在遵循一些设计模式和惯例，因为它们切实有效，但有时候只是因为没人有足够的时间进行衡量或者重新思考。重新思考组件上已建的交互模式，并看看是

6、否可以进行改进，这点至关重要07.自我挑战我鼓励每位设计人员不要墨守成规，而是在每个项目上进行自我挑战。并非每个项目都要求创新，因此，需要我们自己决定是否要增加一些交互设计相关的内容。比如，各种自我挑战可能包括使用新的网格系统、创建新的组件，或者甚至包括一些小挑战，诸如避免混合模式或者避免使用特定的颜色08.注意细节正在进行的游戏项目：细节视图这条也算是老生常谈了，但并非始终在成品中得到应用。根据项目的概念，“关注点”也会有所不同。可以注重小型交互、意想不到的动画或审美感受，例如按钮上的小渐变或是背景盒子周围的微妙笔画之类。但是总的来说，如果你乐在其中，这种感受非常重要，而且非常自然

7、。09.认真对待每个组件，就当参加设计比赛注重每个组件，一加一大于二我必须承认这并不是我首创的理论。过去曾在FantasyInteractive上听到这种说法，当时我就震惊了，这句话如此明确中肯。每个组件都需单独设计，使其卓绝超凡。有时候，设计师会将一些部分归为最不重要的内容，最终并不会对其引起重视。10.提高设计作品清晰度避免出现像素模糊的现象，尝试正确设置笔触效果和背景之间的对比度或背景颜色除美学考量之外，有些共同的问题需要予以避免，从而创造出一个干净