Axure教程:規(guī)格的實現(xiàn)

0 評論 2110 瀏覽 11 收藏 6 分鐘

筆者在本文中介紹了如何用Axure實現(xiàn)規(guī)格效果的操作步驟,以及實現(xiàn)過程中的一些心得體會,與大家分享。

這篇文章是繼《Axure教程:數(shù)量加減的實現(xiàn)》之后的下一篇拆解《Axure教程:實現(xiàn)商品規(guī)格選擇功能》的文章《Axure教程:規(guī)格的實現(xiàn)》。主要講解規(guī)格的選擇時的操作。

原型預覽

尚未選擇規(guī)格時的顯示:

選擇“比卡丘”后的顯示:

選擇“藍色”后的顯示:

選擇“比卡丘”“藍色”后的顯示:

取消選擇“比卡丘”后的顯示:

原型預覽地址:https://mwb2of.axshare.com

所需元件

所需元件就10個(但還是要命好名),其中6個是純文本,需要設置交互的元件就只有三個:(黃色)矩形、(藍色)矩形、(比卡丘)矩形。

操作步驟

(1)將(黃色)矩形、(藍色)矩形放在一個選項組“顏色”。

將兩個元件放在設置選項組的作用是它們之間只有一個選中狀態(tài)為true。

(2)設置三個矩形的交互樣式——選中

這里的交互樣式我參考的是某寶的交互樣式。

(3)設置三個矩形的交互——鼠標單擊時

1)這個原型的難點在于要將三個設置了交互的矩形的條件考慮周到,所以我使用了Excel表格將所有情況都列了出來。

將所有情況都列好了之后我們就開始根據(jù)表格一個一個去對應地增加交互和交互的條件。

2)“比卡丘”矩形的前3個Case。

3)“比卡丘”矩形的后3個Case。

4)“藍色”矩形的4個Case。

5)“黃色”矩形的4個Case。

這里可以看到“藍色”矩形的交互和“黃色”矩形的交互基本相同,所以我們設置好“藍色”矩形的交互后可以直接把“藍色”矩形的交互粘貼到“黃色”矩形的交互,然后再修改一些小細節(jié),這樣就可以省下很多時間了。

(4)第三步都搞定后就可以按F5預覽原型看看效果了。

小記

  1. 這個原型案例里最復雜、有難度的地方就是第三步了,如果不先使用一個Excel表格來將所有情況列清楚,而是邊做邊想的話很容易就漏這漏那,所以這原型還考驗到了我們的邏輯性。
  2. 這個原型案例是我做過的Case、條件最多的案例了。這里我的規(guī)格選項里我涂方便就使用了三個,如果放到真實案例里,可能會有6,7個,這樣的話條件、Case也就更多了。當然這是在追求高保真的前提下,一般實際制作原型我們只需要做到這里讓開發(fā)去看也就夠了。
  3. 當然你也可以考驗下自己,如果款式有3個,顏色有3個的時候會有多少種情況,將他們在Excel表格里清晰地列出來,鍛煉自己的邏輯能力。
  4. 案例里的價格(12.8、25.8)、庫存(2520、94、98)都是我隨便設的。
  5. 可能我實現(xiàn)這個案例的方法不是最佳的,希望有大佬可以站出來指點一下。

 

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

題圖來自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!