|
教育网站做为教育信息化工作的重要构成部分，承载着信息发布、业务服务、用户评估等功能。随着移动互联网的发展，移动端网站以其更加灵活方便、不受时空限制等特点，作为用户搜索信息、处理事务的重点方式。为了满足用户需要，更好地发挥网站功能，建设移动端网站作为教育公司信息化工作的必选项。
本文提出了一种系统型用户体验设计办法，经过探究用户体验与视觉识别的内在关系，结合移动端网站特点，融合交互设计、平面设计、界面设计，为教育公司进行移动端网站设计供给了新的思路。
系统型用户体验设计办法概述
本文提出的系统型用户体验设计办法（SUED，Systematic User Experience Design）是一种提高用户体验的新方法。系统型指的是由用户体验要素、视觉识别要素、美学要素、内容策划要素等构成的有机整体，各要素间相互依存、相互转化。该办法包含轻量化用户体验要素模型设计、导向化视觉识别系统设计和集成化交互界面设计三个周期。
第1周期经过用户问卷、数据分析、召开专项论证会等手段确定网站设计方法，针对特定用户的需求来设定网站的栏目内容。第二周期短平快地找到交互界面设计周期的视觉识别重心，为第三周期交互界面设计打下基本。第三周期把交互设计、界面设计两项工作，经过用户界面组件进行相关集成，总结出用户界面模板，将用户界面组件的样式在所有界面上实现同步，更易于扩展和守护，提高用户体验的统一性和完成度。该办法的重点工作内容如图1所示。
图1 系统型用户体验设计办法
河南省教育研究网移动端网站设计
河南省教育研究网网站（http://www.ha.edu.cn/）重点为全省教育网用户供给信息服务，包括桌面端和移动端。网站最初仅有桌面端，随着移动互联网时代的到来，为了提高网站的易用性，满足用户拜访需要，移动端网站于2021年上线。
因为河南省教育研究网网站结构繁杂，内容较多，适合独立研发移动端网站。在网站的设计和连续优化过程中，项目组运用了前面介绍的系统型用户体验设计办法来提高用户体验。下面介绍详细工作。
轻量化用户体验要素模型设计周期
本周期在进行用户调研、自我筛查、召开专家论证会的基本上，进行了轻量化用户体验要素模型设计。其中用户需要方面的重点有：移动端网站需要精简内容，增多吸引用户的“必选项”，提高用户粘性；内容上明显信息化名人与成果；明显移动端网站的会议与活动功能。用户体验办法有：设计移动端网站专用视觉识别系统体系；设计移动端网站统一的用户界面组件；运用良好的交互细节以实现功能。提高用户体验的预期效果有：同步提高用户体验与网站形象；加强视觉识别度和美观度；内容阅读体验活泼友好，时效性强。
该周期确定了移动端网站的栏目结构，以此为基本开展后续的详细设计工作，并制作了关联的工作计划与功能需要文档。
导向化视觉识别系统设计周期
河南省教育研究网网站标志，在设计之初无统一的视觉识别体系，存在色彩繁琐、字体不统1、组合用法混乱等问题，如图2所示。为处理以上问题，需要重新完成视觉识别系统的基本要素设计，重绘矢量图形文字标志，重新定义以“经典蓝”为基准的色彩体系，强调辨识度与应用场景导向性，如图3所示。
图2 设计前：单一标志
图3 设计后：视觉识别系统基本要素
前两个周期确定下来的栏目内容和视觉识别系统，为下一周期交互界面设计供给支撑。运用统一的视觉识别系统，能够提高设计效率。
集成化交互界面设计周期
用户界面组件设计环节是全部移动端设计的基石，亦是表现集成化交互界面设计“统1、快速”优点的所在。首要，以视觉识别系统为导向来设计更为仔细的用户界面要素，包含通用界面字体、颜色、按钮、图标等详细的界面组件，这些组件形成如首页、正文页、列表页等更高层级的用户界面模板。倘若在这个过程中用户体验需要出现变化，则返回第1步进行组件样式更新迭代。这一循环的设计过程使河南省教育研究网移动端网站的设计风格更加简约、明快，通用性强。
移动端网站的交互和桌面端有很大差别，例如光标与手指的交互差异、横向信息与纵向信息的转换差异等。一般来讲，移动端的交互热区不可少于44px，因此在信息呈现方面，移动端网站的组件采用灵活的标签卡片组合设计方式，能更方便用户触摸，使信息传达更直接有效。在首页每一个栏目的呈现方面，运用符合用户需要和模板规范的图文卡片系统，还能够用区别的标签来暗示栏目的区别。
交互界面集成化设计有利于动态交互展示。经过新型集成化设计软件，能够将每一个独立的页面进行连接，实现界面和交互同期进行，相互验证，高度还原用户的真实操作过程；无代码化的设计流程，降低了研发环节验证用户体验的试错成本。图4展示了设计过程中仔细的交互流程关系，便于在实质设备上进行展示。经过软件云端服务，能够把高保真交互原型分享给团队其他成员，一同展开测试。
图4 高保真交互原型设计
下面是移动端网站在集成化交互界面设计周期的有些细节说明。
首页设计
在运用用户界面组件的前提下，重新设计了移动端首页的结构，在加强视觉冲击和信息传达的同期，保准标志和导航入口清晰明了，自适应布局亦更利于多种尺寸设备拜访。首页上方运用了通栏导航栏，它在初始化状态下，能够与背景照片融为一体，节省网页头部空间；在页面上滑至背景消失后，则逐步恢复至网站主色调风格。
导航菜单设计
为了做到简单易懂、信息层级知道、导航效率高，移动端网站在顶端右侧采用通用型的菜单图标，触摸后可打开“抽屉式”导航菜单，引导用户探索更加多内容。因为栏目层级较多，简化后采用多级折叠的交互方式。同期集成为了搜索功能，加强界面利用率。
界面交互组件化设计
移动端网站经过图文卡片进行分区展示，经过标签实现横向滑动，达到同一区域实现两种功能的效果，使首页在区别模块视线停留的瞬间都能保证信息传达有指引性，让交互动作自然产生。同期设置返回顶端按钮，正文页底部设置快捷翻页或导航，方便用户阅读。
会议活动界面模板设计
在网站中，实现了会议活动专题页面的快速发布，让会后内容发布更快速即时，更有利于发挥教育信息化服务的时效性。用户能够查看会议基本内容、精彩照片，以及下载会议关联文件。例如“省网日历”功能基于视觉识别系统的色彩规范展示了活动的预告状态，可直接选中日期，减少用户交互次数。
子栏目与新栏目的深度设计
运用用户界面模板仔细设计栏目的独立首页，加强了可扩展性和继承性。例如网站在2022年新增栏目“文件汇编”，将教育信息化重要文件进行整理和汇总，供给归类检索功能。
基金项目：本文的科研工作得到了河南省高等学校重点研究项目（编号：22A520044，23A520019）帮助。
作者：蔡馨庆、吕玉玲、林予松（郑州大学河南省教育研究计算机网网络中心）
责编：陈荣
投稿或合作，请联系：eduinfo@cernet.com
| 
发表于 2024-7-27 13:13:27