中国投资网 百科 通过实战项目,从UI设计师角度认识产品原型

通过实战项目,从UI设计师角度认识产品原型

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.我要花很长时间写一篇文章。我需要想清楚文章的层次信息和图片的显示方式。毕竟这才能值得你的等待和支持。最近在公司接触的后台项目很多。我需要重新建立规范,做一个全新的界面设计。我会先熟悉和理清背景逻辑,再写这方面的相关文章。

战酷

作者:牙线姐姐

本文来自网络,不代表本站立场,转载请注明出处:https:

通过实战项目,从UI设计师角度认识产品原型

中国投资网后续将为您提供丰富、全面的关于通过实战项目,从UI设计师角度认识产品原型内容,让您第一时间了解到关于通过实战项目,从UI设计师角度认识产品原型的热门信息。小编将持续从百度新闻、搜狗百科、微博热搜、知乎热门问答以及部分合作站点渠道收集和补充完善信息。