江苏龙网

  1. 主页 > 生活百科 > >

移动端UI一致性解决方案( 六 )

ui


移动端UI一致性解决方案

文章插图
积木Sketch Plugin平台化示意
4.1.1 插件功能
积木Sketch插件经过一段时间的建设 ， 目前已具备Iconfont、标准色板、组件库、数据填充、文字模板等功能 。通过Iconfont可以从公司图标库中拉取设计团队上传的SVG图标 ， 并直接应用于设计稿；标准色板可以限定设计师的颜色使用范围 ， 确保设计稿中的颜色均符合设计规范；组件库中包含从外卖业务抽离的基本控件与通用组件 ， 具有可复用和标准化的特点 ， 并与不同开发语言组件库中的代码一一对应；数据填充库可以使设计师采用真实数据进行填充 ， 使设计稿更贴近线上环境；文字模板中内置了字体样式的使用规范 ， 根据设计稿中文字的位置 ， 点击文字图层即可直接应用 。
移动端UI一致性解决方案

文章插图
积木Sketch Plugin功能演示
4.1.2 物料市场
通过Sketch管理后台 ， 设计师可以将配色规范、文字规范、话术、Iconfont、组件库上传至云端并与整个设计团队中成员共享 ， 并可实现设计资产的版本管理 。通过将Sketch Library存储在后台物料市场 ， 设计师可以与团队成员共享组件（Symbol） ， Library可以实现“一处更改 ， 处处生效” ， 即使是关联了远程组件库历史的设计稿检测到更新时 ， 也会收到Sketch通知 ， 确保工作中使用的是最新组件 。
移动端UI一致性解决方案

文章插图
积木Sketch Plugin 物料管理后台
4.2 代码模型建设
为了满足中小企业的需求 ， 越来越多的开源组件库诞生 ， 但开源代表着“通用” ， 无法满足业务特色的需求 ， 于是很多企业也开始做起了自己的组件库 。通过建立代码组件库 ， 能帮助开发同学快速搭建App页面 ， 减少设计与开发沟通成本 ， 统一体验规范等 。
移动端UI一致性解决方案

文章插图
代码组件库模型
4.2.1 代码库功能
提高项目可维护性
由于组件库中的组件职责单一 ， 降低了系统的耦合度 ， 开发人员可以很容易地了解该组件提供的能力 。组件可以自由替换、组合为高阶组件 ， 在进行组件更新时仅需修改一处 。每个项目成员维护一定数量的组件 ， 让团队中每个人都能发挥所长 ， 可以最大化团队的开发效率 。
实现文档化
组件接口有统一的规范 ， 降低新人的上手难度 ， 新成员只需要理解接口和职责即可开发组件代码 ， 由于代码的影响范围仅限于组件内部 ， 对项目的风险控制也非常有帮助 。通过对组件统一管理 ， 实现代码的积累沉淀与有效复用 ， 全面提升了新业务的需求开发效率 。
便于单元测试
由于组件职责单一而清晰 ， 对外仅暴露接口 ， 概念上可以把组件当成一个函数 ， 输入对应着输出 ， 这让自动化测试变得更加简单 。
实现无障碍等定制化功能
无障碍功能可以改善残障人士的用户体验 ， 组件库中的组件资源高内聚 ， 完全由自身控制加载 ， 不与全局或其他组件产生影响 。组件的加载、渲染路径清晰可控 ， 对于组件功能定制 ， 实现类似于无障碍等功能较为方便 。
4.2.2 方案设计
统一配置文件
前文也提到 ， 外卖业务入口覆盖外卖独立App、美团外卖频道以及大众点评外卖频道等 ， 外卖组件需要在不同的移动端上适配宿主App的UI风格及交互体验 ， 这就需要组件库支持主题配置功能 。由于主题涉及Android/iOS/MRN多端 ， 需要一套通用的主题配置文件 。经过了各端开发同学与设计师的多轮讨论 ， 最终确定了包含主题颜色、文字外观、组件风格等内容的主题描述文件格式 。配置文件通过下发 ， 就可以实现全局替换主题的功能 。
{  // 主题颜色  "rooBrandColors": {    "rooBrandPrimary": "#FFCC33"  },  // 文本外观  "rooTextAppearance": {    "rooTextAppearanceHeadline1": {      "fontFamily": "sans-serif-medium",    // 字体      "textStyle": "normal",                // 风格（normal/bold/italic）      "textSize": 44,                       // 字号    }  },  // 组件风格  "rooStyle":{      "rooButtonStyle": {        "textAppearance": "?attr/rooTextAppearanceButton",        "backgroundColor": "?attr/rooBrandPrimary",        "cornerRadius": 0,      }  }


推荐阅读


上一篇：才买的茶有霉味怎么办,买茶的时候如何区分干仓与湿仓

下一篇：docker安装nacos