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