簡書
本文通過還原簡書App原型的過程，進行了大量的交互設計。在原型製作過程中，幾乎實現了最常見的交互效果，主要包括：輪播圖、換一批、table切換、滑動開關、分享、toast提示、計數、清空、排序、置頂，還有各類函數、動態面板、中繼器的靈活運用，以及全局變量在跨頁面場景下的使用。本文將會分享實現這些交互效果的設計思路與方法，希望能夠幫助到有需要的同學在原型設計的道路上更上一層樓。
一、簡書是什麼
簡書是一個優質的創作社區,在這裡,你可以任性地創作,一篇短文、一張照片、一首詩、一幅畫……我們相信,每個人都是生活中的藝術家,有著無窮的創造力。這是官方對產品的最新定義與說明。
二、頁面結構
我們先來看一下簡書的頁面結構，App的底部包含了關注、發現、消息、我的四個主版塊，底部主導航中間插入了寫作入口，各一級導航又包含了若干二級界面，下面的這張腦圖大致梳理了頁面結構。（末端僅梳理到二級頁面這一層級，本文的原型僅還原到二級界面。）
頁面結構
三、交互設計
對於常用的鏈接跳轉、選中效果等一些非常基礎的交互屬性、交互動作的設置不做詳細說明。在正式開始設置交互動作前，需要提前繪製、擺放好相關的元件、做好界面佈局等準備工作，這些基礎必要的準備工作，在此也省略相關說明。下文內容主要聚焦於分享各類交互效果的設計思路及方法，並附上相關的設置截圖，設計思路的描述順序與交互效果一一對應。
3.1關注版塊
關注版塊主要包含關注、推薦關注、搜索和關注頁排序共4個頁面。
關注
交互效果
1）點擊頂部標籤，選中標籤，切換頁面內容；當點擊兩端的兩個標籤時，標籤欄進行了左右移動
2）頁面向上滾動時，標籤導航及頂部導航欄始終固定不動
設計思路
1）效果1：頂部標籤的切換效果，將頂部標籤設置為一個組，並給每個標籤設置選中狀態。為標籤設置鼠標單擊事件，單擊時，設置選中框（紅色矩形）的尺寸，移動選中框，將標籤設置為選中狀態，切換內容面板的狀態。中間5個標籤切換內容面板時，需要判斷之前是哪些標籤被選中的，以便確定動態面板切換時的滑動方向。
值得注意的是，默認將最左側的”全部關注“標籤設置為選中，點擊左右兩側的標籤時，需要在水平方向上移動整行標籤欄位置。
各標籤的交互設置如下圖所示：
標籤切換
2）效果2：將頂部導航及標籤全選設置為動態面板，屬性中設置固定到瀏覽器窗口，水平左邊距和垂直上邊距均為0，並勾選始終保持頂層。屬性設置如下圖所示：
頂部固定
推薦關注
交互效果：滑動頁面時，頂部導航欄始終固定在頁面的頂部
設計思路：將頂部導航欄相關元素轉換為動態面板，利用動態面板的位置固定屬性，從而實現導航欄的固定效果（屬性設置配圖參照上文）
搜索
交互效果
1）點擊換一批，更新熱搜詞
2）點擊歷史搜索詞右側關閉按鈕，搜索詞消失，下方的搜索詞自動向上補位
3）點擊清除歷史記錄時，歷史記錄內容消失
設計思路
1）增加一個動態面板，為每個狀態配置不同的搜索詞，點擊換一批按鈕，切換動態面板狀態
2）點擊清除按鈕，隱藏搜索詞，下方的搜索詞和清除歷史記錄向上移動
3）點擊清除歷史記錄，隱藏所有歷史搜索詞和清除按鈕
搜索頁交互
關注頁排序
交互效果
1）上下拖動關注項右側按鈕，可調整關注項順序
2）點擊“恢復默認”，還原初始排列順序
3）點擊返回或完成，跳轉至關注頁（不做思路分析）
設計思路
1）垂直拖動按鈕，上下移動關注項整欄內容（提前設定幾個全局變量，將關注項豎座標賦值給全局變量），接觸到某一關注項時，該關注項以上內容依次向上移動進行補位
2）點擊“恢復默認”，重新加載當前頁面
交互設置如下圖所示：
排序
恢復默認
3.2發現版塊
推薦
交互效果
1）banner圖下的分類導航可以左右滑動，為你推薦版塊可以左右滑動查看更多推薦作者
2）點擊推薦作者右側的換一換，系統更換推薦作者名單（交互的設置方法同上文搜索頁一致，下文不再描述）
3）點擊每一篇文章右側的興趣菜單，彈出興趣彈框，可以點擊選擇不感興趣，彈框關閉，後續系統將不在推送類似文章
設計思路
1）將分類導航、推薦作者轉換為動態面板，在屬性中選擇自動顯示水平滾動條。為了在視覺上保證看不到這個水平滾動條，可以在滾動條上覆蓋矩形框，矩形的填充和邊框線均為白色。
2）增加一個動態面板，為每個狀態配置不同的推薦作者，點擊換一換按鈕，切換動態面板狀態
3）點擊興趣按鈕，切換興趣標籤彈框的可見性；點擊興趣標籤彈框，隱藏興趣標籤彈框。
以上3個交互效果的設置如下圖所示：
推薦頁交互
關注的連載/專題
交互效果
1）從連載頁面點擊我關注的連載、專題頁面點擊我關注的專題均可以跳轉至此。
2）點擊頂部標籤或倒三角，彈出標籤分類彈框，點擊彈框中的菜單，彈框關閉，同步替換導航欄中的標籤，切換頁面內容。
設計思路
1）由於連載、專題頁面均可以跳轉至此，因此在加載頁面時，需要先判斷是從哪裡跳轉，這裡就需要用到全局變量。假設在連載頁面中，點擊我關注的連載時，全局變量OnLoadVariable為1；在專題頁面，點擊我關注的專題時，全局變量OnLoadVariable為2。關注的連載/專題頁面載入時，當全局變量OnLoadVariable為1時，頂部標籤的值為“只看連載”；當全局變量OnLoadVariable為2時，頂部標籤的值為“只看專題”。
2）點擊標籤或倒三角，逐漸顯示標籤分類彈框，彈框中對應的標籤被選中；點擊彈框中的標籤，替換導航欄標籤內容，移動倒三角到固定座標位置（水平移動），隱藏彈出菜單，替換下方頁面內容（可用動態面板存放頁面內容）
相關的交互設置如下圖所示：
全局變量賦值
標籤欄交互設置
3.3消息版塊
消息頁面的評論、喜歡和贊、關注、投稿請求、讚賞和付費、其他提醒、推送通知、查詢等均為跳轉，此處不做詳細說明。各頁面頂部的標題導航欄始終固定在頁面頂部，此交互效果可以利用動態面板的“固定到瀏覽器”屬性來實現，相關設置參照上文。
推送通知
交互效果：點擊各項右側開關按鈕，圓向另一側平滑移動，圓及下面開關背景的填充色均發生了變化。
設計思路：在設置交互事件之前，我們還需要做一些準備工作，需要對圓和開關背景設置一個選中效果，用來更換背景色。免打擾選中效果的背景色為紅色，其他項選中效果的背景色均為灰色。將免打擾以下部分的頁面設置為動態面板，面板主要用來顯示免打擾開啟和關閉狀態的頁面。
現在我們來設置開關的交互設計，即針對開關上的圓設置單擊事件。我們來分析下開關點擊的交互效果，點擊圓形開關時，改變圓和開關背景的選中狀態，圓沿著背景條向另一側滑動，免打擾設置相較於其他的開關多一個切換動態面板的狀態。交互設置如下圖所示：
推送頁交互設置
其他提醒
交互效果：點擊分享按鈕，頁面從底部向上滑動彈出分享渠道的面板，點擊分享彈框外的任意一處，分享彈框消失，跳轉至第三方社交渠道頁面。
設計思路：點擊分享按鈕，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。交互設置如下圖所示：
顯示分享彈框
值得注意的是需要將分享彈框轉換為一個動態面板，固定在瀏覽器底部，且默認為隱藏狀態，這樣才能夠保證分享彈框始終從頁面底部向上滑動。
3.4我的版塊
我的版塊包含了我的、設置、搜索、個人中心、我的積分、編輯個人資料、積分商城、公開文章、關注、粉絲、私密文章、收藏的文章、喜歡的文章、已購內容、我的專題、我的文集、關注的專題/文集/連載、我的錢包、簡書會員、瀏覽記錄、幫助與反饋共21個頁面。
我的
交互效果
1）點擊夜間模式按鈕，按鈕沿著背景條向另一側滑動，同時整個頁面的色調切換為黑色，頁面上的文字顏色變更為灰色；再次點擊按鈕，頁面樣式復原
2）點擊分享簡書，頁面從底部彈出分享彈框，點擊彈框中的微信或QQ等社交渠道，跳轉至第三方界面
3）垂直滑動頁面，導航欄始終固定在頁面頂部位置
設計思路
1）首先準備為頁面中所有的矩形框以及文字設置一套選中效果，包括切換夜間模式的按鈕及背景條。點擊按鈕時，按鈕沿著背景條向另一側移動，同時將按鈕、背景條以及頁面中所有的矩形框、文字等均設置為選中效果（默認均為未選中）；再次點擊按鈕，按鈕向另一側移動，按鈕、背景條以及頁面中所有的矩形框、文字等均設置為未選中效果。
2）點擊分享簡書，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。
3）將導航欄轉換為動態面板，在固定屬性中設置顯示位置並勾選始終保持在頂層。
個人中心
交互效果
1）點擊右上角更多按鈕，彈出菜單框。點擊菜單“添加到桌面”，toast提示“簡書：已添加”；點擊菜單“分享用戶”，頁面從底部向上滑動顯示分享彈框
2）向上滑動頁面，頂部導航背景色發生變化
3）點擊標籤動態、文章、更多，切換下方顯示內容
設計思路
1）為更多按鈕設置鼠標單擊事件，切換彈出菜單的可見性。點擊“添加到桌面”，顯示提示信息“簡書：已添加”，等待片刻，提示信息消失；點擊“分享用戶”，顯示分享彈框（將分享彈框設置為動態面板並隱藏）
2）為頁面設置窗口滾動事件，當窗口在垂直方向滾動距離≤100時不顯示頂部導航面板；100＜滾動距離≤450，顯示頂部導航動態面板的第一個狀態，動畫效果為逐漸；滾動距離＞450，顯示頂部動態面板的第二個狀態。（提前準備一個動態面板，用來作為頁面滑動時的頂部導航，並設置兩種狀態）
3）為動態、文章、更多3個標籤設置鼠標單擊事件，單擊時將標籤更改為選中狀態，移動標籤下方的下劃線，更換下方的頁面內容（將列表內容轉轉為動態面板，面板的3個狀態對應著3個標籤的內容）。同時同步更新頂部導航的選中狀態與下劃線移動位置。
更多菜單
顯示頂部導航不同的狀態
導航欄交互設置
積分商城
交互效果
1）頁面從右向左自動循環切換Banner圖
2）點擊右上角更多按鈕，下方顯示彈出框菜單，點擊菜單顯示對應的彈框界面
3）向上滑動頁面，導航欄始終固定在頁面頂部
設計思路
1）輪播圖：將輪播的幾張圖設置為一個動態面板，設置頁面載入事件，向左滑動自動循環切換動態面板的狀態
2）更多菜單：將彈出菜單所有內容轉換為一個動態面板，並固定在更多按鈕下方，菜單點擊後的彈框頁面轉換為一個動態面板。為更多按鈕設置單擊事件，切換彈出菜單的可見性；點擊菜單，隱藏菜單彈框，顯示對應的功能界面。
3）將頂部導航欄轉換為動態面板，設置瀏覽器固定屬性（設置截圖參照上文）
交互設計如下圖所示：
輪播圖
更多菜單交互
公開文章
交互效果
1）點擊公開文章，彈出文章類型選擇彈框，包含公開文章和付費文章，點擊文章類型切換頁面文章內容，彈框關閉，更換導航文字
2）點擊返回按鈕，返回至我的頁面
3）點擊搜索按鈕，跳轉至搜索界面
設計思路：這裡僅分析第一個交過效果，為頂部標籤導航設置鼠標單擊事件，單擊時，切換文章類型彈框的可見性；為彈框中的菜單設置鼠標單擊事件，單擊時，改變導航文本內容，切換頁面顯示內容，隱藏彈框。
彈框中的標籤切換
私密文章
交互效果
1）點擊公開文章，彈出文章類型選擇彈框，包含公開文章和付費文章，點擊文章類型切換頁面文章內容，彈框關閉，更換導航文字
2）點擊頂部編輯模式切換按鈕，按鈕滑動，按鈕及背景框顏色變化，toast彈框提示頁面進入編輯模式/預覽模式
3）點擊返回按鈕，返回至我的頁面（不做思路分析）
4）點擊搜索按鈕，跳轉至搜索界面（不做思路分析）
設計思路
1）為頂部文章類型標籤設置單擊事件，切換文章類型彈框的可見性；為彈框中的菜單設置鼠標單擊事件，單擊時，改變導航標籤內容，切換頁面顯示內容，隱藏彈框。
2）準備好兩個元件，即編輯模式按鈕和背景框，在分別設置選中屬性。點擊編輯模式按鈕，移動按鈕，切換編輯模式按鈕和背景框的選中狀態，顯示提示彈框，等待一段時間，提示框消失。
文章類型切換
已購內容&我的專題&關注的專題/文集/連載
交互效果：點擊導航欄下方的標籤分類時，被選中的標籤文字顏色發生改變，下方的下劃線跟隨移動，同時切換頁面內容
設計思路：給兩個標籤設置選中效果（默認選中左側標籤），並將它們設置為一組，為標籤設置單擊事件，單擊標籤時，標籤被選中，水平移動下劃線，同時切換內容動態面板。交互設置如下圖所示：
各頁面交互設置
簡書會員
交互效果
1）點擊右上角更多菜單，向下彈出菜單窗口。點擊複製，彈框關閉，頁面toast提示“已複製到粘貼板”；點擊在瀏覽器中打開，彈框關閉，頁面從底部彈出打開方式窗口；點擊分享，頁面從底部向上滑出分享渠道彈框
2）點擊會員、尊享會員，切換顯示會員權益和尊享會員權益內容
設計思路
1）點擊右上角按鈕，顯示菜單彈框；點擊複製，隱藏菜單彈框，頁面中央提示“簡書：已複製到粘貼板”，等待片刻，隱藏提示文字；點擊在瀏覽器中打開，顯示打開方式對話框；點擊分享，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。（交互設置截圖參照上文的積分商城）
2）添加一個動態面板用來存放會員權益、尊享會員權益的頁面內容，點擊會員、尊享會員，移動下方的下劃線，切換動態面板的頁面狀態。
瀏覽記錄
交互效果：點擊今日，查看今日瀏覽的文章列表；點擊更早，查看今日之前瀏覽的文章列表
設計思路：首先將文章列表設置為動態面板，將今日與更早這兩個導航設置為一個組，並設置相同的選中效果。點擊頂部導航時，選中導航，移動紅色下劃線，切換動態面板狀態。
我的積分、編輯個人資料、關注、粉絲、收藏的文章、喜歡的文章、我的文集、我的錢包、幫助與反饋、給簡書平分等頁面的交互效果大部分為跳轉鏈接，故不再贅述。設置、搜索等頁面的交互效果較少，且設計思路上文已做詳細說明。
3.5發佈
交互效果：正文中輸入內容時，頁面頂部提示輸入了xx字，進行正文內容的計數
設計思路：為正文設置文本改變事件，當文本改變時，利用this.text.length實現計數功能；當文本內容為空時，則停止計數為0
交互設置截圖如下所示：
文本改變事件
截止目前為止，關於簡書原型大部分的交互設計思路與方法都已經分享結束了，也感謝能夠耐心閱讀到這裡的同學，希望通過這篇大型的綜合案例能夠幫助大家掌握大部分交互效果的實現思路與方法，需要源文件的同學請關注並私信。
閱讀更多 努力拼搏的80後 的文章
