B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

2023-05-29 0 469

可视化文件格式该是不是写呢?那个难题不而已初学者在问,在工作上要负责管理可视化难题的商品副经理、雕塑家,都在苦恼那个难题。第一集该文就从基本上重新认识、辅助工具选择和制做过程出所部分文本来为大家传授可视化文件格式要是不是写,快来看哈哈。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

今天要撷取的,是前台和海外华人里几乎每晚都有人问的可视化文件格式该是不是写的难题。不而已想往可视化雕塑家方向发展的初学者,还有工作上要负责管理可视化难题的商品副经理、雕塑家,都对它存在大批的疑点。

因此他们在那时这篇撷取里完成一次深入细致的普及教育。

一、可视化文件格式的基本上重新认识

1. 可视化文件格式是什么

可视化文件格式,是这份用以表明工程项目可视化方式、文本、准则的表明文件格式,也叫 DRD ( Design Requirement Document )。

在过去的撷取中,他们有表明过,B端工程项目会包涵大批的可视化文本,须要后期绘出可视化蓝本来展现和证实可视化计划。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

假如是非常简单的较大型工程项目,或成形商品的小插值,因此这样的联络人图确实就不足以抒发可视化的企图和计划了,写太多注解文本反倒会不合方法论提高观看者的知觉成本。

但是,假如工程项目和展现的业务流程文本,方法论十分复杂,包涵十分多的快捷键和状态,因此仅靠蓝本和联络人是当然不如的,加进更多的Grignols表明就变得十分有必要性了。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

同时在项目组协同场景中,就须要将这些文本制做成这份规范化的 “文件格式”,用以进行统一的展现、存储、存档。

因此做可视化仅靠画可视化蓝本是不如的,“文件格式” 就助于的输入丰硕成果。

2. 它和商品文件格式的差别

在商品侧(非开发),文件格式就有好几类:

商业需求文件格式:BRD,Business Requirement Document市场需求文件格式:MRD,Market Requirement Document商品需求文件格式:PRD,Product Requirement Document可视化表明文件格式:DRD,Design Requirement Document设计规范化文件格式:DGD,Design Guidline Document
B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

BRD 和 MRD 是一个商品副经理行业内部也在反复科普讨论的东西,和他们没多大关系可以暂时忽略。设计规范化文件格式 DGD 大家应该也有概念,比较容易辨识,也不须要在这里强调。

而商品需求文件格式 PRD,是和可视化文件格式最撞脸的文件格式类型。它们的文件格式规格、样式几乎一致,还包涵大批界限模糊、相互交叉的文本范畴,会对初学者的理解造成很大的不便。

要理解商品文件格式和可视化文件格式的核心差异,就得从他们各自的工作职能说起,商品副经理的主要产出是解释商品要做的功能和方法论,所有的蓝本和联络人的目标都是为了表明功能本身。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

部分商品副经理会 “顺带” 在那个基础上增加可视化的元素,以及相关的表明。这恰恰是难题的关键所在,因为商品副经理制做商品蓝本的过程是可以覆盖一部分可视化信息的,因此很多雕塑家也天真的认为可视化文本是应该由商品来出的。

互难题下面,商品副经理往往选择直接跳过,只把功能描述清楚,剩下的就交给可视化雕塑家还是 UI 雕塑家来完成具体的可视化计划。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

因此,可视化文件格式就是在商品文件格式的基础上,进行可视化文本的补充,专注于表明工程项目的可视化文本,让雕塑家和前端开发可以更直观得理解后续的工作文本。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

来自 UEDART 的付费文件格式,案例地址:http://vip.uedart.com/interactive.html

可视化文件格式和商品文件格式是相互独立和补充的,当商品文件格式无法完成对商品可视化的有效表明时,他们就应该选择输入独立的可视化文件格式,来提升工程项目协同的效率。

二、可视化文件格式的辅助工具选择

1. 主流的可视化文件格式辅助工具表明

主流的可视化文件格式输入有三种方式:

Axure 和墨刀是用以制做商品蓝本的软件辅助工具,也是目前在商品副经理、可视化设计行业中应用最广泛的蓝本辅助工具。

它的主要优势,在于可以比较方便的制做可可视化的组件、联络人、导出。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

当然,光制做蓝本图并不能叫可视化文件格式,它们还提供了比较全面的文本标注、文本记录、图形绘出的功能。

这就可以让他们完成蓝本绘出以后,结合页面结构的管理,加进可视化文件格式所需的其它信息,并最终输入文件。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

而在一些比较传统的行业或外包领域,使用的记录文件格式往往要使用 Word 或 PPT(方便开会演示或要打印)。这就要在蓝本完成以后,导出蓝本图例,并使用这些文件格式软件进行文本的记录和联络人。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

受限于 Word、PPT 的布局限制(强行分页),使用它们做可视化文件格式是十分难受的,并且这些文件格式须要保存到本地,存在各种文件格式版本管理的难题。

因此还有另一部分也希望使用普通文件格式格式记录,并满足云端同步、存储、版本管理的项目组,就会使用 Wiki 类的辅助工具来制做可视化文件格式。如语雀、飞书、Confluence、Notion 等辅助工具。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

假如而已一些比较小的工程项目插值、一次性使用的可视化文件格式,使用前两种方法都可以胜任。而真正大型、系统性的可视化文件格式,往往都使用项目组内部的 Wiki 进行创建和管理。和设计稿不同,这些使用了内部账号或须要内网访问的文件格式资料,是不会没事发到网上来撷取的,这也是在网上找不到完整可视化文件格式的主要原因。

2. B端雕塑家的可视化文件格式辅助工具建议

和你们网上可以找到的大多数可视化设计干货不同,我即不推荐你们使用 Axure/墨刀 来画蓝本,也不推荐用它们或普通文件格式、Wiki 的形式来输入可视化文件格式。因为:

—— 太低效了!

商品副经理和可视化雕塑家的主要产出物就是文件格式,自然可以耗费比较多的精力和时间去制做蓝本和编写文本。而 UI 雕塑家的主要工作肯定是最终的视觉界面和交付,因此用最复杂的方法去制做可视化文件格式,显然是不合理的。

同时还要提一句,Axure/墨刀 等软件用以制做一般的线框图蓝本,效率实在是太低了。且绝大多数情况下的页面跳转、可视化都是可以忽略不做的。而且随页面增加,它的左侧导航层级、数量会十分庞大,导致查找和浏览的效率进一步降低。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

我始终都建议直接使用你们正在用的云端 UI 设计软件直接绘出商品、可视化蓝本并输入文件格式,如即时设计或 Figma。原因包涵:

速度快:能用 Axure 五分之一的时间完成所有蓝本绘出可复用:做好的蓝本方便复用,而且可以直接在蓝本上完成后续设计可视化性:对于抒发可视化业务流程所需的基础跳转和动效都能满足更自由:一些须要复杂Grignols结合的表明方式不再受到普通文件格式布局限制

比如下面这样的蓝本案例,就可以通过一个简单的链接快速撷取出去,或者加进项目组成员自由查看。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

在我过去长期的实践体会中,这种方式是优势最明显、效率最高、最易懂,也符合 UI 雕塑家工作须要的。假如工程项目中有其它因素要求,你们也可以选择前面的方式输入。

任何文件格式的目标都是为了书面记录和让看的人更容易理解他们要抒发的信息,不要被固定的方法局限住,要努力去探索适合项目组当前情景的方式。

三、可视化文件格式的制做过程

1. 文件格式框架结构制定

前面把基本上的信息聊完了,这里就来具体讲讲可视化文件格式应该如何进行输入。

当然,输入可视化文档前须要先理解可视化是什么,可视化设计的具体设计文本和步骤。可视化文件格式是对你已经设计出来的计划的书面记录,你不能在对可视化一无所知的情况下强行编写文件格式。

可视化文件格式制做首先要证实文件格式的记录文本和文件格式结构。

记录文本指的是你在该文件格式准备放哪些可视化文本进去,并不是每次工程项目设计都要把工程项目所有页面和业务流程可视化都重做一遍。

比如一次中等规模的插值,新增几个通用的列表页面,调整了一些细节字段,增加了一个功能业务流程。因此文件格式重点记录文本肯定就是业务流程而不是所有页面。毕竟通用的列表页和细节更改,在商品需求评审阶段就可以完整的表明,而功能业务流程则不行。

假如是全新的工程项目,包涵数十上百个页面。把所有业务流程、页面的可视化文本全部表现出来的工作量是顶不住的,在绘出蓝本的过程中,你就会发现有大批的重复页面、业务流程和可视化。因此制做文件格式就要有目的性的对重复的文本进行合并,以及只保留重要的页面和业务流程。

具体该放什么要考虑工程项目的实际情况,须要雕塑家自己评估。除此以外,标准的可视化文件格式里面会包涵背景介绍、编辑日志、文本图例、业务业务流程、名词表明、页面结构等等。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

这些 “文绉绉” 的细节,并不是必备的,你可以根据当前情景自己决定须要加哪些。比如工程项目、业务背景前面的商品需求已经讲清楚了,业务业务流程、名词表明项目组成员也都了如指掌的时候,因此这些页面模块就完全没有放的必要性。

并且,基于前面对放置文本的考虑,结构的顺序并不一定要类似下计划例,完全按照商品的导航目录来走。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

因此,根据一个中等规模的插值工程项目,我会制定一个这样的一级文件格式结构:

基本上信息:工程项目的简单信息,快速目录,参与人信息等基本上组件:涉及的相关组件展现和可视化准则表明蓝本一览:本次插值涉及的所有页面蓝本和联络人一览业务流程介绍1:业务流程1的所有页面、状态、表明展现业务流程介绍2:业务流程2的所有页面、状态、表明展现业务流程介绍3:业务流程3的所有页面、状态、表明展现

每个1级文件格式结构对应 UI 软件中的 Page 目录,力求所需的 Page 数量越少越好,而不是像 Axure 的做法一样密密麻麻的。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

结构可以根据复杂程度做进一步的细分,它像写该文的大纲一样,帮助他们提前规划好后续完成文件格式所需的文本和工作量。

2. 关于联络人和标注信息

有了结构,就要在对应的 Page 中填充文本了。其中一般的文本介绍、业务流程图、思维导图,只要正常输入或将导出的图例黏贴进来就可以。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

而针对具体的可视化文本,业务流程表明上,则重点处理联络人和标注表明。比如下面是我自己在课程演示中的一个简单的可视化业务流程演示案例。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

在 UI 软件中,制做联络人其实是很简单的事情,只要画出一个直线,再设置箭头和尾部图形、描边色彩和粗细即可。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

然后,将该线段的图层放置在画布以外,起点放置在触发可视化的区域之中,终点尖头则紧贴目标画布的边缘(不用特意延伸进画布内)。假如使用水平、垂直的方式连接两个画布,那就可以双击进去加进锚点制做 90 度的折角。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

联络人的应用是十分简单的操作,不要舍近求远通过插件或是其它的一些功能来实现。而除此以外,我在文件格式中加进的表明性文本主要有两种,可视化事件和可视化准则。

可视化事件代表了联络人的两个页面是如何被触发跳转的,因此我会在线段中帖一个文本卡片,表明触发的条件和可视化操作是什么。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

然后,就是页面或业务流程中的可视化细则,包涵两个部分,数字标签和对应文本注解。它们都是用 Auto layout 可以快速制做出来的组件,每次要做备注的时候,只要复制标签到页面上,设置对应的数值,再将右侧的文本卡片复制到页面旁边,再加上对应的数字、文本信息即可。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

在设计软件中,画布的自由度极高,你想是不是备注和加进文本都没关系,只要在文本翔实的基础上保证 —— 项目组成员能看懂,就是这份优秀的交互文件格式。多在绘出过程中和同事沟通,优化展现的做法,可以避免很多会出现的难题,进一步加速他们的制做效率。

3. 文件格式的项目组协同应用

将文件格式全部做完以后,最终就是关于交付和协同的难题了。

既然他们使用线上的 UI 软件来完成可视化文件格式的制做,因此文件设置公开访问权限,再撷取链接自然是最简单的办法。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

但每次工程项目撷取个网页链接,或者并行有好几个工程项目,须要其它成员自己去收藏网址,也是挺麻烦的。因此尽量充分应用软件中的项目组协同功能,通过创建一个项目组,加进成员,让他们自行查看当前文件目录中的可视化文件格式。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

查看过程中,项目组其它成员可以通过评论的功能对可视化文本进行纠错、提问、建议,方便他们进行优化改进。

B端UI设计师的交互文档应该怎么写?美女图集:让美女模特除了性感迷人之外,还多了几分仙女气

通过这种简单高效的文件格式协同模式,他们可以十分快得完成整体可视化文本的定稿,并开始后续的工作。

再回到前面的话题,他们是 UI 雕塑家,不是全职可视化设计。蓝本文件格式输入完了,下一步可是要做视觉界面的,因此可视化文件格式就可以不用管了嘛?

可视化文件格式的最佳状态是 —— 应用最终界面图例表明可视化文本

也就是当他们把所有页面文本设计完成后,强烈建议将界面的展现和可视化文件格式进行整合。除了前端和商品可以看到最终的可视化落地效果外(有时候最终设计和前面的可视化不一致),还可以直接通过那个文件格式查看界面数值标注,而不用往返于可视化和设计文件格式来回切换,这才能让文件格式作用最大化。

四、结尾

以上就是关于可视化文件格式的相关表明,下一篇,他们会聚焦在和表单有关的可视化干货撷取。

他们下篇再见。

本文由 @超人的电话亭 原创发布于人人都是商品副经理,未经许可,禁止转载。

题图来自Unsplash ,基于 CC0 协议。

该文观点仅代表作者本人,人人都是商品副经理平台仅提供信息存储空间服务。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务