<?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>优艾点(UiSpot.com)&#124;生活的乐趣在于折腾 &#187; 邻近</title>
	<atom:link href="http://www.uispot.com/tag/%e9%82%bb%e8%bf%91/feed" rel="self" type="application/rss+xml" />
	<link>http://www.uispot.com</link>
	<description>又一个 WordPress 站点</description>
	<lastBuildDate>Tue, 17 Jan 2012 01:41:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>四个原则帮你设计一个好的网站</title>
		<link>http://www.uispot.com/20100204133.html</link>
		<comments>http://www.uispot.com/20100204133.html#comments</comments>
		<pubDate>Thu, 04 Feb 2010 04:36:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[UI教程]]></category>
		<category><![CDATA[对比]]></category>
		<category><![CDATA[对齐]]></category>
		<category><![CDATA[网站设计]]></category>
		<category><![CDATA[设计原则]]></category>
		<category><![CDATA[邻近]]></category>
		<category><![CDATA[重复]]></category>

		<guid isPermaLink="false">http://www.uispot.com/?p=133</guid>
		<description><![CDATA[我最喜欢的一本设计书籍要算《Robin Williams Design Workshop.》。它采用的设计理论和展示例子都非常棒。 我归纳了一下我设计中所采取的四大设计原则。它们包括：对比，重复，对齐和邻近。 这篇文章将讨论这四个原则，因为它们与网页设计息息相关。通过保持这些设计理论在你的耳边，你一定会设计更简洁、更美观的网站。 1。对比 巨大的反差可以给用户留下一个很好的第一印象。如果没有一个焦点，浏览者将会迷失在同样大小的元素和版式中。这是设计人员的工作创造意义的视觉元素，引导用户的体验。所以你可以选择你的图像、颜色和字体，并且合理地在您的网站形成对比，突出重点。 图片对比 这往往是非常有效的，以展示一个大画像旁边较小的元素。下面是我的意思： The Invoice Machine 这个网站采用了大量的图像，使在读者的注意。另外网站的单色性允许有限使用蓝色发挥更大的作用。 Instabox 这个网站做的视力检查。你先通知？更可能是包装盒上的明星。就像The Invoice Machine，他们已经使用一个大的图像和有限的颜色创建了一个焦点。 对比色 在色彩上喷洒适量的另一种对比色的方式来建立一个网站内有效的对比。它可以通过对标题和文本以及在一个图像或说明上采用不同的颜色。 Fatburgr 这个网站是一个非常适合用来说明设计原则的例子。对于色彩对比，我们可以通过大与小的浅灰黄色、对齐、图像对比度、重复和接近都运用的非常棒。 I Love Typography 有很多惊奇的是以展示印刷感觉的网站在头部的运用给了我们非常好的例子？我喜欢他们的字体选择，以及如何很好的发挥偏暗灰的绿色。 对比字体 如果您尝试创建具有字体的对比，你应该避免使用两个非常相似的字体和大小。字体的相似性，往往会造成混乱和模糊的设计。然而，如果你的字体大小不同，大胆的运用，它也可以非常有效传达出效果。此外，您会惊奇的发现您可以通过使用两种不同的字体在视觉效果令人印象深刻。 Fixie Consulting 哇！我喜欢本网站上的版式和颜色。检查所有的大小和点击他们口号的变化。我还喜欢随意的挥洒和比较巧妙的运用蓝色。 2。重复 在印刷设计中重复比在网页设计中运用的更为普遍，但重复的设计元素在网页设计中同样有效。这种手法有助于创造一种一致的外观，提高品牌。在网页设计一个伟大的方式实现这一目标是重复在页眉和页脚元素。可以看看下面的几个例子 Ten24 Media Ten24 Media在页眉和页脚都使用了草地找一个重复的元素。 Silverback 这个网站非常棒！虽然他的对比度上运用的非常棒，但我们从它的主题和品牌简单的重复手段的运用相比就弱了点。使用香蕉作为查看列表的图标，并在页眉和页脚用森林的元素。 3。对齐 对齐在网站设计扮演着一个从业余到专业的复杂的角色。我最近成为在网站设计中使用一个网格的倡导者。这样做可以规整你的设计为您提供了一个框架。 Black Estate Vineyard 此网站上展示的 960 Grid website.。它的路线是一致的。我主要喜欢内容和列的合理安排，较大的一级标题 ， 左侧侧边栏的转变和他们还做了大量留白和运用了字体和大小的对比。 A List Apart A List [...]<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="40个令人振奋的单页网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F20100160.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/19/23494043.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">40个令人振奋的单页网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="橙色风格的网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F201002112.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/20/23629208.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">橙色风格的网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="蓝色风格的网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F201002108.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">蓝色风格的网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="20个创意名片设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F20100228%2Fcreative-business-card-design-appreciation%2F&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/27/25867143.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">20个创意名片设计欣赏</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>我最喜欢的一本设计书籍要算《<a href="http://www.amazon.com/gp/product/0321441761?ie=UTF8&amp;tag=myi0a-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0321441761">Robin Williams Design Workshop</a>.》。它采用的设计理论和展示例子都非常棒。 我归纳了一下我设计中所采取的四大设计原则。它们包括：对比，重复，对齐和邻近。</p>
<p>这篇文章将讨论这四个原则，因为它们与网页设计息息相关。通过保持这些设计理论在你的耳边，你一定会设计更简洁、更美观的网站。</p>
<h2>1。对比</h2>
<p>巨大的反差可以给用户留下一个很好的第一印象。如果没有一个焦点，浏览者将会迷失在同样大小的元素和版式中。这是设计人员的工作创造意义的视觉元素，引导用户的体验。所以你可以选择你的图像、颜色和字体，并且合理地在您的网站形成对比，突出重点。</p>
<h3>图片对比</h3>
<p>这往往是非常有效的，以展示一个大画像旁边较小的元素。下面是我的意思：</p>
<h3>The Invoice Machine</h3>
<p>这个网站采用了大量的图像，使在读者的注意。另外网站的单色性允许有限使用蓝色发挥更大的作用。</p>
<p><a href="http://invoicemachine.com/home#googtrans/auto/zh-CN"><img title="invoice-machine1" src="http://www.myinkblog.com/wp-content/uploads/2009/03/invoice-machine1.png" alt="invoice-machine1" width="575" height="280" /></a></p>
<h3>Instabox</h3>
<p>这个网站做的视力检查。你先通知？更可能是包装盒上的明星。就像<a href="http://invoicemachine.com/home">The Invoice Machine</a>，他们已经使用一个大的图像和有限的颜色创建了一个焦点。</p>
<p><a href="http://www.instabox.com/#googtrans/auto/zh-CN"><img title="instabox1" src="http://www.myinkblog.com/wp-content/uploads/2009/03/instabox1.png" alt="instabox1" width="575" height="296" /></a></p>
<h3>对比色</h3>
<p>在色彩上喷洒适量的另一种对比色的方式来建立一个网站内有效的对比。它可以通过对标题和文本以及在一个图像或说明上采用不同的颜色。</p>
<h3>Fatburgr</h3>
<p>这个网站是一个非常适合用来说明设计原则的例子。对于色彩对比，我们可以通过大与小的浅灰黄色、对齐、图像对比度、重复和接近都运用的非常棒。</p>
<p><a href="http://fatburgr.com/#googtrans/auto/zh-CN"><img title="fatburgr" src="http://www.myinkblog.com/wp-content/uploads/2009/03/fatburgr.png" alt="fatburgr" width="575" height="351" /></a></p>
<h3>I Love Typography</h3>
<p>有很多惊奇的是以展示印刷感觉的网站在头部的运用给了我们非常好的例子？我喜欢他们的字体选择，以及如何很好的发挥偏暗灰的绿色。</p>
<p><a href="http://ilovetypography.com/#googtrans/auto/zh-CN"><img title="i-love-typography" src="http://www.myinkblog.com/wp-content/uploads/2009/03/i-love-typography.png" alt="i-love-typography" width="575" height="195" /></a></p>
<h3>对比字体</h3>
<p>如果您尝试创建具有字体的对比，你应该避免使用两个非常相似的字体和大小。字体的相似性，往往会造成混乱和模糊的设计。然而，如果你的字体大小不同，大胆的运用，它也可以非常有效传达出效果。此外，您会惊奇的发现您可以通过使用两种不同的字体在视觉效果令人印象深刻。</p>
<h3>Fixie Consulting</h3>
<p>哇！我喜欢本网站上的版式和颜色。检查所有的大小和点击他们口号的变化。我还喜欢随意的挥洒和比较巧妙的运用蓝色。</p>
<p><a href="http://fixieconsulting.com/#googtrans/auto/zh-CN"><img title="fixie-consulting" src="http://www.myinkblog.com/wp-content/uploads/2009/03/fixie-consulting.png" alt="fixie-consulting" width="575" height="329" /></a></p>
<h2>2。重复</h2>
<p>在印刷设计中重复比在网页设计中运用的更为普遍，但重复的设计元素在网页设计中同样有效。这种手法有助于创造一种一致的外观，提高品牌。在网页设计一个伟大的方式实现这一目标是重复在页眉和页脚元素。可以看看下面的几个例子</p>
<h3>Ten24 Media</h3>
<p><a href="http://www.1024media.com/">Ten24 Media</a>在页眉和页脚都使用了草地找一个重复的元素。</p>
<p><a href="http://www.1024media.com/#googtrans/auto/zh-CN"><img title="ten24-media" src="http://www.myinkblog.com/wp-content/uploads/2009/03/ten24-media.png" alt="ten24-media" width="575" height="576" /></a></p>
<h3>Silverback</h3>
<p>这个网站非常棒！虽然他的对比度上运用的非常棒，但我们从它的主题和品牌简单的重复手段的运用相比就弱了点。使用香蕉作为查看列表的图标，并在页眉和页脚用森林的元素。</p>
<p><a href="http://silverbackapp.com/#googtrans/auto/zh-CN"><img title="silverback" src="http://www.myinkblog.com/wp-content/uploads/2009/03/silverback.png" alt="silverback" width="575" height="351" /></a></p>
<h2>3。对齐</h2>
<p>对齐在网站设计扮演着一个从业余到专业的复杂的角色。我最近成为在网站设计中使用一个网格的倡导者。这样做可以规整你的设计为您提供了一个框架。</p>
<h3>Black Estate Vineyard</h3>
<p>此网站上展示的 <a href="http://960.gs/">960 Grid website</a>.。它的路线是一致的。我主要喜欢内容和列的合理安排，较大的一级标题 ， 左侧侧边栏的转变和他们还做了大量留白和运用了字体和大小的对比。</p>
<p><a href="http://www.blackestate.co.nz/#googtrans/auto/zh-CN"><img title="estate-black1" src="http://www.myinkblog.com/wp-content/uploads/2009/03/estate-black1.png" alt="estate-black1" width="575" height="447" /></a></p>
<h3>A List Apart</h3>
<p><a href="http://www.alistapart.com/">A List Apart</a> 具有明显的视觉网格。该列是明确和遏制一切非常可读块。研究表明 ， 真正宽列大大减少可读性。当试图在广泛的后续列宽的文本阅读时你的眼睛容易看累。</p>
<p><a href="http://www.alistapart.com/#googtrans/auto/zh-CN"><img title="a-list-apart1" src="http://www.myinkblog.com/wp-content/uploads/2009/03/a-list-apart1.png" alt="a-list-apart1" width="575" height="248" /></a></p>
<h2>4。邻近</h2>
<p>最后一个原则是接近。这是与这样的元素组合在一起，分离那些没有。它真的可以毁灭的用户体验，如果你到一个整组中的所有文本块。这就是为什么它很重视标题标签和使用适当的间距。</p>
<h3>Envato</h3>
<p>这个网站做了组织分为三大类它的内容，美丽的工作。他们有足够的间距，要明确界定。</p>
<p><a href="http://envato.com/#googtrans/auto/zh-CN"><img title="envato" src="http://www.myinkblog.com/wp-content/uploads/2009/03/envato.png" alt="envato" width="575" height="374" /></a></p>
<h3>Paradigm Reborn</h3>
<p>这个网站很有条理。该头是清晰，简明。间距是好的，内容分为逻辑块分开。</p>
<p><a href="http://www.createarevolution.com/#googtrans/auto/zh-CN"><img title="paradigm-reborn" src="http://www.myinkblog.com/wp-content/uploads/2009/03/paradigm-reborn.png" alt="paradigm-reborn" width="575" height="411" /></a></p>
<h2>最后的思考</h2>
<p>这是令人难以置信如何更好地将成为你的设计时，考虑到这四个基本原则。总是有更多的事情要考虑，但对比的基础上，重复，对齐和邻近将大大提高您的设计。</p>
<blockquote><p>本文由<a href="http://www.uipsot.com" target="_blank">优艾点</a>翻译，译自<a href="http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/">http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/</a>，转载注明出处，谢谢合作。</p></blockquote>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="4"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">无觅猜您也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="40个令人振奋的单页网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F20100160.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/19/23494043.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">40个令人振奋的单页网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="橙色风格的网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F201002112.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/20/23629208.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">橙色风格的网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="蓝色风格的网站设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F201002108.html&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/images/blogWidget/wordpress_default.gif" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">蓝色风格的网站设计欣赏</font>
                    </a>
                </td>
                <td width="102" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="20个创意名片设计欣赏" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.uispot.com%2F20100228%2Fcreative-business-card-design-appreciation%2F&from=http%3A%2F%2Fwww.uispot.com%2F20100204133.html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 96px !important; height: 96px !important;" src="http://static.wumii.com/site_images/2011/08/27/25867143.jpg" width="96px" height="96px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 102px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">20个创意名片设计欣赏</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="4" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.uispot.com/20100204133.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

