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

1. 簡介

logo_components_color_2x_web_96dp.png

開發人員可透過 Material 元件 (MDC) 實作 Material Design。MDC 由 Google 的工程師和 UX 設計師團隊建立，提供數十種美觀實用的 UI 元件，適用於 Android、iOS、網頁和 Flutter。material.io/develop

在 MDC-101 和 MDC-102 程式碼研究室中，您使用 Material 元件 (MDC) 建構名為 Shrine 的應用程式基本架構，這是一款銷售服飾和居家用品的電子商務應用程式。這個應用程式的使用者流程從登入畫面開始，接著會將使用者帶往含有產品的主畫面。

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

建構項目

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

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

9c51661824dfa934.png

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

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

軟硬體需求

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

您對網頁開發的經驗程度為何？

新手 中級 熟練

2. 設定開發環境

是否要從 MDC-102 繼續？

如果您已完成 MDC-102，程式碼應該已準備就緒，可供本程式碼研究室使用。請跳到步驟 3：變更顏色。

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

啟動應用程式位於 material-components-web-codelabs-master/mdc-103/starter 目錄中。開始前，請務必 cd 到該目錄。

...或從 GitHub 複製

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

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

安裝專案依附元件

從起始目錄 material-components-web-codelabs/mdc-103/starter (如果您按照上述步驟操作，這應該是目前的目錄) 執行：

npm install

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

23003b0e5fdf9077.png

執行範例應用程式

在同一個目錄中執行下列指令：

npm start

webpack-dev-server就會開始。將瀏覽器設為指向 http://localhost:8080/，即可查看網頁。

61dc5a089bf0986b.png

太棒了，瀏覽器中應該會顯示 Shrine 的登入頁面。填寫「使用者名稱」和「密碼」欄位，然後按一下「下一步」按鈕前往首頁。左側應顯示導覽匣，旁邊是產品圖片格線。

e2f359c254988d75.png

導覽匣的功能正常運作後，我們來變更顏色、高度和排版，讓它符合 Shrine 品牌風格。

3. 變更顏色

這個色彩主題是由設計師使用自訂顏色建立而成 (如下圖所示)。其中包含從 Shrine 品牌選取的顏色，並套用至 Material Design 主題編輯器，該編輯器已擴充這些顏色，建立更完整的調色盤。(這些顏色並非來自 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";

為導覽匣新增 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);
  }
}

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

816105f1c5a033f2.png

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

在登入頁面中新增 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/ 重新整理頁面，登入畫面現在應如下所示：

9e0172a18582a44e.png

4. 修改排版和標籤樣式

除了顏色變更外，設計師也為您提供要在網站上使用的特定字體排版。我們也將其新增至導覽匣。

如要安裝排版套件，請執行：

npm install @material/typography

新增字體排版的 CSS

在 home.scss 中，於現有匯入項目後方新增下列匯入陳述式：

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

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

.shrine-title {
  @include 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);
  }
}

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

129ada72a02baf5a.png

5. 調整高度

您已使用 Shrine 的特定色彩和字體排版為網頁設定樣式，現在來看看顯示 Shrine 產品的圖片清單。讓我們加強產品的強調效果，吸引觀眾注意。

如要安裝 Elevation 的套件，請執行下列指令：

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
}

太棒了！您已在圖片清單項目後方白色表面的左側邊緣新增陰影，讓圖片清單項目看起來略高於導覽列。

66c3d6a82fb8bb23.png

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;
}

9c51661824dfa934.png

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

7. 試試其他主題

色彩是展現品牌形象的有效方式，而色彩的微小變化可能會對使用者體驗造成重大影響。為了進行測試，我們來看看如果品牌色彩配置完全不同，Shrine 會是什麼樣子。

修改 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 選取器中的 mixin。畫面應如下所示：

.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 混合。

建構並執行。瀏覽器現在應該會顯示新主題。

7fdf830a944e53d7.png

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

7369127decb1a875.png

8. 重點回顧

您現在已建立符合設計師規格的應用程式。

後續步驟

您已使用下列 MDC 元件：主題、字體排版、高程和形狀。如要進一步瞭解元件和子系統，請參閱 MDC Web 目錄。

我能夠在合理的時間和精力內完成本程式碼研究室

非常同意 同意 沒意見 不同意 非常不同意

我希望日後繼續使用 Material Design 元件

非常同意 同意 沒意見 不同意 非常不同意