Tweetbot是Twitter最著名的iOS客户端之一，虽然是收费应用，但却有百万级的下载量和大量的簇拥者。Tweetbot的制作团队Tapbots是一家设计很有独特的机械风格，并靠其设计风格挣钱的公司。大家应该记得在我翻译的《触动人心》一书中，Josh也多次提到了Tapbots公司的产品：Weightbot、Convertbot、Pastebot，全部一致秉承了Tapbots公司的设计风格，尤其是Convertbot，当时能在转制工具满天飞的情况下，能突出重围，标新立异。

2011年初，Tapbots推出了Tweetbot，风靡至今，长盛不衰。在今年2月，Tapbots又推出了Tweetbot 2.0，让我们来看看这款经典的App的设计。

导航结构

我们知道，iPhone应用的主导航结构一般常见分为四种：

1. 平铺导航。比如“天气”应用，使用分页控件（小点），让用户左右滑动来查看不同的页面。
2. 标签栏（Tabbar）导航。比如我们常用的“App Store”应用，下方是五个标签，供用户点击切换页面场景。Tweetbot就是此类。
3. 列表式导航。比如“设置”应用，打开后是一个列表让你选择，以便Drill down。
4. 九宫格导航。比如Facebook上一版和大众点评都是此类。打开后是类似iPhone主屏那样排列多个图标，每个图标代表一项功能。
5. 层叠式导航。从iPad上Twitter应用开始，设计优秀的应用慢慢开始尝试这种创新性的导航设计。大家最近看到的Path 2就是有类似此类的设计：从左侧可以拉出一个列表式导航，右边可以拉出朋友列表。比起其他的导航结构，这种导航结构更加接近真实的物理感。这种导航结构是最近几年随着iPhone的真实物理感的设计理念才开始流行起来的。

其他还有一些新颖的导航结构也都大多雷同。今年我们就不展开讲诉每种导航的优缺点了，改日再议吧。

很多应用的首页，都会结合多钟主导航结构，来完成导航功能。比如Path 2，首页实际上是列表式导航+层叠式导航的设计方式。（这种方式最近也用烂了，CocoaChina上都有源码了。）

再来看Tweetbot的首页，实际上是以标签栏为主的导航结构。（当然还包含了列表式导航。）大家知道，Tweetbot当时一举成名的其中一项创新设计，就是他的标签栏中，最后两个标签是可以自定义的。相比苹果标签栏多标签的自定义功能来讲，Tweetbot的设计显得巧妙许多。（苹果官方的标签栏只能放置5个标签。在标签多于5个的时候，会自动将最后一个标签变为“更多”，然后将剩下显示不完的标签项全部塞到“更多”里。如果你需要访问其他的标签，你需要点击到“更多”里，然后再选择相应标签。当然，苹果也提供了自定义标签功能，不过大多数用户都不知晓有这样的功能——点击到“更多”里，然后再点击右上角小小的“编辑”按钮，然后再进行拖拽操作。你可以打开你的手机里的iTunes，看看苹果是怎么做的。）

Tweetbot的标签栏最大突出的亮点就是最后两个标签长按会弹出自定义的标签项。这种方式即保留了传统标签栏的样式和交互方式，又巧妙地解决了标准标签栏功能不容易被发现，自定义不方便的问题。

值得另外一提的是Tweetbot的账户管理导航方式非常有意思，即结合了iPad上Popover控件的优势，又使用后退箭头，让用户再账户和设置页面进行详细管理。

消息系统

Tweetbot将消息分为模态和非模态两种消息方式。

非模态消息，即消息弹出后，用户还可以继续操作，无需去手动点击关闭。适合一般性的提醒，反馈。

上图可以看到，左边是成功提示，右边是错误提示。所有非模态提示消息从标题栏下方弹出。包括图标、标题、消息内容三个元素。

模态消息，即消息弹出后，会中断用户当前操作，让用户必须先完成消息确认才可以继续操作。一般用于严重错误或需要用户确认知道的重要通知。

点击反馈设计

Tweetbot几乎所有的点击都有反馈，包含了视觉反馈和声音反馈。

按钮点击

上图是普通按钮的正常（凸起）和按下（下凹）状态。

对于优秀的iPhone应用来说，每个可点击的目标都应该有按下状态的反馈设计。iPhone应用的设计理念就是真实的物理反馈。我们每天都说iPhone用户体验好用户体验好，但是为什么用户体验好，很多人只说得出“用得爽”。其实，iPhone上市时，和以往的手持设备在交互上最大的不同点就是采用了触摸，并且将所有的反馈设计，都尽量参照真实的物理世界中的反馈。例如列表滚动到底部会反弹，例如使用滑动开关而不是勾选框，例如页面翻转到背面的效果等等。所以在iOS乃至现代触屏应用的设计中，都要尽力去参考真实世界中的物理反馈。这就是为什么现在优秀的iOS应用中，常有皮质、纸质等纹理设计。

图标点击

对于按钮，我们大都知道要使用“凹下去”或“变色”来进行反馈。（当然，首选“凹下去”。因为按钮下凹是真实世界中的反馈。）但是有的时候，点击目标是个图标，Tweetbot是如何表现点击反馈的呢？

如上图，我们看到，Tweetbot，同时也是iPhone内置的应用，通常会使用这种外发光的方式来表示图标的点击反馈。就像是生活中的一个高科技产品上的一个平面按钮，按下就会发光。

动画

xCode中有着许多代码和设计工具能够帮助开发者们在iOS设备上实现流畅的动画。流畅的动画可以让用户跟随视线。而且同样在现实生活中，我们看到的物体都是动画呈现的，瞬移只出现在科幻电影里。

模态消息滑出界面

一头栽下，很有掉落的感觉。亮点！

发推时添加图片

点击图片后，Camera Roll向下滑出屏幕，然后选择的图片从右侧滑入，并替换“添加图片”按钮。

总结

Tweetbot是款设计优秀的应用。尤其在导航结构、反馈、动画和声音上有许多亮点。本文只对其中一二做了些阐述。推荐大家可以自己用用，会有不少发现。

女性消费分享类社区这段时间如火如荼。而在移动互联网方面，有两大潮流，第一个是女性用户的手持设备大量转向iPhone和Android，碎片时间开始被移动设备应用所占据，第二个是手机购物开始兴起，支付宝这几年的移动交易额成倍增长。这两大潮流使得女性消费分享类社区不断移动化。本人在地铁上观察女性移动用户使用手机的情况，除了游戏和微博，剩下大多数都在手机上逛女性消费分享类社区。

目前国内女性消费分享类社区手机应用做得比较好的有美丽说和蘑菇街两家。我注意到美丽说的iOS客户端推出比较早，蘑菇街也是紧随其后。两款应用这段时间的产品设计有了长足的进步，在App Store上，社交类排名都在20名之内，蘑菇街甚至一度冲到了社交类第4名。这几天网上两家因客户端的问题吵得很热闹（这里和这里），我也来凑个热闹，单从产品和体验的角度拿这两款应用做个对比，从中相信各位能在真实案例的解析中学到一些。 我虽和蘑菇街的创始人曾一同共事过一段时间，但无论表扬、批评都应本着专业的角度，对事不对人嘛，呵呵。

 vs 

产品结构

蘑菇街和美丽说都各有五个标签，功能也基本类似：

首页

 vs 
蘑菇街的“首页”（左）提供了大Banner横幅，横幅下面给出了不同的分类以便用户选择看衣服、鞋子、包包、饰品或是其他分类。

而美丽说的“首页”（右）却大相径庭，列出的是类似新浪微博的时间线展示。

相比之下，我们可以看出，蘑菇街的想法更倾向于媒体，输出内容。美丽说的思路更倾向于社区，用户自己关注的用户中获得信息。

事实上，消费分享社区的本质更是媒体而不是社区。蘑菇街的浏览方式能给用户尤其是新用户最快获得更多精选内容。也许是美丽说也了解到这个缺点，所以它：

• 让新用户默认关注某些用户。
• 在首页的左上角加入了“封面”按钮，点进去是和蘑菇街首页同样的设计。

可惜这个“封面”页面有点鸡肋：

1. 上面的占据半个屏幕的四个Banner全都是商业目标导向。并不符合用户目标。而蘑菇街相应的Banner是编辑精选的期刊，供用户阅读观看。
2. 这个页面的导航位置相当尴尬。“封面”和“首页”首页有什么差别？为什么应用打开是“首页”不是“封面”？为什么“封面”在标题栏上表现是属于“首页”标签，而点击进去后，标签栏却全部选中？

逛街/热门

 vs 

蘑菇街的“逛街”和美丽说的“热门”一样，都是用类似Pinterest的图片墙列表方式，将最热、最新的图展示出来。但美丽说多了一条广告条，建议这里可以不用再多此一举。

我的/我

 vs 

“我（的）”中相当于个人空间，如图，里面集成了和个人账户有关所有信息和设置项。美丽说在这里放上了个人头像的大图，这样个人空间更有“个人”的感觉。而蘑菇街的入口排布更加合理，更多使用标准或类标准的iPhone控件，各位可以很容易发现，蘑菇街的方式很容易让用户找到入口，具有更强的可读性和可用性。而美丽说此处强调自己发过的分享是不符合用户使用场景的。想想用户来个人中心，想来看自己发的分享，这种情况能有多少？

喜欢（蘑菇街）

“我的喜欢”类似收藏夹，里面列出了所有收藏的物件。这个功能点如果用户场景不确定的话，可以建议不用。大多数用户应该是在手机上进行收藏，后续能够在网站上购买。

拍照

 vs 

“拍照”即发表新分享的途径。

大家看到左边是蘑菇街的界面，使用和Twitter、新浪微博等应用熟悉的界面。下半部分很巧妙地将键盘区域暂时替换成拍照和相册选择选项。右边是美丽说的界面，美丽说更倾向于每页完成一件事，各有千秋，可是页面上文案太多！试想，谁会看这一堆有五种不同字体大小的文案，更别说在公车、地铁上了。而且最后“Let’s Go”的引导很奇怪啊，用户到这个界面，为何又让她们马上去点“一起拍”呢？

拍照后的页面，两个应用差别也很大：

 vs 

蘑菇街（左）保持了原有界面不变，让用户可选照片分类并立即输入文字；美丽说（右）进入了照片美化界面。虽然美丽说提供了当下时髦的照片美化功能，但翻看了一下美丽说用户上传的图片，绝大多数用户没有使用应用提供的美化功能。也就是说，美丽说的美化流程对大多数用户来说是无用的，却被硬生生地放入了发表分享的流程中，这无疑会降低发表分享的体验。其实每款应用都像是瑞士军刀里的一个工具，用户用完就会关闭，没有必要把自己的应用设计成无所不能的航空母舰，否则到头来可能每一项功能都无法和其他专业应用比拼，而且界面却还更加复杂。

一起拍（美丽说）

一起拍是美丽说特有的功能。致力于打造一个主题拍照社区。这种做法很可取，有的时候用户并不知道她想要什么，或可以做什么。通过这样的产品功能，可以引导用户开始进行有主题的拍照，最后对拍照产生可预期的良性反馈，最后激活用户贡献内容。

交互细节

我们知道，交互设计细节很重要，良好的细节能给用户带来WOW的感觉。一款应用导航设计得好，信息设计得合理，可以称为好应用。但是优秀的应用一定在交互的细节上有所突破。这里再补充提一下两款应用交互细节上做得有好有坏的地方。

蘑菇街点击标签栏标签

蘑菇街点击标签栏标签按钮的时候有一个水波抖动的动画，相当可爱。由于截图不方便，还请喜欢学习应用设计的同学可以亲自体验看看。

点击进入详情页的页面切换动画

 vs 

两个应用进入详情页的方式有所不同，蘑菇街详情页是由右向左滑入，美丽说的详情页是由下至上滑入。

一般来说，iPhone应用的习惯，Drill-down的页面切换（也就是由父级进入子级页面）使用由右向左滑入的方式（也就是蘑菇街使用的方式）。比如内置的“设置”应用，点击了任何一个分类，分类设置页面会从右侧滑入，比如“联系人”应用也是如此。

而美丽说使用的由下向上滑入一般用于马上完成后就退出的模态页面。比如“邮件”应用中，你选择了一封邮件需要移动，会从下滑出邮箱选择页面。并且，在由下滑出的页面中，标题栏上的离开按钮是不会使用箭头的，文案一般使用“完成”、“取消”、“保存”等矩形按钮。

我们可以知道，这个场景下，滑入的页面应当属于Drill-down。所以该处使用蘑菇街所使用的从右滑入才是较为准确的切换动画。

消息提醒

我们知道，在应用设计过程中，应该尽量减少弹窗的使用。一般只有紧急情况或必须让用户做决策的情况才使用弹窗。蘑菇街在这点控制的比较好。而美丽说应用在多处都会弹窗。比如在拍照分享界面：

这样会打断用户撰写分享的过程。另外，美丽说过多地方充斥着Badge（标记）和推送，在已浏览为主的应用中，过多Badge会影响正常的浏览体验。

新手引导

新手引导很重要！而且，更重要的是它很难设计。我们是自己的产品设计者，每天无限多次使用我们自己设计的产品。而各位注意“您不是您的用户”，用户在使用我们产品的时候，使用方式可能和我们的预期大相径庭。所以新手引导很重要。另外，正是由于我们自己太了解我们自己的用户，所以我们很难能理解新手用户到底需要知道什么，已经知道什么。引导做得少了，用户不会用，不理解，引导多了，用户嫌烦。当然——终极目标是你的设计不需要任何引导，用户就会使用。

不过在还没成为大师之前，新手引导的原则就是给关键任务带上引导。非关键任务就不必多费口舌，待用户成长的时候，她自然会慢慢发现。

我们来看看美丽说的用户引导：

视觉设计

蘑菇街应用设计的色彩比较丰富。界面主要使用绿色和粉色，相互搭配，突出重点。而美丽说只使用了粉色，于是在很多界面上，重点无法突出。

蘑菇街

美丽说

总结

两款应用功能上有些雷同，但对“抄袭”一词，我认为：同类型、同客户群、同样目的的产品，互相不可能没有了解，所以A的产品出现B的元素，B的产品出现A的交互方式，都很正常，真正有价值的是用户的体验，用户关心的是谁能帮她更好地打发时间、获取信息。

三人行必有我师。各位审视别人的应用容易，但实践起来也自有纰漏。很多人经常给我说他看了多少多少款的应用，说什么应用都说“哦！我看过！”，但让其说出个所以然，往往哑言。希望各位看官在看各大应用的过程中，要认真揣摩每一处细节，认真思考，才能提高自己的设计水平。

应邀参加上海iPhone/iPad开发者沙龙主题演讲《设计优秀的iOS触屏应用》

时间：7月24日

地址：上海智创天地-创业之家IPO CLUB

http://t.cn/alfAO3

欢迎各位新老朋友莅临指导检查~