发布时间：2023-2-22 分类： 行业资讯
携程最近的迭代在交互和用户体验方面付出了很多努力，现在使用起来非常愉快。下面我们将携程APP订单评估页面作为切入点，专门查看携程前端显示屏。
首先介绍这个原型设计的亮点：
接下来，我们正式开始梳理携程APP订单评估页面的过程。首先，我们应该有一个认知，在订单评估页面之前的条目，应该是个人中心 - 我的订单，这个订单列表页面。在订单列表页面中的每个订单项目上，单击评级，将弹出相应订单的订单评估页面。有关这两页的信息，我只是梳理了一张包含两页信息的图片。如下所示。
一、订单列表页
订单列表页面，就像数据库的数据显示一样。订单信息栏清楚地向用户显示关键订单信息。显示所有订单信息字段。目的是让用户考虑自己如何使用订单，因此会有姓名，时间，酒店位置，床型，价格。和其他信息。订单操作功能是用户如何更方便地添加，删除和修改订单数据库。出现筛选功能是因为当用户订单数量很大时，第一次无法在列表页面上找到所需的订单，以及添加的功能点。
原型实现
首先，我们理清原型的概念，订单列表页面，必须有多个订单信息，因此您需要实现向下或向上拖动页面的操作。其余的是要注意原型的纵横比。
我们先设置一个架子，APP的外边框尺寸，我们选择尺寸为330 * 584，然后添加相应的顶部字段和顶部返回按钮。然后我们添加四个命令（确保无法完成布局，实现拖动操作）。
之后，我们需要为这四个订单添加交互。首先，让我们澄清一下上下拖动的想法。我们知道动态面板中存在一个名为“drag;”的交互案例，因此我们的拖动操作基于动态面板。我们创建了两个动态面板，两个面板嵌套在内部和外部，外层用作边框，内层用作内容。我们拖动边框使内容面板增加了上下拖动的交互情况，可以实现拖动操作。它是。
具体实现方法如下。选择所有四个订单并将其转换为动态面板，名为“内容”。创建一个名为“Border”的新动态面板，大小为315 * 490，然后将“Content”面板放在“Border”内，具体的嵌套关系如下所示。
接下来，我们为“Border”面板添加一个交互案例，选择“Drag”，添加一个交互案例，选择“Move”，然后选中“Contents”动态面板。原因是我们必须“内容”。拖动动态面板的内容。然后检查垂直运动并设置运动的上下边界。上边界的值为0，下边界的值为“边界”;动态面板的高度。在这里你需要添加动态面板高度的“边框”功能，首先在编辑值中添加一个局部变量，组件“border”，然后调用局部变量并获取其高度方法。具体方法如下所示。
保存之后，我们可以实现订单列表页面的拖动操作。
二、订单评价页
具体的订单评估页面，评估模块分为三类。一，酒店评分，评价维度是基于“房间卫生”，“周边环境”，“酒店服务”，“设备设施”，评价方式是给每个维度一个分数，分数值来自1-5分;第二种是旅行类型。选择携程的商务旅行，独自旅行，朋友和情侣之一。如果您没有所需的类别，可以选择其他类别。
其他人值得讨论。在某些APP互动中，选择“其他”互动。将弹出一个允许用户输入特定字段的文本框。这种方法值得商榷。从用户的角度来看，以前的选项别无选择。用户的耐心已经打了折扣。如果用户在填写其他选项后仍选择离开用户，则用户可以选择退出。进行了评估。
从代购源码网站的角度来看，之前的项目已经大大覆盖了用户可能的旅行目的地。也许前四项已覆盖95％，最后剩余的项目为5％。 95％的旅行类型可以由四个明确定义。存储标签用于以后的数据分析，这是另外5％。即使用户输入信息，也需要在自然语言之后处理代购源码网站以将其转换为有价值的数据信息。成本和回报比率将变得非常低。因此，该原型选择的交互是在选择“其他”之后，不会弹出文本框。
第三是文本评估，这是订单评估的最基本功能点。它通过用户的文本直观地传达用户的感受，方便其他用户了解真实情况。文本的质量必须与单词的数量有一定的关系，太少的单词不能让其他用户知道细节。因此，各种APP都会展示自己的，详细的方法，供用户写出更多的单词，携程的方法是根据单词的数量，给出相应的积分奖励。至少5个字; 5 - 49个字，10个奖励; 50字以上，30分奖励。这个前端的字数也将是这个原型的亮点。
原型实现
首先，我们需要实现前两个简单的原型设计，用户评分部分和旅行类型选择部分。两个块中使用的原理是相同的，并且通过动态面板的状态切换实现不同的状态切换。例如，我们拿出了巡演类型的例子。旅行类型有五种类型：商务旅行，单独旅行，朋友旅行，情侣旅行，以及其他五个类别，因此我们首先创建一个动态面板，其中添加了五个状态，分别命名。对于这五个类别。此外，顾名思义，名为“Initial”的状态是用户未单击任何按钮时的状态。具体结构如下图所示。
每个特定的状态，如“商务旅行”，需要将商务旅行按钮的样式改为与其他按钮不同，然后通过添加交互案例来连接每个状态“ldquo;鼠标点击”可以实现这种类型的旅行类型功能以及评分功能。
最后，让我们实现最困难的内容，即对单词数量的评估。如果我们想要实现顶级动画的实现，我们必须对Axure的功能使用有一些了解。该原型的核心是如何在文本框中表示字段长度的功能。我们可以在局部变量中指定组件文本，将其分配给文本框，然后通过全局变量中的length方法调用它。
我们来谈谈具体的操作。首先设置框架，这个单词计数评估函数，需要一个文本框和一个提示字段，提示字段会根据文本框中字段的长度提示不同的字段类型。
具体来说，当字段长度为0时，它会提示：至少5个字;场长1-4：会提示：加油！写x字得10分;场长5-14，会提示：太棒了！再写30个字来获得30分;该字段的长度大于15，你会被提示：太棒了！提交30分。因此，我们根据字段的长度将提示字段分为4类。根据这种分类方法，我们使用这4种类型的字段提示创建动态面板。
需要注意的一点是，上述“x”需要从组件库中拖动文本标签。我们需要动态修改此标记的值，以实现对单词数量的动态统计。字段的动态面板结构提示，如下图所示。
接下来，我们将在文本框中添加一个交互案例。我们选择“ldquo;当文本发生变化时，首先增加条件，根据组件的长度，显示“字段提示”&nd;动态面板的不同状态。具体操作如下图所示。
然后，我们将功能添加到上一个“1-4”状态和“5-14”中添加的两个文本标签中。状态。在状态“1-4”的情况下，我们在case1的情况下添加了交互：文本改变中的组件文本0< x< 5。当我将其命名为“word”时，选择设置文本并检查状态为“1-4”的文本标签。检查值后，选择下面的值并增加功能。 < p值='' >
我们首先添加一个局部变量，文本框的组件文本，引用文本框的字段，在下一个全局变量中，我们选择刚添加的局部变量，然后选择length方法，它指的是字段文本框的长度。由于我们的提示信息中的单词数量，“x字的所有差异可以得到10分”，因此我们必须从LVAR1.length中减去5。
具体步骤如下图所示。类似地，“5-14”状态的字段与上述方法相同，除了全局变量是使用15-LVAR1.length。保存后，我们的单词评估功能点被实现。
但是这还没有完成，因为评估信息的数据值，如果提交空字段，则对评估没有意义，所以在提交按钮时，做一个前端验证。当评分模块未完全填写分数或未选择旅行类型或字数少于5个字时，在所有三种情况下都不能提交评估信息。具体验证逻辑如下图所示。
出于同样的原因，对于每个评估维度，在验证时，应该将相应的字段信息反馈给用户以提示用户。具体方法是弹出toast浮动层，并在浮动层上给出不同的字段提示。该块可以通过动态面板实现。具体的动态面板结构如下图所示。这件作品并不难实现，也不会再花钱了。
资源共享
文章很长，有些地方很尴尬。如果您尚未看到退出，请感谢您的耐心等待。
百度网络磁盘链接:https://pan.baidu.com/s/1pK8Skpt密码：t4je
