UI设计者应该理解原型图是如何生成的。
:
【前言】
1.很多人误解UI设计师只画图标和“填颜色”，有些刚入UI的朋友开始用原型图做设计稿。事实上，UI设计师，也被称为用户体验设计师，可以做的不仅仅是“着色”交互草稿。一份设计稿的背后，包含了设计师对用户体验的看法。
2.设计师拿到样机就开始做设计稿，效率很低，会有很多疏漏。但是原型上的字太多了，设计师很难理清思路。在这之前，设计师要知道产品经理是怎么做PRD文档的。下图是产品经理用axure制作的常用原型文档。
3.本文用我做的一个项目(华宇APP)来简单描述一下产品经理做原型时的思路和步骤。只是一个例子，旨在让UI设计师了解产品经理在做原型时的思路，但不是很详细。请忽略产品大牛~感谢产品经理Gavin和A宇的指点。产品源于需求，需求是为了解决痛点而产生的。花语app的项目背景如下：
4.了解项目背景后，产品经理会开始一系列的分析。以下是产品原型的分析大纲：
产品定位、用户分析、需求收集、需求分析信息结构图、用例图、流程图、保真原型图
【正文】
一、产品定位
首先需要对app进行定位，需要从用户、主要功能、产品特性三个方面来思考。
用户：植物爱好者或需要了解植物的人。主要功能：识别植物产品功能：快速准确识别植物，分享种植知识。通过以上分析，花语app产品的定位是：基于精准识别植物功能，具有社交属性的工具型app。
二、用户分析
用户需求分析，即分析：谁，在什么情况下，解决什么问题。
在花语app的项目中，对用户需求的分析是，用户希望借助app上的识别功能，准确识别未知植物。
目标客户：22-35岁的白领和植物爱好者在使用场景：路上遇到了不知名的植物，认识了植物的相关属性。
三、需求采集
用户目标：
用户调查：用户调查可以通过问卷、用户访谈、信息收集、焦点小组等方式进行。以及原型设计的竞品可以根据实际用户的需求点进行分析：可以分析有代表性的同类产品的功能结构，在分析过程中总结竞品的优缺点，找到自己产品的亮点。用户反馈：产品上线后，可以分析用户的反馈产品数据：浏览数据、浏览痕迹、点击痕迹、浏览顺序、时长。转化率以上的需求收集方式中，如果是公司内部项目，有明确的需求方或用户部门，可以通过用户调查的方式进行收集。
因为花语app是一个概念app，是一个从0到1的项目，所以我这里用的是竞品分析的方法。竞品分析不是一味的照搬竞品，而是通过分析竞品不同的层级关系，理清整个app的流程，找到竞品的优缺点，从而总结出不同于竞品的特点和功能。如果你不知道为什么，你做的产品只是竞品的翻版。这个行业最不可或缺的就是app。没有鲜明特色的产品无法在很多app中生存。除了分析现有竞品的特点，还需要有前瞻性：提供竞品无法提供的功能亮点。
需求采集的方式有很多种，常见的有以下几种：
在appstore搜索植物识别类app，下载几个好评率高的。用了之后发现还是用“各种颜色”和产品经理阿玉推荐的“知花君”小程序比较好。其中一个亮点的功能启发了我，于是锁定了这两款竞品进行分析。下图是各种颜色和花朵的信息结构。
a、形色app
在分析各种app信息结构的过程中，作为用户角色体验的我很迷茫。在各种形式中，文章的分类并不明确。例如，我需要找到一种植物保护方法。在“花房”一栏，没有搜索功能，只有“岳红保育”一类。要找到一种植物保护方法，我们只能浏览。在“遇见”一栏，虽然有搜索，但搜索结果中的推送并不包括保养一栏。所以启发我在做花语app的时候，更多的去思考如何为用户推送有用的、精准的信息。
b、识花君小程序
华军是一个小程序，所以它是轻量级的，只有一个简单的核心功能：识别植物。有趣的是，当你在花主或者某个城市里识别出某个植物的时候，你会收到一张卡片，卡片上有该植物的图片，城市卡片上有该城市的小插图。这让我觉得很有意思，也让我想起了walkup，一款计步软件，里面有大量精美的矢量插图。这启发了我给花语加了一个“集邮”功能，识别新植物时解锁对应的植物邮票，定位新城市时解锁对应的城市邮票。这些邮票也可以下载并用作壁纸。(这个有趣的功能需要UI设计师或者插画师花费大量的时间来完成，因为植物有上千种，这不是一件容易的事情。)
四、需求分析
1、功能
经过以上分析，花语app有了明确的定位和用户群体，因此可以进行功能上的头脑风暴：
照片识别、攻略、壁纸上传、壁纸编辑、分享、下载、景点定位、识别、邀请、记录、足迹、新闻、发现、集邮。
2、内容
基本功能构思完成后，对所有内容进行总结，过滤掉不合理的需求，挖掘用户的目标，找到用户的真实需求，匹配产品定位。
经过反复推敲和考虑，花语app的核心功能是照片识别，壁纸编辑只是为了满足基本需求而增加的不必要的功能。如果加上壁纸编辑，整个app会非常繁琐，所以壁纸编辑的功能会被筛选掉。在商业模式部分，可以通过用户的搜索结果为用户提供附近的花店，用户也可以接受花店的存在。
3、优先级
根据项目需求的资源、实现成本和价值，定义这些需求实现的优先级。优先内容应该尽可能放在用户明显使用的地方。
在马斯洛的需求层次理论中，人的需求像梯子一样由低到高分为五种，即：生理需求、安全需求、社交需求、尊重需求和自我实现需求。
根据马斯洛原理，功能是分等级的，app不可或缺的核心功能是基础，应该放在用户容易操作的地方。不重要的功能被认为是放在更深的层次。
五、信息结构图
通过整理以上需求，做出信息结构图。下图是花语app的信息结构：
六、用例图
通过信息架构图，分析app中的参与者(角色)，做出用例图。用例图是指描述系统功能的视图，由参与者、用例、边界及其关系组成。以下是花语app的简单用例图。
七、流程图
流程图是产品设计的基础，可以保证产品的逻辑使用。在app中，流程图也叫业务流程图。花语app中的流程图可以分为很多模块，现在以主识别功能的流程图为例。
八、中保真原型图
那么竞品应该如何寻找？低保真原型图：一般产品经理做的原型图叫低保真原型图，也叫线框。给UI设计人员和开发人员看，有很多文字描述，所以要列出所有的状态，要跳转到什么页面。
中等保真度原型图：所谓中等保真度原型图，就是交互设计师或者UI设计师制作的原型图。基于app界面的初步构思，通过严格遵循设定的间距，合理安排组件位置，使原型图接近高保真设计稿。
下图是富达几款花语app的原型。
九、交付UI设计师
当原型通过需求方的需求评审并确认后，交付给UI设计师进行界面设计。下图是我日常的界面练习，也就是俗称的“高保真设计稿”。
十、这是一个小彩蛋
感谢您阅读本文结尾。
1.很多朋友找我咨询，有时候回答的太模糊，没有实际的项目作为例子，很难讲清楚整个过程。所以想到用一个项目来讲，可能更好理解。
2.我是一名UI设计师，这是我的练习之一。我觉得UI设计师不仅要做界面，还要从多个维度了解整个产品的全貌，从哪里来，如何实现，价值在哪里。只有把这些事情说清楚，这个项目才有意义。
3.由于我不是专业的产品经理，所以写作中可能会有疏漏。欢迎产品经理给我专业良性的建议。
4.这只是开始。以这个项目为例，我会写以下文章，包括但不限于：
一、花卉应用的理念
b、华宇app界面展示
c .草图设计稿的规格、导出、切割和命名
d、华宇app界面优化思路
…
5.我要花很长时间写一篇文章。我需要想清楚文章的层次信息和图片的显示方式。毕竟这才能值得你的等待和支持。最近在公司接触的后台项目很多。我需要重新建立规范，做一个全新的界面设计。我会先熟悉和理清背景逻辑，再写这方面的相关文章。
战酷
作者：牙线姐姐
