品牌規範
只做會想保的保險，
手機就可以完成更快更簡單，
合理的保障時間不浪費錢
保庇挑吉時
・
保險保吉時
這是吉時保平台所訂製的設計規範。
本文件的目的是提供，設計方向和設計元素，方便延續或延伸整體設計。
開始閱讀
商標
LOGO與標準字
我們在所有內容中使用的通用代表標記。希望任何人看到時，
都能立即辨識出這個品牌。
因此，外觀的一致性非常重要；
請勿編輯、變更、扭曲、調整此標誌，或為標誌重新上色。
比例
我們的商標包含LOGO與標準字。
LOGO與標準字垂直置中，
各元素之間請務必正確留空。
橫向
直向
更完整的LOGO使用規範請參考。
顏色
標準色
品牌整體用色上以綠色為主，
可使用桃紅色作為畫面上的重點點綴。
#00CC99
R 0
G 204
B 153
C 70
M 0
Y 55
K 0
PANTONE+ CMYK Coated 136-13 C
#FC4285
R 262
G 66
B 133
C 0
M 85
Y 20
K 0
PANTONE+ CMYK Coated 71-7 C
輔助色
#00A17D
R 0
G 161
B 125
C 80
M 0
Y 60
K 10
PANTONE+ CMYK Coated 136-14 C
#008665
R 0
G 134
B 101
C 90
M 0
Y 70
K 0
PANTONE+ CMYK Coated 137-15 C
#4D4D4D
R 77
G 77
B 77
C 0
M 0
Y 0
K 30
PANTONE+ CMYK Coated 179-13 C
#FFFFFF
R 255
G 255
B 255
C 0
M 0
Y 0
K 0
PANTONE+ CMYK Coated 1-1C
延伸色
#666666
R 102
G 102
B 102
C 0
M 0
Y 0
K 70
PANTONE+ CMYK Coated 179-11 C
#F5E035
R 245
G 224
B 53
C 0
M 18
Y 100
K 0
PANTONE+ CMYK Coated 7-8 C
字體
字體使用
網站
印刷
網站規範
吉時保平台希望使用者在需要的時候，隨時拿出手機，以手機操作投保在5分鐘內即可完成投保，吉時保平台 UI/UX 以手機瀏覽為出發。
手機就可以完成
・
更快更簡單
設計原則
行動裝置體驗
所有元件都必須符合 Responsive Web Design 的需求，在不同裝置上設計時，除了需在乎設計面積的大小以外，也要將使用該裝置的情境考慮進去。
簡單易用
簡潔直觀的使用介面及操作流程，讓使用者快速理解進而作出決策，而非記憶，減少用戶記憶負擔。
一致性
操作流程、邏輯保持一致，所有的元素和結構需保持一致，比如：設計樣式、圖示、文字，以及元件的用色尺寸大小，還有元件操作的回饋，Active、輸入前輸入後、錯誤，以及禁等狀態。
高解析度
所有的元件與圖形盡量使用 HTML、CSS、SVG 或 PNG 製作，讓網站在任何解析度下，都能夠清晰呈現。
Breakpoint
吉時保平台希望提供使用者，在不同的裝置上有量好的操作體驗，依照目前常用的 3 種類瀏覽裝置設定了5個 Breakpoint。 吉時保平台 Breakpoint 設定如下：
Mobile
600px 以下
Tablet
600px ~ 999px
PC
1000px ~ 1279px
1280px ~ 1679px
1680px 以上
Grid System
可點擊畫面右下角「Open Grid」按鈕，來檢視當前裝置的 Grid
System
為提供可延伸並流暢的頁面排版，吉時保平台以 Grid System 來編排設計頁面。 且為了讓使用者在提供大尺寸畫面，能更集中地瀏覽內容，在大尺寸畫面的 Content 固定寬度。
Breakpoint
600px 以下
- 總寬度：100%
- Margin：14px
- Gutter：14px
- Columns：2
600px ~ 999px
- 總寬度：100%
- Margin：20px
- Gutter：20px
- Columns：12
1000px ~ 1279px
- 總寬度：960px
- Margin：10px
- Gutter：20px
- Columns：12
1280px ~ 1679px
- 總寬度：1200px
- Margin：10px
- Gutter：20px
- Columns：12
1680px 以上
- 總寬度：1620px
- Margin：10px
- Gutter：20px
- Columns：12
間距
為增加版面的閱讀的流暢以及舒適，訂定了內容區塊的間距。
分別為：
- 內容區塊與 Header, Footer 的間距。
- 內容區塊之間的間距。
- 內容區塊內元件的間距。
內容與 Header, Footer
Breakpoint
600px 以下
- 內容區塊之間的間距為 30px。
600px 以上
- 內容區塊之間的間距為 50px。
內容區塊之間
Breakpoint
600px 以下
- 內容區塊之間的間距為 30px。
600px 以上
- 內容區塊之間的間距為 50px。
內容區塊內元件的間距
Breakpoint
600px 以下
- 內容區塊內元件的左右間距為 14px。
- 內容區塊內的元件，與下方元件的間距為 20px。
600px 以上
- 內容區塊內元件的左右間距為 20px。
- 內容區塊內的元件，與下方元件的間距為 20px。
顏色
為了避免視覺傳達差異，訂定了一套顏色來做規範。
標準色
即時保平台整體顏色，以及元件顏色，主要使用以綠色為主，可使用桃紅色作為畫面上的重點點綴。
#00CC99
R 0
G 204
B 153
#FC4285
R 262
G 66
B 133
標題
用在頁面主視覺、區塊標題，或小標題
#00CC99
R 0
G 204
B 153
#4D4D4D
R 77
G 77
B 77
#FFFFFF
R 255
G 255
B 255
一般文字
用在內容文案，或小提示文字
#4D4D4D
R 77
G 77
B 77
#999999
R 153
G 153
B 153
#FFFFFF
R 255
G 255
B 255
重點提示
用在提示或重點強調
#FC4285
R 262
G 66
B 133
文字連結
用在段落文字內需有連結之文字
#1085C6
R 77
G 77
B 77
背景色
#4D4D4D
R 77
G 77
B 77
#999999
R 153
G 153
B 153
#F2F2F2
R 242
G 242
B 242
#FFFFFF
R 255
G 255
B 255
框線色
#4D4D4D
R 77
G 77
B 77
#999999
R 153
G 153
B 153
#DDDDDD
R 221
G 221
B 221
表格
背景
#00CC99
R 0
G 204
B 153
表格的大標題
#666666
R 102
G 102
B 102
表格的次標題
#F2F2F2
R 242
G 242
B 242
表格的小標題
框線
#4D4D4D
R 77
G 77
B 77
表格外框線
狀態
#00CC99
R 0
G 204
B 153
成功
##CC0000
R 204
G 0
B 0
錯誤
#999999
R 153
G 153
B 153
禁用
文字
平台全站中文字型使用「微軟正黑體」，
英文字體為「Helvetica」。
基礎字級設定為 16px，
字體行高為字級的 1.5倍。
基本文字顏色為 #4D4D4D 的黑色。
區塊標題字級
用於每個區塊內容的大標題，為使畫面豐富段落分明，依不同的 Breakpoint ，設定不同的字級大小。
36px
600px 以下
並與其下方文字間距 20px。
40px
600px ~ 999px
並與其下方文字間距 30px。
48px
1000px ~ 1279px
1280px ~ 1679px
1680px 以上
並與其下方文字間距 30px。
共用字級
All Breakpoint
除了每個區塊內容的大標題，有依照Breakpoint 區分字級大小，以下字級皆共用。
標題
字級為 24px
用於頁面上的副標、Lightbox，以及POP的標題，並與其下方文字間距 20px。
小標題
字級為 18px
用於表格標題、表單標題，以及TAB標題。
內容文字
字級為 16px
用於一般內容文字，表格內文。
備註說明
字級為 14px
大部份用於投保流程，以及理賠流程的表單備註。
點點列表
- 用於不須以數字項目條列呈現之項目文字。
- ul padding left 1.5 em。
- 一般字粗項目呈現。
- 一般字粗項目呈現。
數字列表
- 用於須以數字項目條列呈現之項目文字
- ul padding left 1.5 em。
- 一般字粗項目呈現。
- 一般字粗項目呈現。
提醒文字
用於較重要之提醒文字。
重點提示文字顏色#FC4285。
icon 寬度：1.5em。
icon 字級：1em。
按鈕
字級與圖示
- 字級為16px的粗體。
- 圖示大小為17 x 10 px。
- 文字與圖示間距為 10px。
內距及圓角
- 按鈕四角圓角皆 5px。
- padding 上下 13px。
- padding 左右 10px。
寬度
Breakpoint
600px 以下
寬度為 100%
600px 以上
最小寬度為 182px。
高度
Breakpoint
1000px 以下
高度為 60px。
1000px 以上
高度為 50px。
跳頁按鈕
主要按鈕
用在頁面錨點及頁面跳轉。
次要按鈕
用在頁面次要跳頁按鈕。
返回按鈕
用在需要有返回上一頁功能的流程頁面。
實心按鈕
主要按鈕
用在不需要跳轉，或錨點的頁面。
次要按鈕
用在頁面次要跳頁按鈕。
線框型跳頁按鈕
用在有大量頁面跳轉功能之頁面，如保單列表頁面，或者非主要介紹之頁面，如保單詳細頁面。
主要按鈕
次要按鈕
用在頁面次要跳頁按鈕。
線框型按鈕
用保單詳細頁面，或流程頁面功能按鈕。
主要按鈕
次要按鈕
用在頁面次要跳頁按鈕。
下拉選單
字級與圖示
- 字級為16px的粗體。
- 圖示大小為17 x 10 px。
- 文字與圖示間距為 10px。
- border-bttom 為顏色 #999999，粗 1px 的實線。
邊距
padding 上下 13px。
高度
高度固定為為 50px。
單位
- 字文字與單位間距為 10px。
- 單位與圖示間距為 10px。
選項展開
Breakpoint
1000px 以下
下拉選單點擊後，展開之選項，在1000px 以下的行動裝置，使用該裝置系統原生功能，可點擊下方實際範例觀看。
狀態
錯誤訊息
輸入框
圓角輸入框
- 字級為16px的粗體。
- input 四角圓角皆 5px。
- border 為顏色 #999999，粗 1px 的實線。
邊距
- padding 上下 13px。
- padding 左右 10px。
高度
高度固定為為 50px。
狀態
錯誤訊息
底線輸入框
- 字級為16px的粗體。
- border-bttom 為顏色 #999999，粗 1px 的實線。
邊距
padding 上下 13px。
高度
高度固定為為 50px。
狀態
錯誤訊息
選項
一般單選
- icon 大小為 30px X 30px。
- icon 與選項文字間距為 10px。
狀態
按鈕形單選
- 字級為16px的粗體。
- 四角圓角皆 25px。
- border 為顏色 #999999，粗 1px 的實線。
邊距
- padding 上下 13px。
- padding 左右 10px。
高度
高度固定為為 50px
狀態
-
錯誤訊息
一般複選
- icon 大小為 30px X 30px。
- icon 與選項文字間距為 10px。
- 字級為16px的粗體。
字多呈現
當選項項目字數過多，需要折行時，checkbox
與選項文字水平垂直置中。
狀態
按鈕形複選
- 字級為16px的粗體。
- 四角圓角皆 5px。
- border 為顏色 #999999，粗 1px 的實線。
邊距
- padding 上下 13px。
- padding 左右 10px。
高度
高度固定為為 50px
狀態
-
錯誤訊息