<?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>B3 bohemia&#039;s - 坚持创新，给设计多一点乐趣 &#187; 设计与产品</title>
	<atom:link href="http://blog.b3inside.com/tag/%e8%ae%be%e8%ae%a1%e4%b8%8e%e4%ba%a7%e5%93%81/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.b3inside.com</link>
	<description>User Experience.Art and Design.Photography.Bohemia and You</description>
	<lastBuildDate>Thu, 02 Sep 2010 14:24:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>砧板上的设计</title>
		<link>http://blog.b3inside.com/funnydesign/design-chopping-block/</link>
		<comments>http://blog.b3inside.com/funnydesign/design-chopping-block/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 13:33:00 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[范·设计]]></category>
		<category><![CDATA[生活]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=1038</guid>
		<description><![CDATA[新增了一个分类——范设计(Funny Design)，顾名思义，就是有趣的设计、有范儿的设计。“坚持创新，给设计多一点乐趣”是我一直以来所遵守的信条，我把它挂在blog的title里，时刻提醒自己，用心让每个设计都有与众不同之处，都能为用户带来乐趣。这段开场的话，写给自己，也写给同我一样热爱设计，喜欢创造的设计师们！ 每次炒菜麻烦的不是烟熏火燎的过程，而是准备材料，其中备辅料又是必不可少的，切蒜瓣儿、黄瓜片、葱末、辣椒丝儿……见“大厨们”娴熟地用菜刀把这堆东西从砧板上一股脑扒拉到锅里，除了仰慕外，就剩口水了。不过每天重复这样的过程，未免有点单调，如果备辅料也能有点乐趣，岂不更悠哉。 别说，还真有人设计出了个带碗的砧板（Bowlboard），这东西看着普通，其实就是在板子上搞了4个洞，把浅碗埋进去嘛！可为啥，你就没想到呢？ 接下来的事情就简单了，把切好的料分类放到碗里就OK了。 这个设计真的有在卖，不过贵了点，要69刀。不过还是远远的崇拜一下这位善于发现生活细节的设计师，为我打开了一扇灵感之门。 有趣的设计，就是在创作中，保留一份童真。 相关文章线轴助理 设计铸就伟大的产品 网页设计趋势发展历程之2009上


相关文章<ol><li><a href='http://blog.b3inside.com/funnydesign/bobbin-assistant/' rel='bookmark' title='Permanent Link: 线轴助理'>线轴助理</a></li>
<li><a href='http://blog.b3inside.com/userexperience/great-product-by-design/' rel='bookmark' title='Permanent Link: 设计铸就伟大的产品'>设计铸就伟大的产品</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009上'>网页设计趋势发展历程之2009上</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>新增了一个分类——范设计(Funny Design)，顾名思义，就是有趣的设计、有范儿的设计。“<strong>坚持创新，给设计多一点乐趣</strong>”是我一直以来所遵守的信条，我把它挂在blog的title里，时刻提醒自己，用心让每个设计都有与众不同之处，都能为用户带来乐趣。这段开场的话，写给自己，也写给同我一样热爱设计，喜欢创造的设计师们！</p>
<p>每次炒菜麻烦的不是烟熏火燎的过程，而是准备材料，其中备辅料又是必不可少的，切蒜瓣儿、黄瓜片、葱末、辣椒丝儿……见“大厨们”娴熟地用菜刀把这堆东西从砧板上一股脑扒拉到锅里，除了仰慕外，就剩口水了。不过每天重复这样的过程，未免有点单调，如果备辅料也能有点乐趣，岂不更悠哉。</p>
<p>别说，还真有人设计出了个带碗的砧板（Bowlboard），这东西看着普通，其实就是在板子上搞了4个洞，把浅碗埋进去嘛！可为啥，你就没想到呢？</p>
<p><a href="http://blog.b3inside.com/wp-content/uploads/2010/06/bowlboard01.jpg"><img class="alignnone size-medium wp-image-1036" title="bowlboard01" src="http://blog.b3inside.com/wp-content/uploads/2010/06/bowlboard01-400x282.jpg" alt="" width="400" height="282" /></a></p>
<p>接下来的事情就简单了，把切好的料分类放到碗里就OK了。</p>
<p><a href="http://blog.b3inside.com/wp-content/uploads/2010/06/bowlboard02.jpg"><img class="alignnone size-medium wp-image-1037" title="bowlboard02" src="http://blog.b3inside.com/wp-content/uploads/2010/06/bowlboard02-400x282.jpg" alt="" width="400" height="282" /></a></p>
<p>这个设计真的有在卖，不过贵了点，要<a title="真的想买？" href="http://store.yankodesign.com/home-and-office/kitchen-dining/bowlboard">69</a>刀。不过还是远远的崇拜一下这位善于发现生活细节的设计师，为我打开了一扇灵感之门。</p>
<p><strong>有趣的设计，就是在创作中，保留一份童真。</strong> </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/funnydesign/bobbin-assistant/' rel='bookmark' title='Permanent Link: 线轴助理'>线轴助理</a></li>
<li><a href='http://blog.b3inside.com/userexperience/great-product-by-design/' rel='bookmark' title='Permanent Link: 设计铸就伟大的产品'>设计铸就伟大的产品</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009上'>网页设计趋势发展历程之2009上</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/funnydesign/design-chopping-block/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>业界标竿·设计师的悲哀</title>
		<link>http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/</link>
		<comments>http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/#comments</comments>
		<pubDate>Tue, 23 Mar 2010 15:36:34 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[我的随笔]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=918</guid>
		<description><![CDATA[一个月前，一次需求评审中的争吵，让我开始对这个问题产生了兴趣。到底是什么束缚了设计师的创新？是做一个好的服从者？还是把自己独到的想法应用到产品设计中？ 这个问题绝对不是单选！在大公司中体现的尤为突出。来自各方面的制约——各种规范、各部门间的利益、各产品间互通，甚至个人喜好，都对最终产品的诞生起着潜移默化的影响。 在中国，没有几家互联网公司能给设计师很长时间去研究、创造……在这种环境下，我们听到最多的话就是：“某某是这么做的，你就照他那样做……”，“这个功能要加上，某某已经有这个功能了……” 一时间，随着某个产品、功能风起云涌，引得众人纷纷效仿，不久之后的市场上一定百花齐放，个别经典功能随之成了业界公认的标配，成了标竿。在它之后出现的产品，一定要具备前者身上所有特点。 这些需求给设计师提出了新的挑战：如果从一开始就模仿前人，这些设计师是幸运的，要做的就是继续模仿下去；而开始就倔强着，要为自己创造的，对不起，你必须继续艰难地创造下去。这，正是设计师的悲哀。但我坚信后者成功，在独立思考下结合自身特点，量身打造的产品，一定会成为有竞争力的产品，只有这样，才能整合起公司资源。 就拿风头正盛的微博来说，新浪微博的成功并非偶然，它代表了自己的特色和需求。去效仿新浪的微博不会成功，因为他的需求和你的未必一样，所拥有的资源也不尽相同。一定要有自己的特色，不能被标竿累住，今天在老板面前倔强，是为了让你的团队、你的产品在明天的市场上倔强。 踏着别人的脚步前进，超越就无从谈起！ 悲哀来源于对产品认识不足、自信心不够，所以总被需求方用业界标竿打压。在基础架构上创新，制造差异化，做有灵魂的产品。团队信心的培养非常重要，让每位成员在自己岗位上都有创新，收获自信，团队才能更有凝聚力。同时，在说服对方之前，先尊重对方，倾听从他的角度出发得出的结论，不要急于否定。 相关文章2009互联网产品盘点 未来我们只需要浏览器 互联网产品中的邀请机制


相关文章<ol><li><a href='http://blog.b3inside.com/essay/2009-inventory-of-internet-products/' rel='bookmark' title='Permanent Link: 2009互联网产品盘点'>2009互联网产品盘点</a></li>
<li><a href='http://blog.b3inside.com/essay/we-need-browser-only-in-the-future/' rel='bookmark' title='Permanent Link: 未来我们只需要浏览器'>未来我们只需要浏览器</a></li>
<li><a href='http://blog.b3inside.com/essay/invitation-mechanism-for-internet-products/' rel='bookmark' title='Permanent Link: 互联网产品中的邀请机制'>互联网产品中的邀请机制</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>一个月前，一次需求评审中的争吵，让我开始对这个问题产生了兴趣。到底是什么束缚了设计师的创新？是做一个好的服从者？还是把自己独到的想法应用到产品设计中？</p>
<p>这个问题绝对不是单选！在大公司中体现的尤为突出。来自各方面的制约——各种规范、各部门间的利益、各产品间互通，甚至个人喜好，都对最终产品的诞生起着潜移默化的影响。</p>
<p>在中国，没有几家互联网公司能给设计师很长时间去研究、创造……在这种环境下，我们听到最多的话就是：“某某是这么做的，你就照他那样做……”，“这个功能要加上，某某已经有这个功能了……” 一时间，随着某个产品、功能风起云涌，引得众人纷纷效仿，不久之后的市场上一定百花齐放，个别经典功能随之成了业界公认的标配，成了标竿。在它之后出现的产品，一定要具备前者身上所有特点。</p>
<p>这些需求给设计师提出了新的挑战：如果从一开始就模仿前人，这些设计师是幸运的，要做的就是继续模仿下去；而开始就倔强着，要为自己创造的，对不起，你必须继续艰难地创造下去。这，正是设计师的悲哀。但我坚信后者成功，在独立思考下结合自身特点，量身打造的产品，一定会成为有竞争力的产品，只有这样，才能整合起公司资源。</p>
<p>就拿风头正盛的微博来说，新浪微博的成功并非偶然，它代表了自己的特色和需求。去效仿新浪的微博不会成功，因为他的需求和你的未必一样，所拥有的资源也不尽相同。一定要有自己的特色，不能被标竿累住，今天在老板面前倔强，是为了让你的团队、你的产品在明天的市场上倔强。</p>
<blockquote><p><strong>踏着别人的脚步前进，超越就无从谈起！</strong></p>
<p><a href="http://blog.b3inside.com/wp-content/uploads/2010/03/pic1.jpg"><img class="size-full wp-image-978 alignnone" title="踏着别人的脚步前进，超越就无从谈起" src="http://blog.b3inside.com/wp-content/uploads/2010/03/pic1.jpg" alt="" width="226" height="300" /></a></p></blockquote>
<p>悲哀来源于对产品认识不足、自信心不够，所以总被需求方用业界标竿打压。在基础架构上创新，制造差异化，做有灵魂的产品。团队信心的培养非常重要，让每位成员在自己岗位上都有创新，收获自信，团队才能更有凝聚力。同时，在说服对方之前，先尊重对方，倾听从他的角度出发得出的结论，不要急于否定。 </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/essay/2009-inventory-of-internet-products/' rel='bookmark' title='Permanent Link: 2009互联网产品盘点'>2009互联网产品盘点</a></li>
<li><a href='http://blog.b3inside.com/essay/we-need-browser-only-in-the-future/' rel='bookmark' title='Permanent Link: 未来我们只需要浏览器'>未来我们只需要浏览器</a></li>
<li><a href='http://blog.b3inside.com/essay/invitation-mechanism-for-internet-products/' rel='bookmark' title='Permanent Link: 互联网产品中的邀请机制'>互联网产品中的邀请机制</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>2009互联网产品盘点</title>
		<link>http://blog.b3inside.com/essay/2009-inventory-of-internet-products/</link>
		<comments>http://blog.b3inside.com/essay/2009-inventory-of-internet-products/#comments</comments>
		<pubDate>Tue, 19 Jan 2010 05:36:13 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[我的随笔]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=895</guid>
		<description><![CDATA[UCDChina进入2010年的第一个话题就是盘点过去一年里，中国互联网、乃至国外都有哪些新产品出现，或者更广义的说，有哪些领域的产品发生了变化——改变互联网格局，或改变人们生活。 国内 书友会前跟千鸟回忆了一下09年有哪些产品让互联网界一直忙碌着，想来想去，好像前半年忙活SNS（狭义的），后半年忙活微博。这一年中国互联网界基本围绕社会性网络开展各项活动，各大网站争相试水。在SNS新品中颇具影响力的属搜狐的白社会。 微博可谓是09后半年炒的最火的。以新浪微博为代表，被用户戏称“围脖”；09年底ChinaRen推出为学生用户量身打造的校园微博，打好了一场收官之战。提起微博概念，并不是09年的才出现的新玩意，在中国做互联网得先倒下一批探路者，玩概念往往成就的是后起之秀。不知道饭否流浪到哪里去了，向它致个敬。 目前市面上大大小小的微博产品：Twitter（始祖）、饭否、校园微博、嘀咕（火兔）、腾讯滔滔、腾讯广播（在QQ邮箱里）、新浪微博、做啥、9911、同学网、鲜果联播、网易微博、蟹爪、Follow5、雷猴、贵州客、赶牛、外面网、雅虎meme、Jaiku、随心、说客、半朵、中金、人民微博、ZOL微博 …… 新产品是09年的一部分，另一部分就是改版。身边的两个网站就有不小的变化，淘宝首页改版，支付宝改版（关于支付宝改版，白鸦说前前后后那些事都能出本书，到时候听他讲吧。） 国外 Yahoo!首页改版，Google首页改版，同时推出Google Wave。 Yahoo!改版 Google改版 其中Google 2009年一年在搜索上做的小改进就540次，平均每天有近1.5次。此数据来自谷奥 Twitter发展的当然更加红火，但在中国无法访问着实让人惋惜。随着它的逐渐壮大，周边产品也应运而生，缩短域名服务的产生，无疑在简洁明了上，又推了微博一把。而且这些服务商的域名也一个比一个的短，像bit.ly，j.mp等等，不一一列举了，总之有很多很多，甚至还有提供短域名跟踪服务的，帮你统计管理你生成的每条短域名。 展望一下2010年互联网产品，至少在国内，微博还将继续发展下去，或许能迎来爆发，拭目以待。 P.S. 顺便说一句千鸟的新书《设计网事》，周日书友会陪他取书样回来，粗读了一下，这是本极富情感的书。不单单是内容，更在于文章形式上，如果你曾是千鸟志的读者，并参与过话题讨论，会让你感觉很亲切，因为你可能会在文章末尾找到你的评论。 这是一本思想交流的书，不是只一味宣扬作者对一个事件的看法，从评论里还能看到其他人所处的角度。在书里我惊喜地找到以前对某些问题的评论，分别在P106，P231，前面好像还有几条，没记住。总之，它让我觉得这本书离我很近，有参与感。 相关文章业界标竿·设计师的悲哀 介绍两个画流程图的软件 聊聊“要购物，先百度”如何养成


相关文章<ol><li><a href='http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/' rel='bookmark' title='Permanent Link: 业界标竿·设计师的悲哀'>业界标竿·设计师的悲哀</a></li>
<li><a href='http://blog.b3inside.com/essay/draw-a-beautiful-flow/' rel='bookmark' title='Permanent Link: 介绍两个画流程图的软件'>介绍两个画流程图的软件</a></li>
<li><a href='http://blog.b3inside.com/essay/educate-people-to-search-goods/' rel='bookmark' title='Permanent Link: 聊聊“要购物，先百度”如何养成'>聊聊“要购物，先百度”如何养成</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a title="访问UCDChina" href="http://ucdchina.com/">UCDChina</a>进入2010年的第一个话题就是盘点过去一年里，中国互联网、乃至国外都有哪些新产品出现，或者更广义的说，有哪些领域的产品发生了变化——改变互联网格局，或改变人们生活。</p>
<h3>国内</h3>
<p>书友会前跟<a title="访问千鸟志" href="http://blog.rexsong.com/">千鸟</a>回忆了一下09年有哪些产品让互联网界一直忙碌着，想来想去，好像前半年忙活SNS（狭义的），后半年忙活微博。这一年中国互联网界基本围绕社会性网络开展各项活动，各大网站争相试水。在SNS新品中颇具影响力的属搜狐的<a title="访问搜狐白社会" href="http://bai.sohu.com">白社会</a>。</p>
<p>微博可谓是09后半年炒的最火的。以<a title="访问新浪微博" href="http://t.sina.com.cn">新浪微博</a>为代表，被用户戏称“围脖”；09年底ChinaRen推出为学生用户量身打造的<a title="访问校园微博" href="http://t.chinaren.com">校园微博</a>，打好了一场收官之战。提起微博概念，并不是09年的才出现的新玩意，在中国做互联网得先倒下一批探路者，玩概念往往成就的是后起之秀。不知道饭否流浪到哪里去了，向它致个敬。</p>
<p>目前市面上大大小小的微博产品：<a title="Twitter" href="http://twitter.com">Twitter</a>（始祖）、饭否、<a title="校园微博" href="http://t.chinaren.com">校园微博</a>、<a title="嘀咕" href="http://digu.com/">嘀咕</a>（火兔）、<a title="腾讯滔滔" href="http://www.taotao.com/">腾讯滔滔</a>、腾讯广播（在QQ邮箱里）、<a title="新浪微博" href="http://t.sina.com.cn">新浪微博</a>、<a title="做啥" href="http://zuosa.com/">做啥</a>、<a title="9911" href="http://www.9911.com/">9911</a>、<a title="同学网" href="http://tongxue.com/">同学网</a>、<a title="鲜果联播" href="http://bo.xianguo.com/">鲜果联播</a>、<a title="网易微博" href="http://t.163.com/">网易微博</a>、<a title="蟹爪" href="http://xiezhua.com/">蟹爪</a>、<a title="Follow5" href="http://www.follow5.com/">Follow5</a>、<a title="雷猴" href="http://leihou.com/">雷猴</a>、<a title="贵州客" href="http://gzke.cn/">贵州客</a>、<a title="赶牛" href="http://www.ganniu.com/">赶牛</a>、<a title="外面网" href="http://www.waimian.net.cn/">外面网</a>、<a title="Meme" href="http://meme.yahoo.com/">雅虎meme</a>、<a title="Jaiku" href="http://www.jaiku.com/">Jaiku</a>、<a title="随心" href="http://swisen.com/">随心</a>、<a title="说客" href="http://www.139.com">说客</a>、<a title="半朵" href="http://banduo.net/">半朵</a>、<a title="中金" href="http://t.cnfol.com/">中金</a>、<a title="人民微博" href="http://t.people.com.cn/">人民微博</a>、<a title="ZOL微博" href="http://t.zol.com.cn/">ZOL微博</a> ……</p>
<p>新产品是09年的一部分，另一部分就是改版。身边的两个网站就有不小的变化，淘宝首页改版，支付宝改版（关于支付宝改版，<a title="以用户为中心的设计" href="http://uicom.net/blog/">白鸦</a>说前前后后那些事都能出本书，到时候听他讲吧。）</p>
<p><span id="more-895"></span></p>
<h3>国外</h3>
<p>Yahoo!首页改版，Google首页改版，同时推出<a title="Google Wave" href="https://wave.google.com/">Google Wave</a>。</p>
<p>Yahoo!改版<br />
<a href="http://blog.b3inside.com/wp-content/uploads/2010/01/Yahoo.png"><img class="alignnone size-medium wp-image-901" title="Yahoo!" src="http://blog.b3inside.com/wp-content/uploads/2010/01/Yahoo-400x399.png" alt="" width="400" height="399" /></a></p>
<p>Google改版<br />
<a href="http://blog.b3inside.com/wp-content/uploads/2010/01/Google_usa.png"><img class="alignnone size-medium wp-image-902" title="Google_usa" src="http://blog.b3inside.com/wp-content/uploads/2010/01/Google_usa-400x338.png" alt="" width="400" height="338" /></a></p>
<p>其中Google 2009年一年在搜索上做的小改进就540次，平均每天有近1.5次。此数据来自<a title="谷奥" href="http://www.google.org.cn/posts/fun-facts-about-google-in-2009.html">谷奥</a></p>
<p>Twitter发展的当然更加红火，但在中国无法访问着实让人惋惜。随着它的逐渐壮大，周边产品也应运而生，缩短域名服务的产生，无疑在简洁明了上，又推了微博一把。而且这些服务商的域名也一个比一个的短，像<a title="bit.ly" href="http://bit.ly">bit.ly</a>，<a title="j.mp" href="http://j.mp">j.mp</a>等等，不一一列举了，总之有很多很多，甚至还有提供短域名跟踪服务的，帮你统计管理你生成的每条短域名。</p>
<p>展望一下2010年互联网产品，至少在国内，微博还将继续发展下去，或许能迎来爆发，拭目以待。</p>
<p>P.S. 顺便说一句千鸟的新书<a title="《设计网事》专题" href="http://rexsong.com/publication/web_design_thoughts/">《设计网事》</a>，周日书友会陪他取书样回来，粗读了一下，这是本极富情感的书。不单单是内容，更在于文章形式上，如果你曾是千鸟志的读者，并参与过话题讨论，会让你感觉很亲切，因为你可能会在文章末尾找到你的评论。</p>
<p>这是一本思想交流的书，不是只一味宣扬作者对一个事件的看法，从评论里还能看到其他人所处的角度。在书里我惊喜地找到以前对某些问题的评论，分别在P106，P231，前面好像还有几条，没记住。总之，它让我觉得这本书离我很近，有参与感。 </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/' rel='bookmark' title='Permanent Link: 业界标竿·设计师的悲哀'>业界标竿·设计师的悲哀</a></li>
<li><a href='http://blog.b3inside.com/essay/draw-a-beautiful-flow/' rel='bookmark' title='Permanent Link: 介绍两个画流程图的软件'>介绍两个画流程图的软件</a></li>
<li><a href='http://blog.b3inside.com/essay/educate-people-to-search-goods/' rel='bookmark' title='Permanent Link: 聊聊“要购物，先百度”如何养成'>聊聊“要购物，先百度”如何养成</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/essay/2009-inventory-of-internet-products/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>互联网产品中的邀请机制</title>
		<link>http://blog.b3inside.com/essay/invitation-mechanism-for-internet-products/</link>
		<comments>http://blog.b3inside.com/essay/invitation-mechanism-for-internet-products/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 16:00:32 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[我的随笔]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=819</guid>
		<description><![CDATA[邀请机制？我的第一反应就是Gmail，最早拥有Gmail帐户的同学都是在焦急和期待中过来的。渐渐，这种方式被互联网产品延续开来，进而形成一种模式。这种看似“朴实”的方法背后，隐含着的却是一整套周密的商业模式。在吊足用户胃口同时，大赚口碑和关注度，名利兼收。可邀请不是谁都能发的，你得先确认自己有那个范儿。 什么样的网站适合利用邀请机制 首先有一定得品牌影响力，再利用邀请机制吸引用户就等同于广告，而这种广告是用户的口碑传播，转化率很高。 如果是新入行的网站，使用邀请要慎重，本来就啥也没有呢，再给自己加个门槛，当心自己把自己玩死。 垂直型、内容足够有吸引力的网站除外。这种网站不重用户数量，重质量。 互联网产品中的邀请 邀请使用新产品。通过邀请码、邀请信等，让新用户获得使用新产品的机会。 邀请使用产品功能、参与互动。如SNS中邀请好友加入某游戏一起使用。 从邀请机制中得到了什么 普通用户。一来是虚荣心驱使，先体验了某个抢手产品后心理上的优越，有炫耀的成分；二来是利益驱使，邀请好友加入社交网站游戏以获得更多游戏币。 网站。获得了口碑、知名度和关注度等。得到更多用户才是网站盈利的基础。 邀请机制也是一种营销手段，在产品设计初期就有一个配套的营销运营方案，会让产品更有计划的展现给用户，在生命周期中良性迭代。 相关文章2009互联网产品盘点 业界标竿·设计师的悲哀 B3王者归来


相关文章<ol><li><a href='http://blog.b3inside.com/essay/2009-inventory-of-internet-products/' rel='bookmark' title='Permanent Link: 2009互联网产品盘点'>2009互联网产品盘点</a></li>
<li><a href='http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/' rel='bookmark' title='Permanent Link: 业界标竿·设计师的悲哀'>业界标竿·设计师的悲哀</a></li>
<li><a href='http://blog.b3inside.com/essay/b3-is-back/' rel='bookmark' title='Permanent Link: B3王者归来'>B3王者归来</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>邀请机制？我的第一反应就是Gmail，最早拥有Gmail帐户的同学都是在焦急和期待中过来的。渐渐，这种方式被互联网产品延续开来，进而形成一种模式。这种看似“朴实”的方法背后，隐含着的却是一整套周密的商业模式。在吊足用户胃口同时，大赚口碑和关注度，名利兼收。可邀请不是谁都能发的，你得先确认自己有那个范儿。</p>
<p><strong>什么样的网站适合利用邀请机制</strong></p>
<ol>
<li>首先有一定得品牌影响力，再利用邀请机制吸引用户就等同于广告，而这种广告是用户的口碑传播，转化率很高。</li>
<li>如果是新入行的网站，使用邀请要慎重，本来就啥也没有呢，再给自己加个门槛，当心自己把自己玩死。</li>
<li>垂直型、内容足够有吸引力的网站除外。这种网站不重用户数量，重质量。</li>
</ol>
<p><strong>互联网产品中的邀请</strong></p>
<ol>
<li>邀请使用新产品。通过邀请码、邀请信等，让新用户获得使用新产品的机会。</li>
<li>邀请使用产品功能、参与互动。如SNS中邀请好友加入某游戏一起使用。</li>
</ol>
<p><strong>从邀请机制中得到了什么</strong></p>
<ol>
<li>普通用户。一来是虚荣心驱使，先体验了某个抢手产品后心理上的优越，有炫耀的成分；二来是利益驱使，邀请好友加入社交网站游戏以获得更多游戏币。</li>
<li>网站。获得了口碑、知名度和关注度等。得到更多用户才是网站盈利的基础。</li>
</ol>
<p>邀请机制也是一种营销手段，在产品设计初期就有一个配套的营销运营方案，会让产品更有计划的展现给用户，在生命周期中良性迭代。 </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/essay/2009-inventory-of-internet-products/' rel='bookmark' title='Permanent Link: 2009互联网产品盘点'>2009互联网产品盘点</a></li>
<li><a href='http://blog.b3inside.com/essay/benchmarking-is-sad-of-designers/' rel='bookmark' title='Permanent Link: 业界标竿·设计师的悲哀'>业界标竿·设计师的悲哀</a></li>
<li><a href='http://blog.b3inside.com/essay/b3-is-back/' rel='bookmark' title='Permanent Link: B3王者归来'>B3王者归来</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/essay/invitation-mechanism-for-internet-products/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>开发iPhone版校友录</title>
		<link>http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/</link>
		<comments>http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/#comments</comments>
		<pubDate>Fri, 28 Aug 2009 10:59:52 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[设计灵感]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=796</guid>
		<description><![CDATA[这几天忙个合作，开发iPhone版校友录。用了很久的iPhone，为它量身定制一套页面还是头一次，好在限制不是很多，会写html基本呈现就不成问题了，外加注意一些特殊处理方法，一个iPhone版网页就搞定了。 写在前面的话： iPhone屏幕分辨率是320&#215;480（160dpi） 虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试； &#60;a&#62;标签不用描述hover，点下去就跳转了，想想也知道没法悬停； 项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易： doctype的设定： &#60;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&#62; 在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。 屏幕自适应宽度问题： &#60;meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&#62; 分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大； 可按自己需要增加配置。 添加到主屏幕的favcion： &#60;link href="/apple-touch-icon.png" rel="apple-touch-icon"&#62; 这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。 字体大小 默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。 跳过头部到页面某个位置 可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~ 访问www自动跳转到iPhone站 Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3 PHP实现方法： if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){ header("location:/iphone/"); die(); [...]


相关文章<ol><li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
<li><a href='http://blog.b3inside.com/essay/wordpress-redirect-exploit/' rel='bookmark' title='Permanent Link: WordPress重定向漏洞'>WordPress重定向漏洞</a></li>
<li><a href='http://blog.b3inside.com/design/more-web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009下'>网页设计趋势发展历程之2009下</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>这几天忙个合作，开发iPhone版校友录。用了很久的iPhone，为它量身定制一套页面还是头一次，好在限制不是很多，会写html基本呈现就不成问题了，外加注意一些特殊处理方法，一个iPhone版网页就搞定了。</p>
<p>写在前面的话：</p>
<ol>
<li>iPhone屏幕分辨率是320&#215;480（160dpi）</li>
<li>虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试；</li>
<li>&lt;a&gt;标签不用描述hover，点下去就跳转了，想想也知道没法悬停；</li>
</ol>
<p><span id="more-796"></span>项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易：</p>
<ol>
<li><strong>doctype的设定：</strong><br />
<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;</code><br />
在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。</li>
<li><strong>屏幕自适应宽度问题：</strong><br />
<code>&lt;meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&gt;</code><br />
分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大；<br />
可按自己需要增加配置。</li>
<li><strong>添加到主屏幕的favcion：</strong><br />
<code>&lt;link href="/apple-touch-icon.png" rel="apple-touch-icon"&gt;</code><br />
这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。</li>
<li><strong>字体大小</strong><br />
默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。</li>
<li><strong>跳过头部到页面某个位置</strong><br />
可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~</li>
<li><strong>访问www自动跳转到iPhone站</strong><br />
<code>Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3</code><br />
PHP实现方法：<br />
<code>if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){<br />
header("location:/iphone/");<br />
die();<br />
}</code>JS实现方法：<br />
<code>&lt;script language="javascript"&gt;<br />
&lt;!--<br />
//2007-11-24 hqlulu for iphone<br />
var userAgent=navigator.userAgent;<br />
if(userAgent.indexOf("iPhone")&gt;0)<br />
window.location="/iphone/";<br />
//--&gt;<br />
&lt;/script&gt;</code><br />
参考<a href="http://www.aslibra.com/blog/read.php?944">阿权的实现方法</a></li>
</ol>
<p>另外，Mac用户可以使用<a href="http://developer.apple.com/iphone/">iPhone Dev Center</a>里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。 </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
<li><a href='http://blog.b3inside.com/essay/wordpress-redirect-exploit/' rel='bookmark' title='Permanent Link: WordPress重定向漏洞'>WordPress重定向漏洞</a></li>
<li><a href='http://blog.b3inside.com/design/more-web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009下'>网页设计趋势发展历程之2009下</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>网页设计趋势发展历程之2009下</title>
		<link>http://blog.b3inside.com/design/more-web-design-trends-for-2009/</link>
		<comments>http://blog.b3inside.com/design/more-web-design-trends-for-2009/#comments</comments>
		<pubDate>Sun, 07 Jun 2009 02:45:57 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[设计灵感]]></category>
		<category><![CDATA[设计与产品]]></category>
		<category><![CDATA[设计趋势]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=643</guid>
		<description><![CDATA[More Web Design Trends For 2009 Smashing Magazine版权所有 作者：Smashing Magazine 译者：UCD翻译小组，波希米亚 原文地址： http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/ 译者序：09年快过去一半了，虽然文章早翻译好了，但懒了，一直没上。不过这篇文章有效期不止12个月，它依然可以指导我们在未来的设计中做出更好的页面，值得好好阅读和收藏。 系列文章：网页设计趋势发展历程之2009上 2009年网页设计趋势下 首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。 1. 出格布局 2. 单页布局 3. 多栏布局 4. 巨型插图和充满活力的图形 5. 比以往更多的留白 6. 社会设计元素 7. 对话式导航 8. 动态的tab 9. 大搜索框 10. 为分类增加视觉效果 11. 作者头像 12. 图标和视觉提示 13. tag索引（替代tag云） 14. 在blog中使用插图 15. 水彩画 16. 手写体 17. 复古 18. 用有机材质、砖瓦和摄影作品做背景 19. 标记印章 [...]


相关文章<ol><li><a href='http://blog.b3inside.com/design/web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009上'>网页设计趋势发展历程之2009上</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2006/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2006'>网页设计趋势发展历程之2006</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>More Web Design Trends For 2009<br />
Smashing Magazine版权所有<br />
作者：<a href="http://www.smashingmagazine.com/">Smashing Magazine</a><br />
译者：<a href="http://ucdchina.com/topic/59">UCD翻译小组</a>，<a href="http://blog.b3inside.com/">波希米亚</a><br />
原文地址： <a href="http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/">http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/</a><br />
<em></em></p>
<p><em>译者序：09年快过去一半了，虽然文章早翻译好了，但懒了，一直没上。不过这篇文章有效期不止12个月，它依然可以指导我们在未来的设计中做出更好的页面，值得好好阅读和收藏。</em></p>
<p>系列文章：<a title="查看相关文章" href="http://blog.b3inside.com/design/web-design-trends-for-2009/">网页设计趋势发展历程之2009上</a></p>
<h3>2009年网页设计趋势下</h3>
<p>首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。</p>
<p>1. 出格布局</p>
<p><a href="http://hipsterist.com/"><img class="alignnone size-full wp-image-651" title="trend-01" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-01.gif" alt="trend-01" width="325" height="175" /></a></p>
<p><span id="more-643"></span>2. 单页布局</p>
<p><a href="http://www.taptaptap.com/#groceries"><img class="alignnone size-full wp-image-652" title="trend-02" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-02.jpg" alt="trend-02" width="325" height="175" /></a></p>
<p>3. 多栏布局</p>
<p><a href="http://fortysevenmedia.com/"><img class="alignnone size-full wp-image-653" title="trend-03" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-03.jpg" alt="trend-03" width="325" height="175" /></a></p>
<p>4. 巨型插图和充满活力的图形</p>
<p><a href="http://www.versionsapp.com/"><img class="alignnone size-full wp-image-654" title="trend-04" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-04.jpg" alt="trend-04" width="325" height="175" /></a></p>
<p>5. 比以往更多的留白</p>
<p><a href="http://signup.createsend.com/signup.aspx"><img class="alignnone size-full wp-image-655" title="trend-05" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-05.jpg" alt="trend-05" width="325" height="175" /></a></p>
<p>6. 社会设计元素</p>
<p><a href="http://www.psdtuts.com/"><img class="alignnone size-full wp-image-656" title="trend-06" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-06.jpg" alt="trend-06" width="325" height="175" /></a></p>
<p>7. <a title="查看相关文章" href="http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/">对话式导航</a></p>
<p><a href="http://www.davidhellmann.com/"><img class="alignnone size-full wp-image-657" title="trend-07" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-07.jpg" alt="trend-07" width="325" height="175" /></a></p>
<p>8. 动态的tab</p>
<p><a href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"><img class="alignnone size-full wp-image-658" title="trend-08" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-08.jpg" alt="trend-08" width="325" height="175" /></a></p>
<p>9. 大搜索框</p>
<p><img class="alignnone size-full wp-image-659" title="trend-09" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-09.jpg" alt="trend-09" width="325" height="175" /></p>
<p>10. 为分类增加视觉效果</p>
<p><a href="http://matthewbuchanan.name/day/2008/08/22/"><img class="alignnone size-full wp-image-660" title="trend-10" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-10.jpg" alt="trend-10" width="325" height="175" /></a></p>
<p>11. 作者头像</p>
<p><a href="http://www.viget.com/advance/5-lessons-from-a-cartoonist-applied-to-the-website-creation-process/"><img class="alignnone size-full wp-image-661" title="trend-11" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-11.jpg" alt="trend-11" width="325" height="175" /></a></p>
<p>12. 图标和视觉提示</p>
<p><img class="alignnone size-full wp-image-662" title="trend-12" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-12.gif" alt="trend-12" width="325" height="175" /></p>
<p>13. <a title="查看相关文章" href="http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/">tag索引</a>（替代tag云）</p>
<p><a href="http://maniacalrage.net/past/tags"><img class="alignnone size-full wp-image-663" title="trend-13" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-13.jpg" alt="trend-13" width="325" height="175" /></a></p>
<p>14. 在blog中使用插图</p>
<p><a href="http://abduzeedo.com/"><img class="alignnone size-full wp-image-664" title="trend-14" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-14.jpg" alt="trend-14" width="325" height="175" /></a></p>
<p>15. 水彩画</p>
<p><a href="http://boompa.ca/"><img class="alignnone size-full wp-image-665" title="trend-15" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-15.jpg" alt="trend-15" width="325" height="175" /></a></p>
<p>16. <a title="查看相关文章" href="http://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/">手写体</a></p>
<p><a href="http://www.onskelista.nu/"><img class="alignnone size-full wp-image-666" title="trend-16" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-16.jpg" alt="trend-16" width="325" height="175" /></a></p>
<p>17. <a title="查看相关文章" href="http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/">复古</a></p>
<p><a href="http://csstinderbox.raykonline.com/"><img class="alignnone size-full wp-image-667" title="trend-17" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-17.jpg" alt="trend-17" width="325" height="175" /></a></p>
<p>18. <a title="查看相关文章" href="http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/">用有机材质、砖瓦和摄影作品做背景</a></p>
<p><a href="http://www.brainwashfactory.org/"><img class="alignnone size-full wp-image-668" title="trend-18" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-18.jpg" alt="trend-18" width="325" height="175" /></a></p>
<p>19. 标记印章</p>
<p><a href="http://www.wearableprint.co.uk/catalogues/#free-quote"><img class="alignnone size-full wp-image-669" title="trend-19" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-19.jpg" alt="trend-19" width="325" height="175" /></a></p>
<p>20. 价签</p>
<p><a href="http://capturethevalley.com/"><img class="alignnone size-full wp-image-670" title="trend-20" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-20.jpg" alt="trend-20" width="325" height="175" /></a></p>
<p>21. 丝带</p>
<p><a href="http://www.spd.org/"><img class="alignnone size-full wp-image-650" title="trend-21" src="http://blog.b3inside.com/wp-content/uploads/2009/05/trend-21.jpg" alt="trend-21" width="325" height="175" /></a></p>
<h3>出格布局</h3>
<p>正如在几个月前所做的<a title="40个创新设计布局：出格布局" href="http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/">40个创新设计布局：出格布局</a>的展示那样，我们正在观察一种向更具个性和创新性布局发展的强大趋势。与使用传统四四方方的盒状布局不同，设计师们正在尝试新的信息结构、呈现和表达方式。</p>
<p>在这些<strong>出格布局设计</strong>中，整体创意往往比具体内容更重要，也更令人难忘。尽管如此，可用性、版式和视觉设计也很少被忽视，并被谨慎地执行。创新布局在大项目、网站设计机构和宣传网站（如大公司的商业活动）中尤为流行，但它也同样流行于blog中。</p>
<p><a href="http://hipsterist.com/"><img class="alignnone size-full wp-image-673" title="hipsterist" src="http://blog.b3inside.com/wp-content/uploads/2009/06/hipsterist.jpg" alt="hipsterist" width="500" height="320" /></a></p>
<p>提到创意，可用和不可用设计之间的界限就非常模糊了；因此，可用性测试就显得尤为重要，因为一项新的创意能打破网站故有的东西。通常，折中考虑创意、经典和传统设计是一个不错的主意，也就是说要设法去取得一个“坚不可摧”（甚至最终很单调）的可用设计与一个有创意但不可用设计之间的平衡。记住，<strong>创意需要时间来成长</strong>：重新思考、修改、调整、优化，最终整合到你的设计当中。</p>
<p>我们强烈鼓励设计师打破传统盒状布局的惯例，去尝试新方式和你大胆疯狂的想法。施展你的才华吧！</p>
<p><a href="http://www.getlondonreading.co.uk/Home"><img class="alignnone size-full wp-image-674" title="layouts-45" src="http://blog.b3inside.com/wp-content/uploads/2009/06/layouts-45.jpg" alt="layouts-45" width="500" height="307" /></a></p>
<p><a href="http://duoh.com/"><img class="alignnone size-full wp-image-675" title="oob1" src="http://blog.b3inside.com/wp-content/uploads/2009/06/oob1.jpg" alt="oob1" width="500" height="320" /></a></p>
<p><a href="http://www.stopchildlabour.eu/africatour2008/"><img class="alignnone size-full wp-image-676" title="oob3" src="http://blog.b3inside.com/wp-content/uploads/2009/06/oob3.jpg" alt="oob3" width="500" height="320" /></a></p>
<p><a href="http://www.colourpixel.com/"><img class="alignnone size-full wp-image-677" title="oob4" src="http://blog.b3inside.com/wp-content/uploads/2009/06/oob4.gif" alt="oob4" width="500" height="320" /></a></p>
<p><a href="http://nikolamircic.com/archive/sms/"><img class="alignnone size-full wp-image-678" title="sms" src="http://blog.b3inside.com/wp-content/uploads/2009/06/sms.jpg" alt="sms" width="500" height="352" /></a></p>
<p><a href="http://theautumnfilm.com/red-white-sale/us.html"><img class="alignnone size-full wp-image-679" title="aut" src="http://blog.b3inside.com/wp-content/uploads/2009/06/aut.jpg" alt="aut" width="500" height="320" /></a></p>
<p><a href="http://www.annyas.com/"><img class="alignnone size-full wp-image-680" title="oobd" src="http://blog.b3inside.com/wp-content/uploads/2009/06/oobd.jpg" alt="oobd" width="500" height="320" /></a></p>
<p><a href="http://www.bluehatonline.com/"><img class="alignnone size-medium wp-image-681" title="ool2" src="http://blog.b3inside.com/wp-content/uploads/2009/06/ool2-400x256.jpg" alt="ool2" width="400" height="256" /></a></p>
<p><a href="http://www.good.is/"><img class="alignnone size-medium wp-image-682" title="good" src="http://blog.b3inside.com/wp-content/uploads/2009/06/good-400x333.gif" alt="good" width="400" height="333" /></a></p>
<h3>单页布局</h3>
<p>另一种设计师经常使用的、给访问者留下深刻印象的方式，就是所谓的<strong>单页布局</strong>：这种布局使用一个单独的页面来呈现网站的内容。它并不一定意味着这些设计就是极简的（遵循“少即是多”原则）。而刚好相反，这种设计往往十分复杂，它包含了丰富的图像和生动的动画效果，因此需要加载一段时间。</p>
<p><a href="http://www.arcinspirations.com/kobe/"><img class="alignnone size-full wp-image-683" title="kobe" src="http://blog.b3inside.com/wp-content/uploads/2009/06/kobe.jpg" alt="kobe" width="500" height="388" /></a></p>
<p>当用户点击了一个导航选项，页面随之改变（部分变化），新的内容就出现在了显示先前内容的区域里。这种布局中导航滑动和滚动的效果，由公共JavaScript库来支持。</p>
<p>对用户来说最主要的优势来自于一个简单的事实，即通过更少的鼠标移动和点击，来获得用户想要的信息。由于这个方法非常新，对那些使用非传统导航就会感到困惑的用户来说是个好机会。有些种情况下，一个“静态”版本可能会派上用场，甚至是有必要的；比如你将不得不为搜索引擎，和禁用了JavaScript的用户提供另一版本。</p>
<p><a href="http://www.taptaptap.com/#groceries"><img class="alignnone size-full wp-image-684" title="layouts-42" src="http://blog.b3inside.com/wp-content/uploads/2009/06/layouts-42.jpg" alt="layouts-42" width="500" height="499" /></a></p>
<p><a href="http://fishmarketing.net/"><img class="alignnone size-full wp-image-685" title="fish" src="http://blog.b3inside.com/wp-content/uploads/2009/06/fish.jpg" alt="fish" width="500" height="570" /></a></p>
<p><a href="http://www.teamviget.com/"><img class="alignnone size-full wp-image-686" title="viget" src="http://blog.b3inside.com/wp-content/uploads/2009/06/viget.jpg" alt="viget" width="500" height="376" /></a></p>
<h3>多栏布局</h3>
<p>多栏（3栏以上）不一定就是复杂的设计。从反面看，如果设计得当，多栏对访问者会十分有帮助，因为它们为可见的导航选项提供了更好的综览，从而使得用户可以快速地找到他们想要的信息。</p>
<p>过去几年里，我们见证了网站内容的爆炸，这降低了用户在网站上所投入的注意力和时间（详情查看<a title="ReadWriteWeb" href="http://www.readwriteweb.com/archives/attention_economy_overview.php">ReadWriteWeb</a>）。所以，难怪设计师们都开始尝试寻找更简洁的信息呈现方式，既能让访问者在网站上停留的时间尽可能的长，又能更简单的找到内容。</p>
<p><a href="http://fortysevenmedia.com/"><img class="alignnone size-full wp-image-688" title="47" src="http://blog.b3inside.com/wp-content/uploads/2009/06/47.jpg" alt="47" width="500" height="460" /></a></p>
<p>实现这一目的的方法之一，就是使用多栏相邻的布局。这个想法十分合理。屏幕分辨率在最近几年里不断增加（然而，像华硕Eee PC这样的上网本得以广泛使用的话，情况可能会有所改变），从而可以为用户提供更多横向空间，也能给设计师提供额外空间去填充内容。</p>
<p>结果表明：现在越来越多的设计师，采用越来越多的栏在设计中。我们研究发现有向这些所谓多栏布局发展的强大趋势，<strong>通常在1000像素的屏幕中，宽度固定为850像素</strong>。多栏常被用在杂志布局和大项目中。在这些布局里，<strong>栅格</strong>常被用来保证结构平衡、层级和次序。</p>
<p>使用多栏布局，主动留白以及各自内部栏之间的重要性不能被夸大。（主动留白是故意留出空白，以更好地表现页面结构，强调内容的不同区域。）</p>
<p>为此，设计师常利用“Shneiderman的真言”（“首先表达大局，随后显示细节”），先为用户提供一个功能概况，然后按需提供细节——稍后，当某个链接被点击时（<a href="http://labs.mozilla.com/">Mozilla Labs</a>就是个最好的例子）。</p>
<p><a href="http://labs.mozilla.com/"><img class="alignnone size-medium wp-image-689" title="labsmozilla" src="http://blog.b3inside.com/wp-content/uploads/2009/06/labsmozilla-400x365.jpg" alt="labsmozilla" width="400" height="365" /></a></p>
<p><a href="http://www.31three.com/"><img class="alignnone size-full wp-image-690" title="31three" src="http://blog.b3inside.com/wp-content/uploads/2009/06/31three.jpg" alt="31three" width="500" height="390" /></a></p>
<p><a href="http://www.thedarlingtree.com/"><img class="alignnone size-full wp-image-691" title="mc" src="http://blog.b3inside.com/wp-content/uploads/2009/06/mc.gif" alt="mc" width="500" height="410" /></a></p>
<h3>巨型插图和充满活力的图形</h3>
<p>如同巨型版式主宰当今网页设计一样，无论是专业还是个人网站项目中，巨型插图似乎都越来越受欢迎。设计师正试图用互动元素（植入式视频区）和视觉元素（导言区和插图）来传达网站的信息。在近来的设计中，插图比原来占据更大的空间，通常作为巨型版式的补充。它们更具吸引力，并且更加生动，因此更容易被访问者记住。</p>
<p>另外，设计师也运用一些充满活力的图形，尤其是为背景，也为其他设计元素。不同的风格和图形均被使用：如陈旧物、拼贴画、剪贴册、饰品、复古样式、水彩、有机材质和摄影背景等。</p>
<p><a href="http://www.mailchimp.com/power_features/"><img class="alignnone size-full wp-image-693" title="illus5" src="http://blog.b3inside.com/wp-content/uploads/2009/06/illus5.jpg" alt="illus5" width="500" height="320" /></a></p>
<p><a href="http://www.versionsapp.com/"><img class="alignnone size-full wp-image-694" title="versions" src="http://blog.b3inside.com/wp-content/uploads/2009/06/versions.jpg" alt="versions" width="500" height="320" /></a></p>
<p><a href="http://www.webdesignerdepot.com/"><img class="alignnone size-full wp-image-695" title="depot" src="http://blog.b3inside.com/wp-content/uploads/2009/06/depot.jpg" alt="depot" width="500" height="320" /></a></p>
<p><a href="http://wpcoder.com/"><img class="alignnone size-full wp-image-696" title="wpc" src="http://blog.b3inside.com/wp-content/uploads/2009/06/wpc.jpg" alt="wpc" width="500" height="420" /></a></p>
<p><a href="http://www.ilovecolors.com.ar/"><img class="alignnone size-full wp-image-697" title="ilc" src="http://blog.b3inside.com/wp-content/uploads/2009/06/ilc.jpg" alt="ilc" width="500" height="320" /></a></p>
<p><a href="http://www.mattdempsey.com/"><img class="alignnone size-full wp-image-698" title="aqua2" src="http://blog.b3inside.com/wp-content/uploads/2009/06/aqua2.jpg" alt="aqua2" width="500" height="320" /></a></p>
<p><a href="http://boompa.ca/"><img class="alignnone size-full wp-image-699" title="aqua3" src="http://blog.b3inside.com/wp-content/uploads/2009/06/aqua3.jpg" alt="aqua3" width="500" height="320" /></a></p>
<h3>比以往更多的留白</h3>
<p>或许最可预知、也最为有益的事情之一，就是在过去几年的网页设计中，留白日益突出。它在许多设计中处于首要位置，并被广泛用于改善网站的文章流和结构。</p>
<p>事实上，我从未见过内容区和导航菜单上有这么多内边距。外框和内容区的<strong>内边距在20至25像素</strong>正逐渐成为一种约定俗成的法则，甚至更大的内边距也被普遍接受。希望，这一趋势继续发展下去。</p>
<p><a href="http://www.checkoutapp.com/features/#sales"><img class="alignnone size-full wp-image-701" title="illus4" src="http://blog.b3inside.com/wp-content/uploads/2009/06/illus4.gif" alt="illus4" width="500" height="320" /></a></p>
<p><a href="http://thebignoob.com/about/"><img class="alignnone size-full wp-image-702" title="noob" src="http://blog.b3inside.com/wp-content/uploads/2009/06/noob.gif" alt="noob" width="500" height="420" /></a></p>
<p><a href="http://signup.createsend.com/signup.aspx"><img class="alignnone size-full wp-image-703" title="whitespace1" src="http://blog.b3inside.com/wp-content/uploads/2009/06/whitespace1.gif" alt="whitespace1" width="500" height="320" /></a></p>
<p><a href="http://www.wilsonminer.com/posts/"><img class="alignnone size-full wp-image-704" title="wm" src="http://blog.b3inside.com/wp-content/uploads/2009/06/wm.gif" alt="wm" width="500" height="320" /></a></p>
<p><a href="http://astheria.com/"><img class="alignnone size-full wp-image-705" title="ws" src="http://blog.b3inside.com/wp-content/uploads/2009/06/ws.gif" alt="ws" width="500" height="320" /></a></p>
<h3>社会设计元素</h3>
<p>纵观blog圈，你几乎找不到一个不使用社会性图标或区块，让读者通过知名社会性媒体网站去推广它们内容的blog。每个作者都希望得到可观的流量和认可，这也是为什么在当今设计中，社会性元素变得更大、更具吸引力。</p>
<p>社会性图标到处可见，但多出现于文章的右上角或底部。社会性区块经常被放在文章下面，有时也出现在相关文章列表旁边。Twitter，Flickr和Last.FM的混合仍然是blog和项目中常见的组合。</p>
<p><a href="http://www.komodomedia.com/"><img class="alignnone size-full wp-image-707" title="komodo" src="http://blog.b3inside.com/wp-content/uploads/2009/06/komodo.jpg" alt="komodo" width="500" height="320" /></a></p>
<p><a href="http://veerle.duoh.com/"><img class="alignnone size-full wp-image-708" title="veerle" src="http://blog.b3inside.com/wp-content/uploads/2009/06/veerle.jpg" alt="veerle" width="500" height="320" /></a></p>
<p><a href="http://www.escapecrate.co.uk/"><img class="alignnone size-full wp-image-709" title="cra" src="http://blog.b3inside.com/wp-content/uploads/2009/06/cra.jpg" alt="cra" width="500" height="320" /></a></p>
<p><a href="http://darkmotion.com/"><img class="alignnone size-full wp-image-710" title="twi" src="http://blog.b3inside.com/wp-content/uploads/2009/06/twi.gif" alt="twi" width="499" height="208" /></a></p>
<p><a href="http://www.psdtuts.com/"><img class="alignnone size-full wp-image-711" title="heart" src="http://blog.b3inside.com/wp-content/uploads/2009/06/heart.jpg" alt="heart" width="500" height="164" /></a></p>
<p><a href="http://www.peakflowdesign.com/wordpress/essential-wordpress-toolkit-for-creating-new-themes/"><img class="alignnone size-full wp-image-712" title="peak" src="http://blog.b3inside.com/wp-content/uploads/2009/06/peak.gif" alt="peak" width="500" height="146" /></a></p>
<h3>对话式导航</h3>
<p>去年我们曾写过一篇名叫“<a title="谈话式块状导航" href="http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/">对话式导航</a>”的文章，在现在的很多网站中，貌似这个元素依然流行。导航所要完成的最大任务，是清晰地引导用户到达网站的不同地方。然而，要通过一两个关键字来表达内容是极其困难的，特别是使用横向导航。</p>
<p>这就是为什么通常导航没法用适当的关键字一个接一个简单列出的原因（即使用“无对话的”导航）。取而代之，设计师正在试图具体解释什么选项可用，什么是访问者点击网站链接后所期望的。</p>
<p>因为设计师正尝试开展与访问者之间的更多对话，所以我们愿意称这种方案为“对话式”导航，相对于那种建立在关键字列表基础上的“无对话的”导航。</p>
<p><a href="http://www.davidhellmann.com/"><img class="alignnone size-full wp-image-714" title="speaking1" src="http://blog.b3inside.com/wp-content/uploads/2009/06/speaking1.jpg" alt="speaking1" width="500" height="110" /></a></p>
<p><a href="http://www.albumcreative.com/index.html"><img class="alignnone size-full wp-image-715" title="speaking2" src="http://blog.b3inside.com/wp-content/uploads/2009/06/speaking2.jpg" alt="speaking2" width="500" height="95" /></a></p>
<p><a href="http://www.30elm.com/"><img class="alignnone size-full wp-image-716" title="30" src="http://blog.b3inside.com/wp-content/uploads/2009/06/30.png" alt="30" width="520" height="158" /></a></p>
<p><a href="http://www.evaneckard.com/"><img class="alignnone size-full wp-image-717" title="evan" src="http://blog.b3inside.com/wp-content/uploads/2009/06/evan.png" alt="evan" width="460" height="95" /></a></p>
<p><a href="http://freelanceswitch.com/"><img class="alignnone size-full wp-image-718" title="free" src="http://blog.b3inside.com/wp-content/uploads/2009/06/free.png" alt="free" width="437" height="77" /></a></p>
<p>导航区通常都是具有相同高度和宽度的区块，因此访问者感觉内容能被轻松引导。大图标也使用的很频繁，但在大多数情况下，它们是否适用取决于网站的内容和总体布局。导航设计中的鼠标悬停效果会让浏览变得更愉快。</p>
<p><img class="alignnone size-full wp-image-719" title="speaking3" src="http://blog.b3inside.com/wp-content/uploads/2009/06/speaking3.jpg" alt="speaking3" width="582" height="404" /></p>
<h3>动态的tab</h3>
<p>作为交互设计中最流行的趋势之一，tab可以动态地改变内容区域。活动tab背后的想法是，当页面被加载时，所有tab的内容也被加载，但一次只显示一个tab部分的内容（属性展示被用来实现这种效果）。你可以参照教程<a title="活动的tab" href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">动态的tab</a> 和<a title="tab在jQuery中的视觉控制" href="http://docs.jquery.com/UI/Tabs">tab在jQuery中的视觉控制</a> 来创建动态的tab。</p>
<p><a href="http://expressionengine.com/"><img class="alignnone size-full wp-image-720" title="ee2" src="http://blog.b3inside.com/wp-content/uploads/2009/06/ee2.jpg" alt="ee2" width="500" height="179" /></a></p>
<p><a href="http://www.komodomedia.com/"><img class="alignnone size-full wp-image-721" title="coll" src="http://blog.b3inside.com/wp-content/uploads/2009/06/coll.gif" alt="coll" width="500" height="284" /></a></p>
<p><a href="http://www.apple.com/trailers/paramount/eagleeye/"><img class="alignnone size-full wp-image-722" title="apple" src="http://blog.b3inside.com/wp-content/uploads/2009/06/apple.jpg" alt="apple" width="500" height="320" /></a></p>
<p><a href="http://tumblon.com/"><img class="alignnone size-full wp-image-723" title="busy" src="http://blog.b3inside.com/wp-content/uploads/2009/06/busy.gif" alt="busy" width="500" height="320" /></a></p>
<p><a href="http://www.forgetfoo.com/"><img class="alignnone size-full wp-image-724" title="ffoo" src="http://blog.b3inside.com/wp-content/uploads/2009/06/ffoo.gif" alt="ffoo" width="500" height="320" /></a></p>
<p><a href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"><img class="alignnone size-full wp-image-725" title="05u_tabs" src="http://blog.b3inside.com/wp-content/uploads/2009/06/05u_tabs.gif" alt="05u_tabs" width="344" height="417" /></a></p>
<p>系列文章：<a title="查看相关文章" href="http://blog.b3inside.com/design/web-design-trends-for-2009/">网页设计趋势发展历程之2009上</a> </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/design/web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009上'>网页设计趋势发展历程之2009上</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2006/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2006'>网页设计趋势发展历程之2006</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/design/more-web-design-trends-for-2009/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>网页设计趋势发展历程之2009上</title>
		<link>http://blog.b3inside.com/design/web-design-trends-for-2009/</link>
		<comments>http://blog.b3inside.com/design/web-design-trends-for-2009/#comments</comments>
		<pubDate>Thu, 12 Mar 2009 14:44:19 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[设计灵感]]></category>
		<category><![CDATA[设计与产品]]></category>
		<category><![CDATA[设计趋势]]></category>

		<guid isPermaLink="false">http://blog.b3inside.com/?p=435</guid>
		<description><![CDATA[Web Design Trends For 2009 Smashing Magazine版权所有 作者：Smashing Magazine 译者：UCD翻译小组，波希米亚 校审：Angela 原文地址： http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009 网页设计师是变幻无常的。我们喜欢拿东西做试验，喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法，这些在将来可能会成为主流和经典。因此，随着新设计方法的兴起，越来越多的设计师关注他们、使用他们，新的趋势也就诞生了。 在过去的几个月，我们分析了很多网页设计，观察新趋势，权衡设计决策和代码解决方案的优点。在这篇文章里，我们将展示2009年网页设计趋势：动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗？发表评论吧，好让我们知道！ 本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。 2009年网页设计趋势 首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。 1. 凸版印刷 2. 富UI 3. 透明的PNG 4. 大字号(版面) 5. 自定义字体（sIFR 等） 6. 模式化对话盒/会话窗 7. 多媒体区 8. 杂志外观 9. 旋转木马（幻灯片） 10. 导言模块 好，现在就让我们到具体内容中去仔细看看上面提到的每个趋势。 1. 凸版印刷 在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。 2. 富UI 我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决方案。 特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像Newspond.com和Quicksnapper.com上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，更适用的用户界面将在2009年到来。 上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。 3. 透明的PNG 透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。有时透明PNG也作为模式化对话盒(会话窗)的背景。 去年，我们描述了许多可以利用透明度发挥网页设计创意的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也有些设计 超越了这种定式。 4. [...]


相关文章<ol><li><a href='http://blog.b3inside.com/design/more-web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009下'>网页设计趋势发展历程之2009下</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2006/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2006'>网页设计趋势发展历程之2006</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Web Design Trends For 2009<br />
Smashing Magazine版权所有<br />
作者：<a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a><br />
译者：<a href="http://ucdchina.com/topic/59" target="_blank">UCD翻译小组</a>，<a href="http://blog.b3inside.com/">波希米亚</a><br />
校审：<a href="http://ucdchina.com/angela/" target="_blank">Angela</a><br />
原文地址： <a href="http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009" target="_blank">http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009</a></p>
<p>网页设计师是变幻无常的。我们喜欢拿东西做试验，喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法，这些在将来可能会成为主流和经典。因此，随着新设计方法的兴起，越来越多的设计师关注他们、使用他们，新的趋势也就诞生了。</p>
<p>在过去的几个月，我们分析了很多网页设计，观察新趋势，权衡设计决策和代码解决方案的优点。在这篇文章里，我们将展示<strong>2009年网页设计趋势</strong>：动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗？发表评论吧，好让我们知道！</p>
<p>本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。</p>
<h3>2009年网页设计趋势</h3>
<p>首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。</p>
<p><span id="more-435"></span>1. 凸版印刷</p>
<p><a href="http://365daysofastronomy.org/"><img class="alignnone size-full wp-image-439" title="trend-01" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-01.jpg" alt="trend-01" width="325" height="175" /></a></p>
<p>2. 富UI</p>
<p><a href="http://www.newspond.com/science/"><img class="alignnone size-full wp-image-440" title="trend-02" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-02.jpg" alt="trend-02" width="325" height="175" /></a></p>
<p>3. 透明的PNG</p>
<p><a href="http://rustinjessen.com/"><img class="alignnone size-full wp-image-445" title="trend-03" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-03.jpg" alt="trend-03" width="325" height="175" /></a></p>
<p>4. 大字号(版面)</p>
<p><a href="http://www.francescomugnai.com/"><img class="alignnone size-full wp-image-447" title="trend-04" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-04.jpg" alt="trend-04" width="325" height="175" /></a></p>
<p>5. 自定义字体（<a id="rtm_" title="了解什么是sIFR" href="http://www.w3cn.org/article/translate/2005/117.html" target="_blank">sIFR</a> 等）</p>
<p><a href="http://www.chigarden.com/"><img class="alignnone size-full wp-image-448" title="trend-05" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-05.jpg" alt="trend-05" width="325" height="175" /></a></p>
<p>6. 模式化对话盒/会话窗</p>
<p><a href="http://listen.grooveshark.com/"><img class="alignnone size-full wp-image-450" title="trend-06" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-06.jpg" alt="trend-06" width="325" height="175" /></a></p>
<p>7. 多媒体区</p>
<p><a href="http://www.goodbarry.com/"><img class="alignnone size-full wp-image-451" title="trend-07" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-07.jpg" alt="trend-07" width="325" height="175" /></a></p>
<p>8. 杂志外观</p>
<p><a href="http://cutandtaste.com/"><img class="alignnone size-full wp-image-452" title="trend-08" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-08.jpg" alt="trend-08" width="325" height="175" /></a></p>
<p>9. 旋转木马（幻灯片）</p>
<p><a href="http://www.itv.com/"><img class="alignnone size-full wp-image-453" title="trend-09" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-09.jpg" alt="trend-09" width="325" height="175" /></a></p>
<p>10. 导言模块</p>
<p><a href="http://productplanner.com/"><img class="alignnone size-full wp-image-454" title="trend-10" src="http://blog.b3inside.com/wp-content/uploads/2009/03/trend-10.jpg" alt="trend-10" width="325" height="175" /></a></p>
<p>好，现在就让我们到具体内容中去仔细看看上面提到的每个趋势。</p>
<h3>1. 凸版印刷</h3>
<p>在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。</p>
<p><a href="http://365daysofastronomy.org/"><img class="alignnone size-medium wp-image-464" title="letterpress6" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress6-400x256.jpg" alt="letterpress6" width="400" height="256" /></a></p>
<p><a href="http://www.alexbuga.com/v8/"><img class="alignnone size-medium wp-image-461" title="letterpress3" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress3-400x256.jpg" alt="letterpress3" width="400" height="256" /></a></p>
<p><a href="http://brightkite.com/"><img class="alignnone size-medium wp-image-465" title="letterpress7" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress7-400x256.jpg" alt="letterpress7" width="400" height="256" /></a></p>
<p><a href="http://www.powerset.com/"><img class="alignnone size-medium wp-image-466" title="letterpress8" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress8-400x256.jpg" alt="letterpress8" width="400" height="256" /></a></p>
<p><a href="http://www.storenvy.com/"><img class="alignnone size-medium wp-image-458" title="letterp" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterp-400x256.jpg" alt="letterp" width="400" height="256" /></a></p>
<p><a href="http://unblab.com/login"><img class="alignnone size-medium wp-image-459" title="letterpress1" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress1-400x256.jpg" alt="letterpress1" width="400" height="256" /></a></p>
<p><a href="http://www.leemunroe.com/"><img class="alignnone size-medium wp-image-460" title="letterpress2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress2-400x256.jpg" alt="letterpress2" width="400" height="256" /></a></p>
<p><a href="http://2d2.es/"><img class="alignnone size-medium wp-image-462" title="letterpress4" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress4-400x256.jpg" alt="letterpress4" width="400" height="256" /></a></p>
<p><a href="http://www.respiromedia.com/"><img class="alignnone size-medium wp-image-463" title="letterpress5" src="http://blog.b3inside.com/wp-content/uploads/2009/03/letterpress5-400x256.jpg" alt="letterpress5" width="400" height="256" /></a></p>
<h3>2. 富UI</h3>
<p>我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决方案。</p>
<p>特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像<a href="http://www.newspond.com/" target="_blank">Newspond.com</a>和<a href="http://www.quicksnapper.com/" target="_blank">Quicksnapper.com</a>上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，<strong>更适用的用户界面将在2009年到来</strong>。</p>
<p><a href="http://www.quicksnapper.com/"><img class="alignnone size-medium wp-image-474" title="quick" src="http://blog.b3inside.com/wp-content/uploads/2009/03/quick-400x256.jpg" alt="quick" width="400" height="256" /></a></p>
<p><a href="http://dc2009.drupalcon.org/"><img class="alignnone size-medium wp-image-476" title="sli" src="http://blog.b3inside.com/wp-content/uploads/2009/03/sli-400x256.jpg" alt="sli" width="400" height="256" /></a></p>
<p>上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。</p>
<p><a href="http://konigi.com/interface/mobileme-calendar-date-selector"><img class="alignnone size-medium wp-image-469" title="action" src="http://blog.b3inside.com/wp-content/uploads/2009/03/action-400x256.gif" alt="action" width="400" height="256" /></a></p>
<p><a href="http://www.newspond.com/science/"><img class="alignnone size-medium wp-image-477" title="spond" src="http://blog.b3inside.com/wp-content/uploads/2009/03/spond-400x256.gif" alt="spond" width="400" height="256" /></a></p>
<p><a href="http://www.howcast.com/categories"><img class="alignnone size-medium wp-image-470" title="howcast" src="http://blog.b3inside.com/wp-content/uploads/2009/03/howcast-400x256.gif" alt="howcast" width="400" height="256" /></a></p>
<p><a href="http://moodstream.gettyimages.com/"><img class="alignnone size-medium wp-image-472" title="moodstream" src="http://blog.b3inside.com/wp-content/uploads/2009/03/moodstream-400x256.jpg" alt="moodstream" width="400" height="256" /></a></p>
<p><a href="http://www.gettyimages.com/"><img class="alignnone size-medium wp-image-473" title="personalize" src="http://blog.b3inside.com/wp-content/uploads/2009/03/personalize-400x256.gif" alt="personalize" width="400" height="256" /></a></p>
<p><a href="http://listen.grooveshark.com/"><img class="alignnone size-medium wp-image-475" title="radioh" src="http://blog.b3inside.com/wp-content/uploads/2009/03/radioh-400x256.jpg" alt="radioh" width="400" height="256" /></a></p>
<p><a href="http://www.kontain.com/#home"><img class="alignnone size-medium wp-image-471" title="kontain" src="http://blog.b3inside.com/wp-content/uploads/2009/03/kontain-400x256.gif" alt="kontain" width="400" height="256" /></a></p>
<h3>3. 透明的PNG</h3>
<p>透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。有时透明PNG也作为模式化对话盒(会话窗)的背景。</p>
<p>去年，我们描述了许多可以<a href="http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/" target="_blank">利用透明度发挥网页设计创意</a>的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也<a href="http://24ways.org/" target="_blank">有些设计</a> 超越了这种定式。</p>
<p><a href="http://rustinjessen.com/"><img class="alignnone size-medium wp-image-480" title="cover-headline1" src="http://blog.b3inside.com/wp-content/uploads/2009/03/cover-headline1-400x212.gif" alt="cover-headline1" width="400" height="212" /></a></p>
<p><a href="http://dc2009.drupalcon.org/"><img class="alignnone size-medium wp-image-482" title="png" src="http://blog.b3inside.com/wp-content/uploads/2009/03/png-400x256.gif" alt="png" width="400" height="256" /></a></p>
<p><a href="http://24ways.org/"><img class="alignnone size-medium wp-image-481" title="oob2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/oob2-400x256.gif" alt="oob2" width="400" height="256" /></a></p>
<p><a href="http://labs.paulicio.us/viewport/#2"><img class="alignnone size-medium wp-image-483" title="png2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/png2-400x256.jpg" alt="png2" width="400" height="256" /></a></p>
<p><a href="http://www.restroom.nl/"><img class="alignnone size-medium wp-image-484" title="transp" src="http://blog.b3inside.com/wp-content/uploads/2009/03/transp-400x256.gif" alt="transp" width="400" height="256" /></a></p>
<p><a href="http://www.wishingline.com/notebook/"><img class="alignnone size-medium wp-image-485" title="wisih" src="http://blog.b3inside.com/wp-content/uploads/2009/03/wisih-400x256.jpg" alt="wisih" width="400" height="256" /></a></p>
<p><a href="http://carrotcreative.com/"><img class="alignnone size-medium wp-image-479" title="carrot" src="http://blog.b3inside.com/wp-content/uploads/2009/03/carrot-400x256.jpg" alt="carrot" width="400" height="256" /></a></p>
<h3>4. 大字号(版面)</h3>
<p>在之前的文章（<a href="http://www.smashingmagazine.com/2007/10/15/the-showcase-of-big-typography/" target="_blank">1</a>，<a href="http://www.smashingmagazine.com/2008/05/20/the-showcase-of-big-typography-second-edition/" target="_blank">2</a> ）中，我们列举过一些大字号(版面)的杰出案例。2009年，大字号(版面)将成为主流。特别是设计机构，开发大型项目，做产品网站和在线服务的，他们会使用大字号(版面)来传达自己网站最重要的信息。</p>
<p>这些设计元素的字体大小通常都要超过36px，在很多情况下，为迎合观众都会使用非常漂亮的字体。总的来说，设计师投入更多精力在排版的细节方面，如主次关系，行高和字体的选择。其结果是：网站更漂亮，风格更一致，看起来可靠且值得信赖。</p>
<p><a href="http://www.francescomugnai.com/"><img class="alignnone size-medium wp-image-493" title="zo" src="http://blog.b3inside.com/wp-content/uploads/2009/03/zo-400x256.gif" alt="zo" width="400" height="256" /></a></p>
<p><a href="http://madebygiant.com/"><img class="alignnone size-medium wp-image-489" title="type1" src="http://blog.b3inside.com/wp-content/uploads/2009/03/type1-400x256.gif" alt="type1" width="400" height="256" /></a></p>
<p><a href="http://theautumnfilm.com/red-white-sale/us.html"><img class="alignnone size-medium wp-image-488" title="red" src="http://blog.b3inside.com/wp-content/uploads/2009/03/red-400x256.jpg" alt="red" width="400" height="256" /></a></p>
<p><a href="http://www.signalapps.com/"><img class="alignnone size-medium wp-image-487" title="logbook" src="http://blog.b3inside.com/wp-content/uploads/2009/03/logbook-400x223.gif" alt="logbook" width="400" height="223" /></a></p>
<p><a href="http://www.blackestate.co.nz/"><img class="alignnone size-medium wp-image-492" title="vine" src="http://blog.b3inside.com/wp-content/uploads/2009/03/vine-400x256.gif" alt="vine" width="400" height="256" /></a></p>
<p><a href="http://www.onefastbuffalo.com/"><img class="alignnone size-medium wp-image-490" title="type3" src="http://blog.b3inside.com/wp-content/uploads/2009/03/type3-400x256.gif" alt="type3" width="400" height="256" /></a></p>
<p><a href="http://www.shiftpx.com/"><img class="alignnone size-medium wp-image-491" title="type7" src="http://blog.b3inside.com/wp-content/uploads/2009/03/type7-400x256.gif" alt="type7" width="400" height="256" /></a></p>
<h3>5. 自定义字体</h3>
<p>就像设计师花费了更多精力在排版上一样，他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在，我们仍观察到有一股向自定义字体发展的微弱趋势（例如使用sIFR）。</p>
<p>有趣的是，这些字体往往无缝结合于网站设计中；它们几乎从不需要网站因它而“更新”排版。设计师们试图融合漂亮的版式和炫目的视觉设计，以此来改善网站的外观和用户体验。</p>
<p><a href="http://blog.iso50.com/"><img class="alignnone size-medium wp-image-495" title="sh" src="http://blog.b3inside.com/wp-content/uploads/2009/03/sh-400x256.jpg" alt="sh" width="400" height="256" /></a></p>
<p><a href="http://365daysofastronomy.org/"><img class="alignnone size-medium wp-image-496" title="sifr1" src="http://blog.b3inside.com/wp-content/uploads/2009/03/sifr1-400x128.gif" alt="sifr1" width="400" height="128" /></a></p>
<p><a href="http://www.chigarden.com/"><img class="alignnone size-medium wp-image-497" title="sifr2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/sifr2-400x256.gif" alt="sifr2" width="400" height="256" /></a></p>
<p><a href="http://www.nonesuch.com/journal"><img class="alignnone size-medium wp-image-498" title="sifr3" src="http://blog.b3inside.com/wp-content/uploads/2009/03/sifr3-400x256.gif" alt="sifr3" width="400" height="256" /></a></p>
<p><a href="http://daily.creattica.com/"><img class="alignnone size-medium wp-image-494" title="daily" src="http://blog.b3inside.com/wp-content/uploads/2009/03/daily-400x256.gif" alt="daily" width="400" height="256" /></a></p>
<h3>6. 模式化对话盒/会话窗</h3>
<p>模式化对话盒（会话窗）其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口，并且使用户的注意力始终集中在网站最重要的区域内。状态窗通常是被用户的动作所触发（如注册或登录），并且出现于主内容之上，就像桌面应用中的一个窗口。会话窗往往以一个非常微妙的方式出现：它们通常采用半透明，并且有一个“关闭”按钮。</p>
<p><a href="http://typedeskref.com/"><img class="alignnone size-medium wp-image-502" title="modalbox2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/modalbox2-400x256.jpg" alt="modalbox2" width="400" height="256" /></a></p>
<p><a href="http://www.realmacsoftware.com/rapidweaver/overview/"><img class="alignnone size-medium wp-image-501" title="modalbox1" src="http://blog.b3inside.com/wp-content/uploads/2009/03/modalbox1-400x256.jpg" alt="modalbox1" width="400" height="256" /></a></p>
<p><a href="http://listen.grooveshark.com/"><img class="alignnone size-medium wp-image-500" title="groove" src="http://blog.b3inside.com/wp-content/uploads/2009/03/groove-400x256.jpg" alt="groove" width="400" height="256" /></a></p>
<h3>7. 多媒体区</h3>
<p>随着更多宽带网络的接入，相比两三年前，用户已经可以浏览更丰富的内容，设计师可以借此机会，用更具吸引力和值得回忆的方式来呈现内容。怪不得一些产品网站用多媒体区（录像和视频）来展示他们的内容。这类元素的主要优势还在于，它们可以快捷有效地表达内容，并使用户更易于消化这些信息。</p>
<p>用户要做的只是靠在椅背上欣赏；它们会把每件事按部就班地展示出来，不需要用户点击，搜索说明，或是学习导航如何使用。影片通常都简明扼要；它们大多正式，但也不乏娱乐。</p>
<p>但请明白，视频只是网站内容的一种替代形式（而不是主体和唯一！）。不是所有人都通过宽带上网，也不是所有人都愿意看视频（因为他/她可能正在听广播或音乐），更不是所有人的机器上都安装了Flash和JavaScript.</p>
<p><a href="http://www.getbackboard.com/"><img class="alignnone size-medium wp-image-504" title="gf" src="http://blog.b3inside.com/wp-content/uploads/2009/03/gf-400x200.gif" alt="gf" width="400" height="200" /></a></p>
<p><a href="http://www.goodbarry.com/"><img class="alignnone size-medium wp-image-503" title="gb" src="http://blog.b3inside.com/wp-content/uploads/2009/03/gb-400x214.gif" alt="gb" width="400" height="214" /></a></p>
<h3>8. 杂志外观</h3>
<p>在Blog的设计中有一个非常有趣的现象，许多手法通常来自于传统（印刷）媒体。从页面文章的排列、排版的运用、插图，甚至到文字对齐方式都与传统印刷技术的手法相似。栅格化设计变得日益普及，但多用于大型项目，产品页面和大型的Blog；它们几乎不在公司网站或网上商城中出现。</p>
<p><a href="http://www.objectifiedfilm.com/"><img class="alignnone size-medium wp-image-508" title="magazine2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/magazine2-400x256.gif" alt="magazine2" width="400" height="256" /></a></p>
<p><a href="http://www.inspirationbit.com/sources-of-inspiration-to-the-rescue/"><img class="alignnone size-medium wp-image-509" title="magazine3" src="http://blog.b3inside.com/wp-content/uploads/2009/03/magazine3-400x256.gif" alt="magazine3" width="400" height="256" /></a></p>
<p><a href="http://www.good.is/"><img class="alignnone size-medium wp-image-510" title="magazine4" src="http://blog.b3inside.com/wp-content/uploads/2009/03/magazine4-400x256.jpg" alt="magazine4" width="400" height="256" /></a></p>
<p><a href="http://cutandtaste.com/"><img class="alignnone size-medium wp-image-506" title="maga" src="http://blog.b3inside.com/wp-content/uploads/2009/03/maga-400x256.gif" alt="maga" width="400" height="256" /></a></p>
<p><a href="http://www.nonesuch.com/journal"><img class="alignnone size-medium wp-image-507" title="magaz" src="http://blog.b3inside.com/wp-content/uploads/2009/03/magaz-400x364.gif" alt="magaz" width="400" height="364" /></a></p>
<h3>9. 旋转木马（幻灯片）</h3>
<p>旋转木马其实就是幻灯导航，它的内容垂直或水平轮转（因此得名“旋转木马”）。要达到轮转导航的目的，用户需要点击其中某一个切换元素（通常是左/右或者上/下箭头）。当进行切换时，内容就向所选的方向轮换了。</p>
<p>过去用户为寻找他们所喜爱的内容需要点击网站中的很多章节，取而代之，现在可以快速浏览可见的内容，省去了滚屏和不必要的鼠标移动。这样做的好处是：用户不但节省了时间，而且使他们的注意力更加集中到内容中，而不是被分散到浏览器窗口上。这类幻灯导航经常被使用在娱乐网站和大型Blog上，但设计师也可以把它用在大型项目中，以更互动的方式来展示自己的工作。</p>
<p><a href="http://www.itv.com/"><img class="alignnone size-medium wp-image-513" title="amy" src="http://blog.b3inside.com/wp-content/uploads/2009/03/amy-400x200.jpg" alt="amy" width="400" height="200" /></a></p>
<p><a href="http://money.cnn.com/"><img class="alignnone size-medium wp-image-514" title="cnnmoney" src="http://blog.b3inside.com/wp-content/uploads/2009/03/cnnmoney-400x220.gif" alt="cnnmoney" width="400" height="220" /></a></p>
<p><a href="http://music.yahoo.com/"><img class="alignnone size-medium wp-image-515" title="musicyahoo" src="http://blog.b3inside.com/wp-content/uploads/2009/03/musicyahoo-400x204.gif" alt="musicyahoo" width="400" height="204" /></a></p>
<p><a href="http://vickycristina-movie.com/"><img class="alignnone size-medium wp-image-516" title="wein" src="http://blog.b3inside.com/wp-content/uploads/2009/03/wein-400x324.jpg" alt="wein" width="400" height="324" /></a></p>
<h3>10. 导言模块</h3>
<p>网站的左上部是页面中最重要的区域，因为它最能吸引访问者的注意力。因此，把网站最重要的信息放在那里是再明智不过的了，这样就能确保访问者尽可能快的看到信息。</p>
<p>事实上，这也是许多设计师正在做的事情。不管是为网站应用、公司设计、在线服务还是大型项目，设计师们都会把他们的标语和简要导言放在页面顶部，通过使用粗体和生动的排版，给用户留下一个好的第一印象。一些导言是简短的，也有一些够啰嗦的；无论哪种，它们都会占一大块区域；与布局等宽，高度在 250-400px之间，已成为这些导言模块的通用尺寸。值得注意的是，这些模块几乎从不出现在Blog中，网上商城中也很少出现。</p>
<p><a href="http://www.shannonmoeller.com/"><img class="alignnone size-medium wp-image-518" title="feature2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/feature2-400x256.gif" alt="feature2" width="400" height="256" /></a></p>
<p><a href="http://productplanner.com/"><img class="alignnone size-medium wp-image-520" title="introd" src="http://blog.b3inside.com/wp-content/uploads/2009/03/introd-400x256.jpg" alt="introd" width="400" height="256" /></a></p>
<p><a href="http://www.45royale.com/"><img class="alignnone size-medium wp-image-517" title="45r" src="http://blog.b3inside.com/wp-content/uploads/2009/03/45r-400x234.gif" alt="45r" width="400" height="234" /></a></p>
<p><a href="http://revyver.com/"><img class="alignnone size-medium wp-image-519" title="feature3" src="http://blog.b3inside.com/wp-content/uploads/2009/03/feature3-400x256.jpg" alt="feature3" width="400" height="256" /></a></p>
<p><a href="http://creamscoop.com/"><img class="alignnone size-medium wp-image-521" title="introd2" src="http://blog.b3inside.com/wp-content/uploads/2009/03/introd2-400x256.gif" alt="introd2" width="400" height="256" /></a></p>
<h3>敬请期待！</h3>
<p>本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。 </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/design/more-web-design-trends-for-2009/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2009下'>网页设计趋势发展历程之2009下</a></li>
<li><a href='http://blog.b3inside.com/design/web-design-trends-for-2006/' rel='bookmark' title='Permanent Link: 网页设计趋势发展历程之2006'>网页设计趋势发展历程之2006</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-app-design-trends/' rel='bookmark' title='Permanent Link: iPhone应用设计趋势'>iPhone应用设计趋势</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/design/web-design-trends-for-2009/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>设计铸就伟大的产品</title>
		<link>http://blog.b3inside.com/userexperience/great-product-by-design/</link>
		<comments>http://blog.b3inside.com/userexperience/great-product-by-design/#comments</comments>
		<pubDate>Thu, 23 Oct 2008 07:40:02 +0000</pubDate>
		<dc:creator>波希米亚</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计与产品]]></category>

		<guid isPermaLink="false">http://www.b3inside.com/?p=12</guid>
		<description><![CDATA[我不相信伟大的产品是意外诞生的！说不定，在每个伟大的产品背后，我们都可以发现一些真理。今天，我想分享十个真理。我将这些倾注在每件产品的成就上。 下面我们就来看看这篇很好的产品用户体验设计心得： 工程重要，但用户体验设计更重要，而且往往更加困难； 工程师是很差的用户体验设计师；工程师是从执行模型角度考虑，而用户考虑的则是概念模型； 用户体验设计包括交互设计和视觉设计； 功能性（产品需求）和用户体验设计是天生一对； 产品的想法必须经过测试&#8212;-较早的，经常性的&#8212;-为实际的目标用户带来更好的用户体验； 再转给工程师开发之前，我们需要对可用性、需求符合程度、可行性进行测试或验证； 我们需要一个高保原型，这样我们可以快速、简单，并且经常地测试实际用户的真实体验； 高保原型是整个产品团队交流用户体验最有效的方式； 产品经理的工作就是去评估产品雏形的实现、提供给市场和用户期望的体验设计的最短时间，及其实现的复杂性； 一旦产品雏形设计好并被确认，那就没有什么东西再是零散的了，而应该是和预期一样的了。 你可以期待这些在未来几个月中更多的出现。我会继续与许多曾在困惑中的产品团队交流，讲述产品创建中的不足之处，因为&#8221;相对于坏产品来说，我们的生命太短了。&#8221; [READ] Thanks for the SVPG to give us this great article. 相关文章可用性工程的生命周期 开发iPhone版校友录 一个提高了近10%转化率的改进


相关文章<ol><li><a href='http://blog.b3inside.com/userexperience/the-usability-engineering-lifecycle/' rel='bookmark' title='Permanent Link: 可用性工程的生命周期'>可用性工程的生命周期</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/' rel='bookmark' title='Permanent Link: 开发iPhone版校友录'>开发iPhone版校友录</a></li>
<li><a href='http://blog.b3inside.com/userexperience/10-improvement-on-conversion/' rel='bookmark' title='Permanent Link: 一个提高了近10%转化率的改进'>一个提高了近10%转化率的改进</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.b3inside.com/wp-content/uploads/2008/10/great_product_by_design.jpg"><img class="alignnone size-medium wp-image-13" title="great_product_by_design" src="http://blog.b3inside.com/wp-content/uploads/2008/10/great_product_by_design.jpg" alt="" /></a></p>
<p>我不相信伟大的产品是意外诞生的！说不定，在每个伟大的产品背后，我们都可以发现一些真理。今天，我想分享十个真理。我将这些倾注在每件产品的成就上。</p>
<p>下面我们就来看看这篇很好的产品用户体验设计心得：</p>
<p><span id="more-12"></span></p>
<ol>
<li>工程重要，但用户体验设计更重要，而且往往更加困难；</li>
<li>工程师是很差的用户体验设计师；工程师是从执行模型角度考虑，而用户考虑的则是概念模型；</li>
<li>用户体验设计包括交互设计和视觉设计；</li>
<li>功能性（产品需求）和用户体验设计是天生一对；</li>
<li>产品的想法必须经过测试&#8212;-较早的，经常性的&#8212;-为实际的目标用户带来更好的用户体验；</li>
<li>再转给工程师开发之前，我们需要对可用性、需求符合程度、可行性进行测试或验证；</li>
<li>我们需要一个高保原型，这样我们可以快速、简单，并且经常地测试实际用户的真实体验；</li>
<li>高保原型是整个产品团队交流用户体验最有效的方式；</li>
<li>产品经理的工作就是去评估产品雏形的实现、提供给市场和用户期望的体验设计的最短时间，及其实现的复杂性；</li>
<li>一旦产品雏形设计好并被确认，那就没有什么东西再是零散的了，而应该是和预期一样的了。</li>
</ol>
<p>你可以期待这些在未来几个月中更多的出现。我会继续与许多曾在困惑中的产品团队交流，讲述产品创建中的不足之处，因为&#8221;相对于坏产品来说，我们的生命太短了。&#8221;</p>
<p>[<a href="http://www.svpg.com/blog/files/great_products_by_design.html" target="_blank">READ</a>]<br />
Thanks for the SVPG to give us this great article. </p>


<p>相关文章<ol><li><a href='http://blog.b3inside.com/userexperience/the-usability-engineering-lifecycle/' rel='bookmark' title='Permanent Link: 可用性工程的生命周期'>可用性工程的生命周期</a></li>
<li><a href='http://blog.b3inside.com/design/iphone-edition-for-chinaren-alumni/' rel='bookmark' title='Permanent Link: 开发iPhone版校友录'>开发iPhone版校友录</a></li>
<li><a href='http://blog.b3inside.com/userexperience/10-improvement-on-conversion/' rel='bookmark' title='Permanent Link: 一个提高了近10%转化率的改进'>一个提高了近10%转化率的改进</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.b3inside.com/userexperience/great-product-by-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
