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