MDC-103 網頁：使用顏色、形狀、高度和類型的 Material Design 主題設定 (網頁)

1. 簡介

Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 工程師和使用者體驗設計師團隊打造，提供數十種精美且功能豐富的 UI 元件，適用於 Android、iOS、網頁和 Flutter.material.io/develop

在程式碼研究室中，您在 MDC-101 和 MDC-102 中，使用了 Material Design 元件 (MDC) 針對名為 Shrine 的電子商務應用程式，這個電子商務應用程式販售服飾和居家用品。這個應用程式的使用者流程是從登入畫面開始，然後將使用者導向包含產品的主畫面。

Material Design 最近擴大版功能，讓設計人員和開發人員能以更靈活的方式呈現產品品牌。在本程式碼研究室中，您將使用 MDC 自訂 Shrine 應用程式，以比以往更多的方式反映品牌獨特風格。

建構項目

在本程式碼研究室中，您將使用以下程式碼自訂 Shrine 來反映品牌：

• 顏色
• 字體排版
• 海拔高度
• 圖案
• 版面配置

本課程最後的 3 個程式碼研究室將引導您建構名為 Shrine 的應用程式。

如要查看相關程式碼研究室，請前往：

• MDC-101：Material Design 元件 (MDC) 基本概念
• MDC-102：Material Design 結構和版面配置

本程式碼研究室中使用的 MDC Web 元件和子系統

• 主題
• 字體排版
• 海拔高度
• 圖片清單

軟硬體需求

• 新版 Node.js (JavaScript 套件管理員 npm 隨附)。
• 程式碼範例 (將在下一個步驟中下載)
• 具備 HTML、CSS 和 JavaScript 的基本知識

針對網站開發的經驗程度，你會給予什麼評價？

新手 中級 還算容易

2. 設定開發環境

您使用的是 MDC-102 版本嗎？

完成 MDC-102 後，您的程式碼應該就可以用於本程式碼研究室。跳至步驟 3：變更顏色。

下載程式碼研究室入門應用程式

下載範例應用程式

範例應用程式位於 material-components-web-codelabs-master/mdc-103/starter 目錄中。請務必先 cd 放入該目錄，再開始操作。

請注意根目錄名稱中的 -master 後置字串。如要從上方按鈕下載範例應用程式，請在本程式碼研究室的其他部分參照根目錄時，加上 -master 後置字串。

...或是從 GitHub 複製檔案

如要從 GitHub 複製本程式碼研究室，請執行下列指令：

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-103/starter

如需進一步協助，請參閱：從 GitHub 複製存放區

安裝專案依附元件

從入門目錄 material-components-web-codelabs/mdc-103/starter (如果您按照上述步驟進行，這應該是目前的目錄) 並執行下列指令：

npm install

您會看到許多活動，最後的終端機應該會顯示安裝成功：

MDC Web 使用稱為 Sass 的 CSS 預先處理工具。如果您使用其他 CSS 預先處理器 (或完全不使用)，也沒關係！您可以安裝 sass CLI，或在建構工具鍊中使用外掛程式 (例如 Webpack 適用的 sass-loader、Gulp 適用的 gulp-sass 或 Grunt-sass)，與目前的預先處理器搭配使用。

為了讓程式碼能在 IE 11 等舊版瀏覽器中運作，我們使用名為 Babel 的轉譯器，將 MDC Web 的 ES2015 JavaScript 語法轉換成 ES5 JavaScript 語法。

我們會使用 webpack 來封裝檔案，並在當地提供服務。系統已在 webpack.config.js 檔案中為您設定這項專案的 webpack 設定。如要進一步瞭解設定方式，請參閱入門指南。

執行範例應用程式

在同一個目錄中執行：

npm start

webpack-dev-server 將會啟動。將瀏覽器指向 http://localhost:8080/，即可查看該網頁。

如果您無法順利執行 npm install 或 npm start，請停止開發人員環境，並排解相關問題。

大功告成！您應該會在瀏覽器中看到 Shrine 的登入頁面。填寫「使用者名稱和密碼」欄位，然後按一下 [下一步]這個按鈕即可前往首頁。頁面左側應該會顯示導覽匣，旁邊是產品圖片格線。

雖然導覽匣運作正常，現在要變更顏色、高度和字體排版，讓它與神殿的品牌相符。

3. 變更顏色

這個顏色主題是由設計人員使用自訂顏色建立 (如下圖所示)。當中包含從神社品牌挑選的色彩，並套用至 Material 主題編輯器，這種編輯器的色彩進一步擴大，呈現出更全面的調色盤。(這些顏色並非來自 2014 年 Material 調色盤。)

讓我們變更 Shrine 應用程式的導覽匣顏色，以反映該色彩配置。

覆寫主題顏色

建立名為 _variables.scss 的新檔案，其中包含以下內容：

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

然後在 _common.scss 最頂端匯入：

@import "./variables";

凡是要覆寫的全域變數 (例如 $mdc-theme-primary 或 $mdc-theme-secondary)，都必須在匯入元件之前宣告。複製到 *.scss 檔案中在本例中，_common.scss 是先匯入的部分資料，再匯入 login.scss 和 home.scss 中的任何項目，因此同時適用於這兩個頁面的。

在導覽匣中新增 CSS 樣式

在 home.scss 中，在現有的匯入作業後方加上下列匯入陳述式：

@import "@material/ripple/mixins";

然後新增下列樣式，建立 .shrine-drawer 類別：

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

我們匯入了 @material/ripple/mixins，以便支援使用其中提供的 mdc-states-activated 組合。由於分享關係圖與狀態系統直接相關，因此 MDC 分享關係套件提供 mdc-ripple 和 mdc-states 混合功能。

重新整理位於 http://localhost:8080/home.html 的網頁。主畫面現在應如下所示：

我們配合色彩配置變更登入畫面的顏色。

在登入頁面新增 CSS 樣式

在 login.scss 中新增以下幾行內容：

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

此外，請在 .username, .password CSS 選取器中加入下列混合叫用：

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

重新整理位於 http://localhost:8080/ 的網頁。登入畫面現在應如下所示：

4. 修改字體排版和標籤樣式

除了變更顏色外，設計人員也為您提供網站專用的特定字體排版。讓我們在導覽匣中新增。

如要安裝 Typography 套件，請執行：

npm install @material/typography

新增字體排版的 CSS

在 home.scss 中，於現有匯入作業後方加上下列匯入陳述式：

@import "@material/typography/mdc-typography";

然後將下列混合叫用新增至 shrine-title 類別：

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

您可以透過我們剛才的做法，使用 Sass 混合設定來設定字體，或是在元素中加入特定類型類別 (例如 class="mdc-typography--headline6")。

接下來，我們要設定導覽匣項目的樣式。

新增行分隔符

在 home.html 中，在 <a ...>Featured</a> 元素後方立即新增以下內容：

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

在 home.scss 中加入下列樣式：

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

調整圖片項目和標籤

如要調整項目和標籤，請在 .product-list 選取器中將下列樣式新增至 home.scss：

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

重新整理頁面。主畫面現在應如下所示：

5. 調整高度

您已經為頁面套用了神宮特有的色彩和字體排版設定，現在讓我們來看看呈現神社產品的圖片清單。讓我們進一步強調產品，吸引觀眾目光。

如要安裝適用於海拔高度的套件，請執行：

npm install @material/elevation

新增匯入陳述式

在 home.scss 中最後一個匯入陳述式的後方，新增下列程式碼：

@import "@material/elevation/mdc-elevation";

使用新的 div 納入圖片清單

在 home.html 中，在 <ul> 元素前後加上下列標記：

<div class="shrine-body">
 <ul...>
</div>

使用 Sass 混合功能變更高度

在 home.scss 中新增以下內容：

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

透過叫用選取器中的 mdc-elevation Sass 混合情形，即可套用高度。

引人矚目！您已將圖片清單項目後方的白色表面左側邊緣加上陰影，讓它看起來像稍微浮動於導覽元素上方。

6. 變更版面配置

接下來，我們要變更版面配置，以不同的長寬比和大小顯示圖片，讓每張圖片看起來都不一樣。

修改 HTML

在 home.html 中更新 mdc-image-list 元素，加入 mdc-image-list--masonry 類別：

<ul class="mdc-image-list mdc-image-list--masonry product-list">

新增圖片

在 home.html 中，變更每個 img 元素的 src 屬性，以符合 assets 資料夾中的圖片。接著更新每張圖片的標籤文字。完成後，程式碼應如下所示：

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Weave keyring</span>
        </div>
      </li>
    </ul>

更新 CSS

在 home.scss 中移除 mdc-image-list-standard-columns(4) 組合，並替換為下列混合：

@include mdc-image-list-masonry-columns(4);

接著，將下列 padding 值新增至 home.scss 中的 product-list 類別：

.product-list {
  ...
  padding: 80px 100px 0;
}

您的程式碼現在應與 complete/ 資料夾中包含的程式碼相符。

圖片清單元件目前包含 2 個變化版本、標準和砌體，可讓清單項目以不同大小調整大小，或以特定方式配置。

7. 試試其他主題

顏色是展現品牌精神的有效方法，稍微改變顏色則可提升使用者體驗。如要測試這項功能，讓我們看看在品牌顏色配置完全不同的的情況下，消費者會有什麼變化。

修改 CSS

在 _variables.scss 中，將您為主要主題宣告的變數替換成以下內容：

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

在 login.scss 中移除 .username, .password 選取器中的混合項目。如下所示：

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

此外，請移除 .cancel 類別中的 mdc-button-ink-color 混合覆寫：

在 home.scss 中，將下列規則新增至 .home 類別：

background-color: $mdc-theme-background;

在 .shrine-logo-drawer 選取器中，將 fill 屬性取代為 on-primary 顏色：

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

同樣地，在 .shrine-title 選取器中，將 color 屬性設為 on-primary 顏色：

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

最後，移除 .shrine-body 選取器下方的 mdc-elevation 混音。

建構及執行。現在，新主題應該會顯示在您的瀏覽器中。

現在請前往 http://localhost:8080/home.html 查看 home.html 頁面的變更。

8. 回顧

您建立了一個與設計人員規格類似的應用程式。

已完成的 MDC-103 應用程式位於以下目錄：material-components-web-codelabs/mdc-103/complete

您可以針對該目錄中的網頁測試網頁版本。別忘了先在該目錄中執行 npm install！

後續步驟

您已使用下列 MDC 元件：主題、字體排版、高度和形狀。您可以前往 MDC Web Catalog 探索更多元件和子系統。

我可以在合理的時間內，完成本程式碼研究室

非常同意 同意 普通 不同意 非常不同意

我想日後繼續使用 Material Design 元件

非常同意 同意 普通 不同意 非常不同意