用一个实战项目,让你全面认识产品原型的诞生过程! - 优设网 - UISDC

用一个实战项目,让你全面认识产品原型的诞生过程!

2018/05/20 10382评论区

很多人误解 UI设计师做的只是画图标和「填色」,也有一些刚入行 UI 的朋友,拿着原型图就开始做设计稿。其实 UI设计师也叫做用户体验设计师,能做的也不仅仅是对交互稿的「填色」。一份设计稿的背后,包含了设计师对于用户体验的见解。

设计师拿到原型就开始做设计稿,这样效率不高,而且会有很多遗漏。但是原型上的文字非常多,对于设计师来说要理清思路非常吃力。在这之前,设计师应该知道产品经理是如何做出一份 PRD 文档的。下图为产品经理用 axure 做的常见的原型文档。

本文章用我做的一个项目(花语APP)来简单讲述产品经理在做原型时的思路与步骤,只是一个示例,旨在让 UI设计师理解产品经理做原型时的思路,并未做得很详尽。产品源自于需求,而需求是为了解决痛点而产生?;ㄓ?app 的项目背景如下:

清楚了项目的背景以后,产品经理会开始一系列的分析。以下为产品原型的分析大纲:

  • 产品定位
  • 用户分析
  • 需求采集
  • 需求分析
  • 信息结构图
  • 用例图
  • 流程图
  • 中保真原型图

一、产品定位

首先要对 app 进行定位,需要从使用的人群、主要功能、产品特色三个方面去思考。

  • 使用人群:植物爱好者或需要了解植物知识的人
  • 主要功能:识别植物
  • 产品特色:快速准确识别植物、种植知识分享

通过以上分析,花语 app 产品的定位是:基于精准识别植物功能的具有社交属性的工具型 app。

二、用户分析

用户需求分析,即分析:谁、在什么环境下、解决什么问题。

在花语 app 这个项目中,针对用户的需求分析是:用户想在 app 上用识别功能准确识别不知名植物。

  • 目标客户:22-35岁白领,植物爱好者
  • 使用场景:路上遇到不知名的植物
  • 用户目标:识别出植物的相关属性

三、需求采集

需求采集的方式有很多种,常见的有以下几种:

  • 用户调研:可以通过问卷调查、用户访谈、信息采集、焦点小组等方式进行用户调研,根据实际用户的需求点进行原型的设计
  • 竞品分析:分析有代表性的同类产品的功能架构,在分析过程中总结竞品的优劣,找到自己产品的亮点
  • 用户反?。翰飞舷吆?,分析用户的反馈
  • 产品数据:浏览数据,浏览痕迹,点击痕迹,浏览顺序和时长,转化率

以上的需求采集方式中,如果是公司内部的项目,有明确的需求方或者使用部门,可以通过用户调研的方式进行采集。

由于花语 app 是概念 app,也是从0到1的项目,在这里我使用了竞品分析的方法。竞品分析不是盲目抄竞品,而是通过分析竞品不同的层级关系. 理清楚整个 app 的流程,找到该竞品的优点和缺点,从而归纳出不同于竞品的特色功能。如果知其然而不知所以然,做出来的产品只是竞品的复制。在这个行业里面最不缺的就是 app,没有特点亮点的产品,无法在众多 app 中生存。除了分析现有竞品的特点外,还需要具有前瞻性:提供竞品所不能提供的功能亮点。

那么竞品应该如何寻找?

在 app store 上搜索植物识别的 app,下载好评率比较高的几个,使用后发现比较好用的是「形色」,还有产品经理阿鱼向我推荐的「识花君」小程序,其中的一个功能亮点让我找到了灵感,因此锁定这两个竞品进行分析。下图为形色和识花君的信息结构图。

1. 形色 app

在分析形色 app 的信息结构过程中,我以用户的角色体验时,产生了困惑。在形色里面,文章的归类不明确,比如我需要找某种植物的养护方法,在「花间」这个栏目里面,没有搜索功能,只有「虹越养护」这个类目,要找到某种植物的养护方法只能靠浏览。而在「遇见」栏目里面,虽然有搜索,但是搜索结果里面的推送并没有包含养护这一栏。因此启发了我在做花语 app 的时候,更多地考虑到如何为用户推送有用精准的信息。

2. 识花君小程序

识花君是一个小程序,因此是轻量级的,只有很简单核心的一个功能:识别植物。很有趣的是,当在识花君里面识别出某种植物,或者在某个城市识别的时候,会收到一张卡,植物卡上面是植物的图片、城市卡上面是城市小插画。这一点让我感到非常的有趣,也让我想起了 walkup,一个计步软件,有大量精美的矢量插画。这一点启发了我,可以在花语加上一个「集邮」的功能,识别出一种新植物的时候就解锁相对应的植物邮票,定位在一个新城市的时候就解锁相对应的城市邮票。这些邮票还可以下载下来作为壁纸使用。(这个有趣的功能需要 UI设计师或者插画设计师付出大量的时间来完成,因为植物是千万种的,这不是一个容易完成的任务。)

四、需求分析

1. 功能

经过以上的分析,花语 app 已经有比较清晰的定位和用户群体,因此可以进行功能的头脑风暴:拍照识别、攻略、上传壁纸、壁纸编辑、分享、收藏、下载、定位景点、鉴定、邀请、记录、足迹、消息、发现、集邮。

2. 内容

基本功能构想完毕后,把所有包含的内容进行归纳整理,筛除不合理的需求,挖掘用户的目标,找到用户真实的需求,匹配产品的定位。

经过反复的推敲与思量,花语 app 的核心功能在于拍照识别,壁纸编辑只是在满足基础需求之上所附加的非必要功能,如果加上壁纸编辑,整个 app 会显得非常累赘,因此把壁纸编辑这个功能筛除。而商业模式部分,则通过用户的搜索结果,为用户提供附近的花店,也可以接受花店的入驻。

3. 优先级

根据项目的资源,实现成本,需求的价值,定义这些需求实现的优先级。优先级的内容要尽可能放在用户明显使用的地方。

在马斯洛需求层次理论中,人类需求像阶梯一样从低到高按层次分为五种,分别是:生理需求、安全需求、社交需求、尊重需求和自我实现需求。

按照马斯洛原理,对功能进行分级,缺一不可的 app 核心功能是根基,应该放在用户最容易操作到的地方。而不重要的功能则考虑放到层级比较深的地方。

五、信息结构图

通过以上需求的整理,做出信息结构图。下图为花语 app 的信息结构图:

六、用例图

通过信息架构图,分析 app 里面的参与者(角色),做用例图。用例图是指由参与者、用例,边界以及它们之间的关系构成的描述系统功能的视图。以下为花语 app 的简单用例图。

七、流程图

流程图是产品设计的基本,可以保证产品的使用逻辑合理,在 app 中,流程图也叫业务流程图?;ㄓ?app 中的流程图可以分为很多???,现以主要的识别功能的流程图作例子。

八、中保真原型图

低保真原型图:一般产品经理做的原型图叫低保真原型图,也叫线框图,给 UI设计师以及开发看,其中的文字描述比较多,要列明所有的状态以及跳转到什么页面。

中保真原型图:所谓中保真原型图,是交互设计师或者 UI设计师做出来的原型图?;诙?app 界面的初步构想,严格按照设定的间距,并且合理布局元件位置,做出来的原型图比较接近高保真设计稿。

下图为几张花语 app 的中保真原型图。

九、交付UI设计师

当原型图通过了需求评审需求方确认以后,会交付到 UI设计师的手上,进行界面设计。下图为我的日常界面练习,也就是俗称的「高保真设计稿」。

结语

有很多朋友向我咨询,有时候回答得太空泛,没有实际项目做示例,难以讲述清楚整个流程。于是想到了用一个项目去讲,或许能更好理解。我的本职是 UI设计师,这是我其中一个练习项目。我认为 UI设计师不仅仅是做界面,而是多维度了解整个产品的全貌,它从哪里来,怎么实现,价值在哪里。只有理清楚这些,这个项目才是有意义的。

欢迎关注作者微信公众号:「牙线小姐」

图片素材作者:Gal Shir

「从0到1的产品设计流程」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏??裘夥炎匝缕?,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.www.gzwenyou.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.gzwenyou.com/actual-project-understanding-product-prototyping-process

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

优设专访 转场动效 设计师 扁平化设计 优设大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 海报设计 设计趋势 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里