2.1 编写产品文档时的注意事项
编写产品文档时，需要注意以下事项。
（1）产品文档应该完整体现各种处理流程，尤其是在异常状况下的各种处理流程，如无法从服务器获取到数据和用户输入错误等。
（2）需要明确进入每个界面，显示的数据未加载完时，当前界面怎样显示。例如从服务器获取数据时，当前界面整体显示为空白界面，用户只能看到当前界面之上的加载提示框，数据加载完成后，加载提示框消失，并显示整个界面布局；当顶部有标题栏，或底部有TAB栏时，这两部分显示的数据通常不需要从服务器获取，可以一进入这个界面就显示出来。
（3）需要明确哪些界面支持用户手动更新当前界面数据和上拉加载更多数据的功能，及对应的动画效果。
对于更新当前界面数据功能，还需明确采用以下哪种方式。
· 用户下拉操作更新数据。
· 用户单击刷新按钮更新数据。
（4）许多APP在首页的底部有个TAB栏，该栏上有几个按钮，单击这几个按钮显示的界面属于一级界面，左上角是不需要有返回图标或按钮的。除了一级界面外，其余每个界面都应该明确从当前界面可以返回到哪个界面。
（5）无论APP的界面显示模式是竖屏还是横屏，其对应的屏幕宽度都有限，水平方向尽量少放置内容；而大多数用户已经知晓通过向上滑动手指，在屏幕的垂直方向可以翻页显示更多内容，所以可在垂直方向多放置内容，即屏幕的高度方向对显示的内容没有限制。
当然也有特例的情况，如在竖屏模式下，当前界面有多个TAB页面，通常会支持左右滑动，以显示不同TAB页面的内容；或有多张图片需要显示的时候，也支持左右滑动，以显示不同图片的内容。此时最好在界面显示提示信息，提示用户左右滑动显示更多内容，如图2-1所示。
图2-1
在图2-1所示的界面中显示了3种商品，如果种类超过3个，在用户第一次看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多内容”。用户点击屏幕，则提示界面消失。
如图2-2所示，如果显示的图片不只一张，在用户第一次看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多图片”，用户点击屏幕，提示界面消失。
图2-2
（6）如果当前显示的内容超过了一屏，用户通过向上滑动手指，翻到了第N页（N>1），此时在屏幕的右下角要显示一个图标，用户点击此图标直接显示第1页内容，如图2-3所示。
图2-3
如果页数比较多，需要设计用户可以选择查看其中任一页内容的图标，如提供页码列表或让用户手动输入想查看的页码数字。
如图2-4所示，商品列表数据共有10页，当前显示的是第2页的内容，左右两边4个箭头对应的功能是跳到第一页、跳到上一页、跳到下一页和跳到最后一页。在编辑框中输入5，然后单击确定按钮，则会直接跳到第5页。
图2-4
（7）在使用APP的时候，常遇到在某个界面显示的内容比较多，一屏显示不下，而在屏幕底部的控件又需要一直显示的情况，此时就需要考虑悬浮设计，就是在滑动当前界面显示的内容时，始终显示底部的控件，相当于底部控件悬浮在内容的上方。
如图2-5所示的是电商APP里必有的购物车界面，购物车里的商品可能一屏显示不下，需要用户滑动商品列表显示更多商品内容，但在界面底部的商品总价和结算按钮需要一直显示，方便用户随时进入结算界面下单，这就需要使用悬浮设计。
图2-5
（8）在电商APP的购物车、结算页面和订单页面，通常页面顶部需要显示商品优惠政策或客户联系方式等信息，中间显示商品列表，底部是功能按钮区域。
如果商品数量比较多，就需要上拉显示更多的商品，为了扩大商品列表的显示区域，有以下两种方案。
· 如顶部区域显示的信息不需用户编辑，则可以设计上拉时顶部区域随着商品列表一起向上滑动。
· 如顶部区域信息也需用户编辑，则可以设计顶部区域在商品列表向上滑动时隐藏起来，此区域也用于显示商品列表；商品列表停止滑动时，则显示顶部区域，方便用户随时编辑顶部信息。
如图2-6所示的订单详情界面，上部区域显示收件人的联系方式和收件地址，底部显示取消订单按钮，只有中间区域用于显示商品列表。当用户向上滑动手指，则显示更多的商品，此时用户并不关注收件人的联系方式和收件地址信息，就可让这部分区域随着商品列表一起向上滑动，或者把收件人联系方式和收件地址信息隐藏起来，将此区域用于显示商品列表数据；当商品列表停止滑动时，可再显示收件人的联系方式和收件地址信息。
图2-6
（9）由于手机屏幕空间有限，像标题栏这样的区域在有些界面中就不必显示了，从而更有效地利用空间。如商品详情界面，这样可以扩大图片展示区域。
如图2-7所示的商品详情界面，将标题栏区域去掉，整个上部区域都用于显示商品图片，中间用于显示商品规格等数据，底部用于显示功能按钮。
图2-7
（10）文本输入区域最好能设计在屏幕的上半部分，这样不容易被输入法的键盘遮住，对应的功能按钮最好紧贴在输入区域的下方，许多APP的登录、注册和修改密码界面就是这样设计的。
如图2-8所示，文本输入框和登录按钮都在屏幕的上半部分，以避免被输入法键盘遮住。
图2-8
如果文本输入区域只能设计在屏幕的下半部分，那么在用户点击文本输入区域时，设计弹出一个新的界面，或是在弹出输入法键盘时将当前界面整体往上移动，这样文本输入区域也不容易被输入法键盘遮住。
如果不能把界面整体往上移动，可以适当缩小文本输入区域上方的内容所占的空间。如把文本输入区域上方的图片显示区域缩小，这样此区域下方的内容就自动向上移动了，也就是部分上移。如图2-9所示为没有显示输入法键盘时的界面。
图2-9
图2-10所示为显示输入法键盘时的界面。
图2-10
（11）如果某个界面不需要用户输入，只能看，不能编辑，那么这种界面的功能按钮可以设计在界面的最下方，方便用户用大拇指点击。
在如图2-11所示的设置界面中，通常会有许多功能菜单供用户点击，但不会让用户在此界面进行输入操作，也就是在此界面不会弹出输入法键盘，这样就可把退出当前账号按钮放在界面的最下方，方便用户单手操作，用大拇指点击按钮。
图2-11
（12）在设计文本输入区域时，应显示提示信息，提示用户输入的字符类型和字符个数。输入区域的最右边要设计有删除输入字符的图标，用户单击即可删除输入区域中的所有字符。
单击如图2-12所示的界面中的“×”图标，会删除密码框中的所有字符。
图2-12
（13）密码输入框的右边应设计有切换明文或密文显示的图标。
单击如图2-13所示的界面中的“
”图标，会切换密码是明文显示或密文显示。
图2-13
（14）如需用户输入手机号码，则需要明确号码是否按3-4-4格式显示，如13112345678。
（15）如需用户输入银行卡，则需明确卡号的显示格式，如按此格式显示：1111222233334444。
（16）遇到字符串长度超过显示区域的情况，通常有以下几种处理方式。
· 换行显示，动态增加显示区域的高度。
· 将显示区域内的最后一个字符显示为省略号。
· 字符串水平滚动显示全部内容。
在提供产品文档时，需要明确采用哪种处理方式。
（17）在登录和注册界面，建议设计用户手动输入验证码，这样可以防止恶意攻击。
（18）产品文档中还应包括各种提示框和提示文字的设计。如操作成功和操作失败的提示框，提示用户等待的提示框，以及什么时候使用Toast提示框，什么时候使用Alert提示框。
建议在操作成功的时候用Toast提示框（显示时间不超过2秒），操作失败的时候用Alert提示框。Toast提示框显示后会自动消失，导致用户可能看不到出错提示；Alert提示框不会自动消失，只有用户单击其上的按钮才会消失，这样保证了用户可以看到出错提示。（Android系统自带Toast提示框，iOS系统需要导入第三方库实现Toast提示框）
（19）在APP中若要用到轮播图和动画，轮播图的切换时间和动画的显示时间最好也要在产品文档中明确说明。
（20）产品文档中需要明确哪些界面用网页实现，哪些用原生代码实现。通常内容多变的界面，如广告和促销界面，或者需要可以被链接索引传播的文字内容等，可以用嵌入网页的形式实现。
（21）产品文档中需要明确APP是否支持长登录，如果支持长登录，登录时间维持多久。
（22）产品文档中需要明确是否支持一个账号在多个设备上同时登录，以及哪些数据需要在各设备间进行同步。如电商APP和电商网站的购物车、收藏夹、浏览历史和搜索历史等是否需要实时同步。
（23）需要考虑哪些界面要保存用户的输入信息。如登录界面通常需要保存用户账号在本地，这样当用户再次登录的时候，不需再次输入账号。
还有像用户个人资料、地址和文本编辑等界面，需要用户输入的数据比较多，用户在这些界面中点击返回按钮或返回键退出时，最好显示提示框，提醒用户是否保存当前界面的数据。
（24）如用到PUSH消息功能，需要明确以下内容。
· 服务器端发送哪几类消息数据。
· 用户点击PUSH消息提示框后，显示什么样的界面内容。
· APP本地是否要保存消息，如果保存，保存消息的时间段是什么（一周或一月的消息）及保存的消息数量是多少。
（25）对于订单、收藏夹和浏览历史之类的数据，也需要考虑在服务器端或APP本地保存的时间段和数据数量。
（26）产品文档中需要考虑到一些应用市场的要求，如iOS APP，要发布到App Store，注册页面必须包含一个用户许可协议的链接，否则可能通不过Apple的审核。
（27）设计评论功能时，分数是否支持小数、星级的划分标准、评论者的昵称或名称的显示方式也都要考虑到。
（28）如有显示或需用户输入数字的地方，需明确数字的默认值和最大值。如有小数，需明确小数位数，像商品的数量和价格等，这也涉及界面布局区域的宽度设置。
（29）在电商APP的结算页面，建议设计买家留言功能，改善用户体验。
（30）搜索功能需要明确是APP本地搜索，还是APP向服务器发送请求，在服务器端进行搜索，并返回结果给APP。
两者具体的实现方式如下所述。
· 本地搜索适合采用在搜索栏中输入一个字符就自动搜索一次的实时搜索。
· 服务器端搜索适合采用用户输入字符后，点击搜索按钮，再进行搜索。
（用实时搜索方式，如需要输入5个字符，在极端情况下可能APP向服务器发送5次请求，在交互5次之后才能搜索到结果，这极大地浪费了流量和时间）
（31）搜索功能会涉及多个界面，各界面间的跳转流程需要明确。
（32）大多数APP都会展示许多图片，对网速要求高，但用户可能会在网速不好的情况下（如在2G网络状况下）使用APP。需要考虑在此情况下，是否显示分辨率较低的图片或不显示图片，如电商APP中的商品列表转换为文本模式，以降低对网络性能的要求。
（33）需要明确APP的升级功能流程和相关界面，且要注意强制升级和非强制升级的不同。
非强制升级是用户即使选择不升级当前版本，也能正常使用APP。强制升级是用户必须升级后，才能使用APP。
如图2-14所示的是非强制升级的界面。当用户启动APP时，APP从服务器获取到升级信息，并在APP启动界面显示提示框，内有取消和确定两个功能按钮，供用户选择。
图2-14
如图2-15所示的是强制升级的界面。在APP的启动界面显示的提示框只有确定按钮，用户只能点击确定按钮升级APP版本。
图2-15
（34）在用户进行删除操作的时候，一定要显示提示框请用户确认，以防止用户误操作，如图2-16所示。
图2-16
（35）大多数APP中的许多功能需要在登录状态才能正常使用。目前许多APP都把注销登录的按钮设计在层次比较深的界面，让用户一直保持登录状态。如果用户很容易看见注销按钮，那退出登录状态的概率也就变大了。
（36）Apple产品没有返回键，但Android产品通常有返回键，用户可以直接按返回键退出，需要明确采用以下哪种退出方案。
· 用户按返回键时，弹出Alert提示框，提示用户确认是否要退出应用。
如图2-17所示的提示框，需要用户在点击返回键后，把手指从手机的返回键区域移动到中间区域，点击提示框上的按钮。
图2-17
· 用户第一次按返回键时，弹出Toast提示框，提示用户再次点击返回键，则退出应用。
如图2-18所示的Toast提示框，用户手指一直放在返回键区域就可完成退出操作，不需移动手指，用户体验更好。
图2-18
（37）对于展示列表数据的界面，需要明确数据按哪种方式排序。
（38）如果提供下拉列表，让用户选择下拉列表里的数据时，需要考虑是否当用户在文本框中输入文字时，程序自动搜索相关的数据。如图2-19所示，当销售员数量较多时，可节省用户查看列表数据的时间，改善用户体验。
图2-19