创建自定义角度材质主题时,最佳方法是什么?

时间:2017-02-09 14:55:13

标签: javascript css angularjs material-design angular-material

我正在努力了解如何最好地使用Angular-material主题:

Google发布了大量color palettes, 并提供有关如何easily switch between palettes的指南。

我见过这个question,并找到了一系列工具来围绕主色生成调色板(tool1tool2

虽然从设计师那里获取定制设计时,选择了不同的颜色,但我觉得很难将设计颜色作为一个完整的主题来实现,因为有太多的变量需要考虑(例如悬停色调,墨水色调等。)。

我的问题是:

  1. 我可以作为开发人员创建一个足够令人赏心悦目的主题     每个设计都交付给我(通过JS主题或CSS     覆盖),或者是否有任何限制需要考虑?

  2. 设计师应该在考虑时考虑一些指导原则 创造设计?

  3. 我们应该通过与其中一个一起放弃设计的灵活性 谷歌的预定义调色板?

  4. **

    编辑 - 05/2017:

    我决定完全关闭主题,因为我无法完全理解如何根据我们的需求进行自定义。

    我现在通过webpack将变量注入SASS文件,并且outcode更加清晰。

    **

2 个答案:

答案 0 :(得分:4)

  1. 不,不是。 "良好令人愉快的"是一个广泛的,基于意见的术语,不是由逻辑算法决定的。实际上,我已经尝试过几个月,直到我终于了解了UI设计,知道它不会起作用。

  2. Google的材料设计指南是设计师创建材质主题所需的全部内容。它不会那么久,一个典型的设计师可以在一个小时内浏览它。

  3. 没有。谷歌的预定义调色板旨在被程序员用来快速创建具有可接受界面的网站。除非你专门为谷歌工作,否则没有理由限制设计师的调色板。不过,它们完全可以作为指导方针。请参阅Dark Material UI,这是一种基于材料设计的设计概念,但并未遵守指南的许多部分(例如,它使用的颜色不包含在Google的调色板中)

答案 1 :(得分:0)

我们使用的方法只是更改html head部分中css文件的href。在这种情况下,每个主题都有独立的css文件,当你需要切换时,你只需修改href。

不需要像谷歌推荐的那样使用额外的标记,因为在主题之间切换会很复杂,特别是如果有很多主题。

你可以在这里看一个例子: http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client

有一个可用的实例。和材料主题一样。