本文主要單研究一些產(chǎn)品設(shè)計(jì)中的小交互效果（后續(xù)持續(xù)更新），關(guān)注按鈕的關(guān)注和取消關(guān)注切換，伴隨狀態(tài)變化的toast提醒。

產(chǎn)品原型設(shè)計(jì)在產(chǎn)品經(jīng)理的日常工作中，可以說是再熟悉不過了。我們知道，產(chǎn)品原型按保真程度可以分為低保真、中保真和高保真，其中低保真我們通常稱為線框圖，即用簡(jiǎn)單的線框元件勾勒出基本草圖，沒有斑駁的色彩和炫酷的交互，純靜態(tài)頁(yè)面。最終再交付給UI及開發(fā)等進(jìn)行加工，這種原型設(shè)計(jì)較為常用，效率也較高，也被廣泛采用。

但是在實(shí)際場(chǎng)景中，考慮到一般公司都沒有配置交互設(shè)計(jì)師的崗位，因此對(duì)于一些較簡(jiǎn)單的、容易實(shí)現(xiàn)的小交互效果，很多產(chǎn)品人還是樂于去實(shí)（zhuang）現(xiàn)（bi）的。在產(chǎn)品原型演示的時(shí)候，能夠更加形象具體的展示出來。

比如：我本人也喜歡研究一些偏于高保真的交互，總覺得簡(jiǎn)單的線框圖太空曠，但友情提醒大家，如果你的團(tuán)隊(duì)有UI或UX（UE），請(qǐng)慎重設(shè)計(jì)高保真原型，因?yàn)槲覀冏鲈褪菍I(yè)的，但是在UI和交互上卻是業(yè)余的，不要自以為是，否則會(huì)給這兩個(gè)崗位的人造成干擾。

今天我們簡(jiǎn)單研究一些產(chǎn)品設(shè)計(jì)中的小交互效果（后續(xù)持續(xù)更新）：關(guān)注按鈕的關(guān)注和取消關(guān)注切換，伴隨狀態(tài)變化的toast提醒。

案例預(yù)覽：點(diǎn)擊此處查看實(shí)際交互效果

關(guān)注按鈕的狀態(tài)切換

（1）仿照知乎頁(yè)面，我們將頁(yè)面元件都放好，將“關(guān)注”按鈕命名為：btn。也可以根據(jù)個(gè)人喜好，可自行設(shè)計(jì)頁(yè)面元素，只要有“關(guān)注”按鈕即可。

（2）我們知道，關(guān)注和取消關(guān)注是兩種相反的狀態(tài)，如果用兩個(gè)元件，分別為關(guān)注按鈕和取消關(guān)注按鈕，則交互效果為鼠標(biāo)單擊關(guān)注按鈕后，表示已關(guān)注，顯示“取消關(guān)注”按鈕，隱藏初始狀態(tài)。再次單擊“取消關(guān)注”按鈕后，顯示未關(guān)注初始狀態(tài)，隱藏“取消關(guān)注”按鈕。

這種設(shè)計(jì)思路是最常用的，也是最容易想到的，但是我們是產(chǎn)品經(jīng)理，是改變世界的人，那么我們就要做的再高（zhuang）大（bi）上一點(diǎn)，用一個(gè)元件實(shí)現(xiàn)狀態(tài)切換，通常采用“選中”和“取消選中”的交互用例。

（3）設(shè)置“未關(guān)注”和“已關(guān)注”兩種狀態(tài)的填充顏色和文本顏色，未關(guān)注時(shí)即未選中狀態(tài)，元件填充顏色#0084FF，文本顏色#FFFFFF；已關(guān)注時(shí)即選中狀態(tài)，元件填充顏色#666666，文本顏色#CCCCCC。

（4）添加按鈕“鼠標(biāo)單擊時(shí)”交互用例，鼠標(biāo)單擊時(shí)，切換按鈕的選中和未選中狀態(tài)。

（5）添加按鈕的“選中時(shí)”和“取消選中時(shí)”的單獨(dú)用例，選中時(shí)，設(shè)置按鈕中文本為“已關(guān)注”，且按鈕的填充顏色和文本顏色也發(fā)生了改變；取消選中時(shí)，設(shè)置按鈕中文本為“+ 關(guān)注”，且按鈕的填充顏色和文本顏色恢復(fù)初始。

（6）至此我們已經(jīng)完成了使用同一個(gè)元件實(shí)現(xiàn)按鈕不同狀態(tài)之間的切換，保存后可預(yù)覽效果。

預(yù)覽：點(diǎn)擊此處預(yù)覽當(dāng)前效果

隨著按鈕不同狀態(tài)的切換，增強(qiáng)用戶體驗(yàn)的toast提醒

（1）在之前做好的按鈕切換原型的基礎(chǔ)上，我們做兩個(gè)“已關(guān)注”提醒和“取消關(guān)注”提醒，如圖所示，兩個(gè)提醒最終均設(shè)置為隱藏，為了更好的演示，我們先讓他們顯示出來。

（2）當(dāng)按鈕狀態(tài)為“已關(guān)注”時(shí)，即選中狀態(tài)，彈出已關(guān)注提醒，設(shè)置按鈕“選中時(shí)”顯示已關(guān)注提醒；“取消關(guān)注”時(shí)，即取消選中狀態(tài)，彈出取消關(guān)注提醒，設(shè)置按鈕“取消選中時(shí)”顯示取消關(guān)注提醒。

如圖所示：

預(yù)覽：點(diǎn)擊此處預(yù)覽當(dāng)前效果

（3）至此預(yù)覽時(shí)，我們發(fā)現(xiàn)基本已經(jīng)實(shí)現(xiàn)，但是以我們的經(jīng)驗(yàn)來說，此類提醒一般都是顯示2s左右，逐漸消失在屏幕中。那么我們分別對(duì)這兩個(gè)提醒的彈窗進(jìn)行設(shè)置，當(dāng)“顯示時(shí)”開始逐漸消失，2s后徹底消失。

（4）將兩個(gè)提醒彈窗，設(shè)置為隱藏狀態(tài)，調(diào)整適當(dāng)?shù)奈恢?，至此我們已?jīng)完成了今天的交互效果制作。

最終效果預(yù)覽：點(diǎn)擊預(yù)覽最終交互效果

提供源文件下載學(xué)習(xí)：源文件下載? ? 密碼：0tcw

寫在結(jié)尾

類似的交互效果如收藏和取消收藏、點(diǎn)贊和取消點(diǎn)贊等，均可以按照本文提到的方式進(jìn)行交互設(shè)計(jì)，方法都大同小異。實(shí)際工作中，產(chǎn)品經(jīng)理可根據(jù)自身產(chǎn)品和企業(yè)的實(shí)際情況，選擇性的實(shí)現(xiàn)。

一般像此類比較簡(jiǎn)單的交互效果，我還是提倡把它做出來的，畢竟我們可是改變世界的人，較復(fù)雜麻煩的交互效果不建議在實(shí)際工作中去實(shí)現(xiàn)，既費(fèi)時(shí)又費(fèi)力，得不償失。如果個(gè)人感興趣，可以利用碎片化時(shí)間去學(xué)習(xí)以提升個(gè)人能力。

相關(guān)閱讀

Axure 8.0：移動(dòng)端菜單吸附

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

題圖來自 Pexels，基于 CC0 協(xié)議