Flash交互設(shè)計(jì)論證報(bào)告96
CZJD-107100-R5
常州機(jī)電職業(yè)技術(shù)學(xué)院課程標(biāo)準(zhǔn)論證報(bào)告
課程名稱課程編碼課程總學(xué)時(shí)課程總學(xué)分Flash交互設(shè)計(jì)50631510966適用專業(yè)(方向)編制人審定人制定日期論證報(bào)告一、課程介紹Flash交互設(shè)計(jì)是藝術(shù)設(shè)計(jì)專業(yè)數(shù)字媒體設(shè)計(jì)三年制高職專業(yè)設(shè)置的一門專業(yè)必修課,是學(xué)生具備了專業(yè)基礎(chǔ)知識(shí)之后開設(shè)的課程。該課程是學(xué)生掌握計(jì)算機(jī)多媒體技術(shù)專業(yè)課程的重要教學(xué)環(huán)節(jié),開設(shè)一學(xué)期,教學(xué)時(shí)數(shù)為96學(xué)時(shí),6學(xué)分。Flash交互設(shè)計(jì)的主要任務(wù)是是系統(tǒng)掌握互動(dòng)媒體軟件的設(shè)計(jì)流程,系統(tǒng)結(jié)構(gòu)等理論知識(shí)和素材采集方法,要求學(xué)生熟悉Flash環(huán)境,了解時(shí)間軸、圖層、元件和幀的概念,熟練掌握Flash繪圖、填充和文本工具的基本操作,掌握聲音、視頻外部素材的導(dǎo)入與位圖的處理方法,熟練運(yùn)用元件完成Flash漸變、引導(dǎo)和遮罩等基礎(chǔ)動(dòng)畫制作的操作技能,掌握ActionScript基礎(chǔ)知識(shí)與組件特效。并在掌握上述知識(shí)與技能的基礎(chǔ)上能完成互動(dòng)Flash的整體設(shè)計(jì)與交互元素制作,并對(duì)各種素材進(jìn)行整合,這門課的目的是使學(xué)生認(rèn)識(shí)到多媒體的互動(dòng)性并具備一定的多媒體藝術(shù)表達(dá)能力;使學(xué)生具備獨(dú)自完成簡(jiǎn)單的互動(dòng)媒體產(chǎn)品設(shè)計(jì)的能力。二、課程實(shí)施情況1、課程講授主要任務(wù)是系統(tǒng)掌握Flash交互設(shè)計(jì)的設(shè)計(jì)流程,系統(tǒng)結(jié)構(gòu)等理論知識(shí)和素材采集方法;掌握相關(guān)的多媒體制作軟件;使學(xué)生認(rèn)識(shí)到多媒體的互動(dòng)性并具備一定的多媒體藝術(shù)表達(dá)能力;使學(xué)生具備獨(dú)自完成簡(jiǎn)單的Flash交互作品的能力。通過(guò)項(xiàng)目教學(xué)使學(xué)生能夠制作界面設(shè)計(jì)、互動(dòng)構(gòu)想、交互多媒體產(chǎn)品展示系統(tǒng)等交互類媒體軟件。2、課堂實(shí)踐結(jié)合教師的現(xiàn)場(chǎng)演示與講解,學(xué)生在課堂內(nèi)根據(jù)課堂項(xiàng)目或案例,上機(jī)操作強(qiáng)化訓(xùn)練,完成課堂實(shí)踐任務(wù)。課堂實(shí)踐中培養(yǎng)學(xué)生的團(tuán)結(jié)協(xié)作能力。3、課后作業(yè)為了培養(yǎng)學(xué)生整理歸納,綜合分析和處理問(wèn)題的能力,課后的項(xiàng)目任務(wù)由學(xué)生自己?jiǎn)为?dú)完成并考核,教師僅給與概要性指導(dǎo)。培養(yǎng)學(xué)生獨(dú)立思考和解決問(wèn)題的能力4、考核評(píng)價(jià)本課程采用過(guò)程考核的方式進(jìn)行考核。結(jié)合課內(nèi)實(shí)踐任務(wù)完成情況、課后項(xiàng)目完成情況、課堂表現(xiàn)進(jìn)行考核。具體考核分值分配如下:項(xiàng)目主要內(nèi)容單元三:Flash高級(jí)應(yīng)用分值45藝術(shù)設(shè)計(jì)(數(shù)字媒體設(shè)計(jì))凌麗君陳景普201*年4月30日單元四:Flash互動(dòng)系統(tǒng)的設(shè)計(jì)與制作單元五:Flash互動(dòng)效果設(shè)計(jì)單元六:Flash互動(dòng)表單與網(wǎng)站組合課堂表現(xiàn)總計(jì)出勤、紀(jì)律、安全151515101005、參考教材網(wǎng)頁(yè)制作高手Flash8網(wǎng)頁(yè)設(shè)計(jì),鄧文淵總監(jiān)制,人民郵電出版社姓名職稱/職務(wù)工作單位專業(yè)簽名論證小組成員專業(yè)帶頭人(負(fù)責(zé)人)意見(jiàn)專業(yè)負(fù)責(zé)人(簽字):年月日專業(yè)建設(shè)委員會(huì)主任(簽字):年月日專業(yè)建設(shè)委員會(huì)意見(jiàn)
擴(kuò)展閱讀:交互設(shè)計(jì)分析報(bào)告
瑞豐國(guó)際交互設(shè)計(jì)分析
瑞豐國(guó)際交互設(shè)計(jì)分析...................................................................................................................1
第一章.感官體驗(yàn)分析:..........................................................................................................3
第二章.交互體驗(yàn)分析:..........................................................................................................9
第三章.網(wǎng)站整體框架分析....................................................................................................20
第四章.用戶登錄后續(xù)界面分析..........................................................................................21
1、首先我們來(lái)看下瑞豐用戶登錄后的head區(qū)域,這塊區(qū)域有非常多的問(wèn)題我總結(jié)有下面幾點(diǎn);....................................................................................................................212、用戶中心分析...........................................................................................................24
第五章.頁(yè)面初步框架布局....................................................................................................25
一、首頁(yè)排版布局結(jié)構(gòu)圖:.........................................................................................25二、體育博彩和香港樂(lè)透頻道布局結(jié)構(gòu)圖:.............................................................27三、娛樂(lè)場(chǎng)頻道布局結(jié)構(gòu)圖:.....................................................................................28四、小游戲頻道布局結(jié)構(gòu)圖:.....................................................................................29五、快樂(lè)彩頻道布局結(jié)構(gòu)圖:.....................................................................................30六、手機(jī)頻道布局結(jié)構(gòu)圖:.........................................................................................31七、最新優(yōu)惠、加盟合作、幫助中心、規(guī)則與說(shuō)明、聯(lián)系我們等頻道布局結(jié)構(gòu)圖:.........................................................................................................................................32八、注冊(cè),登錄參考頁(yè)面請(qǐng)參考一下這兩個(gè)頁(yè)面的風(fēng)格做:.................................33
第六章.網(wǎng)站重構(gòu)需注意的用戶體驗(yàn)細(xì)節(jié),請(qǐng)嚴(yán)格按照我以下的總結(jié)進(jìn)行頁(yè)面整改。34
一、感官體驗(yàn):呈現(xiàn)給用戶視聽上的體驗(yàn),強(qiáng)調(diào)舒適性。網(wǎng)的一些事.................34二、交互體驗(yàn):呈現(xiàn)給用戶操作上的體驗(yàn),強(qiáng)調(diào)易用/可用性。............................35三、瀏覽體驗(yàn):呈現(xiàn)給用戶瀏覽上的體驗(yàn),強(qiáng)調(diào)吸引性。.....................................36四、情感體驗(yàn):呈現(xiàn)給用戶心理上的體驗(yàn),強(qiáng)調(diào)友好性。.....................................37五、信任體驗(yàn):呈現(xiàn)給用戶的信任體驗(yàn),強(qiáng)調(diào)可靠性。.........................................37
第七章.網(wǎng)站重構(gòu)所需人員配備。........................................................................................38
1、高級(jí)web前端開發(fā)工程師(人數(shù)視網(wǎng)站重構(gòu)規(guī)模而定,瑞豐目前情況業(yè)務(wù)情況需2名人員,工期如果較趕則需增加人員)。...........................................................382、JS開發(fā)工程師(1名)...........................................................................................383、高級(jí)視覺(jué)設(shè)計(jì)師(人數(shù)視網(wǎng)站重構(gòu)規(guī)模而定,瑞豐目前情況業(yè)務(wù)情況需2名人員,工期如果較趕則需增加人員)。...........................................................................384、高級(jí)程序開發(fā)員(3名)........................................................................................38
第一章.感官體驗(yàn)分析:
1、首先是頁(yè)面速度:網(wǎng)站頁(yè)面從打開到所有內(nèi)容顯示至少在5秒以上,正常情況下,盡量確保頁(yè)面在5秒內(nèi)打開。輪播廣告圖片顯示速度是最緩慢的,導(dǎo)致原因應(yīng)該為圖片質(zhì)量、大小把控不當(dāng)。還有服務(wù)器必須考慮南北互通問(wèn)題,進(jìn)行必要的壓力測(cè)試,網(wǎng)頁(yè)打開的速度很大程度決定了用戶的第一感官。
2、網(wǎng)站的頁(yè)面色彩顏色很深,色彩使用較重,雖然是為了要與品牌LOGO形象統(tǒng)一,但是色彩較重的色彩很容易導(dǎo)致用戶產(chǎn)生視覺(jué)疲勞。瑞豐的LOGO雖然是以藍(lán)色為主,但是整體的網(wǎng)站風(fēng)格不一定要以藍(lán)色為主,瑞豐的LOGO可以搭配多種顏色,例如白色,淺灰,淡藍(lán)等色彩。用些較淡的色彩給人一種簡(jiǎn)潔大方的感覺(jué)。
3、經(jīng)過(guò)多個(gè)論壇投票測(cè)試,得出數(shù)據(jù),95%的人第一眼感覺(jué)網(wǎng)站不屬于博彩類的網(wǎng)站,多數(shù)認(rèn)為是游戲網(wǎng)站,娛樂(lè)類網(wǎng)站。由此數(shù)據(jù)可得知網(wǎng)站整體頁(yè)面設(shè)計(jì)明顯存在主題不明確,并沒(méi)有根據(jù)用戶群體的審美喜好進(jìn)行分析,并沒(méi)有根據(jù)品牌形象設(shè)計(jì)網(wǎng)站。容易對(duì)用戶的感官產(chǎn)生誤導(dǎo)。
4、LOGO采用FLASH制作,感官效果雖然不錯(cuò),但是有一個(gè)很大的弊端,增加了LOGO的大小,增加了頁(yè)面加載負(fù)擔(dān),導(dǎo)致LOGO加速度更加緩慢,等半天LOGO都出不來(lái)。
5、首頁(yè)頭部的開戶登錄的UI設(shè)計(jì)也與首頁(yè)風(fēng)格極其不協(xié)調(diào),極力想讓用戶開戶注冊(cè)的意圖太明顯,登錄框占用head太多的空間,反而讓用戶很反感。好的網(wǎng)站并不需要刻意的將注冊(cè)頁(yè)面體現(xiàn)出來(lái),只需要不斷完善用戶體驗(yàn),網(wǎng)站內(nèi)容做的更加豐富,不斷增強(qiáng)用戶信任度,用戶自然會(huì)非常樂(lè)意的想成為你網(wǎng)站的會(huì)員。
6、頭部登錄這塊的UI設(shè)計(jì)和邏輯思維也極其不合常理,按照用戶正常的思維模式是賬戶旁邊緊跟著賬戶的input,password后面緊跟著password的input,而瑞豐的設(shè)計(jì)讓人摸不著頭腦。
下面兩種比較普遍的會(huì)員登錄頁(yè)面:淘寶:
人人網(wǎng):
目前主流網(wǎng)站登錄界面大致可以分為以上兩種結(jié)構(gòu),淘寶的左右結(jié)構(gòu),人人網(wǎng)的上下結(jié)構(gòu),其實(shí)他們的界面都有一個(gè)共同點(diǎn),都是以簡(jiǎn)介、清晰明了,與頁(yè)面整體風(fēng)格相協(xié)調(diào)。與瑞豐的設(shè)計(jì)形成巨大的一個(gè)反差。
7、head的語(yǔ)言選擇與收藏等功能排版放置在導(dǎo)航條的右側(cè)這個(gè)位置,這樣的排版也極其不合理95%以上的網(wǎng)站一般都將此區(qū)域放置到右上角或者左上角,就是為了盡量減少空間,讓頁(yè)面排版更加簡(jiǎn)介大方。瑞豐將這塊內(nèi)容放置到這塊區(qū)域首先再次的占用了導(dǎo)航條的空間。其次對(duì)導(dǎo)航的布局與整體協(xié)調(diào)性造成很大的影響,促使導(dǎo)航條的內(nèi)容繁多。
現(xiàn)在我們來(lái)看下時(shí)下一些主流網(wǎng)站都是怎么排版這塊內(nèi)容的:凡客:
京東:
8、首頁(yè)下方文字說(shuō)明內(nèi)容占了將近50%左右的首頁(yè)。根據(jù)用戶的瀏覽習(xí)慣這部分信息其實(shí)用戶是很少會(huì)去閱讀和關(guān)注,閱讀關(guān)注率應(yīng)該不會(huì)超過(guò)5%,然而瑞豐選擇將如此多的內(nèi)容插入到首頁(yè)去,其實(shí)這是非常不明智的行為,不僅占用大量的空間,導(dǎo)致首頁(yè)內(nèi)容過(guò)多,而且還對(duì)用戶視覺(jué)造成污染,給用戶的視覺(jué)感受就是頁(yè)面內(nèi)容很多,很雜亂。
其實(shí)這部分內(nèi)容完全可以放置在關(guān)于我們、幫助中心、規(guī)則與聲明、聯(lián)系我們、加盟合作等說(shuō)明性頁(yè)面里面去。
9、頁(yè)面出現(xiàn)很多新增窗口,例如到手機(jī)投注,最新優(yōu)惠,加盟合作三個(gè)頻道,都是使用新增窗口的形式打開,首先就造成這三個(gè)大的頻道與其他頻道打開方式不統(tǒng)一的情況,其次對(duì)用戶而已新增了太多窗口,反而降低了用戶體驗(yàn)度。第三有部分瀏覽器會(huì)誤認(rèn)為是廣告窗體,將彈出窗口直接屏蔽掉,造成用戶無(wú)法看到該頁(yè)面。
第二章.交互體驗(yàn)分析:
1、大部分頁(yè)面并沒(méi)有做到內(nèi)鏈回環(huán)的功能,內(nèi)鏈回環(huán)的意思是,用戶到了子頁(yè)面后就找不到直接回首頁(yè)或者回到上級(jí)頁(yè)面的鏈接。例如:加盟合作頻道。
其實(shí)最簡(jiǎn)單的解決方法是直接在每個(gè)頁(yè)面的LOGO上加上首頁(yè)的鏈接就可以了;蛘咴O(shè)置一個(gè)返回按鈕,雖然這是極其小的一個(gè)細(xì)節(jié),但是就這么小的細(xì)節(jié)就可以增加非常多的用戶體驗(yàn)值。
2、注冊(cè)&登錄是一個(gè)網(wǎng)站的門戶,它的設(shè)計(jì)姿態(tài)就是對(duì)待客人的態(tài)度。雖然用戶可能每次都只花極少的時(shí)間在注冊(cè)&登錄互動(dòng),但是這個(gè)“瞬間”卻舉足輕重,用戶與注冊(cè)&登錄之間的交互關(guān)系承上啟下的一個(gè)節(jié)點(diǎn)。注冊(cè)&登錄所有的細(xì)節(jié)影響了能否完成產(chǎn)品戰(zhàn)略定位所設(shè)定的最基本任務(wù)去吸納其所希望的用戶的使命。首先讓我們來(lái)看下幾個(gè)交互體驗(yàn)做的非常好的幾個(gè)大型網(wǎng)站的注冊(cè)頁(yè)面是怎么做的。
(1)凡客注冊(cè)頁(yè)面:
(2)淘寶注冊(cè)頁(yè)面:
(3)亞馬遜注冊(cè)頁(yè)面:
(6)凡客的登錄的最大特點(diǎn)是注冊(cè)方式的多樣選擇性,這點(diǎn)做的非常好,給注冊(cè)用戶帶來(lái)了更加便捷的體驗(yàn)。
(7)淘寶的登錄體驗(yàn)最大的特點(diǎn)是一步一步的引導(dǎo)用戶注冊(cè),清楚明白的流程圖指示,讓用戶知道交互預(yù)期。
(8)卓越亞馬遜的注冊(cè)頁(yè)面也是非常具有自己的特色,同事也僅僅的抓住用戶用戶體驗(yàn)的每一個(gè)設(shè)計(jì),第一步流程非常簡(jiǎn)單,只需填寫一個(gè)郵箱即可,而第二步完成password的填寫即注冊(cè)成功。(9)我們?cè)賮?lái)看看瑞豐的開戶頁(yè)面:
(10)瑞豐的注冊(cè)頁(yè)面跟上面三個(gè)注冊(cè)頁(yè)面進(jìn)行對(duì)比,差距一下就體現(xiàn)出來(lái)了。首先注冊(cè)流程復(fù)雜,填寫內(nèi)容繁多,并且涉及一些個(gè)人隱私的資料例如證件等信息為必填項(xiàng)目,用戶在沒(méi)有對(duì)你網(wǎng)站建立信任度的時(shí)候,又怎么會(huì)將個(gè)人隱私公布給你呢。
我們看到上面三家大公司注冊(cè)頁(yè)面其實(shí)他們頁(yè)面有兩個(gè)最大的共同點(diǎn):
第一點(diǎn)是注冊(cè)流程簡(jiǎn)潔,流程清晰。
第二點(diǎn)是用戶更詳細(xì)的信息都是等待用戶注冊(cè)成功后,再自行選擇完善。瑞豐的開戶流程就有些強(qiáng)迫性,必須填寫完詳細(xì)的個(gè)人信息才能開戶。這種陳舊的注冊(cè)流程從很早以前就已經(jīng)被淘汰了。
瑞豐注冊(cè)頁(yè)面存在的第二個(gè)問(wèn)題是表單填寫錯(cuò)誤,并沒(méi)有提示用戶錯(cuò)誤是什么原因,一般情況在需要填寫這么多資料的情況下還遇到錯(cuò)誤,會(huì)讓用戶失去耐心。把最想讓用戶注冊(cè)的頁(yè)面變成促使用戶離開的最后一道屏障。
下面是亞馬遜注冊(cè)頁(yè)面出錯(cuò)時(shí)出現(xiàn)的提醒:
清楚明了的告訴你哪個(gè)環(huán)節(jié)出了錯(cuò)誤,需要怎么修改。這種用戶體驗(yàn)感就做的非常到位,指引客戶,幫助客戶解決注冊(cè)遇到的問(wèn)題。
3、整個(gè)網(wǎng)站站點(diǎn)并沒(méi)有將公司電話展示出來(lái),這樣子大大的降低了用戶的信任體驗(yàn)度。潛意識(shí)里給人感覺(jué)就是個(gè)非常不正規(guī)的網(wǎng)站,嚴(yán)重降低了網(wǎng)站誠(chéng)信度。
4、咨詢了一下在線客服,客服的回答非常讓人失望。當(dāng)問(wèn)到不會(huì)開戶,打算放棄,并沒(méi)有挽留客戶進(jìn)行引導(dǎo),工作態(tài)度不夠熱情,態(tài)度冷淡。
5、香港樂(lè)透這個(gè)頻道瀏覽器的兼容性非常糟糕,整個(gè)頁(yè)面向右偏離,頁(yè)面的整體的頁(yè)面風(fēng)格也跟其他頻道有天差地別,脫離了整站的風(fēng)格。
6、顯示路徑:無(wú)論用戶瀏覽到哪一個(gè)層級(jí),哪一個(gè)頁(yè)面,都可以清楚知道看到該頁(yè)面的路徑,瑞豐這點(diǎn)做的極其不好。
我們來(lái)看個(gè)例子,例如芒果網(wǎng)的顯示路徑就做的非常好:
7、點(diǎn)擊快樂(lè)彩頻道的時(shí)候。nav的當(dāng)前指標(biāo)指的卻是顯示首頁(yè),這個(gè)漏洞導(dǎo)致用戶對(duì)頁(yè)面進(jìn)行到哪個(gè)環(huán)節(jié)產(chǎn)生了混亂,細(xì)節(jié)做的還不夠好。
8、瑞豐的博彩內(nèi)容,博彩游戲規(guī)則,其實(shí)非常復(fù)雜,博彩種類也非常多,說(shuō)實(shí)話分析了網(wǎng)站這么久我都沒(méi)明白里面任何一個(gè)游戲該怎么玩與操作的。9、首先聲明一下我對(duì)博彩并沒(méi)有什么研究,但是就像我這樣一個(gè)門外漢,我雖然由里到外的分析了這個(gè)網(wǎng)站這么久我還是沒(méi)有弄懂怎么操作里面的游戲,說(shuō)明了什么,要么是我這個(gè)人太笨,要么就是網(wǎng)站自身存在原因。
這個(gè)網(wǎng)站的游戲復(fù)雜規(guī)則都有一定難度,每個(gè)游戲又都沒(méi)有任何的說(shuō)明與引導(dǎo)。
通過(guò)上面幾個(gè)游戲截圖就知道,游戲內(nèi)容復(fù)雜,玩法多樣性,但是連一點(diǎn)游戲玩法的提示介紹都沒(méi)有,即使想玩也無(wú)從下手,這將很大程度導(dǎo)致客戶流失,除非某個(gè)用戶剛好熟悉了解這個(gè)游戲或者對(duì)博彩類游戲都比較熟悉,否則一般用戶看到這樣的界面,肯定會(huì)選擇離開。原因很簡(jiǎn)單,我在還沒(méi)跟你建立信任關(guān)系的,還不懂游戲規(guī)則,還不知道你這網(wǎng)站是做什么的,我怎么可能會(huì)去選擇開戶注冊(cè)。
第三章.網(wǎng)站整體框架分析
1、瑞豐的網(wǎng)站整體框架采用的iframe的布局方式,現(xiàn)在所有主流的網(wǎng)站都幾乎已經(jīng)放棄使用iframe方式來(lái)作為頁(yè)面主框架,iframe的缺點(diǎn)主要有即時(shí)內(nèi)容為空,加載速度需要很長(zhǎng)時(shí)間,一個(gè)頁(yè)面存在兩個(gè)或以上的頁(yè)面時(shí)增加了HTTP的請(qǐng)求次數(shù)。所謂iframe也是框架的一種形式,它是相當(dāng)于在主瀏覽器窗口內(nèi)嵌一個(gè)子窗口。這種框架的瀏覽器兼容性非常差,而且增加了服務(wù)器的負(fù)擔(dān)。2、建議瑞豐的整體頁(yè)面框架需要進(jìn)行一次徹底的重構(gòu):
(1)需采用DIV+CSS,進(jìn)行頁(yè)面布局,DIV+CSS是時(shí)下最流行的頁(yè)面布局,使用盒子模型,將表現(xiàn)和形式想分離,可以使頁(yè)面維護(hù)更加方便,最大的優(yōu)點(diǎn)是可以提高頁(yè)面加載速度。
(2)頁(yè)面刷新,采用無(wú)刷新(AJAX)技術(shù),以減少頁(yè)面的刷新率。Ajax是新興的網(wǎng)絡(luò)開發(fā)技術(shù)的象征。它將JavaScript和XML技術(shù)結(jié)合在一起,用戶每次調(diào)用新數(shù)據(jù)時(shí),無(wú)需反復(fù)向服務(wù)器發(fā)出請(qǐng)求,而是在瀏覽器的緩存區(qū)預(yù)先獲取下次可能用到的數(shù)據(jù),界面的響應(yīng)速度因此得到了顯著提升。
第四章.用戶登錄后續(xù)界面分析
1、首先我們來(lái)看下瑞豐用戶登錄后的head區(qū)域,這塊區(qū)域有非常多的問(wèn)題我總結(jié)有下面幾點(diǎn);
1、依舊是head的內(nèi)容過(guò)多導(dǎo)致整個(gè)右上角內(nèi)容非;靵y,讓用戶找不到重點(diǎn),其實(shí)這部分登錄后只有一個(gè)重點(diǎn),就是用戶中心。我不知道為什么瑞豐要將
這塊已經(jīng)原本在首頁(yè)重點(diǎn)強(qiáng)調(diào)過(guò)的內(nèi)容幾次的
內(nèi)容還依舊在登錄后放置在那個(gè)位置,實(shí)在不知道是有什么用意,這塊區(qū)域等于荒廢掉。因?yàn)椴粫?huì)有任何的用戶會(huì)有興趣去點(diǎn)擊這塊內(nèi)容,這塊區(qū)域是可以完全去除的。
2、用戶中心,資金管理,紅利領(lǐng)取這三個(gè)分類其實(shí)指向的全是同一個(gè)頁(yè)面,并且這個(gè)區(qū)域是完全可以整合到用戶中心一個(gè)分類就夠了,你不需要那么多分類來(lái)擾亂用戶,使用戶覺(jué)得復(fù)雜了。全部歸檔到用戶中心,然后用戶自己懂得到用戶中心找到他想要的東西就可以了。
3、整個(gè)head我找了半天都沒(méi)有找到退出按鈕在哪個(gè)位置,最后終于找到
退出的按鈕竟然寫的是登錄,這
種烏龍真的極其少見(jiàn)。估計(jì)用戶一般找不到直接就只能關(guān)掉瀏覽器了。4、我們看看一些大網(wǎng)站是如何解決用戶登錄后的head及如何排版用戶中心的位置的。
淘寶:
凡客:
好樂(lè)買:
2、用戶中心分析
1、所有的窗口在IE下打開都是定死寬度的,不能全屏顯示,不知道為何要將這個(gè)寬度限制住,有非常多的用戶喜歡全屏顯示。不單單是用戶中心有這個(gè)問(wèn)題,還有很多的游戲窗口都是采用這種方式將寬度限制住。
2、用戶中心的head也犯了幾個(gè)嚴(yán)重的錯(cuò)誤,首先沒(méi)有回到首頁(yè)的連接。其次是沒(méi)有退出的按鈕。
第五章.頁(yè)面初步框架布局
以下框架需使用到技術(shù)有:DIV+CSS、JAVASCRIPT、AJAX。
一、首頁(yè)排版布局結(jié)構(gòu)圖:
1、以上為大框架布局圖,視覺(jué)設(shè)計(jì)師主要按大框架設(shè)計(jì),每個(gè)大框架內(nèi)容還可以包含各種小塊內(nèi)容,無(wú)需因?yàn)槲业牡目蚣軋D紙限制住設(shè)計(jì)思路。
2、nav仍然繼續(xù)放置各個(gè)大的頻道。但是每個(gè)頻道都以直接進(jìn)入頁(yè)面的方式,無(wú)需采用新增窗口的模式。
3、foot主要放置關(guān)于我們,幫助中心等說(shuō)明文檔。
二、體育博彩和香港樂(lè)透頻道布局結(jié)構(gòu)圖:
三、娛樂(lè)場(chǎng)頻道布局結(jié)構(gòu)圖:
四、小游戲頻道布局結(jié)構(gòu)圖:
五、快樂(lè)彩頻道布局結(jié)構(gòu)圖:
六、手機(jī)頻道布局結(jié)構(gòu)圖:
七、最新優(yōu)惠、加盟合作、幫助中心、規(guī)則與說(shuō)明、聯(lián)系我們等頻道布局結(jié)構(gòu)圖:
八、注冊(cè),登錄參考頁(yè)面請(qǐng)參考一下這兩個(gè)頁(yè)面的風(fēng)格做:
好樂(lè)買這種簡(jiǎn)潔,流程清晰的注冊(cè)登錄頁(yè)面給用戶的感覺(jué)非常清新,舒服。這是目前我感覺(jué)做的比較好的登錄注冊(cè)頁(yè)面的一種。建議瑞豐采用這種風(fēng)格。
第六章.網(wǎng)站重構(gòu)需注意的用戶體驗(yàn)細(xì)節(jié),請(qǐng)嚴(yán)格按照我以下的總結(jié)進(jìn)行頁(yè)面整改。
一、感官體驗(yàn):呈現(xiàn)給用戶視聽上的體驗(yàn),強(qiáng)調(diào)舒適性。網(wǎng)的一些事
1.設(shè)計(jì)風(fēng)格:符合目標(biāo)客戶的審美習(xí)慣,并具有一定的引導(dǎo)性。
2.網(wǎng)站在設(shè)計(jì)之前,必須明確目標(biāo)客戶群體,并針對(duì)目標(biāo)客戶的審美喜好,進(jìn)行分析,從
而確定網(wǎng)站的總體設(shè)計(jì)風(fēng)格。
3.網(wǎng)站LOGO:確保logo的保護(hù)空間,確保品牌的清晰展示而又不占據(jù)過(guò)分空間。4.頁(yè)面速度:正常情況下,盡量確保頁(yè)面在5秒內(nèi)打開。
5.頁(yè)面布局:重點(diǎn)突出,主次分明,圖文并茂。與企業(yè)的營(yíng)銷目標(biāo)相結(jié)合,將目標(biāo)客戶最
感興趣的,最具有銷售力的信息放置在最重要的位置。
6.頁(yè)面色彩:與品牌整體形象相統(tǒng)一,主色調(diào)+輔助色不超過(guò)三種顏色。以恰當(dāng)?shù)纳拭?/p>
度和亮度,確保瀏覽者的瀏覽舒適度。
7.動(dòng)畫效果:與主畫面相協(xié)調(diào),打開速度快,動(dòng)畫效果節(jié)奏適中,不干擾主畫面瀏覽。8.頁(yè)面導(dǎo)航:導(dǎo)航條清晰明了、突出,層級(jí)分明。
9.頁(yè)面大。哼m合多數(shù)瀏覽器瀏覽(最好頁(yè)面大小為980寬)。
10.圖片展示:比例協(xié)調(diào)、不變形,圖片清晰。圖片排列既不過(guò)于密集,也不會(huì)過(guò)于疏遠(yuǎn)i11.圖標(biāo)使用:簡(jiǎn)潔、明了、易懂、準(zhǔn)確,與頁(yè)面整體風(fēng)格統(tǒng)一。12.廣告位:避免干擾視線,廣告圖片符合整體風(fēng)格,避免喧賓奪主。
二、交互體驗(yàn):呈現(xiàn)給用戶操作上的體驗(yàn),強(qiáng)調(diào)易用/可用性。
13.會(huì)員申請(qǐng):介紹清晰的會(huì)員權(quán)責(zé),并提示用戶確認(rèn)已閱讀條款。14.會(huì)員注冊(cè):流程清晰、簡(jiǎn)潔。待會(huì)員注冊(cè)成功后,再詳細(xì)完善資料。
15.表單填寫:盡量采用下拉選擇,需填寫部分需注明要填寫內(nèi)容,并對(duì)必填字段作出限制。
(如手機(jī)位數(shù)、郵編等等,避免無(wú)效信息)
16.表單提交:表單填寫后需輸入驗(yàn)證碼,防止注水。提交成功后,應(yīng)顯示感謝提示。17.按鈕設(shè)置:對(duì)于交互性的按鈕必須清晰突出,以確保用戶可以清楚地點(diǎn)擊。
18.點(diǎn)擊提示:點(diǎn)擊瀏覽過(guò)的信息顏色需要顯示為不同的顏色,以區(qū)分于未閱讀內(nèi)容,避免
重復(fù)閱讀。
19.錯(cuò)誤提示:若表單填寫錯(cuò)誤,應(yīng)指明填寫錯(cuò)誤之處,并保存原有填寫內(nèi)容,減少重復(fù)工
作。
20.在線問(wèn)答:用戶提問(wèn)后后臺(tái)要及時(shí)反饋,后臺(tái)顯示有新提問(wèn)以確;貜(fù)及時(shí)。21.意見(jiàn)反饋:當(dāng)用戶在使用中發(fā)生任何問(wèn)題,都可隨時(shí)提供反饋意見(jiàn)。
22.在線搜索:搜索提交后,顯示清晰列表,并對(duì)該搜索結(jié)果中的相關(guān)字符以不同顏色加以
區(qū)分。
23.頁(yè)面刷新:盡量采用無(wú)刷新(AJAX)技術(shù),以減少頁(yè)面的刷新率。
24.是新興的網(wǎng)絡(luò)開發(fā)技術(shù)的象征。它將JavaScript和XML技術(shù)結(jié)合在一起,用戶每次調(diào)
用新數(shù)據(jù)時(shí),無(wú)需反復(fù)向服務(wù)器發(fā)出請(qǐng)求,而是在瀏覽器的緩存區(qū)預(yù)先獲取下次可能用到的數(shù)據(jù),界面的響應(yīng)速度因此得到了顯著提升。
25.新開窗口:盡量減少新開的窗口,以避免開過(guò)多的無(wú)效窗口,設(shè)置彈出窗口的關(guān)閉功能。26.資料安全:確保資料的安全保密,對(duì)于客戶密碼和資料進(jìn)行加密保存。互聯(lián)網(wǎng)的一些27.顯示路徑:無(wú)論用戶瀏覽到哪一個(gè)層級(jí),哪一個(gè)頁(yè)面,都可以清楚知道看到該頁(yè)面的路
徑。
三、瀏覽體驗(yàn):呈現(xiàn)給用戶瀏覽上的體驗(yàn),強(qiáng)調(diào)吸引性。
28.欄目的命名:與欄目?jī)?nèi)容準(zhǔn)確相關(guān),簡(jiǎn)潔清晰,不宜過(guò)于深?yuàn)W。
29.欄目的層級(jí):最多不超過(guò)三層,導(dǎo)航清晰,運(yùn)用JAVAscrip等技術(shù)使得層級(jí)之間伸縮便
利。
30.內(nèi)容的分類:同一欄目下,不同分類區(qū)隔清晰,不要互相包含或混淆。31.內(nèi)容的豐富性:每一個(gè)欄目應(yīng)確保足夠的信息量,避免欄目無(wú)內(nèi)容情況出現(xiàn)。32.精彩內(nèi)容的推薦:在頻道首頁(yè)或文章左右側(cè),提供精彩內(nèi)容推薦,吸引瀏覽者瀏覽。33.相關(guān)內(nèi)容的推薦:在用戶瀏覽文章的左右側(cè)或下部,提供相關(guān)內(nèi)容推薦,吸引瀏覽者瀏
覽。
34.收藏夾的設(shè)置:為會(huì)員設(shè)置收藏夾,對(duì)于喜愛(ài)的產(chǎn)品或信息,可進(jìn)行收藏。35.信息的搜索:在頁(yè)面的醒目位置,提供信息搜索框,便于查找到所需內(nèi)容。
36.文字字體:采用易于閱讀的字體,避免文字過(guò)小或過(guò)密造成的閱讀障礙?蓪(duì)字體進(jìn)行
大中小設(shè)置,以滿足不同的瀏覽習(xí)慣。37.頁(yè)面底色:不能干擾主體頁(yè)面的閱讀。
38.頁(yè)面的長(zhǎng)度:設(shè)置一定的頁(yè)面長(zhǎng)度,避免頁(yè)面過(guò)長(zhǎng)而影響閱讀。39.分頁(yè)瀏覽:對(duì)于長(zhǎng)篇文章進(jìn)行分頁(yè)瀏覽。
40.語(yǔ)言版本:為面向不同國(guó)家的客戶提供不同的瀏覽版本(目前瑞豐只有簡(jiǎn)體中文版一種
語(yǔ)言可選,只有一種語(yǔ)言就沒(méi)必要放置語(yǔ)言版本選擇框占用空間)。
四、情感體驗(yàn):呈現(xiàn)給用戶心理上的體驗(yàn),強(qiáng)調(diào)友好性。
41.客戶分類:將不同的瀏覽者進(jìn)行劃分(如消費(fèi)者、經(jīng)銷商、內(nèi)部員工),為客戶提供不
同的服務(wù)。
42.友好提示:對(duì)于每一個(gè)操作進(jìn)行友好提示,以增加瀏覽者的親和度。43.會(huì)員交流:提供便利的會(huì)員交流功能(如論壇),增進(jìn)會(huì)員感情。44.售后反饋:定期進(jìn)行售后的反饋跟蹤,提高客戶滿意度。
45.會(huì)員優(yōu)惠:定期舉辦會(huì)員優(yōu)惠活動(dòng),讓會(huì)員感覺(jué)到實(shí)實(shí)在在的利益。46.會(huì)員推薦:根據(jù)會(huì)員資料及購(gòu)買習(xí)慣,為其推薦適合的產(chǎn)品或服務(wù)。
47.郵件/短信問(wèn)候:針對(duì)不同客戶,為客戶定期提供郵件/短信問(wèn)候,增進(jìn)與客戶間感情。
48.網(wǎng)站地圖:為用戶提供清晰的網(wǎng)站指引。
五、信任體驗(yàn):呈現(xiàn)給用戶的信任體驗(yàn),強(qiáng)調(diào)可靠性。
49.公司介紹:真實(shí)可靠的信息發(fā)布,包括公司規(guī)模、發(fā)展?fàn)顩r、公司資質(zhì)等。50.服務(wù)保障:將公司的服務(wù)保障清晰列出,增強(qiáng)客戶信任。51.頁(yè)面標(biāo)題:準(zhǔn)確地描述公司名稱及相關(guān)內(nèi)容。
52.聯(lián)系方式:準(zhǔn)確有效的地址、電話等聯(lián)系方式,便于查找。53.服務(wù)熱線:將公司的服務(wù)熱線列在醒目的地方,便于客戶查找。54.有效的投訴途徑:為客戶提供投訴或建議郵箱或在線反饋。
55.安全及隱私條款:對(duì)于交互式網(wǎng)站,注明安全及隱私條款可以減少客戶顧慮,避免糾紛。56.法律聲明:對(duì)于網(wǎng)站法律條款的聲明可以避免企業(yè)陷入不必要的糾紛中。57.網(wǎng)站備案:讓瀏覽者確認(rèn)網(wǎng)站的合法性。
58.相關(guān)鏈接:對(duì)于集團(tuán)企業(yè)及相關(guān)企業(yè)的鏈接,應(yīng)該具有相關(guān)性。
59.幫助中心:對(duì)于流程較復(fù)雜的服務(wù),必須具備幫助中心進(jìn)行服務(wù)介紹。
第七章.網(wǎng)站重構(gòu)所需人員配備。
1、高級(jí)web前端開發(fā)工程師(人數(shù)視網(wǎng)站重構(gòu)規(guī)模而定,瑞豐目前情況業(yè)務(wù)情況需2名人員,工期如果較趕則需增加人員)。2、JS開發(fā)工程師(1名)
3、高級(jí)視覺(jué)設(shè)計(jì)師(人數(shù)視網(wǎng)站重構(gòu)規(guī)模而定,瑞豐目前情況業(yè)務(wù)情況需2名人員,工期如果較趕則需增加人員)。4、高級(jí)程序開發(fā)員(3名)
友情提示:本文中關(guān)于《Flash交互設(shè)計(jì)論證報(bào)告96》給出的范例僅供您參考拓展思維使用,Flash交互設(shè)計(jì)論證報(bào)告96:該篇文章建議您自主創(chuàng)作。
來(lái)源:網(wǎng)絡(luò)整理 免責(zé)聲明:本文僅限學(xué)習(xí)分享,如產(chǎn)生版權(quán)問(wèn)題,請(qǐng)聯(lián)系我們及時(shí)刪除。