Axure 8.0:同一個(gè)元件實(shí)現(xiàn)“關(guān)注”按鈕狀態(tài)切換
本文主要單研究一些產(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)閱讀
本文由?@我可白了呢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于 CC0 協(xié)議
很好,簡(jiǎn)(shi)單(he)實(shí)(裝)用(bi)。 ??
這篇文章教會(huì)我們toast提醒。但是有沒有想過,抖音、微博等等App關(guān)注之后會(huì)不會(huì)有toast提醒
感謝!類似的提醒種類有很多,比如Toast提醒、Alert等,所有的交互行為都要結(jié)合自身產(chǎn)品和實(shí)際情況進(jìn)行設(shè)計(jì),沒有絕對(duì)相同或不同。不同的產(chǎn)品核心功能不同,目標(biāo)用戶群體也不同,所以在產(chǎn)品設(shè)計(jì)中也不盡相同,適合自己的才是最好的