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

1. 簡介

logo_components_color_2x_web_96dp.png

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 來反映品牌:

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

9c51661824dfa934.png

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

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

軟硬體需求

  • 新版 Node.js (JavaScript 套件管理員 npm 隨附)。
  • 程式碼範例 (將在下一個步驟中下載)
  • 具備 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

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

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

在導覽匣中新增 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. 修改字體排版和標籤樣式

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

如要安裝 Typography 套件,請執行:

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. 調整高度

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

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

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. 試試其他主題

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

修改 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 混音。

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

7fdf830a944e53d7.png

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

7369127decb1a875.png

8. 回顧

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

後續步驟

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

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

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

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

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