網(wǎng)站平臺(tái)的風(fēng)格和樣式設(shè)計(jì)

曹艷琴

摘 要：在培訓(xùn)學(xué)院學(xué)習(xí)時(shí)，為參與一個(gè)網(wǎng)站平臺(tái)項(xiàng)目開(kāi)發(fā)而撰寫的，主要從平臺(tái)定位、整體風(fēng)格、平臺(tái)內(nèi)容、網(wǎng)頁(yè)布局圖4個(gè)方面對(duì)網(wǎng)站項(xiàng)目進(jìn)行規(guī)劃分析。并告訴大家一個(gè)項(xiàng)目在網(wǎng)站設(shè)計(jì)前，沒(méi)有做好充分的設(shè)計(jì)規(guī)劃準(zhǔn)備工作，不但會(huì)嚴(yán)重?fù)p壞企業(yè)形象，而且不便于網(wǎng)絡(luò)運(yùn)營(yíng)和推廣，在操作起來(lái)會(huì)打亂戰(zhàn)，思路也不清晰。

關(guān)鍵詞：網(wǎng)站平臺(tái);平臺(tái)定位;風(fēng)格設(shè)計(jì);網(wǎng)頁(yè)布局;網(wǎng)絡(luò)營(yíng)銷

在信息高速發(fā)展的今天，網(wǎng)站設(shè)計(jì)在平臺(tái)規(guī)劃中占據(jù)著重要的地位，企業(yè)想通過(guò)該平臺(tái)塑造自己的形象，發(fā)布最新的信息，展示自己的產(chǎn)品，為以后創(chuàng)造更多合作的機(jī)會(huì)。所以，一個(gè)網(wǎng)站平臺(tái)的設(shè)計(jì)好壞直接影響到企業(yè)各方面的運(yùn)營(yíng)，做好網(wǎng)站設(shè)計(jì)前的風(fēng)格和樣式分析是很有必要的。以下就從四個(gè)方面進(jìn)行規(guī)劃分析。

一、平臺(tái)定位

搭建一個(gè)教學(xué)知識(shí)、技術(shù)交流、專業(yè)技術(shù)相結(jié)合的溝通互動(dòng)平臺(tái)，同時(shí)建設(shè)成為教育與商業(yè)整合運(yùn)營(yíng)的網(wǎng)絡(luò)營(yíng)銷商務(wù)平臺(tái)。

二、整體風(fēng)格

1.網(wǎng)站的風(fēng)格

應(yīng)該盡量做到網(wǎng)站結(jié)構(gòu)簡(jiǎn)單明了，條理清晰，頁(yè)面精美、功能實(shí)用;大幅圖片則應(yīng)該設(shè)計(jì)構(gòu)思力求精巧，整體布局要求簡(jiǎn)潔合理網(wǎng)站整體設(shè)計(jì)風(fēng)格統(tǒng)一，界面設(shè)計(jì)精美、友好，信息化設(shè)計(jì)，體現(xiàn)用戶相互之間交流互動(dòng)的應(yīng)用特色;更快的信息訪問(wèn)速度、更加省時(shí)和智能化的用戶界面，網(wǎng)絡(luò)響應(yīng)速度應(yīng)該盡量快;更簡(jiǎn)便、智能化程度更高的瀏覽查詢流程;后臺(tái)管理功能強(qiáng)大、錄入效率高;易于查看網(wǎng)民的建議和評(píng)論，以及后臺(tái)信息;提供給用戶的書(shū)籍信息盡可能詳細(xì)。

2.色彩的搭配

網(wǎng)站的主色為藍(lán)色，輔色為金色和藍(lán)色同色系且弱對(duì)比色。

3.文字的排布

一般放在最顯著的地方，如整個(gè)顯示的中央稍微偏右下;文本的排布整體性好，瀏覽起來(lái)通暢、沒(méi)有絲毫阻礙;文字的大小適中（12～14px），在不同的分辨率下都不會(huì)有太大的影響;文字的顏色不要太多，主要有黑色、深灰色、白色;鏈接變化色以藍(lán)色為主。

4.圖片的排布

圖片的面積不要太大，同時(shí)又要使圖片盡量清楚，直觀，最大限度的發(fā)揮它的作用;圖片與圖片之間要聯(lián)系凸現(xiàn)，同時(shí)又要融為一個(gè)整體，使看起來(lái)有條理。

5.按鈕類單元的排布

頁(yè)面上的按鈕，鏈接，復(fù)選框，單選框，同類單元應(yīng)該盡量保持大小一樣，左右對(duì)齊;按鈕的大小要與界面的大小和空間要協(xié)調(diào)，避免空曠的界面上放置很大的按鈕;忌用太長(zhǎng)的名稱，免得占用過(guò)多的界面位置;字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體中宋體、微軟雅黑較為美觀。

6.表格的排布

表格大小要和界面相適應(yīng)，不能在表格之外有很大空余，或者表格過(guò)大緊貼整個(gè)頁(yè)面;表格的顏色要與界面風(fēng)格符合，搭配合理協(xié)調(diào)，反差不宜太大，堅(jiān)決杜絕刺目的顏色。

7.文本框類單元的排布

同一列的文本框應(yīng)該盡量保持對(duì)齊。

三、平臺(tái)內(nèi)容

1.分析要點(diǎn)

（1）平臺(tái)特點(diǎn)（展示主體與實(shí)現(xiàn)的效果）

①教學(xué)知識(shí)、技術(shù)交流、溝通、互動(dòng)平臺(tái);②專業(yè)知識(shí)技術(shù)平臺(tái);③教育與商業(yè)整合的網(wǎng)絡(luò)營(yíng)銷商務(wù)平臺(tái)。

（2）欄目設(shè)置（展示內(nèi)容）

①針對(duì)第一、第二這兩個(gè)方面展示主體，可以建立分享交流區(qū)，展示與網(wǎng)絡(luò)營(yíng)銷相關(guān)的內(nèi)容;針對(duì)學(xué)生群體，還可以設(shè)置菜鳥(niǎo)訓(xùn)練營(yíng)、高手集中營(yíng)，從互助問(wèn)答、網(wǎng)站診斷、自助課堂、視頻課堂、專家解惑等這些方面實(shí)現(xiàn)專業(yè)知識(shí)、技術(shù)的展示、交流，輔助教學(xué)與師生之間互動(dòng)溝通。②針對(duì)第三個(gè)方面展示主體，我們可以以建立一個(gè)專門進(jìn)行業(yè)務(wù)交易的版塊，實(shí)現(xiàn)與企業(yè)之間的商務(wù)合作、與學(xué)員或者興趣愛(ài)好者之前的青鳥(niǎo)任務(wù)、以及與廣義上的企業(yè)進(jìn)行的廣告合作。

2.頁(yè)面布局（展示形式）

（1）首頁(yè)（一級(jí)頁(yè)面）

主要是展示所有版塊的設(shè)置，及其的特色、特點(diǎn)和參加流程;以及本版塊最新加入的會(huì)員和帖子數(shù)量。

（2）列表頁(yè)（二級(jí)頁(yè)面）

主要是展示該版塊最新的帖子標(biāo)題。為了方便網(wǎng)民在眾多的文字標(biāo)題中一下子抓住自己感興趣的點(diǎn)，這級(jí)頁(yè)面的布局除了與首頁(yè)保持協(xié)調(diào)一致以外，將通過(guò)標(biāo)題+圖片+文字的展示形式，用圖文并茂的展示形式吸引眼球，將瀏覽引入更深一層，即引導(dǎo)網(wǎng)民進(jìn)行三級(jí)頁(yè)面的閱讀。

（3）三級(jí)頁(yè)面

是吸引用戶認(rèn)真閱讀并產(chǎn)生有效點(diǎn)擊與咨詢，增加用戶對(duì)平臺(tái)的認(rèn)同、信任的關(guān)鍵頁(yè)面。這一級(jí)頁(yè)面除了在布局上要順應(yīng)用戶的瀏覽習(xí)慣以外，最關(guān)鍵的是內(nèi)容的質(zhì)量，是不是能打動(dòng)用戶。因此，這一級(jí)頁(yè)面的展示形式，我們要注意字體大小、間距、圖文混排等方面，同時(shí)還要增加互動(dòng)分享、交流這些功能。

另外，為了順應(yīng)用戶的瀏覽、點(diǎn)擊習(xí)慣，方便用戶的隨機(jī)點(diǎn)擊，增加輻射的點(diǎn)擊流量，在二級(jí)、三級(jí)頁(yè)面的右側(cè)設(shè)置版塊副導(dǎo)航和最熱點(diǎn)擊這些內(nèi)容。

四、網(wǎng)頁(yè)布局圖

關(guān)于平臺(tái)的用戶群體、這些群體的特點(diǎn)和到平臺(tái)來(lái)想獲取的服務(wù)內(nèi)容，我們完成了整個(gè)平臺(tái)的功能的規(guī)劃。因此，對(duì)于平臺(tái)首頁(yè)的布局，我們按此思維模式導(dǎo)圖進(jìn)行分析整理，并根據(jù)此分析結(jié)果，畫出平臺(tái)首頁(yè)、二級(jí)頁(yè)面、三級(jí)頁(yè)面的布局圖。

1.主要版塊設(shè)置

一級(jí)版塊：分享交流區(qū)、菜鳥(niǎo)訓(xùn)練營(yíng)、高手集中營(yíng)、青鳥(niǎo)網(wǎng)絡(luò)營(yíng)銷學(xué)院、休閑娛樂(lè)、業(yè)務(wù)交易。其中，各子版塊分別對(duì)應(yīng)新手試煉、推廣雜談、干貨分享、百度競(jìng)價(jià)、微營(yíng)銷;互助問(wèn)答、網(wǎng)站診斷、自助課堂、視頻課堂;青鳥(niǎo)專家解惑、青鳥(niǎo)學(xué)習(xí)精英、青鳥(niǎo)就業(yè)精英、網(wǎng)絡(luò)營(yíng)銷經(jīng)紀(jì)人;學(xué)校公共區(qū)、班級(jí)教室區(qū)、內(nèi)部?jī)?yōu)質(zhì)資源、學(xué)校交流大區(qū)、VIP資源區(qū)、VIP問(wèn)答區(qū)、愛(ài)心公益;青鳥(niǎo)俱樂(lè)部、活動(dòng)專區(qū)、照片集錦、精彩視頻、我與青鳥(niǎo);青鳥(niǎo)交易區(qū)、友情鏈接、IDC信息、商務(wù)合作、青鳥(niǎo)任務(wù)、廣告區(qū)。

2.第一階段主推廣版塊

分享交流區(qū)：推廣雜談和干貨分享（學(xué)校學(xué)生真實(shí)企業(yè)項(xiàng)目參與過(guò)程與技術(shù)指導(dǎo)實(shí)況、學(xué)習(xí)成果匯報(bào)）。菜鳥(niǎo)訓(xùn)練營(yíng)：自助課堂、互助問(wèn)答。高手集中營(yíng)：學(xué)習(xí)精英和就業(yè)精英，收集本校學(xué)習(xí)方法好、學(xué)習(xí)成果突出的學(xué)員，以及就業(yè)情況好的學(xué)員故事，并請(qǐng)他們來(lái)負(fù)責(zé)相應(yīng)的版塊，與其他學(xué)生互動(dòng)。青鳥(niǎo)網(wǎng)絡(luò)營(yíng)銷學(xué)院：班級(jí)教室區(qū)、內(nèi)部資源區(qū)。休閑娛樂(lè)：相當(dāng)于灌水區(qū)，全版塊開(kāi)通，主要用來(lái)積聚人氣。

3.論壇門戶首頁(yè)布局圖

綜上所述，一個(gè)項(xiàng)目在網(wǎng)站設(shè)計(jì)前，最好從平臺(tái)定位、整體風(fēng)格、平臺(tái)內(nèi)容、網(wǎng)頁(yè)布局圖4個(gè)方面對(duì)網(wǎng)站項(xiàng)目進(jìn)行規(guī)劃分析，如果沒(méi)有做好充分的設(shè)計(jì)規(guī)劃準(zhǔn)備工作，不僅會(huì)嚴(yán)重?fù)p壞企業(yè)形象，而且不便于網(wǎng)絡(luò)運(yùn)營(yíng)和推廣，在操作起來(lái)會(huì)比較亂，思路也不清晰。

參考文獻(xiàn)：

[1]黃紅燕.基于用戶體驗(yàn)的WEB界面色彩設(shè)計(jì)研究[D].廣東工業(yè)大學(xué)，2014.

[2]孟俊仙.淺談網(wǎng)站建設(shè)課程開(kāi)發(fā)與實(shí)踐[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2014（07）.

[3]廖玲.淺談網(wǎng)頁(yè)設(shè)計(jì)中色彩的應(yīng)用[J].網(wǎng)友世界，2014（07）.

[4]華磊，許長(zhǎng)安.淺談網(wǎng)站設(shè)計(jì)分析與網(wǎng)頁(yè)制作[J].無(wú)線互聯(lián)科技，2014（08）.

？誗編輯 李 姣