<?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://blog.mycolorway.com/tag/%e8%ae%be%e8%ae%a1/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.mycolorway.com</link>
	<description></description>
	<lastBuildDate>Fri, 03 Feb 2012 07:57:22 +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.mycolorway.com/2010/08/25/bull-weekly-newsroom/</link>
		<comments>http://blog.mycolorway.com/2010/08/25/bull-weekly-newsroom/#comments</comments>
		<pubDate>Wed, 25 Aug 2010 06:19:56 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[iPhone/iPad]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[牛一周]]></category>
		<category><![CDATA[牛壹周]]></category>
		<category><![CDATA[编辑]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://mycolorway.com/blog/?p=1375</guid>
		<description><![CDATA[记得小时候喜欢看的一部电视剧，叫《编辑部的故事》，说的是在一个叫《人间指南》的杂志编辑部里，6个性格各异却和谐共生的编辑在一起遭遇人间百态也自我调侃戏谑的故事。 若干年后，我们自己也成立了这样一个编辑部，只是它不叫《人间指南》编辑部，也不叫《天上人间》编辑部，它叫《牛壹周》编辑部。 《牛壹周》V1.1发布后，看起来已经象一份真正的电子杂志了。诚实的说，我们最早只是抱着玩玩的心态，给我们Team当中一个可爱的家伙送个别致的生日礼物，他能看到并开心就不错了，至于能有多少个下载，并不是很在意。 没想到放到App Store上去之后，短短的几周内就有了几千个下载，也收到了不少关注、好评和建议。虽然这本杂志让我们花费了不少心血也不收费，但我们通过它，也结识了很多朋友，收获了很多欢乐，可以说我们的付出收获到了很好的回报——有些回报甚至是意想不到的好——这也极大的鼓舞了我们，决定把这件事情继续做下去。 目前我们尝试性的出了两期，因为很多工作都是第一次尝试，内容和流程也都在不停发生变化，我们在程序开发和内容编排上也都出现了一些不足和错误——虽然只是玩票，但如果玩得太不专业也让我们有些脸红。 所以昨天的Daily Meeting上，我们正式成立了《牛壹周》编辑部——是的，我们很山寨，但我们立志做山寨中的猪笼城寨（不明白这个典故的，建议看看周星驰的电影《功夫》）。 会议上大致讨论了如下议题： 1、《牛壹周》的正式名称 细心的读者会发现，《牛壹周》现在命名体系都是混乱的。我们的杂志叫《牛壹周》，iPad上的程序又叫牛一周，杂志英文名叫Bullogger Weekly，程序英文名又叫BullReader HD（最早我们打算做的东西，是牛博网阅读器），我们自己内部也是牛读、牛壹周、心肝儿肉肉的混叫⋯⋯好吧，现在只有一个中文名叫《牛壹周》，只有一个英文名叫《Bull Weekly》，杂志名从第三期开始更换，程序名从V1.2版本开始更换。从第三期开始，我们也将不仅仅在牛博网（www.bullogger.com）中选择文章，在合适的时候，我们甚至会采用约稿的方式。 2、V1.2版本的更新内容 目前确定在V1.2版本中会有的更新包括：1、消灭Loading ，彻底告别小菊花；2、增加亮度调节功能。有些朋友来信中提到的字体放大、页面放大等功能出于对阅读体验以及排版工作上的考量，我们不打算加入进去，确实有放大阅读需求的同学，我们建议用iPad内置的放大操作——三根指头双击屏幕。 3、分块责任编辑制 第一期杂志的主编是老妖，第二期杂志的主编是古灵，所有文章都是主编选的，我们发现一来工作量大，二来口味太偏颇。 第三期开始，我们根据团队中每个人日常口味的偏好建立了责任编辑制。 常务主编是老妖，同时也是美编之一。时评类责编是古灵（本来我们打算叫时政，古灵甚至打算单独开个政治板块，但在这个神奇的国度，政治这个词已经和小姐一样，从一个美好的说法变得@＃¥％⋯⋯好吧，最后我们还是决定叫时评）；文学类主编是老妖；经济类主编是Manfred（也就是S）；图片类主编是ET；科技类主编是Shawn。Fish负责美编和排版，Aben是刀斧手，小滨滨技术辅助。 4、组稿、编排和发布的流程 前面的两期，在组稿和编排方面，我们从流程到技术都不太成熟，在杂志中也留下了一些错漏和遗憾，我们也会努力在后面的工作中克服和改进。 《牛壹周》作为我们团队的非营利性期刊，到目前为止完全是大家由于共同的爱好来做的，以后期刊的制作也不再占用工作时间。因为时间和精力的关系，目前《牛壹周》暂定为双周刊。我们现在是单周组稿，双周排版，周五发布，同时确定了组稿、审校、美编、排版和发布各个环节的时间节点和责任人。 《牛壹周》是本开放的杂志，我们的编辑部也是个开放的编辑部。我们希望陆续有牛人能加入我们的编辑部，一起来荐稿、选稿、编辑，把这本杂志办得越来越好，让《牛壹周》有一天终能实至名归，一周一期，牛文汇聚。 有任何想法和看法，欢迎请给我们写邮件，我们的邮箱是team+ipad@mycolorway.com，或者Follow我们的Twitter账号：@bullreader，让我们一起阅读、触摸和设计。]]></description>
			<content:encoded><![CDATA[<p><a href="http://mycolorway.com/blog/2010/08/25/bull-weekly-newsroom/"><img src="http://mycolorway.com/blog/wp-content/uploads/2010/08/bullnewsroom.png" alt="" title="bullnewsroom" width="580" height="250" class="alignnone size-full wp-image-1380" /></a></p>
<p>记得小时候喜欢看的一部电视剧，叫《编辑部的故事》，说的是在一个叫《人间指南》的杂志编辑部里，6个性格各异却和谐共生的编辑在一起遭遇人间百态也自我调侃戏谑的故事。</p>
<p>若干年后，我们自己也成立了这样一个编辑部，只是它不叫《人间指南》编辑部，也不叫《天上人间》编辑部，它叫《牛壹周》编辑部。</p>
<p><a href="http://ax.itunes.apple.com/cn/app/id383294418?mt=8#ls=1" target="_blank">《牛壹周》V1.1</a>发布后，看起来已经象一份真正的电子杂志了。诚实的说，我们最早只是抱着玩玩的心态，给我们Team当中一个可爱的家伙送个别致的生日礼物，他能看到并开心就不错了，至于能有多少个下载，并不是很在意。</p>
<p>没想到放到App Store上去之后，短短的几周内就有了几千个下载，也收到了不少关注、好评和建议。虽然这本杂志让我们花费了不少心血也不收费，但我们通过它，也结识了很多朋友，收获了很多欢乐，可以说我们的付出收获到了很好的回报——有些回报甚至是意想不到的好——这也极大的鼓舞了我们，决定把这件事情继续做下去。</p>
<p><span id="more-1375"></span></p>
<p>目前我们尝试性的出了两期，因为很多工作都是第一次尝试，内容和流程也都在不停发生变化，我们在程序开发和内容编排上也都出现了一些不足和错误——虽然只是玩票，但如果玩得太不专业也让我们有些脸红。   所以昨天的Daily Meeting上，我们正式成立了《牛壹周》编辑部——是的，我们很山寨，但我们立志做山寨中的猪笼城寨（不明白这个典故的，建议看看周星驰的电影《功夫》）。</p>
<p>会议上大致讨论了如下议题：</p>
<h4>1、《牛壹周》的正式名称</h4>
<p>细心的读者会发现，《牛壹周》现在命名体系都是混乱的。我们的杂志叫《牛壹周》，iPad上的程序又叫牛一周，杂志英文名叫Bullogger Weekly，程序英文名又叫BullReader HD（最早我们打算做的东西，是牛博网阅读器），我们自己内部也是牛读、牛壹周、心肝儿肉肉的混叫⋯⋯好吧，现在只有一个中文名叫《牛壹周》，只有一个英文名叫《Bull Weekly》，杂志名从第三期开始更换，程序名从V1.2版本开始更换。从第三期开始，我们也将不仅仅在牛博网（www.bullogger.com）中选择文章，在合适的时候，我们甚至会采用约稿的方式。</p>
<h4>2、V1.2版本的更新内容</h4>
<p>目前确定在V1.2版本中会有的更新包括：1、消灭Loading ，彻底告别小菊花；2、增加亮度调节功能。有些朋友来信中提到的字体放大、页面放大等功能出于对阅读体验以及排版工作上的考量，我们不打算加入进去，确实有放大阅读需求的同学，我们建议用iPad内置的放大操作——三根指头双击屏幕。</p>
<h4>3、分块责任编辑制</h4>
<p>第一期杂志的主编是老妖，第二期杂志的主编是古灵，所有文章都是主编选的，我们发现一来工作量大，二来口味太偏颇。   第三期开始，我们根据团队中每个人日常口味的偏好建立了责任编辑制。  常务主编是老妖，同时也是美编之一。时评类责编是古灵（本来我们打算叫时政，古灵甚至打算单独开个政治板块，但在这个神奇的国度，政治这个词已经和小姐一样，从一个美好的说法变得@＃¥％⋯⋯好吧，最后我们还是决定叫时评）；文学类主编是老妖；经济类主编是Manfred（也就是S）；图片类主编是ET；科技类主编是Shawn。Fish负责美编和排版，Aben是刀斧手，小滨滨技术辅助。</p>
<h4>4、组稿、编排和发布的流程</h4>
<p>前面的两期，在组稿和编排方面，我们从流程到技术都不太成熟，在杂志中也留下了一些错漏和遗憾，我们也会努力在后面的工作中克服和改进。    《牛壹周》作为我们团队的非营利性期刊，到目前为止完全是大家由于共同的爱好来做的，以后期刊的制作也不再占用工作时间。因为时间和精力的关系，目前《牛壹周》暂定为双周刊。我们现在是单周组稿，双周排版，周五发布，同时确定了组稿、审校、美编、排版和发布各个环节的时间节点和责任人。</p>
<p>《牛壹周》是本开放的杂志，我们的编辑部也是个开放的编辑部。我们希望陆续有牛人能加入我们的编辑部，一起来荐稿、选稿、编辑，把这本杂志办得越来越好，让《牛壹周》有一天终能实至名归，一周一期，牛文汇聚。</p>
<p>有任何想法和看法，欢迎请给我们写邮件，我们的邮箱是team+ipad@mycolorway.com，或者Follow我们的Twitter账号：@bullreader，让我们一起阅读、触摸和设计。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.mycolorway.com/2010/08/25/bull-weekly-newsroom/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>《牛壹周》1.1升级版的设计与功能改进</title>
		<link>http://blog.mycolorway.com/2010/08/18/br11-design-update/</link>
		<comments>http://blog.mycolorway.com/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://blog.mycolorway.com/2010/08/18/br11-design-update/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>彩程新名片是如何设计出炉的</title>
		<link>http://blog.mycolorway.com/2010/08/18/ccw_namecard/</link>
		<comments>http://blog.mycolorway.com/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://blog.mycolorway.com/2010/08/18/ccw_namecard/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>《牛壹周》设计过程揭秘</title>
		<link>http://blog.mycolorway.com/2010/08/04/br04/</link>
		<comments>http://blog.mycolorway.com/2010/08/04/br04/#comments</comments>
		<pubDate>Wed, 04 Aug 2010 03:00:17 +0000</pubDate>
		<dc:creator>老妖</dc:creator>
				<category><![CDATA[iPhone/iPad]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[牛一周]]></category>
		<category><![CDATA[经验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://blog.mycolorway.com/?p=1175</guid>
		<description><![CDATA[2010年7月30号，《牛壹周》在App Store上架，截止到我写这篇blog，下载量破千，排名暂列中国地区免费程序TOP榜第11位，新闻类第2位。 几天前，Shawn写了篇超有爱的blog――《牛壹周》顺产记，从开发的角度跟大家分享了《牛壹周》的生产过程，比较适合程序员和开发者阅读；在这里我想写一写《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。 一、学习 iPad出来不久，我们便觉得这样的神器简直就是为用户体验设计而生——精致的显示，优秀的交互，简单的操作，让使用没有门槛，充满无限可能——于是我们决定进军这个陌生的领域。 学习是第一步，于是有人开始看Stanford的视频教程，有人开始安装xCode，有人开始研究HTML5，而我，则开始学习苹果4月3号出的那份官方指南《iPad Human Interface Guidelines》。 6月27号的成都UCD书友会，官方主题正好是《移动设备的交互和设计》，于是我把前一阵子的学习的心得和领悟做了份演示文稿，跟参会的书友们进行了分享和交流。 在这份文档里，苹果提出了几个重要的设计原则。 首先，在iPad上侧重的是内容和交互，而不是UI。 作为设计师，几乎我们本能的就会醉心于一些华丽的UI界面而忘了用户本身是来干什么的。为了让用户关注内容本身并在交互的过程中尽量少受干扰，所以我们需要淡化程序UI，弱化界面控件、让信息更扁平化（让上下层级可以在同一界面中自如切换），限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框、只有在需要时才提醒用户⋯⋯ 然后，是内容形式上富有真实感。 iPad上自带的iBooks、Note以及Google Map都是很好的例子。苹果给出的解释是：程序显示和现实生活越相似，用户就越容易理解、操作并喜欢。可以使用动画进一步增强真实感觉，动作的真实感比外观更为重要，要符合物理规律。 最后，是充分利用设备性能和特性。 iPad是今年1月27号才发布的全新设备，除了具有普通数码设备的硬件指标和性能参数之外，还具有很多诸如重力和加速度感应、多点触控、手势识别等人机交互新特性。如何把这些交互手段通过设计结合到你的作品中，会是个有趣的挑战。 总之，上帝的归上帝，凯撒的归凯撒。 二、设计 牛博网阅读器的想法，6月初就提出来了，但要做成什么样子，大家脑子里还是一片混沌。 6月12号，竞总出了份iPad牛博网阅读器低保真模型，有横板和竖版两种模式。它看起来有些象网页，又有些象RSS阅读器，还有些象iPad上的Mail程序——大家都是菜鸟，看到这样的设计，也无法判断这样的设计到底是好，还是坏。后来因为其他项目上的事情一忙，这份原型也就沉没了。 6月底的时候，我开始着手设计。因为本身就是设计师，视效上没有障碍，涉及的页面也不是很多，所以一开始就在PS下面画图了。 网站设计多了，一上来还是传统思路在作祟，结果才设计了个开头就茫然了：心想如果设计成这个样子，还不如人家直接在iPad上用Safari浏览器打开牛博网来看呢⋯⋯ 好吧，摒弃网站思路，做减法后我设计了目录页和内文页，设想应该有按文章索引、按人物索引、RSS订阅和设置这些功能⋯⋯显然，这是个平庸的设计，但其实没关系，很多东西都是这样，刚开始的时候很糗，但至少有了讨论的基础。 团队的Daily Meeting上，大家给了很多好的建议。S拿出一本《南方人物周刊》，说其实应该做成这个样子——首先，它应该是一本杂志，阅读习惯上应该象在阅读一本书而不是浏览一个网站；然后，它应该是一本期刊，时效性比书本高，但比网站和blog低；内容质量和阅读体验和书相当，比网站有更多的个性，更少的噪音。 有了这个定位，设计也就有了方向，牛读器从此变成了《牛壹周》，开始有了典型的杂志封面，开始有了内文的两栏设计，交互上也去掉了纵向滚屏而采用了横向翻页。 在视效框架基本定型，代码上的难点也基本突破的时候，我和Shawn就好象分别从两头开始掘进海底隧道的两只工程队，开始合龙——然后，也才尴尬地发现——有些视效在设计的时候忽略了动态时候的效果，有些交互则会消耗太多系统资源导致无法平滑过渡。而且在模拟器中看到的效果和实际真机运行还是存在一定差距。 文章翻页设计中遇到的问题是个典型的例子。现在文章翻页是需要即时loading的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。我早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字“再拖⋯⋯”；如果你继续拖动页面，图标会完整显示，下面的文字是：“再拖⋯⋯再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。 实际的情况是这个拖动需要滑动的距离设计得太长了⋯⋯如果你紧握iPad边缘用大拇指完成操作，很可能会造成韧带拉伤。当然，经过实际真机调试后我们决定删除那些文字，然后问题就解决了。 在Shawn的博文中也提到过，更有效的设计方法，其实应该是界面的视觉设计有个大概以后就应该和交互仿真同时进行并快速迭代，这个时候做设计的不要考虑太多细节上的修饰；做开发的不要着急实现后面的功能——做一个可以运行在真机上的界面原型可以更早地暴露问题并快速改进。 三、细节 神在细节间，魔鬼也是。 团队奉行37教（我们喜欢37signals.com这种精悍的团队），行事原则就是 Getting Real，不过这也让我们在快速迭代中很难做到细节的尽善尽美。 就拿牛一周的图标来说吧。 7月8号的时候，Shawn说：“妖怪，给我个牛一周的icon吧，我要72X72和256X256两种大小。” 于是我迅速地山寨了一个（好吧，你没猜错，克隆的原型是NBA的芝加哥公牛队LOGO），然后继续其他的设计。 等到7月10号比较空闲的时候，我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格，并尝试各种造型组合。当大家看到那个魔爪版的时候，Mak说：“牛长的不是蹄子么⋯⋯”小龙替我解释道：“妖总画的其实是大菠萝（Diablo）。” 那几天正好在看《独唱团》，用手在封面的牛皮纸和微微泛黄的内文纸上摩挲，感觉很有feel——想到iPad设计指导中所提到的“内容形式上富有真实感”的设计原则，就在封底和内页分别加上了牛皮纸和新闻纸的质感。 为了让人有场景代入的真实感，让人觉得这就是一本杂志，我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺；改进后加入了桌面、台布和咖啡杯——就好象在家，用一本杂志，享受一个很惬意的下午。 如果你在内文页轻轻点击一下，下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论，团队内部争论也比较激烈。 最早的想法是拿作者的头像作为索引，一来这样区分度比较明显，二来其实我们最关注的还是人本身。最早的效果，也不过是在下面浮上来一个半透明的层，然后显示人像照片。 后来我们觉得对于我们这样的牛博网老用户来说把人和文章对应起来不是问题，但对于一些普通读者来说就是会比较困惑——他要跳转到自己喜欢的文章，先要把人头像翻译成自己对应喜欢的文章或风格，这里面经历了一次逻辑转换，会降低成功率。如果他恰好不认识这位作者，那么失败率更高。而小的缩略图虽然可能看不清标题和内容，但是原样复制了色彩和版式，让人很容易形成视觉上的一一对应。 于是我们改成了整个杂志的界面上推，然后在下面的餐台布上显示预览缩略，为了让你的目光聚焦在这个区域，我们在预览浮出的时候，把上面主体的部分作了暗化——这就象有点物理基础的科幻片，让你感觉真实，但也有点超现实。 如果你再细心一点，会发现不同文章的缩略，厚度是不一样的——有些是单页，有些则叠了一两页——这样的设计是我们想用不同的厚度来提示读者这篇文章的长度——如果你觉得它太长就可以放弃。进入文章后，则会用苹果通用的圆点来表示一共有几页和你当前在第几页。 不管怎么说，简洁是我们设计的第一法则。我们不希望看到任何多余的按钮，也没有教程，希望你一上手通过简单的尝试就知道该怎么做——为了达到这个目标，我们在样本大致出来后也找了身边很多朋友来测试。 四、定位 最后，我想用FAQ的方式，来谈谈关于《牛壹周》为什么这样设计，以及如何定位。 Q:如果我喜欢那些文章，我可以上牛博网和订阅他们的RSS，为什么你们还要做这样一本电子杂志？ A:首先，它们的阅读体验不同，在iPad上阅读，显然比在电脑上阅读来得更愉快而方便，而且它相当于是一个存档——在纸张时代就已经有很多人喜欢收集全年的旧杂志，网络时代同样有人有此癖好； 其次，这里面是精选的文章，经过了人的过滤，提升了内容质量，同时降低了阅读噪音，降低了你的筛选成本——我们相信编辑，也是有价值的再创造。虽然我们的品味未必你未必完全认同，但其实你如果完全不认同也就天然不是我们的目标用户。 当然，这只是我们的理解。用古灵常说的一句话来作结，那就是：“我说的都是错的。”欢迎提出相反的看法。：） [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_design2.png"><img class="alignnone size-full wp-image-1215" title="br_design" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_design2.png" alt="" width="580" height="180" /></a></p>
<p>2010年7月30号，《牛壹周》<a href="http://ax.itunes.apple.com/cn/app/id383294418?mt=8#ls=1" target="_blank">在App Store上架</a>，截止到我写这篇blog，下载量破千，排名暂列中国地区免费程序TOP榜第11位，新闻类第2位。</p>
<p>几天前，Shawn写了篇超有爱的blog――<a href="http://blog.mycolorway.com/2010/07/30/br03/" target="_blank">《牛壹周》顺产记</a>，从开发的角度跟大家分享了《牛壹周》的生产过程，比较适合程序员和开发者阅读；在这里我想写一写《牛壹周》设计过程，也许设计师和产品经理们看了会更有共鸣。</p>
<p><span id="more-1175"></span></p>
<h4>一、学习</h4>
<p>iPad出来不久，我们便觉得这样的神器简直就是为用户体验设计而生——精致的显示，优秀的交互，简单的操作，让使用没有门槛，充满无限可能——于是我们决定进军这个陌生的领域。</p>
<p>学习是第一步，于是有人开始看Stanford的视频教程，有人开始安装xCode，有人开始研究HTML5，而我，则开始学习苹果4月3号出的那份官方指南《iPad Human Interface Guidelines》。</p>
<p>6月27号的<a href="http://blog.mycolorway.com/2010/04/09/cducd-faq/" target="_blank">成都UCD书友会</a>，官方主题正好是《移动设备的交互和设计》，于是我把前一阵子的学习的心得和领悟做了份演示文稿，跟参会的书友们进行了分享和交流。</p>
<div id="attachment_1176" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/ipad_design_law.png"><img class="size-full wp-image-1176" title="ipad_design_law" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/ipad_design_law.png" alt="iPad用户体验设计指导性原则" width="450" height="336" /></a><p class="wp-caption-text">iPad用户体验设计指导性原则</p></div>
<p>在这份文档里，苹果提出了几个重要的设计原则。</p>
<p>首先，在iPad上侧重的是内容和交互，而不是UI。</p>
<p>作为设计师，几乎我们本能的就会醉心于一些华丽的UI界面而忘了用户本身是来干什么的。为了让用户关注内容本身并在交互的过程中尽量少受干扰，所以我们需要淡化程序UI，弱化界面控件、让信息更扁平化（让上下层级可以在同一界面中自如切换），限制一个视图内的任务复杂度、淡化文件管理、使用最少的模态对话框、只有在需要时才提醒用户⋯⋯</p>
<p>然后，是内容形式上富有真实感。</p>
<p>iPad上自带的iBooks、Note以及Google Map都是很好的例子。苹果给出的解释是：程序显示和现实生活越相似，用户就越容易理解、操作并喜欢。可以使用动画进一步增强真实感觉，动作的真实感比外观更为重要，要符合物理规律。</p>
<p>最后，是充分利用设备性能和特性。</p>
<p>iPad是今年1月27号才发布的全新设备，除了具有普通数码设备的硬件指标和性能参数之外，还具有很多诸如重力和加速度感应、多点触控、手势识别等人机交互新特性。如何把这些交互手段通过设计结合到你的作品中，会是个有趣的挑战。</p>
<p>总之，上帝的归上帝，凯撒的归凯撒。</p>
<h4>二、设计</h4>
<p>牛博网阅读器的想法，6月初就提出来了，但要做成什么样子，大家脑子里还是一片混沌。</p>
<p>6月12号，竞总出了份iPad牛博网阅读器低保真模型，有横板和竖版两种模式。它看起来有些象网页，又有些象RSS阅读器，还有些象iPad上的Mail程序——大家都是菜鸟，看到这样的设计，也无法判断这样的设计到底是好，还是坏。后来因为其他项目上的事情一忙，这份原型也就沉没了。</p>
<div id="attachment_1177" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_jingzong.png"><img class="size-full wp-image-1177" title="br_jingzong" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_jingzong.png" alt="" width="450" height="340" /></a><p class="wp-caption-text">竞总的设计原型概览</p></div>
<p>6月底的时候，我开始着手设计。因为本身就是设计师，视效上没有障碍，涉及的页面也不是很多，所以一开始就在PS下面画图了。</p>
<p>网站设计多了，一上来还是传统思路在作祟，结果才设计了个开头就茫然了：心想如果设计成这个样子，还不如人家直接在iPad上用Safari浏览器打开牛博网来看呢⋯⋯</p>
<div id="attachment_1178" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_v1.png"><img class="size-full wp-image-1178" title="br_v1" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_v1.png" alt="" width="450" height="576" /></a><p class="wp-caption-text">用做网站的思路来设计iPad应用完全是死路一条</p></div>
<p>好吧，摒弃网站思路，做减法后我设计了目录页和内文页，设想应该有按文章索引、按人物索引、RSS订阅和设置这些功能⋯⋯显然，这是个平庸的设计，但其实没关系，很多东西都是这样，刚开始的时候很糗，但至少有了讨论的基础。</p>
<div id="attachment_1179" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/index_v.png"><img class="size-full wp-image-1179" title="index_v" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/index_v.png" alt="目录页" width="450" height="576" /></a><p class="wp-caption-text">第一版目录页</p></div>
<div id="attachment_1180" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v.png"><img class="size-full wp-image-1180" title="detail_v" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v.png" alt="内文页" width="450" height="576" /></a><p class="wp-caption-text">第一版内文页</p></div>
<p>团队的Daily Meeting上，大家给了很多好的建议。S拿出一本《南方人物周刊》，说其实应该做成这个样子——首先，它应该是一本杂志，阅读习惯上应该象在阅读一本书而不是浏览一个网站；然后，它应该是一本期刊，时效性比书本高，但比网站和blog低；内容质量和阅读体验和书相当，比网站有更多的个性，更少的噪音。</p>
<p>有了这个定位，设计也就有了方向，牛读器从此变成了《牛壹周》，开始有了典型的杂志封面，开始有了内文的两栏设计，交互上也去掉了纵向滚屏而采用了横向翻页。</p>
<div id="attachment_1181" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/index_v2.png"><img class="size-full wp-image-1181" title="index_v2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/index_v2.png" alt="第二版封面" width="450" height="576" /></a><p class="wp-caption-text">第二版封面（我们团队简称CCW，于是戏称自己是山寨传媒CCVV）</p></div>
<div id="attachment_1182" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu_v2.png"><img class="size-full wp-image-1182" title="menu_v2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/menu_v2.png" alt="目录页设计第二版" width="450" height="576" /></a><p class="wp-caption-text">目录页设计第二版</p></div>
<div id="attachment_1183" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v2.png"><img class="size-full wp-image-1183" title="detail_v2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v2.png" alt="内文页设计第二版" width="450" height="576" /></a><p class="wp-caption-text">内文页设计第二版</p></div>
<p>在视效框架基本定型，代码上的难点也基本突破的时候，我和Shawn就好象分别从两头开始掘进海底隧道的两只工程队，开始合龙——然后，也才尴尬地发现——有些视效在设计的时候忽略了动态时候的效果，有些交互则会消耗太多系统资源导致无法平滑过渡。而且在模拟器中看到的效果和实际真机运行还是存在一定差距。</p>
<p>文章翻页设计中遇到的问题是个典型的例子。现在文章翻页是需要即时loading的，为避免误操作，我们需要用户拖动移动一定长度后才确认这是翻页操作。我早期的设计中，图标翻转的效果下面还有一句作为噱头的话。如果你用手指拖动页面，会先浮现出图标，下面配上提示文字“再拖⋯⋯”；如果你继续拖动页面，图标会完整显示，下面的文字是：“再拖⋯⋯再拖就是下一篇了哦～”，当用户拖到程序设定的长度，图标变红，然后就翻页了。</p>
<div id="attachment_1184" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/flip_page.png"><img class="size-full wp-image-1184" title="flip_page" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/flip_page.png" alt="翻页提示的设计" width="450" height="724" /></a><p class="wp-caption-text">翻页提示的设计</p></div>
<p>实际的情况是这个拖动需要滑动的距离设计得太长了⋯⋯如果你紧握iPad边缘用大拇指完成操作，很可能会造成韧带拉伤。当然，经过实际真机调试后我们决定删除那些文字，然后问题就解决了。</p>
<p>在Shawn的博文中也提到过，更有效的设计方法，其实应该是界面的视觉设计有个大概以后就应该和交互仿真同时进行并快速迭代，这个时候做设计的不要考虑太多细节上的修饰；做开发的不要着急实现后面的功能——做一个可以运行在真机上的界面原型可以更早地暴露问题并快速改进。</p>
<h4>三、细节</h4>
<p>神在细节间，魔鬼也是。</p>
<p>团队奉行37教（我们喜欢<a href="http://37signals.com/" target="_blank">37signals.com</a>这种精悍的团队），行事原则就是 Getting Real，不过这也让我们在快速迭代中很难做到细节的尽善尽美。</p>
<p>就拿牛一周的图标来说吧。</p>
<p>7月8号的时候，Shawn说：“妖怪，给我个牛一周的icon吧，我要72X72和256X256两种大小。”</p>
<p>于是我迅速地山寨了一个（好吧，你没猜错，克隆的原型是NBA的芝加哥公牛队LOGO），然后继续其他的设计。</p>
<div id="attachment_1185" class="wp-caption aligncenter" style="width: 266px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/logo_256.png"><img class="size-full wp-image-1185" title="logo_256" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/logo_256.png" alt="《牛壹周》第一版icon" width="256" height="256" /></a><p class="wp-caption-text">费总说：Ei~看起来怎么这么眼熟呢？</p></div>
<p>等到7月10号比较空闲的时候，我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格，并尝试各种造型组合。当大家看到那个魔爪版的时候，Mak说：“牛长的不是蹄子么⋯⋯”小龙替我解释道：“妖总画的其实是大菠萝（<span>Diablo</span>）。”</p>
<div id="attachment_1186" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icons.png"><img class="size-full wp-image-1186" title="br_icons" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icons.png" alt="《牛壹周》icons不同版本尝试" width="450" height="275" /></a><p class="wp-caption-text">《牛壹周》icons不同版本尝试</p></div>
<div id="attachment_1187" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icon_480.png"><img class="size-full wp-image-1187" title="br_icon_480" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br_icon_480.png" alt="牛壹周icon定妆照" width="450" height="450" /></a><p class="wp-caption-text">牛壹周icon定妆照</p></div>
<p>那几天正好在看《独唱团》，用手在封面的牛皮纸和微微泛黄的内文纸上摩挲，感觉很有feel——想到iPad设计指导中所提到的“内容形式上富有真实感”的设计原则，就在封底和内页分别加上了牛皮纸和新闻纸的质感。</p>
<div id="attachment_1188" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/loading_v.png"><img class="size-full wp-image-1188" title="loading_v" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/loading_v.png" alt="封底和Loading页" width="450" height="588" /></a><p class="wp-caption-text">Loading页和封底</p></div>
<div id="attachment_1192" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v31.png"><img class="size-full wp-image-1192" title="detail_v3" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v31.png" alt="内文页设计第三版" width="450" height="588" /></a><p class="wp-caption-text">内文页设计第三版</p></div>
<p>为了让人有场景代入的真实感，让人觉得这就是一本杂志，我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺；改进后加入了桌面、台布和咖啡杯——就好象在家，用一本杂志，享受一个很惬意的下午。</p>
<div id="attachment_1193" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_v3.png"><img class="size-full wp-image-1193" title="cover_v3" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_v3.png" alt="封面竖版" width="450" height="588" /></a><p class="wp-caption-text">封面竖屏设计</p></div>
<div id="attachment_1194" class="wp-caption aligncenter" style="width: 626px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_h2.png"><img class="size-full wp-image-1194" title="cover_h2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_h2.png" alt="早期的封面横版设计" width="616" height="450" /></a><p class="wp-caption-text">早期的封面横屏设计，只是简单的旋转缩放然后居中</p></div>
<div id="attachment_1196" class="wp-caption aligncenter" style="width: 626px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_h31.png"><img class="size-full wp-image-1196" title="cover_h3" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/cover_h31.png" alt="修改后的设计，增强了场景代入感" width="616" height="450" /></a><p class="wp-caption-text">修改后的设计，增强了场景代入感</p></div>
<p>如果你在内文页轻轻点击一下，下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论，团队内部争论也比较激烈。</p>
<p>最早的想法是拿作者的头像作为索引，一来这样区分度比较明显，二来其实我们最关注的还是人本身。最早的效果，也不过是在下面浮上来一个半透明的层，然后显示人像照片。</p>
<div id="attachment_1197" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v_preview2.png"><img class="size-full wp-image-1197" title="detail_v_preview2" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v_preview2.png" alt="第二版的预览模式设计" width="450" height="576" /></a><p class="wp-caption-text">第二版的预览模式设计</p></div>
<p>后来我们觉得对于我们这样的牛博网老用户来说把人和文章对应起来不是问题，但对于一些普通读者来说就是会比较困惑——他要跳转到自己喜欢的文章，先要把人头像翻译成自己对应喜欢的文章或风格，这里面经历了一次逻辑转换，会降低成功率。如果他恰好不认识这位作者，那么失败率更高。而小的缩略图虽然可能看不清标题和内容，但是原样复制了色彩和版式，让人很容易形成视觉上的一一对应。</p>
<p>于是我们改成了整个杂志的界面上推，然后在下面的餐台布上显示预览缩略，为了让你的目光聚焦在这个区域，我们在预览浮出的时候，把上面主体的部分作了暗化——这就象有点物理基础的科幻片，让你感觉真实，但也有点超现实。</p>
<div id="attachment_1198" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v_p2_menu3.png"><img class="size-full wp-image-1198" title="detail_v_p2_menu3" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/detail_v_p2_menu3.png" alt="改进后的预览设计" width="450" height="588" /></a><p class="wp-caption-text">改进后的预览设计</p></div>
<p>如果你再细心一点，会发现不同文章的缩略，厚度是不一样的——有些是单页，有些则叠了一两页——这样的设计是我们想用不同的厚度来提示读者这篇文章的长度——如果你觉得它太长就可以放弃。进入文章后，则会用苹果通用的圆点来表示一共有几页和你当前在第几页。</p>
<div id="attachment_1199" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/pages.png"><img class="size-full wp-image-1199" title="pages" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/pages.png" alt="提示用户不同文章的长度以及现在读到了当前文章的第几页" width="450" height="243" /></a><p class="wp-caption-text">提示用户不同文章的长度以及现在读到了当前文章的第几页</p></div>
<p>不管怎么说，简洁是我们设计的第一法则。我们不希望看到任何多余的按钮，也没有教程，希望你一上手通过简单的尝试就知道该怎么做——为了达到这个目标，我们在样本大致出来后也找了身边很多朋友来测试。</p>
<p style="text-align: center;">
<div id="attachment_1200" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/br.png"><img class="size-full wp-image-1200" title="br" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/br.png" alt="它还不够完美，我们正在努力，也期待你的加入" width="450" height="545" /></a><p class="wp-caption-text">它还不够完美，我们正在努力，也期待你的加入</p></div>
<h4>四、定位</h4>
<p>最后，我想用FAQ的方式，来谈谈关于《牛壹周》为什么这样设计，以及如何定位。</p>
<p>Q:如果我喜欢那些文章，我可以上牛博网和订阅他们的RSS，为什么你们还要做这样一本电子杂志？</p>
<p>A:首先，它们的阅读体验不同，在iPad上阅读，显然比在电脑上阅读来得更愉快而方便，而且它相当于是一个存档——在纸张时代就已经有很多人喜欢收集全年的旧杂志，网络时代同样有人有此癖好；</p>
<p>其次，这里面是精选的文章，经过了人的过滤，提升了内容质量，同时降低了阅读噪音，降低了你的筛选成本——我们相信编辑，也是有价值的再创造。虽然我们的品味未必你未必完全认同，但其实你如果完全不认同也就天然不是我们的目标用户。</p>
<p>当然，这只是我们的理解。用古灵常说的一句话来作结，那就是：“我说的都是错的。”欢迎提出相反的看法。：）</p>
<p>Q:为什么是期刊而不是南周阅读器或者书的形式？为什么是十篇文章而不是更少或更多？</p>
<p>A:选择做期刊其实是在信息的流动性和质量控制之间作必要的平衡和妥协。Twitter、Blog以及RSS已经解决了信息迅速流动的问题，高质量的、时效性堪比新闻但内在价值比新闻更强的精华信息如何展现和留存？我们认为期刊是不错的选择。</p>
<p>关于为什么是十篇？我承认这受到了爱枣报（<a href="www.izaobao.com" target="_blank">www.izaobao.com</a>）的影响。虽然我们身边不乏一觉醒来就要浏览上百个网站，RSS阅读器里躺了一千条未读文章的信息达人，但也有大量的人希望花更少的时间阅读到更有质量的信息，然后迅速离开，干自己该干的其他事情——我们信奉小就是美，少就是多。</p>
<p>Q:《牛壹周》会每周更新么？你们以后会收费么？</p>
<p>A: 会一直出下去，但暂时无法保证每周更新，因为《牛壹周》还只是本实验性的杂志，还没定型，我们还在尝试更好的阅读体验效果，更多的内容格式支持以及更易使用的编辑平台——之所以在设计阶段就开放出来，是因为我们希望和你一起设计，也希望最终你也能轻松地编辑并生成这样的iPad杂志。</p>
<p>牛博网不收费，我们也是。</p>
<p>对于《牛壹周》有任何意见或建议，欢迎在我们的Blog留言，或写信给team+ iPad@mycolorway.com，让我们一起设计，共同来决定它未来的样子。</p>
<p>谢谢。：）</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.mycolorway.com/2010/08/04/br04/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 3#</title>
		<link>http://blog.mycolorway.com/2010/04/20/ued-ucd-collection-3/</link>
		<comments>http://blog.mycolorway.com/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://blog.mycolorway.com/2010/04/20/ued-ucd-collection-3/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 2#</title>
		<link>http://blog.mycolorway.com/2010/03/01/ucdcn2/</link>
		<comments>http://blog.mycolorway.com/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://blog.mycolorway.com/2010/03/01/ucdcn2/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>UED/UCD设计资源汇总 1#</title>
		<link>http://blog.mycolorway.com/2010/02/09/ucdcn/</link>
		<comments>http://blog.mycolorway.com/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://blog.mycolorway.com/2010/02/09/ucdcn/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

