上交所網(wǎng)站改版提案-需優(yōu)化

上海2015年5月11日上海證券交易所網(wǎng)站改版提案mediamanfor母本和趨勢分析行業(yè)網(wǎng)站趨勢分析分析和結(jié)論上交所網(wǎng)站交互設(shè)計(jì)策略信息扁平化體驗(yàn)智能化用戶角色化體驗(yàn)場景化網(wǎng)站原型策劃策劃流程展示頁面原型展示網(wǎng)站視覺設(shè)計(jì)設(shè)計(jì)風(fēng)格展示設(shè)計(jì)理念描述項(xiàng)目進(jìn)度公司介紹目錄行業(yè)母本趨勢分析紐約證券交易所紐交所網(wǎng)站采用了全屏布局和響應(yīng)式設(shè)計(jì)，導(dǎo)航采用了左側(cè)導(dǎo)航首頁中很顯著的搜索功能，支持模糊搜索背景圖片和交易所新聞顯示了交易所的行業(yè)地位和歷史紐約證券交易所扁平化設(shè)計(jì)，歐式簡潔風(fēng)格，用色簡潔，VI色突出a首屏布局超前，略顯凌亂r紐約證券交易所點(diǎn)擊搜索后，展示全局頁面搜索，便于用戶對(duì)內(nèi)容的查看支持模糊搜索和匹配多種可能的搜索結(jié)果紐約證券交易所頻道頁面和展示結(jié)構(gòu)類似無線或手機(jī)的左側(cè)隱藏的一級(jí)導(dǎo)航，PC用戶可能會(huì)不太容易適應(yīng)多倫多證券交易所三列簡單布局，結(jié)構(gòu)清晰，主色藍(lán)色，以輕快冷暖色輔助使用，拉開信息層次a信息布局參差不齊r多倫多證券交易所多倫多交易所網(wǎng)站的一級(jí)導(dǎo)航采用下拉菜單，讓網(wǎng)站結(jié)構(gòu)扁平化，用戶可以很快方便的找到用戶想要的內(nèi)容多倫多證券交易所在詳情頁面支持字體放大和打印，而非全局更好的和社交媒體整合，方便內(nèi)容的傳播和分發(fā)支持多媒體和視頻類的新聞新加坡證券交易所扁平化設(shè)計(jì)，緊湊的信息模塊，基本以三列排版為主，版塊之間區(qū)分明顯a文字較小，間距過于緊密，不適合閱讀r新加坡證券交易所用戶快速入口，方便業(yè)務(wù)角色和用戶角色快速訪問主要一級(jí)菜單，包括披露、產(chǎn)品、服務(wù)、交易等采用統(tǒng)一多語言網(wǎng)站切換證券交易所的主要交易信息和數(shù)據(jù)在網(wǎng)站首頁權(quán)重較高東京證券交易所以logoVI紅色黑色為主，強(qiáng)烈的品牌色使用加強(qiáng)品牌印象，內(nèi)容部分兩列布局，結(jié)構(gòu)簡單，主次清晰a頁面過長r東京證券交易所左側(cè)菜單導(dǎo)航采用固定樣式網(wǎng)頁頭部導(dǎo)航采用固定樣式頁面的內(nèi)容可以上下滾動(dòng)?xùn)|京證券交易所菜單采用三級(jí)彈出式導(dǎo)航，用戶最短的距離找到目標(biāo)內(nèi)容網(wǎng)站浮動(dòng)的搜索框支持多語言和字體大小改變東京證券交易所讓用戶更方便的找到目標(biāo)內(nèi)容-支持復(fù)雜和高級(jí)搜索功能東京證券交易所詳情頁的菜單展示大頁腳的設(shè)計(jì)，符合部分用戶的體驗(yàn)習(xí)慣，讓頁腳當(dāng)網(wǎng)站輔助導(dǎo)航倫敦證券交易所調(diào)性沉穩(wěn)，模塊之間分割清晰，信息緊湊，2-3列布局a用色過于單一，沉悶，底下大塊白色空洞r倫敦證券交易所網(wǎng)站群快速鏈接按字母快速搜索首頁下拉菜單扁平化首頁倫敦證券交易所更多的視頻和多媒體內(nèi)容中國平安版塊間間隔清晰，扁平化設(shè)計(jì)，橙色品牌色印象深刻a各種風(fēng)格的廣告圖片使頁面異常凌亂r中國平安多頻道結(jié)構(gòu)和下拉菜單Banner中嵌入常用操作按用戶角色建立快捷入口中國平安頻道頁左側(cè)導(dǎo)航業(yè)務(wù)專題頁中國工商銀行紅色VI色鮮明，頁面更多地縱向擴(kuò)展，信息緊湊aUI設(shè)計(jì)陳舊，過時(shí)，banner設(shè)計(jì)風(fēng)格不統(tǒng)一r中國工商銀行支持普通搜索和高級(jí)搜索快捷用戶入口快捷業(yè)務(wù)入口用戶智能服務(wù)行業(yè)母本趨勢分析總結(jié)不斷的適應(yīng)行業(yè)趨勢的發(fā)展終端布局覆蓋PC、移動(dòng)和平板頁面自適應(yīng)設(shè)計(jì)，用戶無障礙使用風(fēng)格扁平化，突出表達(dá)的內(nèi)容學(xué)習(xí)借鑒其他互聯(lián)網(wǎng)產(chǎn)品突破傳統(tǒng)交互形態(tài)，如借鑒a移動(dòng)的交互不斷的學(xué)習(xí)更多互聯(lián)網(wǎng)交互設(shè)計(jì)趨勢更多從用戶思維思考，實(shí)現(xiàn)平臺(tái)的創(chuàng)新強(qiáng)化以用戶體驗(yàn)導(dǎo)向設(shè)計(jì)滿足核心用戶角色的體驗(yàn)強(qiáng)化關(guān)鍵業(yè)務(wù)的體驗(yàn)按用戶使用頻率組織結(jié)構(gòu)讓用戶路徑更短更少信息結(jié)構(gòu)更加扁平和靈活性導(dǎo)航的扁平化查詢智能化和人性化信息分類更符合用戶目標(biāo)平衡普通用戶和高級(jí)用戶網(wǎng)站交互設(shè)計(jì)策略上交所網(wǎng)站交互設(shè)計(jì)策略信息扁平化體驗(yàn)智能化用戶角色化體驗(yàn)場景化Part1:信息扁平化上交所官網(wǎng)是一個(gè)面向多用戶群體的大型綜合性官網(wǎng)，官網(wǎng)以披露信息和數(shù)據(jù)為核心功能，因此如何讓用戶更加便利的獲取和查詢信息是交互設(shè)計(jì)必須思考的核心主題之一。信息扁平化導(dǎo)航結(jié)構(gòu)扁平化查詢前置集成化Part1:信息扁平化導(dǎo)航結(jié)構(gòu)扁平化是讓網(wǎng)站的結(jié)構(gòu)扁平化的有效手段，通過下拉式扁平菜單，可以讓用戶方便的找到網(wǎng)站三級(jí)頁面，減少用戶的探尋的路徑Part1:信息扁平化查詢前置集成化是指把用戶必須進(jìn)入二級(jí)或三級(jí)頁面，才能夠查詢獲取信息的功能打包成集成工具，在首頁或一級(jí)頁面給用戶使用Part2:體驗(yàn)智能化體驗(yàn)智能化是讓網(wǎng)站的設(shè)計(jì)更加匹配用戶的操作，實(shí)現(xiàn)基于用戶行為數(shù)據(jù)的智能的匹配和推薦，減少用戶的輸入或選擇體驗(yàn)智能化智能模糊查詢按使用頻率組織結(jié)構(gòu)Part2:體驗(yàn)智能化通過智能模糊查詢來完善和優(yōu)化用戶的體驗(yàn)支持中文智能模糊匹配支持英文首字母智能匹配支持證券代碼模糊查詢模糊搜索信息類別智能分組智能匹配可直接點(diǎn)擊進(jìn)入Part2:體驗(yàn)智能化按使用頻率組織結(jié)構(gòu)是根據(jù)用戶的頁面點(diǎn)擊數(shù)據(jù)、用戶熱圖等用戶行為數(shù)據(jù)來調(diào)整頁面的功能模塊排序和位置Part3:用戶角色化以用戶中心的設(shè)計(jì)是指抽象用戶角色，以角色化的方式完善和優(yōu)化用戶體驗(yàn)用戶角色化按角色組織功能平衡普通用戶和高級(jí)用戶關(guān)注用戶角色成長Part3:用戶角色化按角色組織功能是把上交所官網(wǎng)用戶按用戶角色分為：普通散戶投資者、機(jī)構(gòu)投資者、投行和證券機(jī)構(gòu)、上市和擬上市公司、債券發(fā)行機(jī)構(gòu)和新聞媒體等。并按用戶所屬的角色優(yōu)化業(yè)務(wù)流程建立用戶角色快捷入口建立和角色相對(duì)應(yīng)的業(yè)務(wù)專區(qū)并細(xì)化角色流程和需求Part3:用戶角色化平衡普通用戶和高級(jí)用戶，從用戶的角度來看，上交所大部分用戶的流量是以散戶投資者，他們是網(wǎng)站的普通用戶，我們可以把他們視為“小白”用戶；還有一些是專業(yè)或準(zhǔn)專業(yè)用戶，對(duì)網(wǎng)站功能和服務(wù)有更高的要求。從用戶體驗(yàn)出發(fā)，須平衡好兩類用戶的需求。頁面更加簡潔，突出核心功能，滿足“小白”用戶需求文案和內(nèi)容更加清晰易懂，讓用戶更好的理解，提供必要在線幫助和提升隱藏復(fù)雜和高級(jí)功能，并對(duì)高級(jí)功能提供快速入門和用戶友好的簡介Part3:用戶角色化關(guān)注用戶角色成長，對(duì)很多新業(yè)務(wù)而言，比如滬港通或股指期貨等在新業(yè)務(wù)推廣階段，絕大部分用戶都是新用戶，隨著業(yè)務(wù)的持續(xù)深入，用戶的組成和用戶需求偏好也會(huì)相應(yīng)產(chǎn)生變化。時(shí)間用戶老用戶新用戶滬港通或股指期貨等重大業(yè)務(wù)專題實(shí)現(xiàn)“基礎(chǔ)專題頁+擴(kuò)展專題頁”基礎(chǔ)專題頁是網(wǎng)站的常規(guī)結(jié)構(gòu)頁面，承載長期業(yè)務(wù)功能能的導(dǎo)航和介紹擴(kuò)展專題頁以新用戶需求為核心，承載業(yè)務(wù)的前期推廣、業(yè)務(wù)介紹和傳播為主Part4:體驗(yàn)場景化上交所官網(wǎng)是一個(gè)面向多用戶群體的大型綜合性官網(wǎng)，官網(wǎng)以披露信息和數(shù)據(jù)為核心功能，因此如何讓用戶更加便利的獲取和查詢信息是交互設(shè)計(jì)必須思考的核心主題之一。體驗(yàn)場景化場景最佳自適應(yīng)體驗(yàn)可量化Part4:體驗(yàn)場景化場景最佳自適應(yīng),選擇最適合的終端展現(xiàn)形式，以適應(yīng)最佳用戶體驗(yàn)PC和平板采用一個(gè)自適應(yīng)一個(gè)平臺(tái)，響應(yīng)不同的PC顯示分辨率和平板分辨率手機(jī)采用獨(dú)立的設(shè)計(jì)，因?yàn)槭謾C(jī)的操作和用戶使用環(huán)境與PC有很大的區(qū)別，獨(dú)立手機(jī)版本設(shè)計(jì)會(huì)讓用戶獲得更好的使用體驗(yàn)微信版本除了考慮微信的操作和消息發(fā)布特點(diǎn)，也可以充分利用手機(jī)版網(wǎng)站的內(nèi)容，做到相互兼容，并打通網(wǎng)站用戶認(rèn)證機(jī)制Part4:體驗(yàn)場景化體驗(yàn)可量化可以充分利用網(wǎng)站行為的大數(shù)據(jù)，來評(píng)估用戶的交互體驗(yàn)的效果，從而指導(dǎo)網(wǎng)站的調(diào)整和優(yōu)化我在在交互設(shè)計(jì)中會(huì)對(duì)用戶的重要交互操作做出明確的標(biāo)識(shí)和數(shù)字化的要求，并設(shè)計(jì)中和設(shè)計(jì)后加以評(píng)估用戶的行為數(shù)據(jù)包括核心菜單的點(diǎn)擊流量、關(guān)鍵操作的用戶點(diǎn)擊步驟、用戶可用性行為分析、用戶頁面路徑等網(wǎng)站的優(yōu)化是不斷的迭代和優(yōu)化的過程，通過可量化的過程來提升上交所網(wǎng)站的不斷的完善網(wǎng)站原型策劃策劃流程展示低保真原型高保真原型行業(yè)母本分析熱點(diǎn)圖&數(shù)據(jù)分析內(nèi)部頭腦風(fēng)暴內(nèi)部審查(多部門參與)客戶確認(rèn)進(jìn)入設(shè)計(jì)階段策劃工作場景首頁原型展示首頁原型展示首頁原型展示首頁原型展示首頁原型展示滬港通原型展示滬港通原型展示滬港通原型展示Mobile首頁原型展示Mobile首頁原型展示網(wǎng)站視覺設(shè)計(jì)品牌識(shí)別視覺系統(tǒng)品牌沉穩(wěn)國際化簡潔創(chuàng)新品牌識(shí)別視覺系統(tǒng)視頻字體圖片圖標(biāo)互動(dòng)用色品牌沉穩(wěn)國際化簡潔創(chuàng)新首頁設(shè)計(jì)稿功能服務(wù)頭部

主視覺快速查詢用戶入口熱點(diǎn)動(dòng)態(tài)最新公告指數(shù)業(yè)務(wù)服務(wù)相關(guān)鏈接頁腳軀干部首頁設(shè)計(jì)稿用戶入口首屏顯示用戶入口搜索功能搜索在頭部醒目位置，有熱詞推薦及搜索提示智能搜索，可直接搜索到欄目，個(gè)股等內(nèi)容導(dǎo)航導(dǎo)航采用下拉式寬幅展示，顯示2級(jí)3級(jí)導(dǎo)航，方便于用戶使用，紅色為重點(diǎn)菜單網(wǎng)站相關(guān)功能網(wǎng)站頭部的服務(wù)導(dǎo)航承接網(wǎng)站相關(guān)功能：語言版，移動(dòng)端，字體縮放，舊版回顧子站鏈接相關(guān)子站，鼠標(biāo)移上，出現(xiàn)子站鏈接，點(diǎn)擊在新窗口打開，可根據(jù)業(yè)務(wù)擴(kuò)充業(yè)務(wù)辦理專區(qū)業(yè)務(wù)平臺(tái)以不同的文字色且增加圖標(biāo)以區(qū)別祝導(dǎo)航菜單，鼠標(biāo)移上顯示業(yè)務(wù)辦理的快速入口，可根據(jù)業(yè)務(wù)擴(kuò)展功能服務(wù)功能服務(wù)以層的形式始終懸浮在瀏覽器右側(cè)，鼠標(biāo)移上圖標(biāo)顯示提示文字，包括新版網(wǎng)站意見反饋，用戶意見，熱線電話及回到頂部相關(guān)鏈接在頁面底部顯示相關(guān)鏈接，并可擴(kuò)展移動(dòng)端入口移動(dòng)端（APP及手機(jī)）入口重要欄目入口設(shè)置熱點(diǎn)欄目入口，以方便用戶訪問首頁的靈活與擴(kuò)展首頁預(yù)設(shè)相應(yīng)為止，承接新業(yè)務(wù)的宣傳功能重大新業(yè)務(wù)一般新業(yè)務(wù)次重要新業(yè)務(wù)專題頁內(nèi)容頁用色與布局用色以藍(lán)色，灰色，白色為主，以橙色，亮藍(lán)色輔助使用，既體現(xiàn)了上證所沉穩(wěn)國際化的證券交易形象，達(dá)到總體協(xié)調(diào)，局部對(duì)比整個(gè)首頁約3屏左右長短頁面總體布局平衡，簡約，信息緊湊橫向模塊化布局，利于更新迭代文字網(wǎng)頁中使用系統(tǒng)字體，方便維護(hù)并有利于SEO定義清晰的內(nèi)容層級(jí)，適合于閱讀習(xí)慣的文字大小與行間距定義整站統(tǒng)一的交互控件，包括鏈接、按鈕等網(wǎng)格系統(tǒng)使用12列網(wǎng)格系統(tǒng)，每列65px，間隔20px，靈活的規(guī)整頁面布局對(duì)于1024x768的屏幕，主要內(nèi)容在1000px以內(nèi)，達(dá)到滿屏瀏覽整站在統(tǒng)一的網(wǎng)格系統(tǒng)下2個(gè)斷點(diǎn)達(dá)到寬屏至平板的響應(yīng)1000px斷點(diǎn)1斷點(diǎn)2網(wǎng)格系統(tǒng)首頁專題頁內(nèi)容頁手機(jī)網(wǎng)站根據(jù)移動(dòng)端的用戶體驗(yàn)在桌面端的基礎(chǔ)上優(yōu)化信息架構(gòu)使用戶更快速加載保持桌面端與手機(jī)端的信息統(tǒng)一頭部主視覺新聞及公告指數(shù)指數(shù)業(yè)務(wù)社交入口頁腳手機(jī)網(wǎng)站結(jié)構(gòu)頭部主視覺新聞及公告指數(shù)業(yè)務(wù)社交入口頁腳手機(jī)與桌面頭部

主視覺快速查詢用戶入口熱點(diǎn)動(dòng)態(tài)最新公告指數(shù)業(yè)務(wù)服務(wù)相關(guān)鏈接頁腳手機(jī)網(wǎng)站首頁首頁設(shè)計(jì)在不同的設(shè)備上項(xiàng)目進(jìn)度計(jì)劃概覽時(shí)間進(jìn)度計(jì)劃五月份六月份七月份CN網(wǎng)站策劃項(xiàng)目整體管理CN網(wǎng)站前端開發(fā)測試CN網(wǎng)站模塊設(shè)計(jì)&模板頁設(shè)計(jì)八月份九月份EN網(wǎng)站策劃EN網(wǎng)站模塊設(shè)計(jì)&模板頁設(shè)計(jì)EN網(wǎng)站前端開發(fā)CN手機(jī)網(wǎng)站策劃EN手機(jī)網(wǎng)站策劃APP網(wǎng)站策劃CN手機(jī)網(wǎng)站設(shè)計(jì)EN手機(jī)網(wǎng)站設(shè)計(jì)APP網(wǎng)站設(shè)計(jì)CN手機(jī)網(wǎng)站前端開發(fā)EN手機(jī)網(wǎng)站前端開發(fā)APP手機(jī)網(wǎng)站前端開發(fā)關(guān)于mediaman關(guān)于我們GERMANROOTS&GLOBALREACH1996年在德國美因茨成立創(chuàng)始人獨(dú)立運(yùn)營至今在德國，中國，美國和阿根廷設(shè)有分公司全球大約200人的團(tuán)隊(duì)ARMINBIESER

(創(chuàng)始人)STEFANV.D.DRIESCH

(創(chuàng)始人)THOMASVOGEL

(創(chuàng)始人)動(dòng)線網(wǎng)絡(luò)-上海GERMANROOTS&GLOBALREACH2006年來到上海40名互聯(lián)網(wǎng)專家提供線上業(yè)務(wù)策略咨詢、創(chuàng)意挖掘、交互設(shè)計(jì)、用戶體驗(yàn)優(yōu)化及技術(shù)開發(fā)服務(wù)于中國企業(yè)與跨國企業(yè)在中發(fā)展企業(yè)FLORIANZEIM

(總經(jīng)理)JOYCEGU(合伙人)服務(wù)范圍評(píng)估策略設(shè)計(jì)&開發(fā)維護(hù)

市場調(diào)研

企業(yè)定位分析

可用性測試

專家評(píng)估

線