首页
学习
活动
专区
工具
TVP
发布

制作UX流程图的技巧

UX流程图可帮助您将用户在网站或应用程序上完成任务或实现目标所需采取的步骤(用户流程)进行可视化展示。在今天的文章中,我们将介绍设计UX流程图的技巧及步骤。

UX流程图设计步骤

#1了解您的用户

设计有效的UX流程图始于用户-作为设计师,你应该首先明确:谁将使用该系统?首先进行用户研究和用户画像分析,因为这将帮助您定义目标受众及其需求。

接下来,考虑用户如何访问您的产品。这是引入入口点的时间。入口点(entry point)是用户首先到达站点/应用程序的方式,从而使他们可以通过站点流向最终目的地。看下面的用户流示例及其入口点:

如果一个产品有多个目标用户,则该产品可能会有多个入口点。定义了入口点后,您就可以开始探索用户如何使用UX流程图导航您的站点。

#2遵守组件标准

设计师有多种创建流程图的方法–笔和纸,以及使用Lucidchart等数字流程图工具,甚至是Justinmind等线框图工具。但是,创建数字流程图(与纸质流程图相反)的主要好处之一是,在线平台提供了大量免费的UI套件和资源以帮助加快流程。

创建数字流程图时,务必遵循标准流程图惯例。这将确保您的设计清晰且读者熟悉组件。如果您不熟悉流程图设计,我们建议您阅读业务流程模型文献,以熟悉标准组件和样式。例如,“开始事件(start event)”组件指示特定流从何处开始(即入口点)。“流量(flow)”组件用于表示用户必须到达某个目的地的方向。

#3坚持您的设计原则

规范的设计原则可帮助我们消除混乱,从而缩短思考过程的时间,从而改善用户体验。

设计界面时可以遵循的相同原理也可以在设计UX流程图时应用。以下是我们必须采用的三大UI设计原则:

使标签有意义(make labels meaningful)

标签是读者的生命帮助,因为它们在整个用户流程中引导着他们。最重要的标签是流程图的标题。尝试使用准确描述用户流所代表的标题。

明智地选择颜色(choose colors wisely)

UX流程图中颜色的主要目的应该是帮助读者识别和分组资源,并突出显示重要的用户操作(颜色编码),而不是样式。

与视觉结构一致

保持视觉结构的一致性可以帮助确保您的用户体验流程图易于遵循并且不会引起误解。

#4将所有内容放在一页上

如前所述,在设计过程的开始就定义流程很重要。在设计线框和原型时,我们会构建Web或移动产品将包含的每个界面。因此,将流程图保持在一页是一种很好的做法。这样一来,读者就可以尽可能轻松,舒适地设想从头到尾的流程。如果读者必须在多个界面上滑动,则他们更有可能分散注意力并失去动力。

显然,如果您的用户流特别长或很复杂,则将其保留在单个页面上可能不是一种选择。在这种情况下,您可能必须允许多个页面,或者考虑简化流程。

#5使用UX流程图进行更好的沟通

UI设计师,信息架构师,程序员和开发人员–每个人都可以在UX设计中发挥作用。

将UX流程图用作通信工具可能是一种方便的方法,可以根据团队中的每个人都可以理解并做出贡献来说明产品。如果您希望流程图设计对团队中的每个人都有用,那么您要确保您不关注视觉设计细节,而要关注系统如何根据用户的行为进行操作。您希望包括交互以及用户如何在产品中移动,以及前面提到的进入点和设计中的重要决策点。

#6 确保UX流程图设计中的可访问性

您的UX流程图可能是设计过程中迈出的第一步,它先于任何类型的用户测试。

具有有意义的标签是一个有助于基本设计感知的概念,但也可以帮助其他人和团队成员了解UX流程图的关键信息。除标签外,我们建议您使用流程图设计中使用的所有元素创建图例。其中包括表示导航的所有箭头和连接器,颜色编码背后的含义以及UX流程图的任何其他组件。

#7 考虑UX流程图的可读性

UX流程图很方便,但永远不要忘记,它们是大量信息的直观表示。包括进入和退出,用户角色,动作和反应,决策点,导航的要点……

因此,您始终希望流程图设计易于阅读和理解。带有标签,图例并与您的颜色和形状保持一致,将帮助人们专注于UX流程图试图说明的更抽象的概念。

您想确保所有设计人员,设计人员和产品经理都清楚自己的UX流程图。通过添加泳道(channel),可以帮助使流程图设计更加清晰。使用泳道区分产品的不同功能或不同的角色。这对于具有多个用户角色的产品特别有用。这应该使人们能够专注于设计的特定区域,并使UX流程图更易于浏览。

创建流程图时,请始终从左到右,从上到下显示数据,另一个小而重要的细节是您需要在UX流程图中阐明所有交叉。

您需要考虑到:每个箭头的路径是否完全清晰?步骤1导致步骤2或步骤Y?

取而代之的是开始使用跳线(line hops),以避免在屏幕和动作之间的流程和链接方面造成任何混淆。

总结

在设计过程开始时制作流程图可以减少误解设计规范和返工需求的风险。通过使用流程图,设计师可以:

在产品界面设计之前确保产品的使用流程

确保产品的基本功能和界面

检视用户的整体使用流程,并在项目设计前期进行优化

为团队设计成员和开发成员提供沟通辅助

感谢您的阅读:)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200506A0527Y00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券