網(wǎng)頁設(shè)計中國成白血病患者社區(qū)

中國成年白血病患者社區(qū)設(shè)計報告金木火團隊成員：20周煒38吳曼娜時間：12月27號金木火團隊制作第一項目簡介第二網(wǎng)站構(gòu)思第三Logo及廣告設(shè)計第四網(wǎng)站設(shè)計CONTENTS目錄第五總結(jié)項目簡介

尊敬的各位評委、老師、同學們，大家好！我們是金木火團隊，由13級電子商務(wù)一班20號周煒，38號吳曼娜組成。此次應網(wǎng)頁設(shè)計的課程要求，我們團隊設(shè)計一個網(wǎng)站，命名為：中國成年白血病患者社區(qū)。此ppt將會為大家詳細的講解我們團隊項目的從選題到網(wǎng)站構(gòu)思然后到具體設(shè)計的情況，以及說明了項目沒有解決的問題。也希望各位能夠發(fā)現(xiàn)問題并積極給我們提出改進意見！當然我們也會共同進步！返回第一參考網(wǎng)站第二與同類網(wǎng)站相比第三制作緣由CONTENTS網(wǎng)站構(gòu)思愛心家園（版面參考）4.輸入文字信息醫(yī)享網(wǎng)（內(nèi)容參考）1.輸入文字信息2.輸入文字信息3.輸入文字信息4.輸入文字信息參考網(wǎng)站網(wǎng)址：/index.php返回與同類網(wǎng)站比較白血病病友會/baixuebing白血病病友會全國成年白血病患者社區(qū)互動性強界面簡潔功能較少信息較全面布局較合理界面載入較慢與同類網(wǎng)站比較首頁參考微博形式，互動簡單方便，界面簡潔首頁板塊較多，以資訊為主，有助于訪客了解網(wǎng)站各個板塊的功能返回制作緣由

十萬分之六……據(jù)統(tǒng)計，我國白血病的發(fā)病率在十萬分之六左右。九分鐘!每9分鐘，就有一個人因白血病死亡!我國已有400萬白血病患者，并以每年5至6萬人的速度增加，而其中一半以上是少年兒童，但是與兒童白血病明顯不同的是，成人白血病惡性度較高，治療難度較大，絕大多數(shù)都需要造血干細胞移植，僅少數(shù)患者化療即可。接下來讓我們看看白血病的救助機構(gòu)救助要求：制作緣由部分基金會的申請條件：中國紅十字基金會資助對象：家庭貧困，年齡在0-18周歲患有白血病的青少年兒童；北京新陽光慈善基金會：接受16歲以下貧困白血病患兒監(jiān)護人的申請；神華愛心基金：資助對象為各地民政部門認可的城鄉(xiāng)低保家庭或低收入家庭的0-14歲的患病兒童；遼寧省紅十字少兒白血病救助基金：0至14周歲患有白血病且家庭經(jīng)濟貧困、具有遼寧省戶籍的兒童、青少年；天津紅十字會少兒白血病專項救助基金：凡不滿16周歲（截至結(jié)算年度1月1日未滿16周歲）患有白血病等相關(guān)血液疾病具有本市戶籍的未成年人；青島市紅十字會微塵少兒白血病專項救助基金：年齡在18周歲以內(nèi)(包括18周歲)。而這些基金會都有一個共性：僅救助未成年人。但是，龐大的白血病群體中有將近50%的人是18歲以上的成年人，這些成年人得不到救助，家庭所承受的經(jīng)濟負擔甚至比患者為兒童的家庭壓力更大，所以他們只能互相鼓勵，尋求其他的方法頑強的活下去，這個社區(qū)的意義便在于此：為這些白血病患者提供一個互助的地方，在互相交流的同時為他們提供相關(guān)的一些白血病的資訊。所以，這個社區(qū)是具有公益性、非營利性的網(wǎng)站，如果這個網(wǎng)站能帶給一個白血病患者一點點慰藉，那么這就是它意義所在。返回第一Logo設(shè)計第二宣傳廣告設(shè)計CONTENTSLOGO及廣告設(shè)計logo設(shè)計構(gòu)思過程logo展示制作所用工具含義logo設(shè)計logo展示制作工具1.photoshop軟件2.中文藝術(shù)字在線生成3.英文藝術(shù)字在線生成logo設(shè)計構(gòu)思過程因為我們小組選的是有關(guān)白血病的帶有公益色彩的網(wǎng)站，所以我們首先想到是這個logo一定要有桃心。（1）（3）第三步也是最重要的一步：桃心，中英文字進行組合，使我們的logo看起來更加美觀。在經(jīng)過多次嘗試后，最終3人商量敲定選用這個logo（3）

（2）作為湖南財政經(jīng)濟學院的一員，我們在設(shè)計的第二步參照了本校的logo，添加了我們網(wǎng)站名字及英文翻譯（2）構(gòu)思過程含義(1)桃心有兩層含義：一層代表著患病的病人依舊對生命的熱愛之心，依舊對生活充滿渴望之心；而另一層含義則代表著社會其他各界人生對患者的關(guān)懷之心（1）（3）我們網(wǎng)站的名字是在紅心之內(nèi)的，這個設(shè)計為我們希望我們這個網(wǎng)站能夠充滿著愛心，關(guān)心.......（3）（2）中英對照代表著在白血病的關(guān)心與被關(guān)心這方面是不分國界的。（2）logo含義廣告設(shè)計構(gòu)思過程效果圖展示制作所用工具含義宣傳廣告設(shè)計廣告圖展示制作工具1.photoshop軟件2.中文藝術(shù)字在線生成3.英文藝術(shù)字在線生成宣傳廣告設(shè)計含義(1)采取紅色背景：一方面紅色象征著活力，另一方面白血病是一種血液病，所以紅色是鮮血的顏色。（1）（3）飛翔的愛心：畫面中大量的愛心象征著社會的關(guān)愛與鼓勵，一定會戰(zhàn)勝病魔（3）（2）口號:唯有愛讓感動常在。作為患者，最需要的就是愛。（2）宣傳廣告含義第一設(shè)計構(gòu)思第二具體界面第三問題小結(jié)CONTENTS網(wǎng)站設(shè)計設(shè)計構(gòu)思總的想法：

總共做一個首頁，兩個二級界面，兩個三級界面，采取div的布局方式，每個頁面設(shè)置一個最大的DIV，設(shè)置它的寬度，然后頁面分為上中下三個部分，分別用一個DIV來控制，上端部分是放導航圖和導航條，中間部分是主體部分，下端部分為底部。在DIV中繼續(xù)細分，在排版的時候，利用了margin來調(diào)整div的位置。設(shè)計構(gòu)思1.設(shè)置界面?zhèn)€數(shù)以及對應關(guān)系

界面設(shè)計總共有五個界面，一級界面為首頁，二級界面為社區(qū)和病友中心，三級界面為注冊和照片墻。其中，首頁、社區(qū)、病友中心、注冊這四個界面都可以依賴導航而進行跳轉(zhuǎn)，而照片墻只能由病友中心來進行跳轉(zhuǎn)。站點鏈接結(jié)構(gòu)圖如下：設(shè)計構(gòu)思2.思維導圖

在設(shè)計好了做哪幾個界面之后，再明確一下每個頁面的具體功能與模塊。具體界面1.首頁頁面<divid="home">頂部<divid="top">頂部圖片、文字導航條主體<divid="main">左邊熱門圖片中間熱門文章病例庫活動中心相關(guān)鏈接右邊活動熱線關(guān)于我們知識庫點亮愛心底部<divid=“bottom”>結(jié)構(gòu)圖具體網(wǎng)頁效果圖：本頁功能：1.幻燈片自動放映；2.活動中心自動滾動圖片；3.點亮愛心加油具體網(wǎng)頁與axure原型比較：具體界面2.社區(qū)頁面<divid="home">頂部頂部圖片、文字導航條主體帖子搜索帖子文章發(fā)表文章底部結(jié)構(gòu)圖具體網(wǎng)頁效果圖：本頁功能：1.通過分類查看帖子2.發(fā)表新帖子具體界面2.病友中心頁面<divid="home">頂部頂部圖片、文字導航條主體左邊病友會活動病友作品征集公益捐助公益活動活動留言右邊搜索熱門推薦就診醫(yī)院曬照區(qū)成員墻底部結(jié)構(gòu)圖具體網(wǎng)頁效果圖：本頁功能：1.搜索關(guān)鍵詞高亮；2.發(fā)表留言；3.曬照區(qū)點擊換一批具體界面2.照片墻頁面<divid="home">頂部頂部圖片、文字導航條主體愛心墻列表墻（默認隱藏）底部結(jié)構(gòu)圖具體網(wǎng)頁效果圖：本頁功能：1.選擇照片排列方式2.心型墻鼠標懸停放大圖片；3.列表墻可以翻頁具體界面2.注冊頁面<divid="home">頂部頂部圖片、文字導航條主體注冊界面底部結(jié)構(gòu)圖具體網(wǎng)頁效果圖：本頁功能：1.條件注冊2.隨機顯示驗證碼3.換驗證碼問題小結(jié)布局問題：沒有使用分割線，導致網(wǎng)站看上去不太好看比較凌亂。（1）JS問題：在社區(qū)模塊沒有實現(xiàn)可以重復發(fā)表，分類顯示也比較失?。?）

外觀問題：外觀顯得不是很好看，可能是顏色搭配不當或者是沒有很好布局（2）問題小結(jié)

總的來說：由于技術(shù)水平有限，很多功能無法實現(xiàn)，又由于時間限制沒有找到解決的方案，整個網(wǎng)站和我最開始所想的有很大是的出入（4）總結(jié)

為了完成這份作業(yè)，前前后后可能花一個月左右的時間，我們組應該是班上最早開始做這份作業(yè)的，因為一開始的確是想盡力做一份讓自己滿意也不辜負老師期望的作品。我們付出了大量的心血，在一開始進行原型展示的時候就說，我們想做的是一個真正的網(wǎng)站，一個可以使用的網(wǎng)站，但是這句話到了現(xiàn)在顯得比較無力，我們的才華暫時還支撐不起我們的理想，但是做這個網(wǎng)站真的是讓我們茶飯不思，甚至是失眠，因為自己的某個想法可以將之前的全部推翻重做，因為不想將它作為一個簡單的期末作業(yè)而