wrjc1hod 发表于 2024-7-27 13:13:27

郑州大学：教育网站移动端界面设计与优化


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




wrjc1hod 发表于 2024-10-30 05:09:26

我们有着相似的经历，你的感受我深有体会。

4lqedz 发表于 6 天前

顶楼主，说得太好了！
页: [1]
查看完整版本: 郑州大学：教育网站移动端界面设计与优化