爱喝兽奶帝天荒

这个屌丝很懒，什么也没留下！

热门标签

pm ux ui_使用替代UI / UX构建创新的投资组合网站

作者：爱喝兽奶帝天荒 | 2024-06-30 04:48:05

踩

投资组合ui

pm ux ui

保罗·J·诺布尔（Paul J Noble）屡获殊荣，设计独特的作品集网站吸引了很多人的眼球，而不仅仅是客户。今天，他将继续本教程的设计阶段，并演示如何进行编码。

步骤1：我们在做什么

在本教程中，优秀的ROA（瑞典）网站用作投资组合项目的示例。 该网站最近在Creattica中成为特色，并且该作者与ROA无关。 随意将自己的作品用作作品集项目。

我们将创建一个在线投资组合站点，其中包含图像网格，固定标题，文本和界面元素。标记的样式将设置为使内容适合而无需滚动几乎所有用户的显示，并且可以很好地缩放到较大的屏幕尺寸，同时以较低的分辨率优雅地降级。图像网格将仅显示当前的活动图像，但将包含更多隐藏的图像，这些图像可以通过页面级导航查看。

创建HTML模板和CSS将为我们准备本教程的下一部分，在这里我们将使用Javascript添加交互层并使设计栩栩如生。

步骤2：设定范本

在您首选的文本编辑器中创建一个新的html文档。附加jQuery（1.4.2+）和一个新的空白CSS文件。

我们将创建的第一个标记将是保存所有内容的div。稍后我们将为此div（“＃page”）设置最小的高度和宽度值，以确保设计在低分辨率下缩放。为以下页面的主要元素创建更多div。


<!DOCTYPE html>
	<html>
	<head>
		<title>Your Name - Digital Portfolio</title>
 
		<link rel="stylesheet" href="css/master.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>
 
	<body>	
	<div id="page">
		<div id="header"> 
			<div class="inner">
				<div id="logo"><img src="img/icons/logo.png" alt="Your Name Here"/></div>
 
				<div id="social"> <!-- Social media buttons --> </div>
				<div id="nav"> <!-- Global nav --> </div>	
			</div>
 
		</div>
 
		<div id="horizon">
 
			<div id="main">
				<div id="gallery"> <!-- The image grid --> </div>
 
				<div id="leftCol"> <!-- Text annotations --> </div>
			</div>
 
		</div>
 
	</div>
 
	</body>
	</html>

步骤3：标题

对于不需要垂直滚动的站点，将导航和标题元素放在屏幕底部通常不太麻烦。这样可以在窗口顶部附近更常查看的空间中释放额外的空间。我们希望此元素可以扩展用户显示的整个宽度，并且始终位于屏幕底部。

尽管它在视觉上位于屏幕底部，但实际上会出现在文档标记的顶部。我们将创建一个ID为“ header”的div，然后创建一个嵌套为“ inner”的嵌套div。内包装器将简化内部物品的放置。

在包装器中，我们将创建三个div； '#logo'，'＃social'和'#nav'。

对于徽标，我们将嵌套一个名为“ img / icons / logo.png”的图像文件，并添加一些替换文字。通过从PSD剪切徽标来创建徽标图像文件。由于这将是绝对放置的位置，因此确切的大小并不重要-但是，请确保徽标图像适合设计中的导航栏。

对于社交按钮，我们需要三个锚点-每个分别用于Facebook，Flickr和LinkedIn。这些将把背景图像用作图形，但是我们仍将文本用于语义目的，并使用CSS隐藏它。对于这些外部链接，我们将使用target ='_ blank'属性，以便页面在新的标签或窗口中打开。

对于导航，我们将再次使用三个锚，并为其分配各自的类和id值。


<div id="header"> 
			<div class="inner">
				<div id="logo"><img src="img/icons/logo.png"/></div>
 
				<div id="social">
					<a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
 
					<a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
					<a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>	
					</div>
 
				<div id="nav">
					<a class="about" href="about" id="aboutBtn">About</a>
					<a class="photos" href="photos" id="photoBtn">Photography</a>
 
					<a class="workActive" href="work" id="workBtn">Work</a>		
				</div>
			</div>
 
		</div>

我们剩余物品的图形对象不会像徽标那样简单。由于它们是交互式的，因此它们需要悬停状态，而导航按钮将需要活动状态。

对于导航按钮，我们将创建图像精灵。返回Photoshop并在PSD中的按钮周围创建一个选择。选择编辑>复制合并。

然后选择“文件”>“新建”。将出现一个对话框，其宽度和高度默认为先前选择的矩形。将高度更改为默认值的3倍。这将创建一个新的画布，该画布将适合导航图形的三个版本，每个状态对应一个。活动，悬停和关闭。

现在，从PSD中移出buttons文件夹，并将该组克隆两次，以创建三个组。稍微调整每个组的文本颜色以使其均匀，以创建不同的按钮状态。以下是最终图形的示例。将完成的版本另存为PNG（24位）到'img / icons / nav.png'，确保背景透明。

对于社交媒体按钮，我们只需要两个状态（“悬停”和“关闭”）。重复上述过程，创建一个社交媒体按钮图像精灵。将图像另存为“ img / icons / social-media.png”。

最后，创建一个新图像“ img / bg / header.png”。

现在，我们已经开发了结构和图像资产，让我们创建一些CSS来开始设计此页面的样式。

在CSS文件的顶部，我们将包括CSS重置，以确保没有特定于浏览器的默认设置会干扰我们的布局。


html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend
	 {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
 
	}
	body {
		line-height: 1.2em;
		font-family: arial, sans-serif;
 
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
 
	:focus {
		outline: 0;
	}
 
	ins {text-decoration: none;}
	del {	text-decoration: line-through;}

然后，我们将为主要页面元素创建一些基本样式。


body, html { 
	height: 100%; }
 
body { 
	background: #0f1219; }
	
#page {  
	height: 100%;
	min-height: 700px; 
	position: relative; 
	min-width: 1100px;
	overflow: hidden; }
	
h1, h2, p, li,div { font-family: "arial", "helvetica",sans-serif; }
li {font-size: 12px;}

接下来，我们将样式化标题。我们将对徽标和其他元素使用绝对定位，以简化对设计的控制。

注意：我们将锚定为块级元素（“显示：块”），并带有负的文本缩进样式，以确保可访问但基于图形的元素。如果自定义图像精灵文件的尺寸不同，则可以调整宽度和高度。


#header { 
			background: url('../img/bg/header.png') repeat; 
			height: 60px;
			z-index: 1200;
			overflow: hidden;
		    position: absolute; bottom: 0; width: 100%; }
		
		#logo { 
			position: absolute; 
			top:0px; 
			left: 30px; }
		
		#header .inner { 
			width: auto;
			padding: 0 30px;
			position: relative;
			height: 70px; }
 
		#nav { 
			position: absolute;
			right: 30px;
			top: 14px;
			height: 31px;
			width: 290px;  }
			
		#nav a { 
			background: url('../img/icons/nav.png') no-repeat 0 0;  
			text-indent: -9999px; 
			float: right; 
			display: block;
			outline: none;
			height: 31px; }

现在，通过将各种图像精灵位置映射到每个按钮的类，为每个导航按钮定义各自的样式。


#nav a.work { 
				width: 95px;}
			#nav a.work:hover { 
				background-position: 0 -62px;}
				
			#nav a.about {  
				width: 93px;
				background-position: -188px 0;}
				
			#nav a.about:hover { 
				background-position: -188px -62px;}
				
			#nav a.workActive { 
				width: 95px; 
				background-position: -0px -31px; 
				cursor: default; }
				
			#nav a.aboutActive { 
				width: 93px; 
				background-position: -188px -31px;
				cursor: default;}
				
			#nav a.photos { 
				width: 93px; 
				background-position: -95px 0; }
				
			#nav a.photos:hover { 
				background-position: -95px -62px;}
				
			#nav a.photosActive { 
				width: 93px; 
				background-position: -95px -31px; 
				cursor: default; }

接下来，我们将对社交媒体按钮执行相同的操作。


#social { 
						width: 88px; 
						height: 26px; 
						position: absolute; 
						top: 17px; 
						right: 330px; }
					
					#social a { 
						display: block; 
						background: url('../img/icons/social-media.png') no-repeat 0 0; 
						float: left; 
						height: 26px; 
						width: 26px;
						outline: none;
						float: left;
						margin-right: 4px;
						text-indent: -9999px;
						overflow: hidden; }
						
					#social a.fb { background-position: 0 0;}
					#social a.fb:hover { background-position: 0 -26px;}
					#social a.flickr { background-position: -30px 0;}
					#social a.flickr:hover { background-position: -30px -26px;}
					#social a.linkedin { background-position: -60px 0; margin-right: 0;}
					#social a.linkedin:hover { background-position: -60px -26px;}

OK，现在刷新页面，您应该看到与下图类似的内容。将鼠标悬停在按钮上可以查看不同的状态。如果悬停状态中有任何怪癖，请尝试调整CSS中的background-position属性。

尝试调整浏览器窗口的大小，以模拟较低分辨率的显示。一旦窗口缩小到为“ #page” div定义的最小高度和最小宽度值以下，滚动条应出现。

步骤4：灯光效果

我们将使用聚光灯效果将视觉注意力集中在活动图像上，同时提示周围的内容。为了创建更强的背景/前景分离，我们还将对背景应用微妙的纹理图案。

为此，我们需要添加一些标记。创建嵌套在div'#main'中的以下新div。


<div id="main">
	
		<div class="glowBg" id="bg2">&nbsp;</div>
 
		<div id="glowTexture">&nbsp;</div>
		
		<div id="gallery"> <!-- The image grid --> </div>
		<div id="leftCol"> <!-- Text annotations --> </div>
 
		
		<div id="glowShadow">
			<img src="img/bg/glow-shadow.png" />
		</div>
		
	</div>

首先，让我们创建将覆盖图库的聚光灯图像（'img / bg / glow-shadow.png'）。返回Photoshop，在“ vignette”组中选择图层。转到选择>全部，然后复制所选区域。创建一个新文档（至少应为1400 x 900）并将剪贴板粘贴到画布中。

现在，我们需要对图像进行一些调整。首先，扩展画布大小，使其顶部高100像素。

然后，将左边缘扩大50像素。

最后，展开底部和右侧边缘，使画布的总大小为1600 x 1600。

现在，使用存储桶工具并将抗锯齿功能设置为“ 0”，并将容差设置为“ 0”，并用页面背景色（＃0f1219）填充边缘周围的透明区域。最终结果应类似于下图。

选择文件>保存为Web，然后将此图像另存为启用了透明度的24位PNG（'img / bg / glow-shadow.png'）。

现在，返回到我们的原始源图像，选择图层Pattern Fill 1（这是对角线图层）。右键单击并选择“栅格化图层”。然后，放大关闭并选择图层的区域，如下所示。复制此内容（仅复制线条-不复制背景）并粘贴到新文档中。保存为网络，再次使用具有透明性的24位PNG，路径为“ img / bg / lines.png”。

现在，让我们添加将集成新图像CSS ...


#horizon { 
			min-height: 700px; 
			width: 100%; 
			overflow: hidden; }
 
		#main { 
			background: #0f1219;  
			width: 1300px; 
			margin: auto;  
			margin-top: -190px; 
			height:1000px; 
			overflow: hidden; 
			position: relative; }
			
		#main .inner { 
			width: 9000px; 
			height: 9000px; 
			overflow: hidden; 
			position: absolute; 
			top: 0; 
			left: 0; }
				
		.glowBg {
			background: #282d3f; 
			height: 100%; 
			width: 100%; 
			position: absolute; }	
 
		#glowTexture { 
			background: url('../img/bg/lines.png') repeat; 
			height: 900px; 
			width: 1300px; 
			position: absolute; 
			top: 0; 
			left: 0; } 
			
		#glowShadow {    
			height:1600px;
			position: absolute;
			width: 1500px;
			top: 00px;
			overflow: hidden;
			z-index: 200; }
			
		#glowShadow img { 
			display: block;  
			position:relative; 
			left: -100px; }

保存，刷新，您现在应该可以看到背景颜色，纹理和聚光灯。接下来，我们将开始添加一些图像。

步骤5：图库

对于图库图像，我们将按项目将图像放入列中。每个项目可以具有垂直排列的多个图像。通过将列横向移动可以访问不同的项目。

创建一个640x480的新图片，并粘贴网站快照或您要展示的某些作品。这种设计的深色风格通常适用于主要具有浅色背景的图像。

首先，我们将添加一些标记。


<div class="inner">
 
	<div class="col">
		<div class="item" style="top: 200px">
			<img src="img/work/demo-01.jpg" alt="Title 1a"/> 
		</div>
 
		<div class="item"  style="top: 710px">
			<img src="img/work/demo-01.jpg" alt="Title 1b" style="opacity: 0.3"/> 
		</div>
 
		<div class="item"  style="top: 1220px">
			<img src="img/work/demo-01.jpg" alt="Title 1c" style="opacity: 0.3"/> 
		</div>
 
	</div>		
	
	
	<div class="col" style="left: 660px">
		<div class="item" style="top: 200px">
			<img src="img/work/demo-01.jpg" alt="Title 2a" style="opacity: 0.3"/> 
		</div>
 
		<div class="item"  style="top: 710px">
			<img src="img/work/demo-01.jpg" alt="Title 2b" style="opacity: 0.3"/> 
		</div>
 
		<div class="item"  style="top: 1220px">
			<img src="img/work/demo-01.jpg" alt="Title 2c" style="opacity: 0.3"/> 
		</div>
 
	</div>
	
</div>

您会注意到我们在标签上添加了一些内联样式。这模拟了交互层以后将自动应用的内容（我们将在本教程的下一部分中看到如何完成此操作）。但是，暂时，我们将仅对样式进行硬编码。注意：opacity属性在Internet Explorer 8及更低版本中不起作用。

为图库图像添加以下CSS：


#gallery { 	 
	left: 285px;  
	position: absolute; 
	width: 100%; 
	height: 900px; }
	
#gallery .col { 
	position:absolute; 
	top: 80px; 
	width: 640px; }
 
.item { 
	height: 480px; 
	width: 640px; 
	background: #181a22; 
	position: absolute; 
	margin: auto; 
	top: 320px;
	z-index: 100;
	overflow: hidden; }

这里最重要的属性是列的绝对位置（这些是具有“ col”类的div）。通过绝对定位，我们可以独立移动每列或同步移动所有列，这将使我们能够在应用了交互层之后导航图像的网格。

刷新页面，您现在应该看到带有图像的图库。但是，您会注意到画廊静态地垂直放置。理想情况下，我们希望内容根据窗口大小居中。为此，我们需要添加一些脚本。

在结束body标记之前创建一个新的script标记，并插入以下代码：


<script>
 
var yShift = -190;
arrange()
 
function arrange() {
 
	var winHeight = $(window).height();
	
	if (winHeight > 760) {
		yShift = (((winHeight - 900)/2) - 110)
		newHeight = (winHeight - yShift)
		newHeight -=60
		$('#main').css('height', newHeight)	
	}
	
	if (yShift < -190) {
		yShift = -190;
	}
		
	$('#main').css('margin-top', yShift)
	
}
 
$(window).resize( function() {
	arrange()
})
</script>

确保已在页面标题中添加了jQuery，否则此脚本将不起作用。

该脚本可以做一些事情。 ranging（）函数检测窗口高度，然后调整“ #main”元素CSS属性以使内容垂直居中。在用户的窗口高度大于760像素（请参见第541行的条件）的情况下，它会执行此操作，如果窗口高度低于此值，则会应用默认CSS属性。每当调整用户窗口的大小时，$（window）.resize（）侦听器（第25行）就会调用Adjust（）函数。

步骤6：一些字

在这一阶段，我们将添加一些与活动项目有关的文本内容。为此，我们需要标题，子标题和文本段落来详细说明活动项目。

将以下标记添加到“ #leftCol” div中：


<div id="projectInfo">
	<h1>Demo Project</h1>
	<p class="sub">WEBSITE 2011</p>
 
	<h1>Demo Project</h1>
	<p class="sub">WEBSITE 2011</p>
	<p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
 
	<p class="link"><a href="#">Link to project here</a></p>
</div>

当然，如果您使用的是真实的作品，请随意使用准确描述您的作品的标题和正文。

现在，我们将使用其他一些CSS样式化此内容：


#leftCol { 
	padding-top: 30px; 
	width: 200px;  
	height: 480px; 
	left: 30px; 
	position: absolute;	
	z-index: 10001;  
	top: 270px; }
	
#projectInfo { 
	top: 50px; 
	position: absolute; 
	height: 350px; 
	width: 200px; }
		
#leftCol h1 { 
	color: #fff; 
	font-size: 28px; 		
	margin-bottom: 6px; 
	top: 50px; 
	font-weight: 300; 
	line-height: 30px; }
			
#leftCol p.sub { 
	color: #338966; 
	font-size: 11px; 
	text-transform: uppercase;  
	letter-spacing:2px;
	font-weight: bold; }
			
#leftCol p.body, #leftCol p.link {
	color: #8c8f95;
	font-family:  'lucida grande', 'arial';
	font-size: 12px;
	line-height: 19px;
	padding-top: 30px;
	margin-bottom: 10px; }
		
#leftCol p.link { 
	padding-top: 10px; }	
	
#leftCol p.link  a {
	color: #8c8f95;
	text-decoration: underline; }
 
#leftCol p.link a:hover {
	color: #fff;
	text-decoration: underline; }

同样，这里最重要的考虑因素是'#leftCol'元素的绝对位置。由于此元素放置在“ #gallery”标签之外但仍在“ #main”标签内，因此其位置将相对于居中的“ #main”标签，并且与画廊中的移动无关。这意味着当活动项目更改时，文本可以刷新而不更改位置。 “ #leftCol”（10001）的z-index很高，因此该内容位于页面上所有其他内容的上方。这意味着我们的文本不会受到聚光灯效果的干扰。其他属性主要是与文本样式和格式相关的属性，可以根据需要进行调整。

现在，刷新页面，活动图像的左侧应显示一些格式正确的文本，如下所示。

步骤7：界面元素

现在，我们已经为静态内容开发了一个结构，我们将应用一些标记，这些标记将添加允许用户与网站进行交互的元素。

返回“ #leftCol” div，添加以下代码：


<div id="controls">
 
	<div id="grid">
			
	</div>
 
	<div id="keys">
		<a href="#" class="kup">Up</a>
		<a href="#" class="kdown">Down</a>
 
		<a href="#" class="kleft">Left</a>
		<a href="#" class="kright">Right</a>
 
	</div>
 
</div>

'#grid'元素为空；在最终的工作版本中，它将由Javascript填充。但是，暂时，我们将仅对一些子元素进行硬编码，以了解其外观。


<div id="grid">
	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
	<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
	<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
	<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
	<div id="tracker" style="height: 14px;">&nbsp;</div>
</div>

现在，我们将再次使用精灵图像，这一次是我们的箭头键。因此，返回Photoshop，转到“键盘”组，并使用标尺工具记录总尺寸。

同样，我们需要允许组的高度增加两倍，才能包含“默认”和“悬停”状态。创建一个具有透明背景的新文档，该透明背景等于“键盘”组的宽度和高度的两倍。在本教程示例中，这等于70 x 92。

将“键盘”组拖动到新文档中。复制此组，并将一个放置在另一个上方。下面的组将是我们的“悬停”状态。通过使颜色覆盖，箭头和轮廓变亮，对悬停状态进行一些小的调整。微调通常足以满足悬停状态的需要，亮度的微小变化通常很容易注意到。

对于本教程示例，将背景颜色从＃262a34更改为＃2b2f3a，将笔触/箭头背景颜色从＃32343f更改为＃4b4d56将创建理想的效果。

最终图像应如下所示：

将此图像另存为“ img / icons / keys.png”。

现在，我们将添加一些CSS以将图像映射到各个类。


#leftCol #controls {  
	width: 200px; 
	height: 55px; 
	position: absolute;  
	bottom: 18px; }
	
#grid .line { 
	width: 5px; 
	background: #666; 
	overflow: hidden; 
	float: left; 
	margin-right: 2px; 
	position: relative; 
	cursor: default; }
	
#grid { 
	height: 55px; 
	width: 200px; }
	
#tracker { 
	height: 10px; 
	background: #fff; 
	width: 5px; 
	position: absolute; 
	z-index: 10000;
	cursor: default; }
	
#grid .line { 
	width: 5px; 
	background: #3d424f; 
	overflow: hidden; 
	float: left; 
	margin-right: 2px; 
	position: relative; 
	cursor: default; }
	
#keys { 
	width: 92px; 
	height: 46px; 
	position: absolute; 
	left: 86px; 
	bottom: 0;  }
	
#keys a { 
	text-indent: -999px; 
	width: 22px; 
	height: 22px; 
	background: url('../img/icons/keys.png') no-repeat 0 0; 
	overflow: hidden; 
	position: absolute; }

子“ .line”元素将形成一个表示相对列高的网格。这种抽象将是让用户了解作品集的大小，各部分及其当前位置的理想方式-在某些方面相当于传统内容站点的痕迹。

无论如何，下一个任务是将键类映射到图像精灵：


#keys a.kup { 
	left: 24px; 
	text-indent: -999px; 
	top: 0; 
	background-position: -24px 0; }
	
#keys a.kup:hover, #keys a.hoveru { 
	background-position: -24px -46px; }
		
#keys a.kdown { 
	left: 24px; 
	top: 24px; 
	background-position: -24px -24px; }
	
#keys a.kdown:hover, #keys a.hoverd {
	 background-position: -24px -70px;
	}
		
#keys a.kleft { 
	left: 0px;  
	top:24px; 
	background-position: 0px -24px; }
	
#keys a.kleft:hover, #keys a.hoverl { 
	background-position: 0px -70px; }
		
#keys a.kright { 
	left: 46px;  
	top: 24px; 
	background-position: -46px -24px; 
	width: 24px; }
	
#keys a.kright:hover, #keys a.hoverr { 
	background-position: -46px -70px; }

尝试刷新浏览器并悬停刚创建的元素。新的键和网格应类似于下图所示：

步骤8：界面元素

最后，我们将添加将附加到活动项目的动态导航。在“ #leftCol”元素的打开标记后立即插入以下标记：


<a href="#" id="left" class="mover" style="display: none"></a>
 
<a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
<a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
 
<a href="#" id="up" class="mover" style="display: none"></a>

我们在这里使用了内联样式来模拟添加完整的Javascript交互性后将自动实现的功能。

另一个图像精灵将用于这些锚点。返回到我们的Photoshop文件，打开“按钮”组，然后选择直角图层。由于我们希望锚点上有一些填充，因此我们将其尺寸设置为44 x 44。

创建具有透明背景的新文档88 x 176，以容纳2套4个图标。创建一个黑色的新图层，以帮助我们看到半透明的箭头。在x轴上将垂直参考线拖到44像素。（在启用标尺时拖动指南，并确保“窗口”>“信息”可见，以查看当前位置）。然后在y轴上以44、88和132像素拖动三个水平参考线。

现在，返回到原始PSD，将角度箭头拖动到新文档中，并在左侧创建4个副本。这将是我们的“默认”状态。使每个图层的不透明度为12％。使用“编辑”>“变换”旋转辅助线，以使顺序如下所示：

复制这些图层，并将每个图层精确地向右移动44个像素。将每个新图层的不透明度调整为20％。关闭黑色背景，使画布几乎完全透明，然后选择“保存为Web”。导出为24位PNG，并将其启用为“ img / icons / movers.png”。

现在，我们将添加一些CSS来映射此图像：


a.mover {
		background: url('../img/icons/movers.png') no-repeat -44px 0; 
		height: 44px; 
		width: 44px; 
		outline: none !important; } 
 
	#up, #right, #down, #left { 
		display: block; 
		z-index: 300; 
		position: absolute;  
		top: 10px; 
		left: 10px; }
 
	#right {  background-position: 0px -44px; }
	#right:hover { background-position: -44px -44px; }
	
	#down {  background-position: 0 -88px;}
	#down:hover {  background-position: -44px -88px;}
	
	#up{  background-position: 0px -132px;}
	#up:hover {  background-position: -44px -132px;}

刷新浏览器，您现在应该看到类似下面的内容。

就是这样！在本教程的最后部分，我们将编写Javascript，该Javascript将自动处理图像的布局，并使用键盘或鼠标引入动态导航。

如果您可能错过了任何东西，这是最终HTML标记：


<!DOCTYPE html>
	    <head>
	        <title>Your Name - Digital Portfolio</title>
	        <link rel="stylesheet" href="css/master.css"/>
 
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	 	</head>
 
	    <body>   
	    <div id="page">
	      	<div id="header">
 
			    <div class="inner">
			    	<div id="logo"><img src="img/icons/logo.png"/></div>
			    	<div id="social">
 
			        	<a class="fb" href="http://www.facebook.com/" target="_blank" title="Find me on Facebook">Find me on Facebook</a>
			        	<a class="flickr" href="http://www.flickr.com/" target="_blank" title="View my Flickr Photostream">View my Flickr</a>
 
			        	<a class="linkedin" href="http://www.linkedin.com/" target="_blank" title="Find me on LinkedIn">Find me on LinkedIn</a>
			    	</div>
 
			    	<div id="nav">
			        	<a class="about" href="about" id="aboutBtn">About</a>
			        	<a class="photos" href="photos" id="photoBtn">Photography</a>
 
			        	<a class="workActive" href="work" id="workBtn">Work</a>    
			    	</div>
				</div>
 
			</div>
 
	        <div id="horizon">
 
	            <div id="main">
 
					<div class="glowBg" id="bg2">&nbsp;</div>
 
					<div id="glowTexture">&nbsp;</div>
 
	                <div id="gallery"> 
		
							<div class="inner">
 
								<div class="col">
 
									<div class="item" style="top: 200px">
										<img src="img/work/demo-02.jpg" alt="Title 1a"/> 
									</div>
 
									<div class="item"  style="top: 710px">
										<img src="img/work/demo-02.jpg" alt="Title 1b" style="opacity: 0.3"/> 
									</div>
 
									<div class="item"  style="top: 1220px">
										<img src="img/work/demo-02.jpg" alt="Title 1c" style="opacity: 0.3"/> 
									</div>
 
								</div>		
 
 
								<div class="col" style="left: 660px">
									<div class="item" style="top: 200px">
										<img src="img/work/demo-03.jpg" alt="Title 1a" style="opacity: 0.3"/> 
									</div>
 
									<div class="item"  style="top: 710px">
										<img src="img/work/demo-03.jpg" alt="Title 1b" style="opacity: 0.3"/> 
									</div>
 
									<div class="item"  style="top: 1220px">
										<img src="img/work/demo-03.jpg" alt="Title 1c" style="opacity: 0.3"/> 
									</div>
 
								</div>
							</div>
 
							<!-- End Step 6 -->
					</div>
	                <div id="leftCol"> <!-- Text annotations --> 
 
 
							<a href="#" id="left" class="mover" style="display: none"></a>
 
							<a href="#" id="right" class="mover" style="left: 895px; top: 240px;"></a>
							<a href="#" id="down" class="mover" style=" left: 555px; top: 490px;"></a>
 
							<a href="#" id="up" class="mover" style="display: none"></a>
 
 
						<div id="projectInfo">
 
						    <h1>Demo Project</h1>
						    <p class="sub">WEBSITE 2011</p>
						    <p class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.</p>
 
						<p class="link"><a href="#">Link to project here</a></p>
						</div>
 
 
						<div id="controls">
 
							<div id="grid">
								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
 
								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
 
								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
								<div class="line" style="height: 55px; opacity: 0.4;">&nbsp;</div>
								<div class="line" style="height: 41px; opacity: 0.4;">&nbsp;</div>
 
								<div class="line" style="height: 27px; opacity: 0.4;">&nbsp;</div>
								<div id="tracker" style="height: 14px;">&nbsp;</div>
 
							</div>
 
							<div id="keys">
								<a href="#" class="kup">Up</a>
 
								<a href="#" class="kdown">Down</a>
								<a href="#" class="kleft">Left</a>
 
								<a href="#" class="kright">Right</a>
							</div>
 
						</div>
 
		</div>
 
					<div id="glowShadow">
						<img src="img/bg/glow-shadow.png" />
					</div>
 
	            </div>
 
	        </div>
 
	    </div>
 
		<script>
		var yShift = -190;
		arrange()
		function arrange() {
 
			var winHeight = $(window).height();
 
			if (winHeight > 760) {
			yShift = (((winHeight - 900)/2) - 110)
			newHeight = (winHeight - yShift)
			newHeight -=60
			$('#main').css('height', newHeight)	
			}
 
			if (yShift < -190) {
				yShift = -190;
			}		
			$('#main').css('margin-top', yShift)
 
		}
 
		$(window).resize( function() {
			arrange()
		})
 
		</script>
 
	    </body>
	    </html>

翻译自: https://webdesign.tutsplus.com/articles/build-an-innovative-portfolio-site-using-alternative-uiux--webdesign-4437

pm ux ui

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/771443