起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：規(guī)格的實(shí)現(xiàn)
筆者在本文中介紹了如何用Axure實(shí)現(xiàn)規(guī)格效果的操作步驟，以及實(shí)現(xiàn)過(guò)程中的一些心得體會(huì)，與大家分享。
這篇文章是繼《Axure教程：數(shù)量加減的實(shí)現(xiàn)》之后的下一篇拆解《Axure教程：實(shí)現(xiàn)商品規(guī)格選擇功能》的文章《Axure教程：規(guī)格的實(shí)現(xiàn)》。主要講解規(guī)格的選擇時(shí)的操作。
原型預(yù)覽
尚未選擇規(guī)格時(shí)的顯示：
選擇“比卡丘”后的顯示：
選擇“藍(lán)色”后的顯示：
選擇“比卡丘”“藍(lán)色”后的顯示：
取消選擇“比卡丘”后的顯示：
原型預(yù)覽地址：https://mwb2of.axshare.com
所需元件
所需元件就10個(gè)（但還是要命好名），其中6個(gè)是純文本，需要設(shè)置交互的元件就只有三個(gè)：（黃色）矩形、（藍(lán)色）矩形、（比卡丘）矩形。
操作步驟
（1）將（黃色）矩形、（藍(lán)色）矩形放在一個(gè)選項(xiàng)組“顏色”。
將兩個(gè)元件放在設(shè)置選項(xiàng)組的作用是它們之間只有一個(gè)選中狀態(tài)為true。
（2）設(shè)置三個(gè)矩形的交互樣式——選中
這里的交互樣式我參考的是某寶的交互樣式。
（3）設(shè)置三個(gè)矩形的交互——鼠標(biāo)單擊時(shí)
1）這個(gè)原型的難點(diǎn)在于要將三個(gè)設(shè)置了交互的矩形的條件考慮周到，所以我使用了Excel表格將所有情況都列了出來(lái)。
將所有情況都列好了之后我們就開始根據(jù)表格一個(gè)一個(gè)去對(duì)應(yīng)地增加交互和交互的條件。
2）“比卡丘”矩形的前3個(gè)Case。
3）“比卡丘”矩形的后3個(gè)Case。
4）“藍(lán)色”矩形的4個(gè)Case。
5）“黃色”矩形的4個(gè)Case。
這里可以看到“藍(lán)色”矩形的交互和“黃色”矩形的交互基本相同，所以我們?cè)O(shè)置好“藍(lán)色”矩形的交互后可以直接把“藍(lán)色”矩形的交互粘貼到“黃色”矩形的交互，然后再修改一些小細(xì)節(jié)，這樣就可以省下很多時(shí)間了。
（4）第三步都搞定后就可以按F5預(yù)覽原型看看效果了。
小記
- 這個(gè)原型案例里最復(fù)雜、有難度的地方就是第三步了，如果不先使用一個(gè)Excel表格來(lái)將所有情況列清楚，而是邊做邊想的話很容易就漏這漏那，所以這原型還考驗(yàn)到了我們的邏輯性。
- 這個(gè)原型案例是我做過(guò)的Case、條件最多的案例了。這里我的規(guī)格選項(xiàng)里我涂方便就使用了三個(gè)，如果放到真實(shí)案例里，可能會(huì)有6，7個(gè)，這樣的話條件、Case也就更多了。當(dāng)然這是在追求高保真的前提下，一般實(shí)際制作原型我們只需要做到這里讓開發(fā)去看也就夠了。
- 當(dāng)然你也可以考驗(yàn)下自己，如果款式有3個(gè)，顏色有3個(gè)的時(shí)候會(huì)有多少種情況，將他們?cè)贓xcel表格里清晰地列出來(lái)，鍛煉自己的邏輯能力。
- 案例里的價(jià)格（12.8、25.8）、庫(kù)存（2520、94、98）都是我隨便設(shè)的。
- 可能我實(shí)現(xiàn)這個(gè)案例的方法不是最佳的，希望有大佬可以站出來(lái)指點(diǎn)一下。
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議
- 目前還沒評(píng)論，等你發(fā)揮！
