版面

我們的版面系統善用留白，注重細節，營造高級質感。

版面

概覽

概覽

網格

品牌識別沒有單一固定的網格。我們建議按應用需要調整基礎網格。內容越多，網格便應越密，例如網站。

4 欄

6 欄

8 欄

概覽

間距

我們採用編輯設計的手法，善用留白，讓版面上的所有元素都有足夠空間。

概覽

間距使用不當

不要將大型標誌與大型展示文字並用

確保版面內容有清晰的層次

版面

結構

結構

擺放位置

文字的位置應保持簡潔。大部分版面以左邊距上的一點為起點，再以此安排其他內容。

結構

行長

行長是指文字框的寬度，應按個別情況調整。正文每行以約 8–11 個詞為宜。

版面

文字與圖像

包含文字和圖像的版面應保持簡潔。避免版面過於擁擠，並確保圖像和文字清晰可辨。

圖像上的文字

文字與圖像各佔 50:50

版面

圖像框架

品牌識別中的圖像可透過三種方式呈現。

滿版

矩形框內

斜角框內

版面

斜角圖像框架

圖像可置於源自品牌圖案中 30° 角的獨特斜角形狀內。這種方式適合在同一版面展示多張圖像，但應節制使用。圖像仍應以矩形框呈現為主。

圖像框應以 30° 角裁切

每個形狀的兩邊必須延伸至版面邊緣以外，只顯示一個角。這個角必須是 120°，由斜線與垂直線或反方向的 30° 斜線相接而成。

斜角圖像框架

示例

形狀內的單張圖像

形狀內的兩張圖像

斜角圖像框架

錯誤用法

不要使用顯示多於一個角的框架

不要使用非 30° 角的框架

版面

細節處理

要呈現精緻效果，文字排版的細節至關重要。以下示例說明設計系統中的部分細節。

標題與副標題的字級應有鮮明對比

標題與副標題的字級應有鮮明對比