详情
这是一本以实际的成功App为例阐述如何完成一款App产品的设计、开发和营销的书。本书从产品的设计、产品的实现、产品的迭代、产品的营销、产品的进阶等几个角度，全面讲解了产品设计的基本原则、实用的设计工具、简单的iOS开发、产品营销理念和文案基础、动画效果的实现等内容。此外，本书以《小记》这款有代表性的App产品为例，完整还原了一款产品从想法到设计，到编码实现，到上架发布，再到营销的全过程。
书名：Producter：让产品从0到1
ISBN：978-7-115-43920-8
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 周楷雯
责任编辑 杨海玲
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
这是一本以实际的成功App 为例阐述如何完成一款App 产品的设计、开发和营销的书。本书从产品的设计、产品的实现、产品的迭代、产品的营销、产品的进阶等几个角度，全面讲解了产品设计的基本原则、设计的重要性、设计的感觉、实用的设计工具、简单的iOS 开发、产品营销理念和文案基础、动画效果的实现等内容。此外，本书以《小记》这款有代表性的App 产品为例，完整还原了一款产品从想法到设计，到编码实现，到上架发布，再到营销的全过程。
本书对想学产品设计的工程师和想学产品开发的设计师，都是非常理想的读物，对学生也有很强的吸引力，是一本非常适合自学的参考书。
独立完成一款产品是很多人的梦想，也是我的梦想。
但是，单单完成一个作品并没有什么价值，真正完成一款优秀的作品的难度远超过了 “完成” 这个词的字面含义。
设计上的锤炼，编程技艺的精进，营销的思考，让很多人都在起步阶段就放弃了。
从来没有一本书，去讲如何完整地完成这件事情。
我觉得应该有一本。
学习最实用的设计法则，在 Sketch 和 Framer 中进行原型设计
从感觉开始
设计驱动开发
如何激发灵感
设计 iOS App
三种最常用的设计语言
学习 Swift 和 iOS，掌握最实用的开发技巧与工具
基本的Swift知识
iOS动画
Facebook Pop
Motion Graphic
Git
掌握产品营销的方法，把产品推向市场
本质
产品定位
营销的方法
文案
“人们每天起床，做着同样的事情，他们告诉自己，有一天要为世界做一款产品，但他们从不付诸行动。这是一本可以让你行动起来的技术、设计和产品之书。如果用一句话评价书中的产品《小记》，我想是：绝世而独立。”
池建强，MacTalk 出品人，《MacTalk跨越边界》《MacTalk人生元编程》作者
“这是一本跨界的书，融合了设计、编程以及市场营销的知识。作为一个只会编程的码农，本书将我带进了设计和市场营销的世界，有一种误入桃花源、发现新大陆的感觉。”
唐巧，《iOS开发进阶》作者
“如果我只能通过一本书来帮自己走上设计道路的话，那么《Producter》是我唯一的选择。”
Onevcat，《Swifter》作者
“每个设计师都应该要懂得如何实现，不仅仅是为了把自己天马行空的想法变为现实，还为了让自己更正确地做出设计上的决策，以及提升与开发者之间的默契。”
Ray，Catch公司设计师
“在我理解设计师不仅是一个造梦者，更需要是一个创造者，从设计到开发，再到营销， 楷雯诠释了这一切！”
Ping，Weekr产品人
“热爱，方得始终。这是一本让你把热爱变为现实的最佳指南。”
王伟兴，爱范儿创始人
很早就读过《Producter》的电子书，当时我就推荐给了身边的很多产品经理和想要入行移动互联网的大学生。这是一本移动互联网产品的“教科书”，书里详细介绍了作者开发几款移动应用产品的全过程。从设计到产品营销，从用户体验到开发工具，无论是编程新手还是互联网产品经理，都可以通过这本书来学习如何设计一个App，将自己脑中的创意和想法变成真实的手机应用，来和全世界的用户一起分享你的创意和成果。
两年前的一个下午，我去高榕资本的办公室和投资人聊天，岳斌（高榕资本合伙人）和我说高榕最近投了一个1992年出生的天才少年，自己一个人写代码、一个人搞定UI设计，同时又是产品人，我当场就下载体验了天才少年也就是本书作者周楷雯的社交产品“秒视”，发现“秒视”是一个设计精美且简约，交互友好且快捷，功能炫酷且易用的视频社交产品。于是我和楷雯就成为了好朋友，经常在“秒视”上互发短视频，我给别人讲移动产品设计的时候还经常打开“秒视”，将其作为优秀案例。
好的产品是科学、艺术与手艺的结合。每一个成功的产品都有其产品逻辑和商业逻辑的科学性，产品人要想做出好的产品，就必须研究清楚产品和相关行业的本质；好的产品又是艺术的抒发，比如“微信红包”把移动支付、社交网络和春节红包结合起来成为了前所未有的杰作，非常具有产品艺术的代表性；手艺则是通过不断锻炼而熟练掌握的技能，做互联网产品也是一个手艺活儿，不同机型的设计规范、专业技术的熟练应用、用户习惯的清晰感知等，都需要了然于胸才能做出好产品。
当下的中国是最好的时代，众人创业日新月异，产品创新层出不穷，每一位产品人都是了不起的艺术家，每一个好产品都推动了产业发展和文明进步。祝愿读者朋友们都可以做出好的产品，成为优秀的产品人，为中国和全世界输出价值和正能量。
楷雯是非常优秀的产品人，希望能够多一些像《Producter》这样优秀的互联网产品书籍，让互联网产品设计成为一个学科，让更多的产品人从中受益，让互联网和相关行业能够得到更好的发展。
产品改变世界！为《Producter》和楷雯点赞！
黄正世
多点科技董事长
从什么时候开始，设计变成了我生命的一部分？
似乎开始于一个非常难以捕捉的时间；
或许是我第一次打开Vimeo的时候；
或许是第一次用镜头记录风景的时候；
或许是我第一次想要用情书感动一个女孩的时候。
记忆的丢失让人分外伤怀，但是与产品一起度过的每一刻，我都满怀着对美好的期待与感恩。
独立完成一款产品是很多人的梦想，也是我的梦想。但是，只是完成一个产品并没有什么价值，真正完成一款优秀的产品的难度远超过“完成”这个词语的含义。
设计的锤炼、编程技艺的精进、营销的思考让很多人在起步阶段就放弃了。
从来没有一本书去讲如何完整地“完成”产品设计这件事情。我觉得应该有一本！于是，断断续续地，经历了一年的时间，我终于在23岁生日前写完了这本书。
完成一件事情着实考验人的耐心，这本书初稿完成之后又经历了相当大的修订，这种改进和迭代与产品开发极为相似。正如许多创作一样，想要下笔如神是非常困难的，甚至很多经验丰富的产品设计者的作品的第一稿也不见得就能够做得比新人好。真正使作品脱颖而出的，是后期对作品的反复打磨与改进。
在本书修订的过程中，我常常会跟朋友说“写书就像绣花一样”。尤其是，最近几年荒废了写作，竟然遇到了很多语法问题（可能是英语文档看多了的缘故）。
非常感谢周奕飞（@austinchou0126）和朱宏旭（@nixzhu）在本书初稿排版和语法方面所做的修正。
这本书只是一个开始，和产品一起成长，做出越来越优秀的东西才是最大的快乐。
本书主要涵盖了以下4个部分：
设计原理；
原型、动画效果、交互设计；
iOS开发；
营销。
书中以《小记》这一作品作为例子，完整地还原了一款产品从最初的想法到编码实现，再到上架，以及营销的全过程。
如果你什么都不懂，面对未来正充满困惑，那么这是一本很好的入门书籍；如果你只是略知一二，那么这本书也是很好的补全指引。
不过，由于产品的世界不存在“只要A必然发生B”的真理，所以请带着怀疑的眼光去审视本书中的每条结论，学会如何思考才能淡定地面对这个变幻莫测的世界。
本书的电子书发布后会持续迭代更新，这也是电子书发行的好处。如果你对本书有任何意见或者建议，欢迎写电子邮件给我（kevinchou.c@gmail.com），或者直接关注我的微博@周楷雯Kevin（http://weibo.com/kevinzhow）与我交流。
Lolita作为首个视频资料，借助视频的优势，追加了设计和编程的实践部分，在读本书之前，读者可以先从视频看起。相关视频可以在腾讯视频上找到。
本书中的所有示例代码均可从GitHub（https://github.com/ProducterTips/producter-book-examples）获得。
Producter Tips是由我和好友一起维护的一个分享设计、编程和产品的地方。你可以在那里发现一些实用的设计或者工程技巧。
第一次总是很特殊的体验。对设计来说，第一次体验可能是尴尬的。有可能是在Photoshop里拖曳了几个难看的方框，也可能是在草稿纸上画了一堆歪扭得不成样子的曲线，反反复复，最后只能感叹一句——“算了吧，我果然没什么天赋！”
但是，设计并不是看起来那样坐在桌子前凭空臆想，然后动动鼠标就可以有所产出，也不是一项与在桌子前待多久有关系的活动。设计师往往要以年为单位，让自己沉浸在优秀的设计里，增强自己的设计嗅觉，掌握了大量的设计模式，才能够最终做出优秀的作品。
设计可以从模仿开始。
在我的记忆里，第一次做设计是在Ubuntu 7.04上用GIMP制作壁纸——模仿Mac的霞光壁纸，那是2007年的事。完成后自己非常开心，因为我的桌面第一次铺上了自己做的壁纸，而且我没有用PS这种“恶俗”的软件，没有在Windows和OS X这种“邪恶”轴心系统上，我内心洋溢着一种类似于“人类解放”的革命情怀。
很多人以为我是从编程开始的，其实设计在我的故事里是先于编程发生的事情。
不过，我真的尝试过先开始编程。大概是在2004年我小学六年级的时候，由于“初生牛犊不怕虎”，我进书店买了本C#的书，就准备回家编程了。但估计是“智商”的问题，我完全看不懂那些术语。大概就在第1章，只不过10页就开始讲命名空间（namespace）。我当时就蒙了，被这个陌生的名词搞得头脑发热，完全死机了！什么是命名空间，完全不能从字面上理解它的意思。我因此觉得自己很傻，怎么刚翻开这几页就看不懂了？最后感叹道：“天才如我，竟然看不懂编程书！编程真是高深！”
当时家里没有网络，处于一个完全单机的环境，完全靠《少年电脑世界》《中学生电脑》《电脑报》《电脑爱好者》这些杂志来积累计算机方面的知识。在我家乡的小县城，周围没有一个人从事这个行业，所以我以为每个学编程的人都是直接看这种书并且一次就能看明白且学会的，因此我遭受了巨大的挫败感。
那本书的前几十页差不多被我翻烂了，用红色水笔反复标注了我对每行代码的理解，但最后我还是没有弄懂，只能放弃了。
因此，在尝到了设计壁纸的甜头之后，我开始尝试做更多的设计，并且买了原研哉的《设计中的设计》。这本书中的“重视留白且简约的设计”对我的影响很深。
设计是一种和谐的感觉——因恰如其分而结合在一起的东西，功能与外观之间达成完美妥协。
我想设计必然是有个人风格的，这种风格会成为产品的灵魂，最终交付到用户手中，让他们去感知。但是，如何让这种个人风格和产品的功能相得益彰，是每位设计师在开始设计之前要最先思考的问题。
我非常喜欢“设计驱动开发”。先设计，后开发，然后回过头来，改进设计，精进程序。在这个过程中，自己和自己能快速地交流，快速地反馈，这种方式可以很好地激励自己，并且让自己很好地把握进度。但这样做也最容易产生自我妥协。人会犯懒，这是没办法的，因此需要不断激励才能把某些事情做得完美。
在开源社区有两个著名的设计驱动开发的例子，一个是Elementary OS，另外一个是GNOME。它们是出了名的“三年前画好图，三年后只能实现画图的一半”。
设计创造了体验，体验包括了很多方面：
界面和交互像一款产品的阳面，每个人都看得到，而品牌和心智则像产品的阴面，你看不到但感觉得到。因此，设计绝不是停留在最表面的看起来怎么样，每年都会流行起一些软件产品，也会有很多人去模仿这些成功的产品，但一款产品的成功，除了界面和交互，还有很多深层次的东西，产品只有完成了品牌和心智认知的构建之后，才算是建成了一款产品的护城河。
设计所造就的体验，才是一款产品最为核心的属性。
不论方法是什么，实践才是能真正积累经验的活动，有经验值才能学会做产品。但是，实践同时也可能意味着另外一件事情——失败。
人总会逐渐避开不愉快的体验，对失败犹甚。无论是学习的失败、交友的失败，还是和女孩子交往的失败，都可能以一句“我果然还是不适合”为逃避这件事情的理由。
在你一个人独立完成一款作品的过程中，也会经历很多失败——第一次设计的丑陋、代码的漏洞百出、放出不成熟的产品导致的恶评等，这些都会让你受到沉重的打击。但是，从失败中反思得到的经验才是真正宝贵的财富。更何况，失败经历多了，总会成功的。
“毕竟对于生活本身来说，成功和失败并没有什么本质区别，重要的是参与到这个游戏中来。”
——约瑟夫·休格曼
学习新东西的方法有很多，一直以来我们被教育的方式都是：从基础开始，积微成著，最终搭建起自己的知识体系。
这种方式最明显的好处是可以夯实自身基础，但弊端却是毁灭性的——枯燥乏味的过程及大脑中的知识无处可用的沮丧，时刻伴随着学习的每一天，最终会让我们失去兴趣，选择放弃。对于设计而言，尤其如此。
每一条设计准则都源于对人心理的研究。想要从事设计，就要懂得人们如何感知、学习、推理和记忆。但是，为什么我们要花费四五年的时间，从配色、结构、心理学入手呢？
谢天谢地，在计算机的世界里，我们完全可以反过来，抛开理论，先看一看有趣的设计是什么样子的，然后再讨论一下这些设计都遵循了什么样的设计理念，再利用这些感觉去尝试做自己的设计。毕竟，在一切开始之前，保护好转瞬即逝的兴趣才是最重要的。
但是，别高兴得太早！
不要忽略对基础理论的学习。当你的设计完成时，你会找出很多设计的缺点，并发现自己知识的短板。这时候再回去看那些枯燥无味的理论书，你就能体会到如沐甘霖的快感。
在开始学习之前，和你分享一句被许多有为人士说过的话：
如果想要取悦所有人，那么你不会取悦任何人。[1]
设计师的工作和艺术家有很多不同，注定不能像艺术家那样特立独行。设计并不是把个人品味强加于产品之中。伴随着对设计的理解的不断深入，“设计为谁而做”这个问题会成为每个设计开始时设计师要思考的第一个问题。
清晰（clarity）这种感觉，是利用人眼对边界信息感知差的特点，将次级消息放在了边缘。将这种感觉用于对现实场景的信息化中，就能在很大程度上减少信息和背景之间的相互干扰。
要达到这种效果，需要对信息放置的位置、背景色彩的过渡及现实场景有一个妥善的处理。
从iOS 7开始，苹果公司正式把这种感觉引入了系统设计：
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
爱范儿（ifanr）有一款非常整洁的App——数读，如图2-11所示。我对这款App一见钟情。后来，在我的一款App CoinsMan中，我也运用了这种设计方式，如图2-12所示。
图2-11
图2-12
这两款App都采用了强信息驱动的设计方式，数读中最重要的就是那个点睛的数字，在CoinsMan中最重要的就是当前的价格。把它们用最大字号放在中间无疑是最好的选择，其他一切信息都不要来抢这个关键信息的聚焦区间。
数读的中央数字下面的点睛文字用了远小于主体的字号，而CoinsMan在最高和最低这两个价格上，也是用了小字号，而我觉得还不够，我还降低了它们的不透明度，最后选定在60%左右。
在数读中，下面有一段灰色的文字，是全文的开头，点击这里并往上滑动可以看到全文信息，全文的文字颜色也会增强为黑色。在CoinsMan中，下面的5分钟交易量柱形图也是明显暗于价格波动5分线的，而所有元素都小于屏幕中间的数字。
这就是元素的主次关系，也是设计中非常重要的一点——永远不要让不同级的东西看起来一样。如果发生了这种永远不该出现的情况，那么这个界面看起来就是一场灾难。
酷（cool）似乎是找不到“形容词”的时候的唯一选择。酷并不是简单地好看、有趣，而是一种准确的视觉体验。对于App自身而言，酷代表一种生命力，而纵深这种理念也始终贯穿着。
《Ingress》是Google公司在2012年上线的一款LBS多人游戏。当时我被这款游戏的玩法深深感动了，一向视“宅”如命的我都不顾夏日的炎热跑出去玩这个游戏。
《Ingress》这种虚拟现实的感觉会让人一下子被迷住，地图已经不是我们导航概念里那种呆板的形象，而是变成了一种要去拯救世界的场景，如图2-13所示。这种风格超出了你对任何一款LBS游戏的预期。地图中无处不在的粒子特效、光晕、极强的明暗对比，让其产生了杀马特般的冲击力。
即使不想出门，也会想去探索一下这款超酷的游戏软件，这就是“酷”激发了用户的好奇心。
图2-13
前段时间App Store推荐的这款《Smash Hit》真算是“酷”的最佳实践了，如图2-14所示。它通过以下3点为你打造了一个可以释放压力的空间：
图2-14
虚拟空间更容易让用户产生代入感，按照你的设定，寻着你的逻辑，变成一个“中二病”。
场景互动一直是游戏的命根，从早先《仙剑奇侠传》中的迷宫、《轩辕剑》中的机关术、《塞尔达传说》里人物与场景的物理互动，再到现在的场景破坏，场景的真实反馈给了用户无限的刺激，如图2-15所示。
图2-15
《纪念碑谷》中各个关卡的设定都非常有趣，总是用让你想象不到的方式将你带入下一个场景，巧妙地利用视差、矛盾空间去构建新的路径，达到了场景互动的极致。
将酷的特质应用到软件中，彰显“酷”这一设计感觉的典型App是《Clear》，如图2-16所示。适当地加入“酷”这一元素构成，必然让App富有生机。
图2-16
在前面3款游戏中，“酷”体现出了以下特质：
“酷”的特质如果应用到Clear这款软件中，那么就是：
对设计来说，与学习基本理论相比，积累大量的素材和设计思路更为重要。
“当你手里有个锤子的时候，你看什么都是钉子。”这句话说的正是方法单一的后果。学习了大量的设计语言并掌握了元素的组合方式之后，你手里就不再只有一把“锤子”。
融合生活中对于美好设计的体验，属于你自己的优秀设计便会自然诞生。
接下来，一起来看看获得设计灵感的好地方。
Dribbble是在设计师中非常流行的一个分享设计的社区，每次打开这个社区网站都会有许多让人惊叹的设计，如图2-17所示。不过，惊叹之余，你也可以对这些设计进行更深入的思考——当这些设计应用到真实环境中时，是否真的能增强体验。
图2-17
Behance社区更为专业。这个社区的作品完成度都相当高，覆盖的范围也相当广泛，如图2-18所示。该社区2012年年底已经被Adobe公司收购。
图2-18
Siiimple是一个专门收集极简主义网站设计的网站，筛选的作品都很独特并且具有启发性，如图2-19所示。
图2-19
Reeoo也是一个专门收集优秀网页设计网站，提供了详细的分类目录，从App、艺术、动画到摄影、体育一应俱全，还可以根据颜色的主题筛选，非常好用，如图2-20所示。
图2-20
LandBook专门收集优秀的登录页面（landing page），品类齐全，值得时不时地去看一看，如图2-21所示。
图2-21
Call to idea是一个以类别为线索收集各种设计的网站，它专业、精美，是激发灵感的好地方，如图2-22所示。
图2-22
把同类别的优秀设计通览一遍，你就能发现很多共通之处。
图2-23
Designer News是全世界最热闹的设计师资讯社区，新的设计想法、新的产品都会在这里讨论，如图2-24所示。
图2-24
创造性的活动并不是单纯地将时间耗在上面就可以做出优秀的成果。大脑的运算不同于电脑，潜意识的部分是无法控制的，但它的速度却远远超乎你的想象。
在大量收集、学习了多样的设计之后，不妨离开书桌，出去跑跑步或游个泳，完全忘记工作的事情。这时候你的潜意识会在后台归纳组织你的素材，这些素材可能来自你半生的积累，数百万条记录在飞快地组织着，彻底放松回来后，最终的结果可能就是——“我是怎么想到这个点子的，我真是个天才。”
[1] If you want to please everybody, you please nobody.
