電商管理系統概述
隨着電商行業的發展，傳統的管理方法正逐步被信息化管理所取代，電商信息管理系統地作用也越來越大。針對商家開發的電商管理系統，實現了對客戶、商品、交易的管理和信息統計功能，從而提升了線上商城維護的工作效率和質量。
電商管理系統原型設計
在項目開始之初，可以通過原型設計快速呈現電商管理系統的結構、功能與交互方式。同時，原型設計也可以幫助系統開發團隊快速清理系統邏輯。通過原型設計可以在項目規劃階段找到存在的問題，避免設計或開發完成後進行修改和調整，能大幅節省時間和開發成本。
在設計電商管理系統原型的過程中，需要遵循以下幾點基本原則：
1.保證層級分明的原型框架
繪製原型前，要梳理頁面與頁面之間的邏輯關係，並提前搭建好原型大綱，再根據大綱進行單個頁面的填充。層級分明的原型框架有利於設計師和開發工程師快速理解。
2.頁面元素要統一
風格不一的元素會造成原型頁面混亂不堪，不僅會影響美觀度，也會影響開發人員的思維。因此在設計原型的過程中需要保證頁面元素的整齊統一。如：對齊方式、間隔距離、字體和顏色、圖標風格等。當頁面元素做到整齊統一，輸出的原型自然會簡潔清晰。
3.原型設計不宜佔用過多時間
對於系統開發團隊來說，產品原型設計的目的是給開發提供導向。因此不宜在項目開展前期投入過多的時間與精力去繪製過於精細的原型。
如果想要高效繪製層級分明、頁面簡潔、功能完備的電商管理系統，可使用專業原型設計工具摹客Mockplus。藉助其豐富的內置圖標和組件，可快速呈現頁面設計；可視化交互設置，只需拖拽即可完成；多種分享和演示方式，可快速測試。
接下來我們一起來看看使用摹客Mockplus搭建的電商系統原型例子。文末附有完整電商後臺原型的下載鏈接，下載MP文件後可直接導入Mockplus使用。
摹客Mockplus原型分享——電商管理系統E-Market
電商管理系統E-Market屬於中高保真原型，包含登錄註冊、數據統計、信息管理、郵件、聊天、任務管理等19個重要頁面，每個頁面都具備必要的交互設計，較好地呈現了電管理系統的基礎功能。
在頁面搭建過程中，我們充分利用了摹客Mockplus的封裝組件和圖標，如內容面板、彈出面板、下拉選擇框組件等，完成了產品思路的表達。同時，在這款原型例子中，除了基礎的交互方式，還使用了快速格子、母版等實用功能，節省了大量設計時間，快速實現了原型的交互效果，讓原型更加清晰易懂。
首先我們一起來看看該原型的界面總覽和交互效果演示。
在線預覽地址：https://run.mockplus.cn/gSsa2Birba1JWTPD/index.html
接下來讓我們一起來看看，在使用Mockplus繪製電商管理系統原型時，有哪些實用技巧吧！
Mockplus實用技巧
1.使用母版功能快速複用導航欄
在設計電商管理系統原型時，我們在每一個功能頁面都設計了側邊導航欄，導航欄的每一個選項都能鏈接到了不同的頁面，但如果每切換一個頁面就重新設置一次交互，一定會造成大量的時間浪費。
因此，我們使用了Mockplus的母版功能，可以直接複用組件，減少重複設計。
使用方式：
① 在某個頁面中設計好導航欄組件樣式；
在此款原型中，我們使用了矩形+圖標+文字組件進行組合設計，也可以使用帶文字圖標組件直接組合，另外，列表、菜單、摺疊面板、樹組件等，也適用於導航欄的快速設計。
② 右鍵選中組件，在彈出菜單中選擇“設置爲母版”即可添加一個母版組件；
③ 將母版從左側母版管理中拖入工作區即可應用到項目中的任意頁面中；
④ 雙擊任意母版，即可進入編輯模式，修改完成後，在外部雙擊即可退出編輯。修改後會自動應用到所有使用了該母版的頁面中。
⑤ 如果需要單獨編輯某個頁面的組件，在該頁面選中該組件，右鍵選擇“從母版脫離”，即可恢復爲普通組件。
2.巧用圖表組件搭建Dashboard
Dashboard頁面主要使用了Mockplus的圖表組件搭建而成。Mockplus提供4種可直接使用的圖表組件：柱狀圖、條形圖、曲線圖、餅圖。在這款原型中，使用了柱狀圖、曲線圖和餅圖三種組件。
圖表組件的使用方式很簡單，雙擊組件即可編輯數據和顏色。分享幾點Dashboard頁面的設計技巧：
① 在柱狀圖中，我們通過將其中某項數據顏色設置爲白色，做出了空行效果；
② 在曲線圖中，使用圓形組件標記出重要節點。
③ 使用單行文字組件，可設計出座標軸、數據展示等效果，將矩形與單行文字進行結合，也可作爲圖表註釋。
3.分段控件+內容面板，實現內容切換
在日程表頁面，我們使用了分段控件+內容面板組件，實現了月、周、日三種日程表格式的內容切換。具體操作如下：
① 分別在新的頁面中設計好三種日程表格式；
② 在日程表頁面添加內容面板組件，使用內容面板上方的工具欄，將內容面板設置爲三層；
③ 選中內容層，拖拽右邊的連接點，將三種日程表與三層內容面板進行連接，日程表即可被加載到對應內容層；
④ 使用分段控件組件設置月、周、日三個選項，分別與對應的內容層設置交互，即可實現內容切換的效果。
一起來看看最終實現的效果吧~
4.使用快速格子功能一鍵填充信息列表
在設計商品管理、郵件、聊天等頁面時，通常需要填充大量信息，以保證最終呈現效果的完整性。但單獨設計每條信息太浪費時間，複製粘貼又需要逐個調整間距，有沒有什麼更好的實現方法呢？
使用Mockplus的快速格子功能即可快速製作重複的佈局，提高設計效率。
① 首先，我們需要使用矩形、單行文字、圖標等組件，完成單條信息的設計；
② 選中剛剛設計好的組件，點擊主工具欄上的“轉爲格子”圖標，或右鍵選擇“轉爲格子”，即可生成格子；
③ 拉動格子，格子的內容會自動生成；
④ 在格子上，可以直接拉動線條來設置單元格的大小、行間距等，也可以直接在右側屬性面板中輸入數字進行設置。
⑤ 如果需要單獨編輯某個格子，操作方式與母版一樣，右鍵選擇“脫離”即可。
5.消息列表選擇狀態切換設計
在設計郵件和聊天頁面的消息列表時，爲了突出選擇，我們對被選中的條目增加了顏色切換的設計，當消息列表中某個條目被選中時，顏色會切換爲白色，且與右側展開的詳情頁顏色一致，互相呼應。
設計方式很簡單：
① 使用矩形+單行文字+圖標組合成一個條目；
② 選中矩形，拖拽鏈接點連向自己，選擇“點擊時設置顏色”，即可實現上述效果；
③ 使用快速格子功能或直接複製粘貼條目，消息列表的設計就完成啦。
6.其他組件使用技巧：
在這款電商管理系統原型中，還使用了許多Mockplus的封裝組件來呈現電商管理系統的各項功能，如：
① 下拉列表框組件
當我們想要呈現上文所述的內容切換效果，但內容層太多，無法使用分段控件實現，我們就可以使用下拉列表框組件，這也是這款原型中使用頻率非常高的組件之一。
雙擊下拉列表框組件，即可編輯條目名稱和設置交互。在右側屬性面板中還可以設置文本顏色、選中顏色、是否允許輸入等屬性，非常方便。
② 彈出面板組件
在日曆、訂單管理等頁面，我們都使用了彈出面板組件來呈現電商管理系統的“增加任務”等效果。
在彈出面板中設置好內容格式，拖動對應按鈕的鏈接點設置觸發方式，即可實現下圖效果：
③ 卡片式設計
卡片式設計是E-Market電商管理系統原型的設計亮點之一，使用矩形+圖標+單行文字組件即可組合成卡片。使用上文中提到的快速格子功能，即可快速完成文件管理頁面的設計。
除了快速格子，我們還可以在面板組件中添加卡片設計元素，然後直接複製粘貼面板組件，即可實現快速複用。
設計好的所有組件，都可以在右鍵菜單中添加到組件庫，便於你在不同的辦公地點使用自己的組件，同時，還可以將組件分享給其他人。
以上就是摹客團隊爲大家分享的電商管理系統原型。
原型模板下載
圖片集下載