他们是如何做到的：StarWars.com

最新推荐文章于 2025-12-27 15:45:53 发布

翻译最新推荐文章于 2025-12-27 15:45:53 发布 · 199 阅读

文章标签：

#java #css #js #python #web #ViewUI

本文深入剖析了星球大战官方网站的设计细节，包括独特的标题交互、图标选择、光剑菜单及创意的404页面，展示了如何巧妙融入电影元素提升用户体验。

如果您还没有看过《星球大战》，请在完成本文后立即观看。所有的。（确保您回来，如果您喜欢IV-VI或I-III，请告诉我们。）

如果你看过星球大战，或许你有些在关于电影系列中的最新消息循环。 JJ Abrams （《 迷失》的制作人，也是最新的《星际迷航》系列的制作人）目前正在撰写和制作将于2015年发行的下一部 《星球大战：第七集》。此外，还购买了《星球大战》的家庭工作室卢卡斯电影公司由迪士尼。

除了有关“星球大战”传奇的消息， StarWars.com还从Bobby Solomon和迪士尼互动团队那里获得了改头换面。这个网站上有许多美丽的细节，但我们将重点关注一些引人注目的细节。

标题

《星球大战》网站的标题是一个非常简单的交互作用的示例，其交互作用比美学执行要丰富得多。具体而言，互动反映了所有《星球大战》电影的开场标题序列。滚动时，徽标似乎从您身上移开，并逐渐消失。这个简单的细节在美学上具有吸引力，并为电影迷提供了直接的文化触发。

这是他们的做法。

首先，标题图像栏及其所有包含的元素实际上都设置为position: fixed 。使用一种非常简单的技术既可以实现背景中的视差效果，又可以实现徽标大小调整。我们将通过一个简化的示例进行演示。

<<header>
  <div class="nav-inner">
    <div class="nav-wrapper">
      <div class="bg"></div>
      <a class="logo"></a>
    </div>
  </div>
</header>
<main></main>

在这种情况下，我们将使用以下CSS。

header {
    position: fixed;
	width: 100%;
	height: auto;
	background-color: #000;
}
.nav-inner {
	max-height: 300px;
	height: 300px;
	position: relative;
}
.nav-wrapper {
  max-width: 1400px;
  max-height: 300px;
  margin: 0 auto;
  padding: 1.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  height: inherit;
}
.nav-push {
  margin-top: -65px;
  position: relative;
}
.bg {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 1600px;
	height: 100%;
	z-index: -1;
	background-position: center;
	background-image: url(http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg);
	background-size: cover;
	transform: translate3d(0, 0, 0);
	transform: translateX(-50%);
}
.logo {
	display: block;
  top: 50%;
  width: 100%;
  max-width: 350px;
  height: 100%;
  max-height: 130px;
  margin: -65px auto 0;
  box-sizing: border-box;
  background-image: url(//a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
main {
  position: relative;
  top: 300px;
  height: 600px;
  background-color: #000;
}

使用此方法将徽标垂直居中。

现在来了把戏。当用户滚动，我们将改变高度.nav-inner ，以及不透明度.nav-inner 。这将导致徽标缩小，标题的高度将取决于其包含的元素的高度。

我们可以使用简单的滚动轮询方法来实现。

注意：在此示例中使用jQuery。

var latestKnownScrollY = 0, ticking = false, $w = $(window), $navInner = $(".nav-inner");

function onScroll() {
    latestKnownScrollY = $w.scrollTop();
  console.log(latestKnownScrollY);
	requestTick();
}
$w.on('scroll', onScroll);

function requestTick() {
	if(!ticking) {
		requestAnimationFrame(update);
	}
	ticking = true;
}
function update() {
	ticking = false;
	var currentScrollY = latestKnownScrollY;
  $navInner.css({
    height: 300 - currentScrollY,
    opacity: (300 - currentScrollY) / 300
  });
}
requestTick();

该JavaScript与上面CSS结合使用，可以实现标题滚动的效果，并且无需依赖繁琐的DOM操作即可完成此操作，从而使其性能更高。

看一下最终的演示。

图标详细信息

桌面导航相对简单，因此我们将不讨论实现细节。但是，让我们看一下使导航有效的原因：图标。

这些图标再次成为直接与《星球大战》粉丝对话的另一个功能。例如，对于“电影”图标，设计人员选择了一个图标来表示在每部《星球大战》电影开始时显示的滚动文本，而不是选择照相机或卷轴。对于社区图标，他们没有显示两个人的轮廓，而是选择显示Storm Trooper头盔。对于《星际大战》粉丝来说，这些决定会增强每个导航项的意义，而对于新来者而言，这种体验并不会受到影响。

需要指出的另一个重要图标是“搜索”按钮。尽管它看起来像是放大镜（一个常见的搜索图标），但它也是死亡之星的简化版本，是整个电影中最重要的元素之一。

这带来了整个站点上所有图标的非常重要的一点：通常，设计师选择保留熟悉的线索和基本形状（例如放大镜或人的轮廓），但在这些基本形状中添加元素对于那些了解它们的人来说意义重大。这在整个站点上都提供了一种嬉戏感和主题完整性的真实感。

光剑菜单图标

我们将进一步探讨已成为本网站最受关注的部分之一：光剑导航。

在较低的断点处，可通过固定在浏览器窗口左上方的按钮访问导航。起初，它看起来像一个普通的菜单按钮，但是一旦单击它，线条就会变成X形，就像两个光剑。

这一切都使用简单CSS技术和少量JavaScript来完成。这是菜单的标记：

<div id="nav-drawer-toggle">
  <div class="toggle-icon">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

bar级别的跨度成为光剑。这是用于完成效果CSS的重新制作：

#nav-drawer-toggle {
  border-right: 1px solid #333333;
  width: 60px;
  height: 60px;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -30px;
}
.toggle-icon {
  display: block;
  position: relative;
  top: 50%;
  width: 100%;
  margin: -22px auto 0 2px;
  -webkit-transition: margin 600ms;
  -moz-transition: margin 600ms;
  transition: margin 600ms;
}
.bar {
  display: block;
  width: 38px;
  height: 2px;
  margin: 9px;
  border-right: 28px solid #fff;
  border-left: 6px solid #d6d6d6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
  -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
  transition-property: transform, margin, border-right-color, box-shadow;
  -webkit-transition-duration: 600ms;
  -moz-transition-duration: 600ms;
  transition-duration: 600ms;
}

.bar:nth-of-type(2n) {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

/* Toggled states */
.toggled .toggle-icon {
  margin: -32px 0 0 7px;
}
.toggled .toggle-icon .bar:nth-of-type(3) {
  margin-left: 5px;
  -webkit-transform: rotate(-42deg);
  -moz-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  -o-transform: rotate(-42deg);
  transform: rotate(-42deg);
}
.toggled .toggle-icon .bar:nth-of-type(2) {
  margin-left: 14px;
  -webkit-transform: rotate(-137deg) translateY(-15px);
  -moz-transform: rotate(-137deg) translateY(-15px);
  -ms-transform: rotate(-137deg) translateY(-15px);
  -o-transform: rotate(-137deg) translateY(-15px);
  transform: rotate(-137deg) translateY(-15px);
}
.toggled .toggle-icon .bar:nth-of-type(1) {
  opacity: 0;
}

/* Lightsaber glow */
#nav-drawer-toggle.toggled:hover .bar:nth-of-type(3) {
  border-right-color: #ddf1da;
  box-shadow: 4px 0 6px 1px rgba(83,228,68,0.65);
}

#nav-drawer-toggle.toggled:hover .bar:nth-of-type(2) {
  border-right-color: #e9b8b9;
  box-shadow: 4px 0 6px 1px rgba(205,40,44,0.75);
}

最后，使用一些JavaScript切换导航状态：

(function(){
  $("#nav-drawer-toggle").on("click", function(){
    $(this).toggleClass("toggled");
  });
}());

注意：上面的某些代码直接取自StarWars.com，而其他代码则经过重新创建以实现相同的效果。

看一下最终的演示。

尽管这是一种看似简单的技术，但它比简单的“ X”或汉堡包以更加细腻和丰富的方式向观众讲话。

404页

StarWars.com的设计师在设计过程中考虑了许多看似微小的细节。我想在本文中指出的是404页。

404页面通常被我们作为Web开发人员或设计人员所遗忘，因为我们可以轻松地将它们视为“边缘案例”。我们似乎忘记了它们，因为它们不是应该发生的事情 ，因此我们不会为它们进行大量设计。但是，404页值得我们比想象的要多得多。当用户尝试访问不再可用的内容或链接或键入不正确的内容时，用户可到达404页。应该更加有目的地探索用户体验中的这一刻。

当用户未到达他们尝试访问的页面时，该页面会非常令人沮丧，并导致用户立即离开。但是，如果404页面的设计能够帮助用户并使他们感到某种程度的愉悦，则可以保留他们的注意力。对于StarWars.com，当用户访问错误的地址（例如 http://www.starwars.com/nowhere ），则显示图形“ 404”，不完整的死亡之星代替零，并显示消息“此页面未完全装备好，无法操作。请尝试一些操作其他？”

该页面有效的原因有两个。首先，它再次直接与《星球大战》粉丝对话。在大多数电影系列中，“死亡之星”看起来都像404页上的那个，并且正在建造中。当六部电影的最后一部最终完成时，皇帝对卢克说：