设计网站布局并不难,特别是如果你知道应避免的常见错误。在本文中,我们将逐步介绍实现完美网站布局所需的步骤。我们将介绍每个新网站建设者在开始新项目之前应了解和要做的事情,以及应注意避免的事情。

这些步骤不仅涵盖设计方面,还涵盖常规工作流程提示。在此页面上,我们探索了入门方法以及设计工作流程中的关键步骤,你将找到有关进行网站布局设计的一般建议,以及完成项目的提示。遵循此建议,你很快就会创建更加专业的网站布局。

为什么需要良好的网站布局?

访问者对你的网站的第一印象至关重要,尤其是在布局和设计方面。

据说94%的第一印象是设计驱动的。不仅如此,访问者只需不到半秒就能对你的网站发表意见。另一项研究表明,将近一半的网络访问者将仅基于简单设计来决定你的网站是否值得他们花时间。

现在,颜色和图形无疑有助于网站的设计,但是对于用户体验和转换而言,布局才是最重要的。

网站布局对用户体验和转化的影响

当你专注于用户体验和版式转换时,实质上就是在为访问者提供他们想要的东西。如果他们遇到了问题,而且你的网站可以解决他们的问题,这就是一次成功的转化。反过来,通过解决他们的问题,你的网站访问者将更有可能通过成为付费客户或进行其他转化来回报你。

开始

确定内容

在开始工作之前,你需要了解你要设计的内容。除了网站的描述之外,你还需要了解对网站的期望。以新闻网站为例。目标是什么?是要获得尽可能多的广告展示次数,还是要提供最佳的阅读体验?这些目标将如何衡量?

好的重新设计不一定是最花哨的设计,而是随着时间的推移而提高性能的设计。在开始设计之前与客户交谈是定义所有这些的关键。你需要了解他们在需求之外的关注点和目标。

尽早与客户共享设计

在提出交互式概念或设计“外观”时,你需要确保你和客户都尽快进入同一页面。与客户共享概念之前,请避免在概念上花费过多时间。

最初的概念获得批准后,你可以稍微放松一下并开始生产。但是,在提出第一个概念之后,如果客户不喜欢它,你应该收集足够的反馈意见,以提出第二个更合适的概念。

设计工作流程

草绘一个大致框架

框架是围绕内容的UI,可帮助用户执行操作并浏览内容。它包括导航和组件,如侧栏和底部栏。如果你从这种角度进行设计,那么在设计主页以外的部分时,你将清楚地了解布局需求。

网站基本的布局结构
网站基本的布局结构

选择网站字体

建议不要在网站中使用两种以上的不同字体,尽管这实际上取决于其性质。选择一种易于阅读的字体,以显示大块文字,并且标题和号召性用语更加有趣。不要害怕使用大字体,并且在使用排版时要富有创意和一致。

选择网站的字体
选择网站的字体

选择网站主题颜色

在选择一组字体的过程中,你应该开始研究在界面,背景和文本中将使用什么颜色。对于一般的UI,我建议使用一组有限的颜色和色调。

重要的是,根据每个元素的功能,在网站布局中一致地应用这些元素。考虑一下Facebook,Twitter,Quora和Vimeo等网站的布局。除了UI之外,插图或图形细节不应有任何颜色限制,只要它们不干扰组件的功能即可。

选择网站主题颜色
选择网站主题颜色

简化布局

网站的结构越简单,用户越容易导航。每个部分都需要讲一个故事。它需要为用户提供理由和最终结果。布局应有助于内容突出该故事中最重要的部分。

考虑一下你可以想到的最简单的布局,并开始添加必要的组件。最后,你会惊讶于保持简单的难度。

优化网站组件

对于网站组件,就好像可以将其呈现给设计竞赛一样。如果你注意每个组成部分,则整体将大于其各个部分的总和。我必须承认这不是我的建议。我在以前的机构中听到过,但我对这一说法如此明确和真实感到震惊。

每个组件都需要设计得好像可以作为有史以来最好的组件独立存在。有时,设计师将网站的某些部分留到待办事项列表中的最后一个,最终并没有给予他们太多尊重。

网站设计交互体验

在设计交互体验时,动作至关重要。无法再单独判断设计或将其视为静态组件。每个组件均由其与系统的关系定义,并且该关系需要运动才能正确传达。运动可以说明对布局中内容或交互状态的动态影响。为了第二个目的,我建议你将你的设计进一步进行原型设计。

网站设计交互体验
网站设计交互体验

使用响应式设计

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

我们需要构建一个站点,该站点不仅可以在理想情况下使用,而且可以在最坏情况下使用。例如,用户可能使用的是非常小的屏幕,并且在网站上几乎没有任何内容时检查该网站,因此它看上去很破损。

最佳方法就是使用响应式设计,来保证每一位访问者的访问体验。

避免像素模糊

为避免像素模糊,请尝试在笔画和背景或背景颜色之间设置正确的对比度。除了美学上的考虑之外,还必须避免一些常见的事情才能创建干净正确的作品。在尝试锐化工作时,应该注意的一些事情包括渐变条带,模糊的边缘,字体渲染选项(某些字体,取决于它们的大小,在特定的渲染模式下最好查看)以及与笔画融合不良的笔触的背景。