教育网站移动端界面设计与优化

教育网站作为教育信息化工作的重要组成部分，承载着信息发布、业务服务、用户评价等功能。随着移动互联网的发展，移动端网站以其更加灵活便捷、不受时空限制等特点，成为用户搜索信息、处理事务的主要方式。为了满足用户需求，更好地发挥网站功能，建设移动端网站成为教育机构信息化工作的必选项。

本文提出了一种系统型用户体验设计方法，通过探究用户体验与视觉识别的内在关系，结合移动端网站特点，融合交互设计、平面设计、界面设计，为教育机构进行移动端网站设计提供了新的思路。

系统型用户体验设计方法概述

本文提出的系统型用户体验设计方法（SUED，Systematic User Experience Design）是一种提升用户体验的新方案。系统型是指由用户体验要素、视觉识别要素、美学要素、内容策划要素等组成的有机整体，各要素间相互依存、相互转化。该方法包括轻量化用户体验要素模型设计、导向化视觉识别系统设计和集成化交互界面设计三个阶段。

第一阶段通过用户问卷、数据分析、召开专项论证会等手段确定网站设计方案，针对特定用户的需求来设定网站的栏目内容。第二阶段短平快地找到交互界面设计阶段的视觉识别重心，为第三阶段交互界面设计打下基础。第三阶段把交互设计、界面设计两项工作，通过用户界面组件进行关联集成，总结出用户界面模板，将用户界面组件的样式在所有界面上实现同步，更易于扩展和维护，提升用户体验的统一性和完成度。该方法的主要工作内容如图1所示。

图1 系统型用户体验设计方法

河南省教育科研网移动端网站设计

河南省教育科研网网站（http://www.ha.edu.cn/）主要为全省教育网用户提供信息服务，包含桌面端和移动端。网站最初只有桌面端，随着移动互联网时代的到来，为了提升网站的易用性，满足用户访问需求，移动端网站于2021年上线。

由于河南省教育科研网网站结构复杂，内容较多，适合独立开发移动端网站。在网站的设计和持续优化过程中，项目组使用了前面介绍的系统型用户体验设计方法来提升用户体验。下面介绍具体工作。

轻量化用户体验要素模型设计阶段

本阶段在进行用户调研、自我筛查、召开专家论证会的基础上，进行了轻量化用户体验要素模型设计。其中用户需求方面的重点有：移动端网站需要精简内容，增加吸引用户的“必选项”，提升用户粘性；内容上突出信息化人物与成果；突出移动端网站的会议与活动功能。用户体验方法有：设计移动端网站专用视觉识别系统体系；设计移动端网站统一的用户界面组件；使用良好的交互细节以实现功能。提升用户体验的预期效果有：同步提升用户体验与网站形象；加强视觉识别度和美观度；内容阅读体验活泼友好，时效性强。

该阶段确定了移动端网站的栏目结构，以此为基础开展后续的具体设计工作，并制作了相关的工作计划与功能需求文档。

导向化视觉识别系统设计阶段

河南省教育科研网网站标志，在设计之初没有统一的视觉识别体系，存在色彩繁琐、字体不统一、组合用法混乱等问题，如图2所示。为解决以上问题，需要重新完成视觉识别系统的基础要素设计，重绘矢量图形文字标志，重新定义以“经典蓝”为基准的色彩体系，强调辨识度与应用场景导向性，如图3所示。

图2 设计前：单一标志

图3 设计后：视觉识别系统基础要素

前两个阶段确定下来的栏目内容和视觉识别系统，为下一阶段交互界面设计提供支撑。使用统一的视觉识别系统，可以提升设计效率。

集成化交互界面设计阶段

用户界面组件设计环节是整个移动端设计的基石，也是体现集成化交互界面设计“统一、快速”优点的所在。首先，以视觉识别系统为导向来设计更为详细的用户界面要素，包括通用界面字体、颜色、按钮、图标等具体的界面组件，这些组件构成如首页、正文页、列表页等更高层级的用户界面模板。如果在这个过程中用户体验需求发生变化，则返回第一步进行组件样式更新迭代。这一循环的设计过程使河南省教育科研网移动端网站的设计风格更加简约、明快，通用性强。

移动端网站的交互和桌面端有很大差别，比如光标与手指的交互差异、横向信息与纵向信息的转换差异等。通常来说，移动端的交互热区不能小于44px，所以在信息呈现方面，移动端网站的组件采用灵活的标签卡片组合设计方式，能更方便用户触摸，使信息传达更直接有效。在首页每个栏目的呈现方面，使用符合用户需求和模板规范的图文卡片系统，还可以用不同的标签来表示栏目的区别。

交互界面集成化设计有利于动态交互展示。通过新型集成化设计软件，可以将每个独立的页面进行连接，实现界面和交互同时进行，相互验证，高度还原用户的真实操作过程；无代码化的设计流程，降低了开发环节验证用户体验的试错成本。图4展示了设计过程中详细的交互流程关系，便于在实际设备上进行展示。通过软件云端服务，可以把高保真交互原型分享给团队其他成员，一同展开测试。

图4 高保真交互原型设计

下面是移动端网站在集成化交互界面设计阶段的一些细节说明。

首页设计

在使用用户界面组件的前提下，重新设计了移动端首页的结构，在加强视觉冲击和信息传达的同时，保证标志和导航入口清晰明了，自适应布局也更利于多种尺寸设备访问。首页上方使用了通栏导航栏，它在初始化状态下，可以与背景图片融为一体，节省网页头部空间；在页面上滑至背景消失后，则逐渐恢复至网站主色调风格。

导航菜单设计

为了做到简单易懂、信息层级明确、导航效率高，移动端网站在顶端右侧采用通用型的菜单图标，触摸后可打开“抽屉式”导航菜单，引导用户探索更多内容。由于栏目层级较多，简化后采用多级折叠的交互方式。同时集成了搜索功能，提高界面利用率。

界面交互组件化设计

移动端网站通过图文卡片进行分区展示，通过标签实现横向滑动，达到同一区域实现两种功能的效果，使首页在不同模块视线停留的瞬间都能确保信息传达有指引性，让交互动作自然产生。同时设置返回顶端按钮，正文页底部设置快捷翻页或导航，方便用户阅读。

会议活动界面模板设计

在网站中，实现了会议活动专题页面的迅速发布，让会后内容发布更快速及时，更有利于发挥教育信息化服务的时效性。用户可以查看会议基本内容、精彩图片，以及下载会议相关文件。例如“省网日历”功能基于视觉识别系统的色彩规范展示了活动的预告状态，可直接选中日期，减少用户交互次数。

子栏目与新栏目的深度设计

运用用户界面模板详细设计栏目的独立首页，提高了可扩展性和继承性。例如网站在2022年新增栏目“文件汇编”，将教育信息化重要文件进行整理和汇总，提供分类检索功能。

基金项目：本文的研究工作得到了河南省高等学校重点科研项目（编号：22A520044，23A520019）资助。

作者：蔡馨庆、吕玉玲、林予松（郑州大学河南省教育科研计算机网网络中心）

责编：陈荣

投稿或合作，请联系：[e-mail]

往期推荐

关注我们 了解更多↓

更多精彩视频推荐

欢迎分享、点赞、在看

积极留言还会有惊喜好礼哦~