人機交互技術(shù)報告

1、人機交互技術(shù)結(jié)課作品報告文件狀態(tài)草稿文件標識lndex.html當前版本2.0/正式發(fā)布正在修改作者趙嘉鵬馮雪琪完成日期2017.12.25電子科技大學信息與軟件工程學院2017人機交互技術(shù)報告2017人機交互技術(shù)報告 #版本歷史版本/狀態(tài)作者參與者起止日期備注1.0趙嘉鵬馮雪琪2017.12.05-2017.12.15無法實現(xiàn)圖片輪播2.0趙嘉鵬馮雪琪2017.12.15-2017.12.25功能實現(xiàn)2017人機交互技術(shù)報告 目錄TOC o 1-5 h z HYPERLINK l bookmark8 o Current Document 01文檔介紹4 HYPERLINK l bookmar

2、k10 o Current Document 02文檔目的4 HYPERLINK l bookmark12 o Current Document 03項目背景4 HYPERLINK l bookmark14 o Current Document 04參考文獻4 HYPERLINK l bookmark16 o Current Document 05術(shù)語與縮寫解釋4 HYPERLINK l bookmark18 o Current Document 系統(tǒng)需求5 HYPERLINK l bookmark20 o Current Document 系統(tǒng)設計5 HYPERLINK l bookmark

3、22 o Current Document 系統(tǒng)實現(xiàn)9 HYPERLINK l bookmark24 o Current Document 系統(tǒng)測試162017人機父互技術(shù)報告01文檔介紹本文檔的主要內(nèi)容是介紹設計一個名為“里程”的籃球俱樂部網(wǎng)頁的具體流程及步驟，主要包括網(wǎng)頁的系統(tǒng)需求，系統(tǒng)設計，系統(tǒng)實現(xiàn)和系統(tǒng)測試等內(nèi)容。02文檔目的編寫此文檔的主要目的是將關于“里程”籃球俱樂部網(wǎng)頁設計的基本步驟以及設計思路清楚明了的展現(xiàn)出來，更加簡潔明了的展現(xiàn)在設計初期，中期和后期我們所遇到的問題以及相關的解決方法，展現(xiàn)我們組的同學對所運用知識的熟悉程度和掌握程度，也讓自身對網(wǎng)頁設計的整體流程更加清楚。03

4、項目背景（1）項目的提出原因為了大眾和廣大籃球愛好者能夠更加了解里程俱樂部，更方便的了解里程俱樂部的新聞以及相關安排，我們決定給實現(xiàn)一個關于“里程”籃球俱樂部的網(wǎng)頁項目。（2）項目的技術(shù)背景本學期，我們小組成員在人機交互課堂上學習到了許多交互設計的原則和技術(shù)，并且了解并且掌握了利用HTML+CSS+JS開發(fā)前端網(wǎng)頁的技術(shù)。此項目便是我們將人機交互課堂上所學習到的知識運用到現(xiàn)實場景中開發(fā)出的產(chǎn)品。04參考文獻 HYPERLINK /html/html-tutorial.html /html/html-tutorial.html菜鳥教程-HTML教程 HYPERLINK /css/css-tuto

5、rial.html /css/css-tutorial.html菜鳥教程-CSS教程 HYPERLINK /js/js-tutorial.html /js/js-tutorial.html菜鳥教程-JS教程05術(shù)語與縮寫解釋術(shù)語/縮寫解釋JSJavaScript1系統(tǒng)需求系統(tǒng)的功能結(jié)構(gòu)框圖如下所示：里程”籃球俱樂部網(wǎng)站系統(tǒng)衍生商品頁面一俱樂部歷史介紹球隊歷史頁面L商品佶息介紹圖1.1里程網(wǎng)站系統(tǒng)結(jié)構(gòu)圖在為“里程”籃球俱樂部設計的網(wǎng)頁中，必須要包含1.俱樂部的宗旨，文化，歷史2.競技隊的基本信息（教練團隊，全體成員等），比賽安排，賽場風采，比賽結(jié)果等信息3.業(yè)余隊的基本信息，比賽安排，聚會或活動

6、安排等信息4.俱樂部經(jīng)營的衍生產(chǎn)品信息。頁面結(jié)構(gòu)深度要求為兩級（必要時可以達到三級）。界面最好達到簡潔美觀的效果，可以使用一些圖片，使用的視覺元素需要考慮版權(quán)問題。應該主動運用所學到的人機交互設計原則和技術(shù)，使用HTML+CSS+JS技術(shù)進行前端開發(fā)。2系統(tǒng)設計根據(jù)系統(tǒng)需求，我們將網(wǎng)頁分為六個部分，其中考慮到網(wǎng)頁設計的通用規(guī)則，我們將六個頁面的頭部設計成一樣的樣式，使網(wǎng)頁看起來更加像是一個整體。第一部分：首頁（1）界面設計（草圖） 2017人機父互技術(shù)報告圖2.1首頁設計草圖（2）功能設計這一部分將主要展示俱樂部的重要信息。首先采用了圖片輪播的方式，將俱樂部近期的大新聞配上文字和圖片放在頁面的

7、頂部其次將近期的俱樂部新聞以及配圖和里程近期比賽安排放在下方。第二部分：里程/競技隊（1）界面設計（草圖）K1圖2.2競技隊頁面設計草圖2017人機父互技術(shù)報告（2）功能設計這一部分是對競技隊的介紹，包括人員，比賽的信息。首先將球員的風采圖采用圖片輪播的方式放在頁面的上方；其次展示里程本賽季的全部賽程安排和比賽結(jié)果；最后對競技隊的球員以及教練進行基本的介紹并配圖。第三部分：里程/業(yè)余隊（1）界面設計（草圖）圖2.3業(yè)余隊界面設計草圖（2）功能設計這一部分主要是對業(yè)余隊的介紹，包括基本信息以及相關活動安排。首先采用圖片輪播的形式對業(yè)余球隊進行展示；其次分為兩部分介紹，其一為里程業(yè)余籃球隊的基本信

8、息，其二為業(yè)余球隊的比賽安排，訓練以及聚會安排。第四部分：里程/文化（1）界面設計（草圖）2017人機交互技術(shù)報告2017人機交互技術(shù)報告 # 圖2.4里程文化界面設計草圖2）功能設計這一部分主要是對里程俱樂部的文化介紹。分為三個小部分，分別是俱樂部名字的由來；球衣的介紹以及對球隊精神的概述。第五部分：里程/歷史1）界面設計（草圖）圖2.5里程歷史界面設計草圖2）功能設計這一部分顧名思義，就是對俱樂部歷史的介紹，讓人們能夠清楚的了解到俱樂部的來歷 #2017人機父互技術(shù)報告以及發(fā)展。第六部分：里程/周邊圖2.6里程設計草圖2）功能設計這一部分是對里程俱樂部的衍生產(chǎn)品的介紹包括產(chǎn)品名稱，圖片以及

9、售價。3系統(tǒng)實現(xiàn)（1）“里程”籃球俱樂部網(wǎng)站的各個界面如下所示2017人機交互技術(shù)報告2017人機交互技術(shù)報告 里程鑒遏近朗呵安拌馮*耳改三甲忤靂籃輕取同城謳ISMULl.咗亍，覽ifllE劇?口量小ifl3E|月半*門3懼樂部簡倉SNnNttrWATIN：.n-E3thT7?|vaKjwamjfBWf*WF*ijftfctJi呎呂R圖細詆遜五居泗祚輯3佔確I剛K6T申血1FPXM*MfxBtflAd-,ElWrAlLUAMvl.dW自Eritn；jCKfi*.中kfUKM.4HKVWMtbHl-T*BJi圖3.1網(wǎng)站首頁珠員風采里程犧本棗李仝理比夷比安排里程霽匹近喲tt密運果iznirann

10、i!十曲耳liT月足峙Sfl詣IFifl?eIREUi時應san怡1U73U圖3.2里程/競技隊界面ABC史號業(yè)工從五證.Ifi出SHE里理業(yè)親策珠臥近姬比賽HI幣&菊會踴EttB：1SIHaSaifcwflJEttTBFTft1fl15DHS.MZt.iKKXW.diHfc：里也親斶珠認曲信皂介朗HM*2*Sfc3tT!fc,EEl*.輒打pfl屈刖應*丸注睥16EflfFw如工即曲希審酗換WB師115*：.旳皿丈frM.0“古劑杠J悄寓nkt/J/CUuri/1DjKMisbacu*ni-vo-rhnofmjLlrrJ*LflAsCffJEBsSKE2fS.KE圖3.3里程/業(yè)余隊界面圖3

11、.4里程/文化界面M/HSbM/MA殖V股豐輕閒畳!砂mil-査3|Rl盂立可章tfNL*罰衛(wèi)甲曲呂上莊1覺f礎W!處仙或旦亦蹄l.*K=圧.ffltrVKWAMStfrJtST.歸f舊連惡鼓種僱E皐t謝打衛(wèi)即赫E乜砂財IfiH辰：皿融細諺廉常L雄屯RH便槁鼻刪！月叭土書皿沖砒案訕五flT干尢BWEHi朋血呂耶仏肉=壞EMia-JM?sew卑亠丹耳呂（星TtnwjBaiaT.円丹miwsg亡Em曰愛土*芭即目并科斗&垃訶趴=.TFrrBii=iJtiIE.*vitm.EWliMWWWKr-熱JQK石冃謂-如就軒，址Brfis列評ealfflK&rB辦iRWfi羞=譯補與5M血*的：JtMHSL

12、*Wiiw,五甲虜為曲屯芹：M妙期洋比iH#.xwiisr1神吐亭紳別底丸珈碼*1航BFKC.K1出莊巳ijHULLF*孚醍EUfilta-.毘旺*址乂13QLLJ1IHHI圖3.5里程/歷史界面圖3.6里程/周邊界面|me-SIW1I旦kbanl中稈.吊主商品im:（2）主要功能實現(xiàn)的核心代碼網(wǎng)站導航欄以及標志展示以及搜索欄實現(xiàn)的htmI代碼:里程/無籃球不兄弟首頁ahref=.professional.html里程/競技隊ahref=.normal.html里程/業(yè)余隊里程/文化里程/歷史span里程/周邊f(xié)ormaction=#method=post #2017人機父互技術(shù)報告實現(xiàn)圖片輪

13、播的html代碼：h球員風采員風采h員風采h員風采h員風采12345實現(xiàn)圖片輪播的js代碼：functionmycarousel_initCallback(carousel)$(.slider-nava).bind(click,function()carousel.scroll(jQval(jQuery(this).text();returnfalse;);2017人機交互技術(shù)報告2017人機交互技術(shù)報告 ；functionmycarousel_itemFirstInCallback(carousel,item,idx,state)$(.slider-nava).removeClass(act

14、ive);$(.slider-nava).eq(idx-1).addClass(active);$(function()/HorizontalCarousel$(.slider-leftul,.slider-rightul).jcarousel(auto:5,wrap:last,scroll:1,visible:1,initCallback:mycarousel_initCallback,itemFirstInCallback:mycarousel_itemFirstInCallback,buttonNextHTML:null,buttonPrevHTML:null);/BlinkFields

15、$(.blink).focus(function()if(this.title=this.value)this.value=;).blur(function()if(this.value=)this.value=this.title;);/Navigation$(#navigationulli).hover(function()if($(this).find(.dd-holder).length0)$(this).find(span).addClass(link);$(this).find(a:eq(0).addClass(hover);$(this).find(a.hover).append

16、();varhide_width=$(.hover).outerWidth()-8;$(this).find(.hide).css(width:hide_width,display:block);$(this).find(.dd-holder:eq(0).show();$(.dd-holderulli).hover(function()if($(this).find(.dd-holder).length0)$(this).find(a:eq(0).addClass(subhover);,function()$(this).find(a:eq(0).removeClass(subhover);)

17、；,function()$(this).find(a).removeClass(hover);$(this).find(.dd-holder:eq(0).hide();$(this).find(span).removeClass(link);$(this).find(.hide).remove();)；)；確定導航欄樣式的CSS代碼：*margin:0;padding:0;outline:0;bodyfont-size:12px;line-height:22px;font-family:Arial,Helvetica,Sans-Serif;color:#4c4c4c;background:#f

18、ff;border-top:6pxsolid#2e9dbd;acolor:#0252aa;text-decoration:none;cursor:pointer;a:hovertext-decoration:underline;aimgborder:0;.cldisplay:block;height:0;font-size:0;line-height:0;text-indent:-4000px;clear:both;.notextfont-size:0;line-height:0;text-indent:-4000px;.shellwidth:985px;margin:0auto;#heade

19、rheight:132px;#header.shellposition:relative;height:132px;z-index:5;h1#logofloat:left;display:inline;width:142px;height:96px;margin-top:20px;h1#logoadisplay:block;height:96px;#navigationfloat:right;display:inline;margin-top:55px;#navigationulfloat:left;display:inline;list-style:noneoutsidenone;paddi

20、ng-top:5px;#navigationulliposition:relative;float:left;display:inline;margin-right:15px;#navigationulliafloat:left;display:inline;height:22px;color:#767670;font-size:14px;line-height:23px;font-family:LucidaSans,Arial,Sans-serif;padding-left:10px;#navigationulliaspanpadding-right:16px;#navigationulli

21、a:hover,#navigationullia.activecolor:#000;text-decoration:none;#navigationullia.hover,#navigationullia.hoverspan.linkfloat:left;display:inline;color:#000;background:url(images/nav-hover.gif)no-repeat00;#navigationullia.hoverz-index:10;#navigationullia.hoverspan.linkbackground-position:right0;確定輪播樣式的

22、CSS代碼：#sliderheight:350px;.slider-holderposition:relative;width:985px;height:350px;overflow:hidden;.slider-holderulposition:relative;list-style:noneoutsidenone;overflow:hidden;.slider-leftposition:relative;float:left;display:inline;width:300px;height:350px;overflow:hidden;.slider-leftulliheight:350p

23、x;width:295px;color:#fff;.slider-leftjcarousel-clipposition:relative;width:295px;height:350px;.slider-leftullih2font-size:24px;line-height:24px;font-weight:normal;font-family:LucidaSans,Arial,Sans-serif;margin-bottom:6px;margin-top:30px;.slider-rightposition:relative;float:right;display:inline;width:658px;height:350px;.slider-rightulli,.slider-rightjcarousel-clipposition:relativ