网页设计：网站布局的23个步骤

　　在设计网站布局时，常常会出现一些常见的错误，特别是实习生和新设计师。在这个完美的网站布局的文章中，我们将介绍在开始一个新项目之前，每个新网站建设者应该知道做什么，以及在这个过程中应该注意什么?欢迎大家阅读!更多相关信息请关注相关栏目!

　　这些原则不仅涵盖设计方面，还涵盖了一般工作流程，可以很好地完成工作。跟随他们，你很快就会开始创建专业的网站布局。

　　01.客户的目的是什么

　　告诉你的客户，找出目标是什么

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

　　良好的重新设计不一定是最华丽的，而是随着时间的推移提高性能的。在开始设计之前与客户交谈是关键所在。您需要了解他们的关注和目标超越了书面SOW(工作表)。

　　02.把你的想法写在纸上

　　关于世界各地城市的插图系列的很早的草图

　　这似乎非常明显，但是我经常发现，设计师在考虑他们正在尝试解决的问题之前，先直接进入他们的工作。设计是解决问题，这些问题不能通过渐变或阴影解决，而是通过良好的布局和清晰的层次结构来解决。

　　在开始放置阴影之前，请考虑内容，布局和功能。确保这些想法符合客户的目标，并随时分享。没有任何客户曾经向我投诉过度沟通的想法。

　　03.开始绘制顶级框架

　　绘制基本的线框可以帮助您构建布局(单击右上角的图标以放大图像)

　　当我被要求创造一个项目的外观和感觉，我做的第一件事是提出一个顶级的框架，以解决所有的设计问题。框架是围绕内容的UI，并帮助用户执行操作并浏览它。它包括导航和组件，如侧边栏和底部栏。

　　如果您从这个角度来看待您的设计，您将清楚地了解在首页设计部分之后，布局需要什么。

　　04.添加网格

　　具有10px基线的978网格的示例

　　听起来很简单。在开始设计任何你需要一个正确的网格之前。没有网格启动没有有效的借口 - 如果没有，我可以向你保证，设计看起来不是很好。网格将帮助您构建不同部分的布局; 它将引导您完成特定的屏幕尺寸要求，并帮助您创建响应模板，因此在间距方面以及许多其他设计问题方面是一致的。

　　要了解如何做到这一点，请查看本指南来创建适应所有屏幕尺寸的网格。

　　选择你的排版

　　一般的经验法则是在网站布局中使用不超过两种不同的字体

　　探索不同的字体和颜色是项目发现阶段的一部分。我建议不要在网站上使用两种以上的不同字体，但这实际上取决于它的性质。总的来说，选择一个容易阅读的大块文字的字体，并且更加适合标题和号召性用语。不要害怕使用大字体，并且在使用排版时具有创造性和一致性。

　　06.选择你的颜色主题

　　Color Hunt等工具旨在帮助您挑选调色板

　　在选择一组字体的过程中，您应该开始探索在UI，背景和文本中使用的颜色。我建议为一般用户界面使用一组有限的颜色和色调。

　　根据元素的功能，在UI上应用这些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等网站的布局。除了UI，图形或图形细节不应该有任何颜色限制，只要它们不会干扰组件的功能。

　　如果您遇到困难，请查看我们的免费应用列表，以选择配色方案。

　　分配布局

　　简单的布局往往更容易导航

　　网站的结构越简单，用户就越容易浏览。您网站的每个部分需要讲述一个故事; 它需要用户的理由和最终结果。布局应该帮助内容突出显示该故事中最重要的部分。

　　实际上，在一个网页上不应该有太多的号召力 - 所有的事情都应该推动到那个决定“我能在这里做什么?” 想想最简单的布局，您可以想象一个简单的目的，并开始添加必要的组件。最后，你会惊讶，很难保持简单。

　　08.重新思考已建立的

　　搜索按钮已变得过时

　　我们真的需要一个搜索按钮吗?在大多数情况下答案是否定的。作为设计师，我们塑造了用户浏览互联网的方式，由我们来决定简单操作将采取多少步骤，以及我们的网站将如何有效。

　　有些公约在那里是因为他们工作，但有些是因为没有人花费足够的时间来评估它们。重新考虑所有组件的已建立的交互模式，看看我们如何改进它们。

　　想想动议

　　运动在设计交互式体验时至关重要

　　运动在设计交互式体验时至关重要。没有任何设计可以自己判断，或作为静态组合; 每个组件都是通过与系统的关系定义的，这种关系需要运动才能正确传达。运动可以说明您的布局中对内容或交互状态的动态效果。为了第二个目的，我建议您的设计进一步进行原型设计。

　　原型，原型，原型

　　原型是测试互动的最佳方法

　　原型是测试交互和技术的最佳方法。现在有很多原型设计工具使其变得轻而易举，您不需要成为创建有效原型的编码大师。这是另一种方式，您可以让您的客户感到兴奋，并与理论和想法，否则需要很多解释。

　　挑战自己

　　我鼓励每个设计师在每个项目上挑战自己。创新并不总是对项目的要求，所以我们需要提出新鲜事物。不同挑战的例子可能包括使用新的网格系统，创建新的组件，或者甚至是避免混合模式或使用特定颜色的小挑战。

　　注意细节

　　工作进展中：细节视图

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

　　它可能是一个小的互动，一个意想不到的动画或美学的触摸，如一个按钮的一个渐变或在背景中一个盒子周围微妙的冲击。但总的来说，这种触摸是至关重要的 - 如果你真的很喜欢你所做的，这将是自然而然的。

　　13.优化每个组件

　　将每个组件视为设计比赛

　　处理每个组件，就像它可以呈现给设计大赛一样。如果您注意每一个组件，整体将超过其部分的总和。我不得不承认，这件建议不是我的。我曾经在以前的一个机构听到过，令我震惊的是，这个声明是多么清楚和真实。

　　每个组件都需要设计，因为它可以独立于最好的组件。有时，设计师会将某个网站的某些部分留下，直到他们的待办事项列表中，直到最后才显示出来。

　　锐化你的工作

　　在笔画和背景之间设置正确的对比度

　　为了避免模糊像素，请尝试在笔画和背景颜色或背景颜色之间设置正确的对比度。除了任何审美的考虑之外，还有一些常见的事情必须避免，以创造一个干净，正确的工作。

　　当您尝试锐化工作时，您应该注意的部分是包括渐变条纹，边缘模糊，字体渲染选项(某些字体，具体取决于其特定渲染模式下的最佳尺寸)，以及与的背景。

　　这些只是需要寻找的几个问题的`基本例子，但实际上这个列表是无止境的。总是看你的设计作为一个整体，看看一切是否运作良好，然后仔细分析每个组件。

　　15.整理你的设计文件

　　无论您使用什么设计工具，这一点(以及使用网格)都是最重要的建议之一。不管项目的大小和设计人员的数量如何，您需要保持文件清洁。这样可以轻松导出不同的部分，加快设计过程并与其他设计人员合作。

　　16.设计最佳案例; 为最坏的准备

　　请记住，您的布局如何在不同的设备和屏幕尺寸上工作

　　请记住，您的布局如何在不同的设备和屏幕尺寸上工作。作为设计师，我们的工作是通过不同的约束来解决问题通过网页设计，约束范围从概念和技术问题到内容相关的问题。

　　我们需要建立一个不仅可以在理想场景下工作的站点，也可以在最坏的情况下构建一个站点。例如，一个用户可能正在使用一个非常小的屏幕，并检查该网站，当它几乎没有任何内容，所以它看起来破碎。

　　但是，为了展示我们的工作，我总是强烈建议为此建立最佳案例场景。因此，我们将显示理想的文本数量，我们将在理想的浏览器大小内显示该网站，这应该是大多数使用它的用户最常见的场景。

　　痴迷于设计，直到你讨厌它

　　如果您对设计充满热情，我相信这是您已经在做的事情。每当我完成一个comp我感到自豪，我倾向于使这个成为我一生的一部分。我拍摄它的截图，检查它不同的设备，制作它的壁纸，甚至打印它，挂在墙上。

　　作为这个过程的结果，我得到了一个点，我终于讨厌我的设计。我开始看到一切都错了，最终我改变了。不喜欢你以前的工作是成熟的迹象，这意味着你终于从自己的错误中学习了。

　　18.早日与客户分享设计

　　当提出交互式概念或设计“外观和感觉”时，您需要确保您和客户端尽快在同一页面上。在与客户共享之前，避免花费太多时间在概念上。

　　一旦初始概念被批准，你可以放松一点，开始生产。但是，在提出了第一个概念之后，如果客户不爱上它，那么你应该收集足够的反馈来给表格带来第二个更合适的概念。

　　作为开发人员最好的朋友

　　开发者是有创意的人，他们喜欢自己的工作，就像你一样。但是，从一开始就并不总是包含在一个项目中，而且当概念被决定并且他们的创造性角色已经被超越时，往往只会涉及到。

　　这个过程是错误的一些最好的想法来自开发团队，所以确保从项目开始就与他们合作。与他们分享你的观念和兴奋，最终会带来更好的想法和更好的执行。

　　20.尽可能清楚地呈现

　　产生伟大的工作同样重要，因为它是呈现它。如果您没有正确呈现，您的最佳设计可以被忽略或抛弃。谈到演讲，你想解释你的工作，就像你展示给四岁。请记住，对于您第一次看到您的设计而言，您完全清楚的可能并不清楚。

　　不要太贴近你的想法

　　知道什么时候提倡你的想法，并学习认识你的团队或客户什么时候不认为他们是“一个”，这一点很细。作为一名设计师，您需要坚信自己所做的一切，但您也应该乐意快速转换您的任何想法并提出其他想法。不要忘记有多个解决方案。

　　按照您的设计进行开发

　　如果您在代理机构内部工作，您可能会知道，在开发新的项目时，发现自己在设计新项目时遇到困难。与一般信念相反，您的项目工作不会在PSD和样式表交付时结束。

　　如果您真的关心您的设计和交互方式的执行情况，请不时检查开发人员的老朋友，并尽可能地帮助他们确保每个小像素都是完美的。

　　显示您正在进行的工作

　　与社区共享您的样式表和进行中的组件

　　作为设计师社区的一部分，我们都非常喜欢看到最终结果，而且还在于正在进行的工作。有时，由于几个原因，项目的最佳部分被遗漏，并在“存档”文件夹中丢失。

　　一旦项目完成，您得到客户/生产者的批准，就可以推广该项目，如果可能的话，可能会对正在进行的工作和设计进行案例研究，而不是最终版本。

【网页设计：网站布局的23个步骤】相关文章：

步骤和整体布局网页设计详细教程介绍11-14