亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

人音教育網站及移動端界面設計(打造屬于你的音樂學習圈)

人音教育網站及移動端界面設計(打造屬于你的音樂學習圈)

交互設計 | 界面設計 | vue開發

交互設計 | 界面設計 | vue開發

"隨著我國國民經濟的快速發展,無論是國家還是家庭都越來越重視對音樂教育的投入。與此同時教育資源管理也變得繁瑣復雜,音樂資源質量參差不齊。人音教育利用專業的音樂教育經驗對音樂教育資源平臺的內容進行分類和篩選,從而為廣大的互聯網用戶提供優質的音樂教育資源,打造屬于用戶自己的音樂學習圈。"

人音網站由珠海啟裕科技委托藍藍設計負責重點頁的界面視覺設計、交互設計。當時網站功能開發已經基本完成,只是界面設計達不到最終客戶的認可,藍藍設計的設計師接到任務后,通過前期的充分溝通,了解客戶需求,參考大量音樂網站,進行競品分析,融入當前流行的音樂設計風格和元素,最終圓滿完成該項目。

音樂APP界面設計

產品定位

人音教育提供音樂教育的思想、理念、方向和營養,不斷完善品牌內涵,如操作規范、管理細則、運營方式、宣傳文案和后期產品等一些列內容。通過對教材、樂譜、樂器、書刊等一系列音樂資源的整合,有意識地從教育角度進行創造,打造專業化的音樂網站平臺,形成以用戶為中心的音樂生態圈。

音樂APP界面設計

目標用戶

人音教育致力于幫助每一位熱愛音樂的人,洞悉用戶個人及家庭成長的需求,開設了人音教材、人音樂譜、詞典在線等音樂課程的品類,幫助用戶拓展積極向上的音樂理念和方式,不斷突破和完善自我。網站及移動端針對音樂文化感興趣的或者是音樂相關的研究人員都可以使用,讓音樂愛好者隨心所欲的找教材、練曲子。

音樂APP界面設計

設計風格

結合人音教育的業務特點,打造專屬的音樂設計風格,主色采用紅色作為界面主色調。采用中國古典音樂元素的設計,來凸顯頁面整體的古風古韻的音樂風格。清晰簡明的功能模塊布局,做到各層級的內容視覺統一性,降低用戶的操作難度,做到所見即所得。采用音樂元素的圖標,豐富組件樣式,有層次的呈現內容,增強頁面的節奏感和趣味性。

首頁界面設計

人音教育音樂網站,其主要用途是傳遞音樂文化與精神,綜合音樂資源,為喜愛音樂的用戶提供的一個網站。

客戶提出的需求其主要方向是要從用戶的角度出發,創造互通專業的音樂文化領域,提高易用性和美觀度。

因為當時整個網站已開發完畢,功能方面是沒有問題的,只是UI設計不能得到最終客戶的認可。所以在總體框架不變的情況下,藍藍設計主要重構了首頁的設計,并給其它的幾個欄目頁面做了統一性配色的指導。

首頁banner圖采用鋼琴與音符的音樂元素,富有靈動感和節奏感,緊密貼合音樂網站的主題。

banner以下主題部分整體采用白色卡片作為背景,每個模塊之間通過標題進行區分,用戶可以快速找到自己想要的板塊。我們將人音教材、人音樂譜、詞典在線放在頁面左側展示,一是可以展示人音教育網站模塊主要部分,引導用戶直觀的看到;二是減少頁面板塊的寬度,方便用戶的閱讀。詞典在線部分包括各個專區的快捷入口,采用與文字相關的圖標便于用戶理解。精品出版為用戶提供最優質、人氣最旺的內容。

人音教育網站及移動端界面設計
人音教育網站及移動端界面設計

人音教育首頁

移動端界面將主要的板塊內容置于頂部導航欄位置上,用戶可以直觀的看見,點擊自己想要的部分,降低用戶的操作流程,向右滑動更清晰化的展現。

人音教育網站及移動端界面設計

采用卡片式的Banner設計,輪播圖片可以更好的增加交互的效果,使頁面看起來更加整潔。

移動端界面設計

人音樂譜部分由鋼琴和聲樂兩部分組成,用戶可以點擊進行切換跳轉,增強交互效果。同時左右滑動用戶可以無限制的進行切換,減少頁面跳轉,方便用戶進行查看。同時人音樂譜旁的搜索按鈕可以幫助用戶快速進行查找目標信息。

音樂APP界面設計

詞典在線區域icon采用紅色面性的圖標設計,不僅加強品牌意識,同時更加生動化,提升用戶的點擊意向。

音樂APP界面設計

人音新媒體可以通過點擊下方的二維碼彈出二維碼頁面,紅色的面性色塊強化品牌基因,圓角設計更平滑聚焦。

人音教育網站及移動端界面設計

最新發布為用戶提供最新的內容,采用灰色圓角卡片背景進行分割,板塊之間的留白空間,營造出良好的呼吸感。

音樂APP界面設計

人音教育首頁-二維碼

由用戶點擊首頁人音新媒體二維碼出現彈窗。

音樂APP界面設計
人音教育網站及移動端界面設計

人音動態頁

采用卡片式的Banner設計,輪播圖片可以更好的增加交互的效果,使頁面看起來更加整潔

人音教育網站及移動端界面設計

人音動態采用圖文結合的方式清晰直觀的展現動態,便于用戶的理解,增強用戶的點擊率。

人音教育網站及移動端界面設計

精品出版為用戶提供最優質、人氣最旺的內容。采用灰色圓角卡片背景進行分割,板塊之間的留白空間,營造出良好的呼吸感。

人音教育網站及移動端界面設計

人音動態-新聞列表頁

人音動態新聞列表頁由人音動態頁點擊更多跳轉。該頁面清晰的羅列動態,更直觀簡潔的展現內容。各個動態信息之間用分割線進行分割,再提高

  返回