电力企业移动应用前端开发规范的设计和实现研究.pdf

Industrial Technology Innovation产业科技创新 2023，5（3）：5660国家电网在“十四五”数字化转型1的规划中提出依托新一代移动互联技术加速实现一线员工、企业、客户之间的信息互联，实现人、设备、数据之间的移动连接，对企业的内部与外部进行赋能，激发新型生产组织模式与互动方式。借助移动终端与物联设备开展众筹、众包、远程派单等组织模式变革与生产作业优化；打造“互联网+”工作方式，提升企业员工办公与一线作业的在线共享协同能力；发挥数据连接作用，建立多主体的连接互动关系，拉近服务主体与电网之间的距离，增强电网多向互动的能力，重塑企业服务流与价值链的传播形态。以数字化理念为指引2，以数字化底座为保障、以数字化工具为手段，促进移动作业、人机协作、远程协同、机器代人的工作新模式，从以线下独立作业为主导的工作模式逐渐转变为自动化、协同化、高效化的工作模式。随着移动互联网、5G 等网络技术的不断发展，可利用手机、平板等移动终端实现作业移动交互和人员迅捷沟通；可利用移动终端实时更新共享作业进度，并通过拍照、视频、录音等方式实现作业过程全记录。移动端作业状态的自动更新和实时查看可以节省班组成员的跨专业沟通成本，使问题及时发现并得到反馈。本文主要从色彩、字体、移动端页面布局、按钮、列表、表单、选择器七个维度对基于 UIUX 规范的数字化领域的在运系统移动端的设计进行详细的说明，并规范移动应用的建设。1 研究意义上海欣能信息科技发展有限公司承接了大量上海电力应用系统的研发实施和运维工作，其中部分应用包含移动端应用的建设，同时在技术体系上，这些应用又可以区分为原生 app、移动 H5、内网移动作业平台和 i 国网移动应用等数类。欣能公司承担建设的业务系统数量众多，各种系统存在 UI 交互体验不一，技术不统一等现状问题。一部分基于国网信通公司的要求所建设的移动应用项目，这些项目主要以 i 国网为框架进行建设，在开发规范、技术要求、安全认证上具有一致性，另一部分基层的供电公司或者是建设的一些非电力类项目中，移动类系统的开发仍然五花八门，原生的 app，H5 等各种技术产出的应用参差不齐，这些项目没有统一的规范，也没有统一的技术栈，安全认证更是没有达到相应的标准。根据以上现状，有必要对在运系统的移动化技术路线进行梳理，研究系统的 UI/UX 规范、技术架构路线以及业务模式，形成一套相应的移动开发规范。2 设计目标2.1 图标规范图标与品牌标志一样，在设计时都需要做适当的减法，用简约的线条表达其含义，尽量避免出现线条结构过于复杂的设计，而且整体的图标需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等。电力企业移动应用前端开发规范的设计和实现研究陈华荣，盛 杰，开大宁，唐家俊，张楚健（上海欣能信息科技发展有限公司，上海200025）摘要：如今移动端应用加速了移动业务的发展进程，人们可以利用这些移动端应用软件随时随地进行沟通交流。在企业中，移动应用可以有效地拓展办公空间，大幅提升员工的工作效率，使得企业的整体运作更加协调，但是随之而来的是各种移动应用界面风格不统一、交互不统一，没有一套完整的前端设计规范，因此设计一套移动端应用前端规范具有非常重要的价值和意义。本文主要从设计目的入手，研究设计一套适合于电力企业行业的移动端前端设计方案并分析如何应用于实际业务。关键词：移动端；UIUX 规范；数字化领域；在运系统中图分类号：F407.61 文献标识码：A 文章编号：2096-6164（2023）03-0056-05作者简介：陈华荣（1980-），男，上海人，咨询工程师，主要从事国网上海市电力公司官方网站、国网上海电力环保系统、国网上海电力员工服务保障系统等工作。57第5卷 第3期陈华荣等：电力企业移动应用前端开发规范的设计和实现研究 2.2 版式设计规范版式设计又叫做版面编辑，即在有限的版面空间里，将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列。2.3 文字设计规范文字是移动应用中最核心的元素，是产品传达给用户的主要内容，所以说文字在移动应用的设计中是非常重要的。2.4 标注规范如何把标注的思路整理清晰？可以结构化思维进行拆解，将大问题拆解成小问题，逐一击破！标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。2.5 交互规范简化操作：能一步完成的交互就不要分两步。用户习惯：大部分用户都有固化思维，作为设计师应该尊重数据，尊重用户选择。减少干扰：减少界面元素的不确定因素，方便用户快速找到自己需要的内容。快速响应：加快用户读取的响应速度，尽量避免从远程读取数据。界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。3 设计方案3.1 色彩样式设计色彩是用来传递信息，沟通状态，提供操作反馈，保持体验一致的重要元素，分为主色、功能色、中性色，各版块内容应进行适量地调色，统一而不单调。（1）主色的制定是为了保持产品的识别性，并传达有效信息，指引操作并交互反馈，应严格遵循清晰明确、简洁统一的设计原则，如图 3-1 所示。图3-1 主色样式（2）功能色是表示明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。为尽量减少干扰用户的认知体验，在设计的过程中尽量保持功能色一致，减少过多的自定义。（3）中性色又称为无彩色系，能在产品页面中调和色彩搭配，衬托主色及其它色彩，同时有利于拉开内容层次，使用户更专注于内容。中性色常用于文字、填充、线条等元素，如图 3-2 所示。图 3-2 中性色样式3.2 字体样式设计文字是产品界面中最基本的沟通方式。而字体的规范主要解决内容的可读性以及信息的层级表达，同时选择不同的字体、字号、字重、行距来维持垂直的韵律，传达不同设计风格的统一性和整体性，从而在阅读的舒适性上达到平衡，如图 3-3 所示。图 3-3 字体样式为确保移动终端的通用性，让用户通过文字来理解内容和完成工作，科学的字体系统应该具有良好的可读性。无衬线体更加亲和与清晰，便于阅读，因此中文字体和西文字体优先使用各个系统中默认的无衬线字体。（苹果默认中文字体为苹方简体，安卓情况多样，各家厂商都有自己定制的独家字体，如华为的HarmonyOSSansSC，oppo 的 opposans 等）。特殊的数字字体（如核心数据展示等）可以使用如 Din 这类的等宽字体（每个数字宽度一致），样式独特且节省空间。3.3 移动端页面布局移动端页面主要分为标题导航栏、标签栏、标签页。3.3.1 标题导航栏标题导航栏位于页面顶部，为页面提供全局导航功能，受限于手机屏幕尺寸，标题导航栏的样式应尽量设计简单。标题导航栏的左边是导航区，一般出现在二级页面中，可以使用图标或纯文字“返回”；中间是标题区，产业科技创新IndustrialTechnologyInnovation58Vol.5 No.3表明当前标题所在的位置，最多显示 13 个字符，超出长度采用缩略方案；右边是操作区，一般放快捷键操作按钮，可以根据不同的页面场景进行自定义操作，标题导航栏的构成如图 3-4 所示。图 3-4 标题导航栏的构成标题导航栏常见的组件类型如图 3-5 所示。图3-5 标题导航栏常见的组件类型3.3.2标签栏标签栏通常位于页面底部，可以帮助用户切换跳转至不同的页面。标签栏中的底部标签最多设置 4 个，以图标与文字的形式展示，其中图标搭配主题色，文字描述当前所在页面的内容，不可超过 4 个字符。基于操作行为区分点击状态和非点击状态，若标签有更新信息，将在非点击状态右上角出现含数字的小红点提醒用户，点击切换后，小红点消失，标签栏的构成如图 3-6 所示。图3-6 标签栏的构成标签栏常见的组件类型如图 3-7 所示。图 3-7 标签栏常见的组件类型3.3.3标签页标签页大多出现于页面顶部或标题导航栏下方，方便用户在不同页面内容之间进行快速点击切换和滑动。标签页常用于次级页面或二级分类，标签主要是用于简短的文字描述（可附带图标）与总结相应视图中的内容，标签数量控制在 2 至 4 个，且标签内容不可超过 4 个字符，标签页的构成如图 3-8 所示。图 3-8 标签页的构成标签页常见的组件类型如图 3-9 所示。图 3-9 标签页常见的组件类型3.4 按钮样式设计按钮基本用于触发功能，是进入流程、完成业务的操作组件，一般由图形化元素（如圆角矩形）、label 和 icon 构成，如图 3-10 所示。图3-10 按钮样式59第5卷 第3期3.4.1长按钮长按钮可浮动在页面的任何位置，用于承载页面业务的触发功能，分为主按钮和次按钮两种类型。主按钮用于触发页面的主流程，以色块按钮为表现形式，次按钮用于触发页面的分支流程，以无色色块与幽灵按钮为表现形式，如图 3-11 所示。应用场景描述：适用于结束性强的页面，例如申办成功结果反馈页面。主按钮用于引导用户进行该页面主流程，次按钮根据业务场景判断是否存在分支流程而选择出现，如认证结果反馈页面，认证成功只存在一个业务流程，则只出现主按钮“返回”；如认证失败，存在引导用户“重试”和“返回”的流程，则同时出现主次按钮。图3-11 长按钮样式3.4.2短按钮短按钮可嵌入在页面中不同的内容模块中，用于承载内容模块业务的触发功能，也分为主按钮和次按钮两种类型。主按钮用于触发该模块的主流程，以色块按钮为表现形式，次按钮用于触发该模块的分支流程，以幽灵按钮为表现形式，如图 3-12 所示。应用场景描述：适用于空白页或异常页，没有明显主流程的页面，主要用于触发某一模块的某一功能。图 3-12 短按钮样式3.5 列表样式设计列表是一种组织内容的方式，分为行为操作逻辑和内容展示逻辑，常见的形式有一行一行的项目、一段一段的文本、图片或视频的缩略图。行为操作逻辑中常见的列表形式有单行列表、双行列表、用户列表，如图 3-13 所示。在行为操作逻辑中轻点列表中的某个条目，就会进入到内容层级结构的下一级，或者展现该条目的内容，或者进入到下一级3分组结构。图 3-13 行为操作逻辑中常见的列表样式内容展示逻辑中常见的列表形式有资讯类列表、内容类列表、特殊形式的瀑布流列表，如图3-14所示。在内容展示逻辑中列表长度可以是有限或无限的，即允许无限滚动。无限滚动用于列出大量的数据（例如搜索结果），用户每次滚动到列表底端，列表就会继续列出更多的结果。图 3-14 内容展示逻辑中常见的列表样式3.6 表单样式设计表单主要负责数据采集功能，表单类型根据场景需求分为展示操作型和文本输入型。完整的表单包括图标、标题区、说明区、操作区，如图 3-15 所示。图标：只有一个图标，图标的设计是标题名称的图形化展示。标题区：分为主标题和副标题，文案可自定义。文字展示区域固定，超出长度采用缩略方案。说明区：分为主说明和二级描述，针对列表内容进行描述或者状态的展示，也可使角标的形式作为消息提醒展现。操作区：根据不同列表类型进行自定义操作，最多可定义 1 个图标。陈华荣等：电力企业移动应用前端开发规范的设计和实现研究 产业科技创新IndustrialTechnologyInnovation60Vol.5 No.3图 3-15 表单的构成3.6.1展示操作型表单展示操作型表单右边操作区域放“”右向箭头、引导进行点击的操作，点击热区为整条，如图3-16所示。应用场景描述：根据不同的内容类型，点击后的展示有所区别，主要分为弹层和打开新的页面两种方式。点击后打开弹层在一个控件内选择多项相应的信息（如地址选择器），在当前页面进行内容的快速选择并填充。打开新的页面后需要用户大量输入和操作的内容（如个人资料管理、图片上传等）。图 3-16 展示操作型表单样式3.6.2文本输入型表单文本输入型表单是通过键盘录入数据，适用于少量文字录入的场景，如图 3-17 所示。应用场景描述：根据不同内容的输入场景，可针对性的限制输入框中输入的信息类型，如姓名、年龄、手机号、银行卡号、邮编4等；在激活不