Meri Design

中

En

页面层级

  • 非应用内页面层级不超过5级；
  • 面板层级不超过2层（可通过面板内左右交互进行内容拓展）；
  • 封装在应用内的页面不限制层级数量；
  • 功能模块相对对立、信息维度复杂、二次触发操作较多的需求建议采用独立页面，与当前页面有高粘度数据互动（即时查看、录入、回显数据等操作）需求建议采用动态面板；

例如：排查处理中选择措施的【添加其他】提供双层面板和左右交互处理

例如：资产检索中可能存在多层级下钻所以进行应用结构封装

例如：排查处理工单执行场景功能独立、信息维度复杂、触发交互较多采用页面，添加问题原因需要即时回显到执行页故采用面板

例如：巡检工单中点击单条任务记录结果，虽然数据粘粘性强，但相关触发操作过多只能通过独立页面进行承载

微交互

  • 普通下钻页面进入/返回采用左右运动、左上关闭图标页面进入/返回尽量采用上下运动、展开收起需要有缓动效果、动态面板沿用组件效果即可；
  • APP中iOS/Android均有原生页面微交互样式，如涉及功能为原生页面搭建可让对应开发联系iOS/Android相关开发人员应用交互效果；
  • H5页面搭建的功能应尽量调用组件，组件自带微交互效果，如果开发实现没有效果可让其再熟悉下组件调用说明；

可上方查看微交互演示效果视频

间距

  • 卡片内容区距离顶部导航栏常规间距12px；
  • 为方便与其他组件元素对齐，卡片内容区左右常规间距16px；
  • 卡片之间的常规间距为6px（特殊场景可选择8、12、16之类的间距）；

例如：巡检工单中的卡片模块间距

字体字号

  • 为保证更稳定的显示效果，移动端中的字体跟随设备系统字体，无需单独与开发交付（设计稿中可采用苹方进行设计）
  • 一级标题文本采用16加粗字号（其他场景需要更高层级标题可自定义字号）；
  • 二级标题14加粗，正文通用文本14号（可通过颜色区分视觉层级）；
  • 细节补充说明文本可采用12号，底部菜单文本可采用10号（最小文本）；
  • 可点击、强调文本可加粗强调或通过搭配穿透图标等方式进行视觉引导；

例如：排查处理工单中的问题描述小蓝标、正文、点击文本的相关字号使用

小蓝标

  • 移动端组件提供14和16两个字号的小蓝标以供调用，大部分场景下小蓝标作为一级标题使用（16），部分场景下需要在一级标题下通过小蓝标进行二级标题分类可采用14号；
  • 小蓝标文本尽量与下方文本内容对齐，如下方内容为图片左对齐即可；
  • 为保证更好的间距一致性可调用小蓝标表头组件；
  • 小蓝标文本超出支持换行和省略处理，换行需进行顶对齐；

例如：异常事件列表中的16号小蓝标以及措施详情中的14号小蓝标的使用

例如：巡检工单中师傅需要完整查看设备名称，采用换行处理

Meri Design

使用指南

组件使用规范

移动端一致性

梅里雪山设计系统

中

En

页面层级

  • 非应用内页面层级不超过5级；
  • 面板层级不超过2层（可通过面板内左右交互进行内容拓展）；
  • 封装在应用内的页面不限制层级数量；
  • 功能模块相对对立、信息维度复杂、二次触发操作较多的需求建议采用独立页面，与当前页面有高粘度数据互动（即时查看、录入、回显数据等操作）需求建议采用动态面板；

例如：排查处理中选择措施的【添加其他】提供双层面板和左右交互处理

例如：资产检索中可能存在多层级下钻所以进行应用结构封装

例如：排查处理工单执行场景功能独立、信息维度复杂、触发交互较多采用页面，添加问题原因需要即时回显到执行页故采用面板

例如：巡检工单中点击单条任务记录结果，虽然数据粘粘性强，但相关触发操作过多只能通过独立页面进行承载

微交互

  • 普通下钻页面进入/返回采用左右运动、左上关闭图标页面进入/返回尽量采用上下运动、展开收起需要有缓动效果、动态面板沿用组件效果即可；
  • APP中iOS/Android均有原生页面微交互样式，如涉及功能为原生页面搭建可让对应开发联系iOS/Android相关开发人员应用交互效果；
  • H5页面搭建的功能应尽量调用组件，组件自带微交互效果，如果开发实现没有效果可让其再熟悉下组件调用说明；

可上方查看微交互演示效果视频

间距

  • 卡片内容区距离顶部导航栏常规间距12px；
  • 为方便与其他组件元素对齐，卡片内容区左右常规间距16px；
  • 卡片之间的常规间距为6px（特殊场景可选择8、12、16之类的间距）；

例如：巡检工单中的卡片模块间距

字体字号

  • 为保证更稳定的显示效果，移动端中的字体跟随设备系统字体，无需单独与开发交付（设计稿中可采用苹方进行设计）
  • 一级标题文本采用16加粗字号（其他场景需要更高层级标题可自定义字号）；
  • 二级标题14加粗，正文通用文本14号（可通过颜色区分视觉层级）；
  • 细节补充说明文本可采用12号，底部菜单文本可采用10号（最小文本）；
  • 可点击、强调文本可加粗强调或通过搭配穿透图标等方式进行视觉引导；

例如：排查处理工单中的问题描述小蓝标、正文、点击文本的相关字号使用

小蓝标

  • 移动端组件提供14和16两个字号的小蓝标以供调用，大部分场景下小蓝标作为一级标题使用（16），部分场景下需要在一级标题下通过小蓝标进行二级标题分类可采用14号；
  • 小蓝标文本尽量与下方文本内容对齐，如下方内容为图片左对齐即可；
  • 为保证更好的间距一致性可调用小蓝标表头组件；
  • 小蓝标文本超出支持换行和省略处理，换行需进行顶对齐；

例如：异常事件列表中的16号小蓝标以及措施详情中的14号小蓝标的使用

例如：巡检工单中师傅需要完整查看设备名称，采用换行处理

按压效果

  • 移动端组件中的按钮、表单等均提供按压效果，如非必要请尽量使用组件完成触发行为，保证按压效果，如需自定义按钮或其他触发控件需设计按压态（并在设计说明中展示，未提及按压态一般开发不会主动增加）；
  • 即时反馈控件（开关、单选、多选、滚轮、滑块、展开收起等）可不提供按压效果；
  • 点击触发文本也需要提供按压态；

移动端组件中均提供完整的按压态（即时控件没有按压态）

可根据具体触发控件样式选择合适的按压处理方式

选中效果

  • 不同组件选中效果有所区别，可通过以下示例进行参考使用；

不同控件的选中效果如上

多选/单选

  • 数量3个以内，文本较短的场景可考虑采用外露的单选单元格，其他场景通过单选面板进行选择；
  • 多选面板/页面中枚举选项超过6个建议采用底部多选快捷操作业务组件；

数量少、文本少直接外露选择

例如：排查处理工单选择对象均支持底部多选快捷操作

触发热区

  • 屏幕触控热区375原型中最小尺寸建议保持在24x24以上；
  • 部分触控元素较小可增加透明容器，保证触控区域热区面积；
  • 如遇到空间不足的情况，应尽量在限制空间内将热区最大化；

例如：巡检工单中和异常事件中的触控热区设置

激活键盘

  • 如输入框/搜索框为必填或必经流程时进入页面可自动聚焦呼起键盘；
  • 带后续【搜索】【保存】等流程的输入框/搜索框激活键盘后尽量保证键盘右下按钮能直接触发减少操作；
  • 多个连续输入框需要支持键盘换行；

例如：巡检工单中添加自定义自动聚焦呼起键盘、用户报事自定义位置键盘支持确定、参数测量支持多个输入框间的换行

内容请求

  • 内容请求时间超过500ms需要增加loading
  • 局部内容请求时间过长可采用组件加载样式或骨架屏等局部加载；
  • 全局内容请求时间过长可采用全局加载样式；

例如：巡检工单中提交工单时的按钮加载、参数计算时局部加载

例如：排查处理工单进入全局加载、搜索指派人全局加载

边缘返回

  • 带返回箭头的页面需要支持左侧边缘左滑返回手势操作（目前左滑返回需要通过原始框架实现，建议在设计说明中告知相关开发添加手势）；

带返回按钮页面可通过边缘左滑返回上一级

下拉刷新/滚动加载

  • 下拉刷新有设计/开发组件，可告知开发直接进行调用，对应的完整交互步骤可通过组件说明中的链接到开发页面进行查看；
  • 滚动加载目前没有固定的组件样式，可通过单独的加载控件或者加载与文字组合进行使用；
  • 滚动到底部可进行类似【暂无更多】类型文案提示（滚动加载组件提供该能力）；

组件库提供下拉刷新组件和加载组件以供开发使用，下拉刷新目前实现形式较多，未要求完全的一致

反馈提示

  • 操作失败、成功等行为需要提供全局提示；
  • 重要的提示信息需通过弹窗或顶部通知栏等强提醒样式进行提示；

例如：工单中的扫码二维码/NFC全局提示反馈；新建用户报事未保存离开时的弹窗提示

搜索交互

  • 点击触发搜索框自动聚焦并呼起键盘；
  • 激活后的搜索框如非业务场景需要，尽量提供取消按钮以退出搜索态；
  • 聚焦呼起键盘后内容区空白展示；

搜索激活后和结果检索效果

超出处理

  • 移动端应尽量保证文本展示的完整性，重要文本内容需换行完整展示，如有省略处理需支持下钻、展开、气泡、全局提示等交互方式进行信息补充展示；
  • 部分长度不稳定的文本信息可设置达到最大宽度后省略或默认换行，达到最大高度后出现【展开】触发器；

例如：待办工单名称完整展示、消息中心通知概览省略展示、异常通知达到最大高度后自动折叠

禁用点击提示

  • 移动端中的禁用操作应尽量提供点击提示交互，方便用户快速了解禁用原因，尤其高频使用控件被禁用后需提供完整清晰的说明文案；

例如：排查处理工单在不同阶段针对禁用区域支持点击查看解释性提示

信息层级

  • 目前移动端产品已有最大信息层级为四级（一级标题、二级标题、三级标题、四级内容），其分别对应建议样式为：一级标题-小蓝标、二级标题-灰底加粗文本、三级标题-白底加粗文本、四级灰色渐变卡片内容；
  • 如有特殊业务属性可自定义对应层级样式；

例如：排查处理工单中方案审核三级内容，以及维修反馈/选择维修措施中的四级内容和标题样式自定义