“433”學生成長平臺前端設計與開發

高天棟 王鶴穎 王葉萍 李時穎

摘 要：本文主要描述“433”學生成長平臺”的前端設計與開發，重點探討從需求分析到頁面邏輯與網站業務邏輯的梳理，網站視覺表現，前端頁面的設計和實現過程。

關鍵詞：433;UI;設計;前端技術

一、引言

"433"學生成才工程是蘇州經貿職業技術學院助力學生成長成才的系統工程。通過指導每位學生擔任1任干部、參加1個社團、組織1次班級或學校活動、培養1項專業特長;為學生搭建鍛煉的平臺，全面提升個人素養;指導學生結對1名技能導師，明確1個技能培養方向，參加1次技能比賽，培育學生核心技能;指導學生加入1個創新創業團隊，完成1次創新創業實踐，取得1項創新創業成果，培育學生創新精神。

433”學生成長平臺是服務于"433"學生成才工程的信息化平臺。本文主要介紹該平臺前端部分的設計與主要網頁的主要部分實現過程。

二、需求分析

網站正式開發前，我們通過與學生工作各相關部門對接，明確需求，得到如圖1-1的需求分析。通過需求分析，明確整個433成長成才信息平臺的基本構成主要包括：形象展示頁、注冊登錄頁、網站首頁、成才典型頁，433心得體會頁，433活動頁，成才護航頁。

三、視覺設計

網站功能結構明確后進行視覺設計，明確網站基本配色方案，logo，相關布局要素，制作相關素材，為前端開發提供基礎物料。

由于網站主要服務于學生，主題風格設定為活力清新，最終將網站主題色設定為活力橙，色值為#f47b04。

Logo作為網站的主要視覺標識應該是網站主題形象的符號化凝練，由于“433”這個原創概念很好的概括了成才系統工程的特征，數字元素本身也是很好的視覺設計元素，logo設計提取“433“字樣作為主要視覺元素，在整體扁平化的設計風格基礎上，通過強調陰影和疊壓效果增強其視覺表現力。tab標簽等元素等均保持統一的視覺風格。

網站logo、主要tab標簽、登錄表單的設計如下圖所示：

圖2-1為logo設計，將“433”字樣作為視覺元素，主題風格為扁平風格。通過強調陰影增強了視覺元素間的空間疊壓關系，增強了視覺趣味。

圖2-2為主要tab標簽設計，設計沿用了主視覺元素增加標簽的辨識度，同時增加主色調的明度在色彩上形成深淺兩個視覺層次。

圖2-3為登錄表單設計，為增強網站整體視覺的統一性和視覺表現的趣味性。表單登錄頁面將logo作為圖案進行運用。并將表單設計為卡片，用陰影進行凸顯強調。

主導航設計

主導航為網站的訪問提供了總入口。同時也是最重要的視覺元素之一。

圖2-4為主導航設計。

主導航采用非常簡潔的線性設計，導航條與logo一起組成了頁面布局的top部分。導航的點擊效果設計為帶有立體感的凹陷效果，與網站logo強調陰影的處理協調統一。

四、前端靜態開發概述

完成前一階段的需求分析與網站功能設計、視覺設計部分的工作后，網站就進入了具體開發的階段。由于前端靜態開發與數據庫，后臺管理等網站部分的開發相對獨立。本文主要探討前端靜態開發中的一些重要環節與技術要點。

1.網站頁面主要布局

網站主要頁面布局設計如圖3-1所示。

網站首頁是訪問者獲得主要信息和形成對網站整體印象的關鍵頁面。首頁的導航欄集成了網站所有功能的訪問鏈接。考慮到新聞和活動是內容最豐富，更新動態最多的部分，所以作為首頁的主展示區。其他功能都獨立展示在其他頁面。

首頁的結構非常簡單，主要結構構成如下：

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

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

<li><a href="https：//www.szjm.edu.cn/" target="_blank">學院首頁</a></li></ul>

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

新聞區和活動區主要使用自定義列表dl：

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

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

></a></dt>

<dt>信息技術學院舉辦“翰墨書華章 丹青頌黨恩”書畫比賽</dt>

<dt>“逐夢新時代 奮進新征程”……

</dt></dl><p class="sec2">最新活動</p><dl class="play"><dd><p class="move"></p></dd><dt>信息技術學院暑期志愿者招募……</dt></dl>

2.導航調的凹陷效果實現

導航條的凹陷效果主要采用的是hover偽類技術，設置方法如下：

.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.注冊登錄頁面開發

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

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.成才典型頁面與翻轉動畫效果實現

成才典型頁面以翻轉立方體的展示方式展示成才典型的個人形象與主要成果。增強了視覺趣味性。當鼠標點擊圖片時，圖片會出現上下翻轉，翻轉效果使用了h5的動畫技術。主要實現方法為將翻轉前翻轉后的圖片設置在一個div標簽中，通過hover偽類控制顯示隱藏和移動參數，關鍵設置如下：

.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.成才體會頁面的設計與實現：

為了增強文字部分在視覺效果上的整體感，在文字背后增加了一個淡藍的色塊，在色系上也形成了良好的近互補關系，平衡了橙色的跳躍感。

個人圖片展示鼠標放上去時才會顯示清晰效果。增強了頁面的統一感和訪問的趣味性。主要實現方法是通過鼠標點擊時更改圖片不透明度的偽類設置實現該效果。

實現方法為：

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;}

五、結語

本文較為詳細的描述了網站從需求到視覺到具體的前端頁面的設計開發過程和一些重要的前端技術實現。筆者認為本項目具有一定的典型意義，可為同類項目提供一些參考與借鑒。

參考文獻：

[1] 陳鵬， 程勇.WAMP項目開發實用案例[J].科學出版社，2017，（2）：33-48。

[2]曹劉陽.編寫高質量代碼：Web前端開發修煉之道[M].北京：機械工業出版社，2010.

[3]劉春華.基于HTML5的移動互聯網應用發展趨勢[J].移動通信，2013（09）：64-68.