Violet音樂社區界面原型手冊

目錄

• Violet音樂社區界面原型手冊
• 1、引言
  • 1.0 項目前階段相關文檔
  • 1.1 編寫目的
  • 1.2 開發背景
• 2、界面原型展現
  • 2.0 界面設計說明
  • 2.1 首頁
  • 2.2 歌單/專輯/單曲界面
  • 2.3 曲庫界面
    • 2.3.1 曲庫初始狀態
    • 2.3.2 曲庫搜索狀態
  • 2.4 圈子列表界面
  • 2.5 圈子主頁(圈子帖子列表)
  • 2.6 帖子詳情頁面
    • 2.6.1 帖子預覽
    • 2.6.2 回帖操做
  • 2.7 動態界面
  • 2.7.1 動態預覽
    • 2.7.2 動態評論展開
  • 2.8 用戶登陸界面
  • 2.9 用戶註冊界面
  • 2.10 全局播放器
    • 2.10.1 播放器靠邊收攏狀態
    • 2.10.2 播放器徹底展開狀態
  • 2.11 頁面點贊
    • 2.11.1 點贊前
    • 2.11.2 點贊後
• 3、人員分工

Violet音樂社區界面原型手冊

1、引言

1.0 項目前階段相關文檔

• Violet音樂社區需求分析說明書：http://www.javashuo.com/article/p-xlnrscxf-nt.html
• Violet音樂社區設計文檔：http://www.cnblogs.com/Keadin/p/11885656.html
• Violet音樂社區API接口文檔：https://www.showdoc.cc/589304476235742
• Violet音樂社區界面原型demo：http://kealine.top/SE/demo/

1.1 編寫目的

此文檔爲「Violet」音樂社區開發團隊的指導文檔。開發人員閱讀此文檔有助於團隊間合做，同時提升軟件質量。開發者應仔細閱讀此文檔，根據文檔需求來進行開發，達到預期功能與效果。

1.2 開發背景

音樂是一門藝術，是由有組織的樂音來表達人們情感、反映人類現實生活情感的藝術。現代科技的發展使得人們能夠利用網絡隨時隨地的享受音樂，然而在當今互聯網卻不多有一個以音樂爲媒介的社交平臺。本開發團隊想以「音樂+社交」的形式，開發一款集聽歌、交友和討論爲一體的網上社區——「Violet」音樂社區。Violet多指紫羅蘭，也可形容羞怯的人，本團隊旨在經過此平臺加強人們對音樂的交流，同時拉近人與人之間的距離。

2、界面原型展現

2.0 界面設計說明

本音樂社區名爲"Violet」音樂社區",擁有"紫羅蘭"的意蘊,因此咱們在設計前端頁面的時候,選擇了"羅蘭紫"(#9B59B6)做爲主色調. 由於社區面向的羣體主要是不善於人際交往的年輕羣體,整個系統界面咱們選擇了一種扁平化的設計,採用極簡主義,更加符合年輕人的審美,相應的,系統動效上,咱們也使用了比較活潑輕快的方案.

2.1 首頁

社區首頁包含上新大圖滾動、熱門歌單、熱門帖子、熱門圈子和熱門動態等模塊,意在給剛進入社區的用戶以社區最新最熱的社區內容展現.首頁展現了社區各個部份內容的精華,也是鏈接各個部分的入口頁面.

2.2 歌單/專輯/單曲界面

歌單/專輯/單曲界面是社區音樂部分最核心的模塊,其簡明的佈局也體現着這個社區的核心理念,在該頁面,用戶能夠獲取歌曲資源,選擇本身喜歡的內容進行收藏,加入歌單,播放等操做.在聽歌過程當中的看法,也能夠經過頁面下方的評論區,與更多的人一塊兒分享.

2.3 曲庫界面

曲庫是用戶搜索其感興趣內容的模塊.本社區的曲庫簡潔明瞭,沒有多餘的推薦.整個頁面只有社區圖標和搜索的輸入框.在用戶輸入關鍵詞以後,系統將顯示與其相關性最強的候選資源.

2.3.1 曲庫初始狀態

2.3.2 曲庫搜索狀態

2.4 圈子列表界面

社區全部圈子的預覽界面.

2.5 圈子主頁(圈子帖子列表)

一個圈子的主頁面.包含圈子的簡要信息以及圈子中的全部帖子.每一個帖子將會顯示其熱度(參與量)、標題、內容摘要、發起人等信息.用戶也能夠在該頁面選擇加入/退出該圈子.

2.6 帖子詳情頁面

帖子的詳情頁面,是本社區社交部分的核心區域之一.本頁面包含在該帖子主題下,全部參與的用戶的評論.在該頁面,用戶能夠發表本身的見解,也能夠爲別人的精彩觀點點贊.

2.6.1 帖子預覽

2.6.2 回帖操做

2.7 動態界面

動態頁面,是本社區社交功能的另外一個核心區域.該區域旨在創造一個用戶發表我的獨特看法的空間,該動態將會公開顯示在其餘用戶的動態界面,使陌生人之間的社交變得更加簡單.

2.7.1 動態預覽

2.7.2 動態評論展開

2.8 用戶登陸界面

2.9 用戶註冊界面

2.10 全局播放器

本社區採用社區全局級的播放器,在頁面跳轉中也能保持歌曲的正常播放,提升用戶的使用體驗. 正常狀態下,播放器將會收攏在頁面的左下角, 不影響用戶對於圈子、帖子等內容的正常瀏覽. 須要對歌曲進行操做時(切歌、調整音量、設置播放模式等),能夠講其展開.

2.10.1 播放器靠邊收攏狀態

2.10.2 播放器徹底展開狀態

2.11 頁面點贊

社區的"點贊"圖標爲一個星星,意爲"Star It".星星的亮度雖然不高,但足以點亮陌生人之間的交流,拉近彼此之間的距離,是本社區理念體現的一個小窗口.

2.11.1 點贊前

2.11.2 點贊後

3、人員分工

學號	姓名	分工
31701030	周佳輝	Web端頁面設計,前端總框架設計部署
31701013	羅賢哲	Web端頁面數據接口實現,先後端接口文檔撰寫
31701009	董騰然	服務後端帖子、圈子部分實現,需求文檔撰寫
31701015	孫華陽	服務後端歌曲、資源部分實現,數據庫設計
31701007	陳天翼	服務後端動態、評論、點贊部分實現,數據流圖繪製
31701059	周家豪	服務後端用戶部分實現,需求文檔撰寫