设计趋势！说说知名网站的首屏设计趋势

当一个用户登录你的网站，他第一件事情一定会注意到你的网站的头部信息。无论他是一个小的导航栏，或者是一个大的图片全屏轮显，网站头部的设计无疑是全站布局中非常重要的一个环节。大多数网站头部的设计倾向于给访问者留下非常深刻的印象并且最好能够更帮助他更好的推广这个网站的品牌。一个好的网页首屏设计可以给每一位访问者留下一个长久的不可磨灭的印象。

在这篇文章里，我想分享几个非常有用的小技巧来帮助网页设计师们实现一个高大上的头部标题设计。最好的方法就是把侧重点集中到网站的内容上，并且着重强调重要的部分，使这部分内容在整个头部设计里面有独具特色的凸现出来。另一方面还要注意，设计的时候还要兼顾扩大品牌的影响力。

超大背景图片Hero Images

近几年在首屏设计中使用一个大的全屏图片变得越来越司空见惯，快速发展的互联网使资源的下载前所未有的快速。现在背景图包含一个19201080的图片让他适应任何屏幕的尺寸是相当简单的。

hero image是一个网页设计术语是一个特定类型的网页横幅。hero image是一个大型横幅的图形,突出放在一个web页面,的前面和中心的位置。

hero image往往是访客在网站上遇到的第一视觉。它的目的是概述网站的最重要的内容，通常包含图像和文本,可以静态也可以是动态的。

hero image与banner相比更典型，他经常被放置在第一屏的重要位置。经常是用一些有震撼力的摄影图片，被用于产品的促销、公司或者个人的推广。品牌一直是它的一个决定性的因素，但是hero images的并不总是关于品牌，他们的目的也是为了拉近访问者，使他们跟网站的关系更密切。

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cs2fHY2gJp4pvf752If4YCQCW46sqPRavW3BxNSLiaOKEnSmGAickPLwg/0" alt="" />

例如在WooCommerce的主页上我们就可以看，hero image不一定非要和WooCommerce自己有关。这张图像为电子商务商店营造出一个预设的情节，并提出一个解决方案的来出售他们的产品或服务。理想的情况下这个图片将吸引企业者们的注意并提出他们想要的解决方案。例如让WooCommerce为他们经营线上的商店。

我真的很喜欢使用hero images去完成相关的内容设计。他能够使突出网站的用途，并且使图片看起来更有震撼力。明显的当下最重要的问题就是找一张非常适合这个项目的照片，如果你是一个摄影师这就简单多了，但是对于像我们这些不会拍照的渣渣就可以考虑用购买一些买断式的图片解决了（盗图什么的真真的不好，现在这种图片都不是很贵，从我做起支持正版哈~）~例如Unsplash 海洛创意之类的。

清晰的导航链接 Legible Navigation links

想要首屏设计显眼，最重要的元素莫过于导航了。除非你设计一个单页的布局，那么很可能你需要一些链接去控制这个网站而非导航，并且许多单页的设计应用了滚动的链接设计。

对于用户来说一个简单易读的导航是非常重要的。人们希望能够快速的识别页面并作出选择。链接可以加粗，加线框、下划线，或者链接和背景用对比色等等，这一切都是为了让他们更容易阅读。

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87c9XfEmo5E3n4b5ZNiamzevdReicPj5DBS3FBQlqLCXAY7W9fdohbj5qAw/0" alt="" />

举一个设计工作室1minus1的例子，他们创作的一个黑白对比的配色方案。并且这个导航链接的放了一小段注释文字。这可能对用户体验没什么帮助，但是他增强了总体设计的感觉。

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87c5U0CYFR5Xr6JUREkqRib8ugp2fRqZJ2viae9DQNQ2u1Du39JqpPHibfAQ/0" alt="" />

Kin HR是另一个网站，他使用了一种不同的导航形式。链接加粗并加了线框的效果被放在页面的右上角。他们用了一个灰色的字体在鼠标放上去的时候加了一个变白的效果，这样的设计让导航充满活力（这个效果在css里只需要在标标标记上加上hover 定义鼠标滑动的后字体的颜色就行~这属于网页制作前端的知识哈~咱只要知道就行~）。另一方面当前页面的链接有下划线的效果来表示位置，并没有只依赖内容。易读性是链接设计最快也是最简单的方式。当你在设计自己的导航菜单时一定要记住这些。

引人注目的品牌设计Noticeable Branding

品牌对于公司的重要性不言而喻，不管哪一个公司他们都需要一个吸引人眼球的品牌设计。访问者们记住的事物一定是一些引人注目的，他会从一大堆熟悉的logos里脱颖而出。

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cA8qpj4WP8DoJeANG3od6Vedic8PQAAxnye2BFiceDYU3uFs2zXdDgbLw/0" alt="" />

Theme Trust的标志是让人难忘的，它大到你的目光立刻回聚焦到上面。他同样是一个既简单又优秀的标志案例，没有过多的修饰。标志应用了“T”型盾牌图形，并且他们的图标还添加一些多重空间的设计，例如文字的粗细对比。寻找新的方法来让网站品牌在首屏更突出。永远不要小看一个优秀logo的力量。

固定导航栏Fixed Scrolling Menus

随着web浏览器不断地更新换代，一些特殊效果也变得更加普遍多见。固定导航栏就是这样的一个效果，他被一些有名的现代的开发人员们发现，他是一个导航在网页的任何地方都可以被找到的最快的解决方案。这么便利的发现都归功于css3和jquery的快速发展。（css3和jquery是网页制作方面的知识~）

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cnmwCOfqHlOxCgjuj6oTTyMHzrVEYoN8o0dAibMPSQml8ghbMvORDRlg/0" alt="" />

Ausdom这个网站有一个非常有趣的固定导航栏。当你第一次登陆到页面时，所有的导航链接好像都是在首页hero image的顶部右侧里面的，导航链接是一个白色的字体镶嵌在比较暗背景上。

当你开始滚动鼠标，导航条就将会弹出来，并跟着你移动到你鼠标滚动任的页面。他用的一个白色的背景颜色，所以logo和文本链接也跟着变成了一个新的颜色。这是一个相当酷的设计风格，他使页面保持完整性，让导航在任何的位置都能被轻松的找到。

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cnV7oPmHglmq4W53jHmjbPF8IOJUbxyUzIbQcYRsHyCL2OJ4eCdMmCQ/0" alt="" />

另外一种混合式的导航，你可以尝试添加自己的设计风格，让固定导航栏更具有创意。例如Drew Wilson网站在他的顶部应用了滚动导航条，并且在导航条上上应用了多云模糊的效果。导航上链接不多，因为网站只有一个页面，但是他仍然是一个创造性的设计尝试，在最快的时间里吸引了你的眼球。

灵感总结~

掌握上面的这些设计技巧，让你更快的做出一个优秀的首屏设计。这些首屏主要是靠内容、标志或者导航的设计来吸引眼球。因为用户倾向于有趣的这些标题页面元素完美展示如何在初次访问者点燃的好奇心。容易被那些有趣的标题元素和完美的页面展示吸引，最完美的首屏设计要在在初次就点燃访问者的好奇心。

Daniel Filler

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87ctkicmAv5syfzHbNMNibuc0ooegVZJZaxjlbl7KnO6miab9aE6hnzskp6Q/0" alt="" />

Grain & Mortar

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cOSI26EK9re3qLXAb3f2icZUaJnWk6JXvpQ8IDLiaQgu4R70JxCwBEI8Q/0" alt="" />

Playground Inc.

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cb1EJ43MOkaDeY1ghYrNicr9gialShbsnsad4rXqhCUJPTD6Z0vxlCp5Q/0" alt="" />

Sellfy

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cSYDyaF0rXYIWOTht9JeQGoicnptJS2mmC5pn61voIH3h3Dic8ich55E1g/0" alt="" />

Kiawah Island

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cgKxZfwAE1uDv8TEYyJsWcku8TBCX4nC7wNjI4WVZqKsR4onqaHXSEQ/0" alt="" />

Localfu

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87coKcmEkQdAT8IassBA1T0ozrtqy7fRDAbGW3DWLo6ONjCWKQEGZRUJA/0" alt="" />

Statsiv

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cCiaiah0woTB2SCFUic5jDJGxPRUXDonFHSPhVibfFYlwL7nA36xhs4aeQQ/0" alt="" />

n+1

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cBBlc8RzqwhibGzMzGLewB74RdOq646NNARkl6PrYg6Qtj8xgDfQThGA/0" alt="" />

Seed Spot

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cpx7IiaWLUNo8FSx8usSJtcpvgA3oy9qOSj0kBWEibzibtuiahkFkB4pBdQ/0" alt="" />

LeShopo

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cmUQ6v2mic2SsdmiaC4JLqib7YyEeNXTuKkaQuLic3N0rEwKJ8P1hGS0KRg/0" alt="" />

Picsell

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87ctCNCibvCQO1h6xAa0BCfO2HOclWiaywRKfoSCvk2meHrx38oIPMZqb9Q/0" alt="" />

Góralski Domek

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cmGIvbxlm4mkvNCxcs0ZlkbImtDC5icRg0FHjV8wXqhWt0dNwZH19VmQ/0" alt="" />

Clouder

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87c6fDDskve1bUxdwFsrP8MVkYZ27oa6wkVHPLHdSINqlpr32oY0LzdWA/0" alt="" />

Circle

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87c5s1eaA2ktYkGqic0LtcltficTjLaeX1tAhxIpuGOcm0rNuiaBUwoGtAow/0" alt="" />

Paleo Granola Sola

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cSIz9RENsOonIyhE0ibM3JHe0SotADPxAU0bHP0ibb1icYE0aHpf4CNeibg/0" alt="" />

Cuppa

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cwuCzgjl0VhxpMQIQj4djjmY55Do2lWSUmsAfUGOZ7UZVfiblHRYz1Uw/0" alt="" />

Photoshop Etiquette

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cicOcc2cbs42ibX0yDyIlfIqHqDfLzca6QUkSW4On3Ogaa9r6fibzbkqxw/0" alt="" />

CUPS Annual Report

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87cZibOu1UqzUJyXpAXrKAFFtKLEpCpVgvRdSawOicgcfKtjQfUYKJdic1kQ/0" alt="" />

Pastini Pastaria

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87ca7TY6vwPtP5xY17w1HhcsmrmFCTBLRNGqTdcz2rZUMs0cyCJCnibeGA/0" alt="" />

metaverse Mod Squad

ta-w="" data-ratio="0.6067193675889329" data-src="http://mmbiz.qpic.cn/mmbiz/YQCia06RucCLgzCJUglia10aGIibxnMf87ceS24p73kQFsUO7icxCyIoxSKKSN0WuBF90m32MSIuyQ9iaiavYeswxX4A/0" alt="" />

关于作者

Jake Rocheleau是一个有创意的作家和UI设计师。你可以在twitter@jakerocheleau或者你可以访问他的个人网页JakeRocheleau.com.