實驗一原型設計——網抑雲線上聽歌APP

尹梓羽發表於2024-04-16

1、對比分析墨刀、Axure、Mockplus等原型設計工具的各自的適用領域及優缺點(至少3條)。

(1)墨刀(MockingBot):
適用領域:墨刀適合初級到中級的原型設計者,特別適用於快速設計簡單的介面原型,可用於移動應用和網頁設計。
優點:

  • 介面簡潔,易於上手,對於不熟悉專業設計軟體的使用者友好。
  • 支援線上協作,團隊成員可以實時檢視和編輯設計。
  • 提供豐富的元素庫和模板,方便使用者快速搭建原型。

缺點:

  • 功能相對簡單,適用於簡單的原型設計,對於複雜互動和動效支援較弱。
  • 對於高階使用者來說,可能會覺得功能有限。

(2)Axure:
適用領域:Axure適合中級到高階的原型設計者,尤其適用於複雜的互動和動效設計,可用於網頁、移動應用和桌面應用的原型設計。
優點:

  • 功能強大,支援複雜的互動設計和動畫效果,可以實現高度還原真實應用的原型。
  • 提供豐富的互動元件和動態效果,能夠滿足各種複雜互動需求。
  • 支援團隊協作,****可以多人同時編輯同一份原型設計。

缺點:

  • 學習曲線較陡峭,對於初學者來說可能需要一定時間來熟悉其功能和操作。
  • 價格較高,相比其他工具較為昂貴。

(3)Mockplus:
適用領域:Mockplus適合中級到高階的原型設計者,主要用於設計簡單到中等複雜程度的互動原型,支援網頁、移動應用等設計。
優點:

  • 操作簡單,拖拽式的介面設計使得快速搭建原型變得容易。
  • 提供豐富的互動元件和模板,可以快速建立各種互動場景。
  • 支援多平臺匯出,可以匯出成HTML、圖片等格式,方便分享和展示。

缺點:

  • 功能相對於Axure而言較為簡單,對於複雜互動和動效支援不如Axure豐富。
  • 在團隊協作方面可能稍顯不足,與Axure相比可能不夠靈活。

2、原型設計

(1)主題名稱
網抑雲線上聽歌APP
(2)功能
實現登入、展示首頁介面、聽歌、搜尋、檢視個人資訊、互動跳轉頁面等功能。
(3)介面設計考慮因素

  • 使用者體驗:介面設計應簡潔、直觀,易於導航和使用。使用者可以快速找到他們想要的音樂、歌手或專輯,並能夠輕鬆地建立播放列表、收藏歌曲等。
  • 視覺吸引力:介面設計應具有吸引力,吸引使用者留在應用程式中瀏覽音樂內容。使用合適的顏色、圖示和圖片,以及引人注目的藝術封面,可以提高應用的吸引力。
  • 個性化推薦:根據使用者的喜好和聽歌歷史,提供個性化的音樂推薦是網易雲音樂的一大特色。介面設計應充分展示這些個性化推薦,使使用者能夠輕鬆發現新的音樂和藝術家。
  • 社交與互動:支援使用者將喜歡的音樂分享到社交網路,增強使用者互動性。提供評論和點贊功能,讓使用者參與到音樂社群中。

3、介面展示

(1)登入
介面功能:登入介面顯示多種登入方式以及服務條款項
介面組成:背景、時間、手機電量、wifi、訊號、圖示、一鍵登入按鈕、立即體驗按鈕、多種登陸方式按鈕
前置條件:開啟網抑雲APP
後置條件:進入“發現”主頁
操作步驟:點選“一鍵登入”按鈕進入

(2)發現(主頁)
介面功能:能夠進行頁面滑動和區域性頁面滾動,滾動頁面時有上下浮窗固定展示,圖片輪播,實現播放音樂和搜尋功能以及互動頁面跳轉功能
介面組成:搜尋欄、圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:登入介面點選“一鍵登入”按鈕即可進入
後置條件:搜尋、播放音樂、新歌、我的、關注介面
操作步驟:點選相應後置條件的互動按鈕

(3)搜尋
介面功能:展示“搜尋”介面,為跳轉到“搜尋結果”頁面作鋪墊,點選取消可返回“發現”頁面
介面組成:搜尋欄、圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選“發現”主頁上方搜尋框即進入
後置條件:“搜尋結果”頁面
操作步驟:點選“搜尋”介面上方搜尋框即進入

(4)搜尋結果
介面功能:展示“搜尋結果”介面,點選右上角“×”可返回“搜尋”頁面,上下浮窗展示功能,頁面滾動功能
介面組成:搜尋欄、圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選“搜尋”頁面上方搜尋框即進入
後置條件:返回至“搜尋”頁面
操作步驟:點選左上角箭頭即可返回

(5)新歌
介面功能:展示新歌介面
介面組成:開關按鈕、圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選發現主頁的“新歌”或者“更多”按鈕即可進入
後置條件:“發現”頁面
操作步驟:點選左上角箭頭返回“發現”頁面

(6)播放音樂
介面功能:可以實現播放音樂,圖片旋轉互動,進度條滾動功能
介面組成:圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選“發現”頁面底部浮窗播放歌曲皮膚即可進入
後置條件:“發現”頁面
操作步驟:點選左上角箭頭返回“發現”頁面

(7)我的
介面功能:展示我的介面,實現上下浮窗展示功能,頁面滾動功能,實現互動跳轉到到“個人資訊”頁面,點選頁面右上角搜尋可進入“搜尋”介面,底部皮膚欄可隨意切換
介面組成:圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選“發現”頁面底部“我的”按鈕即可進入
後置條件:“發現”頁面
操作步驟:點選左上角箭頭返回發現頁面

(8)個人資訊
介面功能:展示個人資訊,實現上下浮窗展示功能,頁面滾動功能,點選頁面左上角箭頭可返回“我的”頁面,底部皮膚欄可隨意切換
介面組成:圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選發現頁面底部“我的”按鈕即可進入
後置條件:返回“我的”頁面
操作步驟:點選左上角箭頭返回“我的”頁面

(9)關注
介面功能:展示“關注”頁面,實現上下浮窗展示功能,點選頁面左上角箭頭可返回“發現”頁面,底部皮膚欄可隨意切換
介面組成:圖示、圖片、文字、皮膚、內容皮膚、互動
前置條件:點選發現頁面底部“關注”按鈕即可進入
後置條件:返回“發現”頁面
操作步驟:點選左上角箭頭返回“發現”頁面

4、介面切換流程說明

(1)簡單流程圖
****
(2)介面切換流程圖

(3)介面切換影片錄製
https://www.bilibili.com/video/BV15x421m7aV/?vd_source=666c3a4a02a5c8bde37c909c045b7d08

相關文章