详情
本书结合案例介绍了产品经理需要用到的各种产品设计方法和思路，帮助读者将从本书所学到的知识灵活地运用到自己的工作中。本书主要内容包括产品原型设计过程中输入、反馈、输出等类型控件的使用方法，产品原型的设计方法，通用的产品功能设计方法，通用的产品逻辑，基础系统产品的设计思路，通用的产品体系，通用的产品设计方法，通用的产品设计原则， 通用的产品管理方法。
本书不仅适合产品经理阅读，还适合运营人员、设计人员阅读。
书名：产品经理方法论——通用的产品设计
ISBN：978-7-115-59479-2
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 赵丹阳
责任编辑 谢晓芳
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
读者服务：
微信扫码关注【异步社区】微信公众号，回复“e59479”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。
本书结合案例介绍了产品经理需要用到的各种产品设计方法和思路，帮助读者将从本书所学到的知识灵活地运用到自己的工作中。本书主要内容包括产品原型设计过程中输入、反馈、输出等类型控件的使用方法，产品原型的设计方法，通用的产品功能设计方法，通用的产品逻辑，基础系统产品的设计思路，通用的产品体系，通用的产品设计方法，通用的产品设计原则，通用的产品管理方法。
本书不仅适合产品经理阅读，还适合运营人员、设计人员阅读。
虽然“产品经理”这个概念最早是由宝洁公司提出的，但是产品经理承担的职责任何行业都需要，且在各行各业的分工协作中早已存在。无论是传统的制造行业、建筑行业、零售行业，还是新兴的软件行业和互联网行业等，都遵循一个从“构思”到“成品”的实现过程。首先从商业上论证有效性，然后从形态上设计样式，明确具体的规格，由生产人员按照样式和规格进行生产、验收、整改，并最终上市销售。
产品经理这个角色在其中起着连接两端的作用，即连接了市场/用户端和制造/生产端。在这个过程中，产品经理承担着把市场/用户的需求转换成生产者能理解的内容，并推动产品生产和最终上市的责任。
产品经理的认知升级方式可以是从制造/生产端逐步向市场/用户端靠近，也可以是从市场/用户端逐步向制造/生产端靠近。
制造/生产端考验产品经理如何高效地连接生产要素，如人的要素（程序员、工程师、建筑师、流水线工人等），物的要素（资金、原材料、设备等）。
市场/用户端从小的层面考验产品经理对用户的认知，即是否能够从用户的语言表达和自我理解中挖掘出用户深层次的本质需求，从而分清楚用户的“想要”和“需要”（很多时候，用户想要的只是他能想到的结果，而并非背后真实的需求）；从大的层面考验产品经理如何分析市场、行业和商业，从而帮助产品找准市场定位，抓住行业趋势，实现商业的可持续增长。
而大部分初级产品经理是从生产端的理解开始的，先学习如何高效地连接生产要素，如如何画原型，如何写需求，如何做评审，如何管项目等；然后慢慢地理解用户，理解市场，理解行业，理解商业，最终成为产品专家。这是每一个产品经理必须经历的过程。当然，有的人始终停留在需求分析和产品设计阶段，成为一个合格的功能产品经理；也有的人早就开始关注行业和商业，朝着商业产品经理的方向而努力。
从产品工具的使用到产品可视化框架设计，再到具体的业务系统的设计和业务模式的设计，从设计方法到业务讲解，本书基本覆盖了一个产品经理的认知全过程，可以帮助读者了解并掌握通用的产品设计方法，是一本很适合初中级产品经理拿来就用的工具书。
本书的特色主要体现在通用的产品逻辑、基础系统产品的设计方法和通用的产品体系的讲解上。市面上有很多关于产品经理的工具书，它们只讲述如何画原型，如何写需求，但是很多初级产品经理慢慢成长之后，开始负责一个大的功能模块的实现，这时他们会发现学到的知识完全不够用。我刚接触这些模块时，从界面上根本无法理解背后的产品/业务逻辑，要到处查阅资料，这不仅耗费大量时间，还不能建立通用的知识体系。而本书罗列了常见的产品功能模块或者业务模式，结合案例介绍业务背景、核心功能要素甚至架构设计，让读者能够快速理解，并应用到实际的产品工作中。
本书的优势在于通用性强、覆盖面广，建议读者利用书中的设计方法规范自己的输出，基于本书介绍的业务系统了解主流业务系统的设计逻辑，从技能成长到认知赋能，全面提升自己的产品设计能力。
感谢丹阳在本书中提供了大量产品设计方法，这些设计方法让我的思路更加开阔。
吴晓伦
Aglaia 品牌创始人
我当初决定转行成为一名产品经理，主要是受“产品经理是CEO的学前班”这句话的影响。之所以会被这句话触动，是因为产品经理需要具备足够的能力，大到商业战略确定，小到原型设计，通过不断提升综合能力，才有可能像CEO那么优秀，向外找到商业目标，向内制定组织战略，而我本人也想成为这样的人。
怀着可以训练和培养诸多能力的初心，“纵身一跃”，我从一名程序员转行成一名产品经理，但是转岗后才慢慢发现，成为一名合格且优秀的产品经理真的太难了。最初听到的“人人都是产品经理”这句话现在看来更像是一个美好的笑话。美好的部分在于，人人都可以对用户的需求与产品的设计提出自己的理解和想法。可笑的部分在于，大多数人的理解和想法并不代表用户的真实需求，也不代表产品设计的有效性。其中，真实和有效的差距就是普通人与专业产品经理的差距。
产品知识体系丰富且庞大，作为一名刚接触产品经理的技术人员，我只能无奈地陷入茫茫的知识和经验碎片中，试图从中构建一个完整的知识体系拼图，但又不甘于低效率地从零开始。迷茫之中，我看到了本书作者的第一本书《产品经理方法论——构建完整的产品知识体系》，我大为惊喜，这就是我想要的知识图谱，按照目录一点一点学习，就能形成自己的产品知识体系。
本人经常以读者的身份向作者请教问题，时间久了，彼此熟悉起来，也因此有幸提前看到作者的第二本书，也就是这本书的初稿，同时以第一本书读者的身份收到了作者的邀请，为本书写推荐序。
当作者发给我书稿后，我瞬间就被书中的内容迷住了，如果把产品知识的学习和成长比喻为建造一栋大厦，则第一本书帮助我构建了产品知识大厦的地基和框架，而本书则帮我在地基和框架完整的基础上添砖加瓦。
市面上有很多介绍产品知识、技能的书，但能够像作者的两本书一样，介绍实际产品工作中完整的知识体系和通用的设计方法，可以即学即用的书并不多。就像“武林秘籍”一样，第一本书传授内功与心法，告诉你知识体系与方法论，第二本书传授外功和实战能力，手把手教你如何实操。本书不仅可以作为产品经理的成长指南，还可以作为日常产品工作中的工具书。
在读前4章时，我发现习以为常的原型控件竟然被作者一一做了总结，包括每个控件的组成部分及使用场景，并通过大量图片和示例帮助读者理解。这有助于读者真正做到知其然，知其所以然。反观以前的自己，仅仅认为会用即可，而没有深挖其究竟，真是自愧不如。
第5章与第6章分别讲解了通用的产品功能设计方法及通用的产品逻辑，这些知识对于多数产品是通用的，可以直接拿来作为参考，帮助我们更好地梳理产品设计思路。
第7章结合常见的CRM系统、OA系统、工单系统、客服系统等，总结了基础系统产品的设计思路。作者把系统产品的功能组成抽象为基础架构，再基于基础架构讲解整体的产品设计思路，从抽象理论到具象实践，深入讲解，帮助读者理解系统级产品的设计方法，提高工作效率。
读完本书，最大的感受是作者就像一位手把手教学生的老师，不仅将自己的实战经验毫无保留地传授给我们，还介绍了产品经理如何进阶。在此希望读者梳理作者给出的知识体系，在此基础上复用和思考，不断总结和完善，形成自己的产品知识体系。读者也可以通过本书的内容，学习作者的工作方法和习惯以及思维方式，真正做到知其然，知其所以然。感谢每一名像作者一样用心且愿意分享的前辈，让我们能有机会站在巨人的肩膀上继续前行。
田栋伟
北京咖啡易融科技有限公司高级产品经理
在构思本书知识结构的过程中，我试图站在产品经理（作者）的角度去思考用户（读者），需要什么样的产品（知识/内容）。要想搞清楚这个问题，首先要明确“用户需求”，即明确一名处在成长过程中的产品经理的知识需求是什么。但仅仅从“知识需求”这个角度去思考，我发现整个产品知识体系庞大而繁杂，不同行业在不同的阶段对知识的诉求各不相同，很难得出有效结论。
如果思考的问题没有头绪，难以分析、判断并得出结论，我试着从底层思考，再往表层进一步思考，这也是我思考问题常用的方法之一。
往后退一步，回归到产品经理获取知识的底层心理诉求。一方面，建立在实用主义的基础上，满足职业生涯过程中的知识获取和能力提升需求；另一方面，缓解职业生涯产品工作过程中知识匮乏和能力欠缺所带来的焦虑。
往前进一步，回归到常用的需求分析方法，在“产品经理的知识需求”的基础上，加上“普适”和“高频”两个限制维度，它的范围开始缩小，轮廓也逐渐清晰，即这个知识体系应该是所有产品经理都需要的，也是产品工作中经常用到的。
最后，结合以上“退一步思考问题本质，进一步让问题具象”的思考过程和结果，我认为本书的核心主题已经很明确，即能满足以上两种特征的一定是“产品设计”这部分知识体系。产品经理职业生涯中的大多数时间在进行产品设计，符合“普适”和“高频”特征。如果不会设计，设计不好，评审不通过，用户不满意，则产品经理会产生强烈的不胜任感，从而带来职业焦虑感。
这样的“焦虑感”经常出现在产品经理想要设计某个功能但又不知道使用什么控件时，原型设计不被需求评审人员认可时，要设计一个新功能但又不知道如何设计时，为一个业务设计一个系统级别的产品但又没有这个系统的具体设计思路时，进入新行业，接触新产品以及新的体系、逻辑、管理方法而感到知识匮乏时。
再看一看产品经理职业生涯过程中经常会面对的一些场景。
● 你之前一直从事移动端APP类产品的设计工作，移动端APP类产品典型的特征是注重独立用户体验闭环，即注重用户体验和交互设计，而管理后台类产品，却常涉及把复杂的业务逻辑转换成有效的产品功能，即注重业务抽象和流程设计。如果公司组织架构调整后，需要你负责一个业务模块的CRM系统的设计，你是否会因为以前从未接触过，因为知识匮乏而产生短暂的不胜任感，从而产生焦虑感？
● 你之前一直从事教育CRM系统的产品设计，职业生涯想更进一步，某家电商企业有个很好的职位，现在你突然要从教育行业转换到电商行业，你是否能在面试中把CRM系统的公共部分讲清楚？是否能对电商系统中的商品、订单、库存、会员、营销、履约、支付等功能模块提出深刻的见解？面试通过后是否能快速地适应新工作？
● 当你努力向上朝着产品主管的职业目标前进时，除管理能力之外，很大一个门槛就是需要具备多元化的产品能力。多元化的产品能力需要具备三个基础条件——完善的知识体系、详细的底层逻辑与丰富的实战案例和经验，想想自己还差多少呢。
与职业“焦虑感”相对的是“掌控感”。而所谓的掌控感，就是当你具备多元化产品能力的3个基本条件后，会发现无论是哪种产品（电商产品、金融产品、前端产品、管理后台产品等）的设计都是基于基础控件、原型、功能、系统、体系、逻辑等，像“搭积木”一样模块化拼接而成的。“掌控感”也称作学习过程中，构建知识体系的“模块化思维”。
而本书旨在让读者能够拥有这样的“模块化思维”能力，掌握通用的产品设计模块，增强职业生涯过程中的“掌控感”。
事实上，这个结论后来也在和众多同行业产品经理的调研与交流过程中得到了验证。所以，本书的核心内容将围绕“产品设计知识体系”展开。
在我的第一本书《产品经理方法论——构建完整的知识体系》出版后，我开始投入本书的写作当中。第一本书介绍了产品知识体系的基础概念和整体框架，整个知识体系适用于各种产品类型、行业、公司，以及业务，读者可以了解到产品经理整个知识体系的内容、工具、方法、思维，以及认知。
本书是我的第二本书，是对第一本书中知识体系的延续和落地，聚焦于产品设计，其中包含通用控件、通用原型、通用功能、通用系统、通用体系、通用逻辑、通用方法、通用原则等产品设计知识。之所以强调“通用”，是因为这些产品设计知识同样适用于各种行业、公司，以及业务。
例如，所有产品的“文本输入框”控件的设计方法是相同的，所有产品的“原型设计”方法是相同的，所有产品的“登录/注册”功能的设计思路是相同的，所有行业、公司、业务的“CRM系统”的设计思路是相同的，所有产品的“账户体系”的设计思路是相同的，所有产品的“分销逻辑”的设计思路是相同的，所有产品的“灰度发布”的方法是相同的，所有产品要遵守的“设计原则”是相同的，所有产品需要进行管理的“方法”也是相同的。
而这些“通用”和“相同”对产品经理职业生涯过程中所需的产品设计知识进行了高度而全面的抽象和总结，希望本书不仅能帮助读者完善自己的产品设计知识体系，还可以帮他们通过学习和阅读减少“焦虑”。
本书的内容安排如下。
第1~3章主要介绍基础控件，包括信息输入控件、信息反馈控件、信息输出控件的设计方法和在产品设计过程中的使用场景。
第4章介绍产品原型设计方法，让读者能够学习到如何又好又快地完成原型设计，取得效率和质量的平衡。
第5章主要介绍通用的产品功能设计方法。例如，几乎所有存在账户概念的产品都需要用到“登录/注册”功能。这些通用的产品功能设计方法可以帮助产品经理快速理解和设计陌生功能。
第6章主要介绍通用的产品逻辑，例如，对账逻辑。虽然公司不同，业务不同，产品不同，但是如果它们都需要对账，那么它们的对账逻辑一定是相同的。这些通用的逻辑可以帮助产品经理丰富自己的知识库，从容面对新的公司、新的业务、新的产品。
第7章主要介绍基础系统产品的设计思路。以CRM系统为例，医疗行业的CRM系统和金融行业以及教育行业的页面信息可能不同，功能也会不同，字段名称甚至完全没有关系，但是它们的底层设计思路是一致的。这样的“一致性”可以帮助产品经理建立起整个系统设计的底层架构，明确系统范围，更好地带着这些设计思路，在不同的职业阶段和不同的公司中进行复用。
第8章主要介绍通用的产品体系。以“会员/积分”体系为例，该章讨论这些体系的产品设计思路，只要有会员和积分的产品，它们的设计思路就是一致的。这一章可以帮助产品经理建立完整的产品设计“工具箱”，在需要时，做到开箱即用。
第9章主要介绍通用的产品设计方法。其中包括常见的互联网产品形态、产品设计过程中的注意事项、发布产品灰度的方法、A/B测试方法，以及产品经理在产品上线前、上线后应该做哪些工作等。
第10章主要介绍通用的产品设计原则。这些原则都是经过大量产品和大量用户验证且有效的原则。该章可以帮助产品经理在产品设计过程中建立设计规范。
第11章主要介绍通用的产品管理方法，包括用户管理、需求管理、设计管理，以及商业模式管理。该章可以帮助产品经理建立基本的管理方法论，为以后职业生涯朝着管理方向的进阶打下基础。
希望本书能帮助读者建立一个完整又通用的产品设计知识体系框架，尽早地培养并获得通用的产品设计能力。同时，希望读者在学习和职业进阶的过程中，尽量学习通用产品知识，并善于对学到的知识进行抽象，让其具备普适性、复用性，以及可迁移性。这样的知识才是含金量高的知识，这样的学习方法才是好的学习方法。
产品经理的知识体系是一个庞大的知识体系，一本书不足以完全讲解清楚，需要读者在此基础上不断完善，建立自己的产品经理方法论。产品之路是一条需要不断学习才能走下去的路，愿与大家砥砺前行。读者在阅读本书时，要带着批判和质疑的态度，在自有的知识、经验和认知与书中内容发生碰撞的过程中，获得思考和收获。产品知识体系丰富且庞大，书中难免有疏漏之处，还望广大读者不吝指正。
赵丹阳
首先，感谢我的家人一直以来对我的支持和鼓励，让我有条件、有信心做自己想做的事情，让我无论是在工作还是在生活中，遇到再大的困难和挫折，都能从容地面对。
其次，写书是一件费时又费力的工作。一方面，要在宏大的知识体系中归纳出一个完整的内容结构，需要不断地学习、研究，谨慎地求证，这个过程中，要感谢行业前辈的帮助与指导。另一方面，要进行多次的修改和校对，不断地让一本书的内容结构、行文逻辑，以及语言描述趋于完美，这个过程要感谢人民邮电出版社的各位编辑。
最后，要感谢在工作中帮助过我的领导、同事和朋友，在梳理整个产品经理知识体系的过程中，他们分享了很多方法、观点及个人经验，在很大程度上帮助我丰富了本书的内容，完善了本书的内容结构。
本书由异步社区出品，社区（https://www.epubit.com）为你提供后续服务。
您还可以扫码右侧二维码， 关注【异步社区】微信公众号，回复“e59479”直接获取,同时可以获得异步社区15天VIP会员卡，近千本电子书免费畅读。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎你将发现的问题反馈给我们，帮助我们提升图书的质量。
当你发现错误时，请登录异步社区，按书名搜索，进入本书页面，单击“提交勘误”，输入勘误信息，单击“提交”按钮即可（见下图）。本书的作者和编辑会对你提交的勘误进行审核，确认并接受后，你将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。
我们的联系邮箱是contact@epubit.com.cn。
如果你对本书有任何疑问或建议，请发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。
如果你有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区投稿（直接访问www.epubit.com/contribute即可）。
如果你所在学校、培训机构或企业想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。
如果你在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请你将怀疑有侵权行为的链接通过邮件发送给我们。你的这一举动是对作者权益的保护，也是我们持续为你提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT（信息技术）图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、人工智能、测试、前端、网络技术等。
异步社区
微信服务号
文本框（text field）是产品原型设计过程中最常用的原型控件之一，主要适用于用户与产品进行交互时，需要用户进行信息输入的场景。图1-1展示了整个文本框控件的基本要素。
图1-1 文本框
完成一个规范的文本框控件设计，要明确的要素包括文本框标签（label）、占位符文本（placeholder text）、输入框（input box）、帮助文本（help text）、初始默认值（default value）、输入文本（input text）、跟踪图标（trailing icon）、格式化标记（formatting tag）。本节将详细介绍这些要素。
文本框标签主要用于向用户介绍该文本框用来输入什么信息，主要分为文字标签和引导图标两种类型。图1-2（a）与（b）分别展示了以“用户名”和“密码”为例的文字标签和引导图标。在产品设计过程中，在保证用户明确输入信息的前提下，是否使用标签、使用哪种（一种或者两种）标签可自由选择。
图1-2 文字标签和引导图标
文本框标签的位置很灵活，它可以在本文框的上方、左侧、内部，同时还可以设置为左对齐、右对齐或顶部对齐等。图1-3（a）~（f）分别展示了文本框标签顶部左对齐、顶部右对齐、外部左对齐、外部右对齐、内部左对齐和内部右对齐的效果。
图1-3 文本框标签的效果
从图1-3中可以看出，在有顶部、外部、内部3种标签的文本框中，对于顶部标签，用户眼球移动的效率最高。这种样式节省水平空间，但是会占用更多的垂直空间，不适合用于表单过多、空间不足的页面。如果表单信息不多，优先考虑顶部样式；如果较多，则考虑使用外部样式或内部样式。
标签的外部对齐样式或内部对齐样式可以兼顾眼球移动效率和垂直空间的有效利用，但当标签较长时，会占用更多的水平空间，它们适用于表单多、不需要专业理解能力的横向页面。
在对齐方式中，人们对左对齐标签的阅读效率是较高的，因为现代人的阅读习惯是从左至右阅读。采用左对齐方式，在不同样式标签的视觉跳转过程中能比较清晰地展示阅读的起点，帮助读者理解标签信息。
右对齐标签的好处是在视觉的终点，很好地保证了标签的整齐程度，使页面看起来更简洁。在常见的产品设计案例中，大多数文本框标签采用的是右对齐方式。至于在原型设计过程中最终选择哪种对齐方式，我们可以根据实际的表单信息和样式综合考虑。
占位符文本指用户未在文本框中输入信息时，预先占据文本框内位置，用来描述该文本框中信息输入规则的文本。占位符文本的颜色不太明显（一般会降低文本框标签字体颜色的透明度来作为占位符文本的字体颜色）。如图1-4所示，在“公司名称”文本框中，占位符文本为“请输入公司名称”，用来提示用户这里需要输入的是公司名称。
图1-4 占位符文本
当用户输入内容时，占位符文本会消失，同时被输入的文本内容代替。占位符文本和文本框标签的相同之处在于，都起到信息提示和说明的作用；不同之处在于，文本框标签不会随着输入状态的变化而消失。
占位符文本和文本框标签同样是文本框控件的基本要素之一。在设计产品时，占位符文本不能轻易省去。某些情况下，只使用占位符文本而不需要任何文本框标签，这主要用于一些很简单的界面（文本框较少且用户对输入内容非常熟悉的场景）。
输入框是文本框控件的核心要素，承载着用户输入信息的功能。常见的输入框主要分为3种类型，分别是输入线框、填充输入框与线性输入框，如图1-5（a）~（c）所示。
图1-5 常见的输入框类型
3种输入框类型本质上没有任何区别，在产品设计过程中，结合整体的界面布局的美观程度，选择合适的一种即可。值得注意的是，一旦选择了某种类型的输入框，就要保证全局相似页面都使用同种类型的输入框。这也是产品设计一致性原则的体现。
帮助文本是靠近输入框的一行带有提示功能的文字，如图1-6所示。其具体位置可以自由设计。当输入框标签和占位符文本都不足以说明输入框中的内容或当用户正在输入的内容违反了规则而需要被提示时（例如，当用户在“手机号码”输入框中输入字母时，帮助文本可以提示用户只能输入数字），我们可以使用帮助文本。帮助文本可以一直存在，也可以只出现在“正在输入”或“完成输入”状态。
图1-6 帮助文本示例
帮助文本内容不应设计过长，不应换行，颜色不能亮过输入文本（警告信息除外）。其次，帮助文本要具备及时性，不要等用户输入完页面所有字段、单击“提交”按钮时才出现，尽量在单击到输入框外（处于失焦状态），或按Enter键、空格键时就及时出现。
初始默认值的位置和字体颜色都和占位符文本的相同，如图1-7所示。不同之处在于，占位符的作用是，以防用户不明确输入信息，对用户进行提示和引导；而初始默认值假定用户已经很熟悉要输入的信息，默认显示一名用户最可能输入的值，如果用户本次输入的值依然是上次输入的值，则可以直接进入下一步，无须重复输入。
图1-7 初始默认值示例
常见的是“账号”字段的初始默认值。用户登录QQ并退出后，下次登录时默认显示的是用户上次登录的QQ号，如果用户本人登录，只需要输入密码就可以正常登录；如果其他人登录，则可以更改默认的QQ号并登录。
输入本文的位置和占位符文本所在的位置相同，如图1-8所示。不同之处在于，占位符文本是系统默认的，而输入文本是用户主动输入的。在颜色方面，输入文本和文本框标签相同，但比占位符文本要显著。
图1-8 输入文本样式
根据输入内容的样式和多少，输入文本主要分为单行文本和多行文本两种类型，如图1-9所示。其中，单行文本的宽度和高度保持不变，而多行文本的宽度不变，根据实际内容，决定高度是否设计成自适应文本内容。一般文本输入框都有文本长短限制，例如，50字以内。
图1-9 常见输入文本类型
输入文本限制主要分为以下两类。
● 输入文本的内容限制。常见的内容限制主要有纯数字（如手机号码）、纯字母（如英文名）、纯汉字（如中文名），以及各种类型的排列组合或违禁内容的输入限制。如果用户输入限制的内容，我们可以按无法输入的逻辑处理，也可以在用户输入时，使用帮助文本提示用户输入的内容不合法。
● 输入文本的长度限制。每一个输入文本都要有一个输入长度的极限值，例如，要求手机号码只能有11位，身份证号码只能有18位，文本描述不能超过50个汉字等，这些都是关于输入文本的长度限制。
无论是单行文本，还是多行文本，在产品设计中，都要考虑到输入文本的限制逻辑。
有时候文本长度已经超过了输入框的长度，出现了溢出的情况。这时一般会有以下3种文本处理逻辑。
● 截断：只保留最大长度的文本，超过最大长度的溢出部分截断。
● 换行：对溢出文本输入框长度的部分做换行处理，溢出的内容继续在第二段显示。
● 省略：将溢出部分的内容换成省略号，表示输入信息省略。
通常在文本输入的过程中，会出现一系列的功能性图标，来帮助用户完成输入，这类图标称为跟踪图标。常用的追踪图标包括有效性图标、密码安全性图标、出错图标、清除图标、语音输入图标、下拉图标等。图1-10展示了输入密码的过程中用来帮助用户核对密码信息的跟踪图标。
图1-10 追踪图标示例
有的输入文本带有特定格式，它们有的作为分组字符位于输入文本中间，如电话号码的连字符、金额的分位符、银行卡号和身份证号码的分字符；有的带有后缀，如邮箱的@域名、中文货币单位；有的带有前缀，如美元符号；还有一种保密文本框，在输密码时使密码不可见，用黑点代替。
如图1-11所示，当用户输入手机号码时，手机号码被自动用分隔符隔开，可以让用户快速校验输入的手机号码是否正确，银行卡、邮箱等字段都可以按照字段属性带有格式化标记。
图1-11 格式化标记
单选按钮（radio button）、复选框（check box）与文本框一样，适用于用户与产品进行交互时，需要用户输入信息的场景。它们之间的区别在于，单选按钮和复选框提供给用户的主要是已分类的信息，用户只需选择输入即可。
单选按钮是一种单项选择命令。它只允许用户在一组选项中选择其中一个。单选按钮的外观一般是一个空白的圆圈，当被选中时，则白色圆圈会被圆点填充。而在它的旁边通常会有一个文字标签，用于描述选项内容。
复选框是一种多项选择指令。复选框允许用户在一组选项中同时选择多个选项。复选框通常使用方框加对号表示。图1-12展示了单选按钮和复选框。
图1-12 单选按钮和复选框
单选按钮一般适用于单项选择的用户输入场景，各选项之间是“或”的关系，若选择了A就不能选择B。在图1-12中，要求用户选择一个职业信息，一般情况下，大多数用户只有一个职业，这样的场景比较适合使用单选按钮。而当想知道用户喜欢什么水果时，更适合使用复选框，因为一般用户会喜欢两种以上的水果。
无论是单选按钮还是复选框，都需要有主题标签和选项标签，主题标签用于描述对什么进行选择，而选项标签用于描述可以选择什么。图1-11中的“从事职业”就是一个主题标签，而“教师”是其中的一个选项标签。
在某些场景下，我们需要对“选项标签”进行辅助说明，从而添加一些辅助描述文字，类似于文本框控件中的帮助文本，目的也是让用户更好地理解控件内容，如图1-13所示。
在交互层面，单选按钮比较简单，仅要明确选中状态和未选中状态，以及当用户单击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态的基本逻辑，没有其他交互逻辑。而复选框需要在产品需求文档（Product Requirement Document，PRD）中描述清楚是否支持全选，如果支持全选，是否需要新增全选按钮的快捷方式；如果不支持全选，则要说明最多可以选择几项。
图1-13 辅助描述文字
在输入类控件中，滑动开关主要起到控制产品某个功能开启或关闭的作用。图1-14展示了一个滑动开关的经典控件样式，控制的是产品“夜间模式”功能的开启和关闭。
图1-14 “夜间模式”开启/关闭按钮样式
在设计滑动开关时，要明确开关控制的功能、开关的样式、开关的前置状态、交互动作，以及后置状态等设计要素。以iOS设备中“飞行模式”的开启和关闭功能设计为例，图1-15展示了实际设计滑动开关过程中需要注意的细节。
运用滑动开关控件来承载一个功能完整的开关逻辑。首先，要明确这个控件控制什么功能，图1-15中滑动开关所承载的功能是“飞行模式”的开启和关闭。其次，要明确开关控件的前置状态，例如，如果“飞行模式”这个功能默认是关闭的，那么“飞行模式”滑动开关控件的前置状态就是关闭状态，这个状态下其他模块的状态都属于前置状态的范畴。例如，“飞行模式”关闭时无线局域网显示的是“未连接”，而开启时显示的是“关闭”两者，都属于飞行模式开关的前置状态。
图1-15 iOS设备中“飞行模式”的开启/关闭功能
接下来，要明确滑动开关的交互动作。图1-15中“飞行模式”滑动开关的交互动作是“单击”。通过单击，切换开启和关闭状态。其他常见的交互动作还有“滑动”“双击”“长按”等。
最后，要明确交互动作所产生的后置状态。对比图1-15中滑动开关关闭和开启前后的信息可以看出，“飞行模式”开启后，除开关按钮的变化之外，“无线局域网”信息和“蜂窝网络”信息都有变化，而变化后的状态就属于滑动开关的后置状态范畴。
关于滑动开关的一些其他注意事项如下。
● 滑动开关是一种功能控件，其样式不仅局限于文字加图标类型的开关，还有纯图标样式，以及仿真开关样式等。所以，在进行产品设计时不要局限于固定的滑动开关样式，只要符合基本的设计要素，能承载一项功能的开启和关闭，就属于有效的设计。
● 对于开关的前置状态和后置状态，在滑动开关附近添加辅助说明文字，让用户知道此时的状态承载什么功能，以及相反的状态承载什么功能。
● 滑动开关开启和关闭状态切换的过程中，也就是发生切换时，界面也可以给出明确的切换提示。例如，如果一个滑动开关承载的是某个重要的功能，不能随意开启或者关闭，则需要进行有效的弹窗提示，让用户知晓开启或关闭后的结果，再进行操作。
分页器控件主要应用在数据表单下方，用来承载翻页及表单页数据显示控制功能，如图1-16所示。
图1-16 分页器控件样式
一个完整的分页器控件首先需要具备页面跳转功能，我们可以通过鼠标实现翻页，以及跳转到指定页。其次，分页器要能控制一页中显示的条目数量，例如，设置20条/页、50条/页、100条/页多重选项供用户选择。最后，要添加上总页数及总数据量的辅助信息描述。
选择器控件的功能类似于单选按钮和复选框控件的功能，主要适用于用户与产品进行交互时，选择目标信息项并输入的场景。常见的选择器有单项分类选择器、多项分类选择器、搜索选择器和时间选择器等。
单项分类选择器是产品设计过程中频次出现最高的一类选择器，通常以下拉列表框的形式出现，如图1-17所示。其特点是选项以下拉列表的形式展开，选择其中一项作为信息输入指令。
图1-17 单项分类选择器控件
单项选择器经常与列表页一起使用，用于筛选出列表页的数据内容。例如，有一个显示某年级学生成绩的列表页，这个年级有3个班级，默认显示全部班级学生的成绩，如果我们只查看一班的成绩，在下拉列表框中选择一班，然后进行筛选，就可以得到一班学生成绩的列表了。另外，在表单页中，我们也可以经常看到下拉列表框，例如，我们维护一名学生的基本信息，该学生的性别信息就可以通过下拉列表框来选择。
在实际的产品设计过程中，还有单项多级分类选择器，例如，我们在电商网站购物时经常会见到的商品选择器就是单项多级分类选择器的一种，如图1-18所示。
图1-18 单项多级分类选择器控件示例
对于单项多级分类选择器，要一级一级地往下筛选，最终选择目标信息。例如，在常见的地区选择器中，首先要选择省，然后选择市，再选择区/县。
单项多级分类选择器和多项分类选择器的主要区别在于，对于后者可以选择多项。例如，在电商网站进行商品检索时，我们可以同时选择多个品类的商品并进行搜索。多项分类选择器控件如图1-19所示，在选择单肩包的同时，我们还可以选择手提包等。
图1-19 多项分类选择器控件
搜索分类选择器在单项/多项分类选择器的基础上，增加了搜索功能。在某些场景中，选择项的信息量过大，导致手动筛选效率非常低下。搜索功能可以有效地提高选择效率。如图1-20所示，我们可以通过中文或者拼音搜索目标城市选项。
图1-20 搜索分类选择器控件
时间选择器是一种特殊的选择器。其特殊之处在于，它所选择的信息类型只有时间，虽然信息类型单一，但它的使用频率不亚于单项分类选择器。图1-21展示了一个经典的移动端日期选择器控件的样式。
图1-21 时间选择器控件的样式
用户可以滑动选择年、月、日、时、分、秒等信息，至于是精确到日还是秒，根据实际的场景需要，在产品原型或者PRD中详细说明即可。
作为信息输入控件的一种，计步器起到和文本输入框相同的作用。不同之处在于，计步器常用来进行数字信息的输入，用于增加或者减少当前数值，可根据需要调整数字范围和每次增加的数值。
其应用场景一般为固定范围、固定粒度的信息输入，例如，只允许输入0～100的数值，且粒度为10。这时，如果选择输入框，则用户可能会输入11、12这样的数值。显然，产品不支持这样的数值，如果对这样的非法数值进行提示，则会产生很多没必要的判断逻辑，倒不如使用计步器来控制信息输入的规则，以有效控制用户输入有效信息。图1-22（a）～（d）展示了典型的计步器样式。
图1-22 典型的计步器样式
通常计步器的标签需要注明计步器的范围。正向和反向计步按钮用于控制信息输入的粒度，用户可以通过计步器的按钮来控制输入的数值。
在表达多层级的信息结构关系时，树形控件是一个非常好的选择。图1-23展示了一种经典的树形控件。
图1-23 经典的树形控件
树形控件经常用在类似于权限分配功能和组织架构管理功能的产品设计中，以方便用户清晰地选择出级联关系内的目标信息。例如，一所中学有3个年级，分别是初一、初二和初三，每个年级又分为8个班级（1～8班），每个班级又分为6个组（1～6组）。现在要选择1年级2班3组的全部学生，只需要展开1年级的树形节点，再展开2班的树形节点，然后选中3组的同学就可以了。
虽然选择器也可以达到类似的功能，但是从整个信息结构和交互体验来看，树形控件更加适合这样的多级联多信息项的场景。
树形控件还可以由用户自定义，如图1-24所示，用户可以自由控制（新增、修改、删除）树形控件的节点和信息项。
图1-24 可自定义的树形控件
可编辑的树形控件更加灵活，例如，在实际的产品设计过程中，使用树形控件表达一个公司完整的组织架构并承载一定的功能，而出于一些原因组织架构会频繁地调整，固定信息内容的树形控件往往需要在代码层面中操作，然后发布，才能响应组织架构的变动。而可自定义的树形控件可以由用户快速响应，一定程度上提高了产品的使用效率。
穿梭框是一种具备批量信息输入功能的控件，如图1-25所示。由于信息项可以在选择栏中动态地选中/取消，样式和交互形式像在穿梭，因此称为穿梭框。它适用于一次进行多个同类型信息项的输入操作的场景。
用户可以批量选中左侧栏的信息项并添加到右侧栏中，从而完成信息输入的操作，也可以选中右侧栏的信息并反向添加到左侧栏（代表取消选中），以保证信息项的灵活变动。图1-25左侧是历史上文人的集合，标签名称为“文人墨客”。现在的需求是，需要选出其中获奖的文人名单，被选中的文人将会在榜单页面显示。事实上，这个需求使用多项分类选择器也可以满足，但是无论从直观程度上，还是后续获奖文人的变动情况来看，穿梭框控件都优于多项分类选择器控件。
可见，穿梭框控件的核心功能是把一类信息在两个不同的状态栏中交替切换，以达到产品功能的切换目的。例如，图1-25中，从“文人墨客”栏添加“获奖文人”栏中的文人就会出现在排行榜页面，而从“获奖文人”栏删除的文人则会在排行榜中消失。
图1-25 穿梭框控件示例
在实际的产品设计过程中，穿梭框中的信息项类型没有限制，可以是单选项，也可以是带有层级结构的树形组件项，还可以是带有多项信息的列表项等。
评分控件用于进行信息评价，适用于完成交易或者服务的场景。当完成订单时，要提醒用户对该订单进行评价，评价的信息将由评分控件承载，提交至订单表中。图1-26展示了外卖订单的评价页面。
从图1-26中可以看出，评分控件一般没有固定的样式和规范，可以采用带有文字标签的图标样式，也可以采用纯标签样式，还可以采用经典的星级评分的样式，必要时还会引入文字描述及上传图片来辅助评分，以达到信息评价完整性的目的。
图1-26 外卖订单的评价页面
上传控件也是产品设计过程中的常用控件之一。相较于其他文本信息输入控件，上传控件以文件的形式来输入信息。图1-27展示了一种典型的上传控件样式。
一般上传控件是一种带有上传样式的图标按钮，用户单击上传控件，选中文件后，即可执行上传的指令。使用上传控件的过程中，需要注意上传文件的限制说明，例如，图1-27中的格式限制说明用于让用户明确上传文件的格式和标准，降低上传失败率。
图1-27 典型的上传控件样式
一些上传场景中，文件太大会导致上传时间过长，可以用文字提示的方式，也可以用上传进度条的形式，提示用户文件正在上传，让用户耐心等待，不要中断操作。
上传过程会产生两种结果，要么上传成功，要么上传失败。无论是哪种结果，都需要提示用户，以方便用户决定后续的操作。
搜索栏控件是一种常用的输入控件，在产品设计过程中，只要遇到搜索功能，必然会用到搜索栏控件。图1-28（a）与（b）展示了搜索栏控件在两种状态下的变化情况。
图1-28 搜索栏控件在两种状态下的变化情况
当用户使用“搜索”功能时，从开始输入搜索信息到出现搜索结果，搜索栏控件会经历两种状态。
第一个状态是初始状态。初始状态下，一般搜索栏会用搜索图标加上提示文案的形式来提示用户这个控件的作用。这里的提示文案可以是图中的“搜索”或者“输入搜索内容”，或者一些默认的搜索内容，这个默认的搜索内容可以是上一次用户搜索的内容，也可以是根据一些策略推荐给用户的搜索内容。例如，图1-29所示的淘宝搜索栏控件会根据用户的历史购物记录、浏览记录、搜索记录等根据推荐算法，推荐给用户可能想要搜索的内容。如果其中正好是你想要搜索的内容，则可直接单击“搜索”按钮并进行搜索。
图1-29 淘宝搜索栏控件
第二种状态是用户单击搜索栏后待输入搜索内容的状态。该状态下搜索栏内部会出现快速删除搜索内容的图标。为了展示更多的搜索内容，通常会由一个独立的搜索页面承载搜索功能。
如图1-30所示，单击首页的搜索框后，会进入独立的搜索页面。搜索页面中会有历史搜索记录、推荐的搜索内容，以及搜索最多的内容等信息，以方便用户快速做出搜索决策。
图1-30 淘宝搜索页
在实际的产品设计过程中，使用搜索栏控件承载搜索功能时，除明确搜索控件的样式和交互之外，还需要明确搜索的逻辑，例如，是精确搜索还是模糊搜索，是否需要关键字联想功能等。
表单页是由多种输入控件组成的一种特殊的输入控件，适用于需要用户输入较多信息项的场景。如图1-31所示，整个表单页控件内包含多种类型的其他输入控件，如文本框、选择器、单选按钮、复选框、滑动开关、计步器，以及上传组件等。
图1-31 表单页
表单页是一种常见的组合输入控件，在实际产品设计过程中，除要明确其中每个控件的样式、交互以及逻辑之外，还要注意整个表单页信息结构的完整性和规范性。其完整性主要体现在所有内部控件中输入的信息能满足实际的信息输入需求，而规范性则主要体现在整体控件配色、对齐、交互等的一致性上。
微信扫码关注【异步社区】微信公众号，回复“e59479”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。
