Material Design

又稱質感設計

基於紙張、油墨設計

為Google提出應用在手機App或Web的設計系統

針對字型、布局、過渡、填充、光影、陰影、元件操作回應都有詳細的定義

Higher Eagle如何使用Material Design

Higher Eagle的Web服務都是採用一套為Vuetify的Material Design Framework

這是基於我們Web使用的Vue.js技術上可配合使用的UI元件

以下為一些Vuetify元件、功能說明

卡片為我們Web服務最常使用的Vuetify元件

它可以呈現各種型態的資訊

並可置入各種資料

像是圖片、文字、連結、ICON

輪播工具

可用於多個圖片、或資訊卡片輪播使用

時間軸元件

當資料需要透過線性時間軸的方式來呈現

Timeline元件非常適合

所有細節一目了然

日期選擇元件

即使是跨月份、跨年度的選擇

也是非常方便快速

另外亦可調整為時間範圍選擇元件

由於都是Material Design元件

因此所有表單的元件擺在一起視覺上都是非常調和的

每種元件也都有文字(label)、停用狀態、唯讀狀態、子訊息等共同功能

以下為各種表單元件的統一使用情形範例