APP开发实战142-编写APP产品文档时的注意事项

编写产品文档时的注意事项

(1)产品文档应该完整体现各种处理流程，尤其是在异常状况下的各种处理流程，如无法从服务器获取到数据、用户输入错误等。

 

(2)需要明确进入每个界面，需要显示的数据未加载完时，当前界面怎样显示。

例如从服务器获取数据时，当前界面整体显示为空白界面，用户只能看到当前界面之上的加载提示框，数据加载完成后，加载提示框消失，并显示整个界面布局。

当顶部有标题栏，或底部有TAB栏时，这两部分显示的数据通常不需要从服务器获取，可以一进入这个界面就显示出来。

 

(3)需要明确哪些界面支持用户手动更新当前界面数据和上拉加载更多数据的功能，及对应的动画效果。

对于更新当前界面数据功能，还需明确采用哪种方式：

A 用户下拉操作更新数据

B 用户点击刷新按钮更新数据

 

(4)许多APP在首页的底部有个TAB栏，上有几个按钮，点击这几个按钮显示的界面属于一级界面，左上角是不需要有返回图标或按钮的。除了一级界面外，其余每个界面都应该明确从当前界面可以返回到哪个界面。

 

(5)无论APP的界面显示模式是竖屏或横屏，其对应的屏幕宽度都有限，水平方向尽量少放置内容；而用户已经普遍知道通过向上滑动手指，可以在屏幕的垂直方向翻页显示更多内容，所以可垂直方向多放置内容，即屏幕的高度方向对显示内容多少没有限制。

也有特例的情况，如在竖屏模式下，当前界面有多个TAB页面，通常会支持左右滑动，以显示不同TAB页面的内容；或有多张图片需要显示的时候，也支持左右滑动，以显示不同图片的内容。此时最好在界面上给用户提示信息，可以左右滑动显示更多内容，如下图所示：

在上图所示界面，显示了三种分类商品，如果种类超过三个，在用户第一次看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多内容”，用户点击屏幕，提示界面消失。

在上图所示界面，如果显示的图片不只一张，在用户第一次看到这个界面的时候，在此界面上方可再显示一个界面，提示用户“用手指左右滑动页面，显示更多图片”，用户点击屏幕，提示界面消失。

 

(6)如果当前显示的内容超过了一屏，而用户通过向上滑动手指翻页到了第N页(N>1)，此时通常在屏幕的右下角要显示一个图标，用户点击此图标，直接显示第1页内容，如下图所示：

在上图所示界面，当用户通过向上滑动手指翻页到了第N页(N>1)，此时在屏幕的右下角显示一个图标，其中有向上的箭头，用户点击此图标，直接显示第1页内容。

如果页数比较多，需要设计用户可以选择查看其中任一页的内容，如提供页码列表或让用户手动输入想查看的页码数字，如下所示：

在上图所示界面，商品列表数据共有十页，当前显示的是第二页内容，左右两边箭头对应的功能是：跳到第一页、跳到上一页、跳到下一页、跳到最后一页。在编辑框中输入5，然后点击确定按钮，则会直接跳到第五页。

 

(7)在使用APP的时候，常遇到在某个界面显示的内容比较多，一屏显示不下，而在屏幕底部的控件又需要一直显示，此时就需要考虑悬浮设计，就是在滑动当前界面显示的内容时，始终显示底部的控件，相当于底部控件悬浮在内容的的上方，如下图所示：

上图所示的是电商APP里必有的购物车界面，购物车里的商品可能一屏显示不下，需要用户滑动商品列表显示更多商品内容，但在界面底部的商品总价和结算按钮需要一直显示，方便用户随时进入结算界面下单，就需要使用悬浮设计。

 

(8)在电商APP的购物车、结算页面和订单页面，通常页面顶部需要显示商品优惠政策或客户联系方式等信息，中间显示商品列表，底部是功能按钮区域。 

如商品数量比较多，就需要上拉显示更多的商品，为了扩大商品列表的显示区域，有两种方案：

A如顶部区域只是显示信息，不需用户编辑，上拉时，可以设计顶部区域随着商品列表一起向上滑动。

B如顶部区域信息也需用户编辑，上拉时，可以设计顶部区域在商品列表向上滑动的时候，隐藏起来，此区域也用于显示商品列表；用户下拉商品列表时，则显示顶部区域，方便用户随时编辑顶部信息。

如下图所示：

在上图所示的订单详情界面中，上部区域要显示收件人联系方式和收件地址，底部要显示取消订单按钮，只有中间区域用于显示商品列表；当用户向上滑动手指，显示更多商品的时候，并不关注收件人联系方式和收件地址信息，此时就可让这部分区域随着商品列表一起向上滑动，或者把收件人联系方式和收件地址信息隐藏起来，此区域也用于显示商品列表数据；当用户下拉商品列表或显示第一页商品数据时，再显示收件人联系方式和收件地址信息。

 

(9)手机屏幕空间有限，像标题栏这样的区域在有些界面就不必显示，以更有效的利用空间，如商品详情界面，这样可以扩大图片展示区域，如下图所示：

在上图所示的商品详情界面中，去掉了标题栏区域，整个上部区域都用于显示商品图片，中间用于显示商品规格等数据，底部用于显示功能按钮。

 

(10)文本输入区域最好能设计屏幕的上半部分，这样不会被输入法的软键盘遮住，对应的功能按钮最好也紧贴在输入区域的下方，这样避免被输入法的软键盘遮住。大多数APP的登录、注册和修改密码界面就是这样设计的，如下图所示：

在上图所示界面，用户名和密码的输入框紧挨标题栏，登录按钮就在密码框的下方，整体都在屏幕的上半部分，有效避免了被输入法的键盘遮住。

如果文本输入区域只能设计在屏幕的下半部分，最好设计用户在点击文本输入区域时，弹出一个新的界面，这样文本输入区域也不会被输入法的软键盘遮住。

还有一种方案是，在弹出输入法的软键盘时，当前页面整体往上移动，这样文本输入区域也不会被遮住。

如果不能把页面整体往上移动，那可以适当缩小文本输入区域上方内容所占的空间，如把文本输入区域上方的图片显示区域缩小，这样此区域下方的内容自动向上移动了，就是部分上移。如下图所示：

上图所示界面为没有显示输入法键盘时的状况。

上图所示界面为显示输入法键盘时的状况。

 

(11) 如果某个界面不需要用户输入，只能看，不能编辑，这种界面的功能按钮可以设计在界面最下方，方便用户用大拇指点击到，如下图所示：

在上图所示的设置界面中，通常会有许多功能菜单供用户点击，但不会让用户在此界面进行输入操作，也就是在此界面不会弹出输入法键盘，这样就可把

退出当前账号按钮放在界面最下方，方便用户单手使用大拇指点击按钮。

 

(12)在设计文本输入区域时，应设计显示提示信息：用户输入的字符类型和字符个数；输入区域的最右边要设计有删除输入字符的图标，用户点击即可删除输入区域中的所有字符，如下图所示：

点击上图所示界面中的X图标，会删除密码框中的所有字符。

 

(13)密码输入框的右边应设计有切换明文密文显示的图标。

点击上图所示界面中的图标，会切换密码是明文还是密文显示。

 

(14)如需用户输入手机号码，需要明确号码的显示方式是否按3-4-4格式显示，如131 1234 5678。

 

(15)如需用户输入银行卡，需明确卡号的显示格式，如按此格式显示：

11112222 3333 4444。

 

(16)遇到字符串长度超过显示区域的情况，通常有以下处理方式：

A 换行显示，动态增加显示区域的高度

B 在显示区域内的最后一个字符显示为省略号…

在提供产品文档时，需要明确采用哪种处理方式。

 

(17)在登录和注册界面，建议设计用户需要手动输入验证码，这样可以防止恶意攻击。

 

(18)产品文档中还应包括各种提示框和提示文字的设计：如操作成功和操作失败的提示框，提示用户等待的提示框等，及什么时候使用Toast提示框，什么时候使用Alert提示框。

建议在操作成功的时候用Toast提示框(显示时间建议不超过2秒)，操作失败的时候用Alert提示框：                     

Toast提示框显示后会自动消失，导致用户可能看不到出错提示。

Alert提示框不会自动消失，只有用户点击其上的按钮才会消失，这样保证了用户可以看到出错提示。

(Android系统自带Toast提示框，iOS系统需要导入三方库实现Toast提示框)

 

(19)在APP中如有用到轮播图和动画，轮播图的切换时间和动画的显示时间最好也要在产品文档中明确。

 

(20)产品文档中需要明确哪些界面用网页实现，哪些用Native代码实现；通常内容多变的界面，如广告和促销界面，或者需要可以被链接索引传播的文字内容等，可以用嵌入网页的形式实现。

 

(21)产品文档中需要明确APP是否支持长登录，如果支持长登录，登录时间维持多久。

 

(22)产品文档中需要明确需要明确是否支持一个账号在多个设备上同时登录，以及哪些数据需要在各设备间进行同步，如电商APP和电商网站的购物车、收藏夹、浏览历史和搜索历史等是否需要实时同步。

 

(23)需要考虑在哪些界面要保存用户的输入信息，如登录界面通常需要保存用户账号在本地；这样当用户再次登录的时候，不需再次输入账号。

 

(24)如用到PUSH消息功能，需要明确：

A服务器端发送哪几类消息数据。

B用户点击PUSH消息提示框后，显示什么样的界面内容

C APP本地是否要保存消息，如果保存，保存消息的时间段是什么(一周或一月的消息)，及保存的消息数量。

 

(25)对于订单、收藏夹和浏览历史之类的数据，也需要考虑在服务器端或APP本地保存的时间段和数据数量。

 

(26)产品文档中需要考虑到一些应用市场的要求，如iOSAPP，如要发布到App Store，注册页面必须包含一个用户许可协议的链接，否则可能通不过Apple审核。

 

(27)设计评论功能时，分数是否支持小数、星级的划分标准、评论者昵称或名称的显示方式等都需考虑到。

 

(28)如有显示或需用户输入数字的地方，需明确数字的默认值和最大值，如有小数，需明确小数位数，像商品的数量和价格等，这也涉及到界面布局区域的宽度设置。

 

(29)在电商APP的结算页面，建议设计买家留言功能，改善用户体验。

 

(30)搜索功能需要明确是APP本地搜索，还是APP向服务器发送请求，在服务器端进行搜索，并返回结果给APP。

两者具体的实现方式建议如下：

A本地搜索适合采用在搜索栏中输入一个字符就自动搜索一次的实时搜索。

B 服务器端搜索适合采用用户输入字符后，点击搜索按钮，再进行搜索。

(用实时搜索方式，如需要输入五个字符，在极端情况下，可能APP向服务器发送五次请求，交互五次，才能搜索到结果，极大浪费流量和时间)

 

(31)搜索功能会涉及多个界面，各界面间的跳转流程需要明确。

 

(32)大多数APP都会展示许多图片，对网络状况要求高，但用户可能会在网络状况不好的情况下，如在2G网络状况下使用APP；需要考虑在此情况下，是否显示分辨率较低的图片，或不显示图片，如电商APP中的商品列表装换为文本模式，以降低对网络性能的要求。

 

(33)需要明确APP的升级功能流程和相关界面，且要注意强制升级和非强制升级的不同：

非强制升级—用户可以选择不升级当前版本，也能正常使用APP

强制升级—用户必须升级后，才能使用APP

如下图所示：

上图所示的是非强制升级的情景，当用户启动APP，APP从服务器获取到升级信息，则在APP的启动页面显示提示框，有取消和确定两个功能按钮，请用户选择是否升级。

上图所示的是非强制升级的情景，在APP的启动页面显示的提示框，只有确定按钮，用户只能点击确定按钮升级APP版本。

 

(34)在用户进行删除操作的时候，一定要显示提示框，请用户确认，以防止用户误操作，如下图所示：

 

(34)大多数APP中的许多功能需要在登录状态才能正常使用，目前许多APP都把注销登录的按钮设计在层次比较深的界面，以让用户一直保持登录状态。如果用户很容易看见注销按钮，那退出登录状态的几率也会变大了。

 

(35)Apple产品没有返回键，但Android 产品通常有返回键，用户可以直接按返回键退出，需要明确采用以下哪种退出方案：

A用户按返回键时，弹出Alert提示框，让用户确认是否要退出应用，如下图所示：

如使用上图所示的提示框，用户需要在点击返回键后，把手指从手机的右下区域，移动到中间区域，点击提示框上的按钮。

B用户第一次按返回键时，弹出Toast提示框，让用户再次点击返回键，则退出应用，如下图所示：

如使用上图所示的Toast提示框，用户手指一直放在右下区域就可完成退出操作，不需移动手指，用户体验更好。