中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

我們知道很多網(wǎng)站、APP等的評價系統(tǒng)都有按星級評分的功能，大部分是5個星級，依次代表1~5分。且不論這些系統(tǒng)背后的復雜邏輯，單純從用戶打分的角度來講，似乎是一個非常簡單的功能，用戶只需要在某個星星上點擊一下就可完成打分。但對于一個看起來簡單的功能，用Axure畫出它的原型時，卻會有多種方式。這篇文章就是要教給大家一個超級簡單的實現(xiàn)方式。

一、原型效果預覽

二、評分功能解析

這里我用一張圖來表示（如下圖）

兩點交互說明：

1. 鼠標放在某顆星上時，其對應的一個或一組星星高亮顯示（如上圖對應關系），鼠標離開后，高亮效果消失，恢復為初始態(tài)。
2. 鼠標點擊某顆星星時，鎖定一個或一組星星的高亮顯示，鼠標離開后，高亮效果不會消失。

三、原型設計思路

常規(guī)思路

對于這個原型的設計，可能很多小伙伴都會覺得很簡單，通常的思路是繪制五個星星形狀，然后在每個星星上設置鼠標懸停和點擊的事件，這不失為一種方法，但這種方式需要添加過多的事件，操作起來比較繁瑣。

另辟蹊徑

另外還有一種思路則是，分別把1星、2星、3星、4星和5星畫成五個不同的形狀，這樣一來每個形狀上的鼠標懸停和點擊事件更加獨立而簡潔，而且每個形狀的交互事件可以通用（特殊情況除外），原型的制作過程和后期的維護都會簡單的多。接下來就是要詳細講解這種方式的制作過程。

四、原型制作過程

1、繪制星星形狀

星星形狀可以通過矩形變形來實現(xiàn)（拖入一個矩形，然后在矩形的屬性里面選擇“星星”形狀），“1星”則只需要使用一個星星形狀，“2星～5星”則分別需要2～5個星星形狀。

但是我們看上圖中，“2星”、“3星”、“4星”、“5星”分別都是一個形狀（雖然包含了多個星星，但其實這整體是一個形狀），若要實現(xiàn)這樣的效果，則需要對形狀進行布爾運算，下面以“2星”形狀為例

“2星”形狀是由兩個“1星”形狀通過全選合并后變成了一個完整的“2星”形狀（上圖左邊的兩顆星是合并前，右邊的兩顆星是合并后），使用同樣的方法，我們還可以得到“3星”、“4星”和“5星”形狀。

2、設置形狀屬性

繪制好分別代表“1星～5星”的五個形狀后，進行全選，統(tǒng)一設置五個形狀的鼠標懸停效果和選中效果（設置填充色）

3、排列形狀

之后將“1星～5星”這五個形狀進行疊加放在一起，“5星”放在最下面，“4星”放在“5星”上面，“3星”放在“4星”上面，“2星”放在“3星”上面，“1星”放在“2星”上面，當然還有最重要的一點是這五個形狀進行左對齊排列，最終的效果就成了下面這樣

這時候可以預覽一下原型，鼠標懸停在某個星星上時，對應的一個或一組星星會高亮顯示，鼠標移開后，星星的高亮顯示效果會消失。接下來我們給形狀添加點擊事件，實現(xiàn)點擊確定評分的效果，即高亮效果的鎖定。

4、添加交互事件

添加交互事件的過程，就體現(xiàn)出了這個實現(xiàn)方法的簡便之處，因為我只需要給一個形狀（比如“1星”）設置好了交互事件后，就可以完全復制到另外四個形狀上，而不需要分別單獨去設置。

我給“1星”設置的交互事件是：鼠標單擊時，設置所有形狀的（“1星”、“2星”、“3星”、“4星”、“5星”）的選中狀態(tài)為“false”，然后設置This（當前元件）的選中狀態(tài)為“true”

這樣就實現(xiàn)了點擊第一個星星時，顯示“1星”評分效果，點擊第二個星星時顯示“2星”評分效果，以此類推，點擊第五個星星時顯示“5星”評分效果。到此為止，星級評分的原型就做完了，當然這個原型只是評分功能的一個基礎，還有更多的延伸效果，小伙伴們可以自行去探索了。

五、一點心得

其實不管是畫原型還是設計產(chǎn)品流程，用戶層面的業(yè)務邏輯未必就是產(chǎn)品底層的工作邏輯，嘗試用兩種思維方式去做產(chǎn)品，用戶思維和機器思維，這兩者并非簡單的映射關系。

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