阅读 3504

Smart UI :创造大于1的辅助系数

疫情的缘故,一整年都没去过电影院,在家用投影仪看的片子也屈指可数;不过有一部,足足看了两遍——《超体》。这是个14年的科幻动作片,女主误入黑帮交易,被迫在腹中缝入了高浓度提纯的CPH4(孕妇产生的微量元素可以帮助胎儿形成骨骼)走私毒品,运输过程中因为被打,药品破了渗透到了她的血液,自此,她的大脑被一步步开发,最后到达100%……

超体女主露西
超体女主露西

吸引我反复去看的,是片子的哲学观。女主意识到逐渐开发的大脑,既是超能力,也是超能量,自己的肉体只是一个容器,当容器本身不足以支持这么大的超级能量时,基因为了生存的本能,会驱动细胞自主去寻找合适的土壤——穿越古今不断学习人类、地球乃至宇宙的所有信息,最后,女主肉体消失,变成一个超级计算机的载体u盘,留下一句“我无处不在”~~89分钟,叙事一气呵成——一切生物都是基因创造的机器,生命短暂,基因不朽

大脑开发100%,与祖先相遇
大脑开发100%,与祖先相遇

从电影回到现实,人类在有限的生命里,其实做着无限的被基因驱使的无意识行为;我们看似强大,站在食物链顶端,却经常无法分辨究竟哪些行为是我要,哪些是它想。作为凡人去思考这种庞大的知识理论,也许得到的答案,往往只能是草草的一句物理的尽头是数学,数学的尽头是哲学,而哲学的尽头是神学

所以,既然我们无力与基因抗衡,那么只能顺应它的趋势;在能力范围内,保持清醒,有意识地做出让我们更幸福的行为决策,让短暂的肉体生命体验更多的愉悦和满足。

那么,幸福,是什么?

柳生雄宽说,所谓幸福,是能明确自己的价值观,并真正实现这种价值观的状态;而成功,则是让与自己持有相同价值观的人,也觉得你幸福,成功是幸福的延长线。

一个人,哪怕一天只工作8小时(互联网行业,应该不止),那么起码有 1/3 的时间,是在工作中度过的。如果你的工作内容,恰好是小程序开发,那么你生活中 1/3 时间的幸福公式便是:

  1. 价值观 = 希望高效开发小程序
  2. 实现价值观 = 辅助工具系数 ✖️(产出 ✖️ 质量)/ 时间

Smart UI 设计和开发的初衷,便是提升辅助工具系数。

Smart UI 是什么

智能小程序Smart UI 扩展组件库,及其衍生的示例模板库,是对小程序基础能力的扩容,包含更多元的能力和组合样式,当前已支持33种组件(组件列表),并沉淀出14套组合能力示例模板(模板列表)。 百度APP,扫描组件示例二维码

它根据原子理论进行拆解,像搭积木一般,以单体的积木元件通过组合形成千变万化的小程序实体。开发者可以自由选择,是自己对毛坯进行定制化装修,还是直接入住我们的精装房。

但无论怎样,搬砖、打地基、刮水泥这种繁重的工作,已经由 Smart UI 完成。

原子理论
原子理论

可视化辅助编程

在探索小程序开发提效时,我们意识到,可视化辅助编程所见即所得,既能降低语言的学习门槛,又保留了开发者自开发的灵活度,对我们来说是一个平衡感极佳的提效手段。

因此,我们选取开发者工具GUI辅助编程,作为上文提到的关键辅助系数

Smart UI 组件的使用,首先,支持最常规的npm 引入:

1)第一步,要在项目中 npm 安装依赖包@smt-ui/component

npm i @smt-ui/component
复制代码

2)引入 npm 包中的自定义组件

{
    "usingComponents": {
        "smt-icon": "@smt-ui/component/src/icon"
    }
}
复制代码

3)在对应页面的 swan 中直接使用该组件

<smt-icon name="arrow-left"></smt-icon>
复制代码

与此同时,也支持结合开发者工具面板,进行可视化辅助编程:

1)打开开发者工具,显示编辑器界面

2)点击编辑器右上角,打开组件面板

3)选择 Smart UI 面板,即可查看 Smart UI 的组件列表

4)在面板上选中组件,点击插入,即可将组件插入当前的 .swan 文件中,模拟器中也可查看效果


同样的,组合能力示例,我们也提供了与上文类似的两种使用方式。

  1. 通过npm 安装引入

1)在小程序根目录执行下方命令,下载页面模板的对应的 npm 包

npm i @smt-ui-template/page-status  // 模板名称
复制代码

2)将对应的模板文件拷贝到当前小程序合适的目录下(如 pages): “模板文件”为 npm 包内 @smt-ui-template-xxx 文件

├── project.swan.json                   
├── app.json                            
├── app.js                              
├── pages
    └──  @smt-ui-template-status  // 模板文件
复制代码

3)在小程序根目录的 app.json 中配置模板页面的 path 路径,查看效果

{
    "pages": [
        ...
        "pages/@smt-ui-template-status/index"
        ...
    ]
}
复制代码

2. 可视化辅助编程,开发者工具欢迎页面板

打开开发者工具,点击“页面模板”,选择相应模板,选中后点击右下角“立即使用”,填写相关信息点击右下角“完成”按钮。

丰富的图标库

在日常的小程序项目实践中,设计师们将以往沉淀的284个图标进行细节优化,使其在应用中更具准确性、多样性和丰富度,并且封装成SVG格式对外输出,塑造为一套真正能够为开发者所用的Smart UI图标库(icon组件使用方式详见文档)。

轻量级图表

当我们遇到一些数据、报表需求时,自己绘制的成本很高,往往会去寻找一些图表第三方库;Smart UI 中实现了小程序图表组件,可以使用扁平化数据配置快速接入,体积轻便,满足常规的折线图、柱状图、饼图需求,支持 SVG + Canvas 两种渲染引擎。(clfe-chart组件使用方式详见文档)。

信息流卡片组件

如果小程序本身是内容类组件,那么信息流则是不可缺少的。

Smart UI 提供了多种模式的信息流卡片组件,由小程序UE专业团队设计,符合信息流设计规范;包括左文右图、纯文本、上文下图、多图及视频等多种模式。(feed-item组件使用方式详见文档

关注引导蒙层组件

为帮助小程序开发者更好地留存用户,在未来持续性与用户进行互动,智能小程序官方推出了小程序关注组件,而关注引导蒙层组件,可以引导用户关注小程序。

​mask组件,可以一键引导用户关注小程序,提升小程序的用户粘性;同时支持默认顶部导航和自定义导航。(mask组件使用方式详见文档

当然,蒙层引导能使用户注意力聚焦在引导上,此时原页面功能均无法使用;考虑到它会打断用户的任务路径和沉浸式体验,我们建议谨慎使用,可在用户首次进入小程序首页时展示1次。

实战小程序

表白整蛊神器小程序,应用了Smart UI 组件库中的自定义导航和下拉刷新,完成首页模板瀑布流。 (源码地址:https://github.com/wannamakeudance/swan-artifact)

预览效果
预览效果

配套示例模板

对于一个刚刚接触小程序开发的同学来说,学习文档是第一步,但是文档的api、组件内容齐全且庞大,每个都学会再去开发小程序,将会是一个相对漫长的过程。

这个时候,如果有一些现成的的小程序模板,开箱即用,开发者在二次开发的过程中,边使用边学习,可以大幅降低学习成本——Smart UI 组件结合小程序日常业务,沉淀出了组合能力示例,用以解决这个的痛点。

下方为图文详情页、办理类服务(多流程)模板效果示例;更多模板,可以查看官网文档https://smartprogram.baidu.com/docs/develop/example/template/templatelist/ 图文详情页模板 办理类服务模拟

以上就是想要跟大家分享的内容,希望 Smart UI 能够作为大于1的辅助系数,让小程序的开发者,提升 1/3 时间的幸福

文章分类
前端
文章标签