高天棟 王鶴穎 王葉萍 李時(shí)穎

摘 要：本文主要描述“433”學(xué)生成長(zhǎng)平臺(tái)”的前端設(shè)計(jì)與開(kāi)發(fā)，重點(diǎn)探討從需求分析到頁(yè)面邏輯與網(wǎng)站業(yè)務(wù)邏輯的梳理，網(wǎng)站視覺(jué)表現(xiàn)，前端頁(yè)面的設(shè)計(jì)和實(shí)現(xiàn)過(guò)程。

關(guān)鍵詞：433;UI;設(shè)計(jì);前端技術(shù)

一、引言

"433"學(xué)生成才工程是蘇州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院助力學(xué)生成長(zhǎng)成才的系統(tǒng)工程。通過(guò)指導(dǎo)每位學(xué)生擔(dān)任1任干部、參加1個(gè)社團(tuán)、組織1次班級(jí)或?qū)W?；顒?dòng)、培養(yǎng)1項(xiàng)專業(yè)特長(zhǎng);為學(xué)生搭建鍛煉的平臺(tái)，全面提升個(gè)人素養(yǎng);指導(dǎo)學(xué)生結(jié)對(duì)1名技能導(dǎo)師，明確1個(gè)技能培養(yǎng)方向，參加1次技能比賽，培育學(xué)生核心技能;指導(dǎo)學(xué)生加入1個(gè)創(chuàng)新創(chuàng)業(yè)團(tuán)隊(duì)，完成1次創(chuàng)新創(chuàng)業(yè)實(shí)踐，取得1項(xiàng)創(chuàng)新創(chuàng)業(yè)成果，培育學(xué)生創(chuàng)新精神。

433”學(xué)生成長(zhǎng)平臺(tái)是服務(wù)于"433"學(xué)生成才工程的信息化平臺(tái)。本文主要介紹該平臺(tái)前端部分的設(shè)計(jì)與主要網(wǎng)頁(yè)的主要部分實(shí)現(xiàn)過(guò)程。

二、需求分析

網(wǎng)站正式開(kāi)發(fā)前，我們通過(guò)與學(xué)生工作各相關(guān)部門(mén)對(duì)接，明確需求，得到如圖1-1的需求分析。通過(guò)需求分析，明確整個(gè)433成長(zhǎng)成才信息平臺(tái)的基本構(gòu)成主要包括：形象展示頁(yè)、注冊(cè)登錄頁(yè)、網(wǎng)站首頁(yè)、成才典型頁(yè)，433心得體會(huì)頁(yè)，433活動(dòng)頁(yè)，成才護(hù)航頁(yè)。

三、視覺(jué)設(shè)計(jì)

網(wǎng)站功能結(jié)構(gòu)明確后進(jìn)行視覺(jué)設(shè)計(jì)，明確網(wǎng)站基本配色方案，logo，相關(guān)布局要素，制作相關(guān)素材，為前端開(kāi)發(fā)提供基礎(chǔ)物料。

由于網(wǎng)站主要服務(wù)于學(xué)生，主題風(fēng)格設(shè)定為活力清新，最終將網(wǎng)站主題色設(shè)定為活力橙，色值為#f47b04。

Logo作為網(wǎng)站的主要視覺(jué)標(biāo)識(shí)應(yīng)該是網(wǎng)站主題形象的符號(hào)化凝練，由于“433”這個(gè)原創(chuàng)概念很好的概括了成才系統(tǒng)工程的特征，數(shù)字元素本身也是很好的視覺(jué)設(shè)計(jì)元素，logo設(shè)計(jì)提取“433“字樣作為主要視覺(jué)元素，在整體扁平化的設(shè)計(jì)風(fēng)格基礎(chǔ)上，通過(guò)強(qiáng)調(diào)陰影和疊壓效果增強(qiáng)其視覺(jué)表現(xiàn)力。tab標(biāo)簽等元素等均保持統(tǒng)一的視覺(jué)風(fēng)格。

網(wǎng)站logo、主要tab標(biāo)簽、登錄表單的設(shè)計(jì)如下圖所示：

圖2-1為logo設(shè)計(jì)，將“433”字樣作為視覺(jué)元素，主題風(fēng)格為扁平風(fēng)格。通過(guò)強(qiáng)調(diào)陰影增強(qiáng)了視覺(jué)元素間的空間疊壓關(guān)系，增強(qiáng)了視覺(jué)趣味。

圖2-2為主要tab標(biāo)簽設(shè)計(jì)，設(shè)計(jì)沿用了主視覺(jué)元素增加標(biāo)簽的辨識(shí)度，同時(shí)增加主色調(diào)的明度在色彩上形成深淺兩個(gè)視覺(jué)層次。

圖2-3為登錄表單設(shè)計(jì)，為增強(qiáng)網(wǎng)站整體視覺(jué)的統(tǒng)一性和視覺(jué)表現(xiàn)的趣味性。表單登錄頁(yè)面將logo作為圖案進(jìn)行運(yùn)用。并將表單設(shè)計(jì)為卡片，用陰影進(jìn)行凸顯強(qiáng)調(diào)。

主導(dǎo)航設(shè)計(jì)

主導(dǎo)航為網(wǎng)站的訪問(wèn)提供了總?cè)肟?。同時(shí)也是最重要的視覺(jué)元素之一。

圖2-4為主導(dǎo)航設(shè)計(jì)。

主導(dǎo)航采用非常簡(jiǎn)潔的線性設(shè)計(jì)，導(dǎo)航條與logo一起組成了頁(yè)面布局的top部分。導(dǎo)航的點(diǎn)擊效果設(shè)計(jì)為帶有立體感的凹陷效果，與網(wǎng)站logo強(qiáng)調(diào)陰影的處理協(xié)調(diào)統(tǒng)一。

四、前端靜態(tài)開(kāi)發(fā)概述

完成前一階段的需求分析與網(wǎng)站功能設(shè)計(jì)、視覺(jué)設(shè)計(jì)部分的工作后，網(wǎng)站就進(jìn)入了具體開(kāi)發(fā)的階段。由于前端靜態(tài)開(kāi)發(fā)與數(shù)據(jù)庫(kù)，后臺(tái)管理等網(wǎng)站部分的開(kāi)發(fā)相對(duì)獨(dú)立。本文主要探討前端靜態(tài)開(kāi)發(fā)中的一些重要環(huán)節(jié)與技術(shù)要點(diǎn)。

1.網(wǎng)站頁(yè)面主要布局

網(wǎng)站主要頁(yè)面布局設(shè)計(jì)如圖3-1所示。

網(wǎng)站首頁(yè)是訪問(wèn)者獲得主要信息和形成對(duì)網(wǎng)站整體印象的關(guān)鍵頁(yè)面。首頁(yè)的導(dǎo)航欄集成了網(wǎng)站所有功能的訪問(wèn)鏈接。考慮到新聞和活動(dòng)是內(nèi)容最豐富，更新動(dòng)態(tài)最多的部分，所以作為首頁(yè)的主展示區(qū)。其他功能都獨(dú)立展示在其他頁(yè)面。

首頁(yè)的結(jié)構(gòu)非常簡(jiǎn)單，主要結(jié)構(gòu)構(gòu)成如下：

<img src="../images/icon.png" width="150px"/>

<ul class="fix"><li class="nall"></li>……

<li><a href="https：//www.szjm.edu.cn/" target="_blank">學(xué)院首頁(yè)</a></li></ul>

<form><input type="search"/></form>

新聞區(qū)和活動(dòng)區(qū)主要使用自定義列表dl：

<p class="sec1">新聞</p>

<dl class="xin"><dd></dd><dt class="news"><a href="#">MORE>>

></a></dt>

<dt>信息技術(shù)學(xué)院舉辦“翰墨書(shū)華章 丹青頌黨恩”書(shū)畫(huà)比賽</dt>

<dt>“逐夢(mèng)新時(shí)代 奮進(jìn)新征程”……

</dt></dl><p class="sec2">最新活動(dòng)</p><dl class="play"><dd><p class="move"></p></dd><dt>信息技術(shù)學(xué)院暑期志愿者招募……</dt></dl>

2.導(dǎo)航調(diào)的凹陷效果實(shí)現(xiàn)

導(dǎo)航條的凹陷效果主要采用的是hover偽類技術(shù)，設(shè)置方法如下：

.fix a：link，.fix a：visited{? color：#FFF; background-color：#F90; padding-top：6px; }

.fix a：hover{

color：#FFF; background-color：#F90; padding-top：6px;

box-shadow：0px 0px 20px 0px rgba（204，51，0，0.8） inset;

transition：box-shadow 1s linear; }

3.注冊(cè)登錄頁(yè)面開(kāi)發(fā)

注冊(cè)登錄頁(yè)面的主體是一個(gè)表單，基于盒子模型設(shè)計(jì)在卡片效果的塊狀元素上層。表單樣式主要設(shè)定卡片的陰影效果和表單組件的色彩與形狀：

form{ width：300px; height：300px; background-color：#FFF;border：1px #FFF solid; border-radius：10px; color：#CCC;

input[class^="bt"]{ width：56px;height：36px; border：#FFF 1px solid; background-color：#F90; border-radius：10px;color：#00C; font：normal bolder 12px/18px "微軟雅黑"; text-align：center;}

.zh{ background-color：rgba（255，153，0，0.2）; border：#FFF 1px solid; border-radius：5px; }

.mm{ background-color：rgba（255，153，0，0.2）;border：#FFF 1px solid; border-radius：5px; }

4.成才典型頁(yè)面與翻轉(zhuǎn)動(dòng)畫(huà)效果實(shí)現(xiàn)

成才典型頁(yè)面以翻轉(zhuǎn)立方體的展示方式展示成才典型的個(gè)人形象與主要成果。增強(qiáng)了視覺(jué)趣味性。當(dāng)鼠標(biāo)點(diǎn)擊圖片時(shí)，圖片會(huì)出現(xiàn)上下翻轉(zhuǎn)，翻轉(zhuǎn)效果使用了h5的動(dòng)畫(huà)技術(shù)。主要實(shí)現(xiàn)方法為將翻轉(zhuǎn)前翻轉(zhuǎn)后的圖片設(shè)置在一個(gè)div標(biāo)簽中，通過(guò)hover偽類控制顯示隱藏和移動(dòng)參數(shù)，關(guān)鍵設(shè)置如下：

.no1{background-color：rgba（0，102，204，0.4）;transform：rotateX（90deg） translateZ（130px）;? }

.no2{transform：translateZ（130px） translateX（0px）;}

.pic li：hover{transform：rotateX（-90deg）;}

5.成才體會(huì)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)：

為了增強(qiáng)文字部分在視覺(jué)效果上的整體感，在文字背后增加了一個(gè)淡藍(lán)的色塊，在色系上也形成了良好的近互補(bǔ)關(guān)系，平衡了橙色的跳躍感。

個(gè)人圖片展示鼠標(biāo)放上去時(shí)才會(huì)顯示清晰效果。增強(qiáng)了頁(yè)面的統(tǒng)一感和訪問(wèn)的趣味性。主要實(shí)現(xiàn)方法是通過(guò)鼠標(biāo)點(diǎn)擊時(shí)更改圖片不透明度的偽類設(shè)置實(shí)現(xiàn)該效果。

實(shí)現(xiàn)方法為：

dt.p1{background：url（../images/xz.jpg） no-repeat center;

background-size：cover;}

dt.p2{background：url（../images/xz2.jpg） no-repeat center;

background-size：contain;}

dt{ float：left;width：220px; height：220px; border-radius：50%;

background-color：#FC9; opacity：0.5; border：#F90 10px solid;

box-shadow：5px 5px 20px 0px #CCCCCC; margin-left：10px; margin-top：50px; }

dt：hover{opacity：0.8;}

五、結(jié)語(yǔ)

本文較為詳細(xì)的描述了網(wǎng)站從需求到視覺(jué)到具體的前端頁(yè)面的設(shè)計(jì)開(kāi)發(fā)過(guò)程和一些重要的前端技術(shù)實(shí)現(xiàn)。筆者認(rèn)為本項(xiàng)目具有一定的典型意義，可為同類項(xiàng)目提供一些參考與借鑒。

參考文獻(xiàn)：

[1] 陳鵬， 程勇.WAMP項(xiàng)目開(kāi)發(fā)實(shí)用案例[J].科學(xué)出版社，2017，（2）：33-48。

[2]曹劉陽(yáng).編寫(xiě)高質(zhì)量代碼：Web前端開(kāi)發(fā)修煉之道[M].北京：機(jī)械工業(yè)出版社，2010.

[3]劉春華.基于HTML5的移動(dòng)互聯(lián)網(wǎng)應(yīng)用發(fā)展趨勢(shì)[J].移動(dòng)通信，2013（09）：64-68.