java 网格布局 组件占多列_网站布局的基础

出色的网站布局是一个难题：通常根本不会注意到它是最好的。也就是说，如果设计师正确完成了自己的工作，则用户将无需查找产品就能找到产品规格，购物车，促销优惠以及最重要的是“购买”按钮。毕竟，花更多的时间弄清楚如何使用网站意味着对实际内容的关注减少。

布局设计为任何出色的网站奠定了基础。OrangeCrush的插图 

网站布局设计是要在美观与实用性之间取得平衡。该网站绝对应该看起来不错，但更重要的是，它应该尽可能高效地向用户提供他们所追求的目标。用户对困难的网页几乎没有耐心，这就是为什么最高的跳出率在 访问网站的前十秒内发生的原因。没错，良好的网站布局不会总是让访问者留下来(尤其是在内容不足的情况下)，但是您当然不希望它成为他们离开的原因。

为确保您获得一个不会吸引访问者反弹的网站，我们将本指南汇总为网站布局设计的基础。我们将介绍一个好的设计应完成的基础知识，有效的网站布局的关键技术以及最常见的网站布局类型。

网站布局的目标
-

听起来很简单，网站布局的唯一目标是支持网站的目标，无论是转化，品牌知名度，娱乐还是其他目标。但是网站的目标是通过内容表达的，而布局设计则描述了如何有效地传递内容。话虽如此，以下是网站布局可以提供的一些常见功能：

信息显示：良好的网站布局可以组织信息，使信息以明显的顺序组合在一起，易于扫描，可以权衡最重要的元素，并可以使用户的工具直观地查找和使用。

网站布局应针对既定目标。由Adam Muflihun设计 。

用户参与度： 良好的网站布局使页面在视觉上更具吸引力，引导用户的眼睛指向兴趣点，并鼓励他们继续浏览网站。

品牌推广：良好的网站布局也可以在品牌塑造中发挥作用，并以与公司品牌一致的方式使用间距，对齐方式和比例。

这些高水平的目标是驱动网站布局设计的因素，但是在我们查看特定的网站布局之前，让我们详细讨论如何实现这些目标。

网站布局设计流程
-

绘制网站布局的过程应该在创建网站的早期 阶段进行，即在您制定了网站策略之后但在进入图形程序创建界面之前的某个时间。

网站布局通过线框可视化，线框是显示内容如何组合在一起的基本骨架图。将线框图与网页设计区分开来很重要，这是为网页创建前端图形和其他视觉效果的整个过程。网站布局设计是网站设计的重要组成部分，它始于线框图。理想情况下，视觉设计应遵循线框布局，以使图形元素具有战略性的定位，而不是一味的审美偏好。

“设计师搜索”页面的准系统线框 

通过这种方式，以下是创建网站布局的步骤：

1、识别所有内容区域。 线框通常用简单的正方形和矩形表示内容，无论是图像还是文本块。务必提前知道您有多少内容，以及每件作品的近似大小(或字数)，以便您可以准确地将元素组合在一起。

2、创建一系列线框和原型。 布局可以像笔和纸一样简单，但是也有许多专用于简化流程的程序(例如 Whimsical)。由于线框并不意味着是精美的艺术品，因此您一次可以生产出几种。即使您爱上了第一个想法，也应该设计更多的线框以扩展您的想象力并为自己提供选择。没有花哨的图形来分散您的注意力，您可以自由地专注于用户的体验，并探索哪种布局对他们而言是最直观的。请务必考虑所有屏幕尺寸-建议您从移动设备的布局开始，然后从那里开始构建。

3、测试，收集反馈并进行迭代。 一旦有了一些选择，请确保您收集了同事的反馈。像Invision 和 Figma 这样的应用程序 允许您创建交互式原型，这样您就可以轻松测试按钮和导航，而无需构建实际的网页。让试用用户在浏览原型时对其屏幕进行记录可以揭示UX的绊脚石。备忘后，返回第二步并进行迭代，直到完美为止。

尽管这些是创建网站布局的基本步骤，但是当您刚入门时，可能很难知道是什么使布局有效或无效。在下一节中，我们将介绍可用于指导设计决策的特定技术。

有效的网站布局的关键技术
-

网站布局设计已经有数十年的历史了，这意味着多年来已经建立了许多设计惯例和原则来指导设计师的手艺。以下是这些技术中最有用的一些：

视觉层次

视觉层次结构是一种样式 设计六个设计元素以增强对比度的方法，以便强调所选内容的优先级。为此，布局的最重要部分是用户需要立即识别的部分，具体取决于页面的目标。这些通常包括标题，价值主张，号召性用语以及诸如导航之类的用户工具。

该网站布局使用简单的黑白方案，比例和字体选择来创建视觉层次结构，以吸引人们注意页面上的不同重要地标。

视觉层次结构可以通过多种方式表现出来，例如 字体选择 (大小，粗细甚至不同的 字体配对)，在页面上对齐重要元素或使用互补色使元素脱颖而出。

阅读方式

阅读模式描述了用户扫描页面的最常见方式，并以有向线(矢量，表示那里的数学家)进行了描述。由于研究表明79％的网站访问者仅浏览过该页面，因此使扫描尽可能简单至关重要。考虑到特定的阅读模式来设计布局是一种有效的方法。

该网站布局将元素排列成微妙的Z字形，以支持Z模式读取。

将阅读模式整合到您的布局中，需要策略性地将元素沿观看者的视线放置。最常见的模式是Z模式(锯齿形矢量；对于图像繁重的布局有用)和F模式(逐行矢量；对文本繁重的布局有用)。

高于或低于折痕

在网页设计中，“折痕”是由于屏幕尺寸的限制而截断网页的行。页面加载时可见的内容被称为“折叠后”，而要求用户向下滚动以显示页面的内容被称为“折叠后”。

该网站布局会在屏幕底部(“折页”)上截断图形，以吸引访问者向下滚动。

在进行网站布局设计时，最重要和/或最具说服力的内容(例如，价值主张和CTA)应安全地放在首屏之上，这样用户就不必去寻找它了。对于大多数屏幕尺寸，此空间 估计为1000 x 600像素。话虽如此，设计人员还可以使用折叠来切断有趣的图形并进行复制，以鼓励用户向下滚动，从而继续与网页互动。

网格系统

网格系统是基于刚性测量和准则的布局。网格由列(用于内容放置的指定空间)和装订线(列之间的空白空间)组成。

尽管网格系统起源于印刷杂志和报纸，但它们在Web设计中无处不在，因为它们面对大量内容时所产生的数学顺序和一致性。同时，设计人员还需要注意网格设计中的单调性，并且必须使用这些约束在网格内创建意外的布置。

空格

空白空间(有时称为负空间)只是设计中没有任何内容的区域，即空白区域。尽管很容易被忽略，并且往往很想填充内容，但是空白可能是网站布局中最重要的资产。

该网站布局以有效的空白吸引眼球。

考虑一下在空白页面上的一行文本比在内容混乱的页面上更能吸引您的眼球的方式。充足的空白空间会突出重点，同时使整个构图的阅读难度降低。与打印页面不同，网页可以放置多长时间没有限制，这为设计人员提供了更大的自由，使他们可以策略性地和慷慨地使用空白。

网站布局的常见类型
-

网站布局很少是从头开始创建的；实际上，通常建议不要这样做。大多数现代网站都基于通用的布局方案，并且在整个互联网上一再重复使用。

尽管在任何设计中一定程度的独创性都很重要，但网站应立即被理解和使用。因此，当用户多年来习惯于某些类型的布局设计时，对于设计师而言，坚持使用它们是有意义的。请记住，布局必须最终可行，并且用户花在学习新布局上的时间越少，他们专用于实际使用该网站的时间就越多。除此之外，以下是一些最常见的网站布局：

单列布局

单列布局是一种内容，其中内容通常按居中对齐顺序排列在一列中。

Hiroshy的单列网站布局设计 

鉴于移动优先设计是一种长期推荐的方法，并且由于大小限制，移动网站通常排列在单个列中，因此许多网页布局都是从这里开始的。此布局对于登陆页面或基于提要的内容(例如社交媒体和博客网站)最有用，因为它减少了页面元素的数量并鼓励了滚动。

两列布局

两列布局有时以分屏形式显示，并排显示内容。

两栏式网站布局 

突出显示两个要素之间的二分法很有用(例如，服装网站上的不同受众，服务之前/之后的风格或定价的双重选择)。在巧妙地支持Z模式读取的同时，还可以平衡带有副本的图形。

多列布局

多列布局通常称为报纸或杂志布局。它可以在同一页面中容纳大量站点内容。

多列网站布局设计 

通常使用网格来维护顺序和层次结构，从而为更重要的元素(例如，正文内容)提供更大的列空间，而不太重要的元素(例如，导航菜单，侧边栏或横幅广告)获得的比例空间则更少。对于公司主页，大量包含图像或视频的网站，在线出版物，用户仪表板和购物网站(即，具有很多内容和类别以将用户定向到的网站)有用。

不对称布局

非对称布局是指元素以不相等的比例和接近度布置的情况-用更简单的术语表示， 而不是对称的。但是，尽管它是基于网格的系统的对立面，但不对称并不意味着混乱

非对称网站布局设计 

平衡在任何设计中都是必不可少的，非对称布局只是以意想不到的方式实现了这一点，例如，将一侧的大型视觉效果与另一侧的许多较小元素配对。通过将某些元素(通过字面大小，颜色或位置)夸大一些，可以增强重点。它还可以支持自定义的阅读模式(与前面提到的常见模式相反)。

能够在设计方法上做到非常规的品牌会发现这种布局风格非常理想，也就是说，从事艺术交易，具有冒险精神的观众或者想要强调创新或颠覆性产品的网站。

网站布局全部布局
-

出色的网站布局设计不仅可以使您的网站更具视觉吸引力，而且还可以使其直观。这是赢得用户第一印象的第一步，鼓励他们坚持不懈，查看您的网站必须提供的所有内容。

尽管网站布局设计的这些基础知识可以为您提供一个起点，但您仍应追求超越并为网站访问者提供卓越的体验。获得最新的网站布局设计的最佳方法是确保您正在与专业设计师合作。