左 元 （蘇州科技學(xué)院 江蘇蘇州 215000）

學(xué)報(bào)網(wǎng)頁(yè)設(shè)計(jì)
——以蘇州科技學(xué)院學(xué)報(bào)為例

左 元 （蘇州科技學(xué)院 江蘇蘇州 215000）

根據(jù)學(xué)報(bào)網(wǎng)頁(yè)本身的性質(zhì)和要求，了解人們?yōu)g覽網(wǎng)頁(yè)時(shí)的視覺(jué)習(xí)慣與審美需求，設(shè)計(jì)時(shí)講究網(wǎng)頁(yè)中的各種視覺(jué)元素，如，圖片、色彩、文字搭配等內(nèi)容的搭配，爭(zhēng)取更合理有效的傳達(dá)網(wǎng)頁(yè)中的信息。

界面設(shè)計(jì)：視覺(jué)構(gòu)成：版式：色彩

進(jìn)入新世紀(jì)以來(lái)，網(wǎng)絡(luò)越來(lái)越多的給予人們?cè)趯W(xué)習(xí)，生活、工作上的幫助。絕大多數(shù)的企業(yè)單位或者公司都會(huì)搭建自己的網(wǎng)絡(luò)平臺(tái)，向社會(huì)提供咨訊服務(wù)，網(wǎng)絡(luò)平臺(tái)已經(jīng)成為了企業(yè)或者單位與外界交流的一個(gè)信息窗口。蘇州科技學(xué)院學(xué)報(bào)編輯部作為一個(gè)國(guó)內(nèi)外公開(kāi)發(fā)行的綜合性學(xué)術(shù)刊物，設(shè)計(jì)這樣的網(wǎng)絡(luò)界面時(shí)，我們不僅要考慮到版式的優(yōu)美，還要講究視覺(jué)信息的編排和歸類(lèi)，使可得學(xué)報(bào)的網(wǎng)絡(luò)界面在一個(gè)窗口里流暢地傳達(dá)出更多地信息量，讓它真正成為一個(gè)可讀性強(qiáng)，而且令人賞心悅目的媒體平臺(tái)。設(shè)計(jì)這樣的一個(gè)優(yōu)秀的界面，要求設(shè)計(jì)師有著豐富的設(shè)計(jì)經(jīng)驗(yàn)，能較好的把握人們的視覺(jué)流程和心理特征，使界面上的版式編排、字體大小，圖片位置，以及界面色調(diào)保持節(jié)奏上的視覺(jué)美感。

一、學(xué)報(bào)網(wǎng)絡(luò)界面的視覺(jué)流程概念分析

視覺(jué)流程的形式是人們長(zhǎng)期的視覺(jué)習(xí)慣所形成的，人們眼睛的生理結(jié)構(gòu)決定了人們觀察某物的時(shí)候，只有一個(gè)視覺(jué)焦點(diǎn)，根據(jù)人們的視覺(jué)習(xí)慣，在網(wǎng)頁(yè)設(shè)計(jì)上有意識(shí)地引導(dǎo)人們先看什么，后看什么，什么樣的信息需要人們特別注意的，什么樣的信息是作為輔助的。那么，在第一視覺(jué)點(diǎn)和第二視覺(jué)點(diǎn)之間就要建立一定的版式來(lái)引導(dǎo)人們?yōu)g覽。

引導(dǎo)頁(yè)是人們?yōu)g覽主頁(yè)之前看到的頁(yè)面，引導(dǎo)頁(yè)是為了輔助主頁(yè)存在的，內(nèi)容上直接網(wǎng)站名稱(chēng)，中英文頁(yè)面和需要傳達(dá)給受眾最直接的信息。蘇州科技學(xué)院學(xué)報(bào)編輯部的引導(dǎo)頁(yè)，視覺(jué)流程上首先引入眼簾的是蘇州科技學(xué)院的LOGO和學(xué)院名稱(chēng)，置于界面的中心偏上部位。在這個(gè)引導(dǎo)界面中，這一區(qū)域在設(shè)計(jì)中屬于最佳視域。界面中心貫穿一條直曲線，引導(dǎo)人們把視線流入到下方的“學(xué)報(bào)編輯部”，視線接著往下落，瀏覽到學(xué)報(bào)編輯部最近的新聞概況，界面的右邊設(shè)計(jì)中英文鏈接，可以切換到不同的頁(yè)面。版式最下方是蘇州科技學(xué)院的“版式所有權(quán)”。這樣的界面分配及建立起信息的傳達(dá)，又符合人們的視覺(jué)習(xí)慣，在視覺(jué)流程上做到了自然，合理。

二、學(xué)報(bào)網(wǎng)絡(luò)界面的內(nèi)容編排概念分析

學(xué)報(bào)界面設(shè)計(jì)主版式分為三類(lèi)，第一類(lèi)是引導(dǎo)頁(yè)，第二類(lèi)是學(xué)報(bào)主頁(yè)，第三類(lèi)是學(xué)報(bào)期刊版面；其他版式共同依附于學(xué)報(bào)主頁(yè)的版式設(shè)計(jì)。引導(dǎo)頁(yè)的內(nèi)容編排有視覺(jué)LOGO，學(xué)院名稱(chēng)，學(xué)報(bào)編輯部名稱(chēng)，中英文鏈接學(xué)報(bào)新聞。主頁(yè)的內(nèi)容相對(duì)于引導(dǎo)頁(yè)要豐富很多，在眉頭上顯示的依然是學(xué)院Logo和學(xué)校名稱(chēng)。在標(biāo)題的右邊顯示的是“中國(guó)標(biāo)準(zhǔn)期刊號(hào)”。眉頭的下面編排三個(gè)鏈接，分別是“自然科學(xué)版”“工程技術(shù)版”“社會(huì)科學(xué)版”。一般進(jìn)入到學(xué)報(bào)網(wǎng)站的人，可能最想登入到相關(guān)期刊頁(yè)面中，所以在眉頭下方編排相關(guān)期刊鏈接是最合適不過(guò)的。接下來(lái)便是主頁(yè)的導(dǎo)航條，導(dǎo)航條的鏈接內(nèi)容設(shè)計(jì)，可以讓相關(guān)學(xué)者和社會(huì)人士充分了解蘇州科技學(xué)院的學(xué)報(bào)編輯部的簡(jiǎn)況，工作內(nèi)容和性質(zhì)。主要包括八個(gè)部分，分別是“首頁(yè)”“組織機(jī)構(gòu)”“學(xué)報(bào)動(dòng)態(tài)”“政策法規(guī)”“遠(yuǎn)程服務(wù)”“教育培訓(xùn)”“交流服務(wù)”“信息服務(wù)”“省學(xué)報(bào)研究會(huì)”“ENGLISH”。

三類(lèi)期刊雜志“自然科學(xué)版”“工程技術(shù)版”“社會(huì)科學(xué)版”的網(wǎng)絡(luò)界面同意版式不同類(lèi)別的設(shè)計(jì)方式，便于人們識(shí)別與記憶。期刊雜志網(wǎng)頁(yè)界面標(biāo)題設(shè)置為“蘇州科技學(xué)院（工程技術(shù)版）稿件采編平臺(tái)”（不同期刊則標(biāo)明不同版面），導(dǎo)航欄分別設(shè)置“首頁(yè)”“學(xué)報(bào)簡(jiǎn)介”“文章查詢(xún)”“期刊動(dòng)態(tài)”“作者園地”“投稿須知”“網(wǎng)上訂購(gòu)”“在線留言”“聯(lián)系我們”。版面內(nèi)容分三欄，中間一欄的內(nèi)容寬度占版面的二分之一，內(nèi)容有“期刊中心”，對(duì)期刊內(nèi)容性質(zhì)的介紹。下分欄“《蘇州科技學(xué)院（*期刊版）》*年第*期”，內(nèi)容以滾動(dòng)式顯示論文名稱(chēng)，作者姓名發(fā)刊時(shí)間。左邊版式的內(nèi)容設(shè)置為“用戶(hù)中心”，為作者投稿設(shè)計(jì)一個(gè)專(zhuān)門(mén)平臺(tái)，包括“在線投稿查詢(xún)”“專(zhuān)家在線審稿”“編委在線審稿”“編輯在線辦公”，緊接下欄設(shè)置“文章查詢(xún)”“期刊動(dòng)態(tài)”“作者園地”“訪問(wèn)統(tǒng)計(jì)”等內(nèi)容。右邊欄設(shè)置“期刊信息”，顯示期刊的性質(zhì)。在“相關(guān)信息”欄里添寫(xiě)主辦單位地址郵編等。

三、學(xué)報(bào)網(wǎng)絡(luò)界面中的圖片視覺(jué)概念分析

對(duì)于學(xué)報(bào)界面來(lái)講，可以通過(guò)設(shè)計(jì)把圖片與文字巧妙地相結(jié)合，圖文并茂地向?yàn)g覽者展示相應(yīng)的信息，圖片能直觀地傳達(dá)文字表現(xiàn)不了的信息，并且可讀性強(qiáng)，便于記憶與影響。通過(guò)引入圖片，可以根據(jù)圖片的大小，色彩，進(jìn)行構(gòu)圖，美化整個(gè)版面。為了使版面更加富有趣味性，最直接有效的方法就是，使用相應(yīng)的圖片來(lái)美化這個(gè)版面。當(dāng)然，圖片的作用也不僅僅是美化版面，更給人提供了一種直觀的感受，文字更富有感染力。

蘇州科技學(xué)院學(xué)報(bào)編輯部網(wǎng)頁(yè)界面設(shè)計(jì)中的圖片采用的是蘇州科技學(xué)院圖書(shū)館的建筑外觀的圖片形象。圖書(shū)館海藏大量圖書(shū)，是學(xué)習(xí)、寫(xiě)文章的重要基地，在此處采用圖書(shū)館的圖片是在恰當(dāng)不過(guò)的了。尺寸控制在不超過(guò)版面的三分之一。圖片像素在72DPI，圖片像素太小，會(huì)給瀏覽者產(chǎn)生模糊，有馬賽克的感覺(jué)，圖片的像素太大，則會(huì)導(dǎo)致圖片一直打不開(kāi)，影響瀏覽速度，所以72DPI是最合適的圖片像素。那么，在首頁(yè)當(dāng)中可以根據(jù)需要適當(dāng)?shù)卣{(diào)整的圖片大小。

在“自然科學(xué)版”“工程技術(shù)版”“社會(huì)科學(xué)版”三類(lèi)版面中的圖片，分別采用的是相關(guān)期刊的印刷封面，瀏覽者在瀏覽時(shí)，只要打開(kāi)相關(guān)網(wǎng)頁(yè)，便能直截了當(dāng)?shù)刂老嚓P(guān)網(wǎng)頁(yè)是關(guān)于哪種期刊。

四、學(xué)報(bào)網(wǎng)絡(luò)界面中的色彩視覺(jué)概念分析

學(xué)報(bào)整體版面采用青藍(lán)色，色彩的創(chuàng)意來(lái)源是根據(jù)蘇州科技學(xué)院主頁(yè)的色調(diào)來(lái)確定的，主頁(yè)的色彩是青色。藍(lán)色這個(gè)色系里面，既不脫離青色，自身又帶有清爽，安靜的感覺(jué)，所以設(shè)計(jì)師采用顏色時(shí)，主色調(diào)采用青藍(lán)色。在三類(lèi)期刊版面中的顏色則采用相對(duì)應(yīng)期刊印刷色，瀏覽者在瀏覽之時(shí)便于識(shí)別與記憶，顏色分別是工程技術(shù)版采用藍(lán)色，社會(huì)科學(xué)版采用土橙色，自然科學(xué)版采用綠色。各自網(wǎng)頁(yè)背景色彩，分別是主體色降低飽和度與明度，顏色相對(duì)弱化，使其看起來(lái)是帶有相對(duì)應(yīng)色相的淡色背景，在淡色的背景中配上深色的文字，更加方便瀏覽閱讀。學(xué)報(bào)界面的色彩設(shè)計(jì)從某種意義上來(lái)講，它是一種藝術(shù)的創(chuàng)作，要求版面中的色塊的形態(tài)要美，圖片顏色要遙相呼應(yīng)整體，文字與背景要容易區(qū)分，每一步都要做到完美，讓瀏覽者閱讀時(shí)能夠一眼找到相關(guān)的信息。所以在用色的準(zhǔn)確程度上一定拿捏到位，主體色青藍(lán)色與分刊中的藍(lán)色，青色、橙色，既有區(qū)分，又有聯(lián)系。每個(gè)版式的下方用深灰壓底，平衡整個(gè)版式，視覺(jué)便會(huì)穩(wěn)重流暢。

結(jié)束語(yǔ)

學(xué)報(bào)網(wǎng)頁(yè)的界面設(shè)計(jì)時(shí)一種視覺(jué)表現(xiàn)形式，它是學(xué)習(xí)、工作交流的一個(gè)重要的信息傳播平臺(tái)，對(duì)學(xué)術(shù)的交流有著不可忽視的影響力量。在蘇州科技學(xué)院學(xué)院學(xué)報(bào)概念設(shè)計(jì)方案中，它的版面內(nèi)容安排，版式設(shè)計(jì)，色彩設(shè)計(jì)，運(yùn)用了心理學(xué)、視覺(jué)設(shè)計(jì)美學(xué)與人機(jī)工程學(xué)/哲學(xué)等相關(guān)學(xué)科的知識(shí)，在本文中對(duì)學(xué)報(bào)網(wǎng)頁(yè)概念設(shè)計(jì)進(jìn)行了闡述和分析。流暢優(yōu)美的網(wǎng)頁(yè)設(shè)計(jì)對(duì)瀏覽著來(lái)說(shuō)是一次愉悅身心的學(xué)習(xí)，讓他們?cè)谕昝赖囊曈X(jué)環(huán)境中享受工作學(xué)習(xí)的樂(lè)趣。

[1]鬲波飛.網(wǎng)頁(yè)設(shè)計(jì)之視覺(jué)信息傳達(dá)分析，湖南大學(xué)學(xué)報(bào)，2001.

[2]劉永祥.唐良瑞.網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)構(gòu)成分析.北京工商大學(xué)學(xué)報(bào)，2004.

[3]趙殿澤.構(gòu)成藝術(shù).沈陽(yáng)：遼寧美術(shù)出版社，1986.