截止到2019年12月11日，2019年“厚溥杯”Web前端UI設(shè)計(jì)大賽校區(qū)海選均已經(jīng)落下帷幕。經(jīng)過一個(gè)多月的準(zhǔn)備，陜郵、咸職校區(qū)總共篩選出17組比較優(yōu)秀的作品參加決賽線上投票環(huán)節(jié)。
  校區(qū)賽精彩瞬間
  PART 1陜郵校區(qū)
  2019/12/11 ajor Winter
  2019年12月5日，陜郵校區(qū)開展了激烈的校區(qū)海選賽，經(jīng)過近4個(gè)小時(shí)的真槍實(shí)彈，最終從17組參賽作品中選出7組作品?，F(xiàn)場時(shí)而溫馨動(dòng)人，時(shí)而激情四射：
  陜郵晉級作品名單如下：
  一生一世禮品定制網(wǎng)站；
  完美游戲活動(dòng)頁面；
  先鋒使者游戲官網(wǎng)；
  數(shù)碼精靈；
  尚蕓閣花店；
  益心巴士公益；
  保衛(wèi)地球；
  PART 2咸職校區(qū)
  2019/12/11 ajor Winter
  2019年12月10日，咸職校區(qū)開展了激烈的校區(qū)海選賽，經(jīng)過近4個(gè)小時(shí)的唇槍舌戰(zhàn)，最終從17組參賽作品中有10組作品脫穎而出。作品精彩瞬間如下：
  咸職晉級作品名單如下：
  創(chuàng)世科技;
  愛YOU;
  緣夢科技;
  木蘭新妝;
  禮尚網(wǎng)來;
  Sov；
  人與人；
  校園二手交易網(wǎng)；
  閑“植”；
  助農(nóng)維樂;
  晉級作品簡介
  NO.1一生一世禮品定制
  作品簡介：★★★★★
  一生一世禮品定制網(wǎng)站采用div+css布局，js、Bootstrap動(dòng)態(tài)效果實(shí)現(xiàn)。整個(gè)網(wǎng)站整體以簡潔、圖文結(jié)合的形式來介紹產(chǎn)品。網(wǎng)站的暖色調(diào)展現(xiàn)了溫馨的場面。導(dǎo)航欄和模態(tài)窗體都能方便用戶快速選擇。當(dāng)用戶點(diǎn)擊圖片時(shí)彈出模態(tài)窗體能夠了解更多的詳細(xì)介紹。頁面跳轉(zhuǎn)流暢，減少用戶等待的時(shí)間，整個(gè)網(wǎng)站的方便快捷使用戶可以有極致的購物體驗(yàn)。
  NO.2完美游戲活動(dòng)頁面
  項(xiàng)目簡介：★★★★★
  完美游戲活動(dòng)網(wǎng)站采使用了div+css布局和css動(dòng)畫效果實(shí)現(xiàn)。網(wǎng)站圖文醒目，文字規(guī)劃整潔統(tǒng)一，每個(gè)頁面色彩風(fēng)格各有所異，給人一種視覺上的沖擊感。頁面的動(dòng)態(tài)背景和宣傳視頻，還有通過JavaScript實(shí)現(xiàn)的英雄的3D效果，都可以吸引玩家讓玩家能更直觀的了解游戲。整個(gè)網(wǎng)站本著操作便捷效果炫酷，給玩家留下深刻印象的理念來進(jìn)行設(shè)計(jì)，促進(jìn)玩家的消費(fèi)和瀏覽量。
  NO.3先鋒使者游戲官網(wǎng)
  項(xiàng)目簡介：★★★★★
  先鋒使者游戲官網(wǎng)采用div+css布局和javaScrip、Bootstrap動(dòng)畫實(shí)現(xiàn)。整個(gè)網(wǎng)站整體網(wǎng)頁風(fēng)格統(tǒng)一，色彩以暖色調(diào)為主，內(nèi)置眾多功能，網(wǎng)站兼容性強(qiáng)。每個(gè)頁面有多種指引操作，可以快速了解全面的信息。頁面導(dǎo)航，使用戶在網(wǎng)頁遨游時(shí)不再迷茫，點(diǎn)擊喜歡的游戲角色，可以在彈出的模態(tài)窗體中購買對應(yīng)的。整個(gè)網(wǎng)站設(shè)計(jì)簡潔但不簡單，可以用更少的時(shí)間，有更多的視覺沖擊，更好的感官體驗(yàn)。
  NO.4數(shù)碼精靈
  項(xiàng)目簡介：★★★★★
  數(shù)碼精靈網(wǎng)站采用div+css布局，和javaScript動(dòng)畫實(shí)現(xiàn)，整個(gè)網(wǎng)站改變了傳統(tǒng)的扁平化上下布局，使得頁面簡潔醒目。網(wǎng)站中實(shí)現(xiàn)了鼠標(biāo)懸停到圖片上圖片文字及背景改變效果，圖片輪播等效果，還實(shí)現(xiàn)了鼠標(biāo)懸停以3d效果瀏覽產(chǎn)品，給人以逼真的視覺感。點(diǎn)擊圖片還可以近距離360度查看買家秀。側(cè)邊導(dǎo)航欄，舍棄了多數(shù)網(wǎng)站都在用的倫播圖使用了點(diǎn)擊動(dòng)畫，給用戶帶來不一樣的視覺感等等。
  NO.5尚蕓閣花店
  項(xiàng)目簡介：★★★★★
  本次項(xiàng)目使用div+css+js的布局方式，風(fēng)格統(tǒng)一為粉色系，界面以花圖為主文字為輔，使得瀏覽更加便捷，活動(dòng)頁面使用了輪播圖，讓活動(dòng)更加直觀。網(wǎng)站頁面設(shè)計(jì)從瀏覽、預(yù)定、購買、送貨上門依次導(dǎo)航展示提升了用戶的可操作性。整個(gè)項(xiàng)目價(jià)值在于能為想買花但是沒時(shí)間去花店的人提供便利，方便操作。
  NO.6益心巴士公益
  項(xiàng)目簡介：★★★★★
  本次項(xiàng)目采用了主流的上中下的布局方式，直觀的展示了項(xiàng)目想要表達(dá)的主題，整個(gè)項(xiàng)目采用白色的主題，風(fēng)格統(tǒng)一。網(wǎng)站內(nèi)設(shè)計(jì)有參加公益的引導(dǎo)頁面和操作流程，給用戶更好的體驗(yàn)。項(xiàng)目的理念是為一些想做公益又無從下手的人提供了一個(gè)快捷的方式，讓公益近在咫尺。
  NO.7保衛(wèi)地球
  項(xiàng)目簡介：★★★★★
  本項(xiàng)目采用HTML+CSS3+BootStrap完成，整體設(shè)計(jì)黑白色為主色，風(fēng)格簡約，通過透明度的搭配進(jìn)行調(diào)節(jié)，使其更加個(gè)性及具有吸引力，且瀏覽操作更方便。通過圖文并茂，使整體呈現(xiàn)豐富的表現(xiàn)形式。本次作品是以綠色環(huán)保為主題，把變廢為寶的綠色觀念融入日常生活，通過回收利用周邊廢棄物品，使其變廢為寶，提供給需要的人。在提倡綠色、低碳、環(huán)保生活方式的同時(shí)呼吁人們保護(hù)環(huán)境，從小事做起，為人類提供更好的生活環(huán)境，讓我們美麗的家園不再遭受污染。
  NO.8創(chuàng)世科技
  項(xiàng)目簡介：★★★★★
  電子支付已經(jīng)改變了人們對于支付的行為習(xí)慣，而我們要做的是“改變?nèi)藗兇蛴螒蛉ゾW(wǎng)吧、看電影去影院的方式”，因此設(shè)計(jì)出“創(chuàng)世科技”網(wǎng)站。該網(wǎng)站設(shè)計(jì)采用HTML+CSS+JS+jQuery。界面設(shè)計(jì)簡潔、直觀，色彩的搭配極具匠心，藍(lán)白色的相互結(jié)合，打破了傳統(tǒng)網(wǎng)頁商品售賣的形式，網(wǎng)頁中文字、圖形、圖片排版，不僅觀感上獨(dú)具一格，還給用戶帶來了十足的操作感。頁面流暢性和界面引導(dǎo)讓用戶快速了解我們的產(chǎn)品，并引起對我們的好奇心。
  NO.9愛YOU
  項(xiàng)目簡介：★★★★★
  本網(wǎng)站以旅游為主題，整體顏色多彩而絢麗，符合人們對旅游的五彩斑斕的向往，本網(wǎng)站因需要美觀而選擇使用HTML3的5D動(dòng)畫來制作旅游經(jīng)典靚照，通過Bootstrap以及JS來美化整體網(wǎng)頁，完成輪播圖，以及注冊頁面的創(chuàng)建。
  NO.10緣夢科技
  項(xiàng)目簡介：★★★★★
  科技改變未來，讓“另一個(gè)自己”為你解決所有問題（克隆一個(gè)和你一模一樣的機(jī)器人）。我們網(wǎng)站設(shè)計(jì)在整體布局上偏向簡約、清晰、直觀，把用戶體驗(yàn)做到極致。項(xiàng)目采用HTML+CSS+boostrap+JS+jQuery共同完成，頁面上每一個(gè)操作邏輯和界面引導(dǎo)都是讓用戶直接和我們交互一樣，bannner圖位置的設(shè)計(jì)和頁面中間位置的跳轉(zhuǎn)，都是我們給用戶極致體驗(yàn)的表現(xiàn)。
  NO.11木蘭新妝
  項(xiàng)目簡介：★★★★★
  本項(xiàng)目采用HTML+CSS+JS+jQuery完成，紅色為主色，給人簡約大方之美。符合bannner設(shè)計(jì)流程。項(xiàng)目整體采用上中下布局，中部為左右結(jié)構(gòu)，項(xiàng)目的版式，色彩，圖片，字體，段落，細(xì)節(jié)等各個(gè)地方都做了詳細(xì)精致的制作。界面的結(jié)構(gòu)清晰且一致，風(fēng)格與產(chǎn)品內(nèi)容相一致。亮點(diǎn)在于解決大家化妝穿衣搭配問題，通過本項(xiàng)目可以打造一個(gè)優(yōu)秀自信的你。
  NO.12禮尚網(wǎng)來
  項(xiàng)目簡介：★★★★★
  本項(xiàng)目采用HTML+CSS+JS+jQuery完成，紫色為主色。本項(xiàng)目經(jīng)歷了從需求>策劃>原型圖>設(shè)計(jì)圖>制作>上線，每個(gè)環(huán)節(jié)做過精心設(shè)計(jì)。項(xiàng)目整體采用上中下布局，中部為左右結(jié)構(gòu)，給人溫馨之美。將復(fù)雜的操作功能通過交互設(shè)計(jì)簡化，讓操作更直觀易用，并且提升與用戶之間的互動(dòng)性。亮點(diǎn)在于解決交往過程中送禮的困擾，花最少的錢，以最快捷的方式，選擇最稱心如意的禮物。
  NO.13 Sov
  項(xiàng)目簡介：★★★★★
  本項(xiàng)目采用HTML+CSS+jQuery完成，整個(gè)網(wǎng)站建設(shè)風(fēng)格以簡約為主，遵循現(xiàn)代年輕人所喜愛的機(jī)械風(fēng)格，以黑白為主導(dǎo)色，界面設(shè)計(jì)方面，本網(wǎng)站作為現(xiàn)代年輕人流行網(wǎng)站，多以圖片為主，除了一些論壇性頁面外，大部分以圖片作為宣導(dǎo)，配以文字講解，全站文字與圖片密切結(jié)合，其中七成圖片三成文字的布局占比，幫助用戶提高瀏覽體驗(yàn)。
  NO.14人與人
  項(xiàng)目簡介：★★★★★
  本網(wǎng)站采用Bootstrap+HTML+CSS+JS共同開發(fā)完成、首頁的I Have和I Need明了的闡述了網(wǎng)站人與人的中心思想。
  I Have：我有什么、我所能提供的幫助。I Need:需要什么、想要?jiǎng)e人幫我什么。人與人：拉進(jìn)每個(gè)人的距離、滿足人們內(nèi)心的快樂。
  NO.15校園二手交易網(wǎng)
  項(xiàng)目簡介：★★★★★
  本網(wǎng)站整體采用淺色調(diào)，總體布局遵循各大主流網(wǎng)站的上中下，中間板塊采用左中右結(jié)構(gòu)，響應(yīng)式設(shè)計(jì)，采用bootstrap柵格系統(tǒng)，實(shí)現(xiàn)移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列，增強(qiáng)用戶交互性，使用Carousel，實(shí)現(xiàn)輪播圖，簡潔優(yōu)美，使用jQuery實(shí)現(xiàn)商品三維立體展示。給人以簡約清新之美，優(yōu)雅中夾帶個(gè)性，符合校園年輕用戶審美觀。
  NO.16閑“植
  項(xiàng)目簡介：★★★★★
  本網(wǎng)站采用技術(shù)HTML+CSS+bootstrap+JS+jQuery共同完成，本網(wǎng)站圖片方便多以樹林，天空為主，意在保護(hù)我們的環(huán)境。網(wǎng)站首頁使用到了POP布局和三字型布局，線上植樹頁面和新聞動(dòng)態(tài)頁面使用了T型布局，文字與圖形占比基本為1：1，配色多一藍(lán)色和綠色為主。
  NO.17助農(nóng)維樂
  項(xiàng)目簡介：★★★★★

  本項(xiàng)目采用HTML+CSS+JS+jQuery完成。綠色為主色，項(xiàng)目采用上中下布局，中部為左右結(jié)構(gòu)，比較清新，給人以大自然之美。在進(jìn)行UI設(shè)計(jì)時(shí)需要充分考慮布局的合理化問題，遵循用戶從上而下，自左向右瀏覽、操作習(xí)慣，避免常用業(yè)務(wù)功能按鍵排列過于分散。農(nóng)產(chǎn)品滯銷，而快節(jié)奏的都市人經(jīng)常工作繁忙，很難吃到新鮮的有機(jī)蔬菜等。這個(gè)平臺有效的解決這個(gè)矛盾。亮點(diǎn)在于配送及時(shí)到家，而且產(chǎn)品全是綠色有機(jī)農(nóng)產(chǎn)品。懂你所需，解你所憂。

作品詳見（復(fù)制以下鏈接進(jìn)瀏覽器查看）：

http://travel.enorth.com.cn/system/2019/12/06/037840680.shtml