高校官网UI构建与实现——以安徽艺术学院为例

丁雅晴，米春晖

（1.安徽艺术学院美术设计系，安徽合肥230009；2.科大讯飞股份有限公司，安徽合肥230088）

UI中文解释为用户界面（User interface，简称UI），是系统和用户之间进行交互和信息交换的媒介[1]。一个美观合理的界面会给人带来舒适的视觉享受，加深用户对企业的好感度，所以门户网页的建立和设计成为各个行业的首要工作。高校官网建设是高校对内信息化建设和校园精神文明建设中不可或缺的重要部分，其对外又有着关乎学校声誉和树立良好形象的重要使命[2]。进入21世纪以来，我国几乎所有的高校包括二级学院都拥有了自己的网络平台，但是发展却较为迟缓。笔者通过浏览国内外高校网站发现，各高校网站特别是国内高校官网，模式单一、界面设计水平参差不齐，用户体验感较差。一个符合学院文化、形象的主页设计不仅能够反应出学校的文化内涵，更能突出院校的深厚底蕴。安徽艺术学院作为安徽省唯一的一所艺术类本科院校，无论是从校园文化还是学院主页，都应当体现出浓厚的地域特色与艺术氛围。本文将以安徽艺术学院门户网站为研究主体进行实例设计，针对原先官网界面所存在的问题完成了对官网的界面设计改造，希望通过本次研究可以促进高校校园网站对内对外的传播作用，提高网站使用率，扩大高校的影响力。

1 网站建设背景

安徽艺术学院（申报设置前为“安徽大学艺术与传媒学院”）网站于2014年上线运行，到目前为止没有改版，原有版面已持续5年。6月10日，教育部致函安徽省人民政府，同意设置安徽艺术学院。作为安徽省唯一艺术类本科院校，目前的门户网站不论是视觉形象还是功能设计方面都存在着许多不足，笔者根据安徽艺术学院办学特色，以及教育部文件要求，依据其地理位置、专业特色两大特色将网页整体的视觉形象进行提升。

1.1 地理位置

安徽艺术学院坐落于合肥市新站区高教基地，占地556亩。学院的校园规划及建筑由同济大学建筑设计研究院设计，充分体现了徽派元素的建筑风格。根据地域特色，徽文化元素及特点应当体现在门户网站的设计当中。

图1 安徽艺术学院校园风光

1.2 专业特色

安徽艺术学院定位于应用型高等学校，主要培养适应区域新兴产业发展需要的应用型艺术类人才。学校本科专业首批设置音乐表演、表演、绘画、播音与主持艺术4个本科专业。学院着力培养“高素质、强能力、精才艺、善应用”的高级艺术专门人才，重点培养一线演艺、传媒人才及适应新兴文化产业急需的专门人才，为安徽文化强省建设服务。在考虑校园文化建设同时，也要考虑其专业特色，将艺术元素融入门户网站的设计当中。

1.3 网站定位

校园网站的构建不同于大众传媒，高校门户网站承担着高校对外宣传、对内服务的任务，其所呈现在用户面前的视觉效果在一定程度上反映出一个学校的办学理念与管理水平。首先，它集成了大量业务服务与庞大的信息数据。其次，校园网的用户以教职工、学生、考生、家长和校友为主，文化水平普遍较高，用户群体比较固定。再者，高校作为人才培养和学术研究的最高殿堂，同时还肩负着服务社会和文化传承的重要使命，因此高校门户网站有突出的教育性和学术性[3]。

1.4 界面设计对学校官网的重要性

互联网已经成为各行各业沟通的桥梁，必须要不断提高审美才能适应大众的视觉需求。拥有良好视觉形象的高校门户网站，可以帮助高校建立社会认同感以及国际形象。对于在校师生来说，可以通过安艺官网快速了解校内新闻、行业资讯、学术动态。对于毕业生和家长来说，校园网是他们了解安艺第一印象的媒介。如果想要在众多高校官网中脱引而出，学校应当重视用户的交互体验感，除了为用户提供快捷、准确的信息外，还需提升网页的形象设计，加深用户对于网站的黏着度。

2 网站现状

2.1 用户体验评价

笔者使用“问卷星”网站作为调研平台，通过班会、微信、QQ等传播途径发放“安徽艺术学院（后简称为“安艺”）官网界面设计调查问卷”，对安艺网站的目标用户展开调查分析，尽可能的保证不同类型用户问券发放比例相同，以减少因为不同类型用户造成的主观误差。共回收有效问卷258份，数据真实有效。通过问卷所得数据分析，结果如下：35位受访者认为在校园网查找信息非常方便，62人觉得方便，93人认为一般，68位受访者表示不方便；37%的受访者认可目前学校官网的布局；70%的受访者希望页面中能增加图片的比重；受访者认为网站设计重要的因素是整体色调（61%）、版式布局（82%）以及功能（64%）。

图2 受访者使用学校官网情况统计

在浏览安艺网页的方式调查中，大部分用户表示提出在外手机处理工作会更为方便快捷；而在受访者给出的网页改进建议中，整体色调、版式、功能这几个方面被多次提及，说明用户在浏览网页过程中对这些是十分在意的；并且相当一部分受访者认为应当突出地域特色。

2.2 评价结果分析

通过分析问券调查的数据，以及查阅近50所国内外排名靠前的学校官网，将目前安艺官网界面设计（图3）所存在的问题进行归纳整理。

图3 改造前的安艺官网首页

2.2.1 字体排列杂乱 笔者打开安艺官网首页，发现界面上使用字体超过了三个，banner部分和标题栏采用艺术字体进行加粗处理，略显杂乱。二级页面段落文字使用的是有衬线字体宋体，不利于阅读。高校官网应当限定页面字体不能超过两种，标题通过加粗变色的手法做区分，每一个链接行之中都有着固定的盒子区域，之间的点元素形成的面相互支撑，方便用户轻松浏览。

2.2.2 色彩搭配单调 官网主色调是红色，仅仅是明度纯度有变化，并且主要颜色在网页中占比较小，网页背景空白较多，缺乏识别性。将大多数中国高校的网页截图放在一起对比，就会发现在国外很多知名大学校园门户网站中，都有着独立的配色，如剑桥大学使用“7466c孔雀蓝”，加州大学使用“golden blue”，独特的配色成为大学的某种标志。用户打开网页时最先感受到色彩的冲击，良好的色彩搭配可以带给用户舒适的视觉体验。在设计高校网页时，做到有针对性的用色是相当重要的，这也正是国内校园门户网站所缺乏的。

2.2.3 图像形式单一 图像在网页中的首要作用为装饰，高质量的摄影图像可以迅速抓住用户的眼球。虽然安艺网站banner部分使用了图像，但是像素质量普遍较低，图像面积小，未能按照预期效果给用户带来视觉上的良好体验。从设计趋势来看，具象、抽象图形以及信息可视化图形的运用较国外高校官网来说差距较大。

2.2.4 动态效果简单 动效是指网页中包含的各种动态效果，我们经常在网络中看到的一些动态图片、视频，都属于网页动态效果。安艺网页采用的还是传统的硬性布局，Banner部分的动态效果仅依赖于flash或者链接转跳，也没有设置宣传视频播放。国内高校门户网站动态效果简单是多方面因素造成的，首先，高校主管领导和相关工作人员对学校官网建设重视程度不够，高校缺乏专业的网页设计师去运营网络，而且网络维护意识也不强。

2.2.5 版式布局保守 版式是网站的骨骼，它支撑起整个网站的布局、内容、风格。出色的版式布局设计可以将用户直接引导像他想要获取的页面。对比国外高校门户的网站排版布局就会发现，安艺官网的版式布局非常保守，需要表达的信息繁琐庞大，并且主次不容易区分。二级界面采用文字与图片交叉分布，不管是在用户体验还是风格简化方面都还有很大的进步空间。网站在构建时不注重交互设计直接导致用户对网站的满意度降低，这一点从调查数据中直观体现出来。

2.2.6 未考虑响应式设计 根据中国互联网络信息中心（CNNIC）第43次《中国互联网络发展状况统计报告》结果显示（如图4），截至2018年12月，我国手机网民中使用手机上网人群的占比为98.6%，预计2019年我国网民中使用手机上网人群的占比将提升至99.1%。响应式网站成了近几年企业建站的一个主流。目前安艺网站并未采用前沿的响应式设计，这导致很多人在外没有办法及时处理工作以及查阅信息，功能性大大削减。

图4 2012-2018年中国网民规模及互联网普及率

3 安徽艺术学院官网设计实现

3.1 设计目标

（1）由于安艺官网使用的网页框架较早，除了整体的视觉形象设计需要提升，在近兴起的H5页面、联想搜索、分层级标题都有升级空间，并且以上功能已经成为主流的设计规范。当前的网页设计不止停留在视觉审美，办公等功能更加需要优化流程，把提高效率放在更加重要的位置。

（2）整合二级界面、三级界面，以用户体验感为目标更加注重交互设计，提升网站流量和转化率，在后台设置模板，降低维护成本。

（3）改版后的网页界面拟采用现代化简约的设计风格，以点线面为基础，用线条和大面积色块来划分版面，并且用优质图片去取代文字，使整个界面更加符合用户的审美标准。

（4）建立响应式设计。对电脑客户端进行优化，在后台安装程序为响应式设计做铺垫，满足用户不同渠道的浏览途径。

3.2 设计实现

在设计规范方面将采用谷歌于2018年7月发布的设计规范，适合屏幕的UI元素比例规定在16：9；3：2；4：3；1；1；3：4；2：3，为了保证信息的密度和可用性与平衡性，主要区域边缘至少预留48DP（图5）。国内设计规范大多使用原创或者金山等公司的设计规范，本次设计使用谷歌设计规范是因为其更加具备实用性。对于一个需要在数秒内就寻找到自己想要内容的网站来说，适合的设计规范显得格外重要。

图5 安艺官网元素布局比例图（图片来源：笔者自绘）

设计草图，在设计初稿阶段使用Adobe XD对内容进行草图绘制，建立初步的设计框架，对内容区域进行分级处理。本次官网界面更新以现代简约风格为主，用大面积色块和图文来划分版面（图6），导航清晰便捷，提高用户体验感。网页在编写过程中每行代码之间都设置详细内容标记，包括了网络内容、首页活动海报、图片、地址页面。这样做的目的是在之后的维护中，方便其它专业教师能参照模板在短时间内灵活上手，快捷编辑内容。

图6 安艺官网设计草图（图片来源：笔者自绘）

在设计草稿完成之后进行内容的填充，图标的选择和字体颜色确定根据用户视觉产生的主次区分。文字的使用对用户的阅读效率、质量、阅读体验有着密不可分的关系，所以字体的选择必须符合高校门户网站的校园风格学术氛围。网站字体的选择，还要考虑分辨率的影响。常规的带有笔锋的字体，在低配置显示器中会有模糊、锯齿现象。所以本次设计使用思源黑体为主，宋体为辅。思源黑体（如图7）的特点是粗细均匀、笔画光滑，适配于各类显示器，拥有更高的辨识度，是现在设计师在界面设计中首选字体之一。

图7 思源字体

标准的规范制作结束后，进入根据网站特点设计网页的特殊阶段。颜色的选择依据安徽艺术学院形象识别系统手册中的色彩系统，网站以中国红（#d80c18）为主色调（图8），多用于附属页面有明确等级区分的页面中。考虑到红色对于用户浏览内容信息过程中容易产生疲劳，所以在主页中不采用大面积的红色，而是用象征徽派建筑的安艺灰（#dcdddd）作为点缀，给用户提供一个良好的阅读舒适度。图标的使用与新闻类的网页相同，使用最直观、简洁的图标风格，让用户第一时间就清楚图标所代表的含义，从而提高浏览效率。

图8 安艺官网主色调（图片来源：笔者自绘）

在目前来说，传统的硬性布局，已经不再是当下主流的表达形式，现在更多设计师选用动态分层的方式来展现作品。主页banner部分作为安艺新闻专题页链接，主要用来放置专题新闻配图，使用户可以第一时间了解学校近期重大动态。还可以在banner部分添加动效，将校园活动以一种幽默诙谐的方式传达给用户，迅速激发阅读兴趣。视频播放使用HTML5播放器（图9），播放器运行不借助Flash插件，使用JavaScript脚本就可以使视频打开速度得到大幅提升。

图9 安艺官网视频播放技术 （图片来源：笔者自绘）

在排版方面，校园网一般使用新闻式的排版布局，原因是该布局在准确获取页面信息的效率和准确性都高于其他排版布局。截至2019年6月，世界最前沿的研究技术在线眼球轨迹追踪研究Eyetrackshop平台对新闻类网站数据统计，在雅虎、CNN、福克斯新闻等新闻类网站中，平均用户的浏览时间相比较2018年阅读时间缩短近10%。缩减体现在次要内容中，对于主要内容的浏览时间与往年相符。在非热门新闻网站中，部分图标装饰占用了用户浏览时间（图10）。

图10 眼动追踪研究后的分析图（图片来源：Eyetrackshop整理）

由此可见，标题内的信息需要精而简。特别是装饰线条中色彩明度以及对比度的把握要尤为注意，一个要闻版面的功能要做到在最短的时间让用户获得自己想要的信息。安艺官网的二级界面采用瀑布样式布局，在编辑内容中每一个色相的内容不会与同色相内容过近，这种不规则的颜色搭配不仅缩短了用户阅读时间，还可以减缓视觉疲劳。在部分三级界面适当加入信息可视化设计和交互设计（图11），用最少的元素来表达更多的信息[4]，使用户在浏览网页的同时，拥有良好的体验从而增加用户的信赖度。

图11 安艺官网三级界面PC端、移动端布局（图片来源：笔者自绘）

在国际流行趋势的背景下，根据用户调查结果，按照电脑、平板电脑和手机设计配套的响应式界面（图12），让后台可以主动识别用户使用的端口设备，以满足用户在外浏览网站、处理工作的需要。如针对于教职工和学生需求专门开发的手机端在线录入信息功能，在上传填写表格过程中减少不必要流程，用户可随时编辑文档、表格。还有加入个人中心插件，存储个人文件、查询历史记录、搜索信息、编辑个人资料，这些功能的添加为用户节省时间的同时也方便信息沟通。

图12 安艺官网响应式设计（图片来源：笔者自绘）

4 结论

高校官网对校园形象的塑造和文化的传播有着特殊的意义和作用，各高校管理部门已经意识到高校官网形象提升问题，开始采取相关措施，但是由于在构建和使用过程中没有充分考虑用户体验需求，取得效果甚微。如何将技术与艺术完美结合，在提升视觉形象的同时增加网站的实用性，是我们需要思考的问题，也是本文探究的创新点。