<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>刘钢 - 我是UED &#187; 图片</title>
	<atom:link href="http://www.iamued.com/tag/%e5%9b%be%e7%89%87/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 28 Jul 2010 12:58:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>漂亮的图片区域设计</title>
		<link>http://www.iamued.com/design/1185.html</link>
		<comments>http://www.iamued.com/design/1185.html#comments</comments>
		<pubDate>Sun, 24 Jan 2010 08:58:36 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[图片]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1185</guid>
		<description><![CDATA[
【译者的话】很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR  DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。

由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。
Factor  Design网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。

这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。

版面结构： 
书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。

点击上图看大图
颜色： 
在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。

点击上图看大图
文字颜色对比： 
不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。


图片区域： 
放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始：


充满表现力的变化： 
在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。























本文所用颜色数值（RGB）：




原文出处：www.bamagazine.com
转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html
您可能还关注的？如何做得Banner通情达意设计师要会思考什么是用户研究？全解析交互设计指南系列(9)—一次点击视觉设计时不应产生新信息]]></description>
			<content:encoded><![CDATA[<blockquote>
<p align="left"><span><span><span><span><span>【译者的话】</span></span></span></span>很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR  DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。</span></p>
</blockquote>
<p align="left"><strong>由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。</strong></p>
<p align="left"><a href="http://www.factordesign.com/" target="_blank">Factor  Design</a>网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。</p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165836GiQ.jpg" alt="" width="451" height="452" /></p>
<p align="left">这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。<br />
<span id="more-1185"></span></p>
<p align="left"><strong>版面结构： </strong></p>
<p align="left">书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。</p>
<p align="center"><a href="http://www.logosky.net/image12/3_panels_banner/02_big.jpg" target="_blank"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165852lPo.jpg" border="0" alt="" width="510" height="281" /></a></p>
<p align="center">点击上图看大图</p>
<p align="left"><strong>颜色： </strong></p>
<p align="left">在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。</p>
<p align="center"><a href="http://www.logosky.net/image12/3_panels_banner/03_big.jpg" target="_blank"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165906aW3.jpg" border="0" alt="" width="510" height="287" /></a></p>
<p align="center">点击上图看大图</p>
<p align="left"><strong>文字颜色对比： </strong></p>
<p align="left">不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。</p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165922Niv.jpg" alt="" width="510" height="456" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165949I6m.jpg" alt="" width="386" height="647" /></p>
<p align="left"><strong>图片区域： </strong></p>
<p align="left">放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始：</p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165950cxi.jpg" alt="" width="510" height="264" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/165955KV0.jpg" alt="" width="510" height="563" /></p>
<p align="left"><strong>充满表现力的变化： </strong></p>
<p align="left">在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。</p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170000zVV.jpg" alt="" width="510" height="506" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170006PLg.jpg" alt="" width="510" height="253" /></p>
<p align="center">
<img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170016jbu.jpg" alt="" width="510" height="507" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170021xqm.jpg" alt="" width="510" height="323" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170021MQx.jpg" alt="" width="510" height="516" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170021w3O.jpg" alt="" width="510" height="585" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170027rOg.jpg" alt="" width="510" height="278" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170032GUU.jpg" alt="" width="510" height="242" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170057YMi.jpg" alt="" width="510" height="508" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170057ULK.jpg" alt="" width="510" height="584" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170058C23.jpg" alt="" width="510" height="509" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170103mSr.jpg" alt="" width="510" height="547" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170104QyN.jpg" alt="" width="510" height="505" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/1701050QN.jpg" alt="" width="510" height="350" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170105rK4.jpg" alt="" width="510" height="508" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170114BPh.jpg" alt="" width="537" height="515" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/1701204ld.jpg" alt="" width="510" height="506" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/1701251Oa.jpg" alt="" width="510" height="571" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170131n6t.jpg" alt="" width="510" height="502" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170136ffC.jpg" alt="" width="510" height="482" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170147UMY.jpg" alt="" width="510" height="400" /></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170147IB8.jpg" alt="" width="510" height="389" /></p>
<p align="left"><strong>本文所用颜色数值（RGB）：</strong></p>
<p align="center"><img src="http://www.iamued.com/wp-content/uploads/auto_save_image/2010/01/170148pfU.jpg" alt="" width="394" height="322" /></p>
<p><span><br />
</span></p>
<p align="left">
原文出处：<a href="http://www.bamagazine.com/" target="_blank">www.bamagazine.com</a></p>
<p align="left"><a href="http://www.logosky.net/webpage/artreview/3_panels_banner.html">转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html</a></p>
<h2  class="related_post_title">您可能还关注的？</h2><ul class="related_post"><li><a href="http://www.iamued.com/design/1581.html" title="如何做得Banner通情达意">如何做得Banner通情达意</a></li><li><a href="http://www.iamued.com/design/1453.html" title="设计师要会思考">设计师要会思考</a></li><li><a href="http://www.iamued.com/user/1287.html" title="什么是用户研究？全解析">什么是用户研究？全解析</a></li><li><a href="http://www.iamued.com/interaction/1264.html" title="交互设计指南系列(9)—一次点击">交互设计指南系列(9)—一次点击</a></li><li><a href="http://www.iamued.com/design/1232.html" title="视觉设计时不应产生新信息">视觉设计时不应产生新信息</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/design/1185.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
