学报网页设计——以苏州科技学院学报为例

左 元 （苏州科技学院 江苏苏州 215000）

学报网页设计
——以苏州科技学院学报为例

左 元 （苏州科技学院 江苏苏州 215000）

根据学报网页本身的性质和要求，了解人们浏览网页时的视觉习惯与审美需求，设计时讲究网页中的各种视觉元素，如，图片、色彩、文字搭配等内容的搭配，争取更合理有效的传达网页中的信息。

界面设计：视觉构成：版式：色彩

进入新世纪以来，网络越来越多的给予人们在学习，生活、工作上的帮助。绝大多数的企业单位或者公司都会搭建自己的网络平台，向社会提供咨讯服务，网络平台已经成为了企业或者单位与外界交流的一个信息窗口。苏州科技学院学报编辑部作为一个国内外公开发行的综合性学术刊物，设计这样的网络界面时，我们不仅要考虑到版式的优美，还要讲究视觉信息的编排和归类，使可得学报的网络界面在一个窗口里流畅地传达出更多地信息量，让它真正成为一个可读性强，而且令人赏心悦目的媒体平台。设计这样的一个优秀的界面，要求设计师有着丰富的设计经验，能较好的把握人们的视觉流程和心理特征，使界面上的版式编排、字体大小，图片位置，以及界面色调保持节奏上的视觉美感。

一、学报网络界面的视觉流程概念分析

视觉流程的形式是人们长期的视觉习惯所形成的，人们眼睛的生理结构决定了人们观察某物的时候，只有一个视觉焦点，根据人们的视觉习惯，在网页设计上有意识地引导人们先看什么，后看什么，什么样的信息需要人们特别注意的，什么样的信息是作为辅助的。那么，在第一视觉点和第二视觉点之间就要建立一定的版式来引导人们浏览。

引导页是人们浏览主页之前看到的页面，引导页是为了辅助主页存在的，内容上直接网站名称，中英文页面和需要传达给受众最直接的信息。苏州科技学院学报编辑部的引导页，视觉流程上首先引入眼帘的是苏州科技学院的LOGO和学院名称，置于界面的中心偏上部位。在这个引导界面中，这一区域在设计中属于最佳视域。界面中心贯穿一条直曲线，引导人们把视线流入到下方的“学报编辑部”，视线接着往下落，浏览到学报编辑部最近的新闻概况，界面的右边设计中英文链接，可以切换到不同的页面。版式最下方是苏州科技学院的“版式所有权”。这样的界面分配及建立起信息的传达，又符合人们的视觉习惯，在视觉流程上做到了自然，合理。

二、学报网络界面的内容编排概念分析

学报界面设计主版式分为三类，第一类是引导页，第二类是学报主页，第三类是学报期刊版面；其他版式共同依附于学报主页的版式设计。引导页的内容编排有视觉LOGO，学院名称，学报编辑部名称，中英文链接学报新闻。主页的内容相对于引导页要丰富很多，在眉头上显示的依然是学院Logo和学校名称。在标题的右边显示的是“中国标准期刊号”。眉头的下面编排三个链接，分别是“自然科学版”“工程技术版”“社会科学版”。一般进入到学报网站的人，可能最想登入到相关期刊页面中，所以在眉头下方编排相关期刊链接是最合适不过的。接下来便是主页的导航条，导航条的链接内容设计，可以让相关学者和社会人士充分了解苏州科技学院的学报编辑部的简况，工作内容和性质。主要包括八个部分，分别是“首页”“组织机构”“学报动态”“政策法规”“远程服务”“教育培训”“交流服务”“信息服务”“省学报研究会”“ENGLISH”。

三类期刊杂志“自然科学版”“工程技术版”“社会科学版”的网络界面同意版式不同类别的设计方式，便于人们识别与记忆。期刊杂志网页界面标题设置为“苏州科技学院（工程技术版）稿件采编平台”（不同期刊则标明不同版面），导航栏分别设置“首页”“学报简介”“文章查询”“期刊动态”“作者园地”“投稿须知”“网上订购”“在线留言”“联系我们”。版面内容分三栏，中间一栏的内容宽度占版面的二分之一，内容有“期刊中心”，对期刊内容性质的介绍。下分栏“《苏州科技学院（*期刊版）》*年第*期”，内容以滚动式显示论文名称，作者姓名发刊时间。左边版式的内容设置为“用户中心”，为作者投稿设计一个专门平台，包括“在线投稿查询”“专家在线审稿”“编委在线审稿”“编辑在线办公”，紧接下栏设置“文章查询”“期刊动态”“作者园地”“访问统计”等内容。右边栏设置“期刊信息”，显示期刊的性质。在“相关信息”栏里添写主办单位地址邮编等。

三、学报网络界面中的图片视觉概念分析

对于学报界面来讲，可以通过设计把图片与文字巧妙地相结合，图文并茂地向浏览者展示相应的信息，图片能直观地传达文字表现不了的信息，并且可读性强，便于记忆与影响。通过引入图片，可以根据图片的大小，色彩，进行构图，美化整个版面。为了使版面更加富有趣味性，最直接有效的方法就是，使用相应的图片来美化这个版面。当然，图片的作用也不仅仅是美化版面，更给人提供了一种直观的感受，文字更富有感染力。

苏州科技学院学报编辑部网页界面设计中的图片采用的是苏州科技学院图书馆的建筑外观的图片形象。图书馆海藏大量图书，是学习、写文章的重要基地，在此处采用图书馆的图片是在恰当不过的了。尺寸控制在不超过版面的三分之一。图片像素在72DPI，图片像素太小，会给浏览者产生模糊，有马赛克的感觉，图片的像素太大，则会导致图片一直打不开，影响浏览速度，所以72DPI是最合适的图片像素。那么，在首页当中可以根据需要适当地调整的图片大小。

在“自然科学版”“工程技术版”“社会科学版”三类版面中的图片，分别采用的是相关期刊的印刷封面，浏览者在浏览时，只要打开相关网页，便能直截了当地知道相关网页是关于哪种期刊。

四、学报网络界面中的色彩视觉概念分析

学报整体版面采用青蓝色，色彩的创意来源是根据苏州科技学院主页的色调来确定的，主页的色彩是青色。蓝色这个色系里面，既不脱离青色，自身又带有清爽，安静的感觉，所以设计师采用颜色时，主色调采用青蓝色。在三类期刊版面中的颜色则采用相对应期刊印刷色，浏览者在浏览之时便于识别与记忆，颜色分别是工程技术版采用蓝色，社会科学版采用土橙色，自然科学版采用绿色。各自网页背景色彩，分别是主体色降低饱和度与明度，颜色相对弱化，使其看起来是带有相对应色相的淡色背景，在淡色的背景中配上深色的文字，更加方便浏览阅读。学报界面的色彩设计从某种意义上来讲，它是一种艺术的创作，要求版面中的色块的形态要美，图片颜色要遥相呼应整体，文字与背景要容易区分，每一步都要做到完美，让浏览者阅读时能够一眼找到相关的信息。所以在用色的准确程度上一定拿捏到位，主体色青蓝色与分刊中的蓝色，青色、橙色，既有区分，又有联系。每个版式的下方用深灰压底，平衡整个版式，视觉便会稳重流畅。

结束语

学报网页的界面设计时一种视觉表现形式，它是学习、工作交流的一个重要的信息传播平台，对学术的交流有着不可忽视的影响力量。在苏州科技学院学院学报概念设计方案中，它的版面内容安排，版式设计，色彩设计，运用了心理学、视觉设计美学与人机工程学/哲学等相关学科的知识，在本文中对学报网页概念设计进行了阐述和分析。流畅优美的网页设计对浏览着来说是一次愉悦身心的学习，让他们在完美的视觉环境中享受工作学习的乐趣。

[1]鬲波飞.网页设计之视觉信息传达分析，湖南大学学报，2001.

[2]刘永祥.唐良瑞.网页设计中的视觉构成分析.北京工商大学学报，2004.

[3]赵殿泽.构成艺术.沈阳：辽宁美术出版社，1986.