赞助商
立即赞助

超全面总结!如何画出专业的原型图?(下)

交互设计3年前 (2021)更新 流光
4.1K 0 0

怎么样原型图才是业的原型图呢?文章总结一经验,希望对你有所帮助。文章分为上下两篇,阅读上篇内容→《超面总结!何画出业的原型图?(上)》。

本篇文章(原型下篇)主要内容:

  • 原型图标注,画开看得懂的图
  • 个页展示所有交互状态
  • 页面跳转系图(要做孤立的设计)
  • 流程图,梳理业逻辑

一. 原型图标注,画开发看得懂的图

首先明确原型图标注是谁看,谁最关心原型标准呢?般而言,开发和设计最关心原型图标注,开发最关心是边界条件、页跳转关系,而设计最关心有页和功能遗漏,如反馈状态和空页。画出功能所有交互状态,晰显性化表示交互状态是作为交互或品基本功。个好标注满足以下几个条件:

  • 标注点的含义,生的件
  • 用脑图梳理所有象和逻辑关系、状态
  • 模区分和标记

定义每个标注点的含义和件

在做互稿标之前,定义规范每个标的含义,形成统一的规范,使得团成易理。,我比喜欢用水滴表示标注的功能,用圆圈+箭头的形式来标识页面跳转关系。

超全面总结!如何画出专业的原型图?(下)

用脑图梳理所对象逻辑关系、状态

下面的原型图标注以饿了么商家详页结算订单例,先用思维脑图梳理功能状态,这样能避免遗漏一些界条件。

超全面总结!如何画出专业的原型图?(下)

模块化和标记

梳理好状后再在型图上写产品用例,每个功能做成一个模块,有利于往后的维护和迭代,例如下面是饿了的订结算功能。

超全面总结!如何画出专业的原型图?(下)

超全面总结!如何画出专业的原型图?(下)

超全面总结!如何画出专业的原型图?(下)

超全面总结!如何画出专业的原型图?(下)

超全面总结!如何画出专业的原型图?(下)

超全面总结!如何画出专业的原型图?(下)

二. 在同一个页面展示所有的交互状态

很多的开发和设计,没有很多耐心看原图上的各种标注,特别是时间一长,标注就非多。如果是做版本的迭代,一定要做好标注的版本区分,他们第一眼看到当前版本要做的事情。如果是特别复杂的功,尽量在一个页面上显示有的交互状态,避免在看原图时有遗漏。有时候测试验收阶的很多坑,各种状态遗漏,实是由于前期没有做好标注引起的。

下面以消息列表页为例(梳理思路用脑图是一个好习惯),先用脑图画出所有的状,补齐所有交互状,后面再画的候效率会高多。

超全面总结!如何画出专业的原型图?(下)

如下图,为消息列表页所有交互状的列表呈现:

超全面总结!如何画出专业的原型图?(下)

三. 页面跳转图(不要做孤立的设计)

页面跳转图,从户的视角,系统看流程的合性。页面流程图有助于梳页面之间的系。交互设计师或品经理在工作,很容易把个功能做成「孤岛型功能」,即这个功能跟其他功能没有立联系,跟其他功能是孤立关系。

如在「美」中要增一个评论功,那么评论机制应该怎么与现有系统对象建立联系?在分析这个问题之前先看看评论和程的系,如图:

超全面总结!如何画出专业的原型图?(下)

程中可看到相评论,评论系统与程之间已建立联系,但只是单线的系。

再美啊这个产品中,还有什对象是可以跟评论建立系的?假如,为了刺激用户去评论,可以用积奖励的方式,当用户评论教程后,可以获取一定的积,即教程—积通过评论建立了系,跟现有的积兑换优惠券、商品也是有系的,于是建立了用户—教程,教程—积,用户—积的关系,整个积体系不再是孤立的功能。

超全面总结!如何画出专业的原型图?(下)

户—程

  • 用户去评论教程。
  • 教程分可以帮助用户筛选出更优质教程。

教程—积分

  • 通过评论程可获得积分。
  • 积可以免费兑换观教程。

用户—积分

  • 积分可以刺激用户去论。
  • 用户用积分以获取品,优券等。

于整论体系的页面关系图(补充了部分可能存的需求):

超全面总结!如何画出专业的原型图?(下)

四. 流程图,梳理业务逻辑关系

画流程图是产品经理的基本功,产品需求也是流程上的需求。画流程图的目的有以下点:

  • 确保产流程的合性。
  • 有效传达需求。
  • 检验异常分支。

在画流程图过程中,切勿遗漏异常状,产品经理一比较关心主要流程,可是开发同学在写代码,要做条件边界判断,这个条件边界即为异常情况。测同学在写测用例,要穷尽所有的景,包括正常景和异常景,否则出了问题,是要背锅的……为了避免开发和测同学不断询问你边界条件,最好在交付交互稿之前用流程图梳理出来。

常用的流程图分单向流程图泳道图(涉及到多角色),单向流程图一般描述单一角色完某任务的整体过程,如登录注册过程、支付流程、填写资料。

流程图包含以下内容:

  • 事项:用户完什么任。。
  • 角:分别有哪人参与到流程中。
  • 信息传递:信息在个过程是如何传递。
  • 异:有哪些异情况,如何处。

如快手登录注册流程,先来梳理思路:

  • 项:用户要完成快手的登录注册。
  • 色:普用户。
  • 信息传递:在触发登录注册框时,获取户的注册信息,检验手机验证码,联通讯录数据,获得第方登录数据。
  • 异常:最近登录过该如何理?机号无效该如何理?机号已注册该如何理?

超全面总结!如何画出专业的原型图?(下)

泳道图

除要明确项、角、信息传递、异常等内容,在画复的泳道图之前,要明确参与角,梳理出不同的角要完成的任务,各个角之间的接,整个流程的阶段划分。

如天猫退货流程图作图思路:

1. 明确色

参与色有:买家、系统、卖家、客服。

2. 各个色要完成任务

买家:买家收到商品不满意,可以在天猫上发起退货,填写退款申请。如卖家意退货,买家可将商品寄到卖家收货地址,寄送可选择自寄件或者上取货。如卖家收到货后,拒绝退款,买家可以申请客服介入。

卖:处退款申请。如果订单满足退货条件,将退货地址发给。卖收到商,退款给。

系统:判断买家收货状;检测买家的退款申请的因、金额等,生成退款记录;判断是否先垫付退款;将家地址发给买家;系统将买家上门服申请发送给作的物流公;变更退款状。

客服:客服介入,判断方责任。

3. 角色交接

买家将退款申请发送给系统,系统发送给卖家,卖家处理退款申请,卖家将退址发送给买家,买家寄件给卖家,卖家收退款。如卖家拒绝退款,买家申请客服介入,客服处理买家或卖家的责任。

4. 阶段划分

了方便理解整流程,小编把流程分5阶段:

  • 买家发起退货申请。
  • 系统处理买家申请。
  • 卖家处理退货申请。
  • 买家寄件卖家。
  • 处退款。

个泳图如下:

超全面总结!如何画出专业的原型图?(下)

欢迎关注作者微信公众号:「PMIP」

超全面总结!如何画出专业的原型图?(下)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在互联网产品圈里,用户体验一直是被格外推崇,几乎每一个产品经理都会把用户体验挂在嘴上。即便是一个产品菜鸟也会在言谈间...
交互设计
设计师们要求没有 PRD 不开工,于是产品经理问了我一个灵魂问题:如果他把 Demo、文案和逻辑都写完了,还要交互设计师干什么...
交互设计
作为设计师的我们,在思考设计实现方案的时候一定记得从业务逻辑出发,多跟运营以及产品沟通,挖掘到更多的需求,这样才能更...
ui设计
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
随着技术的发展,我们常常会觉得,如果想要做好产品必须遵循新的规则。实际上,这并不是真的。人类本身并没有我们想象中变化...
Eugen Eşanu
我们正式走入下一个10年。在设计和开发之间,在体验和功能之间,我们将会使用不同的工具和服务来协调、弥合、融汇。在这次推...
干货合集
之所以喜欢这篇文章,并将它翻译出来,其原因是文中的那些动画打动了我,仔细思考每一个动画都能让自己产生很多联想和灵感,...
交互动画
页面跳转在 APP 中属于最常见,也是最基础的一个交互细节点。我们常见的跳转方式有直接跳转、左右跳转、上下跳转、翻转、联动...
交互设计