Producter：让产品从0到1

内容简介

这是一本以实际的成功 App 为例阐述如何完成一款 App 产品的设计、开发和营销的书。本书从产品的设计、产品的实现、产品的迭代、产品的营销、产品的进阶等几个角度，全面讲解了产品设计的基本原则、设计的重要性、设计的感觉、实用的设计工具、简单的 iOS 开发、产品营销理念和文案基础、动画效果的实现等内容。此外，本书以《小记》这款有代表性的 App 产品为例，完整还原了一款产品从想法到设计，到编码实现，到上架发布，再到营销的全过程。

本书对想学产品设计的工程师和想学产品开发的设计师，都是非常理想的读物，对学生也有很强的吸引力，是一本非常适合自学的参考书。

作者简介

周楷雯，趣拼科技（Catch Inc.）创始人，90后 CEO，一线 iOS 开发者，精通设计的全栈开发者及产品人。多款产品连续被 App Store 首页推荐。开源库 PNChart 作者，《小记》作者，Yep 天才社区创始人，《字里行间》创始人。

本书内容

推荐序

很早就读过《Producter》的电子书，当时我就推荐给了身边的很多产品经理和想要入行移动互联网的大学生。这是一本移动互联网产品的“教科书”，书里详细介绍了作者开发几款移动应用产品的全过程。从设计到产品营销，从用户体验到开发工具，无论是编程新手还是互联网产品经理，都可以通过这本书来学习如何设计一个 App，将自己脑中的创意和想法变成真实的手机应用，来和全世界的用户一起分享你的创意和成果。

两年前的一个下午，我去高榕资本的办公室和投资人聊天，岳斌（高榕资本合伙人）和我说高榕最近投了一个1992年出生的天才少年，自己一个人写代码、一个人搞定 UI 设计，同时又是产品人，我当场就下载体验了天才少年也就是本书作者周楷雯的社交产品“秒视”，发现“秒视”是一个设计精美且简约，交互友好且快捷，功能炫酷且易用的视频社交产品。于是我和楷雯就成为了好朋友，经常在“秒视”上互发短视频，我给别人讲移动产品设计的时候还经常打开“秒视”，将其作为优秀案例。

好的产品是科学、艺术与手艺的结合。每一个成功的产品都有其产品逻辑和商业逻辑的科学性，产品人要想做出好的产品，就必须研究清楚产品和相关行业的本质；好的产品又是艺术的抒发，比如“微信红包”把移动支付、社交网络和春节红包结合起来成为了前所未有的杰作，非常具有产品艺术的代表性；手艺则是通过不断锻炼而熟练掌握的技能，做互联网产品也是一个手艺活儿，不同机型的设计规范、专业技术的熟练应用、用户习惯的清晰感知等，都需要了然于胸才能做出好产品。

当下的中国是最好的时代，众人创业日新月异，产品创新层出不穷，每一位产品人都是了不起的艺术家，每一个好产品都推动了产业发展和文明进步。祝愿读者朋友们都可以做出好的产品，成为优秀的产品人，为中国和全世界输出价值和正能量。

楷雯是非常优秀的产品人，希望能够多一些像《Producter》这样优秀的互联网产品书籍，让互联网产品设计成为一个学科，让更多的产品人从中受益，让互联网和相关行业能够得到更好的发展。

产品改变世界！为《Producter》和楷雯点赞！

黄正世

多点科技董事长

前言

从什么时候开始，设计变成了我生命的一部分？

似乎开始于一个非常难以捕捉的时间；

或许是我第一次打开 Vimeo 的时候；

或许是第一次用镜头记录风景的时候；

或许是我第一次想要用情书感动一个女孩的时候。

记忆的丢失让人分外伤怀，但是与产品一起度过的每一刻，我都满怀着对美好的期待与感恩。

独立完成一款产品是很多人的梦想，也是我的梦想。但是，只是完成一个产品并没有什么价值，真正完成一款优秀的产品的难度远超过“完成”这个词语的含义。

设计的锤炼、编程技艺的精进、营销的思考让很多人在起步阶段就放弃了。

从来没有一本书去讲如何完整地“完成”产品设计这件事情。我觉得应该有一本！于是，断断续续地，经历了一年的时间，我终于在23岁生日前写完了这本书。

完成一件事情着实考验人的耐心，这本书初稿完成之后又经历了相当大的修订，这种改进和迭代与产品开发极为相似。正如许多创作一样，想要下笔如神是非常困难的，甚至很多经验丰富的产品设计者的作品的第一稿也不见得就能够做得比新人好。真正使作品脱颖而出的，是后期对作品的反复打磨与改进。

在本书修订的过程中，我常常会跟朋友说“写书就像绣花一样”。尤其是，最近几年荒废了写作，竟然遇到了很多语法问题（可能是英语文档看多了的缘故）。

非常感谢周奕飞（@austinchou0126）和朱宏旭（@nixzhu）在本书初稿排版和语法方面所做的修正。

这本书只是一个开始，和产品一起成长，做出越来越优秀的东西才是最大的快乐。

读者对象

本书主要涵盖了以下4个部分：

• 设计原理；
• 原型、动画效果、交互设计；
• iOS 开发；
• 营销。

书中以《小记》这一作品作为例子，完整地还原了一款产品从最初的想法到编码实现，再到上架，以及营销的全过程。

如果你什么都不懂，面对未来正充满困惑，那么这是一本很好的入门书籍；如果你只是略知一二，那么这本书也是很好的补全指引。

不过，由于产品的世界不存在“只要 A 必然发生 B”的真理，所以请带着怀疑的眼光去审视本书中的每条结论，学会如何思考才能淡定地面对这个变幻莫测的世界。

解疑

本书的电子书发布后会持续迭代更新，这也是电子书发行的好处。如果你对本书有任何意见或者建议，欢迎写电子邮件给我（kevinchou.c@gmail），或者直接关注 我的微博@周楷雯Kevin 与我交流。

视频资料

Lolita 作为首个视频资料，借助视频的优势，追加了设计和编程的实践部分，在读本书之前，读者可以先从视频看起。相关视频可以在 腾讯视频 上找到。

示例

本书中的所有示例代码均可从 GitHub 获得。

Producter 相关

Producter Tips 是由我和好友一起维护的一个分享设计、编程和产品的地方。你可以在那里发现一些实用的设计或者工程技巧。

第01章：Product/产品：设计驱动开发

• • • 关于设计的第一次
    • 为什么先做设计
    • 设计是什么
    • 设计创造了什么
    • 实践

关于设计的第一次

第一次总是很特殊的体验。对设计来说，第一次体验可能是尴尬的。有可能是在 Photoshop 里拖曳了几个难看的方框，也可能是在草稿纸上画了一堆歪扭得不成样子的曲线，反反复复，最后只能感叹一句——“算了吧，我果然没什么天赋！”

但是，设计并不是看起来那样坐在桌子前凭空臆想，然后动动鼠标就可以有所产出，也不是一项与在桌子前待多久有关系的活动。设计师往往要以年为单位，让自己沉浸在优秀的设计里，增强自己的设计嗅觉，掌握了大量的设计模式，才能够最终做出优秀的作品。

设计可以从模仿开始。

在我的记忆里，第一次做设计是在 Ubuntu 7.04 上用 GIMP 制作壁纸——模仿 Mac 的霞光壁纸，那是2007年的事。完成后自己非常开心，因为我的桌面第一次铺上了自己做的壁纸，而且我没有用 PS 这种“恶俗”的软件，没有在 Windows 和 OS X 这种“邪恶”轴心系统上，我内心洋溢着一种类似于“人类解放”的革命情怀。

为什么先做设计

很多人以为我是从编程开始的，其实设计在我的故事里是先于编程发生的事情。

不过，我真的尝试过先开始编程。大概是在2004年我小学六年级的时候，由于“初生牛犊不怕虎”，我进书店买了本 C# 的书，就准备回家编程了。但估计是“智商”的问题，我完全看不懂那些术语。大概就在第1章，只不过10页就开始讲命名空间（namespace）。我当时就蒙了，被这个陌生的名词搞得头脑发热，完全死机了！什么是命名空间，完全不能从字面上理解它的意思。我因此觉得自己很傻，怎么刚翻开这几页就看不懂了？最后感叹道：“天才如我，竟然看不懂编程书！编程真是高深！”

当时家里没有网络，处于一个完全单机的环境，完全靠《少年电脑世界》《中学生电脑》《电脑报》《电脑爱好者》这些杂志来积累计算机方面的知识。在我家乡的小县城，周围没有一个人从事这个行业，所以我以为每个学编程的人都是直接看这种书并且一次就能看明白且学会的，因此我遭受了巨大的挫败感。

那本书的前几十页差不多被我翻烂了，用红色水笔反复标注了我对每行代码的理解，但最后我还是没有弄懂，只能放弃了。

因此，在尝到了设计壁纸的甜头之后，我开始尝试做更多的设计，并且买了原研哉的《设计中的设计》。这本书中的“重视留白且简约的设计”对我的影响很深。

设计是什么

设计是一种和谐的感觉——因恰如其分而结合在一起的东西，功能与外观之间达成完美妥协。

我想设计必然是有个人风格的，这种风格会成为产品的灵魂，最终交付到用户手中，让他们去感知。但是，如何让这种个人风格和产品的功能相得益彰，是每位设计师在开始设计之前要最先思考的问题。

我非常喜欢“设计驱动开发”。先设计，后开发，然后回过头来，改进设计，精进程序。在这个过程中，自己和自己能快速地交流，快速地反馈，这种方式可以很好地激励自己，并且让自己很好地把握进度。但这样做也最容易产生自我妥协。人会犯懒，这是没办法的，因此需要不断激励才能把某些事情做得完美。

在开源社区有两个著名的设计驱动开发的例子，一个是 Elementary OS，另外一个是 GNOME。它们是出了名的“三年前画好图，三年后只能实现画图的一半”。

设计创造了什么

设计创造了体验，体验包括了很多方面：

• 界面，看起来怎么样；
• 交互，如何和产品提供的服务进行交互；
• 品牌，构建起了什么样子的文化和品牌认同；
• 心智，改变了用户对事务的认知。

界面和交互像一款产品的阳面，每个人都看得到，而品牌和心智则像产品的阴面，你看不到但感觉得到。因此，设计绝不是停留在最表面的看起来怎么样，每年都会流行起一些软件产品，也会有很多人去模仿这些成功的产品，但一款产品的成功，除了界面和交互，还有很多深层次的东西，产品只有完成了品牌和心智认知的构建之后，才算是建成了一款产品的护城河。

设计所造就的体验，才是一款产品最为核心的属性。

实践

不论方法是什么，实践才是能真正积累经验的活动，有经验值才能学会做产品。但是，实践同时也可能意味着另外一件事情——失败。

人总会逐渐避开不愉快的体验，对失败犹甚。无论是学习的失败、交友的失败，还是和女孩子交往的失败，都可能以一句“我果然还是不适合”为逃避这件事情的理由。

在你一个人独立完成一款作品的过程中，也会经历很多失败——第一次设计的丑陋、代码的漏洞百出、放出不成熟的产品导致的恶评等，这些都会让你受到沉重的打击。但是，从失败中反思得到的经验才是真正宝贵的财富。更何况，失败经历多了，总会成功的。

“毕竟对于生活本身来说，成功和失败并没有什么本质区别，重要的是参与到这个游戏中来。”——约瑟夫 · 休格曼

第02章：设计的感觉

• • • 从感觉开始
    • 清晰
      • iOS 中的天气 App
      • 《纸牌屋》
      • 谷歌眼镜
      • 《钢铁侠》
      • 小结
    • 整洁
      • 留白
      • 整洁的 App 设计
      • 元素的主次关系
      • 小结
    • 酷
      • 《Ingress》
      • 《Smash Hit》
      • 《纪念碑谷》
      • 《Clear》
      • 小结
    • 寻找灵感
      • Dribbble
      • Behance
      • Siiimple
      • Reeoo
      • Land Book
      • Call to idea
      • Designer News
      • 大脑的后台运作

从感觉开始

学习新东西的方法有很多，一直以来我们被教育的方式都是：从基础开始，积微成著，最终搭建起自己的知识体系。

这种方式最明显的好处是可以夯实自身基础，但弊端却是毁灭性的——枯燥乏味的过程及大脑中的知识无处可用的沮丧，时刻伴随着学习的每一天，最终会让我们失去兴趣，选择放弃。对于设计而言，尤其如此。

每一条设计准则都源于对人心理的研究。想要从事设计，就要懂得人们如何感知、学习、推理和记忆。但是，为什么我们要花费四五年的时间，从配色、结构、心理学入手呢？

谢天谢地，在计算机的世界里，我们完全可以反过来，抛开理论，先看一看有趣的设计是什么样子的，然后再讨论一下这些设计都遵循了什么样的设计理念，再利用这些感觉去尝试做自己的设计。毕竟，在一切开始之前，保护好转瞬即逝的兴趣才是最重要的。

但是，别高兴得太早！

不要忽略对基础理论的学习。当你的设计完成时，你会找出很多设计的缺点，并发现自己知识的短板。这时候再回去看那些枯燥无味的理论书，你就能体会到如沐甘霖的快感。

在开始学习之前，和你分享一句被许多有为人士说过的话：

如果想要取悦所有人，那么你不会取悦任何人。[1]

设计师的工作和艺术家有很多不同，注定不能像艺术家那样特立独行。设计并不是把个人品味强加于产品之中。伴随着对设计的理解的不断深入，“设计为谁而做”这个问题会成为每个设计开始时设计师要思考的第一个问题。

清晰

清晰（clarity）这种感觉，是利用人眼对边界信息感知差的特点，将次级消息放在了边缘。将这种感觉用于对现实场景的信息化中，就能在很大程度上减少信息和背景之间的相互干扰。

要达到这种效果，需要对信息放置的位置、背景色彩的过渡及现实场景有一个妥善的处理。

从 iOS 7 开始，苹果公司正式把这种感觉引入了系统设计：

• 简化（simplify）；
• 内容为主（maximize content）；
• 纵深（depth）。

iOS 中的天气 App

iOS 7 中的天气 App 是对这种感觉的最好阐释，如图2-1所示。雪天的背景占据了整个屏幕，没有了以往常见的界面边界，视界变得极为开阔。

图2-1

去除了边界，内容得以占据更多的空间，因此足以让用户聚焦于内容本身而不是界面。但是，此时并不是真的没有了边界，从视觉的角度来讲，此时的天气 App，中间的大字号气温就成了中心，其他区域都是边界。

人眼的边界视力比中心差得多，用户能轻易地分辨29，但第一眼却很难注意到下面的气温都是些什么。在这种情况下，把次级消息放在边界就成了更好的选择。

《纸牌屋》

在《纸牌屋》这部电视剧里，片头的设计也很有这种清晰的感觉，如图2-2所示。文字在屏幕的位置清晰自然，浑然一体。

图2-2

谷歌眼镜

谷歌眼镜（Google Glass）在文字下方加了个半透明的灰色背景，来让人很好地聚焦边界信息，如图2-3所示。

图2-3

《钢铁侠》

除了像 Google Glass 那种半透明的处理方法，如果信息块不高、区域统一，也可以用透明渐变来做这种底衬，如图2-4所示。这种处理可以从钢铁侠的图片中感受到。

图2-4

小结

• 简化界面元素的设计语言。
• 利用人眼的视力差别进行布局。
• 采用半透明或渐变增强可读性。

整洁

整洁（clean）延续了简化、内容为主的设计理念，是建立在合理性之上的美学协调。整洁作为一种极简主义，更能让高端用户喜欢。

少即是多。（Less is more.） ——Ludwig Mies van der Rohe

留白

一次偶然的机会，我在 Instagram 上关注了一个非常善于采用过曝（overexpose）做到整洁的感觉的女神——hx1125。

我非常喜欢她那些在白色背景上只摆着一两件东西的感觉（如图2-5至图2-8所示），这种满足感和多年前翻开原研哉先生的《设计中的设计》时极为相似。

这种设计如此慷慨地把画面让给了需要我们去注意的信息上。我想整洁这种设计感觉的灵魂也正是如此——少即是多。

图2-5

图2-6

图2-7

图2-8

在我刚开始学习做设计的时候，潜意识总会驱使我去填满整个画面，那种感觉就是“没塞满就是没设计过”。后来，随着做的设计越来越多，我开始更多地关注画面的比例、协调性，不再去想如何塞满整个画面，而开始去想怎么让画面再少一些元素，最好是选择一款合适的字体、一个合适的字号、一种合适的颜色，只有文字，那真是太美了。

大概在一年前，我设计过一个从未拿来用的名片，如图2-9所示。没使用的原因是，这个设计需要非常有质感的纸和非常精巧的印痕才能体现它的美感，但是我不知道到哪里去找这样的纸和工艺才能做到这种效果，只好一直将其封存在我的 Dropbox 里。没有手机号，没有二维码，没有地址，只有 Twitter 和 Email。没办法，我觉得这样最纯粹，这可能和我没有消失殆尽的不群之心有关。

图2-9

后来我尝试了一种竖版的名片设计（如图2-10所示），衬线字体的优雅和稳重似乎始终是我在文字排版中的挚爱。

图2-10

整洁的 App 设计

爱范儿（ifanr）有一款非常整洁的 App——数读，如图2-11所示。我对这款 App 一见钟情。后来，在我的一款 App CoinsMan 中，我也运用了这种设计方式，如图2-12所示。

图2-11

图2-12

这两款 App 都采用了强信息驱动的设计方式，数读中最重要的就是那个点睛的数字，在 CoinsMan 中最重要的就是当前的价格。把它们用最大字号放在中间无疑是最好的选择，其他一切信息都不要来抢这个关键信息的聚焦区间。

数读的中央数字下面的点睛文字用了远小于主体的字号，而 CoinsMan 在最高和最低这两个价格上，也是用了小字号，而我觉得还不够，我还降低了它们的不透明度，最后选定在60%左右。

元素的主次关系

在数读中，下面有一段灰色的文字，是全文的开头，点击这里并往上滑动可以看到全文信息，全文的文字颜色也会增强为黑色。在 CoinsMan 中，下面的5分钟交易量柱形图也是明显暗于价格波动5分线的，而所有元素都小于屏幕中间的数字。

这就是元素的主次关系，也是设计中非常重要的一点——永远不要让不同级的东西看起来一样。如果发生了这种永远不该出现的情况，那么这个界面看起来就是一场灾难。

小结

• 留白来帮助聚焦最重要的信息。
• 关键色的谨慎选择。
• 拥有唯一的主体。

酷

酷（cool）似乎是找不到“形容词”的时候的唯一选择。酷并不是简单地好看、有趣，而是一种准确的视觉体验。对于 App 自身而言，酷代表一种生命力，而纵深这种理念也始终贯穿着。

《Ingress》

《Ingress》 是 Google 公司在2012年上线的一款 LBS 多人游戏。当时我被这款游戏的玩法深深感动了，一向视“宅”如命的我都不顾夏日的炎热跑出去玩这个游戏。

《Ingress》这种虚拟现实的感觉会让人一下子被迷住，地图已经不是我们导航概念里那种呆板的形象，而是变成了一种要去拯救世界的场景，如图2-13所示。这种风格超出了你对任何一款LBS游戏的预期。地图中无处不在的粒子特效、光晕、极强的明暗对比，让其产生了杀马特般的冲击力。

即使不想出门，也会想去探索一下这款超酷的游戏软件，这就是“酷”激发了用户的好奇心。

图2-13

《Smash Hit》

前段时间 App Store 推荐的这款 《Smash Hit》 真算是“酷”的最佳实践了，如图2-14所示。它通过以下3点为你打造了一个可以释放压力的空间：

• 缥缈的虚拟感；
• 神秘朦胧的场景；
• 精致的物理特效。

图2-14

虚拟空间更容易让用户产生代入感，按照你的设定，寻着你的逻辑，变成一个“中二病”。

《纪念碑谷》

场景互动一直是游戏的命根，从早先《仙剑奇侠传》中的迷宫、《轩辕剑》中的机关术、《塞尔达传说》里人物与场景的物理互动，再到现在的场景破坏，场景的真实反馈给了用户无限的刺激，如图2-15所示。

图2-15

《纪念碑谷》中各个关卡的设定都非常有趣，总是用让你想象不到的方式将你带入下一个场景，巧妙地利用视差、矛盾空间去构建新的路径，达到了场景互动的极致。

《Clear》

将酷的特质应用到软件中，彰显“酷”这一设计感觉的典型 App 是 《Clear》，如图2-16所示。适当地加入“酷”这一元素构成，必然让 App 富有生机。

图2-16

小结

在前面3款游戏中，“酷”体现出了以下特质：

• 强烈的视觉风格；
• 新奇的氛围体验；
• 生动的交互反馈。

“酷”的特质如果应用到 Clear 这款软件中，那么就是：

• 新奇的交互效果；
• 让人惊喜的视觉反馈；
• 强烈的设计风格。

寻找灵感

对设计来说，与学习基本理论相比，积累大量的素材和设计思路更为重要。

“当你手里有个锤子的时候，你看什么都是钉子。”这句话说的正是方法单一的后果。学习了大量的设计语言并掌握了元素的组合方式之后，你手里就不再只有一把“锤子”。

融合生活中对于美好设计的体验，属于你自己的优秀设计便会自然诞生。

接下来，一起来看看获得设计灵感的好地方。

Dribbble

Dribbble 是在设计师中非常流行的一个分享设计的社区，每次打开这个社区网站都会有许多让人惊叹的设计，如图2-17所示。不过，惊叹之余，你也可以对这些设计进行更深入的思考——当这些设计应用到真实环境中时，是否真的能增强体验。

图2-17

Behance

Behance 社区更为专业。这个社区的作品完成度都相当高，覆盖的范围也相当广泛，如图2-18所示。该社区2012年年底已经被 Adobe 公司收购。

图2-18

Siiimple

Siiimple 是一个专门收集极简主义网站设计的网站，筛选的作品都很独特并且具有启发性，如图2-19所示。

图2-19

Reeoo

Reeoo 也是一个专门收集优秀网页设计网站，提供了详细的分类目录，从 App、艺术、动画到摄影、体育一应俱全，还可以根据颜色的主题筛选，非常好用，如图2-20所示。

图2-20

Land Book

LandBook 专门收集优秀的登录页面（landing page），品类齐全，值得时不时地去看一看，如图2-21所示。

图2-21

Call to idea

Call to idea 是一个以类别为线索收集各种设计的网站，它专业、精美，是激发灵感的好地方，如图2-22所示。

图2-22

把同类别的优秀设计通览一遍，你就能发现很多共通之处。

图2-23

Designer News

Designer News 是全世界最热闹的设计师资讯社区，新的设计想法、新的产品都会在这里讨论，如图2-24所示。

图2-24

大脑的后台运作

创造性的活动并不是单纯地将时间耗在上面就可以做出优秀的成果。大脑的运算不同于电脑，潜意识的部分是无法控制的，但它的速度却远远超乎你的想象。

在大量收集、学习了多样的设计之后，不妨离开书桌，出去跑跑步或游个泳，完全忘记工作的事情。这时候你的潜意识会在后台归纳组织你的素材，这些素材可能来自你半生的积累，数百万条记录在飞快地组织着，彻底放松回来后，最终的结果可能就是——“我是怎么想到这个点子的，我真是个天才。”

---

[1]　If you want to please everybody, you please nobody.

第03章：基础界面

• • • 标签栏
      • 标签栏的经典模式
      • 自定义标签栏
    • 侧滑菜单
      • VONU
      • Kuvva
      • Thunder Space
    • 滑块
      • KickStarter
      • Tinder
    • 瀑布流
      • 单列瀑布流
      • 多列瀑布流

结束了设计感觉的培养，我们现在开始了解一些基本的用户界面（UI）及其交互方式。

标签栏

标签栏（TabBar）是 iOS 上最经典的基础界面，导航结构都进行了扁平化处理，用户可以在主界面底部通过不同的功能标签（tab）来高效地选择自己需要的功能。

标签栏的经典模式

微信、Telegram 以及 iOS 自带的音乐 App 都采用了这种方式，通过多个标签在底部对功能进行了分割，使用不同的图标（icon）表示不同的功能，为了提高可读性，在图标下面用文字标注了这个图标的含义，如图3-1所示。

图3-1

自定义标签栏

很多 App 都采用了自定义标签栏的样式来展现 App，尽管是“新瓶装旧酒”，也还是有很多 App 把这种形式做出了新意。

Instagram 和 Flipboard 都隐去了图标下的文字，通过不同风格给标签栏加上了自己的品牌烙印，而 Artsy 更是只留下文字，从另一个角度打上了品牌烙印，如图3-2所示。

图3-2

到底是采用传统的标签栏让用户专注于功能，还是通过风格化加强 App 的品牌感，提供独特的体验，值得根据 App 的功能和特质好好思考一下。

侧滑菜单

侧滑菜单（slide menu）在 iOS 6 时代随 Path 和 Facebook 风靡一时，并被广为“滥用”。

但是，这种新颖的抽屉式菜单并不能保证用户体验的提升。交互步骤的增加使其效率低于标签栏，高频菜单的入口如果放在这里，用户使用起来会相当痛苦。

从下面几款 App 中可以看出对这种交互方式的使用的克制。

VONU

在 VONU 这款 App 里，用户往往只做一件事——选择一个照片，然后进行处理。由此可见，标签栏在这里并不适合，因此 VONU 使用了侧滑菜单对低频菜单进行收集，保持了界面的简约、整洁，同时又把 CAMERA 和 LIBRARY 这两个高频按钮放在主界面能很好地解决高频入口的问题，用户能够最直接地发现他们需要的功能，如图3-3所示。

图3-3

Kuvva

Kuvva 这款壁纸 App 也是如此，如果用户每天打开的主要目的是查看这周推荐的壁纸，那么其他低频菜单也可以隐藏起来，把更多空间留给壁纸，如图3-4所示。

图3-4

Thunder Space

侧滑菜单对于核心功能明确的 App 来说，非常友好。脱离了框架的约束，设计就可以更好地释放自己的想象力，正如这款 Thunder Space，如图3-5所示。

图3-5

越是功能简单的 App，留给设计师的想象空间越大。复杂性和美感往往处于一种不可调和的状态。

滑块

滑块（Slider）这种旋转木马式的轮播设计非常适合筛选行为很强的 App，留给了每个选项足够的信息展现时间，也可以强制用户在“Yes”或“No”之间进行选择。

KickStarter

KickStarter 作为一个众筹平台，给每个项目足够的时间展示非常重要，多停留一秒，就有多一分可能让用户去查看详情，如图3-6所示。这对最终的投资转化意义重大。

图3-6

Tinder

在 Tinder 中，滑块这种形式被运用到了极致，如图3-7所示。用户可以通过左右滑动卡片来表达是不是对对方“来电”，只有互相喜欢的用户才会配对。因此，每个用户都可以尽情表达，而不会产生挫败感。

图3-7

瀑布流

在 iOS 中，瀑布流（Waterfall）有单列与多列两种主要的信息收集方式，两者很适合对信息进行浏览。

是采用单列瀑布流还是采用多列瀑布流取决于信息的特性：文字信息为主的，采用单列瀑布流；图片为主的，可以尝试瀑布流多列瀑布流。

单列瀑布流

单列瀑布流适合逐条浏览。同样是单列瀑布流，Twitter、知乎日报、TeeVee 也展现了截然不同的设计,如图3-8所示。

Twitter 为了迎合用户的浅阅读习惯，近些年将更多内容直接放在了时间线上，用户基本上不需要任何交互，就可以在时间线上观看视频，查看 GIF，或者点赞、回复或转发。

图3-8

知乎日报与 Twitter 截然相反，打开这个 App 后，基本一屏就可以浏览完今天的内容，通过简洁的标题，用户可以快速定位到感兴趣的内容上。这种极轻的信息负担反而让用户形成了每天查看这个 App 的习惯。而这种模式也发展出了内容营销（content marketing）的模式，通过标题精准地把特定用户吸引到文章里，再通过精心策划的文章内容来做营销。

TeeVee 作为一款美剧时间表工具，它的目标是用户只需要打开这个 App 而不做任何操作就可以获得想要的信息并离开这个 App。与上面两款产品都不同，TeeVee 消费的并不是用户的时间，而是用户付费后真的为用户服务的产品。

这3款产品可以很好地解释为什么“免费的才是最贵的”。

多列瀑布流

多列瀑布流采用多个列来展示信息，可以极大地降低筛选成本，用户通过一瞥的方式浏览，颇有种“弱水三千只取一瓢饮”的感觉。

如图3-9所示，Pintrest 的时间线汇集了大量当天产生的热门，或者用户关注的内容，通过多列来提高筛选效率；Flipbard 的个人界面通过多列的方式汇集了用户自己的杂志，这种方式在这里不只是为了提高筛选效率，也是为了统一整个 App 的设计语言；Dribbble 的这个客户端和 Pintrest 的场景时一致的，提高筛选效率。

图3-9

为产品选择界面的时候，选择一个最容易上手、最容易被理解的界面是一件非常重要的事情。很多人会犯的错误是创造一个“与众不同”的界面，但很重要的一点是，这个产品是需要最终交付给用户使用的，与众不同的界面可能是最后一个需要考虑的因素。

第04章：设计工具

第05章：产品的起点

第06章：成为开发者

第07章：Swift

第08章：iOS App 是什么

第09章：自动布局

第10章：一个简单的 iOS App

第11章：iOS 基础动画

第12章：在“年”之外（上）

第12章：在“年”之外（下）

第13章：使用 Git 管理你的代码

第14章：“年”和“月”（上）

第14章：“年”和“月”（中）

第14章：“年”和“月”（下）

第15章：撰写（上）

第15章：撰写（下）

第16章：浏览“年”和“月”

第17章：浏览日记

第18章：编辑日记

第19章 ：优化

第20章：CocoaPods

第21章：Crashlystics

第22章：让交互更通用

第23章：产品特质

第24章：营销的方法

第25章：营销的细节

第26章：内测你的产品

第27章：Facebook 的动画库 POP（上）

第27章：Facebook 的动画库 POP（下）

第28章：贝塞尔曲线动画

第29章：贝塞尔 Waver 声波效果

第30章：帧序列动画

第31章：关键帧动画

后记

阅读全文: http://gitbook/gitchat/geekbook/5a389155c5896e6e1cf14d14