“天上白玉京，十二楼五城”，盛唐时期的李白，写下如此气势恢宏又幻象万千的诗句之时，或许很难想像数千年后，它们自云中款款而来并呈现手中的样子——在移动互联网时代，连接云端的手机已经成为富丽堂皇、奇珍充盈的商城的在线橱窗。

对于身处拥挤都市又工作繁忙的现代人来说，时间成本和选择成本正变得日渐高昂，于是诸如“万达广场”、“大悦城”之类大型的MALL成为人们工作之外娱乐、餐饮、购物、运动、休闲的首选。“淘宝”、“京东商城”和“当当网”等在线电商平台解决了非实时的淘货与比价型消费，而Mall商城的实时实地的体验型消费又如何通过手机来进行指引和形成用户黏性？对此，彩程设计结合来自市场的需求与项目，进行了一系列的探索和实践。

作为龙湖地产的移动战略合作伙伴，彩程去年为他们推出了三款商城地产类的App（含iPad与iPhone版）——“龙湖北城天街”、“龙湖西城天街”和“龙湖星悦荟”，尽管因为地域性太强的原因不可能有类似通用型App的大量下载而进入App Store的榜单前列，但比上海新天地，海港城guide，朗豪坊等同类App的排名要高出一大截。

为龙湖地产开发的商城类App

iPhone的有趣之处在于，它以设备为基础很好地为我们划定了一个圈层：消费能力中上；追求品质与体验；对时尚和新锐的东西接受度高，对互联网尤其是移动互联网不陌生——这正好是大型商城所想要笼络和争取的用户群，而安装了商城应用的iPhone本身即为一张VIP会员卡。

从商业经营的角度来讲，MALL通过成本、规模和管理方面的优势，让业态的聚集效应更突出，消费体验更丰富。而对地域性用户来说，只记住一个大品牌和一站式入口又无疑是最省事的方式。

我们设计的这三款APP大同小异，以导购型信息呈现为主，内容由活动、订餐、优惠、商家、微博、关于等几个模块构成，前台展现上根据信息的重要性以及属性特征制定好详略得当的交互框架，数据则由商家根据线下活动和后台即时更新。

商城App内容结构

龙湖星悦荟App典型界面

龙湖星悦荟App后台录入界面截图

商城类App，与商城整个线下经营以及对App的需求定位密切相关，2012，彩程再接再励，正应客户要求，着力打造一款涵盖商城信息、会员服务、二维码与在线分享的全新App，实现客户、商家与商城之间的互动与多赢，相信它出场会更为惊艳和值得期待。：）

上回说道，TeamCola的第一个可用版本在开发完成后在2月2日这个非常2的日子里正式在团队里内部使用了，在新鲜感和使用热情渐渐退去后，越来越多产品和视觉上的问题开始显现出来，1个多月后，团队讨论决定对TeamCola做一次大的调整。

即使是早期的版本TeamCola也没打算支持IE6

在视觉上，经过讨论后总结了一些这个版本的不足，首当其冲的是TeamCola的标志。不少人对标志的第一印象是看不出TeamCola的字样，甚至不能辨识代表CO两个字母的橙色小拉环。当一个标志的识别性遇到了问题，无论它的设计构思有多巧妙都不能算是合格的标志。

视觉风上第二次迭代以灰和饱和度较低的深蓝色为主色调，而标题栏则以明亮的橙色作为字体颜色，灰蒙蒙的页面使得一些视觉上的杂音更加明显，在页面结构和排版上也存在着颇多不妥。经过几次讨论我决定推翻当前的视觉重新设计，而TeamCola在一轮又一轮测试反馈当中也酝酿着功能上新的变化。

第一张完成的视觉，项目仍然有任务和里程碑，标签式的项目总览显示的信息也比以前详实许多

4月18日TeamCola迎来了一版崭新的视觉设计，没有了LOGO，没有了条条框框，没有了橙得发红的标题，原本很重的Header也变成了一道淡淡的渐变。页面宽度也从960px缩短到了800px（日历页面为了显示更多信息仍然为960px），整体布局紧凑而又留有呼吸空间，阅读信息也变得轻松了许多。

项目的列表页，新的项目首页以项目列表的形式展示，能够很清楚地看到项目间活跃程度的不同

LOGO还没设计时的登陆页面

与此同时，TeamCola也总结了第一个可用版本内部使用时出现的问题，任务使用率太低使TeamCola最后去掉了任务功能，转而以工时(工作时间)作为TeamCola的核心，团队和团队成员以及项目都围绕着工时运作。老妖提出的“团队工作史”也成为了宣传TeamCola核心价值的口号被确定了下来。

取消任务功能后，TeamCola对工作记录功能进行了深耕细作，出现了直观的柱状图工时记录（最近更是增加了工时统计等方便的图形化数据），视觉上我移除了所有可能会对数据展示和信息陈列带来困扰的视觉元素，通过设定字体（如团队和项目页工时统计的数字，我设定22px的加粗Helvetica）和优化图形化数据（如在柱形工时图中为加班日着上蓝色，以及刚刚推出不久的项目着色功能）让工作记录的可读性更高。一切都是为了功能服务，没有多余的侧边栏，没有冗长的footer，甚至没有LOGO。

但是TeamCola仍然需要一个LOGO。在新版视觉送走了小拉环后不久，新的LOGO也呼之欲出。

在构思LOGO时画的一系列草图

可乐、时间、团队、激情。。。几天的草稿和脑暴之后，现在看到的TeamColaLOGO被创造出来了：

以色块构成的新TeamcolaLOGO同时也是一块适用于TeamCola的色谱

以包围白底可乐的色块填满的LOGO冷暖交汇，设计这个LOGO的初衷是一杯加了冰块还往外冒气的可乐，在夏日的灿烂的阳光下，面对蓝天与海洋的场景。TeamCola就是这样一款工具，它让团队内的沟通如喝口可乐一样舒畅无比，让团队的工作通透得如仲夏海边的浅滩，让团队成员工作的心情如看见蓝天般轻松自在。

标志诞生的同时，我还定义了配合LOGO使用的字体，以Calibri为原型设计的字体更加平滑，不失变化的t和c字母很好地被使用在LOGO之中，整套字体小范围使用的情况下也不失严谨正式。

TeamCola就是激活团队的那杯可乐

第一版设计出来后我很快完善了其他页面的设计，去掉了任务以及日历的调整之后，视觉上也快速地随之进行迭代。通知邮件样式、新手引导、无数据界面设计完成的同时，视觉规范、logo使用规范也渐渐完善，距离TeamCola的正式发布已经越来越近了。

TeamCola的各种通知也进行了细分归类方便进行设计

TeamCola的邮件通知样式，没有使用任何图片，一目了然

使用iphone可以将TeamCola链接添加到主屏幕以快速进入

在移动平台上，TeamCola也努力使用户可以无障碍地记录工时，查看项目和评论，甚至随时随地兑换可乐。虽然暂时没有推出各平台的原生客户端的计划，我们还是把重点放在了html5版的移动版TeamCola的设计和开发上，不久的将来大家就能用到不是app胜似app、操作体验流畅无比的手机版TeamCola了！

在ipad上使用TeamCola？大丈夫だ、問題ない！！

新的移动版TeamCola即将到来

正式发布前TeamCola的产品页面，此时只有Maklu的原型图能吊足大家胃口

5月23日，TeamCola正式对外发布，随着功能的继续完善优化，使用TeamCola将会更加顺畅。 让每一个团队都能发挥100%的能量，成为了我们废寝忘食努力下去的动力。在接下来的日子里，TeamCola仍然会是各个团队手中那杯喝不完的冰镇可乐。

6月29日，当我一如既往地打开Chrome进入Gmail时，顶部导航栏的变化像是在向我表达着什么。5分钟之后，当我点击了小滨滨的邀请链接，我惊奇地发现————连接被重置了！！

于是我只好全局ssh再次打开了邀请链接，Google+这才渐渐显山露水迎面走来，依然是熟悉的三栏布局，比例和功能分布也和facebook类似，抛开可以把亲朋好友圈养起来的恶搞特性(误)不讲，Google+最吸引我的是出色的视觉设计，简洁清丽的风格令人爱不释手。随着Google+的发布，诸如Google Calendar、Google Map等应用也随之换上了”小清新”风格。

Google+的设计让我想起了TeamCola。5月正式上线的TeamCola在把团队工作日志的特性做到极致的同时，极简化的视觉设计也得到了不少肯定评价。在半年的开发设计过程中，随着团队对TeamCola做小做精的定位愈加准确，视觉上也做了3次大的迭代。这3次迭代过程中，即使是一条边线的去留也要经过反复的推敲甚至开会讨论，这也使TeamCola能够越来越符合极简化设计的要求。

第一次迭代，不断精简视觉元素过程中的设计摸索

PowerMatrix截图

PowerMatrix(简称PM)是彩程在09年开发的在团队内使用的工作记录软件，也是TeamCola的前身。去年末由于所有人都已经无法忍受PM之苦逼难用，我们决定重新开发一款供团队内部使用的工作记录应用，由我来担任视觉设计，第一版视觉设计在12月初放出。

新PowerMatrix(当时还不叫TeamCola)有任务、项目、工作记录(日历)和积分功能，取代老PM首页的是一个，显示团队近期的动态(任务、里程碑和项目的新建、完成等)，侧边栏显示自己的任务和项目。第一版的视觉稿很快就做出来了，整体风格贴近其名字”PowerMatrix”蕴含科技色彩的冷峻专业。为了使页面更加紧凑，减少视觉焦点，通常放置在左上角的logo被移动到了footer位置。

这版视觉沿袭了当时我的设计风格，以渐变和阴影表现页面元素间层次，使用偏向中性色调。由于毛病太多(中间空白区域辽阔得可以放羊、层次太乱、LOGO的放置问题等)很快就被否决，在团队几次讨论后第二、第三版的设计也紧接着推出来了。

随着logo由科技感的文字变成一个更加geek的矩阵，PowerMatrix的渐变也逐步被弃用而转为更为纯粹的单色，所有阴影也随之取消。更大的变化是在排版和文案上的优化：导航的任务显示任务数气泡、dashboard的列表文字主次区分、侧边栏视觉上的弱化以及主区域加高突出等等，这次优化的设计很多保留到了第三次迭代之前，而视觉上的去繁入简更成为了后面迭代的核心诉求。

第二次迭代，极简设计之旅正式起航

经过几次头脑风暴，Teamcola击败了阿迪王项目王等一堆无厘头词汇，把PowerMatrix这个名字彻底扫进了历史的垃圾桶！2月2日，在一个这么2的日子里，TeamCola的第一条工作记录诞生了。

回到去年12月，在确定TeamCola这个名字之后，LOGO的设计被提上了议程，TeamCola需要它的第一个标志。在彩程团队之中，可乐和咖啡是很多成员日常工作不可或缺的饮料，而可乐本身又能衍生出年轻、轻快和活力等含义。第一版的TeamCola标志是文字和图形结合，使用Cooper std字体并以一个拉环的形象表示co两个字母。设计的初衷是力求LOGO简洁轻松，以鲜明的配色辅以小拉环的图形暗示来展示TeamCola这款轻量应用的魅力。没有渐变、明晰的外形能够很好地使用在页面上。页面的视觉风格在LOGO确定后选择了浅灰以及低饱和度的深蓝色作为主色调，辅以橙色和蓝色，在带警示性的文字和提示上使用桔红色突出显示，次要的信息元素以灰色来展示。

任务首页

随着LOGO的确定和视觉规范的建立，其他页面的视觉设计也随之展开。任务、项目、日历和积分页面很快完成了。和第一次迭代结束的设计相比，整体色调由深灰、橙色的偏暖调整到了灰蓝的偏冷，去掉了侧边栏不同类目的分隔线，排版上也有小的调整。2月初在团队内上线使用后，在产品功能定位和视觉设计上的问题越来越多使得TeamCola的设计进入了第三次迭代。

日历页面，此时的日历长宽是固定的，在高分辨率(如1920×1200)下会造成严重的空间浪费，而现在的TeamCola则会根据分辨率自动调整高度

除了一小撮希望推出ipad兑换而拼命攒分的同学外，大家都喜欢在饭后兑换一瓶冰镇饮料犒劳自己

从开始仍然带有应用程序的痕迹到整个页面除了LOGO外几乎没有图片的设计，TeamCola带给我的不仅仅是经验积累，还有大量的问题教训，使我不会像卡扎菲一样在错误的道路上越走越远。在看Basecamp、Github等一些优秀的网站，发出”原来还可以这样设计”的惊叹之余，更多的是需要回头审视自己的设计，到底有多少元素是需要留下来并能发挥作用的，有多少元素可以精简甚至去掉，如何在雕琢细节的时候不丢失整体。TeamCola作为团队工作日志工具，视觉设计的重点需要放在大量信息的梳理与展示当中，让使用者在使用过程中感觉不到设计的存在才是极简化设计的精髓。

每个产品的背后，都代表着一种价值观和审美，TeamCola也不例外。如果你要问TeamCola代表了什么，我们认为它代表了精简、透明和开放；如果你要问TeamCola能带来什么，我们认为它能带来自律、高效和信任。

想通过这篇博客，谈谈我们如何通过设计小团队工时记录和统计软件——TeamCola来表达我们对世界的理解和认识，以及它又会如何反过来影响和改变着这个世界——哪怕是很小的一部分，比如你的团队。

1、少即是多——TeamCola之精简

“少即是多/Less is more”——出自建筑大师斯·凡·德之口的这句话充满了逻辑上的矛盾和禅宗式的智慧，而对此我们有两方面的理解：

第一种理解是：是在绝大多数情况下，一把好用的匕首胜过一把有十个以上花哨功能的瑞士军刀。TeamCola只解决一个问题，就是让你明白自己团队成员每天工作的内容与效率；而你在这个软件上真正需要动手的也只有一件事儿，那就是每天在日历中如实地记录下自己的工作内容。

在TeamCola中你唯一需要做的，就是简单记录下自己每天的工作

第二种理解是：这世界上的事物彼此关联，当你真正做好了一件事儿，有很多事都不需要去做的，或者说其关联问题都是会迎刃而解的。TeamCola确实只解决了一个记录工作日志的问题，但最终你会发现它能带给你团队的绝不仅仅是一本流水账。

填写工作日志这么一个简单的举动，就像把石头投向团队平静的湖面从而激起阵阵波澜

你看，TeamCola就像一个放大器，虽然你只做了“填写工作日志”这样一个举动，但是整个团队的个人时间管理、项目管理、人力资源调度和企业文化都会被从此激活。

无论从视觉UI还是功能设计，TeamCola都是一款积极拥抱极简主义的产品，大道至简，你真正要做的比你以为要做的其实要少很多。

2、信你所见——TeamCola之透明

对于一个优秀的团队来说，对外要有战斗力，对内要有凝聚力，所以每个人都要足够强而且尽量减少内耗，要做到后者，彼此之间的信任比什么都重要。信任的基础是什么？我们认为是透明。为什么最近红十字会义正辞严的申明没有人相信？因为他们财务数据根本就是个黑洞，无法公开也禁不起监视。

我们倾向于认为在一个好的游戏规则下，其实是可以没有专职管理者的，因为我们每个人都能成为自己的管理者，对于一个有观察和自省能力的人来说，需要的其实是被影响而不是被管理。

我们通过一个叫做“团队日志”的页面来形成一个时间的剖面，看在同一天里面，你的团队成员都在进行着哪些工作，你会发现有些人在做具体的项目，有些人则在做研究，还有些人在跑销售（嗯，还有些没填写工作记录的懒家伙，你可能得催催他们补上了），这对形成全局观非常有效——无论你团队的人员分布在哪儿，这个页面都能让整个团队的工作对你透明。

有了TeamCola，整个团队的工作会更加透明

如果你切换到“成员”这个页面当中，发现你的搭档每个月平均用在工作上的时间接近9个小时而且大部分是有效工作，而你平均下来只用了5个小时而且工作内容大多不能并入公司具体的项目只能归类为“其他”的时候，你就会觉得有压力了——这个数据对团队内部的所有人都是透明的，你看或者不看，工作量就在那里，不多不少——因为这都是你自己填的。

团队成员的工作量和加班情况(那些超过8小时的蓝色柱子)一目了然

看到这里有人可能会问，如果填写日志的时候有人不如实填写呢？首先，我们不打算也不认为软件层面上能杜绝造假的问题，但如果真有人造假的话问题也很容易暴露。第一，在一个团队里，大家是共同协作的关系，记录的日志可以互为参照和佐证。比如今天上午A和B一起开了个会，A一整天的工作内容填的开会，而同样的事情B只记录了上午，那么这个问题很容易暴露，而A这样记录的时候心里也会有顾虑。第二，即便没有相互参照和佐证的关系，如果一个人总是在做某个项目某件事情上花费了大量时间但是无法阐述更多细节或成效不彰，那么你可以考虑跟他谈谈工作方式方法的问题——TeamCola的统计分析报表很容易就知道哪些家伙是需要关心和犒赏的劳模而哪些家伙又是需要提点一下的“酱油王”。

从这张统计分析图能看出，这位叫做“古灵”的同学工作非常刻苦，而且工作内容非常聚焦

相比之下这位叫做“老妖”的童鞋在过去三个月时间里不仅工作清闲而且有大量不属于任何项目的“其他”（灰色部分），是时候批评一下这位老打酱油的“酱油王”了！

想申明的一点是，TeamCola的设计以每个人的诚信为基本前提，我们既无意于开发一个与人斗的系统，也不希望它成为一台记录工时的冷酷打卡机。其实它更像是一个冷静而客观的分析师，把能够通过逻辑与常识发现的问题以更为显性的方式呈现而已。

3、生而互联——TeamCola之开放

TeamCola是一个在线软件，现在推出的是Web版，而且已经做了一个针对智能手机浏览器的移动版，未来我们会针对移动终端进一步优化并推出客户端，而我们希望它最终能满足随时随地，以任何设备方便地接入——简单地说，它是一个为互联网而生的软件，不管是传统互联网，还是移动互联网，都将能看到它的靓影，嗯，就像Evernote或者Dropbox所做的那样。

通过iPhone访问Teamcola.com的效果

TeamCola上的工作日志除了自己上网获取，还可以选择通过邮件订阅来让服务器自动推送。针对人员和项目，TeamCola都提供了邮件订阅功能，每天早上9点，Team会把你订阅的个人或项目昨天的工作日志发送到你的邮箱。

点击这个按钮，你的邮箱便会收到每天来自这个项目的工作日志汇总

在Gmail中收到的从TeamCola订阅的某项目工时统计和内容邮件

如果你希望保留一个离线的副本供自己随时查阅，还可以通过iCanlendar来同步TeamCola中的消息到Google Calendar、Apple iCal、Microsoft Outlook或Mozilla 的Sundbird中。

你可以用主流的日历软件来订阅来自TeamCola的工作日志

用Apple的iCal订阅“老妖”童鞋的工作日志所看到的效果

4、良性循环——TeamCola之回馈

马歇尔·麦克卢汗曾说“我们打造了工具，而工具也会反过来塑造我们。/We shape our tools and afterwards our tools shape us.” 使用TeamCola的过程同时也会是一个团队提升的过程。

首先，TeamCola精简的设计会让你的工作变得更为高效，因为你不再需要和复杂的OA系统进行搏斗。每天花一点时间记录一下自己的工作上本身就是一种检视，很多时候填日志时连我自己都在感慨，原来我一天中这么大片的时间没有任何值得记录的工作也没有任何产出！每天在TeamCola中记录日志的过程会让自己变得更懂得如何去有效地利用时间。

其次，TeamCola透明的机制也被动地会让人变得更为自律，因为如果有人工作总是一个打酱油的状态，团队日志中就会很容易看到，这对努力工作的其他个体而言是个伤害，对当事人本身则是一种无声的鞭策。透明给团队带来的最大收益，其实是信任。能够看到一个团队中的所有成员为一个目标而努力工作（从工作时间到工作内容）是幸福的，除了情感上带来的激励，还有对别人工作的更多理解——对于一个小团队而言，知晓别人的工作，对于保持团队方向和理解团队使命非常有帮助。

最后，TeamCola开放的互联接口让你能更为方便地随时随地掌握自身和团队的状况，它可以在线和离线同时使用，也与已有的主流工具和谐共生。

精简、透明和开放的TeamCola，为您带来自律、高效而且彼此信任的团队

正因为TeamCola在设计时将精简、透明和开放融入血液，所以也会把这种特质潜移默化地带给使用它的团队，让你的团队成员更为自律、高效和彼此信任。

最后，欢迎使用最棒的小团队工时记录和分析软件——TeamCola，我们还将不断思考和改进，而这一切也有赖于你的反馈，有任何想法或建议，欢迎写信给我们的妹儿。

龙湖北城天街的app视觉设计部分终于收尾，从最初的版本到现在已经发布的版本，中间经历了种种蜕变，今天做一个回顾和整理，记录这次的经验和心得。

赏心悦目的视觉设计是app品质加分的砝码。一个app在整个逻辑架构清晰合理、设计出色的前提下，如果能给大家展现一张漂亮而生动的脸蛋那就再好不过了，秀外慧中的美女总是得到更多的青睐。针对客户的气质来确定基本的配色和风格：龙湖是一家全国知名的地产公司，“天街系”是龙湖的商业旗舰产品，由大型高档百货、餐饮、娱乐等各种商业形态组成。 城市化、 现代化、时尚化、精品化是我给它的定位，界面也应该是走这种风格。

与客户的良好沟通应贯穿项目始终

配色部分经历的波折比较多，由最初的红色加灰色到中间的龙湖logo色系，再到最后深灰和近白色，之前由于没有与客户建立起沟通渠道，造成了大量的资源浪费。

设计一个简洁大方又生动活泼的ICON,视觉元素的数量要做减法，质量要做加法

icon的设计使用了龙湖北城天街已有的logo，最初我尝试了把这四个彩色的圆形放在一个有材质感的背景上，但是出来的感觉并不好，比较平淡。后来分析了龙湖本身的气质是偏年轻时尚化的，icon的视觉应该是干净明朗充满青春活力。这和苹果的设备本身的气质也很相似，我决定就在这四个彩色圆形上做修饰，让它看起来精致清爽。既然不加其它元素进去，就必须让logo来出彩，给它加上晶莹通透的水晶质感，logo就立体鲜活起来,再配以淡淡的浅灰作为背景，它有了明亮的色彩和亲切的气质。

细节决定整体的品质

一个好的视觉设计可以是恢宏大气的，也可以是温馨雅致的，不管是注重材质的实景风格，还是率性写意的涂鸦风格，细节的处理展现出的是品质的高低。小到一条有虚边的边线也会让品质大打折扣，app的视觉设计必须精确到像素级，要确保界面中的每一个像素点都完美无缺。

出现虚边的情况总教人尴尬，除了反复地将图片放大来检查以修正虚边之外，还要感谢Photoshop形状工具有一个Snap to Pixels功能。

图文排版要考虑的不仅仅是漂亮，还要考虑用户的视觉感受和页面的容量

按钮要多大？文字选什么字号？界面的布局是否合理？如果这些问题让人困扰，除了请教有经验的前辈，实践也能出真知。把设计的界面导入到设备上，用眼睛看，用手指去测试，看是否可以不费力地看清屏幕上的文字，看界面的布局是否让人感到舒服。用这个方法测试， 看是否能准确地点到目标区域 。我发现在iphone界面上字号在22以下的hei字体和ipad界面上12以下的hei字体的文字看起来就很吃力了，应尽量避免使用这样小的字号。那么是否字号越大就越好？在这个app的商户页面，要在商户的logo旁边写上商户的名称，最初用来做demo的“百丽”只有简洁漂亮的两个字，使用60号的hei字体真是再漂亮不过了。不过很快发现商户的名称有很多长串的，最长一个 护肤中心的名称有12个字之多，所以我以这个最长的名称作为参考对象，测试后选择了40号的hei体。

一个优秀的设计是在倾听客户、理解项目的基础上才有可能建立起来的，简单清晰、有人情味儿的逻辑架构是判断设计成功的标准，与团队成员的默契合作也是必不可少。植根于用户体验的设计，一定要把自己当作产品的用户，从一个用户的角度去思考，这样才能评估出产品是否优秀。

#重庆龙湖北城天街#App是彩程为重庆龙湖地产打造的专属品牌商圈类App，通过它你可以了解到重庆龙湖北城天街最新活动、商家折扣、优惠券和其他相关信息。目前iPhone版已在苹果应用商店上架，欢迎点击此处下载。

iOS APP体验设计不像互联网的体验设计那样，有一堆的方法论和可以“借鉴”的案例。 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外，没有找到更好的设计哲学和方法论。

事实上，即便认真地研读了HIG和Zen of Palm，甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因，我得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理 构成。我这里讲的设计湿不是美工！这是前提。因为美工只关心好不好看，他们几乎不关心（或者不懂）产品的易用性。

如何鉴别程序员和设计师呢？ 你无法用会不会写代码来区分他们（毕竟很多设计师是会写编程的，例如彩程设计的设计师们，反之亦然），但是你却可以用通过他们平时思考方式来区分他们。

程序员： “哇！这个功能好！我们能不能在我们的APP中加上呀？”  这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹（或者心里的感叹）。

设计师答：“我们凭什么要加这个功能呢？”

程序员更倾向于关注功能本身，希望把所有好的东西都加到自己的作品中。例如，好的设计模式，高效的算法，看似绚丽的特效。一般程序员的作品有两类，第一类是功能比北京的车子还要多，你需要一本牛津字典一样厚的说明书才能搞懂如何使用。另一类有十分绚丽的特效，界面飞来飞去，一走神就以为自己在耍杂技了。

设计师更倾向于关注产品整体，他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣： 一张好的照片有三个要素  1.有一个鲜明的主题。 2.  画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题，所有有主题不相关的重点通通砍掉。

不幸的是，很多iOS的开发者是从程序猿跳出来做的。 泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了！！！有木有！！！有木有！！！” ， 于是他们做出来的东西可以用下图简要地说明：

没错！问题不在于功能是不是足够的多，而是体验是否足够的好，是否能解决问题。而尤其在做iOS的APP设计的时候，由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为，主要区别有以下三点：

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题，我们可以从传统的电脑使用说起。 我们控制电脑通常是通过鼠标， 手用鼠标控制屏幕的指针， 移动到某个位置， 点击、双击、拖动等完成操作。 我们看到的是屏幕，操作的是鼠标。我们的视觉焦点是屏幕，操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。 因此，我们想打开一张图，只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一，当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计，例如：拿出你的iPhone，把手放在iPhone上，你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域，其中绿色区域是安全区域，代表我们心理上认为一定可以准确地点到的区域；而黄色区域代表我们心理上会有点忐忑，不能确定是否能点中的区域。例如某拍照软件的设计：

没错，问题不言而喻。 从UI的设计上来看，如果是个网页的话，视觉的确没什么问题（当然，删除按钮放在修改的旁边本来就是愚蠢的做法，这一点就先不说了）。但是由于视觉焦点和操作焦点同一的原因，点击修改就变得十分困难与紧张，何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转，我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转，点了链接后就进入了一个全新的空间。空间感知为网状的，没有头没有尾，在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中，进入APP通常都是一个固定的点，每个操作就带入另一个空间，如果失去了空间感知，就像失去了地图，用户会很容易有迷失的感觉。

而由于屏幕的大小等因素，APP不能直接告诉用户空间是什么样的，但是可以通过各种手段来给用户以暗示。例如：

Camera+中，两个主要的场景，一个是拍照，一个是照片管理。两者之间空间是上下的关系，当用户在拍照场景下点击相册时，界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示：

更复杂一些的空间暗示，如Reeder iPhone版。空间中的每个位置十分清晰，并且用动画的方式流畅地向用户暗示这种空间感。不仅如此，Reeder iPhone版的加星去星的空间感知不是上下左右，而是前后的关系。请自行购买后体验。

除此之外，Reeder iPad版本和Our Choice的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例（视频）。Our Choice在选章节的场景进入章节内文时，选章节的场景会缩小，通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

3. 体位化设计

以iPad为例子，通常我们使用iPad的时候有两种体位，第一种是把iPad放在桌面上进行操作，这种体位使用APP，无论按钮在哪里，点击都需要用一只手完成，两个步骤间的按钮距离远近也不会成为负担。 而当手握着iPad的时，这种特殊体位，问题就出现了。

（如果你有手机，请现在拿在你的手上）倘若你只希望用一只手完成操作，你会发现，你用大拇指点击屏幕中所有点，却只有绿色区域是很易点击的。如下图所示，iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计，是因为设计没有考虑到操作姿势，以至于左边一排不常用的功能占据了最重要的黄金区域，而常操作的区域却远离易操作的区域。 操作起来就比吃掉一只死苍蝇还难受。 而后者，好的体位化设计，所有的常用功能，一只手，不需要太多移动就可以全部完成： 上篇文章，下篇文章，标记未读，标记加星。

当然，如果你是我们《牛壹周》的忠实读者，那你一定记得我们的风火轮（详见牛壹周1.2之无敌风火轮）和一阳指(牛壹周1.1更新手记)？ 没错，我们坚决地去掉了一阳指，因为这是一个漂亮却难用的设计（至少不是一个好的体位化设计）。 我们在架构上保留了风火轮（当然，只是在程序中保留，但并未启用），因为这是一个很好的体位化设计案例。 例如，在阅读杂志的时候，我们常要翻下一篇文章，传统的操作是先进目录，然后再找到要看的文章，再跳转。 而使用风火轮，如视频所示，你的手完全不用离开屏幕，无论你的手有多大多少，无论你是左撇子还是右撇子。

在即将发布的iOS5中，iPad的键盘设计也很好地体现了所谓体位化设计的精髓：

结束语

iOS设备，甚至是包括Android在内的所有移动设备，他们都因为独特的使用场景，似的设计不同于网页设计。 很多“美工”，甚至程序员从网页设计转变角色来设计移动设备APP时常忽视这些隐形的因素，最终导致产品设计水平难以提高。如果说近年来交互设计师在网站设计中的地位越来越高，那在移动设备的设计中，他们的地位会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特点事实可以类比到Android甚至更多的设备中，当然也不局限这三个特点。

当然，也正是因为这些原因，当我们听到别人兴奋地告诉我们：“哇！HTML5可以做到所有设备自适应ye~”的时候，我们通常是不屑，心里默想“程序员！”。 当然，这里并非贬低之意。只是，有一点不得不承认，不同尺寸的设备，不同的分辨率，若想获得最好的体验，“自适应”让机器适应了却让人难以适应。例如一个按钮本来有1厘米高宽的，一个自适应，在iPhone上就只有原来的1/3时，你叫人怎么点击？ 当然这样的例子很多。 大多数这种不花功夫还大赚的宣传，就犹如电线杆贴满的小广告，通常都是缺少优质应用的病入膏肓的硬件厂商为了快速解决痛楚而买肾的做法。当然，对技术敏感的工程师就不自觉地帮着一起吆喝罢了～

我们彩程设计对移动设备还会持续观察思考。更多的设计方法和哲学会持续和大家分享。 敬请关注。

“一个国家，就业的65%到80%是由小企业解决的，发达国家，每千人口一般有45个到50个小企业，中国目前每千人口的企业数量，将平均2人的个体户5个折成一个企业，加上注册登记的其他全部企业，拿全部人口除，我国为12人不到，因此就业困难，实际失业率较高。一定要让大家创业办小企业，以解决就业问题“ — 周天勇

今天是新版TeamCola正式上线，给我们团队那些自诩为水手、船长、船员、船工…的家伙们使用的日子，在这个时刻，我的14位伙伴分布在这个城市的5个不同的地点，他们有的在咖啡馆里抱着电脑喝着咖啡编写着代码，有的在自己的家里刚刚练习完一副书法，准备开始今天的视觉设计，而我们的CEO，目前正在市中心的一家医院里照看着他刚出生的宝贝女儿。

嗯，对于一个创业团队来说，这样远距离的办公难道不会出问题么？我们的答案是：不会。除了我的同伴们基本闪亮的人格外，TeamCola确实帮助了我们。

在09年的时候，当我们这群创业的家伙们找到了比较稳定的客户和收入来源，并且组建了一个基本成型的团队后，面临的最大的问题是怎么减少我们工作中那些麻烦的事情。在当时，让我们最头疼的问题是每个月发给我们客户的工作记录，我们需要让每个项目参与者使用规定的格式提交他们的工作记录，但是，我们发现除非每天发日报，否则过个两三天，没人能想起来之前自己做过什么。于是我们想使用一些现成的web app来解决这个问题，但是在搜遍了整个互联网之后，我们失望的发现，那些给小团队使用的工具，要么就是复杂得让我们望而生畏，要么就是粗糙简陋得让人用起来就觉得恶心。

真的这么难么？我们只是需要一个做工作记录的软件，仅此而已。所以一怒之下，在09年的10.1长假，我们花了几天时间自己搞了一个小工具：PowerMatrix，也就是TeamCola的前身。

PowerMatrix在之后很长的一段日子里，很好的完成了工作记录的使命，但是它也有不尽如人意的地方。其中最大的问题在于，PowerMatrix只是一个个人工具，为了让我能“偷窥”到别人的工作记录，我们故意不提供修改各自账号密码的功能，每个人的密码都很容易记住，所以….是的，我们也经常犯傻。

到了后来，我发现不仅仅是我有“偷窥”的怪癖，更多的家伙们喜欢去偷窥别人干了啥，于是我们觉得是应该把PowerMatrix做得更好一些了，于是在2010年的最后一个月（一般来说，一年的最后一个月会比较轻松，我们也有更多的时间来开发这些part-time tools），我们开始了新版PowerMatrix的设计，并给它取了个新名字 —— TeamCola。

这个时候的TeamCola，我们仍然只是把它作为一个自用的工具，在TeamCola上面记录我们的工作，能够看到别人的工作，以及看到项目的进展情况，甚至还做了一个简单的任务模块来做任务分派功能。但是在几个月的使用过程中，我们渐渐发现，我们在TeamCola上真正离不开的，仍然是工作记录，而工作记录，成为了我们团队凝结在一起的一个基点。透明和一目了然的工作记录，构成了我们成员彼此信任及帮助的基础，我们再也不需要每天的daily meeting就能清楚的知道我们的同伴们在做什么，我们也能从彼此的记录中，检视各自的工作；也不会让我们团队的成员像完成家庭作业一样编写工作周报、月报，心得体会、工作感想…每天的工作内容汇聚在一起，能自然呈现出自己或成员工作上的问题，而愿意真情流露的家伙们自然会乐意多写一两句。这样的模式，简单，却真有帮助。

因此，在短暂几个月的内部使用后，我们花了三周时间重新设计并开发了目前这版TeamCola，一切围绕工作记录。日历模式方便所有成员记录工作，而基于成员记录的工作内容，我们能关注到团队每个项目和成员的工作时间趋势，知道哪些项目和成员忙得”吐血“，哪些成员最近比较清闲。

使用TeamCola查看团队工作情况

在医院的那位CEO童鞋这么评价它：“支持iPad的TeamCola，让我可以在医院这样的环境，也能随时随地的掌握团队动态，不用离开家人，能安排更多的时间照顾女儿，更不用跑去办公室当工作狂。TeamCola还减少了很多内部的工作邮件往来，让我可以有更多的时间照顾家人。”

嗯，一切都很简单。

对iPad示好的TeamCola

在创业的这几年里，我见到过很多同行的伙伴，他们有的壮硕一些，有的还比较瘦小，但是让我觉得真正难受的，是在一个恶心的环境里，能够帮助到包括我们在内的小团队的东西太少了，而我不明白的是为什么我们有些牛逼同行们能很快的拿一些国外的产品来做微创新，却不愿意做一些真正能帮助小企业工作的工具；也不明白这个娱乐至上的时代，还有多少人在努力着并无愧于自己的工作，而每次这样想的时候，就会由衷感谢那些和我们同行的伙伴。

现在，我们决定把TeamCola产品化，把这个对我们团队有些帮助的工具提供给所有愿意提高自己工作效率和为自己工作负责的小团队使用，希望能帮助你们从那些笨重而复杂的OA系统、协同办公软件中释放出来，别让本就复杂的工作环境里再多一台压死骆驼的起重机了吧。

我们还会在接下来的一个多月里对TeamCola进行调整，欢迎关注TeamCola，也欢迎和我们多多交流。

UCD书友会（成都）的朋友你们好，我是给你们打杂的老妖。

尽管过去一年里我头发长了又短，但你们应该还记得这头胖子吧

感谢这一年多来，你们对书友会的参与和支持——尽管作为一个个性散淡而且带点情绪化的人，在过去的一年里，我有时候组织得挺好，有时候又很糟（刚开始通知、照片、分享什么的都做得挺好，后来精力实在顾不过来，有些虎头蛇尾了就）。

现在我依然还清晰地记得，2009年12月21号，UCD书友会成都分会在新亚天府苹果体验中心的第一次亮相。

UCD成都书友会处子Show

那天来的人很多，Fish给大家讲了生活中的UED，Stan给大家分享了他们公司开发iPhone上的Mobile Rss的一些心得，新亚苹果的培训师黄颖佳先生则给我们分享了很多苹果历史上的经典广告，聊了不少苹果的文化。

希望你们还记得我们的第一场讲座《生活中的UED》

后来，我们陆续邀请了欧阳丹、Jole、Kevin、Allen、Simon、千鸟、多发、Manfred、耿强、 韦坤、喻康奇、Ryana、wayne、JexChan、小汐、吉祥、董铭⋯⋯等等演讲嘉宾和互动嘉宾，嗯，也有两场实在请不到合适的嘉宾，是我自己凑合着干喷下来的。：）

希望你们记得那些可爱的嘉宾们

我们制作了书友会的名片，戴上了笑脸徽标，买了书柜，书友们也捐了一些书，尽管基本上没人借，也没人看（笑⋯⋯）。

希望你还记得我们的名片和胸牌

我们设计并开发了很酷的签到程序和Twitter墙，为了方便以后的联系和现场的交流。

希望你们还记得我们的Twitter墙、酷酷的签到机以及跑在上面，同样酷酷的签到程序

一年多过去了，我们一共聚会11次，一共有接近200位的书友到过我们的现场，你们一直很给力，我们也一直很欢醒。

也希望你们记得那个没有嘉宾的时候独自干喷的傻逼

过去的一年多时间里，我们真切地看到并深入地感受到，UCD/UED的概念在成都本土已经从神秘陌生变得人人皆知、深入人心。

感谢我的搭档古灵，基本上场场必到，也一直给予书友会、给予我个人很多的支持。

感谢帅哥古灵

感谢Shawn、MakLu、Fish、多发、碧海蓝天等兄弟姐妹为书友会作出的阶段性贡献。

感谢各个不同阶段无偿帮忙过的打杂们

感谢新亚苹果过去一年多来为我们的活动所提供免费的场地、咖啡和无线网。

想买苹果产品的话，就去新亚吧

新的一年来到了，在这里说说自己的想法和决定吧。

我不是周立波，没打算把现场主持办成个人脱口秀；而且，我也不是老罗，没打算把UCD书友会办成老妖UCD培训学校。

过去的一年里，不管我们承不承认，UCD书友会的形式和内容，都象是在培训，在布道。就算这真的需要，那么这种形式也该淘汰了。

今年，我希望我们的UCD书友会更重视交流形式上的平等和交流内容上的质量——我们不需要锣鼓喧天鞭炮齐鸣红旗招展人山人海，我们需要的是说出我们每个人，每个设计师内心真切的理想、感受、痛苦、困惑、理解、经验、挫败和尝试。

经过在QQ群（97091847）里对大家意见的征询以及对成都各处咖啡馆的实地考察，我宣布：

2011年每个月第三个星期天下午两点半，我们UCD成都书友会改在民土咖啡馆（春熙路小科甲巷1号第一城B座6楼，电话028-86730998）聚会。

几个小时前，我已经来实地踩点过了

如果来的人比较多，我们在交流室1，投影、分享；如果来的人少，我们在大厅或无烟区，咖啡、私聊。

2011，我们新地方见吧，亲爱的设计师们。

PS：这个地方的基本消费是30左右，嗯，和去年的免费场地免费咖啡相比，也算是个门槛——也许会有朋友会对此安排感觉不爽，这我能理解，但不想解释，如果非要个解释，我会跟你说哥们，不如分享一篇文章给你看看吧，写得挺好的，叫《免费的终结》，顺祝新年快乐。

关于Sarah Parmenter
英国艾塞克斯(英国英格兰东南部的郡)Youknowwho设计工作室的创始人，Sarah Parmenter专注于网站，iPhone和iPad应用的设计。设计工作室创立于2003年。查看更多设计案例请点这里。

Sarah Parmenter在访谈中介绍了她在设计列车时刻表app时的流程和设计原则。
对设计师来说，iPhone和iPad是全新的平台。相比图形和网站设计的经验积累，在iPhone和iPad上的设计进化还都处于萌芽期。
在这里，Sarah跟大家分享了简单明了的火车时刻表软件设计流程和基本原则，可能对你自己的设计项目有所启发。为了简化过程，我们假设获取火车运行数据的API是现成的。

1.首先，要确定你的创意还没有人做过。如果你发现已经有类似的app，那你需要比它做的更好，有一些独特的优化设计。最好的调查方式是到iTunes Store上搜索已有的iPad程序。

2.当有了创意，你还需要有个明确的定位，它会在后续的设计过程中决定app的设计要点。app定位可以通过苹果的人机界面指南（Human Interface Guidelines）图来确定。
距离图中坐标原点位置越远的app，特点越明显，越需要精美易用的界面设计，让他们与其他竞争者明显区分开来。在这个案例中，我们把app定位在原点位置，即简单使用的辅助工具。

3.确定app定位后，接下来需要聚焦app的核心功能。在团队合作设计时，这一点尤其重要。团队在提出各种功能需求时，很容易陷入哪些功能要包含在第一个版本中的争论。Apple把这个过程叫设计ADS（Application Definition Statement），或者叫设计精简的ADS。

4.走到这一步，很多人会认为对app的设计已经想的很清楚，可以直接开始设计图形界面甚至编码了。实际上，前面的过程，仅仅设计的导入阶段。我们接下来要做的，是产品草图设计。一般我们用纸和笔来画，它们是最简单，学习成本最低的工具。按照我们的设计经验，勾画出用户需要用到的界面，包括像按钮之类的界面交互元素；筛选出核心用户最常用的，最适合移动应用场景的功能。

5.我们要设计的是辅助工具软件，通常，它只需要主界面，和一个在背面显示相关信息的辅助界面，它通过信息按钮触发后翻转显示。如果你设计的是其他app，可能还需要更多的界面。重点是要设计界面与界面之间的切换方式，这一点在设计交付给开发人员时会显得尤其重要。我们把这个过程叫做app功能穿越(App Functionality Walkthrough)。

6.现在，开始app的低保真原型设计。重点是不要陷入过多的细节，低保真只是把你纸面上的草图数字化，便于在电脑上持续的改进。所以，尽量使用黑白，粗糙的线条和图形来制作低保真，别在细节上纠结，浪费时间。

7.低保真原型完成后，开始设计注重细节和精度的高保真原型。我使用PhotoShop，你可以选用自己熟悉的其他工具。一般，我会为iPad设置尺寸为1024X768的画布，然后根据低保真原型进行细节设计。

8.当我们设计app的主界面时，显示列车时刻表是设计的重点。它不需要包含所有功能，应着重显示列车到达时间，出发时间，列出延误或者取消等必要信息。

9.鉴于Apple提倡有质感，有仿真度的图形界面，我们让app的界面设计尽量接近用户熟悉的火车站时刻表。在配色上，使用灰色，黑色，亮黄和红色，配合一些个性化的图标来表示迟到和取消状态。

10.很重要的一点是，app所展现的信息，必须简洁明了，没有多余的文字。所以，在界面设计上，我们没有引入任何华丽的图形或者其他的信息来干扰用户，让他们能一眼就看明白app的用途。在数据条目之间使用间隔色，用醒目的字体显示到达和出发时间，这些都是很好的设计体现。主界面背后的相关信息界面，使用Apple的标准界面即可，为用户提供搜索列车后加入关注的功能。

11.我使用了很多细微的渐变和一些材质，重要的是，确保所有的信息都一目了然，不隐晦，不误导用户。

12.现在可以开始考虑icon的设计。这将决定app在appstore上的辨识度。你可以从简单的轮廓设计开始设计，先把核心创意表现出来。

13.除非有必要，你的icon最好不要包含文字，尽量使用跟你的app图形界面一致的材质和渐变。你如果想给用户呈现高质量的UI设计，别忘了把icon设计成29×29，72×72，和512×512三种尺寸。

14.如果你自己不开发app的功能，还需要把清晰的设计指南交付给开发人员。我会把界面和描述集中到一张大图，并尽可能的把所有可遇见的情况都给开发人员描述清楚。

15.最后，我们把低保真原型，所有的图形界面设计图（一般是PSD）和图标打包在一起，做上清楚的标注，发送给开发人员。有时候，你可能还需要对PSD进行切图，存成PNG，方便开发人员直接使用。

上一篇文章“小鸡快跑发布啦”曾经提到要揭秘一些《小鸡快跑》系列设计过程中我们的想法和心得，介于《小鸡快跑》1.1也已经正式上架，下面就来谈一谈我们几个设计中细节吧。

1. 关于iPhone4与iPad与404错误

很多用户发表质疑，我们为什么仅仅支持iPhone4而不是所有的iPhone平台？一方面，由于机器性能的限制，我们做过测试后发现，普通iPhone在运行《小鸡快跑》时，动画的表现效果并不能达到100%的完美，会出现很多由于性能所产生的瑕疵；另一方面，更重要的是，虽然iPhone3gs和itouch不会受限于机器性能，但由于iPhone和iTouch的屏幕分辨率是480×320，在画面细节表现力上要远低于iPad和支持Retina屏幕的iPhone4。为了让用户有最佳的产品体验；为了保证为《小鸡快跑》的用户，其用户体验不会由于机型限制而大打折扣，我们决定暂时不支持除了iPhone4，iTouch4和iPad之外的平台。

那我们又如何能给用户传达我们的信息呢？相信，在App Store中下载app的用户并不会仔细阅读app顶部的说明文字，那我们就必须在产品内部给用户以提示。其作用就好比是Web中常见的404错误，只不过，Web上提示的是”page cannot be found”，而《小鸡快跑》中，则应该提示不支持该机型。

说到错误提示，在app中最常见的是什么？你一定想到了，是弹出式的警告框。然而，警告框的体验效果类似于Web上太多千篇一律的404页面，不免会让用户产 生一种紧张感。我们知道，404错误页面是网站相当重要的一个页面，也是一个站点中经常被忽略的部分。一个好的404错误页面能够建立起站点与用户之间的 信任，能够吸引那些初次访问错误页面的访问者，使之成为站点的读者，甚至忠实订阅者。同样，在app中，一个好的错误提示方式，能够缓和用户遇见错误之后 的紧张心理，最大限度的改善用户的体验。

常见的404错误页面与app的弹出框

百家平台的创意404——maklu童鞋 is 囧ing~

于是，我们给出如下设计，如果您不是iPhone4与iPad的用户，您会遇见这个精美设计的，还伴随着背景音乐的画面。是不是有点“植物大战僵尸”的影子呢:)

《小鸡快跑》给非iPhone4和iPad用户的错误提示

2. 关于导航模式

不论在Web还是电子书中，导航都是核心的一个部分。在传统的有声读物中，我们常常能够见到“手动翻页”与“自动翻页”的选项。然而，这种区分是否绝对有必要，尤其是在交互极其丰富的《小鸡快跑》动画书中呢？

我们分析用户阅读时具体的场景：当用户端着iPad阅读时 ，他更倾向于看故事而非交互与娱乐；当用户开始尝试触摸屏幕，他会更倾向于交互娱乐而非阅读。于是我们将用户阅读动画书分为了两个状态：“阅读”和“玩”。在不做任何交互的情况下，系统判断用户处于阅读中，动画书自动进入“自动翻页”的状态。而在用户尝试交互的情形下，则app自动进入“手动翻页”的状态，直至翻到下一页之后，又会自动回到“自动翻页”的状态下。于是，我们就解决了导航时还需选择“手动翻页”和“自动翻页”的问题。

因此，我们的导航页的设计也就更为简洁：

改进前与改进后的导航页

如果你观察的足够仔细，你也会发现，在改进后的导航页上，中英文选项上的男孩女孩也会因语言状态的不同而有着不同姿势:)

3. 关于下载

在《小鸡快跑》1.0版本中，书架页拥有令人impresive的画面和动画。但是，下载进度条和提示组件采用的是Apple自带的默认组件，在可爱的儿童画风中难免不是一种瑕疵。另外，由于动画书的文件比较大，根据爱爷爷相对论的原理，我们可以推断出，在长时间的下载过程中，如果有令人眼前一亮下载提示，则有助于缓和用户感官上的等待时间。于是，在1.1版本release之前，我们花了很多时间思考如何改善下载过程中的体验，最终，1.1版本中便产生了这个方案：一只向前爬行，走着太空步的可爱的小蚂蚁。我们希望，他给您在下载等待过程中带来的感觉，能够类似于“冰河世纪”片头片尾中的那只小松鼠，给您的下载体验带来惊喜。

1.0版与1.1版下载进度条

其实，正如我们以前说过的，我们并不是那种“关在地下室，悄悄地筹划一项颠覆世界的举动的团队（即便是在筹划颠覆世界，我们也会乐于并敢于和大家分享我们的看法）”。所以，我们设计过程中的心得，都很愿意和您分享。您可以follow我们的twitter与新浪微博：@mycolorway。如果您想给我们拍转，也欢迎来信：team+ipad@mycolorway.com。

如果你对小鸡叫叫感兴趣，可以在iTunes下载小鸡快跑1.1。如果您想成为《小鸡快跑》的beta tester，也欢迎将给我们来信，并附上您的iPad或iPhone4的UUID号。您可以提前享受到尚未上架的动画书以及给我们拍砖的权利，而我们也很乐意听取您的意见和建议。