基于移动智能设备的H5应用界面（GUI）设计策略_陈鲜.pdf

时 尚 设 计97文章提出了一套移动终端 H5 应用界面设计方法。从传播需求、人机交互两个方面入手，剖析了 H5 的交互应用的分类；探讨了 H5 界面设计原则与方法。按此设计原则，从设计范畴对移动设备的适配性、可视化图标、图形、框架与传播内容的一致性、用户行为与交互反馈的耦合性提出优化设计与策略。并从用户体验的角度，对 H5 的传播界面版式设计运用案例进行了剖析。随着移动互联网技术及 5G 技术的发展，为以 H5技术为构架，传播为目标的自媒体应用的出现提供了新的契机。目前，H5 架构的传播应用（以下简称“H5应用”）界面设计存在版面信息杂乱、内容弱、交互线上体验差等问题，导致使用率低，严重影响了 H5移动应用的传播效率。因此，在充分了解 H5 的技术特点的基础上对交互设计方法和策略的优化，从而改善用户体验方式，是必要的。一、H5 传播交互分类与特征目前，H5 应用主要包括邀请函、招聘、新闻等传播需求和游戏、故事、视频等娱乐需求两大类移动应用。主要包括人与人交互、人与机器交互、机器与机器交互三种关系。交互本质是表达和交流人的不同思想和意愿。而交互设计主要是指基于用户需求制定信息构架、基于用户行为设计交互方式、通过界面框架与图形风格表达交互形式的设计创作过程。（一）视听交互在 H5 应用中，交互性可以确保不同媒介之间形成良好的融合关系。影音作为一种常用的信息形式，可以实时地调整和设置内容。H5 应用界面具有动态运动画面的设计，可以提高交互行为的实时性，同步用户对反馈内容的理解。通过将音频添加到 H5 应用中，便于后期多模态的信息呈现，从而提高运用场景的真实感与沉浸感，使得用户达到增强的视听体验。（二）触感识别多点触控是目前屏幕设备主要的交互方式。在 H5应用中，采用多点触控，并设计其交互规则是必需的。多点触控的设计可以使用户获取反馈的行为更加直观。如，滑动、点击等手势对应的操作功能。主要包括按钮的单击、双击（触发）；单指多向滑动（导航）；双指间的内滑与外滑（缩放）。简单而一致的交互规则的建立，可以提高 H5 界面的可用性与易用性，降低用户体验过程中的认知负担。（三）多屏显示多屏显示可以让我们分屏幕显示内容。根据需要，在每个屏幕上显示不同的内容或多个屏幕上分配图像、视频和动画等不同元素。特别适合于多人协作的应用。多屏交互方式可以有效地突破传统通信方式的局限性，安全、可靠地传输和接收综合媒体业务内容。二、H5 传播交互界面设计（一）H5 传播交互界面设计原则1.操作方便快捷H5 的交互界面设计，应确保操作功能具有方便快捷的特点，同时，设计人员要按分类学原理科学地分类界面所需的各种元素，并对重要的元素进行有效地分类设计，突出触发时的响应状态，确保交互行为发生后及时有效地得到相应的反馈，快速进入下一阶段的决策。这一系列过程中应在准确定义不同的界面功能框架、元件形式和设备的物理限制上完成。2.突出主题在移动端上浏览 H5 界面，一般会因为环境和屏幕的尺寸等外部因素限制，造成主题信息不明确，主次级界面内容重复、导航缺乏逻辑等造成的用户认知负担，不利于用户的准确操作及流畅阅读和浏览体验。基于移动智能设备的 H5 应用界面（GUI）设计策略文|陈 鲜98这无疑严重影响了 H5 的传播功效。所以，要遵循一般分类学与网格设计的原则，突出设计主要传达的信息的表达形式，建立良好的面包屑式的导航机制，确保界面框架与功能表达具有信息整合设计规范、传达的信息内容主次分明、设计呈现形式合理、导航逻辑流畅等特点。3.合理利用交互性H5 应用的交互界面设计核心是突出界面的主题性，其构架的优势就在于对多模态信息的兼容与整合能力。所以设计人员要在全面考察和研究界面的基础上，合理构建清晰界面组织框架，将动画、音频、视频等元素合理至于其中，确保多模态的信息形式逻辑被用户调用与获取。同时，在良好的交互设计基础上，通过良好的交互体验，可使得交互界面的娱乐性、趣味性得以大幅度提高。此外，交互界面导航保持一致性通常会涉及的链接、查询、索引等功能。除了在图标图示设计上的差异以外，在交互行为上因采取主动探究的设计策略，例如为导航功能预留悬浮线索；响应过程中的多模态提示性元素；增加未知性等。与此同时，本着降低用户学习成本的原则，尽量使用户的短时记忆就能很快掌握其交互规则，降低认知负担，更好地激发用户读取界面的能力与兴趣。4.视觉设计与用户体验相结合在互联网时代背景下，用户在浏览界面，通常会无目的、无针对性地点击行为，尝试性获取自己感兴趣的信息。所以，除了要综合考虑界面版式、色彩等元素以外，还要将艺术风格设计与用户使用体验进行有效结合，并利用 H5 相关技术，完成对该交互界面的科学化设计。同时，还要结合用户的个性化使用需求，将界面内容与各个造型元素进行有效结合和分配。采用语义学的设计策略，确保用户在浏览过程中视觉风格与要传达的内容信息相匹配，快速准确地操控和获取有价值的信息，从而有效地达到 H5 应用传播目的。（二）H5 交互界面设计方法为了获得良好的 H5 传播效益，设计人员应严格按照缩小操作区域遵循阅读规律音频辅助动效信息清晰易读的设计流程，对其交互界面进行科学化设计。1.缩小操作区域，方便单手模式对于移动设备而言，虽然屏幕像素尺寸具有由小变大的特点，但是其物理属性决定了界面的框架设计采取单界面或者多界面结构。在跨平台需求下，通常在移动设备中以自适应的策略应对。例如，按钮的设计，要确保所设置的位置必须满足用户单手操作需求。在特定情况下，用户采用简易触发方式，可以自动进入单手模式，确保操控范围不断缩小。另外，谨慎使用左右滑动操作模式，这是由于单手操作，很容易导致当前界面返回到上一级界面中。按钮位置必须与界面底部保持一定的距离，在缩小操作区域的基础上，对各种屏幕进行适配处理。对于移动终端而言，其屏幕大小一旦设置不统一，会增加不同终端设备屏幕显示的差异性。所以，为了确保屏幕所呈现信息的全面性和完整性，按钮要尽可能地远离界面底部。2.遵循阅读规律，增强关键信息在信息时代背景下，用户碎片化阅读趋势越来越明显，如果界面设计缺乏一定的主次性，很难激发用户继续阅读的兴趣。相关心理研究表明，在同一个界面中，上侧、左侧两个位置给用户提供一种轻松、自由之感，下侧、右侧两个位置主要给用户一种压抑、稳重之感，表明了上方界面对用户所产生的视觉影响力远超过下方界面。结合用户视觉心理特征，遵循这些阅读规律，对界面版式进行科学化设计。设计中应结合实际情况，将核心功能集中于界面上侧，增加其易识别性，同时，确保界面具有清晰完整的框架布局，提高用户的易读性。在此基础上，梳理整个版面信息的整合逻辑，确保界面主题明确、主次清晰。对于点击率高的信息模块而言，需要对模块颜色进行特殊处理，确保鼠标移动到该模块后，会增加该模块颜色明度。反之，对于点击率低的信息模块而言，需要将其颜色明度设置为减弱状态。这样一来，有利于提高界面的主次性，帮助用户在视觉上快速、有效地获取重要信息。时 尚 设 计993.音频辅助动效，丰富视听感受重视对声音效果的设置，借助声效辅助强调和突出信息及其状态变化。另外，由于 H5 代码面向对象，所以，即使零编程基础的设计人员也能借助在线编辑器，进行零代码开发。为了保证 H5 界面设计的科学性和合理性，重视对音频的添加和设置，便于后期辅助显示图形动效，打造立体的真实感场景，提高用户的视听体验。4.信息清晰易读，图形设计扁平化对于移动终端设备的多样性而言，其屏幕的物理尺寸与分辨率大小各异，所显示的内容具有一定的多样性、复杂性、灵活性等。一般通过图形界面的扁平化设计，可以更好地适应不同物理及数字限制。此外，遵循轻量化、扁平化的设计理念，采用轻盈信息表现方式，突显出重点信息，降低用户获取有用信息的学习与认知成本，从而提高重要信息传播的功效。此外，通过采用轻量级的设计策略，也可以从根本上解决用户注意力过于分散的问题，确保用户能够同步获取目标信息。图形扁平化设计模式的运用，也可以从时尚设计的角度提高界面的美感和程序设计质量。通过将复杂图形设计模式直接转变为图形扁平化设计模式，提供给用户高效、准确、时尚的生活化阅读体验。三、H5 传播交互界面版式设计运用案例（一）字号字形适配移动端对于 H5 应用而言，其界面具有跨平台的兼容性，因此文字信息可轻易地移植到相关平台上。为了更好地满足不同大小移动终端屏幕显示需求，字体设计的尺度必须要有效地匹配屏幕大小。一般将界面字体大小直接设置为小于 18 号加粗字体，从而增加屏幕字体的识别度。同时，将单一字体设计全面贯彻于整个 H5界面设计中，确保整个界面内容表现了一定的统一性、连贯性和整齐性。（二）可视化图形突出主题传统数字媒体界面存在的一定的技术局限性，而H5 应用在实际设计中，采用无插件的方式，将图片、视频、音频等元素直接嵌入交互界面中，确保图形在整个交互界面设计中呈现出生动性、灵活性等特点。图形主要用于对视觉信息的传达，H5 界面所应用的图形主要包含以下两种形式：第一，平面图像；第二，二维图像。但所有元素均可以归纳为图像属性。通过有效地选择信息可视化内容，可有效降低文字的出现概率。（三）视听文件压缩体验佳媒介不同，对不同感官所起到的作用也存在一定的差异，书面媒体对用户视觉产生直接性影响，从而能确保用户的感知快速形成相应的阅读空间情境。H5 传播交互界面更能接近这样一种自然式阅读交互的情境。其不仅局限于图形界面，还涉及超媒体设计，将视觉、听觉、触觉进行有效结合，也已成了利用多模态交互设计策略达到自然交互的一种常用的设计创新手段与技术开发形式，实现对自然阅读情境的打造。四、结语综上所述，移动终端的屏幕与配置的物理限制，导致其所呈现的视听感受也存在一定的差异，这为 H5界面设计与开发提出了更高的要求。同时，在信息技术发展背景下，人们获得信息渠道变得越来越广泛，而移动终端 H5 传播交互界面的设计经验的积累能更好地促使其匹配技术发展的特点，有效地满足人们的使用需求。同时，设计人员要重视对新的开发技术特点地掌握。要将设计美学与用户使用中的自然体验进行充分结合，确保用户需求与产品设计之间形成一种有效的交互关系。参考文献：1陈柳海.移动终端H5传播交互页面设计的探讨J.动漫先锋，2021（11）：43-44.2陈国鑫，姚铭昊，李立杰.移动终端H5传播交互页面设计的思考J.神州，2018（1）：246.3费蓉.移动端H5传播的交互类型探析J.艺术科技，2019，32（20）：47，83.作者简介：陈鲜，江苏省广播电视总台，江苏南京。