世界知名大學(xué)網(wǎng)站內(nèi)容與設(shè)計(jì)

1、世界知名大學(xué)網(wǎng)站內(nèi)容與設(shè)計(jì)調(diào)研分析報(bào)告二一五年十二月一、調(diào)研目的與意義通過(guò)分析世界知名大學(xué)網(wǎng)站內(nèi)容規(guī)劃和視覺(jué)形象的典型實(shí)踐，歸納大學(xué)網(wǎng)站建設(shè)發(fā)展的總體趨勢(shì)，及其在信息構(gòu)建、功能設(shè)置、用戶體驗(yàn)、服務(wù)融合、視覺(jué)設(shè)計(jì)等方面的優(yōu)秀經(jīng)驗(yàn)，為學(xué)院在此次網(wǎng)站改版中提供內(nèi)容規(guī)劃和視覺(jué)設(shè)計(jì)的潮流依據(jù)，使網(wǎng)站在信息構(gòu)建、業(yè)務(wù)融合方面更加符合用戶需求，打造面向各類受眾的主要宣傳窗口和服務(wù)平臺(tái)。二、調(diào)研范圍本次標(biāo)桿網(wǎng)站共選取了4個(gè)優(yōu)秀案例，包括國(guó)內(nèi)外語(yǔ)言類學(xué)校各一個(gè)，綜合類大學(xué)兩個(gè)。具體名單如下表：表1 標(biāo)桿網(wǎng)站網(wǎng)址列表企業(yè)名稱學(xué)校網(wǎng)址上海外國(guó)語(yǔ)大學(xué)東京外國(guó)語(yǔ)大學(xué)www.tufs.ac.jp伯明翰大學(xué)www.birm

2、ingham.ac.uk 萊斯特大學(xué)Le.ac.uk 三、優(yōu)秀案例解析3.1 上海外國(guó)語(yǔ)大學(xué)（一）欄目分類清晰，主題鮮明網(wǎng)站中文版共設(shè)置11個(gè)一級(jí)欄目（如下表），每個(gè)欄目?jī)?nèi)容定義清晰，注重展示學(xué)校實(shí)力、聚合服務(wù)功能。但一級(jí)欄目設(shè)置過(guò)多，影響用戶記憶和訪問(wèn)。因此，欄目設(shè)置一般設(shè)置在5-8個(gè)為宜。上外網(wǎng)站中文版首頁(yè)主導(dǎo)航下方，按照在校學(xué)生、教職員工、畢業(yè)校友、未來(lái)學(xué)生等不同角色設(shè)置訪問(wèn)通道。根據(jù)不同用戶對(duì)象提供相應(yīng)的信息和服務(wù)聚合，實(shí)用性很強(qiáng)。學(xué)校名稱上海外國(guó)語(yǔ)大學(xué)語(yǔ)言版本中文版英文版其他版本欄目設(shè)置學(xué)校概況About SISU關(guān)于上外基本與英文版一致，個(gè)別語(yǔ)種版本設(shè)置特色欄目，如日本語(yǔ)版設(shè)置國(guó)際

3、交流（國(guó)際交流）和役立情報(bào)（實(shí)用情報(bào)），主要介紹學(xué)生交流、孔子學(xué)院、學(xué)生活動(dòng)等內(nèi)容。教育教學(xué)Admissions入學(xué)學(xué)科學(xué)術(shù)Academics學(xué)術(shù)教育師資隊(duì)伍Research研究走進(jìn)上外Campus Life校園生活招生就業(yè)Global國(guó)際交流國(guó)際交流Resources資源服務(wù)上外有你公共服務(wù)關(guān)注上外信息公開(kāi)（二）多語(yǔ)種版本服務(wù)在中文首頁(yè)右上角，網(wǎng)站提供了“Global SISU”欄目，開(kāi)設(shè)22種語(yǔ)言版本網(wǎng)站，體現(xiàn)語(yǔ)言類學(xué)校強(qiáng)大的專業(yè)實(shí)力。各語(yǔ)種網(wǎng)站欄目框架和形象設(shè)計(jì)都充分吸收了國(guó)外大學(xué)網(wǎng)站經(jīng)驗(yàn)，以扁平化風(fēng)格為設(shè)計(jì)理念，內(nèi)容劃分簡(jiǎn)潔明快，非常符合國(guó)際化網(wǎng)站設(shè)計(jì)趨勢(shì)。具體如下圖1、2、3所示：以

4、英文版為例，上外網(wǎng)站設(shè)置了About SISU、Admissions、Academics、Research、Campus Life、Global、Resources八個(gè)欄目。上外英文版首頁(yè)圖如下：上外英文版首頁(yè)圖除英文版外，個(gè)別語(yǔ)種版本設(shè)置特色欄目，如日本語(yǔ)版設(shè)置國(guó)際交流（國(guó)際交流）和役立情報(bào)（實(shí)用情報(bào)），主要介紹學(xué)生交流、孔子學(xué)院、學(xué)生活動(dòng)等內(nèi)容。（三）服務(wù)聚合能力強(qiáng)上外網(wǎng)站除通過(guò)各類受眾的快速通道服務(wù)外，還在一級(jí)欄目設(shè)置了“公共服務(wù)”欄目，將與學(xué)校相關(guān)的十多類服務(wù)進(jìn)行融合，包括服務(wù)大廳、電話、班車、地圖、圖書(shū)等各門(mén)類，滿足不同用戶的服務(wù)需求（見(jiàn)下圖）。（四）社交媒體宣傳力度強(qiáng) 網(wǎng)站中英文版

5、均在首頁(yè)右下方設(shè)置微社交媒體區(qū)域，將學(xué)校整體對(duì)外的社交媒體進(jìn)行有效聚合，形成較強(qiáng)的宣傳合力，體現(xiàn)了積極利用龐大的社交用戶，有效宣傳企業(yè)學(xué)校品牌形象的目的（見(jiàn)下圖）。3.2 東京外國(guó)語(yǔ)大學(xué) （一）欄目設(shè)置簡(jiǎn)潔明確，內(nèi)容針對(duì)性強(qiáng) 東京外國(guó)語(yǔ)大學(xué)網(wǎng)站設(shè)置欄目體系中英文版都控制在7個(gè)，欄目名稱定義明確，內(nèi)容豐富準(zhǔn)確，整體網(wǎng)站架構(gòu)不超過(guò)三級(jí)，方便用戶快速找到所需信息（如下表）。學(xué)校名稱東京外國(guó)語(yǔ)大學(xué)語(yǔ)言版本日語(yǔ)版英文版按照在校學(xué)生、教職員工、畢業(yè)校友、未來(lái)學(xué)生等不同角色設(shè)置訪問(wèn)通道。一級(jí)欄目大學(xué)紹介About SISU關(guān)于東語(yǔ)入試情報(bào)Admissions入學(xué)學(xué)部·大學(xué)院Education教育學(xué)

6、生生活·就職Academics學(xué)術(shù)留學(xué)Campus Life校園生活研究活動(dòng)Research研究活動(dòng)國(guó)際交流InternationalAffairs國(guó)際交流（二）網(wǎng)站突出“便捷實(shí)用”理念東外網(wǎng)站首頁(yè)以用戶分流、服務(wù)聚合、新聞資訊為定位，能夠快速將每一個(gè)瀏覽網(wǎng)站的用戶快速導(dǎo)入其所需信息的欄目中，實(shí)用性較強(qiáng)。一是主導(dǎo)航下方按照在校學(xué)生、教職員工、畢業(yè)校友、未來(lái)學(xué)生等不同角色設(shè)置訪問(wèn)通道。二是視覺(jué)圖及下方、左側(cè)邊欄都將相關(guān)服務(wù)資源進(jìn)行排列。具體如下圖所示：【圖】東京外國(guó)語(yǔ)大學(xué)首頁(yè)3.3 伯明翰大學(xué)和拉斯特大學(xué)（一）網(wǎng)站架構(gòu)簡(jiǎn)潔，突出商務(wù)服務(wù)這兩所英國(guó)大學(xué)欄目設(shè)置具有更加簡(jiǎn)潔的特點(diǎn)，萊斯特大

7、學(xué)一級(jí)欄目?jī)H四個(gè)，突出課程設(shè)置、學(xué)生生活、研究活動(dòng)、商務(wù)服務(wù)四打大主題，容易給用戶留下深刻印象。同時(shí)，這兩個(gè)網(wǎng)站更加強(qiáng)調(diào)商務(wù)服務(wù)或商務(wù)合作內(nèi)容體現(xiàn)，強(qiáng)調(diào)“學(xué)以致用”的理念。學(xué)校名稱萊斯特大學(xué)伯明翰大學(xué)特點(diǎn)說(shuō)明語(yǔ)言版本英文版英文版設(shè)置Alumni（校友）、Working here（、教工）、Events（事件與活動(dòng)）、Visit（來(lái)訪服務(wù)）四個(gè)快捷訪問(wèn)通道。一級(jí)欄目Courses課程設(shè)置Study學(xué)習(xí)（入學(xué)）Student Life學(xué)生生活Research研究Reaserch研究活動(dòng)International國(guó)際交流Business商務(wù)服務(wù)Business商務(wù)服務(wù)News新聞中心About us

8、關(guān)于我們 伯明翰大學(xué)商務(wù)服務(wù)欄目介紹了合作伙伴、中小企業(yè)支持、獲得我們的創(chuàng)新、招聘我們的學(xué)生等欄目，采用商務(wù)這一主題吸引合作。伯明翰大學(xué)商務(wù)服務(wù)欄目（二）網(wǎng)站視覺(jué)沖擊力強(qiáng)，表現(xiàn)形式豐富、靈活全屏滾動(dòng)、卡片式、瀑布流等設(shè)計(jì)形式應(yīng)用十分靈活，有效增強(qiáng)網(wǎng)站美觀度。以視頻、圖片、圖形為主的展示，增加了閱讀網(wǎng)站時(shí)的趣味性，使瀏覽不再枯燥，成為一種享受。具有標(biāo)志性的巨幅高清大圖更能吸引求學(xué)者的眼球，引起他們來(lái)自內(nèi)心的向往（見(jiàn)下圖）。圖 萊斯特大學(xué)網(wǎng)站首頁(yè)圖 伯明翰大學(xué)網(wǎng)站首頁(yè)部分截屏（三）網(wǎng)站內(nèi)容詳細(xì)實(shí)用，能夠解決實(shí)際問(wèn)題課程信息介紹包括學(xué)習(xí)年限、開(kāi)始時(shí)間、學(xué)習(xí)目標(biāo)、聯(lián)系方式等基本信息，并且提供了如何申請(qǐng)

9、課程、開(kāi)放日預(yù)定、問(wèn)題解答等答疑信息。課程詳細(xì)介紹中提供了概覽、課程要點(diǎn)、教與學(xué)、以及應(yīng)聘情況介紹，給學(xué)位申請(qǐng)者以全面詳細(xì)的信息參考（見(jiàn)下圖）。伯明翰大學(xué)網(wǎng)站課程信息介紹案例（二）注重科研創(chuàng)新宣傳研究與創(chuàng)新作為當(dāng)今世界發(fā)展的主旋律，尤其對(duì)知名高校來(lái)講更是重中之重。伯明翰大學(xué)網(wǎng)站注重對(duì)學(xué)術(shù)帶頭人、研究領(lǐng)域、辯論與思維、科研設(shè)備等內(nèi)容介紹，有效為校內(nèi)外各界展示學(xué)校創(chuàng)新研究能力，并以此內(nèi)容吸引大量科技人才（見(jiàn)下圖）。伯明翰大學(xué)研究創(chuàng)新欄目介紹學(xué)校名稱語(yǔ)言版本一級(jí)欄目特色與亮點(diǎn)上海外國(guó)語(yǔ)大學(xué)中文版學(xué)校概況教育教學(xué)學(xué)科學(xué)術(shù)師資隊(duì)伍走進(jìn)上外招生就業(yè)國(guó)際交流上外有你公共服務(wù)關(guān)注上外信息公開(kāi)按照在校學(xué)生、教職

10、員工、畢業(yè)校友、未來(lái)學(xué)生等不同角色設(shè)置訪問(wèn)通道。英文版About SISU關(guān)于上外Admissions入學(xué)Academics學(xué)術(shù)教育Research研究Campus Life校園生活Global國(guó)際交流Resources資源服務(wù)提供22種語(yǔ)言版本網(wǎng)站內(nèi)，體現(xiàn)語(yǔ)言類學(xué)校實(shí)力。采用扁平化風(fēng)格設(shè)計(jì)，符合設(shè)計(jì)趨勢(shì)和用戶體驗(yàn)。其他版本基本與英文版一致，個(gè)別語(yǔ)種版本設(shè)置特色欄目，如日本語(yǔ)版設(shè)置國(guó)際交流（國(guó)際交流）和（實(shí)用情報(bào)）役立情報(bào)，主要介紹學(xué)生交流、孔子學(xué)院、學(xué)生活動(dòng)等內(nèi)容。東京外國(guó)語(yǔ)大學(xué)日語(yǔ)版大學(xué)紹介入試情報(bào)學(xué)部·大學(xué)院學(xué)生生活·就職留學(xué)研究活動(dòng)國(guó)際交流按照在校學(xué)生、教職員工、畢

11、業(yè)校友、未來(lái)學(xué)生等不同角色設(shè)置訪問(wèn)通道。英文版About SISU關(guān)于東語(yǔ)Admissions入學(xué)Education教育Academics學(xué)術(shù)Campus Life校園生活Research研究活動(dòng)InternationalAffairs國(guó)際交流萊斯特大學(xué)英文版Courses課程設(shè)置Student Life學(xué)生生活Reaserch研究活動(dòng)Business商務(wù)服務(wù)伯明翰大學(xué)英文版Study學(xué)習(xí)（入學(xué)）Research研究International國(guó)際交流Business商務(wù)服務(wù)News新聞中心About us關(guān)于我們?cè)O(shè)置Alumni（校友）、Working here（教工）、Events（事件與活

12、動(dòng)）、Visit（來(lái)訪服務(wù)）四個(gè)快捷訪問(wèn)通道。建議：1、在規(guī)劃?rùn)谀繒r(shí)，應(yīng)充分整合原網(wǎng)站同質(zhì)性強(qiáng)的欄目?jī)?nèi)容，保證欄目數(shù)量在6個(gè)左右。2、鑒于網(wǎng)站信息內(nèi)容多，可有效借鑒萊斯特和伯明翰大學(xué)網(wǎng)站，直接商務(wù)服務(wù)作為一級(jí)欄目，把合作伙伴、中小企業(yè)支持、獲得我們的創(chuàng)新、招聘我們的學(xué)生等欄目聚合到一個(gè)欄目中。3、挖掘科研創(chuàng)新、人文關(guān)懷等方面的內(nèi)容?？梢詮恼n程創(chuàng)新、流程創(chuàng)新、理念創(chuàng)新、未來(lái)猜想等方面展開(kāi)；人文關(guān)懷可從學(xué)生生活、學(xué)術(shù)帶頭人、校園文化、職工關(guān)懷、科研活動(dòng)等方面展開(kāi)。（二）首頁(yè)總體設(shè)計(jì)尺寸、色彩 頁(yè)面長(zhǎng)度以2-2.5屏為宜，主視覺(jué)比例趨向1250*390，甚至更大幅；顏色以不超過(guò)3種為主，且傾向于使用

13、藍(lán)色、灰色為主，尤其是灰色作為安全輔助色，在網(wǎng)站設(shè)計(jì)中備受青睞。企業(yè)名稱頁(yè)面長(zhǎng)度頁(yè)面內(nèi)容寬度主視覺(jué)比例顏色種類上外1.59601280*3502（藍(lán)、灰）東外2960960*2802（粉、灰）伯明翰3+9601250*3902（黑灰、黃）萊斯特3+980690*2203（藍(lán)、黃、灰）建議：1、隨著用戶訪問(wèn)設(shè)備的不斷更新，互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，北二外網(wǎng)站視覺(jué)設(shè)計(jì)可采用更寬闊的尺寸設(shè)計(jì)；2、采用更靈活的板式布局留足廣告位，增強(qiáng)網(wǎng)站的靈活性；3、采用紅色為主色、灰色輔助色來(lái)有效整合視覺(jué)元素，使網(wǎng)站內(nèi)容豐富有側(cè)重，表現(xiàn)形式美觀大方。4、采用扁平化設(shè)計(jì)風(fēng)格，將中英文版統(tǒng)一布局。（三）注重國(guó)際化、在線服務(wù)

14、、科技創(chuàng)新等方面內(nèi)容展示學(xué)科和課程介紹不僅僅局限于簡(jiǎn)單的產(chǎn)品介紹，需要在課程信息、課程內(nèi)容、常見(jiàn)問(wèn)題等方面都一系列的完整信息內(nèi)容，且提供產(chǎn)品查詢使用功能。此外，注重國(guó)際交流的介紹、科技創(chuàng)新等方面的展示，用以向用戶展示學(xué)校實(shí)力。在信息內(nèi)容展示方面，除去信息內(nèi)容的豐富度之外，更多注重信息的類別清晰、展示形式鮮明有趣，需更容易被用戶接受。內(nèi)容流程化產(chǎn)品介紹產(chǎn)品銷售幫助服務(wù)產(chǎn)品反饋展示趣味化海量信息堆疊分類清晰生動(dòng)動(dòng)鮮明建議：1、北二外在展示課程信息，包括學(xué)習(xí)年限、開(kāi)始時(shí)間、學(xué)習(xí)目標(biāo)、聯(lián)系方式等基本信息，并且提供了如何申請(qǐng)課程、開(kāi)放日預(yù)定、問(wèn)題解答等答疑信息。課程詳細(xì)提供概覽、課程要點(diǎn)、教與學(xué)、以及應(yīng)聘情況介紹，給學(xué)位申請(qǐng)者以全面詳細(xì)的信息參考，為用戶提供流程化服務(wù)，為未來(lái)企業(yè)平臺(tái)化運(yùn)營(yíng)奠定基礎(chǔ)。2、展示形式要做到符合用戶的瀏覽習(xí)慣，例如采用關(guān)鍵數(shù)據(jù)、標(biāo)簽切換、時(shí)間軸等可視化強(qiáng)的信息圖。（四）注重推廣用戶與社交媒體的互動(dòng)交流由于互聯(lián)網(wǎng)和移動(dòng)互聯(lián)網(wǎng)的發(fā)展，社交媒體在企業(yè)宣傳、產(chǎn)品宣傳、產(chǎn)品銷售等方面發(fā)揮著巨大的作用，各行業(yè)也越來(lái)越注重借助網(wǎng)站宣傳官方社交媒體，并借助社交媒體宣