五种令人印象深刻的网页头部设计技巧

Your website’s header makes an immediate impact on your user so it’s important to get it right. Think about what you’re trying to achieve, what’s the first thing you want to tell your users when they visit your site, what will intrigue them and get them to read further?

　　网站的头部可以对用户产生最直接的影响，所以正确处理它很重要。想一想你在尝试实现什么，当用户访问你的网站的时候，什么是你首先想要告诉用户的，什么会激发他们的兴趣并使他们去了解更多?

A header gives you room to play and be creative, especially on the homepage, and there are a number of techniques you can use to connect with your user.

　　页面的头部给你发挥和创作的空间，特别是对于首页，而且有多种方法可供使用。

Take a look at these 5 different types of header design and see how the examples have used them creatively to make an impact.

　　看一下这5中不同类型的头部设计，并看一下这些实例是如何创造性的使用它们并发挥作用的。

巨型头部 The Huge Header

Takes up a lot of room and can be risky as you’re taking up valuable space, but done right it looks great and makes an impact.

占用很大的空间，而且当你占用有价值的空间的时候是很危险的，但是如果处理的好的话，它看起来很棒，而且很有效。

Lewro’s Blog

Chris Hortsch

enRoute Film Festival

Simple Art

Alpha Multimedia Solutions

网络应用 The Web App

Web apps generally want to show a screenshot of their product with a prominent call to action button that will immediately entice users to find out more or signup.

网络应用一般来说是想展示他们产品的截图，并通过一个醒目的可以直接诱导用户来注册或获取更多内容的行为召唤按钮。

Ekklesia 360

PlanHQ

Campaign Monitor

Wufoo

Traffik

插画角色 The Illustrated Character

Illustrated characters are currently a popular trend. They add character, personality and a sense of friendliness to your website.

目前，使用插画风格的角色是一个颇为流行的趋势。它们可以添加角色、个性和一种友好的感觉到你的网站。

MailChimp

Digimurai

Enrichment

Wishlistr

Cleverful

作品集截图 The Portfolio Screenshots

If you want to show off your work then use this layout to show different examples of work alongside a tagline introducing yourself.

如果你想炫耀你的作品，那么就是用这种布局来展示不同的作品示例，并可附加一条介绍你自己的口号。

Tony Greer

Mark Lamb

OnWired

Design Moves Me

James Lai Creative

幻灯 The Carousel

Carousels allow you to fit in more information into the header with a slider effect. Useful for websites with many features or for showing off your portfolio. With the Javascript libraries currently available they are very easy to implement.

幻灯允许你使用滑动效果来将更多信息填进到头部区域。这对于网站有很多特性和炫耀你的作品集很有用。通过一些很有用的Javascript库及其插件，这种效果很容易实现。

Rob Palmer

Icon Designer

Jason Larose Design

Benjamin David

Paramore|Redd