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

左 元 （蘇州科技學院 江蘇蘇州 215000）

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

左 元 （蘇州科技學院 江蘇蘇州 215000）

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

界面設計：視覺構成：版式：色彩

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

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

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

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

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

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

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

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

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

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

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

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

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

結束語

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

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

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

[3]趙殿澤.構成藝術.沈陽：遼寧美術出版社，1986.