基于網(wǎng)頁(yè)UI的設(shè)計(jì)與實(shí)現(xiàn)

福 建 師 范 大 學(xué) 應(yīng) 用 科 技 學(xué) 院學(xué) 生 論 文論文題目：基于網(wǎng)頁(yè)UI的設(shè)計(jì)與實(shí)現(xiàn)指導(dǎo)教師： 陳順?lè)?學(xué) 號(hào)： 120352010018 姓 名： 賴新煥 年 級(jí)： 2010 專(zhuān) 業(yè)： 電子信息工程 二0 一四年 五月 十七 日目錄【摘要】0【關(guān)鍵詞】0【Abstract】0【Key Words】01.設(shè)計(jì)的概況11.1設(shè)計(jì)背景11.2設(shè)計(jì)目的11.3設(shè)計(jì)要求12.開(kāi)發(fā)工具簡(jiǎn)介12.1Dreamweaver12.2Photoshop22.3ASP.NET技術(shù)簡(jiǎn)介23.設(shè)計(jì)與實(shí)現(xiàn)23.1數(shù)據(jù)庫(kù)的需求分析23.2數(shù)據(jù)庫(kù)的E-R圖設(shè)計(jì)23.3數(shù)據(jù)庫(kù)的結(jié)構(gòu)創(chuàng)建34.系統(tǒng)結(jié)構(gòu)設(shè)計(jì)與實(shí)現(xiàn)64.1系統(tǒng)結(jié)構(gòu)設(shè)計(jì)64.1.1系統(tǒng)前臺(tái)功能模塊64.1.2系統(tǒng)后臺(tái)功能模塊74.2系統(tǒng)實(shí)現(xiàn)84.2.1系統(tǒng)前臺(tái)功能實(shí)現(xiàn)84.2.2系統(tǒng)后臺(tái)功能實(shí)現(xiàn)115.網(wǎng)頁(yè)制作與實(shí)現(xiàn)135.1制作網(wǎng)頁(yè)的步驟135.2網(wǎng)頁(yè)布局145.2.1常規(guī)的頁(yè)面布局145.2.2頁(yè)面的配色方案145.2.3頁(yè)頭和頁(yè)尾145.2.4關(guān)于廣告145.2.5表單的布局設(shè)計(jì)155.2.6按鈕155.2.7反饋155.3特效實(shí)現(xiàn)166.總結(jié)22【參考文獻(xiàn)】22致 謝22網(wǎng)頁(yè)UI的設(shè)計(jì)與實(shí)現(xiàn)【摘要】 網(wǎng)頁(yè)UI設(shè)計(jì)有一套完整的設(shè)計(jì)方案，包括人機(jī)交互、操作邏輯、界面美觀等很多內(nèi)容，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)等不同的學(xué)科都參與了這個(gè)復(fù)雜的過(guò)程，在此都扮演著重要的角色。一個(gè)成功的網(wǎng)頁(yè)設(shè)計(jì)它要具備一個(gè)好看時(shí)尚的外觀，還要考慮到它的結(jié)構(gòu)布局是否合理，本論文將網(wǎng)頁(yè)設(shè)計(jì)一般步驟將豐富的效果應(yīng)用與網(wǎng)頁(yè)設(shè)計(jì)理論相結(jié)合，通過(guò)制作網(wǎng)頁(yè)，闡述了網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中一些的視覺(jué)效果的效果設(shè)計(jì)和具體操作方法?！娟P(guān)鍵詞】 電子商務(wù) 網(wǎng)頁(yè) 特效【Abstract】 Webpage UI design has a complete set of design scheme, including human-computer interaction, logic operation, beautiful interface, a lot of content, subject in cognitive psychology, design science, linguistics and so different are involved in this complex process, this has played an important role. A successful Webpage design it should have a good fashion appearance, but also take into account the structure it is reasonable, this paper will Webpage design general steps of applying effects and Webpage design theory rich combination, through the production of Webpage, design and operational methods described Webpage design some visual effects in the process of.【Key Words】 E-Commerce Web Effects 1.設(shè)計(jì)的概況1.1設(shè)計(jì)背景自從1946年世界上第一臺(tái)電子計(jì)算機(jī)在美國(guó)賓西法尼亞大學(xué)莫爾學(xué)院?jiǎn)柺酪詠?lái)，時(shí)至今日互聯(lián)網(wǎng)早已成為了一條將全球的人們緊緊聯(lián)系在一起的紐帶，特別是在這幾年電子商務(wù)這種不受時(shí)間與空間限制的經(jīng)營(yíng)方式出現(xiàn)后現(xiàn)在越來(lái)越多的企業(yè)都開(kāi)始重視并樂(lè)衷于在互聯(lián)網(wǎng)上建設(shè)自己的官方網(wǎng)站，擁有一個(gè)頁(yè)面精美的網(wǎng)站就相當(dāng)于在網(wǎng)上建立一個(gè)展示企業(yè)的精品櫥窗，提供了一個(gè)讓外界了解自己的平臺(tái)，能夠很好的推廣企業(yè)的文化與實(shí)力，擴(kuò)大市場(chǎng)。一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的成不成功取決于用戶對(duì)于這個(gè)頁(yè)面的認(rèn)可，用戶的感受決定了開(kāi)發(fā)者的采用哪種設(shè)計(jì)方案。在將實(shí)習(xí)過(guò)程與服裝網(wǎng)站建設(shè)的設(shè)計(jì)過(guò)程相結(jié)合的時(shí)候，對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作過(guò)程中的網(wǎng)頁(yè)布局的方法，框架結(jié)構(gòu)的架構(gòu)，特效展示的合理安排等相關(guān)事項(xiàng)做以下論述。1.2設(shè)計(jì)目的UI界面的設(shè)計(jì)，一直都沒(méi)能在軟件設(shè)計(jì)當(dāng)中得到很好的重視。大家對(duì)界面設(shè)計(jì)的理解也只是局限于美工而已。 把UI當(dāng)做只是做一些簡(jiǎn)單的美術(shù)設(shè)計(jì)去對(duì)待，認(rèn)為UI的工作只是簡(jiǎn)簡(jiǎn)單單的繪圖，對(duì)用戶交互的重要性缺乏足夠的理解； 認(rèn)為UI也只是作為次要性的工種，在一個(gè)設(shè)計(jì)團(tuán)隊(duì)當(dāng)中UI工作人員相對(duì)于整個(gè)團(tuán)隊(duì)的人員配比，薪資福利都可以證明這一問(wèn)題。一個(gè)界面設(shè)計(jì)的友好美觀，會(huì)讓人更容易對(duì)商家，對(duì)產(chǎn)品產(chǎn)生好感，為商家創(chuàng)造更有優(yōu)勢(shì)的賣(mài)點(diǎn)。想要通過(guò)設(shè)計(jì)結(jié)構(gòu)層次分明美輪美奐的網(wǎng)頁(yè)頁(yè)面達(dá)到樹(shù)立公司形象，宣傳產(chǎn)品，招商加盟的目的，UI設(shè)計(jì)就顯得尤為重要。1.3設(shè)計(jì)要求網(wǎng)頁(yè)風(fēng)格要在保證整個(gè)頁(yè)面協(xié)調(diào)有序的基礎(chǔ)上顯得有新意和具有時(shí)尚的氣息、讓用戶在較短的時(shí)間內(nèi)看到最想看到的內(nèi)容又不顯得凌亂，怎么樣讓banner、flash和圖片所制作的頁(yè)面協(xié)調(diào)放置是特別要注重的一點(diǎn)，它強(qiáng)調(diào)的是一個(gè)協(xié)調(diào)性而不是簡(jiǎn)單的理解為一種效果的堆砌；在安排首頁(yè)的信息分布時(shí)要注重主次的區(qū)分，不能造成信息冗余。頁(yè)面要求精致，通過(guò)在頁(yè)面中搭配圖片、廣告條、flash等裝飾手段，讓頁(yè)面產(chǎn)生一種更加生動(dòng)的展示效果 ?？梢酝ㄟ^(guò)后臺(tái)控制網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格的改變以及圖片新聞內(nèi)容內(nèi)容的更新實(shí)現(xiàn)產(chǎn)品的3D效果、產(chǎn)品圖片切換效果、產(chǎn)品銷(xiāo)售渠道、產(chǎn)品搜索等方面。2.開(kāi)發(fā)工具簡(jiǎn)介2.1DreamweaverDreamweaver是現(xiàn)在應(yīng)用最為廣泛的可見(jiàn)網(wǎng)頁(yè)編輯軟件，Dreamweaver可以制作出的網(wǎng)頁(yè)在不同的操作系統(tǒng)平臺(tái)，瀏覽器當(dāng)中都能夠得到很好的運(yùn)行，大大提高了網(wǎng)頁(yè)的開(kāi)發(fā)效率，這也是現(xiàn)在制作web的最常用工具。Dreamweaver的主要特點(diǎn)有：（1）形式靈活：Dreamweaver將設(shè)計(jì)與代碼可以自由的切換，不僅方便了源代碼的編輯，還能在第一時(shí)間查看代碼所要展現(xiàn)的最直觀效果。（2）可視化編輯環(huán)境：Dreamweaver是一種可視化的網(wǎng)頁(yè)編輯軟件，由于軟件自帶的代碼生成能力在很多時(shí)候我們只要對(duì)頁(yè)面進(jìn)行版面的設(shè)計(jì)，節(jié)省了開(kāi)發(fā)人員的時(shí)間。（3）強(qiáng)大的CSS功能：在網(wǎng)頁(yè)中使用CSS樣式可以有效的將網(wǎng)頁(yè)對(duì)象的外觀，網(wǎng)頁(yè)界面的美化，進(jìn)行統(tǒng)一修改和管理。Dreamweaver編輯CSS樣式表的功能非常完善和強(qiáng)大，用它來(lái)編輯CSS樣式是非常簡(jiǎn)單的。（4）集成性高：Dreamweaver與Fireworks，F(xiàn)lash，Shockwave的功能都大同小異，可以在這些Web創(chuàng)作工具之間自由的進(jìn)行切換。（5）媒體支持能力強(qiáng)：在Dreamweaver里面進(jìn)行制作時(shí)，可以添加很多比如JAVA，F(xiàn)lash，Shockwave，ActiveX這些媒體元素，。（6）Dreamweaver還具有其他軟件所不具有的強(qiáng)大擴(kuò)展能力。2.2PhotoshopPS俗稱(chēng)網(wǎng)站開(kāi)發(fā)軟件當(dāng)中的“三劍客”之一，對(duì)圖片的特殊效果處理能力，展示出的效果是得到了眾多設(shè)計(jì)者的認(rèn)可的。2.3ASP.NET技術(shù)簡(jiǎn)介ASP.NET是微軟公司使用.NET框架所提供的編程類(lèi)庫(kù)所構(gòu)建成的WEB應(yīng)用程序開(kāi)發(fā)平臺(tái)。它使得ASP.NET管理、部署、創(chuàng)建WEB應(yīng)用程序變的非常簡(jiǎn)單。ASP.NET的編譯程序采用的是通用語(yǔ)言，所以在很多情況下都可以和其他軟件兼容。ASP.NET可同時(shí)支持C#、VB、Jscript這些目前主流的開(kāi)發(fā)語(yǔ)言，通用性就更廣泛了。ASP.NET具有效率高、可重復(fù)利用性、代碼量少這三大優(yōu)勢(shì)。所有ASP.NET代碼都可以進(jìn)行直接的編譯，代碼量相對(duì)于ASP可以減少很多。開(kāi)發(fā)人員還可以按照自己的需要對(duì)ASP.NET進(jìn)行一些功能的移除。3.設(shè)計(jì)與實(shí)現(xiàn)3.1數(shù)據(jù)庫(kù)的需求分析現(xiàn)在的很多網(wǎng)站都要求加入數(shù)據(jù)庫(kù)管理系統(tǒng)來(lái)實(shí)現(xiàn)網(wǎng)站內(nèi)容的管理和數(shù)據(jù)的維護(hù)。在這個(gè)系統(tǒng)我選取的是Access這個(gè)系統(tǒng)。服裝在線銷(xiāo)售系統(tǒng)的設(shè)計(jì)和模塊的具體劃分以及具有的主要結(jié)構(gòu)和數(shù)據(jù)項(xiàng)有以下幾個(gè)方面：用戶信息表：用戶的編號(hào)、用戶的名稱(chēng)、用戶的密碼、用戶的權(quán)限、Email、密碼的問(wèn)題和答案。購(gòu)物車(chē)信息表：購(gòu)物的編號(hào)、會(huì)員的編號(hào)、商品的編號(hào)、商品的數(shù)量、商品的價(jià)格和是否結(jié)賬選項(xiàng)。留言信息表：留言人的ID號(hào)、留言人的名稱(chēng)、留言的內(nèi)容、留言時(shí)間和是否刪除留言內(nèi)容等。訂單信息表：訂單的編號(hào)、商品的編號(hào)、用戶的編號(hào)、收貨人的姓名、收貨的地址、郵政編碼、聯(lián)系人電話、送貨方式、付款方式、訂單狀態(tài)、下單時(shí)間和訂單總額。商品信息表：商品的編號(hào)、名稱(chēng)、商品第一級(jí)分類(lèi)、商品第二級(jí)分類(lèi)、是否推薦、是否特價(jià)、商品的原來(lái)價(jià)格、會(huì)員優(yōu)惠價(jià)、點(diǎn)擊次數(shù)、圖片路徑、商品庫(kù)存、銷(xiāo)售數(shù)量、商品描述?；貜?fù)信息表:回復(fù)人的ID號(hào)、回復(fù)的內(nèi)容、回復(fù)的時(shí)間、留言人的ID號(hào)和回復(fù)人的ID號(hào)。3.2數(shù)據(jù)庫(kù)的E-R圖設(shè)計(jì)概念模型是對(duì)這個(gè)世界用一種抽象的方法，在眾多的表達(dá)方式里面最常用的就是E-R模型圖。在E-R圖中，實(shí)體是用矩形框表示的；橢圓形代表實(shí)體的屬性；菱形代表實(shí)體間的聯(lián)系，為了更好的設(shè)計(jì)數(shù)據(jù)庫(kù)，清楚簡(jiǎn)便的描述出實(shí)體與屬性的關(guān)系，圖1所示一張包含實(shí)體屬性的完整E-R圖。管理員會(huì)員管理用戶名密碼用戶名密碼email地址問(wèn)題查詢訂單編號(hào)名稱(chēng)價(jià)格用戶數(shù)量用戶管理留言標(biāo)題時(shí)間管理購(gòu)物車(chē)編號(hào)商品數(shù)量?jī)r(jià)格用戶答案管理商品庫(kù)存價(jià)格數(shù)量編號(hào)名稱(chēng)權(quán)限圖1 E-R模型圖3.3數(shù)據(jù)庫(kù)的結(jié)構(gòu)創(chuàng)建本系統(tǒng)一共創(chuàng)建了6個(gè)用戶表，下面對(duì)這些表格和其中字段所代表的含義做個(gè)簡(jiǎn)單的介紹。名稱(chēng)：用戶信息表。標(biāo)示：userinfo。數(shù)據(jù)來(lái)源：前臺(tái)頁(yè)面獲得。用戶信息表如表1所示。表1用戶信息圖表列名類(lèi)型是否主鍵說(shuō)明useridusernamepasswordpoweremailquestionanswer自動(dòng)編號(hào)文本文本數(shù)字文本文本文本是是否否否否否用戶編號(hào)用戶名密碼1會(huì)員2管理員電子郵件密碼問(wèn)題問(wèn)題答案名稱(chēng)：購(gòu)物車(chē)信息表。標(biāo)示：cart。數(shù)據(jù)來(lái)源：前臺(tái)頁(yè)面獲得。購(gòu)物車(chē)信息表如表2所示。表2購(gòu)物車(chē)信息表列名類(lèi)型是否主鍵說(shuō)明cartid userid productid count checkout自動(dòng)編號(hào)數(shù)字?jǐn)?shù)字?jǐn)?shù)字是/否是否否否否購(gòu)物編號(hào)用戶編號(hào)商品編號(hào)商品數(shù)量是否結(jié)帳名稱(chēng)：訂單信息表。標(biāo)示：orders。數(shù)據(jù)來(lái)源：前臺(tái)頁(yè)面獲得。訂單信息表如表3所示。表3訂單信息表列名類(lèi)型是否主鍵說(shuō)明OrderedProductidUseridAcceptnameAddressPostalcodePhoneDeliveryPaymentStateOrdertimeOrderprice文本文本數(shù)字文本文本文本文本文本文本數(shù)字日期/時(shí)間貨幣是否否否否否否否否否否否訂單編號(hào)商品編號(hào)用戶編號(hào)收貨人收貨地址郵政編碼聯(lián)系電話送貨方式付款方式訂單狀態(tài)下單時(shí)間訂單總額名稱(chēng)：留言信息表。標(biāo)示：message。數(shù)據(jù)來(lái)源：前臺(tái)頁(yè)面獲得。留言信息表如表4所示。表4留言信息表列名類(lèi)型是否主鍵說(shuō)明Messages_IDMessages_NameMessages_ContentMessages_TimeIsDelete自動(dòng)編號(hào)文本備注日期/時(shí)間是/否是否否否否留言ID留言人名稱(chēng)留言內(nèi)容留言時(shí)間是否刪除名稱(chēng)：商品信息表。標(biāo)示：products。數(shù)據(jù)來(lái)源：后臺(tái)頁(yè)面獲得。商品信息表如表5所示。表5商品信息表列名類(lèi)型是否主鍵說(shuō)明ProductidProductnametypeid_1typeid_2recommendedspecialspriceuserpricespecialspricepointcountimagepathcountsellcountdescription自動(dòng)編號(hào)文本數(shù)字?jǐn)?shù)字是/否是/否貨幣貨幣貨幣數(shù)字文本數(shù)字?jǐn)?shù)字備注是否否否否否否否否否否否否否商品編號(hào)商品名稱(chēng)商品第一級(jí)分類(lèi)商品第二級(jí)分類(lèi)是否推薦是否特價(jià)商品原價(jià)會(huì)員價(jià)格特價(jià)點(diǎn)擊數(shù)量圖片路徑商品庫(kù)存數(shù)量銷(xiāo)售數(shù)量商品描述名稱(chēng)：商品一級(jí)類(lèi)別表。標(biāo)示：type_1。數(shù)據(jù)來(lái)源：后臺(tái)頁(yè)面獲得。商品一級(jí)類(lèi)別表如表6所示。表6商品一級(jí)類(lèi)別表列名類(lèi)型是否主鍵說(shuō)明typeid_1typename自動(dòng)編號(hào)文本是否商品一級(jí)分類(lèi)商品一級(jí)名稱(chēng)名稱(chēng)：商品二級(jí)類(lèi)別表。標(biāo)示：type_2。數(shù)據(jù)來(lái)源：后臺(tái)頁(yè)面獲得。商品二級(jí)類(lèi)別表如表7所示。表7商品二級(jí)類(lèi)別表列名類(lèi)型是否主鍵說(shuō)明typeid_2typeid_1typename自動(dòng)編號(hào)數(shù)字文本是否否商品二級(jí)分類(lèi)編號(hào)商品一級(jí)分類(lèi)編號(hào)商品二級(jí)名稱(chēng)名稱(chēng)：回復(fù)信息表。標(biāo)示：userinfo。數(shù)據(jù)來(lái)源：前臺(tái)頁(yè)面獲得。表8回復(fù)信息表列名類(lèi)型是否主鍵說(shuō)明Relay_IDRelay_ContentRelay_TimeMessages_IDMUser_ID自動(dòng)編號(hào)備注日期/時(shí)間數(shù)字?jǐn)?shù)字是否否否否回復(fù)ID回復(fù)內(nèi)容回復(fù)時(shí)間留言ID回復(fù)人ID4.系統(tǒng)結(jié)構(gòu)設(shè)計(jì)與實(shí)現(xiàn)4.1系統(tǒng)結(jié)構(gòu)設(shè)計(jì)這個(gè)在線服裝銷(xiāo)售系統(tǒng)主要分為前臺(tái)和后臺(tái)兩個(gè)功能模塊。前臺(tái)部分是提供給普通用戶和那些未注冊(cè)用戶使用的，主要包括用戶注冊(cè)、用戶登錄、用戶中心、常見(jiàn)問(wèn)題、商品搜索、商品分類(lèi)、銷(xiāo)售排行、新品上架、特價(jià)商品、熱銷(xiāo)商品、購(gòu)物車(chē)和用戶留言這些功能模塊。后臺(tái)只有管理員才有權(quán)限登錄，主要在后臺(tái)管理留言板、訂單信息、會(huì)員、商品類(lèi)別等。4.1.1系統(tǒng)前臺(tái)功能模塊（1）用戶功能模塊用戶功能模塊包括用戶注冊(cè)、用戶登錄、用戶中心、常見(jiàn)問(wèn)題四大模塊。用戶點(diǎn)擊注冊(cè)的時(shí)候，頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到注冊(cè)頁(yè)面，用戶需要填寫(xiě)用戶名、密碼、確認(rèn)密碼、電子郵箱、密碼問(wèn)題和密碼答案。還可以使用用戶名檢測(cè)功能，找出沒(méi)有被注冊(cè)使用的名字。最后點(diǎn)擊“注冊(cè)新用戶”按鈕進(jìn)行注冊(cè)，完成注冊(cè)之后頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到購(gòu)物網(wǎng)的首頁(yè)。用戶中心里面對(duì)個(gè)人資料可以進(jìn)行修改，也可以在我的訂單中查看已經(jīng)購(gòu)買(mǎi)的商品，還可以進(jìn)行密碼的修改。常見(jiàn)問(wèn)題頁(yè)面顯示的是用戶在服裝銷(xiāo)售網(wǎng)站常見(jiàn)的一些問(wèn)題，新手應(yīng)先查看常見(jiàn)問(wèn)題頁(yè)面。（2） 商品搜索分類(lèi)模塊該模塊主要包括商品的搜索、商品的分類(lèi)、商品銷(xiāo)量的排行、新品上架、特價(jià)商品、熱銷(xiāo)商品這幾個(gè)方面的內(nèi)容。用戶想要購(gòu)買(mǎi)何種商品可以按照分類(lèi)去查詢。在高級(jí)搜索頁(yè)可以限定搜索的服裝類(lèi)別和服裝的價(jià)格區(qū)間，使得搜索的商品更加符合用戶的需求。商品分類(lèi)可以使用戶快捷的查看該服裝分類(lèi)下面的所有服裝。銷(xiāo)售排行是根據(jù)商品銷(xiāo)售的數(shù)量進(jìn)行的智能排行，熱門(mén)商品則是根據(jù)所有用戶對(duì)該服裝點(diǎn)擊數(shù)目進(jìn)行的排行，點(diǎn)擊越多排名越高。特價(jià)商品與熱銷(xiāo)商品是管理員在后臺(tái)的商品管理中進(jìn)行手動(dòng)管理，可以手動(dòng)添加商品到這兩個(gè)頁(yè)面。（3） 購(gòu)物車(chē)模塊購(gòu)物車(chē)模塊是用戶在服裝頁(yè)面點(diǎn)擊“購(gòu)買(mǎi)”按鈕之后，將訂單信息放在購(gòu)物車(chē)?yán)锩?，在?gòu)物車(chē)中可以刪除不想買(mǎi)的商品，修改商品的購(gòu)買(mǎi)數(shù)量和最終金額，當(dāng)購(gòu)買(mǎi)完成之后點(diǎn)擊去收銀臺(tái)，填寫(xiě)自己聯(lián)系方式和地址并選擇付款和快遞方式，點(diǎn)擊提交后訂單就會(huì)在后臺(tái)自動(dòng)生成訂單號(hào)。（4） 留言板模塊留言板提供了一個(gè)用戶和網(wǎng)站之間互動(dòng)交流交流平臺(tái)，用戶通過(guò)在留言板上給網(wǎng)站進(jìn)行留言，包括留言的姓名，標(biāo)題，內(nèi)容和一些聯(lián)系方式。系統(tǒng)前臺(tái)是為前臺(tái)會(huì)員設(shè)計(jì)的包括用戶功能、商品搜索分類(lèi)、購(gòu)物車(chē)和留言板，如圖2系統(tǒng)前臺(tái)功能模塊系統(tǒng)前臺(tái)功能模塊用戶功能商品搜索分類(lèi)購(gòu)物車(chē)留言板商品搜索商品分類(lèi)熱銷(xiāo)商品新品上架特價(jià)商品銷(xiāo)售排行用戶注冊(cè)用戶登錄用戶中心常見(jiàn)問(wèn)題圖2 系統(tǒng)前臺(tái)功能模塊圖4.1.2系統(tǒng)后臺(tái)功能模塊（1）用戶管理模塊用戶管理分為管理員管理與會(huì)員管理兩大模塊。管理員登錄后臺(tái)可以修改用戶的賬號(hào)密碼和其他的一些基本信息。當(dāng)會(huì)員很多時(shí)，可以利用會(huì)員管理的查找會(huì)員進(jìn)行會(huì)員查找添加新會(huì)員等。（2） 留言管理模塊當(dāng)用戶發(fā)布留言后管理員可以在后臺(tái)查看回復(fù)留言信息。（3）訂單管理模塊顧客在前臺(tái)將中意的商品拍下之后，管理員可以登錄后臺(tái)對(duì)訂單進(jìn)行管理，每一筆訂單都有一個(gè)唯一的編號(hào)，通過(guò)用戶名可以找出相應(yīng)的訂單，在后臺(tái)可以看見(jiàn)訂單的狀態(tài)，商家將貨品發(fā)送出去之后顧客收到貨物就可以在前臺(tái)的會(huì)員中心確認(rèn)收貨。（4）商品管理模塊商品管理包括商品類(lèi)別管理和商品管理兩大模塊。管理員可以在后臺(tái)完成對(duì)商品類(lèi)別的劃分。設(shè)置完類(lèi)別之后，管理員可以添加商品，先給商品選定類(lèi)目，然后給商品添加適當(dāng)?shù)臉?biāo)題、商品價(jià)格、商品庫(kù)存，添加商品圖片，對(duì)商品進(jìn)行詳細(xì)的描述、還可以選擇是否推薦和是否特價(jià)，提交保存，進(jìn)行發(fā)布商品修改已發(fā)布商品。本系統(tǒng)的后臺(tái)分為用戶管理、留言板管理、訂單管理和商品管理四個(gè)部分。如圖3系統(tǒng)后臺(tái)功能模塊。系統(tǒng)后臺(tái)功能模塊用戶管理模塊訂單管理模塊留言板管理模塊商品管理模塊圖3 系統(tǒng)后臺(tái)功能模塊圖4.2系統(tǒng)實(shí)現(xiàn)4.2.1系統(tǒng)前臺(tái)功能實(shí)現(xiàn)（1）用戶功能模塊的實(shí)現(xiàn)用戶注冊(cè)頁(yè)面輸入：用戶名稱(chēng)，用戶密碼，確認(rèn)密碼，電子郵箱，密碼問(wèn)題，問(wèn)題答案，點(diǎn)擊“注冊(cè)新用戶”按鈕。處理：系統(tǒng)會(huì)判斷用戶名有沒(méi)有被注冊(cè)過(guò)，兩次輸入的密碼是否相同，電子郵箱的格式是否正確。點(diǎn)擊 “返回首頁(yè)”按鈕則會(huì)返回網(wǎng)站首頁(yè)。輸出：注冊(cè)成功之后頁(yè)面會(huì)跳轉(zhuǎn)到網(wǎng)站首頁(yè)，如果注冊(cè)失敗則會(huì)提示注冊(cè)信息在哪里出錯(cuò)，用戶修改即可用戶注冊(cè)頁(yè)面如圖4所示圖4 用戶注冊(cè)頁(yè)面用戶登錄頁(yè)面輸入：用戶名稱(chēng)，用戶密碼，驗(yàn)證碼，點(diǎn)擊“登錄”按鈕。處理：系統(tǒng)會(huì)在驗(yàn)證碼正確無(wú)誤之后把會(huì)員在登錄頁(yè)面所輸入的用戶名和密碼與數(shù)據(jù)庫(kù)中會(huì)員表的用戶名和密碼進(jìn)行比對(duì)。輸出：當(dāng)驗(yàn)證碼輸入不正確，網(wǎng)站會(huì)提示輸入的驗(yàn)證碼有誤。當(dāng)驗(yàn)證碼正確，用戶名或者密碼錯(cuò)誤，則網(wǎng)站會(huì)提示會(huì)員用戶名或者密碼輸入有誤。當(dāng)兩者都準(zhǔn)確無(wú)誤則登陸成功跳轉(zhuǎn)到網(wǎng)站首頁(yè)。用戶登錄頁(yè)面如圖5所示圖5 用戶登錄頁(yè)面用戶功能模塊中的用戶中心頁(yè)面如圖6所示；常見(jiàn)問(wèn)題頁(yè)面如圖7所示。圖6 用戶中心圖7 常見(jiàn)問(wèn)題（2）商品搜索分類(lèi)模塊的實(shí)現(xiàn)商品搜索分類(lèi)模塊可以用，如下圖8商品搜索分類(lèi)模塊圖，來(lái)概括。左邊是搜索欄，右邊是搜索結(jié)果圖8 商品搜索分類(lèi)模塊圖（3）購(gòu)物車(chē)模塊的實(shí)現(xiàn)購(gòu)物車(chē)頁(yè)面輸入：商品數(shù)量，點(diǎn)擊“修改數(shù)量”按鈕可以對(duì)商品的數(shù)量進(jìn)行修改。處理：刪除是把單款商品進(jìn)行刪除，清空購(gòu)物車(chē)會(huì)將所有的消息清空。輸出：網(wǎng)站會(huì)自動(dòng)計(jì)算出商品價(jià)格。購(gòu)物車(chē)頁(yè)面如下圖9所示。收銀臺(tái)頁(yè)面輸入：收貨人的姓名、收貨人的地址、郵編、聯(lián)系方式，選擇送貨方式和付款方式，點(diǎn)擊“確認(rèn)訂單信息并提交訂單”按鈕。處理：系統(tǒng)會(huì)檢查用戶輸入的收貨人姓名及地址是否填寫(xiě)，郵編格式是否正確，聯(lián)系電話是否為空。輸出：當(dāng)收貨人、地址和聯(lián)系電話為空時(shí)，網(wǎng)站會(huì)提示會(huì)員輸入正確的信息，當(dāng)郵編格式錯(cuò)誤時(shí)，網(wǎng)站會(huì)提示輸入正確郵編。全部正確則生成訂單。收銀臺(tái)頁(yè)面如下圖10所示。圖10 收銀臺(tái)頁(yè)面（4）留言板模塊的實(shí)現(xiàn)顧客在留言板模塊中可以對(duì)商家進(jìn)行留言，如下圖11所示圖11 留言板頁(yè)面4.2.2系統(tǒng)后臺(tái)功能實(shí)現(xiàn)（1）用戶管理模塊的實(shí)現(xiàn)管理員可以登錄后臺(tái)完成用戶基本信息的管理，查找，添加新用戶等。如圖12所示。圖12 后臺(tái)用戶管理模塊圖（2） 留言板管理模塊的實(shí)現(xiàn)管理員登錄后臺(tái)對(duì)用戶留言進(jìn)行管理，如圖13所示。圖13 后臺(tái)留言板管理模塊圖（3）訂單管理模塊的實(shí)現(xiàn)管理員登錄后臺(tái)可以對(duì)生成的訂單信息進(jìn)行管理，如圖14所示。如控制發(fā)貨和完成交易等，管理員也可以通過(guò)這個(gè)模塊搜索指定用戶的所有訂單信息。圖14 后臺(tái)訂單管理模塊圖（4） 商品管理模塊的實(shí)現(xiàn)管理員登錄后臺(tái)修改商品數(shù)量，如圖15所示。圖15 后臺(tái)商品管理模塊圖已經(jīng)添加的商品頁(yè)可以在列表中對(duì)商品進(jìn)行修改。如圖16所示圖16 后臺(tái)商品列表圖5.網(wǎng)頁(yè)制作與實(shí)現(xiàn)5.1制作網(wǎng)頁(yè)的步驟（1）確定網(wǎng)站主題 ：網(wǎng)站主題就是要知道這個(gè)網(wǎng)站的用戶群體是哪些，它要向它的目標(biāo)群體傳達(dá)什么理念，達(dá)到什么樣的效果。在建設(shè)網(wǎng)站時(shí)這個(gè)主題就應(yīng)該明確下來(lái)，這個(gè)課題選取的是以完成一個(gè)具有很多特效的服裝企業(yè)的官網(wǎng)來(lái)介紹網(wǎng)頁(yè)UI設(shè)計(jì)的完整流程所包含的內(nèi)容。（2）搜集材料 ：在網(wǎng)站的主題大概已經(jīng)確定下來(lái)之后就要開(kāi)始著手于素材的尋找了。在網(wǎng)絡(luò)上有很多的精美的圖片以及許多特效代碼可以提供我們下載和學(xué)習(xí)。（3）規(guī)劃網(wǎng)站 ：一個(gè)網(wǎng)站能不能設(shè)計(jì)的成功在很大程度上是由設(shè)計(jì)者來(lái)決定的，比如網(wǎng)站結(jié)構(gòu)、欄目設(shè)置、網(wǎng)站的顏色搭配、版面布局、文字圖片運(yùn)用這些內(nèi)容都要提前打好草稿，這樣在設(shè)計(jì)過(guò)程中就能夠有條不紊了。（4）選擇制作工具 ：現(xiàn)在的設(shè)計(jì)軟件設(shè)計(jì)出的網(wǎng)頁(yè)并不會(huì)有很大的差別，但是從眾多的軟件工具中挑選出一款功能強(qiáng)大、使用簡(jiǎn)單的軟件可以在很大程度上縮短網(wǎng)站的開(kāi)發(fā)時(shí)間。（5）制作網(wǎng)頁(yè) ：當(dāng)素材和制作工具都準(zhǔn)備就緒之后，就需要按照先大后小，先簡(jiǎn)后難的原則把自己的想法實(shí)現(xiàn)了。所謂先大后小，就是說(shuō)在制作網(wǎng)頁(yè)時(shí)，先做整體再做具體。所謂先簡(jiǎn)單后復(fù)雜，就是先設(shè)計(jì)出簡(jiǎn)單的內(nèi)容，完成了一個(gè)雛形的大概設(shè)計(jì)之后，再將比較復(fù)雜的內(nèi)容逐一添加進(jìn)去，出現(xiàn)錯(cuò)誤的話也方便修改。5.2網(wǎng)頁(yè)布局5.2.1常規(guī)的頁(yè)面布局網(wǎng)頁(yè)設(shè)計(jì)結(jié)構(gòu)有以下幾種：兩欄式結(jié)構(gòu)，頂部是網(wǎng)站標(biāo)志或廣告條，下面分為左右兩欄，左欄為導(dǎo)航，右欄為主要內(nèi)容，這種布局方法掌握比較容易，對(duì)于內(nèi)容的分配要看導(dǎo)航和內(nèi)容哪個(gè)占的比重較大。三欄式結(jié)構(gòu)，大型網(wǎng)站中很常見(jiàn)，一般為上面用廣告條當(dāng)橫幅，下面分為三豎欄，中間較大的部分是主要的信息，左右放置一些小的廣告條之類(lèi)的內(nèi)容。三欄式是外網(wǎng)站或者視頻類(lèi)網(wǎng)站應(yīng)用比較多的一種布局方式，它最大的特點(diǎn)就是可以容納大量的信息。第三種是左右框架型，這種布局方式在企業(yè)網(wǎng)站和論壇上很常見(jiàn)，頁(yè)面分為左右兩部分，左邊一般為導(dǎo)航部分，右邊是與導(dǎo)航相對(duì)應(yīng)的內(nèi)容。左右框架型的結(jié)構(gòu)便于信息的查詢，本網(wǎng)站主要使用的就是這種三字型的網(wǎng)頁(yè)布局方法，網(wǎng)頁(yè)采用ASP.NET技術(shù)，頁(yè)面布局采用DIV+CSS，數(shù)據(jù)庫(kù)使用微軟Access來(lái)建立，運(yùn)用ODBC技術(shù)把數(shù)據(jù)庫(kù)與動(dòng)態(tài)網(wǎng)頁(yè)聯(lián)系起來(lái)。由于本網(wǎng)站采用傳統(tǒng)的靜態(tài)信息管理系統(tǒng)，由專(zhuān)門(mén)的文字錄入員將資料信息輸入數(shù)據(jù)庫(kù)中，所以數(shù)據(jù)量不是非常大，使用Access足以勝任數(shù)據(jù)的存儲(chǔ)。5.2.2頁(yè)面的配色方案網(wǎng)站在設(shè)計(jì)之前就應(yīng)該把整體頁(yè)面的顏色搭配考慮好。在進(jìn)行選擇的時(shí)候一般是按照下面幾個(gè)方面進(jìn)行選擇的。1 目標(biāo)客戶：每個(gè)客戶群的愛(ài)好往往是不同的，但是相同年齡或者職業(yè)的客戶會(huì)存在一些共通的地方。2 當(dāng)?shù)匚幕L(fēng)俗：在不同的地域?qū)τ陬伾南埠檬遣灰粯拥摹? 網(wǎng)站的類(lèi)型：比如服裝企業(yè)這種網(wǎng)站基本都是用暖色調(diào)做為網(wǎng)頁(yè)的主題色調(diào)的。4 品牌形象：色調(diào)在很大程度上還要從企業(yè)要展示的形象著手，如果是電器類(lèi)的網(wǎng)站的話，那頁(yè)面的風(fēng)格整體就會(huì)以冷色調(diào)為主。在本系統(tǒng)中所面對(duì)的客戶年齡段是18-30左右的女性，那么在色調(diào)的選擇，和頁(yè)面的風(fēng)格上就著重于傳達(dá)一種青春與活力的感覺(jué)，所以在用色上面用的基本上是粉色這種暖色調(diào)。5.2.3頁(yè)頭和頁(yè)尾大型網(wǎng)站一般采用的是比較簡(jiǎn)單的頭部，因?yàn)樗旧淼闹纫呀?jīng)很高了，所以不需要通過(guò)特意設(shè)計(jì)頭部來(lái)達(dá)到標(biāo)新立異的效果。比如新浪，騰訊等大型網(wǎng)站都是這樣的。對(duì)于一些小網(wǎng)站來(lái)說(shuō)，因?yàn)樗臋?quán)重不高，所以如果有一個(gè)吸引人的頭部的話會(huì)更容易得到大家的青睞，但是一味的追求頭部忽略其他內(nèi)容的話會(huì)適得其反。Logo在頁(yè)頭的設(shè)計(jì)過(guò)程中是最為重要的一部分，Logo的作用有兩個(gè)，一個(gè)是作為網(wǎng)站的獨(dú)特標(biāo)記，一個(gè)是作為用戶返回到首頁(yè)的導(dǎo)航。頁(yè)尾一般來(lái)說(shuō)是屬于次要性的內(nèi)容，用戶也很少會(huì)去注意頁(yè)尾，簡(jiǎn)單的設(shè)計(jì)就可以了。5.2.4關(guān)于廣告互聯(lián)網(wǎng)是用廣告收入來(lái)盈利的。但是按照我們用戶的使用習(xí)慣，我們并不喜歡瀏覽時(shí)會(huì)摻雜太多廣告。所以要在一個(gè)網(wǎng)站中添加廣告要尊重用戶的習(xí)慣將用戶的體驗(yàn)放在首位。首先，用戶最能接受滾動(dòng)式廣告和橫幅式廣告，而彈出廣告和郵件廣告常被誤以為是病毒插件用戶也對(duì)這個(gè)特別反感。其次，很多用戶看到廣告認(rèn)為該頁(yè)面的內(nèi)容已經(jīng)中止，那這樣的話客戶的滯留性就降低了，所以在設(shè)計(jì)的時(shí)候要考慮好廣告的放置會(huì)不會(huì)影響到頁(yè)面內(nèi)容的展示。然后，我們要避免過(guò)多的廣告同時(shí)出現(xiàn)。網(wǎng)站的廣告大小也要安排好。5.2.5表單的布局設(shè)計(jì)這里就從注冊(cè)來(lái)看，這個(gè)是最典型的表單?，F(xiàn)在的布局方式大體上分為垂直對(duì)齊，左對(duì)齊和右對(duì)齊三種方式。垂直對(duì)齊的設(shè)計(jì)方式可以大大縮減填寫(xiě)的時(shí)間，但是如果項(xiàng)目太多的話會(huì)比較占空間。左對(duì)齊便于用戶瀏覽標(biāo)簽，對(duì)空間的需求會(huì)更少。但有的時(shí)候標(biāo)簽太長(zhǎng)會(huì)出現(xiàn)文字與文本框距離過(guò)遠(yuǎn)的問(wèn)題。所以這種方式常用于標(biāo)簽文字較短的設(shè)計(jì)場(chǎng)合。右對(duì)齊方式是最為少見(jiàn)的一種方式一般不建議采用。對(duì)于很多選項(xiàng)來(lái)說(shuō)，都會(huì)設(shè)置默認(rèn)選項(xiàng)，可以大量減少用戶的操作。5.2.6按鈕首先要用較大的，顏色較為醒目的按鈕讓按鈕與網(wǎng)頁(yè)更好的區(qū)分開(kāi)來(lái)，讓用戶在最短的時(shí)間完成想要的操作。其次，我們需要根據(jù)按鈕的重要性來(lái)突出主要的按鈕，還有要按照用戶的瀏覽方式來(lái)放置按鈕的位置。5.2.7反饋反饋系統(tǒng)在網(wǎng)站設(shè)計(jì)過(guò)程中也是很重要的，其中包括成功提示和失敗提示兩個(gè)。成功提示只需要完成提示的功能所以也是最簡(jiǎn)單的。只需要讓用戶知道就可以了。失敗提示會(huì)比較繁瑣，它需要用文字或者彈窗來(lái)提示用戶。但是彈窗經(jīng)常會(huì)有聲音，不建議大家使用。還有錯(cuò)誤頁(yè)面，一個(gè)好的404頁(yè)面設(shè)計(jì)能夠改善用戶的不良體驗(yàn)減少用戶的挫敗感，還可以將用戶引導(dǎo)到正確內(nèi)容那邊，提高用戶在網(wǎng)站的滯留率。首頁(yè)布局:三型結(jié)構(gòu)logowelcome導(dǎo)航條商品分類(lèi)菜單FLASHT圖片展示區(qū)新聞新商品展示區(qū)熱銷(xiāo)商品展示區(qū)特價(jià)促銷(xiāo)商品展示區(qū) 客服中心子頁(yè)布局:左右結(jié)構(gòu)LogoWelcome導(dǎo)航條菜單 內(nèi)容客服中心5.3特效實(shí)現(xiàn)FLASH效果:代碼：/ 產(chǎn)品圖片的放大效果:代碼：(function($)$(document).ready(function()$(.cloud-zoom, .cloud-zoom-gallery).CloudZoom();function format(a)for(var i=1;iarguments.length;i+)a=a.replace(%+(i-1),argumentsi)return afunction CloudZoom(g,i)var j=$(img,g);var k;var l;var m=null;var n=null;var o=null;var p=null;var q=null;var r=null;var s;var t=0;var u,ch;var v=0;var z=0;var A=0;var B=0;var C=0;var D,my;var E=this,zw;setTimeout(function()if(n=null)var w=g.width();g.parent().append(format(Loading.,w/3,(w/2)-(w/6).find(:last).css(opacity,0.5),200);var F=function()if(r!=null)r.remove();r=null;this.removeBits=function()if(o)o.remove();o=nullif(p)p.remove();p=nullif(q)q.remove();q=nullF();$(.cloud-zoom-loading,g.parent().remove();this.destroy=function()g.data(zoom,null);if(n)n.unbind();n.remove();n=nullif(m)m.remove();m=nullthis.removeBits();this.fadedOut=function()if(m)m.remove();m=nullthis.removeBits();this.controlLoop=function()if(o)Var x=(D-j.offset().left-(u*0.5)0;var y=(my-j.offset().top-(ch*0.5)0;if(x(j.outerWidth()-u)x=(j.outerWidth()-u)if(y(j.outerHeight()-ch)y=(j.outerHeight()-ch)o.css(left:x,top:y);o.css(background-position,(-x)+px +(-y)+px);v=(x)/j.outerWidth()*s.width)0;z=(y)/j.outerHeight()*s.height)0;B+=(v-B)/i.smoothMove;A+=(z-A)/i.smoothMove;m.css(background-position,(-(B0)+px )+(-(A0)+px)t=setTimeout(function()E.controlLoop(),30);this.init2=function(a,b)C+;if(b=1)s=aif(C=2)this.init();this.init=function()$(.cloud-zoom-loading,g.parent().remove();n=g.parent().append(format(,j.outerWidth(),j.outerHeight(),0,0).find(:last);n.bind(mousemove,this,function(a)D=a.pageX;my=a.pageY);n.bind(mouseleave,this,function(a)clearTimeout(t);if(o)o.fadeOut(299)if(p)p.fadeOut(299)if(q)q.fadeOut(299)m.fadeOut(300,function()E.fadedOut();return false);n.bind(mouseenter,this,function(a)D=a.pageX;my=a.pageY;zw=a.data;if(m)m.stop(true,false);m.remove()var b=i.adjustX,yPos=i.adjustY;var c=j.outerWidth();var d=j.outerHeight();var w=i.zoomWidth;var h=i.zoomHeight;if(i.zoomWidth=auto)w=cif(i.zoomHeight=auto)h=dvar e=g.parent();switch(i.position)casetop:yPos-=h;break;caseright:b+=c;break;casebottom:yPos+=d;break;caseleft:b-=w;break;caseinside:w=c;h=d;break;default:e=$(#+i.position);if(!e.length)e=g;b+=c;yPos+=delsew=e.innerWidth();h=e.innerHeight()m=e.append(format