交互稿结构原则
我们举个例子，假设有一个“简版的网易新闻”，那么它的结构可能是下图这样的：
交互稿结构示例
什么是“单界面”、“界面流程”？单界面相对容易理解，比如上图中的“首页”，就只需要在交互稿的这一页中放置一张“首页”的线框图即可，也就是所谓的“单界面”。那么界面流程是什么呢？其实就是多个界面的串联图（如下图所示）
界面流程
什么情况下需要使用“流程界面”呢？所有APP都由界面组成，而界面上的元素可以归为3类：内容、入口、功能。“界面流程”一般用来阐述一项“功能”。究其原因，功能与内容和入口都不同，功能一般需要“一连串操作”，比如登录功能、搜索功能。此时我们再看上面的案例，就会很容易理解了。
3. 每一页交互稿应该是怎样的？
3.1. 每页交互稿的内容
一般而言，每一页交互稿应当具备以下几项内容：
单页交互稿示例
- 页面标题：建议使用“固定在浏览器顶部”功能让页面标题常驻；
- 界面标题：方便交互稿中的互相索引，比如“回到界面B状态”；
- 界面：建议尺寸为360*640px，长页面也可自行延伸高度；
- 设计说明：逻辑关系、元素状态、小微流程，都可以放在设计说明中；
- 流程线：说明界面间逻辑关系，可使用软件自带流程线；
- 链接：指向其他页面，比如支线流程，开发同学阅读起来会很方便；
- 作者信息：这是设计师的落款，同时也方便他人联系设计师；
3.2. 网格系统的应用
确定了页面内容后，内容的布局也很重要。布局不好就会显得乱糟糟的，怎么处理布局问题呢？笔者提供一个“网格系统”（下图），可以让设计稿很有“秩序感”。具体而言，在Axure的“布局-栅格与辅助线-网格设置”中设置间距为40px的网格（40px是常见界面尺寸320、360、640、1080…的公约数），然后尽量保证所有的元素贴齐网格即可。使用后你会发现自己的交互稿变得尽然有序，且美观很多。
