发布时间:2019-10-23 分类: 电商动态
交互式草稿是交互设计者的主要输出。在实际工作中,交互设计师的主要职责是根据产品提出的不同要求,以交互式手稿的形式呈现交互计划。此外,交互程序将流经产品,UI,开发,测试学生,因此成为他们判断交互设计师能力的重要基础。因此,可以说交互式程序的质量将成为交互式设计者能力的重要表现之一。
为了绘制高质量的交互式手稿,一方面要有正确有效的方法来设计和分析需求,然后根据分析中形成的设计思想进行设计;另一方面,交互式手稿需要有完整的结构。反映交互设计师的专业性。下面,我们来看看如何确保交互式手稿的完整性并防止信息丢失。
交互稿的「目标用户」
谈谈交互式草稿,让我们来看看交互设计师的工作流程:
交互设计人员接收产品经理的要求。在与产品讨论之后,首先需要对要求进行设计分析。
分析后,您可以开始绘制交互式草稿。
交互式草稿完成后,将其交给UI学生进行界面设计,然后对开发和测试开发学生的学生进行测试。
由此可以看出,交互式原稿文档的主要“目标用户”是产品,UI,开发和测试。事实上,仔细想想,交互设计师的作用是赋予“清楚说话”的功能:
产品同学需要知道这个交互式手稿是否包含所有功能点。
UI同学需要知道此功能中包含哪些接口,每个接口的元素是什么,以及元素的状态是什么。
开发和测试学生需要知道过程是什么,以及页面元素将如何反应。
因此,所有上述信息都必须包含在交互式草案中。重要的是要了解交互式草稿的目标用户擅长绘制高质量的交互式草稿。
交互稿的必备信息
上面我们提到了交互设计师制作的交互草案是谁。让我们总结一下,上面提到的交互式草案中必须包含的信息是:
界面显示完整的过程。
界面中的界面和元素显示了所需的所有功能点。
界面中元素的各种状态。
操作后元素的效果。
对于第一点显示完整的过程,如果这个功能比较复杂,过程较长或者过程中的逻辑较多,可以附上流程图,方便产品,开发,测试学生理解;对于一般相对简单的功能,基于您使用的交互式草图的映射工具分为以下两种情况:
如果您使用的是Sketch,则可以在一张图片中平铺所有界面。 UI和开发人员可以通过图中的主界面获取该过程。如果您使用Axure,建议在Axure中使用。页面只显示一个接口或分支进程(优点是它可以完全显示接口或分支进程的各种状态,显示非常清晰),此时,进程由左侧的树结构表示Axure的一面,如下图所示:/p>
△树结构示例
对于第2,3和4点,我们可以通过遍历来遍历过程和界面。遍历的方法是从头到尾看你自己的交互式手稿,注意它是否包含要求中的所有功能点;每个界面中的每个元素,如果用户点击,它会做出什么反应(颜色是否变化你需要激活吗?等等)?点击后要转到哪个页面?如果没有网络,你应该展示什么?以下是您的摘要:
按钮和图标通常包含三种状态:默认状态,单击状态和单击后的状态。
用户操作后可能出现的异常情况:无响应,无网络,无数据,数据量大,网络速度慢,无缓存,数据过期,状态变化(如城市变更),首次使用(新手启动)。
这是每个人都要做的案例(如下所示)。在此示例中,左侧的树结构反映了主流。由于需求过程的设计有更多的逻辑,最后附有“流程图”模块,以方便学生的开发和测试。在页面中,仅显示“我的Yidingying详细信息”页面的各种状态和结果。
交互稿的附属信息——项目概述
在交互式草稿的第一页上,您可以添加主题“项目概述”以显示需求的基本信息和迭代描述。一方面,添加项目页面的概述可以记录交互的修改,并且在问题发生时很容易追溯;另一方面,使互动草案更专业是改善互动草案的好方法。
△项目概述示例
交互稿的附属信息——设计分析
有一些要求。如果需求本身相对较大且涉及的人员更复杂,您可以将部分设计分析添加到交互式草案中。这有助于您更好地了解互动的设计方式。因为它被放置在设计草案中,而不是需要显示设计分析的特殊PPT,设计分析只需要放置最核心的信息,包括:场景分析,产品目标,用户目标,如下例:
△设计分析实例
以上总结了应该包含在完整的交互式草案中的元素,我希望能够帮助每个人。