本文将从两部分完成一个完整的设计系统。

设计层面

设计层面主要是针对基础的设计原则,完整设计体系上的构建。

说下原子化设计,很多文章和演讲都有类似的概念。基本原则就是颗粒化,但是颗粒程度是需要把握的。

以一个页面的设计流程来讲: 首先撸清楚想要表达的东西,再从小的地方逐步扩展。

类似到就是:

-  Atoms
    - Molecules
        - Organisms
            - Templates
                - Pages

每一个点都应该考虑到基本的设计原则:

  • CLARITY
    • Eliminate ambiguity. Enable people to see, understand, and act with confidence.
  • EFFICIENCY
    • Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
  • CONSISTENCY
    • Create familiarity and strengthen intuition by applying the same solution to the same problem.
  • BEAUTY
    • Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

应用层面

应用层面以一个项目入手,更多是关于怎么构成一个 CSS 架构。理论是需要实践来检验的。

  • varibles
  • function
  • Mixin
  • components

参考