詳解Material Theme

Material Theme 是 Google 為 Android 設計的一套 UI 界面風格，它的設計旨在提供一種更加具有深度感、物理感和空間感的界面風格。除了 Android 設備中應用程序的視覺設計，Material Theme 可以應用於網站、桌面應用和其他應用程序的設計上。

一、Material Theme 的特點

Material Theme 的設計旨在實現以下特點：

1.一致性

Material Theme 的 UI 設計準則提供了一系列內在一致的設計規範，致力於打造更具層次感的用戶體驗。

2.真實感

Material Theme 構建在紙張和墨水等物理層面的想像上，通過配色、陰影和動畫等效果實現了更加真實的界面視覺效果。

3.動畫效果

Material Theme 內置了豐富的動畫效果，包括方向感強的轉場動畫和更加流暢的按鈕點擊效果等。

4.共享元素轉場

共享元素轉場效果可以讓用戶直觀、順暢地進行頁面轉換，保證頁面間的視覺連續性。

二、Material Theme 的主題顏色

在 Material Theme 中，主題顏色可以定義為一組顏色值，包括：

1.主色

Material Theme 中的主色是應用程序的主要顏色，它的深淺程度決定應用的整體色調。你可以選擇從預定義的一組顏色值中選取或自定義色值。

2.強調色

用於突出顯示應用程序中重要的交互元素，它有望是主色的高飽和度變種色。

3.背景色

Material Theme 中的背景色應該是淺色的，以確保文本和圖像對比度明顯。

4.表面顏色

用於定義凸起的表面元素的顏色。

5.禁用顏色

主要適用于禁用狀態下的文本和元素。

三、Material Theme 的盒子陰影

在 Material Theme 中，使用盒子陰影可以在設計中實現更大的深度感。Material Theme 通過定義一套盒子陰影來提供多種陰影效果，包括：

1.正常的盒子陰影

    .box-shadow {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    }

2.焦點狀態的盒子陰影

    .box-shadow:focus {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
    }

3.浮動狀態的盒子陰影

    .box-shadow:hover {
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 14px 24px rgba(0, 0, 0, 0.16);
    }

四、Material Theme 的布局和組件

Material Theme 為多種常見的 UI 布局和組件提供了一套特定的設計規範，包括：

1.卡片

卡片是 Material Theme 中最為基本的 UI 組件，用於展示列表或詳細信息。卡片可以包含文本、圖片和其他各種 UI 元素。

    <div class="card">
        <div class="card-content">
            <span class="card-title">Card Title</span>
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
            <a href="#">This is a link</a>
            <a href="#">This is a link</a>
        </div>
    </div>

2.浮動按鈕

浮動按鈕是 Material Theme 中的另一個特色元素，它可以用於觸發特殊操作或顯示菜單選項。

    <a href="#" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>

3.導航欄

導航欄常用於應用程序的全局導航，Material Theme 中的導航欄通常具有線條和圖標等視覺效果。

    <nav>
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">JavaScript</a></li>
            </ul>
        </div>
    </nav>

4.標籤頁

標籤頁用於分隔內容和來回切換，Material Theme 中的標籤頁通常使用標籤和卡片來呈現，可以在不同標籤頁之間切換內容。

    <div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s3"><a href="#test1">Test 1</a></li>
                <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
                <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
                <li class="tab col s3"><a href="#test4">Test 4</a></li>
            </ul>
        </div>
        <div id="test1" class="col s12"><p>Test 1</p></div>
        <div id="test2" class="col s12"><p>Test 2</p></div>
        <div id="test3" class="col s12"><p>Test 3</p></div>
        <div id="test4" class="col s12"><p>Test 4</p></div>
    </div>

總結

Material Theme 是一個完整的 UI 設計系統，提供了各種視覺元素和組件，可用於設計各種應用程序或網站。如果你想提供更加符合人類視覺習慣的，具有層次感的用戶體驗，Material Theme 是你理想的選擇。