1、精選優質文檔-傾情為你奉上薃 影視藝術技術學院學院葿畢業設計（論文）記錄簿薆 課題名稱 網頁設計 膃 學 號 羈 姓 名 潘倩玉 羋專 業 藝術設計（廣告創意） 蚆指導教師 _方茜_ 薄 作業期限 2014.12-2015.4 蚃芁妥善保管螆注意保密羅注 意 事 項膀1、與畢業設計（論文）有關的資料應記在記錄本上，不得另作私人記錄。肀2、畢業設計記錄本可以電子記錄，畢業設計結束時用A4紙打印存檔；或者直接打印模板手工記錄。袆3、記錄本不得遺失或外傳，萬一遺失時，應即報告處理。莆4、教研室認為個別較好的記錄本有參考價值時，可向院（系）建議，由院（系）資料室保管。袂5、有關記錄本的保管同接受單位的

2、具體規定有矛盾時，應由學校出面磋商解決。（1）（2） 袈 12月1日羆本次選擇的課題是網頁視覺呈現，在這之前從未接觸過這樣的課題，在年中去到了一家電商平臺實習，所以接觸到網頁設計這一塊的內容，剛開始有些出乎意料，畢竟學校并沒有針對這一塊的學習，所以心里還是很膽怯的，但是在領導的指導下，慢慢發現網頁設計這塊還是很有趣的，他所考慮的方面有很多，在ui上是否能夠第一時間表達其功能，在這方面需要做到不需要注解也可以直觀的表達其內涵，其次在整體布局上，因為我們公司是一個商城類的網站，所以在商品的成列，和購物之類按鈕的擺放上來說是需要推敲的，所以在這方便還需要下一番功夫，最后就是視覺的整體呈現還是不能脫離

3、公司本身的特色，包括顏色，在細節上是注重簡約還是復古，所以做網頁設計還是很有挑戰性的，我想這次的課題還是在非常有趣味的！（3）（4） 螆 12月5日芀第一稿的制作是基于之前的一稿設計，畢竟之前沒有做過，先拿一款試試手，做的是網站個人中心這一塊，內容很豐富，包括個人信息、購物過的產品、關注品牌、關注產品，在這里還要特別說明一下，我們公司網站還有設計師板塊，功能是能夠注冊設計師來上傳作品，就這些功能板塊，我基于之前的設計，把分類排在左側作為一個功能欄，方便用戶點擊進入相應的板塊，隨即進入右側內容信息的設計，在對網頁排版上，其實和其他排版從屬性上來說差不多，主要是要注意字的大小和行與行之間的間距問題

4、，具體我參考了很多別的網站，包括國內主要的一些有特色的網站，比如說良倉之類的，還有一些國外的網站，多數為日本的網站，因為至少在字形上與中文字類似，參考日文字還是可以說明一些問題的，而且日本的設計上非注重排版這個問題，個人表示很喜歡，也希望做到如此用心的設計。（5）（6） 袁 12月8日羆在考慮完字的大小時，我也問了公司一些做網頁前端人的經驗，畢竟在這方面他們看的比較多，正文的大小字體，英文字體的大小，而標題的正文大小，我希望做的到一點，這樣可以明顯的與下文區別開來，其次也加了英文的標題，因為中文的方塊字排在一起確實讓人有些疲倦，適時加些英文字來緩解一下氣氛，整體個人中心的設計還是屬于中規中矩，

5、主要是想把內容說清楚，雖然做了很多功能性設計，比方說個人經驗條設置在用戶頭像上形成環形旋轉來表示大小之類的，可是事實前端和后臺對于這一塊的實現還是比較難的，所以在網頁設計這一塊不光是要好看，還是要考慮能不能實現這個問題，不然的話就是在白做功夫。（7）（8） 羃 12月12日肂今天最大的收獲是了解了平面排版的整個流程，并熟悉了平面排版的軟件。其實無論是畫冊設計還是報紙排版或是廣告設計，ps的圖片功能都是無比強大的，在做版頭、報眉、刊頭的時候都會用到ps。所以無論如何ps的所有功能我都必須非常熟悉，這樣在做效果時就會很輕松。要把平面設計里的一些設計構思與板式設計結合在一起，這是我實習的最大目的。畢

6、竟我是學平面設計的光是一個小小的排版難不倒我，而真正使報紙具有可觀賞價值才是我應該思考和學習的。我看過許多城市的報紙，廣州、上海、重慶的都做得不錯，有許多東西都可以借鑒，包括網頁設計中許多的構圖都是可以參考的。總之設計就是再構思、組合的一個過程。可以有一些自己設計的版面出版。這樣也為我以后打下一點基礎。（9）（10） 蝕 1月15日肅在設計完個人中心以后，接著是一些網站細節的完善和改進，比如說產品的遮照的設計，上面需要表現包括產品的名稱、價格，還需要在上面添加立即購物和加入購物車這兩個功能，其實也就是一塊小的排版設計，但是等設計出來才會發現問題的所在，在做網站的過程中有幾次有幸到了外包公司一同

7、完成網站，這才發現一些問題在實際實現的時候才會出現問題，比如說產品名稱如果超出一行十個字的適量后會發生什么，產品價格高的時候是否是居中排列之類的，所以在設計的時候需要把這些狀況下的設計都做出來，所以總被領導說做設計的時候缺乏考慮，這一點我還要不斷的改進！所以之后我考慮了各種狀況，做出來各種狀況下他該出現的表現到底是怎樣的，這樣一來也方便的網頁前端人的實現。（11）（12） 莄 1月19日螄在做完一些網站基本頁面的設計以后，其實整個網站還是一個空著的軀殼，里面內容信息都還是沒有的，包括主題banner、廣告位banner、產品詳情頁等等，之前也未涉及過這一方面的設計，又是一些新的東西出現，不過感

8、覺上都是一樣的，做廣告banner圖的時候主要是要考慮產品和文字信息的擺放時候舒服，類似淘寶，但是內心還是很不喜歡淘寶的風格，太粗暴，所以還是喜歡在高格調中展現產品吧，我想主要還是不要讓顏色太豐富，同時風格也不要太山寨，在這里還是要多借鑒一下國外的設計，其次畢竟是公司的產品，還是要帶公司特色的，母公司的風格就是高格調，奢華品質感，這些都要一并表現在banner圖上，因為用戶在進入網站以后第一眼就會看見的是大大的廣告位，所以說廣告位的作用可想而知。（13）（14） 荿 1月22日膅第一版的網頁設計終于達到了尾聲，雖然我只做了一小部分的工作，但是收獲還是很大的，花了1個月時間瘋狂地在瀏覽世界各地的

9、網站，以前沒學過的現在學，沒什么事是一下子就會的，雖然個人領悟力比較低，但是一旦領悟了，還是比較無敵的，言歸正傳，在第一版設計完工后，整體感覺還是中規中矩的，因為這一版也是基于最初版的網頁框架來的，所以難免會在設計風格的把握上有所限制，不過還算是一個好的開始，在完成設計后，網站還需要測試，在幾輪測試之后，發現有很多bug包括用戶體驗上，缺少反應動畫或者信息，問題還是比較多的，考慮的還是太少，這些坑還是要快速填掉，畢竟網站已經上線，被用戶發現就不好了。（15）（16） 螅 1月26日膂在完成第一版的設計和實現過后，有一段時間沒有碰過網站，有些時候設計如果遇到了瓶頸，你就需要先放一放，回過頭再來看

10、，再來看第一版的網頁，總是覺得有些太過與平凡，不知道是看多了眼睛麻木了，總覺得好像是提不起興趣，缺少了一些購買的欲望或者是缺少了一些趣味，我們也是一家設計公司，網站做的如此平凡總覺得不應該，所以我的領導和大家思考是否要重新再來一版，在統一意見后，我們便開始著手開始了新一版的設計，這次的網頁可是從頭再來開始做了，內心還是有些小激動的，雖然可能還是一知半解，但是還是很有信心做這一次的設計。（17）（18） 膈 1月29日芅第二版的設計風格我們希望完全顛覆原有的一頁式，變化為一屏式，也就是完整的一份內容呈現在一個屏幕的大小的內容里，然后滑動滾輪后會類似于播放ppt一樣的滑動到下一板，這個我們也有參考

11、國外的網站，小米也做過類似的手機詳情頁，這樣的呈現方式有一點好處，板塊很好區分，一個板塊在一屏里，像我們網頁，第一版放banner類似內容為一屏，第二版放我們四大接口，左右滑動，第三版放商城，同樣的左右滑動，聽上去確實是很酷炫，和我們創意公司的形象也挺符合，其次我們將網頁頂部關于包括logo、用戶登錄、用戶信息、板塊分類、其他信息這些東西濃縮到一行菜單欄上，也就去掉了繁復的頭部，然他出現的更簡單方便，而且一直出現在頂部，也就更方便用戶使用。（19）（20） 膆 2月2日羄在VI色的選擇上我們拋棄原有沉悶的深藍色，因為本身考慮到希望吸引更多的設計師用戶，而現在的側重點則是商城，所以說一個網站的用

12、戶群體的定位是很重要的，不同的用戶群體，我們需要帶給他們的用戶體驗式完全不一樣的，所以我們決定選擇比較跳躍的嫩綠色作為VI色，首選是因為我們所授權的產品是漫威迪士尼，那么就可以將用戶定義為四大用戶群體，首先是喜愛動漫的acg、其次是白領、再者是有小孩用戶，還有就是有合作意向的企業用戶，那這四大用戶除了企業用戶，大多是是年輕人，所以我們希望我們整體的網站朝著一個年輕的方向走，所以很多東西都需要往年輕人的思考方式走。（21）（22） 膁 2月5日蒞這版新的網站需要思考的問題真的很多，用戶在體驗上會否不知所措，畢竟是一種新的體驗么，那么我們是否要加新手指南，但是一個好的網站就是無需說明就能讓用戶一下

13、了解，也就是沒有讓用戶學習的成本，要知道現在的人對于要學習一樣新的事物還是比較心累的，何況是一個網站，上網本身就是放松，一上來這個網站也不知道在說什么，也不知道怎么操作，確實是會流失用戶，可是我們這一屏為界定的網站，要做用戶指南也有些困難，因為每夜的內容不盡相同，想一下子將所有問題在第一屏里就展現完整確實是有些困難，所以大家開始討論要怎么呈現才比較好，后來想想用新手指南就類似于第一版剛開始彈出半透明上面寫信息，這種方式不好，所以還是摒棄了這種想法，或許第一屏上不光放banner再加一個按鈕或許是好方法，至少人們不用翻到第二頁才可以接觸到我們所有的板塊入口。（23）（24） 芃 2月9日莂第二版

14、的網頁設計基本快完成了，內容包括，首頁的四屏、上方菜單欄、設計師頁面，在這里特別強調了設計師頁面，畢竟還是希望考慮到設計師這一大塊，我們希望每個設計師都有像自己主頁一樣的頁面，所以在設計上要和別的頁面區別，所以這一版面為一頁式，在最上方放著設計師自己設定的圖像，然后再圖片底部有設計師名稱、職業、自述，同樣也有普通用戶可以參與的分享按鈕、點贊按鈕和關注按鈕，接下去就是設計師個人作品，在這里選擇錯位放，希望和別的有所不一樣，文字說明疊在圖片之上，還要考慮到圖片的顏色來選取一個綜合一點的字體顏色，或者在文字的底部寸上一個顏色之類的方式，主要還是想展現設計師的特別性。（25）（26） 羀 2月12日蒅

15、第二版的設計并沒有付至于實際，首先呢是從做一個網站的風險太大，畢竟和第一版的模式差太多，其次我們這邊也缺IT人員來幫助實現，所以這一稿暫時更淺了，不過沒關系，來日方長，這次可以說是一次練習，不能說是坐著玩的，其實都之后的設計都有一定的幫助，做設計也不會一接到手就開始做，做之前一定要想清楚，要做事， 想怎么表現，以何種方表現，這些都很重要，其實具體操作起來的時間要比思考的時間要遠遠少的多，所以做設計不是靠手，靠的是鬧，當然能熟練操作軟件當然是事半功倍的事，但主要還是要靠你的idea取勝，不然就不叫設計師，叫美工。（27）（28） 蚄 2月16日肅今天就最平淡了，沒什么大事做。太無聊了，就自己找點

16、事做。我自己找了點事情做。就是PS潮流復古的彩色插畫效果，首先在Photoshop中新建個大小為1440x900像素的文檔。然后把圖片移入文檔。運行圖層>圖層樣式>顏色疊加。混合模式采用柔光，顏色為棕色(#8b5c01)。接著，我們將創建個畫筆來制作些圖形。選擇矩形選框工具，制作個黑色矩形。然后運行編輯>變換路徑>斜切。接著，運行圖層，右擊圖層縮略圖，按下選擇像素。然后運行編輯>定義畫筆預設，創建個筆刷，重 命名為PSDTUTS。然后運行畫筆調板，然后編輯我們剛創建的PSDTUTS筆刷。新建一個圖層，并且運行圖層>圖層樣式。我們在此圖層中應用些樣式。我們將應

17、用漸變，疊加，投影，內陰影。接著選擇筆刷工具(B)，多點擊兒次來創建些形狀。選擇我們已經創建的所有兒何圖形，運行圖層>合并圖層。接著運行編輯>變換>旋轉。現在運行編輯>變換>變形。接著移動網格來創建波浪的形狀。我的構思是讓這些線條繞著腿前后穿插。這樣就增加了立體的效果。運用多邊形套索工具(L)，來創建個你想要放在前而的腿的形狀的選區。選擇兒何圖形圖層，運行圖層>圖層蒙版>隱藏選區。在圖形圖層的上方新建個圖層，點擊右鍵，然后選擇創建剪貼蒙版。然后，選擇畫筆工具(B)，設置筆刷的硬度，顏色為白色。我們將為這個兒何圖形圖層增加高光。點擊圖像中開始的點，然后按

18、住shift，再點擊結束的點。這樣就用畫筆創建了條直線。混合模式依舊是正常，透明度改為60%。重復上而步驟，但是這次是使用黑色，運用在另個位置，改變不透明度為40%。在所有圖層的上方新建個圖層。填充為白色。然后運行濾鏡>雜色>增加雜色。設置數量為4%。接著改變圖層的混合模式為正片疊底。把另張圖片移到雜色圖層的下面。然后調整圖像的大小，改變混合模式為正片疊底。最后在Photoshop中最有用的功能之是畫筆調板。我們可以用它來創造很多不同的效果，你也可以運用圓角矩形或不同的形狀。來制作出很多有趣的效果。太無聊了，便把細節都記下來了。（29）（30） 蝿 2月19日蝿很快迎來了第三版的網

19、頁設計，想想也是艱難，第三版了，不過比起包裝來說，真是小巫見大巫，第三版是基于第一版的基礎上改版，結合了第二版的設計，這樣一來在有把握的情況下還可以帶點創新，感覺還是不錯的，而且現在有了IT人員的幫忙，想做什么和他解釋一下能夠實現或者不能夠實現的問題還是比較好解決的，況且我也不是前端人員，有些表現的形式還是要詢問過他們的，現在算是萬事俱備只欠東風，靠我快速出稿便可以實現，想想責任還是很大的，一路走來，成長的過程是幸苦的，但是收獲頗多。（31）（32） 肄 2月20日薁首先調查了國內的同類型網站的視覺設計，包括良倉、暖島、有貨等以商城為主的電商平臺，良倉和有貨在頁面風格和產品風格都比較統一，相比

20、之下暖島和我們比較類似，貨品的顏色和種類比較雜，但暖島在頁面設計上并不出彩，所以還是希望盡可能的分板塊將種類劃分，避免產品和整體頁面跳脫。螁其次在國外的網頁視覺特效上也學習了很多，國外以商城為主的網站主要是產品大圖的呈現，簡單干凈，而且相比國內網站一大張網頁的成列方式，國外的網站會以一屏為界限，將上下翻頁之間做特效，用戶體驗上會有很大不同，因為考慮到一般的用戶體驗，一屏方式呈現還有待思考。（33）（34） 衿 2月23日蒅第三版的設計首先又改了VI色，VI色確實是一直在糾結的東西，不過這一次感覺還ok，我們選擇了綠松石，一個中性的顏色，帶著年輕和時尚感，我個人比較喜歡，輔助色也確定了選用之前的

21、天藍色、淡紫色、淡藍色，這些顏色搭配在一起讓整個網頁都有一種簡單年輕的感覺，其實主要是想襯托一下產品，其次將原有的頂部菜單欄、登陸和其他信息綜合到頂部，以一條懸浮菜單代替，這個是沿用了第二版的設計，所以說第二版的設計還是有存在的意義的，主要是方便用戶使用，同時也希望能夠做到簡約，同樣的將本來信息量大的底部也做了信息的統一和規整。網站整體為一頁式，當然還是不想拋棄一屏的呈現方式，所以我們將把他用到我們活動詳情頁中去，吸引用戶參與活動（35）（36） 芃 2月26日薀首頁的內容講規整到第一位廣告位banner圖，其次是即時更新的設享雜志，接下來是網站整體的重要的三大板塊，可以方便用戶直接快捷的進入

22、自己想去的頻道，比起原先的網頁設定來的更加直接明了，接下去就是三大板塊的內容展開，以大圖的方式陳列產品，讓用戶對產品有直觀的感受，這對首次來網站的用戶有吸引、引導和說明的作用。這樣的改動大大改善了之前首頁分類雜亂的特質，縮短了頁面長度，視覺呈現比之前更好了。首頁是一個網站的門面，所以做好首頁至關重要，一個好的首頁可以吸引用戶進一步有興趣了解更深一步的內容，也可以展現這個公司的形象面貌。（37）（38） 罿 2月30日袆網站商城是一個總主要的板塊，在頁面呈現上首先是希望以大、美的圖片和產品吸引用戶，所以產品大多以一種成列的方式，且在之前有設置品牌選擇的位置，主要是想方便用戶直接選擇自己想要的品牌產品，商城中也有四大板塊，這四大板塊的產品類型各不相同，所以無法做到像糧倉一樣批量成列的方式，所以我們做了有序的歸類，并且為止設置了標題和頭圖，這樣一來，知道在版式規格中有了一定的統一，盡量以一屏的大小展示一大類的產品。點擊進入產品詳情頁中，同樣以大圖的方式展示產品，在右