发布时间：2021-12-12 分类： 电商动态
在工作了3年之后，我尝试了各种原型设计和布局，并致力于帮助设计师和程序员更好地理解需求。总结了我从14年到现在尝试过的几种原型模式，每种模式都有其优点和缺点。欢迎大家讨论如何更好地呈现原型（欢迎砖）。接下来，按时间顺序详细介绍。
PS：这篇文章只是关于原型地图布局。至于一些交互细节，你会写另一篇文章记录。欢迎关注〜
各种原型介绍
第一种：动态跳转类型
通过事件（例如点击，滑动等）在元素和页面之间来回跳转。所有交互指令都写在界面元素的注释描述中（蓝色图标）。如果要查看说明，则需要单击以查看说明。这种跳转原型需要匹配的需求文档来描述每个元素的状态，前提条件和操作指令。
这个原型图，大概是很多刚刚开始尝试的产品经理/交互设计师。当然，我也不例外。当我第一次开始工作时，我觉得使用axure来实现各种动态效果是一件非常酷的事情。我也认为这种动态跳转可以帮助开发人员更好地理解页面关系。
然而，它忽略了重要的一点，即开发不知道我们的产品之前的思维逻辑，所以当我得到原型时，我不知道界面上的哪些信息是可点击的，我不知道当发生时会发生什么我点击了。
优点
通过交互式效果，您可以完全体验页面之间的跳转过程。
缺点
这种原型有很多缺点。
浏览原型的人需要逐个点击以了解此页面具有哪些功能，这可能会导致功能缺失。 （这个问题确实发生在同一年。尽管有匹配的需求文档，但每个人都知道需求文档只能由产品人员自己查看。因此，通信成本无形地增加）;
在做原型时，各种效果都是浪费时间。它需要各种活动和动态小组合作才能达到一定的工作效率。
因为这些原型的用户体验非常糟糕，所以我决定平铺所有页面并围绕交互式描述，如下所示…
第二种类型：信息平铺环绕（多色版本）
首先，由于同一年没有杀死兄弟的发展。
回顾以前的原型，我不忍心直视。这种花里胡哨的原型，虽然详细描述了各种说明，但要向谁看，估计没有耐心阅读它。
所有交互指令都围绕在线框图并使用各种图标颜色。不同的图标和颜色代表不同的含义。在图中，粉红色箭头表示单击事件，绿色箭头表示说明文本，单击事件使用橙色文本。
优点
平铺显示的交互式描述，有效避免遗漏特征;
各种类型的信息通过不同的颜色区分，并且清楚且直观地区分不同类型的信息。
缺点
交互式说明使用了太多的颜色，乍一看，它感觉很乱;
在线框中使用太多颜色无法分辨界面信息的优先级。
这种原型地图解决了第一个缺失功能的问题，并且受到开发人员的欢迎。很明显，所有功能点都清晰直观地描述。这继续迭代几个版本。后来。一旦我在一个复杂的界面上面写了一篇密集的评论（上图），在实际的开发过程中，我发现了许多需要开发的问题，显然是在原型上编写的。但他们为什么忽视这些需求呢？我跑去和他们沟通，我收到的反馈是：哦，我没有看到它，没有注意这段内容。我记得当时我还很生气。我没有认真看待我辛勤工作的需要。后来，我想到了这些无聊的文件，加上丰富多彩的文字，给那些不想看的人。
为了解决交互描述的混乱问题，我决定尝试将所有指令逐个放在线框下，如下所示：…
第三种类型：信息上下平铺
写下在线框图下方的所有交互指令，并连接线框上的相关接口。
优点
界面看起来很清爽，所有的交互都集中在一起，有效地避免了缺少功能和界面的问题;
缺点
不直观。界面元素和交互的分离会影响搜索的效率。
在这个版本的原型之后，我立即收到了我的开发兄弟的反馈，说这种互动太直观了。我每次都要查看图片，然后再去下面找相应的说明，这很麻烦。它也容易出现相应的错误。通过这种方式，这种类型的原型图被放弃了。
那么，是否有一个既清晰又直观的原型，可以帮助开发阅读和阅读？
因此，结合以前原型的优点，以下版本…
第四种类型：信息平铺环绕（帧版）
移动电话的外框添加到所有接口;使用不同的灰色阴影，线框的颜色尽可能小;交互描述的颜色较少，灰度和文本大小用于优先排序;使用统一注释图标;
各种类型的交互规范
优点
整体感觉干净清新，各种信息都不完整;
在将移动电话的外边框添加到所有接口之后，它有效地避免了线框和交互式描述之间的混淆。并且可以清楚地看到手机上显示的效果，标记第一个屏幕信息;
交互解释统一规范，避免交互的互动;
线框颜色尽可能小，使用不同级别的灰色显示，信息优先级突出;
使用交互式说明编号。使用序列号识别当前页面上的关注点，以有效避免遗漏。
缺点
有时会出现线框和交互式指令不兼容的情况。开发中找不到在交互式描述上写入的[xxx]按钮的图标。单击[xx]热区，其中包括热区的范围。
总的来说，这种类型的原型已被开发人员认可，并被个人认为是优越的。因为原型图也是它自己的产品，所以它需要不断抛光，所以它最近已经过优化，如下所示…
第五种类型：信息平铺环绕类型（每个元素逐一标识）
在界面上，使用箭头标识每个模块的每个元素或交互描述。各种类型的信息显示在交互式描述中。
优点
快速定位元素的交互式描述;
描述交互的分类（如信息项，操作，状态，排序等），有效防止缺失需求，并有助于制定查看要求。
缺点
如果界面上有大量信息需要标记，可能会导致页面看起来有点混乱。
总结
每种原型都有其优点和缺点。在实践中，最重要的不是如何展示您的原型，而是与设计师和开发人员达成共识，以及什么样的原型将帮助他们了解需求。对于工作场所的新人，提醒每个人都要记住不要过度沉迷于页面动态，忘记原型的基本目的（清晰明了的界面逻辑）。
如上所述，我谈到了我自己的原型图的演变。原型图是我们工作中输出的重要文档之一，因此我们需要不断完善它，提高工作效率，更好地帮助开发人员了解需求。
谢谢你的耐心等待
