<?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/"
	>

<channel>
	<title>老妖 · 在路上</title>
	<atom:link href="http://www.liupeng.org/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.liupeng.org</link>
	<description>蜀ICP备05021621</description>
	<pubDate>Sat, 28 Aug 2010 17:16:06 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>筷筷乐乐</title>
		<link>http://www.liupeng.org/?p=1506</link>
		<comments>http://www.liupeng.org/?p=1506#comments</comments>
		<pubDate>Sat, 28 Aug 2010 17:03:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1506</guid>
		<description><![CDATA[
2010年8月27日午，力宝楼下福润德，和豪哥、S在路边支了个桌，午饭。
拆筷套的时候，发现上面印了三道脑筋急转弯的题目。
大多数人是用左手端碗，右手吃饭，对吧？－－－－－－－错，嘴巴吃饭。
有一个字，人人见了都念错，为什么？－－－－－－－－－就是“错”字
为什么青蛙跳得比树高？－－－－－－－－－－－－－－－当然，树不会跳。
作为筷套，本来也不用印什么东西的，要印也无非就是几个大字“高温消毒，放心使用”，因为位置狭长，印一些小的长的文字，阅读起来会很费劲。
但印这么几条急转弯，却显得非常有趣而且合适——先看看上部，猜猜答案，然后看看下部，会心一笑的当儿，饭菜都上来了。
好的设计，就是这样子吧——方寸之地能起舞，细微之中见情趣。

]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1507" title="kkll" src="http://www.liupeng.org/wp-content/uploads/2010/08/kkll.png" alt="kkll" width="450" height="210" /></p>
<p>2010年8月27日午，力宝楼下福润德，和豪哥、S在路边支了个桌，午饭。</p>
<p>拆筷套的时候，发现上面印了三道脑筋急转弯的题目。</p>
<p>大多数人是用左手端碗，右手吃饭，对吧？－－－－－－－错，嘴巴吃饭。</p>
<p>有一个字，人人见了都念错，为什么？－－－－－－－－－就是“错”字</p>
<p>为什么青蛙跳得比树高？－－－－－－－－－－－－－－－当然，树不会跳。</p>
<p>作为筷套，本来也不用印什么东西的，要印也无非就是几个大字“高温消毒，放心使用”，因为位置狭长，印一些小的长的文字，阅读起来会很费劲。</p>
<p>但印这么几条急转弯，却显得非常有趣而且合适——先看看上部，猜猜答案，然后看看下部，会心一笑的当儿，饭菜都上来了。</p>
<p>好的设计，就是这样子吧——方寸之地能起舞，细微之中见情趣。</p>
<p><span id="more-1506"></span></p>
<div id="attachment_1508" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1508" title="hg" src="http://www.liupeng.org/wp-content/uploads/2010/08/hg.png" alt="豪哥：兄弟，莫要瓜兮兮的望倒根筷子发呆老，赶紧说想吃点儿啥子" width="450" height="338" /><p class="wp-caption-text">豪哥：兄弟，莫要瓜兮兮滴望倒根筷子发呆老，赶紧说想吃点儿啥子</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1506</wfw:commentRss>
		</item>
		<item>
		<title>《牛壹周》编辑部的故事</title>
		<link>http://www.liupeng.org/?p=1498</link>
		<comments>http://www.liupeng.org/?p=1498#comments</comments>
		<pubDate>Wed, 25 Aug 2010 03:58:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1498</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、组稿、编排和发布的流程

前面的两期，在组稿和编排方面，我们从流程到技术都不太成熟，在杂志中也留下了一些错漏和遗憾，我们也会努力在后面的工作中克服和改进。
《牛壹周》作为我们团队的非营利性期刊，到目前为止完全是大家由于共同的爱好来做的，以后期刊的制作也不再占用工作时间。因为时间和精力的关系，目前《牛壹周》暂定为双周刊。我们现在是单周组稿，双周排版，周五发布，同时确定了组稿、审校、美编、排版和发布各个环节的时间节点和责任人。
《牛壹周》是本开放的杂志，我们的编辑部也是个开放的编辑部。我们希望陆续有牛人能加入我们的编辑部，一起来荐稿、选稿、编辑，把这本杂志办得越来越好，让《牛壹周》有一天终能实至名归，一周一期，牛文汇聚。
PS：拍山寨照片的时候，西瓜不在公司，就由Aben来扮演葛玲了。：）
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1501" title="bullnewsroom" src="http://www.liupeng.org/wp-content/uploads/2010/08/bullnewsroom.png" alt="bullnewsroom" width="450" height="210" /></p>
<p>记得小时候喜欢看的一部电视剧，叫《编辑部的故事》，说的是在一个叫《人间指南》的杂志编辑部里，6个性格各异却和谐共生的编辑在一起遭遇人间百态也自我调侃戏谑的故事。</p>
<p id=":2c">若干年后，我们自己也成立了这样一个编辑部，只是它不叫《人间指南》编辑部，也不叫《天上人间》编辑部，它叫《牛壹周》编辑部。</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-1498"></span><br />
目前我们利用业余时间尝试性的出了两期，因为很多工作都是第一次尝试，内容和流程也都在不停发生变化，我们在程序开发和内容编排上也都出现了一些不足和错误——虽然只是玩票，但如果玩得太不专业也让我们有些脸红。</p>
<p>所以昨天的Daily Meeting上，我们正式成立了《牛壹周》编辑部——是的，我们很山寨，但我们立志做山寨中的猪笼城寨（不明白这个典故的，建议看看周星驰的电影《功夫》）。</p>
<p>会议上大致讨论了如下议题：</p>
<h4>1、《牛壹周》的正式名称。</h4>
<p>细心的读者会发现，《牛壹周》现在命名体系都是混乱的。我们的杂志叫《牛壹周》，iPad上的程序又叫牛一周，杂志英文名叫Bullogger Weekly，程序英文名又叫BullReader HD（最早我们打算做的东西，是牛博网阅读器），我们自己内部也是牛读、牛壹周、心肝儿肉肉的混叫⋯⋯好吧，现在只有一个中文名叫《牛壹周》，只有一个英文名叫《Bull Weekly》，杂志名从第三期开始更换，程序名从V1.2版本开始更换。从第三期开始，我们也将不仅仅在牛博网（<a href="http://www.bullogger.com/" target="_blank">www.bullogger.com</a>）中选择文章，在合适的时候，我们甚至会采用约稿的方式。</p>
<h4>2、V1.2版本的更新内容</h4>
<p>目前确定在V1.2版本中会有的更新包括：1、消灭Loading ，彻底告别小菊花；2、增加亮度调节功能。有些朋友来信中提到的字体放大、页面放大等功能出于对阅读体验以及排版工作上的考量，我们不打算加入进去，确实有放大阅读需求的同学，我们建议用iPad内置的放大操作——三根指头双击屏幕。</p>
<h4>3、分块责任编辑制</h4>
<p id=":2c">第一期杂志的主编是老妖，第二期杂志的主编是古灵，所有文章都是主编选的，我们发现一来工作量大，二来口味太偏颇。从第三期开始，我们根据团队中每个人日常口味的偏好建立了责任编辑制。</p>
<div>常务主编是老妖，同时也是美编之一。时评类责编是古灵（本来我们打算叫时政，古灵甚至打算单独开个政治板块，但在这个神奇的国度，政治这个词已经和小姐一样，从一个美好的说法变得@＃¥％⋯⋯好吧，最后我们还是决定叫时评）；文学类主编是老妖；经济类主编是Manfred（也就是S）；图片类主编是ET；科技类主编是Shawn。Fish负责美编和排版，Aben是刀斧手，小滨滨技术辅助。</div>
<div>
<h4>4、组稿、编排和发布的流程</h4>
</div>
<div>前面的两期，在组稿和编排方面，我们从流程到技术都不太成熟，在杂志中也留下了一些错漏和遗憾，我们也会努力在后面的工作中克服和改进。</p>
<p>《牛壹周》作为我们团队的非营利性期刊，到目前为止完全是大家由于共同的爱好来做的，以后期刊的制作也不再占用工作时间。因为时间和精力的关系，目前《牛壹周》暂定为双周刊。我们现在是单周组稿，双周排版，周五发布，同时确定了组稿、审校、美编、排版和发布各个环节的时间节点和责任人。</p>
<p>《牛壹周》是本开放的杂志，我们的编辑部也是个开放的编辑部。我们希望陆续有牛人能加入我们的编辑部，一起来荐稿、选稿、编辑，把这本杂志办得越来越好，让《牛壹周》有一天终能实至名归，一周一期，牛文汇聚。</p>
<p>PS：拍山寨照片的时候，西瓜不在公司，就由Aben来扮演葛玲了。：）</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1498</wfw:commentRss>
		</item>
		<item>
		<title>封得了的网站，封不住的性情</title>
		<link>http://www.liupeng.org/?p=1485</link>
		<comments>http://www.liupeng.org/?p=1485#comments</comments>
		<pubDate>Sun, 22 Aug 2010 06:00:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Emotion]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1485</guid>
		<description><![CDATA[
2010年8月19号，人人影视（YYeTs）服务器被有关部门关停，然后没收。
这个成立于2003年10月的美剧字幕组，最初由几个喜欢美剧的家伙组成，利用业余时间，为自己喜欢的美剧翻译中文字幕，然后获得了大批的粉丝和用户。
到了今年7月，人人影视开始翻译美国知名大学的公开课，被翻译出的第一批课程有耶鲁大学的公开课《死亡》以及《金融市场》和《心理学导论》，而后《聆听音乐》、《古希腊历史简介》、《欧洲文明》、《基础物理》、《生物医学工程探索》和《博弈论》等也被陆续被翻译成中文字幕。
然后⋯⋯他们就遭遇了麻烦，吊诡的是翻译了五六年的美剧没事，翻译了一两个多月的美国大学课程就出了事——看来对某些人来说，开启民智确实是比让他们沉迷于娱乐更令人害怕的事情。
有关部门的龌龊作为自然让人愤慨，但我喜欢的是人人影视方面的反应。

他们很快在网站上放出了声明。不是哭诉，不是怒骂，而是说谢谢各位的关心我们会坚持把这事儿给干下去。
声明简短有力，有态度，有方案，有近况，却没脾气——象吃了败仗，却不屑于嚎啕与自哀自怜，只是静静地坐在大帐一角擦枪的大将吴起。
详见 http://up.yyets.net/ 
前天，那个申明页面出现过这样一段话（今天看已经没有了），我觉得挺有意思。
“对于在网络上攻击诽谤说我们利用捐助赚钱的人，我们不会去跟你辩论，我们只想说：人不可以无耻到这种程度！我们没要求你没出一分钱一份力照样可以从我们这里获得自由分享的东西，为什么还要来侮辱我们呢？”
呵呵，说得好，有句话怎么说来着？“无耻的人眼里只看得到无耻。”说的是同一个意思，所以反过头来看，做点什么永远比舌战群儒值得钦佩。
一两天后，大概人人影视自己也觉得这话缺乏一点风范和度量吧，反正说也说了，气撒完了就删了吧。
看来那些关注着自然、科技与人文，也饱含自由、平等和公正基因的公开课，他们确实翻译过、领会过并实践着。而且显然，那些通过他们的网站看过这些公开课的人，也都没白看——虽然他们看的时候没花钱，但当人人影视可能会被失去的时候，他们选择了捐款让她挺住。
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1486" title="renren" src="http://www.liupeng.org/wp-content/uploads/2010/08/renren.png" alt="renren" width="450" height="210" /></p>
<p>2010年8月19号，人人影视（YYeTs）服务器被有关部门关停，然后没收。</p>
<p>这个成立于2003年10月的美剧字幕组，最初由几个喜欢美剧的家伙组成，利用业余时间，为自己喜欢的美剧翻译中文字幕，然后获得了大批的粉丝和用户。</p>
<p>到了今年7月，人人影视开始翻译美国知名大学的公开课，被翻译出的第一批课程有耶鲁大学的公开课《死亡》以及《金融市场》和《心理学导论》，而后《聆听音乐》、《古希腊历史简介》、《欧洲文明》、《基础物理》、《生物医学工程探索》和《博弈论》等也被陆续被翻译成中文字幕。</p>
<p>然后⋯⋯他们就遭遇了麻烦，吊诡的是翻译了五六年的美剧没事，翻译了一两个多月的美国大学课程就出了事——看来对某些人来说，开启民智确实是比让他们沉迷于娱乐更令人害怕的事情。</p>
<p>有关部门的龌龊作为自然让人愤慨，但我喜欢的是人人影视方面的反应。</p>
<p><span id="more-1485"></span></p>
<p>他们很快在网站上放出了声明。不是哭诉，不是怒骂，而是说谢谢各位的关心我们会坚持把这事儿给干下去。</p>
<p>声明简短有力，有态度，有方案，有近况，却没脾气——象吃了败仗，却不屑于嚎啕与自哀自怜，只是静静地坐在大帐一角擦枪的大将吴起。</p>
<p>详见 <a href="http://up.yyets.net/ " target="_blank">http://up.yyets.net/ </a></p>
<p>前天，那个申明页面出现过这样一段话（今天看已经没有了），我觉得挺有意思。</p>
<div id="attachment_1487" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1487" title="renren0820" src="http://www.liupeng.org/wp-content/uploads/2010/08/renren0820.png" alt="人人影视的声明" width="450" height="242" /><p class="wp-caption-text">人人影视8月20号的声明网页截图</p></div>
<p>“对于在网络上攻击诽谤说我们利用捐助赚钱的人，我们不会去跟你辩论，我们只想说：人不可以无耻到这种程度！我们没要求你没出一分钱一份力照样可以从我们这里获得自由分享的东西，为什么还要来侮辱我们呢？”</p>
<p>呵呵，说得好，有句话怎么说来着？“无耻的人眼里只看得到无耻。”说的是同一个意思，所以反过头来看，做点什么永远比舌战群儒值得钦佩。</p>
<p>一两天后，大概人人影视自己也觉得这话缺乏一点风范和度量吧，反正说也说了，气撒完了就删了吧。</p>
<p>看来那些关注着自然、科技与人文，也饱含自由、平等和公正基因的公开课，他们确实翻译过、领会过并实践着。而且显然，那些通过他们的网站看过这些公开课的人，也都没白看——虽然他们看的时候没花钱，但当人人影视可能会被失去的时候，他们选择了捐款让她挺住。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1485</wfw:commentRss>
		</item>
		<item>
		<title>《牛壹周》1.1升级版的设计与功能改进</title>
		<link>http://www.liupeng.org/?p=1481</link>
		<comments>http://www.liupeng.org/?p=1481#comments</comments>
		<pubDate>Sun, 22 Aug 2010 05:49:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1481</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><img class="alignnone size-full wp-image-1482" title="br11" src="http://www.liupeng.org/wp-content/uploads/2010/08/br11.png" alt="br11" width="450" height="210" /></p>
<p>从2010年7月30号《<a href="http://ax.itunes.apple.com/cn/app/id383294418?mt=8#ls=1">牛壹周》创刊号</a>上架，截止到我写这篇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-1481"></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://www.liupeng.org/?feed=rss2&amp;p=1481</wfw:commentRss>
		</item>
		<item>
		<title>彩程新名片是如何设计出炉的</title>
		<link>http://www.liupeng.org/?p=1477</link>
		<comments>http://www.liupeng.org/?p=1477#comments</comments>
		<pubDate>Wed, 18 Aug 2010 06:13:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1477</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><img class="alignnone size-full wp-image-1478" title="namecard" src="http://www.liupeng.org/wp-content/uploads/2010/08/namecard.png" alt="namecard" width="450" height="210" /></p>
<p>彩程设计成立至今，都还没印新的名片，一方面是因为我们懒惰，另外一方面也是因为对于我们这种靠口碑相传的互联网团队而言，名片的紧迫性确实也不那么高。</p>
<p>公司几乎人人都是设计师，于是把logo矢量图发给大家，让每个人设计自己最心仪的名片样式。</p>
<p>我先出了第一版设计，算是抛砖引玉，抛金百万引金喜善，抛邓亚萍引林志玲。<span id="more-1477"></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://www.liupeng.org/?feed=rss2&amp;p=1477</wfw:commentRss>
		</item>
		<item>
		<title>再见，科学家</title>
		<link>http://www.liupeng.org/?p=1439</link>
		<comments>http://www.liupeng.org/?p=1439#comments</comments>
		<pubDate>Mon, 16 Aug 2010 22:00:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Emotion]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1439</guid>
		<description><![CDATA[
2010年8月15日晨，一位朋友给我留了片钥匙，然后带着他能带走的家当，驾车离开了成都――剩下带不走的，等他安顿好了我好给他寄过去。
他是我大学同学，我们叫他科学家，也叫他甜甜（注意，发音应读作：舔田），过去两年来，他一直住我家楼上，所以我们也算是邻居。
大学的时候，我们同系不同班，我跟他不熟，对我来说，他只是栋力无限BBS上一个叫做Einstein的暗绿色ID，据说他能用烙铁焊出各种富有智能的小玩意儿，就连他自己的脑子，也是拿电路板焊出来的——总之，是个传说中的人物。

毕业前，他和另外一位应用化学系的牛人开发了USB插口的VoIP电话，随后以此申请了专利并开办了公司，在深圳经过几年打拼后做得风生水起。我因为共同的朋友以及和他们公司一些业务上的往来，跟他也就渐渐地熟络起来。
后来，他与合伙人分手，回成都后加盟了一家新公司，在自己组装、自己写驱动的超高精度的液晶显示器上，设计中央空调节能设备的电路图，这期间，我帮他们设计了一些招贴和画册。
我们偶尔会一起吃饭K歌，记得有一次在金狐KTV，他带来的除了妞还有一把仿真度很高的钢珠枪，我把玩之中对着枪口端详的时候，他很善意地推开枪口说：“呃⋯⋯这样很危险，因为刚才你已经压了空气进去了，虽然没有子弹，但如果你误抠扳机，高压气流还是可能会冲爆你的眼球。”
过了不久，他就带着他的妞和枪，开着一辆二手Flyer去了北京，帮铁道部设计快轨列车上的通信系统。我们在五道口一起小聚吃饭的时候，他看起来已不那么暴力，随身带的不过三个相机，五个镜头；但饭后他送我们回去的时候，发现丫每次都要把发动机轰到4000转才换挡——于是我们也就明白了，其实他也没变什么。
再后来，他开一辆二手富康从北京回到成都，搬我家楼上，做了一堆机巧有趣的电子玩意，顺便生了个儿子。我去他家，一般都是临时借用一些自己忘带的东西，从MAC充电器到WACOM影拓笔，有一次找他借个雪豹升级光盘，他附赠了我一张艾神主演的《老妈蹄花》，然后淡淡地说：“这个国家已经烂掉了，老子还是移民新加坡算球”。
他的工作台很乱，架子上有各种电脑、电路板以及我认识和不认识的设备——从示波器到原子钟，从数字水平仪到红外测温器。他一般会同时打开几台机器几个显示器，一台用来画电路图和打游戏，一台用来看大片美剧台湾综艺节目或其他解密卫星频道（自己做接收机，自己写破解程序哦～），还有一台则永远在下载各种乱七八糟的东西——从Symbian到South Park，从毛片到毛主席语录。
还记得有一次他自己从淘宝买了个二手遥控器、去城隍庙电子市场淘来接收机以及各种器材零件做了个遥控电动车，马力大到可以把餐桌撞得移位，抵着墙开能在地上磨出胎痕，让你闻到胶皮烧焦的味道——然后他转过头来对瞪圆了眼睛的我们说，为什么要买个五维方向的遥控呢？因为接下来我打算做个直升飞机。
这个世界上，有些人就象一张白纸一样一览无余，而有些人则好象一本涉及科技、政治、酒精、毒品和性的悬疑小说——在我Follow了他的Twitter之后，这个PG13级老男人的思想与性情呈现得更为丰富和立体，变成了一本声光化电带超级链接的电子书。
人与人之间的相聚和别离，总是充满偶然又稀松平常。这一次，他又要走了。两年积累下来的各种东西，最后卖掉的、扔掉的、打包的大概各占1/3吧，也许真正难以取舍的，反倒是一些小物件——他随手抄起一本旧兮兮的《National Geographic》，口中喃喃地说：“这本不能扔，这本是切尔诺贝利核泄露20周年纪念版。”
2008年8月14日夜，我站在成都八里小区成电花园地下车库，面对这位即将离去的朋友和他那辆除了正驾其他位置都已塞爆的富康，也没什么特别想说的，只是想起了王家卫一部电影的末尾，某个邪派高手驻足沙漠中的一段独白：“不知道为什么，我常常做同一个梦。没多久，我就离开了这个地方。那天，黄历上写着：驿马动，火迫金行，大利西方。”
附：题图照片，是2008年2月，我在江苏常熟某农村一朋友家中给他抓拍的。那天我走出二楼阳台晒太阳，发现他正在读英文原版的离散数学。他看我端着佳能，无聊地拍着对面的房顶上的麻雀，于是走回屋去，拿出他的顶级尼康，以及巨炮一般的镜头，更加无聊地开始拍那些麻雀的鼻毛——他就是那个喜欢躲在各种精巧复杂的工具的背后，借助科学与心智去深度关注，于现象中思考规律，与平庸中捕捉意义或虚无的人——我承认，我们虽然面对同一个世界，他却能比我看到更深更多，并更为智性地体验和创造——有时候，这会让我羡慕。
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1442" title="kxj" src="http://www.liupeng.org/wp-content/uploads/2010/08/kxj.png" alt="kxj" width="450" height="210" /></p>
<p>2010年8月15日晨，一位朋友给我留了片钥匙，然后带着他能带走的家当，驾车离开了成都――剩下带不走的，等他安顿好了我好给他寄过去。</p>
<p>他是我大学同学，我们叫他科学家，也叫他甜甜（注意，发音应读作：舔田），过去两年来，他一直住我家楼上，所以我们也算是邻居。</p>
<p>大学的时候，我们同系不同班，我跟他不熟，对我来说，他只是栋力无限BBS上一个叫做Einstein的暗绿色ID，据说他能用烙铁焊出各种富有智能的小玩意儿，就连他自己的脑子，也是拿电路板焊出来的——总之，是个传说中的人物。</p>
<p><span id="more-1439"></span><br />
毕业前，他和另外一位应用化学系的牛人开发了USB插口的VoIP电话，随后以此申请了专利并开办了公司，在深圳经过几年打拼后做得风生水起。我因为共同的朋友以及和他们公司一些业务上的往来，跟他也就渐渐地熟络起来。</p>
<p>后来，他与合伙人分手，回成都后加盟了一家新公司，在自己组装、自己写驱动的超高精度的液晶显示器上，设计中央空调节能设备的电路图，这期间，我帮他们设计了一些招贴和画册。</p>
<p>我们偶尔会一起吃饭K歌，记得有一次在金狐KTV，他带来的除了妞还有一把仿真度很高的钢珠枪，我把玩之中对着枪口端详的时候，他很善意地推开枪口说：“呃⋯⋯这样很危险，因为刚才你已经压了空气进去了，虽然没有子弹，但如果你误抠扳机，高压气流还是可能会冲爆你的眼球。”</p>
<p>过了不久，他就带着他的妞和枪，开着一辆二手Flyer去了北京，帮铁道部设计快轨列车上的通信系统。我们在五道口一起小聚吃饭的时候，他看起来已不那么暴力，随身带的不过三个相机，五个镜头；但饭后他送我们回去的时候，发现丫每次都要把发动机轰到4000转才换挡——于是我们也就明白了，其实他也没变什么。</p>
<p>再后来，他开一辆二手富康从北京回到成都，搬我家楼上，做了一堆机巧有趣的电子玩意，顺便生了个儿子。我去他家，一般都是临时借用一些自己忘带的东西，从MAC充电器到WACOM影拓笔，有一次找他借个雪豹升级光盘，他附赠了我一张艾神主演的《老妈蹄花》，然后淡淡地说：“这个国家已经烂掉了，老子还是移民新加坡算球”。</p>
<p>他的工作台很乱，架子上有各种电脑、电路板以及我认识和不认识的设备——从示波器到原子钟，从数字水平仪到红外测温器。他一般会同时打开几台机器几个显示器，一台用来画电路图和打游戏，一台用来看大片美剧台湾综艺节目或其他解密卫星频道（自己做接收机，自己写破解程序哦～），还有一台则永远在下载各种乱七八糟的东西——从Symbian到South Park，从毛片到毛主席语录。</p>
<p>还记得有一次他自己从淘宝买了个二手遥控器、去城隍庙电子市场淘来接收机以及各种器材零件做了个遥控电动车，马力大到可以把餐桌撞得移位，抵着墙开能在地上磨出胎痕，让你闻到胶皮烧焦的味道——然后他转过头来对瞪圆了眼睛的我们说，为什么要买个五维方向的遥控呢？因为接下来我打算做个直升飞机。</p>
<p>这个世界上，有些人就象一张白纸一样一览无余，而有些人则好象一本涉及科技、政治、酒精、毒品和性的悬疑小说——在我Follow了他的Twitter之后，这个PG13级老男人的思想与性情呈现得更为丰富和立体，变成了一本声光化电带超级链接的电子书。</p>
<p>人与人之间的相聚和别离，总是充满偶然又稀松平常。这一次，他又要走了。两年积累下来的各种东西，最后卖掉的、扔掉的、打包的大概各占1/3吧，也许真正难以取舍的，反倒是一些小物件——他随手抄起一本旧兮兮的《National Geographic》，口中喃喃地说：“这本不能扔，这本是切尔诺贝利核泄露20周年纪念版。”</p>
<p>2008年8月14日夜，我站在成都八里小区成电花园地下车库，面对这位即将离去的朋友和他那辆除了正驾其他位置都已塞爆的富康，也没什么特别想说的，只是想起了王家卫一部电影的末尾，某个邪派高手驻足沙漠中的一段独白：“不知道为什么，我常常做同一个梦。没多久，我就离开了这个地方。那天，黄历上写着：驿马动，火迫金行，大利西方。”</p>
<p><span style="color: #808080;">附：题图照片，是2008年2月，我在江苏常熟某农村一朋友家中给他抓拍的。那天我走出二楼阳台晒太阳，发现他正在读英文原版的离散数学。他看我端着佳能，无聊地拍着对面的房顶上的麻雀，于是走回屋去，拿出他的顶级尼康，以及巨炮一般的镜头，更加无聊地开始拍那些麻雀的鼻毛——他就是那个喜欢躲在各种精巧复杂的工具的背后，借助科学与心智去深度关注，于现象中思考规律，与平庸中捕捉意义或虚无的人——我承认，我们虽然面对同一个世界，他却能比我看到更深更多，并更为智性地体验和创造——有时候，这会让我羡慕。</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1439</wfw:commentRss>
		</item>
		<item>
		<title>郭德纲与反三俗</title>
		<link>http://www.liupeng.org/?p=1422</link>
		<comments>http://www.liupeng.org/?p=1422#comments</comments>
		<pubDate>Tue, 10 Aug 2010 14:06:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Emotion]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1422</guid>
		<description><![CDATA[
最近郭德纲先生遇到了些麻烦，先是徒弟打架，然后是媒体掐架，最后是作品下架——据说是因为低俗、媚俗和庸俗。
我不是郭的粉丝，甚至谈不上喜欢。觉得与其去看他或周立波，还不如去看吴宗宪或蔡康永。
只是突然就想起另外一个人来，美国曾经的色情大亨——拉里.c.弗林特。

这家伙编了本极为粗俗的《好色客》，据说《花花公子》和这本杂志比起来简直就是T台模特和农村脱衣舞娘的差别。
一方面这家伙极度让人讨厌，另外一方面那本低俗杂志又卖得特别好。1983年的时候，他因为拿当时一位著名的牧师和道德卫道士福尔韦尔开涮，捏造了一个福氏和他妈妈乱伦的滑稽广告而被起诉并面临10万美元的罚款。
不服判决的弗林特打了5年官司，一直告到联邦最高法院，最后所有大法官一致认为他无罪——因为这份广告并无商业或政治目的，也不会有人认为这事真的发生，出于保护言论自由，最终给出了这样的判决。走出法庭的时候，他说了一句经典的话：“如果宪法第一修正案能保护象我这样的人渣，那么我相信它能保护任何人。”
这个家伙后来参加了加州州长的竞选，口号是“让赌场开遍加州”，再后来出了本自传，名字叫《我作为社会弃儿的一生》——当然，这些都是后话。
En，我想说的就是：郭也许不是什么好鸟或善主，但北京一些媒体公器私用和扣大帽子的做法以及这个社会不讲人权和法制的氛围更操蛋。
郭德纲就是再嚣张，也不应该受到不受节制也不讲程序的公权力如此粗暴而过份的对待。和妓女也是有人权的，流氓也是受法律保护的一样——这都是常识。
至于他到底俗不俗，又带来多大危害，我只想通过历史的一个小细节来表明自己的观点：中国历史上女人领口最低的唐朝国力最强大文化也最辉煌，英国历史上女人领口最高的维多利亚时代统治最黑暗地下小说也最黄——正所谓圣人不死，大盗不止；三俗不生，高雅焉存？
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1436" title="gdg" src="http://www.liupeng.org/wp-content/uploads/2010/08/gdg.png" alt="gdg" width="450" height="210" /></p>
<p>最近郭德纲先生遇到了些麻烦，先是徒弟打架，然后是媒体掐架，最后是作品下架——据说是因为低俗、媚俗和庸俗。</p>
<p>我不是郭的粉丝，甚至谈不上喜欢。觉得与其去看他或周立波，还不如去看吴宗宪或蔡康永。</p>
<p>只是突然就想起另外一个人来，美国曾经的色情大亨——拉里.c.弗林特。</p>
<p><span id="more-1422"></span></p>
<p>这家伙编了本极为粗俗的《好色客》，据说《花花公子》和这本杂志比起来简直就是T台模特和农村脱衣舞娘的差别。</p>
<p>一方面这家伙极度让人讨厌，另外一方面那本低俗杂志又卖得特别好。1983年的时候，他因为拿当时一位著名的牧师和道德卫道士福尔韦尔开涮，捏造了一个福氏和他妈妈乱伦的滑稽广告而被起诉并面临10万美元的罚款。</p>
<p>不服判决的弗林特打了5年官司，一直告到联邦最高法院，最后所有大法官一致认为他无罪——因为这份广告并无商业或政治目的，也不会有人认为这事真的发生，出于保护言论自由，最终给出了这样的判决。走出法庭的时候，他说了一句经典的话：“如果宪法第一修正案能保护象我这样的人渣，那么我相信它能保护任何人。”</p>
<p>这个家伙后来参加了加州州长的竞选，口号是“让赌场开遍加州”，再后来出了本自传，名字叫《我作为社会弃儿的一生》——当然，这些都是后话。</p>
<p>En，我想说的就是：郭也许不是什么好鸟或善主，但北京一些媒体公器私用和扣大帽子的做法以及这个社会不讲人权和法制的氛围更操蛋。</p>
<p>郭德纲就是再嚣张，也不应该受到不受节制也不讲程序的公权力如此粗暴而过份的对待。和妓女也是有人权的，流氓也是受法律保护的一样——这都是常识。</p>
<p>至于他到底俗不俗，又带来多大危害，我只想通过历史的一个小细节来表明自己的观点：中国历史上女人领口最低的唐朝国力最强大文化也最辉煌，英国历史上女人领口最高的维多利亚时代统治最黑暗地下小说也最黄——正所谓圣人不死，大盗不止；三俗不生，高雅焉存？</p>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1422</wfw:commentRss>
		</item>
		<item>
		<title>赞一个成都车管所</title>
		<link>http://www.liupeng.org/?p=1419</link>
		<comments>http://www.liupeng.org/?p=1419#comments</comments>
		<pubDate>Tue, 10 Aug 2010 12:43:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Emotion]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1419</guid>
		<description><![CDATA[话说上个月末去听了场免费讲座，结果硬是被我听成了收费的——丢了钱包，以及所有用得上的证件和卡。
这次的老友集体走失事件中，驾照和行驶证也未能幸免于难——从此每次经过交警五大队看见里面人山人海就头疼，不知道浪费哪一段生命去排队补办酱紫两份证件是相对值得的。
后来在推上看见豪哥大赞成都车管所和它提供的行驶证电话补办快递服务。然后，我就尝试着拨了车管所的那个服务电话82001010——确实是热线，我也是第二天才打通。
不过电话接通后就很爽了，告诉对方我的住址、身份证号、还有车牌号，然后对照保单念了我的车架号——然后，就这样搞定了。
上周末打的电话，今天就收到了证件的快递——和政府服务机构打交道的经历中，似乎还从来没有这么简洁高效心情舒畅过。
这政府固然因为做了太多烂事和蠢事，不免让自己常常陷入塔西佗陷阱，但它也还是有一些真正做得好和在持续进步的地方——比如成都车管所推出的这项电话补办服务，确实挺快捷方便的，真心诚意地赞一个。
PS：成华办证中心的服务也还不错——至少补办身份证很方便。带上上你的户口本，现场照相，正式的一个月以后拿，临时的则立等可取。
本来想抱怨下他们把我拍得象个弱智的悍匪，但仔细想想似乎确实是自己的形象问题而不是他们照相的技术问题也就算了。
附：塔西佗陷阱：普布里乌斯·克奈里乌斯·塔西佗[1](Publius  Cornelius  Tacitus，约A.D.55～120年)是古代罗马最伟大的历史学家，他继承并发展了李维的史学传统和成就，在罗马史学上的地位犹如修昔底德在希腊史学上的地位。塔西佗曾出任过古罗马最高领导人——执政官，此外还先后干过保民官、营造官、财务官、行政长官和外省总督等，他曾经这样谈论执政感受：“当政府不受欢迎的时候，好的政策与坏的政策都会同样的得罪人民”。这个卓越的见解后来成为西方政治学里的定律之一：“塔西佗陷阱”。——引自百度百科
]]></description>
			<content:encoded><![CDATA[<p>话说上个月末去听了场免费讲座，结果硬是被我听成了收费的——丢了钱包，以及所有用得上的证件和卡。</p>
<p>这次的老友集体走失事件中，驾照和行驶证也未能幸免于难——从此每次经过交警五大队看见里面人山人海就头疼，不知道浪费哪一段生命去排队补办酱紫两份证件是相对值得的。</p>
<p>后来在推上看见豪哥大赞成都车管所和它提供的行驶证电话补办快递服务。然后，我就尝试着拨了车管所的那个服务电话82001010——确实是热线，我也是第二天才打通。</p>
<p>不过电话接通后就很爽了，告诉对方我的住址、身份证号、还有车牌号，然后对照保单念了我的车架号——然后，就这样搞定了。</p>
<p>上周末打的电话，今天就收到了证件的快递——和政府服务机构打交道的经历中，似乎还从来没有这么简洁高效心情舒畅过。</p>
<p>这政府固然因为做了太多烂事和蠢事，不免让自己常常陷入塔西佗陷阱，但它也还是有一些真正做得好和在持续进步的地方——比如成都车管所推出的这项电话补办服务，确实挺快捷方便的，真心诚意地赞一个。</p>
<p>PS：成华办证中心的服务也还不错——至少补办身份证很方便。带上上你的户口本，现场照相，正式的一个月以后拿，临时的则立等可取。</p>
<p>本来想抱怨下他们把我拍得象个弱智的悍匪，但仔细想想似乎确实是自己的形象问题而不是他们照相的技术问题也就算了。</p>
<p>附：塔西佗陷阱：普布里乌斯·克奈里乌斯·<a href="http://baike.baidu.com/view/89762.htm" target="_blank">塔西佗</a><sup onclick="gotoRef(this)">[1]</sup><a name="ref_[1]"></a>(Publius  Cornelius  Tacitus，约A.D.55～120年)是古代罗马最伟大的历史学家，他继承并发展了李维的史学传统和成就，在罗马史学上的地位犹如修昔底德在希腊史学上的地位。塔西佗曾出任过古罗马最高领导人——执政官，此外还先后干过保民官、营造官、财务官、行政长官和外省总督等，他曾经这样谈论执政感受：“当政府不受欢迎的时候，好的政策与坏的政策都会同样的得罪人民”。这个卓越的见解后来成为西方政治学里的定律之一：“塔西佗陷阱”。——引自百度百科</p>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1419</wfw:commentRss>
		</item>
		<item>
		<title>Let&#8217;s touch the future</title>
		<link>http://www.liupeng.org/?p=1378</link>
		<comments>http://www.liupeng.org/?p=1378#comments</comments>
		<pubDate>Fri, 06 Aug 2010 15:40:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<category><![CDATA[Emotion]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1378</guid>
		<description><![CDATA[
2010年8月4日，力宝大厦彩程办公室，Daily Meeting.
Shawn的密友，来自纽约大学的哲学控、摄影家兼吉他手——E.T.给大家作了一个Personal Show，其中有个叫 Where am i going 的环节很有意思。
在这个环节里，他用图片依次给我们展示了第一代电子管计算机，键盘、鼠标、iPad以及一个问号——概括了计算机发展各个时代的交互手段以及他对未来交互手段的探索和思考。
然后，他就给我们Show了一个他在大学时候做的一个小东西——你可以在摄像头前面用手势来拨弄一个悬浮在空中的虚拟的木头箱子——这让我们玩得很High。

如果你也象我们一样在摄像头前面伸出手来拨弄过那个小木箱，我想你的感受也许会跟我一样——我在触摸未来。
这让我想起了我们经常会被问到的一个问题以及最近在做的一些事情。
经常会有亲人或朋友问我们公司到底是做什么的，当我告诉他们我们是做用户体验设计的，又常常会让他们发蒙——听起来，我们干的行当似乎跟洗浴中心的按摩技师差不太多。
稍微懂一点的，会说：“哦，我知道了，你们是做网站的，而且只做设计。”虽然我们做过的大部分设计确实最终会体现为Web的形式，但这样的理解依然会让我在内心苦笑并微微摇头。
8月5号上午，成都移动府青数据中心。古灵让我上楼看看大屏，说领导有些地方想修改。看着一拨人站在巨大的电子屏幕前面对整个四川移动网络支撑状况指点江山，老实说我觉得蛮骄傲的——这是我们团队去年的作品之一，S做的架构，我做的界面，古灵和小滨滨做的前端开发。
它不是网站，也不在电脑上看，但它改变了人对于数据的感知和体验——这是我们正在做的。
下午画完经分助手的设计，顺道去看了看移动终端屏的开发情况。这套系统是我们团队的最近的作品，Fish做的原型，我做的视觉，多发做的前端，现在已经开始在万科金域蓝湾移动营业厅部署测试。如果你在成都，又用的是移动的号，那么也许过不了多久，你就能在各大移动营业厅看到并使用它了——发现体验不好的地方，可以给我们写邮件反馈。：）
它不是网站，可以用手触摸交互，它让你无需借助营业员便可以缴费、定制移动业务以及给朋友的手机发个彩信什么的——这也是我们正在做的。
回到公司，Shawn给我们展示了他在iPad上刚实现的滚动条＋缩略图的预览方式，把我们的眼球狠狠地洗了一下——即将上线的《牛壹周》第二期当中，你们将会看到这种全新的页面预览模式。
它不是网站，却可以通过你的手势来识别你的心意，它让你用颠覆的方式来阅读杂志，获取信息，分享知识——这同样是我们正在做的。
那么，我们到底是做什么的呢？当我们自己在这里看到某些魔幻场景比如架构师弹着吉他画草图，程序员戴着赛车头盔写代码，或者设计师拿着风水罗盘做测试的时候，经常也会发出惊叹：“这是个啥子公司哦～”
老实说，我也说不清楚我们到底是家什么设计公司。我只看到一帮哲学控、傻愤青、死文青、自虐驴、摄影师、作曲家、单反发烧友，业余吉他手、厨艺爱好者、国画系研究生、以及身残脑不残的残疾人士殊途同归，凑在一起，努力改变他们不太满意的现在，并尝试触摸他们比较中意的未来。
E.T.  的PPT最后一页写的是“Technical can change our lives”，其实当时我有一种狗尾续貂的冲动，想再加上一句：“Let&#8217;s touch the future.”——好吧，我承认自己天生不够含蓄。
最后，想以一系列照片纪念我和我的朋友们曾经走过的那段，貌似牛B闪闪，内心小有温暖的青春岁月，愿我们未来会更好。


好吧，谢谢你们给我的工牌，还有爱，另外⋯⋯Mak，你究竟是如何拍出一个人高大同时又猥琐的气质的呢？发现你真的很会拍耶⋯⋯


]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1379" title="et" src="http://www.liupeng.org/wp-content/uploads/2010/08/et.png" alt="et" width="450" height="210" /></p>
<p>2010年8月4日，力宝大厦彩程办公室，Daily Meeting.</p>
<p>Shawn的密友，来自纽约大学的哲学控、摄影家兼吉他手——E.T.给大家作了一个Personal Show，其中有个叫 Where am i going 的环节很有意思。</p>
<p>在这个环节里，他用图片依次给我们展示了第一代电子管计算机，键盘、鼠标、iPad以及一个问号——概括了计算机发展各个时代的交互手段以及他对未来交互手段的探索和思考。</p>
<p>然后，他就给我们Show了一个他在大学时候做的一个小东西——你可以在摄像头前面用手势来拨弄一个悬浮在空中的虚拟的木头箱子——这让我们玩得很High。</p>
<p><span id="more-1378"></span></p>
<div id="attachment_1232" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/IMG_0502.jpg"><img class="size-full wp-image-1232 " title="IMG_0502" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/IMG_0502.jpg" alt="接下来就是见证奇迹的时刻⋯⋯" width="450" height="338" /></a><p class="wp-caption-text">接下来就是见证奇迹的时刻⋯⋯</p></div>
<div id="attachment_1382" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1382" title="img_0505" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_0505.png" alt="这个⋯多发⋯麻烦让一下，今天的明星不是你好伐啦⋯" width="450" height="338" /><p class="wp-caption-text">这个⋯多发⋯麻烦让一下，今天的明星不是你好伐啦⋯对，动作明星也不是</p></div>
<p>如果你也象我们一样在摄像头前面伸出手来拨弄过那个小木箱，我想你的感受也许会跟我一样——我在触摸未来。</p>
<p>这让我想起了我们经常会被问到的一个问题以及最近在做的一些事情。</p>
<p>经常会有亲人或朋友问我们公司到底是做什么的，当我告诉他们我们是做用户体验设计的，又常常会让他们发蒙——听起来，我们干的行当似乎跟洗浴中心的按摩技师差不太多。</p>
<p>稍微懂一点的，会说：“哦，我知道了，你们是做网站的，而且只做设计。”虽然我们做过的大部分设计确实最终会体现为Web的形式，但这样的理解依然会让我在内心苦笑并微微摇头。</p>
<p>8月5号上午，成都移动府青数据中心。古灵让我上楼看看大屏，说领导有些地方想修改。看着一拨人站在巨大的电子屏幕前面对整个四川移动网络支撑状况指点江山，老实说我觉得蛮骄傲的——这是我们团队去年的作品之一，S做的架构，我做的界面，古灵和小滨滨做的前端开发。</p>
<div id="attachment_1383" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1383" title="img_0509" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_0509.jpg" alt="img_0509" width="450" height="338" /><p class="wp-caption-text">在这样的屏幕前指点江山是件很爽的事</p></div>
<p>它不是网站，也不在电脑上看，但它改变了人对于数据的感知和体验——这是我们正在做的。</p>
<p>下午画完经分助手的设计，顺道去看了看移动终端屏的开发情况。这套系统是我们团队的最近的作品，Fish做的原型，我做的视觉，多发做的前端，现在已经开始在万科金域蓝湾移动营业厅部署测试。如果你在成都，又用的是移动的号，那么也许过不了多久，你就能在各大移动营业厅看到并使用它了——发现体验不好的地方，可以给我们写邮件反馈。：）</p>
<div id="attachment_1384" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1384" title="img_0519" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_0519.jpg" alt="很快就会在成都各营业厅和大家见面了" width="450" height="338" /><p class="wp-caption-text">你好，我叫方脑壳，很快就会在成都各营业厅和大家见面了</p></div>
<p>它不是网站，可以用手触摸交互，它让你无需借助营业员便可以缴费、定制移动业务以及给朋友的手机发个彩信什么的——这也是我们正在做的。</p>
<p>回到公司，Shawn给我们展示了他在iPad上刚实现的滚动条＋缩略图的预览方式，把我们的眼球狠狠地洗了一下——即将上线的《牛壹周》第二期当中，你们将会看到这种全新的页面预览模式。</p>
<div id="attachment_1385" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1385" title="img_0356" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_0356.jpg" alt="洗刷刷洗刷刷，把你眼球洗爆瓜啦" width="450" height="338" /><p class="wp-caption-text">我洗刷刷洗刷刷，把你眼球洗爆瓜啦</p></div>
<p>它不是网站，却可以通过你的手势来识别你的心意，它让你用颠覆的方式来阅读杂志，获取信息，分享知识——这同样是我们正在做的。</p>
<p>那么，我们到底是做什么的呢？当我们自己在这里看到某些魔幻场景比如架构师弹着吉他画草图，程序员戴着赛车头盔写代码，或者设计师拿着风水罗盘做测试的时候，经常也会发出惊叹：“这是个啥子公司哦～”</p>
<p>老实说，我也说不清楚我们到底是家什么设计公司。我只看到一帮哲学控、傻愤青、死文青、自虐驴、摄影师、作曲家、单反发烧友，业余吉他手、厨艺爱好者、国画系研究生、以及身残脑不残的残疾人士殊途同归，凑在一起，努力改变他们不太满意的现在，并尝试触摸他们比较中意的未来。</p>
<p>E.T.  的PPT最后一页写的是“Technical can change our lives”，其实当时我有一种狗尾续貂的冲动，想再加上一句：“Let&#8217;s touch the future.”——好吧，我承认自己天生不够含蓄。</p>
<p>最后，想以一系列照片纪念我和我的朋友们曾经走过的那段，貌似牛B闪闪，内心小有温暖的青春岁月，愿我们未来会更好。</p>
<div id="attachment_1386" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1386" title="lei" src="http://www.liupeng.org/wp-content/uploads/2010/08/lei.png" alt="那个雷死人的自称HR的程序员⋯⋯我们叫他“政委”" width="450" height="300" /><p class="wp-caption-text">那个雷死人不偿命，自称HR的程序员⋯⋯最新的外号叫“政委”</p></div>
<div id="attachment_1393" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1393" title="img_8599" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_8599.jpg" alt="你以为她是混演艺圈的，其实她是我们的设计师兼UCD成都书友会打杂小妹" width="450" height="338" /><p class="wp-caption-text">你以为她是混演艺圈的，其实她是我们的设计师兼UCD成都书友会打杂小妹</p></div>
<div id="attachment_1387" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1387" title="guita" src="http://www.liupeng.org/wp-content/uploads/2010/08/guita.jpg" alt="无音乐，不设计" width="450" height="338" /><p class="wp-caption-text">Shawn、E.T.老友记之无音乐，不设计</p></div>
<div id="attachment_1245" class="wp-caption aligncenter" style="width: 460px"><a href="http://blog.mycolorway.com/wp-content/uploads/2010/08/IMG_0359.jpg"><img class="size-full wp-image-1245" title="IMG_0359" src="http://blog.mycolorway.com/wp-content/uploads/2010/08/IMG_0359.jpg" alt="某个人的电子表看上去挺大只的" width="450" height="338" /></a><p class="wp-caption-text">某个人的电子表看上去挺大只的 </p></div>
<div id="attachment_1392" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1392" title="img_0083" src="http://www.liupeng.org/wp-content/uploads/2010/08/img_0083.jpg" alt="我承认，有时候我们是自由得稍微过了那么一点点，至少是不够端庄" width="450" height="338" /><p class="wp-caption-text">我承认，有时候我们是自由得稍微过了那么一点点，至少是不够端庄⋯</p></div>
<div id="attachment_1388" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1388" title="fengshui" src="http://www.liupeng.org/wp-content/uploads/2010/08/fengshui.jpg" alt="没骗你哦，我们做产品，一定是要先测风水的～" width="450" height="338" /><p class="wp-caption-text">不骗你，我们做产品之前，确实是要先测风水的～</p></div>
<div id="attachment_1390" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1390" title="s" src="http://www.liupeng.org/wp-content/uploads/2010/08/s.jpg" alt="日出江花红胜火，身残志坚就是我" width="450" height="338" /><p class="wp-caption-text">日出江花红胜火，身残志坚就是我 </p></div>
<div id="attachment_1400" class="wp-caption aligncenter" style="width: 460px"><img class="size-full wp-image-1400" title="fish" src="http://www.liupeng.org/wp-content/uploads/2010/08/fish.jpg" alt="爱心大厨Fish为彩程每个人亲手烘培的脸谱饼干，她说：“我们有哭有笑有搞怪，这不就是ccwer的生活写照咩？”" width="450" height="300" /><p class="wp-caption-text">爱心大厨Fish为彩程每位成员亲手烘培的脸谱饼干，她说：“我们有哭有笑有搞怪，这不就是ccwer的生活写照咩？”</p></div>
<div class="mceTemp mceIEcenter">
<dl id="attachment_1391" class="wp-caption aligncenter" style="width: 460px;">
<dt class="wp-caption-dt"><img class="size-full wp-image-1391" title="nb-copy" src="http://www.liupeng.org/wp-content/uploads/2010/08/nb-copy.jpg" alt="无论未来成败，谨以此系列照片，纪念我和我的朋友们貌似牛B闪闪的青春" width="450" height="300" />好吧，谢谢你们给我的工牌，还有爱，另外⋯⋯Mak，你究竟是如何拍出一个人高大同时又猥琐的气质的呢？发现你真的很会拍耶⋯⋯</dt>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.liupeng.org/?feed=rss2&amp;p=1378</wfw:commentRss>
		</item>
		<item>
		<title>《牛壹周》设计过程揭秘</title>
		<link>http://www.liupeng.org/?p=1365</link>
		<comments>http://www.liupeng.org/?p=1365#comments</comments>
		<pubDate>Wed, 04 Aug 2010 05:33:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.liupeng.org/?p=1365</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这种精悍的团队），行事原则就是 Geting Real，不过这也让我们在快速迭代中很难做到细节的尽善尽美。
就拿牛一周的图标来说吧。
7月8号的时候，Shawn说：“妖怪，给我个牛一周的icon吧，我要72X72和256X256两种大小。”
于是我迅速地山寨了一个（好吧，你没猜错，克隆的原型是NBA的芝加哥公牛队LOGO），然后继续其他的设计。
等到7月10号比较空闲的时候，我花了些时间来做icon的精细化设计——在Illustrator下拉渐变网格，并尝试各种造型组合。当大家看到那个魔爪版的时候，Mak说：“牛长的不是蹄子么⋯⋯”小龙替我解释道：“妖总画的其实是大菠萝（Diablo）。”
那几天正好在看《独唱团》，用手在封面的牛皮纸和微微泛黄的内文纸上摩挲，感觉很有feel——想到iPad设计指导中所提到的“内容形式上富有真实感”的设计原则，就在封底和内页分别加上了牛皮纸和新闻纸的质感。
为了让人有场景代入的真实感，让人觉得这就是一本杂志，我也改进了横屏时的设计——修改前两边多出的部分本来只是个背景平铺；改进后加入了桌面、台布和咖啡杯——就好象在家，用一本杂志，享受一个很惬意的下午。
如果你在内文页轻轻点击一下，下面会推出一列Preview缩略图。这个部分的设计其实也费了一番思量和讨论，团队内部争论也比较激烈。
最早的想法是拿作者的头像作为索引，一来这样区分度比较明显，二来其实我们最关注的还是人本身。最早的效果，也不过是在下面浮上来一个半透明的层，然后显示人像照片。
后来我们觉得对于我们这样的牛博网老用户来说把人和文章对应起来不是问题，但对于一些普通读者来说就是会比较困惑——他要跳转到自己喜欢的文章，先 要把人头像翻译成自己对应喜欢的文章或风格，这里面经历了一次逻辑转换，会降低成功率。如果他恰好不认识这位作者，那么失败率更高。而小的缩略图虽然可能 看不清标题和内容，但是原样复制了色彩和版式，让人很容易形成视觉上的一一对应。
于是我们改成了整个杂志的界面上推，然后在下面的餐台布上显示预览缩略，为了让你的目光聚焦在这个区域，我们在预览浮出的时候，把上面主体的部分作了暗化——这就象有点物理基础的科幻片，让你感觉真实，但也有点超现实。
如果你再细心一点，会发现不同文章的缩略，厚度是不一样的——有些是单页，有些则叠了一两页——这样的设计是我们想用不同的厚度来提示读者这篇文章的长度——如果你觉得它太长就可以放弃。进入文章后，则会用苹果通用的圆点来表示一共有几页和你当前在第几页。
不管怎么说，简洁是我们设计的第一法则。我们不希望看到任何多余的按钮，也没有教程，希望你一上手通过简单的尝试就知道该怎么做——为了达到这个目标，我们在样本大致出来后也找了身边很多朋友来测试。

四、定位
最后，我想用FAQ的方式，来谈谈关于《牛壹周》为什么这样设计，以及如何定位。
Q:如果我喜欢那些文章，我可以上牛博网和订阅他们的RSS，为什么你们还要做这样一本电子杂志？
A:首先，它们的阅读体验不同，在iPad上阅读，显然比在电脑上阅读来得更愉快而方便，而且它相当于是一个存档——在纸张时代就已经有很多人喜欢收集全年的旧杂志，网络时代同样有人有此癖好；
其次，这里面是精选的文章，经过了人的过滤，提升了内容质量，同时降低了阅读噪音，降低了你的筛选成本——我们相信编辑，也是有价值的再创造。虽然我们的品味未必你未必完全认同，但其实你如果完全不认同也就天然不是我们的目标用户。
当然，这只是我们的理解。用古灵常说的一句话来作结，那就是：“我说的都是错的。”欢迎提出相反的看法。：）
Q:为什么是期刊而不是南周阅读器或者书的形式？为什么是十篇文章而不是更少或更多？
A:选择做期刊其实是在信息的流动性和质量控制之间作必要的平衡和妥协。Twitter、Blog以及RSS已经解决了信息迅速流动的问题，高质量的、时效性堪比新闻但内在价值比新闻更强的精华信息如何展现和留存？我们认为期刊是不错的选择。
关于为什么是十篇？我承认这受到了爱枣报（www.izaobao.com）的影响。虽然我们身边不乏一觉醒来就要浏览上百个网站，RSS阅读器里躺了一千条未读文章的信息达人，但也有大量的人希望花更少的时间阅读到更有质量的信息，然后迅速离开，干自己该干的其他事情——我们信奉小就是美，少就是多。
Q:《牛壹周》会每周更新么？你们以后会收费么？
A:  会一直出下去，但暂时无法保证每周更新，因为《牛壹周》还只是本实验性的杂志，还没定型，我们还在尝试更好的阅读体验效果，更多的内容格式支持以及更易使 用的编辑平台——之所以在设计阶段就开放出来，是因为我们希望和你一起设计，也希望最终你也能轻松地编辑并生成这样的iPad杂志。
牛博网不收费，我们也是。
对于《牛壹周》有任何意见或建议，欢迎在我们的Blog留言，或写信给team+iPad@mycolorway.com，让我们一起设计，共同来决定它未来的样子。
谢谢。：）
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1369" title="br_design01" src="http://www.liupeng.org/wp-content/uploads/2010/08/br_design01.png" alt="br_design01" width="450" height="210" /></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-1365"></span></p>
<h4>一、学习</h4>
<p>iPad出来不久，我们便觉得这样的神器简直就是为用户体验设计而生——精致的显示，优秀的交互，简单的操作，让使用没有门槛，充满无限可能——于是我们决定进军这个陌生的领域。</p>
<p>学习是第一步，于是有人开始看Stanford的视频教程，有人开始安装xCode，有人开始研究HTML5，而我，则开始学习苹果4月3号出的那份官方指南《iPad Human Interface Guidelines》。<br />
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>这种精悍的团队），行事原则就是 Geting 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: 460px"><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="450" height="329" /></a><p class="wp-caption-text">早期的封面横屏设计，只是简单的旋转缩放然后居中</p></div>
<div id="attachment_1196" class="wp-caption aligncenter" style="width: 460px"><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="450" height="329" /></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>
<p>四、定位</p>
<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://www.liupeng.org/?feed=rss2&amp;p=1365</wfw:commentRss>
		</item>
	</channel>
</rss>
