• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 超全面总结!如何画出专业的原型图?(下)

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

作者:PMIP 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,原型图,原型设计,经验分享等相关知识,PMIP希望在学习及工作中可以帮助到您

怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。文章分为上下两篇,阅读上篇内容→《超全面总结!如何画出专业的原型图?(上)》。

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

  • 原型图标注,画开发看得懂的图
  • 同一个页面展示所有的交互状态
  • 页面跳转关系图(不要做孤立的设计)
  • 流程图,梳理业务逻辑

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

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

  • 标注点的含义,发生的事件
  • 用脑图梳理所有对象和逻辑关系、状态
  • 模块化区分和标记

定义好每个标注点的含义和事件

在做交互稿标记之前,定义规范好每个标记的含义,形成统一的规范,使得团队成员易于理解。如,我比较喜欢用水滴表示标注的功能,用圆圈+箭头的形式来标识页面跳转关系。

用脑图梳理所有对象和逻辑关系、状态

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

模块化区分和标记

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

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

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

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

如下图,为微信消息列表页所有交互状态的列表呈现:

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

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

如在「美啊教育」中要增加一个评论功能,那么评论机制应该怎么与现有系统对象建立联系?在分析这个问题之前先看看评论和教程的关系,如下图:

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

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

用户—教程

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

教程—积分

  • 通过评论教程可以获得积分。
  • 积分可以免费兑换观看教程。

用户—积分

  • 积分可以刺激用户去评论。
  • 用户用积分可以获取商品,如优惠券等。

于是整个评论体系的页面关系图为(补充了部分可能存在的需求):

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

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

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

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

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

流程图包含以下内容:

  • 事项:用户要完成什么任。。
  • 角色:分别有哪些人会参与到流程中。
  • 信息传递:信息在整个过程中是如何传递的。
  • 异常:有哪些异常情况,如何处理。

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

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

泳道图

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

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

1. 明确角色

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

2. 各个角色要完成的任务

买家:买家收到商品不满意,可以在天猫上发起退货,填写退款申请。如果卖家同意退货,买家可将商品寄到卖家的收货地址,寄送方式可选择自行寄件或者上门取货。如果卖家收到货后,拒绝退款,买家可以申请客服介入。

卖家:处理买家退款申请。如果订单满足退货条件,将退货地址发给买家。卖家收到商品,退款给买家。

系统:判断买家收货状态;检测买家的退款申请的原因、金额等,生成退款记录;判断是否平台先垫付退款;将卖家地址发给买家;系统将买家上门服务申请发送给合作的物流公司;变更退款状态。

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

3. 角色交接

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

4. 阶段划分

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

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

整个泳道图如下:

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

「做原型图要知道的知识点」

  • 《高级设计师:如何用科学的方法做出专业的原型图?》
  • 《画交互原型方案前,你应该思考的三个

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2017-08-06条件注释判断浏览器(ie系列)
  • 2018-08-23学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 2018-08-23用好黄金比例,用协调自然的配比照亮你设计的UI
  • 2018-08-23高手怎么做设计?来看腾讯文档背后的品牌设计过程!
  • 2018-08-23换了很多家公司还是在打杂,问题究竟出在哪里?
  • 2018-08-23眼见不一定为实!全面总结设计中的障眼法
  • 2018-08-23实战经验!聊聊全链路设计和传统设计的流程差异
  • 2017-08-06UTF-8文件的Unicode签名BOM(Byte Order Mark)问题
  • 2017-08-06用户体验的76个体验点小结
  • 2018-08-23一秒做出8000张海报设计的「鲁班智能设计平台」是怎么工作的?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AI+AE教程!手把手教你做出Game boy的飞机大战游戏
    • 无印良品是怎么做设计的?来看看背后的流程!
    • 使用字符代替图片实现圆角或尖角效果研究
    • 优酷视频去30秒广告代码的两种方法
    • 超全面!色彩无障碍设计之「对比度」的探索
    • 从1.2亿次的点击中,苹果学到了这个提高用户体验的方法
    • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
    • 方便高效!五分钟看懂微信团队打造的新Sketch 插件WeSketch
    • 5个实操改稿案例,教你做出高质量的Banner设计!
    • 实测图片的HTTP请求

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有