终于有了一个App是横跨了iOS和android两个平台了，东西不算难，但是真正制作起来还是考验细节和耐心的。

iPhone

iPhone版本早在今年6月份就已经完稿，但是根据反馈改了8次才到了完整版，然后因为各种原因耽搁了好久，前不久才上线。不过结果还是很让人欣慰的，短时间内盘踞了itunes免费榜第一名。

其实也很出人意料，最初提出做这个app的时候自己还半信半疑觉得可能没什么人会用。不过tapbot的东西也是很简单，但是却依旧销量很好哈哈，继续努力向他们看齐。

iPad

iPad版是和罗凯同学第一次合作，从设计到开发完成只用了一周时间，据说他连续奋战35小时搞定大部分代码，佩服一个。合作起来很开心，很多细节的动画效果他都专门做了考虑，最终结果很让人wow！

Android

android版本是和V2EX上的帅青蛙同学一起合作的。老实说android系统是最棘手的一个，因为我只有M屏的Hero，帅青蛙是H屏N1，结果之前没有考虑到那么多问题，很多与iOS平台不一样的地方没有考虑到，所幸最后大家都耐心的将每个细节都调整了比较完善的地步。

所有的app都是免费的，可以根据需要下载哈～最后要感谢可爱的晓芸同学设计了精美的ICON，大家可以去她的博客去看看哦～《朴古》

iPhone |  iPad（审核中）  |  Android

和好友lightory 合作的站点 摆摆书架（bookfor.us）已经于光棍节顺利上线了。这应该是第一次完整的从头到尾的完成了一个web应用。这跟之前做媒体类的AnimeTaste.net所得到的经验大相径庭。

最初做这个项目的目的仅仅是因为我们两人都是爱看书的人，但是因为都是在外地，每次搬家都会很痛苦────不舍得扔，但是看着堆积如山的书还是很头痛。于是基于此才有了制作这个网站的想法。

总结一下这个过程中积累的经验：

1.概念一定要少。

之前每本书都有好几个状态，在手上的，我想借的，我捐赠的，我可以借出的等，我们两个在交流过程中就被这些概念弄得晕头转向，想必用户肯定也会觉得迷茫。经过了几轮讨论，决定先让用户走通捐赠和借入流程，这样后面再来添加其他状态的查询功能。

2.敏捷迭代

之前参与的项目大家虽然嘴上都是说敏捷迭代，但是实际上因为种种原因，始终没有达到敏捷二字。网站上线之后还是有太多没有考虑到的功能，以及其他想增加的功能，这都需要敏捷的去修改改正。比如刚开始设计在书库页面最醒目位置的是库存书，但是初期来看跟最新捐赠的书的模块内容完全重复，于是很快的修改成了随机推荐，后台统计的数据马上就有显著增加。从SVN上看，基本上摆摆每天都在进化中。

3.克制

想做的东西太多，能做的东西太少，能做好的事情只有一个。在上线之前我们两个之间，自己和自己之间都进行了无数的角力。在砍掉很多功能之后才保证了第一个轻量级别的版本上线。而上线之后从收到的反馈中，又看到了用户的各种需求。但是最终并没有着急立马去开发这些功能，因为在保证基础功能完善的情况下，我们还有其他的东西要做，而且用户的需求，并不见得就是真实的需求，比如很多人要开放货到付款，但是从统计上来看很多人在的地方并没有支持货到付款，那么开发这个功能的投入产出比就不划算了。

矛盾很多，关键的矛盾之有一个。

最后，如果你也对交换书籍很有兴趣，那么可以点这里申请内测帐号

原文：iPhone App Designs Reviewed: Critique Board and Lessons Learned

对这篇文章中介绍的Foobi和Units United的一些反馈很有感触：

Foobi

Foobi，这个APP设计的相当精美，作者也承认想“努力的超越Apple的UI设计，但是太累了。”

Foobi在itunes上是这样描述自己的：“监测和平衡你的饮食”。那么就有监测和平衡两大部分组成。Alex指出这个App“监测的功能做得很充分，但是如何查看自己是否在一个健康的状态这个功能很难找到。”

造成这个问题的原因有两个：信息被隐藏和信息设计不当。

上图是指摘要信息被隐藏。上面的文字虽然很清楚的告诉大家横过来就会进入图行模式，但是这么短的呈现时间和文字，会有多少人看清楚呢？（一般来讲新手引导这个东西大家都会跳过的。）

另一个问题就是信息设计不当。看上图恐怕很难明白这些颜色都是什么意思吧？而且放眼望去并没有找到什么帮助的按钮。

用户只能按照周来查看，并不能以更加直观的图表来查看自己的饮食习惯和结构等问题。

当然最搞笑的还是关于App logo的设计“当我下载这个App的时候我感觉已经下载了很长时间但是似乎还没有下载完，结果我发现其实已经下载好了，是那个图标下面的状态条和下载条长得太像了……”

关于信息的引导一直是App设计的一个大问题，因为屏幕实在是有限，很多设计师都会想尽办法来折叠压缩信息以求能得到更大的空间，但是很多人并非也具有如此的钻研精神。他们更多的是直观的操作，折叠信息对于他们来讲几乎就相当于了隐藏。而一些大众的操作习惯（比如头部是导航栏，底部是工具栏，标签栏）也不是能轻易被改变的。

还有一个不算恰当但是真实发生的事情，记得前不久有个朋友说他做了一个flash电子书的项目，也要做iphone的版本，我提醒他说iphone没有flash player，他说已经有了，然后丢给我一个链接。答案是已经有了，但是必须让机器越狱然后安装这个插件才行，当一个用户做到这一步的时候，他的阅读器恐怕也不是这种Geek用户的选择吧。

另外值得一提的就是新手引导这种东西无论是游戏还是软件看的人似乎都不多，用户都以为自己能顺利的操作软件毋须指导。所以不能太指望几秒钟的新手引导能让用户学会一套新的操作方法。这里面TapTapTap公司出的系列App做得相当不错：

1. 呈现时间长，第一次启动他们App的时候会出现这个引导，当用户未观看完之前不会消失。
2. 步骤明晰，只有四屏靠手指滑动，对于一个App的教程信息量足够而且操作方便。
3. 直观简单，没有复杂的交互引导，每个页面只解决一个问题，用图形来表示，简单易懂。

Units United

这是一个单位转换APP，正巧最近也做了一个汇率转换的App，先看看Alex如何评价这个App：如果昨天我运动了测得一共跑了456步，我想换算成米，那么我需要：

• 去到分类页面
• 选择想要转换的数据
• 选择原始数据的种类
• 在小键盘上输入456
• 确定你没将两项搞反…………

好吧，在这个320×480的屏幕上要经历这么多步骤，谁能保证不出错呢？而且你的问题很简单就是想问问456步等于多少米……看看Google是怎么做的：

最后Alex给出的语音识别的方法可能不太适合国内的用户，但是从这个App的例子能看到，工具性的App一定要简单操作。

想起之前设计的汇率转换，切换汇率的时候是点击国旗出来一个列表来切换，但是这样就会烦了Foobi的那个信息隐藏太深和Units United操作过于复杂的问题──认国旗虽然好玩，但是大家并不见得都能认出来，而且那个地方放不了太多字符来写清楚每个国家的名字。

其实刚开始改掉左侧的版本还觉得略有遗憾，现在看来，简单和直观操作才是第一要务，能极大的降低用户的使用门槛。

（部分图片引用自SmashingMagazine）

今天邮箱收到一封来自PlusPlus的注册确认邮件，到他们的网站上才意识到这个是一个iOS游戏的第三方社交系统。这个系统很方便的可以在游戏里面植入社交元素，而且也大大增加了游戏的可玩度，比如增加了Award系统等，social系统，也给游戏宣传增加了可能，因为在这个系统里面能看到所有内置Plus+的游戏列表。在Plus+的官网上也能看到每个游戏中达人的排名。

但是在国内恐怕很难成气候，或者只有腾讯做的才会有人理睬吧。毕竟大家都喜欢自己有一套自己的系统。

注册流程还是很值得学习的。

使用了浮动层，方便的适用各种游戏界面。右下角的步骤让用户知道距离目标还有多远。

注册条款，这么做太赞了，跳出了之前的那种大段文字 + 注册按钮的模式。而且充分利用了iOS的设计规则。

设置用户名和个人状态，以及头像。一旦设置，所有游戏通用的。

注册完了提示用户寻找自己的好友。那个按钮做得太诱人了。

亮点在第二个按钮。

个人页面的布局很赞，信息量不小，但是竟然有序。

官网：http://www.plusplus.com/

所以之前喜欢用位图来绘制元素的方法是行不通了。尽量使用形状工具配合图层样式来设计，这样能最大限度的减少工作量。

我比较喜欢从高清版开始设计，这样能保证不漏掉任何细节。设计的时候如果以iPhone4的尺寸来设计的时候，所有元素尽量能保持是2的倍数，所有边线的最小值是2px。这样缩图的时候不会导致边线模糊。另外如果是使用图层样式来制作的效果那么缩图后图层样式还需要手动调整数值。

(下图中，上面的那一条就没有考虑缩小后会出现0.5px这种模糊边线的问题。同样图案叠加的也没考虑缩小之后的问题。下面那一条就是修正过的。)

如果需要一些材质效果，尽量制作成可重复的图案；如果不能做成图案的，那么最好还是将大图直接转化为智能对象，为后面缩小做准备。

其实在没有看bjango.com的文章之前，总是会发现画出来的形状会有虚边，这时候手动调整很麻烦，其实只要勾选一个选项即可避免此问题。

http://bjango.com/articles/roundrect/ 这里有关于圆角问题更详细的讨论。

圆角部分如果从@2x模式缩小之后有白色锯齿，应该重新绘制该元素。

导出并没有特别好的方法，我使用的方法和bjango的方法一样，选择一个元素，然后将其栅格化，复制图形同时复制图层样式，然后新建一个文件，将元素和图层样式一起复制过去。

另外之前图标设计的时候，圆角不能直接丢给系统处理，还是需要将圆角部分效果给设计出来。下图是几个例子：

参考阅读：http://bjango.com/articles/designingforretina/

UINavigationBar：320×44   |  640×88 @2x

UISearchBar：320×44   |  640×88 @2x

UITabBar：320×49   |  640×98 @2x

UITableView Row : 320×44 | 640×88@2x

UITableView Header : 320×22  | 640×44@2x

UIPickerView：320×216 | 640×432 @2x

UISwitch：94×27 | 188×54 @2x

UIStatusBar : 320×20 | 640×40 @2x

UIButton on UINavigationBar

offset-top: 7 (14 @2x)
offset-left: 5 (10 @2x)

height: 30 (60 @2x)

设计的时候如果能遵循这些数值，那么会给后面Coding的同学提高很多速度。

一直没有专门总结过设计方面的经验，也没有好好给自己收集的资料做一个整理。

就在这里重新开始吧。