跨頁 UI 總覽

這頁是 OCF.tw 官網改版 2016 年度結案交接文件之一,列出所有 UI 元件以及使用原則,讓接手設計的人有統一的決策依據,可以較方便地保持頁面之間的一致性。適用對象:網站介面設計師

展示型 列表型 文章型 邀請型(大) 邀請型(小)
版型
頭條
簡報 1
簡報 2
...
標題
1
2
3
4
5
6
...
標題
1
2
3
1
2
3
標題
GO
標題
GO
套用
頁面
首頁
/
年度報告
/p/YYYY/
英文版
/en/
工作夥伴
/people/
專案與成果
/projects/
/p/
關於我們
/about/
媒體專區
/mediakit/
專案
/p/YYYY/project_id/
電子報
/news/
活動
/p/YYYY/project_id/event_id/
使用
意圖
掌握全貌
找尋資訊
取得資訊
使用
方式
掃過全頁
細看局部
掃過大綱
閱讀內容
閱讀內容
按下動作按鈕
網頁
目的
傳遞資訊
激發興趣
創造正面印象
傳遞資訊
創造正面印象
傳遞資訊
傳遞資訊
號召行動
排版
原則
尺寸相似的區塊
區塊一個畫面可看完
區塊重點五個以內
尺寸相似的區塊
區塊一個畫面可看完
區塊重點五個以內
可清楚識別所在位置
隨時按得到選單
可清楚識別所在位置
隨時按得到大綱
可清楚識別所在位置
隨時按得到按鈕
可清楚識別所在位置
可清楚識別所屬專案
可輕易按到按鈕
頭條
標題
依頭條內容決定視覺元素
以 icon 為主要視覺元素,表示抽象概念
電子報頁以 icon 為主要視覺元素,表示抽象概念
專案頁以照片為主要視覺元素,表示具體專案
以上層專案的識別為主要視覺元素,表示從屬關係
選單
選單內容為列表的分類
選單項目字數盡量少
選單位於內容上方
選單內容為文章的大綱
選單項目字數不限
選單位於內容左側
廣告 放置頁尾 不建議放置廣告,以免資訊負載過重 不可放置廣告,以免分散頁面主要訴求

每月 300 元,支持我們繼續走下去

現在就捐款