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

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

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

簡書是什么？

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

這是官方對產(chǎn)品的最新定義與說明。

頁面結(jié)構(gòu)

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

交互設(shè)計(jì)

對于常用的鏈接跳轉(zhuǎn)、選中效果等一些非?；A(chǔ)的交互屬性、交互動作的設(shè)置，不做詳細(xì)說明。在正式開始設(shè)置交互動作前，需要提前繪制、擺放好相關(guān)的元件、做好界面布局等準(zhǔn)備工作，這些基礎(chǔ)必要的準(zhǔn)備工作，在此也省略相關(guān)說明。

下文內(nèi)容主要聚焦于分享各類交互效果的設(shè)計(jì)思路及方法，并附上相關(guān)的設(shè)置截圖，設(shè)計(jì)思路的描述順序與交互效果一一對應(yīng)。

1. 關(guān)注版塊

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

（1）關(guān)注

交互效果：

1. 點(diǎn)擊頂部標(biāo)簽，選中標(biāo)簽，切換頁面內(nèi)容；當(dāng)點(diǎn)擊兩端的兩個標(biāo)簽時，標(biāo)簽欄進(jìn)行了左右移動。
2. 頁面向上滾動時，標(biāo)簽導(dǎo)航及頂部導(dǎo)航欄始終固定不動。

設(shè)計(jì)思路：

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

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

值得注意的是：默認(rèn)將最左側(cè)的“全部關(guān)注”標(biāo)簽設(shè)置為選中，點(diǎn)擊左右兩側(cè)的標(biāo)簽時，需要在水平方向上移動整行標(biāo)簽欄位置。

各標(biāo)簽的交互設(shè)置如下圖所示：

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

屬性設(shè)置如下圖所示：

（2）推薦關(guān)注

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

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

（3）搜索

交互效果：

1. 點(diǎn)擊換一批，更新熱搜詞。
2. 點(diǎn)擊歷史搜索詞右側(cè)關(guān)閉按鈕，搜索詞消失，下方的搜索詞自動向上補(bǔ)位。
3. 點(diǎn)擊清除歷史記錄時，歷史記錄內(nèi)容消失。

設(shè)計(jì)思路：

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

（4）關(guān)注頁排序

交互效果：

1. 上下拖動關(guān)注項(xiàng)右側(cè)按鈕，可調(diào)整關(guān)注項(xiàng)順序。
2. 點(diǎn)擊“恢復(fù)默認(rèn)”，還原初始排列順序。
3. 點(diǎn)擊返回或完成，跳轉(zhuǎn)至關(guān)注頁（不做思路分析）。

設(shè)計(jì)思路：

1. 垂直拖動按鈕，上下移動關(guān)注項(xiàng)整欄內(nèi)容（提前設(shè)定幾個全局變量，將關(guān)注項(xiàng)豎坐標(biāo)賦值給全局變量），接觸到某一關(guān)注項(xiàng)時，該關(guān)注項(xiàng)以上內(nèi)容依次向上移動進(jìn)行補(bǔ)位。
2. 點(diǎn)擊“恢復(fù)默認(rèn)”，重新加載當(dāng)前頁面。

交互設(shè)置如下圖所示：

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

（1）推薦

交互效果：

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

設(shè)計(jì)思路：

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

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

（2）關(guān)注的連載/專題

交互效果：

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

設(shè)計(jì)思路：

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

• 假設(shè)在連載頁面中，點(diǎn)擊我關(guān)注的連載時，全局變量OnLoadVariable為1；
• 在專題頁面，點(diǎn)擊我關(guān)注的專題時，全局變量OnLoadVariable為2。
• 關(guān)注的連載/專題頁面載入時，當(dāng)全局變量OnLoadVariable為1時，頂部標(biāo)簽的值為“只看連載”；
• 當(dāng)全局變量OnLoadVariable為2時，頂部標(biāo)簽的值為“只看專題”。

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

相關(guān)的交互設(shè)置如下圖所示：

3. 消息版塊

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

（1）推送通知

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

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

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

交互設(shè)置如下圖所示：

（2）其他提醒

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

交互設(shè)置如下圖所示：

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

4. 我的版塊

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

（1）我的

交互效果：

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

設(shè)計(jì)思路：

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

（2）個人中心

交互效果：

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

設(shè)計(jì)思路：

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

（3）積分商城

交互效果：

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

設(shè)計(jì)思路：

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

交互設(shè)計(jì)如下圖所示：

（4）公開文章

交互效果：

1. 點(diǎn)擊公開文章，彈出文章類型選擇彈框，包含公開文章和付費(fèi)文章，點(diǎn)擊文章類型切換頁面文章內(nèi)容，彈框關(guān)閉，更換導(dǎo)航文字。
2. 點(diǎn)擊返回按鈕，返回至我的頁面。
3. 點(diǎn)擊搜索按鈕，跳轉(zhuǎn)至搜索界面。

設(shè)計(jì)思路：

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

（5）私密文章

交互效果：

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

設(shè)計(jì)思路：

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

（6）已購內(nèi)容&我的專題&關(guān)注的專題/文集/連載

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

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

交互設(shè)置如下圖所示：

（7）簡書會員

交互效果：

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

設(shè)計(jì)思路：

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

（8）瀏覽記錄

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

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

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

5. 發(fā)布

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

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

交互設(shè)置截圖如下所示：

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

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

題圖來自網(wǎng)絡(luò)