產(chǎn)品定位
人音教育提供音樂教育的思想、理念、方向和營養(yǎng)，不斷完善品牌內涵，如操作規(guī)范、管理細則、運營方式、宣傳文案和后期產(chǎn)品等一些列內容。通過對教材、樂譜、樂器、書刊等一系列音樂資源的整合，有意識地從教育角度進行創(chuàng)造，打造專業(yè)化的音樂網(wǎng)站平臺，形成以用戶為中心的音樂生態(tài)圈。
"隨著我國國民經(jīng)濟的快速發(fā)展，無論是國家還是家庭都越來越重視對音樂教育的投入。與此同時教育資源管理也變得繁瑣復雜，音樂資源質量參差不齊。人音教育利用專業(yè)的音樂教育經(jīng)驗對音樂教育資源平臺的內容進行分類和篩選，從而為廣大的互聯(lián)網(wǎng)用戶提供優(yōu)質的音樂教育資源，打造屬于用戶自己的音樂學習圈。"
人音網(wǎng)站由珠海啟?？萍嘉兴{藍設計負責重點頁的界面視覺設計、交互設計。當時網(wǎng)站功能開發(fā)已經(jīng)基本完成，只是界面設計達不到最終客戶的認可，藍藍設計的設計師接到任務后，通過前期的充分溝通，了解客戶需求，參考大量音樂網(wǎng)站，進行競品分析，融入當前流行的音樂設計風格和元素，最終圓滿完成該項目。
目標用戶
人音教育致力于幫助每一位熱愛音樂的人，洞悉用戶個人及家庭成長的需求，開設了人音教材、人音樂譜、詞典在線等音樂課程的品類，幫助用戶拓展積極向上的音樂理念和方式，不斷突破和完善自我。網(wǎng)站及移動端針對音樂文化感興趣的或者是音樂相關的研究人員都可以使用，讓音樂愛好者隨心所欲的找教材、練曲子。
設計風格
結合人音教育的業(yè)務特點，打造專屬的音樂設計風格，主色采用紅色作為界面主色調。采用中國古典音樂元素的設計，來凸顯頁面整體的古風古韻的音樂風格。清晰簡明的功能模塊布局，做到各層級的內容視覺統(tǒng)一性，降低用戶的操作難度，做到所見即所得。采用音樂元素的圖標，豐富組件樣式，有層次的呈現(xiàn)內容，增強頁面的節(jié)奏感和趣味性。
首頁界面設計
人音教育音樂網(wǎng)站，其主要用途是傳遞音樂文化與精神，綜合音樂資源，為喜愛音樂的用戶提供的一個網(wǎng)站。
客戶提出的需求其主要方向是要從用戶的角度出發(fā)，創(chuàng)造互通專業(yè)的音樂文化領域,提高易用性和美觀度。
因為當時整個網(wǎng)站已開發(fā)完畢，功能方面是沒有問題的，只是UI設計不能得到最終客戶的認可。所以在總體框架不變的情況下，藍藍設計主要重構了首頁的設計，并給其它的幾個欄目頁面做了統(tǒng)一性配色的指導。
首頁banner圖采用鋼琴與音符的音樂元素，富有靈動感和節(jié)奏感，緊密貼合音樂網(wǎng)站的主題。
banner以下主題部分整體采用白色卡片作為背景，每個模塊之間通過標題進行區(qū)分，用戶可以快速找到自己想要的板塊。我們將人音教材、人音樂譜、詞典在線放在頁面左側展示，一是可以展示人音教育網(wǎng)站模塊主要部分，引導用戶直觀的看到；二是減少頁面板塊的寬度，方便用戶的閱讀。詞典在線部分包括各個專區(qū)的快捷入口，采用與文字相關的圖標便于用戶理解。精品出版為用戶提供最優(yōu)質、人氣最旺的內容。
人音教育首頁
移動端界面將主要的板塊內容置于頂部導航欄位置上，用戶可以直觀的看見，點擊自己想要的部分，降低用戶的操作流程，向右滑動更清晰化的展現(xiàn)。
采用卡片式的Banner設計，輪播圖片可以更好的增加交互的效果，使頁面看起來更加整潔。
人音樂譜部分由鋼琴和聲樂兩部分組成，用戶可以點擊進行切換跳轉，增強交互效果。同時左右滑動用戶可以無限制的進行切換，減少頁面跳轉，方便用戶進行查看。同時人音樂譜旁的搜索按鈕可以幫助用戶快速進行查找目標信息。
詞典在線區(qū)域icon采用紅色面性的圖標設計，不僅加強品牌意識，同時更加生動化，提升用戶的點擊意向。
人音新媒體可以通過點擊下方的二維碼彈出二維碼頁面，紅色的面性色塊強化品牌基因，圓角設計更平滑聚焦。
最新發(fā)布為用戶提供最新的內容，采用灰色圓角卡片背景進行分割，板塊之間的留白空間，營造出良好的呼吸感。
人音教育首頁-二維碼
由用戶點擊首頁人音新媒體二維碼出現(xiàn)彈窗。
人音動態(tài)頁
采用卡片式的Banner設計，輪播圖片可以更好的增加交互的效果，使頁面看起來更加整潔
人音動態(tài)采用圖文結合的方式清晰直觀的展現(xiàn)動態(tài)，便于用戶的理解，增強用戶的點擊率。
精品出版為用戶提供最優(yōu)質、人氣最旺的內容。采用灰色圓角卡片背景進行分割，板塊之間的留白空間，營造出良好的呼吸感。
人音動態(tài)-新聞列表頁
人音動態(tài)新聞列表頁由人音動態(tài)頁點擊更多跳轉。該頁面清晰的羅列動態(tài)，更直觀簡潔的展現(xiàn)內容。各個動態(tài)信息之間用分割線進行分割，再提高
設計作品網(wǎng)站設計
設計作品網(wǎng)站設計
設計作品能源網(wǎng)站設計
設計作品氣象網(wǎng)站設計
設計作品物流網(wǎng)站設計
