布局可以成就或破坏网站。它们引导眼睛,分配空间并决定性能。让我们看看如何创建高效且实用的布局!
在某种程度上,网页设计布局通常被比作房屋的蓝图或网站的骨架。网页设计师精心策划了布局,不仅为了实现目标,而且以最好的方式展示内容。让我们花点时间来分析一下网页设计布局中的空间与功能。
布局是任何网页设计的重要基石。它是分配空间的框架,确保整个产品的功能和可用性。如果布局不达标,它将使整个设计走上灾难之路。就等于把房子的地基打错了,势必导致房子根本经不起时间的考验。
网页设计布局就是为了达到目标和有效利用空间。你想为重要的东西分配更多的空间,确保展示的内容能够充分发挥其潜力。内容的正确安排可能取决于许多不同的因素,例如内容的性质、将使用的设备、打算使用它的人或项目本身的主要目标。
无论产品或内容的类型如何,下面这件事都是正确的:布局需要利用好空间,创造视觉平衡,并设置一定的元素重要性层次。这是网页设计中至关重要的一步,对最终产品产生巨大影响。
一些网页设计概念在这里发挥了重要作用。内容结构化与产品的信息架构和视觉层次结构密切相关。一方面,信息架构将规定最重要的内容部分并定义不同部分如何相互关联。自此,网页设计师可以开始创建一个维护内容视觉层次结构的布局。
布局确实与视觉层次关系非常密切。这种层次结构很重要,因为它会告诉用户他们需要关注什么,使整个页面易于阅读和理解。如果所有元素的大小和颜色都完全相同,那将让用户感觉非常混乱并且很难找到任何东西。设计师需要使用层次结构来引导眼睛,使关键位成为关注的中心。
这就是为什么网页设计布局的概念不仅仅涉及视觉上的愉悦。了解人眼以及人们在面对内容时的反应是一门真正的科学。你想让他们首先看到重要的部分,然后继续引导他们完成其余的内容。对于用户来说应该很容易,理想情况下他们甚至不会注意到他们所看到的有一个精心规划的结构。
设计师寻求的平衡来自于知道如何分配视觉重量,因此屏幕既要易于阅读,又要避免产生让人不知所措的东西。一些设计师使用诸如房间里的家具或花园里的植物之类的类比——简单地把它们都扔在同一个角落是行不通的。你想把它传播出去,就要创造一种人们可以欣赏的和谐。网页设计布局也是如此。
在尝试定义保持视觉平衡的布局时,设计师应始终考虑一些因素。
首先,我们有对齐。这是指元素在布局中的位置,设计师可以通过将重量级元素分布在不同的角落来创造平衡。网页设计师可以在这里获得真正的创意,并使用有意对齐(或不对齐)的元素与用户交流。例如,以完美对齐方式紧密定位的小元素向用户表明这些元素在本质上是紧密相连的。
其次,有对称性。网页设计师可以使用对称来创建平衡的设计,相同重量的对齐元素会在眼睛上产生放松的效果。在类似的注释中,设计师也可以使用这个规则来创造一些前卫和强大的东西——打破对称。不对称设计可以给他们一种现代感,从而产生更具戏剧性和影响力的设计。当然,诀窍仍然是提供视觉平衡的不对称设计。
一个简单的例子是像上图中的“发送”这样的主要按钮和像“取消”这样的次要按钮之间的比较。最亮的颜色,即吸引眼球的颜色,往往是主要按钮。第二个按钮将具有对比度较小的颜色,以便用户看到它但不要专注于它。
然而,设计师告诉用户页面上真正重要的内容的主要方式之一是比例。作为一般规则,重要的东西以更大的尺寸显示,并在设计中占据更多空间。当我们考虑重要元素与次要元素的比例时尤其如此。
网页设计布局要求设计师缩小每个页面上的主要元素或最重要的信息。明确优先事项至关重要,因为它将决定设计师的重点。一旦设计师确切地知道什么最重要以及页面的最终目标是什么,他们就可以专注于创建一个真正有说服力的网页设计布局。
拥有适量的留白空间还可以提高可读性,因为用户没有很多小细节同时轰炸他们的眼睛。他们可以自由地专注于网页设计师为他们制定的道路。
与视觉和谐与平衡的概念紧密相连,空旷的空间让用户可以专注于内容,而不必担心分心。
在这里一些概念可以发挥作用。首先,所有设计师都知道,你可以在同一设计中包含多少独特元素和样式是有限度的。在某个点之后,它会变得视觉疲劳,并增加使用该产品所需的认知努力。因此,重复只是一般网页设计的一部分。
其次,我们要有品牌标识和设计系统的想法。网页设计布局当然可以参与产品的品牌标识,增加设计的个性。随着设计页面的增长,很难以连贯的方式保持相同的身份。这就是为什么许多设计团队的设计系统不仅包括配色色系,还包括整个布局。
这意味着任何设计团队成员都可以采用这些基本的网页设计布局并使用它们来创建一个页面,以保持产品的视觉识别。这是关于减少设计时间并建立设计师可以依赖的某种重复模式。
这里要明白一个诀窍,即使是卡片式布局也可能带来太多的阅读障碍。您需要在卡片之间留出足够的空白空间,并限制每张卡片所能容纳的文字或视觉效果的数量。这样,用户就可以从容地判定网格内容,而不是被不同颜色的方块轰炸。
有些网站使用分屏布局只是为了提供强大的销售宣传。用户不是在两个选项之间进行选择,而是一方面具有强大的视觉效果,而另一方面具有基于文本的基调。整个布局可以是现代的或经典的,高度适应任何风格或趋势。
使用特色图片的最大好处之一是它可以用来设定基调。作为用户关注的第一件事,设计师可以创建完美的图像来捕捉整个网页的用户关注点。特色图片布局常用于编辑风格的网站,如报纸和博客。
Z字形网站布局也涉及了很多重复的概念。网站通常通过在屏幕两侧交替重复相同的布局来创建之字形图案和文本。这种网站布局设计方法没有什么错——重复也可以很好!
当涉及到网站布局设计时,这通常意味着重要的信息或元素需要放在左边。这使得用户更有可能与他们进行交互,例如在购物项目需要筛选过滤器的情况下。如果我们处理的是一个更注重文本的设计,那么您需要确保文字的重点,这样用户就可以在左侧找到文本的重要部分。
为网站设计创建正确的布局既是艺术也是科学,许多因素对最佳方法有很大影响。有必要考虑更实际的事情,比如业务目标和产品的目标用户。网页设计师都希望以一种有效的方式使用设计空间,使产品发光,并尽可能好的呈现内容。