火星网校
从0设计App(6):根据流程图4步解决原型稿、交互稿
发布时间：2024-05-28 16:52:47 浏览量：110次
至此，完成了App的宏观定位、系统架构、产品结构图以及重要的2大流程图（业务、页面流程图）。接下来将围绕页面的原型设计、交互设计展开。
在目前手头上已经绘制了所有业务流程图，还有一张页面流程地图。可以说在心里基本知道产品的功能，以及每个页面的功能元素，接下来就是参与需求评审的原型稿和交付给技术同学的设计稿了。
强烈建议先看前面的文章再往下看～否则可能看不懂。
二、原型vs交互vs视觉
很多人对原型稿、交互稿、视觉稿定义不清楚。
无论是大公司还是从0设计App，由业务流程图还不能直接交付给程序员开发，还需要做出原型需求稿、交互UE稿、UI稿。而三者正好对应是黄金圈法则：Why-How-What。
- 原型需求稿：页面有什么功能（why）
- 交互UE稿：功能如何被用户使用（how）
- 视觉UI稿：功能长什么样子（what）
本文将着重就原型和交互展开。关于视觉UI设计，下一篇文章来讲。
三、原型稿
关于原型，有些产品经理坚持「逼真」、「动态」，尤其是一些乙方公司。可以很明确的说，即使花时间把Axure练得很熟，把原型做得很逼真，在甲方公司里都是性价比极低的做法。
3.1 What：原型稿是什么？
在实际工作中，直接看原型稿的3大使用场景：
- 描述需求：产品经理通过对需求挖掘，然后解决用户的需求，原型作为辅助工具形象地描绘出来，以便其他人可直观理解、快速达成共识，解决用户的需求；
- 设计协作：需要在进入UI设计阶段之前将原型稿确认，不能让UI通过你的口述来天马行空设计；
- 客户展示：对于外包服务型乙方公司，在听了甲方的需求后，一般会直接设计动态、可交互的原型，目的是更好地解释给甲方听，也是为了更快交付签合同。
一般来说，我们都是甲方公司的产品经理，只用考虑前2点。
你所做的原型，其实更多就是讲清楚，页面有什么功能，如何解决需求。因此在原型环节也是如此，讲清楚大概怎么解决需求即可。
如上图，如果公司有交互设计师，最终做成这个样子就可以了。已经能够说清楚功能是解决什么需求，剩下的细节交给UE和UI设计就好了。
3.2 How：怎么做线框稿？
问：用什么工具做原型？
答：其实Axure、Sketch、磨刀、甚至PPT都能做原型，我推荐Axure。
问：Axure要系统学吗？
答：我反正没学过，至今95%的工作里只用到方框、文本框、按钮、占位符、直线这么几种够了。
做出上面途中那样子的线框稿，基本上已经可以在甲方公司应用了。产品经理不是来画图的，否则和设计师有什么差别？设计师要系统学一下Sketch或Axure。
在各大厂中用过很多方法，用来用去，让我写经验，我还是推荐闵伟老师（携程高级PM）的4步方法，比较简单易用：
- 绘制业务流程图和页面流程图；
- 添加页面基本元素；
- 添加功能，满足业务流程和页面跳转；
- 添加判断，满足流转。
根据业务流程图和页面流程图，将每个页面的原型全部绘制出来。工作量较大的时候，建议先手绘，不要上色，不要写太多注释，逐步完善原型图。
四、交互稿
作为产品经理我们基本已经大功告成，接下来将交互稿交付给UI设计师，最后制作PRD给技术开发同学就可以了！下一篇内容：从0设计App（7）：视觉设计。
五、总结
OK，至此基本完成了App的设计阶段。交互稿将交付给UI设计师，随后展开视觉设计。关注下一篇内容，从0设计App（7）：视觉设计，与阿里巴巴认证设计师学习更多交互设计知识。
参考学习内容：
- 市场分析-知识短视频行业
- 市场分析-职场技能教育市场
- 竞品分析-吃透3款产品
- 如何用问卷看透人心
- 用户访谈造就产品灵魂
- 用4步管理一切需求
- 构建产品之“道”
- 搭建系统架构和产品结构
- 绘制业务、页面流程图
作者：朱鲁斌，公众号：字字朱心。每周深度思考一个问题，不稳定的世界里找到一份笃定。
本文由@朱鲁斌 原创发布，未经许可，禁止转载。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
-
10. 物联网APP UI设计:创造智能硬件领域的沉浸式体验
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
