網(wǎng)絡(luò)不斷發(fā)展的景觀既需要?jiǎng)?chuàng)造性的才能，又需要高效，可擴(kuò)展的設(shè)計(jì)?，F(xiàn)在，頂級(jí)產(chǎn)品依靠強(qiáng)大的設(shè)計(jì)系統(tǒng)來(lái)保持品牌連貫性，同時(shí)優(yōu)先考慮可訪問(wèn)性和用戶體驗(yàn)。材料設(shè)計(jì)，一種Google設(shè)計(jì)系統(tǒng)，彌合了創(chuàng)意表達(dá)與系統(tǒng)發(fā)展之間的差距。

最初，材料設(shè)計(jì)缺乏完全表達(dá)個(gè)人品牌身份的靈活性。反饋強(qiáng)調(diào)了改進(jìn)的兩個(gè)關(guān)鍵領(lǐng)域：有限的風(fēng)格適應(yīng)性和系統(tǒng)的品牌實(shí)施工具不足。

在Google I/O 2018上介紹的材料設(shè)計(jì)的主題功能解決了這些問(wèn)題。主題使設(shè)計(jì)師和開(kāi)發(fā)人員能夠利用材料的優(yōu)勢(shì)，同時(shí)定制其外觀。這涉及調(diào)整顏色，版式和形狀以創(chuàng)造獨(dú)特的品牌體驗(yàn)。

這篇文章著重于使用CSS（特別是SCSS）的Web主題。讓我們用一個(gè)使用物料Web組件構(gòu)建的基本登錄模板來(lái)說(shuō)明。

主題解釋了

材料設(shè)計(jì)主題允許全球調(diào)整顏色，版式和形狀，從而影響所有組件。盡管看似有限，但這些調(diào)整會(huì)大大改變了設(shè)計(jì)的整體感覺(jué)。

顏色自定義

Material.io提供了一個(gè)顏色選擇器，以幫助選擇和對(duì)比度檢查。使用SCSS，我們可以輕松地修改登錄屏幕的外觀：

 $ MDC-THEME-PRIMARY：＃26418F;
$ MDC-Theme-Secardary：＃D1C4E9;
$ MDC-Theme-Background：＃fdf6f9;

材料會(huì)自動(dòng)設(shè)置$mdc-theme-on-primary to White以供可訪問(wèn)性。您可以使用$mdc-theme-on-primary和$mdc-theme-on-secondary覆蓋文本顏色。

版式調(diào)整

材料提供了可通過(guò)主題自定義的基本版式量表?？梢允褂肅SS類或混音素對(duì)每個(gè)標(biāo)題級(jí)別的標(biāo)題級(jí)別進(jìn)行版式調(diào)整。我們會(huì)輕松使用Google字體：

 @Import url（'https://fonts.googleapis.com/css?family=josefin sans'）;
$ MDC類型 - 家庭：Unquote（“ Josefin Sans，sans-serif”）;

$ MDC型式式按鈕：（
 字體大?。?4px，
 字體重量：600，
 信件間隔：0.05EM，
）；

形狀修改

形狀自定義改變組件角半徑（按鈕，卡片，床單）。材料允許各種角和組件尺寸的不同形狀。例如：

 $ MDC形狀 - 符號(hào) - 典型 - 成員：12px 4px;
$ MDC形狀 - 大型-radius：8px;

只有幾行代碼，我們已經(jīng)急劇改變了應(yīng)用程序。

釋放您的創(chuàng)造力

存在許多顏色，版式和形狀的組合，以創(chuàng)造獨(dú)特的品牌標(biāo)識(shí)。下面的示例使用材料組件展示了這些元素的多種應(yīng)用。

現(xiàn)實(shí)世界的例子

Google本身在Gmail，Google News和Google Play等產(chǎn)品中使用定制的材料組件（Google材料主題）。 Lyft和Anchor等其他公司也利用了材料設(shè)計(jì)的靈活性來(lái)創(chuàng)造獨(dú)特的品牌體驗(yàn)。

入門

使用材料入門套件和“構(gòu)建材料主題”故障項(xiàng)目開(kāi)始構(gòu)建材料主題。實(shí)驗(yàn)SCSS變量以自定義組件。只需將這些變量粘貼到您的my-theme.scss文件中，然后開(kāi)始構(gòu)建即可。

簡(jiǎn)而言之：材料設(shè)計(jì)的主題功能提供了前所未有的靈活性。今天開(kāi)始探索！

以上是材料主題：制作材料！的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！