張璐

摘 要：本文以蒙瑪音樂工作室網(wǎng)站的界面設(shè)計為例，進行基于用戶體驗的音樂工作室網(wǎng)站W(wǎng)eb用戶界面的研究與設(shè)計分析。本研究的音樂工作室網(wǎng)站界面設(shè)計是以用戶體驗的研究理論為基礎(chǔ)，是以用戶為中心的設(shè)計理念。

關(guān)鍵詞：音樂工作室網(wǎng)站 界面設(shè)計 用戶體驗

音樂工作室是一個外包服務(wù)企業(yè)，其網(wǎng)站的建設(shè)目的是為了推廣企業(yè)的品牌形象，以便更多的用戶知道它，同時也是為了將提供的服務(wù)、公司形象展現(xiàn)給用戶，挖掘潛在的隱性客戶。實際從網(wǎng)站中獲取信息的人數(shù)遠大于客戶的數(shù)量，優(yōu)質(zhì)的用戶體驗是將這些“偶爾的瀏覽者”轉(zhuǎn)化為“實際的客戶”的關(guān)鍵因素。任何在用戶體驗上所做的努力，都體現(xiàn)了以用戶為中心的設(shè)計思想，這一理念應(yīng)貫穿于整個WEB用戶界面設(shè)計的過程中。

萌瑪音樂工作室是一家即將在無錫成立的音樂外包服務(wù)型公司，該工作室主要提供有關(guān)游戲（包括客戶端游戲、頁游、手游等）配樂以及影視音樂相關(guān)的服務(wù)，意在以業(yè)內(nèi)專業(yè)的游戲及影視配音團隊為客戶提供優(yōu)質(zhì)的外包服務(wù)。由于它目前正在創(chuàng)建之中，并不像小旭、緋雨等業(yè)內(nèi)成功的工作室有名氣，因此要創(chuàng)建網(wǎng)站推廣公司的品牌形象，傳遞公司的相關(guān)信息，重點突出專業(yè)優(yōu)質(zhì)的外包服務(wù)流程。

一、萌瑪音樂工作室網(wǎng)站界面設(shè)計

1.設(shè)計內(nèi)容

根據(jù)人機交互方式進行分類，音樂工作室網(wǎng)站界面設(shè)計大體可分為以下四個方面：

數(shù)據(jù)交互界面設(shè)計：指人們通過輸入數(shù)據(jù)的方式與計算機進行交流，屬于人機交互的重要形式。

圖形界面設(shè)計：語言、文字和圖像這三個渠道，是人類傳遞信息主要方式。其中有70%的信息來自于視覺系統(tǒng)，也就是從圖像中獲得。因此，對圖像界面設(shè)計的研究和探討有助于產(chǎn)品設(shè)計的創(chuàng)新。

語音界面設(shè)計：被公認為最自然流暢、快捷的信息交流方式是語言。研究表明，人類的聽覺通道存在很多優(yōu)勢，聽覺系統(tǒng)與視覺系統(tǒng)的合理搭配，能夠帶給人類強烈的存在感與真實感等。

行為交互界面設(shè)計：人機行為交互是計算機通過定位識別人類，跟蹤人類的肢體活動，從而理解人類的動作和行為，并作出相應(yīng)的智能反饋。

設(shè)計人員從音樂工作室創(chuàng)建者提供的需求中提取出具體的商業(yè)目標和用戶需求，結(jié)合用戶體驗、用戶界面設(shè)計相關(guān)的理論知識，對同類音樂工作室網(wǎng)站進行可用性測試，針對視覺傳達、信息設(shè)計、導航系統(tǒng)設(shè)計的優(yōu)缺點，將抽象的需求問題具體細化到功能設(shè)計和交互設(shè)計、界面設(shè)計中，最后根據(jù)音樂工作室的特點，設(shè)計整體的視覺風格和品牌形象。

2.用戶研究

在創(chuàng)建產(chǎn)品的每個步驟中，都要把用戶列入考慮范圍，以設(shè)計出誘人的、高效率的用戶體驗為目的的方法，稱為“以用戶為中心的設(shè)計（UCD）”。

用戶研究是以用戶為中心設(shè)計流程中的第一步。它是一種理解用戶，將用戶目標、需求與自身產(chǎn)品的商業(yè)宗旨相匹配的理想方法。用戶研究的首要目的是產(chǎn)品目標用戶群體的確定，產(chǎn)品概念的細化明確，并依據(jù)用戶使用產(chǎn)品時的具體操作特性、感知特征、認知心理特征等方面，實現(xiàn)以用戶實際需求作為產(chǎn)品設(shè)計導向，最終設(shè)計出更加符合用戶習慣、期望的產(chǎn)品。對公司而言，用戶研究有助于節(jié)約時間、開發(fā)成本資源，加快產(chǎn)品的迭代過程。對用戶而言，用戶研究將用戶的需求轉(zhuǎn)化為具體功能，并將其設(shè)計得易用且更強大，使得產(chǎn)品更貼近用戶的實際需求。

常用的幾種用戶研究方式，包括問卷調(diào)查、情境調(diào)查、競品分析、深度訪談與焦點小組等，都有利于我們更好地了解用戶的信息、需求和偏好。在產(chǎn)品設(shè)計初期，用戶研究幫助設(shè)計師細化功能，確定核心功能；在進行需求規(guī)格說明階段，用戶研究可以定義目標用戶群體與需求分析；之后進入產(chǎn)品設(shè)計階段，包括任務(wù)分析、概念設(shè)計、原型制作，在每一個設(shè)計過程都要貫穿可用性測試，用戶研究幫助選擇被試制、設(shè)定測試方案；之后便是進入開發(fā)階段，從大的層面看，用戶研究把產(chǎn)品的概念更加具體化、合理化，更貼近符合用戶的真實需求，為功能定義提供依據(jù)。

二、同類工作室網(wǎng)站競品分析

對競爭者的方案進行研究，但使用時不能單純的去復(fù)制對方的內(nèi)容，或是完全模仿對方的表現(xiàn)形式。在設(shè)計萌瑪音樂工作室網(wǎng)站的用戶界面初始，我對以下四個業(yè)內(nèi)比較成熟的同類服務(wù)網(wǎng)站，進行了簡單的可用性測試與體驗，主要是研究其他同類服務(wù)網(wǎng)站的信息分類、導航系統(tǒng)設(shè)計、信息呈現(xiàn)的邏輯層次、可用性問題等，并列舉出他們的優(yōu)缺點。

網(wǎng)站一：小旭游戲音樂制作

全局導航

首頁、音樂音樂、游戲音效、游戲音樂、游戲主題歌、游戲視頻配樂、團隊介紹、頁游配樂、IOS游戲配樂、動漫配樂、SNS配樂、游戲演唱會、小旭新聞、團隊視頻、聯(lián)系我們。

頁面信息呈現(xiàn)方式

多采用文字（展示新聞、介紹）、圖片（形象具體）、視頻（MV、音樂會）、播放器（音樂作品）。

整站布局與色彩搭配

小旭游戲音樂制作網(wǎng)站的布局導航采用頂部的布局結(jié)構(gòu)，根據(jù)瀏覽加載頁面由上至下的方式，方便用戶觀看網(wǎng)站的內(nèi)容。由于整個網(wǎng)站的內(nèi)容和信息過多，采用模塊式區(qū)分各個區(qū)域的信息，可是過多的區(qū)分模塊，會造成信息邏輯紊亂。在色彩搭配上，采用了黃色、玫紅等鮮亮色彩，并搭配整個頁面背景，渲染出小旭音樂團隊的活躍、積極的個性，與游戲、音樂主題相關(guān)聯(lián)。但是過于鮮亮的顏色不利于用戶的長期瀏覽閱讀。

體驗分析

優(yōu)點：1）整個網(wǎng)站內(nèi)容豐富、成熟的作品很多；2）突出了作品、服務(wù)流程、團隊介紹；3）信息呈現(xiàn)結(jié)構(gòu)顯示出層次；4）頂部的導航劃分細致；

缺點：1）導航劃分過于細致、無主次層次感；2）內(nèi)容顯示過于密集，缺乏條理；3）導航與頁面定位不一致，容易使用戶迷失；4）網(wǎng)站的整體視覺過于鮮亮，搶奪用戶的注意力。

網(wǎng)站二：緋雨音樂

全局導航

首頁、作品賞析、最新動態(tài)、錄音棚、關(guān)于我們、加入我們、聯(lián)系我們。