淘物購物商城——原型設計

ypzyh發表於2024-04-14

一、原型工具優缺點對比

墨刀、Axure、Mockplus都是常見的原型設計工具,它們在適用領域和優缺點上有著各自的特點:

1. 墨刀:

適用領域:墨刀適用於快速原型設計和團隊協作。它的介面簡潔易用,支援多種互動和動畫效果,適合用於移動應用和網頁的設計。
優點:簡單易上手,無需編碼經驗;提供豐富的互動元件和模板;支援團隊協作,可以實時編輯和評論。
缺點:功能相對較簡單,對於複雜的互動和動效支援不夠;線上協作功能可能會受到網路環境的限制。

2. Axure:

適用領域:Axure適用於高保真原型設計和複雜互動的專案。它功能強大,支援自定義互動和動畫,適合用於大型軟體和應用的設計。
優點:提供高度自定義的互動和動畫效果;支援複雜的邏輯和條件互動;輸出高保真原型,可用於使用者測試和開發參考。
缺點:學習曲線較陡,需要一定的時間去掌握其豐富的功能;介面相對複雜,不夠直觀。

3. Mockplus:

適用領域:Mockplus適用於快速原型設計和小型團隊協作。它注重簡潔高效,提供豐富的元件和模板,適合用於簡單的移動應用和網頁的設計。
優點:介面簡潔,易上手;提供豐富的元件和模板,可以快速搭建原型;支援簡單的團隊協作。
缺點:功能相對有限,不夠適用於複雜的互動和動效設計;對於大型專案可能不夠靈活。

總體而言,選擇適合自己專案需求和團隊特點的原型設計工具非常重要。墨刀適用於快速原型和團隊協作,Axure適用於複雜互動和高保真原型,Mockplus適用於簡單快速的原型設計。

二.實驗

  1. 主題名稱:購物商城原型
  2. 功能:商品推薦,搜尋商品,商品加購,建立訂單,商品分類,商品詳情頁,使用者登入
  3. 介面設計考慮因素:商品的呈現方式要清晰明瞭,佈局清晰。同時,可以透過圖片、分類展示瞭解商品簡況,進入商品詳情頁瞭解商品詳細資訊。提供使用者與應用之間的互動。具體由以下介面組成:

(一)使用者登入頁


介面功能:上圖為使用者登入頁,可以透過手機簡訊驗證碼或者微信登入商城
介面組成:中間為手機號輸入視窗,下方有微信登入按鈕
操作步驟:輸入手機號後獲取驗證碼登入,或點選微信登入後授權登入

(二)商城首頁


介面功能:上圖為商城首頁,可進行搜尋商品,瀏覽推薦商品,跳轉分類條目瀏覽,最下方按鈕可進行四個主要介面的跳轉;
介面組成:上方搜尋框,中間為推薦與分類條目,下方為推薦內容;
操作步驟:可在上方搜尋商品,也可點選商品分類選擇商品分類,點選最下側的按鈕可跳轉到對應的介面;

(三)商城分類頁


介面功能:上圖為商城分類,可以瀏覽分類簡概,瀏覽大分類與小分類內容,透過小分類內容跳轉搜尋介面,最下方按鈕可進行四個主要介面的跳轉;
介面組成:左側為大分類欄,右側為小分類詳情
操作步驟:可點選左側大分類欄切換分類,點選小分類欄跳轉搜尋介面,點選最下側的按鈕可跳轉到對應的介面;

(四)商品搜尋列表


介面功能:上圖為商品搜尋列表,可以在搜尋欄中填寫關鍵詞進行商品搜尋,搜尋後出現商品列表,可以點選商品進入商品詳情頁;
介面組成:上方搜尋框,下方為搜尋內容
操作步驟:可點選搜尋欄改變搜尋內容,點選上方返回鍵回到主頁。點選小商品欄跳轉對應商品詳情頁介面

(五)商品詳情頁



介面功能:可以檢視商品資訊,商品評價,商品加入購物車,收藏商品,購買商品
介面組成:上方商品價格與圖片,下方商品評價與推薦,底部固定懸浮欄可以加購,購買與收藏
操作步驟:可點選加入購物車將商品加購,也可以直接購買商品,點選收藏可以收藏商品

(六)購物車頁面


介面功能:可以檢視購物車商品資訊,購物商品總價,商品結算訂單,最下方按鈕可進行四個主要介面的跳轉
介面組成:頁面中可滾動瀏覽商品價格與圖片,底部固定懸浮欄可以結算訂單進入訂單頁面
操作步驟:點選選擇框進行選擇需要結算的商品,可以點選全選進行全部選擇,點選結算按鈕跳轉結算頁面,點選最下側的按鈕可跳轉到對應的介面;

(七)訂單結算頁


介面功能:可以修改收貨地址,選擇快遞方式與發票,確認付款
介面組成:上方為個人收貨資訊,中間為商品資訊,下方為總價格與結算按鈕
操作步驟:點選上方地址可以更改收貨地址與個人資訊,計算總價後可以選擇點選結算按鈕付費,點選最下側的按鈕可跳轉到對應的介面;

(八)個人頁面


介面功能:可以檢視個人購物資訊,訂單資訊,更改個人頭像與資訊
介面組成:上方為個人資訊與頭像,中間為訂單資訊與收藏按鈕,下方為隨機推薦商品
操作步驟:點選上方登入與註冊可以跳轉登入介面,點選訂單資訊可以檢視個人訂單,點選最下側的按鈕可跳轉到對應的介面

相關文章