第2頁蜂蜜桌面APP設計用戶界面設計說明書目錄16787引言 頁引言當今世界已進入信息時代，Internet成為21世紀最受關注的焦點之一,它的飛速發(fā)展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網絡技術的發(fā)展也取得了巨大的成就，為網站開發(fā)提供了很好的技術支持。網站已經成為現(xiàn)階段眾多企業(yè)不可或缺的網絡營銷平臺，互聯(lián)網應用規(guī)模正在不斷擴大。其中，特別是中小型企業(yè)，對于網絡平臺搭建的需求相當?shù)钠惹小Ｒ虼?，企業(yè)網站的建立是一個企業(yè)在當今社會發(fā)展的必然趨勢。企業(yè)網站是一個企業(yè)不可缺少的部分，它能介紹企業(yè)文化、經營理念、特色服務及企業(yè)在全國的網點分布。拓寬顧客市場，增加企業(yè)與客戶之間的聯(lián)系，縮短二者之間的距離。提高企業(yè)知名度，為企業(yè)今后的業(yè)務發(fā)展開辟一個良好的社會環(huán)境。它的內容對于企業(yè)來說至關重要,企業(yè)概況、企業(yè)論談、企業(yè)特色服務、最新企業(yè)新聞動態(tài)等部分應該能夠為用戶提供充足的信息。企業(yè)網站做成檢索迅速、查找方便、可靠性高、存儲量大、保密性好、壽命長、成本低、維護方便、信息實時性強的功能完善的大型企業(yè)網站。這些優(yōu)點能夠極大地提高了企業(yè)網站的效率,也是企業(yè)走向科學化、信息化與世界接軌的重要條件。在IT行業(yè)迅速發(fā)展的今天,企業(yè)網站的建設已經成為一個企業(yè)發(fā)展必不可少的存在。對于創(chuàng)意設計有限公司來說，必須建立一個以宣傳為目的的網站類型。將于短期內強力打造公司的宣傳力度，讓更多的客戶了解信任公司。網站的建設，也是公司對于宣傳方面的長期投資。社會上有很多保健品宣傳網站，調查研究顯示，保健品企業(yè)的知名度、企業(yè)的實力往往是和網站的制作水平成正比的?？梢?，保健品企業(yè)網站的建設十分重要，它的定位以及頁面的風格設計直接影響著保健品企業(yè)在網絡推廣應用的成敗。因此保健品企業(yè)建設公司網站可是必要的，它可以幫助企業(yè)實現(xiàn)在線產品宣傳，為用戶帶來更多方便和快捷，大大提高了企業(yè)的服務效率，于無形中樹立起了良好的企業(yè)形象。1.市場調研在設計蜂產品網站之前，通過對大量企業(yè)網站瀏覽及時調查研究，發(fā)現(xiàn)和比較了幾家比較典型和知名的蜂產品名企，總體定格網站設計思路，總結了各種企業(yè)網站的特色和制作，以冠生園官網為例，其界面如圖1.1所示。圖1.1冠生園官網首頁冠生園作為蜂產品的行業(yè)老大，也是很多蜂產品企業(yè)仿效的對象，它的頁面設計簡單、大氣。整體以灰色漸變?yōu)橹鳎怀鲶w現(xiàn)蜂產品的傳統(tǒng)風格與純天然氣息。整體的四欄設計把需要強調的東西強調出來。而且，關于細節(jié)的LOGO不僅因為顏色的反差更加突出，在整個頁面多加入了Logo元素，是整體還有一種混天然的感覺，將企業(yè)重點突出，冠生園主頁并不是用大幅內容放置產品，而是突出企業(yè)文化、食品安全和社會責任，這樣會讓更多的朋友看到企業(yè)會放心購買。蜂產品來自自然，也還給自然。客戶就是上帝，冠生園以公益和責任，突出企業(yè)文化。頁面右下方還加上自己的合作伙伴LOGO，體現(xiàn)企業(yè)的社會影響力和名譽，也讓客戶一看上去就能感覺到大氣、責任、有影響的名牌企業(yè)。當然，在設計方面冠生園的主色調有些灰，不夠體現(xiàn)綠色食品的宗旨；頁面整體過于單調，過于強調整體感；主旨不夠突出，最好將公司的宣傳標語放在重點位置。涇縣永春養(yǎng)蜂專業(yè)合作社，是一家集蜂產品采購、養(yǎng)蜂指導、蜂產品檢測、產品包裝一條線的蜂產品初級企業(yè)，企業(yè)硬件發(fā)展的同時更需要軟件的同步。網絡宣傳是當今社會主流的宣傳方式，利用網絡可以讓更多客戶了解企業(yè)，也有利于企業(yè)走出國門乃至世界。涇縣永春養(yǎng)蜂專業(yè)合作社目前需要一個完善的宣傳網站，而制作網站的工具很多，如dreamware,photoshop等等，畢業(yè)設計將借鑒冠生園公司的網站的優(yōu)點，避免其不足，用dreamware,photoshop為涇縣做一個有特色的企業(yè)網站，讓人們進一步了解蜂產品、涇蜂園和永春蜂業(yè)。2.文獻檢索2.1網頁制作軟件DreamweaverDreamweaver是創(chuàng)建和管理網頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術允許用戶隨意導入HTML文檔而無需重新設置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：（1）文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。（2）裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。（3）對象工具欄包含創(chuàng)建不同類型的對象（例如圖象、表格和層等）的按鈕。（4）屬性檢查器顯示選定對象的屬性。（5）快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。（6）可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。2.2DIV+CSS簡介DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，div+css是一種網頁的布局方法,這一種網頁布局方法有別于傳統(tǒng)的HTML網頁設計語言中的表格（table）定位方式,真正地達到了w3c內容與表現(xiàn)相分離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介：（1）符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。（2）支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網站都能很好的兼容。（3）搜索引擎更加友好。相對與傳統(tǒng)的table,采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。（4）樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便?，F(xiàn)在YAHOO,MSN等國際門戶網站，網易，新浪等國內門戶網站，和主流的WEB2.0網站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。（5）CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。（6）表現(xiàn)和結構分離，在團隊開發(fā)中更容易分工合作而減少相互關聯(lián)性。2.3平面設計軟件PhotoshopAdobePhotoshop，簡稱“PS”，是由AdobeSystems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構成的數(shù)字圖像,是對已有的位圖圖像進行編輯、加工、處理以及運用一些特殊效果。。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及,是專業(yè)設計人員的首選軟件。Photoshop是圖像處理軟件，其優(yōu)勢不在圖形創(chuàng)作。AdobePhotoshop的適用范圍很多，主要有：（1）專業(yè)測評：Photoshop的專長在于圖像處理，而不是圖形創(chuàng)作。圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工；圖形創(chuàng)作軟件是按照自己的構思創(chuàng)意，使用矢量圖形來設計圖形。（2）平面設計：平面設計是Photoshop應用最為廣泛的領域，無論是圖書封面，還招帖、海報，這些平面印刷品都需要Photoshop軟件對圖像進行處理。（3）廣告攝影：廣告攝影作為一種對視覺要求非常嚴格的工作，其最終成品往往要經過Photoshop的修改才能得到滿意的效果。（4）影像創(chuàng)意：影像創(chuàng)意是Photoshop的特長，通過Photoshop的處理可以將不同的對象組合在一起，使圖像發(fā)生變化。（5）網頁制作：網絡的普及是促使更多人需要掌握Photoshop，因為在制作網頁時Photoshop是必不可少的網頁圖像處理軟件。（6）后期修飾：在制作建筑效果圖包括許多三維場景時，人物與配景包括場景的顏色常常需要在Photoshop中增加并調整。（7）視覺創(chuàng)意：視覺創(chuàng)意與設計是設計藝術的一個分支，此類設計通常沒有非常明顯的商業(yè)目的，但由于他為廣大設計愛好者提供了設計的空間，因此越來越多的設計愛好者開始學習Photoshop，并進行具有個人特色與風格的視覺創(chuàng)意。（8）界面設計：界面設計是一個新興的領域，受到越來越多的軟件企業(yè)及開發(fā)者的重視。在當前還沒有用于做界面設計的專業(yè)軟件，因此絕大多數(shù)設計者使用的都是該軟件。Photoshop的界面組成，如圖2.1所示。圖2.1Photoshop界面組成圖設計實踐3.1設計立意本作品為蜂產品企業(yè)網站，主要介紹涇縣養(yǎng)蜂永春專業(yè)合作社的蜂產品，蜂產品知識、公司企業(yè)文化，讓更多的人了解涇縣養(yǎng)蜂永春專業(yè)合作社。蜂產品的網站需要有綠色大自然的氣息，然后我做的是企業(yè)網站，不需要過多花哨的東西點綴，采用層疊樣式表的應用，使用CSS實現(xiàn)出一個完美的網站。布局方法采用軟件布局法，利用Photoshop軟件對圖像進行編輯。網頁配色選用白色與灰色的色彩搭配，來實現(xiàn)企業(yè)網站的簡單大方。3.2網站結構規(guī)劃涇縣養(yǎng)蜂永春專業(yè)合作社網站界面設計的具體結構設計為以下5個模塊，網站總體結構圖如圖3.1所示。新聞詳情公司新聞新聞詳情公司新聞公司新聞公司新聞新聞詳情公司動態(tài)新聞詳情公司動態(tài)新聞詳情新聞分類新聞詳情新聞分類新聞詳情行業(yè)資訊新聞詳情行業(yè)資訊網站網站首頁產品詳情產品分類產品展示產品詳情產品分類產品展示產品詳情產品分類產品詳情產品分類產品詳情產品分類產品詳情產品分類產品詳情產品分類產品詳情產品分類關于我們關于我們聯(lián)系方式聯(lián)系方式圖3.1網站結構圖（1）企業(yè)首頁網站首頁體現(xiàn)的是一個網站的門面，也顯示了企業(yè)的一些相關的消息，是網站設計中比較重要的一部分，它以網站綜合平臺的形式展示整個企業(yè)網站各部分的主體內容，是整個網站的導航，能夠讓瀏覽者在第一時間內領略到企業(yè)特色所在。（2）公司新聞主要介紹出企業(yè)最新最近的各項動態(tài)和走向，通知以及一些定時更新的行業(yè)新聞，通過這一模塊可以讓客戶更好的了解公司的日常運作和具體實施項目的細節(jié)，以及公司的整體走向和發(fā)展程度。也更好是讓公司內部信息的流通和擴散。（3）產品展示一般其他營銷模式的企業(yè)網站都是注重產品展示來加強企業(yè)的宣傳力度，但是對于創(chuàng)意設計有限公司來說，沒有其實際物品展示，只有展現(xiàn)其出眾的業(yè)績實例才能讓客戶信服，才能從側面展現(xiàn)出公司的實力，讓客戶更放心的把業(yè)務交給公司處理。（4）關于我們具體介紹出企業(yè)的背景，經營項目，榮譽資質和公司的發(fā)展史，結構，業(yè)務流程等等一系列來加大公司的宣傳力度，好讓客戶能全面的了解公司便于樹立企業(yè)形象。（5）聯(lián)系我們?yōu)g覽者通過聯(lián)系方式對我們提出意見和建議，通過這個發(fā)現(xiàn)我們的不足和好的地方，要是發(fā)現(xiàn)我們的不好，我們也可以接收到您的寶貴意見并給您最滿意的答復，同時也是公司業(yè)務對外聯(lián)系的窗口，是意向客戶主動聯(lián)系公司的重要途徑。3.3網站詳細設計網站主頁結構布局如圖3.2。子頁導航欄LOGO子頁導航欄LOGO首頁banner欄首頁banner欄新聞熱點聯(lián)系方式產品展示新聞熱點聯(lián)系方式產品展示版權信息相關鏈接版權信息相關鏈接圖3.2首頁結構圖網站相關子頁結構布局如圖3.3。子頁導航欄LOGO子頁導航欄LOGO首頁banner欄首頁banner欄產品分類1產品分類2產品分類1產品分類2產品分類3產品分類相關子頁詳情頁版權信息相關鏈接圖3.3子頁結構圖版權信息相關鏈接子頁分二級頁面和三級頁面，整體結構與圖3.3一樣，所以在此不一一舉例。3.3.1首頁設計與制作網站首頁體現(xiàn)的是一個網站的門面，也顯示了企業(yè)的一些相關的消息，是網站設計中比較重要的一部分，它以網站綜合平臺的形式展示整個企業(yè)網站各部分的主體內容，是整個網站的導航，能夠讓瀏覽者在第一時間內領略到企業(yè)特色所在。中間部分插入banner，讓瀏覽者可以看到公司企業(yè)文化核心展示的圖片信息。在banner面板的下方分別為公司新聞、產品展示、聯(lián)系方式，讓瀏覽者可以直接看到所需要的信息。最后，插入公司網站信息，聯(lián)系方式以及站內站外鏈接，讓客戶更方便的找到自己想要的東西。首頁包括網站logo、導航欄、banner、3個圖文信息欄、底部公司信息、鏈接等組件。網站的Logo就是網站的標志，也是互聯(lián)網上各個網站用來與其他網站鏈接的圖形標志。由于做的蜂產品企業(yè)網站是真實存在的，即不可變更其logo，所以引用了一個蜂蜜團的logo，如圖3.4所示。圖3.4蜂產品LOGO首頁背景還是突出簡單、大氣，主要考慮到蜂產品本身屬于綠色食品，所以選用了簡單的白色為背景。導航欄主要還是用了與背景類似的顏色。簡潔、明了體現(xiàn)企業(yè)特色。如圖3.5所示。圖3.5首頁導航欄加上宋體標題后最終完成導航欄，如圖3.6所示。圖3.6首頁導航欄效果圖首頁banner要體現(xiàn)企業(yè)的高端、大氣、上檔次，二是要體現(xiàn)蜂產品特色的風格。三是要符合整體的頁面設計，具體效果如圖3.11所示。（1）首先在網上找了一個風景圖片，把不需要的部分用圖章工具抹去，在進行調色，如圖3.7所示.圖3.7圖片調色（2）在網上下載一個石獅子，用鋼筆摳出來，放到圖中，再進行調色，如圖3.8所示.圖3.8圖片處理（3）整體效果定型后，整體合并調色，如圖3.9所示.圖3.9合并處理（4）最后加上公司字樣和一只小蜜蜂體現(xiàn)企業(yè)為特色，如圖3.10所示.圖3.10添加標識圖3.11首頁banner而banner下方是三欄信息欄，分別放置新聞、產品和聯(lián)系方式3個重要信息，以便使用者更方便找到主要內容，如圖3.12所示。圖3.12信息欄底部左側主要還是設計了網站開發(fā)者的信息和版權，右側主要設計了一些相關方面的鏈接。如圖3.13所示。圖3.13底部信息欄最后切片且保存為index.html。在相應按鈕上添加鏈接到相應頁面。首頁最終效果圖，如圖3.14所示。圖3.14首頁最終效果圖其他子頁效果上下部分和首頁相同，在此不一一列舉。3.3.2公司新聞頁制作點擊主頁導航條上的公司新聞或者點擊首頁下方的第一個信息欄文字，就能進入二級頁面下的公司新聞頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的公司新聞、最新動態(tài)、行業(yè)新聞、新聞分類四個大類目，每個類目下都有具體的新聞列表。如圖3.15所示。圖3.15公司新聞頁效果圖3.3.3新聞詳情頁制作點擊主頁導航條上的公司新聞或者點擊相關子頁主題新聞，就能進入三級頁面下的新聞詳情頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的公司新聞、最新動態(tài)、行業(yè)新聞、新聞分類四個大類目，右邊詳細新聞。如圖3.16所示。圖3.16新聞詳情頁效果圖3.3.4產品展示頁制作點擊主頁導航條上的產品展示或者首頁下方的第二個信息欄文字、圖片，就能進入二級頁面下的產品展示頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的產品分類四個大類目，右邊產品圖片和詳情介紹，具體效果如圖3.17所示。3.3.5產品展示詳情頁制作點擊展品展示頁上的產品或者主題或者首頁下方的第二個信息欄文字、圖片，就能進入三級頁面下的產品展示詳情頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的產品分類四個大類目，右邊具體產品圖片詳情介紹，具體效果如圖3.18所示。圖3.17產品展示頁效果圖圖3.18產品圖片詳情頁效果圖3.3.6關于我們頁制作點擊主頁導航條上的關于我們，就能進入二級頁面下的關于我們頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的公司新聞、最新動態(tài)、行業(yè)新聞、新聞分類四個大類目，右邊就是永春公司的公司簡介，具體效果如圖3.19所示。圖3.19關于我們頁效果圖3.3.7聯(lián)系我們頁制作點擊主頁導航條上的聯(lián)系我們或者主題或者首頁下方的第三個信息欄文字，就能進入二級頁面下的聯(lián)系我們頁，左邊放了涇縣永春養(yǎng)蜂專業(yè)合作社的公司新聞、最新動態(tài)、行業(yè)新聞、新聞分類四個大類目，右邊就是永春公司的聯(lián)方式。如圖3.20所示。圖3.20聯(lián)系我們頁效果圖其他詳情頁面的結構和制作過程與圖3.20相同，在此不一一舉例。3.4創(chuàng)作總結經過為期半年的實習，在不懈的努力下終于完成了，從剛開始接觸報告的時候到現(xiàn)在全部完成，雖然時間不是很長，但是所做的工作還是很多的，在課程設計的過程中，我不斷地從討論，分析到整理，到最終的完成稿，在其中我們花費的精力雖然很多，但是堅持的精神得到了最大的體現(xiàn)。學習電子商務的這幾年，經歷過的網站制作工具有很多，比如說Dreamweaver，F(xiàn)ireworks，F(xiàn)lash，F(xiàn)rontPage還有Photoshop，但從來也沒有深入而系統(tǒng)的認識和了解，更談不上如何去分析，如何去整理和歸納。除了作業(yè)中自己摸索，了解，運用這些軟件，其他更深層次的軟件的更是從來沒有涉及過，所以不做深層的了解。設計下來，我覺得收獲很多，不僅對于制作網頁的軟件有一個全新的認識，并且在系統(tǒng)設計的技術方面也有了質的飛躍。關于這次總結，先從網站的頁面設計說起，在設計過程中，注意到對于電子商務網站BtoC還是諸多好評的，單單從方便角度出發(fā)，已經是一個很重要的優(yōu)點了，頁面設計過程的時候，有些頁面設計的填寫，可詳盡可簡略，凸顯主題，不是很能體現(xiàn)出這次調查的全面性，頁面設計的很好，但從某些方面不是很完善，但是對于這次我覺得我們做的很盡心，我們努力的選擇不同風格的頁面去設計，并且在網頁設計中，我們盡量的全面的問及我們所能涉及的問題，我們發(fā)現(xiàn)我們的獲益很多，不僅僅單純從問卷調查的過程，更從討論中，匯總中我們了解了更多的知識，也全面提高我們對問題的分析能力。這次網站設計，我總結了幾點：（1）確定網站主題：對于內容主題的選擇，要做到小而精，主題定位要小，內容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網站的特色，也會帶來高強度的勞動，給網站的及時更新帶來困難。（2）掌握建網工具：在制作網頁的時候，一定要熟練掌握軟件的運用，要不斷的摸索，對于細節(jié)的處理，我們需要做很多東西，只有不斷的練習，才會更好的運用軟件。（3）確定網站界面：網站的題材確定后，就要將收集到的資料內容作一個合理的編排，盡可能刪除那些與主題無關的欄目，盡可能將網站內最有價值的內容列在欄目上，盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內容，如站點簡介、版權信息、各板塊要有相對獨立性，各板塊要有相互關聯(lián)，各板塊的內容要圍繞站點主題；按欄目內容建立子目錄。子目錄的建立，首先按主欄目建立。友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如：網站簡介、站長情況等可以合并放在一個統(tǒng)一目錄下。所有程序一般都存放在特定目錄，在每個主目錄下都建立獨立的Images目錄。一般來說，一個站點根目錄下都有一個默認地Images目錄。將所有圖片都存放在這個目錄里很是不方便，比如在欄目刪除時，圖片的管理相當麻煩。所以為每個主欄目建立一個獨立的Images目錄是方便管理的。原因很簡單，就是方便維護與管理。（4）確定網站風格：“風格”是抽象的，是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志，色彩，字體，標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素，網站可以是平易近人的、生動活潑的也可以是專業(yè)嚴肅的。不管是色彩、技術、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網站獨有的，這就形成了網站的“風格”