网页交互设计页面布局对比分析2018-04-07
页面布局大致可以分为web、软件、手机三类，其中web和软件比较相似，不做区分。软件界面的布局取决于功能，布局复杂。因为定义类别的标准和方式不同，所以页面布局也有很多种类型。先总结常见、常用的布局方法，用其他方式补充。
页面布局的定义
页面布局是指在设计一个页面的过程中，通过合理、有效、统一的规则对页面的所有元素进行排版，产生良好的传播信息的视觉效果。一般来说，页面布局设计会基于以下原则:
(1)对比:是为了防止页面元素过于单一或者没有差异。如果空间、大小、形状、字体、线条、颜色等设计元素都不一样，那么就要大有作为，让页面引人注目。
(2)重复:颜色、形状、线宽、字体、大小、图片等等都可以重复。它不仅可以增加秩序，还可以加强页面的统一性。
(3)对齐:在页面上，不同的元素不能孤立存在，而要构造一种特殊的视觉关联效果，从外观上给用户更清爽、巧妙、感性的体验。
(4)亲密度:页面上的元素不应该孤立存在，而是彼此亲密无间，形成一个视觉单元。这样可以帮助信息结构化，减少信息组织的混乱。
网页布局类型
网页布局基本类型有12骨架式、中文字体、边角式、框架式、全页式、分割式、中轴式、曲线式、倾斜式、对称式、焦点式、自由式等。
1.“国”字型布局
也可以叫“同”字型，是一些大型网站喜欢的类型，就是上面是网站的标题和横幅广告，后面是网站的主要内容，分为左右两小块，中间是主体部分，下面是网站的一些基本信息、联系方式和版权声明。这种结构几乎是我们在网上看到的最常见的结构类型。
口字型、同字型、背字型都可以属于这一类，这是一些大型网站最喜欢的类型，即最上面是网站的标题、导航、横幅广告，其次是网站的主要内容，左右是一些小块的内容，中间是主要部分，左右并列，最下面是网站的一些基本信息、联系方式、版权声明。这种布局的优点是充分利用布局，信息量大。缺点是页面拥挤，不够灵活。这种结构几乎是我们在网上看到的最常见的一种，在门户网站的设计中也经常用到。
2.角型匡布局或T型布局可归入这一类。在匡提科布局中，常见的类型有顶部有标题和导航的类型，左边有显示图片顶部有标题和广告的类型，右边有导航链接的类型。这种格式在韩国网站中很常见。t型布局(T-layout)是指页面上方是横向的网站logo和广告栏，左下方是主菜单，右侧显示内容的布局。因为菜单的背景颜色较暗，整体效果类似英文字母T，所以叫T型布局。这种布局的好处是页面结构清晰，优先级明确，对于初学者来说是最简单的布局方式。缺点是规则死板。如果不注意细节和色彩，很容易让人觉得乏味。
2.1“旷”字型布局
这种结构实际上只是形式上与前一种不同。它删除了“郭”形布局的最右边部分，为主要内容区域释放了更多空间。这个布局上面有标题和广告横幅，左边是一个窄栏的链接，右边是非常宽的文字，下面是一些网站的辅助信息。
2.2.T型布局
“T”型结构布局形式。所谓“T”型结构，是指页面顶部有横向的网站logo+广告栏，左下方有主菜单，右边显示内容的布局。整体效果类似英文字母“T”，故称“T形布局”。这是网页设计中最广泛使用的布局方法。这种布局的好处是页面结构清晰，优先级明确，对于初学者来说是最简单的布局方式。缺点是规则死板。如果不注意细节和色彩，很容易让人“看起来很无趣”。
3.“三”字型布局
它是一种简洁明快的网页布局，在国外应用广泛，在国内很少见。这种布局的特点是页面被两个横向色块分成三个部分，大部分色块都填充了广告条、更新和版权提示。
4.“川”字型布局
整个页面在垂直方向上分为三栏，网站内容按照栏目分布在这三栏中，最大限度地突出了首页的索引功能。
5.封面布局(整页/海报/POP)
POP布局就属于这一类。意思是页面布局就像一张海报，以一张美丽的图片作为页面的设计中心，页面上布满了图片。主要以图像为诉求点，在图像上放少量文字。完整版给人一种舒展大方的感觉，视觉传达效果直观强烈。缺点是慢。随着网络带宽的不断增加，这种格式在商业网站设计中更为常见，尤其是在网络广告中。
这种类型基本上出现在一些网站的首页，大多是精致的平面设计结合一些小动画，放几个简单的链接或者只是一个“进入”链接甚至是直接在首页的图片上做链接，没有任何提示。这种类型大多出现在企业网站和个人主页上。如果处理的好，会给人带来赏心悦目的感觉。
6.Flash布局
这种布局是指整个网页是Flash动画，本身就是动态的，画面一般华丽有趣，是一种比较新潮的布局方式。这种布局其实和封面结构差不多，不同的是因为Flash的强大功能，页面上表达的信息更加丰富。如果视觉和听觉效果处理得当，会是一个非常吸引人的布局。
7.标题文本布局
标题文字布局是指页面内容以文字为主。这类页面的顶部往往是标题或者类似的东西，底部是正文，比如一些文章页面或者注册页面。
8.框架布局，
采用框架布局结构，有常见的左右框架、上下框架和综合框架。由于兼容性和美观性的原因，这种布局目前还没有被专业设计师广泛使用，但在一些大型论坛上还是比较流行的，一些企业网站也有应用。
框架布局常用于功能性网站，如邮箱、论坛、博客等。1)左右框架类型这是一个两页框架结构。一般左侧是导航链接，有时顶部会有一个小标题或logo，右侧是文字。我们见过的大论坛大多都是这种结构，一些企业网站也喜欢采用。这种类型的结构非常清楚和明显。
2)上下框架和左右框架类似，唯一不同的是它是一个分为两页的框架。
3)综合框架式这是上述两种结构的组合，是一种相对复杂的下部框架结构，比较常见，类似于“转角式”结构，但采用框架结构。常见的邮箱网站布局都是综合框架式。
9.顶部大图片横幅+简单网格
无论屏幕有多大，这种布局都能显示足够的内容供用户浏览和探索。虽然这种布局随着屏幕和设备的不同而不同，有些设计师倾向于将其设计为固定宽度或横跨整个页面，但整体模式是相似的。
导航栏，顶部大图，图片上叠加文字标题，2 ~ 4列，承载不同类型的信息，有的会有图标、主要内容区、页脚。
这种版式设计干净清爽，视觉表现力强，经常使用响应式设计，断点也控制得很好。还有很多插件或者应用帮助你实现顶部的大尺度轮播或者横幅。
原理:在这个布局中，每个元素都有自己的作用，整个过程是有逻辑的。顶部的大图足以营造氛围，给用户特定的体验，下面的子级元素可以很好的支撑。
相关趋势:越来越多的此类网页开始使用彩色插图图标，扁平化的设计与这种布局页面有着天然的契合。
10.单页设计，单列布局
单页设计是近几年非常流行的，非常适合呈现极简的内容或者着重呈现一个主题。当网站主题集中，内容相对固定时，不需要复杂的布局来呈现，单页单栏的布局足以应付一切。
导航，主要内容区域，文本+图片为主，页脚
采用这种布局模式时，对空间的控制很重要，考验设计师设计留白和布局平衡的能力。元素之间的密度关系需要设计师反复推敲。如果空间控制不合理，会给用户一种混乱感，太紧会产生尴尬感。
原理:单页设计适合小型网站或小型项目的展示。可以用来制作简单的介绍页面，让简单的内容不那么单调，加强内容的形式感和厚重感。对于内容简单的博客网站，单页设计也是不错的选择。
相关趋势:动态设计和视差滚动应该是与单页设计结合最紧密的，可以让单页设计更加生动有趣，冲淡单调的设计，赋予页面更强的生命力。
11，自定义网格
方形元素被用来组织和安排他的作品。这是一个简单的方法来组织任何数量的内容，并保持事情简单。
到处都是方块，移动鼠标还有有趣的动画效果。然而，除了组织内容，你会发现盒子元素也成为了设计风格的一部分。它是这种风格的关键和决定性因素。
那些整齐划分的页面布局从未过时。无论是细分的网页区域，还是很大的页面块，大部分都需要一个干净整洁的网格来支撑。在此基础上，逐步将内容放置在不同的区块中，并精心组织和展示。
在设计师的作品集页面，你可以找到各种定制的网格布局。自定义网格显示内容的好处是可以同时呈现大量的可视化内容，看起来足够丰富而不掉队。下面的图库效果看起来相当震撼。
用颜色填充网格，也可以用来承载文本内容。不同的区块不一定要用线来划分，选项也很多，但是网格大小和间距一定要控制好。如果细节控制不好，可能会破坏整个设计的平衡感。
原理:网格的优势在于组织。对于用户来说，是有规律可循的。一个漂亮的网格系统可以让用户更快的找到自己需要的东西，视觉上更加和谐自然。
相关动态:网格很容易被视为一个像卡片一样的元素，可以添加翻转等各种动态效果，展现更多的信息和视觉层次。
12.经典F布局
传统布局依靠视觉线索来“控制”用户的视觉路径。相比之下，F型的布局更加自然友好。F型布局符合用户的浏览习惯，更加自然。符合“从上到下，从左到右”的阅读模式。
研究表明，用户在浏览网页时习惯于沿着F型阅读轨迹浏览信息，即用户喜欢从左向右阅读，然后下移，继续从左向右阅读。
对应于这种F-reading模式的页面布局就是F-layout。最关键的信息显示在左边，从上到下尽量保持一行。
页眉和导航左边的栏比较宽，显示主要内容。右边的栏通常是侧边栏，显示相关链接和其他内容。页脚。
原理:人的行为很容易受到习惯的影响，研究也证实了人的思维和行为确实是模式化的。从左到右，从上到下，大多数人都习惯了这种行为模式。f形布局方式适用性好，方便用户理解和交互。
相关趋势:F布局中有很多侧边游戏，有些设计师会将导航与之结合，或者在页面顶部添加一个大横幅。
13，极简分层
极简设计一直很受欢迎，它的流行也不是没有原因的。开放的空间让用户感觉更放松，也让里面展示的内容更容易被聚焦。如果在极度简化的页面上增加几个平行的内容层，信息会更有层次，极简页面会有细节。
这样的设计并不复杂，但是让页面更加有趣，可以适应更多不同类型的项目。这也解释了为什么用户如此喜欢苹果官网这样的设计。
原理:在一个非常简化的页面上增加几个简单的图层，给页面一个视觉焦点，特别是当设计者想要引导用户关注一个关键内容的时候。这种页面布局很容易实现。
相关趋势:这类页面中经常使用微妙的阴影和渐变来加强元素之间的层次感。这些设计手法虽然曾经“过时”，但现在卷土重来，材料设计等设计风格都是他们负责的。
14.z模式
z模式是最简单也是最常见的模式，广泛应用于任何基于文本的网页。阅读器先水平扫描顶部，再回到左边，然后水平扫描整个底部。
理解通用的Z模式很重要，因为它解决了网站的核心需求:层级结构、品牌化和用户行为调用。它的美丽在于它的简单和一个“用户呼叫”网站的理想布局。当然，对于更复杂的网站或者内容很多的网站来说，Z- mode可能太简单了。
考虑Z模式是否适合你的网站。以下是一些更好地优化该模型的最佳实践:
背景:保持背景在它应该在的地方:隐藏在内容下面。不要让它分散读者的注意力。
点1:作为第一点，把Logo放在固定的位置。
第二点:虽然主用户调用应该放在后面，但这是次用户调用强调或突出导航栏的好地方(漂亮的图形或图像滑块将有助于分割页面的顶部和底部，并鼓励读者以Z模式预期的方式浏览)。
第三点:选择最佳位置将读者的注意力吸引到其他链接上，或者将读者的注意力吸引到网站的最终目的:第四点。
第4点——作为“终点”,这是拨打主要用户电话的最佳位置。
您需要做的第一件事是按照重要性对页面上的元素进行排序。然后，从结果中选择合适的“热点”将非常简单。
此外，Z模式可以重复，并扩展到整个页面。让我们来看看Evernote如何将他们的“用户呼叫”和卖点以之字形排列。
DropBox不使用任何背景图片，只是简单的实现了这种“曲折”的模式。相反，更多的功能设计被内置到布局中，比如用户呼吁“多浏览”，这有助于用户在浏览整个网页时链接到每一节的细节。这也有助于通知读者点击下一个相关页面，而不必先通读页面的所有内容。
15.分割屏幕
在这个类别中，我们选择的网站使用垂直分隔线来划分屏幕。这其中的原因可能有很多，通过研究大量这样的案例，我发现了两个要点。
原因之一是，有时在一个设计中有两个同样重要的主要元素。网页设计通常的方法是根据内容的重要性进行排序。那么重要性就会体现在设计的层次和结构上。但是如果你想推广两件事呢？这样，你就可以突出这两者，让用户快速选择。
第二个原因是，有时你必须表现出一个重要的二元性。以八四网站为例。他们在这里想表达的是，他们的核心竞争力来自于扎根数字领域和多才多艺的员工。这两点成就了他们。通过屏幕分割来展示这一点是一种令人愉快的方式。
16.去接口
网页设计中的一个主要元素是容器元素:盒子、边框、形状和各种各样的容器，用来将内容从页面中分离出来。想象一个老式的页眉，其中的元素只是被容纳并与内容分开。如今的普遍趋势是去除所有这些额外的界面元素。
这是一种极简主义的方法，但它走得更远，带来了一些有趣的变化。
17.基于模块或网格
接下来，这些排版方法是基于模块化或网格状的结构。在这些设计中，每个模块都试图根据屏幕大小进行缩放。事实上，这并不是一种新方法，但响应式网页设计使它更有用。它意味着一种自适应的布局模式，可以由各种模块组件(如构建块)创建。
这个案例更为激进。当然，它还包括模块化的方式，以便他们可以根据需要轻松地增加或减少内容。但这里还有一个重要的设计元素在起作用，这在之前的案例中没有发现。模块的大小会发生变化，以反映它们在所有级别中的重要性和位置。这种模块化布局有一个风险，就是把所有的东西都做成一样的大小，意味着什么都不能强调。相反，这个案例清楚地突出了主要因素。
18.在一个屏幕内
最后，还有一些网站采用这种方式，将设计完整地展示在一个屏幕中。这是响应式设计的一个分支，因为它会适应屏幕大小。但是在这种优秀的情况下，整个设计的适配完全匹配屏幕，没有滚动条产生。没有滚动意味着内容必须非常集中，应该建立一个清晰的内容层次结构。我发现这些网站的重点和清晰度令人耳目一新。