網(wǎng)易公開(kāi)課網(wǎng)頁(yè)設(shè)計(jì)制作一、實(shí)踐目的1.提高掌握設(shè)計(jì)過(guò)程的熟練程度,把握網(wǎng)頁(yè)設(shè)計(jì)的方法和思路,更好地將技術(shù)與藝術(shù)相結(jié)合。

2.將所學(xué)的基礎(chǔ)理論、專(zhuān)業(yè)知識(shí)和基本技能綜合運(yùn)用于實(shí)踐,提高實(shí)際能力和整體素質(zhì)。

3.深化課程內(nèi)容的掌握,將分散的知識(shí)點(diǎn)綜合性的運(yùn)用于一個(gè)整體的實(shí)例項(xiàng)目,培養(yǎng)綜合運(yùn)用和靈活運(yùn)用所學(xué)知識(shí)的能力。

4.強(qiáng)化網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用技能的練習(xí)。在所學(xué)內(nèi)容的基礎(chǔ),鼓勵(lì)創(chuàng)意的個(gè)性,培養(yǎng)創(chuàng)新意識(shí)。二、實(shí)踐內(nèi)容1、整體規(guī)劃（1）討論網(wǎng)頁(yè)主題。（2）進(jìn)行主頁(yè)設(shè)計(jì)。（3）布局設(shè)計(jì)。（4）畫(huà)面設(shè)計(jì)。（5）綜合優(yōu)化。（6）網(wǎng)頁(yè)測(cè)試。2、準(zhǔn)備工作（1）確定網(wǎng)頁(yè)主題（2）收集資料3、開(kāi)始制作三、實(shí)踐過(guò)程在實(shí)踐過(guò)程中，我們分解了目標(biāo)圖所需要的語(yǔ)法結(jié)構(gòu)，并按照不同的部分實(shí)現(xiàn)了其功能，最后通過(guò)調(diào)整和優(yōu)化，不斷接近目標(biāo)圖。四、實(shí)踐體會(huì)技術(shù)呈現(xiàn)指數(shù)型地蓬勃發(fā)展給我們?nèi)祟?lèi)世界帶來(lái)了無(wú)數(shù)的革命性進(jìn)步，不可不提的是我們處在即將到來(lái)的第三次網(wǎng)絡(luò)信息革命的浪潮之中，06年以來(lái)智能手機(jī)的第一次被蘋(píng)果公司像一件時(shí)尚單品一樣推向大眾的面前，10多年過(guò)去了，到如今的2019，加之中國(guó)5G技術(shù)的崛起，，電子設(shè)備無(wú)處不在，其內(nèi)容無(wú)所不包無(wú)所不有，信息網(wǎng)絡(luò)不再只是人們生活中不可或缺的一部分，智能手機(jī)、平板、手提電腦——它們已經(jīng)是新型人類(lèi)必不可少的一個(gè)“器官”，我們每天和自己信息采集器一塊學(xué)習(xí)生活，而尤其對(duì)于我們信息專(zhuān)業(yè)的學(xué)生來(lái)說(shuō)，不好好了解一下最了解自己的信息采集且就太說(shuō)不過(guò)去了。在實(shí)踐周的學(xué)習(xí)中，我們從網(wǎng)頁(yè)設(shè)計(jì)的角度出發(fā)，從極大豐富了我們生活的網(wǎng)頁(yè)的后臺(tái)入手——就是想貼近這些原來(lái)對(duì)我們而言既熟悉又陌生的“朋友”。老師在課上提到網(wǎng)頁(yè)對(duì)于我們來(lái)說(shuō)是什么，他上學(xué)的年代，它只是單一的文字和圖片的承載者，但對(duì)我們而言網(wǎng)頁(yè)是我們探索整個(gè)世界、與人交流、發(fā)現(xiàn)信息、傳遞信息、表達(dá)自己以及與人社交等的必備窗口。從Web1.0技術(shù)所只能實(shí)現(xiàn)的單向的信息傳遞到Web2.0技術(shù)帶給我們的文件之間的共享再到如今的Web3.0——它宣揚(yáng)“交互”，不單純是兩臺(tái)設(shè)備間的溝通交流而是使得全球數(shù)以億計(jì)的上網(wǎng)設(shè)備的互相連接成為可能。入今我們?cè)谡刉eb技術(shù)時(shí)我們?cè)谡勈裁?，我們?cè)谠O(shè)想一個(gè)不僅提供給極客技術(shù)人員的平臺(tái)，而是在設(shè)想一個(gè)所用用戶都能深度參與到他們?nèi)粘Ｉ钪械木W(wǎng)絡(luò)體驗(yàn)之中，這不僅從網(wǎng)絡(luò)的角度上豐富了它的信息維度，也同時(shí)直接或間接豐富促進(jìn)了我們?nèi)祟?lèi)社會(huì)的發(fā)展歷程。好在Web前端開(kāi)發(fā)的應(yīng)用入門(mén)真的不難，與別的服務(wù)器端語(yǔ)言，它容易上手，即使在最開(kāi)始學(xué)習(xí)的時(shí)候可能會(huì)被一大堆術(shù)語(yǔ)嚇倒，但隨著學(xué)習(xí)的深入，加之對(duì)應(yīng)用軟件的興趣被逐漸培養(yǎng)，我們的學(xué)習(xí)曲線只會(huì)呈現(xiàn)不斷向上的趨勢(shì)。過(guò)去，他們使用Photoshop和Dreamweaver來(lái)制作網(wǎng)頁(yè)，但隨著需要的開(kāi)發(fā)難度更大以及開(kāi)發(fā)方式更多樣，現(xiàn)在的網(wǎng)頁(yè)制作不再是專(zhuān)注前端而是接近類(lèi)似于網(wǎng)站后臺(tái)開(kāi)發(fā)，故不再稱(chēng)之為網(wǎng)頁(yè)制作，而成了Web前端開(kāi)發(fā)這一工種。產(chǎn)品開(kāi)發(fā)環(huán)節(jié)也使得Web前端的開(kāi)發(fā)技術(shù)得到越來(lái)越多的重視，需要專(zhuān)業(yè)的前端工程師做好工作。這方面的專(zhuān)業(yè)人士很受歡迎。Web前端開(kāi)發(fā)在這個(gè)層面上顯得極其特殊，因其需要的知識(shí)面非常廣博，還要求精準(zhǔn)的技術(shù)，和簡(jiǎn)潔的理念。一般來(lái)說(shuō)，它就是做好把網(wǎng)站的界面完美地呈現(xiàn)給用戶這一工作。如果我們同學(xué)希望要做一位到位地前端開(kāi)發(fā)工程師，掌握前端的各種技術(shù)肯定是不夠的，其它技術(shù)的掌握不僅是必要的而且越多越好，比如說(shuō)掌握一點(diǎn)后臺(tái)的技術(shù)，或者了解一些網(wǎng)站構(gòu)架都是可行的，如果還要更進(jìn)一步，可以學(xué)習(xí)SEO網(wǎng)站優(yōu)化技術(shù)，學(xué)到這些并運(yùn)用好才可以稱(chēng)自己為一名“優(yōu)秀的web前端開(kāi)發(fā)工程師”。當(dāng)然也不能局限于技術(shù)領(lǐng)域，我們要在更多方面沉淀自己。我相信大型企業(yè)都希望把資深的優(yōu)秀web前端開(kāi)發(fā)工程師搶到自己公司里去我聽(tīng)說(shuō)業(yè)內(nèi)人士說(shuō)過(guò)，現(xiàn)在的這個(gè)工種非常吃香，薪酬高待遇好而且奇怪的是它的需求是源源不斷地。所以再次總結(jié)一下如何才能做得更好呢？首先，掌握基本的Web前端開(kāi)發(fā)技術(shù)是必須的，比如說(shuō)：CSS、SEO、HTTL、Ajax、JavaScript、Hbuilder、SPSS等，掌握這些技術(shù)的同時(shí)，因?yàn)橐\(yùn)用到不同地瀏覽器上去所以還要看它們的兼容能力、渲染是否成功以及Bug的存在。其次，想要組成一名及格的前端工程師的知識(shí)架構(gòu)，必須掌握網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)。再其次，還得進(jìn)行輔助開(kāi)發(fā)，這又需要一些輔助工具的運(yùn)用。最后，理論層面的知識(shí)要有機(jī)的結(jié)合技術(shù)層面的知識(shí)，比如代碼可否維護(hù)、組件是否易用、分層語(yǔ)義模板的高低和瀏覽器分級(jí)支持是否允許等。雖然前端開(kāi)發(fā)涉及的知識(shí)面的范圍很廣泛，但一切要從小事做起——在實(shí)踐周的的頁(yè)面設(shè)計(jì)課程中，我們首先了解了網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)和信息架構(gòu)，然后學(xué)習(xí)到了HBuilder的應(yīng)用。在學(xué)習(xí)之外，我查閱了關(guān)于網(wǎng)頁(yè)制作的書(shū)籍和相關(guān)的知識(shí)信息，多學(xué)習(xí)到了一些關(guān)于建設(shè)網(wǎng)站和制作網(wǎng)頁(yè)的理論知識(shí)。網(wǎng)頁(yè)設(shè)計(jì)屬于視覺(jué)語(yǔ)言的范疇，它有著所有視覺(jué)語(yǔ)言都具備的的特征，其不同點(diǎn)在于網(wǎng)頁(yè)設(shè)計(jì)最講究的是它的編排和布局，加上網(wǎng)頁(yè)設(shè)計(jì)的基本特點(diǎn)也就是交互性，單是觀看網(wǎng)頁(yè)上的文字圖形的空間組合，也許就能給人帶來(lái)豐富的心里感受之美。而我學(xué)到關(guān)于網(wǎng)頁(yè)的視覺(jué)引導(dǎo)尤其有趣，其內(nèi)容主要是關(guān)于常常一些小的變換卻會(huì)由于人的心理因素等原因帶來(lái)不同的影響——（1）大小不同，事物的大小和被觀察的程度成正相關(guān)；（2）形狀不同，與眾不同和被觀察的程度成正相關(guān)；（3）顏色不同，從生物角度而言，大腦里的錐狀細(xì)胞負(fù)責(zé)感知光強(qiáng)光弱以及色變，而桿狀細(xì)胞能分別色的明暗程度；（4）空間不同，立體的東西會(huì)讓人更加過(guò)目不忘；（5）疏密不同，大腦會(huì)用批量處理的方法來(lái)過(guò)濾看到的事物，所以信息密度越大會(huì)引起更多的關(guān)注，兩個(gè)事物離得距離遠(yuǎn)，那么大腦會(huì)自動(dòng)判斷這些沒(méi)有聯(lián)系，也就是說(shuō)更多的關(guān)注其實(shí)會(huì)節(jié)約大腦資源。所以，Web前端工作者排版頁(yè)面布局時(shí)，不僅板塊與板塊之間的距離，元素與元素之間的排列也要合適，這樣才能對(duì)良好的閱讀效果和有效的對(duì)用戶的引導(dǎo)做出保障；（6）標(biāo)題不同，包裝過(guò)才更容易讓人注意到；（7）圖片不同，吸引眼球的圖片結(jié)合“勁爆”的標(biāo)題搭配效果更佳；（8）圖形元素不同，有暗示性的圖形比如說(shuō)上文提到的三維標(biāo)識(shí)更容易獲得矚目；（9）動(dòng)靜不同，動(dòng)態(tài)有時(shí)很占優(yōu)勢(shì)，比如說(shuō)瀑布流技術(shù)效果表示很賞心悅目，但其邏輯性較弱，所以有時(shí)候也要注意靜態(tài)技術(shù)的配合使用。（10）技術(shù)不同，F(xiàn)lash技術(shù)邏輯性很強(qiáng)，可惜下很難兼容所有的搜索引擎，要選用兼容性強(qiáng)的技術(shù)比如JQuery、Ajax頁(yè)面框架技術(shù)，它們不僅功能性強(qiáng)，而且貼近普通大眾，容易上手操作，是更加適合網(wǎng)頁(yè)前端設(shè)計(jì)的應(yīng)用。同時(shí)其實(shí)要看到各種技術(shù)應(yīng)用上的限制，比如說(shuō)經(jīng)常發(fā)生應(yīng)用之間的插件版本在不同瀏覽器上的各種不兼容，這是非常常見(jiàn)的，雖然在不同插件運(yùn)用間的切換會(huì)降低瀏覽器的效率，但最終還是為了給用戶呈現(xiàn)出最好的效果，是在所難免的。通過(guò)前述這些知識(shí)的學(xué)習(xí)，我對(duì)網(wǎng)頁(yè)前端的設(shè)計(jì)和后臺(tái)的程序了解得更為深厚，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)也有了更濃厚的興趣。。在實(shí)踐的過(guò)程中，我們小組選擇了網(wǎng)易公開(kāi)課的頁(yè)面設(shè)計(jì)來(lái)觀察學(xué)習(xí)，網(wǎng)易公開(kāi)課的界面風(fēng)格古樸文雅，與它所提供的課程內(nèi)容相輔相成——進(jìn)入網(wǎng)易公開(kāi)課后，首先會(huì)顯示“網(wǎng)易公開(kāi)課歡迎畫(huà)面”的推薦頁(yè)面。在頁(yè)面最上角會(huì)顯示推薦的課程名稱(chēng)，然后分門(mén)別類(lèi)地顯示開(kāi)課的學(xué)校和課時(shí)等，它的界面排列整齊，而在手機(jī)端用戶可以通過(guò)左右滑動(dòng)屏幕來(lái)瀏覽其它課程（我們暫時(shí)沒(méi)有涉及 到手機(jī)端的程序?qū)W習(xí)）。在觀察學(xué)習(xí)中，我們認(rèn)識(shí)到好的頁(yè)面設(shè)計(jì)才能傳遞其包含的內(nèi)容——網(wǎng)易公開(kāi)課有著哈佛、耶魯、牛津、劍橋等'全球名校視頻公開(kāi)課'豐富的內(nèi)容資源，而正是其結(jié)合穩(wěn)重的界面設(shè)計(jì)和人性化的操作，才能使得用戶真正實(shí)現(xiàn)與名校零距離接觸，無(wú)成本、無(wú)障礙地了解世界前沿的新知、新思。有了好的模范對(duì)象，我們先試圖提煉出像網(wǎng)易公開(kāi)課版面樣式此類(lèi)優(yōu)秀頁(yè)面設(shè)計(jì)的基本原則：（1）簡(jiǎn)潔實(shí)用是最非常重要的，網(wǎng)絡(luò)時(shí)代尤其到了現(xiàn)在的5G時(shí)代，用戶追求高效率，用戶所要想得到的信息傳送給他最迅捷的就是最好的，冗余的東西非去不可，不能為我們所容忍；（2）使用方便，使用者的要求要擺在第一位，網(wǎng)頁(yè)符合用戶的審美才是我們要慎重考慮的；（3）整體性強(qiáng)，網(wǎng)站作為一個(gè)整體，要對(duì)這個(gè)整體負(fù)責(zé)，基于這個(gè)整體對(duì)其添磚加瓦，由此之外增添的細(xì)節(jié)才能給我們工作額外加分，否則都只是畫(huà)蛇添足；（4）網(wǎng)站形象與眾不同，如果只是標(biāo)準(zhǔn)以下流于庸俗的網(wǎng)站，哪個(gè)初學(xué)者都可以模仿并做出來(lái)，一個(gè)卓越的頂尖的網(wǎng)站第一步就是其立意要，審美在走在庸俗文化的前面，才能不被流行文化所駕馭引領(lǐng)，才最終不會(huì)被用戶所拋棄，人人都追求雅俗共賞，但要把握好俗與雅之間的距離，搞清楚它們的主次要矛盾，這樣才不會(huì)產(chǎn)生沖突，反而會(huì)在俗與雅之間產(chǎn)生更加獨(dú)特的風(fēng)格；（5）最重要的是交互性強(qiáng)，讓用戶有一種強(qiáng)烈的參與感，即我們頁(yè)面設(shè)計(jì)師提供的布局等設(shè)計(jì)不僅僅是冰冷冷技術(shù)而能使得用戶產(chǎn)生共情，讓它們?cè)诘巧暇W(wǎng)頁(yè)的過(guò)程中產(chǎn)生一種自己主宰的玩家心態(tài)，而不是傻傻地簡(jiǎn)單地被技術(shù)人員所操控，交互在于共情，也才會(huì)產(chǎn)生更加強(qiáng)烈地用戶聯(lián)系，進(jìn)而用用戶的不斷反饋形成讓我們技術(shù)人員進(jìn)步的正循環(huán)。除此之外我們還總結(jié)了，具體到設(shè)計(jì)一個(gè)優(yōu)秀的頁(yè)面也要注意這些細(xì)節(jié)：（1）構(gòu)思，我們平時(shí)要多學(xué)習(xí)多瀏覽好的作品，來(lái)培養(yǎng)自己潛意識(shí)，所謂靈感其實(shí)都是日常的積累中生發(fā)出的一種特殊根據(jù)自己經(jīng)驗(yàn)的特殊排列組合，至于要特別關(guān)注的構(gòu)思，可以是好的頁(yè)面的版式或者色調(diào)或者任何讓人眼前一亮值得記錄下來(lái)的細(xì)節(jié)，而運(yùn)用自己記錄下來(lái)的靈感再對(duì)比具體的需要進(jìn)行取舍就能極大的提高我們構(gòu)思的效率；（2）草圖，設(shè)計(jì)師能文能武，不僅會(huì)碼字的技術(shù)也要像一個(gè)藝術(shù)家一樣，比如說(shuō)當(dāng)靈感呈現(xiàn)為一副具體的圖案的時(shí)候，一手好的手繪能力會(huì)極大地幫助我們實(shí)現(xiàn)自己靈感地初步加工，手繪或者再在電腦上繪圖，可以用Photoshop進(jìn)行詳細(xì)地反復(fù)更改；（3）色調(diào)，根據(jù)顏色心理學(xué)，人不同同時(shí)關(guān)注三個(gè)以上的顏色同時(shí)使用，尤其是多種顏色地色彩之間地強(qiáng)烈沖突還有可能給人額帶來(lái)眩暈惡心地感受，所以首先不要選擇過(guò)多的顏色運(yùn)用，如果需要強(qiáng)調(diào)的部分必須運(yùn)用的多種顏色加以分別，可以從同種色系中找到不強(qiáng)烈沖突的相近色，盡量讓用戶再觀看時(shí)舒服自然；（4）主題字設(shè)計(jì)，字體的設(shè)計(jì)往往是大家都忽略的東西，所以也是一個(gè)可以區(qū)別于其他網(wǎng)站的亮點(diǎn)之一，我們?？炊加⑽淖煮w有多種優(yōu)美的變形，比如說(shuō)喬布斯當(dāng)年就靠著自己對(duì)蘋(píng)果字體的堅(jiān)持區(qū)分開(kāi)了Mac與Microsoft的競(jìng)爭(zhēng)，咱們中文字體五千年文化歷經(jīng)多種文字優(yōu)美的變形，所以這方面的選擇比起英文字體的選擇其實(shí)更為豐厚，所以選擇我們網(wǎng)站獨(dú)特的字體絕對(duì)是用戶最為關(guān)注的點(diǎn)之所在。（5）素材運(yùn)用，素材不同于上文提到的靈感，靈感是對(duì)整體的抽象把握，而素材是我們可以扎扎實(shí)實(shí)記錄下來(lái)，抄在自己小本子上面，對(duì)它們進(jìn)行生動(dòng)詳細(xì)地模仿運(yùn)用怎么也不過(guò)分地材料，我素材地記錄一定要分門(mén)別類(lèi)，以后在運(yùn)用的時(shí)候才能盡快找出來(lái)，而選擇素材地標(biāo)準(zhǔn)每個(gè)人都不同，相同點(diǎn)都要以審美為出發(fā)點(diǎn)，其次一些細(xì)節(jié)可以是像素高，精度好，有創(chuàng)意或簡(jiǎn)潔。實(shí)踐的過(guò)程的細(xì)節(jié)就不再贅述了，在此我想提出的是，在實(shí)踐中最重要的一步是最后的修改——頁(yè)面完成后我們可以選擇找3個(gè)對(duì)象來(lái)驗(yàn)收：（1）對(duì)象一：自己。設(shè)計(jì)完基礎(chǔ)的頁(yè)面后首先要自我審視，查看到顯而易見(jiàn)的錯(cuò)誤，自己也會(huì)不舒服。自己永遠(yuǎn)是一切的出發(fā)點(diǎn)，雖然有些時(shí)候難免過(guò)于主觀，但對(duì)于程序原來(lái)說(shuō)，她的大量時(shí)間都在與自己獨(dú)處，并只能不斷地拷問(wèn)自己這樣到底行不行，這樣能修煉出自己對(duì)事物的敏感度。（2）對(duì)象二：產(chǎn)品經(jīng)理。（這是針對(duì)步入職場(chǎng)后的專(zhuān)業(yè)領(lǐng)域的負(fù)責(zé)對(duì)象，在我們小組內(nèi)屬于相互審視）產(chǎn)品經(jīng)理看的更多的是從產(chǎn)品的實(shí)用性、用戶的可接受度出發(fā)，是一個(gè)整體方面，而非細(xì)節(jié)，但有時(shí)產(chǎn)品經(jīng)理也會(huì)提出一些難以實(shí)現(xiàn)的內(nèi)容，到那種境況需要的是積極的溝通而不是消極的抵抗，多一個(gè)人的意見(jiàn)有時(shí)會(huì)讓人豁然開(kāi)朗，并找到更多的可能性；（3）對(duì)象三：普通網(wǎng)民。我們沒(méi)有像調(diào)查問(wèn)卷式的方法調(diào)查身邊的人對(duì)自己制作頁(yè)面的接受程度，但基于這個(gè)原理，我們小組成員找到身邊的朋友或家人，根據(jù)他們的直觀感受來(lái)評(píng)判這個(gè)網(wǎng)頁(yè)好不好用。最后我想說(shuō)的是，我們常常會(huì)在不斷重復(fù)的練習(xí)中感到疲憊和煩躁，但我們一定要堅(jiān)持下來(lái)。就像是當(dāng)我覺(jué)得頁(yè)面已經(jīng)完成時(shí)，一定可以再深入。因?yàn)橛行﹩?wèn)題不是一目可及，一遍兩遍三遍，無(wú)數(shù)遍地修改才會(huì)有最終版本地出現(xiàn)。大學(xué)生活成長(zhǎng)，要學(xué)會(huì)理論聯(lián)系實(shí)際，不斷實(shí)踐才能讓我們把基礎(chǔ)知識(shí)掌