Blog

Blog

PHODAL

Mifa Design 的原子设计:一个服务于 Markdown 的设计体系

嗯,UI 框架,这已经不是一个很好的时代了。可对于 Design Systems 来说,这还是个不错的开始

Material Design 是 Google 推出的专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的综合指南。它不仅让 Web 应用与 Android 原生应用、Chrome OS 应用等等有了一致的外观效果,它还能提高一个一致的视觉体验。

Ant Design 是一个服务于企业级产品的设计体系。基于『确定』和『自然』的设计价值观,通过模块化的解决方案,让设计者专注于更好的用户体验。

那么 Mifa Design 呢?

Mifa Design 是一个服务于个人的设计体系。基于『易读性』 和『一致化』 的设计价值观,让 Markdown 作者能专注于写作。

我已经编不下去了,就三个字母

PWD

Mifa 之所以称为 Mifa Design,只是因为它的缩写是 MD。并不是为了和 Ant Design 齐名,只是用于为我的网站、博客、APP、小程序等等,提供一个一致化的 UI 及阅读体验。

Mifa Logo

(PS:Logo 有待改进进进进进进进进进进进进进进进)

Show Case

Mifa CSS 框架

Mifa CSS 框架

食用方式:

https://github.com/phodal/mifa 的 dist 目录,下载 mifa.css 文件,再引入项目中即可。

Mifa GitHub Pages 主题

Mifa 主题

只需要在项目中创建 _config.yml 文化,在文件中写入:

remote_theme: phodal/mifa-jekyll

就可以为你的 README 启动 Mifa 主题。

Mifa 微信公号编辑器

Mifa 微信公号编辑器

打开 md.phodal.com 即可使用

缘由

过去,在讨论程序员影响力的时候,我们讨论了 Avatar、ID 一致性带来的影响。今天,一致性不仅仅只体现在 ID 和头像上,还有 UI 设计上。

在这几年里,在业余时间创作了一系列的作品——文章、开源软件、开源应用、电子书等等。按统计来看,每天累计大概会有两千多用户,会接触到我的博客(~500),Growth 系列应用(~200),玩点什么网站、小程序、APP(~200),开源电子书(~800),还有 GitHub 上的一系列开源应用的文档。而这没有算上在 微信公众号、GitHub、知乎、SegmentFault、CSDN 等等的访问量,还有在今日头条、微博、搜狐、百家号会自动转载文章。

考虑到这么大的访问量里,如果一致化设计风格,那么将会提升我的设计能力。于是,我制作了几个简单的计划,罗列了一下可以修改 UI 的地方:

  • GitHub Pages 主题(完成)
  • 微信公众号编辑器(完成)
  • 在线电子书(TBC)
  • 我的博客 phodal.com(TBC)
  • 玩点什么网站、小程序、APP(TBC)

因为这些地方多数都是 Markdown 编写的,并且共同组成了一个设计体系。因此,名称就由 Mifa Framework 变成了 Mifa Design。Design 出自于之前项目上 UX 分享的 Design System 的 session:

设计系统

因为,他们解决的是同一个问题,一致性。Design System 要解决的是一定规模公司中的 UI 设计问题,Mifa Design 则是为了提供一致化的阅读体验。

Mifa Design

考虑到原子设计是一个不错的处理流程,接下来的内容就以原子设计来展开。

原子设计由原子、分子、生物体、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

原子:Mifa CSS Framework

原子,即是事物的基本组成部分。它是最小的单元,不能再往下细分,也就是基本的 HTML 标签,诸如表单标签,输入,按钮。

最初在设计 Mifa 的时候,我只需要定制一个方便阅读的 CSS 样式。

对于一篇文章(Markdown)来说,需要个性化的东西有:标题引用段落列表表格代码链接。而这已经基本上包含了一个基础的 CSS 框架,所需要的几个重要的基本要素。在那之上,我们可能还需要诸如网格、按钮、表单等元素。

上面的这些元素,都对应了 HTML 标题:h1~h6、blockquote、p、list、table、pre、code、a,以及 button, form,还有一个额外的 grid。

对于我而言,我需要自定义下面的几个基本要素即可:

  • 颜色,定义了一个网站的基本风格
  • 字体大小,影响了用户的阅读体验
  • 文本风格,诸如行高、段落间距、语法高亮等等的内容。

接着我找到了一个迷你的 CSS 框架 milligram

随后,在上面加上了我之前作品的颜色,如玩点什么的深灰色,Growth 中采用的绿色。并采用电子书及玩点什么的 Markdown 字体大小,及颜色来提供更好的阅读体验。

分子:可复用组件

分子,即由原子聚合而成的粒子。

在 UI 设计中,分子是由几个基本的 HTML 标签组成的简单组织。例如,在一个搜索元素中,它是由标签原子、输入原子和搜索原子组成:

搜索元素

又比如语法高亮,则是要基本的 code 标签,加上一系列的 HTML 元素组成:

Code Highlight

他们是一系列的可复用组件,可以组成更强大的有机体

有机体(组织):组件

有机体是由分子或原子或其它有机体组成的相对复杂的 UI 组分 。

它用于创建一些独立、可复用的内容,诸如 header:

Mifa Header

又比如 footer:

Mifa Footer

这是界面中,相对复杂的不同区块。

模板:Mifa Jekyll 主题及 Markdown 编辑器

模板,顾名思义就是整合前面的元素,构建整体的布局。

诸如一个博客包含了 header、footer 及博客本身的内部:

Template

诸如基于 Mifa 的 GitHub Pages Jekyll 主题也是模板,只需要:

在项目中创建 _config.yml 文化,在文件中写入:

remote_theme: phodal/mifa-jekyll

即可。这里的 Jekyll 即是模板。

而我的微信编辑器,本身也是基于此模板的,访问地址:md.phodal.com

页面

So,本文自豪地采用 Mifa Design 0.1.0 排版。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签