发布时间：2021-4-12 分类： 行业资讯
交互式草案应该包括哪些内容？如何建立合理的交互式草案结构？
PS：本文适用于Axure软件生产的移动版，文档型交互式草案。
交互式草案应包括哪些内容？
如何建立合理的交互式手稿结构？
应该如何放置每个界面？
什么应该是一个清晰易读的设计描述？
据推测，作为一个新手，很难完全理解上述问题。事实上，绘制符合要求的交互式手稿并不困难。只要找一下前任的手稿，你就可以学到六十七。但是，由于大多数设计草案涉及公司机密并拥有强大的产权，因此通常很难达成。
今天，作者将通过“解释交叉引用模板”来解决上述问题。
1. 交互稿应该包含哪些内容?
交互式草案是否只需要包含设计？实际上并非如此。交互式手稿具有多种功能：设计显示，上下游协作，流程记录和版本管理。因此，交互式手稿通常至少包含以下部分：
封面：用于记录版本号，人员，时间等;
更新日志：记录交互式草稿更新的信息，方便他人查看，也保证规范;
设计过程：包含有关需求，设计数据记录和设计过程记录的信息。目的是使您的设计过程更加结构化，并促进回顾性设计和总结设计;
交互式草案：交互式草案的主体，包括流程图，界面图，设计描述等;
垃圾桶：用于存储丢弃的页面供以后使用;
2. 如何组织交互稿结构?
2.1. 交互稿结构依赖于产品信息架构
首先要注意的是“将所有接口放在一个画布上的非结构化交互式手稿”必定是错误的。这是许多新人经常犯的错误。因为这种方法无法适应大型手稿，开发人员很难在错综复杂的网格设计中找到信息。
交互式手稿的结构应根据产品信息结构建立。例如，下图是网易云音乐“本地音乐”模块的信息架构和交互式手稿目录，可以从产品信息架构中获得。可以发现，这种一对一的通信草案目录结构非常清晰易懂。
网易云音乐 本地音乐”模块
2.2. 交互稿结构原理
交互式手稿的结构应遵循“平台–页面–子页面”的原则（下图，此处提到的页面不是界面，而是指“单页交互式手稿”） 。每个页面中携带两种对象，一种是单个接口，另一种是接口过程（稍后解释）。
交互式草案结构原则
我们来举个例子吧。假设有一个“简单的网易新闻”，那么它的结构可能是这样的：
交互式草案结构示例
什么是“单一界面”，“，界面流程”简单易懂，如上图中的“主页”，您只需要在交互式稿件的页面中放置一个页面; ”线框可以是，即所谓的“单一界面”。那么界面流是什么？实际上，它是一系列多个接口（如下所示）
界面流程
在什么情况下需要使用“过程接口”？所有APP都由接口组成，接口上的元素可以分为三类：内容，门户和功能。 “界面流程”通常用于阐述“功能”。原因是功能不同于内容和入口。该功能一般需要“一系列操作”，如登录功能和搜索功能。在这一点上，我们将再次看一下上述情况，这将很容易理解。
3. 每一页交互稿应该是怎样的?
3.1. 每页交互稿的内容
通常，每页交互式草稿都应包含以下内容：
单页交互式草案示例
页面标题：建议使用“固定在浏览器顶部”功能使页面标题驻留;
界面标题：在交互式手稿中相互索引很方便，例如< ;;返回界面B state&rdquo ;;
界面：建议的尺寸为360 * 640px，长页面也可以自己扩展高度;
设计描述：逻辑关系，元素状态，小微流都可以放在设计规范中;
流程线：描述接口之间的逻辑关系，可以使用该软件带来流程线;
链接：指向其他页面，例如分支进程，它将方便开发人员阅读;
作者信息：这是设计师的付款方式，也方便他人联系设计师;
3.2. 网格系统的应用
一旦确定了页面内容，内容的布局也很重要。如果布局不好，那就太乱了。如何处理布局问题？我提供了一个“网格系统”。 （下图），这可以使设计草案“秩序感”。具体来说，在Axure的“布局 - 网格和辅助线 - 网格设置”（40px是320,360,640,1080&hellip的公约数）中设置40px网格，然后尝试将所有元素保留在网格中。使用后，您会发现您的交互式草稿井井有条，美观。
带网格系统的交互式草稿
3.3. 每页只展示一条流程
每个交互式手稿页面最多应包含一个“过程界面”，额外的过程可以打开一个新的子页面。因此，每页交互式草稿都保证是点状或线性的，而不是网状的，因为网状交互式手稿难以阅读，读者需要滚动浏览双向滚动屏幕才能找到信息（下图是一个反例）。
网格界面结构难以阅读
4. 清晰易读的设计说明
设计说明是将设计信息传递给开发学生的重要部分。如果设计描述杂乱，对应性差，可读性差，开发学生很容易“不想看”（很常见），最终导致设计恢复。在一天结束时，沟通成本和其他问题。
设计描述示例
良好的设计描述应遵循以下原则：
统一位置：在作者提供的交互式手稿模板中，所有设计说明都在界面下方;
相应的关系是明确的：标记点必须在界面上标记（顶部的绿点），对应于每个设计描述;
提供标题：标题可以大大提高发展学生的阅读效率和视觉搜索效率;
规律性：多个设计指令的布局应该整齐有序，使用上面提到的网格很容易实现;
接近界面：由于设计规范是用于界面的解释，它离界面不能太远，否则很难看到界面。如果设计说明太多，可以使用动态面板进行携带（交互式模板模板有演示）;
5. 最后几个有用的提示
最后，添加一些作者认为重要的提示：
大多数发展学生倾向于“不想看交互式手稿”，其中大部分是因为交互式手稿不可读;
交互式草案是“工程图纸”，而不是“设计草图”，所以信息越详细越好越好;
每次更新交互式草稿时，都应将其写入“更新日志”并在页面上标记更新。否则，它将给开发和QA学生带来很大麻烦;
尽量不要经常更新交互式手稿，这会给你一种“不专业”的印象，会给自己养成坏习惯;
字体使用PingFang SC-Regular和PingFang SC-Semibold，测量最佳兼容性。重要的是要知道大多数开发学生只有系统默认字体;
