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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)束語

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

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

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

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