细心及资深的网页设计师应该都知道，但凡被大家公认为比较好的经典网站设计作品都带有一点“组件化”的味道。而作为视觉设计师对“组件化”的更多关注，不是前端框架的重复使用而高效，而是作为品牌应该具有的视觉元素高度统一性。

成都创新互联公司是一家专业提供茂南企业网站建设,专注与网站建设、成都网站建设、H5网站设计、小程序制作等业务。10年已为茂南众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

一个功能及视觉均健全且用户使用体验友好的网站或者互联网产品，理应在网站的各种细节组件上做到高度统一，今天我们谈的各种细节，有点组件化的味道。就是我们每做一个网站设计时必须重点考虑到的一些标配元素——Web导航栏设计、底栏设计、表单设计、FAB(浮动操作按钮)等等。

今天，我们深入梳理一下互联网上曾出现过的各种Web导航栏设计（nav）、底栏设计(footer)、表单设计(form)、主题布局(body)、形象海报(banner)等等模式，以便于大家在工作中，能够高效地使用。

web导航设计模式——nav

用户在使用你的网站或web应用时，需要清楚自己应当何去何从。如果你的应用无法提供方便的导航，用户将快速流失。网站主导航通常位于网站最上面，通常网站的主导航主要包括网站的首页和产品栏目及各个单页面的导入链接。方便用户以最快，最简单的到达不同的网页！同时也方便用户一目了然的发现网站的主要信息，而不用费力的寻找！

从用户体验度的角度来看：一般情况下，导航上的栏目或单页面，是这个网站中最主要的、必不可少的内容，也是站长希望除了首页外，最希望别人点击进入的一些页面或想要别人了解的一些信息。

从搜索引擎优化的角度来看，网站的主导航位于优化网站中F区的最重要的部位，是搜索引擎蜘蛛检索最看重、权重较高的一个位置，同时在网站的主导航上还布局了产品新闻栏目及各个单页面的导入链接(各个二级栏目间的回流设置)，是设置整个网站回流的最核心的部分。

所以不管是从用户体验度上考虑还是从搜索引擎优化的角度考虑,网站的主导航都是一个网站中必不可缺少的一部分。所以说，为web应用设计出有效的导航功能具有至关重要的意义。

下面就梳理了，web设计中常用的导航设计模式，基本上涵盖了所有能见到的情况，当然采用怎样的导航模式，还需要根据具体的需求来定。我想下面的这些导航设计模式，会给大家工作带来不少灵感哦

web底栏设计模式——footer

一般情况下，footer会包含网站创作者的名称和联系方式，以及版权所属、工商局备案信息，以方便浏览者快速找到需要的内容。

随着互联网网站设计用途和需求的变化，现在的网站，首页大多数是多屏信息展示，当用户访问到底部，再想要方便用户跳转到别的页面，底部会适当的增加辅助性的菜单导航。

底栏设计增加菜单导航，一方面有利于提高首页，以及其他页导航关键词密度，更多的链接指向内容页面，有利于提高内容页面的权重，有利于搜索引擎优化;另一方面，有利于用户体验，让用户随时都能找到重要导航的链接。

然而，网页的footer设计，是很容易被大家忽略的部分，下面梳理了我们常见的底栏设计模式，希望大家能给每一个作品设计出一个漂亮的“结尾”。

web表单设计模式--form

表单是99.999%的网页、APP都要涉及到的部分，最常见的网页表单有注册、登录、商品及信息搜索、意见反馈等等，所以表单设计重要性也不容忽视，至关重要哦，下面梳理的同样也是常见的表单设计模式，不一定非常全面，不过也是涵盖大部分情况哦~~

Floating Action Button (FAB)浮动操作按钮

Floating Action Button (FAB)（FAB）是浮动在用户界面上方的图标。它的形状，位置和颜色使它与界面的其余部分明显区分开来。在2014年Google推出了Material Design之后，FAB作为一个用户界面元素，被广泛应用于网站设计和移动设计中。虽然FAB可能被视为一个微小的，无关紧要的UI组件，但其效果是至关重要的。如能精心策划和设计，将能大大提升用户体验。

上期已分享过，详情请点击进入

当前名称：网站设计组件化时代设计师必须要深入研究的一些例如导航栏、底栏、表单等重要组件
本文URL：http://scyanting.com/article/sgppgh.html