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