车载导航应用中基于Sketch UI主题实现

1.导读

关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类:

  • 内置主题(应用内自定义style)
  • 外部加载方式(资源apk形式、压缩资源、插件等)

其实,针对不同的主题定制实现思路,没有绝对的好坏,每种实现方案都有其利弊,重要的是如何去权衡、选择,根据实际的项目需求,痛点,制定一个符合实际项目需求,能够解决主题定制过程中痛点的方案才是好的方案。

由于我和团队一直是做车载导航应用开发,面向的对象是客户。不同的客户对于应用的UI或者主题是有不同需求的,也就是说针对不同客户,不同渠道的版本,需要有不同的应用主题。

随着项目的增多,如果没有一个灵活,易管理,低成本的主题定制方案,那么实现将变得非常困难。

2.过去主题定制的实现方案

针对需要定制的UI,研发增加对应的自定义主题控件;

布局由这些自定义主题控件搭建而成;

UED修改对应主题控件xml中对应的色值实现主题的定制;

研发集成UED配置的文件,实现主题定制;

研发出包,UED进行主题定制还原度验证。

基本思路就是界面中需要主题定制的UI,通过自定义主题控件实现,而自定义主题控件可以通过替换布局xml的方式实现主题色值等的替换,从而实现主题定制,但这种方案的缺点非常明显:

成本高:主题定制需要UED手动去修改xml,但一般UED对于xml格式内容不是很了解,这样无疑学习及修改成本都非常高,其次也容易产生错误的修改,导致稳定性很差;

效率低:主题定制需要UED修改完xml后,发给研发,然后由研发替换xml,流程多,效率低;

维护难:之前的主题定制,没有统一的东西管理,主题对于UED来说就是一堆的xml文件,很难进行维护;

复用性差:由于主题定制是通过xml,如果主题控件修改了,xml也就跟着修改,主题的复用就很难实现。

3.新方案的设计与实现

从上图中我们可以看出在主题定制的整个过程中,UED参与了大部分的流程,只有在主题集成的时候,研发需要参与,其实说到底,UED才是主题定制的Owner,对于主题定制最理想的状态是研发提供一定的工具平台,UED设计完主题后,可以直接集成到应用内验证回归,中间无需研发干预处理,整个主题定制流程都由UED走完。

3.1 方案要素

基于UED参与就能完成主题定制的理念,同时考虑项目对于主题定制的需求,在新主题定制方案的设计中,应当围绕核心角色,服务好核心角色,以最大限度降低核心角色的成本,提高整个定制过程的效率,同时兼顾项目核心需求为目标来设计、搭建新方案,以下是方案中应该关注的角色及要解决的关键问题:

  • 主题定制主角:UED
  • UED、UI设计工具:Sketch
  • 项目需求:

1. 不同项目的不同渠道有不同的主题定制需求
2. 出包时就有对应主题,无需下载
3. 项目周期短,需要能快速定制
4. 项目需要维护,主题也需要方便维护、管理

3.2 方案雏形

基于以上分析,主题定制的大体流程,方案如下:

  • 首先,方案应当围绕着UED建设,由于UED是基于Sketch进行UI界面设计,因此如果主题定制也能基于Sketch,UED就能很方便的基于Sketch设计UI的同时也设计主题;
  • 同时,不同的渠道会有不同的主题定制,并且需要快速定制,方便管理、维护,同时出包时就需内置主题,因此需要有一个主题管理平台能管理,维护主题资源,并且支持主题复制,使得主题资源能基于现有项目的主题进行少量修改,就能形成一个新的主题;
  • 接着,需要在Jenkins打包时,能根据不同的渠道打包不同的主题资源到apk中;
  • 最后,需要将打包好的apk快速安装到真机上进行还原度验收。

最终主题定制方案也就基本成型,基于Sketch的UI主题定制方案:

4.方案详解

基于Sketch的UI主题定制,主要分成四大步骤:

UED在Sketch中制作主题资源及上传云端(主题制作)

UED在WEB主题平台管理主题资源(主题管理)

Jenkins拉取主题资源打包到应用(主题集成)

真机预览效果(主题验证)

以上流程主要针对主分支,第一次界面开发,针对后续不同项目的主题定制,只需要在WEB平台中copy主题资源,然后进行对应的主题修改,即可快速定制出一套对应的主题出来。

以下详细介绍主要关键步骤:

4.1 主题资源制作

主题资源制作一般在界面设计前就需要提前设计好,UED在Sketch中将主题控件设计好之后,我们提供了一个快捷的主题输入界面,方便UED能快速编辑对应控件的主题属性,并一键上传到云端,如下所示,在Sketch中进行主题控件制作:

4.2 WEB主题平台管理主题资源

WEB主题平台,保存了项目中所有可定制的主题资源,包含主题控件、插画、iconfont、文字大小等,在这里可以快速基于母版主题,copy出新的主题资源,然后进行个性化定制,或者基于其他项目快速copy,主题的定制不再是繁琐、耗时的操作,而变成了直观、易操作。

4.3 真机预览

在WEB主题平台编辑完主题资源后,通过Jenkins或服务器将主题资源打包到apk中,最后通过车机设备集群管理平台,将apk安装到不同的真机上,实现真机预览主题定制效果,UED可快速回归还原度,发现问题,并快速在主题平台上修复。

5.方案对比

针对业内几种比较常用的主题定制方案与基于Sketch的UI主题定制方案进行了几个方面的对比:

以上三个方案的对比:

内置主题:优点在于实现简单、配置方便,缺点是主题定制不灵活。

外部加载方案(apk):优点在于扩展性很高,但由于该方案需要在代码中设置所有的可变资源,软件实现周期较长,写代码时容易出错。而且第一版耗时较长,一旦界面布局改变,需要较长的时间进行代码的编写。

基于Sketch的UI主题定制方案,它的优势在于:

  • 基于UED的UI设计工具Sketch,能在设计UI的时候,同时设计主题资源,并且能快捷的预览主题资源在整体界面上的显示效果;
  • 可以通过Sketch插件的能力,快速将主题资源上传到后台,方便主题资源的统一管理及维护;
  • 在后台配置修改完主题资源还能回流Sketch中进行查看。

这个方案的最大优势在于与UED的UI设计工具Sketch无缝的衔接在一起,极大的提高了主题的制作效率及成本,使得UED能够独立完成主题资源制作、管理、集成、应用、验证,形成一个主题小闭环。

6.小结

该方案的特点在于与Sketch很好的结合在一起,通过插件的能力,无缝的与云端进行资源相互同步,能力的实现主要通过WEB主题平台进行主题的管理、编辑,实现主题的快速复制,方便修改,然后再通过Jenkins的打包能力,实现主题的快速应用,最终实现UI主题定制。

能力建设完成后,以上的每个环节,只需要UED参与就能完成不同项目的主题定制,极大减少了UED及研发的成本,大大提高了效率,同时在定制能力上,从只能定制颜色、圆角、大小等,到能支持插画、iconfont定制,以及其他各项拓展定制能力等。

原文地址:https://www.cnblogs.com/cider/p/11741820.html

时间: 2024-10-01 04:45:23

车载导航应用中基于Sketch UI主题实现的相关文章

网络测量中基于Sketch方法的简单介绍

Sketch介绍 为什么要用Sketch 网络流主要根据五元组.主机地址.包的大小来分类.在网络中存在各种各样的包,如果按照上述分类方法,对每一种包都分配一个计数器来储存,虽然测量准确,那么存放计数器的空间开销会非常大.所以使用哈希的方法,根据哈希值的范围来确定的所需的存储空间,各种包根据哈希值再次归类,可以大大减少存储空间.这样使用哈希来估计流的方法称为Sketch-based方法. Count-min sketch 如何处理包 使用哈希的方法会产生冲突,多个种类的包哈希到同一个桶内,那么这个

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS

Android中的样式和主题(Styles and Themes)

样式(style),是为一个视图(View)或窗体(window)指定形状和格式的属性集.一个样式能够指定的属性包括高度.内边距.字体颜色.字体大小.背景颜色等等.样式被定义在一个XML资源文件中,跟设置布局的XML资源文件是分开的. Android中样式的设计哲学跟web设计中的CSS(层叠样式表)相似,就是想办法让设计和内容分隔开来. 例如,通过使用样式(style),你可以将下面的XML布局: <TextView android:layout_width="fill_parent&q

在Unity3D中基于订阅者模式实现事件机制

??各位朋友,大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是http://qinyuanpei.com.今天博主想和大家分享的是在Unity3D中基于订阅者模式实现消息传递机制,我们知道Unity3D中默认提供了一种消息传递机制SendMessage,虽然SendMessage使用起来的确非常简单,可是它的这种简单是建立在付出一定的代价的基础上的.经常有朋友提及不同的模块间如何进行通信的问题,可能答案最终会落到单例模式.委托和事件机制这些关键词上,在这种情况下本文所探讨的内容可能会帮助

十、VueJs 填坑日记之在项目中使用Amaze UI

上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色.体验优秀的跨屏页面,大幅提升开发效率.最主要是妹子UI的性能好,轻量级. 获取妹子UI(Amaze UI)下载地址:http://amazeui.org/getting-started 点击上方绿色的按钮,我们来下载最新版的妹子UI,下面有配套的文档和编辑器,

SVN中基于Maven的Web项目更新到本地过程详解

环境 MyEclipse:10.7 Maven:3.1.1 概述 最近在做项目的时候,MyEclipse下载SVN上面基于Maven的Web项目总是出现很多问题,有时候搞了很半天,Maven项目还是出现叉号,最后总结了方法步骤,终于可以将出现的问题解决,在此,将重现从SVN上将基于Maven的Web项目变成本地MyEclipse中项目的过程,问题也在其中进行解决. 问题补充 在使用Myeclipse的部署Web项目的时候,在点击部署按钮的时候,没有任何反应,在此提供两种解决方法,问题如图1所示:

Android车载导航的一些困境

车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.现在WinCE走到了尽头,Android车载导航开始发力,但因为Android系统的使用习惯,与传统车载的使用习惯有着较大的不同,在设计的时候,往往会遇到一些尴尬,既要保持原有的使用习惯,又要保留Android的优点.都要兼顾的话往往是技术上要费很大功夫而且带来使用上的困惑,但是市场的惯性又很难允许全面的革新.所以Android车载,我认为最大的困难并不是技术上的,而是产

Android应用开发中的风格和主题(style,themes)(转)

Android应用开发中的风格和主题(style,themes) 越来越多互联网企业都在Android平台上部署其客户端,为了提升用户体验,这些客户端都做得布局合理而且美观.......Android的Style设计就是提升用户体验的关键之一.Android上的Style分为了两个方面: Theme是针对窗体级别的,改变窗体样式: Style是针对窗体元素级别的,改变指定控件或者Layout的样式.      Android系统的themes.xml和style.xml(位于\base\core

深入分析JavaWeb Item49 -- Struts2中常用标签与主题

一.非UI标签 1.property标签 property标签用于输出指定值: * default:可选属性, 如果需要输出的属性值为null,则显示该属性指定的值 * escape:可选属性,指定是否格式化HTML代码. * value: 可选属性,指定需要输出的属性值,如果没有指定该属性,则默认输出ValueStack栈顶的值. 2.set标签 set标签用于将某个值放入指定范围. var:变量的名字,name,id和var表达的含义是一样的,name,id被var替代 scope:指定变量