跨頁 UI 總覽
這頁是 OCF.tw 官網改版 2016 年度結案交接文件之一，列出所有 UI 元件以及使用原則，讓接手設計的人有統一的決策依據，可以較方便地保持頁面之間的一致性。適用對象：網站介面設計師
| 展示型 | 列表型 | 文章型 | 邀請型（大） | 邀請型（小） | |
|---|---|---|---|---|---|
| 版型 |
頭條
|
標題
1
2
3
4
5
6
...
|
標題
1
2
3
1
2
3
|
標題
|
標題
|
| 套用 頁面 |
首頁
/
年度報告
/p/YYYY/
英文版
/en/
|
工作夥伴
/people/
專案與成果
/projects/
/p/
|
關於我們
/about/
媒體專區
/mediakit/
|
專案
/p/YYYY/project_id/
電子報
/news/
|
活動
/p/YYYY/project_id/event_id/
|
| 使用 意圖 |
掌握全貌
找尋資訊
|
取得資訊
|
|||
| 使用 方式 |
掃過全頁
細看局部
|
掃過大綱
閱讀內容
|
閱讀內容
按下動作按鈕
|
||
| 網頁 目的 |
傳遞資訊
激發興趣
創造正面印象
|
傳遞資訊
創造正面印象
|
傳遞資訊
|
傳遞資訊
號召行動
|
|
| 排版 原則 |
尺寸相似的區塊
區塊一個畫面可看完
區塊重點五個以內
|
尺寸相似的區塊
區塊一個畫面可看完
區塊重點五個以內
可清楚識別所在位置
隨時按得到選單
|
可清楚識別所在位置
隨時按得到大綱
|
可清楚識別所在位置
隨時按得到按鈕
|
可清楚識別所在位置
可清楚識別所屬專案
可輕易按到按鈕
|
| 頭條 標題 |
依頭條內容決定視覺元素
|
以 icon 為主要視覺元素，表示抽象概念
|
電子報頁以 icon 為主要視覺元素，表示抽象概念
專案頁以照片為主要視覺元素，表示具體專案
|
以上層專案的識別為主要視覺元素，表示從屬關係
|
|
| 選單 | 無 |
選單內容為列表的分類
選單項目字數盡量少
選單位於內容上方
|
選單內容為文章的大綱
選單項目字數不限
選單位於內容左側
|
無 | |
| 廣告 | 放置頁尾 | 不建議放置廣告，以免資訊負載過重 | 不可放置廣告，以免分散頁面主要訴求 | ||