編輯導(dǎo)讀：云服務(wù)產(chǎn)品在如今的互聯(lián)網(wǎng)世界并不罕見，甚至成為了很多公司的著重發(fā)力點。本文作者以【騰訊云】的“云服務(wù)器 CVM”產(chǎn)品為例，通過前臺的購買流程，反推后臺的商品構(gòu)成模型和創(chuàng)建流程。本文主要講解選擇類目和基礎(chǔ)信息，希望對你有幫助。

根據(jù)《【產(chǎn)品設(shè)計】云服務(wù)產(chǎn)品維護方案（序）》我們已經(jīng)初步了解到，云服務(wù)器產(chǎn)品的構(gòu)成分為三部分：機型、磁盤、寬帶。在開展第一部分內(nèi)容的講解前，我們還有一個前置條件要做，如下圖，整個云服務(wù)器產(chǎn)品的創(chuàng)建流程，我拆分成 5 個步驟，在維護機型、磁盤、寬帶的價格前，還需要先設(shè)定商品類目和商品的基礎(chǔ)信息。這一次，我們先講解前兩部分的內(nèi)容：選擇類目和基礎(chǔ)信息。

一、選擇類目

對比前臺的商品類目，我們可以簡單得出，云產(chǎn)品的類目構(gòu)成與電商類的三級類目是一致的，因此類比電商商品的創(chuàng)建流程，我們可以得知，創(chuàng)建商品也必須先選擇大、中、小的類目再進行下一步的商品信息的維護；

選擇類目的原型設(shè)計可以參考聯(lián)級框的設(shè)計思路：

《【Axure 教程】中繼器中級教程-聯(lián)級框》，簡單概括就是把聯(lián)級框的一、二、三級的內(nèi)容設(shè)置為大、中、小的三個類目，但減少了在選擇的時候做“設(shè)置文本”的交互，在這里就不再展開說明了；

二、基礎(chǔ)信息

通過前臺的云服務(wù)器產(chǎn)品計算器我們得知，機型、磁盤、寬帶的價格均收到計費模式的影響，而最終的實付價格還會因為選擇不同的計費模式下的參數(shù)有關(guān)，因此在維護機型、磁盤寬帶的價格前，就需要先設(shè)定云服務(wù)器商品的可選計費模式；

而機型的類型和價格還會受到各地區(qū)以及各地區(qū)下分區(qū)的不同而不同，因此在基礎(chǔ)信息這一步，我們還需要提前維護好云服務(wù)器產(chǎn)品的可用地區(qū)，以及可用地區(qū)的的可用分區(qū)，以便我們在做機型的維護時，有更精準(zhǔn)的維度選擇；

2.1 計費模式

從以上的分析得知，在維護基礎(chǔ)信息時需要包含兩個模塊，一個是計費模式，另一個是適用地區(qū)，如上圖所示，接下來我們再拆分這兩個模塊進行講解；

計費模式這里提供三個選項（多選）：包年包月、按量計費、競價實例；

• 包年包月：選擇包年包月模式后，在維護機型和磁盤價格時，均需要維護標(biāo)準(zhǔn)月和標(biāo)準(zhǔn)年的價格；而寬帶的價格需要提供兩個維度：包年包月和按量計費（Mbps）；
• 按量計費：選擇按量計費模式后，在維護機型和磁盤價格時，均需要維護按量計費的價格；而寬帶的價格需要提供按量計費（GB）維度的價格設(shè)置；
• 競價實例：不明確；

2.2 適用地域

適用地域我們通過多級列表的模式進行展示，一級數(shù)據(jù)以地區(qū)為主，二級數(shù)據(jù)以分區(qū)為主，通過這種模式可以較為直觀地查看適用地區(qū)下哪些分區(qū)是可用的，同時，地區(qū)和分區(qū)的從屬關(guān)系也得到了解釋；列表的制作可參考：《【Axure 教程】中繼器入門教程-列表制作》

通過列表右上角的【添加地區(qū)】打開彈窗，載入所有可用的地區(qū)，用戶從中選擇該產(chǎn)品可提供給用戶進行選擇的地區(qū)。為進一步提升用戶體驗，在彈窗我們可以加入所屬地區(qū)（下拉列表）、地區(qū)名稱（文本）、地區(qū)代號（文本）等維度的查詢條件，以便業(yè)務(wù)在選擇時更加便捷；列表復(fù)選的制作可參考：《【Axure 教程】中繼器高級用法-列表復(fù)選》

根據(jù)前臺可知，業(yè)務(wù)在維護地區(qū)時，需要備注該地區(qū)的覆蓋用戶和面向區(qū)域的說明，以及其他注意事項；

因此在編輯地區(qū)時，我們可以通過彈窗的形式進行備注信息的維護；彈窗中加入當(dāng)前正在編輯的地區(qū)信息，可以為業(yè)務(wù)操作時提供更直觀的判斷，降低信息維護錯誤的可能性；

在地區(qū)的行數(shù)據(jù)操作中，提供添加分區(qū)的操作，彈窗載入該地區(qū)下的所有可用分區(qū)，業(yè)務(wù)從中選擇可提供給用戶進行選擇的分區(qū)；

分區(qū)的編輯內(nèi)容，我們提供了分區(qū)的排序序號和分區(qū)的狀態(tài)，序號的作用起到在前臺進行展示時的一個排序依據(jù)；而分區(qū)的【啟用】和【停用】狀態(tài)決定了前臺用戶可選擇的分區(qū)；

三、小結(jié)

因商品的商品的創(chuàng)建流程是一個連續(xù)的過程，因此我們需要將鏈路上的先后關(guān)系捋清楚后，優(yōu)先完成前置條件的設(shè)置，在本期的分享當(dāng)中，難度較高的組件應(yīng)屬于【多級列表】的設(shè)計，這個組件大家可以參考：《【Axure 教程】中繼器中級教程-左側(cè)導(dǎo)航》

的導(dǎo)航設(shè)計教程，至于這里面的技巧，就需要大家去思考了 : D

下一次分享，將會是機型維護的部分，敬請期待吧！

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

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