本文通过还原简书App原型的过程，进行了大量的交互设计。本文也将会分享实现这些交互效果的设计思与方法，希望能够帮助到有需要的同学，在原型设计的道上更上一层楼。
本文通过还原简书App原型的过程，进行了大量的交互设计。在原型制作过程中，几乎实现了最常见的交互效果，主要包括：轮播图、换一批、table切换、滑动开关、分享、toast提示、计数、清空、排序、置顶，还有各类函数、动态面板、中继器的灵活运用，以及全局变量在跨页面场景下的使用。
本文将会分享实现这些交互效果的设计思与方法，希望能够帮助到有需要的同学，在原型设计的道上更上一层楼。
简书是一个优质的创作社区，在这里你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家,有着无穷的创造力。
我们先来看一下简书的页面结构，App的底部包含了关注、发现、消息、我的四个主版块，底部主中间插入了写作入口，各一级又包含了若干二级界面，下面的这张脑图大致梳理了页面结构。（末端仅梳理到二级页面这一层级，本文的原型仅还原到二级界面。）
对于常用的链接跳转、选中效果等一些非常基础的交互属性、交互动作的设置，不做详细说明。在正式开始设置交互动作前，需要提前绘制、摆放好相关的元件、做好界面布局等准备工作，这些基础必要的准备工作，在此也省略相关说明。
下文内容主要聚焦于分享各类交互效果的设计思及方法，并附上相关的设置截图，设计思的描述顺序与交互效果一一对应。
效果1：顶部标签的切换效果，将顶部标签设置为一个组，并给每个标签设置选中状态。为标签设置鼠标单击事件，单击时，设置选中框（红色矩形）的尺寸，移动选中框，将标签设置为选中状态，切换内容面板的状态。
中间5个标签切换内容面板时，需要判断之前是哪些标签被选中的，以便确定动态面板切换时的滑动方向。
值得注意的是：默认将最左侧的“全部关注”标签设置为选中，点击左右两侧的标签时，需要在水平方向上移动整行标签栏。
效果2：将顶部及标签全选设置为动态面板，属性中设置固定到浏览器窗口，水平左边距和垂直上边距均为0，并勾选始终保持顶层。
设计思：将顶部栏相关元素转换为动态面板，利用动态面板的固定属性，从而实现栏的固定效果（属性设置配图参照上文）。
1）由于连载、专题页面均可以跳转至此，因此在加载页面时，需要先判断是从哪里跳转，这里就需要用到全局变量。
2）点击标签或倒三角，逐渐显示标签分类弹框，弹框中对应的标签被选中；点击弹框中的标签，替换栏标签内容，移动倒三角到固定坐标（水平移动），隐藏弹出菜单，替换下方页面内容（可用动态面板存放页面内容）。
消息页面的评论、喜欢和赞、关注、请求、赞赏和付费、其他提醒、推送通知、查询等均为跳转，此处不做详细说明。各页面顶部的标题栏始终固定在页面顶部，此交互效果可以利用动态面板的“固定到浏览器”属性来实现，相关设置参照上文。
设计思：在设置交互事件之前，我们还需要做一些准备工作，需要对圆和开关背景设置一个选中效果，用来更换背景色。免打扰选中效果的背景色为红色，其他项选中效果的背景色均为灰色。将免打扰以下部分的页面设置为动态面板，面板主要用来显示免打扰和关闭状态的页面。
现在我们来设置开关的交互设计，即针对开关上的圆设置单击事件。我们来分析下开关点击的交互效果，点击圆形开关时，改变圆和开关背景的选中状态，圆沿着背景条向另一侧滑动，免打扰设置相较于其他的开关多一个切换动态面板的状态。
值得注意的是：需要将分享弹框转换为一个动态面板，固定在浏览器底部，且默认为隐藏状态，这样才能够分享弹框始终从页面底部向上滑动。
我的版块包含了我的、设置、搜索、个人中心、我的积分、编辑个人资料、积分商城、公开文章、关注、粉丝、私密文章、收藏的文章、喜欢的文章、已购内容、我的专题、我的文集、关注的专题/文集/连载、我的钱包、简书会员、浏览记录、帮助与反馈共21个页面。
首先准备为页面中所有的矩形框以及文字设置一套选中效果，包括切换夜间模式的按钮及背景条。点击按钮时，按钮沿着背景条向另一侧移动，同时将按钮、背景条以及页面中所有的矩形框、文字等均设置为选中效果（默认均为未选中）；再次点击按钮，按钮向另一侧移动，按钮、背景条以及页面中所有的矩形框、文字等均设置为未选中效果。
为更多按钮设置鼠标单击事件，切换弹出菜单的可见性。点击“添加到桌面”，显示提示信息“简书：已添加”，等待片刻，提示信息消失；点击“分享用户”，显示分享弹框（将分享弹框设置为动态面板并隐藏）。
为页面设置窗口滚动事件，当窗口在垂直方向滚动距离≤100时不显示顶部面板；100＜滚动距离≤450，显示顶部动态面板的第一个状态，动画效果为逐渐；滚动距离＞450，显示顶部动态面板的第二个状态。（提前准备一个动态面板，用来作为页面滑动时的顶部，并设置两种状态）
为动态、文章、更多3个标签设置鼠标单击事件，单击时将标签更改为选中状态，移动标签下方的下划线，更换下方的页面内容（将列表内容转转为动态面板，面板的3个状态对应着3个标签的内容），同时同步更新顶部的选中状态与下划线移动。
轮播图：将轮播的几张图设置为一个动态面板，设置页面载入事件，向左滑动自动循环切换动态面板的状态。
更多菜单：将弹出菜单所有内容转换为一个动态面板，并固定在更多按钮下方，菜单点击后的弹框页面转换为一个动态面板。为更多按钮设置单击事件，切换弹出菜单的可见性；点击菜单，隐藏菜单弹框，显示对应的功能界面。将顶部栏转换为动态面板，设置浏览器固定属性（设置截图参照上文）。
这里仅分析第一个交过效果，为顶部标签设置鼠标单击事件，单击时，切换文章类型弹框的可见性；为弹框中的菜单设置鼠标单击事件，单击时，改变文本内容，切换页面显示内容，隐藏弹框。
为顶部文章类型标签设置单击事件，切换文章类型弹框的可见性；为弹框中的菜单设置鼠标单击事件，单击时，改变标签内容，切换页面显示内容，隐藏弹框。
准备好两个元件，即编辑模式按钮和背景框，西野花梨在分别设置选中属性。点击编辑模式按钮，移动按钮，切换编辑模式按钮和背景框的选中状态，显示提示弹框，等待一段时间，提示框消失。
交互效果：点击栏下方的标签分类时，被选中的标签文字颜色发生改变，下方的下划线跟随移动，同时切换页面内容。
设计思：给两个标签设置选中效果（默认选中左侧标签），并将它们设置为一组，为标签设置单击事件，单击标签时，标签被选中，水平移动下划线，同时切换内容动态面板。
点击右上角按钮，显示菜单弹框；点击复制，隐藏菜单弹框，页面中央提示“简书：已复制到粘贴板”，等待片刻，隐藏提示文字；点击在浏览器中打开，显示打开方式对话框；点击分享，页面从底部向上滑动显示分享弹框，显示时设置灯箱效果。（交互设置截图参照上文的积分商城）
添加一个动态面板用来存放会员权益、尊享会员权益的页面内容，点击会员、尊享会员，移动下方的下划线，切换动态面板的页面状态。
设计思：首先将文章列表设置为动态面板，将今日与更早这两个设置为一个组，并设置相同的选中效果。点击顶部时，选中，移动红色下划线，切换动态面板状态。
我的积分、编辑个人资料、关注、粉丝、收藏的文章、喜欢的文章、我的文集、我的钱包、帮助与反馈、给简书平分等页面的交互效果大部分为跳转链接，故不再赘述。设置、搜索等页面的交互效果较少，且设计思上文已做详细说明。
设计思：为正文设置文本改变事件，当文本改变时，利用this.text.length实现计数功能；当文本内容为空时，则停止计数为0。
截止目前为止，关于简书原型大部分的交互设计思与方法都已经分享结束了，也感谢能够耐心阅读到这里的同学，希望通过这篇大型的综合案例能够帮助大家掌握大部分交互效果的实现思与方法。
由于完成这项工程的工作量较大，因此打赏的同学，将优先发送源文件，请大家不要随意往外扩散，希望大家能够理解。
人人都是产品经理（）是以产品经理、运营为核心的学习、交流、分享平台，集、培训、招聘、社群为一体，全方位服务产品人和运营人，成立8年举办在线+期，线+场，产品经理大会、运营大会20+场，覆盖北上海广深杭成都等15个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里分享知识、招聘人才，与你一起成长。
本文由 325游戏（m.325games.com）整理发布