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

福 建 師 范 大 學(xué) 應(yīng) 用 科 技 學(xué) 院學(xué) 生 論 文論文題目：基于網(wǎng)頁UI的設(shè)計(jì)與實(shí)現(xiàn)指導(dǎo)教師： 陳順凡 學(xué) 號(hào)： 120352010018 姓 名： 賴新煥 年 級(jí)： 2010 專 業(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.開發(fā)工具簡介12.1Dreamweaver12.2Photoshop22.3ASP.NET技術(shù)簡介23.設(shè)計(jì)與實(shí)現(xiàn)23.1數(shù)據(jù)庫的需求分析23.2數(shù)據(jù)庫的E-R圖設(shè)計(jì)23.3數(shù)據(jù)庫的結(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)頁制作與實(shí)現(xiàn)135.1制作網(wǎng)頁的步驟135.2網(wǎng)頁布局145.2.1常規(guī)的頁面布局145.2.2頁面的配色方案145.2.3頁頭和頁尾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)頁UI的設(shè)計(jì)與實(shí)現(xiàn)【摘要】 網(wǎng)頁UI設(shè)計(jì)有一套完整的設(shè)計(jì)方案，包括人機(jī)交互、操作邏輯、界面美觀等很多內(nèi)容，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語言學(xué)等不同的學(xué)科都參與了這個(gè)復(fù)雜的過程，在此都扮演著重要的角色。一個(gè)成功的網(wǎng)頁設(shè)計(jì)它要具備一個(gè)好看時(shí)尚的外觀，還要考慮到它的結(jié)構(gòu)布局是否合理，本論文將網(wǎng)頁設(shè)計(jì)一般步驟將豐富的效果應(yīng)用與網(wǎng)頁設(shè)計(jì)理論相結(jié)合，通過制作網(wǎng)頁，闡述了網(wǎng)頁設(shè)計(jì)過程中一些的視覺效果的效果設(shè)計(jì)和具體操作方法。【關(guān)鍵詞】 電子商務(wù) 網(wǎng)頁 特效【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ī)在美國賓西法尼亞大學(xué)莫爾學(xué)院問世以來，時(shí)至今日互聯(lián)網(wǎng)早已成為了一條將全球的人們緊緊聯(lián)系在一起的紐帶，特別是在這幾年電子商務(wù)這種不受時(shí)間與空間限制的經(jīng)營方式出現(xiàn)后現(xiàn)在越來越多的企業(yè)都開始重視并樂衷于在互聯(lián)網(wǎng)上建設(shè)自己的官方網(wǎng)站，擁有一個(gè)頁面精美的網(wǎng)站就相當(dāng)于在網(wǎng)上建立一個(gè)展示企業(yè)的精品櫥窗，提供了一個(gè)讓外界了解自己的平臺(tái)，能夠很好的推廣企業(yè)的文化與實(shí)力，擴(kuò)大市場。一個(gè)網(wǎng)頁設(shè)計(jì)的成不成功取決于用戶對(duì)于這個(gè)頁面的認(rèn)可，用戶的感受決定了開發(fā)者的采用哪種設(shè)計(jì)方案。在將實(shí)習(xí)過程與服裝網(wǎng)站建設(shè)的設(shè)計(jì)過程相結(jié)合的時(shí)候，對(duì)網(wǎng)頁設(shè)計(jì)與制作過程中的網(wǎng)頁布局的方法，框架結(jié)構(gòu)的架構(gòu)，特效展示的合理安排等相關(guān)事項(xiàng)做以下論述。1.2設(shè)計(jì)目的UI界面的設(shè)計(jì)，一直都沒能在軟件設(shè)計(jì)當(dāng)中得到很好的重視。大家對(duì)界面設(shè)計(jì)的理解也只是局限于美工而已。 把UI當(dāng)做只是做一些簡單的美術(shù)設(shè)計(jì)去對(duì)待，認(rèn)為UI的工作只是簡簡單單的繪圖，對(duì)用戶交互的重要性缺乏足夠的理解； 認(rèn)為UI也只是作為次要性的工種，在一個(gè)設(shè)計(jì)團(tuán)隊(duì)當(dāng)中UI工作人員相對(duì)于整個(gè)團(tuán)隊(duì)的人員配比，薪資福利都可以證明這一問題。一個(gè)界面設(shè)計(jì)的友好美觀，會(huì)讓人更容易對(duì)商家，對(duì)產(chǎn)品產(chǎn)生好感，為商家創(chuàng)造更有優(yōu)勢(shì)的賣點(diǎn)。想要通過設(shè)計(jì)結(jié)構(gòu)層次分明美輪美奐的網(wǎng)頁頁面達(dá)到樹立公司形象，宣傳產(chǎn)品，招商加盟的目的，UI設(shè)計(jì)就顯得尤為重要。1.3設(shè)計(jì)要求網(wǎng)頁風(fēng)格要在保證整個(gè)頁面協(xié)調(diào)有序的基礎(chǔ)上顯得有新意和具有時(shí)尚的氣息、讓用戶在較短的時(shí)間內(nèi)看到最想看到的內(nèi)容又不顯得凌亂，怎么樣讓banner、flash和圖片所制作的頁面協(xié)調(diào)放置是特別要注重的一點(diǎn)，它強(qiáng)調(diào)的是一個(gè)協(xié)調(diào)性而不是簡單的理解為一種效果的堆砌；在安排首頁的信息分布時(shí)要注重主次的區(qū)分，不能造成信息冗余。頁面要求精致，通過在頁面中搭配圖片、廣告條、flash等裝飾手段，讓頁面產(chǎn)生一種更加生動(dòng)的展示效果 ?？梢酝ㄟ^后臺(tái)控制網(wǎng)頁的設(shè)計(jì)風(fēng)格的改變以及圖片新聞內(nèi)容內(nèi)容的更新實(shí)現(xiàn)產(chǎn)品的3D效果、產(chǎn)品圖片切換效果、產(chǎn)品銷售渠道、產(chǎn)品搜索等方面。2.開發(fā)工具簡介2.1DreamweaverDreamweaver是現(xiàn)在應(yīng)用最為廣泛的可見網(wǎng)頁編輯軟件，Dreamweaver可以制作出的網(wǎng)頁在不同的操作系統(tǒng)平臺(tái)，瀏覽器當(dāng)中都能夠得到很好的運(yùn)行，大大提高了網(wǎng)頁的開發(fā)效率，這也是現(xiàn)在制作web的最常用工具。Dreamweaver的主要特點(diǎn)有：（1）形式靈活：Dreamweaver將設(shè)計(jì)與代碼可以自由的切換，不僅方便了源代碼的編輯，還能在第一時(shí)間查看代碼所要展現(xiàn)的最直觀效果。（2）可視化編輯環(huán)境：Dreamweaver是一種可視化的網(wǎng)頁編輯軟件，由于軟件自帶的代碼生成能力在很多時(shí)候我們只要對(duì)頁面進(jìn)行版面的設(shè)計(jì)，節(jié)省了開發(fā)人員的時(shí)間。（3）強(qiáng)大的CSS功能：在網(wǎng)頁中使用CSS樣式可以有效的將網(wǎng)頁對(duì)象的外觀，網(wǎng)頁界面的美化，進(jìn)行統(tǒng)一修改和管理。Dreamweaver編輯CSS樣式表的功能非常完善和強(qiáng)大，用它來編輯CSS樣式是非常簡單的。（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俗稱網(wǎng)站開發(fā)軟件當(dāng)中的“三劍客”之一，對(duì)圖片的特殊效果處理能力，展示出的效果是得到了眾多設(shè)計(jì)者的認(rèn)可的。2.3ASP.NET技術(shù)簡介ASP.NET是微軟公司使用.NET框架所提供的編程類庫所構(gòu)建成的WEB應(yīng)用程序開發(fā)平臺(tái)。它使得ASP.NET管理、部署、創(chuàng)建WEB應(yīng)用程序變的非常簡單。ASP.NET的編譯程序采用的是通用語言，所以在很多情況下都可以和其他軟件兼容。ASP.NET可同時(shí)支持C#、VB、Jscript這些目前主流的開發(fā)語言，通用性就更廣泛了。ASP.NET具有效率高、可重復(fù)利用性、代碼量少這三大優(yōu)勢(shì)。所有ASP.NET代碼都可以進(jìn)行直接的編譯，代碼量相對(duì)于ASP可以減少很多。開發(fā)人員還可以按照自己的需要對(duì)ASP.NET進(jìn)行一些功能的移除。3.設(shè)計(jì)與實(shí)現(xiàn)3.1數(shù)據(jù)庫的需求分析現(xiàn)在的很多網(wǎng)站都要求加入數(shù)據(jù)庫管理系統(tǒng)來實(shí)現(xiàn)網(wǎng)站內(nèi)容的管理和數(shù)據(jù)的維護(hù)。在這個(gè)系統(tǒng)我選取的是Access這個(gè)系統(tǒng)。服裝在線銷售系統(tǒng)的設(shè)計(jì)和模塊的具體劃分以及具有的主要結(jié)構(gòu)和數(shù)據(jù)項(xiàng)有以下幾個(gè)方面：用戶信息表：用戶的編號(hào)、用戶的名稱、用戶的密碼、用戶的權(quán)限、Email、密碼的問題和答案。購物車信息表：購物的編號(hào)、會(huì)員的編號(hào)、商品的編號(hào)、商品的數(shù)量、商品的價(jià)格和是否結(jié)賬選項(xiàng)。留言信息表：留言人的ID號(hào)、留言人的名稱、留言的內(nèi)容、留言時(shí)間和是否刪除留言內(nèi)容等。訂單信息表：訂單的編號(hào)、商品的編號(hào)、用戶的編號(hào)、收貨人的姓名、收貨的地址、郵政編碼、聯(lián)系人電話、送貨方式、付款方式、訂單狀態(tài)、下單時(shí)間和訂單總額。商品信息表：商品的編號(hào)、名稱、商品第一級(jí)分類、商品第二級(jí)分類、是否推薦、是否特價(jià)、商品的原來價(jià)格、會(huì)員優(yōu)惠價(jià)、點(diǎn)擊次數(shù)、圖片路徑、商品庫存、銷售數(shù)量、商品描述?；貜?fù)信息表:回復(fù)人的ID號(hào)、回復(fù)的內(nèi)容、回復(fù)的時(shí)間、留言人的ID號(hào)和回復(fù)人的ID號(hào)。3.2數(shù)據(jù)庫的E-R圖設(shè)計(jì)概念模型是對(duì)這個(gè)世界用一種抽象的方法，在眾多的表達(dá)方式里面最常用的就是E-R模型圖。在E-R圖中，實(shí)體是用矩形框表示的；橢圓形代表實(shí)體的屬性；菱形代表實(shí)體間的聯(lián)系，為了更好的設(shè)計(jì)數(shù)據(jù)庫，清楚簡便的描述出實(shí)體與屬性的關(guān)系，圖1所示一張包含實(shí)體屬性的完整E-R圖。管理員會(huì)員管理用戶名密碼用戶名密碼email地址問題查詢訂單編號(hào)名稱價(jià)格用戶數(shù)量用戶管理留言標(biāo)題時(shí)間管理購物車編號(hào)商品數(shù)量價(jià)格用戶答案管理商品庫存價(jià)格數(shù)量編號(hào)名稱權(quán)限圖1 E-R模型圖3.3數(shù)據(jù)庫的結(jié)構(gòu)創(chuàng)建本系統(tǒng)一共創(chuàng)建了6個(gè)用戶表，下面對(duì)這些表格和其中字段所代表的含義做個(gè)簡單的介紹。名稱：用戶信息表。標(biāo)示：userinfo。數(shù)據(jù)來源：前臺(tái)頁面獲得。用戶信息表如表1所示。表1用戶信息圖表列名類型是否主鍵說明useridusernamepasswordpoweremailquestionanswer自動(dòng)編號(hào)文本文本數(shù)字文本文本文本是是否否否否否用戶編號(hào)用戶名密碼1會(huì)員2管理員電子郵件密碼問題問題答案名稱：購物車信息表。標(biāo)示：cart。數(shù)據(jù)來源：前臺(tái)頁面獲得。購物車信息表如表2所示。表2購物車信息表列名類型是否主鍵說明cartid userid productid count checkout自動(dòng)編號(hào)數(shù)字?jǐn)?shù)字?jǐn)?shù)字是/否是否否否否購物編號(hào)用戶編號(hào)商品編號(hào)商品數(shù)量是否結(jié)帳名稱：訂單信息表。標(biāo)示：orders。數(shù)據(jù)來源：前臺(tái)頁面獲得。訂單信息表如表3所示。表3訂單信息表列名類型是否主鍵說明OrderedProductidUseridAcceptnameAddressPostalcodePhoneDeliveryPaymentStateOrdertimeOrderprice文本文本數(shù)字文本文本文本文本文本文本數(shù)字日期/時(shí)間貨幣是否否否否否否否否否否否訂單編號(hào)商品編號(hào)用戶編號(hào)收貨人收貨地址郵政編碼聯(lián)系電話送貨方式付款方式訂單狀態(tài)下單時(shí)間訂單總額名稱：留言信息表。標(biāo)示：message。數(shù)據(jù)來源：前臺(tái)頁面獲得。留言信息表如表4所示。表4留言信息表列名類型是否主鍵說明Messages_IDMessages_NameMessages_ContentMessages_TimeIsDelete自動(dòng)編號(hào)文本備注日期/時(shí)間是/否是否否否否留言ID留言人名稱留言內(nèi)容留言時(shí)間是否刪除名稱：商品信息表。標(biāo)示：products。數(shù)據(jù)來源：后臺(tái)頁面獲得。商品信息表如表5所示。表5商品信息表列名類型是否主鍵說明ProductidProductnametypeid_1typeid_2recommendedspecialspriceuserpricespecialspricepointcountimagepathcountsellcountdescription自動(dòng)編號(hào)文本數(shù)字?jǐn)?shù)字是/否是/否貨幣貨幣貨幣數(shù)字文本數(shù)字?jǐn)?shù)字備注是否否否否否否否否否否否否否商品編號(hào)商品名稱商品第一級(jí)分類商品第二級(jí)分類是否推薦是否特價(jià)商品原價(jià)會(huì)員價(jià)格特價(jià)點(diǎn)擊數(shù)量圖片路徑商品庫存數(shù)量銷售數(shù)量商品描述名稱：商品一級(jí)類別表。標(biāo)示：type_1。數(shù)據(jù)來源：后臺(tái)頁面獲得。商品一級(jí)類別表如表6所示。表6商品一級(jí)類別表列名類型是否主鍵說明typeid_1typename自動(dòng)編號(hào)文本是否商品一級(jí)分類商品一級(jí)名稱名稱：商品二級(jí)類別表。標(biāo)示：type_2。數(shù)據(jù)來源：后臺(tái)頁面獲得。商品二級(jí)類別表如表7所示。表7商品二級(jí)類別表列名類型是否主鍵說明typeid_2typeid_1typename自動(dòng)編號(hào)數(shù)字文本是否否商品二級(jí)分類編號(hào)商品一級(jí)分類編號(hào)商品二級(jí)名稱名稱：回復(fù)信息表。標(biāo)示：userinfo。數(shù)據(jù)來源：前臺(tái)頁面獲得。表8回復(fù)信息表列名類型是否主鍵說明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è)在線服裝銷售系統(tǒng)主要分為前臺(tái)和后臺(tái)兩個(gè)功能模塊。前臺(tái)部分是提供給普通用戶和那些未注冊(cè)用戶使用的，主要包括用戶注冊(cè)、用戶登錄、用戶中心、常見問題、商品搜索、商品分類、銷售排行、新品上架、特價(jià)商品、熱銷商品、購物車和用戶留言這些功能模塊。后臺(tái)只有管理員才有權(quán)限登錄，主要在后臺(tái)管理留言板、訂單信息、會(huì)員、商品類別等。4.1.1系統(tǒng)前臺(tái)功能模塊（1）用戶功能模塊用戶功能模塊包括用戶注冊(cè)、用戶登錄、用戶中心、常見問題四大模塊。用戶點(diǎn)擊注冊(cè)的時(shí)候，頁面會(huì)自動(dòng)跳轉(zhuǎn)到注冊(cè)頁面，用戶需要填寫用戶名、密碼、確認(rèn)密碼、電子郵箱、密碼問題和密碼答案。還可以使用用戶名檢測(cè)功能，找出沒有被注冊(cè)使用的名字。最后點(diǎn)擊“注冊(cè)新用戶”按鈕進(jìn)行注冊(cè)，完成注冊(cè)之后頁面會(huì)自動(dòng)跳轉(zhuǎn)到購物網(wǎng)的首頁。用戶中心里面對(duì)個(gè)人資料可以進(jìn)行修改，也可以在我的訂單中查看已經(jīng)購買的商品，還可以進(jìn)行密碼的修改。常見問題頁面顯示的是用戶在服裝銷售網(wǎng)站常見的一些問題，新手應(yīng)先查看常見問題頁面。（2） 商品搜索分類模塊該模塊主要包括商品的搜索、商品的分類、商品銷量的排行、新品上架、特價(jià)商品、熱銷商品這幾個(gè)方面的內(nèi)容。用戶想要購買何種商品可以按照分類去查詢。在高級(jí)搜索頁可以限定搜索的服裝類別和服裝的價(jià)格區(qū)間，使得搜索的商品更加符合用戶的需求。商品分類可以使用戶快捷的查看該服裝分類下面的所有服裝。銷售排行是根據(jù)商品銷售的數(shù)量進(jìn)行的智能排行，熱門商品則是根據(jù)所有用戶對(duì)該服裝點(diǎn)擊數(shù)目進(jìn)行的排行，點(diǎn)擊越多排名越高。特價(jià)商品與熱銷商品是管理員在后臺(tái)的商品管理中進(jìn)行手動(dòng)管理，可以手動(dòng)添加商品到這兩個(gè)頁面。（3） 購物車模塊購物車模塊是用戶在服裝頁面點(diǎn)擊“購買”按鈕之后，將訂單信息放在購物車?yán)锩?，在購物車中可以刪除不想買的商品，修改商品的購買數(shù)量和最終金額，當(dāng)購買完成之后點(diǎn)擊去收銀臺(tái)，填寫自己聯(lián)系方式和地址并選擇付款和快遞方式，點(diǎn)擊提交后訂單就會(huì)在后臺(tái)自動(dòng)生成訂單號(hào)。（4） 留言板模塊留言板提供了一個(gè)用戶和網(wǎng)站之間互動(dòng)交流交流平臺(tái)，用戶通過在留言板上給網(wǎng)站進(jìn)行留言，包括留言的姓名，標(biāo)題，內(nèi)容和一些聯(lián)系方式。系統(tǒng)前臺(tái)是為前臺(tái)會(huì)員設(shè)計(jì)的包括用戶功能、商品搜索分類、購物車和留言板，如圖2系統(tǒng)前臺(tái)功能模塊系統(tǒng)前臺(tái)功能模塊用戶功能商品搜索分類購物車留言板商品搜索商品分類熱銷商品新品上架特價(jià)商品銷售排行用戶注冊(cè)用戶登錄用戶中心常見問題圖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)，通過用戶名可以找出相應(yīng)的訂單，在后臺(tái)可以看見訂單的狀態(tài)，商家將貨品發(fā)送出去之后顧客收到貨物就可以在前臺(tái)的會(huì)員中心確認(rèn)收貨。（4）商品管理模塊商品管理包括商品類別管理和商品管理兩大模塊。管理員可以在后臺(tái)完成對(duì)商品類別的劃分。設(shè)置完類別之后，管理員可以添加商品，先給商品選定類目，然后給商品添加適當(dāng)?shù)臉?biāo)題、商品價(jià)格、商品庫存，添加商品圖片，對(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è)頁面輸入：用戶名稱，用戶密碼，確認(rèn)密碼，電子郵箱，密碼問題，問題答案，點(diǎn)擊“注冊(cè)新用戶”按鈕。處理：系統(tǒng)會(huì)判斷用戶名有沒有被注冊(cè)過，兩次輸入的密碼是否相同，電子郵箱的格式是否正確。點(diǎn)擊 “返回首頁”按鈕則會(huì)返回網(wǎng)站首頁。輸出：注冊(cè)成功之后頁面會(huì)跳轉(zhuǎn)到網(wǎng)站首頁，如果注冊(cè)失敗則會(huì)提示注冊(cè)信息在哪里出錯(cuò)，用戶修改即可用戶注冊(cè)頁面如圖4所示圖4 用戶注冊(cè)頁面用戶登錄頁面輸入：用戶名稱，用戶密碼，驗(yàn)證碼，點(diǎn)擊“登錄”按鈕。處理：系統(tǒng)會(huì)在驗(yàn)證碼正確無誤之后把會(huì)員在登錄頁面所輸入的用戶名和密碼與數(shù)據(jù)庫中會(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)確無誤則登陸成功跳轉(zhuǎn)到網(wǎng)站首頁。用戶登錄頁面如圖5所示圖5 用戶登錄頁面用戶功能模塊中的用戶中心頁面如圖6所示；常見問題頁面如圖7所示。圖6 用戶中心圖7 常見問題（2）商品搜索分類模塊的實(shí)現(xiàn)商品搜索分類模塊可以用，如下圖8商品搜索分類模塊圖，來概括。左邊是搜索欄，右邊是搜索結(jié)果圖8 商品搜索分類模塊圖（3）購物車模塊的實(shí)現(xiàn)購物車頁面輸入：商品數(shù)量，點(diǎn)擊“修改數(shù)量”按鈕可以對(duì)商品的數(shù)量進(jìn)行修改。處理：刪除是把單款商品進(jìn)行刪除，清空購物車會(huì)將所有的消息清空。輸出：網(wǎng)站會(huì)自動(dòng)計(jì)算出商品價(jià)格。購物車頁面如下圖9所示。收銀臺(tái)頁面輸入：收貨人的姓名、收貨人的地址、郵編、聯(lián)系方式，選擇送貨方式和付款方式，點(diǎn)擊“確認(rèn)訂單信息并提交訂單”按鈕。處理：系統(tǒng)會(huì)檢查用戶輸入的收貨人姓名及地址是否填寫，郵編格式是否正確，聯(lián)系電話是否為空。輸出：當(dāng)收貨人、地址和聯(lián)系電話為空時(shí)，網(wǎng)站會(huì)提示會(huì)員輸入正確的信息，當(dāng)郵編格式錯(cuò)誤時(shí)，網(wǎng)站會(huì)提示輸入正確郵編。全部正確則生成訂單。收銀臺(tái)頁面如下圖10所示。圖10 收銀臺(tái)頁面（4）留言板模塊的實(shí)現(xiàn)顧客在留言板模塊中可以對(duì)商家進(jìn)行留言，如下圖11所示圖11 留言板頁面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ā)貨和完成交易等，管理員也可以通過這個(gè)模塊搜索指定用戶的所有訂單信息。圖14 后臺(tái)訂單管理模塊圖（4） 商品管理模塊的實(shí)現(xiàn)管理員登錄后臺(tái)修改商品數(shù)量，如圖15所示。圖15 后臺(tái)商品管理模塊圖已經(jīng)添加的商品頁可以在列表中對(duì)商品進(jìn)行修改。如圖16所示圖16 后臺(tái)商品列表圖5.網(wǎng)頁制作與實(shí)現(xiàn)5.1制作網(wǎng)頁的步驟（1）確定網(wǎng)站主題 ：網(wǎng)站主題就是要知道這個(gè)網(wǎng)站的用戶群體是哪些，它要向它的目標(biāo)群體傳達(dá)什么理念，達(dá)到什么樣的效果。在建設(shè)網(wǎng)站時(shí)這個(gè)主題就應(yīng)該明確下來，這個(gè)課題選取的是以完成一個(gè)具有很多特效的服裝企業(yè)的官網(wǎng)來介紹網(wǎng)頁UI設(shè)計(jì)的完整流程所包含的內(nèi)容。（2）搜集材料 ：在網(wǎng)站的主題大概已經(jīng)確定下來之后就要開始著手于素材的尋找了。在網(wǎng)絡(luò)上有很多的精美的圖片以及許多特效代碼可以提供我們下載和學(xué)習(xí)。（3）規(guī)劃網(wǎng)站 ：一個(gè)網(wǎng)站能不能設(shè)計(jì)的成功在很大程度上是由設(shè)計(jì)者來決定的，比如網(wǎng)站結(jié)構(gòu)、欄目設(shè)置、網(wǎng)站的顏色搭配、版面布局、文字圖片運(yùn)用這些內(nèi)容都要提前打好草稿，這樣在設(shè)計(jì)過程中就能夠有條不紊了。（4）選擇制作工具 ：現(xiàn)在的設(shè)計(jì)軟件設(shè)計(jì)出的網(wǎng)頁并不會(huì)有很大的差別，但是從眾多的軟件工具中挑選出一款功能強(qiáng)大、使用簡單的軟件可以在很大程度上縮短網(wǎng)站的開發(fā)時(shí)間。（5）制作網(wǎng)頁 ：當(dāng)素材和制作工具都準(zhǔn)備就緒之后，就需要按照先大后小，先簡后難的原則把自己的想法實(shí)現(xiàn)了。所謂先大后小，就是說在制作網(wǎng)頁時(shí)，先做整體再做具體。所謂先簡單后復(fù)雜，就是先設(shè)計(jì)出簡單的內(nèi)容，完成了一個(gè)雛形的大概設(shè)計(jì)之后，再將比較復(fù)雜的內(nèi)容逐一添加進(jìn)去，出現(xiàn)錯(cuò)誤的話也方便修改。5.2網(wǎng)頁布局5.2.1常規(guī)的頁面布局網(wǎng)頁設(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)站中很常見，一般為上面用廣告條當(dāng)橫幅，下面分為三豎欄，中間較大的部分是主要的信息，左右放置一些小的廣告條之類的內(nèi)容。三欄式是外網(wǎng)站或者視頻類網(wǎng)站應(yīng)用比較多的一種布局方式，它最大的特點(diǎn)就是可以容納大量的信息。第三種是左右框架型，這種布局方式在企業(yè)網(wǎng)站和論壇上很常見，頁面分為左右兩部分，左邊一般為導(dǎo)航部分，右邊是與導(dǎo)航相對(duì)應(yīng)的內(nèi)容。左右框架型的結(jié)構(gòu)便于信息的查詢，本網(wǎng)站主要使用的就是這種三字型的網(wǎng)頁布局方法，網(wǎng)頁采用ASP.NET技術(shù)，頁面布局采用DIV+CSS，數(shù)據(jù)庫使用微軟Access來建立，運(yùn)用ODBC技術(shù)把數(shù)據(jù)庫與動(dòng)態(tài)網(wǎng)頁聯(lián)系起來。由于本網(wǎng)站采用傳統(tǒng)的靜態(tài)信息管理系統(tǒng)，由專門的文字錄入員將資料信息輸入數(shù)據(jù)庫中，所以數(shù)據(jù)量不是非常大，使用Access足以勝任數(shù)據(jù)的存儲(chǔ)。5.2.2頁面的配色方案網(wǎng)站在設(shè)計(jì)之前就應(yīng)該把整體頁面的顏色搭配考慮好。在進(jìn)行選擇的時(shí)候一般是按照下面幾個(gè)方面進(jìn)行選擇的。1 目標(biāo)客戶：每個(gè)客戶群的愛好往往是不同的，但是相同年齡或者職業(yè)的客戶會(huì)存在一些共通的地方。2 當(dāng)?shù)匚幕L(fēng)俗：在不同的地域?qū)τ陬伾南埠檬遣灰粯拥摹? 網(wǎng)站的類型：比如服裝企業(yè)這種網(wǎng)站基本都是用暖色調(diào)做為網(wǎng)頁的主題色調(diào)的。4 品牌形象：色調(diào)在很大程度上還要從企業(yè)要展示的形象著手，如果是電器類的網(wǎng)站的話，那頁面的風(fēng)格整體就會(huì)以冷色調(diào)為主。在本系統(tǒng)中所面對(duì)的客戶年齡段是18-30左右的女性，那么在色調(diào)的選擇，和頁面的風(fēng)格上就著重于傳達(dá)一種青春與活力的感覺，所以在用色上面用的基本上是粉色這種暖色調(diào)。5.2.3頁頭和頁尾大型網(wǎng)站一般采用的是比較簡單的頭部，因?yàn)樗旧淼闹纫呀?jīng)很高了，所以不需要通過特意設(shè)計(jì)頭部來達(dá)到標(biāo)新立異的效果。比如新浪，騰訊等大型網(wǎng)站都是這樣的。對(duì)于一些小網(wǎng)站來說，因?yàn)樗臋?quán)重不高，所以如果有一個(gè)吸引人的頭部的話會(huì)更容易得到大家的青睞，但是一味的追求頭部忽略其他內(nèi)容的話會(huì)適得其反。Logo在頁頭的設(shè)計(jì)過程中是最為重要的一部分，Logo的作用有兩個(gè)，一個(gè)是作為網(wǎng)站的獨(dú)特標(biāo)記，一個(gè)是作為用戶返回到首頁的導(dǎo)航。頁尾一般來說是屬于次要性的內(nèi)容，用戶也很少會(huì)去注意頁尾，簡單的設(shè)計(jì)就可以了。5.2.4關(guān)于廣告互聯(lián)網(wǎng)是用廣告收入來盈利的。但是按照我們用戶的使用習(xí)慣，我們并不喜歡瀏覽時(shí)會(huì)摻雜太多廣告。所以要在一個(gè)網(wǎng)站中添加廣告要尊重用戶的習(xí)慣將用戶的體驗(yàn)放在首位。首先，用戶最能接受滾動(dòng)式廣告和橫幅式廣告，而彈出廣告和郵件廣告常被誤以為是病毒插件用戶也對(duì)這個(gè)特別反感。其次，很多用戶看到廣告認(rèn)為該頁面的內(nèi)容已經(jīng)中止，那這樣的話客戶的滯留性就降低了，所以在設(shè)計(jì)的時(shí)候要考慮好廣告的放置會(huì)不會(huì)影響到頁面內(nèi)容的展示。然后，我們要避免過多的廣告同時(shí)出現(xiàn)。網(wǎng)站的廣告大小也要安排好。5.2.5表單的布局設(shè)計(jì)這里就從注冊(cè)來看，這個(gè)是最典型的表單。現(xiàn)在的布局方式大體上分為垂直對(duì)齊，左對(duì)齊和右對(duì)齊三種方式。垂直對(duì)齊的設(shè)計(jì)方式可以大大縮減填寫的時(shí)間，但是如果項(xiàng)目太多的話會(huì)比較占空間。左對(duì)齊便于用戶瀏覽標(biāo)簽，對(duì)空間的需求會(huì)更少。但有的時(shí)候標(biāo)簽太長會(huì)出現(xiàn)文字與文本框距離過遠(yuǎn)的問題。所以這種方式常用于標(biāo)簽文字較短的設(shè)計(jì)場合。右對(duì)齊方式是最為少見的一種方式一般不建議采用。對(duì)于很多選項(xiàng)來說，都會(huì)設(shè)置默認(rèn)選項(xiàng)，可以大量減少用戶的操作。5.2.6按鈕首先要用較大的，顏色較為醒目的按鈕讓按鈕與網(wǎng)頁更好的區(qū)分開來，讓用戶在最短的時(shí)間完成想要的操作。其次，我們需要根據(jù)按鈕的重要性來突出主要的按鈕，還有要按照用戶的瀏覽方式來放置按鈕的位置。5.2.7反饋反饋系統(tǒng)在網(wǎng)站設(shè)計(jì)過程中也是很重要的，其中包括成功提示和失敗提示兩個(gè)。成功提示只需要完成提示的功能所以也是最簡單的。只需要讓用戶知道就可以了。失敗提示會(huì)比較繁瑣，它需要用文字或者彈窗來提示用戶。但是彈窗經(jīng)常會(huì)有聲音，不建議大家使用。還有錯(cuò)誤頁面，一個(gè)好的404頁面設(shè)計(jì)能夠改善用戶的不良體驗(yàn)減少用戶的挫敗感，還可以將用戶引導(dǎo)到正確內(nèi)容那邊，提高用戶在網(wǎng)站的滯留率。首頁布局:三型結(jié)構(gòu)logowelcome導(dǎo)航條商品分類菜單FLASHT圖片展示區(qū)新聞新商品展示區(qū)熱銷商品展示區(qū)特價(jià)促銷商品展示區(qū) 客服中心子頁布局:左右結(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