专栏首页无原型不设计关于流程图设计,你需要Get的几点必备知识

关于流程图设计,你需要Get的几点必备知识

流程图(Flow Chart)这个概念对很多人来说并不陌生,但如果让你定义或者举例说明什么是产品流程图,恐怕还是有难度的。或许诸如“用户体验”、“交互设计”、“逻辑关系”等词会像走马灯般闪现在你的脑海中,但这是流程图的全部内容吗?很显然并不是。

作为流经整个系统的信息流的图形代表,流程图说白了就是表示先做什么、后做什么,也就是“开始,结束,行动,状态与判断”的组合。根据核心业务及达成目标的不同,又可以将流程图分为四种类型:产品流程图、业务流程图、操作流程图及页面跳转流程图。在几乎所有的产品设计中,页面流程图都发挥着关键且不可替代的作用。

一、关于页面流程图

顾名思义,页面流程图是用来展示页面之间的跳转逻辑关系,描述在什么条件下、做了什么事情以及所带来的后续操作。对设计师及产品经理而言,页面流程图是细化工作量的基础,不仅能直观地发现潜在的“地雷”、进行全局/系统化的思考,而且能帮助聚焦于用户目标与任务的完成,制作及调整修改的成本也低。

相较于单纯的功能列表,页面流程图也更易被你的开发工程师所接受,它在评估工作量、开展代码工作及反射功能逻辑等方面,都可以作为重要的参考依据。那如何才能绘制出既能把事情讲清楚,也能把页面交代清楚,同时又让大家感觉舒服的页面流程图呢?下面小编总结了一些技巧及心得,不妨一起来看看。

二、绘制页面流程图

总体来讲,大致能分为以下三个步骤:

第一步:验证idea并优化功能、优先级|开始前

俗话说“好的开始是成功的一半”。同理在流程图绘制中,也需要提前做好“思想”准备,其中验证自己的idea是否靠谱以及明确用户将如何参与使用十分重要。设计想法的靠谱程度,可以结合目标用户群体、用户价值以及用户体验来进行验证。同时,需要对用户的实际操作进行预想,从而优化功能点及其中的流程。最终明白我们要做什么,为哪些人做,主要的功能是哪些,功能之间是怎么样的流程。这里以国外作品集网站Behance上的设计师Anny Zhang的设计为例:

第二步:从第一个初始页面绘制|进行中

在知道了系统应该具有的功能、提供的内容之后,现在需要将这些功能及内容巧妙地分配到不同的页面中去。页面中会包含链接、按钮、表单等元素,在经过用户的触发后,会跳转到其他的页面上。同时,页面之间会有链接线进行连接,具有不同的状态及属性,最终表现用户不同的操作指令下、不同页面的流转关系。

可能听起来会比较复杂,但其实就像讲故事一样,绘制流程图最简单的方式是从第一个初始页面开始。过程中,不必纠结于细分用户的类型、猜想用户也许根本用不到哪些操作,而是根据穷举各项操作,假设判断用户若点击什么就会到哪里。这里以一个叫做Gogobot的原型例子为例,它便是以Home页为初始页开始页面的流程展示:

古人有云“君子善假于物也”。无论你是专业知识过硬、即使用Word也能随手画出amazing的流程图的设计大咖,还是尚且处于懵懂中的设计菜鸟,一款好用的工具能起到锦上添花或雪中送炭的作用。这里小编提的两个精美的页面流程图例子,都是用Mockplus这款原型工具制作出来的,除了提供精美的外观外,它还可以做到:

-即时生成(点击软件顶部工具栏的“流程图”图标,即可一键快速生成);

-展示全部或任意多个页面的流程图;

-智能生成流程链接线,展示页面的批注信息;

-支持一次导出页面流程图,方便快捷。

第三步:页面结构及内容的反复调整|结束后

完成了初步的绘制后,还需要通过自己不断审查、团队内部反复确认,将最符合用户、团队及自己预期的设计idea落地。除了逻辑及交互关系外,页面的整体结构是否合理也很关键。这里Mockplus也提供了一键切换脑图设计模式的功能,可以快速规划及调整需要的模块,对于项目的整体功能进行演示讲解,同时支持导出基于图表的图片,便于PRD文档的筹划。

戳这里,了解更多Mockplus的酷炫功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • UX术语详解:任务流,用户流,流程图以及其它全新术语

    ? 用户体验拥有一长串专业的术语和可交付内容。当在线查看UX相关职位描述时,所罗列的这类术语更是全面繁多。而且,随着时间的流逝和它们自身的不断演变,其中很大一...

    奔跑的小鹿
  • 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻、数据、比分和直播。原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的...

    奔跑的小鹿
  • UX术语详解:任务流,用户流,流程图以及其它全新术语

    以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

    奔跑的小鹿
  • 天冷了,企业级业务架构设计可以给你“煲鸡汤”!

    架构设计的核心是确定结构和关系,因此,它是一个抽象度较高的方法论,而抽象度较高也意味着它具有更广泛的适用性。企业级业务架构设计也是如此,除了给企业做整体能力规划...

    用户6900693
  • 干货!产品经理职责:如何对产品进行数据分析?

    1、Query 这是一切搜索或者类似产品的质量提升源泉没有之一 //至少我是这么认为的。 看了Query你才能知道用户真的在你这里干什么,于是就会理解了“访谈里...

    CDA数据分析师
  • IdentityServer4实战 - 基于角色的权限控制及Claim详解

    晓晨
  • 游戏数据分析基本思路与方法

    用户1756920
  • 探秘|国产手机报告 :得用户者得天下,如何抢占用户心智?

    如果说过去大量用户很容易被像素、价格、配置、外观等某些因素吸引,而成为“友商”的购买者。那在产品同质化严重的今天,消费升级,用户希望你更懂TA,享受到更差异化的...

    灯塔大数据
  • 腾讯云安全组学习笔记

    有很多小伙伴一直很疑惑安全组的作用,而很多时候,安全组确实不会秒级生效,让很多人都非常的疑惑,其实只是大家没有去看安全组的文档:https://clou...

    相柳
  • ​如何做“设计尽职调查”——发掘投资机会的独特视角

    T客汇官网:tikehui.com 原文作者 | Ekaterina Gianelli 译者 | 李哲 ? 风投公司通常都会应用尽职调查来评估潜在的投资机会...

    人称T客

扫码关注云+社区

领取腾讯云代金券