<?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>鹏博 &#187; 留白</title>
	<atom:link href="http://pengblog.com/tag/%e7%95%99%e7%99%bd/feed/" rel="self" type="application/rss+xml" />
	<link>http://pengblog.com</link>
	<description>我的理想国</description>
	<lastBuildDate>Sat, 19 Nov 2011 05:40:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>网页设计的艺术–留白</title>
		<link>http://pengblog.com/garden/web-design-art-blank/</link>
		<comments>http://pengblog.com/garden/web-design-art-blank/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 09:58:00 +0000</pubDate>
		<dc:creator>Willper</dc:creator>
				<category><![CDATA[后花园]]></category>
		<category><![CDATA[留白]]></category>
		<category><![CDATA[网页设计]]></category>
		<category><![CDATA[设计欣赏]]></category>
		<category><![CDATA[酷站收藏]]></category>

		<guid isPermaLink="false">http://www.pengblog.com/design/web-design-art-blank/</guid>
		<description><![CDATA[　　在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间，就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。 　　提升到理念的高度来看待留白，这其实一种视觉上的手段，留白也可以给人带来心理上的轻松与快乐，也可以给人带来紧张与节奏，通过这种手段可以向使用者表达出设计者的心理感觉。 　　设计者在设计网页的同时也在同自己的使用对象在作一种交流，好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列，同时借助留白进行表达。可以达到非常好的效果，例如一个休闲的网站，设计者要传达给使用者的一个信息就是要是让他们轻松随意，无拘无束，光通过网页上的图片和文字的表达是干巴巴的，没有感情色彩的。如果能通过网页设计反映出这种感情色彩，显然这样的设计是较为高明的设计。能实现吗?当然可以，借助网页上的留白就可以，让留白更多的显示出自己的特色，在联系图片和文字的中间架起一道桥梁。 &#160; 留白的原则包括: 1、元素之间的留白不能太大 这是基本的原则，留白过多，页面会变得零碎。 2、文本中间的间隔不能太大 文本应当紧凑，尤其汉字文本，如果字与字之间或者行与行之间空白太大页面就会非常难看。 总的来说平衡、对比、连贯和留白设计四条原则是在网页设计中必须始终牢记，但绝不是教条，应当结合自己的实际需要灵活的应用。 以下是我收藏的十几个将留白运用到淋漓尽致的网页设计： Billings &#160;&#160; Tom Watson &#160; Speak Cultured Code Simon Foster Design Culinaria &#160; Pizza Express Paravel Larkef Matt Kursmark Delibar HiiDef Madewithpixels Hundred10 Emptees Reknit Hyperakt Fusion Ads]]></description>
			<content:encoded><![CDATA[<p>　　在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。国画中“画鱼不画水”的妙处就是留白的妙处。留白可以让访问者有更大的想象空间，就好像就如一个没有过多摆设的房间一样。上上下下、里里外外都塞得满满当当就是很糟糕的设计。</p>
<p><p>　　提升到理念的高度来看待留白，这其实一种视觉上的手段，留白也可以给人带来心理上的轻松与快乐，也可以给人带来紧张与节奏，通过这种手段可以向使用者表达出设计者的心理感觉。</p>
<p>　　设计者在设计网页的同时也在同自己的使用对象在作一种交流，好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列，同时借助留白进行表达。可以达到非常好的效果，例如一个休闲的网站，设计者要传达给使用者的一个信息就是要是让他们轻松随意，无拘无束，光通过网页上的图片和文字的表达是干巴巴的，没有感情色彩的。如果能通过网页设计反映出这种感情色彩，显然这样的设计是较为高明的设计。能实现吗?当然可以，借助网页上的留白就可以，让留白更多的显示出自己的特色，在联系图片和文字的中间架起一道桥梁。</p>
<p><span id="more-26"></span>
<p>&nbsp;</p>
<p><strong>留白的原则包括:</strong></p>
<p>1、元素之间的留白不能太大 这是基本的原则，留白过多，页面会变得零碎。</p>
<p>2、文本中间的间隔不能太大 文本应当紧凑，尤其汉字文本，如果字与字之间或者行与行之间空白太大页面就会非常难看。</p>
<p>总的来说平衡、对比、连贯和留白设计四条原则是在网页设计中必须始终牢记，但绝不是教条，应当结合自己的实际需要灵活的应用。</p>
<p>以下是我收藏的十几个将留白运用到淋漓尽致的网页设计：</p>
<h6><a href="http://www.billingsapp.com/iphone/">Billings</a></h6>
<p>&nbsp;<img title="Billings" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="410" alt="Billings" src="http://pengblog.com/wp-content/uploads/2010/02/Billings12.jpg" width="600" border="0">&nbsp; </p>
<h6><a href="http://tincorporated.com/">Tom Watson</a></h6>
<p>&nbsp;<img title="TomWatson" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="409" alt="TomWatson" src="http://pengblog.com/wp-content/uploads/2010/02/TomWatson12.jpg" width="600" border="0"></p>
<h6><a href="http://www.speakcreative.com/">Speak</a></h6>
<p><img title="Speak" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="395" alt="Speak" src="http://pengblog.com/wp-content/uploads/2010/02/Speak12.jpg" width="600" border="0"></p>
<h6><a href="http://www.culturedcode.com/">Cultured Code</a></h6>
<p><img title="CulturedCode" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="506" alt="CulturedCode" src="http://pengblog.com/wp-content/uploads/2010/02/CulturedCode12.jpg" width="600" border="0"></p>
<h6><a href="http://www.simonfosterdesign.com/">Simon Foster Design</a></h6>
<p><img title="SimonFosterDesign" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="415" alt="SimonFosterDesign" src="http://pengblog.com/wp-content/uploads/2010/02/SimonFosterDesign12.jpg" width="600" border="0"></p>
<h6><a href="http://www.culinariafoodandwine.com/">Culinaria</a></h6>
<p>&nbsp;<img title="Culinaria" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="430" alt="Culinaria" src="http://pengblog.com/wp-content/uploads/2010/02/Culinaria12.jpg" width="600" border="0"></p>
<h6><a href="http://www.pizzaexpress.com/">Pizza Express</a></h6>
<p><img title="PizzaExpress" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="401" alt="PizzaExpress" src="http://pengblog.com/wp-content/uploads/2010/02/PizzaExpress12.jpg" width="600" border="0"></p>
<h6><a href="http://paravelinc.com/">Paravel</a></h6>
<p><img title="Paravel" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="424" alt="Paravel" src="http://pengblog.com/wp-content/uploads/2010/02/Paravel12.jpg" width="600" border="0"></p>
<h6><a href="http://larkef.com/">Larkef</a></h6>
<p><img title="Larkef" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="481" alt="Larkef" src="http://pengblog.com/wp-content/uploads/2010/02/Larkef12.jpg" width="600" border="0"></p>
<h6><a href="http://www.mattkursmark.com/">Matt Kursmark</a></h6>
<p><img title="MattKursmark" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="421" alt="MattKursmark" src="http://pengblog.com/wp-content/uploads/2010/02/MattKursmark12.jpg" width="600" border="0"></p>
<h6><a href="http://www.delibarapp.com/">Delibar</a></h6>
<p><img title="Delibar" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="479" alt="Delibar" src="http://pengblog.com/wp-content/uploads/2010/02/Delibar12.jpg" width="600" border="0"></p>
<h6><a href="http://hiidef.com/">HiiDef</a></h6>
<p><img title="HiiDef1" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="444" alt="HiiDef1" src="http://pengblog.com/wp-content/uploads/2010/02/HiiDef112.jpg" width="600" border="0"></p>
<h6><a href="http://www.madewithpixels.co.uk/">Madewithpixels</a></h6>
<p><img title="Madewithpixels" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="464" alt="Madewithpixels" src="http://pengblog.com/wp-content/uploads/2010/02/Madewithpixels12.jpg" width="600" border="0"></p>
<h6><a href="http://hundred10.com/">Hundred10</a></h6>
<p><img title="Hundred10" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="428" alt="Hundred10" src="http://pengblog.com/wp-content/uploads/2010/02/Hundred1012.jpg" width="600" border="0"></p>
<h6><a href="http://emptees.com/">Emptees</a></h6>
<p><img title="Emptees1" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="416" alt="Emptees1" src="http://pengblog.com/wp-content/uploads/2010/02/Emptees112.jpg" width="600" border="0"></p>
<h6><a href="http://www.rekn.it/">Reknit</a></h6>
<p><img title="Reknit" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="534" alt="Reknit" src="http://pengblog.com/wp-content/uploads/2010/02/Reknit12.jpg" width="600" border="0"></p>
<h6><a href="http://www.hyperakt.com/">Hyperakt</a></h6>
<p><img title="Hyperakt1" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="440" alt="Hyperakt1" src="http://pengblog.com/wp-content/uploads/2010/02/Hyperakt112.jpg" width="600" border="0"></p>
<h6><a href="http://fusionads.net/">Fusion Ads</a></h6>
<p><img title="FusionAds1" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="463<br />
" alt="FusionAds1<br />
" src="http://pengblog.com/wp-content/uploads/2010/02/FusionAds112.jpg" width="600" border="0"></p>
]]></content:encoded>
			<wfw:commentRss>http://pengblog.com/garden/web-design-art-blank/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

