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