本文通過還原簡書App原型的過程，進行了大量的交互設計。本文也將會分享實現(xiàn)這些交互效果的設計思路與方法，希望能夠幫助到有需要的同學，在原型設計的道路上更上一層樓。

本文通過還原簡書App原型的過程，進行了大量的交互設計。在原型制作過程中，幾乎實現(xiàn)了最常見的交互效果，主要包括：輪播圖、換一批、table切換、滑動開關、分享、toast提示、計數(shù)、清空、排序、置頂，還有各類函數(shù)、動態(tài)面板、中繼器的靈活運用，以及全局變量在跨頁面場景下的使用。

本文將會分享實現(xiàn)這些交互效果的設計思路與方法，希望能夠幫助到有需要的同學，在原型設計的道路上更上一層樓。

簡書是什么？

簡書是一個優(yōu)質的創(chuàng)作社區(qū)，在這里你可以任性地創(chuàng)作，一篇短文、一張照片、一首詩、一幅畫……我們相信，每個人都是生活中的藝術家,有著無窮的創(chuàng)造力。

這是官方對產品的最新定義與說明。

頁面結構

我們先來看一下簡書的頁面結構，App的底部包含了關注、發(fā)現(xiàn)、消息、我的四個主版塊，底部主導航中間插入了寫作入口，各一級導航又包含了若干二級界面，下面的這張腦圖大致梳理了頁面結構。（末端僅梳理到二級頁面這一層級，本文的原型僅還原到二級界面。）

交互設計

對于常用的鏈接跳轉、選中效果等一些非常基礎的交互屬性、交互動作的設置，不做詳細說明。在正式開始設置交互動作前，需要提前繪制、擺放好相關的元件、做好界面布局等準備工作，這些基礎必要的準備工作，在此也省略相關說明。

下文內容主要聚焦于分享各類交互效果的設計思路及方法，并附上相關的設置截圖，設計思路的描述順序與交互效果一一對應。

1. 關注版塊

關注版塊主要包含關注、推薦關注、搜索和關注頁排序共4個頁面。

（1）關注

交互效果：

1. 點擊頂部標簽，選中標簽，切換頁面內容；當點擊兩端的兩個標簽時，標簽欄進行了左右移動。
2. 頁面向上滾動時，標簽導航及頂部導航欄始終固定不動。

設計思路：

效果1：頂部標簽的切換效果，將頂部標簽設置為一個組，并給每個標簽設置選中狀態(tài)。為標簽設置鼠標單擊事件，單擊時，設置選中框（紅色矩形）的尺寸，移動選中框，將標簽設置為選中狀態(tài)，切換內容面板的狀態(tài)。

中間5個標簽切換內容面板時，需要判斷之前是哪些標簽被選中的，以便確定動態(tài)面板切換時的滑動方向。

值得注意的是：默認將最左側的“全部關注”標簽設置為選中，點擊左右兩側的標簽時，需要在水平方向上移動整行標簽欄位置。

各標簽的交互設置如下圖所示：

效果2：將頂部導航及標簽全選設置為動態(tài)面板，屬性中設置固定到瀏覽器窗口，水平左邊距和垂直上邊距均為0，并勾選始終保持頂層。

屬性設置如下圖所示：

（2）推薦關注

交互效果：滑動頁面時，頂部導航欄始終固定在頁面的頂部。

設計思路：將頂部導航欄相關元素轉換為動態(tài)面板，利用動態(tài)面板的位置固定屬性，從而實現(xiàn)導航欄的固定效果（屬性設置配圖參照上文）。

（3）搜索

交互效果：

1. 點擊換一批，更新熱搜詞。
2. 點擊歷史搜索詞右側關閉按鈕，搜索詞消失，下方的搜索詞自動向上補位。
3. 點擊清除歷史記錄時，歷史記錄內容消失。

設計思路：

1. 增加一個動態(tài)面板，為每個狀態(tài)配置不同的搜索詞，點擊換一批按鈕，切換動態(tài)面板狀態(tài)。
2. 點擊清除按鈕，隱藏搜索詞，下方的搜索詞和清除歷史記錄向上移動。
3. 點擊清除歷史記錄，隱藏所有歷史搜索詞和清除按鈕。

（4）關注頁排序

交互效果：

1. 上下拖動關注項右側按鈕，可調整關注項順序。
2. 點擊“恢復默認”，還原初始排列順序。
3. 點擊返回或完成，跳轉至關注頁（不做思路分析）。

設計思路：

1. 垂直拖動按鈕，上下移動關注項整欄內容（提前設定幾個全局變量，將關注項豎坐標賦值給全局變量），接觸到某一關注項時，該關注項以上內容依次向上移動進行補位。
2. 點擊“恢復默認”，重新加載當前頁面。

交互設置如下圖所示：

2. 發(fā)現(xiàn)版塊

（1）推薦

交互效果：

1. banner圖下的分類導航可以左右滑動，為你推薦版塊可以左右滑動查看更多推薦作者。
2. 點擊推薦作者右側的換一換，系統(tǒng)更換推薦作者名單（交互的設置方法同上文搜索頁一致，下文不再描述）。
3. 點擊每一篇文章右側的興趣菜單，彈出興趣彈框，可以點擊選擇不感興趣，彈框關閉，后續(xù)系統(tǒng)將不在推送類似文章。

設計思路：

1. 將分類導航、推薦作者轉換為動態(tài)面板，在屬性中選擇自動顯示水平滾動條。為了在視覺上保證看不到這個水平滾動條，可以在滾動條上覆蓋矩形框，矩形的填充和邊框線均為白色。
2. 增加一個動態(tài)面板，為每個狀態(tài)配置不同的推薦作者，點擊換一換按鈕，切換動態(tài)面板狀態(tài)。
3. 點擊興趣按鈕，切換興趣標簽彈框的可見性；點擊興趣標簽彈框，隱藏興趣標簽彈框。

以上3個交互效果的設置如下圖所示：

（2）關注的連載/專題

交互效果：

1. 從連載頁面點擊我關注的連載、專題頁面點擊我關注的專題均可以跳轉至此。
2. 點擊頂部標簽或倒三角，彈出標簽分類彈框，點擊彈框中的菜單，彈框關閉，同步替換導航欄中的標簽，切換頁面內容。

設計思路：

1）由于連載、專題頁面均可以跳轉至此，因此在加載頁面時，需要先判斷是從哪里跳轉，這里就需要用到全局變量。

• 假設在連載頁面中，點擊我關注的連載時，全局變量OnLoadVariable為1；
• 在專題頁面，點擊我關注的專題時，全局變量OnLoadVariable為2。
• 關注的連載/專題頁面載入時，當全局變量OnLoadVariable為1時，頂部標簽的值為“只看連載”；
• 當全局變量OnLoadVariable為2時，頂部標簽的值為“只看專題”。

2）點擊標簽或倒三角，逐漸顯示標簽分類彈框，彈框中對應的標簽被選中；點擊彈框中的標簽，替換導航欄標簽內容，移動倒三角到固定坐標位置（水平移動），隱藏彈出菜單，替換下方頁面內容（可用動態(tài)面板存放頁面內容）。

相關的交互設置如下圖所示：

3. 消息版塊

消息頁面的評論、喜歡和贊、關注、投稿請求、贊賞和付費、其他提醒、推送通知、查詢等均為跳轉，此處不做詳細說明。各頁面頂部的標題導航欄始終固定在頁面頂部，此交互效果可以利用動態(tài)面板的“固定到瀏覽器”屬性來實現(xiàn)，相關設置參照上文。

（1）推送通知

交互效果：點擊各項右側開關按鈕，圓向另一側平滑移動，圓及下面開關背景的填充色均發(fā)生了變化。

設計思路：在設置交互事件之前，我們還需要做一些準備工作，需要對圓和開關背景設置一個選中效果，用來更換背景色。免打擾選中效果的背景色為紅色，其他項選中效果的背景色均為灰色。將免打擾以下部分的頁面設置為動態(tài)面板，面板主要用來顯示免打擾開啟和關閉狀態(tài)的頁面。

現(xiàn)在我們來設置開關的交互設計，即針對開關上的圓設置單擊事件。我們來分析下開關點擊的交互效果，點擊圓形開關時，改變圓和開關背景的選中狀態(tài)，圓沿著背景條向另一側滑動，免打擾設置相較于其他的開關多一個切換動態(tài)面板的狀態(tài)。

交互設置如下圖所示：

（2）其他提醒

• 交互效果：點擊分享按鈕，頁面從底部向上滑動彈出分享渠道的面板，點擊分享彈框外的任意一處，分享彈框消失，跳轉至第三方社交渠道頁面。
• 設計思路：點擊分享按鈕，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。

交互設置如下圖所示：

值得注意的是：需要將分享彈框轉換為一個動態(tài)面板，固定在瀏覽器底部，且默認為隱藏狀態(tài)，這樣才能夠保證分享彈框始終從頁面底部向上滑動。

4. 我的版塊

我的版塊包含了我的、設置、搜索、個人中心、我的積分、編輯個人資料、積分商城、公開文章、關注、粉絲、私密文章、收藏的文章、喜歡的文章、已購內容、我的專題、我的文集、關注的專題/文集/連載、我的錢包、簡書會員、瀏覽記錄、幫助與反饋共21個頁面。

（1）我的

交互效果：

1. 點擊夜間模式按鈕，按鈕沿著背景條向另一側滑動，同時整個頁面的色調切換為黑色，頁面上的文字顏色變更為灰色；再次點擊按鈕，頁面樣式復原。
2. 點擊分享簡書，頁面從底部彈出分享彈框，點擊彈框中的微信或QQ等社交渠道，跳轉至第三方界面。
3. 垂直滑動頁面，導航欄始終固定在頁面頂部位置。

設計思路：

1. 首先準備為頁面中所有的矩形框以及文字設置一套選中效果，包括切換夜間模式的按鈕及背景條。點擊按鈕時，按鈕沿著背景條向另一側移動，同時將按鈕、背景條以及頁面中所有的矩形框、文字等均設置為選中效果（默認均為未選中）；再次點擊按鈕，按鈕向另一側移動，按鈕、背景條以及頁面中所有的矩形框、文字等均設置為未選中效果。
2. 點擊分享簡書，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。
3. 將導航欄轉換為動態(tài)面板，在固定屬性中設置顯示位置并勾選始終保持在頂層。

（2）個人中心

交互效果：

1. 點擊右上角更多按鈕，彈出菜單框。點擊菜單“添加到桌面”，toast提示“簡書：已添加”；點擊菜單“分享用戶”，頁面從底部向上滑動顯示分享彈框。
2. 向上滑動頁面，頂部導航背景色發(fā)生變化。
3. 點擊標簽動態(tài)、文章、更多，切換下方顯示內容。

設計思路：

1. 為更多按鈕設置鼠標單擊事件，切換彈出菜單的可見性。點擊“添加到桌面”，顯示提示信息“簡書：已添加”，等待片刻，提示信息消失；點擊“分享用戶”，顯示分享彈框（將分享彈框設置為動態(tài)面板并隱藏）。
2. 為頁面設置窗口滾動事件，當窗口在垂直方向滾動距離≤100時不顯示頂部導航面板；100＜滾動距離≤450，顯示頂部導航動態(tài)面板的第一個狀態(tài)，動畫效果為逐漸；滾動距離＞450，顯示頂部動態(tài)面板的第二個狀態(tài)。（提前準備一個動態(tài)面板，用來作為頁面滑動時的頂部導航，并設置兩種狀態(tài)）
3. 為動態(tài)、文章、更多3個標簽設置鼠標單擊事件，單擊時將標簽更改為選中狀態(tài)，移動標簽下方的下劃線，更換下方的頁面內容（將列表內容轉轉為動態(tài)面板，面板的3個狀態(tài)對應著3個標簽的內容），同時同步更新頂部導航的選中狀態(tài)與下劃線移動位置。

（3）積分商城

交互效果：

1. 頁面從右向左自動循環(huán)切換Banner圖。
2. 點擊右上角更多按鈕，下方顯示彈出框菜單，點擊菜單顯示對應的彈框界面。
3. 向上滑動頁面，導航欄始終固定在頁面頂部。

設計思路：

1. 輪播圖：將輪播的幾張圖設置為一個動態(tài)面板，設置頁面載入事件，向左滑動自動循環(huán)切換動態(tài)面板的狀態(tài)。
2. 更多菜單：將彈出菜單所有內容轉換為一個動態(tài)面板，并固定在更多按鈕下方，菜單點擊后的彈框頁面轉換為一個動態(tài)面板。為更多按鈕設置單擊事件，切換彈出菜單的可見性；點擊菜單，隱藏菜單彈框，顯示對應的功能界面。將頂部導航欄轉換為動態(tài)面板，設置瀏覽器固定屬性（設置截圖參照上文）。

交互設計如下圖所示：

（4）公開文章

交互效果：

1. 點擊公開文章，彈出文章類型選擇彈框，包含公開文章和付費文章，點擊文章類型切換頁面文章內容，彈框關閉，更換導航文字。
2. 點擊返回按鈕，返回至我的頁面。
3. 點擊搜索按鈕，跳轉至搜索界面。

設計思路：

這里僅分析第一個交過效果，為頂部標簽導航設置鼠標單擊事件，單擊時，切換文章類型彈框的可見性；為彈框中的菜單設置鼠標單擊事件，單擊時，改變導航文本內容，切換頁面顯示內容，隱藏彈框。

（5）私密文章

交互效果：

1. 點擊公開文章，彈出文章類型選擇彈框，包含公開文章和付費文章，點擊文章類型切換頁面文章內容，彈框關閉，更換導航文字。
2. 點擊頂部編輯模式切換按鈕，按鈕滑動，按鈕及背景框顏色變化，toast彈框提示頁面進入編輯模式/預覽模式。
3. 點擊返回按鈕，返回至我的頁面（不做思路分析）。
4. 點擊搜索按鈕，跳轉至搜索界面（不做思路分析）。

設計思路：

1. 為頂部文章類型標簽設置單擊事件，切換文章類型彈框的可見性；為彈框中的菜單設置鼠標單擊事件，單擊時，改變導航標簽內容，切換頁面顯示內容，隱藏彈框。
2. 準備好兩個元件，即編輯模式按鈕和背景框，在分別設置選中屬性。點擊編輯模式按鈕，移動按鈕，切換編輯模式按鈕和背景框的選中狀態(tài)，顯示提示彈框，等待一段時間，提示框消失。

（6）已購內容&我的專題&關注的專題/文集/連載

交互效果：點擊導航欄下方的標簽分類時，被選中的標簽文字顏色發(fā)生改變，下方的下劃線跟隨移動，同時切換頁面內容。

設計思路：給兩個標簽設置選中效果（默認選中左側標簽），并將它們設置為一組，為標簽設置單擊事件，單擊標簽時，標簽被選中，水平移動下劃線，同時切換內容動態(tài)面板。

交互設置如下圖所示：

（7）簡書會員

交互效果：

1. 點擊右上角更多菜單，向下彈出菜單窗口。點擊復制，彈框關閉，頁面toast提示“已復制到粘貼板”；點擊在瀏覽器中打開，彈框關閉，頁面從底部彈出打開方式窗口；點擊分享，頁面從底部向上滑出分享渠道彈框。
2. 點擊會員、尊享會員，切換顯示會員權益和尊享會員權益內容。

設計思路：

1. 點擊右上角按鈕，顯示菜單彈框；點擊復制，隱藏菜單彈框，頁面中央提示“簡書：已復制到粘貼板”，等待片刻，隱藏提示文字；點擊在瀏覽器中打開，顯示打開方式對話框；點擊分享，頁面從底部向上滑動顯示分享彈框，顯示時設置燈箱效果。（交互設置截圖參照上文的積分商城）
2. 添加一個動態(tài)面板用來存放會員權益、尊享會員權益的頁面內容，點擊會員、尊享會員，移動下方的下劃線，切換動態(tài)面板的頁面狀態(tài)。

（8）瀏覽記錄

交互效果：點擊今日，查看今日瀏覽的文章列表；點擊更早，查看今日之前瀏覽的文章列表。

設計思路：首先將文章列表設置為動態(tài)面板，將今日與更早這兩個導航設置為一個組，并設置相同的選中效果。點擊頂部導航時，選中導航，移動紅色下劃線，切換動態(tài)面板狀態(tài)。

我的積分、編輯個人資料、關注、粉絲、收藏的文章、喜歡的文章、我的文集、我的錢包、幫助與反饋、給簡書平分等頁面的交互效果大部分為跳轉鏈接，故不再贅述。設置、搜索等頁面的交互效果較少，且設計思路上文已做詳細說明。

5. 發(fā)布

交互效果：正文中輸入內容時，頁面頂部提示輸入了xx字，進行正文內容的計數(shù)。

設計思路：為正文設置文本改變事件，當文本改變時，利用this.text.length實現(xiàn)計數(shù)功能；當文本內容為空時，則停止計數(shù)為0。

交互設置截圖如下所示：

截止目前為止，關于簡書原型大部分的交互設計思路與方法都已經(jīng)分享結束了，也感謝能夠耐心閱讀到這里的同學，希望通過這篇大型的綜合案例能夠幫助大家掌握大部分交互效果的實現(xiàn)思路與方法。

本文由 @?拼搏的80后 原創(chuàng)發(fā)布于人人都是產品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自網(wǎng)絡