新品发布 Mobius UI - Neumorphism 风格 UI 框架预览版发布

kongxiangyan · 2020年04月07日 · 最后由 cmlanche 回复于 2020年04月07日 · 963 次阅读
本帖已被设为精华帖!

Mobius UI Preview Release

(。・∀・)ノ゙ 嗨,别来无恙呀!疫情期间,希望大家一切都好 🖖

开门见山,这次主要跟大家分享三件事情:

  • 「Thoughts Lab」的近况和后续
  • 「Mobius UI」预览版本发布及简单介绍
  • Coding the World」计划 —— 我的就是你的!!!

Thoughts Lab

按照新年之初的打算,今年上半年我的主要精力应该是实习 + 兼职开发 Thoughts Lab,但因为疫情原因呆在家中,手头只有一部 Intel Core m3 的超极本,不足以流畅进行复杂项目的开发工作,故该项目也被迫停滞,无法及时更新,在这里先跟关心项目进展的朋友们说声抱歉。

💬 如果你不知道 Thoughts Lab 是什么,请移步: Thoughts Lab 发布啦!

略让人伤心的是,Thoughts Lab 自 1 月 1 日发布至今,在没有任何推广的情况下,累计用户共 652 人,其中 99% 都是通过推送获悉的开发者朋友们 ❤。由于采用邮箱认证,只有本校的同学才能够获得发布信息的权限,所以小程序首页的消息仍然停留在我发布初写的介绍内容,甚是荒凉。

看着一门心思做的小玩意儿无人问津,心里也有点不甘,接下来我会上手做一些推广工作,让同学们知道有这样一个东西为大家提供浏览、发布信息的功能 💌,希望能够正常运作起来,收集反馈为后续的优化和更新工作做准备。

特别感谢这段时间跟我讨论技术 “架构” 和服务选型的朋友,使我不至于将这个项目的细节完全遗忘 😛 同时,也有一个好消息跟大家分享,宅家期间,我找到了适合盈利的新产品,主体是一款浏览器扩展,目前是 Side Side Project 的状态。我完全相信它的潜力,所以 Thoughts Lab 也不必再纠结于用爱发电和维持生计的矛盾,大家能够顺利地用起来对我来说就是最开心的事情。

Mobius UI

🎨 Mobius UI 是我为新产品准备的 UI 框架,目前初具雏形,今天早些时候整合了近期的开发工作、补充了文档,更新了 GitHub Repo 正式与大家见面。

速览链接:🌟 GitHub Repository、💻 Mobius UI Preview Page

决定动手造轮子之前,我花了不少功夫寻找现有的优秀方案,包括样式库、组件库和设计系统,考察的标准主要是以下三点:赏心悦目;样式和组件低耦合,可定制、易扩展;开源、稳定维护、社区活跃,结果都不是很理想,虽然最主要的原因可能只有一个:「不是自己写的 😕」,而 Mobius UI 将具备以上所有优点。

设计上,Mobius UI 参考了 Neumorphism 风格,使用「近似的前景色和背景色 + 亮度适当的阴影」来呈现一种「接地气」的质感,同时又独具意料之外的「来自未来的美感」。但这种风格的缺点非常明显,大片近似的颜色导致页面可访问性较差,元素与元素之间的区隔度不够,层次的滥用也会导致页面内容缺乏关注点,用户的眼睛眨巴眨巴不知何处安放 👀 等。对于这些问题,我在实现的时候基于不断尝试进行了权衡,一方面使用特定组合的颜色提升了内容元素的观感,尽量采用多种方式而非单纯颜色的改变来标识元素的状态,另一方面,总结了一系列「要与不要」设计规范来提供使用建议。尽管如此,它的使用效果也是因人而异的,上下限差距极大,这是我在文档中建议大家优先在 Toy Projects 中投入使用的原因之一。

技术上用「中规中矩」来形容恰到好处,使用基本的 CSS 实现样式 + 使用 PostCSS 做预处理器优化编写状态逻辑的体验,无他。

目前来说,Mobius UI 具备以下特色:

  • Utility First,推崇使用「功能类」组合出组件,而不是直接定义组件样式;

  • Verbose Variables 居多,目前可以使用 Minify + Gzip/Brotli 达到 80% 以上的压缩比,本地构建的话使用 PurgeCSS 体积更小;

  • 支持了 Dark Mode、Light Source(设置光源方向以调整阴影);

  • 支持引入 Houdini 和 JavaScript 做局部或全局的渐进增强;

  • 具备完全可定制性,变量随处可见但逻辑得体,支持任意粒度的调节;

  • 设计了简单的算式,可以通过给定的种子值,生成独特的配色方案,Mobius UI 的默认配色方案由本人生日生成 🤐

%var-color {
  /* --seed: 624;
  --cigaret: calc(var(--seed) - 360);
  --mobius: calc(360 - 264); */

  --dark-color-darker: hsla(264, 0%, 7%, 50%);
  --dark-color-darker-m: hsla(264, 0%, 12%, 50%);
  --dark-color-normal: hsla(264, 0%, 17%, 100%);
  --dark-color-lighter-m: hsla(264, 0%, 22%, 50%);
  --dark-color-lighter: hsla(264, 0%, 27%, 50%);

  --light-color-darker: hsla(264, 0%, 68%, 100%);
  --light-color-darker-m: hsla(264, 0%, 73%, 100%);
  --light-color-normal: hsla(264, 0%, 83%, 100%);
  --light-color-lighter-m: hsla(264, 0%, 93%, 100%);
  --light-color-lighter: hsla(264, 0%, 98%, 100%);

  --cigaret-color-darker: hsla(264, 100%, 17%, 100%);
  --cigaret-color-darker-m: hsla(264, 100%, 30%, 100%);
  --cigaret-color-normal: hsla(264, 100%, 50%, 100%);
  --cigaret-color-lighter-m: hsla(264, 100%, 70%, 100%);
  --cigaret-color-lighter: hsla(264, 100%, 83%, 100%);

  --mobius-color-darker: hsla(96, 100%, 17%, 100%);
  --mobius-color-darker-m: hsla(96, 100%, 30%, 100%);
  --mobius-color-normal: hsla(96, 100%, 50%, 100%);
  --mobius-color-lighter-m: hsla(96, 100%, 70%, 100%);
  --mobius-color-lighter: hsla(96, 100%, 83%, 100%);
}

了解更多详细的内容请移步 🌟 GitHub Repository,或者访问 💻 Mobius UI Preview Page 重温一下(我非常喜欢在晚上的时候盯着夜间模式反复打量)。

当下 Mobius UI 还在预览阶段,仅仅完成了样式基本框架的搭建和逻辑的梳理,下一个阶段的开发重点是基础元素的丰富和补充,将历时两周左右,下下个阶段的开发重点是渐进增强、MicroAnimation、和复杂组件,更具体的信息我会更新在 Repo 中的 Todos & Roadmaps,大家不妨点个 Star、加个 Watch 追踪 Mobius UI 的最新进展。

虽说 Mobius UI 是为新产品准备的,我也希望它能够应用在我开发的所有作品中,为大家提供一致的体验,这是一个次要的目标,但毫无疑问它将会出现在同一系列的文章中 🤔

Coding the World

Coding the World 是一个「工作坊」,按期举行,在这里你可以跟我一起实现 Thoughts Lab 的下一个应用,仅有的参加条件就是手头有一台电脑、以及每天两小时左右(每周 10 小时左右)的时间。对我来说,这是一个将知识和经验结构化输出的过程,对你而言,将获得包括但不限于:

  • 一款精美、别致、实用的小程序;
  • 腾讯云开发赠送的精美礼品;
  • 一次「高校微信小程序应用开发大赛」参赛经验;
  • 不止一项终身收益的技能;
  • 一个看待世界的新视角;
  • 一群可爱的小伙伴;

第一期的主题由我擅自决定了,我们将「各自 | 共同」完成一个「头像定制」小程序,按照难度大致划分为三个阶段:简单版本、自定义版本、社交化版本。

简单版本的预览、参加方式(第一期不超过 20 人,本校同学优先)、进度大纲等详细信息请访问:Coding the World Ⅰ

Thoughts

我非常害怕死亡,害怕到极致,但也许正出于对死亡的恐惧,才让我表现得一副「无所畏惧」的样子。2003 年非典的伤塑造了今天的我,现在是否也有孩子在遭受同样的苦楚,我不知道,祝福他(她)们未来一切都好。

希望自己一直善良、一直热血,永远向往自由。

共收到 1 条回复
cmlanche 将本帖设为了精华贴 04月07日 10:01

有图挂了

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册