申請頁

2022.03.28

版型規範

版型:

  • 同行銷網頁表頭，並加上流程頁名稱。
  • 底色使用#F4F8FA primary-1。
  • 內容卡片寬度 1200px 陰影 #409D99 透明度 20％；卡片圓角 4px ；手機版則為滿版無陰影。

表尾:

  • 分為『一般版』與『警語版』。

分類標題:

  • 若有需分類標題，示意圖如下，企業色（#OOA19B primary-8)標題加底線。

輸入欄位:

  • 輸入框標題字級大小 18px 、寬度 152px ,字數8個字以上則需斷行，輸入框與標題置頂對齊。
  • 輸入框長度分為兩種版本，一般欄位使用版本一，如地址等需要較長的空間則使用版本二。

共用元件規範

1:1共用元件檔案下載
申請頁共用元件

步驟表示:

  • 當下與已完成步驟使用企業色（ #OOA19B primary-8)；未達進度使用( #D9D9D9 gray-5)。
  • 步驟條字數，每步驟至多8個字。

PC版：流程文字全展開

M版：流程文字只留當下步驟，已完成與未完成的只顯示數字

按鈕:

  • 欄位尚未填寫完整時，按鈕底色使用（ #ACACAC gray-6 );填寫完畢時，按鈕底色使用企業色（ #OOA19B primary-8)，詳細按鈕說明，請參照Button 按鈕。
  • 文字超連結則同Design System，使用底線企業色。
  • 下一步按鈕置中

卡片:

  • 可做一欄式、兩欄式或是三欄式，底色使用( #E1EFEF primary-2),邊框使用（ #BDE3E2 primary-3 ),不帶圓角。
  • 分為『一般卡片』與『互動元件式卡片』。

一般卡片

互動元件式卡片

表格:

一般表格

互動元件表格

同意事項:

  • 分為『滾動式』與『彈跳視窗式』，可依條款類型自行選用。

滾動式

彈跳視窗式:單一條款

彈跳視窗式:多則條款時，提供一鍵勾選按鈕

頁籤:

  • 線條版與色塊版，兩種款式供選擇，請參照Tab 頁籤。

線條版

色塊版


常見問題:

有色背景

  • 背景色#F4F8FA(primary-1)
  • 標題#00a19b(primary-8)

線框白底

  • 線框#D9D9D9(gray-5)
  • 標題#00a19b(primary-8)

注意事項:

  • 背景色#FAFAFA(gray-2)
  • 照需求選擇收合或展開的版本

警語:

  • 顏色依照強調色#EF7800、#F8524C、#00A19B擇一使用，切勿一次使用多種色
  • 照需求選擇收合或展開的版本

彈跳視窗:

  • 建議可使用Fancybox插件，設計方法同Design System，請參照Modal 彈跳視窗。