咨询电话:186 7916 6165 咨询电话:186 7916 6165 (微信同号)    在线QQ:181796286
DESIGN SHARING ·
设计分享
关注开优网络 关注前沿
剪裁文字与排版风格
大胆&免费的脚本字体

网站设计大版块底部的7个技巧

发表日期:2018-12-10    文章编辑:南昌开优网络    浏览次数:2699    标签:网页设计

不是所有的网站设计的底部都是一样的,不管是在内容还是在样式上。虽然底部设计可能不是网站设计过程中的主要部分,但是一个在视觉上很棒的底部可以帮助用户找到相关的信息,不管是为了联系你,还是为了更好地与网站进行互动。下面我们将介绍一些技巧,帮助你设计一个实用的,漂亮的底部。

一个大的底部可以帮助你组织信息和作为导航的一个有效的辅助,它可以使用户对内容和信息的定位更加容易。

大版块底部的诀窍在于内容的组织。一旦你知道底部设计应该帮助用户做什么,设计一个你可以引以为傲的底部就更容易了。让我们深入一些页脚设计技巧。

1.设定目标



在你真正设计一个大的网站底部之前,先决定用户应该如何使用它,或者说它存在的目的是什么。一个好的页脚设计不是把所有你不知道该怎么处理的栏目链接和信息整体堆积的地方(尽管太多网站使用这种方式)。

一个好的底部设计有一个明确的目的指向,就像设计的每一个部分一样。

常见底部的使用包括:

· 站点地图以及最主要的页面链接列表;

· 联系方式或其他需要提交的表单信息;

· 带有预览和社交账户链接的社交媒体中心;

· 号召行动短语;

· 显示你的位置的地图(对于企业或餐厅来说会比较重要一些);

· 相关内容(博客)

2.响应性



使用基于列的风格样式,以便你的底部可以轻松地折叠并以响应形式进行排版。随着现阶段底部大小和空间的增加,这一点变得越来越重要。

虽然单栏类型的底部在桌面办公设备上看起来视觉效果不错,但在移动设备上可能会变得一团糟。不要忘记注意这个网站设计元素的响应外观、感觉和互动效果。

除非……你正在采取另一种方法,一个单一元素的超大底部。这可以是一个很符合流行的选择,一个大的交互动作或呼吁行动,就像上面的Hustle Panda案例。在这种情况下,内容区域太大,单个列选项可以很好地折叠转换成不同的大小(只需确保文本和CTAs仍然足够大,可以轻松阅读)。

3.包括用户期望的信息



大多数用户希望在网站底部中找到某些类型的信息。包括用户期望的位置信息可以使设计更容易使用。

不过,并非所有这些元素都需要在每个网站底部中出现,下面是一些用户将通过滚动到页面底部寻找到的常见内容:

· 站点地图或扩展导航

· 联系人信息、地址或地图

· 社交媒体的链接或元素

· 电子邮件或传真信息

· 搜索

· 任务或信息

· 相关推荐

· 新闻,最近的新闻文章或事件列表

还有一些很小的元素可以很容易地放置在底部中。并非所有的用户都在寻找这些元素,但它们通常是网站底部可能出现的内容。

· 版权信息

· 链接条款或隐私政策

· 专业的联系方式或组织信息


4.组织链接



具有大量内容或不同类型信息的网站应考虑使用大版块的底部,并将链接分组为资源类别。通过组织链接,你可以帮助用户找到与他们最相关的站点的一部分。

对于大型项目来说,这是一种非常常见的技术,对用户非常有帮助。网上零售商在底部的信息组织方面做得可能会更好一些。

在上面Home Depot的网站设计中,底部包括多层次的分层信息。第一排包括流行的类别(这是“你找到了你想要的一切吗?”“在线零售”,然后是客户服务的链接组(基于用户需要做什么)、资源、关于公司的信息和对行动的调用。最后,早末尾包括与公司其他品牌的链接、版权信息、条款和协议链接。

5.延续主题和品牌调性



位于底部的微内容不要将他们当成时候考虑的信息(这是一个常见的问题)。

这个内容的主题和风格应该共同反映网页设计的其余部分的基调。包括在项目的其余部分中使用的相同的颜色方案、设计元素和独特的主题。用户不必在底部上猜测或思考网络上的位置。

以上的Emma案例中,有一个脸部动作的呼吁,同意了和其他网站设计一样的友好态度:“向你的新营销团队问好。”基调很轻,元素之间有足够的空间(视觉上强调光的感觉)和快乐。吸引用户,让公司感觉像你认识的人。、

6、空间感



小文本和紧凑的空间可能是所有设计最值得注意的问题了。确保元素有足够的空间,这样信息就很容易被扫描和点击。

适用于空间、可读性和浏览的原则也适用于底部(底部越大,这些元素就越重要)。

记住,如果它的作用并不是很好的话,那就不如不放(你可以使用分析信息和点击路径了解什么工作以及什么不工作。底部中的哪些链接实际上被点击了?)。

7.保持距离



为了充分使用超大版块的底部设计,确保它可以从上面的内容中脱颖而出。虽然底部看起来应该是整个设计的一部分,但它也应该包含足够的对比度,以便用户理解这是页面的底部,其中键入了(和预期的)信息。

帮助建立这种对比的一种常见技巧是将页脚放在一个容器元素中,例如一个有色的区块中——这是与背景的其他颜色不同的颜色(例如,如果网站设计的背景大多是浅的,那么页脚可能包含在黑暗背景中)。

这个额外的对比是一个视觉线索,这一部分的设计是不同的。它使用户暂停并考虑屏幕上的信息。对比度的变化可以是一个强大的视觉线索,在设计中确立位置感,以及可用性工具。

总结

但是页脚是什么时候太大?

在研究这篇文章时,我们参考了很多很棒的底部设计。当我开始沿着这个思路规划的时候,意外的发现更多的设计师正在创造比我想象中更大的(甚至是超大)底部。但有一种类型的底部是我觉得并不友好的——滚动底部。

虽然页脚是一个组织大量信息的好地方,但作为一个用户,我想一目了然。所以在设计你的设计时也要记住这一点。