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