本文通过还原简书App原型的过程，进行了大量的交互设计。本文也将会分享实现这些交互效果的设计思路与方法，希望能够帮助到有需要的同学，在原型设计的道路上更上一层楼。

本文通过还原简书App原型的过程，进行了大量的交互设计。在原型制作过程中，几乎实现了最常见的交互效果，主要包括：轮播图、换一批、table切换、滑动开关、分享、toast提示、计数、清空、排序、置顶，还有各类函数、动态面板、中继器的灵活运用，以及全局变量在跨页面场景下的使用。

本文将会分享实现这些交互效果的设计思路与方法，希望能够帮助到有需要的同学，在原型设计的道路上更上一层楼。

简书是什么？

简书是一个优质的创作社区，在这里你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家,有着无穷的创造力。

这是官方对产品的**定义与说明。

页面结构

我们先来看一下简书的页面结构，App的底部包含了关注、发现、消息、我的四个主版块，底部主导航中间插入了写作入口，各一级导航又包含了若干二级界面，下面的这张脑图大致梳理了页面结构。（末端仅梳理到二级页面这一层级，本文的原型仅还原到二级界面。）

交互设计

对于常用的链接跳转、选中效果等一些非常基础的交互属性、交互动作的设置，不做详细说明。在正式开始设置交互动作前，需要提前绘制、摆放好相关的元件、做好界面布局等准备工作，这些基础必要的准备工作，在此也省略相关说明。

下文内容主要聚焦于分享各类交互效果的设计思路及方法，并附上相关的设置截图，设计思路的描述顺序与交互效果一一对应。