實(shí)習(xí)內(nèi)容重慶工程職業(yè)技術(shù)學(xué)院“第十五屆學(xué)生運(yùn)動(dòng)會(huì)”網(wǎng)站設(shè)計(jì)3.1制作設(shè)計(jì)項(xiàng)目分析要求：（1）網(wǎng)站內(nèi)容設(shè)計(jì)與素材收集：根據(jù)指定的網(wǎng)站設(shè)計(jì)主題（“第十五屆學(xué)生運(yùn)動(dòng)會(huì)”），設(shè)計(jì)網(wǎng)站策劃案。包括風(fēng)格設(shè)定、顏色設(shè)計(jì)、欄目設(shè)計(jì)、功能設(shè)計(jì)、內(nèi)容設(shè)計(jì)等。并使用原型設(shè)計(jì)軟件制作低保真原型。收集整理設(shè)計(jì)素材，包括文字、圖片、圖標(biāo)等基本元素。（2）設(shè)計(jì)與繪制網(wǎng)站首頁效果圖：根據(jù)網(wǎng)站策劃案和低保真原型，使用PhotoShop設(shè)計(jì)與繪制網(wǎng)站首頁效果圖。3.2制作設(shè)計(jì)項(xiàng)目記錄3.2.1設(shè)計(jì)思路（1）怎么設(shè)計(jì)的？首先確定此次網(wǎng)站的主題（重慶工程職業(yè)技術(shù)學(xué)院“第十五屆學(xué)生運(yùn)動(dòng)會(huì)”網(wǎng)站），然后在頭腦里構(gòu)思，在首頁上要放哪些內(nèi)容，用筆在白紙上畫出大致草圖，然后用原型設(shè)計(jì)軟件（AxureRP）設(shè)計(jì)制作出該網(wǎng)頁的低保真原型。（2）怎么分析的？a.布局設(shè)計(jì)：整體按照上中下的布局結(jié)構(gòu)，首頁、內(nèi)容、底部。內(nèi)容首先是用的一屏大圖來吸引大家的注意力，然后接著是運(yùn)動(dòng)會(huì)的通知公告、新聞和視頻專區(qū)居于整個(gè)頁面的正中，（在網(wǎng)頁里顯示出來就是在第一屏的下部分位置），其中的小地方也有細(xì)節(jié)設(shè)計(jì)。b.字體設(shè)計(jì)：整個(gè)頁面只有主題中用了“方正舒體”字體，并且做了一些小設(shè)計(jì)，白色字體外加了黑色投影、外發(fā)光和半透明的暗紅色描邊；其余字體均為微軟雅黑字體。c.內(nèi)容搭配：運(yùn)用了文字、圖片、圖文搭配的方式。d.顏色搭配：在網(wǎng)頁設(shè)計(jì)當(dāng)中，“色彩”永遠(yuǎn)是最重要的一個(gè)環(huán)節(jié)，紅色，吸引人的眼線，也讓人感覺有活力、有激情，所以，我的導(dǎo)航欄用的是紅色，主圖上面也是鮮艷的紅色。主色調(diào)是白色，輔助色運(yùn)用了灰色，過渡色運(yùn)用了灰白色，鮮紅色、暗紅色、橙紅色為亮點(diǎn)色，字體主要用了黑色和灰色。（3）主要收集了哪些材料，看了哪些網(wǎng)站：1.第一屆青年運(yùn)動(dòng)會(huì)2.第十三屆運(yùn)動(dòng)會(huì)網(wǎng)站3.新浪運(yùn)動(dòng)網(wǎng)站4.第六屆東亞運(yùn)動(dòng)會(huì)5.天津東亞運(yùn)動(dòng)會(huì)6.第二十一屆山東省運(yùn)動(dòng)會(huì)7.中國體操網(wǎng)8.奧林匹克運(yùn)動(dòng)9.全國電子競(jìng)技運(yùn)動(dòng)會(huì)10.第三屆亞洲沙灘運(yùn)動(dòng)11.湖南省第十一屆大學(xué)生運(yùn)動(dòng)會(huì)12.長沙趣味運(yùn)動(dòng)會(huì)13.河南省第十七屆大學(xué)生運(yùn)動(dòng)會(huì)14.湖北省第十四屆運(yùn)動(dòng)會(huì)15.長沙第六屆亞洲冬季運(yùn)動(dòng)會(huì)16.昆明市第五屆運(yùn)動(dòng)會(huì)17.福州趣味運(yùn)動(dòng)會(huì)18.2021北京奧運(yùn)會(huì)19.【天貓魔盒】雙11頁面電子商務(wù)商城20.美麗星辰網(wǎng)站設(shè)計(jì)21.蝦米音樂H5專題頁面設(shè)計(jì)合輯22.運(yùn)動(dòng)藍(lán)牙耳機(jī)設(shè)計(jì)23.中國體操網(wǎng)_體操運(yùn)動(dòng)管理中心官方網(wǎng)站24.哇噻網(wǎng)全球優(yōu)質(zhì)設(shè)計(jì)師純手工制作產(chǎn)品購物網(wǎng)站25.爆米兔-H5微信移動(dòng)營銷創(chuàng)意平臺(tái)26.重慶工程職業(yè)技術(shù)學(xué)院官方門戶網(wǎng)站-國家示范性高等職業(yè)院校27.中國運(yùn)動(dòng)網(wǎng)28.中國定向運(yùn)動(dòng)協(xié)會(huì)29．中國健身網(wǎng)30.運(yùn)動(dòng)健身網(wǎng)3.2.2設(shè)計(jì)運(yùn)動(dòng)會(huì)網(wǎng)站低保真圖首先，我在實(shí)習(xí)的第一天，先按照實(shí)習(xí)的主題（重慶工程職業(yè)技術(shù)學(xué)院“第十五屆學(xué)生運(yùn)動(dòng)會(huì)”），使用原型設(shè)計(jì)軟件（AxureRP）設(shè)計(jì)制作出該網(wǎng)頁的低保真原型。我是設(shè)計(jì)的屏幕自適應(yīng)網(wǎng)頁，分為上中下三個(gè)部分：首頁導(dǎo)航欄、中間內(nèi)容、底部；整個(gè)網(wǎng)頁寬1280px，高2220px。圖3-1運(yùn)動(dòng)會(huì)網(wǎng)頁框架設(shè)計(jì)效果圖3.2.3布局設(shè)計(jì)：整體按照上中下的布局結(jié)構(gòu)，首頁、內(nèi)容、底部。內(nèi)容首先是用的一屏大圖來吸引大家的注意力，然后接著是運(yùn)動(dòng)會(huì)的通知公告、新聞和視頻專區(qū)居于整個(gè)頁面的正中，（在網(wǎng)頁里顯示出來就是在第一屏的下部分位置），其中的小地方也有細(xì)節(jié)設(shè)計(jì)。(1)首頁導(dǎo)航欄設(shè)計(jì)的很簡(jiǎn)單，LOGO和主要內(nèi)容，紅底白字。圖3-2首頁導(dǎo)航欄設(shè)計(jì)效果圖(2)大圖上有本次網(wǎng)頁設(shè)計(jì)的主題，整個(gè)頁面只有主題中用了“方正舒體”字體，并且做了一些小設(shè)計(jì)，白色字體外加了黑色投影、外發(fā)光和半透明的暗紅色描邊；為了突出主題將大圖做了模糊處理，由于要讓整個(gè)頁面的顏色搭配，就沒有用其他的顏色，只在主題的周圍用紅色描邊。圖3-3主題部分設(shè)計(jì)效果圖（3）此處內(nèi)容從整體來看，是處在最佳視覺領(lǐng)域，中上部分位置，圖中的通知公告和新聞，鼠標(biāo)點(diǎn)擊二者任何一個(gè)字體變紅色，并且字的下面出現(xiàn)一個(gè)小紅三角形圖標(biāo)指向下面的內(nèi)容。視頻專區(qū)部分，也是讓人一目了然。圖3-4內(nèi)容部分設(shè)計(jì)效果圖（4）此處仍然為內(nèi)容部分，可以從不同視角來看，可以看成左右結(jié)構(gòu)，也可以看成上下結(jié)構(gòu)，其中也有文字、圖片、圖文混合解釋的部分，適當(dāng)?shù)牧舭祝m當(dāng)?shù)呐渖?，主?dǎo)色、輔助色、過渡色、亮色結(jié)合起來有些地方可以的不規(guī)整，看起來不會(huì)那么死板。效果如下圖3-5所示：圖3-5內(nèi)容部分設(shè)計(jì)效果圖（5）底部設(shè)計(jì)，就簡(jiǎn)單的填充了灰色。與上文的灰白色銜接，整體看來不會(huì)感覺顏色很跳，讓人能夠適應(yīng)顏色的過渡。圖3-6底部設(shè)計(jì)效果圖（6）此次網(wǎng)頁設(shè)計(jì)的整體效果圖，如下圖3-7所示：圖3-7運(yùn)動(dòng)會(huì)網(wǎng)頁設(shè)計(jì)效果圖3.2.3.主體部分的細(xì)節(jié)在于：在網(wǎng)頁的設(shè)計(jì)與制作過程中，首先要考慮屏幕的自適應(yīng)性情況，然后考慮內(nèi)容的排版，才開始設(shè)計(jì)要放上去的是哪些東西。然后在設(shè)計(jì)的過程中，最重要的是要注意頁面里的細(xì)節(jié)問題：1.字體要協(xié)調(diào)統(tǒng)一。2.字號(hào)大小要一致。3.頁面里的小圖標(biāo)或者自己畫的小圖標(biāo)，要小巧精致。4.要注意整個(gè)版面的配色要協(xié)調(diào)。5.注意整個(gè)版面的走向，不要頭輕腳重。6.當(dāng)整個(gè)頁面已經(jīng)基本完成后，再看看其內(nèi)容和版面設(shè)計(jì)看起來是不是大方美觀，否則，再做調(diào)整。3.3整個(gè)學(xué)期的四次作業(yè)1．重慶能源職業(yè)技術(shù)學(xué)院網(wǎng)頁圖，主體顏色為綠色，并且用了白色作為輔助色、灰色為過渡色，高1885px，寬1550px，效果如圖3-3-1所示：圖3-3-1能源職業(yè)技術(shù)學(xué)院網(wǎng)頁設(shè)計(jì)效果圖2．工作室網(wǎng)頁圖：分別分為四個(gè)頁面，主要是采用黑色為背景，首頁圖、聯(lián)系人、關(guān)于我們、產(chǎn)品介紹四個(gè)頁面。每頁都有工作室的LOGO，工作室網(wǎng)頁，簡(jiǎn)單大方，主要是細(xì)節(jié)部分和寫代碼階段做出來的交互效果。（1）工作室首頁設(shè)計(jì)圖：黑色為背景，藍(lán)色、白色、橙色，不規(guī)整的圖片切割和圖片組合，長768px,寬1440px，還有細(xì)節(jié)設(shè)計(jì)處設(shè)計(jì)的交互效果，如：鼠標(biāo)點(diǎn)擊上導(dǎo)航欄時(shí)，顏色由亮橙色變?yōu)樯晕⒏档某壬⑶易煮w加粗，字體下面的橙色線條由左邊快速劃到中間，LOGO設(shè)計(jì)是由藍(lán)色、灰白色和橙黃色設(shè)計(jì)而成。效果如圖3-3-2所示：圖3-3-2工作室首頁設(shè)計(jì)效果（2）聯(lián)系我們：由于首頁的背景是黑色，所以子頁面也是按照首頁來，頂部和底部用的都是黑色，中間用的是亮灰色，這樣可以稍微突出一下中間的內(nèi)容，中間內(nèi)容的設(shè)計(jì)也是極其簡(jiǎn)單的，右邊是主題，然后根據(jù)一條線條的引導(dǎo)，右邊是關(guān)于我們的聯(lián)系方式和地址。效果如圖3-3-3所示：圖3-3-3工作室子頁設(shè)計(jì)效果圖（3）關(guān)于我們：主要是我們工作室的成員介紹及他們的個(gè)人簡(jiǎn)歷及各方面的聯(lián)系資料，鼠標(biāo)點(diǎn)擊翻閱的是一些個(gè)人照和成員的集體照。效果如圖3-3-4所示：圖3-3-4工作室子頁設(shè)計(jì)效果圖（4）產(chǎn)品介紹：介紹我們工作室的主要制作的東西，主要研究的方向，和一些精品內(nèi)容，簡(jiǎn)單大方，背景同樣為黑灰色。效果如圖3-3-5所示：圖3-3-5工作室子頁設(shè)計(jì)效果圖3．個(gè)人網(wǎng)站：自定義一個(gè)主題（我的是“愛美食”），然后確定內(nèi)容版式，找素材，開始畫圖、排版。整個(gè)頁面長3600px，寬1920px，屏幕自適應(yīng)性，白色為背景，用了許多美食的圖片，首先第一頁就是一個(gè)整版的大圖，然后有很多小圖標(biāo)，配合在整個(gè)頁面中，添加了一些小細(xì)節(jié)，比如導(dǎo)航欄處鼠標(biāo)點(diǎn)擊上去，那一個(gè)塊變成藍(lán)色，并且會(huì)有一個(gè)藍(lán)色的小三角形指向下面，其中有幾塊灰色，給整個(gè)版面醒目一點(diǎn)的感覺，黑白灰搭配。整個(gè)版面的圖片和文字搭配的內(nèi)容，有大有小，有規(guī)整和不規(guī)矩的搭配，整個(gè)頁面看起來讓人視覺有波動(dòng)，有亮點(diǎn)。內(nèi)容圖與文字也搭配得比較合適。效果如圖3-3-6所示：4.網(wǎng)站：長3600px，寬940px，整個(gè)頁面是以白色為背景，為了突出字體，又有橙色和粉紅色，與橙色LOGO相呼應(yīng)。頁面左邊以一條橙色線條貫穿整個(gè)頁面，效果如圖3-3-7、3-3-8所示：圖3-3-7圖3-3-84.實(shí)習(xí)總結(jié)通過本次的實(shí)訓(xùn)，在老師的指導(dǎo)下，我不僅在知識(shí)上有了很大的提升而且在心得上也是收獲頗多。本次實(shí)訓(xùn)的目的主要是檢驗(yàn)我們?cè)谄匠W(xué)習(xí)中所學(xué)知識(shí)、將上課所學(xué)的理論知識(shí)在實(shí)踐中鞏固掌握，以及進(jìn)一步熟悉和掌握網(wǎng)頁設(shè)計(jì)與網(wǎng)頁制作的基本流程?；仡欉@次實(shí)訓(xùn)經(jīng)歷，至今我仍感慨頗多，的確，從構(gòu)思到開始制作，從理論到實(shí)踐，5天實(shí)訓(xùn)的日子里，可以說得是苦多于甜，但是可以學(xué)到很多很多的的東西，同時(shí)不僅可以鞏固了以前所學(xué)過的知識(shí)，而且學(xué)到了很多在書本上所沒有學(xué)到過的知識(shí)。通過這次實(shí)訓(xùn)使我懂得了理論與實(shí)際相結(jié)合是很重要的，只有理論知識(shí)是遠(yuǎn)遠(yuǎn)不夠的，只有把所學(xué)的理論知識(shí)與實(shí)踐相結(jié)合起來，從理論中得出結(jié)論，才能真正為掌握技術(shù)，從而提高自己的實(shí)際動(dòng)手能力和獨(dú)立思考的能力。在設(shè)計(jì)的過程中遇到問題，可以說得是困難重重，這畢竟是第一次獨(dú)自制作網(wǎng)頁，書上也沒有現(xiàn)成的可以抄，難免會(huì)遇到各種各樣的問題，同時(shí)在設(shè)計(jì)的過程中發(fā)現(xiàn)了自己的不足之處，對(duì)以前所學(xué)過的知識(shí)理解得不夠深刻，掌握得不夠牢固，比如說，對(duì)PS軟件的使用就不夠熟悉，導(dǎo)致在做的過程中，浪費(fèi)了很多時(shí)間，通過這次網(wǎng)頁設(shè)計(jì)與制作實(shí)訓(xùn)，一定把以前所學(xué)過的知識(shí)重新溫故。此次實(shí)訓(xùn)中我發(fā)現(xiàn)了在網(wǎng)頁設(shè)計(jì)與制作的過程中存在許多的細(xì)節(jié)問題，也從中學(xué)到了很多以前不曾注意的細(xì)節(jié)知識(shí)。關(guān)鍵是從自己?jiǎn)为?dú)制作網(wǎng)頁的過程中，培養(yǎng)了自己主動(dòng)學(xué)習(xí)、敢干動(dòng)手與自己發(fā)現(xiàn)問題、解決問題的能力，這為以后進(jìn)一步的學(xué)習(xí)網(wǎng)頁制作與網(wǎng)站開發(fā)打下了一個(gè)良好的基礎(chǔ)。明白在網(wǎng)頁設(shè)計(jì)中布局、版式、色彩搭配、整體都很重要，還要重點(diǎn)培養(yǎng)自己的設(shè)計(jì)感，理清自己的設(shè)計(jì)思路，所以，后面的時(shí)間就要多看相關(guān)設(shè)計(jì)方面的書籍，版式設(shè)計(jì)、設(shè)計(jì)史原理，色彩搭配等