APP产品设计大揭秘

App是指运行在智能手机、平板电脑等移动终端设备上的第三方应用程序，App设计就是为这些移动终端设计第三方应用程序，通常有iOS App、android App、Windows Phone App等。App设计区别于Web设计，但因为WebApp的出现，模糊了App设计和Web设计的界限。

这是《App产品设计指南》系列文章的 第7篇 内容，更多精彩可以点击下方链接查看。

《App产品设计指南》专栏目录

经过前面几篇内容预热，相信大家已经对App产品的设计理念，研发流程有了一定的认知。接下来我们来正式切入正题，一起来学习关于App产品设计的具体知识点。需要说明的是，后续的文章为了让大家更直观地理解，语言上会比较直白。文章之外的很多细节，比如说B站的情感化设计，微信克制的初心，这些都需要大家主动思考和发散才能深刻的理解。

在本文中我会重点介绍一下App产品的通用模块。在产品初期一定要设计好产品的通用模块，这些模块会伴随着产品的一生。如果没有设计好，后续迭代多半会踩坑填坑。我目前在用的机器是小米9，所以后面会出现较多的安卓系统的案例。

经常会在App中看到转圈加载的交互，这个就属于全局加载。在数据没有获取到之前显示加载中的特效；数据请求后再渲染页面，这样的交互能让用户不至于焦虑。下面介绍几种常见的设计：

（1）App页面中显示loading图标，增加文案引导。由于一般是圆圈加载，速成菊花图。

（2）App页面中显示由矩形、圆形等图案组合的轮廓效果。这种效果有一个学名叫做骨架屏。

需要说明的是骨架屏最好根据页面内容来显示轮廓效果，如果使用相同的设计效果就会不太理想。

（3）webview页面中在页面顶部显示进度条，表示对应的加载进度。

全局加载需要设置一个数据请求上限，比如说10S。如果达到上限还没有请求到数据，就要显示对应的失败提示，下文中会提到这种场景。

在列表页面中经常会出现没有数据的情况，我们要明确的告诉这是什么，为什么出现，用户要做什么。在实际情况中，上面3种处理会组合出现。

不同页面的内容都不一样，所以空白页最好能根据页面的内容来进行设计

用户进入新页面时，本地判断网络情况。如果网络异常则显示该状态，一般都会增加“重新加载”“点击刷新”“查看网络设置”这种操作提示。

类似微信钉钉等使用长连接机制的App，如果网络中断，页面顶部会显示网络异常提示。

网络异常属于可以实时判断的情况，进入页面时就能立刻判断。

这种情况一般发生在服务器出问题的时候，相当于网页上的404状态。比如说连接人数特别多，或者服务器宕机，此时就会触发该状态。

上面说的错误提示需要客户端请求数据一段时间（比如说10S）之后才会触发。一般包括整个页面出错，部分内容出错两种场景。前者需要有对应的页面设计，后者一般使用toast这种轻度的设计。

上拉加载

如果数据量比较少，可以一次性加载完；而数据量较多时，就需要分页加载。比如先加载20条数据，然后再继续加载。

（1）触发上拉加载分为2种情况，一种是用户看完当前页向上滑动时再加载数据；另外一种是预加载，即用户还在浏览当前数据，程序在后台自动加载数据。比如抖音App，你在浏览视频时，系统会自动加载后面几个视频。

（2）数据全局加载完，显示触底提示，文案如“没有更多数据了”“我可是有底线的”。

（3）如果上拉加载数据失败，在底部显示加载失败并显示“重试”按钮。这种场景也可以不予考虑。

下拉刷新

用户在页面顶端主动进行下拉操作，当前页面数据进行刷新。如果有其他页面的数据或者配置发生变化，也可以同步更新。下拉刷新一般分为以下4个步骤：

（1）用户向下拉动时提示用户在进行刷新操作；

（2）用户下拉是有区域范围的，一般在屏幕的1/3处左右。当下拉达到这个区域时，提示用户此时松开可以刷新数据。

（3）显示刷新中的交互效果；

（4）提示用户刷新成功，可以把刷新成功的数字显示出来。如果挤在失败则toast刷新失败。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。

首先，要了解移动产品和web端产品之间有什么不同。从自身属性和结构来说，移动端偏向于手势操作，而且受限于屏幕尺寸的大小，尤其是还受限于网络环境——3G网络、4G网络，甚至是已经落后的2G网络，都会影响到用户体验移动端的产品。因此，移动产品设计首要需要考虑屏幕的适配，手势操作需符合用户习惯，图文的配置需要考虑到用户使用场景的限制因素，产品里的透露的信息是否可以满足用户在网络不良情况下也可以操作自如，无忧浏览。

用户使用移动端的产品的时候，是不会在固定的一个位置操作的，而且他们的操作习惯更偏向于间隔性强，次数多——如地铁，公汽，逛街，都是随时变换位置的，而上车、下车、乘坐扶梯时候为了安全都不会去关注手机——因此，需要考虑你的产品会不会干扰用户或者占用用户过多精力，要注意避免去影响用户的正常做事，或者过于在不断变换的场景中过于集中在这款产品上，而发生事故或意外。

这里要说的第三点，也是我在第一点里谈到的——需要符合用户的手势操作习惯，比如手机端有重力感应器，加速度传感器，位置传感器，压力传感器等，这些都是我们设计移动产品时候可以借鉴的，但不能去擅自修改的。比如，明明是利用重量感应器来完成的操作，你却让用户利用加速度传感器来完成——这显然是不行的。

一、明确APP的发展战略

要做一款app，首先要明确几个问题：

1.app的用户是谁?

2.用户使用app能够获得什么?

3.公司推出app是为了获得什么?

以上问题，这里不做回答，只是一个粗狂的问题，对于APP的设计并无实际指导意义，只是暂且明确了一个产品的方向。

二、产品的核心功能有哪些?

不同的产品其核心功能大相径庭，这里以电商APP为例，从前端和后台两个方面具体说明电商APP的核心功能需求有哪些?

用户端APP(Android、ios版本)，这里只是主要功能，在主要功能的基础之上可以增加一些完善体验的东西。

主要功能：浏览商品(列表页、详细页)、分类查看商品、加入收藏、加入购物车、直接购买、提交订单、支付订单、支付，订单列表页、订单详情页，订单可进行 的操作(取消、支付、确认收货、评价、申请退换货、删除)查看商品物流信息，还有个人信息(昵称、头像、收货信息、订单、余额、积分等等)，以及关于 APP端的版本查看，意见反馈，清除缓存，关于我们，用户注册、登陆和用书使用协议等。

APP需要的后台系统搭建，根据不同的电商模式，其后台架构也不同，垂直电商和电商平台有很大的差别，主要看商家端是全部自己来进行管理还是开发加盟的方 式，如淘宝的后台架构和唯品会的后台架构就是两种不同的后台架构。主要架构：账户架构(用户、商家、运营、财务、仓储物流)，功能架构，用户的前端展示的 功能需要后台给出相应字段，数据接口。商家端需要发布商品、接单、操作发货、填写物流信息，处理退换货，这些信息同步到用户前端，用户可以随时查看订单的 状态。需要给运营相应的操作权限，商品的排序，BANNER广告，专题页链接，在后台的上传方式和前端的展示位置等等，还有数据分析，不同的商品的销售统 计，订单发生的时间、地点、用户数据等参数进行统计，财务进行相关订单的财务结算，按照商家、用户、订单进行结算，如果能够把控整个数据库安全的情况下也 可以自动结算，仓储物流信息的上传和同步，如果是1小时送这种O2O模式，还要有配送人员的接单、取货等数据同步。

三、详细进行竞品分析

确定了以上的核心功能和需要打磨的细节之外，接下来就是进行细致的竞品分析，这里仍然以电商为例进行竞品分析，竞品分析的工作如何开展呢，这里叙述一下自己的观点。

找到直接或者间接的竞品，大概找5款app左右，下载安卓和IOS端分别使用，使用脑图软件列出核心功能和提高体验的功能，使用axure等原型工具对其产品截图进行纵向和横向分析，包括UI风格、色彩和图标、文字、按钮的颜色、大小、位置等等。

从网上调研相关数据分析竞品为什么这样设计，这样设计的好与不好的地方分别说明

根据以上数据列出表格，进行筛选，提炼精华部分，去除糟粕部分，给自己的产品设计提供必要的参考。

提出自己的产品差异化功能和特色，电商产品必须结合运营部门进行品类的分析，货源、价格、物流服务等进行分析，单个从APP产品进行优化体验，就算做出花来也没用，因为用户需要的不是产品，而是商品。

从前端展示分析出来其后台架构和相关功能的布局，这个需要观察细节，注重思维能力。比如，你去操作一个款产品，购买数量填写10万个，看下是否有提示库存不足就知道其后台有没有对库存进行把控。

四、真正地开始制作APP开发需求文档

app开发需求文档的标准写法：

1.app开发目的，阐明开发本软件的目的；

2.代开发的app名称

3.参考资料（可有可无）列举app开发需求规格说明时所参考的资料，包括项目经核准的计划任务书、合同、引用的标准和规范、项目开发计划、需求规格说明、使用实例文档，以及相关产品的软件需求规格说明。 在这里应该给出详细的信息，包括标题、作者、版本号、发表日期、出版单位或资料来源。

4.app开发的功能需求。

5.app的运行环境，包括硬件平台、硬件要求、操作系统和版本，以及其他的软件或与其共存的应用程序等。

6.条件与限制，给出影响开发人员在设计app时的约束条款，例如：必须使用或避免使用的特定技术、工具、编程语言和数据库。

7.app功能划分，列举出所开发的软件能实现的全部功能，可采用文字、图表或数学公式等多种方法进行描述。

8.功能描述，对各个功能进行详细的描述。

9.外部接口需求。

10.用户界面，对用户希望该软件所具有的界面特征进行描述。

11.性能需求，包括数据精确度、响应时间、数据转换与传输时间、运行时间等。

12.其他需求，如果不需要增加其他需求，可省略这一部分。

五、交付设计和文案

确定好以上的需求之后，面对设计和研发的需求文档已经告一段落，接下来就要在UI做设计、交互设计师做交互的时候，找相关部门人员完善文案需求，和项目经理一起对工作进行细分，确认时间节点，最后由交互设计师输出一套高保证原型。

六、交付研发

这样子做出来的高保证原型，在各个细节都已经做到了完善，设计、交互、研发、运营等等对工作也已经胸有成竹，那么大家就可以坐下来好好开个简短的会议，确认每个人的具体工作，给出相应的时间节点，然后随时跟进开发需求就可以了。

第一点：了解你的目标客户群的心态\x0d\x0a1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看电影，聊聊八卦之类)：\x0d\x0a这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸\x0d\x0a2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。\x0d\x0a这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。\x0d\x0a3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的\x0d\x0a这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。\x0d\x0a\x0d\x0a第二点：APP原型图的制作和设计讨论\x0d\x0a这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。\x0d\x0a常用的APP原型图工具：移动APP原型设计神器POP、axure、Foreui等\x0d\x0a\x0d\x0a第三点：APP视觉设计与设计要点\x0d\x0a（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等\x0d\x0a一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。\x0d\x0a另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。\x0d\x0a所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。\x0d\x0a你必须记住：（1）隐藏设计或者减法设计（2）分区或分类（3）帮用户做决策（4）提高交互创新设计（5）让人有爽快感和新奇感（6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）\x0d\x0a一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”\x0d\x0a2014年APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！\x0d\x0a\x0d\x0a第四点：APP界面设计流程\x0d\x0a\x0d\x0a（1）.设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。\x0d\x0a（2）.放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有\x0d\x0a效。\x0d\x0a（3）.并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。\x0d\x0a（4）.由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。\x0d\x0a（5）.整个设计过程中不断问自己“真的需要吗？”。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，\x0d\x0a但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。\x0d\x0a\x0d\x0a第五点：APP界面设计测试与预览修正\x0d\x0a设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

意见反馈是APP的基础功能，它是与用户互动、收集用户意见的重要渠道，其入口一般放置在关于页或设置页。

典型的意见反馈设计有两种：在线客服和反馈表单

在线客服

类似即时通讯功能，用户在下方输入文字，由人工或机器人进行回复，以便快速解决用户问题，多用于电商、SNS、游戏等领域。机器人回复，类似自动问答，根据提问关键字匹配问题库回复用户，比人工节约成本，回复相对生硬，不够人情味。

优点：快速响应，实时互动， 点对点，反馈高效，有趣。

缺点：问题过于零散，不便归纳整理分析，研发成本高。

建议采用第三方工具搭建即时通讯功能，节省开发成本。

反馈表单

简单点就一个内容输入框，或再加个上传附件、联系方式或反馈类型，这种设计略显机械。也有用选择题替代表问答题，或者选择题必填，问答题选填，让用户觉得填反馈花不了多长时间还很简单方便，发送反馈的几率会高得多。

相比在线客服，反馈表单形式固定化，方便归类整理分析反馈问题，研发成本低，大部分APP都采用这种。填写表单的设计要点：

1、表单不要太长，字段尽量少，减少用户输入；

2、不要让用户填写姓名、地址等信息；

3、反馈之后要有回复，不要杳无音讯，回复不要太官话和机械，要有人情味，让用户觉得他的反馈是有用的；

4、能查看反馈记录及回复结果，如APP中设置“我的反馈”、邮件回复结果；

4、附带相关信息，如token、账号信息、地区、运营商类型、操作系统版本、APP版本等信息，以便更准确分析需求、定位缺陷；

5、 归类整理，反馈较多的整理成常见问题。

6、输入框过滤！@~#￥%……&*等特殊字符，以防SQL注入，建议设置每天提交次数限制机制，以防止机器提交垃圾数据。

7、有些APP，意见反馈入口会放在主界面，或新版初装二次启动时引导用户反馈（吐槽）。这些都是为了得到更多反馈，优化完善产品。

#本文同步发布到 pm263.com ，pm263为你提供更多更全的产品经理干货，欢迎大家访问。

分享一些我切身体验后的一些原型设计软件，你可以根据自己实际需求来选择~

Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。

POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

Moqup：支持线框图，原型，和逻辑流程图。里面组件数量蛮多，像表格这些也有，做web项目比较便利。支持在线预览和分享，支持评论，不支持标注。上手较容易，不过没什么模板，UI有点过时感。

希望对你有帮助~有疑问的地方欢迎追问！

社交app 开发的3大步：

第一步：APP产品的需求分析

需要产品经理对市场进行需求分析，通过公司的策略，对用户的需求进行一个用户研究分析，通过分析后来研究确定所要开发的APP产品的主要功能，然后制定出一个具体的执行方案。比如社交软件微信，最主要的是达到人与人之间的一个完美的沟通，消除网络的障碍，甚至超越现实中的一个面对面的沟通从而达到一个生动形象的表达。那么这个过程中需要的是什么？

首先是文字和语音功能，是用于表达说明。而单纯的文字又显得枯燥，那么就需要面对面沟通中人们所希望看到对方的表情一样。把语言表达的更加清晰。这个是一个研发过程的一个发散思维与逻辑思维的结合。

第二步：APP产品设计

根据APP产品经理的研究分析方案，设计团队根据方案进行一个产品的设计，这个部分有两个团队，一个是APP的交互设计团队，一个是负责界面设计的UI设计团队。这两个团队分别负责不同的任务。

交互设计主要根据产品经理中用户的需求分析设计出用户使用最简单方便的操作方法，通过对页面跳转进行设计，然后设计出原型图交给开发团队进行研究开发。

APP UI设计则配合着进行一个视觉的界面设计，这里起着主要的作用。是机器与用户沟通中的一个视觉门面的设计工作。当然其中也包含APP的用户体验设计、APP交互设计等方面的技巧。然后把这些切图和标注提交到客户端开发人员。

第三步：开发设计与测试

得到原型设计图后开发团队开始进行产品的研究开发。根据不同的程序系统“ios”和“安卓”设计出不同的产品软件，然后进行一个测试调试，修复BUG，完善产品。这一个过程是耗时最久的一个环节。也是整个APP成型的关键步骤。同时也需求方、设计方与程序员直接沟通频次最高的阶段。

通过点击底部Tab标签切换不同页面，可以说是如今众多APP的标配了。

典型的如：微信，微信底部4个Tab分别是微信、通讯录、发现、我，更新迭代这么多年，一直很稳定，即使增加了很多功能，但微信的整体架构依然很简洁、稳定，佩服龙哥。

一般底部Tab标签为2-5个，超过5个通常会折叠。个人感觉过多的Tab标签会影响用户对APP主要功能模块的认知。

有些Tab标签对应的页面有不同类型的内容，此时可在页面上方同时设置顶部文字标签，使该Tab标签下的内容能够更清晰、有条理的分类。

如：抖音首页底部Tab标签上方有关注、推荐两个文字标签。

底部Tab的形式适用于APP有多个主要功能模块，每个模块可单独成页。

而有些APP核心功能很突出，且各个功能模块均依附于该核心功能；或是核心功能非常重要，其他功能相对弱一些。这样可能不太适合以底部Tab形式设计APP。

对于核心功能很突出、且各个功能模块均依附于该核心功能的情况，可以考虑用卡片形式，如：faceU，它的核心功能是打开摄像头拍照，主要功能有贴纸、滤镜等，这些主要功能是依附于拍照这个核心功能的，因此比较适合卡片形式的架构。

对于核心功能非常重要、其他功能相对弱一些的情况，可以考虑打开APP后，开门见山直接显示核心功能，其他功能隐藏在次级页面，如：滴滴，打开APP后直接进入打车页面，凸显核心功能，其他功能如：订单、客服、消息等，均折叠隐藏在次级页面。

列表布局即通过一行行列表的形式展示每项内容。这种方式扩展性好，可上下滑动展示更多内容，适用于并列、平行内容的展示。

常见的如设置页面：以列表形式展现每项可设置功能，右侧显示“>”，表示有更多操作；或者右侧直接显示开关按钮、默认选项等。常见的列表布局还有对话列表、歌曲播放列表等等。

同时如果展示内容有分类，则可以通过增加行间距的方式，将不同类别的内容聚合在一起。

宫格布局即以宫格平铺的方式呈现各个功能入口，这种方式使用户能够直观、清晰看到各个功能入口，比较适合提供服务/功能较多，且各服务/功能相对独立的APP。

每个宫格区域一般是以图标+标题的方式展示，标题不易过长。

如：支付宝以宫格展示各项应用入口，微信以宫格展示可提供的第三方服务入口。

以瀑布流方式展示图文内容，所展示内容错落有致，可通过滑动的方式查看更多内容，沉浸感、流畅感好。

常见的如：旅游类APP，图文信息比较多且更新频繁的APP。

抽屉式菜单，即点击导航按钮，将二级菜单像拉抽屉一样拉出来。

这种形式能极大程度保持页面简洁，节省空间，但由于功能隐藏在子菜单中，比较适合不太重要的功能。

常见的如：个人中心、设置等，会比较多的隐藏于抽屉式二级菜单中。

手风琴菜单表现形式为，通过点击一级菜单按钮，能够实现在子菜单展示与收回之间的来回切换。

常见的如：QQ好友分组列表，相信大家都不陌生了。

这种形式的菜单能够在保持界面简洁的情况下，实现信息扩展，比较适用于两级结构的分组信息展示。