<?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>彩程团队BLOG &#187; 用户体验设计</title>
	<atom:link href="http://mycolorway.com/blog/category/%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://mycolorway.com/blog</link>
	<description></description>
	<lastBuildDate>Tue, 31 Aug 2010 20:27:02 +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>《牛壹周》1.1升级版的设计与功能改进</title>
		<link>http://mycolorway.com/blog/2010/08/18/br11-design-update/</link>
		<comments>http://mycolorway.com/blog/2010/08/18/br11-design-update/#comments</comments>
		<pubDate>Wed, 18 Aug 2010 15:26:37 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[iPhone/iPad]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[分享]]></category>
		<category><![CDATA[排版]]></category>
		<category><![CDATA[牛一周]]></category>
		<category><![CDATA[牛壹周]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=1349</guid>
		<description><![CDATA[从2010年7月30号《牛壹周》创刊号上架，截止到我写这篇Blog，已经有了接近6000个下载。 作为一支从来不在出版或传媒圈混的团队所制作的第一本中文电子杂志，在几乎没做任何宣传的情况下，会有这么多的下载——说实在的，这样的成绩让我们自己也感到惊讶——古灵也没想到，他的生日礼物居然会被这么多人共同分享，并且乐在其中。 一些热心的使用者在App Store上给了我们不错的评价和评级，还有一些热心的使用者则给我们写来了邮件——感谢你们对我们的鼓励和夸奖，但更要感谢的，是你们给我们的意见和建议——这让我们觉得如果不能很好的解决上一期你们所碰到和忍受的一些问题的话都不好意思再出第二期。好消息是现在大部分问题都解决了，坏消息是这让我们花费了一些时间，让周刊几乎变成了半月刊。 8月16号，我们向苹果提交了《牛壹周》APP的1.1版，正在等待审批，估计一周过后能在App Store上架。安装过《牛壹周》的老用户，直接升级原来的应用程序即可，不需要重新安装新的APP。虽然1.1的版本号升位非常低调，但这个版本实际上已经进行了脱胎换骨的改变——内容格式从基于Html5+CSS3变成了基于PDF；导航方式变成了全新的“一阳指”式导航；体系架构上实现了书架（应用程序框架）和期刊（各期内容）分离。 OK，现在让我们来看看在更新后的《牛壹周》1.1版中你会看到哪些改变。 1、更平滑的页面切换缓冲 《牛一周》创刊号发布后，最受诟病的就是页面切换的时候糟糕的缓冲体验——先是眼前一黑，然后一个白菊花（苹果的官方loading动画，也有人叫它风火轮）转啊转，耐心不好的，会以为这个程序已经或即将Crash掉了。 作为一个Apple App设计开发方面刚入行的团队，老实说，当初我们也没想到切换会消耗这么多资源，为了赶上给古灵老师的生日献礼，我们还是Getting Real了一把，在妥善解决好这个问题之前先放出去了——完美总是相对的；孩子总是要生的。 现在《牛壹周》APP的1.1版已经彻底解决了页面缓冲问题，现在你在浏览文章切换页面的时候将是无缝的而且非常平滑，在你翻页操作停止后，程序将在后台开始预载其他页面。不过如果你不是一页页看，而是快速手动翻页，或者在导航区作长程跳转（比如从第一篇文章直接跳到第七篇文章），还是会出现一个很短暂的Loading——因为设备内存和性能方面的考量，我们只预载了当前浏览页的前后各五页，当你要浏览的内容不在预载范围内的时，就开始即时载入。我们这次所做的改进，不是要消灭Loading，而是让Loading足够快，顺便装可爱——你看，为了解决这问题，牛哥我也是囧到黑面忙到出汗，不足之处还请列位看官体谅体谅。 2、全新的“一阳指”导航系统 《牛壹周》创刊号的导航是个索引＋缩略的混合体系，使用的过程中你会发现其实你并不能在任何时间都通过同样一种操作很随意地到达包括封面在内的任意一页。 这次发布的版本中，如果你单击屏幕会浮现出导航系统。通过下部的彩色导航条（不同色彩代表不同文章类型），现在你可以象操作横向滚动条一样在所有页面间的跳转并同步预览到文章标题、发布时间以及作者头像。 另外我们发现《牛壹周》创刊号的目录页其实给一些使用者带来了困惑——首先，只有它是支持且需要纵向滚屏的；其次，很多人并没有意识到那些标题是可以点击的链接。这次我们把目录页内容也限制到了一屏完全显示——不需要滚屏，也不加超链，操作习惯和其他页面完全一致。 3、书架（程序框架）与期刊（每期内容）分离的体系 因为期刊已经出到了第二期而且以后会出更多期，所以“书架”的概念应运而生。导航条的左上部，是进入“书架”的入口，进入后，你可以切换看到当前和往期杂志的封面，如果你没下载过（封面半透明显示），点击后开始下载该期；如果你已下载（封面正常显示），那么点击后开始正式阅读该期。 我们也曾考虑过是否要跟iBooks一样设计一个实体书架上去，但我们现在期数很少，觉得用一个书架有些大而无当，综合考虑后我们选用了这种最简洁明了的方式来做杂志切换导航——毕竟这本杂志的一个交互设计原则，就是简洁和实用，如非特别必要，我们一般会避免出现长期显示在界面上的按钮和操作提示。 4、更为简洁醒目的ICON 是的，上个版本的Icon设计花了我们不少心血，看上去也颇为精致漂亮，但是缩小后作为一个Apple App的图标，我们发现它的可识别性并不是太好——有一天次S为了分析她在华语地区的表现，选择了新加坡地区作为一个参考样本，结果在一堆App里面一眼扫过去，自己都找了两遍才找到我们的《牛壹周》。 牛角代表牛，壹就是壹，Weekly表示周刊——现在，由图形、汉字和英文混搭的这个《牛壹周》Icon新版本看上去象个漂亮精神的混血儿。：） 5、现在还不完美，未来值得期待 到目前为止，《牛壹周》依然是一本实验性的杂志，我们还在对更好的体验进行探索和尝试。在它基本定型之前，我们并不一定保证它每周都能按期推出，但我们会让它每一次推出都比上一次更值得体验和期待。 感谢《牛壹周》1.1版主力设计与开发Shawn，为了这次的版本更新他几乎贡献了所有的双休日；感谢《牛壹周》8月11日第二期主编古灵，作为一个非著名愤青，他让这期充满了时政浓重的体味；感谢为《牛壹周》第一期和第二期提供排版的Fish，她在Indesign上投入的诸多心血，最终也让自己的排版技艺达到了和她的厨艺一样精湛。 我们期待不断的听到来自你们的反馈，对于这本杂志有任何意见和建议，欢迎写信给我们，我们的邮箱是team+ipad@mycolorway.com，或者Follow我们的Twitter账号：@bullreader ，让我们一起阅读、触摸和设计，让她变得更好。]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br11.png"><img class="alignnone size-full wp-image-1361" title="br11" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br11.png" alt="" width="580" height="180" /></a></p>
<p>从2010年7月30号《牛壹周》创刊号上架，截止到我写这篇Blog，已经有了接近6000个下载。</p>
<p>作为一支从来不在出版或传媒圈混的团队所制作的第一本中文电子杂志，在几乎没做任何宣传的情况下，会有这么多的下载——说实在的，这样的成绩让我们自己也感到惊讶——古灵也没想到，他的生日礼物居然会被这么多人共同分享，并且乐在其中。</p>
<p>一些热心的使用者在App Store上给了我们不错的评价和评级，还有一些热心的使用者则给我们写来了邮件——感谢你们对我们的鼓励和夸奖，但更要感谢的，是你们给我们的意见和建议——这让我们觉得如果不能很好的解决上一期你们所碰到和忍受的一些问题的话都不好意思再出第二期。好消息是现在大部分问题都解决了，坏消息是这让我们花费了一些时间，让周刊几乎变成了半月刊。</p>
<p>8月16号，我们向苹果提交了《牛壹周》APP的1.1版，正在等待审批，估计一周过后能在App Store上架。安装过《牛壹周》的老用户，直接升级原来的应用程序即可，不需要重新安装新的APP。虽然1.1的版本号升位非常低调，但这个版本实际上已经进行了脱胎换骨的改变——内容格式从基于Html5+CSS3变成了基于PDF；导航方式变成了全新的“一阳指”式导航；体系架构上实现了书架（应用程序框架）和期刊（各期内容）分离。</p>
<p>OK，现在让我们来看看在更新后的《牛壹周》1.1版中你会看到哪些改变。</p>
<p><span id="more-1349"></span></p>
<h4>1、更平滑的页面切换缓冲</h4>
<p>《牛一周》创刊号发布后，最受诟病的就是页面切换的时候糟糕的缓冲体验——先是眼前一黑，然后一个白菊花（苹果的官方loading动画，也有人叫它风火轮）转啊转，耐心不好的，会以为这个程序已经或即将Crash掉了。</p>
<div id="attachment_1350" class="wp-caption aligncenter" style="width: 590px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/bad.png"><img class="size-full wp-image-1350" title="bad" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/bad.png" alt="使用者在App Store上给我们留言反馈的页面缓冲问题" width="580" height="146" /></a><p class="wp-caption-text">使用者在App Store上给我们留言反馈的页面缓冲问题很有代表性</p></div>
<p>作为一个Apple App设计开发方面刚入行的团队，老实说，当初我们也没想到切换会消耗这么多资源，为了赶上给古灵老师的生日献礼，我们还是Getting Real了一把，在妥善解决好这个问题之前先放出去了——完美总是相对的；孩子总是要生的。</p>
<p>现在《牛壹周》APP的1.1版已经彻底解决了页面缓冲问题，现在你在浏览文章切换页面的时候将是无缝的而且非常平滑，在你翻页操作停止后，程序将在后台开始预载其他页面。不过如果你不是一页页看，而是快速手动翻页，或者在导航区作长程跳转（比如从第一篇文章直接跳到第七篇文章），还是会出现一个很短暂的Loading——因为设备内存和性能方面的考量，我们只预载了当前浏览页的前后各五页，当你要浏览的内容不在预载范围内的时，就开始即时载入。我们这次所做的改进，不是要消灭Loading，而是让Loading足够快，顺便装可爱——你看，为了解决这问题，牛哥我也是囧到黑面忙到出汗，不足之处还请列位看官体谅体谅。</p>
<div id="attachment_1351" class="wp-caption aligncenter" style="width: 264px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/loading.png"><img class="size-full wp-image-1351" title="loading" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/loading.png" alt="EN，牛叔我也有忙不过来的时候⋯⋯" width="254" height="254" /></a><p class="wp-caption-text">EN，牛哥我也有忙不过来的时候⋯⋯</p></div>
<h4>2、全新的“一阳指”导航系统</h4>
<p>《牛壹周》创刊号的导航是个索引＋缩略的混合体系，使用的过程中你会发现其实你并不能在任何时间都通过同样一种操作很随意地到达包括封面在内的任意一页。</p>
<p>这次发布的版本中，如果你单击屏幕会浮现出导航系统。通过下部的彩色导航条（不同色彩代表不同文章类型），现在你可以象操作横向滚动条一样在所有页面间的跳转并同步预览到文章标题、发布时间以及作者头像。</p>
<div id="attachment_1352" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/navigation.png"><img class="size-full wp-image-1352" title="navigation" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/navigation.png" alt="全新的“一阳指”导航体系" width="450" height="600" /></a><p class="wp-caption-text">全新的“一阳指”导航体系</p></div>
<div id="attachment_1353" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/color.png"><img class="size-full wp-image-1353" title="color" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/color.png" alt="目前《牛壹周》的栏目类型与色彩对应关系" width="450" height="133" /></a><p class="wp-caption-text">目前《牛壹周》的栏目类型与色彩对应关系</p></div>
<p>另外我们发现《牛壹周》创刊号的目录页其实给一些使用者带来了困惑——首先，只有它是支持且需要纵向滚屏的；其次，很多人并没有意识到那些标题是可以点击的链接。这次我们把目录页内容也限制到了一屏完全显示——不需要滚屏，也不加超链，操作习惯和其他页面完全一致。</p>
<div id="attachment_1369" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu_v.png"><img class="size-full wp-image-1369" title="menu_v" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu_v.png" alt="第一期创刊号的目录页，需要向下滚屏才能全部看完" width="450" height="588" /></a><p class="wp-caption-text">第一期创刊号的目录页，需要向下滚屏才能全部看完</p></div>
<div id="attachment_1354" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu.png"><img class="size-full wp-image-1354" title="menu" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu.png" alt="压缩为一屏展示的目录页" width="450" height="600" /></a><p class="wp-caption-text">压缩为一屏展示的目录页</p></div>
<h4>3、书架（程序框架）与期刊（每期内容）分离的体系</h4>
<p>因为期刊已经出到了第二期而且以后会出更多期，所以“书架”的概念应运而生。导航条的左上部，是进入“书架”的入口，进入后，你可以切换看到当前和往期杂志的封面，如果你没下载过（封面半透明显示），点击后开始下载该期；如果你已下载（封面正常显示），那么点击后开始正式阅读该期。</p>
<div id="attachment_1355" class="wp-caption aligncenter" style="width: 381px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/navi.png"><img class="size-full wp-image-1355" title="navi" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/navi.png" alt="点这里会进入“书架”" width="371" height="246" /></a><p class="wp-caption-text">点这里会进入“书架”</p></div>
<div id="attachment_1356" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover.png"><img class="size-full wp-image-1356" title="cover" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover.png" alt="进入“书架”后，你看到的会是最新一期的封面" width="450" height="600" /></a><p class="wp-caption-text">进入“书架”后，你看到的会是最新一期的封面</p></div>
<p>我们也曾考虑过是否要跟iBooks一样设计一个实体书架上去，但我们现在期数很少，觉得用一个书架有些大而无当，综合考虑后我们选用了这种最简洁明了的方式来做杂志切换导航——毕竟这本杂志的一个交互设计原则，就是简洁和实用，如非特别必要，我们一般会避免出现长期显示在界面上的按钮和操作提示。</p>
<h4>4、更为简洁醒目的ICON</h4>
<p>是的，上个版本的Icon设计花了我们不少心血，看上去也颇为精致漂亮，但是缩小后作为一个Apple App的图标，我们发现它的可识别性并不是太好——有一天次S为了分析她在华语地区的表现，选择了新加坡地区作为一个参考样本，结果在一堆App里面一眼扫过去，自己都找了两遍才找到我们的《牛壹周》。</p>
<div id="attachment_1357" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/icons_original.png"><img class="size-full wp-image-1357" title="icons_original" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/icons_original.png" alt="在一堆APP里面，牛壹周的Icon并不那么引人注目" width="450" height="333" /></a><p class="wp-caption-text">在一堆APP里面，我们牛壹周的Icon并不那么醒目</p></div>
<div id="attachment_1358" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/icons_change.png"><img class="size-full wp-image-1358" title="icons_change" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/icons_change.png" alt="改成现在这样之后，辨识度显然好了很多" width="450" height="333" /></a><p class="wp-caption-text">改成这样之后，辨识度显然好了很多</p></div>
<div id="attachment_1359" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icons1.png"><img class="size-full wp-image-1359" title="br_icons" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icons1.png" alt="其他在内部票选过程中被淘汰的版本" width="450" height="100" /></a><p class="wp-caption-text">在内部票选过程中被淘汰的其他版本</p></div>
<div id="attachment_1360" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icon.png"><img class="size-full wp-image-1360" title="br_icon" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icon.png" alt="《牛壹周》新ICON定妆照" width="450" height="450" /></a><p class="wp-caption-text">《牛壹周》新ICON定妆照</p></div>
<p>牛角代表牛，壹就是壹，Weekly表示周刊——现在，由图形、汉字和英文混搭的这个《牛壹周》Icon新版本看上去象个漂亮精神的混血儿。：）</p>
<h4>5、现在还不完美，未来值得期待</h4>
<p>到目前为止，《牛壹周》依然是一本实验性的杂志，我们还在对更好的体验进行探索和尝试。在它基本定型之前，我们并不一定保证它每周都能按期推出，但我们会让它每一次推出都比上一次更值得体验和期待。</p>
<p>感谢《牛壹周》1.1版主力设计与开发Shawn，为了这次的版本更新他几乎贡献了所有的双休日；感谢《牛壹周》8月11日第二期主编古灵，作为一个非著名愤青，他让这期充满了时政浓重的体味；感谢为《牛壹周》第一期和第二期提供排版的Fish，她在Indesign上投入的诸多心血，最终也让自己的排版技艺达到了和她的厨艺一样精湛。</p>
<p>我们期待不断的听到来自你们的反馈，对于这本杂志有任何意见和建议，欢迎写信给我们，我们的邮箱是<a href="mailto:team%2Bipad@mycolorway.com" target="_blank">team+ipad@mycolorway.com</a>，或者Follow我们的Twitter账号：@bullreader ，让我们一起阅读、触摸和设计，让她变得更好。</p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/08/18/br11-design-update/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>彩程新名片是如何设计出炉的</title>
		<link>http://mycolorway.com/blog/2010/08/18/ccw_namecard/</link>
		<comments>http://mycolorway.com/blog/2010/08/18/ccw_namecard/#comments</comments>
		<pubDate>Wed, 18 Aug 2010 03:28:44 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[彩程轶事]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[随笔]]></category>
		<category><![CDATA[名片]]></category>
		<category><![CDATA[彩程]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=1319</guid>
		<description><![CDATA[彩程设计成立至今，都还没印新的名片，一方面是因为我们懒惰，另外一方面也是因为对于我们这种靠口碑相传的互联网团队而言，名片的紧迫性确实也不那么高。 公司几乎人人都是设计师，于是把logo矢量图发给大家，让每个人设计自己最心仪的名片样式。 我先出了第一版设计，算是抛砖引玉，抛金百万引金喜善，抛邓亚萍引林志玲。 S很快回复了mail，依然觉得设计不够简洁和规范，给了两点建议： 1、留公司地址没必要（虽然我们现在的办公场所绝对不寒碜），根据实际的经验，如果人们关心你们在哪里，要么访问网站，要么打电话给你询问，对于一个互联网团队而言，网址比地址重要。 2、私人信息不要放在代表公司形像的名片上，昵称、QQ，个人网址都不要，一定要用公司后缀的邮箱。 好吧，马上修改，Getting Real. 然后⋯⋯有兴趣的设计师们开始跟进了⋯⋯ 这套超有爱的设计一出广受好评，然后，Maklu也出招了⋯⋯ 然后，门外汉S也来创作了，在梅西的IT版上进行二度创作，这个⋯⋯很好很好，热情可嘉。 好吧，最后的版本是这样的，正面提供必要信息（呵呵，几乎简洁到了简陋的地步），而真正有趣的是背面，每个人希望展现的个性信息被编入一张二维码（QQ，blog地址，twitter，一句话的座右铭⋯⋯随便你），如果你正好是一个数码潮人或GEEK，那么你很容易就能掏出带摄像头的手机，扫描这个QR Code，然后这些数字信息会被自动提取出来，生成VCard格式的电子名片；如果你不懂但对这个感兴趣，我们会在给你递送名片的时候给你演示一把，让你看看信息科技是如何神奇的改变了我们识别、存储、传播和分享信息的方式⋯⋯然后，我们相信你也一定会从此对这套工具和体系产生兴趣。这个ideal来自Shawn，他经常拿来内部调侃的一句话就是：“人和动物最大的差别，就是人会使用工具。” 实际上，我们觉得这也算是某种态度和观点的传播：如果你希望获得更多的知识和乐趣，那么，你也对应的需要学习和掌握一些新的工具和技能，比如下载一个QR Code识别软件，比如翻墙⋯⋯ 另外，可能有人会问，为什么你们不印上Title呢？比如“CEO”，“设计总监”，“信息架构师”之类。呃⋯⋯首先是因为我们团队比较扁平化（写到这里，想起一个笑话，有天S的一个来度假的外甥观察了几天后问他：“你们公司到底谁说了算？”，S说：“我啊，我是CEO。”，小表弟说：“那怎么我看你们公司每个人都象是老大呢？”），没什么等级观念；另外一个原因是团队的人都比较一专多能，比如做视觉设计的，对信息架构也不太陌生，出去跟人谈的时候，可能又变成了培训师或Sales，同时，还可能是个摄影师或吉他手，如果一个标签无法准确容纳和描述一个人的职能、才华与个性，那么我们就不如不贴这个标签，TA就是TA自己。 不管怎样，这个设计只是官方的版本，每个人心里也有一个与众不同，自己设计或自己最喜欢的版本。我们除了给大家印制官方版本以外，也允许并鼓励每位彩程的设计师设计并印制自己的个性名片，只要使用了彩程的官方logo和网址，公司都将为之买单，至于你喜欢给别人派发哪种，It&#8217;s up to U~]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_head.png"><img class="alignnone size-full wp-image-1320" title="namecard_head" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_head.png" alt="" width="580" height="180" /></a></p>
<p>彩程设计成立至今，都还没印新的名片，一方面是因为我们懒惰，另外一方面也是因为对于我们这种靠口碑相传的互联网团队而言，名片的紧迫性确实也不那么高。</p>
<p>公司几乎人人都是设计师，于是把logo矢量图发给大家，让每个人设计自己最心仪的名片样式。</p>
<p>我先出了第一版设计，算是抛砖引玉，抛金百万引金喜善，抛邓亚萍引林志玲。<span id="more-1319"></span></p>
<div id="attachment_1321" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_peng.png"><img class="size-full wp-image-1321" title="namecard_peng" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_peng.png" alt="" width="450" height="270" /></a><p class="wp-caption-text">左公司，右个人，留白在腰间，简洁在胸口，人挡杀人，佛挡杀佛</p></div>
<p>S很快回复了mail，依然觉得设计不够简洁和规范，给了两点建议：</p>
<p>1、留公司地址没必要（虽然我们现在的办公场所绝对不寒碜），根据实际的经验，如果人们关心你们在哪里，要么访问网站，要么打电话给你询问，对于一个互联网团队而言，网址比地址重要。</p>
<p>2、私人信息不要放在代表公司形像的名片上，昵称、QQ，个人网址都不要，一定要用公司后缀的邮箱。</p>
<p>好吧，马上修改，Getting Real.</p>
<div id="attachment_1322" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred.png"><img class="size-full wp-image-1322" title="namecard_manfred" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred.png" alt="CCW新名片设计demo2" width="450" height="270" /></a><p class="wp-caption-text">简洁，简洁，更简洁</p></div>
<p>然后⋯⋯有兴趣的设计师们开始跟进了⋯⋯</p>
<div id="attachment_1325" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred22.png"><img class="size-full wp-image-1325" title="namecard_manfred2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred22.png" alt="梅西设计的IT版，融入了苹果元素" width="450" height="293" /></a><p class="wp-caption-text">梅西设计的IT版，融入了苹果元素</p></div>
<div id="attachment_1326" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_yinmei.png"><img class="size-full wp-image-1326" title="namecard_yinmei" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_yinmei.png" alt="梅西设计的时尚版" width="450" height="284" /></a><p class="wp-caption-text">梅西设计的时尚版</p></div>
<div id="attachment_1327" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_yinmei2.png"><img class="size-full wp-image-1327" title="namecard_yinmei2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_yinmei2.png" alt="梅西设计的彩程杀武将版" width="450" height="301" /></a><p class="wp-caption-text">梅西设计的彩程杀武将版，创意源自流行的卡牌游戏“三国杀”</p></div>
<p>这套超有爱的设计一出广受好评，然后，Maklu也出招了⋯⋯</p>
<div id="attachment_1328" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_mak2.png"><img class="size-full wp-image-1328" title="namecard_mak2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_mak2.png" alt=" Mak的版本，很有Facebook范儿" width="450" height="250" /></a><p class="wp-caption-text"> Mak的版本，很有Facebook范儿</p></div>
<div id="attachment_1329" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_mak1.png"><img class="size-full wp-image-1329" title="namecard_mak1" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_mak1.png" alt="背面，据说他自己也还没想好" width="450" height="250" /></a><p class="wp-caption-text">背面，据说他自己也还没想好</p></div>
<p>然后，门外汉S也来创作了，在梅西的IT版上进行二度创作，这个⋯⋯很好很好，热情可嘉。</p>
<div id="attachment_1330" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred3.png"><img class="size-full wp-image-1330" title="namecard_manfred3" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_manfred3.png" alt="竞总统计了下：包含了3种中文字体，4种英文字体⋯⋯" width="450" height="291" /></a><p class="wp-caption-text">竞总统计了下：包含了3种中文字体，4种英文字体⋯⋯</p></div>
<div id="attachment_1331" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_show.png"><img class="size-full wp-image-1331" title="namecard_show" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/namecard_show.png" alt="好吧，最后的官方版本是这样的" width="450" height="437" /></a><p class="wp-caption-text">彩程设计最后的官方版本名片正面与背面效果</p></div>
<p>好吧，最后的版本是这样的，正面提供必要信息（呵呵，几乎简洁到了简陋的地步），而真正有趣的是背面，每个人希望展现的个性信息被编入一张二维码（QQ，blog地址，twitter，一句话的座右铭⋯⋯随便你），如果你正好是一个数码潮人或GEEK，那么你很容易就能掏出带摄像头的手机，扫描这个QR Code，然后这些数字信息会被自动提取出来，生成VCard格式的电子名片；如果你不懂但对这个感兴趣，我们会在给你递送名片的时候给你演示一把，让你看看信息科技是如何神奇的改变了我们识别、存储、传播和分享信息的方式⋯⋯然后，我们相信你也一定会从此对这套工具和体系产生兴趣。这个ideal来自Shawn，他经常拿来内部调侃的一句话就是：“人和动物最大的差别，就是人会使用工具。” 实际上，我们觉得这也算是某种态度和观点的传播：如果你希望获得更多的知识和乐趣，那么，你也对应的需要学习和掌握一些新的工具和技能，比如下载一个QR Code识别软件，比如翻墙⋯⋯</p>
<p>另外，可能有人会问，为什么你们不印上Title呢？比如“CEO”，“设计总监”，“信息架构师”之类。呃⋯⋯首先是因为我们团队比较扁平化（写到这里，想起一个笑话，有天S的一个来度假的外甥观察了几天后问他：“你们公司到底谁说了算？”，S说：“我啊，我是CEO。”，小表弟说：“那怎么我看你们公司每个人都象是老大呢？”），没什么等级观念；另外一个原因是团队的人都比较一专多能，比如做视觉设计的，对信息架构也不太陌生，出去跟人谈的时候，可能又变成了培训师或Sales，同时，还可能是个摄影师或吉他手，如果一个标签无法准确容纳和描述一个人的职能、才华与个性，那么我们就不如不贴这个标签，TA就是TA自己。</p>
<p>不管怎样，这个设计只是官方的版本，每个人心里也有一个与众不同，自己设计或自己最喜欢的版本。我们除了给大家印制官方版本以外，也允许并鼓励每位彩程的设计师设计并印制自己的个性名片，只要使用了彩程的官方logo和网址，公司都将为之买单，至于你喜欢给别人派发哪种，It&#8217;s up to U~</p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/08/18/ccw_namecard/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>《牛壹周》顺产记</title>
		<link>http://mycolorway.com/blog/2010/07/30/br03/</link>
		<comments>http://mycolorway.com/blog/2010/07/30/br03/#comments</comments>
		<pubDate>Fri, 30 Jul 2010 04:54:55 +0000</pubDate>
		<dc:creator>yx.shawn</dc:creator>
				<category><![CDATA[iPhone/iPad]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[开发]]></category>
		<category><![CDATA[牛一周]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[经验]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=1153</guid>
		<description><![CDATA[今天，2010年07月30日， 在几乎可以融化大家的44C的成都，牛一周终于顺产了。点这里可以去产房(App Store)围观。 从牛一周怀胎到顺产历时将近2个月。此篇文章是想记录一下并且和大家分享一下我们在怀牛一周的过程中遇到的挫折和经验，希望对您有用。 准备工作 Don&#8217;t Panic 准备工作是我们在牛一周怀胎过程中最耗时的一部分，毕竟我们整个团队从来没有接触过Objective C一类的编程语言。几乎有一个月的时间都折腾于黑苹果，安装XCode，熟悉XCode，看资料，看视频中。 不过，等现在我们再回视整个进入的过程，并不困难。So，如果你也想进入iPhone/iPad的开发队伍， Don&#8217;t Panic！ 我没有什么好书推荐一类的。类似于&#60;The Hitchhiker&#8217;s Guide to the Galaxy&#62;这样的最佳指南，在iPhone开发中，官方SDK就是最好的Guide。 如果非要一份从“从0开始学iPhone开发”一类的资料的话，那我的建议一定是Apple在Stanford课程的录像。点这里查看eMule中的资源。 然后呢？ 然后就开始吧！Objective-C没有想象中的那么难，虽然刚开始看起来并不是很漂亮。但是如果你有C语言和C++等语言基础的话，那我想Objective-C的学习基本不会让你崩溃。 至于传说中的麻烦的内存管理。。。 其实， 也没有这么难拉。 我们的程序在开发到beta阶段的时候才用工具测试是否有内存泄露，结果惊人的是一个也没有*_*。 Objective-C iPhone中的内存管理关键就在于你得知道哪些类型是需要使用指针的，什么时候应该去释放它，赋值操作到底是赋值的值还是赋值的指针。 如果你是从嵌入式开发转过来的小朋友，那你有福了，你完全知道8位和16位的区别，&#38;0xF0的内涵，Objective-C简直与你同生！ 如果是熟悉C和C++的小朋友一定会很轻松，而且你也会高兴于不再纠结于如何取地址和取地址的地址这样超级抓狂的操作，Objective-C比C中的指针操作简单多了。 如果是从Action Script或者JAVA或者C#一类语言转过来的小朋友，最好还是了解一下基础知识吧，要不很容易造成内存泄露。 如果是对堆栈呀、指针呀、消息呀、事件呀完全没有概念的小朋友，那。。。（我也不知道那怎么办，反正就是学呗） 最后，我们一直觉得读代码会是很好的入门学习的方法。那从哪里可以开始呢？ Again，SDK里有很多示例代码。 想进阶？请看Facebook的小朋友给大家的礼物：Tree20（点这里查看）。里面有大量控件，这些控件是Facebook小朋友们在开发Facebook on iPhone的时候用到的。这是一个开源项目，所以你可以窥视到任何一个Sample里的酷炫效果的对应代码。 想看看一个真实完整的应用程序的代码、资源等结构？Wordpress的小朋友们为大家准备的是整个！整个Wordpress的iPhone/iPad应用程序的源代码（点这里查看）！并且这个项目在一个工程中包含了iPhone和iPad两个平台的代码，这对需要开发universal app的小朋友最好的参考(就是在一个app能同时工作于iphone和ipad，并且还可以根据不同的设备选择不同的体验方式)。 如果你还有问题？没关系，你可以上国内的论坛：Cocoachina.com，或者国外的论坛：iPhone dev sdk。当然你也可以给我们写邮件探讨 team+ipad@mycolorway.com （不用担心，那个+号是对的，你没有看错）。 应该开始了吗？ 我们的失误：原型！原型！原型！ 也许你和我们一样，当开始上手后就迫不急待地新建一个工程开始新应用的开发，甚至这种热情可以冲破你对原型设计重要性的理解，即便是有了原型，也许你也会迫不及待地开始编码。这样的失误对于我们这样注意原型设计的团队一样也犯了。 我们在设计的时候，做了信息元素的架构，做了视觉设计。 但是对交互方面却没有仿真，而在iPad这种对交互性要求很强的设备上，等设计已经实现后真实地灌入了文章后反复操作才发现交互上的瑕疵。因此在交互方式改进的过程中造成了一定量的重新编码。当然，我不是说在设计之初做了交互仿真就能一次到位。我是想说明的是，iPhone/iPad的程序开发中，交互方式的重要性会高于互联网上网页的设计，也会更超出设计师的想象能力。例如按钮多大合适？拖动的感应举例是50像素合适？还是100像素合适？这些交互不在真机上仿真之前，谁也不知道上手后的效果。 需要提醒的是，如果你们团队全是由逻辑和理性充满整个世界的程序员构成的话，那可能你们会遇到一点小麻烦，那就是可能没有一个人会关心用户体验。极有可能就开发出了那种彩云字体加彩虹渐变一般的应用程序，让用户几乎以为是19世纪初的人在用21世纪的设备开发应用。“呀！我们团队似乎就是这样的，咋办？” 也许这篇来自Taptaptap的文章可以帮助你早日渡过苦海。 那如何在iPhone/iPad设计上做原型设计呢？apple在WWDC2009年时和大家分享过一个最佳实践：。但这种方式到底好不好？有没有更好的设计办法？能不能把Axure结合进来？我们也不知道，我们也在尝试。并且开放的彩程设计会在第一时间和大家分享我们的设计方法：） 提交应用! 送医院检查咯～ 终于终于，牛一周送医院检查了。当然，你的应用也要经过这个阶段。 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/bullreader.jpg"><img class="alignnone size-full wp-image-1154" title="bullreader" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/bullreader.jpg" alt="" width="580" height="180" /></a></p>
<p>今天，2010年07月30日， 在几乎可以融化大家的44C的成都，牛一周终于顺产了。<a title="在App Store查看牛一周" href="http://ax.itunes.apple.com/cn/app/id383294418?mt=8#ls=1" target="_blank">点这里可以去产房(App Store)围观。</a></p>
<p>从牛一周怀胎到顺产历时将近2个月。此篇文章是想记录一下并且和大家分享一下我们在怀牛一周的过程中遇到的挫折和经验，希望对您有用。<br />
<span id="more-1153"></span></p>
<h4>准备工作</h4>
<h5>Don&#8217;t Panic</h5>
<p>准备工作是我们在牛一周怀胎过程中最耗时的一部分，毕竟我们整个团队从来没有接触过Objective C一类的编程语言。几乎有一个月的时间都折腾于黑苹果，安装XCode，熟悉XCode，看资料，看视频中。</p>
<p>不过，等现在我们再回视整个进入的过程，并不困难。So，如果你也想进入iPhone/iPad的开发队伍， <span style="color: #3366ff;"><strong>Don&#8217;t Panic</strong></span>！</p>
<p>我没有什么好书推荐一类的。类似于&lt;The Hitchhiker&#8217;s Guide to the Galaxy&gt;这样的最佳指南，在iPhone开发中，<span style="color: #3366ff;"><strong>官方SDK就是最好的Guide</strong></span>。</p>
<p>如果非要一份从“从0开始学iPhone开发”一类的资料的话，那我的建议一定是<span style="color: #3366ff;"><strong>Apple在Stanford课程的录像</strong></span>。<a href="http://www.verycd.com/topics/2836669/" target="_blank">点这里查看eMule中的资源</a>。</p>
<p>然后呢？</p>
<p>然后就开始吧！Objective-C没有想象中的那么难，虽然刚开始看起来并不是很漂亮。但是如果你有C语言和C++等语言基础的话，那我想Objective-C的学习基本不会让你崩溃。 至于传说中的麻烦的内存管理。。。 其实， 也没有这么难拉。 我们的程序在开发到beta阶段的时候才用工具测试是否有内存泄露，结果惊人的是一个也没有*_*。 Objective-C iPhone中的<span style="color: #3366ff;"><strong>内存管理关键就在于你得知道哪些类型是需要使用指针的，什么时候应该去释放它，赋值操作到底是赋值的值还是赋值的指针。</strong></span></p>
<ul>
<li>如果你是从嵌入式开发转过来的小朋友，那你有福了，你完全知道8位和16位的区别，&amp;0xF0的内涵，Objective-C简直与你同生！</li>
<li>如果是熟悉C和C++的小朋友一定会很轻松，而且你也会高兴于不再纠结于如何取地址和取地址的地址这样超级抓狂的操作，Objective-C比C中的指针操作简单多了。</li>
<li>如果是从Action Script或者JAVA或者C#一类语言转过来的小朋友，最好还是了解一下基础知识吧，要不很容易造成内存泄露。</li>
<li>如果是对堆栈呀、指针呀、消息呀、事件呀完全没有概念的小朋友，那。。。（我也不知道那怎么办，反正就是学呗）</li>
</ul>
<p>最后，我们一直觉得读代码会是很好的入门学习的方法。那从哪里可以开始呢？</p>
<ul>
<li>Again，SDK里有很多示例代码。</li>
<li>想进阶？请看Facebook的小朋友给大家的礼物：Tree20（<a href="http://github.com/facebook/three20" target="_blank">点这里查看</a>）。里面有大量控件，这些控件是Facebook小朋友们在开发Facebook on iPhone的时候用到的。这是一个开源项目，所以你可以窥视到任何一个Sample里的酷炫效果的对应代码。</li>
<li>想看看一个真实完整的应用程序的代码、资源等结构？Wordpress的小朋友们为大家准备的是整个！整个Wordpress的iPhone/iPad应用程序的源代码（<a href="http://ios.wordpress.org/development/" target="_blank">点这里查看</a>）！并且这个项目在一个工程中包含了iPhone和iPad两个平台的代码，这对需要开发universal app的小朋友最好的参考(就是在一个app能同时工作于iphone和ipad，并且还可以根据不同的设备选择不同的体验方式)。</li>
</ul>
<p>如果你还有问题？没关系，你可以上国内的论坛：<a href="http://www.cocoachina.com/" target="_blank">Cocoachina.com</a>，或者国外的论坛：<a href="http://www.iphonedevsdk.com/forum/" target="_blank">iPhone dev sdk</a>。当然你也可以给我们写邮件探讨<span style="color: #3366ff;"> team+ipad@mycolorway.com</span> （不用担心，那个+号是对的，你没有看错）。</p>
<h4>应该开始了吗？</h4>
<h5>我们的失误：原型！原型！原型！</h5>
<p>也许你和我们一样，当开始上手后就迫不急待地新建一个工程开始新应用的开发，甚至这种热情可以冲破你对原型设计重要性的理解，即便是有了原型，也许你也会迫不及待地开始编码。这样的失误对于我们这样注意原型设计的团队一样也犯了。</p>
<p>我们在设计的时候，做了信息元素的架构，做了视觉设计。 但是对交互方面却没有仿真，而在iPad这种对交互性要求很强的设备上，等设计已经实现后真实地灌入了文章后反复操作才发现交互上的瑕疵。因此在交互方式改进的过程中造成了一定量的重新编码。当然，我不是说在设计之初做了交互仿真就能一次到位。我是想说明的是，iPhone/iPad的程序开发中，交互方式的重要性会高于互联网上网页的设计，也会更超出设计师的想象能力。例如按钮多大合适？拖动的感应举例是50像素合适？还是100像素合适？这些交互不在真机上仿真之前，谁也不知道上手后的效果。</p>
<p>需要提醒的是，如果你们团队全是由逻辑和理性充满整个世界的程序员构成的话，那可能你们会遇到一点小麻烦，那就是可能没有一个人会关心用户体验。极有可能就开发出了那种彩云字体加彩虹渐变一般的应用程序，让用户几乎以为是19世纪初的人在用21世纪的设备开发应用。“呀！我们团队似乎就是这样的，咋办？” <a href="http://taptaptap.com/blog/the-design-session/" target="_blank">也许这篇来自Taptaptap的文章可以帮助你早日渡过苦海</a>。</p>
<p>那如何在iPhone/iPad设计上做原型设计呢？apple在WWDC2009年时和大家分享过一个最佳实践：。但这种方式到底好不好？有没有更好的设计办法？能不能把Axure结合进来？我们也不知道，我们也在尝试。并且开放的彩程设计会在第一时间和大家分享我们的设计方法：）</p>
<h4>提交应用!</h4>
<h5>送医院检查咯～</h5>
<p>终于终于，牛一周送医院检查了。当然，你的应用也要经过这个阶段。 在提交前，我们看到论坛中大家讨论自己程序是如何如何被Reject掉的，搞得十分紧张。最后经过历时9天的in review，终于顺产。那顺利不被Reject的秘诀是什么呢？</p>
<p>好嘛，我还觉得我们没有资格出来大谈秘诀。但是目前我们所知道的是：</p>
<ul>
<li>严格按照SDK给出的API写代码，有的私有API很诱人，但是千万别用。</li>
<li>体验上别太差，如果连苹果审核的人都觉得为苹果App Store上因为这个程序而为耻的话，那我想，这样的程序大多是不会通过审核的（参见官方的用户体验设计准则）。</li>
<li>程序别Crash，在苹果的审核人员手中Crash的话，不是一个很好的开始哟。</li>
<li>提交前，请反复确认你的程序是否符合提交的要求了，请仔细阅读官方的手册。</li>
</ul>
<h4>我们乐意和您讨论：）</h4>
<h5>&#8220;我不同意你们的说法&#8230;&#8221;</h5>
<p>我们并不是那种关在地下室，悄悄地筹划一项颠覆世界的举动的团队（即便是在筹划颠覆世界，我们也会乐于并敢于和大家分享我们的看法）。所以，在我们设计过程中的经验，您不仅可以从follow我们博客中获得，您当然也可以和我们直接取得联系，或者直接写一封踢场的邮件。地址 <span style="color: #3366ff;">team+ipad@mycolorway.com</span>。 或者，你觉得“我喜欢你们团队”甚至“我喜欢你们团队的那个那个&#8230;”，欢迎大家来耍，也欢迎大家来勾兑：）</p>
<p>Anyway,我们乐于与您一起分享各自的见解。</p>
<h4>加入我们的尝鲜小朋友队列</h4>
<h5>在App Store上架前开始帮助我们测试应用程序</h5>
<p>最后，如果你有iPhone或者iPad，并且希望参加到我们的Beta测试者的队列中，可以发送你所使用的机型(iPhone? iPhone3G? iPad? etc.)和机器的UDID到我们的邮箱中，提前拥有和我们一起操翻我们应用程序的权利。我们的邮箱是<span style="color: #3366ff;">team+ipad@mycolorway.com</span>，当然，由于Beta测试者数量有限，我们乐意看到您在邮件中简短地描述一下申请原因。</p>
<h4>一些有用的资源</h4>
<p>最后，附上一些我们认为比较有用的资源吧。</p>
<ul>
<li><a href="http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/" target="_blank">Useful Design Tips For Your iPad App</a></li>
<li><a href="http://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/" target="_blank">Web Development For The iPhone And iPad: Getting Started</a></li>
<li><a href="http://webdesignledger.com/tools/10-best-ipad-apps-for-web-designers" target="_blank">10 Best iPad Apps for Web Designers</a></li>
<li><a href="http://webdesignledger.com/freebies/11-ui-kits-for-iphone-and-ipad-development" target="_blank">11 UI Kits for iPhone and iPad Development</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/07/30/br03/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>献给这个世界，以及某个家伙的礼物：iPad上的《牛壹周》</title>
		<link>http://mycolorway.com/blog/2010/07/21/br01/</link>
		<comments>http://mycolorway.com/blog/2010/07/21/br01/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 16:01:02 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[iPhone/iPad]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[随笔]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=1107</guid>
		<description><![CDATA[彩程有个非著名愤青，叫做古灵。这家伙是个写程序的，但总坚称自己是HR——因为每个进团队的新人，都得先跟他谈谈人生。 这家伙喜欢看书，也喜欢上牛博（www.bullogger.com），所以当我们开始讨论是不是可以在iPad上做点什么好玩的东西的时候，他就大声地嚷嚷说：“我们来做个牛博阅读器吧！” 这一天，是2010年儿童节，由一个问题儿童的特殊爱好而引发的“牛犊计划”，就这样诞生了。 所谓“牛犊计划”，就是我们计划做一个牛博精华文章的阅读器——表现为电子期刊的形式。 然后，我们打算尝试制作多种类型的电子杂志并开发相应的书架，方便管理。 最后，我们计划搭建一个平台，让企业或个人用户可以很方便的创建自己的iPhone／iPad电子杂志。 ⋯⋯ 好吧，这些都是YY，不必当真，其实我们在只是在想，能不能和孩子一样，做点让自己开心的事，哪怕只是用沙子垒一个城堡，然后再用一泡尿，浇出一条白浪滔滔，貌似壮阔的护城河。 总之从第二天开始，Shawn和小滨滨开始了Objective-C、HTML5和CSS3的学习历程——是的，在此之前，我们从未在苹果上开发过任何东西，也没有任何经验和基础——“牛犊计划”的含义有两重：第一，我们要开发的是个牛博网的阅读器，简称“牛读”；第二，初生牛犊不怕虎，没做过没关系，任何事都有第一次。 看完古灵借给我的《独唱团》之后，我自告奋勇当了这本杂志的创刊号山寨主编兼美编，虽然一开始，我甚至不知道它到底应该长成什么样子。 幸亏有身残志坚头脑清晰的S时刻指点迷津，再加上Fish、古灵、多发、小滨滨、Shawn，以及远在沈阳的竞总、梅西、Maklu以及小龙所构成的智囊团提供的各种建议——这本杂志从概念、到原型、到设计都开始渐渐清晰——我不是一个人在战斗。 正式的设计和研发，是从六月下旬开始的，经过几轮设计和程序上的迭代，我们已经搭建出了大概的样子。让我吃惊的是，程序的进度有时甚至比设计更快——小滨滨不愧“天才”的称号，而Shawn也绝不曾辱没“传说”的名头。 最后，还是来说说我们做的是个什么东西吧： 我们做了一本牛博网的iPad电子周刊，叫“牛壹周”。 我们以后每周都会从牛博中选取十个牛人最近的九篇牛文、一张牛图生成一期“牛壹周”——好消息是，它是免费的（不用感谢我们，要谢就谢牛博网和MakLu那本解放军文艺社1963年版的《雷锋的故事》）；坏消息是，我们也是第一次干这种活儿，因为各种可以预见和不可预见的原因，它不一定每次都能如期推出。 今天是2010年7月21日，是个值得纪念的日子。 首先，今天开始，你可以正式称我们为彩程设计。作为一只在比特海中徜徉了三年多的龙虾，我们开始蜕皮——“彩程数字科技”是我们旧的躯壳，“彩程设计”则成为我们新的战斗盔甲。这不仅仅是一次简单 的公司名称更换，也不仅仅是注册资本在数量级上的增长，这标志着我们比以前更专注于设计，并从此迈向自己的产品之路——而无论身在蓝海还是红海，我们都将在探索中蜕变，一如既往。换个不那么事儿逼的说法，就是我们已经码了几块砖头（iphone），搭了块板子（iPad），准备开始在苹果当家的水果铺（Apple app store）卖点自家的香蕉榴莲开心果什么的。 然后，今天我们把自己的第一个产品——iPad电子期刊“牛壹周”提交给了苹果审查，一切顺利的话，大约最多两周左右你就能从苹果的应用商店里看到并下载。 最后，今天是古灵的生日——27年前的今天，一个问题儿童诞生了，27年后，我们制作了一本他最喜欢的电子杂志，祝他生日快乐。 在这个山寨的时代，在这个蛋疼的国度，除了相信点什么，我们还希望能做点什么——哪怕只是传播；如果你愿意，不妨和我们一起感受这份从指尖到内心的触动——哪怕只是阅读。 Life is struggle, Just for fun. 附：创刊号谍照]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/nyz.png"><img class="alignnone size-full wp-image-1113" title="nyz" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/nyz.png" alt="" width="580" height="180" /></a></p>
<p>彩程有个非著名愤青，叫做古灵。这家伙是个写程序的，但总坚称自己是HR——因为每个进团队的新人，都得先跟他谈谈人生。</p>
<p>这家伙喜欢看书，也喜欢上牛博（www.bullogger.com），所以当我们开始讨论是不是可以在iPad上做点什么好玩的东西的时候，他就大声地嚷嚷说：“我们来做个牛博阅读器吧！”</p>
<p>这一天，是2010年儿童节，由一个问题儿童的特殊爱好而引发的“牛犊计划”，就这样诞生了。</p>
<p>所谓“牛犊计划”，就是我们计划做一个牛博精华文章的阅读器——表现为电子期刊的形式。</p>
<p>然后，我们打算尝试制作多种类型的电子杂志并开发相应的书架，方便管理。</p>
<p>最后，我们计划搭建一个平台，让企业或个人用户可以很方便的创建自己的iPhone／iPad电子杂志。</p>
<p><span id="more-1107"></span></p>
<p>⋯⋯</p>
<p>好吧，这些都是YY，不必当真，其实我们在只是在想，能不能和孩子一样，做点让自己开心的事，哪怕只是用沙子垒一个城堡，然后再用一泡尿，浇出一条白浪滔滔，貌似壮阔的护城河。</p>
<p>总之从第二天开始，Shawn和小滨滨开始了Objective-C、HTML5和CSS3的学习历程——是的，在此之前，我们从未在苹果上开发过任何东西，也没有任何经验和基础——“牛犊计划”的含义有两重：第一，我们要开发的是个牛博网的阅读器，简称“牛读”；第二，初生牛犊不怕虎，没做过没关系，任何事都有第一次。</p>
<p>看完古灵借给我的《独唱团》之后，我自告奋勇当了这本杂志的创刊号山寨主编兼美编，虽然一开始，我甚至不知道它到底应该长成什么样子。</p>
<p>幸亏有身残志坚头脑清晰的S时刻指点迷津，再加上Fish、古灵、多发、小滨滨、Shawn，以及远在沈阳的竞总、梅西、Maklu以及小龙所构成的智囊团提供的各种建议——这本杂志从概念、到原型、到设计都开始渐渐清晰——我不是一个人在战斗。</p>
<p>正式的设计和研发，是从六月下旬开始的，经过几轮设计和程序上的迭代，我们已经搭建出了大概的样子。让我吃惊的是，程序的进度有时甚至比设计更快——小滨滨不愧“天才”的称号，而Shawn也绝不曾辱没“传说”的名头。</p>
<p>最后，还是来说说我们做的是个什么东西吧：</p>
<p>我们做了一本牛博网的iPad电子周刊，叫“牛壹周”。</p>
<p>我们以后每周都会从牛博中选取十个牛人最近的九篇牛文、一张牛图生成一期“牛壹周”——好消息是，它是免费的（不用感谢我们，要谢就谢牛博网和MakLu那本解放军文艺社1963年版的《雷锋的故事》）；坏消息是，我们也是第一次干这种活儿，因为各种可以预见和不可预见的原因，它不一定每次都能如期推出。</p>
<p>今天是2010年7月21日，是个值得纪念的日子。</p>
<p>首先，今天开始，你可以正式称我们为彩程设计。作为一只在比特海中徜徉了三年多的龙虾，我们开始蜕皮——“彩程数字科技”是我们旧的躯壳，“彩程设计”则成为我们新的战斗盔甲。这不仅仅是一次简单 的公司名称更换，也不仅仅是注册资本在数量级上的增长，这标志着我们比以前更专注于设计，并从此迈向自己的产品之路——而无论身在蓝海还是红海，我们都将在探索中蜕变，一如既往。换个不那么事儿逼的说法，就是我们已经码了几块砖头（iphone），搭了块板子（iPad），准备开始在苹果当家的水果铺（Apple app store）卖点自家的香蕉榴莲开心果什么的。</p>
<p>然后，今天我们把自己的第一个产品——iPad电子期刊“牛壹周”提交给了苹果审查，一切顺利的话，大约最多两周左右你就能从苹果的应用商店里看到并下载。</p>
<p>最后，今天是古灵的生日——27年前的今天，一个问题儿童诞生了，27年后，我们制作了一本他最喜欢的电子杂志，祝他生日快乐。</p>
<p>在这个山寨的时代，在这个蛋疼的国度，除了相信点什么，我们还希望能做点什么——哪怕只是传播；如果你愿意，不妨和我们一起感受这份从指尖到内心的触动——哪怕只是阅读。</p>
<p>Life is struggle, Just for fun.</p>
<p>附：创刊号谍照</p>
<div id="attachment_1114" class="wp-caption alignnone" style="width: 235px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0348.jpg"><img class="size-medium wp-image-1114" title="IMG_0348" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0348-225x300.jpg" alt="竖版封面" width="225" height="300" /></a><p class="wp-caption-text">封面竖版</p></div>
<div id="attachment_1115" class="wp-caption alignnone" style="width: 310px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0349.jpg"><img class="size-medium wp-image-1115" title="IMG_0349" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0349-300x225.jpg" alt="" width="300" height="225" /></a><p class="wp-caption-text">封面横版</p></div>
<div id="attachment_1116" class="wp-caption alignnone" style="width: 235px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0350.jpg"><img class="size-medium wp-image-1116" title="IMG_0350" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0350-225x300.jpg" alt="" width="225" height="300" /></a><p class="wp-caption-text">目录</p></div>
<div id="attachment_1117" class="wp-caption alignnone" style="width: 235px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0352.jpg"><img class="size-medium wp-image-1117" title="IMG_0352" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0352-225x300.jpg" alt="" width="225" height="300" /></a><p class="wp-caption-text">内文</p></div>
<div id="attachment_1119" class="wp-caption alignnone" style="width: 235px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0355.jpg"><img class="size-medium wp-image-1119" title="IMG_0355" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0355-225x300.jpg" alt="" width="225" height="300" /></a><p class="wp-caption-text">页面预览和跳转</p></div>
<div id="attachment_1118" class="wp-caption alignnone" style="width: 235px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0354.jpg"><img class="size-medium wp-image-1118" title="IMG_0354" src="http://blog.mycolorway.com/wp-content/uploads/2010/07/IMG_0354-225x300.jpg" alt="" width="225" height="300" /></a><p class="wp-caption-text">封底</p></div>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/07/21/br01/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>互联网时代的应用设计</title>
		<link>http://mycolorway.com/blog/2010/05/30/the-principles-of-internet-application-design/</link>
		<comments>http://mycolorway.com/blog/2010/05/30/the-principles-of-internet-application-design/#comments</comments>
		<pubDate>Sun, 30 May 2010 05:01:40 +0000</pubDate>
		<dc:creator>yx.shawn</dc:creator>
				<category><![CDATA[UCD书友会]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[随笔]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[evernote]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[互联网时代]]></category>
		<category><![CDATA[产品开发]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[应用设计]]></category>
		<category><![CDATA[用户交互]]></category>
		<category><![CDATA[用户体验]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/2010/05/30/the-principles-of-internet-application-design/</guid>
		<description><![CDATA[在互联网时代如何开发一个成功的应用？先发放一万份调查问卷，找几十个人关在黑屋子里花两年时间研发，然后期待着一旦推出就颠覆整个互联网？我不得不抱歉地说，以这样一种方式研发一款互联网应用，在互联网时代已经不太适用。 互联网应用单纯地从和传统应用的运行环境下的不同所带来的差异就足够决定互联网应用并不是把传统应用简单地搬到网上。对于开发应用的开发模式上也存在很大的区别，我们先姑且认为那种花两年时间甚至更长时间找几十个人在黑屋子里悄悄研发，刻盘，装在一个大盒子里，顺便附上一本牛津字典一样厚的使用手册属于传统的模式。 那说到互联网时代的应用设计，我想我们大可不必先从什么需求分析开始，大谈特谈软件的鲁棒性，考虑什么代码的可读性，不厌其烦地重复说明团队合作的重要性。是的，这方面的理论和书籍已经多到泛滥的程度，以至于你随便进入一个书店，在《XXX无师自通》那类书的旁边书架，即轻松获得。但我实在不忍心在继大量软件工程教育后再去毒害大家的灵魂谈论毫无生趣的理论，在这里我想和大家分享的其实是一些互联网应用设计的变化。通过对一些互联网成功案例的关注和研究，我在此归纳了我认为一个成功的互联网产品应该具备的最重要的五种特质。 1. 专注 互联网应用越来越倾向于专注，并且正是因为这种专注，让用户的需求得到充分满足。例如Microsoft Outlook那样臃肿的软件已经在互联网上被分解成为了很多应用。需要日程安排？可以用Google Calendar。需要电子邮件？可以用Google Mail。需要记Notes？可以用Evernote。需要TODOs管理？可以用Remember The Milk。正是因为分解，这些互联网应用的设计师可以专注地把一方面的功能设计得十分出色。 如何做到专注？我认为不妨遵循以下几个基本的设计原则。 从简 和商品还没有上市前就考虑降价一样，产品还没开始设计就在思考比别人做得更多一些是十分愚蠢的事儿。我们已经有太多鲜活的例子去证明优秀的产品不是赢在价格上。可能你会问，在计算机应用的设计上从简也一样适用？若你有这样的疑问，并且希望真实地体验这种感受，我的回答办法很简单，你去附近的新华书店前台，那边有一个SAP提供的查书系统（没错，他们称自己是最伟大的商业管理解决方案提供商），你试着去搜索一本书并且试着完成一次购买流程，同样地你再回家用当当图书试着同样购买这本书，一切都不需要我多说了。 轻量 若曾经有个暴发户老板找你聊过他想做的事，动辄就是一个平台要和alibaba一样，你辛苦地按他的想法实现了这样的一个“宏伟平台”，最后90%的栏目无人问津，结果一年不到就死掉了，那我相信你能更容易地理解轻量的重要性。 轻量不是 没有料 复杂的流程 庞大的组织结构 轻量是 内容精致 流程清晰 机动灵活的团队 即使tecent和alibaba，事实上都是在变得轻量。没错他们有庞大的产品和服务结构，但是当我们剥离出其中一个产品，他们都是很轻量的。轻量也不仅仅是对于产品而言，他们团队也是由很多轻量灵活的小团队组成。 给自己挠痒 你明明是一个做互联网应用信息架构天才，却去因为觉得设计一款帮助分析电机震动频率分量的软件更赚钱而决定选择做一件让你痛苦不堪的事儿。这本身就是一种悲哀。 没有任何一个外行能理解你看到Basecamp的信息架构时的兴奋。同样地，你有何必委屈自己去给别人挠痒呢？ 和摄影中“最美的东西就在你身边一公里以内”一样，最好做到专注的办法就是做自己需要的东西。不用担心所谓狗屁市场的问题，这个地球很大的。（PS，我并没有说不充分思考就推出项目，并且相样那样是很致命的） 2. 开放 把用户牢牢地锁在自己的屋子里深怕这些用户跑掉的做法，在互联网上也许这些用户根本就不会愿意进入这个屋子。这样的例子很多，例如有的软件你就死活找不到导出选项。互联网上，用户更容易更换产品，你的不好用，我就用其他的，因此用封闭的办法留住客户无异于把别人骗进店里吃饭，关着门站别人走不了，这样并不是个持续发展的好办法。相反地，如果放开自己的应用，拥抱进入互联网的价值链并成为其中一环会相反会增加应用的价值。例如通过Google Map开放的API，可以让我们把租房信息绘制在地图上，也可以把我们当前的位置绘制在地图上同时看到好友所在的位置（例如foursquare）。做一个这样的应用完全没有必要自己“生产”所有的环节，通过接口的开放使得“Remix”同样具有很高的价值。在国内也有同样的例子。“无所不能”的腾讯自己并没有做“腾讯读书”，也没有做“腾讯菜园”。但是引入的豆瓣网和五分钟的农场两个应用的确实现了多方获利。从豆瓣网的用户注册量上来看吧，2009年08月份正是QZone和douban.com合作的时间（数据来源www.8qk.org）。 3. 按需付费 和那些新闻软文去大谈特谈SaaS的趋势和优点？算了吧，我还不准备这样浪费你的阅读时间。但是事实上，我们已经可以体会到按需付费的好处了。你不用因为需要待办事项管理而花150美金购买一个只能在计算机上使用的Microsoft Outlook，而你可以免费地使用rememberthemilk.com就可以在Android、iPhone、Twitter、Gmail、Windows Mobile等等环境下记录和管理你的待办事项。当然，如果你觉得这个应用对你帮助很大，你可以一年只花25美元就可以享受更多的服务。不用再去做大量的经济学的证明，事实上，互联网用户已经习惯了根据自己的需要购买服务。 4. 个性化 我想说的这个个性化，和更换一个软件皮肤完全不一样。我想说的是在互联网中，人们的沟通变得更容易。这种沟通让用户不希望登上一个互联网产品网站，看着一个板着脸穿着西装的人用着播报新闻的语气告诉你这个产品的优势。不仅仅是用户变得更个性化，提供服务的“老板”们也变得更个性化了。“你不喜欢我们的这种哲学？好嘛，你可以关掉这个网站了。”他们通常会这样告诉网站的访问者。他们会让你感觉到你们是一伙的，或者让你感觉到厌恶。这种个性的偏执恰好帮助在互联网中对用户的筛选。使得应用的设计师们可以更专注地为这些目标用户设计更好的产品。37singles公司就是一个很好的典范。他们并没有拥有超级庞大的用户群，但用户都和他们保持着很高的粘度，这正是价值所在。所以，我们不一定要去设计一个80%的人都勉强喜欢的产品，但可以设计一个只有20%的人极其喜欢的产品。 5. 敏捷 如果你是宝洁公司的CEO，你想了解到你的用户对于某个产品到底怎么想的，也许你会安排一次大型的用户调查，从60亿人里判断哪些是产品的用户，再做问卷或者谈话，分析这些需求，制定一个改进方案，评估方案，对这个产品进行升级，再投入市场，再做调查跟踪。如果你做的是一个互联网产品呢？除非你们团队像Vogons一样的官僚，否则你只需要在产品中加上一句“我们很乐意听到您的意见”，附上一个文本框即可。 当然，我想说的不是放上一个文本框就能把问题解决，而是互联网应用中，用户和设计师之间的沟通更直接，意见的反馈速度更快。甚至你可以在应用的官方博客里发一篇文章来透露产品即将增加的新功能，看看大家的反应如何，或者增加一个Wish-list来搜集用户想要的功能。像“十年磨一剑，双刃未曾试”地这样设计互联网应用，产品失败的可能性会很大。敏捷使得应用更灵活，更能快速地提高产品质量，减少开发的开支，降低应用的执行风险，延长应用的生命周期。千万不要去轻信经济学的原理还有那些公认的“最佳实践”，很多时候这些理论对于你的应用并不适用。最好的办法就是“快”！在他还没有烂掉之前早点动手，快速地去弥补过程中的失误，多思考。 当然，以上5点并不是互联网时代的应用设计的准则，但是正是因为互联网突破了很多传统的限制，使得我们必须多观察多思考才能设计出更好的应用。然而正是因为这些变化，才使得互联网更加精彩，与其把自己关在屋子里憋死，不如去拥抱屋外的风景吧。 谢谢您阅读本文的时间，欢迎讨论。]]></description>
			<content:encoded><![CDATA[<p><img style="display: inline; border-width: 0px;" title="intro" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/intro.png" border="0" alt="intro" width="580" height="180" /></p>
<p>在互联网时代如何开发一个成功的应用？先发放一万份调查问卷，找几十个人关在黑屋子里花两年时间研发，然后期待着一旦推出就颠覆整个互联网？我不得不抱歉地说，以这样一种方式研发一款互联网应用，在互联网时代已经不太适用。</p>
<p>互联网应用单纯地从和传统应用的运行环境下的不同所带来的差异就足够决定互联网应用并不是把传统应用简单地搬到网上。对于开发应用的开发模式上也存在很大的区别，我们先姑且认为那种花两年时间甚至更长时间找几十个人在黑屋子里悄悄研发，刻盘，装在一个大盒子里，顺便附上一本牛津字典一样厚的使用手册属于传统的模式。</p>
<p>那说到互联网时代的应用设计，我想我们大可不必先从什么需求分析开始，大谈特谈软件的鲁棒性，考虑什么代码的可读性，不厌其烦地重复说明团队合作的重要性。是的，这方面的理论和书籍已经多到泛滥的程度，以至于你随便进入一个书店，在《XXX无师自通》那类书的旁边书架，即轻松获得。但我实在不忍心在继大量软件工程教育后再去毒害大家的灵魂谈论毫无生趣的理论，在这里我想和大家分享的其实是一些互联网应用设计的变化。通过对一些互联网成功案例的关注和研究，我在此归纳了我认为一个成功的互联网产品应该具备的最重要的五种特质。</p>
<p><span id="more-1076"></span></p>
<ul>
<li>
<h3>1. 专注</h3>
<p><img style="display: inline; border-width: 0px;" title="1" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/1.png" border="0" alt="1" width="580" height="180" /></p>
<p>互联网应用越来越倾向于专注，并且正是因为这种专注，让用户的需求得到充分满足。例如<a href="http://office.microsoft.com/en-us/outlook/default.aspx" target="_blank">Microsoft Outlook</a>那样臃肿的软件已经在互联网上被分解成为了很多应用。需要日程安排？可以用<a href="http://www.google.com/calendar/" target="_blank">Google Calendar</a>。需要电子邮件？可以用<a href="http://mail.google.com" target="_blank">Google Mail</a>。需要记Notes？可以用<a href="http://www.evernote.com/" target="_blank">Evernote</a>。需要TODOs管理？可以用<a href="http://www.rememberthemilk.com/" target="_blank">Remember The Milk</a>。正是因为分解，这些互联网应用的设计师可以专注地把一方面的功能设计得十分出色。</p>
<p>如何做到专注？我认为不妨遵循以下几个基本的设计原则。</p>
<ul>
<li>
<h4>从简</h4>
<p>和商品还没有上市前就考虑降价一样，产品还没开始设计就在思考比别人做得更多一些是十分愚蠢的事儿。我们已经有太多鲜活的例子去证明优秀的产品不是赢在价格上。可能你会问，在计算机应用的设计上从简也一样适用？若你有这样的疑问，并且希望真实地体验这种感受，我的回答办法很简单，你去附近的新华书店前台，那边有一个SAP提供的查书系统（没错，他们称自己是最伟大的商业管理解决方案提供商），你试着去搜索一本书并且试着完成一次购买流程，同样地你再回家用<a href="http://book.dangdang.com/" target="_blank">当当图书</a>试着同样购买这本书，一切都不需要我多说了。</li>
<li>
<h4>轻量</h4>
<p>若曾经有个暴发户老板找你聊过他想做的事，动辄就是一个平台要和alibaba一样，你辛苦地按他的想法实现了这样的一个“宏伟平台”，最后90%的栏目无人问津，结果一年不到就死掉了，那我相信你能更容易地理解轻量的重要性。</p>
<p><strong>轻量不是</strong></p>
<ul>
<li>没有料</li>
<li>复杂的流程</li>
<li>庞大的组织结构</li>
</ul>
<p><strong>轻量是</strong></p>
<ul>
<li>内容精致</li>
<li>流程清晰</li>
<li>机动灵活的团队</li>
</ul>
<p>即使tecent和alibaba，事实上都是在变得轻量。没错他们有庞大的产品和服务结构，但是当我们剥离出其中一个产品，他们都是很轻量的。轻量也不仅仅是对于产品而言，他们团队也是由很多轻量灵活的小团队组成。</li>
<li>
<h4>给自己挠痒</h4>
<p>你明明是一个做互联网应用信息架构天才，却去因为觉得设计一款帮助分析电机震动频率分量的软件更赚钱而决定选择做一件让你痛苦不堪的事儿。这本身就是一种悲哀。</p>
<p>没有任何一个外行能理解你看到<a href="http://basecamphq.com/" target="_blank">Basecamp</a>的信息架构时的兴奋。同样地，你有何必委屈自己去给别人挠痒呢？</p>
<p>和摄影中“最美的东西就在你身边一公里以内”一样，最好做到专注的办法就是做自己需要的东西。不用担心所谓狗屁市场的问题，这个地球很大的。（PS，我并没有说不充分思考就推出项目，并且相样那样是很致命的）</li>
</ul>
</li>
<li>
<h3>2. 开放</h3>
<p><img style="display: inline; border-width: 0px;" title="2" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/2.png" border="0" alt="2" width="580" height="180" /></li>
<li>把用户牢牢地锁在自己的屋子里深怕这些用户跑掉的做法，在互联网上也许这些用户根本就不会愿意进入这个屋子。这样的例子很多，例如有的软件你就死活找不到导出选项。互联网上，用户更容易更换产品，你的不好用，我就用其他的，因此用封闭的办法留住客户无异于把别人骗进店里吃饭，关着门站别人走不了，这样并不是个持续发展的好办法。相反地，如果放开自己的应用，拥抱进入互联网的价值链并成为其中一环会相反会增加应用的价值。例如通过<a href="http://map.google.com" target="_blank">Google Map</a>开放的API，可以让我们把租房信息绘制在地图上，也可以把我们当前的位置绘制在地图上同时看到好友所在的位置（例如<a href="http://foursquare.com/" target="_blank">foursquare</a>）。做一个这样的应用完全没有必要自己“生产”所有的环节，通过接口的开放使得“Remix”同样具有很高的价值。在国内也有同样的例子。“无所不能”的腾讯自己并没有做“腾讯读书”，也没有做“腾讯菜园”。但是引入的<a href="http://www.douban.com" target="_blank">豆瓣网</a>和<a href="http://www.fminutes.com/" target="_blank">五分钟</a>的农场两个应用的确实现了多方获利。从豆瓣网的用户注册量上来看吧，2009年08月份正是QZone和douban.com合作的时间（数据来源<a href="http://www.8qk.org">www.8qk.org</a>）。</li>
<li><a href="http://blog.mycolorway.com/wp-content/uploads/2010/05/clip_image001.png"><img style="display: inline; border-width: 0px;" title="clip_image001" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/clip_image001_thumb.png" border="0" alt="clip_image001" width="587" height="250" /></a></li>
<li>
<h3>3. 按需付费</h3>
<p><img style="display: inline; border-width: 0px;" title="3" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/3.png" border="0" alt="3" width="580" height="180" /></li>
<li>和那些新闻软文去大谈特谈SaaS的趋势和优点？算了吧，我还不准备这样浪费你的阅读时间。但是事实上，我们已经可以体会到按需付费的好处了。你不用因为需要待办事项管理而花150美金购买一个只能在计算机上使用的Microsoft Outlook，而你可以免费地使用rememberthemilk.com就可以在Android、iPhone、Twitter、Gmail、Windows Mobile等等环境下记录和管理你的待办事项。当然，如果你觉得这个应用对你帮助很大，你可以一年只花25美元就可以享受更多的服务。不用再去做大量的经济学的证明，事实上，互联网用户已经习惯了根据自己的需要购买服务。</li>
<li>
<h3>4. 个性化</h3>
<p><img style="display: inline; border-width: 0px;" title="4" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/4.png" border="0" alt="4" width="580" height="180" /></li>
<li>我想说的这个个性化，和更换一个软件皮肤完全不一样。我想说的是在互联网中，人们的沟通变得更容易。这种沟通让用户不希望登上一个互联网产品网站，看着一个板着脸穿着西装的人用着播报新闻的语气告诉你这个产品的优势。不仅仅是用户变得更个性化，提供服务的“老板”们也变得更个性化了。“你不喜欢我们的这种哲学？好嘛，你可以关掉这个网站了。”他们通常会这样告诉网站的访问者。他们会让你感觉到你们是一伙的，或者让你感觉到厌恶。这种个性的偏执恰好帮助在互联网中对用户的筛选。使得应用的设计师们可以更专注地为这些目标用户设计更好的产品。37singles公司就是一个很好的典范。他们并没有拥有超级庞大的用户群，但用户都和他们保持着很高的粘度，这正是价值所在。所以，我们不一定要去设计一个80%的人都勉强喜欢的产品，但可以设计一个只有20%的人极其喜欢的产品。</li>
<li>
<h3>5. 敏捷</h3>
<p><img style="display: inline; border-width: 0px;" title="5" src="http://blog.mycolorway.com/wp-content/uploads/2010/05/5.png" border="0" alt="5" width="580" height="180" /></li>
<li>如果你是宝洁公司的CEO，你想了解到你的用户对于某个产品到底怎么想的，也许你会安排一次大型的用户调查，从60亿人里判断哪些是产品的用户，再做问卷或者谈话，分析这些需求，制定一个改进方案，评估方案，对这个产品进行升级，再投入市场，再做调查跟踪。如果你做的是一个互联网产品呢？除非你们团队像<a href="http://en.wikipedia.org/wiki/Vogon" target="_blank">Vogons</a>一样的官僚，否则你只需要在产品中加上一句“我们很乐意听到您的意见”，附上一个文本框即可。 当然，我想说的不是放上一个文本框就能把问题解决，而是互联网应用中，用户和设计师之间的沟通更直接，意见的反馈速度更快。甚至你可以在应用的官方博客里发一篇文章来透露产品即将增加的新功能，看看大家的反应如何，或者增加一个Wish-list来搜集用户想要的功能。像“十年磨一剑，双刃未曾试”地这样设计互联网应用，产品失败的可能性会很大。敏捷使得应用更灵活，更能快速地提高产品质量，减少开发的开支，降低应用的执行风险，延长应用的生命周期。千万不要去轻信经济学的原理还有那些公认的“最佳实践”，很多时候这些理论对于你的应用并不适用。最好的办法就是“快”！在他还没有烂掉之前早点动手，快速地去弥补过程中的失误，多思考。</li>
</ul>
<p>当然，以上5点并不是互联网时代的应用设计的准则，但是正是因为互联网突破了很多传统的限制，使得我们必须多观察多思考才能设计出更好的应用。然而正是因为这些变化，才使得互联网更加精彩，与其把自己关在屋子里憋死，不如去拥抱屋外的风景吧。</p>
<p>谢谢您阅读本文的时间，欢迎讨论。</p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/05/30/the-principles-of-internet-application-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 3#</title>
		<link>http://mycolorway.com/blog/2010/04/20/ued-ucd-collection-3/</link>
		<comments>http://mycolorway.com/blog/2010/04/20/ued-ucd-collection-3/#comments</comments>
		<pubDate>Tue, 20 Apr 2010 02:37:10 +0000</pubDate>
		<dc:creator>yx.shawn</dc:creator>
				<category><![CDATA[Web前端技术]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[graphic]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[psd]]></category>
		<category><![CDATA[svg]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[ucd]]></category>
		<category><![CDATA[ucdcn]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[图标]]></category>
		<category><![CDATA[模板]]></category>
		<category><![CDATA[源文件]]></category>
		<category><![CDATA[用户交互]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/2010/04/20/ued-ucd-collection-3/</guid>
		<description><![CDATA[一个月没有把@ucdcn的推汇总出来了。实在惭愧，一来是因为当时写的存储推的数据库出现了一些问题，导致部分推不能被在汇总中显示，二来是因为有朋友反应推的频率太高会被洪水淹没，因此现在减小了推的频率。下面的关于UCD/UED的自3月初的总结。为了大家的检索方便，接下来空余时间我做一个搜索推库的功能，敬请期待^_^ @ 2010-3-3 11:25 创新的简历可能会帮助你找到更好的工作。甚至有的人把 #infographic 的展现方式都运用其中。http://is.gd/9zBQQ @ 2010-3-3 11:27 #iphone #code #web #ued 十分十分有用的代码片段有助于你为iPhone设计更友好的界面。http://is.gd/9zCkP @ 2010-3-3 11:31 #os #jquery “谁在你的网站上？” 有人写了一个开源的&#34;who is online&#34; 的小插件，功能蛮齐的。http://is.gd/9zD11 @ 2010-3-4 10:1 #design #ued Web设计中的颜色理论http://is.gd/aaHRE @ 2010-3-4 11:38 #ued #ucd #web 50个十分漂亮简洁的网站设计欣赏。 颜色越是用得简单，设计的时候就越需要考虑布局排版。大家可以围观 http://is.gd/ab0nI @ 2010-3-4 12:18 #design #ued #web 2010年网页设计趋势预测。 http://is.gd/ab7XZ @ 2010-3-4 12:34 #jquery #ued 未被众人所知的一些jQuery的隐藏技能 http://is.gd/abaU0 [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="ucd-ued" border="0" alt="ucd-ued" src="http://blog.mycolorway.com/wp-content/uploads/2010/04/ucdued.jpg" width="580" height="180" /> </p>
<p>一个月没有把@ucdcn的推汇总出来了。实在惭愧，一来是因为当时写的存储推的数据库出现了一些问题，导致部分推不能被在汇总中显示，二来是因为有朋友反应推的频率太高会被洪水淹没，因此现在减小了推的频率。下面的关于UCD/UED的自3月初的总结。为了大家的检索方便，接下来空余时间我做一个搜索推库的功能，敬请期待^_^</p>
<ul class="twitts">
<li class="twit-item"><b>@ <span class="twit-time">2010-3-3 11:25</span></b>
<p class="twit-content">创新的简历可能会帮助你找到更好的工作。甚至有的人把 #infographic 的展现方式都运用其中。<a href="http://is.gd/9zBQQ" target="blank">http://is.gd/9zBQQ</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-3 11:27</span></b>
<p class="twit-content">#iphone #code #web #ued 十分十分有用的代码片段有助于你为iPhone设计更友好的界面。<a href="http://is.gd/9zCkP" target="blank">http://is.gd/9zCkP</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-3 11:31</span></b>
<p class="twit-content">#os #jquery “谁在你的网站上？” 有人写了一个开源的&quot;who is online&quot; 的小插件，功能蛮齐的。<a href="http://is.gd/9zD11" target="blank">http://is.gd/9zD11</a> </p>
</li>
</ul>
<p> <span id="more-1066"></span>
<ul class="twitts">
<li class="twit-item">
<p class="twit-content"></p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-4 10:1</span></b>
<p class="twit-content">#design #ued Web设计中的颜色理论<a href="http://is.gd/aaHRE" target="blank">http://is.gd/aaHRE</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-4 11:38</span></b>
<p class="twit-content">#ued #ucd #web 50个十分漂亮简洁的网站设计欣赏。 颜色越是用得简单，设计的时候就越需要考虑布局排版。大家可以围观 <a href="http://is.gd/ab0nI" target="blank">http://is.gd/ab0nI</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-4 12:18</span></b>
<p class="twit-content">#design #ued #web 2010年网页设计趋势预测。 <a href="http://is.gd/ab7XZ" target="blank">http://is.gd/ab7XZ</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-4 12:34</span></b>
<p class="twit-content">#jquery #ued 未被众人所知的一些jQuery的隐藏技能 <a href="http://is.gd/abaU0" target="blank">http://is.gd/abaU0</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-5 10:7</span></b>
<p class="twit-content">#ued #tool 十个有用的网站分析工具<a href="http://is.gd/ahjT9" target="blank">http://is.gd/ahjT9</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 9:24</span></b>
<p class="twit-content">#design #case 国外设计师本周搜集的一些很棒的设计 <a href="http://is.gd/aEByt" target="blank">http://is.gd/aEByt</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 9:36</span></b>
<p class="twit-content">#wallpaper wow~简直是太漂亮了，这里有80+地球上最漂亮的地方的照片。 其中部分做了HDR的处理 <a href="http://is.gd/aEFmy" target="blank">http://is.gd/aEFmy</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 9:45</span></b>
<p class="twit-content">#ucd #ucdchina 社区上出现一篇文章，说到安慰用户的一些情感设计。<a href="http://is.gd/aEHSL" target="blank">http://is.gd/aEHSL</a> 这让我想到了前些时间看到的纽约十字路口人行道的按钮其实是不会让红绿灯改变的，但是没有取消的原因完全是为了安慰行人。<a href="http://is.gd/aEHSL" target="blank">http://is.gd/aEHSL</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 9:51</span></b>
<p class="twit-content">#ued #jquery #js 45个有用的jQuery技巧及工具 <a href="http://is.gd/aEJEU" target="blank">http://is.gd/aEJEU</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 13:3</span></b>
<p class="twit-content">#jquery 这个世界什么奇怪的人都有，例如这个，像书的翻页角一样的jQuery插件，虽然不实用，但是的确很sexy <a href="http://is.gd/aJj7E" target="blank">http://is.gd/aJj7E</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 13:5</span></b>
<p class="twit-content">#web #webapp #ued 如果你想设计一个Web Application，这里有20个很棒的20个We APP的接口设计供你参考。<a href="http://is.gd/aJjeo" target="blank">http://is.gd/aJjeo</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 13:9</span></b>
<p class="twit-content">#flash #jquery #chart #ued 如果你要设计一个带有图表的网站，首先想到的是图表用flash/flex来展现。但是若在不支持flash的环境中怎么办？这里有5个顶级JS的包帮助你 <a href="http://is.gd/aJjqB" target="blank">http://is.gd/aJjqB</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 13:25</span></b>
<p class="twit-content">#web #ued 50个设计很漂亮的黄色网站也许能给你不少灵感 <a href="http://is.gd/aJkbS" target="blank">http://is.gd/aJkbS</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 13:43</span></b>
<p class="twit-content">#bizcard 设计名片？背面总是一件痛苦的事儿。这里有一些双面的名片设计的案例供给你参考 <a href="http://is.gd/aJl3z" target="blank">http://is.gd/aJl3z</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-3 12:26</span></b>
<p class="twit-content">#ucd #ued #web 无论你是图像设计和体验设计的高手还是菜鸟，这篇文章总结的12个标准屏幕设计模板都会帮助你把经验固化。文中还包含了大量的最侍实践 <a href="http://is.gd/aLnIH" target="blank">http://is.gd/aLnIH</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 9:38</span></b>
<p class="twit-content">#ucd #flash 请饶恕我的推中不常包含中文网站。的确是我实在不知道哪些是值得拿出来推的，直到我发现这个：<a href="http://www.iloveg3.com/" target="blank">http://www.iloveg3.com/</a> 中国移动的G3宣传概念网站，值得一看 </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-2 9:40</span></b>
<p class="twit-content">#china #design 上一推推了一条中国设计的概念网站，其实SM在前些天刚做了一个关于中国从操到创造的设计大收罗： <a href="http://is.gd/aTDAA" target="blank">http://is.gd/aTDAA</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 9:18</span></b>
<p class="twit-content">#visual #design 一个黑色骚包的设计网站<a href="http://is.gd/b91HZ" target="blank">http://is.gd/b91HZ</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 9:22</span></b>
<p class="twit-content">#design #ad 我也不记得过去是在哪个推上推过一些很有创意的广告牌设计，没有关系，今天补上更多的。这些广告都突破了传统广告牌的设计<a href="http://is.gd/b91WN" target="blank">http://is.gd/b91WN</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 9:25</span></b>
<p class="twit-content">#ads 我终于找到这个广告了，很早前看到的，这应该是BBC推出的一组广告中的一个，我过去看到的不是这个。广告很巧妙地利用了街口转角处的特点设计了这组广告以传达广告的意义<a href="http://is.gd/b9299" target="blank">http://is.gd/b9299</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 10:5</span></b>
<p class="twit-content">#ad 我把刚刚推的那组BBC的户外广告集结在一起了，有兴趣可以看一下 <a href="http://is.gd/b94gs" target="blank">http://is.gd/b94gs</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 16:18</span></b>
<p class="twit-content">#jquery #ued 很漂亮的图片注释显示器插件 </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-4 16:19</span></b>
<p class="twit-content">#jquery #ued 很漂亮的图片注释显示器。<a href="http://is.gd/b9ngn" target="blank">http://is.gd/b9ngn</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 17:0</span></b>
<p class="twit-content">#jquery #js #design 一个很实用的Notify插件<a href="http://is.gd/bgMAp" target="blank">http://is.gd/bgMAp</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 17:4</span></b>
<p class="twit-content">#jquery #js #web 一个动态Tab的插件，蛮有意思的<a href="http://is.gd/bgMOb" target="blank">http://is.gd/bgMOb</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 17:8</span></b>
<p class="twit-content">#jquery #js #web 很囧的jquery动态插件<a href="http://is.gd/bgN3f" target="blank">http://is.gd/bgN3f</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 17:15</span></b>
<p class="twit-content">#jquery #js 现在蛮流行大图片在网站的背景上的使用，这里有一个现成的jquery插件 <a href="http://is.gd/bgNvn" target="blank">http://is.gd/bgNvn</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 20:5</span></b>
<p class="twit-content">#grid #css #web 15个有用的css表格系统供你设计选用<a href="http://is.gd/bqRUa" target="blank">http://is.gd/bqRUa</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-2 20:7</span></b>
<p class="twit-content">#webapp #photo 30个照片在线编辑网站 <a href="http://is.gd/bqS5l" target="blank">http://is.gd/bqS5l</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-5 9:31</span></b>
<p class="twit-content">#design #ipad 用色蛮漂亮的ipad天气预报设计 <a href="http://is.gd/buMyG" target="blank">http://is.gd/buMyG</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-5 9:33</span></b>
<p class="twit-content">#photo 30张很漂亮的中国主题宽屏幕墙纸。 <a href="http://is.gd/buMFn" target="blank">http://is.gd/buMFn</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-5 16:22</span></b>
<p class="twit-content">#infographics #design 太棒了，找到一个infographics的大集合： <a href="http://is.gd/bvcy2" target="blank">http://is.gd/bvcy2</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-5 16:32</span></b>
<p class="twit-content">#ucd #ued #web 50个漂亮的导航条设计 <a href="http://is.gd/bvdct" target="blank">http://is.gd/bvdct</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-4-5 17:26</span></b>
<p class="twit-content">#js #jquery #extjs EXTJS的最大优点就是做数据展示，但是EXTJS对于jQuery而言，过于臃肿，如果我们使用的框架是jQ，同时希望做很好的数据展示，这40个jQ插件也许可以帮上忙<a href="http://is.gd/bvgPu" target="blank">http://is.gd/bvgPu</a> </p>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/04/20/ued-ucd-collection-3/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>我们的原型设计方法</title>
		<link>http://mycolorway.com/blog/2010/03/22/our-way-of-rapid-prototyping/</link>
		<comments>http://mycolorway.com/blog/2010/03/22/our-way-of-rapid-prototyping/#comments</comments>
		<pubDate>Mon, 22 Mar 2010 09:40:35 +0000</pubDate>
		<dc:creator>farthinker</dc:creator>
				<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[ued]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=962</guid>
		<description><![CDATA[这篇文章讲述了彩程进行原型设计的工具、方法与流程]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/duofa.png"><img class="alignnone size-full wp-image-984" title="duofa" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/duofa.png" alt="" width="580" height="180" /></a></p>
<p>根据Standish Group的“Chaos Chronicles Report ”，大约 66% 的软件开发项目不是失败，就是超出预算、超出项目时间，或是交付缩水的功能。</p>
<p>项目失败或亏损的前三大原因为：</p>
<ul>
<li>缺乏使用者的参与</li>
<li>需求或规格不完整</li>
<li>需求或规格变更</li>
</ul>
<p><a href="http://blog.mycolorway.com/author/zchar" target="_blank">白大哥</a>在上一回的《<a href="http://blog.mycolorway.com/2010/01/23/our-ued-flow-method/" target="_blank">我们的UED设计流程及方法</a>》中也提到，一些需求管理工具或者上百页的文档已经不合时宜，不能作为我们跟客户讨论交流的介质和核心。所以我们需要制作原型，用来提高与客户沟通的效率、让客户参与到设计中来并且帮助他们找到核心需求。</p>
<p>传说哥经常说，使用工具是人和动物的根本区别。有很多工具可以帮助我们完成原型设计：<br />
<span id="more-962"></span></p>
<h4>纸和笔</h4>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.20.24-PM.png"><img class="alignnone size-medium wp-image-963" title="纸和笔" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.20.24-PM-274x300.png" alt="纸和笔" width="274" height="300" /></a></p>
<p>纸和笔是最简单也是最常见的原型设计工具。与客户、与同事沟通的过程中，不用打断思路，随手拿起纸和笔，就能表达出我们的心中所想。很撇托、很强大……</p>
<h4>Visio</h4>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.20.53-PM.png"><img class="alignnone size-medium wp-image-964" title="Microsoft Visio" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.20.53-PM-300x228.png" alt="Microsoft Visio" width="300" height="228" /></a></p>
<p>在Axure进入人们的视野之前，Visio是产品原型设计的一个常见选择。Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。</p>
<h4>Fireworks/Photoshop</h4>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.06-PM.png"><img class="alignnone size-medium wp-image-965" title="Fireworks/Photoshop" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.06-PM-300x181.png" alt="Fireworks/Photoshop" width="300" height="181" /></a></p>
<p>视觉设计师出身的项目经理，很多时候喜欢直接使用图形处理软件制作产品的原型。</p>
<h4>Balsamiq Mockups</h4>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.21-PM.png"><img class="alignnone size-medium wp-image-966" title="Balsamiq Mockups" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.21-PM-300x240.png" alt="Balsamiq Mockups" width="300" height="240" /></a></p>
<p>一个基于Adobe Air的手绘风格原型制作工具，控件库很丰富，而且可以自定义控件外观。导出格式为pdf和png。</p>
<h4>Mockflow以及其他在线原型工具</h4>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.30-PM.png"><img class="alignnone size-medium wp-image-967" title="Adobe Mockflow" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.30-PM-300x202.png" alt="Adobe Mockflow" width="300" height="202" /></a></p>
<p>与Balsamiq Mockups相似，各有各的特色，例如Mockflow的原型模板是它的一大特色。这些工具的导出格式也是pdf和png。</p>
<p>前面我提到了，原型需要帮我达到的目标有两个：</p>
<ul>
<li>提高与客户沟通的效率，降低迭代周期</li>
<li>引导客户参与设计，找到他们的核心需求</li>
</ul>
<p>刚才介绍的原型制作的工具大多都能实现第一个目标，但是这些工具的输出物通常是一张png图片，对客户来说，它也就是一张图片而已，大多数客户很难透过这张图片去思考其中的逻辑。这个时候我们的主角Axure RP就该出场了。</p>
<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.40-PM.png"><img class="alignnone size-medium wp-image-968" title="Axure RP Pro" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-5.21.40-PM-300x188.png" alt="Axure RP Pro" width="300" height="188" /></a></p>
<p>Axure RP Pro是美国Axure Software Solution公司的出品一款原型制作软件。Axure的发音是“Ack-sure”，RP则是“Rapid Prototyping”（快速原型设计）的缩写。顾名思义，Axure RP能够帮你快速而有效的建立产品的prototype。</p>
<p>Axure RP上手容易，操作简单，不需要任何技术背景，大多数人都能在一天之内掌握它的使<br />
用方法，所以它能很好的实现上面提到的第一个目标；另外，Axure RP的事件机制能够模拟大多数Web应用中出现的交互行为，并且它的输出物是html，客户能够直观的通过“使用”原型，来想象产品的最终形态，思考原型是否反映了自己的真实需求，这样客户能够自然的参与到设计之中，从而实现了原型的第二个目标。</p>
<p>通常我们将原型设计分为两个阶段，“低保真原型”和“高保真原型”。“低保真原型”的作用是跟客户确认产品的需求和业务逻辑，所以低保真原型通常会很简陋，甚至我们会故意做的很简陋，比如我们会使用一些手绘风格的控件库，这样可以避免客户提出一些不合时宜的问题；而“高保真原型”会高度仿真产品的最终形态，是用于给客户验收的最终产物，另一方面也可以作为产品开发的标准。使用Axure制作高保真原型的时候，几乎能做到跟开发后最后形态一摸一样，包括视觉和交互行为，这一点是其他原型工具很难做到的。</p>
<div id="attachment_977" class="wp-caption alignnone" style="width: 610px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-7.15.20-PM.png"><img class="size-medium wp-image-977" title="使用Axure RP制作高保真原型" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/Screen-shot-2010-03-22-at-7.15.20-PM-1024x644.png" alt="使用Axure RP制作高保真原型" width="600" height="376" /></a><p class="wp-caption-text">使用Axure RP制作高保真原型</p></div>
<p>当我们启动一个用户体验设计项目的时候，我们第一项工作并不是原型设计，在之前还需要很多准备工作：在现场跟客户讨论，了解产品的业务逻辑，有条件的话还会对产品的直接用户进行一些访谈，了解用户的日常工作。紧接着回到公司内部，针对产品的信息架构进行团队头脑风暴，然后项目经理会整理出信息架构的脑图，脑图会作为成果物交给客户确认……在这一系列的准备工作之后，我们才会开始制作产品的原型。</p>
<p>按照我个人的习惯，在低保真设计之前我会用纸笔画一些草图，然后再根据草图制作原型。这样做的好处是，我能够最快的表达并验证自己的想法。</p>
<p>另外，我会使用一些Axure控件库来提高制作原型的效率，例如：<a href="http://www.acleandesign.com/2009/04/better-defaults-for-axure-a-widget-library/" target="_blank">Better Defaults</a>和<a href="http://consulting.ascentium.com/blog/ux-seo/Post222.aspx" target="_blank">Sketchy Axure Widget Library</a>针对一些周期较长的项目，我们会整理一些Axure RP的视觉规范库，提高维护以及二次设计时的效率,并且使用shared project功能通过SVN来管理Axure RP的源文件，方便多人协作设计以及源代码的备份和版本控制。</p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/03/22/our-way-of-rapid-prototyping/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 2#</title>
		<link>http://mycolorway.com/blog/2010/03/01/ucdcn2/</link>
		<comments>http://mycolorway.com/blog/2010/03/01/ucdcn2/#comments</comments>
		<pubDate>Mon, 01 Mar 2010 11:38:12 +0000</pubDate>
		<dc:creator>yx.shawn</dc:creator>
				<category><![CDATA[UCD书友会]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[graphic]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[psd]]></category>
		<category><![CDATA[svg]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[ucd]]></category>
		<category><![CDATA[ucdcn]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[图标]]></category>
		<category><![CDATA[模板]]></category>
		<category><![CDATA[源文件]]></category>
		<category><![CDATA[用户交互]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/2010/03/01/ucdcn2/</guid>
		<description><![CDATA[以下为2010年第十一周的设计资源汇总索引。 随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 http://www.twitter.com/ucdcn/或者访问国内镜像：http://www.digu.com/ucdcn/ @ 2010-2-4 15:44 让大家久等了，今天更新了一下发送分享的工具，继续向大家分享互联网上发现的关于 #UCD #UED 等前端技术的讯息。 @ 2010-2-4 16:5 #ucd #ued 网页表单的提示和验证的最佳实践。 推荐阅读。 http://is.gd/98BOY @ 2010-2-4 16:11 #ucd #ued #css #js #jquery #css3 50个十分有用的网页的视效参考及技术 http://is.gd/98D9z @ 2010-2-4 16:21 #code #ued #ucd 一个很不错的像Twitter登录框一样的 #jquery 代码，可以用于设计的时候参考 http://is.gd/98EXH @ 2010-2-4 16:30 #mobile #tool 根据网站声称，84%的美国人（也许中国更多）现在拥有自己的移动电话，但是不幸的是这些电话并不能很好地兼容现在的网页，如果你想让这些用户很好地用手机访问你的网站，也许http://is.gd/98Gcs 提供的10个工具可以帮上忙 @ 2010-2-4 16:38 #tool #mac #designer 如果你是一个图像设计师，那http://is.gd/98HJi [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/2010/03/01/ucdcn2/"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="ucd-2" border="0" alt="ucd-2" src="http://blog.mycolorway.com/wp-content/uploads/2010/03/ucd2_thumb.jpg" width="580" height="180" /></a> </p>
<p>以下为2010年第十一周的设计资源汇总索引。</p>
<p>随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 <a href="http://www.twitter.com/ucdcn/">http://www.twitter.com/ucdcn/</a>或者访问国内镜像：<a href="http://www.digu.com/ucdcn/">http://www.digu.com/ucdcn/</a></p>
<ul class="twitts">
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 15:44</span></b>
<p class="twit-content">让大家久等了，今天更新了一下发送分享的工具，继续向大家分享互联网上发现的关于 #UCD #UED 等前端技术的讯息。 </p>
</li>
<li class="twit-item"></li>
</ul>
<p> <span id="more-922"></span>
<ul class="twitts">
<li class="twit-item"></li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 16:5</span></b>
<p class="twit-content">#ucd #ued 网页表单的提示和验证的最佳实践。 推荐阅读。 <a href="http://is.gd/98BOY" target="blank">http://is.gd/98BOY</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 16:11</span></b>
<p class="twit-content">#ucd #ued #css #js #jquery #css3 50个十分有用的网页的视效参考及技术 <a href="http://is.gd/98D9z" target="blank">http://is.gd/98D9z</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 16:21</span></b>
<p class="twit-content">#code #ued #ucd 一个很不错的像Twitter登录框一样的 #jquery 代码，可以用于设计的时候参考 <a href="http://is.gd/98EXH" target="blank">http://is.gd/98EXH</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 16:30</span></b>
<p class="twit-content">#mobile #tool 根据网站声称，84%的美国人（也许中国更多）现在拥有自己的移动电话，但是不幸的是这些电话并不能很好地兼容现在的网页，如果你想让这些用户很好地用手机访问你的网站，也许<a href="http://is.gd/98Gcs" target="blank">http://is.gd/98Gcs</a> 提供的10个工具可以帮上忙 </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 16:38</span></b>
<p class="twit-content">#tool #mac #designer 如果你是一个图像设计师，那<a href="http://is.gd/98HJi" target="blank">http://is.gd/98HJi</a> 里分享的MAC和WEB上的小工具可以帮助你更好的工作或生活：） </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-4 17:11</span></b>
<p class="twit-content">#ued #ucd 有一天，你上了一个网站，看到天花乱坠的介绍却永远找不到下载按钮是一件很尴尬的事。如何设计Call-To-Action按钮？<a href="http://is.gd/98Nq9" target="blank">http://is.gd/98Nq9</a> 会给你25个例子启迪你：） </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-5 11:21</span></b>
<p class="twit-content"><a href="http://is.gd/9cJOM" target="blank">http://is.gd/9cJOM</a> #mobile 移动互联网上未来的应用大战，到底什么平台的收费还是免费软件最受欢迎？可以看一下这个报告 </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-5 14:32</span></b>
<p class="twit-content">#design #presentation #inspire这里有各种极具创意的，漂亮的，独一无二并且最富有灵感的设计，我们的目的不是希望单纯跟随某种趋势，而是激发出你的想象力，从而创造出属于自己的独特设计，毕竟，你的网站代表了你个人的品牌。<a href="http://is.gd/9dkyu" target="blank">http://is.gd/9dkyu</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-5 15:17</span></b>
<p class="twit-content">#photo #BW 这里有31张很不错的黑白照片，很不错 <a href="http://is.gd/9ds3N" target="blank">http://is.gd/9ds3N</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-5 15:35</span></b>
<p class="twit-content">#OS #tools 开源的 #subversion 在线浏览器 <a href="http://is.gd/9dv9E" target="blank">http://is.gd/9dv9E</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-5 23:40</span></b>
<p class="twit-content">#design #blue #website Color wheel pro说: 蓝色是天空和海洋的色彩。它象征着信任、忠诚、才智、信心、智慧、信仰、真理与天堂。这里推荐一些蓝色系列的优秀网站，看其中蕴藏着怎样的宁静、稳重或是柔软。<a href="http://is.gd/9fcD6" target="blank">http://is.gd/9fcD6</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-0 16:30</span></b>
<p class="twit-content">#iphone #design #ucd 35个漂亮的iPhone应的网站设计。 有在做iPhone应用的朋友可以看一下 <a href="http://is.gd/9mVaJ" target="blank">http://is.gd/9mVaJ</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-2-0 16:36</span></b>
<p class="twit-content">#ucd #design 有时候你的网站想改版，如果直接来个500错误或者404错误一定会让你的Fans很尴尬。就像店面要来一个敬请期待一样，网站有时候也需要。这里展现了25个漂亮的Coming Soon的例子 <a href="http://is.gd/9mVVR" target="blank">http://is.gd/9mVVR</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 16:50</span></b>
<p class="twit-content">#wallpaper 最新SM社区发出2010年3月日历壁纸，好看好看！大家快去抢吧<a href="http://is.gd/9r9tK" target="blank">http://is.gd/9r9tK</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 16:56</span></b>
<p class="twit-content">#ucd #ued #design 很多国内的设计师事实上都在拷贝粘贴国外的很多设计，或者拼凑素材，这大大地影响了一个网站设计的元素一致性，这里有篇文章对网站的设计一致性作了一些评论<a href="http://is.gd/9ram5" target="blank">http://is.gd/9ram5</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 17:2</span></b>
<p class="twit-content">#wordpress 如何把PSD直接转换成Wordpress的主题？ 切图？ 额~ 现在网上有一个免费的项目，用于让你在不编码的情况下，从PSD生成WordPress的主题<a href="http://is.gd/9rbou" target="blank">http://is.gd/9rbou</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 17:20</span></b>
<p class="twit-content">#wireframe #ued #ucd 免费的WebUI的草图包，有兴趣的同学可以下回去做草图的时候玩 <a href="http://is.gd/9reg6" target="blank">http://is.gd/9reg6</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 17:24</span></b>
<p class="twit-content">#job #it 哪些技术你需要补充了？这里有篇文章统计了一下技术的趋势，这对于无论找工作还是自我完善都是很有帮助的 <a href="http://is.gd/9reLP" target="blank">http://is.gd/9reLP</a> </p>
</li>
<li class="twit-item"><b>@ <span class="twit-time">2010-3-1 17:54</span></b>
<p class="twit-content">#logo #design 简洁的logo并不代表简单。这里有30个设计超级简单的LOGO以事实证明这一点：<a href="http://is.gd/9rjwd" target="blank">http://is.gd/9rjwd</a> </p>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/03/01/ucdcn2/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>UCD书友会·成都 第二次聚会资料分享</title>
		<link>http://mycolorway.com/blog/2010/02/09/cducdshare_002/</link>
		<comments>http://mycolorway.com/blog/2010/02/09/cducdshare_002/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 11:45:18 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[UCD书友会]]></category>
		<category><![CDATA[业界交流]]></category>
		<category><![CDATA[用户体验设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=855</guid>
		<description><![CDATA[写在前面的话 抱歉因为种种原因（项目、加班、搬家、以及该死的惰性⋯⋯）这顿饭上得太晚，希望是好饭不怕晚，各位书友多多见谅。 关于照片 直接浏览点这里：http://blog.mycolorway.com/2010/01/25/cducd-meeting2/ 关于嘉宾的演讲 1、Diigo.com首席设计师Allen的主题演讲《用心去发现，创意在身边——关于Diigo创意与设计的故事》 文档资料：http://www.mycolorway.com/downloads/CDUCD_Allen_Diigo_20100107.pdf 对应视频：http://v.youku.com/v_show/id_XMTUxMjQ0NTMy.html 2、彩程数字科技交互设计师徐峥主题演讲《从满足客户需求，到帮助客户成功——我们的UED设计流程与方法》 文档资料：http://www.mycolorway.com/downloads/CDUCD_Zheng_OurUED_20100107.pdf 对应视频：http://v.youku.com/v_show/id_XMTUxMjU2NzU2.html 相关博文：http://blog.mycolorway.com/2010/01/23/our-ued-flow-method/ 3、新亚苹果天府体验中心讲师黄颖佳主题演讲《难以置信的演示文稿，难以置信的简单——用Keynote制作电子幻灯》 文档资料：该资料用于苹果专业商业培训，抱歉不能提供下载 对应视频：http://v.youku.com/v_show/id_XMTUxMjUyNTky.html 关于其他资源推荐 除了书友会的聚会给大家提供一些讲座和相关咨讯，我们也在随时跟进最新的设计资源并正在和大家通过微博分享。请越过长城follow UED UCD设计资源汇总推 http://www.twitter.com/ucdcn/或者访问国内镜像：http://www.digu.com/ucdcn/ 希望有兴趣的朋友多多Follow并广为传播，谢谢。 BTW：每个月，我们会把这个汇总一次并形成博文，方便大家查阅，感谢火星打杂Shawn的创意和维护。 相关博文：2010年第六周的设计资源汇总索引]]></description>
			<content:encoded><![CDATA[<h4><img class="size-full wp-image-861 alignnone" title="share" src="http://blog.mycolorway.com/wp-content/uploads/2010/02/share.png" alt="share" width="580" height="180" /></h4>
<h4>写在前面的话</h4>
<p>抱歉因为种种原因（项目、加班、搬家、以及该死的惰性⋯⋯）这顿饭上得太晚，希望是好饭不怕晚，各位书友多多见谅。<img title="更多..." src="http://blog.mycolorway.com/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif" alt="" /><span id="more-855"></span></p>
<h4>关于照片</h4>
<p>直接浏览点这里：<a href="http://blog.mycolorway.com/2010/01/25/cducd-meeting2/" target="_blank">http://blog.mycolorway.com/2010/01/25/cducd-meeting2/</a></p>
<h4>关于嘉宾的演讲</h4>
<p>1、Diigo.com首席设计师Allen的主题演讲《用心去发现，创意在身边——关于Diigo创意与设计的故事》</p>
<p>文档资料：<a href="http://www.mycolorway.com/downloads/CDUCD_Allen_Diigo_20100107.pdf">http://www.mycolorway.com/downloads/CDUCD_Allen_Diigo_20100107.pdf</a></p>
<p>对应视频：<a href="http://v.youku.com/v_show/id_XMTUxMjQ0NTMy.html" target="_blank">http://v.youku.com/v_show/id_XMTUxMjQ0NTMy.html</a></p>
<p>2、彩程数字科技交互设计师徐峥主题演讲《从满足客户需求，到帮助客户成功——我们的UED设计流程与方法》</p>
<p>文档资料：<a href="http://www.mycolorway.com/downloads/CDUCD_Fish_UEDLife_20091220.pdf">http://www.mycolorway.com/downloads/CDUCD_Zheng_OurUED_20100107.pdf</a></p>
<p>对应视频：<a href="http://v.youku.com/v_show/id_XMTUxMjU2NzU2.html">http://v.youku.com/v_show/id_XMTUxMjU2NzU2.html</a></p>
<p>相关博文：<a href="http://blog.mycolorway.com/2010/01/23/our-ued-flow-method/" target="_self">http://blog.mycolorway.com/2010/01/23/our-ued-flow-method/</a></p>
<p>3、新亚苹果天府体验中心讲师黄颖佳主题演讲《难以置信的演示文稿，难以置信的简单——用Keynote制作电子幻灯》</p>
<p>文档资料：该资料用于苹果专业商业培训，抱歉不能提供下载</p>
<p>对应视频：<a href="http://v.youku.com/v_show/id_XMTUxMjUyNTky.html" target="_self">http://v.youku.com/v_show/id_XMTUxMjUyNTky.html</a></p>
<h4>关于其他资源推荐</h4>
<p>除了书友会的聚会给大家提供一些讲座和相关咨讯，我们也在随时跟进最新的设计资源并正在和大家通过微博分享。请越过长城follow UED UCD设计资源汇总推 <a href="http://www.twitter.com/ucdcn/" target="_blank">http://www.twitter.com/ucdcn/</a>或者访问国内镜像：<a href="http://www.digu.com/ucdcn/" target="_blank">http://www.digu.com/ucdcn/</a> 希望有兴趣的朋友多多Follow并广为传播，谢谢。</p>
<p>BTW：每个月，我们会把这个汇总一次并形成博文，方便大家查阅，感谢火星打杂Shawn的创意和维护。</p>
<p>相关博文：<a href="http://blog.mycolorway.com/2010/02/09/ucdcn/" target="_self">2010年第六周的设计资源汇总索引</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/02/09/cducdshare_002/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 1#</title>
		<link>http://mycolorway.com/blog/2010/02/09/ucdcn/</link>
		<comments>http://mycolorway.com/blog/2010/02/09/ucdcn/#comments</comments>
		<pubDate>Tue, 09 Feb 2010 07:05:19 +0000</pubDate>
		<dc:creator>yx.shawn</dc:creator>
				<category><![CDATA[UCD书友会]]></category>
		<category><![CDATA[用户体验设计]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[graphic]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[psd]]></category>
		<category><![CDATA[svg]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[ucd]]></category>
		<category><![CDATA[ucdcn]]></category>
		<category><![CDATA[ued]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[图标]]></category>
		<category><![CDATA[模板]]></category>
		<category><![CDATA[源文件]]></category>
		<category><![CDATA[用户交互]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=827</guid>
		<description><![CDATA[以下为2010年第六周的设计资源汇总索引。 随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 http://www.twitter.com/ucdcn/或者访问国内镜像：http://www.digu.com/ucdcn/ UED/UCD设计资源汇总 第一辑 2010-02-05 04:24:33 UCDCN: #ucd #ued #en 昨天分享了怎么画草图，今天来个视频教程：http://is.gd/7JxCq 2010-02-05 03:50:39 UCDCN: #ued #ucd #mobile 最近，互联网在向移动终端转化的趋势日益凸显。但是移动设备在很多方面设计是和网站设计大不一样的。 那我们如何设计下一代移动设备的应用呢？http://is.gd/7Js7J可能会给你一些灵感 2010-02-05 03:45:33 UCDCN: #ued #ucd #css 是不是为#IE 不能支持“现代浏览器”的方法而苦恼？ 这里有篇文章，大量示例教你如何把IE“装”成现代浏览器。CSS Hack的同学值得一看：http://is.gd/7Jrkb 2010-02-05 03:42:18 UCDCN: #ued #ucd #js #svg 简直太强大了，在线SVG编辑器 http://is.gd/7Jr06 2010-02-05 02:46:15 UCDCN: #ued #en 鱼与熊掌不能兼得。 有时候你在设计产品的时候是不是什么都想放进去？于是设计出来的不是网站，而是一个瑞士军刀。 也许你正因此事烦恼，或者未来可能遇到这样的烦恼，建议看一下这篇文章：移除你的功能 http://is.gd/7JhrA* 2010-02-05 02:43:53 UCDCN: #ucd #ued [...]]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-831 alignnone" title="ucd-ued" src="http://blog.mycolorway.com/wp-content/uploads/2010/02/ucd-ued.jpg" alt="ucd-ued" width="580" height="180" /></p>
<p>以下为2010年第六周的设计资源汇总索引。</p>
<p>随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 <a href="http://www.twitter.com/ucdcn/" target="_blank">http://www.twitter.com/ucdcn/</a>或者访问国内镜像：<a href="http://www.digu.com/ucdcn/" target="_blank">http://www.digu.com/ucdcn/</a></p>
<p><strong>UED/UCD设计资源汇总 第一辑</strong></p>
<p>2010-02-05 04:24:33</p>
<p>UCDCN: #ucd #ued #en 昨天分享了怎么画草图，今天来个视频教程：<a href="http://is.gd/7JxCq" target="_blank">http://is.gd/7JxCq</a></p>
<p>2010-02-05 03:50:39</p>
<p>UCDCN: #ued #ucd #mobile 最近，互联网在向移动终端转化的趋势日益凸显。但是移动设备在很多方面设计是和网站设计大不一样的。 那我们如何设计下一代移动设备的应用呢？<a href="http://is.gd/7Js7J" target="_blank">http://is.gd/7Js7J</a>可能会给你一些灵感</p>
<p>2010-02-05 03:45:33</p>
<p>UCDCN: #ued #ucd #css 是不是为#IE 不能支持“现代浏览器”的方法而苦恼？ 这里有篇文章，大量示例教你如何把IE“装”成现代浏览器。CSS Hack的同学值得一看：<a href="http://is.gd/7Jrkb" target="_blank">http://is.gd/7Jrkb</a></p>
<p><a href="http://is.gd/7Jrkb" target="_blank"><span id="more-827"></span></a></p>
<p><span id="more-39290"> </span></p>
<p>2010-02-05 03:42:18</p>
<p>UCDCN: #ued #ucd #js #svg 简直太强大了，在线SVG编辑器 <a href="http://is.gd/7Jr06" target="_blank">http://is.gd/7Jr06</a></p>
<p>2010-02-05 02:46:15</p>
<p>UCDCN: #ued #en 鱼与熊掌不能兼得。 有时候你在设计产品的时候是不是什么都想放进去？于是设计出来的不是网站，而是一个瑞士军刀。 也许你正因此事烦恼，或者未来可能遇到这样的烦恼，建议看一下这篇文章：移除你的功能 <a href="http://is.gd/7JhrA" target="_blank">http://is.gd/7JhrA</a>*</p>
<p>2010-02-05 02:43:53</p>
<p>UCDCN: #ucd #ued #en 7个你应该用于网站设计的工具 <a href="http://is.gd/7JhdM" target="_blank">http://is.gd/7JhdM</a> 不是简单的工具，里面有大量易用性测试的在线工具</p>
<p>2010-02-04 09:05:45</p>
<p>UCDCN: #ucd #ued #en 10个关于设计网站footer的技术 <a href="http://is.gd/7FK6e" target="_blank">http://is.gd/7FK6e</a></p>
<p>2010-02-04 08:58:59</p>
<p>UCDCN: #graphic 让这个推活跃起来吧，来个幽默点的。 #MIT 的一个家伙用Windows的画笔 画出来的一个网站： <a href="http://www.squicky.org/" target="_blank">http://www.squicky.org/</a></p>
<p>2010-02-04 08:54:01</p>
<p>UCDCN: #ucd #ued 如果你想设计纸制风格的网站？这里搜集了大量的关于这方面的素材和方法： <a href="http://is.gd/7FHUZ" target="_blank">http://is.gd/7FHUZ</a></p>
<p>2010-02-04 08:51:03</p>
<p>UCDCN: #ued #ucd #ui 有人说，创新就是把睡过一个月的床单，翻过来，抖抖，铺上，再睡。 我很喜欢这种观点，例如这里就有25个UI设计的模板可以供你参考，很实用。<a href="http://is.gd/7FHxf" target="_blank">http://is.gd/7FHxf</a></p>
<p>2010-02-04 08:46:50</p>
<p>UCDCN: #ued #wordpress #css CSS Sprites用得好是很好用的，例如这里就有一个例子：<a href="http://is.gd/7FGWI" target="_blank">http://is.gd/7FGWI</a>把CSS Sprites用于显示日志的发表时间。</p>
<p>2010-02-04 08:31:58</p>
<p>UCDCN: #ued #css3 #css #animation 简直太酷了，47个超强CSS3的动画示例帮助你设计21世纪网站^_^ <a href="http://is.gd/7FEOE" target="_blank">http://is.gd/7FEOE</a></p>
<p>2010-02-04 08:28:45</p>
<p>UCDCN: #ued 昨天，我们说到了色彩理论在网页设计里的应用。今天专门搜罗了“黄色” 网站给大家qio一下<a href="http://is.gd/7FEqx" target="_blank">http://is.gd/7FEqx</a></p>
<p>2010-02-04 08:27:50</p>
<p>UCDCN: #graphic #design #wallpaper 太安逸了，49张高清宽屏桌面 <a href="http://is.gd/7FEfG" target="_blank">http://is.gd/7FEfG</a></p>
<p>2010-02-04 08:24:44</p>
<p>UCDCN: #ued #ajax #js 来来来，十分有用的js库大搜罗 <a href="http://is.gd/7FDQk" target="_blank">http://is.gd/7FDQk</a></p>
<p>2010-02-04 08:18:48</p>
<p>UCDCN: #ued #en 我们很常见到的是选择日期的控件，但是你有常见过选择时间的控件吗？ 发现了一个好东西，虽然颜色设计不怎么样，但是这种创新的输入时间的方法，的确可以帮我们打开思路 <a href="http://is.gd/7FCOa" target="_blank">http://is.gd/7FCOa</a></p>
<p>2010-02-04 08:14:19</p>
<p>UCDCN: #ued #en 如果你是交互设计的入门级的选手，或者正在处于高速成长阶段的童鞋。 <a href="http://is.gd/7FC2Y" target="_blank">http://is.gd/7FC2Y</a>这篇文章收集了大量关于网站草图设计的指南、工具和资源。</p>
<p>2010-02-04 08:12:16</p>
<p>UCDCN: #ued #en 我们说最可悲的事情就是上一个网站，看介绍看得热血澎湃，却无论怎么都找不到注册按钮。 预防这种事情发生在你设计的网站上，可以首先参考一下这些网站的注册按钮设计： <a href="http://is.gd/7FBBH" target="_blank">http://is.gd/7FBBH</a></p>
<p>2010-02-04 07:58:06</p>
<p>UCDCN: #ued #jquery #en 网站上使用slider可以在同一个区域获得更多的显示空间。例如门户网站的滚动新闻，或者公司网站上的最新案例，这里搜罗了25个十分棒的基于jQuery技术的Slider <a href="http://is.gd/7Fzis" target="_blank">http://is.gd/7Fzis</a></p>
<p>2010-02-04 07:56:16</p>
<p>UCDCN: #ued #design #en 一张图片的色彩元素之间，不仅仅有颜色间的搭配，还需要考虑颜色间的对比度。由于网站很多时候还要考虑读者的阅读，对比度在网站设计比一般设计更需要专门 考究。 <a href="http://is.gd/7FyOn" target="_blank">http://is.gd/7FyOn</a>这里讲了很多关于网页设计中的对比度设计原理。</p>
<p>2010-02-03 03:13:56</p>
<p>UCDCN: #design #ps 大量PS的资源。 包括高分背景图，psd源文件，教程，模板，等等 <a href="http://www.psdgraphics.com/" target="_blank">http://www.psdgraphics.com</a></p>
<p>2010-02-03 02:55:04</p>
<p>UCDCN: #ued #en #design 颜色理论，SM出品的，必是精品。不会配色？或者不知道颜色背后的故事，推荐阅读。<a href="http://is.gd/7AFzT" target="_blank">http://is.gd/7AFzT</a></p>
<p>2010-02-03 02:47:37</p>
<p>UCDCN: #ued #icon #design 漂亮图标怎么设计？这里有5个十分棒的icon设计教程。<a href="http://is.gd/7ADWB" target="_blank">http://is.gd/7ADWB</a></p>
<p>2010-02-03 02:39:49</p>
<p>UCDCN: #design #en 又是一个好网站，上面有大量简洁设计的桌面#wallpaper  。很清爽很漂亮。<a href="http://simpledesktops.com/" target="_blank">http://simpledesktops.com/</a></p>
<p>2010-02-03 02:38:21</p>
<p>UCDCN: #ued #en 好嘛，再来一个#css3 的资源，用CSS3做的进度条，效果不错。<a href="http://is.gd/7ACWt" target="_blank">http://is.gd/7ACWt</a></p>
<p>2010-02-03 02:32:06</p>
<p>UCDCN: #ued 如果你要向你的客户发送带#CSS 的电子邮件，但是由于不同的客户端软件对CSS的支持是不一样的，那这篇文章一定可以帮上你的忙   <a href="http://is.gd/7ABoe" target="_blank">http://is.gd/7ABoe</a></p>
<p>2010-02-03 02:26:40</p>
<p>UCDCN: #tool #en 用#Android 并且同时使用Wordpress写博的童鞋们终于有福音了。Android上管理Wordpress的工具发布：<a href="http://is.gd/7AAVE" target="_blank">http://is.gd/7AAVE</a></p>
<p>2010-02-03 02:22:44</p>
<p>UCDCN: 八个Logo的设计创意，点亮你的创意。额~ <a href="http://is.gd/7AAlR" target="_blank">http://is.gd/7AAlR</a>#design #en</p>
<p>2010-02-02 11:34:03</p>
<p>UCDCN: 做图表展示？最好的办法是使用 #flex #flash 技术，因为FP的runtime在图形表现方面的确很棒。 但是总有一些人不愿意使用，也许他们考虑设计的程序在#ipad 上运行吧。总之，<a href="http://is.gd/7xzPp" target="_blank">http://is.gd/7xzPp</a>这里搜罗了一些用JS写的图表程序 #ucd #js</p>
<p>2010-02-02 11:19:00</p>
<p>UCDCN: 一堆漂亮的Mac APP设计网站，看一下 <a href="http://is.gd/7xxwt" target="_blank">http://is.gd/7xxwt</a>很容易发现2009-2010的网站设计风格，大图在中间^_^ #ucd #mac #design</p>
<p>2010-02-02 11:12:42</p>
<p>UCDCN: 这个好这个好，又发现一个好东西： <a href="http://is.gd/7xwCO" target="_blank">http://is.gd/7xwCO</a>网页版本的RichText Editor大搜罗，根据不同的时候选择不同量级的Editor。FCKEditor不是唯一选择了:) #ucd #js</p>
<p>2010-02-02 09:42:05</p>
<p>UCDCN: 这个效果不错：<a href="http://is.gd/7xhKC" target="_blank">http://is.gd/7xhKC</a>在不用flash技术的情况下实现鼠标移动上去自动放大的展示图片。 建议童鞋看下里面的Demo，很不错 #ucd #js #jquery</p>
<p>2010-02-02 09:29:58</p>
<p>UCDCN: 网站选色搞不定？ 25个超级好用的工具帮你选色^_^ <a href="http://is.gd/7xhg6" target="_blank">http://is.gd/7xhg6</a>#ucd #en #design</p>
<p>2010-02-02 09:27:32</p>
<p>UCDCN: #CSS3 好玩的东西不断， 网上就是存在这些无聊的先驱者，不怕别人说他们无聊，把CSS3 当玩具，不过不可否认的是，他们玩出了来少有趣的东西： <a href="http://is.gd/7xgP3" target="_blank">http://is.gd/7xgP3</a>#ucd #en</p>
<p>2010-02-02 09:24:45</p>
<p>UCDCN: 好嘛，让我们科学一下。 关于如何增加购买转化率的文献是相当稀少的， 很多文章，包括Alibaba UED团队的童鞋们发表的文章，大多都是根据他们自己的观点。 而这里： <a href="http://is.gd/7xgfY" target="_blank">http://is.gd/7xgfY</a>就是真正的罕见的这方面的文献（论文） #ucd #en</p>
<p>2010-02-02 09:19:14</p>
<p>UCDCN: 好嘛，我晓得你们就是喜欢免费的东西。 送上iPad的GUI PS 分层设计源文件。 <a href="http://is.gd/7xfzb" target="_blank">http://is.gd/7xfzb</a> #iphone #design #en</p>
<p>2010-02-02 09:08:36</p>
<p>UCDCN: Google 在09年1月29日 宣布放弃ie6等过时浏览器了 <a href="http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html" target="_blank">http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html</a></p>
<p>2010-02-02 09:06:01</p>
<p>UCDCN: 刚刚说到简洁设计， 于此同时，你还可以看到这40个很漂亮的企业网站：<a href="http://is.gd/7xdAs" target="_blank">http://is.gd/7xdAs</a>他们不一样的是，大多使用了很绚很大的图片。 #ucd #en</p>
<p>2010-02-02 09:04:23</p>
<p>UCDCN: 现在的网站越来越倾向于酷炫的设计。 但是其实简介的风格从来不过时。 下面是36个结构超级简单的网站设计： <a href="http://is.gd/7xdoO" target="_blank">http://is.gd/7xdoO</a>#ucd #en</p>
<p>2010-02-02 08:59:57</p>
<p>UCDCN: 国内很多网站都滥用图片素材，例如是提到网络，总是会放出一张外国老拿着电话的照片。而事实上，使用照片是十分有利于影响用户体验的， 这里有文章说明10种你可以使用图片以影响用户体验的例子：<a href="http://is.gd/7xcwl" target="_blank">http://is.gd/7xcwl</a>#ucd #en</p>
<p>2010-02-02 08:56:16</p>
<p>UCDCN: 设计iPhone上看的网站，建议可以先看一下这篇文章 <a href="http://is.gd/7xc9a" target="_blank">http://is.gd/7xc9a</a>里面有大量关于iPhone所支持的html, CSS, js的情况 #iphone #ucd #en</p>
<p>2010-02-02 08:54:34</p>
<p>UCDCN: 简洁的Ajax框架？ 虽然你有jQuery, ExtJS, YUI 但是毕竟这个世界上总有人喜欢不一样的： <a href="http://is.gd/7xbK3" target="_blank">http://is.gd/7xbK3</a>Check it out:) #ajax #en</p>
<p>2010-02-02 08:50:21</p>
<p>UCDCN: 为找工作做一个在线简历？ 但是不知道怎么设计比较酷？ 也许这5个漂亮的在线简历模板会帮上忙 <a href="http://is.gd/7xbfy" target="_blank">http://is.gd/7xbfy</a>#design #en</p>
<p>2010-02-02 08:48:04</p>
<p>UCDCN: jQuery 1.4.1 的中文翻译 <a href="http://is.gd/7xaWI" target="_blank">http://is.gd/7xaWI</a>#ucd #jquery #zh</p>
<p>2010-02-02 08:47:19</p>
<p>UCDCN: 用jQuery 做电子表格？ 这是jQuery Sheet <a href="http://is.gd/7xaQp" target="_blank">http://is.gd/7xaQp</a>#ucd #jquery #en</p>
<p>2010-02-02 08:46:04</p>
<p>UCDCN: 15个有关对比表格的设计的技巧 <a href="http://is.gd/7xaDq" target="_blank">http://is.gd/7xaDq</a>#ucd #cn</p>
<p>2010-02-02 08:34:36</p>
<p>UCDCN: 用Ps画出更好更真实的照片阴影 <a href="http://is.gd/7%C3%978T6" target="_blank">http://is.gd/7×8T6</a>#ucd #en</p>
<p>2010-02-02 08:33:22</p>
<p>UCDCN: 25个创意的页面Footer设计 <a href="http://is.gd/7%C3%978HA" target="_blank">http://is.gd/7×8HA</a>#ucd #en</p>
<p>2010-02-02 08:19:36</p>
<p>UCDCN: CSS3简介 <a href="http://is.gd/7%C3%976B7" target="_blank">http://is.gd/7×6B7</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mycolorway.com/blog/2010/02/09/ucdcn/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
