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 來反映品牌:
- 顏色
- 字體排版
- 海拔高度
- 圖案
- 版面配置
本程式碼研究室中使用的 MDC Web 元件和子系統
- 主題
- 字體排版
- 海拔高度
- 圖片清單
軟硬體需求
針對網站開發的經驗程度,你會給予什麼評價?
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
您會看到許多活動,最後的終端機應該會顯示安裝成功:
執行範例應用程式
在同一個目錄中執行:
npm start
webpack-dev-server
將會啟動。將瀏覽器指向 http://localhost:8080/,即可查看該網頁。
大功告成!您應該會在瀏覽器中看到 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";
在導覽匣中新增 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 的網頁。主畫面現在應如下所示:
我們配合色彩配置變更登入畫面的顏色。
在登入頁面新增 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);
...
}
接下來,我們要設定導覽匣項目的樣式。
新增行分隔符
在 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
}
引人矚目!您已將圖片清單項目後方的白色表面左側邊緣加上陰影,讓它看起來像稍微浮動於導覽元素上方。
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/
資料夾中包含的程式碼相符。
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 元件:主題、字體排版、高度和形狀。您可以前往 MDC Web Catalog 探索更多元件和子系統。