本文主要單研究一些產品設計中的小交互效果（后續持續更新），關注按鈕的關注和取消關注切換，伴隨狀態變化的toast提醒。

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

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

比如：我本人也喜歡研究一些偏于高保真的交互，總覺得簡單的線框圖太空曠，但友情提醒大家，如果你的團隊有UI或UX（UE），請慎重設計高保真原型，因為我們做原型是專業的，但是在UI和交互上卻是業余的，不要自以為是，否則會給這兩個崗位的人造成干擾。

今天我們簡單研究一些產品設計中的小交互效果（后續持續更新）：關注按鈕的關注和取消關注切換，伴隨狀態變化的toast提醒。

案例預覽：點擊此處查看實際交互效果

關注按鈕的狀態切換

（1）仿照知乎頁面，我們將頁面元件都放好，將“關注”按鈕命名為：btn。也可以根據個人喜好，可自行設計頁面元素，只要有“關注”按鈕即可。

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

這種設計思路是最常用的，也是最容易想到的，但是我們是產品經理，是改變世界的人，那么我們就要做的再高（zhuang）大（bi）上一點，用一個元件實現狀態切換，通常采用“選中”和“取消選中”的交互用例。

（3）設置“未關注”和“已關注”兩種狀態的填充顏色和文本顏色，未關注時即未選中狀態，元件填充顏色#0084FF，文本顏色#FFFFFF；已關注時即選中狀態，元件填充顏色#666666，文本顏色#CCCCCC。

（4）添加按鈕“鼠標單擊時”交互用例，鼠標單擊時，切換按鈕的選中和未選中狀態。

（5）添加按鈕的“選中時”和“取消選中時”的單獨用例，選中時，設置按鈕中文本為“已關注”，且按鈕的填充顏色和文本顏色也發生了改變；取消選中時，設置按鈕中文本為“+ 關注”，且按鈕的填充顏色和文本顏色恢復初始。

（6）至此我們已經完成了使用同一個元件實現按鈕不同狀態之間的切換，保存后可預覽效果。

預覽：點擊此處預覽當前效果

隨著按鈕不同狀態的切換，增強用戶體驗的toast提醒

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

（2）當按鈕狀態為“已關注”時，即選中狀態，彈出已關注提醒，設置按鈕“選中時”顯示已關注提醒；“取消關注”時，即取消選中狀態，彈出取消關注提醒，設置按鈕“取消選中時”顯示取消關注提醒。

如圖所示：

預覽：點擊此處預覽當前效果

（3）至此預覽時，我們發現基本已經實現，但是以我們的經驗來說，此類提醒一般都是顯示2s左右，逐漸消失在屏幕中。那么我們分別對這兩個提醒的彈窗進行設置，當“顯示時”開始逐漸消失，2s后徹底消失。

（4）將兩個提醒彈窗，設置為隱藏狀態，調整適當的位置，至此我們已經完成了今天的交互效果制作。

最終效果預覽：點擊預覽最終交互效果

提供源文件下載學習：源文件下載? ? 密碼：0tcw

寫在結尾

類似的交互效果如收藏和取消收藏、點贊和取消點贊等，均可以按照本文提到的方式進行交互設計，方法都大同小異。實際工作中，產品經理可根據自身產品和企業的實際情況，選擇性的實現。

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

相關閱讀

Axure 8.0：移動端菜單吸附

本文由?@我可白了呢 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議